Merge pull request #2722 from jpuzz0/RHOAIENG-2986-artifacts-page-setup

[RHOAIENG-2986] Artifacts - Initial Infrastructure

frontend/src/app/AppRoutes.tsx

@@ -4,7 +4,12 @@ import { InvalidArgoDeploymentAlert } from '~/concepts/pipelines/content/Invalid
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import UnauthorizedError from '~/pages/UnauthorizedError';
 import { useUser } from '~/redux/selectors';
-import { globExperimentsAll, globPipelineRunsAll, globPipelinesAll } from '~/routes';
+import {
+  globArtifactsAll,
+  globExperimentsAll,
+  globPipelineRunsAll,
+  globPipelinesAll,
+} from '~/routes';
 import { useCheckJupyterEnabled } from '~/utilities/notebookControllerUtils';
 import { SupportedArea } from '~/concepts/areas';
 import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable';
@@ -34,6 +39,8 @@ const GlobalPipelineExperimentRoutes = React.lazy(
   () => import('../pages/pipelines/GlobalPipelineExperimentsRoutes'),
 );
 
+const GlobalArtifactsRoutes = React.lazy(() => import('../pages/pipelines/GlobalArtifactsRoutes'));
+
 const GlobalDistributedWorkloadsRoutes = React.lazy(
   () => import('../pages/distributedWorkloads/GlobalDistributedWorkloadsRoutes'),
 );
@@ -103,6 +110,7 @@ const AppRoutes: React.FC = () => {
         <Route path={globPipelinesAll} element={<GlobalPipelinesRoutes />} />
         <Route path={globPipelineRunsAll} element={<GlobalPipelineRunsRoutes />} />
         <Route path={globExperimentsAll} element={<GlobalPipelineExperimentRoutes />} />
+        <Route path={globArtifactsAll} element={<GlobalArtifactsRoutes />} />
 
         <Route path="/distributedWorkloads/*" element={<GlobalDistributedWorkloadsRoutes />} />
 

frontend/src/components/table/TableBase.tsx

@@ -236,7 +236,11 @@ const TableBase = <T,>({
           <ToolbarContent>
             {toolbarContent}
             {showPagination && (
-              <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+              <ToolbarItem
+                variant="pagination"
+                align={{ default: 'alignRight' }}
+                className="pf-v5-u-pr-lg"
+              >
                 {pagination('top')}
               </ToolbarItem>
             )}

frontend/src/pages/ApplicationsPage.tsx

@@ -18,7 +18,7 @@ import {
 } from '@patternfly/react-core';
 
 type ApplicationsPageProps = {
-  title: React.ReactNode;
+  title?: React.ReactNode;
   breadcrumb?: React.ReactNode;
   description?: React.ReactNode;
   loaded: boolean;

frontend/src/pages/pipelines/GlobalArtifactsRoutes.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Navigate, Route } from 'react-router-dom';
+
+import ProjectsRoutes from '~/concepts/projects/ProjectsRoutes';
+import GlobalPipelineCoreLoader from '~/pages/pipelines/global/GlobalPipelineCoreLoader';
+import { artifactsBaseRoute } from '~/routes';
+import { GlobalArtifactsPage } from './global/experiments/artifacts';
+
+const GlobalArtifactsRoutes: React.FC = () => (
+  <ProjectsRoutes>
+    <Route
+      path="/:namespace?/*"
+      element={<GlobalPipelineCoreLoader getInvalidRedirectPath={artifactsBaseRoute} />}
+    >
+      <Route index element={<GlobalArtifactsPage />} />
+      <Route path="*" element={<Navigate to="." />} />
+    </Route>
+  </ProjectsRoutes>
+);
+
+export default GlobalArtifactsRoutes;

frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactsListTable.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {
+  Bullseye,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Spinner,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
+
+import { useGetArtifactsList } from './useGetArtifactsList';
+
+export const ArtifactsListTable: React.FC = () => {
+  const [artifacts, isArtifactsLoaded, artifactsError] = useGetArtifactsList();
+
+  if (artifactsError) {
+    return (
+      <Bullseye>
+        <EmptyState variant={EmptyStateVariant.lg}>
+          <EmptyStateHeader
+            titleText="There was an issue loading artifacts"
+            icon={<EmptyStateIcon icon={ExclamationCircleIcon} />}
+            headingLevel="h2"
+          />
+          <EmptyStateBody>{artifactsError.message}</EmptyStateBody>
+        </EmptyState>
+      </Bullseye>
+    );
+  }
+
+  if (!isArtifactsLoaded) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  if (!artifacts?.length) {
+    return (
+      <EmptyState data-testid="artifacts-list-empty-state" variant={EmptyStateVariant.lg}>
+        <EmptyStateHeader
+          titleText="No artifacts"
+          icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+          headingLevel="h4"
+        />
+        <EmptyStateBody>
+          No artifacts have been generated from experiments within this project. Select a different
+          project, or execute an experiment from the <b>Experiments and runs</b> page.
+        </EmptyStateBody>
+      </EmptyState>
+    );
+  }
+
+  return <></>;
+};

frontend/src/pages/pipelines/global/experiments/artifacts/GlobalArtifactsPage.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import PipelineServerActions from '~/concepts/pipelines/content/PipelineServerActions';
+import PipelineCoreApplicationPage from '~/pages/pipelines/global/PipelineCoreApplicationPage';
+import EnsureAPIAvailability from '~/concepts/pipelines/EnsureAPIAvailability';
+import EnsureCompatiblePipelineServer from '~/concepts/pipelines/EnsureCompatiblePipelineServer';
+import { artifactsBaseRoute } from '~/routes';
+import { ArtifactsListTable } from './ArtifactsListTable';
+
+export const GlobalArtifactsPage: React.FC = () => {
+  const pipelinesAPI = usePipelinesAPI();
+
+  return (
+    <PipelineCoreApplicationPage
+      title="Artifacts"
+      description="View your artifacts and their metadata."
+      headerAction={<PipelineServerActions isDisabled={!pipelinesAPI.pipelinesServer.installed} />}
+      getRedirectPath={artifactsBaseRoute}
+      overrideChildPadding
+    >
+      <EnsureAPIAvailability>
+        <EnsureCompatiblePipelineServer>
+          <ArtifactsListTable />
+        </EnsureCompatiblePipelineServer>
+      </EnsureAPIAvailability>
+    </PipelineCoreApplicationPage>
+  );
+};

frontend/src/pages/pipelines/global/experiments/artifacts/index.ts

@@ -0,0 +1 @@
+export { GlobalArtifactsPage } from './GlobalArtifactsPage';

frontend/src/pages/pipelines/global/experiments/artifacts/useGetArtifactsList.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import { Artifact, GetArtifactsRequest } from '~/third_party/mlmd';
+import useFetchState, { FetchState } from '~/utilities/useFetchState';
+
+export const useGetArtifactsList = (
+  refreshRate?: number,
+): FetchState<Artifact.AsObject[] | null> => {
+  const { metadataStoreServiceClient } = usePipelinesAPI();
+
+  const fetchArtifactsList = React.useCallback(async () => {
+    const response = await metadataStoreServiceClient.getArtifacts(new GetArtifactsRequest());
+    return response.toObject().artifactsList;
+  }, [metadataStoreServiceClient]);
+
+  return useFetchState(fetchArtifactsList, null, {
+    refreshRate,
+  });
+};

frontend/src/routes/pipelines/artifacts.ts

@@ -0,0 +1,5 @@
+export const artifactsRootPath = '/artifacts';
+export const globArtifactsAll = `${artifactsRootPath}/*`;
+
+export const artifactsBaseRoute = (namespace: string | undefined): string =>
+  !namespace ? artifactsRootPath : `${artifactsRootPath}/${namespace}`;

frontend/src/routes/pipelines/index.ts

@@ -1,4 +1,5 @@
 export * from './global';
 export * from './project';
 export * from './experiments';
+export * from './artifacts';
 export * from './runs';

frontend/src/utilities/NavData.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import { useUser } from '~/redux/selectors';
-import { experimentsRootPath, routePipelineRuns, routePipelines } from '~/routes';
+import {
+  artifactsRootPath,
+  experimentsRootPath,
+  routePipelineRuns,
+  routePipelines,
+} from '~/routes';
 
 type NavDataCommon = {
   id: string;
@@ -61,7 +66,7 @@ const useDSPipelinesNav = (): NavDataItem[] => {
     return [];
   }
 
-  const pipelinesNav: NavDataItem[] = [
+  return [
     {
       id: 'pipelines',
       group: { id: 'pipelines', title: 'Data Science Pipelines' },
@@ -70,24 +75,27 @@ const useDSPipelinesNav = (): NavDataItem[] => {
         { id: 'global-pipeline-runs', label: 'Runs', href: routePipelineRuns() },
       ],
     },
+    ...(isExperimentsAvailable
+      ? [
+          {
+            id: 'experiments',
+            group: { id: 'experiments', title: 'Experiments' },
+            children: [
+              {
+                id: 'experiments-and-runs',
+                label: 'Experiments and runs',
+                href: experimentsRootPath,
+              },
+              {
+                id: 'artifacts',
+                label: 'Artifacts',
+                href: artifactsRootPath,
+              },
+            ],
+          },
+        ]
+      : []),
   ];
-
-  // TODO temporary solution to switch between layout options - remove with https://issues.redhat.com/browse/RHOAIENG-3826
-  if (isExperimentsAvailable) {
-    pipelinesNav.push({
-      id: 'experiments',
-      group: { id: 'experiments', title: 'Experiments' },
-      children: [
-        {
-          id: 'experiments-and-runs',
-          label: 'Experiments and runs',
-          href: experimentsRootPath,
-        },
-      ],
-    });
-  }
-
-  return pipelinesNav;
 };
 
 const useDistributedWorkloadsNav = (): NavDataItem[] =>