feat: replace name with namespace (#2787)

# Support for Extended Image Info This PR introduces support for the extended image info feature, which affects how image namespaces are handled and displayed throughout the application. **Changes:** - Added a `supportExtendedImageInfo` flag based on the backend client's capabilities - Updated image queries to use `namespace` instead of `name` when extended image info is supported - Modified image full name generation to prioritize `namespace` over `name` - Adjusted environment selection logic to use `namespace` when available - Updated table columns in MyEnvironmentPage to display and sort by `namespace` when supported **Rationale:** These changes allow the application to work with both the old and new image information structures, providing a smooth transition as the backend evolves. **Effects:** - Users will see more accurate namespace information when using a backend that supports extended image info - Developers should be aware of the `supportExtendedImageInfo` flag when working with image-related components **How to test:** 1. Checkout core branch to `topic/10-22-feature_add_info_field_to_gql_image_schema` 2. Check the environments, my environments, session page which are using `namespace` (before lablup/backend.ai#2939, it was `name`.) of `images` query. **Screenshots:** In #2785, the part of the full image path field had `undefined`. But it has some value now. ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/a2553afe-d555-40b3-bc4e-bb1b79fa4b87.png) **Checklist:** - [ ] Mention to the original issue - [ ] Documentation - [x] Minium required manager version: 24.09.1 - [x] Specific setting for review - [x] Minimum requirements to check during review: - Verify that image namespaces are correctly displayed and used when extended image info is supported - Ensure backwards compatibility with older backend versions - [ ] Test case(s) to demonstrate the difference of before/after
lablup · Nov 5, 2024 · 299ae73 · 299ae73
1 parent b0d7ea2
commit 299ae73
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 56 deletions.
diff --git a/react/src/components/ImageEnvironmentSelectFormItems.tsx b/react/src/components/ImageEnvironmentSelectFormItems.tsx
@@ -92,6 +92,7 @@ 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');
 
   const [environmentSearch, setEnvironmentSearch] = useState('');
   const [versionSearch, setVersionSearch] = useState('');
@@ -111,7 +112,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 +128,7 @@ const ImageEnvironmentSelectFormItems: React.FC<
             key
             value
           }
+          namespace @since(version: "24.09.1")
         }
       }
     `,
@@ -266,7 +268,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 +369,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 +386,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 +403,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,8 @@ 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');
 
   const [isOpenColumnsSetting, setIsOpenColumnsSetting] = useState(false);
   const [selectedTab] = useState<TabKey>('images');
@@ -63,7 +69,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 +80,7 @@ const MyEnvironmentPage: React.FC<PropsWithChildren> = ({ children }) => {
             value
           }
           supported_accelerators
+          namespace @since(version: "24.09.1")
         }
       }
     `,
@@ -106,68 +113,72 @@ const MyEnvironmentPage: React.FC<PropsWithChildren> = ({ children }) => {
       title: t('environment.Registry'),
       dataIndex: 'registry',
       key: 'registry',
-      sorter: (a, b) =>
-        a?.registry && b?.registry ? a.registry.localeCompare(b.registry) : 0,
+      sorter: (a, b) => localeCompare(a?.registry, b?.registry),
     },
     {
       title: t('environment.Architecture'),
       dataIndex: 'architecture',
       key: 'architecture',
-      sorter: (a, b) =>
-        a?.architecture && b?.architecture
-          ? 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>
-      ),
+      sorter: (a, b) => localeCompare(a?.architecture, b?.architecture),
     },
+    ...(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) =>
+              localeCompare(
+                getNamespace(getImageFullName(a) || ''),
+                getNamespace(getImageFullName(b) || ''),
+              ),
+            render: (text: string, row: CommittedImage) => (
+              <span>{getNamespace(getImageFullName(row) || '')}</span>
+            ),
+          },
+        ]),
     {
       title: t('environment.Language'),
       key: 'lang',
-      sorter: (a, b) => {
-        const langA = getImageLang(getImageFullName(a) || '');
-        const langB = getImageLang(getImageFullName(b) || '');
-        return langA && langB ? langA.localeCompare(langB) : 0;
-      },
+      sorter: (a, b) =>
+        localeCompare(
+          getImageLang(getImageFullName(a) || ''),
+          getImageLang(getImageFullName(b) || ''),
+        ),
+
       render: (text, row) => (
         <LangTags image={getImageFullName(row) || ''} color="green" />
       ),
     },
     {
       title: t('environment.Version'),
       key: 'baseversion',
-      sorter: (a, b) => {
-        const baseversionA = getBaseVersion(getImageFullName(a) || '');
-        const baseversionB = getBaseVersion(getImageFullName(b) || '');
-        return baseversionA && baseversionB
-          ? baseversionA.localeCompare(baseversionB)
-          : 0;
-      },
+      sorter: (a, b) =>
+        localeCompare(
+          getBaseVersion(getImageFullName(a) || ''),
+          getBaseVersion(getImageFullName(b) || ''),
+        ),
       render: (text, row) => (
         <BaseVersionTags image={getImageFullName(row) || ''} color="green" />
       ),
     },
     {
       title: t('environment.Base'),
       key: 'baseimage',
-      sorter: (a, b) => {
-        const baseimageA = getBaseImage(getImageFullName(a) || '');
-        const baseimageB = getBaseImage(getImageFullName(b) || '');
-        return baseimageA && baseimageB
-          ? baseimageA.localeCompare(baseimageB)
-          : 0;
-      },
+      sorter: (a, b) =>
+        localeCompare(
+          getBaseImage(getImageFullName(a) || ''),
+          getBaseImage(getImageFullName(b) || ''),
+        ),
       render: (text, row) => (
         <BaseImageTags image={getImageFullName(row) || ''} />
       ),
@@ -190,10 +201,7 @@ const MyEnvironmentPage: React.FC<PropsWithChildren> = ({ children }) => {
                 b?.labels as { key: string; value: string }[],
               )[0] || ''
             : '';
-        if (requirementA === '' && requirementB === '') return 0;
-        if (requirementA === '') return -1;
-        if (requirementB === '') return 1;
-        return requirementA.localeCompare(requirementB);
+        return localeCompare(requirementA, requirementB);
       },
       render: (text, row) =>
         row?.tag ? (
@@ -207,8 +215,7 @@ const MyEnvironmentPage: React.FC<PropsWithChildren> = ({ children }) => {
       title: t('environment.Digest'),
       dataIndex: 'digest',
       key: 'digest',
-      sorter: (a, b) =>
-        a?.digest && b?.digest ? a.digest.localeCompare(b.digest) : 0,
+      sorter: (a, b) => localeCompare(a?.digest || '', b?.digest || ''),
     },
     {
       title: t('general.Control'),

diff --git a/src/lib/backend.ai-client-esm.ts b/src/lib/backend.ai-client-esm.ts
@@ -721,6 +721,9 @@ class Client {
     if (this.isManagerVersionCompatibleWith('24.09.1')) {
       this._features['extended-image-info'] = true;
     }
+    if (this.isManagerVersionCompatibleWith('24.09.1')) {
+      this._features['extended-image-info'] = true;
+    }
   }
 
   /**