Skip to content

Commit

Permalink
refactor: session launcher image parsing
Browse files Browse the repository at this point in the history
  • Loading branch information
@agatha197
agatha197 committed Nov 1, 2024
1 parent fcd06dc commit 720c2c0
Show file tree
Hide file tree
Showing 27 changed files with 311 additions and 107 deletions.
1 change: 0 additions & 1 deletion react/src/components/CustomizedImageList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Flex from '../components/Flex';
import {
BaseImageTags,
BaseVersionTags,
ConstraintTags,
LangTags,
} from '../components/ImageTags';
Expand Down
2 changes: 1 addition & 1 deletion react/src/components/EnvVarFormList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: '' };
}
Expand Down
147 changes: 113 additions & 34 deletions react/src/components/ImageEnvironmentSelectFormItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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.")
}
}
`,
Expand Down Expand Up @@ -498,7 +504,7 @@ const ImageEnvironmentSelectFormItems: React.FC<
}}
/>
<TextHighlighter keyword={environmentSearch}>
{environmentGroup.displayName}
{tagAlias(environmentGroup.displayName)}
</TextHighlighter>
</Flex>
<Flex
Expand Down Expand Up @@ -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}
Expand All @@ -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;
}
}

Expand Down Expand Up @@ -695,39 +716,97 @@ 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">
{_.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>
);
},
Expand Down
3 changes: 3 additions & 0 deletions react/src/components/ResourceAllocationFormItems.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
3 changes: 3 additions & 0 deletions react/src/hooks/useBackendAIImageMetaData.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,9 @@ describe('useBackendAIImageMetaData', () => {
value: 'NVIDIA CORPORATION <[email protected]>',
},
],
base_image_name: undefined,
tags: undefined,
version: undefined,
}) || '',
);
expect(key).toBe('training');
Expand Down
Loading

0 comments on commit 720c2c0

Please sign in to comment.