fix(THEEDGE-3739): Fix filter and link to device details (#2112)

Fixes https://issues.redhat.com/browse/THEEDGE-3739.

This PR fixes the filter and link on immutable tab for group details.

src/Utilities/edge.js

@@ -1,5 +1,6 @@
 import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import axios from 'axios';
+import { useGetImageData } from '../api';
 import {
   INVENTORY_TOTAL_FETCH_EDGE_PARAMS,
   INVENTORY_TOTAL_FETCH_URL_SERVER,
@@ -55,8 +56,39 @@ const inventoryHasEdgeSystems = async () => {
   return result?.data?.total > 0;
 };
 
+const enhancedEdgeConfig = (groupName, config) => {
+  return {
+    ...config,
+    filters: {
+      ...config.filters,
+      hostGroupFilter: [groupName],
+      hostTypeFilter: 'edge',
+    },
+    hasItems: false,
+  };
+};
+const fetchImagesData = useGetImageData();
+const edgeImageDataResult = async (mapDeviceIds) => {
+  return await fetchImagesData({
+    devices_uuid: mapDeviceIds,
+  });
+};
+
+const mapDefaultData = (result) => {
+  let mapDeviceIds = [];
+  result.forEach((data) => {
+    mapDeviceIds.push(data.id);
+  });
+  return {
+    mapDeviceIds,
+  };
+};
+
 export {
   getNotificationProp,
   manageEdgeInventoryUrlName,
   inventoryHasEdgeSystems,
+  enhancedEdgeConfig,
+  edgeImageDataResult,
+  mapDefaultData,
 };

src/Utilities/edge.test.js

@@ -0,0 +1,48 @@
+import { edgeImageDataResult, mapDefaultData } from './edge';
+
+import { mock } from './../__mocks__/systemIssues';
+
+describe('mapDefaultData', () => {
+  it('should return ids', () => {
+    const result = [{ id: 'd20a' }, { id: 'c14b' }];
+    const data = mapDefaultData(result);
+    expect(data).toBeDefined();
+    expect(data).toEqual({ mapDeviceIds: ['d20a', 'c14b'] });
+  });
+});
+
+describe('edgeImageDataResult', () => {
+  const mockedData = {
+    count: 1,
+    data: {
+      total: 1,
+      devices: [
+        {
+          DeviceID: 1,
+          DeviceName: 'test',
+          DeviceUUID: 'd20a',
+          ImageID: 1,
+          ImageName: 'test-93',
+          LastSeen: '2023-12-12T00:10:49.042474Z',
+          UpdateAvailable: true,
+          Status: 'RUNNING',
+          ImageSetID: 1,
+          DeviceGroups: null,
+          DispatcherStatus: 'SUCCESS',
+          DispatcherReason: '',
+          GroupName: 'test',
+          GroupUUID: 'test',
+        },
+      ],
+      enforce_edge_groups: false,
+    },
+  };
+  const mapIds = ['d20a'];
+  mock.onPost('/api/edge/v1/devices/devicesview').reply(200, mockedData);
+
+  it('should return imge information', async () => {
+    const data = await edgeImageDataResult(mapIds);
+    expect(data).toBeDefined();
+    expect(data).toEqual(mockedData);
+  });
+});

src/components/GroupSystems/GroupImmutableSystems.js

@@ -1,4 +1,4 @@
-import { TableVariant, fitContent } from '@patternfly/react-table';
+import { TableVariant } from '@patternfly/react-table';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -22,9 +22,13 @@ import difference from 'lodash/difference';
 import map from 'lodash/map';
 import { useGetInventoryGroupUpdateInfo } from '../../api/edge/imagesInfo';
 import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
-import { getNotificationProp } from '../../Utilities/edge';
+import {
+  edgeImageDataResult,
+  enhancedEdgeConfig,
+  getNotificationProp,
+  mapDefaultData,
+} from '../../Utilities/edge';
 import { edgeColumns } from '../ImmutableDevices/columns';
-import { useGetImageData } from '../../api';
 import { mergeArraysByKey } from '@redhat-cloud-services/frontend-components-utilities/helpers';
 export const prepareColumns = (
   initialColumns,
@@ -35,21 +39,6 @@ export const prepareColumns = (
   const columns = hideGroupColumn
     ? initialColumns.filter(({ key }) => key !== 'groups')
     : initialColumns;
-
-  // additionally insert the "update method" column
-  columns.splice(columns.length - 2 /* must be the 3rd col from the end */, 0, {
-    key: 'update_method',
-    title: 'Update method',
-    sortKey: 'update_method',
-    transforms: [fitContent],
-    renderFunc: (value, hostId, systemData) =>
-      systemData?.system_profile?.system_update_method || 'N/A',
-    props: {
-      // TODO: remove isStatic when the sorting is supported by API
-      isStatic: true,
-      width: 10,
-    },
-  });
   columns[columns.findIndex(({ key }) => key === 'display_name')].renderFunc = (
     value,
     hostId
@@ -72,14 +61,15 @@ export const prepareColumns = (
     'system_profile',
     'update_method',
     'updated',
+    'image',
+    'status',
   ]
     .map((colKey) => columns.find(({ key }) => key === colKey))
     .filter(Boolean); // eliminate possible undefined's
 };
 
 const GroupImmutableSystems = ({ groupName, groupId, ...props }) => {
   const dispatch = useDispatch();
-  const fetchImagesData = useGetImageData();
   const mergeColumns = (inventoryColumns) => {
     const filteredColumns = inventoryColumns.filter(
       (column) => column.key !== 'groups'
@@ -129,26 +119,36 @@ const GroupImmutableSystems = ({ groupName, groupId, ...props }) => {
     showTags,
     defaultGetEntities
   ) => {
-    const updateInfo = await getUpdateInfo(groupId);
-    setDeviceData(updateInfo?.update_devices_uuids);
-    setDeviceImageSet(updateInfo?.device_image_set_info);
-    const mapDeviceIds = Object.keys(updateInfo?.device_image_set_info);
-    const customResult = await fetchImagesData({ devices_uuid: mapDeviceIds });
-    const rowInfo = [];
-    customResult?.data?.devices.forEach((row) => {
-      rowInfo.push({ ...row, id: row.DeviceUUID });
-    });
-    const items = rowInfo.map(({ id }) => id);
-    const enhancedConfig = { ...config, hasItems: true };
+    const enhancedConfig = enhancedEdgeConfig(groupName.toString(), config);
     const defaultData = await defaultGetEntities(
       items,
       enhancedConfig,
       showTags
     );
-    return {
-      results: mergeArraysByKey([defaultData.results, rowInfo]),
-      total: customResult?.data?.total,
-    };
+
+    const mapDeviceIds = mapDefaultData(defaultData.results);
+    const updateInfo = await getUpdateInfo(groupId);
+    setDeviceData(updateInfo?.update_devices_uuids);
+    setDeviceImageSet(updateInfo?.device_image_set_info);
+    const rowInfo = [];
+    let items = [];
+    if (defaultData.total > 0) {
+      const customResult = await edgeImageDataResult(mapDeviceIds.mapDeviceIds);
+      customResult?.data?.devices.forEach((row) => {
+        rowInfo.push({ ...row, id: row.DeviceUUID });
+      });
+      items = rowInfo.map(({ id }) => id);
+
+      return {
+        results: mergeArraysByKey([defaultData.results, rowInfo]),
+        total: customResult?.data?.total,
+      };
+    } else {
+      return {
+        results: mergeArraysByKey([defaultData.results]),
+        total: 0,
+      };
+    }
   };
 
   useEffect(() => {
@@ -244,14 +244,14 @@ const GroupImmutableSystems = ({ groupName, groupId, ...props }) => {
       )}
       {!addToGroupModalOpen && (
         <InventoryTable
-          columns={(columns) => mergeColumns(columns)}
+          columns={(columns) => mergeColumns(prepareColumns(columns))}
           hideFilters={{ hostGroupFilter: true }}
           // getEntities={entities}
           getEntities={customGetEntities}
           tableProps={{
             isStickyHeader: true,
             variant: TableVariant.compact,
-            canSelectAll: true,
+            canSelectAll: false,
             actionResolver: (row) => [
               {
                 title: (