vmui: fix issue preventing first query trace expansion (#6197)

https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6186
(cherry picked from commit 046a4a5ecf)
This commit is contained in:
Yury Molodov 2024-04-30 13:32:29 +02:00 committed by hagen1778
parent 798a446d5a
commit 75af52c1d0
No known key found for this signature in database
GPG key ID: 3BF75F3741CA9640
5 changed files with 6 additions and 12 deletions

View file

@ -1,5 +1,4 @@
import { useCallback, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
import useEventListener from "./useEventListener"; import useEventListener from "./useEventListener";
export interface ElementSize { export interface ElementSize {
@ -28,7 +27,7 @@ const useElementSize = <T extends HTMLElement = HTMLDivElement>(): [(node: T | n
useEventListener("resize", handleSize); useEventListener("resize", handleSize);
useIsomorphicLayoutEffect(handleSize, [ref?.offsetHeight, ref?.offsetWidth]); useEffect(handleSize, [ref?.offsetHeight, ref?.offsetWidth]);
return [setRef, size]; return [setRef, size];
}; };

View file

@ -1,5 +1,4 @@
import { RefObject, useEffect, useRef } from "react"; import { RefObject, useEffect, useRef } from "react";
import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
// MediaQueryList Event based useEventListener interface // MediaQueryList Event based useEventListener interface
function useEventListener<K extends keyof MediaQueryListEventMap>( function useEventListener<K extends keyof MediaQueryListEventMap>(
@ -56,7 +55,7 @@ function useEventListener<
// Create a ref that stores handler // Create a ref that stores handler
const savedHandler = useRef(handler); const savedHandler = useRef(handler);
useIsomorphicLayoutEffect(() => { useEffect(() => {
savedHandler.current = handler; savedHandler.current = handler;
}, [handler]); }, [handler]);

View file

@ -1,5 +0,0 @@
import { useEffect, useLayoutEffect } from "react";
const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
export default useIsomorphicLayoutEffect;

View file

@ -1,6 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
import useEventListener from "./useEventListener"; import useEventListener from "./useEventListener";
import { useEffect } from "preact/compat";
interface WindowSize { interface WindowSize {
width: number width: number
@ -23,7 +23,7 @@ const useWindowSize = (): WindowSize => {
useEventListener("resize", handleSize); useEventListener("resize", handleSize);
// Set size at the first client-side load // Set size at the first client-side load
useIsomorphicLayoutEffect(handleSize, []); useEffect(handleSize, []);
return windowSize; return windowSize;
}; };

View file

@ -36,6 +36,7 @@ See also [LTS releases](https://docs.victoriametrics.com/lts-releases/).
* FEATURE: [dashboards/operator](https://grafana.com/grafana/dashboards/17869), [dashboards/backupmanager](https://grafana.com/grafana/dashboards/17798) and [dashboard/tenant-statistic](https://grafana.com/grafana/dashboards/16399): update dashboard to be compatible with Grafana 10+ version. * FEATURE: [dashboards/operator](https://grafana.com/grafana/dashboards/17869), [dashboards/backupmanager](https://grafana.com/grafana/dashboards/17798) and [dashboard/tenant-statistic](https://grafana.com/grafana/dashboards/16399): update dashboard to be compatible with Grafana 10+ version.
* FEATURE: [dashboards/cluster](https://grafana.com/grafana/dashboards/11176): add new panel `Concurrent selects` to `vmstorage` row. The panel will show how many ongoing select queries are processed by vmstorage and should help to identify resource bottlenecks. See panel description for more details. * FEATURE: [dashboards/cluster](https://grafana.com/grafana/dashboards/11176): add new panel `Concurrent selects` to `vmstorage` row. The panel will show how many ongoing select queries are processed by vmstorage and should help to identify resource bottlenecks. See panel description for more details.
* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix bug that prevents the first query trace from expanding on click event. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6186). The issue was introduced in [v1.100.0](https://docs.victoriametrics.com/changelog/#v11000) release.
## [v1.101.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.101.0) ## [v1.101.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v1.101.0)