app/vmui: replace log field copy action with exclude filter

app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFieldRow.tsx

@@ -19,15 +19,15 @@ const GroupLogsFieldRow: FC<Props> = ({ field, value, hideGroupButton = false })
       "vm-group-logs-row-fields-item_mobile": isMobile
     })}
     >
-      <td className="vm-group-logs-row-fields-item__key">{field}</td>
-      <td className="vm-group-logs-row-fields-item__value">{value}</td>
       <td className="vm-group-logs-row-fields-item-controls">
         <FieldRowActions
           field={field}
           value={value}
           hideGroupButton={hideGroupButton}
         />
       </td>
+      <td className="vm-group-logs-row-fields-item__key">{field}</td>
+      <td className="vm-group-logs-row-fields-item__value">{value}</td>
     </tr>
   );
 };

app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFieldRowMenu/FieldFilterExclude.tsx

@@ -2,14 +2,15 @@ import { FC } from "preact/compat";
 import { FilterOffIcon } from "../../../Main/Icons";
 import { ExtraFilterOperator } from "../../../ExtraFilters/types";
 import { useExtraFilters } from "../../../ExtraFilters/hooks/useExtraFilters";
+import Tooltip from "../../../Main/Tooltip/Tooltip";
+import Button from "../../../Main/Button/Button";
 
 interface Props {
   field: string;
   value: string;
-  onClose: () => void;
 }
 
-const FieldFilterExclude: FC<Props> = ({ field, value, onClose }) => {
+const FieldFilterExclude: FC<Props> = ({ field, value, }) => {
   const { extraFilters, addNewFilter, removeFilterByValue } = useExtraFilters();
   const filtersByValue = extraFilters.filter(f => f.field === field && f.value === value);
   const isExcludeFilter = filtersByValue.some(f => f.operator === ExtraFilterOperator.NotEquals);
@@ -22,19 +23,19 @@ const FieldFilterExclude: FC<Props> = ({ field, value, onClose }) => {
     } else {
       addNewFilter(newFilter);
     }
-    onClose();
   };
 
   return (
-    <div
-      className="vm-legend-hits-menu-row vm-legend-hits-menu-row_interactive"
-      onClick={handleClickFilter}
-    >
-      <div className="vm-legend-hits-menu-row__icon">{<FilterOffIcon/>}</div>
-      <div className="vm-legend-hits-menu-row__title">
-        {isExcludeFilter ? "Remove exclude filter" : "Exclude this value"}
-      </div>
-    </div>
+    <Tooltip title={isExcludeFilter ? "Remove exclude filter" : "Exclude this value"}>
+      <Button
+        variant="text"
+        color={isExcludeFilter ? "secondary" : "gray"}
+        size="small"
+        startIcon={<FilterOffIcon/>}
+        onClick={handleClickFilter}
+        aria-label={isExcludeFilter ? "Remove exclude filter" : "Exclude this value"}
+      />
+    </Tooltip>
   );
 };
 

app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFieldRowMenu/FieldFilterInclude.tsx

@@ -33,6 +33,7 @@ const FieldFilterInclude: FC<Props> = ({ field, value }) => {
         size="small"
         startIcon={<FilterIcon/>}
         onClick={handleClickFilter}
+        aria-label={isIncludeFilter ? "Remove include filter" : "Filter by this value"}
       />
     </Tooltip>
   );

app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFieldRowMenu/FieldRowActions.tsx

@@ -1,5 +1,4 @@
 import { FC, useRef } from "preact/compat";
-import FieldCopyButton from "./FieldCopyButton";
 import FieldMessageToggle from "./FieldMessageToggle";
 import FieldGroupingToggle from "./FieldGroupingToggle";
 import FieldFilterExclude from "./FieldFilterExclude";
@@ -32,19 +31,20 @@ const FieldRowActions: FC<Props> = ({ field, value, hideGroupButton }) => {
 
   return (
     <div className="vm-group-logs-row-fields-item-controls__wrapper">
-      <FieldCopyButton
+      <FieldFilterInclude
         field={field}
         value={value}
       />
 
-      <FieldFilterInclude
+      <FieldFilterExclude
         field={field}
         value={value}
       />
 
       <div ref={buttonRef}>
         <Button
           startIcon={<MoreIcon/>}
+          color="gray"
           variant="text"
           size="small"
           onClick={handleClick}
@@ -59,11 +59,6 @@ const FieldRowActions: FC<Props> = ({ field, value, hideGroupButton }) => {
       >
         <div className="vm-legend-hits-menu">
           <div className="vm-legend-hits-menu-section">
-            <FieldFilterExclude
-              field={field}
-              value={value}
-              onClose={handleCloseContextMenu}
-            />
             <FieldMessageToggle
               field={field}
               onClose={handleCloseContextMenu}

app/vmui/packages/vmui/src/components/Views/GroupView/style.scss

@@ -35,6 +35,11 @@ $actions-width: calc(($actions-buttons * 30px) + 10px);
     border-bottom: $border-divider;
     padding-bottom: $padding-small;
 
+    & > .vm-accordion-header {
+      grid-template-columns: minmax(0, 1fr);
+      min-width: 0;
+    }
+
     &__ungrouped {
       padding-top: $padding-small;
     }
@@ -101,6 +106,14 @@ $actions-width: calc(($actions-buttons * 30px) + 10px);
         transition: background-color 0.3s ease-in, transform 0.1s ease-in, opacity 0.3s ease-in;
         white-space: nowrap;
         cursor: pointer;
+        z-index: 1;
+
+        &:not(&_more) {
+          min-width: 0;
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
 
         &_hide {
           order: 2;
@@ -425,7 +438,8 @@ $actions-width: calc(($actions-buttons * 30px) + 10px);
         }
 
         &-controls {
-          padding: 1px 2px;
+          padding: 1px $padding-small 1px calc($padding-small / 2);
+
 
           &__wrapper {
             display: flex;

docs/victorialogs/CHANGELOG.md

@@ -23,10 +23,12 @@ according to the following docs:
 ## tip
 
 * FEATURE: [dashboards/cluster](https://grafana.com/grafana/dashboards/23274), [dashboards/single](https://grafana.com/grafana/dashboards/22084), and [dashboards/vlagent](https://grafana.com/grafana/dashboards/24513): add `Fsync avg duration` panel to the Troubleshooting section of the single-node, cluster, and vlagent dashboards. This panel shows average `fsync` latency to help identify slow storage persistence. See [VictoriaMetrics#10432](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/10432).
+* FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): improve field action usability in the expanded log entry view by removing the rarely used Copy action, exposing Exclude for quick access and moving action icons closer to field values. See [#1663](https://github.com/VictoriaMetrics/VictoriaLogs/pull/1663).
 
 * BUGFIX: [cluster version](https://docs.victoriametrics.com/victorialogs/cluster/): evenly spread rerouted data across available `vlstorage` nodes. Previously, healthy nodes adjacent to unavailable nodes in the `-storageNode` list could receive much more data, resulting in uneven resource usage. See [#1548](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1548).
 * BUGFIX: [data ingestion](https://docs.victoriametrics.com/victorialogs/data-ingestion/) and [querying](https://docs.victoriametrics.com/victorialogs/querying/): properly handle logs containing duplicate [stream field](https://docs.victoriametrics.com/victorialogs/keyconcepts/#stream-fields) names. Previously, [v1.52.0](https://github.com/VictoriaMetrics/VictoriaLogs/releases/tag/v1.52.0) could panic when ingesting such logs in single-node VictoriaLogs, drop them during ingestion in VictoriaLogs cluster, or panic when querying such data written by earlier releases. See [#1603](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1603) and [#1604](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1604).
 * BUGFIX: [LogsQL](https://docs.victoriametrics.com/victorialogs/logsql/): fix [`week_range[Sun,Sun]` filter](https://docs.victoriametrics.com/victorialogs/logsql/#week-range-filter) when it is used inside the [`filter` pipe](https://docs.victoriametrics.com/victorialogs/logsql/#filter-pipe). Previously, it could fail to match rows on Sunday. See [#1335](https://github.com/VictoriaMetrics/VictoriaLogs/issues/1335).
+* BUGFIX: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): prevent long group-by values from overflowing group headers. See [#1663](https://github.com/VictoriaMetrics/VictoriaLogs/pull/1663).
 
 ## [v1.52.0](https://github.com/VictoriaMetrics/VictoriaLogs/releases/tag/v1.52.0)