add GA
This commit is contained in:
liugq
parent
e99cac3164
commit
40fc099219
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"react-ga": "^3.3.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
justify-content: center;
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
.metricMask {
|
||||
filter: blur(4px);
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div id="node-metric">
|
||||
|
|
@ -140,7 +144,7 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
|
|||
</div>
|
||||
<div className="px">
|
||||
<Skeleton active loading={!value} paragraph={{ rows: 20 }}>
|
||||
{Object.keys(metrics).map((e, i) => {
|
||||
{gorupOrder.map((e, i) => {
|
||||
return (
|
||||
<div style={{ margin: "8px 0" }}>
|
||||
<MetricContainer
|
||||
|
|
|
|||
|
|
@ -22,6 +22,16 @@ import { formatMessage } from "umi/locale";
|
|||
import MetricContainer from "./metric_container";
|
||||
import _ from "lodash";
|
||||
|
||||
const gorupOrder = [
|
||||
"system",
|
||||
"operations",
|
||||
"latency",
|
||||
"storage",
|
||||
"http",
|
||||
"memory",
|
||||
"cache",
|
||||
];
|
||||
|
||||
export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
|
||||
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 (
|
||||
<div id="node-metric">
|
||||
<div className="px">
|
||||
|
|
@ -138,7 +151,8 @@ export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
|
|||
</div>
|
||||
<div className="px">
|
||||
<Skeleton active loading={!value} paragraph={{ rows: 20 }}>
|
||||
{Object.keys(metrics).map((e, i) => {
|
||||
{//Object.keys(metrics)
|
||||
gorupOrder.map((e, i) => {
|
||||
return (
|
||||
<div style={{ margin: "8px 0" }}>
|
||||
<MetricContainer
|
||||
|
|
|
|||
Loading…
Reference in New Issue