Skip to content

Commit bb9bc7a

Browse files
agatha197agatha197
committed
feat(FR-1371): Implement model deployment UI components
1 parent 108e579 commit bb9bc7a

File tree

9 files changed

+1027
-148
lines changed

9 files changed

+1027
-148
lines changed

‎data/schema.graphql‎

Lines changed: 563 additions & 138 deletions
Large diffs are not rendered by default.

‎packages/backend.ai-ui/src/components/Table/BAITable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { Resizable, ResizeCallbackData } from 'react-resizable';
2424
* Configuration interface for BAITable pagination
2525
* Extends Ant Design's TablePaginationConfig but omits 'position' property
2626
*/
27-
interface BAITablePaginationConfig
27+
export interface BAITablePaginationConfig
2828
extends Omit<TablePaginationConfig, 'position'> {
2929
/** Additional content to display in the pagination area */
3030
extraContent?: ReactNode;

‎packages/backend.ai-ui/src/components/Table/BAITableSettingModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ const BAITableSettingModal: React.FC<TableSettingProps> = ({
442442
style={{
443443
height: 330,
444444
}}
445-
scroll={{ x: 'max-content' }}
445+
scroll={{ x: 'max-content', y: 330 }}
446446
/>
447447
</SortableContext>
448448
</DndContext>

‎packages/backend.ai-ui/src/components/Table/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export type {
44
BAIColumnType,
55
BAIColumnsType,
66
BAITableSettings,
7+
BAITablePaginationConfig,
78
BAITableColumnOverrideItem,
89
} from './BAITable';
910
export {

‎react/src/App.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,11 @@ const AIAgentPage = React.lazy(() => import('./pages/AIAgentPage'));
8484

8585
const SchedulerPage = React.lazy(() => import('./pages/SchedulerPage'));
8686
// Deployment pages
87+
// const DeploymentListPage = React.lazy(
88+
// () => import('./pages/Deployments/DeploymentListPage'),
89+
// );
8790
const DeploymentListPage = React.lazy(
88-
() => import('./pages/Deployments/DeploymentListPage'),
91+
() => import('./pages/DeploymentListPage'),
8992
);
9093
const DeploymentDetailPage = React.lazy(
9194
() => import('./pages/Deployments/DeploymentDetailPage'),

‎react/src/components/DeploymentList.tsx‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
import ResourceNumber from './ResourceNumber';
2+
import WebUILink from './WebUILink';
3+
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
4+
import { Tag, theme, Tooltip, Typography } from 'antd';
5+
import {
6+
BAIColumnType,
7+
BAIFlex,
8+
BAITable,
9+
BAITablePaginationConfig,
10+
BAITableProps,
11+
filterOutEmpty,
12+
filterOutNullAndUndefined,
13+
toLocalId,
14+
} from 'backend.ai-ui';
15+
import dayjs from 'dayjs';
16+
import _ from 'lodash';
17+
import { ExternalLinkIcon } from 'lucide-react';
18+
import { useTranslation } from 'react-i18next';
19+
import { useFragment } from 'react-relay';
20+
import { graphql } from 'relay-runtime';
21+
import {
22+
DeploymentListFragment$data,
23+
DeploymentListFragment$key,
24+
} from 'src/__generated__/DeploymentListFragment.graphql';
25+
import { useSuspendedBackendaiClient } from 'src/hooks';
26+
27+
type ModelDeployment = NonNullable<
28+
NonNullable<DeploymentListFragment$data>[number]
29+
>;
30+
interface DeploymentListProps
31+
extends Omit<BAITableProps<ModelDeployment>, 'dataSource' | 'columns'> {
32+
deploymentsFragment: DeploymentListFragment$key;
33+
pagination: BAITablePaginationConfig;
34+
}
35+
36+
const DeploymentList: React.FC<DeploymentListProps> = ({
37+
deploymentsFragment,
38+
pagination,
39+
...tableProps
40+
}) => {
41+
const { t } = useTranslation();
42+
const { token } = theme.useToken();
43+
const baiClient = useSuspendedBackendaiClient();
44+
45+
const deployments = useFragment(
46+
graphql`
47+
fragment DeploymentListFragment on ModelDeployment @relay(plural: true) {
48+
id
49+
metadata {
50+
name
51+
createdAt
52+
updatedAt
53+
tags
54+
}
55+
networkAccess {
56+
endpointUrl
57+
openToPublic
58+
}
59+
revision {
60+
id
61+
name
62+
clusterConfig {
63+
size
64+
}
65+
resourceConfig {
66+
resourceSlots
67+
resourceOpts
68+
}
69+
}
70+
replicaState {
71+
desiredReplicaCount
72+
}
73+
defaultDeploymentStrategy {
74+
type
75+
}
76+
createdUser {
77+
email
78+
}
79+
}
80+
`,
81+
deploymentsFragment,
82+
);
83+
84+
const filteredDeployments = filterOutNullAndUndefined(deployments);
85+
const columns = _.map(
86+
filterOutEmpty<BAIColumnType<ModelDeployment>>([
87+
{
88+
title: t('deployment.DeploymentName'),
89+
key: 'name',
90+
dataIndex: ['metadata', 'name'],
91+
fixed: 'left',
92+
render: (name, row) => (
93+
<WebUILink to={`/deployment/${toLocalId(row.id)}`}>{name}</WebUILink>
94+
),
95+
},
96+
{
97+
title: t('deployment.EndpointURL'),
98+
key: 'endpointUrl',
99+
dataIndex: ['networkAccess', 'endpointUrl'],
100+
render: (url) => (
101+
<BAIFlex gap={'xxs'}>
102+
{url ? (
103+
<>
104+
<Typography.Text>{url}</Typography.Text>
105+
<Typography.Text copyable={{ text: url }} />
106+
<a
107+
href={url}
108+
title=""
109+
target="_blank"
110+
rel="noopener noreferrer"
111+
>
112+
<Tooltip title={t('common.OpenInNewTab')}>
113+
<ExternalLinkIcon />
114+
</Tooltip>
115+
</a>
116+
</>
117+
) : (
118+
'-'
119+
)}
120+
</BAIFlex>
121+
),
122+
},
123+
{
124+
title: t('deployment.Public'),
125+
key: 'openToPublic',
126+
dataIndex: ['networkAccess', 'openToPublic'],
127+
render: (openToPublic) =>
128+
openToPublic ? (
129+
<CheckOutlined style={{ color: token.colorSuccess }} />
130+
) : (
131+
<CloseOutlined style={{ color: token.colorTextSecondary }} />
132+
),
133+
},
134+
{
135+
title: t('deployment.Tags'),
136+
dataIndex: ['metadata', 'tags'],
137+
key: 'tags',
138+
render: (tags) => _.map(tags, (tag) => <Tag key={tag}>{tag}</Tag>),
139+
},
140+
{
141+
title: t('deployment.NumberOfDesiredReplicas'),
142+
key: 'desiredReplicaCount',
143+
dataIndex: ['replicaState', 'desiredReplicaCount'],
144+
render: (count) => count,
145+
defaultHidden: true,
146+
},
147+
{
148+
title: t('deployment.Resources'),
149+
dataIndex: ['revision', 'resourceConfig', 'resourceSlots'],
150+
key: 'resourceSlots',
151+
render: (resourceSlots) => (
152+
<BAIFlex direction="row" gap="xs">
153+
{_.map(JSON.parse(resourceSlots || '{}'), (value, key) => (
154+
<ResourceNumber key={key} type={key} value={value.toString()} />
155+
))}
156+
</BAIFlex>
157+
),
158+
defaultHidden: true,
159+
},
160+
{
161+
title: t('deployment.ClusterSize'),
162+
dataIndex: ['revision', 'clusterConfig', 'size'],
163+
key: 'clusterSize',
164+
render: (size) => <Typography.Text>{size}</Typography.Text>,
165+
166+
defaultHidden: true,
167+
},
168+
{
169+
title: t('deployment.DefaultDeploymentStrategy'),
170+
dataIndex: ['defaultDeploymentStrategy', 'type'],
171+
key: 'type',
172+
render: (type) => (
173+
<Tag
174+
color={
175+
type === 'ROLLING'
176+
? 'default'
177+
: type === 'BLUE_GREEN'
178+
? 'blue'
179+
: 'yellow'
180+
}
181+
>
182+
{type}
183+
</Tag>
184+
),
185+
},
186+
{
187+
title: t('deployment.RevisionName'),
188+
dataIndex: ['revision', 'name'],
189+
key: 'revisionName',
190+
render: (name, row) => (
191+
<WebUILink to={`/deployment/revision/${row.id}`}>{name}</WebUILink>
192+
),
193+
defaultHidden: true,
194+
},
195+
{
196+
title: t('deployment.CreatedAt'),
197+
dataIndex: ['metadata', 'createdAt'],
198+
key: 'createdAt',
199+
render: (createdAt) => {
200+
return dayjs(createdAt).format('ll LT');
201+
},
202+
},
203+
{
204+
title: t('deployment.UpdatedAt'),
205+
dataIndex: ['metadata', 'updatedAt'],
206+
key: 'updatedAt',
207+
render: (updatedAt) => {
208+
return dayjs(updatedAt).format('ll LT');
209+
},
210+
defaultHidden: true,
211+
},
212+
baiClient.is_admin && {
213+
title: t('deployment.CreatedBy'),
214+
dataIndex: ['createdUser', 'email'],
215+
key: 'createdBy',
216+
render: (email) => <Typography.Text>{email}</Typography.Text>,
217+
},
218+
]),
219+
);
220+
221+
return (
222+
<BAITable
223+
resizable
224+
rowKey={'id'}
225+
size="small"
226+
dataSource={filteredDeployments}
227+
columns={columns}
228+
pagination={pagination}
229+
scroll={{ x: 'max-content' }}
230+
{...tableProps}
231+
/>
232+
);
233+
};
234+
235+
export default DeploymentList;

0 commit comments

Comments
 (0)