vlogs: add select/deselect all button to table settings in UI (#6680)

fix #6668, just add **select all** and "unselect all" func.


https://github.com/user-attachments/assets/0c31385b-def0-4618-aa9c-5ba4bb6f56c3

---------

Co-authored-by: Yury Molodov <yurymolodov@gmail.com>
Co-authored-by: hagen1778 <roman@victoriametrics.com>

app/vmui/packages/vmui/src/components/Table/TableSettings/TableSettings.tsx

@@ -44,6 +44,14 @@ const TableSettings: FC<TableSettingsProps> = ({
     onChangeColumns(defaultColumns.includes(key) ? defaultColumns.filter(col => col !== key) : [...defaultColumns, key]);
   };
 
+  const toggleAllColumns = () => {
+    if (defaultColumns.length === columns.length) {
+      onChangeColumns([]);
+    } else {
+      onChangeColumns(columns);
+    }
+  };
+
   const handleResetColumns = () => {
     handleClose();
     onChangeColumns(columns);
@@ -105,6 +113,16 @@ const TableSettings: FC<TableSettingsProps> = ({
                 />
               </Tooltip>
             </div>
+            <div
+              className="vm-table-settings-popper-list__item vm-table-settings-popper-list__check_all"
+            >
+              <Checkbox
+                checked={defaultColumns.length === columns.length}
+                onChange={toggleAllColumns}
+                label="Check all"
+                disabled={tableCompact}
+              />
+            </div>
             {columns.map(col => (
               <div
                 className="vm-table-settings-popper-list__item"

app/vmui/packages/vmui/src/components/Table/TableSettings/style.scss

@@ -39,5 +39,9 @@
     &__item {
       font-size: $font-size;
     }
+    &__check_all {
+      padding: 0 0 $padding-global;
+      border-bottom: $border-divider;
+    }
   }
 }

app/vmui/packages/vmui/src/hooks/useSortedCategories.ts

@@ -1,5 +1,5 @@
-import { useMemo } from "preact/compat";
-import { MetricBase } from "../api/types";
+import {useMemo} from "preact/compat";
+import {MetricBase} from "../api/types";
 
 export type MetricCategory = {
   key: string;
@@ -10,7 +10,7 @@ export const getColumns = (data: MetricBase[]): MetricCategory[] => {
   const columns: { [key: string]: { options: Set<string> } } = {};
   data.forEach(d =>
     Object.entries(d.metric).forEach(e =>
-      columns[e[0]] ? columns[e[0]].options.add(e[1]) : columns[e[0]] = { options: new Set([e[1]]) }
+      columns[e[0]] ? columns[e[0]].options.add(e[1]) : columns[e[0]] = {options: new Set([e[1]])}
     )
   );
 
@@ -22,7 +22,8 @@ export const getColumns = (data: MetricBase[]): MetricCategory[] => {
 
 export const useSortedCategories = (data: MetricBase[], displayColumns?: string[]): MetricCategory[] => (
   useMemo(() => {
+    if (!displayColumns) return [];
     const sortedColumns = getColumns(data);
-    return displayColumns ? sortedColumns.filter(col => displayColumns.includes(col.key)) : sortedColumns;
+    return sortedColumns.filter(col => displayColumns.includes(col.key));
   }, [data, displayColumns])
 );

app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBody/TableLogs.tsx

@@ -39,7 +39,8 @@ const TableLogs: FC<TableLogsProps> = ({ logs, displayColumns, tableCompact, col
 
 
   const filteredColumns = useMemo(() => {
-    if (!displayColumns?.length || tableCompact) return tableColumns;
+    if (tableCompact) return tableColumns;
+    if (!displayColumns?.length) return [];
     return tableColumns.filter(c => displayColumns.includes(c.key as string));
   }, [tableColumns, displayColumns, tableCompact]);
 

docs/VictoriaLogs/CHANGELOG.md

@@ -22,6 +22,7 @@ according to [these docs](https://docs.victoriametrics.com/victorialogs/quicksta
 * FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): introduce the ability to select a key for grouping logs within the "Group" tab.
 * FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): display the number of entries within each log group.
 * FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): move the Markdown toggle to the general settings panel in the upper left corner.
+* FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): add "select/deselect all" button to table settings for managing displayed columns. Thanks to @yincongcyincong for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/6680).
 
 * BUGFIX: properly handle Logstash requests for Elasticsearch configuration when using `outputs.elasticsearch` in Logstash pipelines. Previously, the requests could be rejected with `400 Bad Request` response.