From 6060097fe6f88a8fa55a34e0afbf6a23db512e1b Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Thu, 6 Feb 2025 17:40:24 +0300
Subject: [PATCH] Show deleted runs in the UI #2150

---
 .../pages/Runs/Details/Jobs/Details/index.tsx | 14 ++---
 .../pages/Runs/Details/Jobs/List/hooks.tsx    |  4 +-
 .../pages/Runs/Details/Jobs/List/index.tsx    |  6 +-
 .../Runs/Details/Logs/styles.module.scss      | 59 +++++++++++--------
 frontend/src/pages/Runs/Details/index.tsx     | 26 ++++----
 .../Runs/List/hooks/useColumnsDefinitions.tsx |  7 +--
 frontend/src/pages/Runs/List/index.tsx        |  6 +-
 frontend/src/routes.ts                        | 12 ++--
 frontend/src/services/run.ts                  |  2 +-
 9 files changed, 69 insertions(+), 67 deletions(-)

diff --git a/frontend/src/pages/Runs/Details/Jobs/Details/index.tsx b/frontend/src/pages/Runs/Details/Jobs/Details/index.tsx
index 29ba96fdf..e4b44491a 100644
--- a/frontend/src/pages/Runs/Details/Jobs/Details/index.tsx
+++ b/frontend/src/pages/Runs/Details/Jobs/Details/index.tsx
@@ -35,7 +35,7 @@ export const JobDetails: React.FC = () => {
     const { t } = useTranslation();
     const params = useParams();
     const paramProjectName = params.projectName ?? '';
-    const paramRunName = params.runName ?? '';
+    const paramRunId = params.runId ?? '';
     const paramJobName = params.jobName ?? '';
 
     const {
@@ -44,7 +44,7 @@ export const JobDetails: React.FC = () => {
         error: runError,
     } = useGetRunQuery({
         project_name: paramProjectName,
-        run_name: paramRunName,
+        id: paramRunId,
     });
 
     useEffect(() => {
@@ -75,16 +75,16 @@ export const JobDetails: React.FC = () => {
             href: ROUTES.RUNS.LIST,
         },
         {
-            text: paramRunName,
-            href: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(paramProjectName, paramRunName),
+            text: paramRunId,
+            href: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(paramProjectName, paramRunId),
         },
         {
             text: t('projects.run.jobs'),
-            href: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(paramProjectName, paramRunName),
+            href: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(paramProjectName, paramRunId),
         },
         {
             text: paramJobName,
-            href: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.JOBS.DETAILS.FORMAT(paramProjectName, paramRunName, paramJobName),
+            href: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.JOBS.DETAILS.FORMAT(paramProjectName, paramRunId, paramJobName),
         },
     ]);
 
@@ -154,7 +154,7 @@ export const JobDetails: React.FC = () => {
 
                         <Logs
                             projectName={paramProjectName}
-                            runName={paramRunName}
+                            runName={paramRunId}
                             jobSubmissionId={getJobSubmissionId(jobData)}
                             className={styles.logs}
                         />
diff --git a/frontend/src/pages/Runs/Details/Jobs/List/hooks.tsx b/frontend/src/pages/Runs/Details/Jobs/List/hooks.tsx
index a25105e05..677da83a6 100644
--- a/frontend/src/pages/Runs/Details/Jobs/List/hooks.tsx
+++ b/frontend/src/pages/Runs/Details/Jobs/List/hooks.tsx
@@ -17,7 +17,7 @@ import {
     getJobSubmittedAt,
 } from './helpers';
 
-export const useColumnsDefinitions = ({ projectName, runName }: { projectName: string; runName: string }) => {
+export const useColumnsDefinitions = ({ projectName, runId }: { projectName: string; runId: string }) => {
     const { t } = useTranslation();
 
     const columns = [
@@ -26,7 +26,7 @@ export const useColumnsDefinitions = ({ projectName, runName }: { projectName: s
             header: t('projects.run.job_name'),
             cell: (item: IJob) => (
                 <NavigateLink
-                    href={ROUTES.PROJECT.DETAILS.RUNS.DETAILS.JOBS.DETAILS.FORMAT(projectName, runName, item.job_spec.job_name)}
+                    href={ROUTES.PROJECT.DETAILS.RUNS.DETAILS.JOBS.DETAILS.FORMAT(projectName, runId, item.job_spec.job_name)}
                 >
                     {item.job_spec.job_name}
                 </NavigateLink>
diff --git a/frontend/src/pages/Runs/Details/Jobs/List/index.tsx b/frontend/src/pages/Runs/Details/Jobs/List/index.tsx
index f7ca9ef94..d03a2e1d1 100644
--- a/frontend/src/pages/Runs/Details/Jobs/List/index.tsx
+++ b/frontend/src/pages/Runs/Details/Jobs/List/index.tsx
@@ -9,13 +9,13 @@ import { useColumnsDefinitions } from './hooks';
 
 export interface Props {
     projectName: string;
-    runName: string;
+    runId: string;
     jobs: IRun['jobs'];
 }
 
-export const JobList: React.FC<Props> = ({ jobs, projectName, runName }) => {
+export const JobList: React.FC<Props> = ({ jobs, projectName, runId }) => {
     const { t } = useTranslation();
-    const { columns } = useColumnsDefinitions({ projectName, runName });
+    const { columns } = useColumnsDefinitions({ projectName, runId });
 
     const { items, collectionProps, paginationProps } = useCollection(jobs, {
         pagination: { pageSize: 20 },
diff --git a/frontend/src/pages/Runs/Details/Logs/styles.module.scss b/frontend/src/pages/Runs/Details/Logs/styles.module.scss
index 3dafff60c..2524489b7 100644
--- a/frontend/src/pages/Runs/Details/Logs/styles.module.scss
+++ b/frontend/src/pages/Runs/Details/Logs/styles.module.scss
@@ -23,41 +23,48 @@
                 flex-grow: 1;
                 min-height: 0;
 
-                & > [class^="awsui_text-content"] {
-                    overflow: hidden;
-                    position: relative;
+                & > [class^="awsui_content-inner"] {
                     display: flex;
                     flex-direction: column;
                     flex-grow: 1;
-                    min-height: 20px;
+                    min-height: 0;
 
-                    .loader {
-                        pointer-events: none;
-                        position: absolute;
-                        left: 0;
-                        right: 0;
-                        top: -20px;
-                        height: 20px;
-                        background-color: rgba(awsui.$color-background-container-content, .8);
-                        transition: transform .3s ease;
-                        color: #6e6e6e;
-
-                        &:global(.show) {
-                            transform: translateY(100%);
-                        }
-                    }
-
-                    .terminal {
+                    & > [class^="awsui_text-content"] {
+                        overflow: hidden;
+                        position: relative;
+                        display: flex;
+                        flex-direction: column;
                         flex-grow: 1;
-                        min-height: 0;
+                        min-height: 20px;
                     }
+                }
 
-                    .scroll {
-                        overflow-y: auto;
-                        flex-grow: 1;
-                        min-height: 0;
+                .loader {
+                    pointer-events: none;
+                    position: absolute;
+                    left: 0;
+                    right: 0;
+                    top: -20px;
+                    height: 20px;
+                    background-color: rgba(awsui.$color-background-container-content, .8);
+                    transition: transform .3s ease;
+                    color: #6e6e6e;
+
+                    &:global(.show) {
+                        transform: translateY(100%);
                     }
                 }
+
+                .terminal {
+                    flex-grow: 1;
+                    min-height: 0;
+                }
+
+                .scroll {
+                    overflow-y: auto;
+                    flex-grow: 1;
+                    min-height: 0;
+                }
             }
         }
     }
diff --git a/frontend/src/pages/Runs/Details/index.tsx b/frontend/src/pages/Runs/Details/index.tsx
index fefc3f24f..a4878d6ee 100644
--- a/frontend/src/pages/Runs/Details/index.tsx
+++ b/frontend/src/pages/Runs/Details/index.tsx
@@ -34,7 +34,7 @@ export const RunDetails: React.FC = () => {
     const navigate = useNavigate();
     const params = useParams();
     const paramProjectName = params.projectName ?? '';
-    const paramRunName = params.runName ?? '';
+    const paramRunId = params.runId ?? '';
     const [pushNotification] = useNotifications();
 
     const {
@@ -43,7 +43,7 @@ export const RunDetails: React.FC = () => {
         error: runError,
     } = useGetRunQuery({
         project_name: paramProjectName,
-        run_name: paramRunName,
+        id: paramRunId,
     });
 
     useEffect(() => {
@@ -71,15 +71,15 @@ export const RunDetails: React.FC = () => {
             href: ROUTES.RUNS.LIST,
         },
         {
-            text: paramRunName,
-            href: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(paramProjectName, paramRunName),
+            text: runData?.run_spec?.run_name ?? '',
+            href: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(paramProjectName, paramRunId),
         },
     ]);
 
     const abortClickHandle = () => {
         stopRun({
             project_name: paramProjectName,
-            runs_names: [paramRunName],
+            runs_names: [paramRunId],
             abort: true,
         })
             .unwrap()
@@ -94,7 +94,7 @@ export const RunDetails: React.FC = () => {
     const stopClickHandle = () => {
         stopRun({
             project_name: paramProjectName,
-            runs_names: [paramRunName],
+            runs_names: [paramRunId],
             abort: false,
         })
             .unwrap()
@@ -109,7 +109,7 @@ export const RunDetails: React.FC = () => {
     const deleteClickHandle = () => {
         deleteRun({
             project_name: paramProjectName,
-            runs_names: [paramRunName],
+            runs_names: [paramRunId],
         })
             .unwrap()
             .then(() => {
@@ -132,7 +132,7 @@ export const RunDetails: React.FC = () => {
             <ContentLayout
                 header={
                     <DetailsHeader
-                        title={paramRunName}
+                        title={runData?.run_spec?.run_name ?? ''}
                         actionButtons={
                             <>
                                 <Button onClick={abortClickHandle} disabled={isDisabledAbortButton}>
@@ -143,9 +143,9 @@ export const RunDetails: React.FC = () => {
                                     {t('common.stop')}
                                 </Button>
 
-                                <Button onClick={deleteClickHandle} disabled={isDisabledDeleteButton}>
-                                    {t('common.delete')}
-                                </Button>
+                                {/*<Button onClick={deleteClickHandle} disabled={isDisabledDeleteButton}>*/}
+                                {/*    {t('common.delete')}*/}
+                                {/*</Button>*/}
                             </>
                         }
                     />
@@ -254,14 +254,14 @@ export const RunDetails: React.FC = () => {
                         {runData.jobs.length === 1 && (
                             <Logs
                                 projectName={paramProjectName}
-                                runName={paramRunName}
+                                runName={runData?.run_spec?.run_name ?? ''}
                                 jobSubmissionId={getJobSubmissionId(runData)}
                                 className={styles.logs}
                             />
                         )}
 
                         {runData.jobs.length > 1 && (
-                            <JobList projectName={paramProjectName} runName={paramRunName} jobs={runData.jobs} />
+                            <JobList projectName={paramProjectName} runId={paramRunId} jobs={runData.jobs} />
                         )}
                     </>
                 )}
diff --git a/frontend/src/pages/Runs/List/hooks/useColumnsDefinitions.tsx b/frontend/src/pages/Runs/List/hooks/useColumnsDefinitions.tsx
index 5e24057dd..36895a93a 100644
--- a/frontend/src/pages/Runs/List/hooks/useColumnsDefinitions.tsx
+++ b/frontend/src/pages/Runs/List/hooks/useColumnsDefinitions.tsx
@@ -26,12 +26,7 @@ export const useColumnsDefinitions = () => {
             header: t('projects.run.run_name'),
             cell: (item: IRun) => {
                 return item.id !== null ? (
-                    <NavigateLink
-                        href={ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(
-                            item.project_name,
-                            item.run_spec.run_name ?? 'No run name',
-                        )}
-                    >
+                    <NavigateLink href={ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(item.project_name, item.id)}>
                         {item.run_spec.run_name}
                     </NavigateLink>
                 ) : (
diff --git a/frontend/src/pages/Runs/List/index.tsx b/frontend/src/pages/Runs/List/index.tsx
index aed8968bd..4281f60d4 100644
--- a/frontend/src/pages/Runs/List/index.tsx
+++ b/frontend/src/pages/Runs/List/index.tsx
@@ -125,9 +125,9 @@ export const RunList: React.FC = () => {
                                 {t('common.stop')}
                             </Button>
 
-                            <Button formAction="none" onClick={deleteClickHandle} disabled={isDisabledDeleteButton}>
-                                {t('common.delete')}
-                            </Button>
+                            {/*<Button formAction="none" onClick={deleteClickHandle} disabled={isDisabledDeleteButton}>*/}
+                            {/*    {t('common.delete')}*/}
+                            {/*</Button>*/}
 
                             <Button
                                 iconName="refresh"
diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts
index b403b5588..37c85e61c 100644
--- a/frontend/src/routes.ts
+++ b/frontend/src/routes.ts
@@ -23,16 +23,16 @@ export const ROUTES = {
 
             RUNS: {
                 DETAILS: {
-                    TEMPLATE: `/projects/:projectName/runs/:runName`,
-                    FORMAT: (projectName: string, runName: string) =>
-                        buildRoute(ROUTES.PROJECT.DETAILS.RUNS.DETAILS.TEMPLATE, { projectName, runName }),
+                    TEMPLATE: `/projects/:projectName/runs/:runId`,
+                    FORMAT: (projectName: string, runId: string) =>
+                        buildRoute(ROUTES.PROJECT.DETAILS.RUNS.DETAILS.TEMPLATE, { projectName, runId }),
                     JOBS: {
                         DETAILS: {
-                            TEMPLATE: `/projects/:projectName/runs/:runName/jobs/:jobName`,
-                            FORMAT: (projectName: string, runName: string, jobName: string) =>
+                            TEMPLATE: `/projects/:projectName/runs/:runId/jobs/:jobName`,
+                            FORMAT: (projectName: string, runId: string, jobName: string) =>
                                 buildRoute(ROUTES.PROJECT.DETAILS.RUNS.DETAILS.JOBS.DETAILS.TEMPLATE, {
                                     projectName,
-                                    runName,
+                                    runId,
                                     jobName,
                                 }),
                         },
diff --git a/frontend/src/services/run.ts b/frontend/src/services/run.ts
index 7e45af960..f689c66c3 100644
--- a/frontend/src/services/run.ts
+++ b/frontend/src/services/run.ts
@@ -39,7 +39,7 @@ export const runApi = createApi({
                 result ? [...result.map(({ id }) => ({ type: 'Runs' as const, id: id })), 'Runs'] : ['Runs'],
         }),
 
-        getRun: builder.query<IRun | undefined, { project_name: string; run_name: string }>({
+        getRun: builder.query<IRun | undefined, { project_name: string; id: string }>({
             query: ({ project_name, ...body }) => {
                 return {
                     url: API.PROJECTS.RUN_DETAILS(project_name ?? ''),