feat(OCPADVISOR-126): workloads list table (#625)

src/App.scss

@@ -16,4 +16,7 @@
 
 #cluster-header-dropdown {
     justify-self: end;
+}
+.grey-icon {
+    color: var(--pf-global--Color--200);
 }

src/AppConstants.js

@@ -4,6 +4,8 @@ import intlHelper from '@redhat-cloud-services/frontend-components-translations/
 
 import messages from './Messages';
 import { fitContent, sortable } from '@patternfly/react-table';
+import { Tooltip } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 
 const cache = createIntlCache();
 const locale = navigator.language.slice(0, 2);
@@ -386,3 +388,41 @@ export const RISK_OF_CHANGE_DESC = {
   ),
   4: <span>The change will require a cluster-wide outage window.</span>,
 };
+
+export const WORKLOADS_LIST_COLUMNS = [
+  {
+    title: (
+      <Tooltip position="top" content={'Cluster Namespace'}>
+        <span className="pf-c-table__text">
+          Workloads &nbsp;
+          <OutlinedQuestionCircleIcon className="grey-icon" />
+        </span>
+      </Tooltip>
+    ),
+    transforms: [sortable],
+  },
+  {
+    title: 'Recommendations',
+    transforms: [sortable, fitContent],
+  },
+  {
+    title: 'Highest severity',
+    transforms: [sortable, fitContent],
+  },
+  {
+    title: 'Objects',
+    transforms: [sortable, fitContent],
+  },
+  {
+    title: 'Last seen',
+    transforms: [sortable, fitContent],
+  },
+];
+
+export const WORKLOADS_LIST_COLUMNS_KEYS = [
+  'workload',
+  'recommendations',
+  'highest_severity',
+  'objects',
+  'last_seen',
+];

src/Components/HighestSeverityBadge/HighestSeverityBadge.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Tooltip } from '@patternfly/react-core';
+import { TooltipPosition } from '@patternfly/react-core/dist/js/components/Tooltip';
+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
+  );
+
+  const severityTypeToText = (value) => {
+    value = parseInt(value);
+    if (value === 1) {
+      return 'Low';
+    } else if (value === 2) {
+      return 'Moderate';
+    } else if (value === 3) {
+      return 'Important';
+    } else {
+      return 'Critical';
+    }
+  };
+
+  const severitiesToDisplay = Object.keys(severities)
+    .map((severityType) => {
+      return severities[severityType] > 0 ? (
+        <p key={severityType}>
+          {severities[severityType]} {severityTypeToText(severityType)}
+        </p>
+      ) : null;
+    })
+    .reverse();
+
+  return (
+    <div>
+      <Tooltip position={TooltipPosition.top} content={severitiesToDisplay}>
+        <InsightsLabel value={highestSeverity} isCompact />
+      </Tooltip>
+    </div>
+  );
+};
+
+HighestSeverityBadge.propTypes = {
+  severities: PropTypes.arrayOf(PropTypes.number),
+};

src/Components/WorkloadsList/index.js

@@ -22,7 +22,7 @@ const WorkloadsList = () => {
     <React.Fragment>
       <PageHeader className="ins-c-clusters-header">
         <Title headingLevel="h1" ouiaId="page-header">
-          Workloads
+          Advisor workloads
         </Title>
       </PageHeader>
       <section className="pf-l-page__main-section pf-c-page__main-section">

src/Components/WorkloadsListTable/WorkloadsListTable.js

@@ -1,13 +1,126 @@
-/* eslint-disable no-unused-vars */
-//^ this will be removed later
-import React from 'react';
+import React, { useEffect } from 'react';
 import useFeatureFlag, {
   WORKLOADS_ENABLE_FLAG,
 } from '../../Utilities/useFeatureFlag';
+import PrimaryToolbar from '@redhat-cloud-services/frontend-components/PrimaryToolbar';
+import {
+  Table,
+  TableBody,
+  TableHeader,
+  TableVariant,
+} from '@patternfly/react-table';
+import { PaginationVariant } from '@patternfly/react-core/dist/js/components/Pagination/Pagination';
+import { WORKLOADS_LIST_COLUMNS } from '../../AppConstants';
+import DateFormat from '@redhat-cloud-services/frontend-components/DateFormat';
+import { Link } from 'react-router-dom';
+import { BASE_PATH } from '../../Routes';
+import { HighestSeverityBadge } from '../HighestSeverityBadge/HighestSeverityBadge';
+import { Pagination } from '@patternfly/react-core';
+
+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 workloadsEnabled = useFeatureFlag(WORKLOADS_ENABLE_FLAG);
   console.log(workloadsEnabled, 'FLAG');
+
+  const workloads = workloadsData;
+
+  const [rows, setRows] = React.useState([]);
+
+  useEffect(() => {
+    setRows(buildRows(workloads));
+  }, [workloads]);
+
+  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>
+          </span>,
+          item.recommendations,
+          <span key={index}>
+            <HighestSeverityBadge severities={item.risks} />
+          </span>,
+          item.objects,
+          <span key={Math.random()}>
+            <DateFormat
+              extraTitle="Last seen: "
+              date={item.lastSeen}
+              variant="relative"
+            />
+          </span>,
+        ],
+      };
+    });
+  };
+
+  return (
+    <div id="workloads-list-table">
+      <PrimaryToolbar
+        pagination={{
+          itemCount: 2,
+          page: 1,
+          perPage: 20,
+          onSetPage: () => {},
+          onPerPageSelect: () => {},
+          isCompact: true,
+          ouiaId: 'pager',
+        }}
+      />
+      <Table
+        aria-label="Table of workloads"
+        ouiaId="workloads"
+        variant={TableVariant.compact}
+        cells={WORKLOADS_LIST_COLUMNS}
+        rows={rows}
+        isStickyHeader
+      >
+        <TableHeader />
+        <TableBody />
+      </Table>
+      <Pagination
+        ouiaId="pager"
+        itemCount={2}
+        page={1}
+        perPage={20}
+        onSetPage={() => {}}
+        onPerPageSelect={() => {}}
+        widgetId={`pagination-options-menu-bottom`}
+        variant={PaginationVariant.bottom}
+      />
+    </div>
+  );
 };
 
 export { WorkloadsListTable };