feat: replace name with namespace

lablup · Oct 30, 2024 · 01fc2fd · 01fc2fd
1 parent e29820c
commit 01fc2fd
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 25 deletions.
diff --git a/react/src/components/ImageEnvironmentSelectFormItems.tsx b/react/src/components/ImageEnvironmentSelectFormItems.tsx
@@ -92,6 +92,8 @@ const ImageEnvironmentSelectFormItems: React.FC<
   const form = Form.useFormInstance<ImageEnvironmentFormInput>();
   const environments = Form.useWatch('environments', { form, preserve: true });
   const baiClient = useSuspendedBackendaiClient();
+  const supportExtendedImageInfo =
+    baiClient?.supports('extended-image-info') ?? false;
 
   const [environmentSearch, setEnvironmentSearch] = useState('');
   const [versionSearch, setVersionSearch] = useState('');
@@ -111,7 +113,7 @@ const ImageEnvironmentSelectFormItems: React.FC<
       query ImageEnvironmentSelectFormItemsQuery($installed: Boolean) {
         images(is_installed: $installed) {
           id
-          name
+          name @deprecatedSince(version: "24.09.1.")
           humanized_name
           tag
           registry
@@ -127,6 +129,7 @@ const ImageEnvironmentSelectFormItems: React.FC<
             key
             value
           }
+          namespace @since(version: "24.09.1.")
         }
       }
     `,
@@ -266,7 +269,9 @@ const ImageEnvironmentSelectFormItems: React.FC<
                   // metadata?.imageInfo[
                   //   getImageMeta(getImageFullName(image) || "").key
                   // ]?.name || image?.name
-                  image?.registry + '/' + image?.name
+                  image?.registry + '/' + supportExtendedImageInfo
+                    ? image?.namespace
+                    : image?.name
                 );
               })
               .map((images, environmentName) => {
@@ -365,7 +370,10 @@ const ImageEnvironmentSelectFormItems: React.FC<
             if (fullNameMatchedImage) {
               form.setFieldsValue({
                 environments: {
-                  environment: fullNameMatchedImage?.name || '',
+                  environment:
+                    (supportExtendedImageInfo
+                      ? fullNameMatchedImage?.namespace
+                      : fullNameMatchedImage?.name) || '',
                   version: getImageFullName(fullNameMatchedImage),
                   image: fullNameMatchedImage,
                 },
@@ -379,7 +387,10 @@ const ImageEnvironmentSelectFormItems: React.FC<
                 .images[0];
               form.setFieldsValue({
                 environments: {
-                  environment: firstInListImage?.name || '',
+                  environment:
+                    (supportExtendedImageInfo
+                      ? firstInListImage?.namespace
+                      : firstInListImage?.name) || '',
                   version: getImageFullName(firstInListImage),
                   image: firstInListImage,
                 },
@@ -393,7 +404,11 @@ const ImageEnvironmentSelectFormItems: React.FC<
         >
           {fullNameMatchedImage ? (
             <Select.Option
-              value={fullNameMatchedImage?.name}
+              value={
+                supportExtendedImageInfo
+                  ? fullNameMatchedImage?.namespace
+                  : fullNameMatchedImage?.name
+              }
               filterValue={getImageFullName(fullNameMatchedImage)}
             >
               <Flex

diff --git a/react/src/components/ResourceAllocationFormItems.test.ts b/react/src/components/ResourceAllocationFormItems.test.ts
@@ -36,7 +36,8 @@ describe('getAllocatablePresetNames', () => {
 
   const image_has_cuda_shares_min1_max1: Image = {
     id: 'id1',
-    name: 'image1',
+    namespace: 'image1',
+    name: undefined,
     digest: 'digest1',
     architecture: 'arm64',
     humanized_name: 'Image 1',

diff --git a/react/src/helper/index.tsx b/react/src/helper/index.tsx
@@ -314,7 +314,7 @@ export const getImageFullName = (
   image: Image | CommittedImage | EnvironmentImage,
 ) => {
   return image
-    ? `${image.registry}/${image.name}:${image.tag}@${image.architecture}`
+    ? `${image.registry}/${image.namespace ?? image.name}:${image.tag}@${image.architecture}`
     : undefined;
 };
 

diff --git a/react/src/hooks/useBackendAIImageMetaData.test.tsx b/react/src/hooks/useBackendAIImageMetaData.test.tsx
@@ -108,7 +108,8 @@ describe('useBackendAIImageMetaData', () => {
 
     const { key, tags } = getImageMeta(
       getImageFullName({
-        name: 'abc/def/training',
+        namespace: 'abc/def/training',
+        name: undefined,
         humanized_name: 'abc/def/training',
         tag: '01-py3-abc-v1',
         registry: '192.168.0.1:7080',

diff --git a/react/src/pages/MyEnvironmentPage.tsx b/react/src/pages/MyEnvironmentPage.tsx
@@ -7,8 +7,12 @@ import {
   LangTags,
 } from '../components/ImageTags';
 import TableColumnsSettingModal from '../components/TableColumnsSettingModal';
-import { getImageFullName } from '../helper';
-import { useBackendAIImageMetaData, useUpdatableState } from '../hooks';
+import { getImageFullName, localeCompare } from '../helper';
+import {
+  useBackendAIImageMetaData,
+  useSuspendedBackendaiClient,
+  useUpdatableState,
+} from '../hooks';
 import { MyEnvironmentPageForgetAndUntagMutation } from './__generated__/MyEnvironmentPageForgetAndUntagMutation.graphql';
 import {
   MyEnvironmentPageQuery,
@@ -40,6 +44,9 @@ const MyEnvironmentPage: React.FC<PropsWithChildren> = ({ children }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const { message } = App.useApp();
+  const baiClient = useSuspendedBackendaiClient();
+  const supportExtendedImageInfo =
+    baiClient?.supports('extended-image-info') ?? false;
 
   const [isOpenColumnsSetting, setIsOpenColumnsSetting] = useState(false);
   const [selectedTab] = useState<TabKey>('images');
@@ -63,7 +70,7 @@ const MyEnvironmentPage: React.FC<PropsWithChildren> = ({ children }) => {
       query MyEnvironmentPageQuery {
         customized_images {
           id
-          name
+          name @deprecatedSince(version: "24.09.1.")
           humanized_name
           tag
           registry
@@ -74,6 +81,7 @@ const MyEnvironmentPage: React.FC<PropsWithChildren> = ({ children }) => {
             value
           }
           supported_accelerators
+          namespace @since(version: "24.09.1.")
         }
       }
     `,
@@ -118,20 +126,33 @@ const MyEnvironmentPage: React.FC<PropsWithChildren> = ({ children }) => {
           ? a.architecture.localeCompare(b.architecture)
           : 0,
     },
-    {
-      title: t('environment.Namespace'),
-      key: 'namespace',
-      sorter: (a, b) => {
-        const namespaceA = getNamespace(getImageFullName(a) || '');
-        const namespaceB = getNamespace(getImageFullName(b) || '');
-        return namespaceA && namespaceB
-          ? namespaceA.localeCompare(namespaceB)
-          : 0;
-      },
-      render: (text, row) => (
-        <span>{getNamespace(getImageFullName(row) || '')}</span>
-      ),
-    },
+    ...(supportExtendedImageInfo
+      ? [
+          {
+            title: t('environment.Namespace'),
+            key: 'namespace',
+            dataIndex: 'namespace',
+            sorter: (a: CommittedImage, b: CommittedImage) =>
+              localeCompare(a?.namespace, b?.namespace),
+          },
+        ]
+      : [
+          {
+            title: t('environment.Namespace'),
+            key: 'name',
+            dataIndex: 'name',
+            sorter: (a: CommittedImage, b: CommittedImage) => {
+              const namespaceA = getNamespace(getImageFullName(a) || '');
+              const namespaceB = getNamespace(getImageFullName(b) || '');
+              return namespaceA && namespaceB
+                ? namespaceA.localeCompare(namespaceB)
+                : 0;
+            },
+            render: (text: string, row: CommittedImage) => (
+              <span>{getNamespace(getImageFullName(row) || '')}</span>
+            ),
+          },
+        ]),
     {
       title: t('environment.Language'),
       key: 'lang',