From bafef0e65e5a57183ebf7fa265d459f7ff6db019 Mon Sep 17 00:00:00 2001
From: yaojp123 <15989103230@163.com>
Date: Sat, 14 Dec 2024 19:19:17 +0800
Subject: [PATCH] feat: add button `Clean` to `Overview`(node, index) for clean
 data that is unavailable(deleted) (#36)

Co-authored-by: yaojiping <yaojiping@infini.ltd>
---
 web/src/components/Overview/index.tsx         |  3 ++
 web/src/locales/en-US.js                      |  2 ++
 web/src/locales/zh-CN.js                      |  2 ++
 .../pages/Platform/Overview/Indices/index.tsx |  6 ++++
 .../pages/Platform/Overview/Node/index.tsx    |  6 ++++
 .../Overview/components/CleanData/index.jsx   | 31 +++++++++++++++++++
 6 files changed, 50 insertions(+)
 create mode 100644 web/src/pages/Platform/Overview/components/CleanData/index.jsx

diff --git a/web/src/components/Overview/index.tsx b/web/src/components/Overview/index.tsx
index 7af473e5..59f6d33a 100644
--- a/web/src/components/Overview/index.tsx
+++ b/web/src/components/Overview/index.tsx
@@ -250,6 +250,9 @@ export default forwardRef((props: IProps, ref: any) => {
                 ...searchAutoCompleteConfig,
               }}
               {...headerConfig}
+              onCleanSuccess={() => {
+                dispatch({ type: "pagination", value: 1 })
+              }}
             />
             <div className="search-result">
               {dispalyTypeObj[currentTab] == "card" ? (
diff --git a/web/src/locales/en-US.js b/web/src/locales/en-US.js
index 771ce4a3..eb5bea91 100644
--- a/web/src/locales/en-US.js
+++ b/web/src/locales/en-US.js
@@ -119,6 +119,8 @@ export default {
   "form.button.resume": "Resume",
   "form.button.restart": "Restart",
   "form.button.verify": "Verify",
+  "form.button.clean": "Clean",
+  "form.button.clean.confim.desc": "Are you sure to clean data that is {status}?",
   "component.refreshGroup.label.title": "Auto Refresh",
   "component.refreshGroup.label.every": "Every",
 
diff --git a/web/src/locales/zh-CN.js b/web/src/locales/zh-CN.js
index b3ad0a41..bf3f6752 100644
--- a/web/src/locales/zh-CN.js
+++ b/web/src/locales/zh-CN.js
@@ -124,6 +124,8 @@ export default {
   "form.button.resume": "恢复",
   "form.button.restart": "重启",
   "form.button.verify": "校验",
+  "form.button.clean": "清除",
+  "form.button.clean.confim.desc": "确定删除状态为 {status} 的数据吗？",
   "component.refreshGroup.label.title": "自动刷新",
   "component.refreshGroup.label.every": "每隔",
 
diff --git a/web/src/pages/Platform/Overview/Indices/index.tsx b/web/src/pages/Platform/Overview/Indices/index.tsx
index 30b3364b..ae3449f2 100644
--- a/web/src/pages/Platform/Overview/Indices/index.tsx
+++ b/web/src/pages/Platform/Overview/Indices/index.tsx
@@ -4,6 +4,7 @@ import Infos from "./Detail/Infos";
 import Card from "./Card";
 import Table from "./Table";
 import Overview from "@/components/Overview";
+import CleanData from "../components/CleanData";
 
 const facetLabels = {
   "metadata.cluster_name": "cluster",
@@ -74,6 +75,11 @@ export default () => {
         getStatus: (item) =>
           item._source?.metadata?.labels.health_status || "unavailable",
       }}
+      headerConfig={{
+        getExtra: (props) => [
+          <CleanData status="deleted" type="index" onSuccess={props.onCleanSuccess}/>,
+        ],
+      }}
     />
   );
 };
diff --git a/web/src/pages/Platform/Overview/Node/index.tsx b/web/src/pages/Platform/Overview/Node/index.tsx
index e3060961..bd4f1b8f 100644
--- a/web/src/pages/Platform/Overview/Node/index.tsx
+++ b/web/src/pages/Platform/Overview/Node/index.tsx
@@ -5,6 +5,7 @@ import Card from "./Card";
 import Table from "./Table";
 import Overview from "@/components/Overview";
 import Logs from "./Detail/Logs";
+import CleanData from "../components/CleanData";
 
 const facetLabels = {
   "metadata.cluster_name": "cluster",
@@ -84,6 +85,11 @@ export default () => {
         getStatus: (item) =>
           item._source?.metadata?.labels?.status || "unavailable",
       }}
+      headerConfig={{
+        getExtra: (props) => [
+          <CleanData status="unavailable" type="node"  onSuccess={props.onCleanSuccess}/>,
+        ],
+      }}
     />
   );
 };
diff --git a/web/src/pages/Platform/Overview/components/CleanData/index.jsx b/web/src/pages/Platform/Overview/components/CleanData/index.jsx
new file mode 100644
index 00000000..94dfd829
--- /dev/null
+++ b/web/src/pages/Platform/Overview/components/CleanData/index.jsx
@@ -0,0 +1,31 @@
+import { ESPrefix } from "@/services/common";
+import request from "@/utils/request";
+import { Button, Popconfirm } from "antd"
+import { useState } from "react";
+import { formatMessage } from "umi/locale";
+
+export default (props) => {
+
+    const { status, type, onSuccess } = props;
+    const [loading, setLoading] = useState(false)
+
+    const onDelete = async () => {
+        setLoading(true)
+        const res = await request(`${ESPrefix}/metadata/${type}`, {
+            method: 'DELETE'
+        })
+        if (res?.acknowledged) {
+            if (onSuccess) onSuccess()
+        }
+        setLoading(false)
+    }
+
+    return (
+        <Popconfirm 
+            title={formatMessage({id: "form.button.clean.confim.desc"}, { status })}
+            onConfirm={() => onDelete()}
+        >
+            <Button loading={loading} type="danger">{formatMessage({ id: "form.button.clean"})}</Button>
+        </Popconfirm>
+    )
+}
\ No newline at end of file