diff --git a/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFields.tsx b/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFields.tsx index 88ad2ccf3e..247b261f91 100644 --- a/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFields.tsx +++ b/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFields.tsx @@ -1,10 +1,12 @@ -import { FC } from "preact/compat"; +import { FC, useMemo, useState } from "preact/compat"; import { Logs } from "../../../api/types"; import "./style.scss"; import classNames from "classnames"; import GroupLogsFieldRow from "./GroupLogsFieldRow"; import { useLocalStorageBoolean } from "../../../hooks/useLocalStorageBoolean"; import useDeviceDetect from "../../../hooks/useDeviceDetect"; +import TextField from "../../Main/TextField/TextField"; +import { SearchIcon } from "../../Main/Icons"; interface Props { log: Logs; @@ -13,6 +15,14 @@ interface Props { const GroupLogsFields: FC = ({ log, hideGroupButton }) => { const { isMobile } = useDeviceDetect(); + const [search, setSearch] = useState(""); + + const rawEntries = useMemo(() => Object.entries(log), [log]); + + const logEntries = useMemo(() => rawEntries.filter(([key, value]) => { + const searchLower = search.toLowerCase(); + return key.toLowerCase().includes(searchLower) || String(value).toLowerCase().includes(searchLower); + }), [rawEntries, search]); const [disabledHovers] = useLocalStorageBoolean("LOGS_DISABLED_HOVERS"); @@ -24,16 +34,34 @@ const GroupLogsFields: FC = ({ log, hideGroupButton }) => { "vm-group-logs-row-fields_interactive": !disabledHovers })} > + {rawEntries.length > 8 && ( +
+ } + value={search} + onChange={setSearch} + /> +
+ )} + + {search && logEntries.length === 0 && ( +
+ No fields or values match your search +
+ )} + - {Object.entries(log).map(([key, value]) => ( + {logEntries.map(([key, value]) => ( - ))} + ))}
diff --git a/app/vmui/packages/vmui/src/components/Views/GroupView/style.scss b/app/vmui/packages/vmui/src/components/Views/GroupView/style.scss index ba879d7ba2..aed1e8d3e7 100644 --- a/app/vmui/packages/vmui/src/components/Views/GroupView/style.scss +++ b/app/vmui/packages/vmui/src/components/Views/GroupView/style.scss @@ -355,6 +355,20 @@ $actions-width: calc(($actions-buttons * 30px) + 10px); background-color: $color-hover-black; } + &__search-input { + padding: 0 calc($padding-global / 2); + } + + &__search-empty { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: $padding-large 0; + color: $color-text-disabled; + text-align: center; + } + &-item { border-bottom: 1px dashed $border-divider-color; diff --git a/docs/victorialogs/CHANGELOG.md b/docs/victorialogs/CHANGELOG.md index fbce3f0e7c..674a8b7f7b 100644 --- a/docs/victorialogs/CHANGELOG.md +++ b/docs/victorialogs/CHANGELOG.md @@ -25,6 +25,7 @@ according to the following docs: * FEATURE: [querying API](https://docs.victoriametrics.com/victorialogs/querying/): allow using [`limit`](https://docs.victoriametrics.com/victorialogs/logsql/#limit-pipe) and [`offset`](https://docs.victoriametrics.com/victorialogs/logsql/#offset-pipe) pipes after the [`stats` pipe](https://docs.victoriametrics.com/victorialogs/logsql/#stats-pipe) in queries to [`/select/logsql/stats_query`](https://docs.victoriametrics.com/victorialogs/querying/#querying-log-stats). This enables the usage for these pipes in [alerting and recording rules for VictoriaLogs](https://docs.victoriametrics.com/victorialogs/vmalert/). See [#1296](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1296). * FEATURE: [alerts](https://github.com/VictoriaMetrics/VictoriaLogs/blob/master/deployment/docker/rules): add new alerting rules `PersistentQueueRunsOutOfSpaceIn12Hours` and `PersistentQueueRunsOutOfSpaceIn4Hours` for `vlagent` persistent queue capacity. These alerts help users to take proactive actions before `vlagent` starts dropping logs due to insufficient persistent queue space. See [#10193](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/10193) * FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): remove the `Date format` setting and always display timestamps with nanosecond precision. See [#1161](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1161). +* FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): add search for filtering fields by name and value in expanded log entries in the Group tab. See [#1378](https://github.com/VictoriaMetrics/VictoriaLogs/pull/1378) * BUGFIX: [vlagent](https://docs.victoriametrics.com/victorialogs/vlagent/): hide sensitive values passed via `-remoteWrite.proxyURL` in `/metrics`, `/flags`, and startup logs. Previously these values could be exposed in plain text. See [#1320](https://github.com/VictoriaMetrics/VictoriaLogs/pull/1320). * BUGFIX: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): sanitize markdown URLs in logs rendered with `markdown parsing` enabled, allowing only `http`, `https`, `mailto`, and `tel` schemes for active links and images. See [#1313](https://github.com/VictoriaMetrics/VictoriaLogs/pull/1313).