From 104ec9d2eb968f1f568ac447f2395f2a37e2993b Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Sun, 3 Apr 2022 16:50:21 +0800
Subject: [PATCH] feat(change): add filter by times for ui

---
 archguard/src/api/module/gitFile.ts         | 13 +++++++
 archguard/src/pages/change/ChangeDetect.tsx | 39 +++++++++++++++++----
 archguard/src/pages/home/index.less         |  1 +
 3 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/archguard/src/api/module/gitFile.ts b/archguard/src/api/module/gitFile.ts
index f3326730..d68f857a 100644
--- a/archguard/src/api/module/gitFile.ts
+++ b/archguard/src/api/module/gitFile.ts
@@ -31,9 +31,22 @@ export function getGitPathChanges(systemId: String) {
     method: "GET",
   });
 }
+
 export function queryUnstableFiles(systemId: String) {
   return axios<GitPathChange[]>({
     url: `/api/systems/${systemId}/change/unstable-file`,
     method: "GET",
   });
 }
+
+export function queryCommitByRanges(systemId: String, startTime: String, endTime: String) {
+  console.log(systemId, systemId, endTime)
+  return axios<string[]>({
+    url: `/api/systems/${systemId}/change/commit-ids`,
+    params: {
+      startTime,
+      endTime,
+    },
+    method: "GET",
+  });
+}
diff --git a/archguard/src/pages/change/ChangeDetect.tsx b/archguard/src/pages/change/ChangeDetect.tsx
index bd05cb8d..1bba4fc4 100644
--- a/archguard/src/pages/change/ChangeDetect.tsx
+++ b/archguard/src/pages/change/ChangeDetect.tsx
@@ -1,20 +1,31 @@
 import React, { useCallback, useState } from "react";
 import useSystemList from "@/store/global-cache-state/useSystemList";
-import { Select } from "antd";
+import { Button, Select } from "antd";
 import { storage } from "@/store/storage/sessionStorage";
-import { DatePicker} from 'antd';
+import { DatePicker } from 'antd';
+import { queryCommitByRanges } from "@/api/module/gitFile";
+import { useParams } from "umi";
 
 const { RangePicker } = DatePicker;
 
 const ChangeDetect = () => {
   const [systemInfo] = useSystemList();
   const [isInChanging, setIsInChanging] = useState(false);
-  const [systemId, setSystemId] = useState(0);
+  // @ts-ignore
+  const [systemId, setSystemId] = useState(useParams().systemId);
+  const [timeRange, setTimeRange] = useState({
+    startTime: "",
+    endTime: ""
+  });
+  const [commits, setCommits] = useState([])
 
   // @ts-ignore
   const changeTime = useCallback((date, dateString) => {
-    console.log(date, dateString);
-  });
+    setTimeRange({
+      startTime: (date[0].unix() * 1000).toString(),
+      endTime: (date[1].unix() * 1000).toString(),
+    })
+  }, [setTimeRange]);
 
   const onSystemChange = useCallback((index: number) => {
     setIsInChanging(false)
@@ -31,6 +42,12 @@ const ChangeDetect = () => {
     }
   }, [setIsInChanging]);
 
+  const queryChange = useCallback(() => {
+    queryCommitByRanges(systemId, timeRange.startTime, timeRange.endTime).then((res) => {
+      setCommits(res)
+    })
+  }, [systemId, timeRange])
+
   return (
     <div>
       { systemInfo?.value &&
@@ -53,7 +70,17 @@ const ChangeDetect = () => {
             )) }
           </Select>
 
-          <RangePicker showTime onChange={ (date, dateString) => changeTime(date, dateString) } />
+          <RangePicker showTime onChange={ (date, dateString) => changeTime(date, dateString) }/>
+          <Button type="primary" onClick={ () => queryChange() } disabled={ timeRange.startTime === "" }>
+            确定
+          </Button>
+
+          <>
+            { commits.map((commit) => (
+              <p>{ commit }</p>
+            ))
+            }
+          </>
         </>
       }
     </div>
diff --git a/archguard/src/pages/home/index.less b/archguard/src/pages/home/index.less
index 2b05d186..8f8f7aed 100644
--- a/archguard/src/pages/home/index.less
+++ b/archguard/src/pages/home/index.less
@@ -1,3 +1,4 @@
+
 .multiple-system {
   &-container {
     width: 100%;