Fix [Consumer groups] Table is empty although BE response is not empty

src/components/ConsumerGroup/ConsumerGroup.js

@@ -28,11 +28,13 @@ import PageHeader from '../../elements/PageHeader/PageHeader'
 import Search from '../../common/Search/Search'
 import Table from '../Table/Table'
 import { RoundedIcon } from 'igz-controls/components'
+import ConsumerGroupShardLagTableRow from '../../elements/ConsumerGroupShardLagTableRow/ConsumerGroupShardLagTableRow'
 
 import nuclioActions from '../../actions/nuclio'
 import { generatePageData } from './consumerGroup.util.js'
 import { getNoDataMessage } from '../../utils/getNoDataMessage'
 import { showErrorNotification } from '../../utils/notifications.util'
+import createConsumerGroupContent from '../../utils/createConsumerGroupContent'
 
 import { ReactComponent as RefreshIcon } from 'igz-controls/images/refresh.svg'
 
@@ -105,6 +107,11 @@ const ConsumerGroup = ({
 
   const pageData = useMemo(() => generatePageData(), [])
 
+  const tableContent = useMemo(
+    () => createConsumerGroupContent(filteredV3ioStreamShardLags),
+    [filteredV3ioStreamShardLags]
+  )
+
   return (
     <>
       {!isEmpty(currentV3ioStream) && (
@@ -129,7 +136,19 @@ const ConsumerGroup = ({
           <RefreshIcon />
         </RoundedIcon>
       </div>
-      <Table actionsMenu={[]} content={filteredV3ioStreamShardLags} pageData={pageData} />
+      <Table
+        actionsMenu={[]}
+        content={filteredV3ioStreamShardLags}
+        hideActionsMenu
+        pageData={pageData}
+        tableHeaders={pageData.tableHeaders}
+      >
+        {tableContent.map((rowItem, index) => {
+          return (
+            <ConsumerGroupShardLagTableRow key={index} content={tableContent} rowItem={rowItem} />
+          )
+        })}
+      </Table>
       {!nuclioStore.v3ioStreams.loading &&
         !nuclioStore.v3ioStreamShardLags.loading &&
         nuclioStore.v3ioStreamShardLags.parsedData.length === 0 && (

src/components/ConsumerGroups/ConsumerGroups.js

@@ -26,7 +26,9 @@ import NoData from '../../common/NoData/NoData'
 import PageHeader from '../../elements/PageHeader/PageHeader'
 import Search from '../../common/Search/Search'
 import Table from '../Table/Table'
+import ConsumerGroupTableRow from '../../elements/ConsumerGroupTableRow/ConsumerGroupTableRow'
 
+import createConsumerGroupsContent from '../../utils/createConsumerGroupsContent'
 import { GROUP_BY_NONE } from '../../constants'
 import { generatePageData } from './consumerGroups.util.js'
 import { setFilters } from '../../reducers/filtersReducer'
@@ -52,6 +54,11 @@ const ConsumerGroups = () => {
 
   const pageData = useMemo(() => generatePageData(), [])
 
+  const tableContent = useMemo(
+    () => createConsumerGroupsContent(filteredV3ioStreams, params),
+    [filteredV3ioStreams, params]
+  )
+
   return (
     <>
       <PageHeader
@@ -67,7 +74,17 @@ const ConsumerGroups = () => {
           value={filterByName}
         />
       </div>
-      <Table actionsMenu={[]} content={filteredV3ioStreams} pageData={pageData} />
+      <Table
+        actionsMenu={[]}
+        content={filteredV3ioStreams}
+        hideActionsMenu
+        pageData={pageData}
+        tableHeaders={pageData.tableHeaders}
+      >
+        {tableContent.map((rowItem, index) => {
+          return <ConsumerGroupTableRow key={index} content={tableContent} rowItem={rowItem} />
+        })}
+      </Table>
       {!nuclioStore.v3ioStreams.loading && nuclioStore.v3ioStreams.parsedData.length === 0 && (
         <NoData message="You haven’t created any consumer group yet" />
       )}