diff --git a/pkg/metrics/metrics.jsx b/pkg/metrics/metrics.jsx
index c2095fe4abbf..d1877de9edf3 100644
--- 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 (
-
- );
+ 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")
}} />
-
+ selected={selections}
+ options={columnVisibilityMenuItems} />
{[["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
index c67d1a617613..9e56ae4428d7 100755
--- 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")