Several minor bugfixes from feedback

CHANGELOG.md

@@ -14,7 +14,7 @@ All notable changes to the Wazuh app project will be documented in this file.
   - Now the app is clever and **takes decissions depending on new consistency checks**.
 - **New design for the *Agents/Configuration* tab** ([#310](https://github.com/wazuh/wazuh-kibana-app/pull/310)):
   - The style is the same as the *Manager/Configuration* tab.
-  - Two more tabs added: **CIS-CAT and Commands** ([#315](https://github.com/wazuh/wazuh-kibana-app/pull/315)).
+  - Added two more sections: **CIS-CAT and Commands** ([#315](https://github.com/wazuh/wazuh-kibana-app/pull/315)).
 - **Added *"group"* column on the agents list in *Agents*** ([#312](https://github.com/wazuh/wazuh-kibana-app/pull/312)):
   - If you click on the group, it will redirect the user to the specified group in *Manager/Groups*.
 - **New option for the `config.yml` file, `ip.selector`** ([#313](https://github.com/wazuh/wazuh-kibana-app/pull/313)):

public/less/common.less

@@ -60,6 +60,7 @@
     white-space: pre-wrap;
     word-wrap: break-word;
     height: 200px;
+    line-height: 20px !important;
 }
 
 .jsonbeauty2 {
@@ -238,7 +239,7 @@ div.uil-ring-css {
     box-shadow: none;
 }
 
-:focus:not(.wazuh-button):not(.input-filter-box) {
+:focus:not(.wazuh-button):not(.input-filter-box):not(.kuiLocalSearchInput) {
     box-shadow: none !important;
 }
 
@@ -304,6 +305,7 @@ div.uil-ring-css {
 }
 
 .kuiLocalNav {
+    margin-top: 15px !important;
     border-bottom: none !important;
 }
 

public/less/typography.less

@@ -9,7 +9,6 @@ html, body, button:not(.fa):not(.fa-times), textarea, input, select {
 }
 
 .wz-headline-title {
-    color: #0079a5 !important;
     font-size: 17px;
 }
 
@@ -70,3 +69,20 @@ html, body, button:not(.fa):not(.fa-times), textarea, input, select {
 .json-string {
     color: olive;
 }
+
+/* Class for linkable text elements */
+
+.wz-text-link {
+    cursor: pointer;
+    color: rgb(0, 121, 165);
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.wz-text-active {
+    color: rgb(0, 121, 165);
+    font-weight: bold;
+    text-decoration: underline;
+}

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

@@ -33,12 +33,12 @@
                 <span class="wz-headline-title">Top</span>
                 <md-divider class="wz-margin-top-10"></md-divider>
                 <div layout="row" class="wz-padding-top-10">
-                    <p flex="35" class="manager-status-subtitle" ng-click="showAgent(lastAgent)">Last registered agent</p>
-                    <p class="wz-text-right cursor-pointer color-pointer wz-table-hover" ng-click="showAgent(lastAgent)">{{lastAgent.name}} <i class="fa fa-eye"></i></p>
+                    <p flex="35" class="manager-status-subtitle">Last registered agent</p>
+                    <p class="wz-text-right wz-text-link" tooltip="Click to open this agent" tooltip-placement="right" ng-click="showAgent(lastAgent)">{{lastAgent.name}}</p>
                 </div>
                 <div layout="row" class="wz-padding-top-10">
-                    <p flex="35" class="manager-status-subtitle" ng-click="showAgent(mostActiveAgent)">Higher activity</p>
-                    <p class="wz-text-right cursor-pointer color-pointer wz-table-hover" ng-click="showAgent(mostActiveAgent)">{{mostActiveAgent.name}} <i class="fa fa-eye"></i></p>
+                    <p flex="35" class="manager-status-subtitle">Higher activity</p>
+                    <p class="wz-text-right wz-text-link" tooltip="Click to open this agent" tooltip-placement="right" ng-click="showAgent(mostActiveAgent)">{{mostActiveAgent.name}}</p>
                 </div>
             </md-card-content>
         </md-card>

public/templates/agents/agents-configuration.html

@@ -47,7 +47,7 @@
         <div layout="row">
             <md-card flex class="wz-metric-color wz-md-card">
                 <md-card-content layout="row" class="wz-padding-metric">
-                    <div flex>Group: <span ng-click="goGroup()" class="wz-font-weight-bold cursor-pointer" tooltip="Click to go to the group details" tooltip-placement="right">{{groupName}} <i class="fa fa-eye"></i></span></div>
+                    <div flex>Group: <span ng-click="goGroup()" class="wz-font-weight-bold wz-text-link" tooltip="Click to go to the group details" tooltip-placement="right">{{groupName}}</span></div>
                     <div flex>Configuration status: <span class="wz-font-weight-bold" tooltip="The current synchronization status" tooltip-placement="right">{{isSynchronized ? 'SYNCHRONIZED' : 'NOT SYNCHRONIZED'}}</span></div>
                 </md-card-content>
             </md-card>
@@ -62,7 +62,7 @@
                 <md-card flex class="wz-md-card" ng-show="groupConfiguration.config.syscheck">
                     <md-card-content>
                         <!-- Section title -->
-                        <span class="wz-headline-title cursor-pointer wz-table-hover" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='fim';toggleRAW=false" ng-class="selectedConfigTab === 'fim' ? 'wz-font-weight-bold' : ''">File Integrity</span>
+                        <span class="wz-headline-title wz-text-link" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='fim';toggleRAW=false">File Integrity</span>
                         <md-divider class="wz-margin-top-10"></md-divider>
                         <div layout="row" class="wz-padding-top-10" ng-if="groupConfiguration.config.syscheck.disabled">
                             <span flex>Disabled</span>
@@ -80,7 +80,7 @@
                 <md-card flex class="wz-md-card" ng-show="groupConfiguration.config.rootcheck">
                     <md-card-content>
                         <!-- Section title -->
-                        <span class="wz-headline-title cursor-pointer wz-table-hover" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='pm';toggleRAW=false" ng-class="selectedConfigTab === 'pm' ? 'wz-font-weight-bold' : ''">Policy Monitoring</span>
+                        <span class="wz-headline-title wz-text-link" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='pm';toggleRAW=false">Policy Monitoring</span>
                         <md-divider class="wz-margin-top-10"></md-divider>
                         <div layout="row" class="wz-padding-top-10" ng-if="groupConfiguration.config.rootcheck.disabled">
                             <span flex>Disabled</span>
@@ -98,7 +98,7 @@
                 <md-card flex class="wz-md-card" ng-show="groupConfiguration.config['open-scap']">
                     <md-card-content>
                         <!-- Section title -->
-                        <span class="wz-headline-title cursor-pointer wz-table-hover" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='scap';toggleRAW=false" ng-class="selectedConfigTab === 'scap' ? 'wz-font-weight-bold' : ''">OpenSCAP</span>
+                        <span class="wz-headline-title wz-text-link" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='scap';toggleRAW=false">OpenSCAP</span>
                         <md-divider class="wz-margin-top-10"></md-divider>
                         <div layout="row" class="wz-padding-top-10" ng-if="groupConfiguration.config['open-scap'].disabled">
                             <span flex>Disabled</span>
@@ -116,7 +116,7 @@
                 <md-card flex class="wz-md-card" ng-show="groupConfiguration.config['cis-cat']">
                     <md-card-content>
                         <!-- Section title -->
-                        <span class="wz-headline-title cursor-pointer wz-table-hover" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='ciscat';toggleRAW=false" ng-class="selectedConfigTab === 'ciscat' ? 'wz-font-weight-bold' : ''">CIS-CAT</span>
+                        <span class="wz-headline-title wz-text-link" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='ciscat';toggleRAW=false">CIS-CAT</span>
                         <md-divider class="wz-margin-top-10"></md-divider>
                         <div layout="row" class="wz-padding-top-10" ng-if="groupConfiguration.config['cis-cat'].disabled">
                             <span flex>Disabled</span>
@@ -134,7 +134,7 @@
                 <md-card flex class="wz-md-card" ng-show="groupConfiguration.config['localfile']">
                     <md-card-content>
                         <!-- Section title -->
-                        <span class="wz-headline-title cursor-pointer wz-table-hover" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='log';toggleRAW=false" ng-class="selectedConfigTab === 'log' ? 'wz-font-weight-bold' : ''">Log Collection</span>
+                        <span class="wz-headline-title wz-text-link" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='log';toggleRAW=false">Log Collection</span>
                         <md-divider class="wz-margin-top-10"></md-divider>
                         <div layout="row" class="wz-padding-top-10">
                             <span flex>Visualize all Log Collection settings</span>
@@ -147,7 +147,7 @@
                 <md-card flex class="wz-md-card" ng-show="groupConfiguration.config['localfile']">
                     <md-card-content>
                         <!-- Section title -->
-                        <span class="wz-headline-title cursor-pointer wz-table-hover" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='command';toggleRAW=false" ng-class="selectedConfigTab === 'command' ? 'wz-font-weight-bold' : ''">Remote Command</span>
+                        <span class="wz-headline-title wz-text-link" tooltip="Click to see more details" tooltip-placement="right" ng-click="selectedConfigTab='command';toggleRAW=false">Remote Command</span>
                         <md-divider class="wz-margin-top-10"></md-divider>
                         <div layout="row" class="wz-padding-top-10">
                             <span flex>Visualize all Remote Command settings</span>

public/templates/agents/agents-general.html

@@ -5,11 +5,27 @@
         <div layout="row">
             <md-card flex class="wz-metric-color wz-md-card">
                 <md-card-content layout="row" class="wz-padding-metric">
-                    <div flex="25">Name: <span class="wz-font-weight-bold">{{agent.name}}</span></div>
-                    <div flex="25">IP: <span class="wz-font-weight-bold">{{agent.ip}}</span></div>
-                    <div flex ng-if="agent.version">Version:<span class="wz-font-weight-bold"> {{ agent.version | limitTo: 12 }}{{agent.version.length > 12 ? '...' : ''}}</span></div>
-                    <div flex="25" ng-if="agent.group">Group:<span class="wz-font-weight-bold"> {{ agent.group }}</span></div>
-                    <div flex>OS:<span class="wz-font-weight-bold"> {{ agentOS }}</span></div>
+                    <div flex="20">
+                        Name: <span class="wz-font-weight-bold">{{ agent.name | limitTo: 25 }}{{ agent.name.length > 25 ? '&hellip;' : '' }}</span>
+                        <md-tooltip ng-if="agent.name.length > 25" md-direction="bottom" class="wz-tooltip">
+                            Full name: {{agent.name}}
+                        </md-tooltip>
+                    </div>
+                    <div flex="20">
+                        IP: <span class="wz-font-weight-bold">{{agent.ip}}</span>
+                    </div>
+                    <div flex="20" ng-if="agent.group">
+                        Group: <span class="wz-font-weight-bold">{{ agent.group }}</span>
+                    </div>
+                    <div flex="20" ng-if="agent.version">
+                        Version: <span class="wz-font-weight-bold">{{ agent.version }}</span>
+                    </div>
+                    <div flex>
+                        OS: <span class="wz-font-weight-bold">{{ agentOS | limitTo: 25 }}{{ agentOS.length > 25 ? '&hellip;' : '' }}</span>
+                        <md-tooltip ng-if="agentOS.length > 25" md-direction="bottom" class="wz-tooltip">
+                            Full OS name: {{agentOS}}
+                        </md-tooltip>
+                    </div>
                 </md-card-content>
             </md-card>
         </div>

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

@@ -8,6 +8,7 @@
                         <md-card-content>
                             <span class="wz-headline-title">{{ groups.items[selectedGroup].name }}</span>
                             <md-divider class="wz-margin-top-10"></md-divider>
+
                             <div layout="row" class="wz-padding-top-10">
                                 <span flex="25">Configuration sum</span>
                                 <span class="wz-text-right color-grey">{{ groups.items[selectedGroup].conf_sum }}</span>
@@ -22,13 +23,16 @@
                         <md-card-content>
                             <span class="wz-headline-title">Details</span>
                             <md-divider class="wz-margin-top-10"></md-divider>
-                            <div layout="row" class="wz-padding-top-10" ng-class="groupsSelectedTab==='agents' ? 'wz-font-weight-bold' : ''">
-                                <span flex="20" class="cursor-pointer" ng-click="goBackToAgents()">Agents</span>
-                                <span class="cursor-pointer color-pointer" ng-click="goBackToAgents()">{{ groups.items[selectedGroup].count }} <i class="fa fa-eye"></i></span>
+
+                            <div layout="row" class="wz-padding-top-10">
+                                <span flex="20" class="wz-text-link" ng-class="groupsSelectedTab==='agents' ? 'wz-text-active' : ''" ng-click="goBackToAgents()" tooltip="Click to open the list of agents" tooltip-placement="left">Agents</span>
+                                <span class="wz-text-link" tooltip="Click to open the list of agents" tooltip-placement="right"
+                                ng-click="goBackToAgents()">{{ groups.items[selectedGroup].count }}</span>
                             </div>
-                            <div layout="row" class="wz-padding-top-10" ng-class="groupsSelectedTab==='files' ? 'wz-font-weight-bold' : ''">
-                                <span flex="20" class="cursor-pointer" ng-click="goBackFiles()">Content</span>
-                                <span class="cursor-pointer color-pointer" ng-click="goBackFiles()">{{ groupFiles.totalItems }} <i class="fa fa-eye"></i></span>
+                            <div layout="row" class="wz-padding-top-10">
+                                <span flex="20" class="wz-text-link" ng-class="groupsSelectedTab==='files' ? 'wz-text-active' : ''" ng-click="goBackFiles()" tooltip="Click to open the list of files" tooltip-placement="left">Content</span>
+                                <span class="wz-text-link" tooltip="Click to open the list of files" tooltip-placement="right"
+                                ng-click="goBackFiles()">{{ groupFiles.totalItems }}</span>
                             </div>
                         </md-card-content>
                     </md-card>
@@ -77,7 +81,7 @@
 
                 <div flex layout="column" class="md-padding" ng-if="lookingGroup && groupsSelectedTab==='files' && file">
                     <div flex layout="column">
-                        <div layout="row">
+                        <div layout="row" class="wz-padding-bottom-14">
                             <span flex class="wz-headline-title">{{ filename }}</span>
                             <span flex class="wz-text-right cursor-pointer color-grey" ng-click="goBackFiles()">close</span>
                         </div>