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
This commit is contained in:
Dmytro Kozlov 2023-09-29 11:47:45 +02:00 committed by GitHub
parent 0adec48182
commit f0e33700fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 54 additions and 21 deletions

View File

@ -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:

View File

@ -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"

View File

@ -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
className="vm-link vm-link_with-icon"
target="_blank"
<Hyperlink
href="https://docs.victoriametrics.com/#cardinality-explorer"
rel="help noreferrer"
withIcon={true}
>
<WikiIcon/>
Documentation
</a>
</Hyperlink>
</div>
<div className="vm-cardinality-configurator-bottom__execute">

View File

@ -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) {

View File

@ -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 };
};

View File

@ -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>
)}

View File

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

View File

@ -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:

View File

@ -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