maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[StatusPage] Moved styles into their own file, fixed tick formatting problems on the charts

Browse source
This commit is contained in:
Khalah Jones-Golden 2015-05-12 12:17:44 -04:00
parent 31ff04a80b
commit afff72fc8d
4 changed files with 149 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Gruntfile.js
View file

@ -43,6 +43,7 @@ module.exports = function (grunt) {
'<%= src %>/kibana/components/*/*.less',
'<%= src %>/kibana/styles/main.less',
'<%= src %>/kibana/components/vislib/styles/main.less',
'<%= src %>/hapi/plugins/status/styles/main.less',
'<%= plugins %>/dashboard/styles/main.less',
'<%= plugins %>/discover/styles/main.less',
'<%= plugins %>/settings/styles/main.less',

124
src/hapi/plugins/status/public/index.html
View file

@ -6,127 +6,7 @@
<link rel="shortcut icon" href="/styles/theme/elk.ico">
<link rel="stylesheet" href="/styles/main.css?_b=@@buildNum">
<style>
.section {
margin-bottom: 15px;
}
.system_status_wrapper {
border: 1px solid #0a8e03;
border-radius: 5px;
overflow: hidden;
}
.system_status_wrapper .title {
color: #fff;
height: 50px;
line-height: 50px;
background-color: #0a8e03;
margin: 0 0 10px 0;
padding: 0 15px;
background: -moz-linear-gradient(left, #0a8e03 0%, #96f501 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a8e03), color-stop(100%,#96f501));
background: -webkit-linear-gradient(left, #0a8e03 0%,#96f501 100%);
background: -o-linear-gradient(left, #0a8e03 0%,#96f501 100%);
background: -ms-linear-gradient(left, #0a8e03 0%,#96f501 100%);
background: linear-gradient(to right, #0a8e03 0%,#96f501 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a8e03', endColorstr='#96f501',GradientType=1 );
}
.system_status_wrapper.system_status_danger {
border-color: #da1e04;
}
.system_status_wrapper.system_status_danger .title {
border-color: #da1e04;
background: #da1e04;
background: -moz-linear-gradient(left, #da1e04 0%, #ff730f 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#da1e04), color-stop(100%,#ff730f));
background: -webkit-linear-gradient(left, #da1e04 0%,#ff730f 100%);
background: -o-linear-gradient(left, #da1e04 0%,#ff730f 100%);
background: -ms-linear-gradient(left, #da1e04 0%,#ff730f 100%);
background: linear-gradient(to right, #da1e04 0%,#ff730f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da1e04', endColorstr='#ff730f',GradientType=1 );
}
.system_status_wrapper.system_status_warning {
border-color: #fdee00;
}
.system_status_wrapper.system_status_warning .title {
border-color: #fdee00;
background: #fdee00;
background: -moz-linear-gradient(left, #fdee00 0%, #c16f00 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fdee00), color-stop(100%,#c16f00));
background: -webkit-linear-gradient(left, #fdee00 0%,#c16f00 100%);
background: -o-linear-gradient(left, #fdee00 0%,#c16f00 100%);
background: -ms-linear-gradient(left, #fdee00 0%,#c16f00 100%);
background: linear-gradient(to right, #fdee00 0%,#c16f00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdee00', endColorstr='#c16f00',GradientType=1 );
}
#plugin_table {
margin: 0 15px 15px 15px;
}
#plugin_table .plugin_row {
height: 30px;
line-height: 30px;
}
#plugin_table .plugin_table_header {
font-size: 10px;
color: #a9a9a9;
height: 25px;
line-height: 25px;
}
#plugin_table .plugin_row + .plugin_row,
.status_chart_wrapper {
border-top: 1px solid #ebebeb;
}
#plugin_table .plugin_state,
.status_chart_wrapper {
border-left: 1px solid #ebebeb;
}
#plugin_table .plugin_table_plugin {
color: #608b32;
}
#plugin_table .plugin_key {
font-weight: bold;
}
#plugin_table .plugin_state,
#plugin_table .plugin_key {
padding: 0;
}
#plugin_table .plugin_state {
padding-left: 15px;
}
#plugin_table .plugin_status_danger {
color: #da1e04;
}
/********** Charts **********/
#chart_cont {
margin-top: 35px;
}
.status_chart_wrapper:nth-child(2),
.status_chart_wrapper:nth-child(3),
.status_chart_wrapper:first-child { border-top: 0 none transparent; }
.status_chart_wrapper:nth-child(3n + 1),
.status_chart_wrapper:first-child { border-left: 0 none transparent; }
.status_chart_wrapper:nth-child(n + 4) {
padding-top: 20px;
}
.status_chart_wrapper .average {
font-size: 51px;
line-height: 48px;
margin-top: 0;
font-weight: bold;
}
.status_chart_wrapper .title {
margin: 0 0 5px 0;
text-transform: capitalize;
}
.nv-axis.nv-x .tick line {
display: none;
}
</style>
<link rel="stylesheet" href="styles/main.css?_b=@@buildNum">
</head>
<body>
<div class="container" ng-controller="StatusPage">
@ -164,7 +44,7 @@
<h1 class="average">
<span ng-repeat="average in chart.average track by $index"><span ng-if="$index">, </span>{{average}}</span>
</h1>
<nvd3 options="ui.chartOptions" data="chart.data"></nvd3>
<nvd3 options="chart.options" data="chart.data"></nvd3>
</div>
<div class="clearfix"></div>
</div>

58
src/hapi/plugins/status/public/index.js
View file

@ -68,6 +68,31 @@ define(['angular', 'jquery', 'lodash', 'moment', 'numeral', 'nvd3_directives'],
return 'precise';
}
}
var makeChartOptions = _.memoize(function (type) {
return {
chart: {
type: 'lineChart',
height: 200,
showLegend: false,
showXAxis: false,
showYAxis: false,
useInteractiveGuideline: true,
tooltips: true,
pointSize: 0,
color: ['#444', '#777', '#aaa'],
margin: {
top: 10,
left: 0,
right: 0,
bottom: 20
},
xAxis: { tickFormat: function(d) { return formatNumber(d, 'time'); } },
yAxis: { tickFormat: function(d) { return formatNumber(d, type); }, },
y: function(d) { return d.y; },
x: function(d) { return d.x; }
}
};
});
// The Kibana App
angular.module('KibanaStatusApp', ['nvd3'])
@ -103,31 +128,6 @@ define(['angular', 'jquery', 'lodash', 'moment', 'numeral', 'nvd3_directives'],
plugins: [],
chartAverages: [],
chartOptions: {
chart: {
type: 'lineChart',
height: 200,
showLegend: false,
showXAxis: false,
showYAxis: false,
useInteractiveGuideline: true,
tooltips: true,
pointSize: 0,
color: ['#444', '#777', '#aaa'],
margin: {
top: 10,
left: 0,
right: 0,
bottom: 20
},
xAxis: {
tickFormat: function(d) { return formatNumber(d, 'time'); }
},
yAxis: {
tickFormat: function(d) { return formatNumber(d); },
},
y: function(d) { return d.y; },
x: function(d) { return d.x; }
}
}
};
@ -154,6 +154,7 @@ define(['angular', 'jquery', 'lodash', 'moment', 'numeral', 'nvd3_directives'],
// Go through all of the metric values and split the values out.
// returns an array of all of the averages
var metricList = [];
var metricNumberType = numberType(name);
metric.forEach(function(vector) {
var _vector = _(vector).flatten();
@ -173,10 +174,11 @@ define(['angular', 'jquery', 'lodash', 'moment', 'numeral', 'nvd3_directives'],
var uglySum = data.values.reduce(function(sumSoFar, vector) {
return sumSoFar + vector.y;
}, 0);
return formatNumber(uglySum / data.values.length, numberType(name));
return formatNumber(uglySum / data.values.length, metricNumberType);
});
var options = makeChartOptions(metricNumberType);
return { data: metricList, average: average, niceName: niceName(name) };
return { data: metricList, average: average, niceName: niceName(name), options: options };
});
// give the plugins their proper name so CSS classes can be properply applied
@ -185,6 +187,8 @@ define(['angular', 'jquery', 'lodash', 'moment', 'numeral', 'nvd3_directives'],
return plugin;
});
console.log((new Date()).getTime());
// go ahead and get another status in 5 seconds
setTimeout(getAppStatus, 5000);
})

115
src/hapi/plugins/status/public/styles/main.less Normal file
View file

@ -0,0 +1,115 @@
.section {
margin-bottom:15px;
}
.system_status_wrapper {
border:1px solid #0a8e03;
border-radius:5px;
overflow:hidden;
.title {
color:#ffffff;
height:50px;
line-height:50px;
background-color:#0a8e03;
margin:0 0 10px 0;
padding:0 15px;
background:-moz-linear-gradient(left,#0a8e03 0%,#96f501 100%);
background:-webkit-gradient(linear,left top,right top,color-stop(0%,#0a8e03),color-stop(100%,#96f501));
background:-webkit-linear-gradient(left,#0a8e03 0%,#96f501 100%);
background:-o-linear-gradient(left,#0a8e03 0%,#96f501 100%);
background:-ms-linear-gradient(left,#0a8e03 0%,#96f501 100%);
background:linear-gradient(to right,#0a8e03 0%,#96f501 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a8e03',endColorstr='#96f501',GradientType=1);
}
}
.system_status_wrapper.system_status_danger {
border-color:#da1e04;
.title {
border-color:#da1e04;
background:#da1e04;
background:-moz-linear-gradient(left,#da1e04 0%,#ff730f 100%);
background:-webkit-gradient(linear,left top,right top,color-stop(0%,#da1e04),color-stop(100%,#ff730f));
background:-webkit-linear-gradient(left,#da1e04 0%,#ff730f 100%);
background:-o-linear-gradient(left,#da1e04 0%,#ff730f 100%);
background:-ms-linear-gradient(left,#da1e04 0%,#ff730f 100%);
background:linear-gradient(to right,#da1e04 0%,#ff730f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#da1e04',endColorstr='#ff730f',GradientType=1);
}
}
.system_status_wrapper.system_status_warning {
border-color:#fdee00;
.title {
border-color:#fdee00;
background:#fdee00;
background:-moz-linear-gradient(left,#fdee00 0%,#c16f00 100%);
background:-webkit-gradient(linear,left top,right top,color-stop(0%,#fdee00),color-stop(100%,#c16f00));
background:-webkit-linear-gradient(left,#fdee00 0%,#c16f00 100%);
background:-o-linear-gradient(left,#fdee00 0%,#c16f00 100%);
background:-ms-linear-gradient(left,#fdee00 0%,#c16f00 100%);
background:linear-gradient(to right,#fdee00 0%,#c16f00 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdee00',endColorstr='#c16f00',GradientType=1);
}
}
#plugin_table {
margin:0 15px 15px 15px;
.plugin_row {
height:30px;
line-height:30px;
+ .plugin_row {
border-top:1px solid #ebebeb;
}
}
.plugin_table_header {
font-size:10px;
color:#a9a9a9;
height:25px;
line-height:25px;
}
.plugin_state {
border-left:1px solid #ebebeb;
padding:0;
padding-left:15px;
}
.plugin_table_plugin {
color:#608b32;
}
.plugin_key {
font-weight:bold;
padding:0;
}
.plugin_status_danger {
color:#da1e04;
}
}
.status_chart_wrapper {
border-top:1px solid #ebebeb;
border-left:1px solid #ebebeb;
.average {
font-size:51px;
line-height:48px;
margin-top:0;
font-weight:bold;
}
.title {
margin:0 0 5px 0;
text-transform:capitalize;
}
}
#chart_cont {
margin-top:35px;
}
.status_chart_wrapper:nth-child(2), .status_chart_wrapper:nth-child(3) {
border-top:0 none transparent;
}
.status_chart_wrapper:first-child {
border-top:0 none transparent;
border-left:0 none transparent;
}
.status_chart_wrapper:nth-child(3n + 1) {
border-left:0 none transparent;
}
.status_chart_wrapper:nth-child(n + 4) {
padding-top:20px;
}
.nv-axis.nv-x .tick line {
display:none;
}