feat: Reservoir Audit log UI draft

react/craco.config.js

@@ -24,15 +24,15 @@ module.exports = {
         '../resources/**/*',
       ],
     };
-    
+
     // Override deprecated middleware options with setupMiddlewares
     const originalOnBefore = devServerConfig.onBeforeSetupMiddleware;
     const originalOnAfter = devServerConfig.onAfterSetupMiddleware;
-    
+
     if (originalOnBefore || originalOnAfter) {
       delete devServerConfig.onBeforeSetupMiddleware;
       delete devServerConfig.onAfterSetupMiddleware;
-      
+
       devServerConfig.setupMiddlewares = (middlewares, devServer) => {
         if (originalOnBefore) {
           originalOnBefore(devServer);
@@ -43,7 +43,7 @@ module.exports = {
         return middlewares;
       };
     }
-    
+
     return devServerConfig;
   },
   babel: {

react/src/App.tsx

@@ -471,9 +471,9 @@ const router = createBrowserRouter([
                 <BAIErrorBoundary>
                   <Suspense
                     fallback={
-                      <Flex direction="column" style={{ maxWidth: 700 }}>
+                      <BAIFlex direction="column" style={{ maxWidth: 700 }}>
                         <Skeleton active />
-                      </Flex>
+                      </BAIFlex>
                     }
                   >
                     <ReservoirPage />

react/src/components/ReservoirArtifactDetail.tsx

@@ -22,7 +22,7 @@ import {
   Divider,
   theme,
 } from 'antd';
-import { Flex } from 'backend.ai-ui';
+import { BAIFlex } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { ArrowLeft, Download, Info, CheckCircle } from 'lucide-react';
@@ -88,7 +88,7 @@ const ReservoirArtifactDetail: React.FC<ReservoirArtifactDetailProps> = ({
 
   return (
     <div>
-      <Flex align="center" style={{ marginBottom: token.marginLG }}>
+      <BAIFlex align="center" style={{ marginBottom: token.marginLG }}>
         <Button
           type="text"
           icon={<ArrowLeft size={18} />}
@@ -98,7 +98,7 @@ const ReservoirArtifactDetail: React.FC<ReservoirArtifactDetailProps> = ({
           type="vertical"
           style={{ marginLeft: 0, marginRight: token.marginMD }}
         />
-        <Flex align="center" gap="xs">
+        <BAIFlex align="center" gap="xs">
           <Title level={3} style={{ margin: 0 }}>
             {artifact.name}
           </Title>
@@ -112,8 +112,8 @@ const ReservoirArtifactDetail: React.FC<ReservoirArtifactDetailProps> = ({
           >
             {artifact.status.toUpperCase()}
           </Tag>
-        </Flex>
-      </Flex>
+        </BAIFlex>
+      </BAIFlex>
 
       {renderPullingProgress()}
 
@@ -214,15 +214,15 @@ const ReservoirArtifactDetail: React.FC<ReservoirArtifactDetailProps> = ({
                 key: 'version',
                 render: (version: string, record: any) => (
                   <div>
-                    <Flex align="center" gap="xs">
+                    <BAIFlex align="center" gap="xs">
                       <BAIText strong>{version}</BAIText>
                       {record.isLatest && <Tag color="blue">LATEST</Tag>}
                       {record.isInstalled && (
                         <Tag color="green" icon={<CheckCircle size={12} />}>
                           INSTALLED
                         </Tag>
                       )}
-                    </Flex>
+                    </BAIFlex>
                     {record.checksum && (
                       <Typography.Text
                         type="secondary"

react/src/components/ReservoirArtifactList.tsx

@@ -7,15 +7,14 @@ import {
 } from '../utils/reservoir';
 import BAIText from './BAIText';
 import {
-  Table,
   Button,
   Tag,
   Typography,
   Tooltip,
   TableColumnsType,
   theme,
 } from 'antd';
-import { Flex } from 'backend.ai-ui';
+import { BAIFlex, BAITable } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { Download } from 'lucide-react';
@@ -66,9 +65,9 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
       dataIndex: 'name',
       key: 'name',
       render: (name: string, record: ReservoirArtifact) => (
-        <Flex align="center" gap="sm">
+        <BAIFlex align="center" gap="sm">
           <div>
-            <Flex gap={'xs'}>
+            <BAIFlex gap={'xs'}>
               <Link
                 to={'/reservoir/' + record.id}
                 style={{
@@ -90,7 +89,7 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
               >
                 {getTypeIcon(record.type, 14)} {record.type.toUpperCase()}
               </Tag>
-            </Flex>
+            </BAIFlex>
             {record.description && (
               <Typography.Text
                 type="secondary"
@@ -100,7 +99,7 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
               </Typography.Text>
             )}
           </div>
-        </Flex>
+        </BAIFlex>
       ),
       sorter: onChangeOrder ? true : false,
       // sortOrder:
@@ -143,7 +142,7 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
       key: 'status',
       render: (status: ReservoirArtifact['status'], record) => (
         // <Tag color={getStatusColor(status)} icon={getStatusIcon(status)}>
-        <Flex>
+        <BAIFlex>
           <Tag
             icon={getStatusIcon(status)}
             color={getStatusColor(status)}
@@ -169,7 +168,7 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
               />
             </Tooltip>
           )}
-        </Flex>
+        </BAIFlex>
       ),
       // width: '12%',
     },
@@ -215,28 +214,28 @@ const ReservoirArtifactList: React.FC<ReservoirArtifactListProps> = ({
     },
   ];
 
-  const handleTableChange = (
-    paginationInfo: any,
-    filters: any,
-    sorter: any,
-  ) => {
-    if (onChangeOrder && sorter.field) {
-      const order =
-        sorter.order === 'ascend' ? sorter.field : `-${sorter.field}`;
-      onChangeOrder(order);
-    }
-  };
+  // const handleTableChange = (
+  //   paginationInfo: any,
+  //   filters: any,
+  //   sorter: any,
+  // ) => {
+  //   if (onChangeOrder && sorter.field) {
+  //     const order =
+  //       sorter.order === 'ascend' ? sorter.field : `-${sorter.field}`;
+  //     onChangeOrder(order);
+  //   }
+  // };
 
   return (
-    <Table
+    <BAITable
+      resizable
       columns={columns}
       dataSource={artifacts}
       rowKey="id"
       loading={loading}
       pagination={pagination}
       rowSelection={rowSelection}
-      onChange={handleTableChange}
-      size="middle"
+      size="small"
       scroll={{ x: 'max-content' }}
       onRow={(record) => ({
         onClick: (event) => {

react/src/components/ReservoirAuditLogList.tsx

@@ -0,0 +1,189 @@
+import type { ReservoirAuditLog } from '../types/reservoir';
+import BAIPropertyFilter from './BAIPropertyFilter';
+import BAIText from './BAIText';
+import { Tag, Typography } from 'antd';
+import { BAIFlex, BAITable } from 'backend.ai-ui';
+import dayjs from 'dayjs';
+import { Activity, CheckCircle, XCircle } from 'lucide-react';
+import React from 'react';
+
+// import { useTranslation } from 'react-i18next';
+
+interface ReservoirAuditLogListProps {
+  auditLogs: ReservoirAuditLog[];
+  loading?: boolean;
+  filterValue?: string;
+  onFilterChange?: (value: string) => void;
+  pagination?: {
+    pageSize: number;
+    current: number;
+    total: number;
+    showTotal?: (total: number) => React.ReactNode;
+    onChange?: (current: number, pageSize: number) => void;
+  };
+  order?: string;
+  onChangeOrder?: (order: string) => void;
+}
+
+const ReservoirAuditLogList: React.FC<ReservoirAuditLogListProps> = ({
+  auditLogs,
+  loading = false,
+  filterValue,
+  onFilterChange,
+  pagination,
+  order,
+  onChangeOrder,
+}) => {
+  // const { t } = useTranslation();
+
+  return (
+    <BAIFlex direction="column" align="stretch" gap={'sm'}>
+      <BAIFlex
+        gap={'sm'}
+        align="start"
+        style={{
+          flexShrink: 1,
+        }}
+        wrap="wrap"
+      >
+        <BAIPropertyFilter
+          filterProperties={[
+            {
+              key: 'artifactName',
+              propertyLabel: 'Artifact',
+              type: 'string',
+            },
+            {
+              key: 'operation',
+              propertyLabel: 'Operation',
+              type: 'string',
+              strictSelection: true,
+              defaultOperator: '==',
+              options: [
+                { label: 'Pull', value: 'pull' },
+                { label: 'Install', value: 'install' },
+                { label: 'Uninstall', value: 'uninstall' },
+                { label: 'Update', value: 'update' },
+                { label: 'Verify', value: 'verify' },
+                { label: 'Delete', value: 'delete' },
+              ],
+            },
+            {
+              key: 'modifier',
+              propertyLabel: 'Modifier',
+              type: 'string',
+            },
+            {
+              key: 'status',
+              propertyLabel: 'Status',
+              type: 'string',
+              strictSelection: true,
+              defaultOperator: '==',
+              options: [
+                { label: 'Success', value: 'success' },
+                { label: 'Failed', value: 'failed' },
+                { label: 'In Progress', value: 'in_progress' },
+              ],
+            },
+          ]}
+          value={filterValue}
+          onChange={onFilterChange}
+        />
+      </BAIFlex>
+      <BAITable
+        size="small"
+        dataSource={auditLogs}
+        rowKey="id"
+        loading={loading}
+        columns={[
+          {
+            title: 'Artifact',
+            dataIndex: 'artifactName',
+            key: 'artifactName',
+            render: (artifactName: string) => (
+              <Typography.Text strong>{artifactName}</Typography.Text>
+            ),
+            sorter: true,
+          },
+          {
+            title: 'Version',
+            dataIndex: 'artifactVersion',
+            key: 'artifactVersion',
+            render: (version: string) =>
+              version ? <BAIText monospace>{version}</BAIText> : '-',
+          },
+          {
+            title: 'Operation',
+            dataIndex: 'operation',
+            key: 'operation',
+            render: (operation: string) => <Tag>{operation.toUpperCase()}</Tag>,
+            sorter: true,
+          },
+          {
+            title: 'Modifier',
+            dataIndex: 'modifier',
+            key: 'modifier',
+            render: (modifier: string) => (
+              <Typography.Text>{modifier}</Typography.Text>
+            ),
+            sorter: true,
+          },
+          {
+            title: 'Timestamp',
+            dataIndex: 'timestamp',
+            key: 'timestamp',
+            render: (timestamp: string) => (
+              <Typography.Text type="secondary">
+                {dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')}
+              </Typography.Text>
+            ),
+            sorter: true,
+          },
+        ]}
+        pagination={pagination}
+        scroll={{ x: 'max-content' }}
+        // order={order}
+        expandable={{
+          expandedRowRender: (record) => (
+            <BAIFlex direction="column" gap="xs" style={{ padding: '8px 0' }}>
+              <BAIFlex align="center" gap="xs">
+                <Typography.Text strong>Status:</Typography.Text>
+                <Tag
+                  color={
+                    record.status === 'success'
+                      ? 'green'
+                      : record.status === 'failed'
+                        ? 'red'
+                        : 'blue'
+                  }
+                  icon={
+                    record.status === 'success' ? (
+                      <CheckCircle size={12} />
+                    ) : record.status === 'failed' ? (
+                      <XCircle size={12} />
+                    ) : (
+                      <Activity size={12} />
+                    )
+                  }
+                >
+                  {record.status.toUpperCase()}
+                </Tag>
+              </BAIFlex>
+              {record.details && (
+                <BAIFlex align="start" gap="xs">
+                  <Typography.Text strong>Details:</Typography.Text>
+                  <Typography.Text type="secondary">
+                    {record.details}
+                  </Typography.Text>
+                </BAIFlex>
+              )}
+            </BAIFlex>
+          ),
+          expandRowByClick: true,
+        }}
+      />
+    </BAIFlex>
+  );
+};
+
+export default ReservoirAuditLogList;