feat: add AliasedBaseImageName

react/src/components/AliasedBaseImageName.tsx

@@ -0,0 +1,35 @@
+import { useBackendAIImageMetaData } from '../hooks';
+import TextHighlighter from './TextHighlighter';
+import { AliasedBaseImageNameFragment$key } from './__generated__/AliasedBaseImageNameFragment.graphql';
+import graphql from 'babel-plugin-relay/macro';
+import React from 'react';
+import { useFragment } from 'react-relay';
+
+interface AliasedBaseImageNameProps {
+  imageFrgmt?: AliasedBaseImageNameFragment$key | null;
+  highlightKeyword?: string;
+}
+
+const AliasedBaseImageName: React.FC<AliasedBaseImageNameProps> = ({
+  imageFrgmt,
+  highlightKeyword,
+}) => {
+  const images = useFragment(
+    graphql`
+      fragment AliasedBaseImageNameFragment on ImageNode {
+        base_image_name @since(version: "24.09.1.")
+      }
+    `,
+    imageFrgmt,
+  );
+
+  const [, { tagAlias }] = useBackendAIImageMetaData();
+
+  return (
+    <TextHighlighter keyword={highlightKeyword}>
+      {tagAlias(images?.base_image_name ?? '')}
+    </TextHighlighter>
+  );
+};
+
+export default AliasedBaseImageName;

react/src/components/ImageList.tsx

@@ -66,6 +66,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
   const [isOpenColumnsSetting, setIsOpenColumnsSetting] = useState(false);
   const [isPendingRefreshTransition, startRefreshTransition] = useTransition();
   const [isPendingSearchTransition, startSearchTransition] = useTransition();
+  const [, { tagAlias }] = useBackendAIImageMetaData();
   const baiClient = useSuspendedBackendaiClient();
   const supportExtendedImageInfo =
     baiClient?.supports('extended-image-info') ?? false;
@@ -198,7 +199,14 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             sorter: (a: EnvironmentImage, b: EnvironmentImage) =>
               localeCompare(a?.base_image_name, b?.base_image_name),
             render: (text: string, row: EnvironmentImage) => (
-              <TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
+              // Replace with this code after using ImageNode instead of Image
+              // <AliasedBaseImageName
+              //   imageFrgmt={row}
+              //   highlightKeyword={imageSearch}
+              // />
+              <TextHighlighter keyword={imageSearch}>
+                {tagAlias(text)}
+              </TextHighlighter>
             ),
           },
           {
@@ -322,11 +330,10 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
       title: t('environment.Digest'),
       dataIndex: 'digest',
       key: 'digest',
-      sorter: (a, b) =>
-        a?.digest && b?.digest ? a.digest.localeCompare(b.digest) : 0,
-      render: (text, row) => (
+      sorter: (a, b) => localeCompare(a?.digest, b?.digest),
+      render: (text) => (
         <Typography.Text ellipsis={{ tooltip: true }} style={{ maxWidth: 200 }}>
-          <TextHighlighter keyword={imageSearch}>{row.digest}</TextHighlighter>
+          <TextHighlighter keyword={imageSearch}>{text}</TextHighlighter>
         </Typography.Text>
       ),
     },