x/bansho
Code Issues Proposed changes

Add css on service status page and add light theme

Browse Source 
Change-Id: Iaa6af5b5aafb97a058ab03ae3e02c653252e68c5
This commit is contained in:
Thibault Cohen 2015-06-01 18:44:37 -04:00 committed by aviau
parent fddd4693e3
commit 9f483b442a
21 changed files with 271 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/assets/sass/global/_color-schemes.scss
View File

@ -6,6 +6,44 @@
//----------------------------------*/
.color-scheme--light {
// Light scheme is not ready for now.
%colorTxtCurrent {
color:$_color_light_delta;
}
%colorHightContrast {
color:$_color_alpha;
}
// For panel and the sidebar
%colorBkgPanel {
background:$_color_light_beta;
}
%colorLink {
color:$_color_light_delta;
transition-duration: 0.5s;
transition-property: color;
&:hover {
color:$_color_alpha;
}
}
%colorBorderThin {
border-color:$_color_light_epsilon;
}
%colorBkgTopbar {
background:$_color_light_alpha;
}
%colorBkgTopbarPanel {
background:$_color_light_beta;
}
%colorBkgTopbarButton {
background:$_color_light_alpha;
}
}
// Dark Scheme

6
app/assets/sass/modules-interface/_main.scss
View File

@ -17,7 +17,7 @@
}
.color-scheme--light & {
background:$_color_light_beta;
background:$_color_omega;
}
table {width:100%;}
@ -50,7 +50,7 @@
}
.color-scheme--light & {
color:$_color_light_alpha;
color:$_color_light_delta;
}
}
}
@ -66,7 +66,7 @@
}
.color-scheme--light & {
border-top-color:$_color_light_beta;
border-top-color:$_color_light_delta;
}
}

8
app/assets/sass/modules-objects/_data-table.scss
View File

@ -51,7 +51,7 @@
}
.color-scheme--light & {
border-color:$_color_light_beta;
border-color:$_color_light_epsilon;
}
}
@ -83,7 +83,7 @@
}
.color-scheme--light & {
border-color:$_color_light_beta;
border-color:$_color_light_epsilon;
}
/* &:before { */
@ -128,8 +128,8 @@
}
.color-scheme--light & {
background:$_color_light_beta;
border-color:$_color_light_gamma;
background:$_color_light_alpha;
border-color:$_color_light_epsilon;
&.state--asc,
&.state--desc {background:$_color_light_alpha;}

6
app/assets/sass/modules-objects/_filters.scss
View File

@ -13,7 +13,7 @@
.color-scheme--light & {
background:$_color_light_gamma;
border-color:$_color_light_beta;
border-color:$_color_light_epsilon;
}
}
@ -49,7 +49,7 @@
}
.color-scheme--light & {
border-color:$_color_light_beta;
border-color:$_color_light_epsilon;
}
.filters__item--more &,
@ -80,7 +80,7 @@
}
.color-scheme--light & {
background:$_color_light_beta;
background:$_color_light_epsilon;
color:$_color_alpha;
}
}

4
app/assets/sass/modules-objects/_panes.scss
View File

@ -21,7 +21,7 @@
}
.color-scheme--light & {
background:$_color_light_gamma;
background:$_color_light_alpha;
}
}
@ -56,7 +56,7 @@
}
.color-scheme--light & {
border-color:$_color_light_beta;
border-color:$_color_light_delta;
}
.panes--2 & {width:50%;}

9
app/assets/sass/modules-objects/_togglable-tabs.scss
View File

@ -25,7 +25,14 @@
&[aria-expanded="true"] {
border-width:0 0 3px;
color:$_color_omega;
.color-scheme--dark & {
color:$_color_omega;
}
.color-scheme--light & {
color:$_color_alpha;
}
}
:first-child > & {margin:0;}

10
app/assets/sass/settings/_variables.scss
View File

@ -9,10 +9,12 @@ $_img_path: "../images/" !default;
// Colors
//----------------------------------*/
// Light scheme
$_color_light_alpha: '' !default;
$_color_light_beta: '' !default;
$_color_light_gamma: '' !default;
$_color_light_delta: red !default;
$_color_light_alpha: #EEEEEE !default;
$_color_light_beta: #F9F9F9 !default;
$_color_light_gamma: #FFFFFF !default;
$_color_light_delta: #333333 !default;
$_color_light_epsilon: #c0c1c2 !default;
// Dark scheme
$_color_dark_alpha: #252C35 !default;

76
app/assets/sass/temporary.scss
View File

@ -38,8 +38,14 @@
}
.subcomponent__live {
background-color: #252C35;
//background-color: #353D48;
.color-scheme--dark & {
background-color:$_color_dark_alpha;
}
.color-scheme--light & {
background-color:$_color_light_alpha;
}
padding: 0px 15px;
float: left;
@ -51,39 +57,89 @@
}
.subcomponent__live table {
background-color: #49515C;
.color-scheme--dark & {
background-color:$_color_dark_gamma;
}
.color-scheme--light & {
background-color:$_color_light_gamma;
}
}
.subcomponent__live h2 {
margin: 15px 0px 20px 0px;
color: #FFFFFF;
.color-scheme--dark & {
color:$_color_omega;
}
.color-scheme--light & {
color:$_color_alpha;
}
}
.subcomponent__live p {
color: #FFFFFF;
.color-scheme--dark & {
background-color:$_color_dark_gamma;
}
.color-scheme--light & {
background-color:$_color_light_gamma;
}
}
.subcomponent__live label {
color: #A2AAB4;
.color-scheme--dark & {
background-color:$_color_dark_delta;
}
.color-scheme--light & {
background-color:$_color_light_delta;
}
}
.subcomponent__title {
width: 94%;
clear: both;
background-color: #49515C;
.color-scheme--dark & {
background-color:$_color_dark_gamma;
}
.color-scheme--light & {
background-color:$_color_light_gamma;
}
}
.subcomponent__title h1 {
font-size: 2em;
color: #FFFFFF;
.color-scheme--dark & {
color:$_color_omega;
}
.color-scheme--light & {
color:$_color_alpha;
}
}
.subcomponent__title h1 span {
font-size: 20px;
color: #A2AAB4;
.color-scheme--dark & {
color:$_color_dark_delta;
}
.color-scheme--light & {
color:$_color_light_delta;
}
}
.subcomponent__title h1 span a {
text-decoration: none;
}
.subcomponent__small {
min-height: 160px;
min-height: 190px;
}

16
app/components/host/host_cpu/host_cpu.html
View File

@ -1,5 +1,15 @@
<div class="subcomponent__live subcomponent__small">
<h2>Cpu</h2>
<p><label>State: </label><bansho-service-state-icon state="host.cpuService.state"></bansho-service-state-icon> {{host.cpuService.state}}</p>
<p><label>Output: </label>{{host.cpuService.plugin_output}}</p>
<h2>Cpu</h2>
<table class="data-table">
<tbody>
<tr>
<td>State</td>
<td><bansho-service-state-icon state="host.cpuService.state"></bansho-service-state-icon> {{host.cpuService.state}}</td>
</tr>
<tr>
<td>Output</td>
<td>{{host.cpuService.plugin_output}}</td>
</tr>
</tbody>
</table>
</div>

16
app/components/host/host_live/host_live.html
View File

@ -1,7 +1,15 @@
<div ng-controller="HostLiveCtrl" class="subcomponent__live subcomponent__small">
<h2>Status</h2>
<p>
<label>Current state: </label><bansho-host-state-icon state="host.live.state"></bansho-host-state-icon> {{host.live.state}}
</p>
<p><label>Output: </label>{{host.live.plugin_output}}</p>
<table class="data-table">
<tbody>
<tr>
<td>State</td>
<td><bansho-host-state-icon state="host.live.state"></bansho-host-state-icon> {{host.live.state}}</td>
</tr>
<tr>
<td>Output</td>
<td>{{host.live.plugin_output}}</td>
</tr>
</tbody>
</table>
</div>

16
app/components/host/host_load/host_load.html
View File

@ -1,5 +1,15 @@
<div class="subcomponent__live subcomponent__small">
<h2>Load</h2>
<p><label>State: </label><bansho-service-state-icon state="host.loadService.state"></bansho-service-state-icon> {{host.loadService.state}}</p>
<p><label>Output: </label>{{host.loadService.plugin_output}}</p>
<h2>Load</h2>
<table class="data-table">
<tbody>
<tr>
<td>State</td>
<td><bansho-service-state-icon state="host.loadService.state"></bansho-service-state-icon> {{host.loadService.state}}</td>
</tr>
<tr>
<td>Output</td>
<td>{{host.loadService.plugin_output}}</td>
</tr>
</tbody>
</table>
</div>

9
app/components/service/service.html
View File

@ -1,10 +1,11 @@
<article ng-controller="ServiceCtrl">
<section class="main__content tabpanel">
<h1>{{service.service_description}}</h1>
<bansho-service-main service='service'></bansho-service-main>
<h2> Info</h2>
<bansho-service-live service='service'></bansho-service-live>
<bansho-service-info service='service'></bansho-service-info>
<h2> Metrics</h2>
<bansho-service-metrics service='service'></bansho-service-metrics>
<!-- <bansho-service-metrics service='service'></bansho-service-metrics> -->
</section>
</article>

1
app/components/service/service.js
View File

@ -2,6 +2,7 @@
angular.module('bansho.service', ['bansho.surveil',
'bansho.service.main',
'bansho.service.live',
'bansho.service.info',
'bansho.service.metrics',
'bansho.table.state_icon'])

22
app/components/service/service_info/service_info.html
View File

@ -1,5 +1,19 @@
<div ng-controller="ServiceInfoCtrl">
<p>Last check: {{service.last_check|timeElapsed}}</p>
<p>Last state change: {{service.last_state_change|timeElapsed}}</p>
<p>Acknowledged: {{isAcknowledged}}</p>
<div ng-controller="ServiceInfoCtrl" class="subcomponent__live">
<h2>Info</h2>
<table class="data-table">
<tbody>
<tr>
<td>Last check</td>
<td>{{service.last_check|timeElapsed}}</td>
</tr>
<tr>
<td>Last state change</td>
<td>{{service.last_state_change|timeElapsed}}</td>
</tr>
<tr>
<td>Acknowledged</td>
<td>{{isAcknowledged}}</td>
</tr>
</tbody>
</table>
</div>

15
app/components/service/service_live/service_live.html Normal file
View File

@ -0,0 +1,15 @@
<div ng-controller="ServiceLiveCtrl" class="subcomponent__live subcomponent__small">
<h2>Status</h2>
<table class="data-table">
<tbody>
<tr>
<td>State</td>
<td><bansho-host-state-icon state="service.state"></bansho-host-state-icon> {{service.state}}</td>
</tr>
<tr>
<td>Output</td>
<td>{{service.plugin_output}}</td>
</tr>
</tbody>
</table>
</div>

19
app/components/service/service_live/service_live.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
angular.module('bansho.service.live', [])
.controller('ServiceLiveCtrl', ['$scope', function ($scope) {
angular.noop();
}])
.directive('banshoServiceLive', function () {
return {
restrict: 'E',
scope: {
service: '=service'
},
templateUrl: 'components/service/service_live/service_live.html',
controller: 'ServiceLiveCtrl'
};
});

11
app/components/service/service_main/service_main.html
View File

@ -1,6 +1,7 @@
<div ng-controller="ServiceMainCtrl">
<p>Description: {{service.description}}</p>
<p>Host Name: {{service.host_name}}</p>
<p>Current state: <bansho-table-state-icon service-state="{{service.state}}"></bansho-table-state-icon>{{service.state}}
<p>Live plugin output: {{service.plugin_output}}</p>
<div ng-controller="ServiceMainCtrl" class="subcomponent__live subcomponent__title">
<h1>{{service.service_description}}
<span class="subtitle">
<a class="data-table__data" href="#/view?view=host&host_name={{service.host_name}}">{{service.host_name}}</a>
</span>
</h1>
</div>

2
app/components/service/service_metrics/service_metrics.html
View File

@ -1,3 +1,3 @@
<div ng-controller="ServiceMetricsCtrl">
<p>Metrics</p>
<h2>Metrics</h2>
</div>

31
app/components/sidebar/_sidebar.scss
View File

@ -60,7 +60,7 @@
}
.color-scheme--light & {
color:$_color_light_gamma;
color:$_color_light_epsilon;
}
}
@ -76,7 +76,7 @@
}
.color-scheme--light & {
border-top-color:$_color_light_gamma;
border-top-color:$_color_light_epsilon;
}
&:first-child {border:0;}
@ -103,7 +103,7 @@
}
.color-scheme--light & {
color:$_color_light_gamma;
color:$_color_light_epsilon;
}
.sidebar__item:first-child & {padding-top:0;}
@ -130,11 +130,18 @@
}
.color-scheme--light & {
color:$_color_light_gamma;
color:$_color_light_epsilon;
}
&:focus,
&:hover {color:$_color_omega;}
&:hover {
.color-scheme--dark & {
color:$_color_omega;
}
.color-scheme--light & {
color:$_color_alpha;
}
}
&:before {margin:0;}
@ -154,7 +161,13 @@
margin-top:$_space;
.state--current {
color:$_color_omega;
.color-scheme--dark & {
color:$_color_omega;
}
.color-scheme--light & {
color:$_color_alpha;
}
position:relative;
&:before {
@ -186,7 +199,7 @@
}
.color-scheme--light & {
background:$_color_light_beta;
background:$_color_light_epsilon;
}
.sidebar__profile__toggle {
@ -211,7 +224,7 @@
}
.color-scheme--light & {
background:$_color_alpha;
color:$_color_alpha;
}
}
}
@ -257,7 +270,7 @@
}
.color-scheme--light & {
color:$_color_light_alpha;
color:$_color_light_delta;
}
}

11
app/components/topbar/_topbar.scss
View File

@ -64,7 +64,16 @@
position:relative;
width:79px;
&[aria-expanded="true"] {color:$_color_omega;}
&[aria-expanded="true"] {
.color-scheme--dark & {
color:$_color_omega;
}
.color-scheme--light & {
color:$_color_alpha;
}
}
[class^="ico-"],
[class*=" ico-"] {

1
app/index.html
View File

@ -79,6 +79,7 @@
<script src="components/host/host_services_list/host_services_list.js"></script>
<script src="components/service/service.js"></script>
<script src="components/service/service_main/service_main.js"></script>
<script src="components/service/service_live/service_live.js"></script>
<script src="components/service/service_info/service_info.js"></script>
<script src="components/service/service_metrics/service_metrics.js"></script>
<script src="routing_view/routing_view.js"></script>