Merge pull request #2587 from mturley/dw-initial-cypress-tests

Add missing cypress tests for initial Distributed Workloads views, fix minor architecture issues, factor out components for sections of the Workload Status tab

frontend/src/__mocks__/mockPrometheusDWQuery.ts

@@ -0,0 +1,21 @@
+import { PrometheusQueryResponse } from '~/types';
+
+type MockPrometheusDWQueryType = {
+  result?: { value: [number, string] }[];
+};
+
+export const mockPrometheusDWQuery = ({
+  result,
+}: MockPrometheusDWQueryType): {
+  code?: number;
+  response: PrometheusQueryResponse;
+} => ({
+  code: 200,
+  response: {
+    status: 'success',
+    data: {
+      resultType: 'vector',
+      result: result ?? [],
+    },
+  },
+});

frontend/src/__mocks__/mockPrometheusDWQueryRange.ts

@@ -0,0 +1,26 @@
+import { PrometheusQueryRangeResponse, PrometheusQueryRangeResponseDataResult } from '~/types';
+
+type MockPrometheusDWQueryRangeType = {
+  result?: PrometheusQueryRangeResponseDataResult[];
+};
+
+export const mockPrometheusDWQueryRange = ({
+  result,
+}: MockPrometheusDWQueryRangeType): {
+  code?: number;
+  response: PrometheusQueryRangeResponse;
+} => ({
+  code: 200,
+  response: {
+    status: 'success',
+    data: {
+      resultType: 'matrix',
+      result: result ?? [
+        {
+          metric: {},
+          values: [],
+        },
+      ],
+    },
+  },
+});

frontend/src/__tests__/cypress/cypress/e2e/distributedWorkloads/GlobalDistributedWorkloads.cy.ts

@@ -4,15 +4,21 @@ import { mockStatus } from '~/__mocks__/mockStatus';
 import { mockComponents } from '~/__mocks__/mockComponents';
 import { explorePage } from '~/__tests__/cypress/cypress/pages/explore';
 import { globalDistributedWorkloads } from '~/__tests__/cypress/cypress/pages/distributedWorkloads';
+import { mockK8sResourceList } from '~/__mocks__/mockK8sResourceList';
+import { mockProjectK8sResource } from '~/__mocks__/mockProjectK8sResource';
+import { mockPrometheusDWQuery } from '~/__mocks__/mockPrometheusDWQuery';
+import { mockPrometheusDWQueryRange } from '~/__mocks__/mockPrometheusDWQueryRange';
 
 type HandlersProps = {
   isKueueInstalled?: boolean;
   disableDistributedWorkloads?: boolean;
+  hasProjects?: boolean;
 };
 
 const initIntercepts = ({
   isKueueInstalled = true,
   disableDistributedWorkloads = false,
+  hasProjects = true,
 }: HandlersProps) => {
   cy.intercept(
     '/api/dsc/status',
@@ -28,8 +34,34 @@ const initIntercepts = ({
     }),
   );
   cy.intercept('/api/components', mockComponents());
-
-  // TODO mturley other intercepts here
+  cy.intercept(
+    {
+      method: 'GET',
+      pathname: '/api/k8s/apis/project.openshift.io/v1/projects',
+    },
+    mockK8sResourceList(
+      hasProjects
+        ? [
+            mockProjectK8sResource({ k8sName: 'test-project', displayName: 'Test Project' }),
+            mockProjectK8sResource({ k8sName: 'test-project-2', displayName: 'Test Project 2' }),
+          ]
+        : [],
+    ),
+  );
+  cy.intercept(
+    {
+      method: 'POST',
+      pathname: '/api/prometheus/query',
+    },
+    mockPrometheusDWQuery({ result: [] }),
+  );
+  cy.intercept(
+    {
+      method: 'POST',
+      pathname: '/api/prometheus/queryRange',
+    },
+    mockPrometheusDWQueryRange({ result: [] }),
+  );
 };
 
 describe('Workload Metrics', () => {
@@ -71,5 +103,51 @@ describe('Workload Metrics', () => {
     globalDistributedWorkloads.findHeaderText().should('exist');
   });
 
-  // TODO mturley other tests here for tab navigation, empty states, etc.
+  it('Defaults to Project Metrics tab and automatically selects a project', () => {
+    initIntercepts({});
+    globalDistributedWorkloads.visit();
+
+    cy.url().should('include', '/projectMetrics/test-project');
+    // TODO mturley replace this with real identifiable text on the loaded tab when it is completed
+    cy.findByText('TODO tab content for project metrics -- these are placeholders').should('exist');
+  });
+
+  it('Tabs navigate to corresponding routes and render their contents', () => {
+    initIntercepts({});
+    globalDistributedWorkloads.visit();
+
+    cy.findByLabelText('Workload status tab').click();
+    cy.url().should('include', '/workloadStatus/test-project');
+    cy.findByText('Status overview').should('exist');
+
+    cy.findByLabelText('Project metrics tab').click();
+    cy.url().should('include', '/projectMetrics/test-project');
+    // TODO mturley replace this with real identifiable text on the loaded tab when it is completed
+    cy.findByText('TODO tab content for project metrics -- these are placeholders').should('exist');
+  });
+
+  it('Changing the project and navigating between tabs or to the root of the page retains the new project', () => {
+    initIntercepts({});
+    globalDistributedWorkloads.visit();
+    cy.url().should('include', '/projectMetrics/test-project');
+
+    globalDistributedWorkloads.selectProjectByName('Test Project 2');
+    cy.url().should('include', '/projectMetrics/test-project-2');
+
+    cy.findByLabelText('Workload status tab').click();
+    cy.url().should('include', '/workloadStatus/test-project-2');
+
+    cy.findByLabelText('Project metrics tab').click();
+    cy.url().should('include', '/projectMetrics/test-project-2');
+
+    globalDistributedWorkloads.navigate();
+    cy.url().should('include', '/projectMetrics/test-project-2');
+  });
+
+  it('Should show an empty state if there are no projects', () => {
+    initIntercepts({ hasProjects: false });
+    globalDistributedWorkloads.visit();
+
+    cy.findByText('No data science projects').should('exist');
+  });
 });

frontend/src/__tests__/cypress/cypress/pages/distributedWorkloads.ts

@@ -21,6 +21,14 @@ class GlobalDistributedWorkloads {
     return cy.findByText('Monitor the metrics of your active resources.');
   }
 
+  findProjectSelect() {
+    return cy.findByTestId('project-selector-dropdown');
+  }
+
+  selectProjectByName(name: string) {
+    this.findProjectSelect().findDropdownItem(name).click();
+  }
+
   private wait() {
     this.findHeaderText();
     cy.testA11y();

frontend/src/api/prometheus/distributedWorkloads.ts

@@ -160,6 +160,7 @@ export const useDWWorkloadTrendMetrics = (
       defaultResponsePredicate,
       namespace || '',
       '/api/prometheus/queryRange',
+      { initialPromisePurity: true },
     ),
     jobsInadmissibleTrend: useQueryRangeResourceData(
       !!queries,
@@ -169,6 +170,7 @@ export const useDWWorkloadTrendMetrics = (
       defaultResponsePredicate,
       namespace || '',
       '/api/prometheus/queryRange',
+      { initialPromisePurity: true },
     ),
     jobsPendingTrend: useQueryRangeResourceData(
       !!queries,
@@ -178,6 +180,7 @@ export const useDWWorkloadTrendMetrics = (
       defaultResponsePredicate,
       namespace || '',
       '/api/prometheus/queryRange',
+      { initialPromisePurity: true },
     ),
   };
 

frontend/src/api/prometheus/usePrometheusQueryRange.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import axios from 'axios';
 
 import useFetchState, {
+  FetchOptions,
   FetchState,
   FetchStateCallbackPromise,
   NotReadyError,
@@ -26,6 +27,7 @@ const usePrometheusQueryRange = <T = PrometheusQueryRangeResultValue>(
   step: number,
   responsePredicate: ResponsePredicate<T>,
   namespace: string,
+  fetchOptions?: Partial<FetchOptions>,
 ): [...FetchState<T[]>, boolean] => {
   const pendingRef = React.useRef(active);
   const fetchData = React.useCallback<FetchStateCallbackPromise<T[]>>(() => {
@@ -59,7 +61,7 @@ const usePrometheusQueryRange = <T = PrometheusQueryRangeResultValue>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active, fetchData]);
 
-  return [...useFetchState<T[]>(fetchData, []), pendingRef.current];
+  return [...useFetchState<T[]>(fetchData, [], fetchOptions), pendingRef.current];
 };
 
 export const defaultResponsePredicate: ResponsePredicate = (data) => data.result?.[0]?.values || [];

frontend/src/api/prometheus/useQueryRangeResourceData.ts

@@ -2,6 +2,7 @@
 import { TimeframeStep, TimeframeTimeRange } from '~/pages/modelServing/screens/const';
 import { PrometheusQueryRangeResultValue } from '~/types';
 import useRestructureContextResourceData from '~/utilities/useRestructureContextResourceData';
+import { FetchOptions } from '~/utilities/useFetchState';
 import { TimeframeTitle } from '~/pages/modelServing/screens/types';
 import usePrometheusQueryRange, { ResponsePredicate } from './usePrometheusQueryRange';
 
@@ -14,6 +15,7 @@ const useQueryRangeResourceData = <T = PrometheusQueryRangeResultValue>(
   responsePredicate: ResponsePredicate<T>,
   namespace: string,
   apiPath = '/api/prometheus/serving',
+  fetchOptions?: Partial<FetchOptions>,
 ): ReturnType<typeof useRestructureContextResourceData<T>> =>
   useRestructureContextResourceData<T>(
     usePrometheusQueryRange<T>(
@@ -25,6 +27,7 @@ const useQueryRangeResourceData = <T = PrometheusQueryRangeResultValue>(
       TimeframeStep[timeframe],
       responsePredicate,
       namespace,
+      fetchOptions,
     ),
   );
 

frontend/src/concepts/distributedWorkloads/DistributedWorkloadsContext.tsx

@@ -8,6 +8,8 @@ import {
   POLL_INTERVAL,
 } from '~/utilities/const';
 import { SupportedArea, conditionalArea } from '~/concepts/areas';
+import useSyncPreferredProject from '~/concepts/projects/useSyncPreferredProject';
+import { ProjectsContext, byName } from '~/concepts/projects/ProjectsContext';
 import { useMakeFetchObject } from '~/utilities/useMakeFetchObject';
 import {
   DWProjectMetrics,
@@ -81,6 +83,10 @@ export const DistributedWorkloadsContextProvider =
     SupportedArea.DISTRIBUTED_WORKLOADS,
     true,
   )(({ children, namespace }) => {
+    const { projects } = React.useContext(ProjectsContext);
+    const project = projects.find(byName(namespace)) ?? null;
+    useSyncPreferredProject(project);
+
     const [refreshRate, setRefreshRate] = React.useState(POLL_INTERVAL);
     const [lastUpdateTime, setLastUpdateTime] = React.useState<number>(Date.now());
 

frontend/src/concepts/distributedWorkloads/useWorkloads.ts

@@ -14,7 +14,7 @@ const useWorkloads = (namespace?: string, refreshRate = 0): FetchState<WorkloadK
       return listWorkloads(namespace);
     }, [dwEnabled, namespace]),
     [],
-    { refreshRate },
+    { refreshRate, initialPromisePurity: true },
   );
 };
 

frontend/src/pages/distributedWorkloads/global/GlobalDistributedWorkloadsTabs.tsx

@@ -1,10 +1,18 @@
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Tabs, Tab, TabTitleText, PageSection } from '@patternfly/react-core';
+import {
+  Tabs,
+  Tab,
+  TabTitleText,
+  PageSection,
+  TabContent,
+  TabContentBody,
+} from '@patternfly/react-core';
 import {
   DistributedWorkloadsTabId,
   useDistributedWorkloadsTabs,
 } from './useDistributedWorkloadsTabs';
+import DistributedWorkloadsToolbar from './DistributedWorkloadsToolbar';
 
 type GlobalDistributedWorkloadsTabsProps = {
   activeTabId: DistributedWorkloadsTabId;
@@ -45,7 +53,25 @@ const GlobalDistributedWorkloadsTabs: React.FC<GlobalDistributedWorkloadsTabsPro
             ))}
         </Tabs>
       </PageSection>
-      {activeTab && <activeTab.ContentComponent tabConfig={activeTab} />}
+      {activeTab ? <DistributedWorkloadsToolbar tabConfig={activeTab} /> : null}
+      <PageSection isFilled>
+        {tabs
+          .filter((tab) => tab.isAvailable)
+          .map((tab) => {
+            const isActiveTab = tab.id === activeTab?.id;
+            return (
+              <TabContent
+                id={`${tab.id}-tab-content`}
+                activeKey={tab.id}
+                eventKey={tab.id}
+                key={tab.id}
+                hidden={!isActiveTab}
+              >
+                <TabContentBody>{isActiveTab ? <tab.ContentComponent /> : null}</TabContentBody>
+              </TabContent>
+            );
+          })}
+      </PageSection>
     </>
   );
 };