[incubator-devlake] branch main updated: feat(config-ui): add more info to the project list (#5730)

[klesh]

This is an automated email from the ASF dual-hosted git repository.

klesh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git


The following commit(s) were added to refs/heads/main by this push:
     new f42ab2240 feat(config-ui): add more info to the project list (#5730)
f42ab2240 is described below

commit f42ab2240b73c5f17e33f96b6aad754a4b4095dd
Author: 青湛 <0x1304...@gmail.com>
AuthorDate: Mon Jul 24 20:35:27 2023 +1200

    feat(config-ui): add more info to the project list (#5730)
---
 config-ui/src/pages/pipeline/components/index.ts |  1 +
 config-ui/src/pages/project/home/api.ts          |  6 +++
 config-ui/src/pages/project/home/index.tsx       | 65 ++++++++++++++++++++++--
 3 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/config-ui/src/pages/pipeline/components/index.ts 
b/config-ui/src/pages/pipeline/components/index.ts
index f1374d327..8d5dc2b64 100644
--- a/config-ui/src/pages/pipeline/components/index.ts
+++ b/config-ui/src/pages/pipeline/components/index.ts
@@ -19,4 +19,5 @@
 export * from './context';
 export * from './historical';
 export * from './info';
+export * from './status';
 export * from './tasks';
diff --git a/config-ui/src/pages/project/home/api.ts 
b/config-ui/src/pages/project/home/api.ts
index 2ac30a8a0..e8dea41c7 100644
--- a/config-ui/src/pages/project/home/api.ts
+++ b/config-ui/src/pages/project/home/api.ts
@@ -18,6 +18,9 @@
 
 import { request } from '@/utils';
 
+import type { BlueprintType } from '@/pages/blueprint';
+import type { PipelineType } from '@/pages/pipeline';
+
 type GetProjectsParams = {
   page: number;
   pageSize: number;
@@ -26,6 +29,9 @@ type GetProjectsParams = {
 type GetProjectsResponse = {
   projects: Array<{
     name: string;
+    createdAt: string;
+    blueprint: BlueprintType;
+    lastPipeline: PipelineType;
   }>;
   counts: number;
 };
diff --git a/config-ui/src/pages/project/home/index.tsx 
b/config-ui/src/pages/project/home/index.tsx
index e15a76dc3..23150cf07 100644
--- a/config-ui/src/pages/project/home/index.tsx
+++ b/config-ui/src/pages/project/home/index.tsx
@@ -22,12 +22,13 @@ import { Button, InputGroup, Checkbox, Intent, FormGroup } 
from '@blueprintjs/co
 import dayjs from 'dayjs';
 
 import { PageHeader, Table, Dialog, IconButton, toast } from '@/components';
-import { cronPresets } from '@/config';
-import { useRefreshData } from '@/hooks';
+import { getCron, cronPresets } from '@/config';
+import { useConnections, useRefreshData } from '@/hooks';
 import { formatTime, operator } from '@/utils';
+import { PipelineStatus } from '@/pages/pipeline';
 
 import { validName, encodeName } from '../utils';
-import { ModeEnum } from '../../blueprint';
+import { BlueprintType, ModeEnum } from '../../blueprint';
 
 import * as API from './api';
 import * as S from './styled';
@@ -40,11 +41,26 @@ export const ProjectHomePage = () => {
   const [saving, setSaving] = useState(false);
 
   const { ready, data } = useRefreshData(() => API.getProjects({ page: 1, 
pageSize: 200 }), [version]);
+  const { onGet } = useConnections();
 
   const navigate = useNavigate();
 
-  const dataSource = useMemo(() => data?.projects ?? [], [data]);
   const presets = useMemo(() => cronPresets.map((preset) => preset.config), 
[]);
+  const dataSource = useMemo(
+    () =>
+      (data?.projects ?? []).map((it) => {
+        return {
+          name: it.name,
+          connections: it.blueprint.settings.connections,
+          isManual: it.blueprint.isManual,
+          cronConfig: it.blueprint.cronConfig,
+          createdAt: it.createdAt,
+          lastRunCompletedAt: it.lastPipeline?.finishedAt,
+          lastRunStatus: it.lastPipeline?.status,
+        };
+      }),
+    [data],
+  );
 
   const handleShowDialog = () => setIsOpen(true);
   const handleHideDialog = () => {
@@ -116,6 +132,47 @@ export const ProjectHomePage = () => {
               </Link>
             ),
           },
+          {
+            title: 'Data Connections',
+            dataIndex: 'connections',
+            key: 'connections',
+            render: (val: BlueprintType['settings']['connections']) =>
+              !val.length
+                ? 'N/A'
+                : val
+                    .map((it) => {
+                      const cs = onGet(`${it.plugin}-${it.connectionId}`);
+                      return cs.name;
+                    })
+                    .join(', '),
+          },
+          {
+            title: 'Sync Frequency',
+            dataIndex: ['isManual', 'cronConfig'],
+            key: 'frequency',
+            render: ({ isManual, cronConfig }) => {
+              const cron = getCron(isManual, cronConfig);
+              return cron.label;
+            },
+          },
+          {
+            title: 'Created at',
+            dataIndex: 'createdAt',
+            key: 'createdAt',
+            render: (val) => formatTime(val),
+          },
+          {
+            title: 'Last Run Completed at',
+            dataIndex: 'lastRunCompletedAt',
+            key: 'lastRunCompletedAt',
+            render: (val) => (val ? formatTime(val) : '-'),
+          },
+          {
+            title: 'Last Run Status',
+            dataIndex: 'lastRunStatus',
+            key: 'lastRunStatus',
+            render: (val) => (val ? <PipelineStatus status={val} /> : '-'),
+          },
           {
             title: '',
             dataIndex: 'name',