feat(FR-1495): implement progress bar with bai notifiacation

packages/backend.ai-ui/src/components/fragments/BAIImportArtifactModal.tsx

@@ -33,7 +33,14 @@ export interface BAIImportArtifactModalProps
   extends Omit<ModalProps, 'onOk' | 'onCancel'> {
   selectedArtifactFrgmt: BAIImportArtifactModalArtifactFragment$key | null;
   selectedArtifactRevisionFrgmt: BAIImportArtifactModalArtifactRevisionFragment$key;
-  onOk: (e: React.MouseEvent<HTMLElement>) => void;
+  onOk: (
+    e: React.MouseEvent<HTMLElement>,
+    tasks: {
+      taskId: string;
+      version: string;
+      artifact_id: string;
+    }[],
+  ) => void;
   onCancel: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
@@ -124,7 +131,6 @@ const BAIImportArtifactModal = ({
         title={t('comp:BAIImportArtifactModal.PullVersion')}
         centered
         onOk={(e) => {
-          onOk(e);
           importArtifacts({
             variables: {
               input: {
@@ -148,7 +154,14 @@ const BAIImportArtifactModal = ({
                   count: res.importArtifacts.artifactRevisions.edges.length,
                 }),
               );
-              onOk(e);
+              onOk(
+                e,
+                res.importArtifacts.tasks.map((task) => ({
+                  taskId: task.taskId,
+                  version: task.artifactRevision.version,
+                  artifact_id: toLocalId(selectedArtifact!.id),
+                })),
+              );
             },
             onError: (err) => {
               message.error(

packages/backend.ai-ui/src/locale/ko.json

@@ -129,7 +129,6 @@
       "Create": "생성",
       "Delete": "삭제",
       "Remove": "제거",
-
       "Upload": "업로드"
     }
   }

packages/backend.ai-ui/src/locale/ms.json

@@ -122,7 +122,6 @@
   "general": {
     "NSelected": "{{count}} dipilih",
     "TotalItems": "Jumlah {{total}} item",
-
     "button": {
       "Cancel": "Batalkan",
       "Close": "Tutup",

packages/backend.ai-ui/src/locale/pl.json

@@ -122,14 +122,14 @@
   "general": {
     "NSelected": "{{count}}",
     "TotalItems": "Total {{total}}",
-
     "button": {
       "Cancel": "Anulować",
       "Close": "Zamknąć",
       "CopyAll": "Kopiuj wszystko",
       "Create": "Tworzyć",
       "Delete": "Usuwać",
       "Remove": "Usunąć",
+
       "Upload": "Wgrywać"
     }
   }

packages/backend.ai-ui/src/locale/pt-BR.json

@@ -17,6 +17,7 @@
     "Updated": "Atualizado",
     "Version": "Versão"
   },
+
   "comp:BAIArtifactTable": {
     "Action": "Ação",
     "PullLatestVersion": "Puxe a versão mais recente",
@@ -121,7 +122,6 @@
   "general": {
     "NSelected": "{{count}} selecionado",
     "TotalItems": "Total {{total}} itens",
-
     "button": {
       "Cancel": "Cancelar",
       "Close": "Fechar",

packages/backend.ai-ui/src/locale/pt.json

@@ -17,6 +17,7 @@
     "Updated": "Atualizado",
     "Version": "Versão"
   },
+
   "comp:BAIArtifactTable": {
     "Action": "Ação",
     "PullLatestVersion": "Puxe a versão mais recente",
@@ -122,7 +123,6 @@
   "general": {
     "NSelected": "{{count}} selecionado",
     "TotalItems": "Total {{total}} itens",
-
     "button": {
       "Cancel": "Cancelar",
       "Close": "Fechar",

packages/backend.ai-ui/src/locale/ru.json

@@ -122,7 +122,6 @@
   "general": {
     "NSelected": "{{count}} выбрал",
     "TotalItems": "Total {{total}} элементы",
-
     "button": {
       "Cancel": "Отмена",
       "Close": "Закрывать",

packages/backend.ai-ui/src/locale/th.json

@@ -122,7 +122,6 @@
   "general": {
     "NSelected": "{{count}} เลือก",
     "TotalItems": "รวม {{total}} รายการ",
-
     "button": {
       "Cancel": "ยกเลิก",
       "Close": "ปิด",

packages/backend.ai-ui/src/locale/tr.json

@@ -117,7 +117,6 @@
   "general": {
     "NSelected": "{{count}} seçildi",
     "TotalItems": "Total {{total}} öğeleri",
-
     "button": {
       "Cancel": "İptal etmek",
       "Close": "Kapalı",

packages/backend.ai-ui/src/locale/zh-CN.json

@@ -122,7 +122,6 @@
   "general": {
     "NSelected": "{{count}}选择",
     "TotalItems": "总计{{total}}项目",
-
     "button": {
       "Cancel": "取消",
       "Close": "关闭",

packages/backend.ai-ui/src/locale/zh-TW.json

@@ -17,6 +17,7 @@
     "Updated": "更新",
     "Version": "版本"
   },
+
   "comp:BAIArtifactTable": {
     "Action": "行動",
     "PullLatestVersion": "拉最新版本",

react/src/pages/ReservoirArtifactDetailPage.tsx

@@ -32,6 +32,7 @@ import BAIFetchKeyButton from 'src/components/BAIFetchKeyButton';
 import BAIText from 'src/components/BAIText';
 import { INITIAL_FETCH_KEY, useUpdatableState } from 'src/hooks';
 import { useBAIPaginationOptionStateOnSearchParam } from 'src/hooks/reactPaginationQueryOptions';
+import { useSetBAINotification } from 'src/hooks/useBAINotification';
 import { useDeferredQueryParams } from 'src/hooks/useDeferredQueryParams';
 import { JsonParam, withDefault } from 'use-query-params';
 
@@ -46,6 +47,7 @@ type RevisionNode = NonNullable<
 const ReservoirArtifactDetailPage = () => {
   const { token } = theme.useToken();
   const { t } = useTranslation();
+  const { upsertNotification } = useSetBAINotification();
 
   const { artifactId } = useParams<{ artifactId: string }>();
 
@@ -516,8 +518,34 @@ const ReservoirArtifactDetailPage = () => {
         selectedArtifactFrgmt={artifact ?? null}
         selectedArtifactRevisionFrgmt={selectedRevisions}
         open={!!artifact && !_.isEmpty(selectedRevisions)}
-        onOk={() => {
+        onOk={(_e, tasks) => {
           setSelectedRevisions([]);
+          tasks.forEach((task) => {
+            upsertNotification({
+              message: `Pulling artifact version: ${task.version}`,
+              open: true,
+              duration: 0,
+              backgroundTask: {
+                status: 'pending',
+                taskId: task.taskId,
+                promise: null,
+                percent: 0,
+                onChange: {
+                  resolved: (_data, _notification) => {
+                    return {
+                      type: 'success',
+                      message: `Successfully pulled artifact version: ${task.version}`,
+                      toText: 'Go to Artifact',
+                      to: `/reservoir/${task.artifact_id}`,
+                    };
+                  },
+                  rejected: (_data, _notification) => {
+                    return 'Failed to pull artifact versions: ';
+                  },
+                },
+              },
+            });
+          });
           updateFetchKey();
         }}
         onCancel={() => {

react/src/pages/ReservoirPage.tsx

@@ -26,12 +26,14 @@ import {
   ReservoirPageQuery$variables,
 } from 'src/__generated__/ReservoirPageQuery.graphql';
 import BAIFetchKeyButton from 'src/components/BAIFetchKeyButton';
+import { useSetBAINotification } from 'src/hooks/useBAINotification';
 import { withDefault, JsonParam } from 'use-query-params';
 
 const ReservoirPage: React.FC = () => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const navigate = useNavigate();
+  const { upsertNotification } = useSetBAINotification();
 
   const [selectedArtifact, setSelectedArtifact] =
     useState<BAIImportArtifactModalArtifactFragmentKey | null>(null);
@@ -325,9 +327,35 @@ const ReservoirPage: React.FC = () => {
         selectedArtifactFrgmt={selectedArtifact}
         selectedArtifactRevisionFrgmt={selectedRevision}
         open={!!selectedArtifact && !_.isEmpty(selectedRevision)}
-        onOk={() => {
+        onOk={(_e, tasks) => {
           setSelectedArtifact(null);
           setSelectedRevision([]);
+          tasks.forEach((task) => {
+            upsertNotification({
+              message: `Pulling artifact version: ${task.version}`,
+              open: true,
+              duration: 0,
+              backgroundTask: {
+                status: 'pending',
+                taskId: task.taskId,
+                promise: null,
+                percent: 0,
+                onChange: {
+                  resolved: (_data, _notification) => {
+                    return {
+                      type: 'success',
+                      message: `Successfully pulled artifact version: ${task.version}`,
+                      toText: 'Go to Artifact',
+                      to: `/reservoir/${task.artifact_id}`,
+                    };
+                  },
+                  rejected: (_data, _notification) => {
+                    return 'Failed to pull artifact versions: ';
+                  },
+                },
+              },
+            });
+          });
         }}
         onCancel={() => {
           setSelectedArtifact(null);