Skip to content

Commit

Permalink
refactor: parsing image data in session launcher for before 24.12 (#2818
Browse files Browse the repository at this point in the history 
)

**Changes:**
Refactored image handling similar to #2800 for versions before 24.12. Before 24.12, most data parsing is handled on the frontend.

- Unified the display format of image information across components
- Added base version and image tags display
- Replaced custom tag display with standardized ImageTags component
- Removed conditional rendering based on extended image info support

**Rationale:**
The changes provide a more uniform and informative way to display image metadata, making it easier for users to understand the characteristics of selected container images.

**What to check:**
Data parsing is the same as 24.12.

**Effects:**
Users will see:
- Consistent image information display format
- Clearer representation of image base versions
- Standardized tag display across the interface
- More detailed image metadata including architecture and labels

**Screenshots:**

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/0a6100fd-d894-40d3-85d9-fe52961df2cf.png)

**Checklist:**
- [ ] Documentation
- [ ] Test cases to verify image information display
- [ ] Verify tag display functionality across different image types
  • Loading branch information
@agatha197
agatha197 committed Nov 12, 2024
1 parent 4543a32 commit 5e898eb
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 69 deletions.
58 changes: 20 additions & 38 deletions react/src/components/ImageEnvironmentSelectFormItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -798,29 +786,23 @@ 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 || ''}
highlightKeyword={versionSearch}
labels={
image?.labels as Array<{
key: string;
value: string;
}>
}
/>
</Flex>
</Flex>
)}
Expand Down
86 changes: 55 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 @@ -41,6 +41,7 @@ import {
generateRandomString,
getImageFullName,
iSizeToSize,
preserveDotStartCase,
} from '../helper';
import {
useBackendAIImageMetaData,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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={[
Expand All @@ -1410,6 +1420,15 @@ const SessionLauncherPage = () => {
},
]}
/>
) : (
<Tag
key={tag.key}
color={
isCustomized ? 'cyan' : 'blue'
}
>
{aliasedTag}
</Tag>
);
},
)}
Expand Down Expand Up @@ -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,
}}
/>
</>
)}
Expand Down

0 comments on commit 5e898eb

Please sign in to comment.