feat(dw): move quota level issue states out of tabs

Signed-off-by: gitdallas <[email protected]>
opendatahub-io · Apr 10, 2024 · df0db93 · df0db93
1 parent 65b648d
commit df0db93
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 85 deletions.
diff --git a/...d/src/__tests__/cypress/cypress/e2e/distributedWorkloads/GlobalDistributedWorkloads.cy.ts b/...d/src/__tests__/cypress/cypress/e2e/distributedWorkloads/GlobalDistributedWorkloads.cy.ts
@@ -183,14 +183,11 @@ describe('Distributed Workload Metrics root page', () => {
 
     cy.findByText('No data science projects').should('exist');
   });
-});
 
-describe('Project Metrics tab', () => {
   it('Should render with no quota state when there is no clusterqueue', () => {
     initIntercepts({ clusterQueues: [] });
     globalDistributedWorkloads.visit();
-    cy.findByLabelText('Project metrics tab').click();
-    cy.findByText('Quota is not set').should('exist');
+    cy.findByText('Configure the cluster queue').should('exist');
   });
 
   it('Should render with no quota state when the clusterqueue has no resourceGroups', () => {
@@ -200,17 +197,17 @@ describe('Project Metrics tab', () => {
       ],
     });
     globalDistributedWorkloads.visit();
-    cy.findByLabelText('Project metrics tab').click();
-    cy.findByText('Quota is not set').should('exist');
+    cy.findByText('Configure the cluster queue').should('exist');
   });
 
   it('Should render with no quota state when there are no localqueues', () => {
     initIntercepts({ localQueues: [] });
     globalDistributedWorkloads.visit();
-    cy.findByLabelText('Project metrics tab').click();
-    cy.findByText('Quota is not set').should('exist');
+    cy.findByText('Configure the project queue').should('exist');
   });
+});
 
+describe('Project Metrics tab', () => {
   it('Should render with no workloads empty state', () => {
     initIntercepts({ workloads: [] });
     globalDistributedWorkloads.visit();

diff --git a/frontend/src/pages/distributedWorkloads/global/GlobalDistributedWorkloadsTabs.tsx b/frontend/src/pages/distributedWorkloads/global/GlobalDistributedWorkloadsTabs.tsx
@@ -7,12 +7,20 @@ import {
   PageSection,
   TabContent,
   TabContentBody,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
 } from '@patternfly/react-core';
+import { WrenchIcon } from '@patternfly/react-icons';
 import MetricsPageToolbar from '~/concepts/metrics/MetricsPageToolbar';
+import { DistributedWorkloadsContext } from '~/concepts/distributedWorkloads/DistributedWorkloadsContext';
+import EmptyStateErrorMessage from '~/components/EmptyStateErrorMessage';
 import {
   DistributedWorkloadsTabId,
   useDistributedWorkloadsTabs,
 } from './useDistributedWorkloadsTabs';
+import { LoadingWorkloadState } from './projectMetrics/sections/SharedStates';
 
 type GlobalDistributedWorkloadsTabsProps = {
   activeTabId: DistributedWorkloadsTabId;
@@ -25,6 +33,42 @@ const GlobalDistributedWorkloadsTabs: React.FC<GlobalDistributedWorkloadsTabsPro
   const tabs = useDistributedWorkloadsTabs();
   const activeTab = tabs.find(({ id }) => id === activeTabId);
   const { namespace } = useParams<{ namespace: string }>();
+  const { clusterQueue, localQueues } = React.useContext(DistributedWorkloadsContext);
+  const requiredFetches = [clusterQueue, localQueues];
+  const error = requiredFetches.find((f) => !!f.error)?.error;
+  const loaded = requiredFetches.every((f) => f.loaded);
+
+  if (error) {
+    return (
+      <EmptyStateErrorMessage
+        title="Error loading distributed workload metrics"
+        bodyText={error.message}
+      />
+    );
+  }
+
+  if (!loaded) {
+    return <LoadingWorkloadState />;
+  }
+
+  if (!clusterQueue.data || localQueues.data.length === 0) {
+    const title = `Configure the ${!clusterQueue.data ? 'cluster queue' : 'project queue'}`;
+    const message = !clusterQueue.data
+      ? 'Ask your cluster admin to configure the cluster queue.'
+      : 'Configure the queue for this project, or select a different project.';
+
+    return (
+      <EmptyState>
+        <EmptyStateHeader
+          titleText={title}
+          headingLevel="h4"
+          icon={<EmptyStateIcon icon={WrenchIcon} />}
+        />
+        <EmptyStateBody>{message}</EmptyStateBody>
+      </EmptyState>
+    );
+  }
+
   return (
     <>
       <PageSection variant="light" type="tabs">

diff --git a/...istributedWorkloads/global/projectMetrics/GlobalDistributedWorkloadsProjectMetricsTab.tsx b/...istributedWorkloads/global/projectMetrics/GlobalDistributedWorkloadsProjectMetricsTab.tsx
@@ -1,18 +1,6 @@
 import * as React from 'react';
-import {
-  Bullseye,
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateHeader,
-  EmptyStateIcon,
-  Spinner,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
-import { WrenchIcon } from '@patternfly/react-icons';
+import { Stack, StackItem } from '@patternfly/react-core';
 import { useUser } from '~/redux/selectors';
-import { DistributedWorkloadsContext } from '~/concepts/distributedWorkloads/DistributedWorkloadsContext';
-import EmptyStateErrorMessage from '~/components/EmptyStateErrorMessage';
 import { RequestedResources } from './sections/RequestedResources';
 import { TopResourceConsumingWorkloads } from './sections/TopResourceConsumingWorkloads';
 import { WorkloadResourceMetricsTable } from './sections/WorkloadResourceMetricsTable';
@@ -21,71 +9,33 @@ import { DWSectionCard } from './sections/DWSectionCard';
 const GlobalDistributedWorkloadsProjectMetricsTab: React.FC = () => {
   const { isAdmin } = useUser();
 
-  const { clusterQueue, localQueues } = React.useContext(DistributedWorkloadsContext);
-  const requiredFetches = [clusterQueue, localQueues];
-  const error = requiredFetches.find((f) => !!f.error)?.error;
-  const loaded = requiredFetches.every((f) => f.loaded);
-
-  if (error) {
-    return (
-      <EmptyStateErrorMessage
-        title="Error loading distributed workload metrics"
-        bodyText={error.message}
-      />
-    );
-  }
-
-  if (!loaded) {
-    return (
-      <Bullseye style={{ minHeight: 150 }}>
-        <Spinner />
-      </Bullseye>
-    );
-  }
-
-  // clusterQueue.data will only be defined here if it has spec.resourceGroups (see DistributedWorkloadsContext)
-  if (!clusterQueue.data || localQueues.data.length === 0) {
-    return (
-      <EmptyState>
-        <EmptyStateHeader
-          titleText="Quota is not set"
-          headingLevel="h4"
-          icon={<EmptyStateIcon icon={WrenchIcon} />}
-        />
-        <EmptyStateBody>Select another project or set the quota for this project.</EmptyStateBody>
-      </EmptyState>
-    );
-  }
-
   return (
-    <>
-      <Stack hasGutter>
-        <StackItem>
-          <DWSectionCard
-            title="Requested resources"
-            helpTooltip={
-              isAdmin
-                ? undefined
-                : 'In this section, all projects refers to all of the projects that share the specified resource. You might not have access to all of these projects.'
-            }
-            content={<RequestedResources />}
-          />
-        </StackItem>
-        <StackItem>
-          <DWSectionCard
-            title="Top resource-consuming distributed workloads"
-            content={<TopResourceConsumingWorkloads />}
-          />
-        </StackItem>
-        <StackItem>
-          <DWSectionCard
-            title="Distributed workload resource metrics"
-            hasDivider={false}
-            content={<WorkloadResourceMetricsTable />}
-          />
-        </StackItem>
-      </Stack>
-    </>
+    <Stack hasGutter>
+      <StackItem>
+        <DWSectionCard
+          title="Requested resources"
+          helpTooltip={
+            isAdmin
+              ? undefined
+              : 'In this section, all projects refers to all of the projects that share the specified resource. You might not have access to all of these projects.'
+          }
+          content={<RequestedResources />}
+        />
+      </StackItem>
+      <StackItem>
+        <DWSectionCard
+          title="Top resource-consuming distributed workloads"
+          content={<TopResourceConsumingWorkloads />}
+        />
+      </StackItem>
+      <StackItem>
+        <DWSectionCard
+          title="Distributed workload resource metrics"
+          hasDivider={false}
+          content={<WorkloadResourceMetricsTable />}
+        />
+      </StackItem>
+    </Stack>
   );
 };