From ab9cbdfeec282f5d3a1a5fe46488366003e5abce Mon Sep 17 00:00:00 2001 From: Yury Molodov Date: Wed, 24 Jun 2026 15:53:23 +0200 Subject: [PATCH] app/vmui: fix mobile filters sidebar visibility (#1537) --- .../vmui/src/components/FilterSidebar/FilterSidebar.tsx | 7 +++---- .../packages/vmui/src/components/FilterSidebar/style.scss | 8 -------- app/vmui/packages/vmui/src/pages/QueryPage/QueryPage.tsx | 3 ++- docs/victorialogs/CHANGELOG.md | 1 + 4 files changed, 6 insertions(+), 13 deletions(-) diff --git a/app/vmui/packages/vmui/src/components/FilterSidebar/FilterSidebar.tsx b/app/vmui/packages/vmui/src/components/FilterSidebar/FilterSidebar.tsx index 5b2119b8b7..007366b853 100644 --- a/app/vmui/packages/vmui/src/components/FilterSidebar/FilterSidebar.tsx +++ b/app/vmui/packages/vmui/src/components/FilterSidebar/FilterSidebar.tsx @@ -8,7 +8,6 @@ import DragResizeHandle from "../Main/DragResizeHandle/DragResizeHandle"; import { useFilterSidebarWidth } from "./hooks/useFilterSidebarWidth"; import { CSSProperties } from "preact"; import FilterSidebarActions from "./FilterSidebarActions/FilterSidebarActions"; -import { useFilterSidebarVisible } from "./hooks/useFilterSidebarVisible"; import classNames from "classnames"; import useBoolean from "../../hooks/useBoolean"; import { ExtraFilter } from "../ExtraFilters/types"; @@ -27,6 +26,7 @@ type Props = { onAddFilter: (filter: ExtraFilter) => void; onRemoveByValue: (field: string, value: string) => void; onRemoveByField: (field: string) => void; + onClose: () => void; } const FilterSidebar: FC = ({ @@ -36,6 +36,7 @@ const FilterSidebar: FC = ({ onAddFilter, onRemoveByValue, onRemoveByField, + onClose, }) => { const { isMobile } = useDeviceDetect(); const { getCurrentPeriod } = useTimePeriod(); @@ -46,7 +47,6 @@ const FilterSidebar: FC = ({ const sidebarRef = useRef(null); const { height, top } = useFilterSidebarSticky(sidebarRef); const { size: parentSize, width, setWidth, clearWidth } = useFilterSidebarWidth(sidebarRef); - const { isVisible, setHidden } = useFilterSidebarVisible(); const { value: isDescOrder, toggle: toggleSortOrder } = useBoolean(true); const orderDir = isDescOrder ? "desc" : "asc"; @@ -99,7 +99,6 @@ const FilterSidebar: FC = ({
= ({ diff --git a/app/vmui/packages/vmui/src/components/FilterSidebar/style.scss b/app/vmui/packages/vmui/src/components/FilterSidebar/style.scss index 8ee2ed77d5..d0e17479d2 100644 --- a/app/vmui/packages/vmui/src/components/FilterSidebar/style.scss +++ b/app/vmui/packages/vmui/src/components/FilterSidebar/style.scss @@ -16,14 +16,6 @@ font-size: $font-size-small; z-index: 99; - &_hidden { - position: absolute; - left: -100vw; - opacity: 0; - z-index: -1; - pointer-events: none; - } - &_mobile { position: fixed; left: 0; diff --git a/app/vmui/packages/vmui/src/pages/QueryPage/QueryPage.tsx b/app/vmui/packages/vmui/src/pages/QueryPage/QueryPage.tsx index bf0df494e0..ec4c36fc71 100644 --- a/app/vmui/packages/vmui/src/pages/QueryPage/QueryPage.tsx +++ b/app/vmui/packages/vmui/src/pages/QueryPage/QueryPage.tsx @@ -40,7 +40,7 @@ const QueryPage: FC = () => { const [queryError, setQueryError] = useState(""); const { extraFilters, extraParams, addNewFilter, removeFilterByValue, removeFilterByField } = useExtraFilters(); - const { isVisible: isVisibleFilterSidebar } = useFilterSidebarVisible(); + const { isVisible: isVisibleFilterSidebar, setHidden: onCloseFilterSidebar } = useFilterSidebarVisible(); const handleUpdateQuery = () => { if (!inputQueryRef.current) { @@ -88,6 +88,7 @@ const QueryPage: FC = () => { onAddFilter={addNewFilter} onRemoveByValue={removeFilterByValue} onRemoveByField={removeFilterByField} + onClose={onCloseFilterSidebar} /> )} diff --git a/docs/victorialogs/CHANGELOG.md b/docs/victorialogs/CHANGELOG.md index 6b0039a049..534989a26a 100644 --- a/docs/victorialogs/CHANGELOG.md +++ b/docs/victorialogs/CHANGELOG.md @@ -38,6 +38,7 @@ according to the following docs: * BUGFIX: [cluster version](https://docs.victoriametrics.com/victorialogs/cluster/): avoid `cannot connect to storage node at ...: EOF` errors after `vlselect` or `vlinsert` was idle for more than 60 seconds. See [#1440](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1440). * BUGFIX: [vlselect](https://docs.victoriametrics.com/victorialogs/cluster/): return `502 Bad Gateway` HTTP response code for incoming queries when one of the `vlstorage` nodes runs a VictoriaLogs version with an incompatible internal API instead of `400 Bad Request`. This is consistent with the `502 Bad Gateway` response returned when a `vlstorage` node is unavailable, and it allows building a proper failover scheme in high-availability setups. See [these docs](https://docs.victoriametrics.com/victorialogs/cluster/#high-availability). * BUGFIX: [multi-level cluster setup](https://docs.victoriametrics.com/victorialogs/cluster/#multi-level-cluster-setup): properly return `502 Bad Gateway` HTTP response code when a `vlselect` node queries other `vlselect` nodes and the underlying `vlstorage` is unavailable, as described at [high availability](https://docs.victoriametrics.com/victorialogs/cluster/#high-availability) docs. This allows configuring proper failover schemes to a healthy cluster. +* BUGFIX: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): fix filters sidebar opening on mobile. See [#1537](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1537). ## [v1.51.0](https://github.com/VictoriaMetrics/VictoriaLogs/releases/tag/v1.51.0)