From 75af52c1d08cfcabd7998cee3f01accf10e1e37f Mon Sep 17 00:00:00 2001 From: Yury Molodov Date: Tue, 30 Apr 2024 13:32:29 +0200 Subject: [PATCH] vmui: fix issue preventing first query trace expansion (#6197) https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6186 (cherry picked from commit 046a4a5ecf240613eb23d651ed774bedddd7cada) --- app/vmui/packages/vmui/src/hooks/useElementSize.ts | 5 ++--- app/vmui/packages/vmui/src/hooks/useEventListener.ts | 3 +-- .../packages/vmui/src/hooks/useIsomorphicLayoutEffect.ts | 5 ----- app/vmui/packages/vmui/src/hooks/useWindowSize.ts | 4 ++-- docs/CHANGELOG.md | 1 + 5 files changed, 6 insertions(+), 12 deletions(-) delete mode 100644 app/vmui/packages/vmui/src/hooks/useIsomorphicLayoutEffect.ts diff --git a/app/vmui/packages/vmui/src/hooks/useElementSize.ts b/app/vmui/packages/vmui/src/hooks/useElementSize.ts index 603b328e4..3cf6c2000 100644 --- a/app/vmui/packages/vmui/src/hooks/useElementSize.ts +++ b/app/vmui/packages/vmui/src/hooks/useElementSize.ts @@ -1,5 +1,4 @@ -import { useCallback, useState } from "react"; -import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect"; +import { useCallback, useEffect, useState } from "react"; import useEventListener from "./useEventListener"; export interface ElementSize { @@ -28,7 +27,7 @@ const useElementSize = (): [(node: T | n useEventListener("resize", handleSize); - useIsomorphicLayoutEffect(handleSize, [ref?.offsetHeight, ref?.offsetWidth]); + useEffect(handleSize, [ref?.offsetHeight, ref?.offsetWidth]); return [setRef, size]; }; diff --git a/app/vmui/packages/vmui/src/hooks/useEventListener.ts b/app/vmui/packages/vmui/src/hooks/useEventListener.ts index f97ce2d85..0ce2f1729 100644 --- a/app/vmui/packages/vmui/src/hooks/useEventListener.ts +++ b/app/vmui/packages/vmui/src/hooks/useEventListener.ts @@ -1,5 +1,4 @@ import { RefObject, useEffect, useRef } from "react"; -import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect"; // MediaQueryList Event based useEventListener interface function useEventListener( @@ -56,7 +55,7 @@ function useEventListener< // Create a ref that stores handler const savedHandler = useRef(handler); - useIsomorphicLayoutEffect(() => { + useEffect(() => { savedHandler.current = handler; }, [handler]); diff --git a/app/vmui/packages/vmui/src/hooks/useIsomorphicLayoutEffect.ts b/app/vmui/packages/vmui/src/hooks/useIsomorphicLayoutEffect.ts deleted file mode 100644 index 8ccca8a63..000000000 --- a/app/vmui/packages/vmui/src/hooks/useIsomorphicLayoutEffect.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { useEffect, useLayoutEffect } from "react"; - -const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; - -export default useIsomorphicLayoutEffect; diff --git a/app/vmui/packages/vmui/src/hooks/useWindowSize.ts b/app/vmui/packages/vmui/src/hooks/useWindowSize.ts index 1b1e1021f..01090ea4d 100644 --- a/app/vmui/packages/vmui/src/hooks/useWindowSize.ts +++ b/app/vmui/packages/vmui/src/hooks/useWindowSize.ts @@ -1,6 +1,6 @@ import { useState } from "react"; -import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect"; import useEventListener from "./useEventListener"; +import { useEffect } from "preact/compat"; interface WindowSize { width: number @@ -23,7 +23,7 @@ const useWindowSize = (): WindowSize => { useEventListener("resize", handleSize); // Set size at the first client-side load - useIsomorphicLayoutEffect(handleSize, []); + useEffect(handleSize, []); return windowSize; }; diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 7bf58be02..365af547a 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -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/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)