refactor: parsing image data before 24.12

lablup · Nov 6, 2024 · 9500252 · 9500252
1 parent f758c59
commit 9500252
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 164 deletions.
diff --git a/react/src/components/CustomizedImageList.tsx b/react/src/components/CustomizedImageList.tsx
@@ -1,9 +1,4 @@
 import Flex from '../components/Flex';
-import {
-  BaseImageTags,
-  ConstraintTags,
-  LangTags,
-} from '../components/ImageTags';
 import TableColumnsSettingModal from '../components/TableColumnsSettingModal';
 import {
   filterEmptyItem,
@@ -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 {
@@ -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`
@@ -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,
@@ -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(
@@ -200,8 +181,7 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
         return (
           baseVersionMatch ||
           baseImagesMatch ||
-          constraintsMatch ||
-          langMatch ||
+          tagMatch ||
           namespaceMatch ||
           customizedMatch ||
           fullNameMatch ||
@@ -281,7 +261,7 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
       title: t('environment.Tags'),
       key: 'tags',
       dataIndex: 'tags',
-      render: (text, row) => (
+      render: (text: Array<{ key: string; value: string }>, row) => (
         <AliasedImageDoubleTags
           imageFrgmt={row}
           label={undefined}
@@ -294,25 +274,9 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
       title: t('environment.Namespace'),
       key: 'name',
       dataIndex: 'name',
-      sorter: (a, b) => {
-        const namespaceA = getNamespace(getImageFullName(a) || '');
-        const namespaceB = getNamespace(getImageFullName(b) || '');
-        return localeCompare(namespaceA, namespaceB);
-      },
-      render: (text, row) => (
-        <span>{getNamespace(getImageFullName(row) || '')}</span>
-      ),
-    },
-    !supportExtendedImageInfo && {
-      title: t('environment.Language'),
-      key: 'lang',
-      sorter: (a, b) =>
-        localeCompare(
-          getImageLang(getImageFullName(a) || ''),
-          getImageLang(getImageFullName(b) || ''),
-        ),
-      render: (text, row) => (
-        <LangTags image={getImageFullName(row) || ''} color="green" />
+      sorter: (a, b) => localeCompare(getImageFullName(a), getImageFullName(b)),
+      render: (text) => (
+        <TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
       ),
     },
     !supportExtendedImageInfo && {
@@ -340,38 +304,23 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
           getBaseImage(getImageFullName(b) || ''),
         ),
       render: (text, row) => (
-        <BaseImageTags image={getImageFullName(row) || ''} />
+        <TextHighlighter keyword={imageSearch}>
+          {tagAlias(getBaseImage(getImageFullName(row) || ''))}
+        </TextHighlighter>
       ),
     },
     !supportExtendedImageInfo && {
-      title: t('environment.Constraint'),
-      key: 'constraint',
-      dataIndex: 'constraint',
-      sorter: (a, b) => {
-        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, row) =>
-        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'),

diff --git a/react/src/components/ImageList.tsx b/react/src/components/ImageList.tsx
@@ -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';
@@ -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] =
@@ -194,7 +184,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
       key: 'base_image_name',
       dataIndex: 'base_image_name',
       sorter: (a, b) => localeCompare(a?.base_image_name, b?.base_image_name),
-      render: (text, row) => (
+      render: (text) => (
         <TextHighlighter keyword={imageSearch}>
           {tagAlias(text)}
         </TextHighlighter>
@@ -213,7 +203,10 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
       title: t('environment.Tags'),
       key: 'tags',
       dataIndex: 'tags',
-      render: (text: Array<{ key: string; value: string }>, row) => {
+      render: (
+        text: Array<{ key: string; value: string }>,
+        row: EnvironmentImage,
+      ) => {
         return (
           <Flex direction="row" align="start">
             {/* TODO: replace this with AliasedImageDoubleTags after image list query with ImageNode is implemented. */}
@@ -257,20 +250,23 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
       key: 'name',
       dataIndex: 'name',
       sorter: (a, b) => localeCompare(getImageFullName(a), getImageFullName(b)),
-      render: (text, row) => (
-        <TextHighlighter keyword={imageSearch}>
-          {getNamespace(getImageFullName(row) || '')}
-        </TextHighlighter>
+      render: (text) => (
+        <TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
       ),
     },
     !supportExtendedImageInfo && {
-      title: t('environment.Language'),
-      key: 'lang',
-      dataIndex: 'lang',
+      title: t('environment.Base'),
+      key: 'baseimage',
+      dataIndex: 'baseimage',
       sorter: (a, b) =>
-        localeCompare(getLang(a.name ?? ''), getLang(b.name ?? '')),
+        localeCompare(
+          getBaseImage(getImageFullName(a) || ''),
+          getBaseImage(getImageFullName(b) || ''),
+        ),
       render: (text, row) => (
-        <LangTags image={getImageFullName(row) || ''} color="green" />
+        <TextHighlighter keyword={imageSearch}>
+          {tagAlias(getBaseImage(getImageFullName(row) || ''))}
+        </TextHighlighter>
       ),
     },
     !supportExtendedImageInfo && {
@@ -289,48 +285,18 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
       ),
     },
     !supportExtendedImageInfo && {
-      title: t('environment.Base'),
-      key: 'baseimage',
-      dataIndex: 'baseimage',
-      sorter: (a, b) =>
-        localeCompare(
-          getBaseImage(getImageFullName(a) || ''),
-          getBaseImage(getImageFullName(b) || ''),
-        ),
+      title: t('environment.Tags'),
+      key: 'tag',
+      dataIndex: 'tag',
+      sorter: (a, b) => localeCompare(a?.tag, b?.tag),
       render: (text, row) => (
-        <BaseImageTags image={getImageFullName(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, b) => {
-        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, row) =>
-        row?.tag ? (
-          <ConstraintTags
-            tag={row?.tag}
-            labels={row?.labels as Array<{ key: string; value: string }>}
-            highlightKeyword={imageSearch}
-          />
-        ) : null,
-    },
     {
       title: t('environment.Digest'),
       dataIndex: 'digest',
@@ -417,17 +383,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,
@@ -455,14 +418,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(
@@ -475,8 +437,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
         return (
           baseVersionMatch ||
           baseImagesMatch ||
-          constraintsMatch ||
-          langMatch ||
+          tagMatch ||
           namespaceMatch ||
           customizedMatch ||
           fullNameMatch ||