({ label: item.toUpperCase(), value: item }))}
+ onChange={(value) => {
+ onChange(value.map((item) => item.value))
+ }}
+ />
+ );
+};
+
+export const Tags = ({ value = [], onChange }) => {
+ const [inputVisible, setInputVisible] = useState(false);
+ const [inputValue, setInputValue] = useState("");
+
+ const handleInputChange = (e) => {
+ setInputValue(e.target.value);
+ };
+
+ const showInput = () => {
+ setInputVisible(true);
+ };
+
+ const handleRemove = useCallback(
+ (index) => {
+ const newValue = [...value];
+ newValue.splice(index, 1);
+ onChange(newValue);
+ },
+ [value]
+ );
+
+ const handleInputConfirm = (input) => {
+ if (input.length === 0) {
+ return message.warning(
+ formatMessage({ id: "command.message.invalid.tag" })
+ );
+ }
+ if (input) onChange([...(value || []), input]);
+ setInputVisible(false);
+ setInputValue("");
+ }
+
+ const handleKeyDown = (event) => {
+ if (event.key === 'Enter') {
+ handleInputConfirm(inputValue)
+ }
+ };
+
+ return (
+
+ {value.map((tag, index) => (
+
+ handleRemove(index)}
+ style={{ height: '40px', lineHeight: '40px', fontSize: 14}}
+ >
+ {tag}
+
+
+
+ ))}
+ {inputVisible && (
+
+ {
+ setInputVisible(false);
+ setInputValue("");
+ }}
+ autoFocus
+ />
+
+ )}
+ {!inputVisible && (
+
+
+ Add New
+
+
+ )}
+
+ );
+};
diff --git a/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/index.jsx b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/index.jsx
new file mode 100644
index 00000000..f226ed7f
--- /dev/null
+++ b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/index.jsx
@@ -0,0 +1,35 @@
+import rate from './rate'
+import rate_sum_func_value_in_group from './rate_sum_func_value_in_group'
+import latency from './latency'
+import latency_sum_func_value_in_group from './latency_sum_func_value_in_group'
+import sum_func_value_in_group from './sum_func_value_in_group'
+
+export const getStatistics = (type) => {
+ if (type !== 'string') {
+ return [
+ "max",
+ "min",
+ "avg",
+ "sum",
+ "medium",
+ "p99",
+ "p95",
+ "p90",
+ "p80",
+ "p50",
+ "count",
+ "cardinality",
+ ];
+ }
+ return ["count", "cardinality"];
+};
+
+const functions = {
+ rate,
+ rate_sum_func_value_in_group,
+ latency,
+ latency_sum_func_value_in_group,
+ sum_func_value_in_group,
+}
+
+export default functions
\ No newline at end of file
diff --git a/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/latency.jsx b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/latency.jsx
new file mode 100644
index 00000000..35d28f39
--- /dev/null
+++ b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/latency.jsx
@@ -0,0 +1,46 @@
+import { EuiComboBox, EuiFormRow } from "@elastic/eui"
+
+export default (props) => {
+ const { indexPattern, spec, onChange } = props;
+ const keys = Object.keys(spec?.function || {})
+ const statistic = keys[0]
+ const func = spec?.function?.[statistic]
+ const { divisor, dividend } = func || {}
+
+ return (
+ <>
+
+ !!item.spec?.name).map((item) => (
+ { value: item.spec?.name, label: item.spec?.name }
+ ))}
+ selectedOptions={dividend ? [{ value: dividend, label: dividend }] : []}
+ onChange={(value) => {
+ onChange({ [statistic]: {
+ ...(func || {}),
+ dividend: value[0]?.value
+ }})
+ }}
+ isClearable={false}
+ />
+
+
+ !!item.spec?.name).map((item) => (
+ { value: item.spec?.name, label: item.spec?.name }
+ ))}
+ selectedOptions={divisor ? [{ value: divisor, label: divisor }] : []}
+ onChange={(value) => {
+ onChange({ [statistic]: {
+ ...(func || {}),
+ divisor: value[0]?.value
+ }})
+ }}
+ isClearable={false}
+ />
+
+
+ )
+}
\ No newline at end of file
diff --git a/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/latency_sum_func_value_in_group.jsx b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/latency_sum_func_value_in_group.jsx
new file mode 100644
index 00000000..ec071073
--- /dev/null
+++ b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/latency_sum_func_value_in_group.jsx
@@ -0,0 +1,90 @@
+import { EuiComboBox, EuiFormRow } from "@elastic/eui"
+import { getStatistics } from ".";
+
+export default (props) => {
+ const { indexPattern, spec, onChange } = props;
+ const keys = Object.keys(spec?.function || {})
+ const statistic = keys[0]
+ const func = spec?.function?.[statistic]
+ const { divisor, dividend, group } = func || {}
+
+ return (
+ <>
+
+ !!item.spec?.name).map((item) => (
+ { value: item.spec?.name, label: item.spec?.name, type: item.spec?.type }
+ ))}
+ selectedOptions={dividend ? [{ value: dividend, label: dividend }] : []}
+ onChange={(value) => {
+ const types = getStatistics(value[0]?.type)
+ onChange({ [statistic]: {
+ ...(func || {}),
+ dividend: value[0]?.value,
+ group: {
+ ...(func?.group || {}),
+ func: types.includes('max') ? 'max' : types[0]
+ }
+ }})
+ }}
+ isClearable={false}
+ />
+
+
+ !!item.spec?.name).map((item) => (
+ { value: item.spec?.name, label: item.spec?.name }
+ ))}
+ selectedOptions={divisor ? [{ value: divisor, label: divisor }] : []}
+ onChange={(value) => {
+ onChange({ [statistic]: {
+ ...(func || {}),
+ divisor: value[0]?.value
+ }})
+ }}
+ isClearable={false}
+ />
+
+
+ !!item.spec?.name).map((item) => (
+ { value: item.spec?.name, label: item.spec?.name }
+ ))}
+ selectedOptions={group?.field ? [{ value: group?.field, label: group?.field }] : []}
+ onChange={(value) => {
+ onChange({ [statistic]: {
+ ...(func || {}),
+ group: {
+ ...(func?.group || {}),
+ field: value[0]?.value,
+ }
+ }})
+ }}
+ isClearable={false}
+ />
+
+ {/*
+ (
+ { value: item, label: item.toUpperCase() }
+ ))}
+ selectedOptions={group?.func ? [{ value: group?.func, label: group?.func?.toUpperCase() }] : []}
+ onChange={(value) => {
+ onChange({ [statistic]: {
+ ...(func || {}),
+ group: {
+ ...(group || {}),
+ func: value[0]?.value
+ }
+ }})
+ }}
+ isClearable={false}
+ />
+ */}
+
+ )
+}
\ No newline at end of file
diff --git a/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/rate.jsx b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/rate.jsx
new file mode 100644
index 00000000..6a3c349e
--- /dev/null
+++ b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/rate.jsx
@@ -0,0 +1,28 @@
+import { EuiComboBox, EuiFormRow } from "@elastic/eui"
+
+export default (props) => {
+ const { indexPattern, spec, onChange } = props;
+ const keys = Object.keys(spec?.function || {})
+ const statistic = keys[0]
+ const func = spec?.function?.[statistic]
+ const { field, group } = func || {}
+
+ return (
+
+ !!item.spec?.name).map((item) => (
+ { value: item.spec?.name, label: item.spec?.name }
+ ))}
+ selectedOptions={field ? [{ value: field, label: field }] : []}
+ onChange={(value) => {
+ onChange({ [statistic]: {
+ ...(func || {}),
+ field: value[0]?.value
+ }})
+ }}
+ isClearable={false}
+ />
+
+ )
+}
\ No newline at end of file
diff --git a/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/rate_sum_func_value_in_group.jsx b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/rate_sum_func_value_in_group.jsx
new file mode 100644
index 00000000..67781352
--- /dev/null
+++ b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/rate_sum_func_value_in_group.jsx
@@ -0,0 +1,73 @@
+import { EuiComboBox, EuiFormRow } from "@elastic/eui"
+import { getStatistics } from ".";
+
+export default (props) => {
+ const { indexPattern, spec, onChange } = props;
+ const keys = Object.keys(spec?.function || {})
+ const statistic = keys[0]
+ const func = spec?.function?.[statistic]
+ const { field, group } = func || {}
+
+ return (
+ <>
+
+ !!item.spec?.name).map((item) => (
+ { value: item.spec?.name, label: item.spec?.name, type: item.spec?.type }
+ ))}
+ selectedOptions={field ? [{ value: field, label: field }] : []}
+ onChange={(value) => {
+ const types = getStatistics(value[0]?.type)
+ onChange({ [statistic]: {
+ ...(func || {}),
+ field: value[0]?.value,
+ group: {
+ func: types.includes('max') ? 'max' : types[0]
+ }
+ }})
+ }}
+ isClearable={false}
+ />
+
+
+ !!item.spec?.name).map((item) => (
+ { value: item.spec?.name, label: item.spec?.name }
+ ))}
+ selectedOptions={group?.field ? [{ value: group?.field, label: group?.field }] : []}
+ onChange={(value) => {
+ onChange({ [statistic]: {
+ ...(func || {}),
+ group: {
+ ...(func?.group || {}),
+ field: value[0]?.value,
+ }
+ }})
+ }}
+ isClearable={false}
+ />
+
+ {/*
+ (
+ { value: item, label: item.toUpperCase() }
+ ))}
+ selectedOptions={group?.func ? [{ value: group?.func, label: group?.func?.toUpperCase() }] : []}
+ onChange={(value) => {
+ onChange({ [statistic]: {
+ ...(func || {}),
+ group: {
+ ...(group || {}),
+ func: value[0]?.value
+ }
+ }})
+ }}
+ isClearable={false}
+ />
+ */}
+
+ )
+}
\ No newline at end of file
diff --git a/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/sum_func_value_in_group.jsx b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/sum_func_value_in_group.jsx
new file mode 100644
index 00000000..b287a448
--- /dev/null
+++ b/web/src/components/vendor/index_pattern_management/public/components/field_editor/functions/sum_func_value_in_group.jsx
@@ -0,0 +1,74 @@
+import { EuiComboBox, EuiFormRow } from "@elastic/eui"
+import { useState } from "react";
+import { getStatistics } from ".";
+
+export default (props) => {
+ const { indexPattern, spec, onChange } = props;
+ const keys = Object.keys(spec?.function || {})
+ const statistic = keys[0]
+ const func = spec?.function?.[statistic]
+ const { field, group } = func || {}
+
+ return (
+ <>
+
+ !!item.spec?.name).map((item) => (
+ { value: item.spec?.name, label: item.spec?.name, type: item.spec?.type }
+ ))}
+ selectedOptions={field ? [{ value: field, label: field }] : []}
+ onChange={(value) => {
+ const types = getStatistics(value[0]?.type)
+ onChange({ [statistic]: {
+ ...(func || {}),
+ field: value[0]?.value,
+ group: {
+ func: types.includes('max') ? 'max' : types[0]
+ }
+ }})
+ }}
+ isClearable={false}
+ />
+
+
+ !!item.spec?.name).map((item) => (
+ { value: item.spec?.name, label: item.spec?.name }
+ ))}
+ selectedOptions={group?.field ? [{ value: group?.field, label: group?.field }] : []}
+ onChange={(value) => {
+ onChange({ [statistic]: {
+ ...(func || {}),
+ group: {
+ ...(func?.group || {}),
+ field: value[0]?.value,
+ }
+ }})
+ }}
+ isClearable={false}
+ />
+
+ {/*
+ (
+ { value: item, label: item.toUpperCase() }
+ ))}
+ selectedOptions={group?.func ? [{ value: group?.func, label: group?.func?.toUpperCase() }] : []}
+ onChange={(value) => {
+ onChange({ [statistic]: {
+ ...(func || {}),
+ group: {
+ ...(group || {}),
+ func: value[0]?.value
+ }
+ }})
+ }}
+ isClearable={false}
+ />
+ */}
+
+ )
+}
\ No newline at end of file
diff --git a/web/src/locales/en-US.js b/web/src/locales/en-US.js
index 8bde6bbe..a50e799d 100644
--- a/web/src/locales/en-US.js
+++ b/web/src/locales/en-US.js
@@ -81,6 +81,7 @@ export default {
"form.publicUsers.option.B": "Colleague B",
"form.publicUsers.option.C": "Colleague C",
"form.button.search": "Search",
+ "form.button.apply": "Apply",
"form.button.new": "New",
"form.button.create": "Create",
"form.button.add": "Add",
diff --git a/web/src/locales/en-US/cluster.js b/web/src/locales/en-US/cluster.js
index 48c75688..41173891 100644
--- a/web/src/locales/en-US/cluster.js
+++ b/web/src/locales/en-US/cluster.js
@@ -119,6 +119,10 @@ export default {
"cluster.monitor.timepicker.lastyear": "Last year",
"cluster.monitor.timepicker.today": "Today",
+ "cluster.monitor.topn.area": "Area Metric",
+ "cluster.monitor.topn.color": "Color Metric",
+ "cluster.monitor.topn.theme": "Theme",
+
"cluster.metrics.axis.index_throughput.title": "Indexing Rate",
"cluster.metrics.axis.search_throughput.title": "Search Rate",
"cluster.metrics.axis.index_latency.title": "Indexing Latency",
diff --git a/web/src/locales/zh-CN.js b/web/src/locales/zh-CN.js
index 895cb22b..aa22f362 100644
--- a/web/src/locales/zh-CN.js
+++ b/web/src/locales/zh-CN.js
@@ -86,6 +86,7 @@ export default {
"form.logstash.kafkaconf.label": "Logstash Kafka 配置",
"form.logstash.kafkaconf.placeholder": "请输入Kafka配置",
"form.button.search": "搜索",
+ "form.button.apply": "应用",
"form.button.new": "新建",
"form.button.create": "创建",
"form.button.add": "添加",
diff --git a/web/src/locales/zh-CN/cluster.js b/web/src/locales/zh-CN/cluster.js
index ef0dae6d..63865abb 100644
--- a/web/src/locales/zh-CN/cluster.js
+++ b/web/src/locales/zh-CN/cluster.js
@@ -110,6 +110,10 @@ export default {
"cluster.monitor.timepicker.lastyear": "最近1年",
"cluster.monitor.timepicker.today": "今天",
+ "cluster.monitor.topn.area": "面积指标",
+ "cluster.monitor.topn.color": "颜色指标",
+ "cluster.monitor.topn.theme": "主题",
+
"cluster.metrics.axis.index_throughput.title": "索引吞吐",
"cluster.metrics.axis.search_throughput.title": "查询吞吐",
"cluster.metrics.axis.index_latency.title": "索引延迟",
diff --git a/web/src/pages/DataManagement/Discover.jsx b/web/src/pages/DataManagement/Discover.jsx
index 9d1c0d9e..a73cdab4 100644
--- a/web/src/pages/DataManagement/Discover.jsx
+++ b/web/src/pages/DataManagement/Discover.jsx
@@ -112,15 +112,15 @@ const Discover = (props) => {
const [timeZone, setTimeZone] = useState(() => getTimezone());
const [mode, setMode] = useState("table");
- const [viewLayout, setViewLayout] = useState();
+ // const [viewLayout, setViewLayout] = useState();
const insightBarRef = useRef();
const visRef = useRef();
- const layoutRef = useRef();
+ // const layoutRef = useRef();
const rangeCacheRef = useRef();
const fullScreenHandle = useFullScreenHandle();
- const [layout, setLayout] = useState(
- Layouts.find((item) => item.name === "default")
- );
+ // const [layout, setLayout] = useState(
+ // Layouts.find((item) => item.name === "default")
+ // );
const [timeTipsLoading, setTimeTipsLoading] = useState(false);
const [insightLoading, setInsightLoading] = useState(false);
const [showResultCount, setShowResultCount] = useState(true);
@@ -293,9 +293,9 @@ const Discover = (props) => {
getFilters()
);
}
- if (mode === "layout") {
- layoutRef?.current?.onRefresh();
- }
+ // if (mode === "layout") {
+ // layoutRef?.current?.onRefresh();
+ // }
if (!indexPatternRef.current) {
return;
}
@@ -415,7 +415,7 @@ const Discover = (props) => {
columns: record.filter?.columns || ["_source"],
}
if (record.time_field) {
- newState.sort = [{[record.time_field]: {order: "desc"}}]
+ newState.sort = [[record.time_field, 'desc']]
}
setState(newState);
if (record.filter?.filters?.length > 0) {
@@ -881,24 +881,24 @@ const Discover = (props) => {
}
};
- const fetchViewDefaultLayout = async (clusterId, viewId) => {
- setInsightLoading(true);
- const res = await request(
- `/elasticsearch/${clusterId}/saved_objects/view/${viewId}`
- );
- const layoutId = res?._source?.default_layout_id;
- if (layoutId) {
- const layout = await request(`/layout/${layoutId}`);
- if (layout?._source) {
- setViewLayout(layout?._source);
- } else {
- setViewLayout();
- }
- } else {
- setViewLayout();
- }
- setInsightLoading(false);
- };
+ // const fetchViewDefaultLayout = async (clusterId, viewId) => {
+ // setInsightLoading(true);
+ // const res = await request(
+ // `/elasticsearch/${clusterId}/saved_objects/view/${viewId}`
+ // );
+ // const layoutId = res?._source?.default_layout_id;
+ // if (layoutId) {
+ // const layout = await request(`/layout/${layoutId}`);
+ // if (layout?._source) {
+ // setViewLayout(layout?._source);
+ // } else {
+ // setViewLayout();
+ // }
+ // } else {
+ // setViewLayout();
+ // }
+ // setInsightLoading(false);
+ // };
const onFieldAgg = async (field, beforeFuc, afterFuc) => {
let name = field?.spec?.name || field?.name
@@ -993,27 +993,27 @@ const Discover = (props) => {
}
}
- useEffect(() => {
- if (indexPattern?.type === "view") {
- fetchViewDefaultLayout(props.selectedCluster?.id, indexPattern?.id);
- } else {
- setViewLayout();
- }
- }, [indexPattern, props.selectedCluster?.id]);
+ // useEffect(() => {
+ // if (indexPattern?.type === "view") {
+ // fetchViewDefaultLayout(props.selectedCluster?.id, indexPattern?.id);
+ // } else {
+ // setViewLayout();
+ // }
+ // }, [indexPattern, props.selectedCluster?.id]);
- useEffect(() => {
- setMode(viewLayout ? "layout" : "table");
- }, [viewLayout]);
+ // useEffect(() => {
+ // setMode(viewLayout ? "layout" : "table");
+ // }, [viewLayout]);
- useEffect(() => {
- if (mode === "table" && viewLayout) {
- setViewLayout();
- }
- }, [mode]);
+ // useEffect(() => {
+ // if (mode === "table" && viewLayout) {
+ // setViewLayout();
+ // }
+ // }, [mode]);
- const showLayoutListIcon = useMemo(() => {
- return indexPattern?.type === "view";
- }, [indexPattern]);
+ // const showLayoutListIcon = useMemo(() => {
+ // return indexPattern?.type === "view";
+ // }, [indexPattern]);
return (
@@ -1104,10 +1104,10 @@ const Discover = (props) => {
getBucketSize,
columns: state.columns,
}}
- layoutConfig={{
- layout,
- onChange: setLayout,
- }}
+ // layoutConfig={{
+ // layout,
+ // onChange: setLayout,
+ // }}
isEmpty={resultState === "none" && queryFrom === 0}
onQueriesSelect={onQueriesSelect}
onQueriesRemove={(id) => {
@@ -1159,15 +1159,15 @@ const Discover = (props) => {
break;
}
}}
- showLayoutListIcon={showLayoutListIcon}
- viewLayout={viewLayout}
- onViewLayoutChange={(layout) => {
- if (layout) {
- setViewLayout(layout);
- } else {
- setViewLayout();
- }
- }}
+ showLayoutListIcon={false}
+ // viewLayout={viewLayout}
+ // onViewLayoutChange={(layout) => {
+ // if (layout) {
+ // setViewLayout(layout);
+ // } else {
+ // setViewLayout();
+ // }
+ // }}
/>
@@ -1200,20 +1200,22 @@ const Discover = (props) => {
getFilters={getSearchFilters}
getBucketSize={getBucketSize}
fullScreenHandle={fullScreenHandle}
- layout={layout}
+ // layout={layout}
selectedQueries={selectedQueries}
/>
- ) : mode === "layout" ? (
-
- ) : (
+ ) :
+ // mode === "layout" ? (
+ //
+ // ) :
+ (
<>
{indexPattern && (
diff --git a/web/src/pages/DataManagement/IndexPatterns.jsx b/web/src/pages/DataManagement/IndexPatterns.jsx
index 58ed3a2e..bd16c017 100644
--- a/web/src/pages/DataManagement/IndexPatterns.jsx
+++ b/web/src/pages/DataManagement/IndexPatterns.jsx
@@ -19,6 +19,7 @@ import { formatMessage } from "umi/locale";
import { getAuthority, hasAuthority } from "@/utils/authority";
import EditLayout from "./View/EditLayout";
import { Card, Empty } from "antd";
+import { CreateEditComplexFieldContainer } from "@/components/vendor/index_pattern_management/public/components/edit_index_pattern/create_edit_complex_field";
const IndexPatterns = (props) => {
if (!props.selectedCluster?.id) {
@@ -57,15 +58,11 @@ const IndexPatterns = (props) => {
-
+
{
>
- {
- !isAgent && (
-
-
-
- )
- }
+
+
+
{
isAgent && (
{
+ function colorToRgb(color) {
+ const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+ return rgb ? {
+ r: parseInt(rgb[1], 16),
+ g: parseInt(rgb[2], 16),
+ b: parseInt(rgb[3], 16)
+ } : null;
+ }
+
+ function rgbToHex(r, g, b) {
+ return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+ }
+
+ const startRGB = colorToRgb(startColor);
+ const endRGB = colorToRgb(endColor);
+ const diffR = endRGB.r - startRGB.r;
+ const diffG = endRGB.g - startRGB.g;
+ const diffB = endRGB.b - startRGB.b;
+
+ const colors = [];
+ for (let i = 0; i <= steps; i++) {
+ const r = startRGB.r + (diffR * i / steps);
+ const g = startRGB.g + (diffG * i / steps);
+ const b = startRGB.b + (diffB * i / steps);
+ colors.push(rgbToHex(Math.round(r), Math.round(g), Math.round(b)));
+ }
+
+ return colors;
+}
+
+export const generateColors = (colors, data) => {
+ if (!colors || colors.length <= 1 || !data || data.length <= 1 || data.length <= colors.length) return colors
+ const gradientSize = data.length - colors.length
+ const steps = Math.floor(gradientSize / (colors.length - 1)) + 1
+ let remainder = gradientSize % (colors.length - 1)
+ const newColors = []
+ for(let i=0; i 0) {
+ fixSteps++
+ remainder--
+ }
+ const gradientColors = generateGradientColors(colors[i], colors[i+1], fixSteps)
+ newColors.push(...gradientColors.slice(0, gradientColors.length - 1))
+ }
+ newColors.push(colors[colors.length - 1])
+ return newColors
+}
+
+export const fixFormatter = (formatType, pattern = '0,0.[00]a') => {
+ return getFormatter(formatType === 'number' ? 'num' : formatType, formatType === 'number' ? pattern : '')
+}
+
+export const handleTextOverflow = (text, maxWidth) => {
+ if (!text || text.length <= 3) return text
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ let textWidth = ctx.measureText(text).width;
+ if (textWidth > maxWidth) {
+ let size = text.length - 3;
+ let newText = text.substr(0, size) + '...'
+ while (textWidth > maxWidth) {
+ size--
+ newText = text.substr(0, size) + '...'
+ textWidth = ctx.measureText(newText).width;
+ }
+ return text.substr(0, size - 5) + '...'
+ } else {
+ return text
+ }
+}
+
+export default (props) => {
+
+ const { config = {}, data = [] } = props
+
+ return (
+
+ { data.length === 0 || data.some((item) => !Number.isFinite(item.value)) ? (
+
+
+
+ ) : (
+ config?.sourceArea?.name ? (
+
+ ) : (
+
+ )
+ )}
+
+
+
{
+ return handleTextOverflow(a.name, size?.itemWidth)
+ }
+ },
+ heatmapStyle: {
+ lineWidth: 0
+ },
+ xAxis: {
+ tickLine: null,
+ label: null,
+ },
+ yAxis: {
+ tickLine: null,
+ label: null,
+ },
+ legend: false,
+ tooltip: {
+ customContent: (title, items) => {
+ if (!items[0]) return;
+ const { color, data } = items[0];
+ const { item } = data;
+
+ if (item) {
+ const { format: formatColor, pattern: patternColor, unit: unitColor } = sourceColor || {}
+ const { name, value, nameColor, valueColor, displayName } = item || {}
+ const formatterColor = fixFormatter(formatColor, patternColor)
+ const markers = []
+ markers.push({
+ name: nameColor,
+ value: formatterColor ? formatterColor(valueColor) : valueColor,
+ unit: unitColor,
+ marker:
+ })
+ return (
+
+ {
+
+ {displayName}
+
+ }
+
+ {
+ markers.map((item, index) => (
+
+ {item.marker}
+
+ {item.name}:
+
+ {item.unit ? `${item.value}${item.unit}` : item.value}
+
+
+
+ ))
+ }
+
+
+
- { data.length === 0 || data.some((item) => !Number.isFinite(item.value)) ? (
-
-
-
- ) : (
-
{
autoFit: true,
color,
colorField: 'name',
- legend: {
- position: 'top-left',
- itemName: {
- formatter: (text) => {
- const item = data.find((item) => item.name === text)
- return item?.groupName || text
- }
- }
- },
label: {
- formatter: (item) => item.displayName
+ formatter: (item, a, b, c) => item.displayName
+ },
+ legend: {
+ position: 'top-left',
+ itemName: {
+ formatter: (text) => {
+ const item = data.find((item) => item.name === text)
+ return item?.groupName || text
+ }
+ }
},
tooltip: {
customContent: (title, items) => {
@@ -117,8 +59,8 @@ export default (props) => {
const markers = []
if (metricArea && tooltipArea !== false) {
- const { format: formatArea, unit: unitArea } = sourceArea || {}
- const formatterArea = fixFormatter(formatArea)
+ const { format: formatArea, pattern: patternArea, unit: unitArea } = sourceArea || {}
+ const formatterArea = fixFormatter(formatArea, patternArea)
markers.push({
name: nameArea,
value: formatterArea ? formatterArea(value) : value,
@@ -128,8 +70,8 @@ export default (props) => {
}
if (metricColor) {
- const { format: formatColor, unit: unitColor } = sourceColor || {}
- const formatterColor = fixFormatter(formatColor)
+ const { format: formatColor, pattern: patternColor, unit: unitColor } = sourceColor || {}
+ const formatterColor = fixFormatter(formatColor, patternColor)
markers.push({
name: nameColor,
value: formatterColor ? formatterColor(valueColor) : valueColor,
@@ -170,7 +112,6 @@ export default (props) => {
},
}
}} />
- )}
+ Top
+
{
precision={0}
onChange={(value) => onFormDataChange({ top: value })}
/>
-
+
+ {formatMessage({ id: "cluster.monitor.topn.area" })}
+
-
-
+
+ {formatMessage({ id: "cluster.monitor.topn.color" })}
+
-
+
+ {formatMessage({ id: "cluster.monitor.topn.theme" })}
+
{
onFormDataChange({ colors: value })
setConfig({
@@ -398,7 +574,7 @@ export default (props) => {
colors: value
})
}}/>
-
+