app/vmui: add search for filtering fields in expanded log entries

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<Props> = ({ 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<Props> = ({ log, hideGroupButton }) => {
         "vm-group-logs-row-fields_interactive": !disabledHovers
       })}
     >
+      {rawEntries.length > 8 && (
+        <div className="vm-group-logs-row-fields__search-input">
+          <TextField
+            placeholder="Search fields or values"
+            type="search"
+            startIcon={<SearchIcon/>}
+            value={search}
+            onChange={setSearch}
+          />
+        </div>
+      )}
+
+      {search && logEntries.length === 0 && (
+        <div className="vm-group-logs-row-fields__search-empty">
+          No fields or values match your search
+        </div>
+      )}
+
       <table>
         <tbody>
-          {Object.entries(log).map(([key, value]) => (
+          {logEntries.map(([key, value]) => (
             <GroupLogsFieldRow
               key={key}
               field={key}
               value={value}
               hideGroupButton={hideGroupButton}
             />
-          ))}
+        ))}
         </tbody>
       </table>
     </div>

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;
 

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).