feat: add actions(register, refresh) to cluster selector (#22)

Co-authored-by: yaojiping <yaojiping@infini.ltd>

web/src/components/ClusterSelect/index.jsx

@@ -1,11 +1,17 @@
 import { useState } from "react";
-import { getLocale } from "umi/locale";
+import { getLocale, formatMessage } from "umi/locale";
 
 import DropdownList from "@/common/src/DropdownList";
 import { SearchEngineIcon } from "@/lib/search_engines";
 import { HealthStatusRect } from "../infini/health_status_rect";
+import { connect } from "dva";
+import { hasAuthority } from "@/utils/authority";
 
-export default (props) => {
+export default connect(({ global, loading }) => ({
+  clusterList: global.clusterList,
+  clusterLoading: loading.effects["global/fetchClusterList"],
+  clusterStatus: global.clusterStatus,
+}))((props) => {
   const {
     className,
     popoverClassName,
@@ -17,7 +23,12 @@ export default (props) => {
     clusterStatus,
     onChange,
     mode = "",
+    onRefresh,
+    clusterLoading,
+    dispatch,
+    showCreate = true
   } = props;
+
   const [sorter, setSorter] = useState([]);
   const [filters, setFilters] = useState({
     status: ["green", "yellow", "red"],
@@ -44,6 +55,16 @@ export default (props) => {
         : "unavailable",
     };
   };
+
+  const actions = [];
+  if (hasAuthority("system.cluster:all") && showCreate) {
+    actions.push(
+      <a onClick={() => window.open(`/#/resource/cluster/regist`,"_blank")}>
+        {formatMessage({ id: "cluster.manage.btn.regist" })}
+      </a>
+    );
+  }
+
   return (
     <DropdownList
       getPopupContainer={(triggerNode) => triggerNode.parentNode}
@@ -146,8 +167,22 @@ export default (props) => {
           value: "opensearch",
         },
       ]}
+      onRefresh={() => {
+        dispatch({
+          type: "global/fetchClusterList",
+          payload: {
+            size: 200,
+            name: "",
+          },
+        });
+        dispatch({
+          type: "global/fetchClusterStatus",
+        })
+      }}
+      loading={clusterLoading}
+      actions={actions}
     >
       {children}
     </DropdownList>
   );
-};
+});

web/src/components/GlobalHeader/index.js

@@ -63,8 +63,6 @@ export default class GlobalHeader extends PureComponent {
               width={300}
               dropdownWidth={400}
               selectedCluster={selectedCluster} 
-              clusterList={clusterList}
-              clusterStatus={clusterStatus}
               onChange={(item) => {
                 const rel = this.props
                   .handleSaveGlobalState({

web/src/pages/Agent/Instance/components/AutoEnroll.jsx

@@ -32,8 +32,6 @@ export default ({ onEnroll, loading }) => {
           width={"100%"}
           dropdownWidth={400}
           selectedCluster={selectedCluster}
-          clusterList={clusterList}
-          clusterStatus={clusterStatus}
           onChange={(item) => {
             setSelectedCluster(item);
           }}

web/src/pages/Agent/Instance/components/UnknownAssociate.jsx

@@ -32,8 +32,6 @@ export default ({ onBatchEnroll, loading }) => {
           width={"100%"}
           dropdownWidth={400}
           selectedCluster={selectedCluster}
-          clusterList={clusterList}
-          clusterStatus={clusterStatus}
           onChange={(item) => {
             console.log("onChange item:", item);
             setSelectedCluster(item);

web/src/pages/Alerting/Rule/Form.jsx

@@ -477,8 +477,6 @@ const RuleForm = (props) => {
                 width={300}
                 dropdownWidth={400}
                 selectedCluster={selectedCluster} 
-                clusterList={props.clusterList}
-                clusterStatus={props.clusterStatus}
                 onChange={(item) => {
                   setSelectedCluster(item);
                 }}

web/src/pages/DevTool/Console.tsx

@@ -18,10 +18,10 @@ import { TabTitle } from "./console_tab_title";
 import "@/assets/utility.scss";
 import { Resizable } from "re-resizable";
 import { ResizeBar } from "@/components/infini/resize_bar";
-import NewTabMenu from "./NewTabMenu";
 
 import maximizeSvg from "@/assets/window-maximize.svg";
 import restoreSvg from "@/assets/window-restore.svg";
+import ClusterSelect from "@/components/ClusterSelect";
 
 const MaximizeIcon = (props = {}) => {
   return <img height="14px" width="14px" {...props} src={maximizeSvg} />;
@@ -282,19 +282,6 @@ export const ConsoleUI = ({
     [clusterList]
   );
 
-  // const menu = (
-  //   // <Menu onClick={newTabClick}>
-  //   //   {(clusterList||[]).map((cluster:any)=>{
-  //   //     return <Menu.Item key={cluster.id}>{cluster.name}</Menu.Item>
-  //   //   })}
-  //   // </Menu>
-  //   <NewTabMenu data={clusterList}
-  //   onItemClick={newTabClick}
-  //   clusterStatus={clusterStatus}
-  //   size={10}
-  //   width="300px"/>
-  // );
-
   const rootRef = useRef(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const fullscreenClick = () => {
@@ -340,17 +327,15 @@ export const ConsoleUI = ({
       </>
     ),
     append: (
-      <NewTabMenu
+      <ClusterSelect 
-        data={clusterList}
+        width={34}
-        onItemClick={newTabClick}
+        dropdownWidth={400}
-        clusterStatus={clusterStatus}
+        onChange={(item) => newTabClick(item)}
-        size={10}
-        width="500px"
       >
         <div className="tabbar-icon">
           <Icon type="plus" />
         </div>
-      </NewTabMenu>
+      </ClusterSelect>  
     ),
   };
 
@@ -487,7 +472,7 @@ export const ConsoleUI = ({
   );
 };
 
-export default connect(({ global }) => ({
+export default connect(({ global, loading }) => ({
   selectedCluster: global.selectedCluster,
   clusterList: global.clusterList,
   clusterStatus: global.clusterStatus,

web/src/pages/DevTool/NewTabMenu.jsx

@@ -11,24 +11,31 @@ class NewTabMenu extends React.Component {
   };
   constructor(props) {
     super(props);
-    this.state = {
-      data: this.props.data || [],
-    };
   }
 
   componentDidMount() {}
 
 
   render() {
-    const { clusterStatus } = this.props;
+    const { clusterList, clusterStatus, clusterLoading, dispatch } = this.props;
     return (
       <div>
         <ClusterSelect 
           width={34}
           dropdownWidth={400}
-          clusterList={this.state.data}
+          clusterList={clusterList}
           clusterStatus={clusterStatus}
           onChange={(item) => this.handleItemClick(item)}
+          loading={clusterLoading}
+          onRefresh={() => {
+            dispatch({
+              type: "global/fetchClusterList",
+              payload: {
+                size: 200,
+                name: "",
+              },
+            });
+          }}
         >
           {this.props.children}
         </ClusterSelect>