diff --git a/web/config/router.config.js b/web/config/router.config.js index 867d3e46..8349240b 100644 --- a/web/config/router.config.js +++ b/web/config/router.config.js @@ -448,7 +448,7 @@ export default [ hideInMenu: true, }, { - path: "/system/cluster/edit", + path: "/system/cluster/:id/edit", name: "editCluster", component: "./System/Cluster/Form", hideInMenu: true, diff --git a/web/src/components/GlobalHeader/DropdownSelect.js b/web/src/components/GlobalHeader/DropdownSelect.js index 26a2fd4c..845f9ecf 100644 --- a/web/src/components/GlobalHeader/DropdownSelect.js +++ b/web/src/components/GlobalHeader/DropdownSelect.js @@ -16,6 +16,7 @@ class DropdownSelect extends React.Component { overlayVisible: false, data: (props.data || []).slice(0, props.size), dataSource: [...props.data], + selectedIndex: -1, }; } @@ -75,9 +76,38 @@ class DropdownSelect extends React.Component { hasMore: newData.length > this.props.size, }); }; + selectOffset = (offset) => { + let { selectedIndex, data } = this.state; + const len = data.length; + selectedIndex = (selectedIndex + offset + len) % len; + this.setState({ + selectedIndex, + }); + }; + + onKeyDown = (e) => { + const { which } = e; + switch (which) { + case 38: + this.selectOffset(-1); + e.preventDefault(); + e.stopPropagation(); + break; + case 40: + this.selectOffset(1); + e.stopPropagation(); + break; + case 13: + const { data, selectedIndex } = this.state; + if (selectedIndex > -1) { + this.handleItemClick(data[selectedIndex]); + this.setState({ overlayVisible: false }); + } + break; + } + }; render() { - let me = this; const { labelField, clusterStatus } = this.props; let value = this.props.value || this.state.value; let displayVaue = value[labelField]; @@ -86,6 +116,10 @@ class DropdownSelect extends React.Component {
{ + this.searchInputRef.focus(); + }} + onKeyDown={this.onKeyDown} >
{ + this.searchInputRef = ref; + }} />
)} - {(this.state.data || []).map((item) => { + {(this.state.data || []).map((item, idx) => { // return
//
+ ) : !clusterMonitored ? ( +
+
+ Cluster is not monitored.{" "} + +
+
+ Last data collection time: {clusterStats?.timestamp} +
+
) : null} + {/* + + */}
diff --git a/web/src/pages/Cluster/components/index_metric.jsx b/web/src/pages/Cluster/components/index_metric.jsx index 19619721..a5d2b3a4 100644 --- a/web/src/pages/Cluster/components/index_metric.jsx +++ b/web/src/pages/Cluster/components/index_metric.jsx @@ -23,10 +23,10 @@ import MetricContainer from "./metric_container"; import _ from "lodash"; const gorupOrder = [ - "storage", - "document", "operations", "latency", + "storage", + "document", "memory", "cache", ]; diff --git a/web/src/pages/Cluster/components/node_metric.jsx b/web/src/pages/Cluster/components/node_metric.jsx index 2399c137..8749d9cb 100644 --- a/web/src/pages/Cluster/components/node_metric.jsx +++ b/web/src/pages/Cluster/components/node_metric.jsx @@ -23,10 +23,10 @@ import MetricContainer from "./metric_container"; import _ from "lodash"; const gorupOrder = [ - "system", - "transport", "operations", "latency", + "system", + "transport", "storage", "document", "http", diff --git a/web/src/pages/Cluster/components/queue_metric.jsx b/web/src/pages/Cluster/components/queue_metric.jsx index 6cb5e011..b53443bd 100644 --- a/web/src/pages/Cluster/components/queue_metric.jsx +++ b/web/src/pages/Cluster/components/queue_metric.jsx @@ -23,8 +23,8 @@ import MetricContainer from "./metric_container"; import _ from "lodash"; const gorupOrder = [ - "thread_pool_search", "thread_pool_write", + "thread_pool_search", "thread_pool_index", "thread_pool_bulk", "thread_pool_get", diff --git a/web/src/pages/DevTool/Console.tsx b/web/src/pages/DevTool/Console.tsx index 8c50b2f3..11a63535 100644 --- a/web/src/pages/DevTool/Console.tsx +++ b/web/src/pages/DevTool/Console.tsx @@ -436,6 +436,7 @@ export const ConsoleUI = ({ paneKey={pane.key} saveEditorContent={saveEditorContent} initialText={pane.content} + isActive={pane.key == tabState.activeKey} /> {/* {pane.content} */} diff --git a/web/src/pages/System/Cluster/Form.js b/web/src/pages/System/Cluster/Form.js index 6cc377af..60292333 100644 --- a/web/src/pages/System/Cluster/Form.js +++ b/web/src/pages/System/Cluster/Form.js @@ -25,23 +25,36 @@ import { formatMessage } from "umi/locale"; class ClusterForm extends React.Component { constructor(props) { super(props); - let editValue = this.props.clusterConfig.editValue; - let needAuth = false; - if ( - editValue.basic_auth && - typeof editValue.basic_auth.username !== "undefined" && - editValue.basic_auth.username !== "" - ) { - needAuth = true; - } + this.state = { confirmDirty: false, - needAuth: needAuth, isLoading: false, }; } + componentDidMount() { //console.log(this.props.clusterConfig.editMode) + const { match, dispatch, clusterConfig } = this.props; + dispatch({ + type: "clusterConfig/fetchCluster", + payload: { + id: match.params.id, + }, + }).then((res) => { + if (res && res.found) { + let editValue = res._source; + let needAuth = false; + if ( + editValue.basic_auth && + typeof editValue.basic_auth.username !== "undefined" + ) { + needAuth = true; + } + this.setState({ + needAuth: needAuth, + }); + } + }); } compareToFirstPassword = (rule, value, callback) => { @@ -62,7 +75,7 @@ class ClusterForm extends React.Component { }; handleSubmit = () => { - const { form, dispatch, clusterConfig } = this.props; + const { form, dispatch, clusterConfig, history } = this.props; form.validateFields((errors, values) => { if (errors) { return; @@ -100,7 +113,8 @@ class ClusterForm extends React.Component { }).then(function(rel) { if (rel) { message.success("修改成功"); - router.push("/system/cluster"); + // router.push("/system/cluster"); + history.go(-1); } }); } @@ -256,7 +270,7 @@ class ClusterForm extends React.Component { })} > } unCheckedChildren={} diff --git a/web/src/pages/System/Cluster/Index.js b/web/src/pages/System/Cluster/Index.js index d283371f..d1e485a1 100644 --- a/web/src/pages/System/Cluster/Index.js +++ b/web/src/pages/System/Cluster/Index.js @@ -178,7 +178,7 @@ class Index extends React.Component { render: (text, record) => (
{ this.handleEditClick(record); }} diff --git a/web/src/pages/System/Cluster/models/cluster.js b/web/src/pages/System/Cluster/models/cluster.js index 5ad9868e..7297483e 100644 --- a/web/src/pages/System/Cluster/models/cluster.js +++ b/web/src/pages/System/Cluster/models/cluster.js @@ -4,6 +4,7 @@ import { updateClusterConfig, deleteClusterConfig, tryConnect, + getClusterConfig, } from "@/services/cluster"; import { message } from "antd"; import { formatESSearchResult } from "@/lib/elasticsearch/util"; @@ -36,6 +37,23 @@ export default { }, }); }, + *fetchCluster({ payload }, { call, put, select }) { + let res = yield call(getClusterConfig, payload); + if (res.error) { + message.error(res.error); + return false; + } + yield put({ + type: "saveData", + payload: { + editValue: { + ...res._source, + id: res._id, + }, + }, + }); + return res; + }, *addCluster({ payload }, { call, put, select }) { let res = yield call(createClusterConfig, payload); if (res.error) { @@ -76,20 +94,22 @@ export default { return false; } let { data } = yield select((state) => state.clusterConfig); - let idx = data.findIndex((item) => { - return item.id === res._id; - }); + if (data) { + let idx = data.findIndex((item) => { + return item.id === res._id; + }); + data[idx] = { + ...data[idx], + ...res._source, + }; + yield put({ + type: "saveData", + payload: { + data, + }, + }); + } - data[idx] = { - ...data[idx], - ...res._source, - }; - yield put({ - type: "saveData", - payload: { - data, - }, - }); //handle global cluster logic yield put({ @@ -97,9 +117,9 @@ export default { payload: { id: res._id, name: res._source.name, + monitored: res._source.monitored, }, }); - return res; }, *deleteCluster({ payload }, { call, put, select }) { diff --git a/web/src/services/cluster.js b/web/src/services/cluster.js index af93dd6b..e49d28d4 100644 --- a/web/src/services/cluster.js +++ b/web/src/services/cluster.js @@ -72,3 +72,10 @@ export async function tryConnect(params) { body: params, }); } + +export async function getClusterConfig(params) { + let url = `${ESPrefix}/${params.id}`; + return request(url, { + method: "GET", + }); +}