fix(autorag/results): align results page

Author: Daniel Duong

packages/autorag/frontend/src/app/components/results/AutoragResults.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 function AutoragResults(): React.JSX.Element {
-  return <div>results</div>;
+  return <></>;
 }
 
 export default AutoragResults;

packages/autorag/frontend/src/app/hooks/queries.ts

@@ -1,30 +1,6 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { getLlamaStackModels } from '~/app/api/k8s';
-import { LlamaStackModelType, LlamaStackModelsResponse } from '~/app/types';
-
-export function useExperimentsQuery(): UseQueryResult<never[], Error> {
-  return useQuery({
-    queryKey: ['experiments'],
-    queryFn: async () => {
-      const experiments: never[] = [];
-      return experiments;
-    },
-  });
-}
-
-export function useExperimentQuery(
-  experimentId?: string,
-): UseQueryResult<{ display_name: string }, Error> {
-  return useQuery({
-    queryKey: ['experiments', experimentId],
-    queryFn: async () => {
-      // eslint-disable-next-line camelcase
-      const experiment = { display_name: 'FAKE_EXPERIMENT_NAME' };
-      return experiment;
-    },
-    enabled: !!experimentId,
-  });
-}
+import { LlamaStackModelsResponse, LlamaStackModelType } from '~/app/types';
 
 export function useLlamaStackModelsQuery(
   namespace: string,
@@ -42,12 +18,12 @@ export function useLlamaStackModelsQuery(
 
 export function usePipelineRunQuery(
   runId?: string,
-): UseQueryResult<{ experiment_id: string }, Error> {
+): UseQueryResult<{ display_name: string }, Error> {
   return useQuery({
     queryKey: ['pipelineRun', runId],
     queryFn: async () => {
       // eslint-disable-next-line camelcase
-      const pipelineRun = { experiment_id: 'FAKE_EXPERIMENT_ID' };
+      const pipelineRun = { display_name: 'RUN_NAME' };
       return pipelineRun;
     },
     enabled: !!runId,

packages/autorag/frontend/src/app/pages/AutoragConfigurePage.tsx

@@ -43,10 +43,10 @@ function AutoragConfigurePage(): React.JSX.Element {
   const invalidNamespace =
     namespacesLoaded && !!namespace && !namespaces.map((ns) => ns.name).includes(namespace);
 
-  const pipelineRunsMutation = usePipelineRunsMutation(namespace ?? '');
-
   const getRedirectPath = (ns: string) => `${autoragExperimentsPathname}/${ns}`;
 
+  const pipelineRunsMutation = usePipelineRunsMutation(namespace ?? '');
+
   const form = useForm({
     mode: 'onChange',
     resolver: zodResolver(configureSchema.full),

packages/autorag/frontend/src/app/pages/AutoragResultsPage.tsx

@@ -1,27 +1,51 @@
-import { ApplicationsPage } from 'mod-arch-shared';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import { useNamespaceSelector } from 'mod-arch-core';
+import { ApplicationsPage, ProjectObjectType, TitleWithIcon } from 'mod-arch-shared';
 import React from 'react';
-import { useParams } from 'react-router';
-import AutoragResults from '~/app/components/results/AutoragResults';
-import { useExperimentQuery, usePipelineRunQuery } from '~/app/hooks/queries';
+import { Link, useParams } from 'react-router';
 import InvalidPipelineRun from '~/app/components/empty-states/InvalidPipelineRun';
+import AutoragResults from '~/app/components/results/AutoragResults';
+import { usePipelineRunQuery } from '~/app/hooks/queries';
+import InvalidProject from '../components/empty-states/InvalidProject';
+import { autoragExperimentsPathname } from '../utilities/routes';
 
 function AutoragResultsPage(): React.JSX.Element {
   const { runId } = useParams();
 
-  const { data: pipelineRun, ...pipelineRunQuery } = usePipelineRunQuery(runId);
-  const { data: experiment, ...experimentQuery } = useExperimentQuery(pipelineRun?.experiment_id);
+  const { namespace } = useParams();
+  const { namespaces, namespacesLoaded, namespacesLoadError } = useNamespaceSelector();
 
+  const noNamespaces = namespacesLoaded && namespaces.length === 0;
+  const invalidNamespace =
+    namespacesLoaded && !!namespace && !namespaces.map((ns) => ns.name).includes(namespace);
+
+  const getRedirectPath = (ns: string) => `${autoragExperimentsPathname}/${ns}`;
+
+  const { data: pipelineRun, ...pipelineRunQuery } = usePipelineRunQuery(runId);
   const invalidPipelineRunId = pipelineRunQuery.isError;
 
   return (
     <ApplicationsPage
-      title={experiment?.display_name}
-      empty={invalidPipelineRunId}
-      emptyStatePage={<InvalidPipelineRun />}
-      loadError={pipelineRunQuery.error ?? experimentQuery.error ?? undefined}
-      loaded={pipelineRunQuery.isFetched && experimentQuery.isFetched}
-      provideChildrenPadding
-      removeChildrenTopPadding
+      title={<TitleWithIcon title="AutoRAG" objectType={ProjectObjectType.pipelineExperiment} />}
+      subtext={<h2 className="pf-v6-u-mt-sm">{`"${pipelineRun?.display_name}" results`}</h2>}
+      breadcrumb={
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link to={getRedirectPath(namespace!)}>AutoRAG: {namespace}</Link>
+          </BreadcrumbItem>
+          <BreadcrumbItem isActive>{pipelineRun?.display_name}</BreadcrumbItem>
+        </Breadcrumb>
+      }
+      empty={noNamespaces || invalidNamespace || invalidPipelineRunId}
+      emptyStatePage={
+        invalidPipelineRunId ? (
+          <InvalidPipelineRun />
+        ) : (
+          <InvalidProject namespace={namespace} getRedirectPath={getRedirectPath} />
+        )
+      }
+      loadError={pipelineRunQuery.error ?? namespacesLoadError}
+      loaded={namespacesLoaded && pipelineRunQuery.isFetched}
     >
       <AutoragResults />
     </ApplicationsPage>