Skip to content

Commit

Permalink
refactor: Use filterEmptyItem for table columns to improve readabil…
Browse files Browse the repository at this point in the history 
…ity.
  • Loading branch information
@agatha197
agatha197 committed Nov 5, 2024
1 parent 53a8fe2 commit a7d80b1
Show file tree
Hide file tree
Showing 2 changed files with 305 additions and 310 deletions.
281 changes: 141 additions & 140 deletions react/src/components/CustomizedImageList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@ import {
LangTags,
} from '../components/ImageTags';
import TableColumnsSettingModal from '../components/TableColumnsSettingModal';
import { filterNonNullItems, getImageFullName, localeCompare } from '../helper';
import {
filterEmptyItem,
filterNonNullItems,
getImageFullName,
localeCompare,
} from '../helper';
import {
useBackendAIImageMetaData,
useSuspendedBackendaiClient,
Expand Down Expand Up @@ -208,7 +213,7 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
});
}, [imageSearch, imageFilterValues, defaultSortedImages]);

const columns: ColumnsType<CommittedImage> = [
const columns: ColumnsType<CommittedImage> = filterEmptyItem([
{
title: t('environment.FullImagePath'),
key: 'fullImagePath',
Expand Down Expand Up @@ -243,143 +248,139 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
<TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
),
},
...(supportExtendedImageInfo
? [
{
title: t('environment.Namespace'),
key: 'namespace',
dataIndex: 'namespace',
sorter: (a: CommittedImage, b: CommittedImage) =>
localeCompare(a?.namespace, b?.namespace),
render: (text: string) => (
<TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
),
},
{
title: t('environment.BaseImageName'),
key: 'base_image_name',
dataIndex: 'base_image_name',
sorter: (a: CommittedImage, b: CommittedImage) =>
localeCompare(a?.base_image_name, b?.base_image_name),
render: (text: string) => (
<TextHighlighter keyword={imageSearch}>
{tagAlias(text)}
</TextHighlighter>
),
},
{
title: t('environment.Version'),
key: 'version',
dataIndex: 'version',
sorter: (a: CommittedImage, b: CommittedImage) =>
localeCompare(a?.version, b?.version),
render: (text: string) => (
<TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
),
},
{
title: t('environment.Tags'),
key: 'tags',
dataIndex: 'tags',
render: (
text: Array<{ key: string; value: string }>,
row: CommittedImage,
) => (
<AliasedImageDoubleTags
imageFrgmt={row}
label={undefined}
highlightKeyword={imageSearch}
/>
),
},
]
: [
{
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>
),
},
{
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" />
),
},
{
title: t('environment.Version'),
key: 'baseversion',
dataIndex: 'baseversion',
sorter: (a: CommittedImage, b: CommittedImage) =>
localeCompare(
getBaseVersion(getImageFullName(a) || ''),
getBaseVersion(getImageFullName(b) || ''),
),
render: (text: string, row: CommittedImage) => (
<TextHighlighter keyword={imageSearch}>
{getBaseVersion(getImageFullName(row) || '')}
</TextHighlighter>
),
},
{
title: t('environment.Base'),
key: 'baseimage',
dataIndex: 'baseimage',
sorter: (a: CommittedImage, b: CommittedImage) =>
localeCompare(
getBaseImage(getImageFullName(a) || ''),
getBaseImage(getImageFullName(b) || ''),
),
render: (text: string, row: CommittedImage) => (
<BaseImageTags image={getImageFullName(row) || ''} />
),
},
{
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,
},
]),
supportExtendedImageInfo && {
title: t('environment.Namespace'),
key: 'namespace',
dataIndex: 'namespace',
sorter: (a: CommittedImage, b: CommittedImage) =>
localeCompare(a?.namespace, b?.namespace),
render: (text: string) => (
<TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
),
},
supportExtendedImageInfo && {
title: t('environment.BaseImageName'),
key: 'base_image_name',
dataIndex: 'base_image_name',
sorter: (a: CommittedImage, b: CommittedImage) =>
localeCompare(a?.base_image_name, b?.base_image_name),
render: (text: string) => (
<TextHighlighter keyword={imageSearch}>
{tagAlias(text)}
</TextHighlighter>
),
},
supportExtendedImageInfo && {
title: t('environment.Version'),
key: 'version',
dataIndex: 'version',
sorter: (a: CommittedImage, b: CommittedImage) =>
localeCompare(a?.version, b?.version),
render: (text: string) => (
<TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
),
},
supportExtendedImageInfo && {
title: t('environment.Tags'),
key: 'tags',
dataIndex: 'tags',
render: (
text: Array<{ key: string; value: string }>,
row: CommittedImage,
) => (
<AliasedImageDoubleTags
imageFrgmt={row}
label={undefined}
highlightKeyword={imageSearch}
/>
),
},

!supportExtendedImageInfo && {
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" />
),
},
!supportExtendedImageInfo && {
title: t('environment.Version'),
key: 'baseversion',
dataIndex: 'baseversion',
sorter: (a: CommittedImage, b: CommittedImage) =>
localeCompare(
getBaseVersion(getImageFullName(a) || ''),
getBaseVersion(getImageFullName(b) || ''),
),
render: (text: string, row: CommittedImage) => (
<TextHighlighter keyword={imageSearch}>
{getBaseVersion(getImageFullName(row) || '')}
</TextHighlighter>
),
},
!supportExtendedImageInfo && {
title: t('environment.Base'),
key: 'baseimage',
dataIndex: 'baseimage',
sorter: (a: CommittedImage, b: CommittedImage) =>
localeCompare(
getBaseImage(getImageFullName(a) || ''),
getBaseImage(getImageFullName(b) || ''),
),
render: (text: string, row: CommittedImage) => (
<BaseImageTags image={getImageFullName(row) || ''} />
),
},
!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.Digest'),
dataIndex: 'digest',
Expand Down Expand Up @@ -445,7 +446,7 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
</Flex>
),
},
];
]);

const [displayedColumnKeys, setDisplayedColumnKeys] = useLocalStorageState(
'backendaiwebui.CustomizedImageList.displayedColumnKeys',
Expand Down
Loading

0 comments on commit a7d80b1

Please sign in to comment.