From c0ebb990d4db59a1d8187ee407f7117c6785d08c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juanjo=20Jim=C3=A9nez?= <juanji0503@gmail.com>
Date: Mon, 28 May 2018 18:24:16 +0200
Subject: [PATCH] Refactored Manager/Groups template

---
 .../manager/groups/groups-preview.html        | 58 ++++++++++++++-----
 public/templates/manager/groups/groups.head   |  2 +-
 .../templates/manager/manager-osseclog.html   |  4 +-
 3 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/public/templates/manager/groups/groups-preview.html b/public/templates/manager/groups/groups-preview.html
index 9ea4578a3d..194ddc3b91 100644
--- a/public/templates/manager/groups/groups-preview.html
+++ b/public/templates/manager/groups/groups-preview.html
@@ -1,9 +1,20 @@
-<md-content flex layout="column" ng-controller="groupsPreviewController" class="manager-groups-main-div overflow-hidden"
-    ng-if="groupsMenu == 'preview'">
-    <div flex layout="column" layout-align="start stretch" ng-init="groupsSelectedTab='agents'">
+<md-content flex layout="column" ng-controller="groupsPreviewController" class="overflow-hidden" ng-if="groupsMenu == 'preview'">
+
+    <!-- Loading ring -->
+    <div class='uil-ring-css' ng-show="load">
+        <div></div>
+    </div>
+
+    <div flex layout="column" layout-align="start stretch" ng-show="!load" ng-init="groupsSelectedTab='agents'">
+
         <div flex layout="column" ng-init="lookingGroup=false">
+
             <div flex layout="column" class="md-padding">
+
+                <!-- MD5 Sums and Details cards -->
                 <div layout="row" ng-if="lookingGroup">
+
+                    <!-- Group MD5 sums section -->
                     <md-card flex class="no-margin-left wz-md-card">
                         <md-card-content>
                             <span class="wz-headline-title">{{ groups.items[selectedGroup].name }}</span>
@@ -19,6 +30,9 @@
                             </div>
                         </md-card-content>
                     </md-card>
+                    <!-- End Group MD5 sums section -->
+
+                    <!-- Group Details section -->
                     <md-card flex class="no-margin-right wz-md-card">
                         <md-card-content>
                             <span class="wz-headline-title">Details</span>
@@ -36,16 +50,21 @@
                             </div>
                         </md-card-content>
                     </md-card>
+                    <!-- End Group Details section -->
+
                 </div>
+                <!-- End MD5 Sums and Details cards -->
 
-                <wz-search-bar layout="row" ng-show="groupsSelectedTab==='agents' && lookingGroup" data="groupAgents" term="searchTermAgent"
-                    placetext="'Filter agents...'"></wz-search-bar>
+                <!-- Agents search bar -->
+                <wz-search-bar layout="row" ng-show="groupsSelectedTab==='agents' && lookingGroup" data="groupAgents" term="searchTermAgent" placetext="'Filter agents...'"></wz-search-bar>
 
-                <wz-search-bar layout="row" ng-show="groupsSelectedTab==='files' && !file && lookingGroup" data="groupFiles" term="searchTermFile"
-                    placetext="'Filter files...'"></wz-search-bar>
+                <!-- Files search bar -->
+                <wz-search-bar layout="row" ng-show="groupsSelectedTab==='files' && !file && lookingGroup" data="groupFiles" term="searchTermFile" placetext="'Filter files...'"></wz-search-bar>
 
+                <!-- Groups search bar -->
                 <wz-search-bar ng-show="!lookingGroup" layout="row" data="groups" term="searchTerm" placetext="'Filter groups...'"></wz-search-bar>
 
+                <!-- Groups table -->
                 <wz-table-header ng-if="!lookingGroup" layout="row" data="groups" keys="[
                         {name:'Name',sortValue:'name',size:20},
                         {name:'Agents',sortValue:'count',size:15},
@@ -53,12 +72,16 @@
                         ]">
                 </wz-table-header>
                 <wz-table ng-if="!lookingGroup" layout="row" flex func="loadGroup(index)" data="groups" keys="[{col:'name',size:20},{col:'count',size:15},'merged_sum']"></wz-table>
-                
+                <!-- End groups table -->
+
+                <!-- CSV Download button section for groups -->
                 <div layout="row" class="wz-margin-top-10" ng-if="!lookingGroup">
                     <span flex></span>
-                    <a class="small" id="btnDownload" ng-click="downloadCsv('groups')">Formatted <i aria-hidden="true" class="fa fa-download"></i></a>
+                    <a class="small" id="btnDownload" ng-click="downloadCsv('groups')">Formatted <i aria-hidden="true" class="fa fa-fw fa-download"></i></a>
                 </div>
+                <!-- End CSV Download button section for groups -->
 
+                <!-- Group agents table -->
                 <wz-table-header layout="row" data="groupAgents" keys="[
                         {name:'ID',sortValue:'id',size:10},
                         {name:'Name',sortValue:'name'},
@@ -68,29 +91,35 @@
                         {name:'Agent version',sortValue:'version'}
                         ]" ng-show="lookingGroup && groupsSelectedTab==='agents'">
                 </wz-table-header>
-
                 <wz-table layout="column" flex full="'agent'" func="showAgent(agent)" data="groupAgents" keys="[{col:'id',size:10},'name','ip','os.platform','os.version','version']" ng-if="lookingGroup && groupsSelectedTab==='agents'">
                 </wz-table>
-                
+                <!-- End Group agents table -->
+
+                <!-- CSV Download button section for group agents -->
                 <div layout="row" class="wz-margin-top-10" ng-if="lookingGroup && groupsSelectedTab==='agents'">
                     <span flex></span>
-                    <a class="small" id="btnDownload" ng-click="downloadCsv('groupAgents')">Formatted <i aria-hidden="true" class="fa fa-download"></i></a>
+                    <a class="small" id="btnDownload" ng-click="downloadCsv('groupAgents')">Formatted <i aria-hidden="true" class="fa fa-fw fa-download"></i></a>
                 </div>
+                <!-- End CSV Download button section for group agents -->
 
+                <!-- Group files table -->
                 <wz-table-header layout="row" data="groupFiles" keys="[
                         {name:'File',sortValue:'filename',size:30},
                         {name:'MD5 checksum'}
                         ]" ng-show="lookingGroup && groupsSelectedTab==='files' && !file">
                 </wz-table-header>
-
                 <wz-table layout="column" flex func="showFile(index)" data="groupFiles" keys="[{col:'filename',size:30},'hash']" ng-if="lookingGroup && groupsSelectedTab==='files' && !file">
                 </wz-table>
+                <!-- End Group files table -->
 
+                <!-- CSV Download button section for group files-->
                 <div layout="row" class="wz-margin-top-10" ng-if="lookingGroup && groupsSelectedTab==='files' && !file">
                     <span flex></span>
-                    <a class="small" id="btnDownload" ng-click="downloadCsv('groupFiles')">Formatted <i aria-hidden="true" class="fa fa-download"></i></a>
+                    <a class="small" id="btnDownload" ng-click="downloadCsv('groupFiles')">Formatted <i aria-hidden="true" class="fa fa-fw fa-download"></i></a>
                 </div>
+                <!-- End CSV Download button section for group files -->
 
+                <!-- File JSON viewer section -->
                 <div flex layout="column" class="md-padding" ng-if="lookingGroup && groupsSelectedTab==='files' && file">
                     <div flex layout="column">
                         <div layout="row" class="wz-padding-bottom-14">
@@ -102,6 +131,7 @@
                         </div>
                     </div>
                 </div>
+                <!-- End File JSON viewer section -->
 
             </div>
         </div>
diff --git a/public/templates/manager/groups/groups.head b/public/templates/manager/groups/groups.head
index e4b055e6a9..d87fdff8fa 100644
--- a/public/templates/manager/groups/groups.head
+++ b/public/templates/manager/groups/groups.head
@@ -1,2 +1,2 @@
-<div flex layout="column" ng-controller="groupsController" class="mozilla-table-size-85" ng-if="submenuNavItem == 'groups'">
+<div ng-cloak flex layout="column" class="mozilla-table-size-85" ng-controller="groupsController" ng-if="submenuNavItem == 'groups'">
     <md-progress-linear class="md-accent" md-mode="indeterminate" ng-show="load"></md-progress-linear>
diff --git a/public/templates/manager/manager-osseclog.html b/public/templates/manager/manager-osseclog.html
index f438e8b838..02c0d1e5c0 100644
--- a/public/templates/manager/manager-osseclog.html
+++ b/public/templates/manager/manager-osseclog.html
@@ -99,12 +99,12 @@
         </wz-table>
         <!-- End Realtime enabled section -->
 
-        <!-- CSV Download button section  -->
+        <!-- CSV Download button section -->
         <div layout="row" class="wz-margin-top-10">
             <span flex></span>
             <a class="small" id="btnDownload" ng-click="downloadCsv()">Formatted <i aria-hidden="true" class="fa fa-fw fa-download"></i></a>
         </div>
-        <!-- End CSV Download button section  -->
+        <!-- End CSV Download button section -->
     </div>
     <!-- End Logs table section -->
 </div>