Skip to content

Commit 2dc90c3

Browse files
agatha197agatha197
committed
feat(FR-2858): add revision number display and expand filter/sort in revision history tab (#7336)
Resolves #7335 ([FR-2858](https://lablup.atlassian.net/browse/FR-2858)) ## Summary - Sync `data/schema.graphql` with backend.ai PR #11529 which adds `revisionNumber: Int!` to `ModelRevision` and various nullability adjustments - Revision history table now shows `#N (uuid [copy])` format using `BAIId` component for easy identification and UUID copying - Extended sortable columns: revision number, created-at, resource group, cluster mode, runtime variant name - Added filters: revision number (number), created-at (datetime), resource group (string), cluster mode (string), image ID (uuid), model vfolder ID (uuid); UUID filters use `isValidUUID` validator - Added Image column (defaultHidden) showing canonical name + copyable UUID via `BAIId` - Added Model Folder column (defaultHidden) showing folder name + copyable UUID via `BAIId` - `DeployingRevisionApplying` notification now uses `#N` revision number instead of raw UUID - `DeploymentRevisionDetail` now displays revision number as the first field - Added `general.InvalidUUID` and `deployment.RevisionNumberWithID` i18n keys across 21 languages [FR-2858]: https://lablup.atlassian.net/browse/FR-2858?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
1 parent 47f1b74 commit 2dc90c3

25 files changed

Lines changed: 645 additions & 404 deletions

‎data/schema.graphql‎

Lines changed: 427 additions & 355 deletions
Large diffs are not rendered by default.

‎react/src/components/DeploymentConfigurationSection.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,10 +202,12 @@ const DeploymentConfigurationSection: React.FC<
202202
}
203203
currentRevision @since(version: "26.4.3") {
204204
id
205+
revisionNumber
205206
...DeploymentRevisionDetail_revision
206207
}
207208
deployingRevision @since(version: "26.4.3") {
208209
id
210+
revisionNumber
209211
...DeploymentRevisionDetail_revision
210212
}
211213
...DeploymentRevisionHistoryTab_deployment
@@ -376,7 +378,10 @@ const DeploymentConfigurationSection: React.FC<
376378
icon={<LoadingOutlined spin />}
377379
showIcon
378380
title={t('deployment.DeployingRevisionApplying', {
379-
name: toLocalId(deployingRevision.id) ?? '',
381+
revisionNumber:
382+
deployingRevision.revisionNumber != null
383+
? `#${deployingRevision.revisionNumber}`
384+
: (toLocalId(deployingRevision.id) ?? ''),
380385
})}
381386
action={
382387
<Button

‎react/src/components/DeploymentRevisionDetail.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ import { formatShellCommand } from '../helper/parseCliCommand';
88
import FolderLink from './FolderLink';
99
import SourceCodeView from './SourceCodeView';
1010
import { LoadingOutlined } from '@ant-design/icons';
11-
import { Descriptions, Grid, Typography, theme } from 'antd';
11+
import { Descriptions, Grid, Typography } from 'antd';
1212
import { DescriptionsItemType } from 'antd/es/descriptions';
1313
import {
1414
BAIFlex,
1515
BAIResourceNumberWithIcon,
1616
BAITag,
17+
BAIText,
1718
filterOutEmpty,
1819
filterOutNullAndUndefined,
1920
toLocalId,
@@ -33,13 +34,13 @@ const DeploymentRevisionDetail: React.FC<{
3334
}> = ({ revisionFrgmt, status = 'none' }) => {
3435
'use memo';
3536
const { t } = useTranslation();
36-
const { token } = theme.useToken();
3737
const screens = Grid.useBreakpoint();
3838

3939
const revision = useFragment(
4040
graphql`
4141
fragment DeploymentRevisionDetail_revision on ModelRevision {
4242
id
43+
revisionNumber
4344
createdAt
4445
clusterConfig {
4546
mode
@@ -124,16 +125,25 @@ const DeploymentRevisionDetail: React.FC<{
124125
const descriptionsProps = {
125126
bordered: true,
126127
column: screens.md ? 2 : 1,
127-
style: { backgroundColor: token.colorBgBase },
128128
} as const;
129129

130130
const baseItems: DescriptionsItemType[] = filterOutEmpty([
131131
{
132-
key: 'revision-name',
132+
key: 'revision-number',
133+
label: t('deployment.RevisionNumber'),
134+
children:
135+
revision.revisionNumber != null ? (
136+
<BAIText>{`#${revision.revisionNumber}`}</BAIText>
137+
) : (
138+
renderFallback()
139+
),
140+
},
141+
{
142+
key: 'revision-id',
133143
label: t('modelService.RevisionID'),
134144
children: revision.id ? (
135145
<BAIFlex gap="xs" align="center">
136-
<Typography.Text>{toLocalId(revision.id)}</Typography.Text>
146+
<BAIText copyable>{toLocalId(revision.id)}</BAIText>
137147
{status === 'current' && (
138148
<BAITag color="success">{t('deployment.Current')}</BAITag>
139149
)}

‎react/src/components/DeploymentRevisionHistoryTab.tsx‎

Lines changed: 134 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,15 @@ import {
2424
BAITable,
2525
BAITag,
2626
BAIUnmountAfterClose,
27+
BAIId,
2728
INITIAL_FETCH_KEY,
2829
type GraphQLFilter,
2930
filterOutNullAndUndefined,
31+
isValidUUID,
3032
toLocalId,
3133
useBAILogger,
3234
useFetchKey,
35+
BAIText,
3336
} from 'backend.ai-ui';
3437
import dayjs from 'dayjs';
3538
import * as _ from 'lodash-es';
@@ -51,12 +54,20 @@ import {
5154
type RevisionNode = NonNullable<
5255
NonNullable<
5356
NonNullable<
54-
DeploymentRevisionHistoryTabListQuery['response']['deployment']
55-
>['revisionHistory']['edges'][number]
57+
NonNullable<
58+
DeploymentRevisionHistoryTabListQuery['response']['deployment']
59+
>['revisionHistory']
60+
>['edges'][number]
5661
>['node']
5762
>;
5863

59-
const availableRevisionSorterKeys = ['createdAt'] as const;
64+
const availableRevisionSorterKeys = [
65+
'revisionNumber',
66+
'createdAt',
67+
'resourceGroup',
68+
'clusterMode',
69+
'runtimeVariantName',
70+
] as const;
6071
const availableRevisionSorterValues = [
6172
...availableRevisionSorterKeys,
6273
...availableRevisionSorterKeys.map((key) => `-${key}` as const),
@@ -195,12 +206,16 @@ const DeploymentRevisionHistoryTab: React.FC<
195206
edges {
196207
node {
197208
id
209+
revisionNumber
198210
createdAt
199211
200212
clusterConfig {
201213
mode
202214
size
203215
}
216+
resourceConfig {
217+
resourceGroupName
218+
}
204219
modelRuntimeConfig {
205220
runtimeVariant {
206221
name
@@ -220,6 +235,13 @@ const DeploymentRevisionHistoryTab: React.FC<
220235
canonicalName
221236
}
222237
}
238+
modelMountConfig {
239+
vfolderId
240+
vfolder {
241+
id
242+
name
243+
}
244+
}
223245
...DeploymentRevisionDetail_revision
224246
}
225247
}
@@ -277,12 +299,11 @@ const DeploymentRevisionHistoryTab: React.FC<
277299
};
278300

279301
const handleRollback = (revision: RevisionNode): Promise<boolean> => {
280-
const revisionLabel = toLocalId(revision.id);
281302
return new Promise<boolean>((resolveOuter) => {
282303
modal.confirm({
283304
title: t('deployment.Deploy'),
284305
content: t('deployment.DeployConfirm', {
285-
revisionNumber: revisionLabel,
306+
revisionNumber: revision.revisionNumber,
286307
}),
287308
okText: t('deployment.Deploy'),
288309
okButtonProps: {
@@ -315,7 +336,7 @@ const DeploymentRevisionHistoryTab: React.FC<
315336
upsertNotification({
316337
open: true,
317338
message: t('deployment.DeploySuccess', {
318-
revisionNumber: revisionLabel,
339+
revisionNumber: revision.revisionNumber,
319340
}),
320341
});
321342
handleRefresh();
@@ -342,10 +363,11 @@ const DeploymentRevisionHistoryTab: React.FC<
342363

343364
const columns: BAIColumnType<RevisionNode>[] = [
344365
{
345-
title: t('deployment.RevisionNumber'),
366+
title: t('deployment.RevisionNumberWithID'),
346367
dataIndex: 'revisionNumber',
347368
key: 'revisionNumber',
348369
fixed: 'left',
370+
sorter: true,
349371
render: (_value, record) => {
350372
// `currentRevisionId` and `deployingRevisionId` come back as raw
351373
// UUIDs from the scalar fields, while `record.id` is the
@@ -378,8 +400,15 @@ const DeploymentRevisionHistoryTab: React.FC<
378400
})
379401
}
380402
>
381-
{recordLocalId ?? '-'}
403+
{record.revisionNumber != null
404+
? `#${record.revisionNumber}`
405+
: '-'}
382406
</Typography.Link>
407+
<BAIFlex gap={0} align="center">
408+
{'('}
409+
<BAIId globalId={record.id} />
410+
{')'}
411+
</BAIFlex>
383412
{isCurrent ? (
384413
<BAITag color="success">{t('deployment.Current')}</BAITag>
385414
) : null}
@@ -423,6 +452,7 @@ const DeploymentRevisionHistoryTab: React.FC<
423452
{
424453
title: t('deployment.ModelVersion'),
425454
key: 'modelVersion',
455+
defaultHidden: true,
426456
render: (_value, record) => {
427457
const model = record.modelDefinition?.models?.[0];
428458
if (!model) return '-';
@@ -441,40 +471,98 @@ const DeploymentRevisionHistoryTab: React.FC<
441471
},
442472
{
443473
title: t('deployment.RuntimeVariant'),
444-
key: 'runtimeVariant',
445-
dataIndex: 'runtimeVariant',
474+
key: 'runtimeVariantName',
475+
dataIndex: 'runtimeVariantName',
476+
sorter: true,
446477
render: (_value, record) =>
447478
record.modelRuntimeConfig?.runtimeVariant?.name ?? '-',
448479
},
449480
{
450481
title: t('deployment.Image'),
451482
key: 'image',
483+
defaultHidden: true,
452484
render: (_value, record) => {
453485
const canonicalName = record.imageV2?.identity?.canonicalName;
454-
if (!canonicalName) return '-';
486+
const imageGlobalId = record.imageV2?.id;
487+
if (!canonicalName && !imageGlobalId) return '-';
455488
return (
456-
<Typography.Text
457-
copyable={{ text: canonicalName }}
458-
ellipsis={{ tooltip: canonicalName }}
459-
style={{ maxWidth: 240 }}
460-
>
461-
{canonicalName}
462-
</Typography.Text>
489+
<BAIFlex gap="xs" align="center" wrap="wrap">
490+
{canonicalName ? (
491+
<BAIText
492+
copyable
493+
ellipsis={{ tooltip: canonicalName }}
494+
style={{ maxWidth: 180 }}
495+
>
496+
{canonicalName}
497+
</BAIText>
498+
) : null}
499+
{imageGlobalId ? (
500+
<BAIFlex gap={0} align="center">
501+
{'('}
502+
<BAIId globalId={imageGlobalId} />
503+
{')'}
504+
</BAIFlex>
505+
) : null}
506+
</BAIFlex>
463507
);
464508
},
465509
},
466510
{
467-
title: t('deployment.ClusterSize'),
468-
key: 'clusterSize',
511+
title: t('deployment.ModelFolder'),
512+
key: 'modelFolder',
513+
defaultHidden: true,
514+
render: (_value, record) => {
515+
const vfolder = record.modelMountConfig?.vfolder;
516+
const vfolderId = record.modelMountConfig?.vfolderId;
517+
if (!vfolder?.name && !vfolderId) return '-';
518+
return (
519+
<BAIFlex gap="xs" align="center" wrap="wrap">
520+
{vfolder?.name ? (
521+
<Typography.Text>{vfolder.name}</Typography.Text>
522+
) : null}
523+
{vfolder?.id ? (
524+
<BAIFlex gap={0} align="center">
525+
{'('}
526+
<BAIId globalId={vfolder.id} />
527+
{')'}
528+
</BAIFlex>
529+
) : vfolderId ? (
530+
<Typography.Text type="secondary">{vfolderId}</Typography.Text>
531+
) : null}
532+
</BAIFlex>
533+
);
534+
},
535+
},
536+
{
537+
title: t('deployment.ClusterMode'),
538+
key: 'clusterMode',
539+
dataIndex: 'clusterMode',
540+
sorter: true,
469541
render: (_value, record) => {
470542
const mode = record.clusterConfig?.mode;
471543
const size = record.clusterConfig?.size;
472-
if (size == null) return '-';
473-
return mode ? `${size} (${mode})` : `${size}`;
544+
if (mode == null && size == null) return '-';
545+
if (mode == null) return `${size}`;
546+
if (size == null) return mode;
547+
return `${mode} / ${size}`;
474548
},
475549
},
550+
{
551+
title: t('deployment.ResourceGroup'),
552+
key: 'resourceGroup',
553+
dataIndex: 'resourceGroup',
554+
sorter: true,
555+
defaultHidden: true,
556+
render: (_value, record) =>
557+
record.resourceConfig?.resourceGroupName ?? '-',
558+
},
476559
];
477560

561+
const uuidRule = {
562+
message: t('general.InvalidUUID'),
563+
validate: (value: string) => isValidUUID(value.toLowerCase()),
564+
};
565+
478566
const filterProperties = [
479567
{
480568
key: 'revisionNumber',
@@ -488,6 +576,30 @@ const DeploymentRevisionHistoryTab: React.FC<
488576
operators: ['after' as const, 'before' as const],
489577
defaultOperator: 'after' as const,
490578
},
579+
{
580+
key: 'resourceGroup',
581+
propertyLabel: t('deployment.ResourceGroup'),
582+
type: 'string' as const,
583+
},
584+
{
585+
key: 'clusterMode',
586+
propertyLabel: t('deployment.ClusterMode'),
587+
type: 'string' as const,
588+
},
589+
{
590+
key: 'imageId',
591+
propertyLabel: t('deployment.Image'),
592+
type: 'uuid' as const,
593+
fixedOperator: 'equals' as const,
594+
rule: uuidRule,
595+
},
596+
{
597+
key: 'modelVfolderId',
598+
propertyLabel: t('deployment.ModelFolder'),
599+
type: 'uuid' as const,
600+
fixedOperator: 'equals' as const,
601+
rule: uuidRule,
602+
},
491603
];
492604

493605
const filterValue: GraphQLFilter | undefined = queryParams.rvFilter

‎resources/i18n/de.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -918,7 +918,7 @@
918918
"DeployDisabled": "Es kann keine Revision ausgewählt werden, die gerade bereitgestellt wird oder bereits bereitgestellt ist.",
919919
"DeploySuccess": "Die Bereitstellung von Revision #{{revisionNumber}} wurde angefordert.",
920920
"Deploying": "Wird bereitgestellt",
921-
"DeployingRevisionApplying": "Revision {{name}} wird bereitgestellt.",
921+
"DeployingRevisionApplying": "Revision {{revisionNumber}} wird bereitgestellt.",
922922
"DeployingRevisionDetail": "Details zur laufenden Bereitstellung",
923923
"Deployment": "Bereitstellung",
924924
"DeploymentCreated": "Bereitstellung wurde erstellt.",
@@ -987,6 +987,7 @@
987987
"RevisionId": "Revisions-ID",
988988
"RevisionIdPlaceholder": "Revisions-ID eingeben (optional)",
989989
"RevisionNumber": "Revisionsnummer",
990+
"RevisionNumberWithID": "Revision (ID)",
990991
"Revisions": "Revisionen",
991992
"Running": "Läuft",
992993
"RuntimeVariant": "Laufzeit",
@@ -1469,6 +1470,7 @@
14691470
"InProgress": "In Arbeit",
14701471
"Inactive": "Inaktiv",
14711472
"InvalidJSONFormat": "Ungültiges JSON-Format.",
1473+
"InvalidUUID": "Bitte geben Sie eine gültige UUID ein",
14721474
"LastUpdated": "Zuletzt aktualisiert",
14731475
"Loading": "Wird geladen...",
14741476
"Manual": "Handbuch",

0 commit comments

Comments
 (0)