metrics: Use CheckboxSelect instead of deprecated Select variant

cockpit-project · Dec 17, 2024 · b8e559e · b8e559e
1 parent a15f745
commit b8e559e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 28 deletions.
diff --git a/pkg/metrics/metrics.jsx b/pkg/metrics/metrics.jsx
@@ -32,7 +32,6 @@ import { Modal } from "@patternfly/react-core/dist/esm/components/Modal/index.js
 import { Page, PageGroup, PageSection, PageSectionVariants } from "@patternfly/react-core/dist/esm/components/Page/index.js";
 import { Popover } from "@patternfly/react-core/dist/esm/components/Popover/index.js";
 import { Progress, ProgressVariant } from "@patternfly/react-core/dist/esm/components/Progress/index.js";
-import { Select, SelectOption } from "@patternfly/react-core/dist/esm/deprecated/components/Select/index.js";
 import { Stack, StackItem } from "@patternfly/react-core/dist/esm/layouts/Stack/index.js";
 import { Switch } from "@patternfly/react-core/dist/esm/components/Switch/index.js";
 import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/esm/components/Text/index.js";
@@ -56,6 +55,7 @@ import { useObject, useEvent, useInit } from "hooks.js";
 import { WithDialogs, useDialogs } from "dialogs.jsx";
 
 import { SimpleSelect } from "cockpit-components-simple-select.jsx";
+import { CheckboxSelect } from "cockpit-components-checkbox-select.jsx";
 import { EmptyStatePanel } from "../lib/cockpit-components-empty-state.jsx";
 import { JournalOutput } from "cockpit-components-logs-panel.jsx";
 import { install_dialog } from "cockpit-components-install-dialog.jsx";
@@ -1857,17 +1857,15 @@ class MetricsHistory extends React.Component {
         }
 
         const columnVisibilityMenuItems = this.columns.map(itm => {
-            return (
-                <SelectOption
-                    key={itm[0]}
-                    value={itm[1]}
-                    inputId={'column-visibility-option-' + itm[0]} />
-            );
+            return {
+                value: itm[0],
+                content: itm[1],
+            };
         });
         const selections = (
             this.columns
                     .filter(itm => this.state.selectedVisibility[itm[0]])
-                    .map(itm => itm[1])
+                    .map(itm => itm[0])
         );
 
         return (
@@ -1885,23 +1883,20 @@ class MetricsHistory extends React.Component {
                                     className: "select-min metrics-label",
                                     "aria-label": _("Jump to")
                                 }} />
-                            <Select
-                                toggleAriaLabel={_("Graph visibility options menu")}
-                                className="select-min metrics-label"
-                                variant="checkbox"
-                                isCheckboxSelectionBadgeHidden
-                                isOpen={!!this.state.isOpenColumnVisibility}
-                                onSelect={(_, selection) => {
-                                    const s = this.columns.find(itm => itm[1] == selection);
+                            <CheckboxSelect
+                                toggleProps={{
+                                    "aria-label": _("Graph visibility options menu"),
+                                    className: "select-min metrics-label",
+                                }}
+                                toggleContent={_("Graph visibility")}
+                                noBadge
+                                onSelect={(selection, checked) => {
                                     this.setState(prevState => ({
-                                        selectedVisibility: { ...prevState.selectedVisibility, [s[0]]: !prevState.selectedVisibility[s[0]] }
+                                        selectedVisibility: { ...prevState.selectedVisibility, [selection]: checked }
                                     }));
                                 }}
-                                onToggle={() => this.setState({ isOpenColumnVisibility: !this.state.isOpenColumnVisibility })}
-                                placeholderText={_("Graph visibility")}
-                                selections={selections}>
-                                {columnVisibilityMenuItems}
-                            </Select>
+                                selected={selections}
+                                options={columnVisibilityMenuItems} />
                         </Flex>
                         <Stack className="metrics-label-graph-mobile">
                             {[["cpu", _("CPU usage/load")], ["memory", _("Memory usage/swap")], ["disks", _("Disk I/O")], ["network", _("Network")]]

diff --git a/test/verify/check-metrics b/test/verify/check-metrics
@@ -153,21 +153,23 @@ class TestHistoryMetrics(testlib.MachineCase):
 
         # Graphs are by default all visible
         b.click("button[aria-label='Graph visibility options menu']")
-        b.wait_visible("#column-visibility-option-cpu:checked")
+        b.wait_visible(".pf-v5-c-menu__list-item:contains(CPU)")
+        b.wait_visible(".pf-v5-c-menu__list-item:contains(CPU) input")
+        b.wait_visible(".pf-v5-c-menu__list-item:contains(CPU) input:checked")
         b.wait_visible(".metrics-label-graph:contains(CPU)")
-        b.wait_visible("#column-visibility-option-memory:checked")
+        b.wait_visible(".pf-v5-c-menu__list-item:contains(Memory) input:checked")
         b.wait_visible(".metrics-label-graph:contains(Memory)")
-        b.wait_visible("#column-visibility-option-disks:checked")
+        b.wait_visible(".pf-v5-c-menu__list-item:contains(Disk I/O) input:checked")
         b.wait_visible(".metrics-label-graph:contains(Disk I/O)")
-        b.wait_visible("#column-visibility-option-network:checked")
+        b.wait_visible(".pf-v5-c-menu__list-item:contains(Network) input:checked")
         b.wait_visible(".metrics-label-graph:contains(Network)")
 
         # Change graph visibility
         b.wait_visible(".metrics-events:contains('Network I/O')")
-        b.set_checked("#column-visibility-option-network", val=False)
+        b.set_checked(".pf-v5-c-menu__list-item:contains(Network) input", val=False)
         b.wait_not_present(".metrics-events:contains('Network I/O')")
         b.wait_not_present(".metrics-label-graph:contains(Network)")
-        b.set_checked("#column-visibility-option-network", val=True)
+        b.set_checked(".pf-v5-c-menu__list-item:contains(Network) input", val=True)
 
         # Change date to yesterday, should be empty
         b.click("#date-picker-select-toggle")