From afff72fc8d9a501b2bedb44054ce10d6f104d5d1 Mon Sep 17 00:00:00 2001 From: Khalah Jones-Golden Date: Tue, 12 May 2015 12:17:44 -0400 Subject: [PATCH] [StatusPage] Moved styles into their own file, fixed tick formatting problems on the charts --- Gruntfile.js | 1 + src/hapi/plugins/status/public/index.html | 124 +----------------- src/hapi/plugins/status/public/index.js | 58 ++++---- .../plugins/status/public/styles/main.less | 115 ++++++++++++++++ 4 files changed, 149 insertions(+), 149 deletions(-) create mode 100644 src/hapi/plugins/status/public/styles/main.less diff --git a/Gruntfile.js b/Gruntfile.js index 33089b19289c..f354cfe9254b 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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', diff --git a/src/hapi/plugins/status/public/index.html b/src/hapi/plugins/status/public/index.html index aad9569a01ff..f0da5b7c3c09 100644 --- a/src/hapi/plugins/status/public/index.html +++ b/src/hapi/plugins/status/public/index.html @@ -6,127 +6,7 @@ - - +
@@ -164,7 +44,7 @@

, {{average}}

- +
diff --git a/src/hapi/plugins/status/public/index.js b/src/hapi/plugins/status/public/index.js index 490168daafd0..68cc52633278 100644 --- a/src/hapi/plugins/status/public/index.js +++ b/src/hapi/plugins/status/public/index.js @@ -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); }) diff --git a/src/hapi/plugins/status/public/styles/main.less b/src/hapi/plugins/status/public/styles/main.less new file mode 100644 index 000000000000..20f554939543 --- /dev/null +++ b/src/hapi/plugins/status/public/styles/main.less @@ -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; +}