Skip to content

Commit

Permalink
refactor: parsing image data before 24.12
Browse files Browse the repository at this point in the history
  • Loading branch information
@agatha197
agatha197 committed Nov 5, 2024
1 parent a7d80b1 commit 0af5704
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 174 deletions.
119 changes: 33 additions & 86 deletions react/src/components/CustomizedImageList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import Flex from '../components/Flex';
import {
BaseImageTags,
ConstraintTags,
LangTags,
} from '../components/ImageTags';
import TableColumnsSettingModal from '../components/TableColumnsSettingModal';
import {
filterEmptyItem,
Expand All @@ -17,6 +12,7 @@ import {
useUpdatableState,
} from '../hooks';
import AliasedImageDoubleTags from './AliasedImageDoubleTags';
import { ImageTags } from './ImageTags';
import TextHighlighter from './TextHighlighter';
import { CustomizedImageListForgetAndUntagMutation } from './__generated__/CustomizedImageListForgetAndUntagMutation.graphql';
import {
Expand Down Expand Up @@ -63,19 +59,8 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
const [inFlightImageId, setInFlightImageId] = useState<string>();
const [imageSearch, setImageSearch] = useState('');
const [isPendingSearchTransition, startSearchTransition] = useTransition();
const [
,
{
getNamespace,
getImageLang,
getBaseVersion,
getBaseImage,
getConstraints,
tagAlias,
getLang,
getBaseImages,
},
] = useBackendAIImageMetaData();
const [, { getBaseVersion, getBaseImages, getBaseImage, tagAlias, getTags }] =
useBackendAIImageMetaData();

const { customized_images } = useLazyLoadQuery<CustomizedImageListQuery>(
graphql`
Expand Down Expand Up @@ -142,17 +127,14 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
fullName: getImageFullName(image) || '',
digest: image?.digest || '',
// ------------ need only before 24.12.0 ------------
lang: image?.name ? getLang(image.name) : '',
baseversion: getBaseVersion(getImageFullName(image) || ''),
baseimage:
image?.tag && image?.name ? getBaseImages(image.tag, image.name) : [],
constraints:
image?.tag && image?.labels
? getConstraints(
image.tag,
image.labels as { key: string; value: string }[],
)
: [],
tag:
getTags(
image?.tag || '',
image?.labels as Array<{ key: string; value: string }>,
) || [],
isCustomized: image?.tag
? image.tag.indexOf('customized') !== -1
: false,
Expand Down Expand Up @@ -180,14 +162,13 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
const baseImagesMatch = _.some(curFilterValues.baseimage, (value) =>
regExp.test(value),
);
const constraintsMatch = _.some(
curFilterValues.constraints,
(constraint) => regExp.test(constraint),
const tagMatch = _.some(
curFilterValues.tag,
(tag) => regExp.test(tag.key) || regExp.test(tag.value),
);
const customizedMatch = curFilterValues.isCustomized
? regExp.test('customized')
: false;
const langMatch = regExp.test(curFilterValues.lang);
const namespaceMatch = regExp.test(curFilterValues.namespace || '');
const fullNameMatch = regExp.test(curFilterValues.fullName);
const tagsMatch = _.some(
Expand All @@ -200,8 +181,7 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
return (
baseVersionMatch ||
baseImagesMatch ||
constraintsMatch ||
langMatch ||
tagMatch ||
namespaceMatch ||
customizedMatch ||
fullNameMatch ||
Expand Down Expand Up @@ -300,39 +280,21 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
title: t('environment.Namespace'),
key: 'name',
dataIndex: 'name',
sorter: (a: CommittedImage, b: CommittedImage) => {
const namespaceA = getNamespace(getImageFullName(a) || '');
const namespaceB = getNamespace(getImageFullName(b) || '');
return namespaceA && namespaceB
? namespaceA.localeCompare(namespaceB)
: 0;
},
render: (text: string, row: CommittedImage) => (
<span>{getNamespace(getImageFullName(row) || '')}</span>
),
},
!supportExtendedImageInfo && {
title: t('environment.Language'),
key: 'lang',
sorter: (a: CommittedImage, b: CommittedImage) =>
localeCompare(
getImageLang(getImageFullName(a) || ''),
getImageLang(getImageFullName(b) || ''),
),
render: (text: string, row: CommittedImage) => (
<LangTags image={getImageFullName(row) || ''} color="green" />
sorter: (a, b) => localeCompare(getImageFullName(a), getImageFullName(b)),
render: (text: string) => (
<TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
),
},
!supportExtendedImageInfo && {
title: t('environment.Version'),
key: 'baseversion',
dataIndex: 'baseversion',
sorter: (a: CommittedImage, b: CommittedImage) =>
sorter: (a, b) =>
localeCompare(
getBaseVersion(getImageFullName(a) || ''),
getBaseVersion(getImageFullName(b) || ''),
),
render: (text: string, row: CommittedImage) => (
render: (text, row) => (
<TextHighlighter keyword={imageSearch}>
{getBaseVersion(getImageFullName(row) || '')}
</TextHighlighter>
Expand All @@ -342,44 +304,29 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
title: t('environment.Base'),
key: 'baseimage',
dataIndex: 'baseimage',
sorter: (a: CommittedImage, b: CommittedImage) =>
sorter: (a, b) =>
localeCompare(
getBaseImage(getImageFullName(a) || ''),
getBaseImage(getImageFullName(b) || ''),
),
render: (text: string, row: CommittedImage) => (
<BaseImageTags image={getImageFullName(row) || ''} />
render: (text, row) => (
<TextHighlighter keyword={imageSearch}>
{tagAlias(getBaseImage(getImageFullName(row) || ''))}
</TextHighlighter>
),
},
!supportExtendedImageInfo && {
title: t('environment.Constraint'),
key: 'constraint',
dataIndex: 'constraint',
sorter: (a: CommittedImage, b: CommittedImage) => {
const requirementA =
a?.tag && b?.labels
? getConstraints(
a?.tag,
a?.labels as { key: string; value: string }[],
)[0] || ''
: '';
const requirementB =
b?.tag && b?.labels
? getConstraints(
b?.tag,
b?.labels as { key: string; value: string }[],
)[0] || ''
: '';
return localeCompare(requirementA, requirementB);
},
render: (text: string, row: CommittedImage) =>
row?.tag ? (
<ConstraintTags
tag={row?.tag}
labels={row?.labels as Array<{ key: string; value: string }>}
highlightKeyword={imageSearch}
/>
) : null,
title: t('environment.Tags'),
key: 'tag',
dataIndex: 'tag',
sorter: (a, b) => localeCompare(a?.tag, b?.tag),
render: (text, row) => (
<ImageTags
tag={text}
labels={row?.labels as Array<{ key: string; value: string }>}
highlightKeyword={imageSearch}
/>
),
},
{
title: t('environment.Digest'),
Expand Down
121 changes: 39 additions & 82 deletions react/src/components/ImageList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
} from '../hooks';
import DoubleTag from './DoubleTag';
import ImageInstallModal from './ImageInstallModal';
import { BaseImageTags, ConstraintTags, LangTags } from './ImageTags';
import { ImageTags } from './ImageTags';
import ManageAppsModal from './ManageAppsModal';
import ManageImageResourceLimitModal from './ManageImageResourceLimitModal';
import ResourceNumber from './ResourceNumber';
Expand Down Expand Up @@ -45,18 +45,8 @@ export type EnvironmentImage = NonNullable<
const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
const { t } = useTranslation();
const [selectedRows, setSelectedRows] = useState<EnvironmentImage[]>([]);
const [
,
{
getNamespace,
getBaseVersion,
getLang,
getBaseImages,
getConstraints,
getBaseImage,
tagAlias,
},
] = useBackendAIImageMetaData();
const [, { getBaseVersion, getBaseImages, getBaseImage, tagAlias, getTags }] =
useBackendAIImageMetaData();
const { token } = theme.useToken();
const [managingApp, setManagingApp] = useState<EnvironmentImage | null>(null);
const [managingResourceLimit, setManagingResourceLimit] =
Expand Down Expand Up @@ -262,82 +252,54 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
title: t('environment.Namespace'),
key: 'name',
dataIndex: 'name',
sorter: (a: EnvironmentImage, b: EnvironmentImage) =>
localeCompare(getImageFullName(a), getImageFullName(b)),
render: (text: string, row: EnvironmentImage) => (
<TextHighlighter keyword={imageSearch}>
{getNamespace(getImageFullName(row) || '')}
</TextHighlighter>
sorter: (a, b) => localeCompare(getImageFullName(a), getImageFullName(b)),
render: (text) => (
<TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
),
},
!supportExtendedImageInfo && {
title: t('environment.Language'),
key: 'lang',
dataIndex: 'lang',
sorter: (a: EnvironmentImage, b: EnvironmentImage) =>
localeCompare(getLang(a.name ?? ''), getLang(b.name ?? '')),
render: (text: string, row: EnvironmentImage) => (
<LangTags image={getImageFullName(row) || ''} color="green" />
title: t('environment.Base'),
key: 'baseimage',
dataIndex: 'baseimage',
sorter: (a, b) =>
localeCompare(
getBaseImage(getImageFullName(a) || ''),
getBaseImage(getImageFullName(b) || ''),
),
render: (text, row) => (
<TextHighlighter keyword={imageSearch}>
{tagAlias(getBaseImage(getImageFullName(row) || ''))}
</TextHighlighter>
),
},
!supportExtendedImageInfo && {
title: t('environment.Version'),
key: 'baseversion',
dataIndex: 'baseversion',
sorter: (a: EnvironmentImage, b: EnvironmentImage) =>
sorter: (a, b) =>
localeCompare(
getBaseVersion(getImageFullName(a) || ''),
getBaseVersion(getImageFullName(b) || ''),
),
render: (text: string, row: EnvironmentImage) => (
render: (text, row) => (
<TextHighlighter keyword={imageSearch}>
{getBaseVersion(getImageFullName(row) || '')}
</TextHighlighter>
),
},
!supportExtendedImageInfo && {
title: t('environment.Base'),
key: 'baseimage',
dataIndex: 'baseimage',
sorter: (a: EnvironmentImage, b: EnvironmentImage) =>
localeCompare(
getBaseImage(getImageFullName(a) || ''),
getBaseImage(getImageFullName(b) || ''),
),
render: (text: string, row: EnvironmentImage) => (
<BaseImageTags image={getImageFullName(row) || ''} />
title: t('environment.Tags'),
key: 'tag',
dataIndex: 'tag',
sorter: (a, b) => localeCompare(a?.tag, b?.tag),
render: (text, row) => (
<ImageTags
tag={text}
labels={row.labels as Array<{ key: string; value: string }>}
highlightKeyword={imageSearch}
/>
),
},
!supportExtendedImageInfo && {
title: t('environment.Constraint'),
key: 'constraint',
dataIndex: 'constraint',
sorter: (a: EnvironmentImage, b: EnvironmentImage) => {
const requirementA =
a?.tag && b?.labels
? getConstraints(
a?.tag,
a?.labels as { key: string; value: string }[],
)[0] || ''
: '';
const requirementB =
b?.tag && b?.labels
? getConstraints(
b?.tag,
b?.labels as { key: string; value: string }[],
)[0] || ''
: '';
return localeCompare(requirementA, requirementB);
},
render: (text: string, row: EnvironmentImage) =>
row?.tag ? (
<ConstraintTags
tag={row?.tag}
labels={row?.labels as Array<{ key: string; value: string }>}
highlightKeyword={imageSearch}
/>
) : null,
},
{
title: t('environment.Digest'),
dataIndex: 'digest',
Expand Down Expand Up @@ -424,17 +386,14 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
fullName: getImageFullName(image) || '',
digest: image?.digest || '',
// ------------ need only before 24.12.0 ------------
lang: image?.name ? getLang(image.name) : '',
baseversion: getBaseVersion(getImageFullName(image) || ''),
baseimage:
image?.tag && image?.name ? getBaseImages(image.tag, image.name) : [],
constraints:
image?.tag && image?.labels
? getConstraints(
image.tag,
image.labels as { key: string; value: string }[],
)
: [],
tag:
getTags(
image?.tag || '',
image?.labels as Array<{ key: string; value: string }>,
) || [],
isCustomized: image?.tag
? image.tag.indexOf('customized') !== -1
: false,
Expand Down Expand Up @@ -462,14 +421,13 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
const baseImagesMatch = _.some(curFilterValues.baseimage, (value) =>
regExp.test(value),
);
const constraintsMatch = _.some(
curFilterValues.constraints,
(constraint) => regExp.test(constraint),
const tagMatch = _.some(
curFilterValues.tag,
(tag) => regExp.test(tag.key) || regExp.test(tag.value),
);
const customizedMatch = curFilterValues.isCustomized
? regExp.test('customized')
: false;
const langMatch = regExp.test(curFilterValues.lang);
const namespaceMatch = regExp.test(curFilterValues.namespace || '');
const fullNameMatch = regExp.test(curFilterValues.fullName);
const tagsMatch = _.some(
Expand All @@ -482,8 +440,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
return (
baseVersionMatch ||
baseImagesMatch ||
constraintsMatch ||
langMatch ||
tagMatch ||
namespaceMatch ||
customizedMatch ||
fullNameMatch ||
Expand Down
Loading

0 comments on commit 0af5704

Please sign in to comment.