feat: allow to select only color metric in TopN (#79)

* feat: add cluster health, cluster documents(agentless), shard_state(agent) to `Cluster Monitor Overview`

* feat: allow to select only color metric in TopN

---------

Co-authored-by: yaojiping <yaojiping@infini.ltd>

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 (
     <ClusterMetric
       {...props}
       overview={1}
       fetchUrl={`${ESPrefix}/${clusterID}/cluster_metrics`}
-      metrics={['index_throughput', 'search_throughput', 'index_latency', 'search_latency']}
+      metrics={[
+        'index_throughput', 
+        'search_throughput', 
+        'index_latency', 
+        'search_latency', 
+        'cluster_health',
+        isAgent ? 'shard_state' : 'cluster_documents'
+      ]}
     />
   );
 }

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]}

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',

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 { displayName, value, metricArea, nameArea, tooltipArea, metricColor, nameColor, valueColor } = data;
-                const { format: formatArea, unit: unitArea } = sourceArea || {}
-                const formatterArea = getFormatter(formatArea)
 
-                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: <span style={{ position: 'absolute', left: 0, top: 0, fontSize: 12 }}><svg t="1735902367048" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15719" width="1em" height="1em"><path d="M525.649872 2.562499l-4.199999-2.499999c8.862498 12.062497 8.862498 6.424998 4.199999 2.562499z m467.062386 236.662443A31.862492 31.862492 0 0 0 1024.73725 207.499949V39.53749a31.862492 31.862492 0 0 0-31.962492-31.687492H823.462299a31.862492 31.862492 0 0 0-31.962492 31.687492v52.162488h-103.937475a31.349992 31.349992 0 0 0-9.787497 0H233.237443V39.53749A31.849992 31.849992 0 0 0 201.249951 7.849998H31.974992A31.862492 31.862492 0 0 0 0 39.53749v167.824959a31.849992 31.849992 0 0 0 31.974992 31.687493h52.624987v553.749864h-52.624987A31.862492 31.862492 0 0 0 0 824.487299v167.824959a31.849992 31.849992 0 0 0 31.974992 31.687492H201.249951a31.837492 31.837492 0 0 0 31.962492-31.737492v-52.174988H791.374807v52.174988a31.862492 31.862492 0 0 0 31.974992 31.737492h169.299959a31.862492 31.862492 0 0 0 31.974992-31.737492V824.599799a31.862492 31.862492 0 0 0-31.974992-31.737493H939.999771V347.299915a15.574996 15.574996 0 0 0 0-3.237499v-104.899974h52.749987zM148.749964 462.499887a34.024992 34.024992 0 0 0 5.412498-4.312499l305.212426-302.874926H604.999852L148.749964 607.912352z m52.624987-223.337445A31.849992 31.849992 0 0 0 233.299943 207.499949v-52.249987h135.512467L148.649964 373.749909V239.162442zM148.749964 697.68733L695.46233 155.249962h95.974977v38.974991L187.787454 792.862306h-39.24999v-95.174976zM876.087286 564.999862L569.399861 869.149788a32.349992 32.349992 0 0 0-5.687499 7.624998H418.012398l458.074888-454.374889z m-52.624987 227.899944a31.862492 31.862492 0 0 0-31.962492 31.737493v52.174987H652.399841l223.749945-221.987446v138.037466z m52.624987-460.287387L327.39992 876.774786h-94.162477v-39.137491l603.362353-598.474853h39.48749z" p-id="15720" fill="#666"></path></svg></span>
-                  }
+                  })
-                ]
+                }
 
                 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,

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 []
+        if (!data || data.length === 0) return []
-        return data.filter((item) => !!(item.groups && item.groups[0])).map((item) => {
+        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({ 
+                            if (value) {
-                                statisticArea: items[0]?.statistic === 'derivative' ? 'rate' : items[0]?.statistic,
+                                const { items = [] } = option?.props?.metric || {}
-                                sourceArea: 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) => {
                     }}/>
                     <Button style={{ marginBottom: 12 }} className={styles.borderRadiusLeft} type="primary" onClick={() => fetchData(type, clusterID, timeRange, formData)}>{formatMessage({ id: "form.button.search" })}</Button>
                 </Input.Group>
-                {/* <Radio.Group
-                    value={currentMode}
-                    onChange={(e) => setCurrentMode(e.target.value)}
-                    className={styles.mode}
-                >
-                    <Radio.Button value="treemap">
-                        <Icon
-                            component={TreemapSvg}
-                            style={{
-                                fontSize: 16,
-                                color: isTreemap ? "#1890ff" : "",
-                                verticalAlign: '-3px'
-                            }}
-                        />
-                    </Radio.Button>
-                    <Radio.Button value="table">
-                        <Icon
-                            type="table"
-                            style={{
-                                color: !isTreemap ? "#1890ff" : "",
-                            }}
-                        />
-                    </Radio.Button>
-                </Radio.Group>
-                <Input.Group compact style={{ width: 'auto '}}>
-                    <Input
-                        style={{ width: "60px" }}
-                        disabled
-                        defaultValue={"Top"}
-                    />
-                    <InputNumber
-                        style={{ width: "80px" }}
-                        value={formData.top}
-                        min={1}
-                        step={1}
-                        precision={0}
-                        onChange={(value) => onFormDataChange({ top: value })}
-                    />
-                </Input.Group>
-                <Input.Group compact style={{ width: 'auto '}}>
-                    <Input
-                        style={{ width: "80px" }}
-                        disabled
-                        defaultValue={"面积指标"}
-                    />
-                    <Select 
-                        style={{ width: "150px" }}
-                        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
-                            })
-                        }}
-                    >
-                        {
-                            metrics.map((item) => (
-                                <Select.Option key={item.key} metric={item}>
-                                    {item.name}
-                                </Select.Option>
-                            ))
-                        }
-                    </Select>
-                    <Select 
-                        style={{ width: "88px" }}
-                        value={formData.statisticArea}
-                        onChange={(value) => onFormDataChange({ statisticArea: value })}
-                    >
-                        {
-                            formData.sourceArea?.statistics?.filter((item) => !!item).map((item) => (
-                                <Select.Option key={item}>
-                                    {item.toUpperCase()}
-                                </Select.Option>
-                            ))
-                        }
-                    </Select>
-                </Input.Group>
-                <Button style={{ width: 32, padding: 0 }} onClick={() => onMetricExchange()}><Icon style={{ fontSize: 16 }} component={ConvertSvg}/></Button>
-                <Input.Group compact style={{ width: 'auto'}}>
-                    <Input
-                        style={{ width: "80px" }}
-                        disabled
-                        defaultValue={"颜色指标"}
-                    />
-                    
-                    <Select 
-                        style={{ width: "150px" }}
-                        value={formData.sourceColor?.key}
-                        onChange={(value, option) => {
-                            if (value) {
-                                const { items = [] } = option?.props?.metric || {}
-                                onFormDataChange({ 
-                                    statisticColor: items[0]?.statistic === 'derivative' ? 'rate' : items[0]?.statistic,
-                                    sourceColor: option?.props?.metric
-                                })
-                            } else {
-                                onFormDataChange({ 
-                                    statisticColor: undefined, 
-                                    sourceColor: undefined 
-                                })
-                            }
-                            
-                        }}
-                        allowClear
-                    >
-                        {
-                            metrics.map((item) => (
-                                <Select.Option key={item.key} metric={item}>
-                                    {item.name}
-                                </Select.Option>
-                            ))
-                        }
-                    </Select>
-                    <Select 
-                        style={{ width: "88px" }}
-                        value={formData.statisticColor}
-                        onChange={(value) => onFormDataChange({ statisticColor: value })}
-                    >
-                        {
-                            formData.sourceColor?.statistics?.filter((item) => !!item).map((item) => (
-                                <Select.Option key={item}>
-                                    {item.toUpperCase()}
-                                </Select.Option>
-                            ))
-                        }
-                    </Select>
-                    <Input.Group compact style={{ width: 'auto '}}>
-                        <Input
-                            style={{ width: "60px" }}
-                            disabled
-                            defaultValue={"主题"}
-                        />
-                        <GradientColorPicker value={formData.colors || []} onChange={(value) => {
-                            onFormDataChange({ colors: value })
-                            setConfig({
-                                ...cloneDeep(config),
-                                colors: value
-                            })
-                        }}/>
-                    </Input.Group>
-                </Input.Group>
-                <Button type="primary" onClick={() => fetchData(type, clusterID, timeRange, formData)}>{formatMessage({ id: "form.button.search" })}</Button> */}
             </div>
             
             <div className={styles.content}>

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 || []