Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
medcl merged 2 commits into from
Jan 11, 2025
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0077f72
feat: add cluster health, cluster documents(agentless), shard_state(a…
Jan 11, 2025
b264ab9
feat: allow to select only color metric in TopN
Jan 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
feat: allow to select only color metric in TopN
  • Loading branch information
yaojiping committed Jan 11, 2025
commit b264ab942c5dee47b789f39a88ad746090836d04
10 changes: 7 additions & 3 deletions web/src/pages/Platform/Overview/components/MetricChart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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])
Expand Down Expand Up @@ -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)
)}
/>
);
Expand Down Expand Up @@ -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]}
Expand Down
5 changes: 3 additions & 2 deletions web/src/pages/Platform/Overview/components/TopN/Table.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {

Expand All @@ -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',
Expand All @@ -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',
Expand Down
22 changes: 14 additions & 8 deletions web/src/pages/Platform/Overview/components/TopN/Treemap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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: <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,
Expand Down
200 changes: 42 additions & 158 deletions web/src/pages/Platform/Overview/components/TopN/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {

Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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']
Expand Down Expand Up @@ -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') {
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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) => (
Expand Down Expand Up @@ -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}>
Expand Down
Loading