Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: resolve empty value display in DoubleTag and update BAIIntervalView #2813

Merged
merged 1 commit into from
Nov 12, 2024
Merged

fix: resolve empty value display in DoubleTag and update BAIIntervalView #2813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 17 additions & 12 deletions react/src/components/AgentList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -640,7 +645,7 @@ const AgentList: React.FC<AgentListProps> = ({
values={[
{ label: 'Agent' },
{
label: record?.version,
label: record?.version || '',
color:
value === 'ALIVE'
? 'green'
Expand Down
14 changes: 3 additions & 11 deletions react/src/components/AliasedImageDoubleTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
},
]}
Expand Down
13 changes: 0 additions & 13 deletions react/src/components/BAIIntervalText.tsx
View file
Open in desktop

This file was deleted.

21 changes: 21 additions & 0 deletions react/src/components/BAIIntervalView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions react/src/components/BatchSessionScheduledTimeSetting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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();
}}
Expand Down
35 changes: 19 additions & 16 deletions react/src/components/ComputeSessionNodeItems/SessionReservation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 },
]}
/>
)}
/>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion react/src/components/CustomizedImageList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={''}
/>
),
},
Expand Down
27 changes: 17 additions & 10 deletions react/src/components/DoubleTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]))
Expand All @@ -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={
Expand All @@ -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>
);
};
Expand Down
50 changes: 10 additions & 40 deletions react/src/components/ImageEnvironmentSelectFormItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
})}
/>
))
Expand All @@ -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',
},
]}
Expand Down Expand Up @@ -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',
},
]}
Expand Down
13 changes: 3 additions & 10 deletions react/src/components/ImageList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
]}
Expand Down
Loading
Loading