diff --git a/web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx b/web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx index df1c3859..ca1cd80c 100644 --- a/web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx +++ b/web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx @@ -3,14 +3,21 @@ import { ESPrefix } from "@/services/common"; export default (props) => { - const { clusterID } = props + const { isAgent, clusterID } = props return ( ); } diff --git a/web/src/pages/Platform/Overview/components/MetricChart.jsx b/web/src/pages/Platform/Overview/components/MetricChart.jsx index dedaa038..111c4674 100644 --- a/web/src/pages/Platform/Overview/components/MetricChart.jsx +++ b/web/src/pages/Platform/Overview/components/MetricChart.jsx @@ -91,6 +91,10 @@ export default (props) => { firstFetchRef.current = false } } + + const fixFormat = (formatType, format) => { + return formatType === 'num' && format ? `${format}a` : format + } useEffect(() => { observerRef.current.deps = cloneDeep([queryParams, fetchUrl, metricKey, timeInterval, refresh]) @@ -235,11 +239,11 @@ export default (props) => { ticks={item.ticks} labelFormat={getFormatter( item.formatType, - item.labelFormat + fixFormat(item.formatType, item.labelFormat) )} tickFormat={getFormatter( item.formatType, - item.tickFormat + fixFormat(item.formatType, item.tickFormat) )} /> ); @@ -291,7 +295,7 @@ export default (props) => { xAccessor={0} tickFormat={getFormatter( item.metric.formatType, - item.metric.tickFormat, + fixFormat(item.metric.formatType, item.metric.formatType), item.metric.units )} yAccessors={[1]} diff --git a/web/src/pages/Platform/Overview/components/TopN/Table.jsx b/web/src/pages/Platform/Overview/components/TopN/Table.jsx index 97a05d75..62ebf88e 100644 --- a/web/src/pages/Platform/Overview/components/TopN/Table.jsx +++ b/web/src/pages/Platform/Overview/components/TopN/Table.jsx @@ -3,6 +3,7 @@ import { Treemap } from "@ant-design/charts"; import { Table } from "antd"; import { useMemo } from "react"; import { formatMessage } from "umi/locale"; +import { fixFormatter } from "./Treemap"; export default (props) => { @@ -23,7 +24,7 @@ export default (props) => { }]; if (sourceArea) { const { format: formatArea, unit: unitArea } = sourceArea || {} - const formatterArea = getFormatter(formatArea) + const formatterArea = fixFormatter(formatArea) newColumns.push({ title: unitArea ? `${sourceArea.name}(${unitArea})` : sourceArea.name, dataIndex: 'value', @@ -35,7 +36,7 @@ export default (props) => { } if (sourceColor) { const { format: formatColor, unit: unitColor } = sourceColor - const formatterColor = getFormatter(formatColor) + const formatterColor = fixFormatter(formatColor) newColumns.push({ title: unitColor ? `${sourceColor.name}(${unitColor})` : sourceColor.name, dataIndex: 'valueColor', diff --git a/web/src/pages/Platform/Overview/components/TopN/Treemap.jsx b/web/src/pages/Platform/Overview/components/TopN/Treemap.jsx index 0bd51043..afe69792 100644 --- a/web/src/pages/Platform/Overview/components/TopN/Treemap.jsx +++ b/web/src/pages/Platform/Overview/components/TopN/Treemap.jsx @@ -53,6 +53,10 @@ const generateColors = (colors, data) => { return newColors } +export const fixFormatter = (formatType) => { + return getFormatter(formatType === 'number' ? 'num' : formatType, formatType === 'number' ? '0,0.[00]a' : '') +} + export default (props) => { const { config = {}, data = [] } = props @@ -108,22 +112,24 @@ export default (props) => { customContent: (title, items) => { if (!items[0]) return; const { color, data } = items[0]; - const { displayName, value, metricArea, nameArea, metricColor, nameColor, valueColor } = data; - const { format: formatArea, unit: unitArea } = sourceArea || {} - const formatterArea = getFormatter(formatArea) + const { displayName, value, metricArea, nameArea, tooltipArea, metricColor, nameColor, valueColor } = data; + + const markers = [] - const markers = [ - { + if (metricArea && tooltipArea !== false) { + const { format: formatArea, unit: unitArea } = sourceArea || {} + const formatterArea = fixFormatter(formatArea) + markers.push({ name: nameArea, value: formatterArea ? formatterArea(value) : value, unit: unitArea, marker: - } - ] + }) + } if (metricColor) { const { format: formatColor, unit: unitColor } = sourceColor || {} - const formatterColor = getFormatter(formatColor) + const formatterColor = fixFormatter(formatColor) markers.push({ name: nameColor, value: formatterColor ? formatterColor(valueColor) : valueColor, diff --git a/web/src/pages/Platform/Overview/components/TopN/index.jsx b/web/src/pages/Platform/Overview/components/TopN/index.jsx index 88eb5d75..06a85114 100644 --- a/web/src/pages/Platform/Overview/components/TopN/index.jsx +++ b/web/src/pages/Platform/Overview/components/TopN/index.jsx @@ -13,6 +13,7 @@ import { cloneDeep } from "lodash"; import request from "@/utils/request"; import { formatTimeRange } from "@/lib/elasticsearch/util"; import { CopyToClipboard } from "react-copy-to-clipboard"; +import * as uuid from 'uuid'; export default (props) => { @@ -56,13 +57,14 @@ export default (props) => { } const fetchData = async (type, clusterID, timeRange, formData, shouldLoading = true) => { - if (!clusterID || !timeRange || !formData.sourceArea) return; + if (!clusterID || !timeRange || (!formData.sourceArea && !formData.sourceColor)) return; if (shouldLoading) { setLoading(true) } const { top, sourceArea = {}, statisticArea, statisticColor, sourceColor = {} } = formData const newTimeRange = formatTimeRange(timeRange); searchParamsRef.current = { type, clusterID, formData } + const sortKey = sourceArea?.items?.[0]?.name || sourceColor?.items?.[0]?.name const body = { "index_pattern": ".infini_metrics*", "time_field": "timestamp", @@ -121,10 +123,10 @@ export default (props) => { "field": type === 'shard' ? `metadata.labels.shard_id` : `metadata.labels.${type}_name`, "limit": top }], - "sort": [{ + "sort": sortKey ? [{ "direction": "desc", - "key": sourceArea?.items[0].name - }] + "key": sortKey + }] : undefined } if (statisticArea !== 'rate' && statisticColor !== 'rate') { delete body['time_field'] @@ -178,8 +180,9 @@ export default (props) => { const formatData = useMemo(() => { const { data = [] } = result || {}; - if (!data || data.length === 0 || !sourceArea) return [] - return data.filter((item) => !!(item.groups && item.groups[0])).map((item) => { + if (!data || data.length === 0) return [] + let sortKey; + const newData = data.filter((item) => !!(item.groups && item.groups[0])).map((item) => { const { groups = [], value } = item; let name = groups[0]; if (type === 'shard') { @@ -191,17 +194,32 @@ export default (props) => { const object = { name: name, displayName: name, - value: value?.[sourceArea.formula] || 0, - metricArea: sourceArea.key, - nameArea: sourceArea.name, } - if (sourceColor?.formula) { + + if (sourceArea) { + object['metricArea'] = sourceArea.key + object['value'] = value?.[sourceArea?.formula] || 0 + object['nameArea'] = sourceArea.name + sortKey = 'value' + } else { + if (sourceColor) { + const key = uuid.v4(); + object['metricArea'] = `metric_${key}` + object['value'] = 1 + object['nameArea'] = `name_${key}` + object['tooltipArea'] = false + } + } + + if (sourceColor) { object['metricColor'] = sourceColor.key object['valueColor'] = value?.[sourceColor.formula] || 0 object['nameColor'] = sourceColor.name + sortKey = 'valueColor' } return object }) + return sortKey ? newData.sort((a, b) => b[sortKey] - a[sortKey]) : newData }, [result, sourceArea, sourceColor, type]) useEffect(() => { @@ -266,12 +284,21 @@ export default (props) => { style={{ width: "150px", marginBottom: 12 }} value={formData.sourceArea?.key} onChange={(value, option) => { - const { items = [] } = option?.props?.metric || {} - onFormDataChange({ - statisticArea: items[0]?.statistic === 'derivative' ? 'rate' : items[0]?.statistic, - sourceArea: option?.props?.metric - }) + + if (value) { + const { items = [] } = option?.props?.metric || {} + onFormDataChange({ + statisticArea: items[0]?.statistic === 'derivative' ? 'rate' : items[0]?.statistic, + sourceArea: option?.props?.metric + }) + } else { + onFormDataChange({ + statisticArea: undefined, + sourceArea: undefined + }) + } }} + allowClear > { metrics.map((item) => ( @@ -358,149 +385,6 @@ export default (props) => { }}/> - {/* setCurrentMode(e.target.value)} - className={styles.mode} - > - - - - - - - - - - onFormDataChange({ top: value })} - /> - - - - - - - - - - - - - - - { - onFormDataChange({ colors: value }) - setConfig({ - ...cloneDeep(config), - colors: value - }) - }}/> - - - */}
diff --git a/web/src/pages/Platform/Overview/components/cluster_metric.jsx b/web/src/pages/Platform/Overview/components/cluster_metric.jsx index 951ceb6e..1e68112f 100644 --- a/web/src/pages/Platform/Overview/components/cluster_metric.jsx +++ b/web/src/pages/Platform/Overview/components/cluster_metric.jsx @@ -67,7 +67,7 @@ export default (props) => { })} queryParams={queryParams} className={styles.vizChartContainer} - style={{ flex: metricKey == "cluster_health" ? '0 0 calc(100%)' : '0 0 calc(50% - 5px)'}} + style={{ flex: metricKey == "cluster_health" && !overview ? '0 0 calc(100%)' : '0 0 calc(50% - 5px)'}} formatMetric={(metric) => { if (metric) { const lines = metric.lines || []