From 13757c903e2be49f0790230b35b82d4d65557d5f Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Thu, 31 Oct 2024 12:48:03 +0900
Subject: [PATCH] feat: add `AliasedImageDoubleTags`

---
 .../src/components/AliasedImageDoubleTags.tsx | 77 +++++++++++++++++++
 react/src/components/ImageList.tsx            | 50 +++++++++++-
 2 files changed, 123 insertions(+), 4 deletions(-)
 create mode 100644 react/src/components/AliasedImageDoubleTags.tsx

diff --git a/react/src/components/AliasedImageDoubleTags.tsx b/react/src/components/AliasedImageDoubleTags.tsx
new file mode 100644
index 0000000000..c4076d4fec
--- /dev/null
+++ b/react/src/components/AliasedImageDoubleTags.tsx
@@ -0,0 +1,77 @@
+import { useBackendAIImageMetaData } from '../hooks';
+import DoubleTag, { DoubleTagObjectValue } from './DoubleTag';
+import Flex from './Flex';
+import TextHighlighter from './TextHighlighter';
+import { AliasedImageDoubleTagsFragment$key } from './__generated__/AliasedImageDoubleTagsFragment.graphql';
+import graphql from 'babel-plugin-relay/macro';
+import _ from 'lodash';
+import React from 'react';
+import { useFragment } from 'react-relay';
+
+interface AliasedImageDoubleTagsProps extends DoubleTagObjectValue {
+  imageFrgmt?: AliasedImageDoubleTagsFragment$key | null;
+  highlightKeyword?: string;
+}
+
+const AliasedImageDoubleTags: React.FC<AliasedImageDoubleTagsProps> = ({
+  imageFrgmt,
+  highlightKeyword,
+  ...doubleTagProps
+}) => {
+  const images = useFragment(
+    graphql`
+      fragment AliasedImageDoubleTagsFragment on ImageNode {
+        labels {
+          key
+          value
+        }
+        tags @since(version: "24.09.1.") {
+          key
+          value
+        }
+      }
+    `,
+    imageFrgmt,
+  );
+  const [, { tagAlias }] = useBackendAIImageMetaData();
+
+  return (
+    <Flex direction="row" align="start" gap={'xxs'}>
+      {_.map(images?.tags, (tag: { key: string; value: string }) => {
+        const isCustomized = _.includes(tag.key, 'customized_');
+        // If the tag is customized, we need to find the corresponding label instead of using the tag value (hash).
+        const tagValue = isCustomized
+          ? _.find(images?.labels, {
+              key: 'ai.backend.customized-image.name',
+            })?.value
+          : tag.value;
+        return (
+          <DoubleTag
+            key={tag.key}
+            values={[
+              {
+                label: (
+                  <TextHighlighter keyword={highlightKeyword} key={tag.key}>
+                    {tagAlias(tag.key)}
+                  </TextHighlighter>
+                ),
+                color: isCustomized ? 'cyan' : doubleTagProps.color,
+              },
+              {
+                label: (
+                  <TextHighlighter keyword={highlightKeyword} key={tagValue}>
+                    {tagValue}
+                  </TextHighlighter>
+                ),
+                color: isCustomized ? 'cyan' : doubleTagProps.color,
+              },
+            ]}
+            {...doubleTagProps}
+          />
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default AliasedImageDoubleTags;
diff --git a/react/src/components/ImageList.tsx b/react/src/components/ImageList.tsx
index 08364b2ede..336590578a 100644
--- a/react/src/components/ImageList.tsx
+++ b/react/src/components/ImageList.tsx
@@ -223,12 +223,54 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             title: t('environment.Tags'),
             key: 'tags',
             dataIndex: 'tags',
-            render: (text: Array<{ key: string; value: string }>) => {
+            render: (
+              text: Array<{ key: string; value: string }>,
+              row: EnvironmentImage,
+            ) => {
               return (
+                // <AliasedImageDoubleTags
+                //   imageFrgmt={row}
+                //   label={undefined}
+                //   highlightKeyword={imageSearch}
+                // />
                 <Flex direction="row" align="start">
-                  {_.map(text, (tag) => (
-                    <DoubleTag values={[tag.key, tag.value]} />
-                  ))}
+                  {_.map(text, (tag: { key: string; value: string }) => {
+                    const isCustomized = _.includes(tag.key, 'customized_');
+                    const tagValue = isCustomized
+                      ? _.find(row?.labels, {
+                          key: 'ai.backend.customized-image.name',
+                        })?.value
+                      : tag.value;
+                    return (
+                      <DoubleTag
+                        key={tag.key}
+                        values={[
+                          {
+                            label: (
+                              <TextHighlighter
+                                keyword={imageSearch}
+                                key={tag.key}
+                              >
+                                {tagAlias(tag.key)}
+                              </TextHighlighter>
+                            ),
+                            color: isCustomized ? 'cyan' : 'blue',
+                          },
+                          {
+                            label: (
+                              <TextHighlighter
+                                keyword={imageSearch}
+                                key={tagValue}
+                              >
+                                {tagValue}
+                              </TextHighlighter>
+                            ),
+                            color: isCustomized ? 'cyan' : 'blue',
+                          },
+                        ]}
+                      />
+                    );
+                  })}
                 </Flex>
               );
             },