mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
[StatusPage] Moved styles into their own file, fixed tick formatting problems on the charts
This commit is contained in:
Khalah Jones-Golden
parent
31ff04a80b
commit
afff72fc8d
4 changed files with 149 additions and 149 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
115
src/hapi/plugins/status/public/styles/main.less
Normal 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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue