Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[StatusPage] The basics and such just to get the basics of the staus …
…page
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,70 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>Kibana Status</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
||
| <link rel="shortcut icon" href="/styles/theme/elk.ico"> | ||
| <link rel="stylesheet" href="/styles/main.css?_b=@@buildNum"> | ||
|
|
||
| <style> | ||
| .status_chart_wrapper { float: left; } | ||
| .status_chart { | ||
| height: auto; | ||
| width: auto; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <header> | ||
| <h1> | ||
| <strong>Kibana</strong> Status | ||
| </h1> | ||
| </header> | ||
| <div> | ||
| <section> | ||
| <h4>What is this page?</h4> | ||
| <p>This page is your sanity check, and your savior. You can check for potential problems</p> | ||
| <p>Here is the status of your kibana instance and the plugins you have installed along with some, statistics to asses potential problems.</p> | ||
| </section> | ||
| <section> | ||
| <h4>What is this page?</h4> | ||
| <p>This page is your sanity check, and your savior. You can check for potential problems</p> | ||
| </section> | ||
| <div ng-controller="StatusPage"> | ||
| <div id="system-status" class="alert alert-{{ui.systemStatus().label}}"> | ||
| {{ui.systemStatus().msg}} | ||
| </div> | ||
| <div id="plugin-cont"> | ||
| <div ng-repeat="(key, plugin) in ui.plugins" class="plugin"> | ||
| <div class="alert alert-{{plugin.uiStatus}}"> | ||
| {{key}}: {{plugin.message}} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div id="chart-cont"> | ||
| <div ng-repeat="(key, chart) in ui.charts" class="status_chart_wrapper"> | ||
| <h2 class="title">{{key}}</h2> | ||
| <nvd3-sparkline-chart | ||
| id="{{key}}-chart" | ||
| data="chart" | ||
| width="450" | ||
| height="200" | ||
| x="ui.nvd3Config.getX" | ||
| y="ui.nvd3Config.getY"> | ||
| <svg class="status_chart"></svg> | ||
| </nvd3-sparkline-chart> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <footer></footer> | ||
| </div> | ||
| <script type="text/javascript" src="/bower_components/requirejs/require.js?_b=@@buildNum"></script> | ||
| <script type="text/javascript" src="/require.config.js?_b=@@buildNum"></script> | ||
| <script type="text/javascript"> | ||
| require(['/status/index.js'], function(kibanaStatus) { kibanaStatus.init(); }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| define(['angular', 'jquery', 'lodash', 'nvd3', 'nvd3_directives'], | ||
| function (angular, $, _, nvd3, directives) { | ||
|
|
||
| // Make sure we don't have to deal with statuses by hand | ||
| function getStatus(plugin) { | ||
| var statusMap = { | ||
| green: { | ||
| label: 'success', | ||
| msg: 'All systems are a Go.', | ||
| idx: 1 | ||
| }, | ||
| yellow: { | ||
| label: 'warning', | ||
| msg: 'S.N.A.F.U.', | ||
| idx: 2 | ||
| }, | ||
| red: { | ||
| label: 'danger', | ||
| msg: 'Danger Will Robinson! Danger!', | ||
| idx: 3 | ||
| }, | ||
| loading: { | ||
| label: 'info', | ||
| msg: 'Loading...', | ||
| idx: 0 | ||
| } | ||
| }; | ||
| if(!_.isObject(plugin) || _.isUndefined(plugin)) { | ||
| plugin = {state: plugin}; | ||
| } | ||
| return statusMap[plugin.state]; | ||
| } | ||
| function getLabel(plugin) { return getStatus(plugin).label; } | ||
|
|
||
|
|
||
| // The Kibana App | ||
| angular.module('KibanaStatusApp', ['nvd3ChartDirectives']) | ||
| .controller('StatusPage', ['$scope', '$http', function($scope, $http) { | ||
| // the object representing all of the elements the ui touches | ||
| $scope.ui = { | ||
| systemStatus: function() { | ||
| function getIdx(plugin) { return getStatus(plugin).idx; } | ||
| return function() { | ||
| var currentStatus = 'loading'; | ||
| var currentIdx = getIdx(currentStatus); | ||
| // FIXME eh, not too thrilled about this. | ||
| var status = _.reduce($scope.ui.plugins, function(curr, plugin, key) { | ||
| var pluginIdx = getIdx(plugin); | ||
| if (pluginIdx > currentIdx) { | ||
| // set the current status | ||
| currentStatus = plugin.state; | ||
| currentIdx = getIdx(plugin); | ||
| } | ||
| return currentStatus; | ||
| }, 'loading'); | ||
|
|
||
|
|
||
| // give the ui the label for colors and such | ||
| return getStatus(status); | ||
| } | ||
| }(), | ||
| charts: [], | ||
| plugins: [], | ||
| nvd3Config: { | ||
| getX: function(d) { return d[0]; }, | ||
| getY: function(d) { | ||
| if(d) { | ||
| if(_.isArray(d[1])) { | ||
| return d[1][0]; | ||
| } | ||
| } else { | ||
| debugger; | ||
| } | ||
| return d[1]; | ||
| } | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| // go ahead and get the info you want | ||
| $http | ||
| .get('/status/health') | ||
| .success(function(data) { | ||
| // Assign the propper variables to the scope | ||
| $scope.ui.charts = data.metrics; | ||
| $scope.ui.plugins = _.mapValues(data.status, function(plugin) { | ||
| plugin.uiStatus = getLabel(plugin); | ||
| return plugin; | ||
| }); | ||
|
|
||
| console.log($scope.ui); | ||
| }) | ||
| .error(function() { | ||
| alert('Something went terribly wrong while making the request!!!'); | ||
| }); | ||
| }]); | ||
|
|
||
| return { | ||
| init: function() { | ||
| $(function() { | ||
| angular.bootstrap(document, ['nvd3ChartDirectives', 'KibanaStatusApp']); | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -204,4 +204,4 @@ define(function (require) { | |
|
|
||
| return ResizeChecker; | ||
| }; | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
shouldn't need d3 again.