From ccd44c9b7d223adbf1e0d2162cf2077d297de129 Mon Sep 17 00:00:00 2001 From: yaojp123 <15989103230@163.com> Date: Tue, 10 Dec 2024 19:40:19 +0800 Subject: [PATCH] feat: add actions(register, refresh) to cluster selector (#22) Co-authored-by: yaojiping --- web/src/components/ClusterSelect/index.jsx | 41 +++++++++++++++++-- web/src/components/GlobalHeader/index.js | 2 - .../Agent/Instance/components/AutoEnroll.jsx | 2 - .../Instance/components/UnknownAssociate.jsx | 2 - web/src/pages/Alerting/Rule/Form.jsx | 2 - web/src/pages/DevTool/Console.tsx | 29 ++++--------- web/src/pages/DevTool/NewTabMenu.jsx | 17 +++++--- 7 files changed, 57 insertions(+), 38 deletions(-) diff --git a/web/src/components/ClusterSelect/index.jsx b/web/src/components/ClusterSelect/index.jsx index ed6199c2..84853f45 100644 --- a/web/src/components/ClusterSelect/index.jsx +++ b/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( + window.open(`/#/resource/cluster/regist`,"_blank")}> + {formatMessage({ id: "cluster.manage.btn.regist" })} + + ); + } + return ( 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} ); -}; +}); diff --git a/web/src/components/GlobalHeader/index.js b/web/src/components/GlobalHeader/index.js index 65c4f590..92c5d267 100644 --- a/web/src/components/GlobalHeader/index.js +++ b/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({ diff --git a/web/src/pages/Agent/Instance/components/AutoEnroll.jsx b/web/src/pages/Agent/Instance/components/AutoEnroll.jsx index 06ef3ffb..448a8703 100644 --- a/web/src/pages/Agent/Instance/components/AutoEnroll.jsx +++ b/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); }} diff --git a/web/src/pages/Agent/Instance/components/UnknownAssociate.jsx b/web/src/pages/Agent/Instance/components/UnknownAssociate.jsx index b0884fb1..5cad6525 100644 --- a/web/src/pages/Agent/Instance/components/UnknownAssociate.jsx +++ b/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); diff --git a/web/src/pages/Alerting/Rule/Form.jsx b/web/src/pages/Alerting/Rule/Form.jsx index 4030aa24..2dbb01f2 100644 --- a/web/src/pages/Alerting/Rule/Form.jsx +++ b/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); }} diff --git a/web/src/pages/DevTool/Console.tsx b/web/src/pages/DevTool/Console.tsx index e7762997..a9d51488 100644 --- a/web/src/pages/DevTool/Console.tsx +++ b/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 ; @@ -282,19 +282,6 @@ export const ConsoleUI = ({ [clusterList] ); - // const menu = ( - // // - // // {(clusterList||[]).map((cluster:any)=>{ - // // return {cluster.name} - // // })} - // // - // - // ); - const rootRef = useRef(null); const [isFullscreen, setIsFullscreen] = useState(false); const fullscreenClick = () => { @@ -340,17 +327,15 @@ export const ConsoleUI = ({ ), append: ( - newTabClick(item)} >
- + ), }; @@ -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, diff --git a/web/src/pages/DevTool/NewTabMenu.jsx b/web/src/pages/DevTool/NewTabMenu.jsx index 8031b259..fd9502be 100644 --- a/web/src/pages/DevTool/NewTabMenu.jsx +++ b/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 (
this.handleItemClick(item)} + loading={clusterLoading} + onRefresh={() => { + dispatch({ + type: "global/fetchClusterList", + payload: { + size: 200, + name: "", + }, + }); + }} > {this.props.children}