From f0e33700fc04f7e2387d03363e219cb322474e0f Mon Sep 17 00:00:00 2001 From: Dmytro Kozlov Date: Fri, 29 Sep 2023 11:47:45 +0200 Subject: [PATCH] vmui: update information about tsdb usage in cluster version (#5004) * vmui: update information about tsdb usage in cluster version * vmui: cleanup * vmui: add CHANGELOG.md * vmui: cleanup * vmui: update logic, move information to the visible place * app/vmui: remove values fetch, update documentation for cardinality explorer * app/vmui: update CHANGELOG.md --- README.md | 8 ++++--- .../components/Main/Hyperlink/Hyperlink.tsx | 7 ++++-- .../CardinalityConfigurator.tsx | 23 ++++++++++++++----- .../CardinalityTotals/CardinalityTotals.tsx | 5 ++-- .../hooks/useCardinalityFetch.ts | 11 ++++++++- .../vmui/src/pages/CardinalityPanel/index.tsx | 5 ++-- docs/CHANGELOG.md | 1 + docs/README.md | 8 ++++--- docs/Single-server-VictoriaMetrics.md | 7 ++++-- 9 files changed, 54 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index d290441ea..aab85c42e 100644 --- a/README.md +++ b/README.md @@ -405,14 +405,16 @@ matching the specified [series selector](https://prometheus.io/docs/prometheus/l Cardinality explorer is built on top of [/api/v1/status/tsdb](#tsdb-stats). +See [cardinality explorer playground](https://play.victoriametrics.com/select/accounting/1/6a716b0f-38bc-4856-90ce-448fd713e3fe/prometheus/graph/#/cardinality). +See the example of using the cardinality explorer [here](https://victoriametrics.com/blog/cardinality-explorer/). + +## Cardinality explorer statistic inaccuracy + In [cluster version of VictoriaMetrics](https://docs.victoriametrics.com/Cluster-VictoriaMetrics.html) each vmstorage tracks the stored time series individually. vmselect requests stats via [/api/v1/status/tsdb](#tsdb-stats) API from each vmstorage node and merges the results by summing per-series stats. This may lead to inflated values when samples for the same time series are spread across multiple vmstorage nodes due to [replication](#replication) or [rerouting](https://docs.victoriametrics.com/Cluster-VictoriaMetrics.html?highlight=re-routes#cluster-availability). -See [cardinality explorer playground](https://play.victoriametrics.com/select/accounting/1/6a716b0f-38bc-4856-90ce-448fd713e3fe/prometheus/graph/#/cardinality). -See the example of using the cardinality explorer [here](https://victoriametrics.com/blog/cardinality-explorer/). - ## How to apply new config to VictoriaMetrics VictoriaMetrics is configured via command-line flags, so it must be restarted when new command-line flags should be applied: diff --git a/app/vmui/packages/vmui/src/components/Main/Hyperlink/Hyperlink.tsx b/app/vmui/packages/vmui/src/components/Main/Hyperlink/Hyperlink.tsx index c1cd58e3f..32dac0b3a 100644 --- a/app/vmui/packages/vmui/src/components/Main/Hyperlink/Hyperlink.tsx +++ b/app/vmui/packages/vmui/src/components/Main/Hyperlink/Hyperlink.tsx @@ -8,6 +8,7 @@ interface Hyperlink { children?: ReactNode; colored?: boolean; underlined?: boolean; + withIcon?: boolean; } const Hyperlink: FC = ({ @@ -15,14 +16,16 @@ const Hyperlink: FC = ({ href, children, colored = true, - underlined = false + underlined = false, + withIcon = false, }) => ( = ({ isPrometheus, ...props }) => { +const CardinalityConfigurator: FC = ({ isPrometheus, isCluster, ...props }) => { const { isMobile } = useDeviceDetect(); const [searchParams] = useSearchParams(); const { setSearchParamsFromKeys } = useSearchParamsFromObject(); @@ -105,19 +106,29 @@ const CardinalityConfigurator: FC = ({ isPrometheus, ...
+ {isCluster && +
+ + + Statistic inaccuracy explanation + +
+ }
- Documentation - +
diff --git a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTotals/CardinalityTotals.tsx b/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTotals/CardinalityTotals.tsx index 0c1f53e1a..63845403a 100644 --- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTotals/CardinalityTotals.tsx +++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTotals/CardinalityTotals.tsx @@ -14,6 +14,7 @@ export interface CardinalityTotalsProps { totalLabelValuePairs: number; seriesCountByMetricName: TopHeapEntry[]; isPrometheus?: boolean; + isCluster: boolean; } const CardinalityTotals: FC = ({ @@ -21,7 +22,7 @@ const CardinalityTotals: FC = ({ totalSeriesPrev = 0, totalSeriesAll = 0, seriesCountByMetricName = [], - isPrometheus + isPrometheus, }) => { const { isMobile } = useDeviceDetect(); @@ -50,7 +51,7 @@ const CardinalityTotals: FC = ({ value: isNaN(progress) ? "-" : `${progress.toFixed(2)}%`, display: isMetric, info: "The share of these series in the total number of time series." - } + }, ].filter(t => t.display); if (!totals.length) { diff --git a/app/vmui/packages/vmui/src/pages/CardinalityPanel/hooks/useCardinalityFetch.ts b/app/vmui/packages/vmui/src/pages/CardinalityPanel/hooks/useCardinalityFetch.ts index 585ebf245..c1c88b6e7 100644 --- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/hooks/useCardinalityFetch.ts +++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/hooks/useCardinalityFetch.ts @@ -7,12 +7,14 @@ import AppConfigurator from "../appConfigurator"; import { useSearchParams } from "react-router-dom"; import dayjs from "dayjs"; import { DATE_FORMAT } from "../../../constants/date"; +import { getTenantIdFromUrl } from "../../../utils/tenants"; export const useFetchQuery = (): { fetchUrl?: string[], isLoading: boolean, error?: ErrorTypes | string appConfigurator: AppConfigurator, + isCluster: boolean, } => { const appConfigurator = new AppConfigurator(); @@ -26,6 +28,7 @@ export const useFetchQuery = (): { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(); const [tsdbStatus, setTSDBStatus] = useState(appConfigurator.defaultTSDBStatus); + const [isCluster, setIsCluster] = useState(false); const getResponseJson = async (url: string) => { const response = await fetch(url); @@ -115,6 +118,12 @@ export const useFetchQuery = (): { } }, [error]); + useEffect(() => { + const id = getTenantIdFromUrl(serverUrl); + setIsCluster(!!id); + }, [serverUrl]); + + appConfigurator.tsdbStatusData = tsdbStatus; - return { isLoading, appConfigurator: appConfigurator, error }; + return { isLoading, appConfigurator: appConfigurator, error, isCluster }; }; diff --git a/app/vmui/packages/vmui/src/pages/CardinalityPanel/index.tsx b/app/vmui/packages/vmui/src/pages/CardinalityPanel/index.tsx index 631441041..777b2f398 100644 --- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/index.tsx +++ b/app/vmui/packages/vmui/src/pages/CardinalityPanel/index.tsx @@ -31,7 +31,7 @@ const CardinalityPanel: FC = () => { const match = searchParams.get("match") || ""; const focusLabel = searchParams.get("focusLabel") || ""; - const { isLoading, appConfigurator, error } = useFetchQuery(); + const { isLoading, appConfigurator, error, isCluster } = useFetchQuery(); const { tsdbStatusData, getDefaultState, tablesHeaders, sectionsTips } = appConfigurator; const defaultState = getDefaultState(match, focusLabel); @@ -62,6 +62,7 @@ const CardinalityPanel: FC = () => { totalSeriesAll={tsdbStatusData.totalSeriesByAll} totalLabelValuePairs={tsdbStatusData.totalLabelValuePairs} seriesCountByMetricName={tsdbStatusData.seriesCountByMetricName} + isCluster={isCluster} /> {showTips && ( @@ -69,7 +70,7 @@ const CardinalityPanel: FC = () => { {!match && !focusLabel && } {match && !focusLabel && } {!match && !focusLabel && } - {focusLabel && } + {focusLabel && }
)} diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index b3cb479ee..bc5b82fcb 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -41,6 +41,7 @@ The sandbox cluster installation is running under the constant load generated by * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add button for auto-formatting PromQL/MetricsQL queries. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4681). Thanks to @aramattamara for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/4694). * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): improve accessibility score to 100 according to [Google's Lighthouse](https://developer.chrome.com/docs/lighthouse/accessibility/) tests. * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): organize `min`, `max`, `median` values on the chart legend and tooltips for better visibility. +* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add explanation about statistic inaccuracy in a cluster version. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3070). * FEATURE: dashboards: provide copies of Grafana dashboards alternated with VictoriaMetrics datasource at [dashboards/vm](https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/dashboards/vm). * FEATURE: [vmauth](https://docs.victoriametrics.com/vmauth.html): added ability to set, override and clear request and response headers on a per-user and per-path basis. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4825) and [these docs](https://docs.victoriametrics.com/vmauth.html#auth-config) for details. * FEATURE: [vmauth](https://docs.victoriametrics.com/vmauth.html): add ability to retry requests to the [remaining backends](https://docs.victoriametrics.com/vmauth.html#load-balancing) if they return response status codes specified in the `retry_status_codes` list. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4893). diff --git a/docs/README.md b/docs/README.md index 85217fadd..fb316fa7d 100644 --- a/docs/README.md +++ b/docs/README.md @@ -408,14 +408,16 @@ matching the specified [series selector](https://prometheus.io/docs/prometheus/l Cardinality explorer is built on top of [/api/v1/status/tsdb](#tsdb-stats). +See [cardinality explorer playground](https://play.victoriametrics.com/select/accounting/1/6a716b0f-38bc-4856-90ce-448fd713e3fe/prometheus/graph/#/cardinality). +See the example of using the cardinality explorer [here](https://victoriametrics.com/blog/cardinality-explorer/). + +## Cardinality explorer statistic inaccuracy + In [cluster version of VictoriaMetrics](https://docs.victoriametrics.com/Cluster-VictoriaMetrics.html) each vmstorage tracks the stored time series individually. vmselect requests stats via [/api/v1/status/tsdb](#tsdb-stats) API from each vmstorage node and merges the results by summing per-series stats. This may lead to inflated values when samples for the same time series are spread across multiple vmstorage nodes due to [replication](#replication) or [rerouting](https://docs.victoriametrics.com/Cluster-VictoriaMetrics.html?highlight=re-routes#cluster-availability). -See [cardinality explorer playground](https://play.victoriametrics.com/select/accounting/1/6a716b0f-38bc-4856-90ce-448fd713e3fe/prometheus/graph/#/cardinality). -See the example of using the cardinality explorer [here](https://victoriametrics.com/blog/cardinality-explorer/). - ## How to apply new config to VictoriaMetrics VictoriaMetrics is configured via command-line flags, so it must be restarted when new command-line flags should be applied: diff --git a/docs/Single-server-VictoriaMetrics.md b/docs/Single-server-VictoriaMetrics.md index 59cca35d6..d7c0b73f3 100644 --- a/docs/Single-server-VictoriaMetrics.md +++ b/docs/Single-server-VictoriaMetrics.md @@ -416,13 +416,16 @@ matching the specified [series selector](https://prometheus.io/docs/prometheus/l Cardinality explorer is built on top of [/api/v1/status/tsdb](#tsdb-stats). +See [cardinality explorer playground](https://play.victoriametrics.com/select/accounting/1/6a716b0f-38bc-4856-90ce-448fd713e3fe/prometheus/graph/#/cardinality). +See the example of using the cardinality explorer [here](https://victoriametrics.com/blog/cardinality-explorer/). + +## Cardinality explorer statistic inaccuracy + In [cluster version of VictoriaMetrics](https://docs.victoriametrics.com/Cluster-VictoriaMetrics.html) each vmstorage tracks the stored time series individually. vmselect requests stats via [/api/v1/status/tsdb](#tsdb-stats) API from each vmstorage node and merges the results by summing per-series stats. This may lead to inflated values when samples for the same time series are spread across multiple vmstorage nodes due to [replication](#replication) or [rerouting](https://docs.victoriametrics.com/Cluster-VictoriaMetrics.html?highlight=re-routes#cluster-availability). -See [cardinality explorer playground](https://play.victoriametrics.com/select/accounting/1/6a716b0f-38bc-4856-90ce-448fd713e3fe/prometheus/graph/#/cardinality). -See the example of using the cardinality explorer [here](https://victoriametrics.com/blog/cardinality-explorer/). ## How to apply new config to VictoriaMetrics