feat(portal): add push history mock fallback

mycloudnexus · Nov 20, 2024 · b81d88c · b81d88c
1 parent fdf4d82
commit b81d88c
Show file tree

Hide file tree

Showing 5 changed files with 298 additions and 11 deletions.
diff --git a/...p-portal/src/pages/EnvironmentActivityLog/components/PushHistoryList/historyMockData.json b/...p-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
+  }
+}
diff --git a/...p/kraken-app-portal/src/pages/EnvironmentActivityLog/components/PushHistoryList/index.tsx b/...p/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<any>();
+  const size = useSize(ref);
+  const refWrapper = useRef<any>();
+  const sizeWrapper = useSize(refWrapper);
+
+  const columns: ColumnsType<IPushHistory> = [
+    {
+      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)}<span style={{ padding: "0 10px", color: "rgba(0,0,0,0.45)"}}>to</span>{dayjs(log.endTime).format(DAY_FORMAT)}</>,
+    },
+    {
+      key: "pushedBy",
+      title: "Pushed by",
+      render: (log: IPushHistory) => log.pushedBy,
+    },
+    {
+      key: "status",
+      title: "Status",
+      render: (log: IPushHistory) => <Flex gap={5}><Badge status={getStatusBadge(log.status)} />{capitalize(log.status)}</Flex>,
+    }
+  ];
+
+  return (
+    <Flex ref={refWrapper} style={{ height: "100%" }}>
+      <Table
+        dataSource={tableData}
+        columns={columns}
+        rowKey={(record) =>
+          `${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,
+        }}
+      />
+    </Flex>
+  );
+};
+
+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
@@ -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
@@ -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<any>();
   const size = useSize(ref);
@@ -66,10 +64,6 @@ const EnvironmentActivityLog = () => {
   const [mainTabKey, setMainTabKey] = useState<string>('activityLog');
   const { value: isOpen, setTrue: open, setFalse: close } = useBoolean(false);
 
-  useEffect(() => {
-    console.log(pushData)
-  }, [loadingPushHistory])
-
   const {
     tableData,
     queryParams,
@@ -206,16 +200,15 @@ const EnvironmentActivityLog = () => {
         {isOpen && (
           <PushHistoryModal
             isOpen={isOpen}
-            queryParams={envActivityParams}
             envOptions={envOptions}
             onClose={close}
             onOK={() => alert('OK')}
           />
         )}
         <Flex align="center" justify="space-between">
           <Tabs
-            id="tab-mapping"
             activeKey={mainTabKey}
+            hideAdd
             onChange={setMainTabKey}
             items={[
               {
@@ -233,7 +226,7 @@ const EnvironmentActivityLog = () => {
           </Button>}
         </Flex>
 
-        <Flex align="center" className={styles.filterWrapper} ref={ref}>
+        {isActivityLogActive && <Flex align="center" className={styles.filterWrapper} ref={ref}>
           <Form
             initialValues={{ envId }}
             style={{ gap: 5 }}
@@ -288,6 +281,7 @@ const EnvironmentActivityLog = () => {
             </Form.Item>
           </Form>
         </Flex>
+        }
         <div className={styles.tableWrapper}>
           {!isLoading && isActivityLogActive ? <Table
             dataSource={[...tableData]?.sort(
@@ -314,7 +308,7 @@ const EnvironmentActivityLog = () => {
               y: (sizeWrapper?.height ?? 0) - (size?.height ?? 0) - 120,
             }}
           />
-            : <div></div>
+            : <PushHistoryList />
           }
         </div>
       </div>

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
@@ -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[];