mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
update serverStatus css
This commit is contained in:
Spencer Alger
parent
3c9f179d97
commit
665bfbb166
4 changed files with 101 additions and 75 deletions
|
|
@ -91,6 +91,8 @@ require('modules')
|
|||
});
|
||||
|
||||
function getAppStatus() {
|
||||
$scope.ui.loading = true;
|
||||
|
||||
// go ahead and get the info you want
|
||||
$http
|
||||
.get('/api/status')
|
||||
|
|
@ -153,6 +155,9 @@ require('modules')
|
|||
})
|
||||
.error(function () {
|
||||
window.alert('Something went terribly wrong while making the request!!! Perhaps your server is down?');
|
||||
})
|
||||
.finally(function () {
|
||||
$scope.ui.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,32 +4,43 @@
|
|||
<strong>Kibana</strong> Status Page
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<section class="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>
|
||||
<div class="system_status_wrapper system_status_{{ui.overallStatus.id}}">
|
||||
|
||||
<div class="system_status_wrapper state_default state_{{ui.overallStatus.state}}">
|
||||
|
||||
<h3 class="title">
|
||||
<b>
|
||||
System Status:
|
||||
</b>
|
||||
<i class="fa fa-{{ui.overallStatus.icon}}"></i> {{ui.overallStatus.message}}
|
||||
{{ui.overallStatus.nickname || ui.overallStatus.title}}
|
||||
</h3>
|
||||
<table id="plugin_table">
|
||||
<tr class="plugin_table_header plugin_row">
|
||||
<th class="col-xs-1 plugin_key">Plugin</th>
|
||||
<th class="col-xs-11 plugin_state">Status</th>
|
||||
</tr>
|
||||
<tr
|
||||
ng-repeat="status in ui.statuses"
|
||||
class="plugin_table_plugin plugin_row plugin_status_{{status.state}}">
|
||||
|
||||
<td class="col-xs-1 plugin_key">{{status.name}}</td>
|
||||
<td class="col-xs-11 plugin_state">{{status.message}}</td>
|
||||
<div ng-if="!ui.statuses && ui.loading" class="loading_statuses">
|
||||
<span class="spinner"></span>
|
||||
</div>
|
||||
|
||||
<h4 ng-if="!ui.statuses && !ui.loading" class="missing_statuses">
|
||||
No status information available
|
||||
</h4>
|
||||
|
||||
<table class="status_breakdown" ng-if="ui.statuses">
|
||||
<tr>
|
||||
<th class="col-xs-1">Name</th>
|
||||
<th class="col-xs-11">Description</th>
|
||||
</tr>
|
||||
<tr ng-repeat="status in ui.statuses" class="status_row state_default state_{{status.state}}">
|
||||
<td class="col-xs-1 status_name">{{status.name}}</td>
|
||||
<td class="col-xs-11 status_message">{{status.message}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Server Metrics</h2>
|
||||
<p>Interval of 5 seconds, with a max history of 5 minutes.</p>
|
||||
<div id="chart_cont" class="row">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ require('plugins/serverStatus/KibanaStatusApp');
|
|||
require('plugins/serverStatus/serverStatus.less');
|
||||
|
||||
require('chrome')
|
||||
.setNavBackground('grey')
|
||||
.setTabs([
|
||||
{
|
||||
id: '',
|
||||
|
|
|
|||
|
|
@ -1,85 +1,45 @@
|
|||
.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 {
|
||||
|
||||
.status_breakdown {
|
||||
margin:0 15px 15px 15px;
|
||||
.plugin_row {
|
||||
|
||||
.status_row {
|
||||
height:30px;
|
||||
line-height:30px;
|
||||
+ .plugin_row {
|
||||
+ .status_row {
|
||||
border-top:1px solid #ebebeb;
|
||||
}
|
||||
}
|
||||
.plugin_table_header {
|
||||
|
||||
th {
|
||||
font-size:10px;
|
||||
color:#a9a9a9;
|
||||
height:25px;
|
||||
line-height:25px;
|
||||
}
|
||||
.plugin_state {
|
||||
|
||||
.status_name {
|
||||
font-weight:bold;
|
||||
padding:0px 5px;
|
||||
}
|
||||
|
||||
.status_message {
|
||||
border-left:1px solid #ebebeb;
|
||||
padding:0;
|
||||
padding-left:15px;
|
||||
}
|
||||
.plugin_table_plugin {
|
||||
color:#608b32;
|
||||
}
|
||||
.plugin_key {
|
||||
font-weight:bold;
|
||||
padding:0px 5px;
|
||||
}
|
||||
.plugin_status_danger {
|
||||
color:#da1e04;
|
||||
}
|
||||
|
||||
.system_status_wrapper {
|
||||
.missing_statuses,
|
||||
.loading_statuses {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.status_chart_wrapper {
|
||||
border-top:1px solid #ebebeb;
|
||||
border-left:1px solid #ebebeb;
|
||||
|
|
@ -94,22 +54,73 @@
|
|||
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;
|
||||
}
|
||||
|
||||
.state(@primary, @secondary) {
|
||||
&.system_status_wrapper {
|
||||
border:1px solid @primary;
|
||||
border-radius:5px;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
color:#ffffff;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
margin:0 0 10px 0;
|
||||
padding:0 15px;
|
||||
border-color:@primary;
|
||||
background:@primary;
|
||||
background:-moz-linear-gradient(left,@primary 0%,@secondary 100%);
|
||||
background:-webkit-gradient(linear,left top,right top,color-stop(0%,@primary),color-stop(100%,@secondary));
|
||||
background:-webkit-linear-gradient(left,@primary 0%,@secondary 100%);
|
||||
background:-o-linear-gradient(left,@primary 0%,@secondary 100%);
|
||||
background:-ms-linear-gradient(left,@primary 0%,@secondary 100%);
|
||||
background:linear-gradient(to right,@primary 0%,@secondary 100%);
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@primary,endColorstr=@secondary,GradientType=1);
|
||||
}
|
||||
}
|
||||
|
||||
&.status_row {
|
||||
color: @primary;
|
||||
}
|
||||
}
|
||||
|
||||
.state_default {
|
||||
.state(#7C7C7C, #CFCFCF);
|
||||
}
|
||||
|
||||
.state_green {
|
||||
.state(#0a8e03, #96f501);
|
||||
}
|
||||
|
||||
.state_yellow {
|
||||
.state(#fdee00, #c16f00);
|
||||
}
|
||||
|
||||
.state_red {
|
||||
.state(#da1e04, #ff730f);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue