'+(n?e:Ns(e,!0))+"
"+(n?e:Ns(e,!0))+"
\n".concat(e,"
".concat(e,"
"+Ns(e.message+"",!0)+"
"+Ns(r.message+"",!0)+"
\n This table returns a list of metrics with the highest cardinality.\n The cardinality of a metric is the number of time series associated with that metric,\n where each time series is defined as a unique combination of key-value label pairs.\n
\n When looking to reduce the number of active series in your data source,\n you can start by inspecting individual metrics with high cardinality\n (i.e. that have lots of active time series associated with them),\n since that single metric contributes a large fraction of the series that make up your total series count.\n
\n This table returns a list of the labels with the highest number of series.\n
\n Use this table to identify labels that are storing dimensions with high cardinality\n (many different label values).\n
\n It is recommended to choose labels such that they have a finite set of values,\n since every unique combination of key-value label pairs creates a new time series\n and therefore can dramatically increase the number of time series in your system.\n
\n This table returns a list of unique label values per selected label.\n
\n Use this table to identify label values that are storing per each selected series.\n
\n This table returns a list of the label values pairs with the highest number of series.\n
\n Use this table to identify unique label values pairs. This helps to identify same labels \n is applied to count timeseries in your system, since every unique combination of key-value label pairs \n creates a new time series and therefore can dramatically increase the number of time series in your system\n
'+(n?e:Cs(e,!0))+"
"+(n?e:Cs(e,!0))+"
"+Cs(e.message+"",!0)+"
"+Cs(r.message+"",!0)+"
click
- {metricName}: - {valueFormat} - {unit} + value: {valueFormat}{unit}
- {k} -
- {alt} -
{l.description} diff --git a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/constants/keyList.tsx b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/constants/keyList.tsx new file mode 100644 index 0000000000..4aebbea1c6 --- /dev/null +++ b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/constants/keyList.tsx @@ -0,0 +1,62 @@ +import React from "preact/compat"; +import { isMacOs } from "../../../../utils/detect-device"; +import { VisibilityIcon } from "../../Icons"; +import GraphTips from "../../../Chart/GraphTips/GraphTips"; + +const ctrlMeta = {isMacOs() ? "Cmd" : "Ctrl"}; + +const keyList = [ + { + title: "Query", + list: [ + { + keys: Enter, + description: "Run" + }, + { + keys: <>Shift + Enter, + description: "Multi-line queries" + }, + { + keys: <>{ctrlMeta} + Arrow Up, + description: "Previous command from the Query history" + }, + { + keys: <>{ctrlMeta} + Arrow Down, + description: "Next command from the Query history" + }, + { + keys: <>{ctrlMeta} + click by , + description: "Toggle multiple queries" + } + ] + }, + { + title: "Graph", + readMore: , + list: [ + { + keys: <>{ctrlMeta} + scroll Up or +, + description: "Zoom in" + }, + { + keys: <>{ctrlMeta} + scroll Down or -, + description: "Zoom out" + }, + { + keys: <>{ctrlMeta} + drag, + description: "Move the graph left/right" + }, + { + keys: <>click, + description: "Select the series in the legend" + }, + { + keys: <>{ctrlMeta} + click, + description: "Toggle multiple series in the legend" + } + ] + }, +]; + +export default keyList; diff --git a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss index c86947ce07..2d1c32a67b 100644 --- a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss +++ b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss @@ -8,13 +8,20 @@ } &-section { - margin-bottom: $padding-medium; + position: relative; + margin-bottom: $padding-global; + padding-bottom: $padding-global; + border-bottom: $border-divider; &__title { font-weight: bold; - padding: $padding-small 0; margin-bottom: $padding-global; - border-bottom: $border-divider; + } + + &__read-more { + position: absolute; + top: -8px; + right: 0; } &-list { @@ -40,6 +47,7 @@ align-items: center; gap: 4px; + svg, code { display: inline-block; padding: 2px $padding-small 0; @@ -52,6 +60,11 @@ border: $border-divider; border-radius: 4px; } + + svg { + width: 24px; + padding: 4px; + } } &__description { diff --git a/app/vmui/packages/vmui/src/components/Views/GraphView/GraphView.tsx b/app/vmui/packages/vmui/src/components/Views/GraphView/GraphView.tsx index d5d6165f1c..cdd95003d1 100644 --- a/app/vmui/packages/vmui/src/components/Views/GraphView/GraphView.tsx +++ b/app/vmui/packages/vmui/src/components/Views/GraphView/GraphView.tsx @@ -1,10 +1,10 @@ import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "preact/compat"; import { MetricResult } from "../../../api/types"; -import LineChart from "../../Chart/LineChart/LineChart"; +import LineChart from "../../Chart/Line/LineChart/LineChart"; import { AlignedData as uPlotData, Series as uPlotSeries } from "uplot"; -import Legend from "../../Chart/Legend/Legend"; -import LegendHeatmap from "../../Chart/LegendHeatmap/LegendHeatmap"; -import { getHideSeries, getLegendItem, getSeriesItemContext } from "../../../utils/uplot/series"; +import Legend from "../../Chart/Line/Legend/Legend"; +import LegendHeatmap from "../../Chart/Heatmap/LegendHeatmap/LegendHeatmap"; +import { getHideSeries, getLegendItem, getSeriesItemContext, SeriesItem } from "../../../utils/uplot/series"; import { getLimitsYAxis, getMinMaxBuffer, getTimeSeries } from "../../../utils/uplot/axes"; import { LegendItemType } from "../../../utils/uplot/types"; import { TimeParams } from "../../../types"; @@ -12,11 +12,12 @@ import { AxisRange, YaxisState } from "../../../state/graph/reducer"; import { getAvgFromArray, getMaxFromArray, getMinFromArray } from "../../../utils/math"; import classNames from "classnames"; import { useTimeState } from "../../../state/time/TimeStateContext"; -import HeatmapChart from "../../Chart/HeatmapChart/HeatmapChart"; +import HeatmapChart from "../../Chart/Heatmap/HeatmapChart/HeatmapChart"; import "./style.scss"; import { promValueToNumber } from "../../../utils/metric"; import { normalizeData } from "../../../utils/uplot/heatmap"; import useDeviceDetect from "../../../hooks/useDeviceDetect"; +import { TooltipHeatmapProps } from "../../Chart/Heatmap/ChartTooltipHeatmap/ChartTooltipHeatmap"; export interface GraphViewProps { data?: MetricResult[]; @@ -60,7 +61,7 @@ const GraphView: FC = ({ const [series, setSeries] = useState([]); const [legend, setLegend] = useState([]); const [hideSeries, setHideSeries] = useState([]); - const [legendValue, setLegendValue] = useState(0); + const [legendValue, setLegendValue] = useState(null); const setLimitsYaxis = (values: {[key: string]: number[]}) => { const limits = getLimitsYAxis(values, !isHistogram); @@ -71,7 +72,7 @@ const GraphView: FC = ({ setHideSeries(getHideSeries({ hideSeries, legend, metaKey, series })); }; - const handleChangeLegend = (val: number) => { + const handleChangeLegend = (val: TooltipHeatmapProps) => { setLegendValue(val); }; @@ -209,9 +210,10 @@ const GraphView: FC = ({ )} {isHistogram && showLegend && ( )}
{isMacOs() ? "Cmd" : "Ctrl"}
Enter
Shift
Arrow Up
Arrow Down
scroll Up
+
scroll Down
-
drag