refactor: session launcher image parsing (#2800)

**Changes:** This PR enhances the image selection UI to support extended image information in the session launcher, providing more detailed and structured image metadata display. Key updates: - Adds support for displaying base image name, version, architecture and tags in a more organized format - Introduces tag aliasing functionality to show more user-friendly tag names - Updates the image selection interface to show customized image tags with distinct styling - Adds translations for "Tags" across all supported languages **Minimum required manager version:** 24.09.1 **Review Requirements:** 1. Verify extended image info display works when backend supports 'extended-image-info' feature 2. Check tag aliasing correctly translates technical tags to user-friendly names 3. Confirm customized image tags are properly highlighted with cyan color 4. Validate all translations for "Tags" appear correctly across languages **Test Cases:** 1. Select an image with extended info: - Should show base image name, version, architecture and tags - Tags should display with proper aliasing 2. Select a customized image: - Should show customized tag with cyan highlighting - Should display proper customized image name from labels 3. Test with extended-image-info feature disabled: - Should fallback to legacy image info display format 4. Test the image of `Environments & Resource allocation` page and `Confirm and Launch` page has the same value. **Screenshots:** ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/52252102-9e0c-4640-aec1-6a9349595984.png)
lablup · Nov 5, 2024 · 90e46f6 · 90e46f6
1 parent eac1fb5
commit 90e46f6
Show file tree

Hide file tree

Showing 27 changed files with 345 additions and 109 deletions.
diff --git a/react/src/components/EnvVarFormList.tsx b/react/src/components/EnvVarFormList.tsx
@@ -165,7 +165,7 @@ export function isSensitiveEnv(key: string) {
 }
 
 export function sanitizeSensitiveEnv(envs: EnvVarFormListValue[]) {
-  return envs.map((env) => {
+  return _.map(envs, (env) => {
     if (env && isSensitiveEnv(env.variable)) {
       return { ...env, value: '' };
     }

diff --git a/react/src/components/ImageEnvironmentSelectFormItems.tsx b/react/src/components/ImageEnvironmentSelectFormItems.tsx
@@ -97,7 +97,7 @@ const ImageEnvironmentSelectFormItems: React.FC<
   const [environmentSearch, setEnvironmentSearch] = useState('');
   const [versionSearch, setVersionSearch] = useState('');
   const { t } = useTranslation();
-  const [metadata, { getImageMeta }] = useBackendAIImageMetaData();
+  const [metadata, { getImageMeta, tagAlias }] = useBackendAIImageMetaData();
   const { token } = theme.useToken();
   const { isDarkMode } = useThemeMode();
 
@@ -129,6 +129,12 @@ const ImageEnvironmentSelectFormItems: React.FC<
             value
           }
           namespace @since(version: "24.09.1")
+          base_image_name @since(version: "24.09.1")
+          tags @since(version: "24.09.1") {
+            key
+            value
+          }
+          version @since(version: "24.09.1")
         }
       }
     `,
@@ -498,7 +504,7 @@ const ImageEnvironmentSelectFormItems: React.FC<
                               }}
                             />
                             <TextHighlighter keyword={environmentSearch}>
-                              {environmentGroup.displayName}
+                              {tagAlias(environmentGroup.displayName)}
                             </TextHighlighter>
                           </Flex>
                           <Flex
@@ -577,13 +583,25 @@ const ImageEnvironmentSelectFormItems: React.FC<
                         paddingLeft: token.paddingSM,
                       }}
                     >
-                      {t('session.launcher.Version')}
-                      <Divider type="vertical" />
-                      {t('session.launcher.Base')}
-                      <Divider type="vertical" />
-                      {t('session.launcher.Architecture')}
-                      <Divider type="vertical" />
-                      {t('session.launcher.Requirements')}
+                      {supportExtendedImageInfo ? (
+                        <>
+                          {t('session.launcher.Version')}
+                          <Divider type="vertical" />
+                          {t('session.launcher.Architecture')}
+                          <Divider type="vertical" />
+                          {t('session.launcher.Tags')}
+                        </>
+                      ) : (
+                        <>
+                          {t('session.launcher.Version')}
+                          <Divider type="vertical" />
+                          {t('session.launcher.Base')}
+                          <Divider type="vertical" />
+                          {t('session.launcher.Architecture')}
+                          <Divider type="vertical" />
+                          {t('session.launcher.Requirements')}
+                        </>
+                      )}
                     </Flex>
                     <Divider style={{ margin: '8px 0' }} />
                     {menu}
@@ -602,18 +620,21 @@ const ImageEnvironmentSelectFormItems: React.FC<
                       '-',
                     ) || ['', '', ''];
 
-                    let tagAlias = metadata?.tagAlias[tag];
-                    if (!tagAlias) {
+                    let metadataTagAlias = metadata?.tagAlias[tag];
+                    if (!metadataTagAlias) {
                       for (const [key, replaceString] of Object.entries(
                         metadata?.tagReplace || {},
                       )) {
                         const pattern = new RegExp(key);
                         if (pattern.test(tag)) {
-                          tagAlias = tag?.replace(pattern, replaceString);
+                          metadataTagAlias = tag?.replace(
+                            pattern,
+                            replaceString,
+                          );
                         }
                       }
-                      if (!tagAlias) {
-                        tagAlias = tag;
+                      if (!metadataTagAlias) {
+                        metadataTagAlias = tag;
                       }
                     }
 
@@ -695,39 +716,98 @@ const ImageEnvironmentSelectFormItems: React.FC<
                         value={getImageFullName(image)}
                         filterValue={[
                           version,
-                          tagAlias,
+                          metadataTagAlias,
                           image?.architecture,
                           ...extraFilterValues,
                         ].join('\t')}
                       >
-                        <Flex direction="row" justify="between">
+                        {supportExtendedImageInfo ? (
                           <Flex direction="row">
                             <TextHighlighter keyword={versionSearch}>
-                              {version}
-                            </TextHighlighter>
-                            <Divider type="vertical" />
-                            <TextHighlighter keyword={versionSearch}>
-                              {tagAlias}
+                              {image?.version}
                             </TextHighlighter>
                             <Divider type="vertical" />
                             <TextHighlighter keyword={versionSearch}>
                               {image?.architecture}
                             </TextHighlighter>
+                            <Divider type="vertical" />
+                            <Flex direction="row" align="start">
+                              {/* TODO: replace this with AliasedImageDoubleTags after image list query with ImageNode is implemented. */}
+                              {_.map(
+                                image?.tags,
+                                (tag: { key: string; value: string }) => {
+                                  const isCustomized = _.includes(
+                                    tag.key,
+                                    'customized_',
+                                  );
+                                  const tagValue = isCustomized
+                                    ? _.find(image?.labels, {
+                                        key: 'ai.backend.customized-image.name',
+                                      })?.value
+                                    : tag.value;
+                                  return (
+                                    <DoubleTag
+                                      key={tag.key}
+                                      values={[
+                                        {
+                                          label: (
+                                            <TextHighlighter
+                                              keyword={versionSearch}
+                                              key={tag.key}
+                                            >
+                                              {tagAlias(tag.key)}
+                                            </TextHighlighter>
+                                          ),
+                                          color: isCustomized ? 'cyan' : 'blue',
+                                        },
+                                        {
+                                          label: (
+                                            <TextHighlighter
+                                              keyword={versionSearch}
+                                              key={tagValue}
+                                            >
+                                              {tagValue}
+                                            </TextHighlighter>
+                                          ),
+                                          color: isCustomized ? 'cyan' : 'blue',
+                                        },
+                                      ]}
+                                    />
+                                  );
+                                },
+                              )}
+                            </Flex>
                           </Flex>
-                          <Flex
-                            direction="row"
-                            // set specific class name to handle flex wrap using css
-                            className={
-                              isDarkMode ? 'tag-wrap-dark' : 'tag-wrap-light'
-                            }
-                            style={{
-                              marginLeft: token.marginXS,
-                              flexShrink: 1,
-                            }}
-                          >
-                            {requirementTags || '-'}
+                        ) : (
+                          <Flex direction="row" justify="between">
+                            <Flex direction="row">
+                              <TextHighlighter keyword={versionSearch}>
+                                {version}
+                              </TextHighlighter>
+                              <Divider type="vertical" />
+                              <TextHighlighter keyword={versionSearch}>
+                                {metadataTagAlias}
+                              </TextHighlighter>
+                              <Divider type="vertical" />
+                              <TextHighlighter keyword={versionSearch}>
+                                {image?.architecture}
+                              </TextHighlighter>
+                            </Flex>
+                            <Flex
+                              direction="row"
+                              // set specific class name to handle flex wrap using css
+                              className={
+                                isDarkMode ? 'tag-wrap-dark' : 'tag-wrap-light'
+                              }
+                              style={{
+                                marginLeft: token.marginXS,
+                                flexShrink: 1,
+                              }}
+                            >
+                              {requirementTags || '-'}
+                            </Flex>
                           </Flex>
-                        </Flex>
+                        )}
                       </Select.Option>
                     );
                   },

diff --git a/react/src/components/ImageList.tsx b/react/src/components/ImageList.tsx
@@ -339,6 +339,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
                 <ConstraintTags
                   tag={row?.tag}
                   labels={row?.labels as Array<{ key: string; value: string }>}
+                  highlightKeyword={imageSearch}
                 />
               ) : null,
           },

diff --git a/react/src/components/ResourceAllocationFormItems.test.ts b/react/src/components/ResourceAllocationFormItems.test.ts
@@ -46,6 +46,9 @@ describe('getAllocatablePresetNames', () => {
     registry: 'registry1',
     tag: 'tag1',
     resource_limits: [{ key: 'cuda.shares', min: '1', max: '1' }],
+    base_image_name: undefined,
+    tags: undefined,
+    version: undefined,
   };
 
   it('should return presets when currentImage has accelerator limits', () => {

diff --git a/react/src/hooks/useBackendAIImageMetaData.test.tsx b/react/src/hooks/useBackendAIImageMetaData.test.tsx
@@ -145,6 +145,9 @@ describe('useBackendAIImageMetaData', () => {
             value: 'NVIDIA CORPORATION <[email protected]>',
           },
         ],
+        base_image_name: undefined,
+        tags: undefined,
+        version: undefined,
       }) || '',
     );
     expect(key).toBe('training');