feat(OCPADVISOR-135): workload detail page header (#630)

src/Components/Workload/Workload.js

@@ -1,10 +1,48 @@
 import React from 'react';
 import PageHeader from '@redhat-cloud-services/frontend-components/PageHeader';
+import { Flex, FlexItem, PageSection } from '@patternfly/react-core';
+import Breadcrumbs from '../Breadcrumbs';
+import WorkloadsHeader from '../WorkloadHeader';
+import PropTypes from 'prop-types';
 
-export const Workload = () => {
+export const Workload = ({ workload, namespaceId, clusterId }) => {
   return (
     <React.Fragment>
-      <PageHeader className="pf-m-light ins-inventory-detail" />
+      <PageHeader className="pf-m-light ins-inventory-detail">
+        <Flex direction={{ default: 'column' }}>
+          <FlexItem>
+            <Breadcrumbs
+              current={
+                workload?.data?.status === 'ok'
+                  ? `${workload.data.cluster.display_name} | ${workload.data.namespace.name}`
+                  : `${clusterId} | ${namespaceId}`
+              }
+            />
+            <WorkloadsHeader />
+          </FlexItem>
+        </Flex>
+      </PageHeader>
+      <PageSection>{/* <WorkloadRules workload={workload} /> */}</PageSection>
     </React.Fragment>
   );
 };
+
+Workload.propTypes = {
+  clusterId: PropTypes.string.isRequired,
+  namespaceId: PropTypes.string.isRequired,
+  workload: PropTypes.shape({
+    isUninitialized: PropTypes.bool.isRequired,
+    isFetching: PropTypes.bool.isRequired,
+    data: PropTypes.shape({
+      namespace: PropTypes.shape({
+        uuid: PropTypes.string,
+        name: PropTypes.string,
+      }),
+      cluster: PropTypes.shape({
+        uuid: PropTypes.string,
+        display_name: PropTypes.string,
+      }),
+      status: PropTypes.string,
+    }),
+  }),
+};

src/Components/Workload/index.js

@@ -1,9 +1,37 @@
-//Wrapper for API connection
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Workload } from './Workload';
+import { useParams } from 'react-router-dom';
+import { useGetWorkloadByIdQuery } from '../../Services/SmartProxy';
+import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
 
 const WorkloadWrapper = () => {
-  return <Workload />;
+  const chrome = useChrome();
+  const { namespaceId, clusterId } = useParams();
+  const workload = useGetWorkloadByIdQuery({
+    namespaceId,
+    clusterId,
+  });
+
+  useEffect(() => {
+    workload.refetch();
+  }, [namespaceId, clusterId]);
+
+  useEffect(() => {
+    const subnav = `${
+      workload?.data?.status === 'ok'
+        ? `${workload?.data?.cluster.display_name} | ${workload?.data?.namespace.name} - Workloads`
+        : `${clusterId} | ${namespaceId} - Workloads`
+    }`;
+    chrome.updateDocumentTitle(`${subnav} - OCP Advisor | Red Hat Insights`);
+  }, [workload, namespaceId, clusterId]);
+
+  return (
+    <Workload
+      workload={workload}
+      namespaceId={namespaceId}
+      clusterId={clusterId}
+    />
+  );
 };
 
 export default WorkloadWrapper;

src/Components/WorkloadHeader/WorkloadHeader.js

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import {
+  Grid,
+  GridItem,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import Skeleton from '@redhat-cloud-services/frontend-components/Skeleton';
+import { OneLineLoader } from '../../Utilities/Loaders';
+import DateFormat from '@redhat-cloud-services/frontend-components/DateFormat';
+import PropTypes from 'prop-types';
+
+export const WorkloadHeader = ({ workloadData, namespaceId, clusterId }) => {
+  const { isUninitialized, isFetching, data: workload } = workloadData;
+  return (
+    <Grid id="workload-header" md={12} hasGutter>
+      <GridItem span={8}>
+        <Title
+          size="2xl"
+          headingLevel="h1"
+          id="cluster-header-title"
+          ouiaId="cluster-name"
+        >
+          {isUninitialized || isFetching ? (
+            <>
+              <Skeleton size="sm" />
+              <Skeleton size="sm" />
+            </>
+          ) : (
+            <>
+              <p>{workload.cluster.display_name}</p>
+              <p>{workload.namespace.name}</p>
+            </>
+          )}
+        </Title>
+      </GridItem>
+      <GridItem>
+        <Stack>
+          <StackItem id="workload-header-uuid">
+            <span>Cluster UUID:</span> <span>{clusterId}</span>{' '}
+            <span>Namespace UUID:</span> <span>{namespaceId}</span>
+          </StackItem>
+          <StackItem id="workload-header-last-seen">
+            <span>Last seen: </span>
+            <span>
+              {isUninitialized || isFetching ? (
+                <OneLineLoader />
+              ) : workload?.metadata?.last_checked_at ? (
+                <DateFormat
+                  date={workload.metadata.last_checked_at}
+                  type="exact"
+                />
+              ) : (
+                <>Unknown</>
+              )}
+            </span>
+          </StackItem>
+        </Stack>
+      </GridItem>
+    </Grid>
+  );
+};
+
+WorkloadHeader.propTypes = {
+  clusterId: PropTypes.string.isRequired,
+  namespaceId: PropTypes.string.isRequired,
+  workloadData: PropTypes.shape({
+    isUninitialized: PropTypes.bool.isRequired,
+    isFetching: PropTypes.bool.isRequired,
+    data: PropTypes.shape({
+      namespace: PropTypes.shape({
+        uuid: PropTypes.string,
+        name: PropTypes.string,
+      }),
+      cluster: PropTypes.shape({
+        uuid: PropTypes.string,
+        display_name: PropTypes.string,
+      }),
+      status: PropTypes.string,
+    }),
+  }),
+};

src/Components/WorkloadHeader/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { WorkloadHeader } from './WorkloadHeader';
+import { useParams } from 'react-router-dom';
+import { useGetWorkloadByIdQuery } from '../../Services/SmartProxy';
+
+const WorkloadsHeaderWrapper = () => {
+  const { namespaceId, clusterId } = useParams();
+  const workloadData = useGetWorkloadByIdQuery({
+    namespaceId,
+    clusterId,
+  });
+
+  return (
+    <WorkloadHeader
+      workloadData={workloadData}
+      namespaceId={namespaceId}
+      clusterId={clusterId}
+    />
+  );
+};
+
+export default WorkloadsHeaderWrapper;

src/Routes.js

@@ -110,7 +110,7 @@ export const AppRoutes = () => {
           }
         />
         <Route
-          path="/workloads/:workloadId"
+          path="/workloads/:clusterId/:namespaceId"
           element={
             workloadsEnabled ? (
               <Workload

src/Services/SmartProxy.js

@@ -44,8 +44,8 @@ export const SmartProxyApi = createApi({
       query: () => `v2/namespaces/dvo`,
     }),
     getWorkloadById: builder.query({
-      query: ({ namespace_uuid, cluster_uuid }) =>
-        `v2/namespaces/dvo/${namespace_uuid}/cluster/${cluster_uuid}`,
+      query: ({ namespaceId, clusterId }) =>
+        `v2/namespaces/dvo/${namespaceId}/cluster/${clusterId}`,
     }),
   }),
 });
@@ -66,5 +66,5 @@ export const {
   useGetClusterInfoQuery,
   useGetUpdateRisksQuery,
   useGetWorkloadsQuery,
-  useLazyGetWorkloadByIdQuery,
+  useGetWorkloadByIdQuery,
 } = SmartProxyApi;