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

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<Hyperlink> = ({
@@ -15,14 +16,16 @@ const Hyperlink: FC<Hyperlink> = ({
   href,
   children,
   colored = true,
-  underlined = false
+  underlined = false,
+  withIcon = false,
 }) => (
   <a
     href={href}
     className={classNames({
       "vm-link": true,
       "vm-link_colored": colored,
-      "vm-link_underlined": underlined
+      "vm-link_underlined": underlined,
+      "vm-link_with-icon": withIcon,
     })}
     target="_blank"
     rel="noreferrer"

app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityConfigurator/CardinalityConfigurator.tsx

@@ -11,8 +11,9 @@ import { useSearchParams } from "react-router-dom";
 import CardinalityTotals, { CardinalityTotalsProps } from "../CardinalityTotals/CardinalityTotals";
 import useSearchParamsFromObject from "../../../hooks/useSearchParamsFromObject";
 import useStateSearchParams from "../../../hooks/useStateSearchParams";
+import Hyperlink from "../../../components/Main/Hyperlink/Hyperlink";
 
-const CardinalityConfigurator: FC<CardinalityTotalsProps> = ({ isPrometheus, ...props }) => {
+const CardinalityConfigurator: FC<CardinalityTotalsProps> = ({ isPrometheus, isCluster, ...props }) => {
   const { isMobile } = useDeviceDetect();
   const [searchParams] = useSearchParams();
   const { setSearchParamsFromKeys } = useSearchParamsFromObject();
@@ -105,19 +106,29 @@ const CardinalityConfigurator: FC<CardinalityTotalsProps> = ({ isPrometheus, ...
     <div className="vm-cardinality-configurator-bottom">
       <CardinalityTotals
         isPrometheus={isPrometheus}
+        isCluster={isCluster}
         {...props}
       />
+      {isCluster &&
+        <div className="vm-cardinality-configurator-bottom-helpful">
+          <Hyperlink
+            href="https://docs.victoriametrics.com/#cardinality-explorer-statistic-inaccurancy"
+            withIcon={true}
+          >
+            <WikiIcon/>
+          Statistic inaccuracy explanation
+          </Hyperlink>
+        </div>
+      }
 
       <div className="vm-cardinality-configurator-bottom-helpful">
-        <a
+        <Hyperlink
-          className="vm-link vm-link_with-icon"
-          target="_blank"
           href="https://docs.victoriametrics.com/#cardinality-explorer"
-          rel="help noreferrer"
+          withIcon={true}
         >
           <WikiIcon/>
           Documentation
-        </a>
+        </Hyperlink>
       </div>
 
       <div className="vm-cardinality-configurator-bottom__execute">

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<CardinalityTotalsProps> = ({
@@ -21,7 +22,7 @@ const CardinalityTotals: FC<CardinalityTotalsProps> = ({
   totalSeriesPrev = 0,
   totalSeriesAll = 0,
   seriesCountByMetricName = [],
-  isPrometheus
+  isPrometheus,
 }) => {
   const { isMobile } = useDeviceDetect();
 
@@ -50,7 +51,7 @@ const CardinalityTotals: FC<CardinalityTotalsProps> = ({
       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) {

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<ErrorTypes | string>();
   const [tsdbStatus, setTSDBStatus] = useState<TSDBStatus>(appConfigurator.defaultTSDBStatus);
+  const [isCluster, setIsCluster] = useState<boolean>(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 };
 };

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 && <TipHighNumberOfSeries/>}
           {match && !focusLabel && <TipCardinalityOfSingle/>}
           {!match && !focusLabel && <TipHighNumberOfValues/>}
-          {focusLabel && <TipCardinalityOfLabel/>}
+          {focusLabel && <TipCardinalityOfLabel />}
         </div>
       )}
 

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).

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:

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