diff --git a/react/src/components/AgentList.tsx b/react/src/components/AgentList.tsx index 7e7b228e6e..a87665057a 100644 --- a/react/src/components/AgentList.tsx +++ b/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 = ({ return ( {dayjs(value).format('ll LTS')} - { - return baiClient.utils.elapsedTime(value, Date.now()); - }} - delay={1000} - />, - ]} + { + return baiClient.utils.elapsedTime(value, Date.now()); + }} + delay={1000} + render={(intervalValue) => ( + + )} /> ); @@ -640,7 +645,7 @@ const AgentList: React.FC = ({ values={[ { label: 'Agent' }, { - label: record?.version, + label: record?.version || '', color: value === 'ALIVE' ? 'green' diff --git a/react/src/components/AliasedImageDoubleTags.tsx b/react/src/components/AliasedImageDoubleTags.tsx index 841d31a399..af503a3323 100644 --- a/react/src/components/AliasedImageDoubleTags.tsx +++ b/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 = ({ ) ? ( - {tagAlias(tag.key)} - - ), + label: tagAlias(tag.key), color: isCustomized ? 'cyan' : doubleTagProps.color, }, { - label: ( - - {tagValue} - - ), + label: tagValue ?? '', color: isCustomized ? 'cyan' : doubleTagProps.color, }, ]} diff --git a/react/src/components/BAIIntervalText.tsx b/react/src/components/BAIIntervalText.tsx deleted file mode 100644 index 26bdbe91f3..0000000000 --- a/react/src/components/BAIIntervalText.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { useIntervalValue } from '../hooks/useIntervalValue'; -import React from 'react'; - -const BAIIntervalText: React.FC<{ - callback: () => any; - delay: number; - triggerKey?: string; -}> = ({ callback, delay, triggerKey }) => { - const value = useIntervalValue(callback, delay, triggerKey); - return value; -}; - -export default BAIIntervalText; diff --git a/react/src/components/BAIIntervalView.tsx b/react/src/components/BAIIntervalView.tsx new file mode 100644 index 0000000000..36786c7b96 --- /dev/null +++ b/react/src/components/BAIIntervalView.tsx @@ -0,0 +1,21 @@ +import { useIntervalValue } from '../hooks/useIntervalValue'; +import _ from 'lodash'; +import React from 'react'; + +type RenderProp = (data: T) => React.ReactNode; +const BAIIntervalView = ({ + callback, + render, + delay, + triggerKey, +}: { + callback: () => T; + render?: RenderProp; + delay: number; + triggerKey?: string; +}) => { + const value = useIntervalValue(callback, delay, triggerKey); + return _.isUndefined(render) ? value : render(value); +}; + +export default BAIIntervalView; diff --git a/react/src/components/BatchSessionScheduledTimeSetting.tsx b/react/src/components/BatchSessionScheduledTimeSetting.tsx index 89a30da568..27399a6763 100644 --- a/react/src/components/BatchSessionScheduledTimeSetting.tsx +++ b/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 = ({ style={{ fontSize: token.fontSizeSM - 2 }} > ({t('session.launcher.StartAfter')} - { return dayjs(scheduleTime).fromNow(); }} diff --git a/react/src/components/ComputeSessionNodeItems/SessionReservation.tsx b/react/src/components/ComputeSessionNodeItems/SessionReservation.tsx index 68d775d7e8..9f0d9aed9f 100644 --- a/react/src/components/ComputeSessionNodeItems/SessionReservation.tsx +++ b/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')} - { - return session?.created_at - ? baiClient.utils.elapsedTime( - session.created_at, - session?.terminated_at, - ) - : '-'; - }} - delay={1000} - />, - ]} + { + return session?.created_at + ? baiClient.utils.elapsedTime( + session.created_at, + session?.terminated_at, + ) + : '-'; + }} + delay={1000} + render={(intervalValue) => ( + + )} /> ); diff --git a/react/src/components/CustomizedImageList.tsx b/react/src/components/CustomizedImageList.tsx index dc7de913fe..101fab86ca 100644 --- a/react/src/components/CustomizedImageList.tsx +++ b/react/src/components/CustomizedImageList.tsx @@ -266,8 +266,8 @@ const CustomizedImageList: React.FC = ({ children }) => { render: (text: Array<{ key: string; value: string }>, row) => ( ), }, diff --git a/react/src/components/DoubleTag.tsx b/react/src/components/DoubleTag.tsx index 289d145dd3..1ce882141f 100644 --- a/react/src/components/DoubleTag.tsx +++ b/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 | Array; + highlightKeyword?: string; +}> = ({ values = [], highlightKeyword }) => { if (values.length === 0) return null; - let objectValues: DoubleTagObjectValue[]; + let objectValues: Array; if ( values[0] && (typeof values[0] === 'string' || React.isValidElement(values[0])) @@ -31,8 +32,8 @@ const DoubleTag: React.FC<{ return ( - {_.map(objectValues, (objValue, idx) => { - return !_.isEmpty(objValue.label) ? ( + {_.map(objectValues, (objValue, idx) => + !_.isEmpty(objValue.label) ? ( - {objValue.label} + {!_.isUndefined(highlightKeyword) ? ( + + {objValue.label} + + ) : ( + objValue.label + )} - ) : null; - })} + ) : null, + )} ); }; diff --git a/react/src/components/ImageEnvironmentSelectFormItems.tsx b/react/src/components/ImageEnvironmentSelectFormItems.tsx index bc28cd4c02..49cc10c56a 100644 --- a/react/src/components/ImageEnvironmentSelectFormItems.tsx +++ b/react/src/components/ImageEnvironmentSelectFormItems.tsx @@ -640,14 +640,10 @@ const ImageEnvironmentSelectFormItems: React.FC< ':', ).map((str) => { extraFilterValues.push(str); - return ( - - {str} - - ); + return { + label: str, + highlightKeyword: versionSearch, + }; })} /> )) @@ -671,27 +667,14 @@ const ImageEnvironmentSelectFormItems: React.FC< requirementTags.push( - Customized - - ), + label: 'Customized', color: 'cyan', }, { - label: ( - - {tag} - - ), + label: tag ?? '', color: 'cyan', }, ]} @@ -743,27 +726,14 @@ const ImageEnvironmentSelectFormItems: React.FC< ) ? ( - {tagAlias(tag.key)} - - ), + label: tagAlias(tag.key), color: isCustomized ? 'cyan' : 'blue', }, { - label: ( - - {tagValue} - - ), + label: tagValue ?? '', color: isCustomized ? 'cyan' : 'blue', }, ]} diff --git a/react/src/components/ImageList.tsx b/react/src/components/ImageList.tsx index 241d066495..d147916e18 100644 --- a/react/src/components/ImageList.tsx +++ b/react/src/components/ImageList.tsx @@ -227,21 +227,14 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => { ) ? ( - {tagAlias(tag.key)} - - ), + label: tagAlias(tag.key), color: isCustomized ? 'cyan' : 'blue', }, { - label: ( - - {tagValue} - - ), + label: tagValue ?? '', color: isCustomized ? 'cyan' : 'blue', }, ]} diff --git a/react/src/components/ImageTags.tsx b/react/src/components/ImageTags.tsx index 5dd03ec0e8..6e867ee665 100644 --- a/react/src/components/ImageTags.tsx +++ b/react/src/components/ImageTags.tsx @@ -121,21 +121,14 @@ export const ConstraintTags: React.FC = ({ {!_.isEmpty(constraints?.[1]) ? ( - Customized - - ), + label: 'Customized', color: 'cyan', }, { - label: ( - - {constraints[1]} - - ), + label: constraints[1], color: 'cyan', }, ]} @@ -188,21 +181,14 @@ export const ImageTags: React.FC = ({ ) ? ( - {tagAlias(tag.key)} - - ), + label: tagAlias(tag.key), color: isCustomized ? 'cyan' : 'blue', }, { - label: ( - - {tag.value} - - ), + label: tag.value, color: isCustomized ? 'cyan' : 'blue', }, ]} diff --git a/react/src/components/LoginSessionExtendButton.tsx b/react/src/components/LoginSessionExtendButton.tsx index c9b1e987e2..b37679ce10 100644 --- a/react/src/components/LoginSessionExtendButton.tsx +++ b/react/src/components/LoginSessionExtendButton.tsx @@ -1,7 +1,7 @@ import { useBaiSignedRequestWithPromise } from '../helper'; import { useUpdatableState } from '../hooks'; import { useSuspenseTanQuery } from '../hooks/reactQueryAlias'; -import BAIIntervalText from './BAIIntervalText'; +import BAIIntervalView from './BAIIntervalView'; import Flex from './Flex'; import { ClockCircleOutlined } from '@ant-design/icons'; import { Button, Tooltip } from 'antd'; @@ -37,7 +37,7 @@ const LoginSessionExtendButton: React.FC< - { const diff = dayjs(data?.expires).diff(dayjs(), 'seconds'); const duration = dayjs.duration(Math.max(0, diff), 'seconds'); @@ -54,7 +54,7 @@ const LoginSessionExtendButton: React.FC< return `${days ? days + 'd ' : ''}${duration.format('HH:mm:ss')}`; }} delay={100} - > + >