Add css on service status page and add light theme

Change-Id: Iaa6af5b5aafb97a058ab03ae3e02c653252e68c5

app/assets/sass/global/_color-schemes.scss

@@ -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

app/assets/sass/modules-interface/_main.scss

@@ -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;
             }
         }
 

app/assets/sass/modules-objects/_data-table.scss

@@ -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;
+                background:$_color_light_alpha;
-                border-color:$_color_light_gamma;
+                border-color:$_color_light_epsilon;
 
                 &.state--asc,
                 &.state--desc {background:$_color_light_alpha;}
@@ -332,4 +332,4 @@ time.data-table__data {
     .color-scheme--light & {
         color:$_color_light_delta;
     }
-}
+}

app/assets/sass/modules-objects/_filters.scss

@@ -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;
         }
     }
@@ -125,4 +125,4 @@
             color:$_color_alpha;
         }
     }
-}
+}

app/assets/sass/modules-objects/_panes.scss

@@ -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%;}

app/assets/sass/modules-objects/_togglable-tabs.scss

@@ -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;}
@@ -53,4 +60,4 @@
         display:block;
         visibility:visible;
     }
-}
+}

app/assets/sass/settings/_variables.scss

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

app/assets/sass/temporary.scss

@@ -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;
 }
 
 

app/components/host/host_cpu/host_cpu.html

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

app/components/host/host_live/host_live.html

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

app/components/host/host_load/host_load.html

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

app/components/service/service.html

@@ -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>

app/components/service/service.js

@@ -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'])

app/components/service/service_info/service_info.html

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

app/components/service/service_live/service_live.html

@@ -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>

app/components/service/service_live/service_live.js

@@ -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'
+
+        };
+    });

app/components/service/service_main/service_main.html

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

app/components/service/service_metrics/service_metrics.html

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

app/components/sidebar/_sidebar.scss

@@ -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,9 +270,9 @@
             }
 
             .color-scheme--light & {
-                color:$_color_light_alpha;
+                color:$_color_light_delta;
             }
         }
 
     }
-}
+}

app/components/topbar/_topbar.scss

@@ -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-"] {
@@ -198,4 +207,4 @@
     margin-bottom:$_space;
 
     a {display:block;}
-}
+}

app/index.html

@@ -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>