You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by mi...@apache.org on 2023/08/28 06:27:29 UTC
[incubator-devlake] branch feat-3673 created (now 211785860)
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a change to branch feat-3673
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
at 211785860 feat(config-ui): add pipeline list pgae
This branch includes the following new commits:
new 211785860 feat(config-ui): add pipeline list pgae
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-devlake] 01/01: feat(config-ui): add pipeline list pgae
Posted by mi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
mintsweet pushed a commit to branch feat-3673
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 211785860b7a08803bb6c9ae59bea1752549ac5f
Author: mintsweet <0x...@gmail.com>
AuthorDate: Mon Aug 28 18:27:15 2023 +1200
feat(config-ui): add pipeline list pgae
---
config-ui/src/App.tsx | 5 +
config-ui/src/pages/pipeline/components/index.ts | 1 +
config-ui/src/routes/layout/use-menu.ts | 1 -
.../components/index.ts => routes/pipeline/api.ts} | 10 +-
.../components => routes/pipeline}/index.ts | 6 +-
config-ui/src/routes/pipeline/pipelines.tsx | 114 +++++++++++++++++++++
.../index.ts => routes/pipeline/types.ts} | 27 ++++-
7 files changed, 148 insertions(+), 16 deletions(-)
diff --git a/config-ui/src/App.tsx b/config-ui/src/App.tsx
index d64e7ec27..8efb6da60 100644
--- a/config-ui/src/App.tsx
+++ b/config-ui/src/App.tsx
@@ -30,6 +30,7 @@ import {
} from '@/pages';
import { Layout, loader as layoutLoader } from '@/routes/layout';
import { Error, ErrorEnum } from '@/routes/error';
+import { Pipelines } from '@/routes/pipeline';
const router = createBrowserRouter([
{
@@ -82,6 +83,10 @@ const router = createBrowserRouter([
path: 'blueprints/:bid/:unique',
element: <BlueprintConnectionDetailPage />,
},
+ {
+ path: 'pipelines',
+ element: <Pipelines />,
+ },
],
},
]);
diff --git a/config-ui/src/pages/pipeline/components/index.ts b/config-ui/src/pages/pipeline/components/index.ts
index 8d5dc2b64..826551fda 100644
--- a/config-ui/src/pages/pipeline/components/index.ts
+++ b/config-ui/src/pages/pipeline/components/index.ts
@@ -17,6 +17,7 @@
*/
export * from './context';
+export * from './duration';
export * from './historical';
export * from './info';
export * from './status';
diff --git a/config-ui/src/routes/layout/use-menu.ts b/config-ui/src/routes/layout/use-menu.ts
index 3b0d356a3..7117042cf 100644
--- a/config-ui/src/routes/layout/use-menu.ts
+++ b/config-ui/src/routes/layout/use-menu.ts
@@ -62,7 +62,6 @@ export const useMenu = () => {
title: 'Pipelines',
icon: '',
path: '/pipelines',
- disabled: true,
},
],
},
diff --git a/config-ui/src/pages/pipeline/components/index.ts b/config-ui/src/routes/pipeline/api.ts
similarity index 81%
copy from config-ui/src/pages/pipeline/components/index.ts
copy to config-ui/src/routes/pipeline/api.ts
index 8d5dc2b64..2dcdd1b4a 100644
--- a/config-ui/src/pages/pipeline/components/index.ts
+++ b/config-ui/src/routes/pipeline/api.ts
@@ -16,8 +16,8 @@
*
*/
-export * from './context';
-export * from './historical';
-export * from './info';
-export * from './status';
-export * from './tasks';
+import { request } from '@/utils';
+
+import * as T from './types';
+
+export const getPipelines = (): Promise<{ count: number; pipelines: T.Pipeline[] }> => request('/pipelines');
diff --git a/config-ui/src/pages/pipeline/components/index.ts b/config-ui/src/routes/pipeline/index.ts
similarity index 85%
copy from config-ui/src/pages/pipeline/components/index.ts
copy to config-ui/src/routes/pipeline/index.ts
index 8d5dc2b64..31156aa10 100644
--- a/config-ui/src/pages/pipeline/components/index.ts
+++ b/config-ui/src/routes/pipeline/index.ts
@@ -16,8 +16,4 @@
*
*/
-export * from './context';
-export * from './historical';
-export * from './info';
-export * from './status';
-export * from './tasks';
+export * from './pipelines';
diff --git a/config-ui/src/routes/pipeline/pipelines.tsx b/config-ui/src/routes/pipeline/pipelines.tsx
new file mode 100644
index 000000000..597537869
--- /dev/null
+++ b/config-ui/src/routes/pipeline/pipelines.tsx
@@ -0,0 +1,114 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import { useState, useMemo } from 'react';
+import { ButtonGroup } from '@blueprintjs/core';
+
+import { PageHeader, Table, IconButton } from '@/components';
+import { useRefreshData } from '@/hooks';
+import { formatTime } from '@/utils';
+import { PipelineStatus, PipelineDuration } from '@/pages/pipeline';
+
+import * as API from './api';
+
+export const Pipelines = () => {
+ const [page, setPage] = useState(1);
+ const [pageSize] = useState(20);
+
+ const { ready, data } = useRefreshData(() => API.getPipelines());
+
+ const [dataSource, total] = useMemo(
+ () => [
+ (data?.pipelines ?? []).map((it) => ({
+ id: it.id,
+ status: it.status,
+ beganAt: it.beganAt,
+ finishedAt: it.finishedAt,
+ })),
+ data?.count ?? 0,
+ ],
+ [data],
+ );
+
+ console.log(dataSource);
+
+ return (
+ <PageHeader
+ breadcrumbs={[
+ { name: 'Advanced', path: '/blueprints' },
+ { name: 'Pipelines', path: '/pipelines' },
+ ]}
+ >
+ <Table
+ loading={!ready}
+ columns={[
+ {
+ title: 'Status',
+ dataIndex: 'status',
+ key: 'status',
+ render: (val) => <PipelineStatus status={val} />,
+ },
+ {
+ title: 'Started at',
+ dataIndex: 'beganAt',
+ key: 'beganAt',
+ align: 'center',
+ render: (val) => formatTime(val),
+ },
+ {
+ title: 'Completed at',
+ dataIndex: 'finishedAt',
+ key: 'finishedAt',
+ align: 'center',
+ render: (val) => formatTime(val),
+ },
+ {
+ title: 'Duration',
+ dataIndex: ['status', 'beganAt', 'finishedAt'],
+ key: 'duration',
+ render: ({ status, beganAt, finishedAt }) => (
+ <PipelineDuration status={status} beganAt={beganAt} finishedAt={finishedAt} />
+ ),
+ },
+ {
+ title: '',
+ dataIndex: 'id',
+ key: 'action',
+ align: 'center',
+ render: (id: ID, row) => (
+ <ButtonGroup>
+ <IconButton icon="code" tooltip="View JSON" />
+ <IconButton icon="document" tooltip="Download Logs" />
+ <IconButton icon="chevron-right" tooltip="View Details" />
+ </ButtonGroup>
+ ),
+ },
+ ]}
+ dataSource={dataSource}
+ pagination={{
+ page,
+ pageSize,
+ total,
+ onChange: setPage,
+ }}
+ noData={{
+ text: 'Add new projects to see engineering metrics based on projects.',
+ }}
+ />
+ </PageHeader>
+ );
+};
diff --git a/config-ui/src/pages/pipeline/components/index.ts b/config-ui/src/routes/pipeline/types.ts
similarity index 62%
copy from config-ui/src/pages/pipeline/components/index.ts
copy to config-ui/src/routes/pipeline/types.ts
index 8d5dc2b64..c67950c4b 100644
--- a/config-ui/src/pages/pipeline/components/index.ts
+++ b/config-ui/src/routes/pipeline/types.ts
@@ -16,8 +16,25 @@
*
*/
-export * from './context';
-export * from './historical';
-export * from './info';
-export * from './status';
-export * from './tasks';
+export enum PipeLineStatus {
+ CREATED = 'TASK_CREATED',
+ PENDING = 'TASK_PENDING',
+ ACTIVE = 'TASK_ACTIVE',
+ RUNNING = 'TASK_RUNNING',
+ RERUN = 'TASK_RERUN',
+ COMPLETED = 'TASK_COMPLETED',
+ PARTIAL = 'TASK_PARTIAL',
+ FAILED = 'TASK_FAILED',
+ CANCELLED = 'TASK_CANCELLED',
+}
+
+export type Pipeline = {
+ id: ID;
+ status: PipeLineStatus;
+ beganAt: string | null;
+ finishedAt: string | null;
+ stage: number;
+ finishedTasks: number;
+ totalTasks: number;
+ message: string;
+};