diff --git a/react/src/components/ImageEnvironmentSelectFormItems.tsx b/react/src/components/ImageEnvironmentSelectFormItems.tsx index 235af0adc6..cfaaf1786e 100644 --- a/react/src/components/ImageEnvironmentSelectFormItems.tsx +++ b/react/src/components/ImageEnvironmentSelectFormItems.tsx @@ -9,6 +9,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, @@ -97,7 +98,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(); @@ -583,25 +585,11 @@ const ImageEnvironmentSelectFormItems: React.FC< paddingLeft: token.paddingSM, }} > - {supportExtendedImageInfo ? ( - <> - {t('session.launcher.Version')} - - {t('session.launcher.Architecture')} - - {t('session.launcher.Tags')} - - ) : ( - <> - {t('session.launcher.Version')} - - {t('session.launcher.Base')} - - {t('session.launcher.Architecture')} - - {t('session.launcher.Requirements')} - - )} + {t('session.launcher.Version')} + + {t('session.launcher.Architecture')} + + {t('session.launcher.Tags')} {menu} @@ -795,16 +783,22 @@ const ImageEnvironmentSelectFormItems: React.FC< - {version} - - - - {metadataTagAlias} + {getBaseVersion(getImageFullName(image) || '')} {image?.architecture} + + + } + /> { const currentUserRole = useCurrentUserRole(); const [currentGlobalResourceGroup, setCurrentGlobalResourceGroup] = useCurrentResourceGroupState(); - const [, { tagAlias }] = useBackendAIImageMetaData(); + const [, { getBaseVersion, getBaseImage, tagAlias }] = + useBackendAIImageMetaData(); const supportExtendedImageInfo = baiClient?.supports('extended-image-info') ?? false; @@ -1376,7 +1377,13 @@ const SessionLauncherPage = () => { }, )?.value : tag.value; - return ( + const aliasedTag = tagAlias( + tag.key + tagValue, + ); + return _.isEqual( + aliasedTag, + tagValue, + ) ? ( { }, ]} /> + ) : ( + + {aliasedTag} + ); }, )} @@ -1447,36 +1463,41 @@ const SessionLauncherPage = () => { ) : ( <> - + {tagAlias( + getBaseImage( + form.getFieldValue('environments') + ?.version, + ), + )} + + + + {getBaseVersion( form.getFieldValue('environments') - ?.version + ?.version, + )} + + + + { + form.getFieldValue('environments') + ?.image?.architecture + } + + + } - /> - {form.getFieldValue('environments') - ?.customizedTag ? ( - - ) : null} - )}