feat(FR-1499): implement delete and restore artifacts

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

@@ -0,0 +1,113 @@
+import { BAIActivateArtifactsModalArtifactsFragment$key } from '../../__generated__/BAIActivateArtifactsModalArtifactsFragment.graphql';
+import { BAIActivateArtifactsModalArtifactsFragmentRestoreArtifactsMutation } from '../../__generated__/BAIActivateArtifactsModalArtifactsFragmentRestoreArtifactsMutation.graphql';
+import { toLocalId } from '../../helper';
+import BAIUnmountAfterClose from '../BAIUnmountAfterClose';
+import { App, Modal, ModalProps, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { graphql, useFragment, useMutation } from 'react-relay';
+
+export type BAIActivateArtifactsModalArtifactsFragmentKey =
+  BAIActivateArtifactsModalArtifactsFragment$key;
+
+export interface BAIActivateArtifactsModalProps extends ModalProps {
+  selectedArtifactsFragment: BAIActivateArtifactsModalArtifactsFragmentKey;
+}
+
+const BAIActivateArtifactsModal = ({
+  selectedArtifactsFragment,
+  onOk,
+  onCancel,
+  ...props
+}: BAIActivateArtifactsModalProps) => {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+
+  const selectedArtifacts =
+    useFragment<BAIActivateArtifactsModalArtifactsFragment$key>(
+      graphql`
+        fragment BAIActivateArtifactsModalArtifactsFragment on Artifact
+        @relay(plural: true) {
+          id
+          name
+        }
+      `,
+      selectedArtifactsFragment,
+    );
+
+  const [restoreArtifacts, isInflightRestoreArtifacts] =
+    useMutation<BAIActivateArtifactsModalArtifactsFragmentRestoreArtifactsMutation>(
+      graphql`
+        mutation BAIActivateArtifactsModalArtifactsFragmentRestoreArtifactsMutation(
+          $input: RestoreArtifactsInput!
+        ) {
+          restoreArtifacts(input: $input) {
+            artifacts {
+              id
+              availability
+            }
+          }
+        }
+      `,
+    );
+
+  return (
+    <BAIUnmountAfterClose>
+      <Modal
+        title={t('comp:BAIActivateArtifactsModal.ActivateArtifacts')}
+        centered
+        {...props}
+        onOk={(e) => {
+          restoreArtifacts({
+            variables: {
+              input: {
+                artifactIds: selectedArtifacts.map((a) => toLocalId(a.id)),
+              },
+            },
+            onCompleted: (res, errors) => {
+              if (errors && errors.length > 0) {
+                errors.forEach((err) =>
+                  message.error(
+                    err.message ??
+                      t(
+                        'comp:BAIActivateArtifactsModal.FailedToActivateArtifacts',
+                      ),
+                  ),
+                );
+                return;
+              }
+              message.success(
+                t('comp:BAIActivateArtifactsModal.SuccessfullyActivated'),
+              );
+              onOk?.(e);
+            },
+            onError: (err) => {
+              message.error(
+                err.message ??
+                  t('comp:BAIActivateArtifactsModal.FailedToActivateArtifacts'),
+              );
+            },
+          });
+        }}
+        onCancel={(e) => {
+          onCancel?.(e);
+        }}
+        okText={t('comp:BAIActivateArtifactsModal.Activate')}
+        okButtonProps={{ loading: isInflightRestoreArtifacts }}
+      >
+        <Typography.Text>
+          {selectedArtifacts.length === 1
+            ? t(
+                'comp:BAIActivateArtifactsModal.AreYouSureYouWantToActivateOne',
+                { name: selectedArtifacts[0].name },
+              )
+            : t(
+                'comp:BAIActivateArtifactsModal.AreYouSureYouWantToActivateSome',
+                { count: selectedArtifacts.length },
+              )}
+        </Typography.Text>
+      </Modal>
+    </BAIUnmountAfterClose>
+  );
+};
+
+export default BAIActivateArtifactsModal;

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

@@ -16,11 +16,11 @@ import BAIArtifactRevisionDownloadButton from './BAIArtifactRevisionDownloadButt
 import BAIArtifactStatusTag from './BAIArtifactStatusTag';
 import BAIArtifactTypeTag from './BAIArtifactTypeTag';
 import { SyncOutlined } from '@ant-design/icons';
-import { TableColumnsType, theme, Typography } from 'antd';
+import { Button, TableColumnsType, theme, Typography } from 'antd';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import _ from 'lodash';
-import { Package, Container, Brain } from 'lucide-react';
+import { Package, Container, Brain, BanIcon, UndoIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
 
@@ -77,11 +77,15 @@ export interface BAIArtifactTableProps
   extends Omit<BAITableProps<Artifact>, 'dataSource' | 'columns' | 'rowKey'> {
   artifactFragment: BAIArtifactTableArtifactFragment$key;
   onClickPull: (artifactId: string, revisionId: string) => void;
+  onClickDelete: (artifactId: string) => void;
+  onClickRestore: (artifactId: string) => void;
 }
 
 const BAIArtifactTable = ({
   artifactFragment,
   onClickPull,
+  onClickDelete,
+  onClickRestore,
   ...tableProps
 }: BAIArtifactTableProps) => {
   const { token } = theme.useToken();
@@ -97,6 +101,7 @@ const BAIArtifactTable = ({
         description
         updatedAt
         scannedAt
+        availability
         ...BAIArtifactTypeTagFragment
         latestVersion: revisions(
           first: 1
@@ -125,9 +130,9 @@ const BAIArtifactTable = ({
       key: 'name',
       render: (name: string, record: Artifact) => {
         return (
-          <BAIFlex direction="column" align="start">
+          <BAIFlex direction="column" align="start" wrap="wrap">
             <BAIFlex gap={'xs'}>
-              <BAILink to={'/reservoir/' + toLocalId(record.id)}>
+              <BAILink to={'/reservoir/' + toLocalId(record.id)} style={{}}>
                 {name}
               </BAILink>
               <BAIArtifactTypeTag artifactTypeFrgmt={record} />
@@ -143,7 +148,42 @@ const BAIArtifactTable = ({
           </BAIFlex>
         );
       },
-      width: '30%',
+    },
+    {
+      title: t('comp:BAIArtifactTable.Controls'),
+      key: 'controls',
+      render: (record: Artifact) => {
+        const availability = record.availability;
+        if (availability === 'ALIVE') {
+          return (
+            <Button
+              title={t('comp:BAIArtifactTable.Deactivate')}
+              size="small"
+              type="text"
+              style={{
+                color: token.colorError,
+                background: token.colorErrorBg,
+              }}
+              icon={<BanIcon />}
+              onClick={() => onClickDelete(record.id)}
+            />
+          );
+        } else if (availability === 'DELETED') {
+          return (
+            <Button
+              title={t('comp:BAIArtifactTable.Activate')}
+              size="small"
+              type="text"
+              icon={<UndoIcon />}
+              style={{
+                color: token.colorInfo,
+                background: token.colorInfoBg,
+              }}
+              onClick={() => onClickRestore(record.id)}
+            />
+          );
+        }
+      },
     },
     {
       title: t('comp:BAIArtifactRevisionTable.LatestVersion'),
@@ -163,6 +203,7 @@ const BAIArtifactTable = ({
                 <BAIArtifactRevisionDownloadButton
                   title={t('comp:BAIArtifactTable.PullLatestVersion')}
                   revisionsFrgmt={[latestVersion]}
+                  disabled={record.availability !== 'ALIVE'}
                   size="small"
                   onClick={() => onClickPull(record.id, latestVersion.id)}
                 />
@@ -171,7 +212,6 @@ const BAIArtifactTable = ({
           </BAIFlex>
         );
       },
-      width: '25%',
     },
     {
       title: t('comp:BAIArtifactRevisionTable.Size'),
@@ -187,7 +227,6 @@ const BAIArtifactTable = ({
           </BAIText>
         );
       },
-      width: '15%',
     },
     {
       title: t('comp:BAIArtifactTable.Scanned'),
@@ -203,7 +242,6 @@ const BAIArtifactTable = ({
           </Typography.Text>
         );
       },
-      width: '15%',
     },
     {
       title: t('comp:BAIArtifactRevisionTable.Updated'),
@@ -219,7 +257,6 @@ const BAIArtifactTable = ({
           </Typography.Text>
         );
       },
-      width: '15%',
     },
   ];
 

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

@@ -0,0 +1,116 @@
+import { BAIDeactivateArtifactsModalArtifactsFragment$key } from '../../__generated__/BAIDeactivateArtifactsModalArtifactsFragment.graphql';
+import { BAIDeactivateArtifactsModalDeleteArtifactsMutation } from '../../__generated__/BAIDeactivateArtifactsModalDeleteArtifactsMutation.graphql';
+import { toLocalId } from '../../helper';
+import BAIUnmountAfterClose from '../BAIUnmountAfterClose';
+import { App, Modal, ModalProps, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { graphql, useFragment, useMutation } from 'react-relay';
+
+export type BAIDeactivateArtifactsModalArtifactsFragmentKey =
+  BAIDeactivateArtifactsModalArtifactsFragment$key;
+
+export interface BAIDeactivateArtifactsModalProps extends ModalProps {
+  selectedArtifactsFragment: BAIDeactivateArtifactsModalArtifactsFragmentKey;
+}
+
+const BAIDeactivateArtifactsModal = ({
+  selectedArtifactsFragment,
+  onOk,
+  onCancel,
+  ...modalProps
+}: BAIDeactivateArtifactsModalProps) => {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+  const selectedArtifacts =
+    useFragment<BAIDeactivateArtifactsModalArtifactsFragment$key>(
+      graphql`
+        fragment BAIDeactivateArtifactsModalArtifactsFragment on Artifact
+        @relay(plural: true) {
+          id
+          name
+        }
+      `,
+      selectedArtifactsFragment,
+    );
+
+  const [deleteArtifacts, isInflightDeleteArtifacts] =
+    useMutation<BAIDeactivateArtifactsModalDeleteArtifactsMutation>(graphql`
+      mutation BAIDeactivateArtifactsModalDeleteArtifactsMutation(
+        $input: DeleteArtifactsInput!
+      ) {
+        deleteArtifacts(input: $input) {
+          artifacts {
+            id
+            availability
+          }
+        }
+      }
+    `);
+
+  return (
+    <BAIUnmountAfterClose>
+      <Modal
+        title={t('comp:BAIDeactivateArtifactsModal.DeactivateArtifacts')}
+        centered
+        okText={t('comp:BAIDeactivateArtifactsModal.Deactivate')}
+        onOk={(e) => {
+          deleteArtifacts({
+            variables: {
+              input: {
+                artifactIds: selectedArtifacts.map((a) => toLocalId(a.id)),
+              },
+            },
+            onCompleted: (res, errors) => {
+              if (errors && errors.length > 0) {
+                errors.forEach((err) =>
+                  message.error(
+                    err.message ??
+                      t(
+                        'comp:BAIDeactivateArtifactsModal.FailedToDeactivateArtifacts',
+                      ),
+                  ),
+                );
+                return;
+              }
+              message.success(
+                t('comp:BAIDeactivateArtifactsModal.SuccessfullyDeactivated'),
+              );
+              onOk?.(e);
+            },
+            onError: (err) => {
+              message.error(
+                err.message ??
+                  t(
+                    'comp:BAIDeactivateArtifactsModal.FailedToDeactivateArtifacts',
+                  ),
+              );
+            },
+          });
+        }}
+        onCancel={(e) => {
+          onCancel?.(e);
+        }}
+        okButtonProps={{ danger: true, loading: isInflightDeleteArtifacts }}
+        {...modalProps}
+      >
+        <Typography.Text>
+          {selectedArtifacts.length === 1
+            ? t(
+                'comp:BAIDeactivateArtifactsModal.AreYouSureYouWantToDeactivateOne',
+                {
+                  name: selectedArtifacts[0].name,
+                },
+              )
+            : t(
+                'comp:BAIDeactivateArtifactsModal.AreYouSureYouWantToDeactivateSome',
+                {
+                  count: selectedArtifacts.length,
+                },
+              )}
+        </Typography.Text>
+      </Modal>
+    </BAIUnmountAfterClose>
+  );
+};
+
+export default BAIDeactivateArtifactsModal;