Skip to content

Commit

Permalink
refactor: parsing image data in session launcher for before 24.12
Browse files Browse the repository at this point in the history
  • Loading branch information
@agatha197
agatha197 committed Nov 6, 2024
1 parent 775b8be commit 3f70242
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 56 deletions.
44 changes: 19 additions & 25 deletions react/src/components/ImageEnvironmentSelectFormItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -583,25 +585,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}
Expand Down Expand Up @@ -795,16 +783,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>
<Divider type="vertical" />
<ImageTags
tag={image?.tag || ''}
labels={
image?.labels as Array<{
key: string;
value: string;
}>
}
/>
</Flex>
<Flex
direction="row"
Expand Down
83 changes: 52 additions & 31 deletions react/src/pages/SessionLauncherPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -187,7 +187,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;
Expand Down Expand Up @@ -1376,7 +1377,13 @@ const SessionLauncherPage = () => {
},
)?.value
: tag.value;
return (
const aliasedTag = tagAlias(
tag.key + tagValue,
);
return _.isEqual(
aliasedTag,
tagValue,
) ? (
<DoubleTag
key={tag.key}
values={[
Expand All @@ -1394,6 +1401,15 @@ const SessionLauncherPage = () => {
},
]}
/>
) : (
<Tag
key={tag.key}
color={
isCustomized ? 'cyan' : 'blue'
}
>
{aliasedTag}
</Tag>
);
},
)}
Expand Down Expand Up @@ -1447,36 +1463,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
?.version,
)}
</Typography.Text>
<Divider type="vertical" />
<Typography.Text>
{
form.getFieldValue('environments')
?.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,
}}
/>
</>
)}
Expand Down

0 comments on commit 3f70242

Please sign in to comment.