Truncated text for tables and metric ribbons

CHANGELOG.md

@@ -32,6 +32,8 @@ All notable changes to the Wazuh app project will be documented in this file.
   - Cleaned and refactored code
   - Revamped design, smaller and with minor details to follow the rest of Wazuh app guidelines.
 - **New design for the wz-chip component** to follow the new Wazuh app guidelines ([#323](https://github.com/wazuh/wazuh-kibana-app/pull/323)).
+- Added **more descriptive error messages** when the user inserts bad credentials on the *Add new API* form in the *Settings* tab ([#331](https://github.com/wazuh/wazuh-kibana-app/pull/331)).
+- Added a new CSS class to **truncate overflowing text** on tables and metric ribbons ([#332](https://github.com/wazuh/wazuh-kibana-app/pull/332)).
 
 ### Changed
 - **Improved the initialization system** ([#317](https://github.com/wazuh/wazuh-kibana-app/pull/317)):

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

@@ -1,9 +1,9 @@
 <md-toolbar layout="row" class="md-toolbar-tools wz-theader-toolbar" ng-show="(!noscroll && data.items && data.items.length > 0) || (noscroll && data)">
-    <div ng-repeat="key in keys" flex="{{key.size || ''}}">
+    <div class="wz-text-truncatable" ng-repeat="key in keys" flex="{{key.size || ''}}">
         <span ng-if="key.sortValue" class="wz-theader-color" ng-click="data.sort(key.sortValue)">{{key.name}}
             <i class="fa wz-theader-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-theader-color">{{key.name}}</span>
     </div>
-</md-toolbar>
+</md-toolbar>

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

@@ -1,43 +1,46 @@
 <div flex ng-if="!isruleset && !isdecoders" layout="column" class="wz-table-no-padding" ng-show="(!noscroll && data.items && data.items.length > 0) || (noscroll && data)">
+    <!-- Manager/Logs table -->
     <div ng-if="!isagents && !noscroll" flex class="wz-table-scroll" when-scrolled="data.nextPage('')">
         <div layout="row" ng-class-odd="'wz-table-odd'" ng-class-even="'wz-table-even'" ng-repeat="item in data.items | filter : searchTerm"
             class="wz-table-common" ng-class="!nopointer ? 'wz-table-cursor-pointer' : '' "
             ng-click="clickAction(full ? item : $index)">
-            <div ng-repeat="key in keys" flex="{{key.size || ''}}">
+            <div ng-class="key.truncatable === 'true' ? 'wz-text-truncatable' : ''" ng-repeat="key in keys" flex="{{key.size || ''}}">
                 <span>{{parseItem(item,key) || '---'}}</span>
             </div>
         </div>
     </div>
+    <!-- Manager/Logs table on realtime -->
     <div ng-if="!isagents && noscroll" flex class="wz-table-scroll">
         <div layout="row" ng-class-odd="'wz-table-odd'" ng-class-even="'wz-table-even'" ng-repeat="item in data" class="wz-table-common"
             ng-class="!nopointer ? 'wz-table-cursor-pointer' : '' " ng-click="clickAction($index)">
-            <div ng-repeat="key in keys" flex="{{key.size || ''}}">
+            <div ng-class="key.truncatable === 'true' ? 'wz-text-truncatable' : ''" ng-repeat="key in keys" flex="{{key.size || ''}}">
                 <span>{{parseItem(item,key) || '---'}}</span>
             </div>
         </div>
     </div>
+    <!-- Agents preview table -->
     <div ng-if="!noscroll && isagents" flex class="wz-table-scroll" when-scrolled="data.nextPage('')">
         <div layout="row" ng-class-odd="'wz-table-odd'" ng-class-even="'wz-table-even'" ng-repeat="item in data.items | filter : searchTerm"
-            class="wz-table-common" ng-class="!nopointer ? 'wz-table-cursor-pointer' : '' "
-            >
-            <div class="wz-table-agents" ng-repeat="key in keys" flex="{{key.size || ''}}" ng-click="clickAction(full ? item : $index,key)">
+            class="wz-table-common" ng-class="!nopointer ? 'wz-table-cursor-pointer' : '' ">
+            <div class="wz-table-agents wz-text-truncatable" ng-repeat="key in keys" flex="{{key.size || ''}}" ng-click="clickAction(full ? item : $index,key)">
                 <span>{{parseItem(item,key) || '---'}}</span>
             </div>
         </div>
     </div>
 </div>
 
+<!-- Manager/Ruleset/Rules tab -->
 <div flex ng-if="isruleset" layout="column" class="wz-table-no-padding" ng-show="(!noscroll && data.items && data.items.length > 0) || (noscroll && data)">
     <div ng-if="!noscroll" flex class="wz-table-scroll" when-scrolled="data.nextPage('')">
         <div layout="row" ng-class-odd="'wz-table-odd'" ng-class-even="'wz-table-even'" ng-repeat="item in data.items | filter : searchTerm"
             class="wz-table-common" ng-class="!nopointer && activeitem !== item.id ? 'wz-table-cursor-pointer' : !nopointer && activeitem === item.id ? 'wz-table-cursor-pointer wz-table-active' : ''"
             ng-click="clickAction(full ? item : $index)">
-            <div ng-show="activeitem !== item.id" ng-repeat="key in keys" flex="{{key.size || ''}}">
+            <div class="wz-text-truncatable" ng-show="activeitem !== item.id" ng-repeat="key in keys" flex="{{key.size || ''}}">
                 <span>{{parseItem(item,key) || '---'}}</span>
             </div>
             <div flex ng-show="activeitem === item.id" class="wz-table-height-fixed">
                 <div layout="row" class="wz-table-size">
-                    <div ng-repeat="key in keys" flex="{{key.size || ''}}">
+                    <div class="wz-text-truncatable" ng-repeat="key in keys" flex="{{key.size || ''}}">
                         <span>{{parseItem(item,key) || '---'}}</span>
                     </div>
                 </div>
@@ -106,17 +109,18 @@
     </div>
 </div>
 
+<!-- Manager/Ruleset/Decoders tab -->
 <div flex ng-if="isdecoders" layout="column" class="md-padding wz-table-no-padding wz-table-no-padding-bottom" ng-show="(!noscroll && data.items && data.items.length > 0) || (noscroll && data)">
     <div ng-if="!noscroll" flex class="wz-table-scroll" when-scrolled="data.nextPage('')">
         <div layout="row" ng-class-odd="'wz-table-odd'" ng-class-even="'wz-table-even'" ng-repeat="decoder in data.items | filter : searchTerm"
             class="wz-table-common" ng-class="!nopointer && activeitem !== decoder.name+decoder.file+decoder.position ? 'wz-table-cursor-pointer' : !nopointer && activeitem === decoder.name+decoder.file+decoder.position ? 'wz-table-cursor-pointer wz-table-active' : ''"
             ng-click="clickAction(full ? decoder : $index)">
-            <div ng-show="activeitem !== decoder.name+decoder.file+decoder.position" class="wz-word-wrap" ng-repeat="key in keys" flex="{{key.size || ''}}">
+            <div ng-show="activeitem !== decoder.name+decoder.file+decoder.position" class="wz-text-truncatable" ng-repeat="key in keys" flex="{{key.size || ''}}">
                 <span>{{parseItem(decoder,key) || '---'}}</span>
             </div>
             <div flex ng-show="activeitem === decoder.name+decoder.file+decoder.position" class="wz-table-height-fixed">
                 <div layout="row" class="wz-table-size">
-                    <div ng-repeat="key in keys" flex="{{key.size || ''}}" class="wz-word-wrap">
+                    <div ng-repeat="key in keys" flex="{{key.size || ''}}" class="wz-text-truncatable">
                         <span>{{parseItem(decoder,key) || '---'}}</span>
                     </div>
                 </div>

public/directives/wz-table/wz-table.js

@@ -6,18 +6,18 @@ app.directive('wzTable',function(){
     return {
         restrict: 'E',
         scope: {
-            data      : '=data',
-            keys      : '=keys',
-            func      : '&',
-            noscroll  : '=noscroll',
-            nopointer : '=nopointer',
-            full      : '=full',
-            noheight  : '=noheight',
-            isruleset : '=isruleset',
-            isdecoders: '=isdecoders',
-            activeitem: '=activeitem',
-            isagents  : '=isagents',
-            specialfunc: '&'
+            data        : '=data',
+            keys        : '=keys',
+            func        : '&',
+            noscroll    : '=noscroll',
+            nopointer   : '=nopointer',
+            full        : '=full',
+            noheight    : '=noheight',
+            isruleset   : '=isruleset',
+            isdecoders  : '=isdecoders',
+            activeitem  : '=activeitem',
+            isagents    : '=isagents',
+            specialfunc : '&'
         },
         link: function(scope,ele,attrs){
             scope.clickAction = (index,special) => {
@@ -27,10 +27,10 @@ app.directive('wzTable',function(){
                 } else {
                     obj.index = index;
                 }
-                
+
                 if(scope.isagents && special && special.col && special.col === 'group') scope.specialfunc(obj)
                 else scope.func(obj);
-            }   
+            }
             scope.parseItem = (item,key) => {
                 if(scope.isruleset && key.col === 'level' && item.level === 0) return '0';
                 let tmp = key;

public/directives/wz-table/wz-table.less

@@ -16,17 +16,13 @@
     align-items: center;
 }
 
-.wz-word-wrap {
-    word-wrap: break-word;
-}
-
 .wz-table-common {
-    padding-left: 15px;
-    min-height: 34px;
     height: auto;
-    align-items: center;
+    min-height: 34px;
+    line-height: 20px;
     padding-top: 0px;
-    word-wrap: break-word;
+    padding-left: 15px;
+    align-items: center;
     box-shadow: 0 1px 0px 2px rgba(0, 0, 0, 0.1);
 }
 

public/less/layout.less

@@ -83,6 +83,7 @@
 }
 
 .wz-padding-metric {
+    line-height: 16px;
     padding-top: 10px;
     padding-bottom: 10px;
 }

public/less/typography.less

@@ -12,10 +12,6 @@ html, body, button:not(.fa):not(.fa-times), textarea, input, select, .wz-chip {
     font-size: 17px;
 }
 
-.wz-font-weight-bold {
-    font-weight: bold !important;
-}
-
 .color-grey {
     color: grey !important;
 }
@@ -44,6 +40,16 @@ html, body, button:not(.fa):not(.fa-times), textarea, input, select, .wz-chip {
     text-align: right;
 }
 
+.wz-text-bold {
+    font-weight: bold !important;
+}
+
+.wz-text-truncatable {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 .font-size-16-pt {
     font-size: 16pt;
 }

public/templates/agents/agents-audit.html

@@ -5,10 +5,10 @@
         <div layout="row">
             <md-card flex class="wz-metric-color wz-md-card">
                 <md-card-content layout="row" class="wz-padding-metric">
-                    <div flex>New files: <span class="wz-font-weight-bold">{{auditNewFiles}}</span></div>
-                    <div flex>Read files: <span class="wz-font-weight-bold">{{auditReadFiles}}</span></div>
-                    <div flex>Modified files: <span class="wz-font-weight-bold">{{auditModifiedFiles}}</span></div>
-                    <div flex>Removed files: <span class="wz-font-weight-bold">{{auditRemovedFiles}}</span></div>
+                    <div class="wz-text-truncatable" flex>New files: <span class="wz-text-bold">{{auditNewFiles}}</span></div>
+                    <div class="wz-text-truncatable" flex>Read files: <span class="wz-text-bold">{{auditReadFiles}}</span></div>
+                    <div class="wz-text-truncatable" flex>Modified files: <span class="wz-text-bold">{{auditModifiedFiles}}</span></div>
+                    <div class="wz-text-truncatable" flex>Removed files: <span class="wz-text-bold">{{auditRemovedFiles}}</span></div>
                 </md-card-content>
             </md-card>
         </div>

public/templates/agents/agents-configuration.html

@@ -47,8 +47,8 @@
         <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 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>
+                    <div class="wz-text-truncatable" flex>Group: <span ng-click="goGroup()" class="wz-text-bold wz-text-link" tooltip="Click to go to the group details" tooltip-placement="right">{{groupName}}</span></div>
+                    <div class="wz-text-truncatable" flex>Configuration status: <span class="wz-text-bold" tooltip="The current synchronization status" tooltip-placement="right">{{isSynchronized ? 'SYNCHRONIZED' : 'NOT SYNCHRONIZED'}}</span></div>
                 </md-card-content>
             </md-card>
         </div>

public/templates/agents/agents-general.html

@@ -5,25 +5,25 @@
         <div layout="row">
             <md-card flex class="wz-metric-color wz-md-card">
                 <md-card-content layout="row" class="wz-padding-metric">
-                    <div flex="20">
-                        Name: <span class="wz-font-weight-bold">{{ agent.name | limitTo: 25 }}{{ agent.name.length > 25 ? '&hellip;' : '' }}</span>
+                    <div class="wz-text-truncatable" flex>
+                        Name: <span class="wz-text-bold">{{ agent.name }}</span>
                         <md-tooltip ng-if="agent.name.length > 25" md-direction="bottom" class="wz-tooltip">
-                            Full name: {{agent.name}}
+                            Full name: {{ agent.name }}
                         </md-tooltip>
                     </div>
-                    <div flex="20">
-                        IP: <span class="wz-font-weight-bold">{{agent.ip}}</span>
+                    <div class="wz-text-truncatable" flex>
+                        IP: <span class="wz-text-bold">{{ agent.ip }}</span>
                     </div>
-                    <div flex="20" ng-if="agent.group">
-                        Group: <span class="wz-font-weight-bold">{{ agent.group }}</span>
+                    <div class="wz-text-truncatable" flex ng-if="agent.group">
+                        Group: <span class="wz-text-bold">{{ agent.group }}</span>
                     </div>
-                    <div flex="20" ng-if="agent.version">
-                        Version: <span class="wz-font-weight-bold">{{ agent.version }}</span>
+                    <div class="wz-text-truncatable" flex ng-if="agent.version">
+                        Version: <span class="wz-text-bold">{{ agent.version }}</span>
                     </div>
-                    <div flex>
-                        OS: <span class="wz-font-weight-bold">{{ agentOS | limitTo: 25 }}{{ agentOS.length > 25 ? '&hellip;' : '' }}</span>
+                    <div class="wz-text-truncatable" flex>
+                        OS: <span class="wz-text-bold">{{ agentOS }}</span>
                         <md-tooltip ng-if="agentOS.length > 25" md-direction="bottom" class="wz-tooltip">
-                            Full OS name: {{agentOS}}
+                            Full OS name: {{ agentOS }}
                         </md-tooltip>
                     </div>
                 </md-card-content>
@@ -33,18 +33,18 @@
         <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">Last keep alive:<span class="wz-font-weight-bold"> {{agent.lastKeepAlive || 'Unknown' }}</span></div>
-                    <div flex="25">Registration date:<span class="wz-font-weight-bold"> {{agent.dateAdd}}</span></div>
-                    <div flex="25" ng-if="agent.syscheck.inProgress">Last syscheck scan:<span class="wz-font-weight-bold"> Scan in progress</span></div>
-                    <div flex="25" ng-if="!agent.syscheck.inProgress">Last syscheck scan:<span class="wz-font-weight-bold"> {{agent.syscheck.end || 'Unknown'}}</span>
+                    <div class="wz-text-truncatable" flex>Last keep alive:<span class="wz-text-bold"> {{agent.lastKeepAlive || 'Unknown' }}</span></div>
+                    <div class="wz-text-truncatable" flex>Registration date:<span class="wz-text-bold"> {{agent.dateAdd}}</span></div>
+                    <div class="wz-text-truncatable" flex ng-if="agent.syscheck.inProgress">Last syscheck scan:<span class="wz-text-bold"> Scan in progress</span></div>
+                    <div class="wz-text-truncatable" flex ng-if="!agent.syscheck.inProgress">Last syscheck scan:<span class="wz-text-bold"> {{agent.syscheck.end || 'Unknown'}}</span>
                         <md-tooltip ng-if="!agent.syscheck.inProgress && agent.syscheck.start && agent.syscheck.end" md-direction="bottom" class="wz-tooltip">
                             Start time: {{ agent.syscheck.start || 'Unknown'}} <br>
                             End time: {{ agent.syscheck.end || 'Unknown'}} <br>
                             Duration time: {{ agent.syscheck.duration +' minutes' || 'Unknown'}}
                         </md-tooltip>
                     </div>
-                    <div flex ng-if="agent.rootcheck.inProgress">Last rootcheck scan:<span class="wz-font-weight-bold"> Scan in progress</span></div>
-                    <div flex ng-if="!agent.rootcheck.inProgress">Last rootcheck scan:<span class="wz-font-weight-bold"> {{agent.rootcheck.end || 'Unknown'}}</span>
+                    <div class="wz-text-truncatable" flex ng-if="agent.rootcheck.inProgress">Last rootcheck scan:<span class="wz-text-bold"> Scan in progress</span></div>
+                    <div class="wz-text-truncatable" flex ng-if="!agent.rootcheck.inProgress">Last rootcheck scan:<span class="wz-text-bold"> {{agent.rootcheck.end || 'Unknown'}}</span>
                         <md-tooltip ng-if="!agent.rootcheck.inProgress && agent.rootcheck.start && agent.rootcheck.end" md-direction="bottom" class="wz-tooltip">
                             Start time: {{ agent.rootcheck.start || 'Unknown'}} <br>
                             End time: {{ agent.rootcheck.end || 'Unknown'}} <br>

public/templates/agents/agents-oscap.html

@@ -5,9 +5,9 @@
         <div layout="row">
             <md-card flex class="wz-metric-color wz-md-card">
                 <md-card-content layout="row" class="wz-padding-metric">
-                    <div flex>Last score: <span class="wz-font-weight-bold">{{scapLastScore}}</span></div>
-                    <div flex>Highest score: <span class="wz-font-weight-bold">{{scapHighestScore}}</span></div>
-                    <div flex>Lowest score: <span class="wz-font-weight-bold">{{scapLowestScore}}</span></div>
+                    <div flex>Last score: <span class="wz-text-bold">{{scapLastScore}}</span></div>
+                    <div flex>Highest score: <span class="wz-text-bold">{{scapHighestScore}}</span></div>
+                    <div flex>Lowest score: <span class="wz-text-bold">{{scapLowestScore}}</span></div>
                 </md-card-content>
             </md-card>
         </div>

public/templates/agents/agents-virustotal.html

@@ -6,9 +6,9 @@
         <div layout="row">
             <md-card flex class="wz-metric-color wz-md-card">
                 <md-card-content layout="row" class="wz-padding-metric">
-                    <div flex>Total malicious: <span class="wz-font-weight-bold">{{virusMalicious}}</span></div>
-                    <div flex>Total positives: <span class="wz-font-weight-bold">{{virusPositives}}</span></div>
-                    <div flex>Total: <span class="wz-font-weight-bold">{{virusTotal}}</span></div>                    
+                    <div flex>Total malicious: <span class="wz-text-bold">{{virusMalicious}}</span></div>
+                    <div flex>Total positives: <span class="wz-text-bold">{{virusPositives}}</span></div>
+                    <div flex>Total: <span class="wz-text-bold">{{virusTotal}}</span></div>                    
                 </md-card-content>
             </md-card>
         </div>