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

@@ -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" ? (

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",
 

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": "每隔",
 

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}/>,
+        ],
+      }}
     />
   );
 };

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}/>,
+        ],
+      }}
     />
   );
 };

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>
+    )
+}