Fixed runs and repos pages (#635)

dstackai · Aug 10, 2023 · 79238a4 · 79238a4
1 parent d50472e
commit 79238a4
Show file tree

Hide file tree

Showing 11 changed files with 273 additions and 307 deletions.
diff --git a/hub/src/pages/Runs/Details/index.tsx b/hub/src/pages/Runs/Details/index.tsx
@@ -165,9 +165,9 @@ export const RunDetails: React.FC = () => {
             });
     };
 
-    const isDisabledAbortButton = !runData || !isAvailableAbortingForRun(runData) || isStopping || isDeleting;
-    const isDisabledStopButton = !runData || !isAvailableStoppingForRun(runData) || isStopping || isDeleting;
-    const isDisabledDeleteButton = !runData || !isAvailableDeletingForRun(runData) || isStopping || isDeleting;
+    const isDisabledAbortButton = !runData || !isAvailableAbortingForRun(runData.run_head.status) || isStopping || isDeleting;
+    const isDisabledStopButton = !runData || !isAvailableStoppingForRun(runData.run_head.status) || isStopping || isDeleting;
+    const isDisabledDeleteButton = !runData || !isAvailableDeletingForRun(runData.run_head.status) || isStopping || isDeleting;
 
     return (
         <div className={styles.page}>
@@ -204,42 +204,37 @@ export const RunDetails: React.FC = () => {
                         <ColumnLayout columns={4} variant="text-grid">
                             <div>
                                 <Box variant="awsui-key-label">{t('projects.run.configuration')}</Box>
-                                <div>{runData.job_heads?.[0].configuration_path}</div>
+                                <div>{runData.run_head.job_heads?.[0].configuration_path}</div>
                             </div>
 
                             <div>
                                 <Box variant="awsui-key-label">{t('projects.run.instance')}</Box>
-                                <div>{runData.job_heads?.[0].instance_type}</div>
+                                <div>{runData.run_head.job_heads?.[0].instance_type}</div>
                             </div>
 
                             <div>
                                 <Box variant="awsui-key-label">{t('projects.run.hub_user_name')}</Box>
-                                <div>{runData.hub_user_name}</div>
+                                <div>{runData.run_head.hub_user_name}</div>
                             </div>
 
                             <div>
                                 <Box variant="awsui-key-label">{t('projects.run.status')}</Box>
                                 <div>
-                                    <StatusIndicator type={getStatusIconType(runData.status)}>
-                                        {t(`projects.run.statuses.${runData.status}`)}
+                                    <StatusIndicator type={getStatusIconType(runData.run_head.status)}>
+                                        {t(`projects.run.statuses.${runData.run_head.status}`)}
                                     </StatusIndicator>
                                 </div>
                             </div>
 
                             <div>
                                 <Box variant="awsui-key-label">{t('projects.run.submitted_at')}</Box>
-                                <div>{format(new Date(runData.submitted_at), DATE_TIME_FORMAT)}</div>
+                                <div>{format(new Date(runData.run_head.submitted_at), DATE_TIME_FORMAT)}</div>
                             </div>
 
-                            <div>
-                                <Box variant="awsui-key-label">{t('projects.run.artifacts_count')}</Box>
-                                <div>{runData.artifact_heads?.length ?? '-'}</div>
-                            </div>
-
-                            {runData.job_heads?.[0].error_code && (
+                            {runData.run_head.job_heads?.[0].error_code && (
                                 <div>
                                     <Box variant="awsui-key-label">{t('projects.run.error')}</Box>
-                                    <div>{runData.job_heads?.[0].error_code}</div>
+                                    <div>{runData.run_head.job_heads?.[0].error_code}</div>
                                 </div>
                             )}
                         </ColumnLayout>

diff --git a/hub/src/pages/Runs/List/helpers.ts b/hub/src/pages/Runs/List/helpers.ts
@@ -0,0 +1,5 @@
+import { groupBy as _groupBy } from 'lodash';
+
+export const getGroupedRunsByProjectAndRepoID = (runs: IRunListItem[]) => {
+    return _groupBy(runs, ({ project, repo_id }) => `${project}/${repo_id}`);
+};
diff --git a/hub/src/pages/Runs/List/hooks/index.ts b/hub/src/pages/Runs/List/hooks/index.ts
@@ -0,0 +1,4 @@
+export * from './useColumnsDefinitions';
+export * from './useStopRuns';
+export * from './useDeleteRuns';
+export * from './useDisabledStatesForButtons';
diff --git a/hub/src/pages/Runs/List/hooks/useColumnsDefinitions.tsx b/hub/src/pages/Runs/List/hooks/useColumnsDefinitions.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { format } from 'date-fns';
+
+import { NavigateLink, StatusIndicator } from 'components';
+
+import { DATE_TIME_FORMAT } from 'consts';
+import { getStatusIconType } from 'libs/run';
+import { ROUTES } from 'routes';
+
+export const useColumnsDefinitions = () => {
+    const { t } = useTranslation();
+
+    const columns = [
+        {
+            id: 'run_name',
+            header: t('projects.run.run_name'),
+            cell: (item: IRunListItem) => {
+                return item.repo_id !== null ? (
+                    <NavigateLink
+                        href={ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(item.project, item.repo_id, item.run_head.run_name)}
+                    >
+                        {item.run_head.run_name}
+                    </NavigateLink>
+                ) : null;
+            },
+        },
+        {
+            id: 'project',
+            header: `${t('projects.run.project')}`,
+            cell: (item: IRunListItem) => item.project,
+        },
+        {
+            id: 'repo',
+            header: `${t('projects.run.repo')}`,
+            cell: (item: IRunListItem) => item.repo_id,
+        },
+        {
+            id: 'configuration',
+            header: `${t('projects.run.configuration')}`,
+            cell: (item: IRunListItem) => item.run_head.job_heads?.[0].configuration_path,
+        },
+        {
+            id: 'instance',
+            header: `${t('projects.run.instance')}`,
+            cell: (item: IRunListItem) => item.run_head.job_heads?.[0].instance_type,
+        },
+        {
+            id: 'hub_user_name',
+            header: `${t('projects.run.hub_user_name')}`,
+            cell: (item: IRunListItem) => item.run_head.hub_user_name,
+        },
+        {
+            id: 'status',
+            header: t('projects.run.status'),
+            cell: (item: IRunListItem) => (
+                <StatusIndicator type={getStatusIconType(item.run_head.status)}>
+                    {t(`projects.run.statuses.${item.run_head.status}`)}
+                </StatusIndicator>
+            ),
+        },
+        {
+            id: 'submitted_at',
+            header: t('projects.run.submitted_at'),
+            cell: (item: IRunListItem) => format(new Date(item.run_head.submitted_at), DATE_TIME_FORMAT),
+        },
+    ];
+
+    return { columns } as const;
+};
diff --git a/hub/src/pages/Runs/List/hooks/useDeleteRuns.ts b/hub/src/pages/Runs/List/hooks/useDeleteRuns.ts
@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useNotifications } from 'hooks';
+import { useDeleteRunsMutation } from 'services/run';
+
+import { getGroupedRunsByProjectAndRepoID } from '../helpers';
+
+export const useDeleteRuns = () => {
+    const { t } = useTranslation();
+    const [deleteRun, { isLoading: isDeleting }] = useDeleteRunsMutation();
+    const [pushNotification] = useNotifications();
+
+    const deleteRuns = useCallback((runs: IRunListItem[]) => {
+        const groupedRuns = getGroupedRunsByProjectAndRepoID(runs);
+
+        const request = Promise.all(
+            Object.keys(groupedRuns).map((key) => {
+                const runsGroup = groupedRuns[key];
+
+                return deleteRun({
+                    name: runsGroup[0].project,
+                    repo_id: runsGroup[0]?.repo_id ?? undefined,
+                    run_names: runsGroup.map((item) => item.run_head.run_name),
+                }).unwrap();
+            }),
+        );
+
+        request.catch((error) => {
+            pushNotification({
+                type: 'error',
+                content: t('common.server_error', { error: error?.error }),
+            });
+        });
+
+        return request;
+    }, []);
+
+    return { deleteRuns, isDeleting } as const;
+};
diff --git a/hub/src/pages/Runs/List/hooks/useDisabledStatesForButtons.ts b/hub/src/pages/Runs/List/hooks/useDisabledStatesForButtons.ts
@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+
+import { isAvailableAbortingForRun, isAvailableDeletingForRun, isAvailableStoppingForRun } from '../../utils';
+
+type hookArgs = {
+    selectedRuns?: readonly IRunListItem[] | IRunListItem[];
+    isStopping?: boolean;
+    isAborting?: boolean;
+    isDeleting?: boolean;
+};
+export const useDisabledStatesForButtons = ({ selectedRuns, isStopping, isAborting, isDeleting }: hookArgs) => {
+    const isRunningOperation = Boolean(isStopping || isAborting || isDeleting);
+
+    const isDisabledAbortButton = useMemo<boolean>(() => {
+        return (
+            !selectedRuns?.length ||
+            selectedRuns.some((item) => !isAvailableAbortingForRun(item.run_head.status)) ||
+            isRunningOperation
+        );
+    }, [selectedRuns, isRunningOperation]);
+
+    const isDisabledStopButton = useMemo<boolean>(() => {
+        return (
+            !selectedRuns?.length ||
+            selectedRuns.some((item) => !isAvailableStoppingForRun(item.run_head.status)) ||
+            isRunningOperation
+        );
+    }, [selectedRuns, isRunningOperation]);
+
+    const isDisabledDeleteButton = useMemo<boolean>(() => {
+        return (
+            !selectedRuns?.length ||
+            selectedRuns.some((item) => !isAvailableDeletingForRun(item.run_head.status)) ||
+            isRunningOperation
+        );
+    }, [selectedRuns, isRunningOperation]);
+
+    return { isDisabledAbortButton, isDisabledStopButton, isDisabledDeleteButton } as const;
+};
diff --git a/hub/src/pages/Runs/List/hooks/useStopRuns.ts b/hub/src/pages/Runs/List/hooks/useStopRuns.ts
@@ -0,0 +1,50 @@
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useNotifications } from 'hooks';
+import { useStopRunsMutation } from 'services/run';
+
+import { getGroupedRunsByProjectAndRepoID } from '../helpers';
+
+export const useStopRuns = (isAborting?: boolean) => {
+    const { t } = useTranslation();
+    const [stopRun, { isLoading: isStopping }] = useStopRunsMutation();
+    const [pushNotification] = useNotifications();
+
+    const stopRuns = useCallback(
+        (runs: IRunListItem[]) => {
+            const groupedRuns = getGroupedRunsByProjectAndRepoID(runs);
+
+            const request = Promise.all(
+                Object.keys(groupedRuns).map((key) => {
+                    const runsGroup = groupedRuns[key];
+
+                    return stopRun({
+                        name: runsGroup[0].project,
+                        repo_id: runsGroup[0]?.repo_id ?? undefined,
+                        run_names: runsGroup.map((item) => item.run_head.run_name),
+                        abort: !!isAborting,
+                    }).unwrap();
+                }),
+            );
+
+            request.catch((error) => {
+                pushNotification({
+                    type: 'error',
+                    content: t('common.server_error', { error: error?.error }),
+                });
+            });
+
+            return request;
+        },
+        [isAborting],
+    );
+
+    return { stopRuns, isStopping } as const;
+};
+
+export const useAbortRuns = () => {
+    const { stopRuns: abortRuns, isStopping: isAborting } = useStopRuns(true);
+
+    return { abortRuns, isAborting } as const;
+};