Fix IPV6 visualizations

public/components/common/tables/table-with-search-bar.tsx

@@ -17,6 +17,7 @@ import { WzSearchBar } from '../../wz-search-bar/';
 import { UI_ERROR_SEVERITIES } from '../../../react-services/error-orchestrator/types';
 import { UI_LOGGER_LEVELS } from '../../../../common/constants';
 import { getErrorOrchestrator } from '../../../react-services/common-services';
+import { compressIPv6 } from '../../../services/ipv6-services';
 
 export function TableWithSearchBar({
   onSearch,
@@ -31,6 +32,7 @@ export function TableWithSearchBar({
   tableProps = {},
   reload,
   endpoint,
+  compressipv6 = false,
   ...rest
 }) {
   const [loading, setLoading] = useState(false);
@@ -79,31 +81,46 @@ export function TableWithSearchBar({
     }
   }, [endpoint, reload]);
 
-  useEffect(function () {
-    (async () => {
-      try {
-        setLoading(true);
-        const { items, totalItems } = await onSearch(endpoint, filters, pagination, sorting);
-        setItems(items);
-        setTotalItems(totalItems);
-      } catch (error) {
-        setItems([]);
-        setTotalItems(0);
-        const options = {
-          context: `${TableWithSearchBar.name}.useEffect`,
-          level: UI_LOGGER_LEVELS.ERROR,
-          severity: UI_ERROR_SEVERITIES.BUSINESS,
-          error: {
-            error: error,
-            message: error.message || error,
-            title: `${error.name}: Error fetching items`,
-          },
-        };
-        getErrorOrchestrator().handleError(options);
-      }
-      setLoading(false);
-    })();
-  }, [filters, pagination, sorting]);
+  useEffect(
+    function () {
+      (async () => {
+        try {
+          setLoading(true);
+          let { items, totalItems } = await onSearch(
+            endpoint,
+            filters,
+            pagination,
+            sorting,
+          );
+          if (compressipv6) {
+            items.forEach(item => {
+              if (item.ip) {
+                item.ip = compressIPv6(item.ip);
+              }
+            });
+          }
+          setItems(items);
+          setTotalItems(totalItems);
+        } catch (error) {
+          setItems([]);
+          setTotalItems(0);
+          const options = {
+            context: `${TableWithSearchBar.name}.useEffect`,
+            level: UI_LOGGER_LEVELS.ERROR,
+            severity: UI_ERROR_SEVERITIES.BUSINESS,
+            error: {
+              error: error,
+              message: error.message || error,
+              title: `${error.name}: Error fetching items`,
+            },
+          };
+          getErrorOrchestrator().handleError(options);
+        }
+        setLoading(false);
+      })();
+    },
+    [filters, pagination, sorting],
+  );
 
   useEffect(() => {
     // This effect is triggered when the component is mounted because of how to the useEffect hook works.
@@ -136,7 +153,7 @@ export function TableWithSearchBar({
         placeholder={searchBarPlaceholder}
         {...searchBarProps}
       />
-      <EuiSpacer size="s" />
+      <EuiSpacer size='s' />
       <EuiBasicTable
         columns={tableColumns}
         items={items}

public/components/common/tables/table-wz-api.tsx

@@ -52,19 +52,27 @@ export function TableWzAPI({
   showReload?: boolean;
   searchBarProps?: any;
   reload?: boolean;
+  compressipv6?: boolean;
 }) {
   const [totalItems, setTotalItems] = useState(0);
   const [filters, setFilters] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
-  const onFiltersChange = (filters) =>
-    typeof rest.onFiltersChange === 'function' ? rest.onFiltersChange(filters) : null;
+  const onFiltersChange = filters =>
+    typeof rest.onFiltersChange === 'function'
+      ? rest.onFiltersChange(filters)
+      : null;
 
   /**
    * Changing the reloadFootprint timestamp will trigger reloading the table
    */
   const [reloadFootprint, setReloadFootprint] = useState(rest.reload || 0);
 
-  const onSearch = useCallback(async function (endpoint, filters, pagination, sorting) {
+  const onSearch = useCallback(async function (
+    endpoint,
+    filters,
+    pagination,
+    sorting,
+  ) {
     try {
       const { pageIndex, pageSize } = pagination;
       const { field, direction } = sorting.sort;
@@ -85,7 +93,10 @@ export function TableWzAPI({
       ).data;
       setIsLoading(false);
       setTotalItems(totalItems);
-      return { items: rest.mapResponseItem ? items.map(rest.mapResponseItem) : items, totalItems };
+      return {
+        items: rest.mapResponseItem ? items.map(rest.mapResponseItem) : items,
+        totalItems,
+      };
     } catch (error) {
       setIsLoading(false);
       setTotalItems(0);
@@ -101,7 +112,8 @@ export function TableWzAPI({
       };
       getErrorOrchestrator().handleError(options);
     }
-  }, []);
+  },
+  []);
 
   const renderActionButtons = (
     <>
@@ -132,7 +144,7 @@ export function TableWzAPI({
     <EuiFlexItem grow={false}>
       <EuiButtonEmpty
         isDisabled={totalItems == 0}
-        iconType="refresh"
+        iconType='refresh'
         onClick={() => triggerReload()}
       >
         Refresh
@@ -142,16 +154,22 @@ export function TableWzAPI({
 
   const header = (
     <EuiFlexGroup wrap>
-      <EuiFlexItem className="wz-flex-basis-auto" grow={false}>
+      <EuiFlexItem className='wz-flex-basis-auto' grow={false}>
         {rest.title && (
-          <EuiTitle size="s">
+          <EuiTitle size='s'>
             <h1>
               {rest.title}{' '}
-              {isLoading ? <EuiLoadingSpinner size="s" /> : <span>({totalItems})</span>}
+              {isLoading ? (
+                <EuiLoadingSpinner size='s' />
+              ) : (
+                <span>({totalItems})</span>
+              )}
             </h1>
           </EuiTitle>
         )}
-        {rest.description && <EuiText color="subdued">{rest.description}</EuiText>}
+        {rest.description && (
+          <EuiText color='subdued'>{rest.description}</EuiText>
+        )}
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiFlexGroup wrap justifyContent={'flexEnd'} alignItems={'center'}>
@@ -174,9 +192,15 @@ export function TableWzAPI({
   );
 
   const table = rest.searchTable ? (
-    <TableWithSearchBar onSearch={onSearch} {...{ ...rest, reload: reloadFootprint }} />
+    <TableWithSearchBar
+      onSearch={onSearch}
+      {...{ ...rest, reload: reloadFootprint }}
+    />
   ) : (
-    <TableDefault onSearch={onSearch} {...{ ...rest, reload: reloadFootprint }} />
+    <TableDefault
+      onSearch={onSearch}
+      {...{ ...rest, reload: reloadFootprint }}
+    />
   );
 
   return (

public/components/common/welcome/agents-info.js

@@ -20,7 +20,7 @@ import {
 } from '@elastic/eui';
 import { WzRequest } from '../../../react-services/wz-request';
 import { formatUIDate } from '../../../react-services/time-service';
-
+import { compressIPv6 } from '../../../services/ipv6-services';
 import WzTextWithTooltipIfTruncated from '../wz-text-with-tooltip-if-truncated';
 import { WzStat } from '../../wz-stat';
 import { GroupTruncate } from '../util/agent-group-truncate'
@@ -73,7 +73,7 @@ export class AgentInfo extends Component {
     const osName = os_name === '- -' ? '-' : os_name;
 
     return (
-      <WzTextWithTooltipIfTruncated position='bottom' tooltipProps={{ anchorClassName: 'wz-width-100'}} elementStyle={{ maxWidth: style.maxWidth, fontSize: 12 }}>
+      <WzTextWithTooltipIfTruncated position='bottom' tooltipProps={{ anchorClassName: 'wz-width-100' }} elementStyle={{ maxWidth: style.maxWidth, fontSize: 12 }}>
         {this.getPlatformIcon(this.props.agent)}
         {' '}{osName}
       </WzTextWithTooltipIfTruncated>
@@ -105,7 +105,7 @@ export class AgentInfo extends Component {
     };
     const stats = items.map(item => {
       // We add tooltipProps, so that the ClusterNode and Operating System fields occupy their space and do not exceed this, overlapping with the one on the right
-      const tooltipProps = item.description === 'Cluster node' ? { anchorClassName: 'wz-width-100'} : {};
+      const tooltipProps = item.description === 'Cluster node' ? { anchorClassName: 'wz-width-100' } : {};
       return (
         <EuiFlexItem key={item.description} style={item.style || null}>
           <WzStat
@@ -122,7 +122,7 @@ export class AgentInfo extends Component {
               ) : item.description === 'Operating system' ? (
                 this.addTextPlatformRender(this.props.agent, item.style)
               ) : item.description === 'Status' ? (
-                <AgentStatus status={this.props.agent.status} style={{...item.style, fontSize: '12px'}} />
+                <AgentStatus status={this.props.agent.status} style={{ ...item.style, fontSize: '12px' }} />
               ) : (
                 <WzTextWithTooltipIfTruncated position='bottom' tooltipProps={tooltipProps} elementStyle={{ maxWidth: item.style.maxWidth, fontSize: 12 }}>
                   {checkField(item.title)}
@@ -157,7 +157,7 @@ export class AgentInfo extends Component {
       arrayStats = [
         { title: agent.id, description: 'ID', style: { minWidth: 30 } },
         { title: agent.status, description: 'Status', style: { minWidth: 130 } },
-        { title: agent.ip, description: 'IP address', style: { minWidth: 80 } },
+        { title: compressIPv6(agent.ip), description: 'IP address', style: { width: 'fit-content' } },
         { title: agent.version, description: 'Version', style: { minWidth: 100 } },
         { title: agent.group, description: 'Groups', style: { minWidth: 150 } },
         { title: agent.name, description: 'Operating system', style: { minWidth: 150 } },
@@ -173,7 +173,7 @@ export class AgentInfo extends Component {
 
     return (
       <Fragment>
-        <EuiFlexGroup wrap style={{responsive: true }} className="wz-welcome-page-agent-info-details">
+        <EuiFlexGroup wrap style={{ responsive: true }} className="wz-welcome-page-agent-info-details">
           {stats}
         </EuiFlexGroup>
       </Fragment>

public/controllers/agent/components/agents-table.js

@@ -41,6 +41,7 @@ import { UI_ERROR_SEVERITIES } from '../../../react-services/error-orchestrator/
 import { getErrorOrchestrator } from '../../../react-services/common-services';
 import { AgentStatus } from '../../../components/agents/agent_status';
 import { AgentSynced } from '../../../components/agents/agent-synced';
+import { compressIPv6 } from '../../../services/ipv6-services';
 
 export const AgentsTable = withErrorBoundary(
   class AgentsTable extends Component {
@@ -289,7 +290,7 @@ export const AgentsTable = withErrorBoundary(
       return {
         id: agent.id,
         name: agent.name,
-        ip: agent.ip,
+        ip: compressIPv6(agent.ip),
         status: agent.status,
         group_config_status: agent.group_config_status,
         group: checkField(agent.group),
@@ -481,6 +482,7 @@ export const AgentsTable = withErrorBoundary(
         name: 'IP address',
         sortable: true,
         show: true,
+        truncateText: true,
       },
       {
         field: 'group',

public/controllers/management/components/management/groups/group-agents-table.js

@@ -144,6 +144,7 @@ class WzGroupAgentsTable extends Component {
         name: 'Id',
         align: 'left',
         sortable: true,
+        width: '5%',
       },
       {
         field: 'name',
@@ -154,8 +155,10 @@ class WzGroupAgentsTable extends Component {
       {
         field: 'ip',
         name: 'IP address',
-        align: 'left',
         sortable: true,
+        show: true,
+        truncateText: false,
+        width: '25%',
       },
       {
         field: 'status',
@@ -254,6 +257,7 @@ class WzGroupAgentsTable extends Component {
           endpoint={`/groups/${this.props.state.itemDetail.name}/agents`}
           reload={this.props.state.reload}
           searchTable={true}
+          compressipv6={true}
         />
       );
     } else {

public/services/ipv6-services.test.ts

@@ -0,0 +1,20 @@
+import { compressIPv6 } from './ipv6-services';
+
+describe('[settings] Input validation', () => {
+  it.each`
+    value                                        | expectedValidation
+    ${'192.168.100.1'}                           | ${'192.168.100.1'}
+    ${'FE80:1234:2223:A000:2202:B3FF:FE1E:8329'} | ${'FE80:1234:2223:A000:2202:B3FF:FE1E:8329'}
+    ${'FE80:0034:0223:A000:0002:B3FF:0000:8329'} | ${'FE80:34:223:A000:2:B3FF:0:8329'}
+    ${'FE80:1234:2223:0000:0000:B3FF:FE1E:8329'} | ${'FE80:1234:2223::B3FF:FE1E:8329'}
+    ${'FE80:0000:0000:A000:0000:0000:0000:8329'} | ${'FE80:0:0:A000::8329'}
+    ${'FE80:0000:0000:0000:2202:00FF:0E1E:8329'} | ${'FE80::2202:FF:E1E:8329'}
+    ${'0000:0000:0000:0000:2202:00FF:0E1E:8329'} | ${'::2202:FF:E1E:8329'}
+    ${'2202:00FF:0E1E:8329:2202:0000:0000:0000'} | ${'2202:FF:E1E:8329:2202::'}
+    ${'0000:0000:0000:0000:0000:0000:0000:0000'} | ${'::'}
+    ${undefined}                                 | ${undefined}
+    ${234}                                       | ${234}
+  `('$value | $expectedValidation', ({ value, expectedValidation }) => {
+    expect(compressIPv6(value)).toBe(expectedValidation);
+  });
+});

public/services/ipv6-services.ts

@@ -0,0 +1,24 @@
+export function compressIPv6(ip: string) {
+  if (typeof ip !== 'string') {
+    return ip;
+  }
+  if (ip?.split(':').length !== 8) {
+    return ip;
+  }
+
+  let output = ip
+    .split(':')
+    .map(terms => terms.replace(/\b0+/g, '') || '0')
+    .join(':');
+  const zeros = Array.from(output.matchAll(/\b:?(?:0+:?){2,}/g));
+  if (zeros.length > 0) {
+    let max = '';
+    zeros.forEach(item => {
+      if (item[0].replace(/:/g, '').length > max.replace(/:/g, '').length) {
+        max = item[0];
+      }
+    });
+    output = output.replace(max, '::');
+  }
+  return output;
+}