Merge pull request #2833 from jenny-s51/iss4999

[RHOAIENG-4999] Details page for archived runs
opendatahub-io · May 30, 2024 · 4aa0a8c · 4aa0a8c
2 parents c9caed3 + ede387d
commit 4aa0a8c
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 20 deletions.
diff --git a/frontend/src/api/pipelines/custom.ts b/frontend/src/api/pipelines/custom.ts
@@ -235,6 +235,9 @@ export const stopPipelineRun: UpdatePipelineRunAPI = (hostPath) => (opts, runId)
     proxyENDPOINT(hostPath, `/apis/v2beta1/runs/${runId}:terminate`, {}, opts),
   );
 
+export const retryPipelineRun: UpdatePipelineRunAPI = (hostPath) => (opts, runId) =>
+  handlePipelineFailures(proxyENDPOINT(hostPath, `/apis/v2beta1/runs/${runId}:retry`, {}, opts));
+
 export const updatePipelineRunJob: UpdatePipelineRunJobAPI = (hostPath) => (opts, jobId, enabled) =>
   handlePipelineFailures(
     proxyENDPOINT(

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/PipelineDetailsTitle.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/PipelineDetailsTitle.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Label, Split, SplitItem } from '@patternfly/react-core';
-import { PipelineRunKFv2 } from '~/concepts/pipelines/kfTypes';
+import { PipelineRunKFv2, StorageStateKF } from '~/concepts/pipelines/kfTypes';
 import { computeRunStatus } from '~/concepts/pipelines/content/utils';
 import PipelineRunTypeLabel from '~/concepts/pipelines/content/PipelineRunTypeLabel';
 
@@ -17,6 +17,8 @@ const PipelineDetailsTitle: React.FC<RunJobTitleProps> = ({
 }) => {
   const { icon, label } = computeRunStatus(run);
 
+  const isArchived = run.storage_state === StorageStateKF.ARCHIVED;
+
   return (
     <>
       <Split hasGutter>
@@ -31,6 +33,11 @@ const PipelineDetailsTitle: React.FC<RunJobTitleProps> = ({
             <Label icon={icon}>{label}</Label>
           </SplitItem>
         )}
+        {isArchived && (
+          <SplitItem>
+            <Label>Archived</Label>
+          </SplitItem>
+        )}
       </Split>
     </>
   );

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx
@@ -27,6 +27,7 @@ import {
   RunDetailsTabs,
   RunDetailsTabSelection,
 } from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerBottomTabs';
+import { ArchiveRunModal } from '~/pages/pipelines/global/runs/ArchiveRunModal';
 import DeletePipelineRunsModal from '~/concepts/pipelines/content/DeletePipelineRunsModal';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import PipelineDetailsTitle from '~/concepts/pipelines/content/pipelinesDetails/PipelineDetailsTitle';
@@ -53,6 +54,8 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
   );
   const pipelineSpec = version?.pipeline_spec ?? run?.pipeline_spec;
   const [deleting, setDeleting] = React.useState(false);
+  const [archiving, setArchiving] = React.useState(false);
+
   const [detailsTab, setDetailsTab] = React.useState<RunDetailsTabSelection>(
     RunDetailsTabs.DETAILS,
   );
@@ -164,7 +167,11 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
                     </Breadcrumb>
                   }
                   headerAction={
-                    <PipelineRunDetailsActions run={run} onDelete={() => setDeleting(true)} />
+                    <PipelineRunDetailsActions
+                      run={run}
+                      onDelete={() => setDeleting(true)}
+                      onArchive={() => setArchiving(true)}
+                    />
                   }
                   empty={false}
                 >
@@ -202,6 +209,11 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
           }
         }}
       />
+      <ArchiveRunModal
+        isOpen={archiving}
+        runs={run ? [run] : []}
+        onCancel={() => setArchiving(false)}
+      />
     </>
   );
 };

diff --git a/...src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsActions.tsx b/...src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsActions.tsx
@@ -1,30 +1,54 @@
 import * as React from 'react';
+import { Tooltip } from '@patternfly/react-core';
 import {
   Dropdown,
   DropdownItem,
   DropdownSeparator,
   DropdownToggle,
 } from '@patternfly/react-core/deprecated';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import useNotification from '~/utilities/useNotification';
 import { PipelineRunKFv2, RuntimeStateKF, StorageStateKF } from '~/concepts/pipelines/kfTypes';
 import { cloneRunRoute, experimentsCompareRunsRoute } from '~/routes';
 import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
+import useExperimentById from '~/concepts/pipelines/apiHooks/useExperimentById';
 
 type PipelineRunDetailsActionsProps = {
   run?: PipelineRunKFv2 | null;
+  onArchive: () => void;
   onDelete: () => void;
 };
 
-const PipelineRunDetailsActions: React.FC<PipelineRunDetailsActionsProps> = ({ onDelete, run }) => {
+const PipelineRunDetailsActions: React.FC<PipelineRunDetailsActionsProps> = ({
+  onDelete,
+  onArchive,
+  run,
+}) => {
   const navigate = useNavigate();
-  const { experimentId } = useParams();
-  const { namespace, api } = usePipelinesAPI();
+  const { namespace, api, refreshAllAPI } = usePipelinesAPI();
   const notification = useNotification();
   const [open, setOpen] = React.useState(false);
   const isExperimentsAvailable = useIsAreaAvailable(SupportedArea.PIPELINE_EXPERIMENTS).status;
   const isRunActive = run?.storage_state === StorageStateKF.AVAILABLE;
+  const [experiment] = useExperimentById(run?.experiment_id);
+  const isExperimentActive = experiment?.storage_state === StorageStateKF.AVAILABLE;
+
+  const RestoreDropdownItem = (
+    <DropdownItem
+      isDisabled={!isExperimentActive}
+      key="restore-run"
+      onClick={() =>
+        run &&
+        api
+          .unarchivePipelineRun({}, run.run_id)
+          .catch((e) => notification.error('Unable to restore pipeline run', e.message))
+          .then(() => refreshAllAPI())
+      }
+    >
+      Restore
+    </DropdownItem>
+  );
 
   return (
     <Dropdown
@@ -42,15 +66,15 @@ const PipelineRunDetailsActions: React.FC<PipelineRunDetailsActionsProps> = ({ o
           ? []
           : [
               <DropdownItem
-                key="stop-run"
-                isDisabled={run.state !== RuntimeStateKF.RUNNING}
+                key="retry-run"
+                isDisabled={run.state !== RuntimeStateKF.FAILED || !!run.error}
                 onClick={() =>
                   api
-                    .stopPipelineRun({}, run.run_id)
-                    .catch((e) => notification.error('Unable to stop pipeline run', e.message))
+                    .retryPipelineRun({}, run.run_id)
+                    .catch((e) => notification.error('Unable to retry pipeline run', e.message))
                 }
               >
-                Stop
+                Retry
               </DropdownItem>,
               <DropdownItem
                 key="clone-run"
@@ -59,29 +83,68 @@ const PipelineRunDetailsActions: React.FC<PipelineRunDetailsActionsProps> = ({ o
                     cloneRunRoute(
                       namespace,
                       run.run_id,
-                      isExperimentsAvailable ? experimentId : undefined,
+                      isExperimentsAvailable ? run.experiment_id : undefined,
                     ),
                   )
                 }
               >
                 Duplicate
               </DropdownItem>,
-              isExperimentsAvailable && experimentId && isRunActive ? (
+              <DropdownItem
+                key="stop-run"
+                isDisabled={run.state !== RuntimeStateKF.RUNNING}
+                onClick={() =>
+                  api
+                    .stopPipelineRun({}, run.run_id)
+                    .catch((e) => notification.error('Unable to stop pipeline run', e.message))
+                }
+              >
+                Stop
+              </DropdownItem>,
+              isExperimentsAvailable && run.experiment_id && isRunActive ? (
                 <DropdownItem
                   key="compare-runs"
                   onClick={() =>
-                    navigate(experimentsCompareRunsRoute(namespace, experimentId, [run.run_id]))
+                    navigate(
+                      experimentsCompareRunsRoute(namespace, run.experiment_id, [run.run_id]),
+                    )
                   }
                 >
                   Compare runs
                 </DropdownItem>
               ) : (
                 <React.Fragment key="compare-runs" />
               ),
-              <DropdownSeparator key="separator" />,
-              <DropdownItem key="delete-run" onClick={() => onDelete()}>
-                Delete
-              </DropdownItem>,
+              !isRunActive ? (
+                !isExperimentActive ? (
+                  <Tooltip
+                    position="left"
+                    content={
+                      <div>
+                        Archived runs cannot be restored until its associated experiment is
+                        restored.
+                      </div>
+                    }
+                  >
+                    {RestoreDropdownItem}
+                  </Tooltip>
+                ) : (
+                  RestoreDropdownItem
+                )
+              ) : (
+                <React.Fragment key="restore-run" />
+              ),
+              !isRunActive ? (
+                <React.Fragment key="delete-run">
+                  <DropdownSeparator key="separator" />
+                  <DropdownItem onClick={() => onDelete()}>Delete</DropdownItem>
+                </React.Fragment>
+              ) : (
+                <React.Fragment key="archive-run">
+                  <DropdownSeparator key="separator" />
+                  <DropdownItem onClick={() => onArchive()}>Archive</DropdownItem>
+                </React.Fragment>
+              ),
             ]
       }
     />

diff --git a/frontend/src/concepts/pipelines/content/tables/experiment/ExperimentTableRow.tsx b/frontend/src/concepts/pipelines/content/tables/experiment/ExperimentTableRow.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 import { ActionsColumn, IAction, Td, Tr } from '@patternfly/react-table';
 
-import { ExperimentKFv2 } from '~/concepts/pipelines/kfTypes';
+import { ExperimentKFv2, StorageStateKF } from '~/concepts/pipelines/kfTypes';
 import { CheckboxTd } from '~/components/table';
 import { experimentRunsRoute } from '~/routes';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
@@ -24,11 +24,18 @@ const ExperimentTableRow: React.FC<ExperimentTableRowProps> = ({
 }) => {
   const { namespace } = usePipelinesAPI();
 
+  const isArchived = experiment.storage_state === StorageStateKF.ARCHIVED;
+
   return (
     <Tr>
       <CheckboxTd id={experiment.experiment_id} isChecked={isChecked} onToggle={onToggleCheck} />
       <Td dataLabel="Experiment">
-        <Link to={experimentRunsRoute(namespace, experiment.experiment_id)} state={{ experiment }}>
+        <Link
+          to={`${experimentRunsRoute(namespace, experiment.experiment_id)}${
+            isArchived ? '/?runType=archived' : ''
+          }`}
+          state={{ experiment }}
+        >
           {experiment.display_name}
         </Link>
       </Td>

diff --git a/frontend/src/concepts/pipelines/context/usePipelineAPIState.ts b/frontend/src/concepts/pipelines/context/usePipelineAPIState.ts
@@ -30,6 +30,7 @@ import {
   archiveExperiment,
   unarchiveExperiment,
   deleteExperiment,
+  retryPipelineRun,
 } from '~/api';
 import { PipelineAPIs } from '~/concepts/pipelines/types';
 import { APIState } from '~/concepts/proxy/types';
@@ -66,6 +67,7 @@ const usePipelineAPIState = (
       listPipelineVersions: listPipelineVersions(path),
       archivePipelineRun: archivePipelineRun(path),
       unarchivePipelineRun: unarchivePipelineRun(path),
+      retryPipelineRun: retryPipelineRun(path),
       archiveExperiment: archiveExperiment(path),
       unarchiveExperiment: unarchiveExperiment(path),
       stopPipelineRun: stopPipelineRun(path),

diff --git a/frontend/src/concepts/pipelines/types.ts b/frontend/src/concepts/pipelines/types.ts
@@ -152,6 +152,7 @@ export type PipelineAPIs = {
   listPipelineRunJobs: ListPipelineRunJobs;
   listPipelineVersions: ListPipelineVersions;
   archivePipelineRun: UpdatePipelineRun;
+  retryPipelineRun: UpdatePipelineRun;
   unarchivePipelineRun: UpdatePipelineRun;
   archiveExperiment: UpdateExperiment;
   unarchiveExperiment: UpdateExperiment;