From 66892abc71afe8fedded29459d6cca522bbbfd8f Mon Sep 17 00:00:00 2001 From: mizy <1060950782@163.com> Date: Thu, 29 Dec 2022 16:28:55 +0800 Subject: [PATCH] fix: seervice metric support avg fix: baseLine --- src/components/Charts/LineChart.tsx | 1 - .../ServiceMetricsFilterPanel/index.tsx | 16 ---- src/pages/ServiceDashboard/Detail/index.tsx | 76 ++++++------------- .../CustomServiceQueryPanel/index.tsx | 2 +- .../LeaderDistribution/index.tsx | 3 +- src/pages/ServiceManage/Overview/index.tsx | 4 + src/store/models/nebula.ts | 11 +++ src/utils/dashboard.ts | 11 +-- 8 files changed, 47 insertions(+), 77 deletions(-) diff --git a/src/components/Charts/LineChart.tsx b/src/components/Charts/LineChart.tsx index 2f4a6275..1679ae8c 100644 --- a/src/components/Charts/LineChart.tsx +++ b/src/components/Charts/LineChart.tsx @@ -214,7 +214,6 @@ function LineChart(props: IProps, ref) { tickInterval, }, }); - autoAdjustPadding(options.valueType); return chartInstanceRef.current; }; diff --git a/src/components/ServiceMetricsFilterPanel/index.tsx b/src/components/ServiceMetricsFilterPanel/index.tsx index 449adf95..d94804bb 100644 --- a/src/components/ServiceMetricsFilterPanel/index.tsx +++ b/src/components/ServiceMetricsFilterPanel/index.tsx @@ -42,22 +42,6 @@ function ServiceMetricsFilterPanel(props: IProps) { onChange?.(form.getFieldsValue()); } - const handlePeriodChange = (value) => { - if (!form) return; - form.setFieldsValue({ - period: value, - }); - onChange?.(form.getFieldsValue()); - } - - const handleMetricTypeChange = (value) => { - if (!form) return; - form.setFieldsValue({ - metricType: value, - }); - onChange?.(form.getFieldsValue()); - } - const handleFilterPanelChange = () => { onChange?.(form.getFieldsValue()); } diff --git a/src/pages/ServiceDashboard/Detail/index.tsx b/src/pages/ServiceDashboard/Detail/index.tsx index 2f6eec2f..f0c99c2a 100644 --- a/src/pages/ServiceDashboard/Detail/index.tsx +++ b/src/pages/ServiceDashboard/Detail/index.tsx @@ -105,25 +105,11 @@ function ServiceDetail(props: IProps) { return options; }, [serviceType, serviceMetric.graphd, serviceMetric.metad, serviceMetric.storaged, serviceMetric.drainerd, serviceMetric['metad-listener'], serviceMetric['storaged-listener']]); - const metricTypeMap: Map = useMemo(() => { - const map: Map = {} as any; - metricOptions.forEach(option => { - option.aggregations.forEach(type => { - if (!map[type]) { - map[type] = [option]; - } else { - map[type].push(option) - } - }) - }) - return map; - }, [metricOptions]); - const metricNameList: string[] = useMemo(() => ( (metricOptions || []).map((metric) => metric.metric) ), [metricOptions]); - const [curMetricOptions, setMetricOptions] = useState([]); + const [metricCharts, setMetricCharts] = useState<{ metric:IServiceMetricItem,index:number,baseLine:any,chartRef?:any,visible:boolean }[]>([]); useEffect(() => { const match = /(\w+)-metrics/g.exec(location.pathname); @@ -135,26 +121,6 @@ function ServiceDetail(props: IProps) { setServiceType(serviceType); }, [location]); - const metricCharts: any = useMemo(() => { - if (Object.keys(metricTypeMap).length === 0) return []; - const { metricType } = metricsFilterValues; - let charts: any = []; - if (metricType === 'all') { - charts = metricOptions.map((metric, i) => ({ - metric, - index: i, - baseLine: undefined, - })) - } else { - charts = (metricTypeMap[metricType] || []).map((metric, i) => ({ - metric, - index: i, - baseLine: undefined, - })); - } - return charts; - }, [metricTypeMap, metricsFilterValues.metricType]) - useEffect(() => { clearPolling(); if (shouldCheckCluster()) { @@ -178,27 +144,28 @@ function ServiceDetail(props: IProps) { }; useEffect(() => { - setMetricOptions(metricOptions) + setMetricCharts(metricOptions.map((metric, index) => ({ metric, index, baseLine: null,visible:true }))); }, [metricOptions]) useEffect(() => { if (dataSources.length === 0) return; updateChart(); - }, [metricsFilterValues.instanceList, dataSources, curMetricOptions]) + }, [metricsFilterValues.instanceList, dataSources, metricCharts]) useEffect(() => { if (pollingTimerRef.current) { clearPolling(); pollingData(); } - }, [curMetricOptions]) + }, [metricCharts]) const asyncGetMetricsData = async () => { - const { timeRange, period, space, metricType } = metricsFilterValues; + const { timeRange, period="5", space, } = metricsFilterValues; const [startTime, endTime] = calcTimeRange(timeRange); const getPromise = (chart) => { return new Promise((resolve, reject) => { - const item: IServiceMetricItem = metricTypeMap[metricType].find(metricItem => metricItem.metric === chart.metric.metric); + const item: IServiceMetricItem = chart.metric; + const metricType = item.aggregations[0] as AggregationType; asyncFetchMetricsData({ query: getQueryByMetricType(item, metricType, period), start: startTime, @@ -215,7 +182,7 @@ function ServiceDetail(props: IProps) { } if (metricCharts.length === 0) return; Promise.all(metricCharts.map((chart, i) => { - if (curMetricOptions.length === 0 || curMetricOptions.find(m => m.metric === chart.metric.metric)) { + if (chart.visible) { return getPromise(chart); } else { return Promise.resolve(dataSources[i]); @@ -255,11 +222,15 @@ function ServiceDetail(props: IProps) { }; const renderChart = (i: number) => () => { + const chart = metricCharts[i]; const [startTimestamps, endTimestamps] = calcTimeRange(metricsFilterValues.timeRange); - metricCharts[i].chartRef.configDetailChart({ + chart.chartRef.configDetailChart({ tickInterval: getProperTickInterval(endTimestamps - startTimestamps), - valueType: metricCharts[i].metric.valueType, + valueType: chart.metric.valueType, }); + if (chart.visible&&chart.baseLine) { + chart.chartRef.updateBaseline(chart.baseLine); + } }; const handleBaseLineEdit = (metricChart) => () => { @@ -292,17 +263,18 @@ function ServiceDetail(props: IProps) { asyncGetMetricsData(); } - const handleMetricsChange = (values) => { + const handleMetricsChange = (values) => { if (values.length === 0) { - setMetricOptions(metricOptions); + metricCharts.forEach(chart => { + chart.visible = true; + }) } else { - setMetricOptions(metricOptions.filter(metric => values.includes(metric.metric))); + metricCharts.forEach(chart => { + chart.visible = values.includes(chart.metric.metric); + }) } - } - - const shouldShow = (metricItem) => { - return curMetricOptions.find(item => item.metric === metricItem.metric) - } + setMetricCharts([...metricCharts]); + } const getViewPath = (path: string): string => { if (cluster?.id) { @@ -350,7 +322,7 @@ function ServiceDetail(props: IProps) { { metricCharts.length ? ( metricCharts.map((metricChart, i) => ( -
+
{metricChart.metric.metric} metricItem.metric === metric); if (item) { const data = await asyncGetMetricsData({ - query: getQueryByMetricType(item, aggregation, metricPeriod.toString()), // EXPLAIN: query like nebula_graphd_num_queries_rate_600 + query: getQueryByMetricType(item, aggregation, metricPeriod?.toString()), // EXPLAIN: query like nebula_graphd_num_queries_rate_600 start, end, space, diff --git a/src/pages/ServiceManage/LeaderDistribution/index.tsx b/src/pages/ServiceManage/LeaderDistribution/index.tsx index 4d9a9d75..3c43b870 100644 --- a/src/pages/ServiceManage/LeaderDistribution/index.tsx +++ b/src/pages/ServiceManage/LeaderDistribution/index.tsx @@ -78,12 +78,11 @@ const LeaderDistribution: React.FC = (props: IProps) => { const updateChart = () => { if (data.length > 0) { const lastItem = last(data); - const total = lastItem!.count; const hostList = lastItem!.name === 'Total' ? data.slice(0, data.length - 1) : data; const chartData = hostList.map(item => ({ type: item.name, - value: total ? round(item.count / total, 2) : 1, + value: item.count })); chartInstance?.data(chartData).render(); } diff --git a/src/pages/ServiceManage/Overview/index.tsx b/src/pages/ServiceManage/Overview/index.tsx index a64d75e2..cbe1bcd6 100644 --- a/src/pages/ServiceManage/Overview/index.tsx +++ b/src/pages/ServiceManage/Overview/index.tsx @@ -23,6 +23,7 @@ const mapDispatch: any = (dispatch: IDispatch) => ({ asyncGetHostsInfo: dispatch.nebula.asyncGetHostsInfo, asyncGetServices: dispatch.nebula.asyncGetServices, asyncExecNGQL: dispatch.nebula.asyncExecNGQL, + clear: dispatch.nebula.clear, }); const mapState = (state: IRootState) => ({ @@ -60,6 +61,9 @@ const Overview: React.FC = (props: IProps) => { const modalHandler = useRef(); const [hosts, setHosts] = useState([]); + useEffect(() => { + props.clear(); + },[cluster]) useEffect(() => { if (nebulaConnect) { asyncGetHostsInfo(); diff --git a/src/store/models/nebula.ts b/src/store/models/nebula.ts index 6833a2b5..558e2a09 100644 --- a/src/store/models/nebula.ts +++ b/src/store/models/nebula.ts @@ -151,6 +151,17 @@ export function NebulaModelWrapper(serviceApi, state, _effects) { })); return versionInfos; }, + + clear() { + this.update({ + configs: [], + jobs: [], + spaces: [], + parts: [], + services: [], + currentSpace: null, + }); + }, ..._effects(dispatch), }), }) diff --git a/src/utils/dashboard.ts b/src/utils/dashboard.ts index 10255404..bc61ee28 100644 --- a/src/utils/dashboard.ts +++ b/src/utils/dashboard.ts @@ -353,10 +353,10 @@ export const getMaxNumAndLength = (payload: { }) => { const { data = [], valueType, baseLine } = payload; const maxNum = getMaxNum(data); - let maxNumLen = - maxNum === 0 && baseLine - ? baseLine.toString().length - : maxNum.toString().length; + let maxString = maxNum === 0 && baseLine + ? baseLine.toString() + : maxNum.toString(); + let maxNumLen = maxString.length; switch (valueType) { case VALUE_TYPE.percentage: maxNumLen = 5; @@ -375,8 +375,9 @@ export const getMaxNumAndLength = (payload: { maxNumLen = unit.length + value.toString().length + 2; break; } + case VALUE_TYPE.number: case VALUE_TYPE.numberSecond: - maxNumLen += 2; + maxNumLen = maxString.split('.')[0].length ; break; default: break;