From 3200bd5985ce0291c382f7f0035ff6345148b500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20=C3=81ngel=20Gonz=C3=A1lez?=
 <jesusgonzalez@wazuh.com>
Date: Fri, 2 Mar 2018 17:23:57 +0100
Subject: [PATCH] Minor design changes on Manager tab

---
 public/less/angular-md.less                  |  2 +-
 public/less/manager.less                     |  5 +-
 public/templates/manager/manager-status.html | 77 ++++++++------------
 3 files changed, 34 insertions(+), 50 deletions(-)

diff --git a/public/less/angular-md.less b/public/less/angular-md.less
index ab88c202c..f8eb47da1 100644
--- a/public/less/angular-md.less
+++ b/public/less/angular-md.less
@@ -6,7 +6,7 @@
     background-color: rgba(158, 158, 158, 0.2);
 }
 
-md-card-content .ng-binding {
+md-card-content .ng-binding:not(.color-grey) {
     color: black !important;
 }
 
diff --git a/public/less/manager.less b/public/less/manager.less
index b75d93049..9b754f0b2 100644
--- a/public/less/manager.less
+++ b/public/less/manager.less
@@ -105,7 +105,6 @@
 /* ------------------------------------------------------------------------ */
 
 .manager-status-subtitle {
-    font-weight: bold;
     min-width: 150px
 }
 
@@ -285,3 +284,7 @@
 .margin-8 {
     margin: 8px !important;
 }
+
+.color-grey {
+    color: grey !important;
+}
\ No newline at end of file
diff --git a/public/templates/manager/manager-status.html b/public/templates/manager/manager-status.html
index 096578d25..6696f9869 100644
--- a/public/templates/manager/manager-status.html
+++ b/public/templates/manager/manager-status.html
@@ -14,75 +14,55 @@
             </md-card>
         </div>
 
-        <div layout="row" layout-align="start stretch">
-            <md-card flex>
-                <md-card-content class="text-center">
-                    <div class="metric-value ng-binding font-size-19-pt">{{agentsCountTotal}}</div>
-                    <div class="ng-binding">Total agents</div>
+        <div layout="row">
+            <md-card flex class="height-30 wz-metric-color">
+                <md-card-content layout="row" class="wz-padding-top-5">
+                    <span flex>Total agents: <b>{{agentsCountTotal}}</b></span>
+                    <span flex>Active: <b>{{agentsCountActive}}</b></span>
+                    <span flex>Disconnected: <b>{{agentsCountDisconnected}}</b></span>
+                    <span flex>Never connected: <b>{{agentsCountNeverConnected}}</b></span>
+                    <span flex>Agents coverage: <b>{{(agentsCoverity | number:2)}}%</b></span>
                 </md-card-content>
-            </md-card>
-            <md-card flex>
-                <md-card-content class="text-center">
-                    <div class="metric-value ng-binding font-size-19-pt">{{agentsCountActive}}</div>
-                    <div class="ng-binding">Active</div>
-                </md-card-content>
-            </md-card>
-            <md-card flex>
-                <md-card-content class="text-center">
-                    <div class="metric-value ng-binding font-size-19-pt">{{agentsCountDisconnected}}</div>
-                    <div class="ng-binding">Disconnected</div>
-                </md-card-content>
-            </md-card>
-            <md-card flex>
-                <md-card-content class="text-center">
-                    <div class="metric-value ng-binding font-size-19-pt">{{agentsCountNeverConnected}}</div>
-                    <div class="ng-binding">Never connected</div>
-                </md-card-content>
-            </md-card>
-            <md-card flex>
-                <md-card-content class="text-center">
-                    <div class="metric-value ng-binding font-size-19-pt">{{(agentsCoverity | number:2)}}%</div>
-                    <div class="ng-binding">Agents coverage</div>
-                </md-card-content>
-            </md-card>
+            </md-card>            
         </div>
 
         <div layout="row" layout-align="start stretch">
             <md-card flex="50">
                 <md-card-content>
-                    <h3 class="wazuh-h3">Manager information</h3>
+                    <span class="md-headline">Manager information</span>
+                    <md-divider></md-divider>
                     <div layout="column">
                         <span layout="row">
                             <p class="manager-status-subtitle">Version</p>
-                            <p class="text-right">{{managerInfo.version ? managerInfo.version : '-'}}</p>
+                            <p class="text-right color-grey">{{managerInfo.version ? managerInfo.version : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">Compilation date</p>
-                            <p class="text-right">{{managerInfo.compilation_date ? managerInfo.compilation_date : '-'}}</p>
+                            <p class="text-right color-grey">{{managerInfo.compilation_date ? managerInfo.compilation_date : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">Installation path</p>
-                            <p class="text-right">{{managerInfo.path ? managerInfo.path : '-'}}</p>
+                            <p class="text-right color-grey">{{managerInfo.path ? managerInfo.path : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">Installation type</p>
-                            <p class="text-right">{{managerInfo.type ? managerInfo.type : '-'}}</p>
+                            <p class="text-right color-grey">{{managerInfo.type ? managerInfo.type : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">Agents limit</p>
-                            <p class="text-right">{{managerInfo.max_agents ? managerInfo.max_agents : '-'}}</p>
+                            <p class="text-right color-grey">{{managerInfo.max_agents ? managerInfo.max_agents : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">OpenSSL Support</p>
-                            <p class="text-right">{{managerInfo.openssl_support ? managerInfo.openssl_support : '-'}}</p>
+                            <p class="text-right color-grey">{{managerInfo.openssl_support ? managerInfo.openssl_support : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">Total rules</p>
-                            <p class="text-right">{{totalRules ? totalRules : '-'}}</p>
+                            <p class="text-right color-grey">{{totalRules ? totalRules : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">Total decoders</p>
-                            <p class="text-right">{{totalDecoders ? totalDecoders : '-'}}</p>
+                            <p class="text-right color-grey">{{totalDecoders ? totalDecoders : '-'}}</p>
                         </span>
                     </div>
                 </md-card-content>
@@ -90,39 +70,40 @@
 
             <md-card flex="50">
                 <md-card-content>
-                    <h3 class="wazuh-h3">Last registered agent</h3>
+                    <span class="md-headline">Last registered agent</span>
+                    <md-divider></md-divider>
                     <div layout="column" flex>
                         <span layout="row">
                             <p class="manager-status-subtitle">Name</p>
-                            <p class="text-right">{{agentInfo.name ? agentInfo.name : '-'}}</p>
+                            <p class="text-right color-grey">{{agentInfo.name ? agentInfo.name : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">ID</p>
-                            <p class="text-right">{{agentInfo.id ? agentInfo.id : '-'}}</p>
+                            <p class="text-right color-grey">{{agentInfo.id ? agentInfo.id : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">Status</p>
-                            <p class="text-right">{{agentInfo.status ? agentInfo.status : '-'}}</p>
+                            <p class="text-right color-grey">{{agentInfo.status ? agentInfo.status : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">IP Address</p>
-                            <p class="text-right">{{agentInfo.ip ? agentInfo.ip : '-'}}</p>
+                            <p class="text-right color-grey">{{agentInfo.ip ? agentInfo.ip : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">Date add</p>
-                            <p class="text-right">{{agentInfo.dateAdd ? agentInfo.dateAdd : '-'}}</p>
+                            <p class="text-right color-grey">{{agentInfo.dateAdd ? agentInfo.dateAdd : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">Version</p>
-                            <p class="text-right">{{agentInfo.version ? agentInfo.version : '-'}}</p>
+                            <p class="text-right color-grey">{{agentInfo.version ? agentInfo.version : '-'}}</p>
                         </span>
                         <span layout="row" ng-if="agentInfo.id !== '000'">
                             <p class="manager-status-subtitle">Last keep alive</p>
-                            <p class="text-right">{{agentInfo.lastKeepAlive ? agentInfo.lastKeepAlive : '-'}}</p>
+                            <p class="text-right color-grey">{{agentInfo.lastKeepAlive ? agentInfo.lastKeepAlive : '-'}}</p>
                         </span>
                         <span layout="row">
                             <p class="manager-status-subtitle">Operating system</p>
-                            <p class="text-right">{{agentInfo.os.name ? agentInfo.os.name + agentInfo.os.version : agentInfo.os.uname ? agentInfo.os.uname : '-'}}</p>
+                            <p class="text-right color-grey">{{agentInfo.os.name ? agentInfo.os.name + agentInfo.os.version : agentInfo.os.uname ? agentInfo.os.uname : '-'}}</p>
                         </span>
                     </div>
                 </md-card-content>