From fddd4693e32506e270c392430c50335c4d6fe0b9 Mon Sep 17 00:00:00 2001
From: Thibault Cohen <titilambert@gmail.com>
Date: Mon, 1 Jun 2015 16:22:00 -0400
Subject: [PATCH] Add css for host status page

Change-Id: I65e18724b9cd4d988a47f5b9c048ea183d961b29
---
 app/assets/sass/temporary.scss                | 73 +++++++++++++++++++
 app/components/host/host.html                 | 11 ++-
 app/components/host/host.js                   |  1 +
 app/components/host/host_cpu/host_cpu.html    |  7 +-
 app/components/host/host_info/host_info.html  |  3 +-
 app/components/host/host_live/host_live.html  |  7 ++
 app/components/host/host_live/host_live.js    | 17 +++++
 app/components/host/host_load/host_load.html  |  7 +-
 app/components/host/host_main/host_main.html  | 12 +--
 .../host_services_list.html                   |  5 +-
 app/index.html                                |  1 +
 11 files changed, 123 insertions(+), 21 deletions(-)
 create mode 100644 app/components/host/host_live/host_live.html
 create mode 100644 app/components/host/host_live/host_live.js

diff --git a/app/assets/sass/temporary.scss b/app/assets/sass/temporary.scss
index d567286..cfbc3b9 100644
--- a/app/assets/sass/temporary.scss
+++ b/app/assets/sass/temporary.scss
@@ -30,3 +30,76 @@
     width: 85px;
     padding-right: 15px;
 }
+
+// host/service status page
+
+.data-table thead th:first-child + th {
+  padding-left: 15px;
+}
+
+.subcomponent__live {
+    background-color: #252C35;
+    //background-color: #353D48;
+
+    padding: 0px 15px;
+    float: left;
+    margin: 20px;
+}
+
+.subcomponent__live .data-table thead th:first-child {
+    border-width: 0 0 0 0px;
+}
+
+.subcomponent__live table {
+    background-color: #49515C;
+}
+.subcomponent__live h2 {
+    margin: 15px 0px 20px 0px;
+    color: #FFFFFF;
+}
+
+.subcomponent__live p {
+    color: #FFFFFF;
+}
+
+.subcomponent__live label {
+    color: #A2AAB4;
+}
+
+.subcomponent__title {
+    width: 94%;
+    clear: both;
+    background-color: #49515C;
+}
+
+.subcomponent__title h1 {
+    font-size: 2em;
+    color: #FFFFFF;
+}
+
+.subcomponent__title h1 span {
+    font-size: 20px;
+    color: #A2AAB4;
+}
+
+.subcomponent__small {
+    min-height: 160px;
+}
+
+
+.subcomponent__medium {
+    min-height: 300px;
+}
+
+.subcomponent__live .state--error .data-table__data:before,
+.subcomponent__live .state--warning .data-table__data:before,
+.subcomponent__live .state--ok .data-table__data:before {
+    position: relative;
+    left: -10px;
+}
+
+bansho-host-services-list .subcomponent__live {
+    min-width: 700px;
+}
+
+
diff --git a/app/components/host/host.html b/app/components/host/host.html
index 3565a57..7e0e980 100644
--- a/app/components/host/host.html
+++ b/app/components/host/host.html
@@ -1,18 +1,17 @@
 <article ng-controller="HostCtrl">
   <section class="main__content tabpanel" ng-if="data.live && data.config">
-     <h1>{{host.config.host_name}}</h1>
      <bansho-host-main></bansho-host-main>
 
-     <h2>Services</h2>
-     <bansho-host-services-list></bansho-host-services-list>
+     <bansho-host-live></bansho-host-live>
 
-     <h2>Load</h2>
      <bansho-host-load></bansho-host-load>
 
-     <h2>Cpu</h2>
      <bansho-host-cpu></bansho-host-cpu>
 
-     <h2>Info</h2>
      <bansho-host-info></bansho-host-info>
+
+     <bansho-host-services-list></bansho-host-services-list>
+
+
     </section>
 </article>
diff --git a/app/components/host/host.js b/app/components/host/host.js
index 01319f4..0147c4b 100644
--- a/app/components/host/host.js
+++ b/app/components/host/host.js
@@ -2,6 +2,7 @@
 
 angular.module('bansho.host', ['bansho.surveil',
                                 'bansho.host.main',
+                                'bansho.host.live',
                                 'bansho.host.load',
                                 'bansho.host.cpu',
                                 'bansho.host.info',
diff --git a/app/components/host/host_cpu/host_cpu.html b/app/components/host/host_cpu/host_cpu.html
index 76ba93e..0b22afa 100644
--- a/app/components/host/host_cpu/host_cpu.html
+++ b/app/components/host/host_cpu/host_cpu.html
@@ -1,4 +1,5 @@
-<div>
-    <p>State: <bansho-service-state-icon state="host.cpuService.state"></bansho-service-state-icon> {{host.cpuService.state}}</p>
-    <p>Plugin output: {{host.cpuService.plugin_output}}</p>
+<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>
 </div>
diff --git a/app/components/host/host_info/host_info.html b/app/components/host/host_info/host_info.html
index a264971..fce0006 100644
--- a/app/components/host/host_info/host_info.html
+++ b/app/components/host/host_info/host_info.html
@@ -1,4 +1,5 @@
-<div ng-controller="HostInfoCtrl">
+<div ng-controller="HostInfoCtrl" class="subcomponent__live">
+  <h2>Info</h2>
   <table class="data-table">
     <tbody>
       <tr>
diff --git a/app/components/host/host_live/host_live.html b/app/components/host/host_live/host_live.html
new file mode 100644
index 0000000..f7cbf98
--- /dev/null
+++ b/app/components/host/host_live/host_live.html
@@ -0,0 +1,7 @@
+<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>
+</div>
diff --git a/app/components/host/host_live/host_live.js b/app/components/host/host_live/host_live.js
new file mode 100644
index 0000000..b03ac31
--- /dev/null
+++ b/app/components/host/host_live/host_live.js
@@ -0,0 +1,17 @@
+'use strict';
+
+angular.module('bansho.host.live', [])
+
+    .controller('HostLiveCtrl', ['$scope', function ($scope) {
+        angular.noop();
+    }])
+
+    .directive('banshoHostLive', function () {
+        return {
+            restrict: 'E',
+            compile: function (scope, element, attrs) {
+                scope.host = attrs.host;
+            },
+            templateUrl: 'components/host/host_live/host_live.html'
+        };
+    });
diff --git a/app/components/host/host_load/host_load.html b/app/components/host/host_load/host_load.html
index 0caad66..f62e049 100644
--- a/app/components/host/host_load/host_load.html
+++ b/app/components/host/host_load/host_load.html
@@ -1,4 +1,5 @@
-<div>
- <p>State: <bansho-service-state-icon state="host.loadService.state"></bansho-service-state-icon> {{host.loadService.state}}</p>
- <p>Plugin output: {{host.loadService.plugin_output}}</p>
+<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>
 </div>
diff --git a/app/components/host/host_main/host_main.html b/app/components/host/host_main/host_main.html
index 0de7e00..48ce4b1 100644
--- a/app/components/host/host_main/host_main.html
+++ b/app/components/host/host_main/host_main.html
@@ -1,7 +1,7 @@
-<div ng-controller="HostMainCtrl">
-  <p>
-    Current state: <bansho-host-state-icon state="host.live.state"></bansho-host-state-icon> {{host.live.state}}
-  </p>
-  <p>Alias: <span ng-show="!host.config.alias">No alias</span></p>
-  <p>Live plugin output: {{host.live.plugin_output}}</p>
+<div ng-controller="HostMainCtrl" class="subcomponent__live subcomponent__title">
+  <h1>
+    {{host.config.host_name}}
+    <span class="subtitle"ng-show="host.config.alias">(host.config.alias)</span>
+    <span class="subtitle">{{host.config.address}}</span>
+  </h1>
 </div>
diff --git a/app/components/host/host_services_list/host_services_list.html b/app/components/host/host_services_list/host_services_list.html
index 2329962..9b11b69 100644
--- a/app/components/host/host_services_list/host_services_list.html
+++ b/app/components/host/host_services_list/host_services_list.html
@@ -1,4 +1,5 @@
-<div ng-hide="services.length === 0">
+<div ng-hide="services.length === 0" class="subcomponent__live">
+  <h2>Services</h2>
   <table class="data-table">
     <thead>
       <tr>
@@ -9,7 +10,7 @@
     </thead>
     <tbody>
       <tr ng-repeat="service in host.services">
-         <td>{{service.service_description}}</td>
+         <td><a href="#/view?view=service&host_name={{service.host_name}}&description={{service.service_description}}">{{service.service_description}}</a>
          <td>{{service.acknowledged}}</td>
          <td><bansho-service-state-icon state="service.state"></bansho-service-state-icon>{{service.state}}</td>
      </tr>
diff --git a/app/index.html b/app/index.html
index bd9f188..a781437 100644
--- a/app/index.html
+++ b/app/index.html
@@ -75,6 +75,7 @@
     <script src="components/host/host_info/host_info.js"></script>
     <script src="components/host/host_load/host_load.js"></script>
     <script src="components/host/host_main/host_main.js"></script>
+    <script src="components/host/host_live/host_live.js"></script>
     <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>