From b81d88c981f0d60cdd1cc99f7b9e70d6a18c93dd Mon Sep 17 00:00:00 2001 From: Bart K Date: Wed, 20 Nov 2024 17:06:43 +0100 Subject: [PATCH] feat(portal): add push history mock fallback --- .../PushHistoryList/historyMockData.json | 146 ++++++++++++++++++ .../components/PushHistoryList/index.tsx | 130 ++++++++++++++++ .../EnvironmentActivityLog/index.module.scss | 7 + .../pages/EnvironmentActivityLog/index.tsx | 16 +- .../src/utils/types/env.type.ts | 10 ++ 5 files changed, 298 insertions(+), 11 deletions(-) create mode 100644 kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/PushHistoryList/historyMockData.json create mode 100644 kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/PushHistoryList/index.tsx diff --git a/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/PushHistoryList/historyMockData.json b/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/PushHistoryList/historyMockData.json new file mode 100644 index 00000000..a9af287c --- /dev/null +++ b/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/PushHistoryList/historyMockData.json @@ -0,0 +1,146 @@ +{ + "code": 200, + "message": "OK", + "data": { + "data": [ + { + "id": "9c36802a-0118-40a3-8546-b880dc6f7d15", + "createdAt": "2024-11-20T08:40:38.480088Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "DONE" + }, + { + "id": "adc4b3af-176a-49f6-816d-ce8bf3e2b74b", + "createdAt": "2024-11-20T08:34:50.251633Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "DONE" + }, + { + "id": "4bf49afd-ba55-496a-87b7-a73b8d61e92a", + "createdAt": "2024-11-20T08:33:32.517672Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "DONE" + }, + { + "id": "16bae1b6-30fd-46e3-8359-d5ae72481a3b", + "createdAt": "2024-11-20T08:31:29.893193Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "DONE" + }, + { + "id": "5585aafc-c1bb-4a01-a031-064c812311f3", + "createdAt": "2024-11-20T08:29:00.560324Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "FAILED" + }, + { + "id": "2f88d3f6-6d30-4be3-83fc-4ee3196096be", + "createdAt": "2024-11-20T08:24:00.324232Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "FAILED" + }, + { + "id": "94113a72-10ce-4d54-86f1-712125009d89", + "createdAt": "2024-11-20T08:16:02.478587Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "DONE" + }, + { + "id": "f33192fc-a4e6-4fb7-95b0-d06eedb2963a", + "createdAt": "2024-11-20T08:13:52.916233Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "FAILED" + }, + { + "id": "d41acaa8-4336-4fe0-a05f-f87ef0f03066", + "createdAt": "2024-11-20T08:11:30.829552Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "FAILED" + }, + { + "id": "d96d682f-b120-4df7-9b1a-e8bbf0ea33fc", + "createdAt": "2024-11-20T08:10:05.081784Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "FAILED" + }, + { + "id": "80020901-8c3a-4094-a486-075438f99428", + "createdAt": "2024-11-20T08:04:16.387286Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "FAILED" + }, + { + "id": "cbc7df66-a266-4181-b579-8aa1b7cb1eb8", + "createdAt": "2024-11-20T07:49:48.134305Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "FAILED" + }, + { + "id": "fb1dacb4-df05-4e3f-b27f-745360a22b71", + "createdAt": "2024-11-20T07:47:20.778851Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "FAILED" + }, + { + "id": "042c0d7b-a1e5-4c55-96d6-7fd66df133cf", + "createdAt": "2024-11-19T10:56:28.749395Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "DONE" + }, + { + "id": "2c0b16dc-aed6-4716-a45f-0b5de238f695", + "createdAt": "2024-11-19T10:15:09.134126Z", + "envName": "stage", + "startTime": "2024-10-09T23:00:00Z", + "endTime": "2024-10-11T22:59:59Z", + "pushedBy": "fc5f6165-aa20-4798-a9ee-78afbe3cf06d", + "status": "DONE" + } + ], + "total": 15, + "page": 0, + "size": 20 + } +} \ No newline at end of file diff --git a/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/PushHistoryList/index.tsx b/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/PushHistoryList/index.tsx new file mode 100644 index 00000000..40931276 --- /dev/null +++ b/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/PushHistoryList/index.tsx @@ -0,0 +1,130 @@ +import { useCommonListProps } from "@/hooks/useCommonListProps"; +import useSize from "@/hooks/useSize"; +import { DEFAULT_PAGING } from "@/utils/constants/common"; +import { IPushHistory } from "@/utils/types/env.type"; +import { + Badge, + Flex, + Table, +} from "antd"; +import { ColumnsType } from "antd/es/table"; +import dayjs from "dayjs"; +import { useEffect, useRef } from "react"; +import styles from "../../index.module.scss"; +import { useGetPushActivityLogHistory } from '@/hooks/pushApiEvent'; +import mockData from "./historyMockData.json" +import { DAY_FORMAT, DAY_TIME_FORMAT_NORMAL } from '@/utils/constants/format'; +import { capitalize } from 'lodash'; +import { PresetStatusColorType } from 'antd/es/_util/colors'; + + +const initPagination = { + pageSize: DEFAULT_PAGING.size, + current: DEFAULT_PAGING.page, +}; + +const getStatusBadge = (value: string): PresetStatusColorType => { + let result; + switch (value) { + case "DONE": + result = "success" + break; + case "FAILED": + result = "error" + break; + case "IN PROGRESS": + result = "processing"; + break; + default: + result = "default"; + break; + } + return result as PresetStatusColorType; +} + +const PushHistoryList = () => { + const { + tableData, + pagination, + setPagination, + setTableData, + handlePaginationChange, + handlePaginationShowSizeChange, + } = useCommonListProps({}, initPagination); + + const { data, isLoading } = useGetPushActivityLogHistory(); + useEffect(() => { + if (!isLoading) { + const updatedTableData = data?.data ?? mockData.data.data; + const updatedPagination = { + current: data?.page ?? initPagination.current, + pageSize: data?.size ?? initPagination.pageSize, + total: data?.total, + }; + setPagination(updatedPagination); + setTableData(updatedTableData!); + } + }, [data, isLoading]); + + + const ref = useRef(); + const size = useSize(ref); + const refWrapper = useRef(); + const sizeWrapper = useSize(refWrapper); + + const columns: ColumnsType = [ + { + key: "createdAt", + title: "Push time", + render: (log: IPushHistory) => dayjs(log.createdAt).format(DAY_TIME_FORMAT_NORMAL), + }, + { + key: "envName", + title: "Environment", + render: (log: IPushHistory) => capitalize(log.envName), + }, + { + title: "Time range", + render: (log: IPushHistory) => + <>{dayjs(log.startTime).format(DAY_FORMAT)}to{dayjs(log.endTime).format(DAY_FORMAT)}, + }, + { + key: "pushedBy", + title: "Pushed by", + render: (log: IPushHistory) => log.pushedBy, + }, + { + key: "status", + title: "Status", + render: (log: IPushHistory) => {capitalize(log.status)}, + } + ]; + + return ( + + + `${record.id}_${record.createdAt}` + } + loading={isLoading} + className={styles.table} + pagination={{ + pageSize: pagination.pageSize, + current: pagination.current + 1, + onChange: handlePaginationChange, + total: pagination.total, + showSizeChanger: true, + onShowSizeChange: handlePaginationShowSizeChange, + showTotal: (total) => `Total ${total} items`, + }} + scroll={{ + y: (sizeWrapper?.height ?? 0) - (size?.height ?? 0) - 120, + }} + /> + + ); +}; + +export default PushHistoryList; diff --git a/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/index.module.scss b/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/index.module.scss index 2eb677d9..9ed375aa 100644 --- a/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/index.module.scss +++ b/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/index.module.scss @@ -24,6 +24,7 @@ } } + .table { max-width: 100%; @@ -100,6 +101,12 @@ padding: 16px 20px; display: flex; flex-direction: column; + + :global { + .ant-tabs-nav-operations { + display: none !important; + } + } } .inputPath { diff --git a/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/index.tsx b/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/index.tsx index 8a19c2fc..bdf0eeb1 100644 --- a/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/index.tsx +++ b/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/index.tsx @@ -25,9 +25,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useParams } from "react-router-dom"; import ActivityDetailModal from "./components/ActivityDetailModal"; import styles from "./index.module.scss"; -import { useGetPushActivityLogHistory } from '@/hooks/pushApiEvent'; import PushHistoryModal from './components/PushHistoryModal'; import { useBoolean } from 'usehooks-ts'; +import PushHistoryList from './components/PushHistoryList'; const { RangePicker } = DatePicker; @@ -56,8 +56,6 @@ const EnvironmentActivityLog = () => { const { currentProduct } = useAppStore(); const { data: envData, isLoading: loadingEnv } = useGetProductEnvs(currentProduct); - const { data: pushData, isLoading: loadingPushHistory } = - useGetPushActivityLogHistory(); const [form] = Form.useForm(); const ref = useRef(); const size = useSize(ref); @@ -66,10 +64,6 @@ const EnvironmentActivityLog = () => { const [mainTabKey, setMainTabKey] = useState('activityLog'); const { value: isOpen, setTrue: open, setFalse: close } = useBoolean(false); - useEffect(() => { - console.log(pushData) - }, [loadingPushHistory]) - const { tableData, queryParams, @@ -206,7 +200,6 @@ const EnvironmentActivityLog = () => { {isOpen && ( alert('OK')} @@ -214,8 +207,8 @@ const EnvironmentActivityLog = () => { )} { } - + {isActivityLogActive &&
{ + }
{!isLoading && isActivityLogActive ?
{ y: (sizeWrapper?.height ?? 0) - (size?.height ?? 0) - 120, }} /> - :
+ : } diff --git a/kraken-app/kraken-app-portal/src/utils/types/env.type.ts b/kraken-app/kraken-app-portal/src/utils/types/env.type.ts index cb5679d9..a9b70cd6 100644 --- a/kraken-app/kraken-app-portal/src/utils/types/env.type.ts +++ b/kraken-app/kraken-app-portal/src/utils/types/env.type.ts @@ -31,6 +31,16 @@ export interface IActivityLog { callSeq: number; } +export interface IPushHistory { + id: string; + createdAt: string; + envName: string; + startTime: string; + endTime: string; + pushedBy: string; + status: string +}; + export interface IActivityDetail { main: IActivityLog; branches: IActivityLog[];