feat(RHINENG-8850): add objects name to the modal

src/AppConstants.js

@@ -533,6 +533,7 @@ export const WORKLOADS_RULES_FILTER_CONFIG = (filters, addParamFunction) => [
 ];
 
 export const ObjectsTableColumns = {
+  display_name: 'Name',
   object: 'Object ID',
   kind: 'Kind',
 };

src/Components/ObjectsModal/ObjectsModal.js

@@ -20,6 +20,7 @@ const ObjectsModal = ({ isModalOpen, setIsModalOpen, objects }) => {
     setIsModalOpen(false);
     resetFilters(filters, WORKLOADS_OBJECTS_TABLE_INITIAL_STATE, updateFilters);
   };
+  const objectsWithNames = objects.filter((object) => object.display_name);
 
   return (
     <PfModal
@@ -28,7 +29,10 @@ const ObjectsModal = ({ isModalOpen, setIsModalOpen, objects }) => {
       variant={'medium'}
       title="Objects"
     >
-      <ObjectsModalTable objects={objects} />
+      <ObjectsModalTable
+        objects={objects}
+        objectsWithNames={objectsWithNames}
+      />
     </PfModal>
   );
 };
@@ -42,6 +46,14 @@ ObjectsModal.propTypes = {
     PropTypes.shape({
       kind: PropTypes.string,
       uid: PropTypes.string,
+      display_name: PropTypes.string,
+    })
+  ),
+  objectsNamesArePresent: PropTypes.arrayOf(
+    PropTypes.shape({
+      kind: PropTypes.string,
+      uid: PropTypes.string,
+      display_name: PropTypes.string,
     })
   ),
 };

src/Components/ObjectsModalTable/ObjectsModalTable.js

@@ -53,18 +53,38 @@ export const ObjectsModalTable = ({ objects }) => {
         placeholder: 'Filter by Object ID',
       },
     },
+    {
+      label: 'Object name',
+      type: 'text',
+      filterValues: {
+        key: 'display_name',
+        onChange: (_event, value) =>
+          updateFilters({ ...filters, offset: 0, display_name: value }),
+        value: filters.display_name,
+        placeholder: 'Filter by name',
+      },
+    },
   ];
 
   const buildFilterChips = () => {
     const localFilters = { ...filters };
     delete localFilters.sortIndex;
     delete localFilters.sortDirection;
-    return pruneWorkloadsRulesFilters(localFilters, {
-      label: 'Object ID',
-      type: 'text',
-      title: 'object ID',
-      urlParam: 'object_id',
-    });
+    return pruneWorkloadsRulesFilters(
+      localFilters,
+      {
+        label: 'Object ID',
+        type: 'text',
+        title: 'object ID',
+        urlParam: 'object_id',
+      },
+      {
+        label: 'Object name',
+        type: 'text',
+        title: 'object name',
+        urlParam: 'display_name',
+      }
+    );
   };
 
   const activeFiltersConfig = {
@@ -151,13 +171,17 @@ export const ObjectsModalTable = ({ objects }) => {
           <Table aria-label="Cell widths" variant="compact">
             <Thead>
               <Tr>
+                <Th width={30}>{ObjectsTableColumns.display_name}</Th>
                 <Th width={60}>{ObjectsTableColumns.object}</Th>
                 <Th width={30}>{ObjectsTableColumns.kind}</Th>
               </Tr>
             </Thead>
             <Tbody>
               {displayedRows?.map((object, index) => (
                 <Tr key={index}>
+                  <Td dataLabel={ObjectsTableColumns.display_name}>
+                    {object.display_name}
+                  </Td>
                   <Td dataLabel={ObjectsTableColumns.object}>{object.uid}</Td>
                   <Td dataLabel={ObjectsTableColumns.kind}>{object.kind}</Td>
                 </Tr>

src/Services/Filters.js

@@ -69,6 +69,7 @@ export const WORKLOADS_OBJECTS_TABLE_INITIAL_STATE = {
   limit: 50,
   offset: 0,
   object_id: '',
+  display_name: '',
 };
 
 const filtersInitialState = {

src/Utilities/Workloads.js

@@ -133,7 +133,9 @@ export const pruneWorkloadsRulesFilters = (localFilters, filterCategories) => {
         });
       }
     } else if (
-      (name === 'description' || name === 'object_id') &&
+      (name === 'description' ||
+        name === 'object_id' ||
+        name === 'display_name') &&
       value.trim() !== ''
     ) {
       arr.push({
@@ -186,12 +188,28 @@ export const flatMapRows = (filteredRows, expandFirst) => {
 };
 
 export const passObjectsFilters = (objects, filters) => {
-  return Object.entries(filters).some(([filterKey, filterValue]) => {
+  console.log(filters);
+  const cleanedUpFilters = _.omitBy(_.cloneDeep(filters), _.isEmpty);
+  return Object.entries(cleanedUpFilters).every(([filterKey, filterValue]) => {
     switch (filterKey) {
+      case 'display_name':
+        return (
+          filterValue &&
+          objects.display_name.toLowerCase().includes(filterValue.toLowerCase())
+        );
       case 'object_id':
+        return (
+          filterValue &&
+          objects.uid.toLowerCase().includes(filterValue.toLowerCase())
+        );
+      /* case 'object_id':
         return objects.uid.toLowerCase().includes(filterValue.toLowerCase());
+      case 'display_name':
+        return objects.display_name
+          .toLowerCase()
+          .includes(filterValue.toLowerCase()); */
       default:
-        return false;
+        return true;
     }
   });
 };