Skip to content

Commit 1612eab

Browse files
yomybabyyomybaby
committed
feat: Reservoir Audit log UI draft
1 parent e52d727 commit 1612eab

File tree

4 files changed

+627
-127
lines changed

4 files changed

+627
-127
lines changed

‎react/src/components/ReservoirArtifactList.tsx‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import {
55
getTypeColor,
66
getTypeIcon,
77
} from '../utils/reservoir';
8+
import BAITable from './BAITable';
89
import BAIText from './BAIText';
910
import {
10-
Table,
1111
Button,
1212
Tag,
1313
Typography,
@@ -215,28 +215,29 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
215215
},
216216
];
217217

218-
const handleTableChange = (
219-
paginationInfo: any,
220-
filters: any,
221-
sorter: any,
222-
) => {
223-
if (onChangeOrder && sorter.field) {
224-
const order =
225-
sorter.order === 'ascend' ? sorter.field : `-${sorter.field}`;
226-
onChangeOrder(order);
227-
}
228-
};
218+
// const handleTableChange = (
219+
// paginationInfo: any,
220+
// filters: any,
221+
// sorter: any,
222+
// ) => {
223+
// if (onChangeOrder && sorter.field) {
224+
// const order =
225+
// sorter.order === 'ascend' ? sorter.field : `-${sorter.field}`;
226+
// onChangeOrder(order);
227+
// }
228+
// };
229229

230230
return (
231-
<Table
231+
<BAITable
232+
neoStyle
233+
resizable
232234
columns={columns}
233235
dataSource={artifacts}
234236
rowKey="id"
235237
loading={loading}
236238
pagination={pagination}
237239
rowSelection={rowSelection}
238-
onChange={handleTableChange}
239-
size="middle"
240+
size="small"
240241
scroll={{ x: 'max-content' }}
241242
onRow={(record) => ({
242243
onClick: (event) => {

‎react/src/components/ReservoirAuditLogList.tsx‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
import type { ReservoirAuditLog } from '../types/reservoir';
2+
import BAIPropertyFilter from './BAIPropertyFilter';
3+
import BAITable from './BAITable';
4+
import BAIText from './BAIText';
5+
import { Tag, Typography } from 'antd';
6+
import { Flex } from 'backend.ai-ui';
7+
import dayjs from 'dayjs';
8+
import { Activity, CheckCircle, XCircle } from 'lucide-react';
9+
import React from 'react';
10+
11+
// import { useTranslation } from 'react-i18next';
12+
13+
interface ReservoirAuditLogListProps {
14+
auditLogs: ReservoirAuditLog[];
15+
loading?: boolean;
16+
filterValue?: string;
17+
onFilterChange?: (value: string) => void;
18+
pagination?: {
19+
pageSize: number;
20+
current: number;
21+
total: number;
22+
showTotal?: (total: number) => React.ReactNode;
23+
onChange?: (current: number, pageSize: number) => void;
24+
};
25+
order?: string;
26+
onChangeOrder?: (order: string) => void;
27+
}
28+
29+
const ReservoirAuditLogList: React.FC<ReservoirAuditLogListProps> = ({
30+
auditLogs,
31+
loading = false,
32+
filterValue,
33+
onFilterChange,
34+
pagination,
35+
order,
36+
onChangeOrder,
37+
}) => {
38+
// const { t } = useTranslation();
39+
40+
return (
41+
<Flex direction="column" align="stretch" gap={'sm'}>
42+
<Flex
43+
gap={'sm'}
44+
align="start"
45+
style={{
46+
flexShrink: 1,
47+
}}
48+
wrap="wrap"
49+
>
50+
<BAIPropertyFilter
51+
filterProperties={[
52+
{
53+
key: 'artifactName',
54+
propertyLabel: 'Artifact',
55+
type: 'string',
56+
},
57+
{
58+
key: 'operation',
59+
propertyLabel: 'Operation',
60+
type: 'string',
61+
strictSelection: true,
62+
defaultOperator: '==',
63+
options: [
64+
{ label: 'Pull', value: 'pull' },
65+
{ label: 'Install', value: 'install' },
66+
{ label: 'Uninstall', value: 'uninstall' },
67+
{ label: 'Update', value: 'update' },
68+
{ label: 'Verify', value: 'verify' },
69+
{ label: 'Delete', value: 'delete' },
70+
],
71+
},
72+
{
73+
key: 'modifier',
74+
propertyLabel: 'Modifier',
75+
type: 'string',
76+
},
77+
{
78+
key: 'status',
79+
propertyLabel: 'Status',
80+
type: 'string',
81+
strictSelection: true,
82+
defaultOperator: '==',
83+
options: [
84+
{ label: 'Success', value: 'success' },
85+
{ label: 'Failed', value: 'failed' },
86+
{ label: 'In Progress', value: 'in_progress' },
87+
],
88+
},
89+
]}
90+
value={filterValue}
91+
onChange={onFilterChange}
92+
/>
93+
</Flex>
94+
<BAITable
95+
neoStyle
96+
size="small"
97+
dataSource={auditLogs}
98+
rowKey="id"
99+
loading={loading}
100+
columns={[
101+
{
102+
title: 'Artifact',
103+
dataIndex: 'artifactName',
104+
key: 'artifactName',
105+
render: (artifactName: string) => (
106+
<Typography.Text strong>{artifactName}</Typography.Text>
107+
),
108+
sorter: true,
109+
},
110+
{
111+
title: 'Version',
112+
dataIndex: 'artifactVersion',
113+
key: 'artifactVersion',
114+
render: (version: string) =>
115+
version ? <BAIText monospace>{version}</BAIText> : '-',
116+
},
117+
{
118+
title: 'Operation',
119+
dataIndex: 'operation',
120+
key: 'operation',
121+
render: (operation: string) => <Tag>{operation.toUpperCase()}</Tag>,
122+
sorter: true,
123+
},
124+
{
125+
title: 'Modifier',
126+
dataIndex: 'modifier',
127+
key: 'modifier',
128+
render: (modifier: string) => (
129+
<Typography.Text>{modifier}</Typography.Text>
130+
),
131+
sorter: true,
132+
},
133+
{
134+
title: 'Timestamp',
135+
dataIndex: 'timestamp',
136+
key: 'timestamp',
137+
render: (timestamp: string) => (
138+
<Typography.Text type="secondary">
139+
{dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')}
140+
</Typography.Text>
141+
),
142+
sorter: true,
143+
},
144+
]}
145+
pagination={pagination}
146+
scroll={{ x: 'max-content' }}
147+
// order={order}
148+
expandable={{
149+
expandedRowRender: (record) => (
150+
<Flex direction="column" gap="xs" style={{ padding: '8px 0' }}>
151+
<Flex align="center" gap="xs">
152+
<Typography.Text strong>Status:</Typography.Text>
153+
<Tag
154+
color={
155+
record.status === 'success'
156+
? 'green'
157+
: record.status === 'failed'
158+
? 'red'
159+
: 'blue'
160+
}
161+
icon={
162+
record.status === 'success' ? (
163+
<CheckCircle size={12} />
164+
) : record.status === 'failed' ? (
165+
<XCircle size={12} />
166+
) : (
167+
<Activity size={12} />
168+
)
169+
}
170+
>
171+
{record.status.toUpperCase()}
172+
</Tag>
173+
</Flex>
174+
{record.details && (
175+
<Flex align="start" gap="xs">
176+
<Typography.Text strong>Details:</Typography.Text>
177+
<Typography.Text type="secondary">
178+
{record.details}
179+
</Typography.Text>
180+
</Flex>
181+
)}
182+
</Flex>
183+
),
184+
expandRowByClick: true,
185+
}}
186+
/>
187+
</Flex>
188+
);
189+
};
190+
191+
export default ReservoirAuditLogList;

0 commit comments

Comments
 (0)