diff --git a/src/components/Charts/LineChart.tsx b/src/components/Charts/LineChart.tsx index 35eb88ed..418c3b1e 100644 --- a/src/components/Charts/LineChart.tsx +++ b/src/components/Charts/LineChart.tsx @@ -119,14 +119,14 @@ function LineChart(props: IProps, ref) { max = max + 5; min = min < 0 ? min - 5 : 0; } else { - min = 0; + min = Math.min(min, 0); } yMin.current = min; yMax.current = max; const tickInterval = Math.round((max - min) / 5); return { - min: yMin.current, + min: yMin.current < 0 ? yMin.current - tickInterval : yMin.current, max: yMax.current + tickInterval, tickInterval, } diff --git a/src/components/Service/ServiceCardEdit/index.tsx b/src/components/Service/ServiceCardEdit/index.tsx index b885eedd..68e729f2 100644 --- a/src/components/Service/ServiceCardEdit/index.tsx +++ b/src/components/Service/ServiceCardEdit/index.tsx @@ -27,12 +27,8 @@ function ServiceCardEdit(props: IProps) { const curServiceMetricItems = useMemo(() => serviceMetric[editType], [serviceMetric, editType]); - const handleUpdateMetricType = (value: string) => { - const metric = curServiceMetricItems.find( - item => item.metric === value, - ); + const handleUpdateMetricType = (_value: string) => { formRef.current.setFieldsValue({ - aggregation: metric?.aggregations[0], space: '', }); }; diff --git a/src/pages/MachineDashboard/Cards/CPUCard.tsx b/src/pages/MachineDashboard/Cards/CPUCard.tsx index 544db7ab..c5d950d1 100644 --- a/src/pages/MachineDashboard/Cards/CPUCard.tsx +++ b/src/pages/MachineDashboard/Cards/CPUCard.tsx @@ -7,7 +7,7 @@ import { VALUE_TYPE } from '@/utils/promQL'; import { MetricScene } from '@/utils/interface'; const mapState = (state: IRootState) => { - const { cpuStat, metricsFilterValues } = state.machine; + const { cpuStat, metricsFilterValues, instanceList } = state.machine; const { aliasConfig } = state.app; return { data: getDataByType({ @@ -15,6 +15,7 @@ const mapState = (state: IRootState) => { type: metricsFilterValues.instanceList, nameObj: getMetricsUniqName(MetricScene.CPU), aliasConfig, + instanceList }), valueType: VALUE_TYPE.percentage, loading: false, diff --git a/src/pages/MachineDashboard/Cards/LoadCard.tsx b/src/pages/MachineDashboard/Cards/LoadCard.tsx index 6f90035e..421c61e9 100644 --- a/src/pages/MachineDashboard/Cards/LoadCard.tsx +++ b/src/pages/MachineDashboard/Cards/LoadCard.tsx @@ -7,7 +7,7 @@ import { VALUE_TYPE } from '@/utils/promQL'; import { MetricScene } from '@/utils/interface'; const mapState = (state: IRootState) => { - const { loadStat, metricsFilterValues } = state.machine; + const { loadStat, metricsFilterValues, instanceList } = state.machine; const { aliasConfig } = state.app; return { data: getDataByType({ @@ -15,6 +15,7 @@ const mapState = (state: IRootState) => { type: metricsFilterValues.instanceList, nameObj: getMetricsUniqName(MetricScene.LOAD), aliasConfig, + instanceList, }), valueType: VALUE_TYPE.number, loading: false, diff --git a/src/pages/MachineDashboard/Cards/MemoryCard.tsx b/src/pages/MachineDashboard/Cards/MemoryCard.tsx index 19f4f212..d88f9fd0 100644 --- a/src/pages/MachineDashboard/Cards/MemoryCard.tsx +++ b/src/pages/MachineDashboard/Cards/MemoryCard.tsx @@ -6,7 +6,7 @@ import { VALUE_TYPE } from '@/utils/promQL'; import { MetricScene } from '@/utils/interface'; const mapState = (state: IRootState) => { - const { memoryStat, memorySizeStat, metricsFilterValues } = state.machine; + const { memoryStat, memorySizeStat, metricsFilterValues, instanceList } = state.machine; const { aliasConfig } = state.app; return { data: getDataByType({ @@ -14,6 +14,7 @@ const mapState = (state: IRootState) => { type: metricsFilterValues.instanceList, nameObj: getMetricsUniqName(MetricScene.MEMORY), aliasConfig, + instanceList, }), sizes: memorySizeStat, valueType: VALUE_TYPE.percentage, diff --git a/src/pages/MachineDashboard/Cards/NetworkIn.tsx b/src/pages/MachineDashboard/Cards/NetworkIn.tsx index 735b4c3a..8643d4ee 100644 --- a/src/pages/MachineDashboard/Cards/NetworkIn.tsx +++ b/src/pages/MachineDashboard/Cards/NetworkIn.tsx @@ -7,7 +7,7 @@ import { VALUE_TYPE } from '@/utils/promQL'; import { MetricScene } from '@/utils/interface'; const mapState = (state: IRootState) => { - const { networkInStat, metricsFilterValues } = state.machine; + const { networkInStat, metricsFilterValues, instanceList } = state.machine; const { aliasConfig } = state.app; return { data: getDataByType({ @@ -15,6 +15,7 @@ const mapState = (state: IRootState) => { type: metricsFilterValues.instanceList, nameObj: getMetricsUniqName(MetricScene.NETWORK), aliasConfig, + instanceList, }), valueType: VALUE_TYPE.byteSecondNet, loading: false, diff --git a/src/pages/MachineDashboard/Cards/NetworkOut.tsx b/src/pages/MachineDashboard/Cards/NetworkOut.tsx index ab1b8c90..81236faf 100644 --- a/src/pages/MachineDashboard/Cards/NetworkOut.tsx +++ b/src/pages/MachineDashboard/Cards/NetworkOut.tsx @@ -7,7 +7,7 @@ import { getDataByType, getMetricsUniqName } from '@/utils/dashboard'; import { MetricScene } from '@/utils/interface'; const mapState = (state: IRootState) => { - const { networkOutStat, metricsFilterValues } = state.machine; + const { networkOutStat, metricsFilterValues, instanceList } = state.machine; const { aliasConfig } = state.app; return { data: getDataByType({ @@ -15,6 +15,7 @@ const mapState = (state: IRootState) => { type: metricsFilterValues.instanceList, nameObj: getMetricsUniqName(MetricScene.NETWORK), aliasConfig, + instanceList, }), valueType: VALUE_TYPE.byteSecondNet, loading: false, diff --git a/src/pages/MachineDashboard/Detail/index.tsx b/src/pages/MachineDashboard/Detail/index.tsx index 44a4a304..72bde7f1 100644 --- a/src/pages/MachineDashboard/Detail/index.tsx +++ b/src/pages/MachineDashboard/Detail/index.tsx @@ -177,12 +177,14 @@ function Detail(props: IProps) { type: metricsFilterValues.instanceList, nameObj: dataTypeObj, aliasConfig, + instanceList: instances, }) : getDataByType({ data: dataSources[i] || [], type: metricsFilterValues.instanceList, nameObj: dataTypeObj, aliasConfig, + instanceList: instances, }); const values = data.map(d => d.value) as number[]; const maxNum = values.length > 0 ? Math.floor(Math.max(...values) * 100) / 100 : undefined; diff --git a/src/pages/MetricDetail/index.tsx b/src/pages/MetricDetail/index.tsx index dd8719a2..09b810c4 100644 --- a/src/pages/MetricDetail/index.tsx +++ b/src/pages/MetricDetail/index.tsx @@ -70,10 +70,6 @@ const mapState = (state: IRootState) => ({ }); const mapDispatch: any = (dispatch: IDispatch) => ({ - // asyncUpdateBaseLine: (key, value) => - // dispatch.setting.update({ - // [key]: value, - // }), updateMetricsFiltervalues: dispatch.machine.updateMetricsFiltervalues, updateServiceMetricsFiltervalues: dispatch.service.updateMetricsFiltervalues, asyncFetchMachineMetricsData: dispatch.machine.asyncGetMetricsData, @@ -186,18 +182,21 @@ function MetricDetail(props: Props) { const updateChart = () => { const metricScene = getMetricSecene(metricType); + const instanceList = isServiceMetric(metricType) ? serviceInstanceList : instances; const data = metricType === MetricTypeName.Disk ? getDiskData({ data: dataSource || [], type: curMetricsFilterValues.instanceList, nameObj: getMetricsUniqName(metricScene), aliasConfig, + instanceList }) : getDataByType({ data: dataSource || [], type: curMetricsFilterValues.instanceList, nameObj: getMetricsUniqName(metricScene), aliasConfig, + instanceList, }); const values = data.map(d => d.value) as number[]; const maxNum = values.length > 0 ? Math.floor(Math.max(...values) * 100) / 100 : undefined; @@ -212,32 +211,19 @@ function MetricDetail(props: Props) { }).changeData(data); }; - const metricTypeMap = useMemo(() => { - const map = {}; - if (metricOption && isServiceMetric(metricType)) { - metricOption.aggregations.forEach(type => { - if (!map[type]) { - map[type] = [metricOption]; - } else { - map[type].push(metricOption) - } - }) - } - return map; - }, [metricType, metricOption]) - const getData = async () => { const [startTimestamps, endTimestamps] = calcTimeRange(curMetricsFilterValues.timeRange); if (isServiceMetric(metricType)) { - const { period, space, metricType: aggregration } = curMetricsFilterValues; - const item = metricTypeMap[aggregration]?.find(metricItem => metricItem.metric === metricChart.metric.metric); - if (item) { + const { space } = curMetricsFilterValues; + if (metricChart.metric.metric.length) { + const aggregation = metricChart.metric.aggregations[0]; asyncFetchServiceMetricsData({ - query: getQueryByMetricType(item, aggregration, period), + query: getQueryByMetricType(metricChart.metric, aggregation, '5'), start: startTimestamps, end: endTimestamps, space: metricType === MetricTypeName.Graphd ? space : undefined, clusterID: cluster?.id, + aggregation, }).then(res => { setDataSource(res); }); diff --git a/src/pages/ServiceDashboard/Detail/index.tsx b/src/pages/ServiceDashboard/Detail/index.tsx index f9279b88..98da97aa 100644 --- a/src/pages/ServiceDashboard/Detail/index.tsx +++ b/src/pages/ServiceDashboard/Detail/index.tsx @@ -211,6 +211,7 @@ function ServiceDetail(props: IProps) { type: instanceList, nameObj: getMetricsUniqName(MetricScene.SERVICE), aliasConfig, + instanceList: props.instanceList, }); const realRange = data.length>0?(data[data.length-1].time - data[0].time):0; const tickInterval = getTickIntervalByGap(Math.floor(realRange / 10)); // 10 ticks max diff --git a/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx b/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx index 6c4b7c20..3ec48cc6 100644 --- a/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx +++ b/src/pages/ServiceDashboard/ServiceOverview/CustomServiceQueryPanel/index.tsx @@ -22,6 +22,7 @@ const mapState = (state: IRootState) => ({ cluster: (state as any).cluster?.cluster, metricsFilterValues: state.service.metricsFilterValues, serviceMetric: state.serviceMetric, + instances: state.service.instanceList, }); interface IProps @@ -35,7 +36,7 @@ interface IProps function CustomServiceQueryPanel(props: IProps) { - const { config, cluster, asyncGetMetricsData, onConfigPanel, aliasConfig, metricsFilterValues, isHidePeriod, serviceMetric, serviceType } = props; + const { config, cluster, asyncGetMetricsData, onConfigPanel, aliasConfig, metricsFilterValues, isHidePeriod, serviceMetric, serviceType, instances } = props; const [data, setData] = useState([]) @@ -117,6 +118,7 @@ function CustomServiceQueryPanel(props: IProps) { type: metricsFilterValues.instanceList, nameObj: getMetricsUniqName(MetricScene.SERVICE), aliasConfig, + instanceList: instances })} serviceType={serviceType} loading={false} diff --git a/src/utils/dashboard.ts b/src/utils/dashboard.ts index bc61ee28..8c3f0c64 100644 --- a/src/utils/dashboard.ts +++ b/src/utils/dashboard.ts @@ -159,8 +159,10 @@ export const getDataByType = (payload: { showName: (name: string) => string; }; aliasConfig?: any; + instanceList?: string[]; }) => { - const { nameObj, type, data, aliasConfig } = payload; + const { nameObj, data, aliasConfig, instanceList } = payload; + let { type } = payload; const { name, showName } = nameObj; const res = [] as ILineChartMetric[]; data.forEach(instance => { @@ -170,7 +172,11 @@ export const getDataByType = (payload: { if (typeof type === 'string') { shouldPush = (type === 'all' && _name !== 'total') || _name === type; } else if (Array.isArray(type)) { - shouldPush = (type.includes('all') && _name !== 'total') || !!type.find(t => _name.includes(t)) + if (type.includes('all')) { + shouldPush= instanceList ? instanceList.some(instance => _name.includes(instance)) : true; + } else { + shouldPush = !!type.find(t => _name.includes(t)) + } } if (shouldPush) { res.push({ @@ -192,8 +198,9 @@ export let getDiskData = (payload: { name: string; showName: (name: string) => string; }; + instanceList?: string[]; }) => { - const { type, data, nameObj } = payload; + const { type, data, nameObj, instanceList } = payload; const { name, showName } = nameObj; const res = [] as ILineChartMetric[]; data.forEach(instance => { @@ -204,7 +211,11 @@ export let getDiskData = (payload: { if (typeof type === 'string') { shouldPush = (type === 'all' && _name !== 'total') || _name === type; } else if (Array.isArray(type)) { - shouldPush = (type.includes('all') && _name !== 'total') || !!type.find(t => _name.includes(t)) + if (type.includes('all')) { + shouldPush= instanceList ? instanceList.some(instance => _name.includes(instance)) : true; + } else { + shouldPush = !!type.find(t => _name.includes(t)) + } } if (shouldPush) { res.push({