Groups redesign

public/directives/wz-search-bar/wz-search-bar.html

@@ -1,4 +1,4 @@
-<div layout="row" class="topMarginSearchBottom " ng-class="noleft ? noleft: 'margin-8'">
+<div layout="row" flex class="topMarginSearchBottom">
     <input flex id="query" placeholder="{{ placetext }}" ng-class="height ? height : ''" type="text" ng-model="term" ng-change="data.addFilter('search', term)"
         class="searchBarCluster groupsNoMarginTop input-filter-box agents-preview-search-box" />
 </div>

public/directives/wz-table-header/wz-table-header.html

@@ -1,7 +1,7 @@
-<md-toolbar layout="row" class="wazuh-toolbar md-toolbar-tools wz-table-border" ng-show="(!noscroll && data.items && data.items.length > 0) || (noscroll && data)">
+<md-toolbar layout="row" class="wazuh-toolbar md-toolbar-tools wz-bottom-border" ng-show="(!noscroll && data.items && data.items.length > 0) || (noscroll && data)">
     <div ng-repeat="key in keys" flex="{{key.size || ''}}">
         <span ng-if="key.sortValue" class="wz-table-header-color" ng-click="data.sort(key.sortValue)">{{key.name}}
-            <i class="fa cursor-pointer" ng-class="data.sortValue === key.sortValue ? (data.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
+            <i class="fa cursor-pointer wz-color-sort-icon" ng-class="data.sortValue === key.sortValue ? (data.sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
                 aria-hidden="true"></i>
         </span>
         <span ng-if="!key.sortValue" class="wz-table-header-color">{{key.name}}</span>

public/directives/wz-table/wz-table.html

@@ -1,4 +1,4 @@
-<div flex ng-if="!isruleset && !isdecoders" layout="column" class="md-padding groupsFixPadding no-padding-bottom" ng-show="(!noscroll && data.items && data.items.length > 0) || (noscroll && data)">
+<div flex ng-if="!isruleset && !isdecoders" layout="column" class="groupsFixPadding no-padding-bottom" ng-show="(!noscroll && data.items && data.items.length > 0) || (noscroll && data)">
     <div ng-if="!noscroll" flex class="clusterScrollable" when-scrolled="data.nextPage('')">
         <div layout="row" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="item in data.items | filter : searchTerm"
             class="ownNavBarGroupsPadding agents-groups-preview groups-table groupsFixPadding wz-word-wrap wz-table-border" ng-class="!nopointer ? 'cursor-pointer' : '' "

public/less/agents.less

@@ -14,9 +14,11 @@ div.agents-groups-preview:hover > div > span {
     color: white !important;
 }
 
+.margin-top-17 {
+    margin-top: 17px;
+}
 .agentsPreview md-input-container {
     height: 41px;
-    margin-top: 17px;
     padding: 2px;
 }
 
@@ -88,6 +90,7 @@ md-tooltip .md-content {
     margin-right: 6px;
 }
 
-.configBold {
+.configBold,
+.groups-bold {
     font-weight: bold;
 }

public/less/angular-md.less

@@ -6,7 +6,7 @@
     background-color: rgba(158, 158, 158, 0.2);
 }
 
-md-card-content .ng-binding:not(.color-grey) {
+md-card-content .ng-binding:not(.color-grey):not(.color-pointer) {
     color: black !important;
 }
 

public/less/common.less

@@ -299,10 +299,15 @@ md-progress-linear ._md-bar {
     margin-top: 30px;
 }
 
-.margin-right-0 {
+.margin-right-0,
+.no-margin-right {
     margin-right: 0px;
 }
 
+.no-margin-left {
+    margin-left: 0px;
+}
+
 .margin-left-0 {
     margin-left: 0px !important;
     margin-right: 8px !important;

public/less/manager.less

@@ -208,7 +208,8 @@
     padding: 15px 15px 0px 20px !important;
 }
 
-.groupsFixPadding {
+.groupsFixPadding,
+.no-padding-top {
     padding-top: 0px !important;
 }
 
@@ -240,3 +241,7 @@
 .color-grey {
     color: grey !important;
 }
+
+.color-pointer {
+    color: #0079a5 !important;
+}

public/less/ruleset.less

@@ -12,7 +12,8 @@
     height: 220px;
 }
 
-.manager-ruleset-decoders-no-padding {
+.manager-ruleset-decoders-no-padding,
+.groups-no-padding {
     padding: 0px;
 }
 

public/less/tables.less

@@ -12,13 +12,13 @@
 md-toolbar {
     &.wazuh-toolbar {
         // Basic style
-        font-size: 16px;
+        font-size: 14px;
         font-weight: bold;
-        background-color: #f7f7f7;
+        background-color: white;
 
         // Overriding Angular Material default height
-        min-height: 48px;
-        height: 48px;
+        min-height: 36px;
+        height: 36px;
     }
 }
 
@@ -70,7 +70,7 @@ md-list-item {
 
 .groups-table,
 .ruleset-opened {
-    min-height: 44px !important;
+    min-height: 34px !important;
     height: auto !important;
     align-items: center !important;
 }
@@ -88,9 +88,9 @@ md-list-item {
     padding-right: 0px !important;
 }
 
-.lateral-padding-8 {
-    padding-left: 8px !important;
-    padding-right: 8px !important;
+.lateral-padding-16 {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
 }
 
 .lateral-padding-4 {
@@ -127,3 +127,15 @@ md-list-item {
 .padding-bottom-14 {
     padding-bottom: 14px !important;
 }
+
+.wz-bottom-border {
+    border-bottom: 1px solid #D9D9D9 !important;
+}
+
+.wz-color-sort-icon {
+    color: #b4bcc2 !important;
+}
+
+.wz-padding-right {
+    padding-right: 17px;
+}

public/templates/agents-prev/agents-prev.html

@@ -40,8 +40,8 @@
         </div>
 
         <div layout="row" layout-align="start stretch">
-            <wz-search-bar flex="60" class="margin-top-9" height="'height-41'" noleft="'margin-left-0'" data="agents" term="searchTerm" placetext="'Filter agents...'"></wz-search-bar>
-            <md-input-container flex="20" class="md-block md-whiteframe-z1 md-input-margin">
+            <wz-search-bar flex="60" class="margin-top-17 wz-padding-right" height="'height-41'" noleft="'margin-left-0'" data="agents" term="searchTerm" placetext="'Filter agents...'"></wz-search-bar>
+            <md-input-container flex="20" class="md-block md-whiteframe-z1 md-input-margin margin-top-17">
                 <md-select id="eventBox" ng-model="status" ng-change="agents.addFilter('status', status)" aria-label="Filter by status">
                     <md-option value="all">All states</md-option>
                     <md-option value="active">Active</md-option>
@@ -50,7 +50,7 @@
                 </md-select>
             </md-input-container>
 
-            <md-input-container flex="20" class="md-block md-whiteframe-z1">
+            <md-input-container flex="20" class="md-block md-whiteframe-z1 margin-top-17">
                 <md-select id="eventBox" ng-model="osPlatform" ng-change="applyFilters(osPlatform)" aria-label="Filter by operative system">
                     <md-option value="all">All OS platforms</md-option>
                     <md-option ng-repeat='platform in osPlatforms' value="{{platform.platform}} - {{platform.version}}">

public/templates/manager/groups/groups-preview.html

@@ -1,115 +1,98 @@
-<md-content flex layout="column" ng-controller="groupsPreviewController" class="overflow-hidden" ng-if="groupsMenu == 'preview'">
+<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'">
         <div flex layout="column" ng-init="lookingGroup=false">
-            <wz-search-bar ng-show="groupsSelectedTab==='agents' && lookingGroup" data="groupAgents" term="searchTermAgent" placetext="'Filter agents...'"></wz-search-bar>
-            <wz-search-bar ng-show="groupsSelectedTab==='files' && !file && lookingGroup" data="groupFiles" term="searchTermFile" placetext="'Filter files...'"></wz-search-bar>
-            <wz-search-bar ng-show="!lookingGroup" data="groups" term="searchTerm" placetext="'Filter groups...'"></wz-search-bar>
-            <div flex layout="row">
-                <md-card flex ng-class="!lookingGroup ? 'mdCardNone' : ''">
-                    <!-- Selecting a group -->
-                    <md-card-content ng-if="!lookingGroup" class="groupsFixPadding md-card-content-groups">
-                        <wz-table-header
-                            layout="row"
-                            data="groups"
-                            keys="[
-                            {name:'Name',sortValue:'name',size:20},
-                            {name:'Agents',sortValue:'count',size:15},
-                            {name:'MD5 agent.conf'}
-                            ]">
-                        </wz-table-header>
-                    </md-card-content>
+            <div flex layout="column" class="md-padding">
+                <div layout="row" ng-if="lookingGroup">
+                    <md-card flex class="no-margin-left">
+                        <md-card-content>
+                            <span class="md-headline">Details</span>
+                            <md-divider></md-divider>
+                            <div layout="row">
+                                <p class="manager-status-subtitle">Name</p>
+                                <p class="text-right color-grey">{{ groups.items[selectedGroup].name }}</p>
+                            </div>
+                            <div layout="row">
+                                <p class="manager-status-subtitle">Configuration sum</p>
+                                <p class="text-right color-grey">{{ groups.items[selectedGroup].conf_sum }}</p>
+                            </div>
+                            <div layout="row">
+                                <p class="manager-status-subtitle">Merged sum</p>
+                                <p class="text-right color-grey">{{ groups.items[selectedGroup].merged_sum }}</p>
+                            </div>
+                        </md-card-content>
+                    </md-card>
+                    <md-card flex class="no-margin-right">
+                        <md-card-content>
+                            <span class="md-headline">Group</span>
+                            <md-divider></md-divider>
+                            <div layout="row" ng-class="groupsSelectedTab==='agents' ? 'groups-bold' : ''">
+                                <p class="manager-status-subtitle cursor-pointer" ng-click="goBackToAgents()">Agents</p>
+                                <p class="text-right cursor-pointer color-pointer" ng-click="goBackToAgents()">{{ groups.items[selectedGroup].count }} <i class="fa fa-eye"></i></p>
+                            </div>
+                            <div layout="row" ng-class="groupsSelectedTab==='files' ? 'groups-bold' : ''">
+                                <p class="manager-status-subtitle cursor-pointer" ng-click="goBackFiles()">Content</p>
+                                <p class="text-right cursor-pointer color-pointer" ng-click="goBackFiles()">{{ groupFiles.totalItems }} <i class="fa fa-eye"></i></p>
+                            </div>
+                        </md-card-content>
+                    </md-card>
+                </div>
 
-                    <wz-table
-                        layout="column"
-                        flex
-                        func="loadGroup(index)"
-                        data="groups"
-                        keys="[{col:'name',size:20},{col:'count',size:15},'merged_sum']"
-                        ng-if="!lookingGroup">
-                    </wz-table>
+                <wz-search-bar layout="row" ng-show="groupsSelectedTab==='agents' && lookingGroup" data="groupAgents" term="searchTermAgent"
+                    placetext="'Filter agents...'"></wz-search-bar>
 
-                    <!-- Looking a group -->
-                    <md-card-content ng-if="lookingGroup" class="groupsFixPadding md-card-content-groups">
-                        <div layout="row">
-                            <md-nav-bar flex md-selected-nav-item="groupsSelectedTab" class="groupsButtonNav lessLeft">
-                                <md-nav-item md-nav-click="goBackToAgents()" name="agents">
-                                    <i class="fa fa-tv"></i> Agents
-                                </md-nav-item>
-                                <md-nav-item md-nav-click="goBackFiles()" name="files">
-                                    <i class="fa fa-file-o"></i> Content
-                                </md-nav-item>
-                            </md-nav-bar>
-                            <md-button class="wazuh-button md-raised md-primary manager-log-buttonplay" ng-click="(file) ? goBackFiles() : goBackGroups()" aria-label="Go back button">
-                                <i class="fa fa-reply fa-fw" aria-hidden="true"></i> Go back
-                            </md-button>
-                        </div>
+                <wz-search-bar layout="row" ng-show="groupsSelectedTab==='files' && !file && lookingGroup" data="groupFiles" term="searchTermFile"
+                    placetext="'Filter files...'"></wz-search-bar>
 
-                        <div layout="row" class="topMarginSearchTop" ng-show="groupsSelectedTab==='agents'">
-                            <h4>{{ groups.items[selectedGroup].name }}</h4>
-                        </div>
+                <wz-search-bar ng-show="!lookingGroup" layout="row" data="groups" term="searchTerm" placetext="'Filter groups...'"></wz-search-bar>
 
-                        <wz-table-header
-                            layout="row"
-                            data="groupAgents"
-                            keys="[
-                            {name:'ID',sortValue:'id',size:10},
-                            {name:'Name',sortValue:'name'},
-                            {name:'IP',sortValue:'ip'},
-                            {name:'OS platform',sortValue:'os.platform'},
-                            {name:'OS version',sortValue:'os.version'},
-                            {name:'Agent version',sortValue:'version'}
-                            ]"
-                            ng-show="groupsSelectedTab==='agents'">
-                        </wz-table-header>
+                <wz-table-header ng-if="!lookingGroup" layout="row" data="groups" keys="[
+                        {name:'Name',sortValue:'name',size:20},
+                        {name:'Agents',sortValue:'count',size:15},
+                        {name:'MD5 agent.conf'}
+                        ]">
+                </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']"
+                    ng-if="!lookingGroup"></wz-table>
 
-                        <div layout="row" class="topMarginSearchTop" ng-show="groupsSelectedTab==='files' && !file">
-                            <h4>{{ groups.items[selectedGroup].name }}</h4>
-                        </div>
 
-                        <wz-table-header
-                            layout="row"
-                            data="groupFiles"
-                            keys="[
-                            {name:'File',sortValue:'filename',size:30},
-                            {name:'MD5 checksum'}
-                            ]"
-                            ng-show="groupsSelectedTab==='files' && !file">
-                        </wz-table-header>
+                <wz-table-header layout="row" data="groupAgents" keys="[
+                        {name:'ID',sortValue:'id',size:10},
+                        {name:'Name',sortValue:'name'},
+                        {name:'IP',sortValue:'ip'},
+                        {name:'OS platform',sortValue:'os.platform'},
+                        {name:'OS version',sortValue:'os.version'},
+                        {name:'Agent version',sortValue:'version'}
+                        ]" ng-show="lookingGroup && groupsSelectedTab==='agents'">
+                </wz-table-header>
 
-                    </md-card-content>
+                <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
-                        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>
+                <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>
 
-                    <wz-table
-                        layout="column"
-                        flex
-                        func="showFile(index)"
-                        data="groupFiles"
-                        keys="[{col:'filename',size:30},'hash']"
-                        ng-if="lookingGroup && groupsSelectedTab==='files' && !file">
-                    </wz-table>
+                <wz-table layout="column" flex func="showFile(index)" data="groupFiles" keys="[{col:'filename',size:30},'hash']" ng-if="lookingGroup && groupsSelectedTab==='files' && !file">
+                </wz-table>
 
-                    <div flex layout="column" class="md-padding groupsFixPadding" ng-if="lookingGroup && groupsSelectedTab==='files' && file">
+                <div flex layout="column" class="md-padding groupsFixPadding" ng-if="lookingGroup && groupsSelectedTab==='files' && file">
+                    <div flex layout="column">
+                        <div layout="row" class="topMarginSearchBottom groupsHeader">
+                            <span class="md-headline">{{ filename }}</span>
+                            <span flex></span>
+                            <span class="md-headline cursor-pointer" ng-click="goBackFiles()">close</span>
+                        </div>
                         <div flex layout="column">
-                            <div layout="row" class="topMarginSearchBottom ownNavBarCluster groupsHeader">
-                                <h4>{{ groups.items[selectedGroup].name }} / {{ filename }}</h4>
-                            </div>
-                            <div flex layout="column" class="ownNavBarCluster">
-                                <pre flex class="json-beautifier jsonbeauty2"><code wz-dynamic="file"></code></pre>
-                            </div>
+                            <pre flex class="json-beautifier jsonbeauty2"><code wz-dynamic="file"></code></pre>
                         </div>
                     </div>
+                </div>
 
-                </md-card>
             </div>
         </div>
     </div>
-</md-content>
+</md-content>

public/templates/manager/manager-osseclog.html

@@ -29,9 +29,9 @@
         </md-button>
     </div>
 
-    <wz-search-bar class="lateral-padding-8" data="logs" term="searchTerm" placetext="'Filter logs...'"></wz-search-bar>
+    <wz-search-bar class="lateral-padding-16" data="logs" term="searchTerm" placetext="'Filter logs...'"></wz-search-bar>
 
-    <div flex layout="column" class="md-padding">
+    <div flex layout="column" class="md-padding no-padding-top">
 
         <!-- Standard -->
         <wz-table-header