feat(OCPADVISOR-143): Connect workloads to mocked API (#627)

* feat(OCPADVISOR-143): connect workloads mock api * refactor(OCPADVISOR-143): workloads table uses correct data
RedHatInsights · Nov 2, 2023 · ab135d2 · ab135d2
1 parent 9a62466
commit ab135d2
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 56 deletions.
diff --git a/src/Components/HighestSeverityBadge/HighestSeverityBadge.js b/src/Components/HighestSeverityBadge/HighestSeverityBadge.js
@@ -4,13 +4,7 @@ import { TooltipPosition } from '@patternfly/react-core/dist/js/components/Toolt
 import InsightsLabel from '@redhat-cloud-services/frontend-components/InsightsLabel';
 import PropTypes from 'prop-types';
 
-export const HighestSeverityBadge = ({ severities }) => {
-  let highestSeverity = 0;
-
-  Object.keys(severities).forEach((severityType) =>
-    severities[severityType] > 0 ? (highestSeverity = severityType) : null
-  );
-
+export const HighestSeverityBadge = ({ highestSeverity, severities }) => {
   const severityTypeToText = (value) => {
     value = parseInt(value);
     if (value === 1) {
@@ -44,5 +38,6 @@ export const HighestSeverityBadge = ({ severities }) => {
 };
 
 HighestSeverityBadge.propTypes = {
-  severities: PropTypes.arrayOf(PropTypes.number),
+  severities: PropTypes.object,
+  highestSeverity: PropTypes.number,
 };
diff --git a/src/Components/WorkloadsListTable/WorkloadsListTable.js b/src/Components/WorkloadsListTable/WorkloadsListTable.js
@@ -1,4 +1,8 @@
 import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import useFeatureFlag, {
+  WORKLOADS_ENABLE_FLAG,
+} from '../../Utilities/useFeatureFlag';
 import PrimaryToolbar from '@redhat-cloud-services/frontend-components/PrimaryToolbar';
 import {
   Table,
@@ -25,67 +29,56 @@ import {
 } from '../../Services/Filters';
 import isEqual from 'lodash/isEqual';
 import { buildFilterChips } from '../Common/Tables';
+import { ErrorState, NoMatchingClusters } from '../MessageState/EmptyStates';
+import Loading from '../Loading/Loading';
 
-const workloadsData = [
-  {
-    workload_id: 'asd4134asd-1234241',
-    workload_name: 'Workload 1',
-    risks: {
-      1: 2,
-      2: 0,
-      3: 3,
-      4: 1,
-    },
-    recommendations: 4,
-    objects: 14,
-    lastSeen: '2023-10-30T09:55:52Z',
-  },
-  {
-    workload_id: 'worklooaaaasd-2',
-    workload_name: 'Workload 2',
-    risks: {
-      1: 1,
-      2: 3,
-      3: 2,
-      4: 0,
-    },
-    recommendations: 5,
-    objects: 3,
-    lastSeen: '2023-10-30T05:55:52Z',
-  },
-];
-
-const WorkloadsListTable = () => {
+const WorkloadsListTable = ({
+  query: { isError, isUninitialized, isFetching, isSuccess, data },
+}) => {
   const dispatch = useDispatch();
-  const workloads = workloadsData;
+  const workloadsEnabled = useFeatureFlag(WORKLOADS_ENABLE_FLAG);
   const filters = useSelector(({ filters }) => filters.workloadsListState);
+  console.log(workloadsEnabled, 'FLAG');
+  const workloads = data?.workloads || [];
+
   const [rows, setRows] = React.useState([]);
   const updateFilters = (payload) =>
     dispatch(updateWorkloadsListFilters(payload));
 
+  const loadingState = isUninitialized || isFetching;
+  const errorState = isError;
+  const noMatch = rows.length === 0;
+  const successState = isSuccess;
+
   useEffect(() => {
     setRows(buildRows(workloads));
-  }, [workloads]);
+  }, [data]);
 
   const buildRows = (items) => {
     return items.map((item, index) => {
       return {
         entity: item,
         cells: [
           <span key={index}>
-            <Link to={`${BASE_PATH}/workloads/${item.workload_id}`}>
-              {item.workload_name || item.workload_id}
+            <Link
+              to={`${BASE_PATH}/workloads/${item.cluster.uuid}/${item.namespace.uuid}`}
+            >
+              <p key={`${index}-cluster`}>{item.cluster.display_name}</p>
+              <p key={`${index}-namespace`}>{item.namespace.name}</p>
             </Link>
           </span>,
-          item.recommendations,
+          item.metadata.recommendations,
           <span key={index}>
-            <HighestSeverityBadge severities={item.risks} />
+            <HighestSeverityBadge
+              highestSeverity={item.metadata.highest_severity}
+              severities={item.metadata.hits_by_severity}
+            />
           </span>,
-          item.objects,
-          <span key={Math.random()}>
+          item.metadata.objects,
+          <span key={index}>
             <DateFormat
               extraTitle="Last seen: "
-              date={item.lastSeen}
+              date={item.metadata.last_checked_at}
               variant="relative"
             />
           </span>,
@@ -165,7 +158,7 @@ const WorkloadsListTable = () => {
     <div id="workloads-list-table">
       <PrimaryToolbar
         pagination={{
-          itemCount: 2,
+          itemCount: data?.workloads.length || 0,
           page: 1,
           perPage: 20,
           onSetPage: () => console.log('here should be a pagination'),
@@ -181,15 +174,41 @@ const WorkloadsListTable = () => {
         ouiaId="workloads"
         variant={TableVariant.compact}
         cells={WORKLOADS_LIST_COLUMNS}
-        rows={rows}
+        rows={
+          errorState || loadingState || noMatch ? (
+            [
+              {
+                fullWidth: true,
+                cells: [
+                  {
+                    props: {
+                      colSpan: WORKLOADS_LIST_COLUMNS.length + 1,
+                    },
+                    title: errorState ? (
+                      <ErrorState />
+                    ) : loadingState ? (
+                      <Loading />
+                    ) : (
+                      <NoMatchingClusters />
+                    ),
+                  },
+                ],
+              },
+            ]
+          ) : successState ? (
+            rows
+          ) : (
+            <ErrorState />
+          )
+        }
         isStickyHeader
       >
         <TableHeader />
         <TableBody />
       </Table>
       <Pagination
         ouiaId="pager"
-        itemCount={2}
+        itemCount={data?.workloads.length || 0}
         page={1}
         perPage={20}
         onSetPage={() => {}}
@@ -201,4 +220,8 @@ const WorkloadsListTable = () => {
   );
 };
 
+WorkloadsListTable.propTypes = {
+  query: PropTypes.object.isRequired,
+};
+
 export { WorkloadsListTable };
diff --git a/src/Components/WorkloadsListTable/index.js b/src/Components/WorkloadsListTable/index.js
@@ -1,14 +1,11 @@
-//Wrapper for API connection
 import React from 'react';
-
-/* import { useGetClustersQuery } from '../../Services/SmartProxy'; */
+import { useGetWorkloadsQuery } from '../../Services/SmartProxy';
 import { WorkloadsListTable } from './WorkloadsListTable';
 
 const WorkloadsListTableWrapper = () => {
-  //Will be a workloads query when we connect it to the API
-  /* const query = useGetClustersQuery(); */
+  const query = useGetWorkloadsQuery();
 
-  return <WorkloadsListTable /* query={query} */ />;
+  return <WorkloadsListTable query={query} />;
 };
 
 export default WorkloadsListTableWrapper;
diff --git a/src/Services/SmartProxy.js b/src/Services/SmartProxy.js
@@ -40,6 +40,13 @@ export const SmartProxyApi = createApi({
     getUpdateRisks: builder.query({
       query: ({ id }) => `v2/cluster/${id}/upgrade-risks-prediction`,
     }),
+    getWorkloads: builder.query({
+      query: () => `v2/namespaces/dvo`,
+    }),
+    getWorkloadById: builder.query({
+      query: ({ namespace_uuid, cluster_uuid }) =>
+        `v2/namespaces/dvo/${namespace_uuid}/cluster/${cluster_uuid}`,
+    }),
   }),
 });
 
@@ -58,4 +65,6 @@ export const {
   useGetClustersQuery,
   useGetClusterInfoQuery,
   useGetUpdateRisksQuery,
+  useGetWorkloadsQuery,
+  useLazyGetWorkloadByIdQuery,
 } = SmartProxyApi;