add queue mertic
This commit is contained in:
liugq
parent
948ad752ab
commit
88bf54a615
|
|
@ -0,0 +1,274 @@
|
|||
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, Row, Col } 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";
|
||||
import { formatMessage } from "umi/locale";
|
||||
import MetricContainer from "./metric_container";
|
||||
import _ from "lodash";
|
||||
|
||||
const gorupOrder = ["system"];
|
||||
|
||||
export default ({ clusterID, timezone, timeRange, handleTimeChange }) => {
|
||||
const [filter, setFilter] = React.useState({
|
||||
top: "5",
|
||||
node_name: undefined,
|
||||
});
|
||||
|
||||
const topChange = React.useCallback(
|
||||
(e) => {
|
||||
setFilter({
|
||||
node_name: undefined,
|
||||
top: e.target.value,
|
||||
});
|
||||
},
|
||||
[setFilter]
|
||||
);
|
||||
|
||||
const nodeValueChange = React.useCallback(
|
||||
(value) => {
|
||||
setFilter({
|
||||
top: undefined,
|
||||
node_name: value,
|
||||
});
|
||||
},
|
||||
[setFilter]
|
||||
);
|
||||
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}/queue_metrics`,
|
||||
{
|
||||
queryParams: queryParams,
|
||||
},
|
||||
[clusterID, queryParams]
|
||||
);
|
||||
|
||||
const metrics = React.useMemo(() => {
|
||||
return _.groupBy(value?.metrics, "group");
|
||||
// return Object.values(value?.metrics || {}).sort(
|
||||
// (a, b) => a.order - b.order
|
||||
// );
|
||||
}, [value]);
|
||||
|
||||
const chartRefs = React.useRef();
|
||||
React.useEffect(() => {
|
||||
let refs = [];
|
||||
Object.values(metrics).map((m) => {
|
||||
m.forEach(() => {
|
||||
refs.push(React.createRef());
|
||||
});
|
||||
});
|
||||
chartRefs.current = refs;
|
||||
}, [metrics]);
|
||||
|
||||
const { value: nodes } = useFetch(`${ESPrefix}/${clusterID}/nodes`, {}, [
|
||||
clusterID,
|
||||
]);
|
||||
const nodeNames = React.useMemo(() => {
|
||||
return Object.keys(nodes || {}).map((k) => nodes[k].transport_address);
|
||||
}, [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(),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let refIdx = 0;
|
||||
if (Object.keys(metrics).length == 0) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div id="node-metric">
|
||||
<div className="px">
|
||||
<div className="metric-control">
|
||||
<div className="selector">
|
||||
<div className="top_radio">
|
||||
<Radio.Group onChange={topChange} value={filter.top}>
|
||||
<Radio.Button key="5" value="5">
|
||||
Top5
|
||||
</Radio.Button>
|
||||
<Radio.Button key="10" value="10">
|
||||
Top10
|
||||
</Radio.Button>
|
||||
<Radio.Button key="15" value="15">
|
||||
Top15
|
||||
</Radio.Button>
|
||||
<Radio.Button key="20" value="20">
|
||||
Top20
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<div className="value-selector">
|
||||
<Select
|
||||
style={{ width: 200 }}
|
||||
onChange={nodeValueChange}
|
||||
placeholder="Select node"
|
||||
value={filter.node_name}
|
||||
showSearch={true}
|
||||
>
|
||||
{nodeNames.map((name) => (
|
||||
<Select.Option key={name}>{name}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px">
|
||||
<Skeleton active loading={!value} paragraph={{ rows: 20 }}>
|
||||
{//Object.keys(metrics)
|
||||
gorupOrder.map((e, i) => {
|
||||
return (
|
||||
<div key={e} style={{ margin: "8px 0" }}>
|
||||
<MetricContainer
|
||||
title={formatMessage({ id: `cluster.metrics.group.${e}` })}
|
||||
collapsed={false}
|
||||
>
|
||||
<div className="metric-inner-cnt">
|
||||
{metrics[e].map((metric) => {
|
||||
let axis = metric.axis;
|
||||
let lines = metric.lines;
|
||||
if (lines && lines[0]?.data?.length == 0) {
|
||||
return null;
|
||||
}
|
||||
let disableHeaderFormat = false;
|
||||
let headerUnit = "";
|
||||
return (
|
||||
<div key={metrics.key} className="metric-item">
|
||||
<Chart
|
||||
size={[, 200]}
|
||||
className={styles.vizChartItem}
|
||||
ref={chartRefs.current[refIdx++]}
|
||||
>
|
||||
<Settings
|
||||
// theme={theme}
|
||||
pointerUpdateDebounce={0}
|
||||
pointerUpdateTrigger="x"
|
||||
// externalPointerEvents={{
|
||||
// tooltip: { visible: true },
|
||||
// }}
|
||||
onPointerUpdate={pointerUpdate}
|
||||
showLegend
|
||||
legendPosition={Position.Top}
|
||||
onBrushEnd={handleChartBrush}
|
||||
tooltip={{
|
||||
headerFormatter: disableHeaderFormat
|
||||
? undefined
|
||||
: ({ value }) =>
|
||||
`${formatter.full_dates(value)}${
|
||||
headerUnit ? ` ${headerUnit}` : ""
|
||||
}`,
|
||||
}}
|
||||
debug={false}
|
||||
/>
|
||||
<Axis
|
||||
id="{e}-bottom"
|
||||
position={Position.Bottom}
|
||||
showOverlappingTicks
|
||||
labelFormat={timeRange.timeFormatter}
|
||||
tickFormat={timeRange.timeFormatter}
|
||||
ticks={8}
|
||||
/>
|
||||
{axis.map((item) => {
|
||||
return (
|
||||
<Axis
|
||||
key={e + "-" + item.id}
|
||||
id={e + "-" + item.id}
|
||||
showGridLines={item.showGridLines}
|
||||
groupId={item.group}
|
||||
title={formatMessage({
|
||||
id:
|
||||
"cluster.metrics.node.axis." +
|
||||
metric.key +
|
||||
".title",
|
||||
})}
|
||||
position={item.position}
|
||||
ticks={item.ticks}
|
||||
labelFormat={getFormatter(
|
||||
item.formatType,
|
||||
item.labelFormat
|
||||
)}
|
||||
tickFormat={getFormatter(
|
||||
item.formatType,
|
||||
item.tickFormat
|
||||
)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{lines.map((item) => {
|
||||
return (
|
||||
<LineSeries
|
||||
key={item.metric.label}
|
||||
id={item.metric.label}
|
||||
groupId={item.metric.group}
|
||||
timeZone={timezone}
|
||||
xScaleType={ScaleType.Time}
|
||||
yScaleType={ScaleType.Linear}
|
||||
xAccessor={0}
|
||||
tickFormat={getFormatter(
|
||||
item.metric.formatType,
|
||||
item.metric.tickFormat,
|
||||
item.metric.units
|
||||
)}
|
||||
yAccessors={[1]}
|
||||
data={item.data}
|
||||
curve={CurveType.CURVE_MONOTONE_X}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Chart>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</MetricContainer>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue