From ea73199b588bcb661a54543926c6457829fc42d5 Mon Sep 17 00:00:00 2001
From: "xiayu.lyt" <xiayu.lyt@alibaba-inc.com>
Date: Tue, 6 Feb 2024 15:14:01 +0800
Subject: [PATCH] feature(webui): sort diagnosis & packet capturing histories
 in descending order

Signed-off-by: xiayu.lyt <xiayu.lyt@alibaba-inc.com>
---
 pkg/controller/service/diagnose.go            |  2 +-
 .../components/captureResult/index.tsx        | 35 ++++++++++---------
 webui/src/pages/capture/index.tsx             |  6 ++--
 webui/src/services/capture.ts                 |  6 +++-
 4 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/pkg/controller/service/diagnose.go b/pkg/controller/service/diagnose.go
index 90d5e3eb..ee748788 100644
--- a/pkg/controller/service/diagnose.go
+++ b/pkg/controller/service/diagnose.go
@@ -59,7 +59,7 @@ func (c *controller) DiagnoseList(_ context.Context) ([]DiagnoseTaskResult, erro
 	}
 
 	slices.SortFunc(taskSlice, func(a, b DiagnoseTaskResult) bool {
-		return a.TaskID < b.TaskID
+		return a.TaskID > b.TaskID
 	})
 	return taskSlice, nil
 }
diff --git a/webui/src/pages/capture/components/captureResult/index.tsx b/webui/src/pages/capture/components/captureResult/index.tsx
index f5c68618..288ce6db 100644
--- a/webui/src/pages/capture/components/captureResult/index.tsx
+++ b/webui/src/pages/capture/components/captureResult/index.tsx
@@ -1,16 +1,16 @@
-import {Table} from '@alifd/next';
-import {CaptureResult} from "@/services/capture";
-import {requestConfig} from "@/app";
+import { Table } from '@alifd/next';
+import { CaptureResult } from "@/services/capture";
+import { requestConfig } from "@/app";
 
 
-const convertToTable = (res)=> {
+const convertToTable = (res) => {
   return res.map((i: CaptureResult[]) => {
-      return {
-        capture_id: i[0].task_id,
-        capture_names: i.map((capture) => capture.spec.task_type+": "+capture.spec.name).join(", "),
-        capture_results: i
-      }
-    })
+    return {
+      capture_id: i[0].task_id,
+      capture_names: i.map((capture) => capture.spec.task_type + ": " + capture.spec.name).join(", "),
+      capture_results: i
+    }
+  })
 }
 
 interface CaptureTableProps {
@@ -19,19 +19,20 @@ interface CaptureTableProps {
 
 const CaptureHistory: React.FunctionComponent<CaptureTableProps> = (props: CaptureTableProps) => {
   const render = (value, index, record) => {
-    if (record.capture_results.reduce((prev, item)=> {
-      return prev && item.status==="success"},true)) {
-      return <a href={requestConfig.baseURL+"/controller/capture/"+record.capture_id+"/download"} target="_blank">Download</a>;
-    } else if (record.capture_results.reduce((prev, item)=>{return prev || item.status==="running"}, false)) {
-      return <span style={{color: "green"}}>Running</span>;
+    if (record.capture_results.reduce((prev, item) => {
+      return prev && item.status === "success"
+    }, true)) {
+      return <a href={requestConfig.baseURL + "/controller/capture/" + record.capture_id + "/download"} target="_blank">Download</a>;
+    } else if (record.capture_results.reduce((prev, item) => { return prev || item.status === "running" }, false)) {
+      return <span style={{ color: "green" }}>Running</span>;
     } else {
-      return <div style={{color: "red"}}>Failed {record.capture_results.map(item => item.message).join(",")}</div>
+      return <div style={{ color: "red" }}>Failed {record.capture_results.map(item => item.message).join(",")}</div>
     }
   };
   return (
     <div>
       <Table
-        dataSource={convertToTable(props.captureResult.filter((i)=>i!=null))}
+        dataSource={convertToTable(props.captureResult.filter((i) => i != null))}
       >
         <Table.Column title="Id" dataIndex="capture_id" sortable />
         <Table.Column title="CaptureObjects" dataIndex="capture_names" />
diff --git a/webui/src/pages/capture/index.tsx b/webui/src/pages/capture/index.tsx
index 785d6d7e..64aa4fb9 100644
--- a/webui/src/pages/capture/index.tsx
+++ b/webui/src/pages/capture/index.tsx
@@ -27,7 +27,7 @@ const submitCapture = (props, callback) => {
 }
 
 export default function Capture() {
-  const [captureList, setCaptureList] = useState([])
+  const [captureList, setCaptureList] = useState<any[]>([])
   const [abortController, setAbortController] = useState<AbortController | null>(null);
   const [refreshCount, setRefreshCount] = useState(0);
   const refreshCaptureList = () => {
@@ -40,9 +40,9 @@ export default function Capture() {
     captureService.listCaptures(signal)
       .then(res => {
         if (res == null) {
-          res = []
+          res = {}
         }
-        setCaptureList(Object.values(res))
+        setCaptureList(Object.values(res).toSorted((a, b) => b[0]?.task_id - a[0]?.task_id))
       })
       .catch(err => {
         Message.error(`Error when fetching diagnosis: ${getErrorMessage(err)}`)
diff --git a/webui/src/services/capture.ts b/webui/src/services/capture.ts
index 7d8a3ca5..e115dad0 100644
--- a/webui/src/services/capture.ts
+++ b/webui/src/services/capture.ts
@@ -14,6 +14,10 @@ export interface CaptureResult {
     message: string
 }
 
+export interface Captures {
+    [key: number]: CaptureResult[]
+}
+
 export default {
     async createCapture(task: CaptureTask): Promise<string> {
         return await request({
@@ -22,7 +26,7 @@ export default {
             data: task,
         });
     },
-    async listCaptures(signal?: AbortSignal): Promise<string> {
+    async listCaptures(signal?: AbortSignal): Promise<Captures> {
         return await request({
             url: '/controller/captures',
             method: 'GET',