fix: resolve empty value display in DoubleTag and update `BAIInterv…

…alView` (#2813)

**Changes:**
- Replaced `BAIIntervalText` with new `BAIIntervalView` component that supports render props
- Updated `DoubleTag` component to handle string highlighting and simplified value types
- Refactored tag rendering to use object-based values consistently
- Added type safety improvements for tag labels and values

**Rationale:**
Improves component reusability and type safety by introducing a more flexible interval view component with render prop support. Standardizes the way tags are rendered across the application while adding proper highlighting capabilities.

**How to test:**
1. Check agent list running time displays correctly
2. Verify session elapsed time shows properly
3. Test customized image tags display correctly

Example usage:
```tsx
<BAIIntervalView
  callback={() => baiClient.utils.elapsedTime(value, Date.now())}
  delay={1000}
  render={(intervalValue) => (
    <DoubleTag
      values={[
        { label: 'Running' },
        { label: intervalValue }
      ]}
    />
  )}
/>
```

**Checklist:**
- [ ] Test interval updates across all usage locations
- [ ] Verify tag highlighting works with search functionality
- [ ] Check type safety of tag value props
- [ ] Ensure backwards compatibility with existing tag implementations

**Screenshots:**
Before
![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/497082c2-e79a-43bd-a86a-70554e2984c3.png)

After
![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/9b654ec0-cfa6-400d-88d4-bd1cebcd99a2.png)

react/src/components/AgentList.tsx

@@ -10,7 +10,7 @@ import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOption
 import { useThemeMode } from '../hooks/useThemeMode';
 import AgentDetailModal from './AgentDetailModal';
 import AgentSettingModal from './AgentSettingModal';
-import BAIIntervalText from './BAIIntervalText';
+import BAIIntervalView from './BAIIntervalView';
 import BAIProgressWithLabel from './BAIProgressWithLabel';
 import BAIPropertyFilter from './BAIPropertyFilter';
 import DoubleTag from './DoubleTag';
@@ -247,16 +247,21 @@ const AgentList: React.FC<AgentListProps> = ({
         return (
           <Flex direction="column">
             <Typography.Text>{dayjs(value).format('ll LTS')}</Typography.Text>
-            <DoubleTag
-              values={[
-                t('agent.Running'),
-                <BAIIntervalText
-                  callback={() => {
-                    return baiClient.utils.elapsedTime(value, Date.now());
-                  }}
-                  delay={1000}
-                />,
-              ]}
+            <BAIIntervalView
+              callback={() => {
+                return baiClient.utils.elapsedTime(value, Date.now());
+              }}
+              delay={1000}
+              render={(intervalValue) => (
+                <DoubleTag
+                  values={[
+                    { label: t('agent.Running') },
+                    {
+                      label: intervalValue,
+                    },
+                  ]}
+                />
+              )}
             />
           </Flex>
         );
@@ -640,7 +645,7 @@ const AgentList: React.FC<AgentListProps> = ({
               values={[
                 { label: 'Agent' },
                 {
-                  label: record?.version,
+                  label: record?.version || '',
                   color:
                     value === 'ALIVE'
                       ? 'green'

react/src/components/AliasedImageDoubleTags.tsx

@@ -2,7 +2,6 @@ import { preserveDotStartCase } from '../helper';
 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 { Tag } from 'antd';
 import graphql from 'babel-plugin-relay/macro';
@@ -54,21 +53,14 @@ const AliasedImageDoubleTags: React.FC<AliasedImageDoubleTagsProps> = ({
         ) ? (
           <DoubleTag
             key={tag.key}
+            highlightKeyword={highlightKeyword}
             values={[
               {
-                label: (
-                  <TextHighlighter keyword={highlightKeyword} key={tag.key}>
-                    {tagAlias(tag.key)}
-                  </TextHighlighter>
-                ),
+                label: tagAlias(tag.key),
                 color: isCustomized ? 'cyan' : doubleTagProps.color,
               },
               {
-                label: (
-                  <TextHighlighter keyword={highlightKeyword} key={tagValue}>
-                    {tagValue}
-                  </TextHighlighter>
-                ),
+                label: tagValue ?? '',
                 color: isCustomized ? 'cyan' : doubleTagProps.color,
               },
             ]}

react/src/components/BAIIntervalView.tsx

@@ -0,0 +1,21 @@
+import { useIntervalValue } from '../hooks/useIntervalValue';
+import _ from 'lodash';
+import React from 'react';
+
+type RenderProp<T> = (data: T) => React.ReactNode;
+const BAIIntervalView = <T,>({
+  callback,
+  render,
+  delay,
+  triggerKey,
+}: {
+  callback: () => T;
+  render?: RenderProp<T>;
+  delay: number;
+  triggerKey?: string;
+}) => {
+  const value = useIntervalValue(callback, delay, triggerKey);
+  return _.isUndefined(render) ? value : render(value);
+};
+
+export default BAIIntervalView;

react/src/components/BatchSessionScheduledTimeSetting.tsx

@@ -1,4 +1,4 @@
-import BAIIntervalText from './BAIIntervalText';
+import BAIIntervalView from './BAIIntervalView';
 import DatePickerISO, { DatePickerISOProps } from './DatePickerISO';
 import { useWebComponentInfo } from './DefaultProviders';
 import Flex from './Flex';
@@ -86,7 +86,7 @@ const BatchSessionScheduledTimeSetting: React.FC<Props> = ({
                 style={{ fontSize: token.fontSizeSM - 2 }}
               >
                 ({t('session.launcher.StartAfter')}
-                <BAIIntervalText
+                <BAIIntervalView
                   callback={() => {
                     return dayjs(scheduleTime).fromNow();
                   }}

react/src/components/ComputeSessionNodeItems/SessionReservation.tsx

@@ -1,5 +1,5 @@
 import { useSuspendedBackendaiClient } from '../../hooks';
-import BAIIntervalText from '../BAIIntervalText';
+import BAIIntervalView from '../BAIIntervalView';
 import DoubleTag from '../DoubleTag';
 import { SessionReservationFragment$key } from './__generated__/SessionReservationFragment.graphql';
 import graphql from 'babel-plugin-relay/macro';
@@ -26,21 +26,24 @@ const SessionReservation: React.FC<{
   return (
     <>
       {dayjs(session.created_at).format('lll')}
-      <DoubleTag
-        values={[
-          t('session.ElapsedTime'),
-          <BAIIntervalText
-            callback={() => {
-              return session?.created_at
-                ? baiClient.utils.elapsedTime(
-                    session.created_at,
-                    session?.terminated_at,
-                  )
-                : '-';
-            }}
-            delay={1000}
-          />,
-        ]}
+      <BAIIntervalView
+        callback={() => {
+          return session?.created_at
+            ? baiClient.utils.elapsedTime(
+                session.created_at,
+                session?.terminated_at,
+              )
+            : '-';
+        }}
+        delay={1000}
+        render={(intervalValue) => (
+          <DoubleTag
+            values={[
+              { label: t('session.ElapsedTime') },
+              { label: intervalValue },
+            ]}
+          />
+        )}
       />
     </>
   );

react/src/components/CustomizedImageList.tsx

@@ -266,8 +266,8 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
       render: (text: Array<{ key: string; value: string }>, row) => (
         <AliasedImageDoubleTags
           imageFrgmt={row}
-          label={undefined}
           highlightKeyword={imageSearch}
+          label={''}
         />
       ),
     },

react/src/components/DoubleTag.tsx

@@ -1,19 +1,20 @@
 import Flex from './Flex';
+import TextHighlighter from './TextHighlighter';
 import { Tag } from 'antd';
 import _ from 'lodash';
 import React from 'react';
 
 export type DoubleTagObjectValue = {
-  label: ValueType;
+  label: string;
   color?: string;
 };
 
-type ValueType = string | React.ReactNode;
 const DoubleTag: React.FC<{
-  values?: ValueType[] | DoubleTagObjectValue[];
-}> = ({ values = [] }) => {
+  values?: Array<string> | Array<DoubleTagObjectValue>;
+  highlightKeyword?: string;
+}> = ({ values = [], highlightKeyword }) => {
   if (values.length === 0) return null;
-  let objectValues: DoubleTagObjectValue[];
+  let objectValues: Array<DoubleTagObjectValue>;
   if (
     values[0] &&
     (typeof values[0] === 'string' || React.isValidElement(values[0]))
@@ -31,8 +32,8 @@ const DoubleTag: React.FC<{
 
   return (
     <Flex direction="row">
-      {_.map(objectValues, (objValue, idx) => {
-        return !_.isEmpty(objValue.label) ? (
+      {_.map(objectValues, (objValue, idx) =>
+        !_.isEmpty(objValue.label) ? (
           <Tag
             key={idx}
             style={
@@ -42,10 +43,16 @@ const DoubleTag: React.FC<{
             }
             color={objValue.color}
           >
-            {objValue.label}
+            {!_.isUndefined(highlightKeyword) ? (
+              <TextHighlighter keyword={highlightKeyword}>
+                {objValue.label}
+              </TextHighlighter>
+            ) : (
+              objValue.label
+            )}
           </Tag>
-        ) : null;
-      })}
+        ) : null,
+      )}
     </Flex>
   );
 };

react/src/components/ImageEnvironmentSelectFormItems.tsx

@@ -640,14 +640,10 @@ const ImageEnvironmentSelectFormItems: React.FC<
                             ':',
                           ).map((str) => {
                             extraFilterValues.push(str);
-                            return (
-                              <TextHighlighter
-                                keyword={versionSearch}
-                                key={str}
-                              >
-                                {str}
-                              </TextHighlighter>
-                            );
+                            return {
+                              label: str,
+                              highlightKeyword: versionSearch,
+                            };
                           })}
                         />
                       ))
@@ -671,27 +667,14 @@ const ImageEnvironmentSelectFormItems: React.FC<
                         requirementTags.push(
                           <DoubleTag
                             key={requirementTags.length + 1}
+                            highlightKeyword={versionSearch}
                             values={[
                               {
-                                label: (
-                                  <TextHighlighter
-                                    keyword={versionSearch}
-                                    key="Customized"
-                                  >
-                                    Customized
-                                  </TextHighlighter>
-                                ),
+                                label: 'Customized',
                                 color: 'cyan',
                               },
                               {
-                                label: (
-                                  <TextHighlighter
-                                    keyword={versionSearch}
-                                    key={tag}
-                                  >
-                                    {tag}
-                                  </TextHighlighter>
-                                ),
+                                label: tag ?? '',
                                 color: 'cyan',
                               },
                             ]}
@@ -743,27 +726,14 @@ const ImageEnvironmentSelectFormItems: React.FC<
                                   ) ? (
                                     <DoubleTag
                                       key={tag.key}
+                                      highlightKeyword={versionSearch}
                                       values={[
                                         {
-                                          label: (
-                                            <TextHighlighter
-                                              keyword={versionSearch}
-                                              key={tag.key}
-                                            >
-                                              {tagAlias(tag.key)}
-                                            </TextHighlighter>
-                                          ),
+                                          label: tagAlias(tag.key),
                                           color: isCustomized ? 'cyan' : 'blue',
                                         },
                                         {
-                                          label: (
-                                            <TextHighlighter
-                                              keyword={versionSearch}
-                                              key={tagValue}
-                                            >
-                                              {tagValue}
-                                            </TextHighlighter>
-                                          ),
+                                          label: tagValue ?? '',
                                           color: isCustomized ? 'cyan' : 'blue',
                                         },
                                       ]}

react/src/components/ImageList.tsx

@@ -227,21 +227,14 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
               ) ? (
                 <DoubleTag
                   key={tag.key}
+                  highlightKeyword={imageSearch}
                   values={[
                     {
-                      label: (
-                        <TextHighlighter keyword={imageSearch} key={tag.key}>
-                          {tagAlias(tag.key)}
-                        </TextHighlighter>
-                      ),
+                      label: tagAlias(tag.key),
                       color: isCustomized ? 'cyan' : 'blue',
                     },
                     {
-                      label: (
-                        <TextHighlighter keyword={imageSearch} key={tagValue}>
-                          {tagValue}
-                        </TextHighlighter>
-                      ),
+                      label: tagValue ?? '',
                       color: isCustomized ? 'cyan' : 'blue',
                     },
                   ]}