diff --git a/package.json b/package.json new file mode 100644 index 00000000..d2fcc899 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "react-ga": "^3.3.0" + } +} diff --git a/web/src/models/global.js b/web/src/models/global.js index b224a8a7..5c2aa612 100644 --- a/web/src/models/global.js +++ b/web/src/models/global.js @@ -1,27 +1,31 @@ -import { queryNotices } from '@/services/api'; -import {message} from "antd"; -import {searchClusterConfig, getClusterStatus} from "@/services/cluster"; -import {formatESSearchResult, extractClusterIDFromURL} from '@/lib/elasticsearch/util'; -import {Modal} from 'antd'; +import { queryNotices } from "@/services/api"; +import { message } from "antd"; +import { searchClusterConfig, getClusterStatus } from "@/services/cluster"; +import { + formatESSearchResult, + extractClusterIDFromURL, +} from "@/lib/elasticsearch/util"; +import { Modal } from "antd"; import router from "umi/router"; -import _ from 'lodash'; +import _ from "lodash"; +import ReactGA from "react-ga"; +ReactGA.initialize("G-L0XH1C4CVP"); const MENU_COLLAPSED_KEY = "search-center:menu:collapsed"; export default { - namespace: 'global', + namespace: "global", state: { - collapsed: localStorage.getItem(MENU_COLLAPSED_KEY) === 'true', - isInitCollapsed:false, + collapsed: localStorage.getItem(MENU_COLLAPSED_KEY) === "true", + isInitCollapsed: false, notices: [], clusterVisible: true, clusterList: [], - selectedCluster: {name:"Select cluster", id: ""}, + selectedCluster: { name: "Select cluster", id: "" }, selectedClusterID: "", - search:{ - cluster: { - } + search: { + cluster: {}, }, }, @@ -29,150 +33,156 @@ export default { *fetchNotices(_, { call, put }) { const data = yield call(queryNotices); yield put({ - type: 'saveNotices', + type: "saveNotices", payload: data, }); yield put({ - type: 'user/changeNotifyCount', + type: "user/changeNotifyCount", payload: data.length, }); }, *clearNotices({ payload }, { put, select }) { yield put({ - type: 'saveClearedNotices', + type: "saveClearedNotices", payload, }); - const count = yield select(state => state.global.notices.length); + const count = yield select((state) => state.global.notices.length); yield put({ - type: 'user/changeNotifyCount', + type: "user/changeNotifyCount", payload: count, }); }, - *fetchClusterList({payload}, {call, put, select}){ + *fetchClusterList({ payload }, { call, put, select }) { let res = yield call(searchClusterConfig, payload); - if(res.error){ - message.error(res.error) + if (res.error) { + message.error(res.error); return false; } - res = formatESSearchResult(res) - let {clusterList, search} = yield select(state => state.global); - let data = res.data.filter(item=>item.enabled).map((item)=>{ - return { - name: item.name, - id: item.id, - endpoint: item.endpoint, - host: item.host, - version: item.version, - }; - }) + res = formatESSearchResult(res); + let { clusterList, search } = yield select((state) => state.global); + let data = res.data + .filter((item) => item.enabled) + .map((item) => { + return { + name: item.name, + id: item.id, + endpoint: item.endpoint, + host: item.host, + version: item.version, + }; + }); - if(clusterList.length === 0 && !payload.name){ - if(data.length === 0 ){ + if (clusterList.length === 0 && !payload.name) { + if (data.length === 0) { Modal.info({ - title: '系统提示', - content: '当前没有可用集群,点击确定将自动跳转到 系统设置=>集群设置', - okText: '确定', + title: "系统提示", + content: + "当前没有可用集群,点击确定将自动跳转到 系统设置=>集群设置", + okText: "确定", onOk() { - router.push('/system/cluster') + router.push("/system/cluster"); }, }); - }else{ + } else { const targetID = extractClusterIDFromURL(); - let idx = data.findIndex((item)=>{ + let idx = data.findIndex((item) => { return item.id == targetID; }); idx = idx > -1 ? idx : 0; yield put({ - type: 'saveData', - payload:{ + type: "saveData", + payload: { selectedCluster: data[idx], - selectedClusterID: (data[idx] || {}).id - } + selectedClusterID: (data[idx] || {}).id, + }, }); } } let newClusterList = []; - if(search.name != payload.name){ + if (search.name != payload.name) { newClusterList = data; - }else{ + } else { newClusterList = clusterList.concat(data); } yield put({ - type: 'saveData', + type: "saveData", payload: { clusterList: newClusterList, clusterTotal: res.total, search: { ...search, cluster: payload, - } - } - }) + }, + }, + }); return data; }, - *reloadClusterList({payload}, {call, put, select}){ + *reloadClusterList({ payload }, { call, put, select }) { yield put({ - type: 'saveData', + type: "saveData", payload: { clusterList: [], - } + }, }); yield put({ - type: 'fetchClusterList', - payload: payload - }) + type: "fetchClusterList", + payload: payload, + }); }, - *changeClusterState({payload}, {put}){ + *changeClusterState({ payload }, { put }) { yield put({ - type: 'saveData', - payload:{ + type: "saveData", + payload: { ...payload, - } + }, }); }, - *rewriteURL({payload}, {select, put}){ - const {pathname, history, search, isChangedState} = payload; - const global = yield select(state=>state.global); - if(pathname && global.selectedClusterID){ + *rewriteURL({ payload }, { select, put }) { + const { pathname, history, search, isChangedState } = payload; + const global = yield select((state) => state.global); + if (pathname && global.selectedClusterID) { const newPart = `/elasticsearch/${global.selectedClusterID}/`; - if(!pathname.includes('elasticsearch')){ - history.replace(pathname+newPart+ (search || '')) - }else{ + if (!pathname.includes("elasticsearch")) { + history.replace(pathname + newPart + (search || "")); + } else { const ms = pathname.match(/\/elasticsearch\/(\w+)\/?/); - if(ms && ms.length>1 && ms[1] != global.selectedClusterID){ - if(isChangedState){ - const newPath = pathname.replace(/\/elasticsearch\/(\w+)\/?/, newPart); - history.replace(newPath+(search || '')) - return + if (ms && ms.length > 1 && ms[1] != global.selectedClusterID) { + if (isChangedState) { + const newPath = pathname.replace( + /\/elasticsearch\/(\w+)\/?/, + newPart + ); + history.replace(newPath + (search || "")); + return; } yield put({ - type: 'changeClusterById', - payload:{ - id: ms[1] - } + type: "changeClusterById", + payload: { + id: ms[1], + }, }); } } } }, - *fetchClusterStatus({payload}, {call, put, select}){ + *fetchClusterStatus({ payload }, { call, put, select }) { let res = yield call(getClusterStatus, payload); - if(!res){ - return false - } - const {clusterStatus} = yield select(state=>state.global); - if(res.error){ - console.log(res.error) + if (!res) { return false; } - if(!_.isEqual(res, clusterStatus)){ + const { clusterStatus } = yield select((state) => state.global); + if (res.error) { + console.log(res.error); + return false; + } + if (!_.isEqual(res, clusterStatus)) { yield put({ - type: 'saveData', + type: "saveData", payload: { - clusterStatus: res - } + clusterStatus: res, + }, }); - } + } return res; }, }, @@ -180,7 +190,7 @@ export default { reducers: { changeLayoutCollapsed(state, { payload }) { //layout sider init(false) bug - if(!state.isInitCollapsed && state.collapsed){ + if (!state.isInitCollapsed && state.collapsed) { return { ...state, isInitCollapsed: true, @@ -202,53 +212,53 @@ export default { saveClearedNotices(state, { payload }) { return { ...state, - notices: state.notices.filter(item => item.type !== payload), + notices: state.notices.filter((item) => item.type !== payload), }; }, - saveData(state, {payload}){ + saveData(state, { payload }) { return { ...state, ...payload, - } + }; }, - removeCluster(state, {payload}){ + removeCluster(state, { payload }) { let newState = { ...state, - clusterList: state.clusterList.filter(item => item.id !== payload.id) - } - if(state.selectedCluster?.id === payload.id){ - if(newState.clusterList.length > 0){ + clusterList: state.clusterList.filter((item) => item.id !== payload.id), + }; + if (state.selectedCluster?.id === payload.id) { + if (newState.clusterList.length > 0) { newState.selectedCluster = newState.clusterList[0]; newState.selectedClusterID = newState.selectedCluster.id; } } return newState; }, - addCluster(state, {payload}){ - if(state.clusterList.length === 0){ + addCluster(state, { payload }) { + if (state.clusterList.length === 0) { state.selectedCluster = payload; state.selectedClusterID = payload.id; } - state.clusterList.push(payload) + state.clusterList.push(payload); return state; }, - updateCluster(state, {payload}){ - let idx = state.clusterList.findIndex(item => item.id === payload.id); + updateCluster(state, { payload }) { + let idx = state.clusterList.findIndex((item) => item.id === payload.id); idx > -1 && (state.clusterList[idx].name = payload.name); return state; }, - changeClusterById(state,{payload}){ - let idx = state.clusterList.findIndex(item => item.id === payload.id); - if(idx > -1){ + changeClusterById(state, { payload }) { + let idx = state.clusterList.findIndex((item) => item.id === payload.id); + if (idx > -1) { return { ...state, selectedCluster: state.clusterList[idx], selectedClusterID: state.clusterList[idx].id, - } + }; } return state; - } + }, }, subscriptions: { @@ -256,40 +266,48 @@ export default { // Subscribe history(url) change, trigger `load` action if pathname is `/` return history.listen(({ pathname, search }) => { let clusterVisible = true; - const clusterHiddenPath = ["/system", "/cluster/overview", "/alerting/overview", "/alerting/monitor/monitors/", "/alerting/destination", '/dev_tool']; - if(clusterHiddenPath.some(p=>pathname.startsWith(p))){ + const clusterHiddenPath = [ + "/system", + "/cluster/overview", + "/alerting/overview", + "/alerting/monitor/monitors/", + "/alerting/destination", + "/dev_tool", + ]; + if (clusterHiddenPath.some((p) => pathname.startsWith(p))) { clusterVisible = false; - if(pathname.includes("elasticsearch")){ + if (pathname.includes("elasticsearch")) { dispatch({ - type: 'rewriteURL', + type: "rewriteURL", payload: { pathname, history, search, - } + }, }); } - }else{ - if(!pathname.startsWith("/exception") && pathname !="/alerting/monitor"){ - dispatch({ - type: 'rewriteURL', - payload: { - pathname, - history, - search, - } - }) + } else { + if ( + !pathname.startsWith("/exception") && + pathname != "/alerting/monitor" + ) { + dispatch({ + type: "rewriteURL", + payload: { + pathname, + history, + search, + }, + }); } } dispatch({ - type: 'saveData', + type: "saveData", payload: { clusterVisible, - } - }) - if (typeof window.ga !== 'undefined') { - window.ga('send', 'pageview', pathname + search); - } + }, + }); + ReactGA.pageview(pathname + search); }); }, }, diff --git a/web/src/pages/Cluster/Metrics.less b/web/src/pages/Cluster/Metrics.less index 4210fed3..3f0491ec 100644 --- a/web/src/pages/Cluster/Metrics.less +++ b/web/src/pages/Cluster/Metrics.less @@ -30,6 +30,7 @@ justify-content: center; color: red; font-size: 20px; + z-index: 1; } .metricMask { filter: blur(4px); diff --git a/web/src/pages/Cluster/components/index_metric.jsx b/web/src/pages/Cluster/components/index_metric.jsx index 09537167..00acedd2 100644 --- a/web/src/pages/Cluster/components/index_metric.jsx +++ b/web/src/pages/Cluster/components/index_metric.jsx @@ -22,6 +22,7 @@ import { formatMessage } from "umi/locale"; import MetricContainer from "./metric_container"; import _ from "lodash"; +const gorupOrder = ["storage", "operations", "latency", "memory", "cache"]; export default ({ clusterID, timezone, timeRange, handleTimeChange }) => { const [filter, setFilter] = React.useState({ top: "5", @@ -108,6 +109,9 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => { } }; let refIdx = 0; + if (Object.keys(metrics).length == 0) { + return null; + } return (
@@ -140,7 +144,7 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
- {Object.keys(metrics).map((e, i) => { + {gorupOrder.map((e, i) => { return (
{ const [filter, setFilter] = React.useState({ top: "5", @@ -107,6 +117,9 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => { }; let refIdx = 0; + if (Object.keys(metrics).length == 0) { + return null; + } return (
@@ -138,7 +151,8 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
- {Object.keys(metrics).map((e, i) => { + {//Object.keys(metrics) + gorupOrder.map((e, i) => { return (