+
+
+
- fetchData = () => {
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+
+
+
+
- console.log("fetching data ing."+this.state.clusterID)
+
+
+
- if (this.state.clusterID===undefined||this.state.clusterID===""||this.state.clusterID===null){
- return
- }
+
+
+
- this.setState({
- spinning:true,
- })
+
+
+
- fetchDataCount++;
- const {dispatch} = this.props;
- const {timeRange} = this.state;
- const bounds = calculateBounds({
- from: timeRange.min,
- to: timeRange.max,
- });
- dispatch({
- type: 'clusterMonitor/fetchClusterMetrics',
- payload: {
- timeRange: {
- min: bounds.min.valueOf(),
- max: bounds.max.valueOf(),
- },
- cluster_id:this.state.clusterID
- },
- }).then(()=>{
- this.setState({
- spinning:false,
- })
- })
- }
+
+
+
+
+
+
+
+
+
+
+
+ {Object.keys(clusterMetrics).map((e, i) => {
+ let axis = clusterMetrics[e].axis;
+ let lines = clusterMetrics[e].lines;
+ let disableHeaderFormat = false;
+ let headerUnit = "";
+ return (
+
+
+
+ `${formatter.full_dates(value)}${
+ headerUnit ? ` ${headerUnit}` : ""
+ }`,
+ }}
+ debug={false}
+ />
+
+ {axis.map((item) => {
+ return (
+
+ );
+ })}
- componentWillUnmount() {
- clearInterval(tv1);
- }
-
- componentDidUpdate(prevProps, prevState, snapshot) {
-
- // console.log(this.props.selectedCluster)
- // console.log(this.state.clusterID)
-
- if (this.props.selectedCluster.id!==this.state.clusterID){
- console.log("cluster changed")
-
- this.setState({ clusterID:this.props.selectedCluster.id }, () => {
- //TODO 处理 cancel 事件，先把当前还在执行中的请求结束，避免更新完成之后，被晚到的之前的请求给覆盖了。
- this.fetchData();
- });
- }
- }
-
- componentDidMount() {
- const {match, location} = this.props;
-
- const queryESID=this.props.match.params.cluster_id;
-
- if (queryESID !== null&&queryESID !== undefined){
- this.state.clusterID=queryESID
- const {dispatch} = this.props;
- dispatch({
- type: 'global/changeClusterById',
- payload: {
- id: queryESID
- }
- })
- }else if (this.props.selectedCluster.id!==undefined&&this.props.selectedCluster.id!==null){
- this.setState({ clusterID:this.props.selectedCluster.id }, () => {
- });
- }else{
- //alert("cluster ID is not set");
- return
- }
-
- console.log("selectedCluster:"+this.state.clusterID)
-
- let min = location.query.start || this.state.timeRange.min;//'2020-12-10 15:00';
- let max = location.query.end || this.state.timeRange.max;//'2020-12-10 16:00';
- this.setState({
- timeRange: {
- min: min,
- max: max,
- },
- }, () => {
- this.fetchData();
- })
-
-
- // tv1 = setInterval(()=>{
- // this.fetchData();
- // }, 10000);
-
- //this.autoRefresh();
- }
-
- autoRefresh(durationInSeconds) {
- !durationInSeconds && (durationInSeconds = 10);
- clearInterval(tv1);
- tv1 = setInterval(() => {
- this.fetchData();
- }, durationInSeconds * 1000);
- }
-
-
- handleChartBrush({x}) {
- if (!x) {
- return;
- }
- const [from, to] = x;
- let timeRange = {
- min: moment(from).toISOString(),
- max: moment(to).toISOString(),
- }
- this.setState({
- timeRange: timeRange,
- }, () => {
- this.fetchData();
- });
- }
-
- handleTimeChange = ({start, end})=>{
- this.setState({
- timeRange: {
- min: start,
- max: end,
- }
- },()=>{
- this.fetchData();
- })
- }
-
-
- render() {
-
- const {clusterMonitor} = this.props;
- let clusterStats = {};
- let clusterMetrics = {};
-
- if (clusterMonitor.summary) {
- let rawStats = clusterMonitor.summary;
- clusterStats = {
- cluster_name: rawStats.cluster_name,
- status: rawStats.status,
- version: rawStats.version,
- nodes_count: rawStats.nodes_count,
- indices_count: formatter.number(rawStats.indices_count),
- primary_shards: formatter.number(rawStats.primary_shards),
- unassigned_shards: formatter.number(rawStats.unassigned_shards),
- total_shards: formatter.number(rawStats.total_shards),
- used_store_bytes: formatter.bytes(rawStats.used_store_bytes),
- max_store_bytes: formatter.bytes(rawStats.max_store_bytes),
- used_jvm_bytes: formatter.bytes(rawStats.used_jvm_bytes),
- max_jvm_bytes: formatter.bytes(rawStats.max_jvm_bytes),
- document_count: formatter.number(rawStats.document_count),
- uptime: moment.duration(rawStats.uptime).humanize(),
- };
- }
-
- if (clusterMonitor.metrics) {
- clusterMetrics = clusterMonitor.metrics;
- }
-
- const commonlyUsedRanges =
- [
- {
- from: 'now-15m',
- to: 'now',
- display: '最近15分钟'
- },
- {
- from: 'now-30m',
- to: 'now',
- display: '最近30分钟'
- },
- {
- from: 'now-1h',
- to: 'now',
- display: '最近一小时'
- },
- {
- from: 'now-24h',
- to: 'now',
- display: '最近一天',
- },
- {
- from: 'now/d',
- to: 'now/d',
- display:'今天',
- },
- {
- from: 'now/w',
- to: 'now/w',
- display: '这个星期'
- },
- {
- from: 'now-7d',
- to: 'now',
- display: '最近一周',
- },
- {
- from: 'now-30d',
- to: 'now',
- display: '最近一个月',
- },
- {
- from: 'now-90d',
- to: 'now',
- display: '最近三个月',
- },
- {
- from: 'now-1y',
- to: 'now',
- display: '最近一年',
- },
- ].map(({ from, to, display }) => {
- return {
- start: from,
- end: to,
- label: display,
- };
- });
-
- return (
-
-
-
-
+ {lines.map((item) => {
+ return (
+
+ );
+ })}
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- }/>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- Object.keys(clusterMetrics).map((e, i) => {
- let axis = clusterMetrics[e].axis
- let lines = clusterMetrics[e].lines
- let disableHeaderFormat = false
- let headerUnit = ""
- return (
-
-
- `${formatter.full_dates(value)}${headerUnit ? ` ${headerUnit}` : ''}`,
- }}
- debug={false}/>
-
- {
- axis.map((item) => {
- return
- })
- }
-
- {
- lines.map((item) => {
- return
- })
- }
-
-
-
- )
- })
- }
-
+
+ );
+ }
}
export default ClusterMonitor;
diff --git a/web/src/pages/Cluster/Metrics.less b/web/src/pages/Cluster/Metrics.less
index d31ee7c0..4ca47bce 100644
--- a/web/src/pages/Cluster/Metrics.less
+++ b/web/src/pages/Cluster/Metrics.less
@@ -1,14 +1,14 @@
-
-.vizChartContainer{
+.vizChartContainer {
padding: 0px;
+ border-bottom: 1px solid rgb(232, 232, 232);
}
-.vizChartItem{
- background: white!important;
+.vizChartItem {
+ background: white !important;
margin-bottom: 5px;
}
-.vizChartTitle{
+.vizChartTitle {
color: red;
position: absolute;
font-size: 14px;
diff --git a/web/src/pages/Cluster/components/index_metric.jsx b/web/src/pages/Cluster/components/index_metric.jsx
new file mode 100644
index 00000000..c991c3d9
--- /dev/null
+++ b/web/src/pages/Cluster/components/index_metric.jsx
@@ -0,0 +1,225 @@
+import * as React from "react";
+import {
+ Axis,
+ Chart,
+ CurveType,
+ LineSeries,
+ niceTimeFormatByDay,
+ Position,
+ ScaleType,
+ Settings,
+ timeFormatter,
+} from "@elastic/charts";
+import useFetch from "@/lib/hooks/use_fetch";
+import { ESPrefix } from "@/services/common";
+import styles from "../Metrics.less";
+import { Spin, Radio, Select, Skeleton } from "antd";
+import { formatter, getFormatter, getNumFormatter } from "../format";
+import "./node_metric.scss";
+import { calculateBounds } from "@/components/kibana/data/common/query/timefilter";
+import moment from "moment";
+
+export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
+ const [filter, setFilter] = React.useState({
+ top: "5",
+ index_name: undefined,
+ });
+
+ const topChange = (e) => {
+ setFilter({
+ index_name: undefined,
+ top: e.target.value,
+ });
+ };
+
+ const indexValueChange = (value) => {
+ setFilter({
+ top: undefined,
+ index_name: value,
+ });
+ };
+ const queryParams = React.useMemo(() => {
+ const bounds = calculateBounds({
+ from: timeRange.min,
+ to: timeRange.max,
+ });
+ return {
+ ...filter,
+ min: bounds.min.valueOf(),
+ max: bounds.max.valueOf(),
+ };
+ }, [filter, timeRange]);
+ const { loading, error, value } = useFetch(
+ `${ESPrefix}/${clusterID}/index_metrics`,
+ {
+ queryParams: queryParams,
+ },
+ [clusterID, queryParams]
+ );
+
+ const metrics = React.useMemo(() => {
+ return Object.values(value?.metrics || {}).sort(
+ (a, b) => a.order - b.order
+ );
+ }, [value]);
+
+ const chartRefs = React.useRef();
+ React.useEffect(() => {
+ chartRefs.current = metrics.map(() => {
+ return React.createRef();
+ });
+ }, [metrics]);
+
+ const { value: indices } = useFetch(
+ `${ESPrefix}/${clusterID}/_cat/indices`,
+ {},
+ [clusterID]
+ );
+ const indexNames = React.useMemo(() => {
+ return Object.keys(indices || {});
+ }, [indices]);
+
+ const pointerUpdate = (event) => {
+ chartRefs.current.forEach((ref) => {
+ if (ref.current) {
+ ref.current.dispatchExternalPointerEvent(event);
+ }
+ });
+ };
+
+ const handleChartBrush = ({ x }) => {
+ if (!x) {
+ return;
+ }
+ const [from, to] = x;
+ if (typeof handleTimeChange == "function") {
+ handleTimeChange({
+ start: moment(from).toISOString(),
+ end: moment(to).toISOString(),
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ Top5
+ Top10
+ Top15
+ Top20
+
+
+
+
+
+
+
+
+
+
+ {Object.keys(metrics).map((e, i) => {
+ let axis = metrics[e].axis;
+ let lines = metrics[e].lines;
+ let disableHeaderFormat = false;
+ let headerUnit = "";
+ return (
+
+
+
+ `${formatter.full_dates(value)}${
+ headerUnit ? ` ${headerUnit}` : ""
+ }`,
+ }}
+ debug={false}
+ />
+
+ {axis.map((item) => {
+ return (
+
+ );
+ })}
+
+ {lines.map((item) => {
+ return (
+
+ );
+ })}
+
+
+
+
+ );
+};
diff --git a/web/src/pages/Cluster/components/node_metric.jsx b/web/src/pages/Cluster/components/node_metric.jsx
new file mode 100644
index 00000000..e1c0b47b
--- /dev/null
+++ b/web/src/pages/Cluster/components/node_metric.jsx
@@ -0,0 +1,223 @@
+import * as React from "react";
+import {
+ Axis,
+ Chart,
+ CurveType,
+ LineSeries,
+ niceTimeFormatByDay,
+ Position,
+ ScaleType,
+ Settings,
+ timeFormatter,
+} from "@elastic/charts";
+import useFetch from "@/lib/hooks/use_fetch";
+import { ESPrefix } from "@/services/common";
+import styles from "../Metrics.less";
+import { Spin, Radio, Select, Skeleton } from "antd";
+import { formatter, getFormatter, getNumFormatter } from "../format";
+import "./node_metric.scss";
+import { calculateBounds } from "@/components/kibana/data/common/query/timefilter";
+import moment from "moment";
+
+export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
+ const [filter, setFilter] = React.useState({
+ top: "5",
+ node_name: undefined,
+ });
+
+ const topChange = (e) => {
+ setFilter({
+ node_name: undefined,
+ top: e.target.value,
+ });
+ };
+
+ const nodeValueChange = (value) => {
+ setFilter({
+ top: undefined,
+ node_name: value,
+ });
+ };
+ const queryParams = React.useMemo(() => {
+ const bounds = calculateBounds({
+ from: timeRange.min,
+ to: timeRange.max,
+ });
+ return {
+ ...filter,
+ min: bounds.min.valueOf(),
+ max: bounds.max.valueOf(),
+ };
+ }, [filter, timeRange]);
+ const { loading, error, value } = useFetch(
+ `${ESPrefix}/${clusterID}/node_metrics`,
+ {
+ queryParams: queryParams,
+ },
+ [clusterID, queryParams]
+ );
+
+ const metrics = React.useMemo(() => {
+ return Object.values(value?.metrics || {}).sort(
+ (a, b) => a.order - b.order
+ );
+ }, [value]);
+
+ const chartRefs = React.useRef();
+ React.useEffect(() => {
+ chartRefs.current = metrics.map(() => {
+ return React.createRef();
+ });
+ }, [metrics]);
+
+ const { value: nodes } = useFetch(`${ESPrefix}/${clusterID}/nodes`, {}, [
+ clusterID,
+ ]);
+ const nodeNames = React.useMemo(() => {
+ return Object.keys(nodes || {}).map((k) => nodes[k].name);
+ }, [nodes]);
+
+ const pointerUpdate = (event) => {
+ chartRefs.current.forEach((ref) => {
+ if (ref.current) {
+ ref.current.dispatchExternalPointerEvent(event);
+ }
+ });
+ };
+
+ const handleChartBrush = ({ x }) => {
+ if (!x) {
+ return;
+ }
+ const [from, to] = x;
+ if (typeof handleTimeChange == "function") {
+ handleTimeChange({
+ start: moment(from).toISOString(),
+ end: moment(to).toISOString(),
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ Top5
+ Top10
+ Top15
+ Top20
+
+
+
+
+
+
+
+
+
+
+ {Object.keys(metrics).map((e, i) => {
+ let axis = metrics[e].axis;
+ let lines = metrics[e].lines;
+ let disableHeaderFormat = false;
+ let headerUnit = "";
+ return (
+
+
+
+ `${formatter.full_dates(value)}${
+ headerUnit ? ` ${headerUnit}` : ""
+ }`,
+ }}
+ debug={false}
+ />
+
+ {axis.map((item) => {
+ return (
+
+ );
+ })}
+
+ {lines.map((item) => {
+ return (
+
+ );
+ })}
+
+
+
+
+ );
+};
diff --git a/web/src/pages/Cluster/components/node_metric.scss b/web/src/pages/Cluster/components/node_metric.scss
new file mode 100644
index 00000000..2fd2008c
--- /dev/null
+++ b/web/src/pages/Cluster/components/node_metric.scss
@@ -0,0 +1,13 @@
+.metric-control {
+ display: flex;
+ .selector {
+ margin-left: auto;
+ display: flex;
+ .value-selector {
+ margin-left: 5px;
+ }
+ }
+}
+.px {
+ padding: 0 15px;
+}
diff --git a/web/src/pages/Cluster/format.js b/web/src/pages/Cluster/format.js
new file mode 100644
index 00000000..93f81b29
--- /dev/null
+++ b/web/src/pages/Cluster/format.js
@@ -0,0 +1,46 @@
+import numeral from "numeral";
+import { timeFormatter, niceTimeFormatByDay } from "@elastic/charts";
+import { DateTime } from "luxon";
+
+const unitArr = Array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
+
+export const formatter = {
+ bytes: (value) => {
+ if (isNaN(value) || null == value || value === "" || value == 0) {
+ return "0B";
+ }
+ var index = 0;
+ var srcsize = parseFloat(value);
+ index = Math.floor(Math.log(srcsize) / Math.log(1024));
+ var size = srcsize / Math.pow(1024, index);
+ size = size.toFixed(1);
+ return size + unitArr[index];
+ },
+ dates: (day) => timeFormatter(niceTimeFormatByDay(day)),
+ full_dates: (d) => DateTime.fromMillis(d).toFormat("yyyy-MM-dd HH:mm:ss"),
+ utc_full_dates: (d) =>
+ DateTime.fromMillis(d)
+ .toUTC()
+ .toFormat("yyyy-MM-dd HH:mm:ss"),
+ ratio: (d) => `${Number(d).toFixed(0)}%`,
+ highPrecisionNumber: (d) => numeral(d).format("0.0000"),
+ lowPrecisionNumber: (d) => numeral(d).format("0.0"),
+ number: (d) => numeral(d).format("0,0"),
+};
+
+export function getFormatter(type, format, units) {
+ switch (type) {
+ case "bytes":
+ return formatter.bytes;
+ case "ratio":
+ return formatter.ratio;
+ case "num":
+ return getNumFormatter(format, units);
+ default:
+ return formatter.lowPrecisionNumber;
+ }
+}
+
+export function getNumFormatter(format, units) {
+ return (d) => numeral(d).format(format) + (units ? ` ${units}` : "");
+}
diff --git a/web/src/pages/Cluster/models/cluster.js b/web/src/pages/Cluster/models/cluster.js
index 9f0399c9..36a0d678 100644
--- a/web/src/pages/Cluster/models/cluster.js
+++ b/web/src/pages/Cluster/models/cluster.js
@@ -1,50 +1,56 @@
-import {getClusterOverview, getClusterNodeStats, getClusterList} from "@/services/dashboard";
-import {getClusterMetrics} from "@/services/cluster";
+import {
+ getClusterOverview,
+ getClusterNodeStats,
+ getClusterList,
+} from "@/services/dashboard";
+import { getClusterMetrics } from "@/services/cluster";
export default {
- namespace: 'clusterMonitor',
- state: {
-
+ namespace: "clusterMonitor",
+ state: {},
+ effects: {
+ *fetchClusterOverview({ payload, callback }, { call, put }) {
+ let clusterData = yield call(getClusterOverview, payload);
+ yield put({ type: "saveData", payload: clusterData });
+ if (callback && typeof callback == "function") {
+ callback(clusterData);
+ }
},
- effects:{
- *fetchClusterOverview({payload, callback}, {call, put}){
- let clusterData = yield call(getClusterOverview, payload);
- yield put({type: 'saveData', payload: clusterData})
- if(callback && typeof callback == 'function'){
- callback(clusterData);
- }
- },
- *fetchClusterMetrics({payload, callback}, {call, put}){
- let clusterMetrics = yield call(getClusterMetrics, payload);
- yield put({type: 'saveData', payload: clusterMetrics})
- if(callback && typeof callback == 'function'){
- callback(clusterMetrics);
- console.log("finished call:"+params.cluster_id);
- }
- },
- *fetchClusterNodeStats({callback}, {call, put}){
- let nodesStats = yield call(getClusterNodeStats);
- //yield put({type: 'saveData', payload: nodesStats})
- if(callback && typeof callback == 'function'){
- callback(nodesStats);
- }
- },
- *fetchClusterList({callback}, {call, put}){
- let clusterData = yield call(getClusterList);
- yield put({type: 'saveData', payload: {
- clusterList: clusterData
- }})
- if(callback && typeof callback == 'function'){
- callback(clusterData);
- }
- }
+ *fetchClusterMetrics({ payload, callback }, { call, put }) {
+ let clusterMetrics = yield call(getClusterMetrics, payload);
+ yield put({ type: "saveData", payload: clusterMetrics });
+ if (callback && typeof callback == "function") {
+ callback(clusterMetrics);
+ console.log("finished call:" + params.cluster_id);
+ }
+ return clusterMetrics;
},
- reducers:{
- saveData(state, {payload}){
- return {
- ...state,
- ...payload
- };
+ *fetchClusterNodeStats({ callback }, { call, put }) {
+ let nodesStats = yield call(getClusterNodeStats);
+ //yield put({type: 'saveData', payload: nodesStats})
+ if (callback && typeof callback == "function") {
+ callback(nodesStats);
+ }
+ },
+ *fetchClusterList({ callback }, { call, put }) {
+ let clusterData = yield call(getClusterList);
+ yield put({
+ type: "saveData",
+ payload: {
+ clusterList: clusterData,
},
- }
+ });
+ if (callback && typeof callback == "function") {
+ callback(clusterData);
+ }
+ },
+ },
+ reducers: {
+ saveData(state, { payload }) {
+ return {
+ ...state,
+ ...payload,
+ };
+ },
+ },
};
diff --git a/web/src/pages/DataManagement/Discover.jsx b/web/src/pages/DataManagement/Discover.jsx
index 32ea97a3..c3668959 100644
--- a/web/src/pages/DataManagement/Discover.jsx
+++ b/web/src/pages/DataManagement/Discover.jsx
@@ -392,6 +392,9 @@ const Discover = (props) => {
},
[props.selectedCluster, updateQuery]
);
+ const document = useMemo(() => {
+ saveDocument, deleteDocument;
+ }, [saveDocument, deleteDocument]);
const [settingsVisible, setSettingsVisible] = React.useState(false);
@@ -627,7 +630,7 @@ const Discover = (props) => {
onMoveColumn={onMoveColumn}
onAddColumn={onAddColumn}
onChangeSortOrder={onSort}
- document={{ saveDocument, deleteDocument }}
+ document={document}
hits={rows}
/>
{console.log(document.getElementById('jsonw').offsetTop)}} style={{overflow:"scroll", height: this.state.height}}> {this.props.children}
- )
- }
-}
-@Form.create()
-class CreateForm extends React.Component {
- okHandle = () => {
- const {handleAdd, form} = this.props;
- const me = this;
-
- form.validateFields((err, fieldsValue) => {
- if (err) return;
- fieldsValue['config'] = me.editor.getValue();
- handleAdd(fieldsValue);
- form.resetFields();
- });
- };
- onEditorDidMount = (editor)=>{
- this.editor = editor;
- }
-
- render() {
- const {modalVisible, form, handleModalVisible} = this.props;
- return (
-