mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2024-11-23 12:31:07 +01:00
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:
parent
0adec48182
commit
f0e33700fc
@ -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:
|
||||
|
@ -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"
|
||||
|
@ -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">
|
||||
|
@ -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) {
|
||||
|
@ -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 };
|
||||
};
|
||||
|
@ -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>
|
||||
)}
|
||||
|
||||
|
@ -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).
|
||||
|
@ -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:
|
||||
|
@ -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
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user