From 01d198016d2f379d31f4457a5efe62c0c9eea8a8 Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Tue, 5 Nov 2024 23:26:58 +0900
Subject: [PATCH] refactor: parsing image data in session launcher for before
 24.12

---
 .../ImageEnvironmentSelectFormItems.tsx       | 57 ++++--------
 react/src/pages/SessionLauncherPage.tsx       | 86 ++++++++++++-------
 2 files changed, 74 insertions(+), 69 deletions(-)

diff --git a/react/src/components/ImageEnvironmentSelectFormItems.tsx b/react/src/components/ImageEnvironmentSelectFormItems.tsx
index 91e5b320a..f88114e07 100644
--- a/react/src/components/ImageEnvironmentSelectFormItems.tsx
+++ b/react/src/components/ImageEnvironmentSelectFormItems.tsx
@@ -10,6 +10,7 @@ import Flex from './Flex';
 // @ts-ignore
 import cssRaw from './ImageEnvironmentSelectFormItems.css?raw';
 import ImageMetaIcon from './ImageMetaIcon';
+import { ImageTags } from './ImageTags';
 import TextHighlighter from './TextHighlighter';
 import {
   ImageEnvironmentSelectFormItemsQuery,
@@ -98,7 +99,8 @@ const ImageEnvironmentSelectFormItems: React.FC<
   const [environmentSearch, setEnvironmentSearch] = useState('');
   const [versionSearch, setVersionSearch] = useState('');
   const { t } = useTranslation();
-  const [metadata, { getImageMeta, tagAlias }] = useBackendAIImageMetaData();
+  const [metadata, { getBaseVersion, getImageMeta, tagAlias }] =
+    useBackendAIImageMetaData();
   const { token } = theme.useToken();
   const { isDarkMode } = useThemeMode();
 
@@ -584,25 +586,11 @@ const ImageEnvironmentSelectFormItems: React.FC<
                         paddingLeft: token.paddingSM,
                       }}
                     >
-                      {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')}
-                        </>
-                      )}
+                      {t('session.launcher.Version')}
+                      <Divider type="vertical" />
+                      {t('session.launcher.Architecture')}
+                      <Divider type="vertical" />
+                      {t('session.launcher.Tags')}
                     </Flex>
                     <Divider style={{ margin: '8px 0' }} />
                     {menu}
@@ -796,29 +784,22 @@ const ImageEnvironmentSelectFormItems: React.FC<
                           <Flex direction="row" justify="between">
                             <Flex direction="row">
                               <TextHighlighter keyword={versionSearch}>
-                                {version}
-                              </TextHighlighter>
-                              <Divider type="vertical" />
-                              <TextHighlighter keyword={versionSearch}>
-                                {metadataTagAlias}
+                                {getBaseVersion(getImageFullName(image) || '')}
                               </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 || '-'}
+                              <Divider type="vertical" />
+                              <ImageTags
+                                tag={image?.tag || ''}
+                                labels={
+                                  image?.labels as Array<{
+                                    key: string;
+                                    value: string;
+                                  }>
+                                }
+                              />
                             </Flex>
                           </Flex>
                         )}
diff --git a/react/src/pages/SessionLauncherPage.tsx b/react/src/pages/SessionLauncherPage.tsx
index f2b465859..dccfa01c8 100644
--- a/react/src/pages/SessionLauncherPage.tsx
+++ b/react/src/pages/SessionLauncherPage.tsx
@@ -11,7 +11,7 @@ import ImageEnvironmentSelectFormItems, {
   ImageEnvironmentFormInput,
 } from '../components/ImageEnvironmentSelectFormItems';
 import ImageMetaIcon from '../components/ImageMetaIcon';
-import SessionKernelTags from '../components/ImageTags';
+import { ImageTags } from '../components/ImageTags';
 import { mainContentDivRefState } from '../components/MainLayout/MainLayout';
 import PortSelectFormItem, {
   PortSelectFormValues,
@@ -41,6 +41,7 @@ import {
   generateRandomString,
   getImageFullName,
   iSizeToSize,
+  preserveDotStartCase,
 } from '../helper';
 import {
   useBackendAIImageMetaData,
@@ -188,7 +189,8 @@ const SessionLauncherPage = () => {
   const currentUserRole = useCurrentUserRole();
   const [currentGlobalResourceGroup, setCurrentGlobalResourceGroup] =
     useCurrentResourceGroupState();
-  const [, { tagAlias }] = useBackendAIImageMetaData();
+  const [, { getBaseVersion, getBaseImage, tagAlias }] =
+    useBackendAIImageMetaData();
 
   const supportExtendedImageInfo =
     baiClient?.supports('extended-image-info') ?? false;
@@ -1392,7 +1394,15 @@ const SessionLauncherPage = () => {
                                                 },
                                               )?.value
                                             : tag.value;
-                                          return (
+                                          const aliasedTag = tagAlias(
+                                            tag.key + tagValue,
+                                          );
+                                          return _.isEqual(
+                                            aliasedTag,
+                                            preserveDotStartCase(
+                                              tag.key + tagValue,
+                                            ),
+                                          ) ? (
                                             <DoubleTag
                                               key={tag.key}
                                               values={[
@@ -1410,6 +1420,15 @@ const SessionLauncherPage = () => {
                                                 },
                                               ]}
                                             />
+                                          ) : (
+                                            <Tag
+                                              key={tag.key}
+                                              color={
+                                                isCustomized ? 'cyan' : 'blue'
+                                              }
+                                            >
+                                              {aliasedTag}
+                                            </Tag>
                                           );
                                         },
                                       )}
@@ -1463,36 +1482,41 @@ const SessionLauncherPage = () => {
                                     </Typography.Text>
                                   ) : (
                                     <>
-                                      <SessionKernelTags
-                                        image={
+                                      <Typography.Text>
+                                        {tagAlias(
+                                          getBaseImage(
+                                            form.getFieldValue('environments')
+                                              ?.version,
+                                          ),
+                                        )}
+                                      </Typography.Text>
+                                      <Divider type="vertical" />
+                                      <Typography.Text>
+                                        {getBaseVersion(
+                                          form.getFieldValue('environments')
+                                            ?.version,
+                                        )}
+                                      </Typography.Text>
+                                      <Divider type="vertical" />
+                                      <Typography.Text>
+                                        {
                                           form.getFieldValue('environments')
-                                            ?.version
+                                            ?.image?.architecture
+                                        }
+                                      </Typography.Text>
+                                      <Divider type="vertical" />
+                                      <ImageTags
+                                        tag={
+                                          form.getFieldValue('environments')
+                                            ?.image?.tag
+                                        }
+                                        labels={
+                                          form.getFieldValue('environments')
+                                            ?.image?.labels as Array<{
+                                            key: string;
+                                            value: string;
+                                          }>
                                         }
-                                      />
-                                      {form.getFieldValue('environments')
-                                        ?.customizedTag ? (
-                                        <DoubleTag
-                                          values={[
-                                            {
-                                              label: 'Customized',
-                                              color: 'cyan',
-                                            },
-                                            {
-                                              label:
-                                                form.getFieldValue(
-                                                  'environments',
-                                                )?.customizedTag,
-                                              color: 'cyan',
-                                            },
-                                          ]}
-                                        />
-                                      ) : null}
-                                      <Typography.Text
-                                        copyable={{
-                                          text: form.getFieldValue(
-                                            'environments',
-                                          )?.version,
-                                        }}
                                       />
                                     </>
                                   )}