Add filters to Overview page: Filter by Broker, Time, and Topic

Signed-off-by: hemahg <[email protected]>

Author: hemahg

ui/components/ClusterOverview/components/FilterByBroker.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { FilterByBroker } from "./FilterByBroker";
+
+const meta: Meta<typeof FilterByBroker> = {
+  component: FilterByBroker,
+  args: {
+    selectedBroker: "Broker1",
+    brokerList: ["Broker1", "Broker2", "Broker3"],
+  },
+} as Meta<typeof FilterByBroker>;
+
+export default meta;
+type Story = StoryObj<typeof FilterByBroker>;
+
+export const Default: Story = {};

ui/components/ClusterOverview/components/FilterByBroker.tsx

@@ -0,0 +1,77 @@
+import {
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  ToolbarItem,
+} from "@/libs/patternfly/react-core";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+export function FilterByBroker({
+  selectedBroker,
+  brokerList,
+  onSetSelectedBroker,
+  disableToolbar,
+}: {
+  selectedBroker: string | undefined;
+  brokerList: string[];
+  onSetSelectedBroker: (value: string | undefined) => void;
+  disableToolbar: boolean;
+}) {
+  const t = useTranslations("metrics");
+  const [isBrokerSelectOpen, setIsBrokerSelectOpen] = useState(false);
+
+  const onToggleClick = () => setIsBrokerSelectOpen((prev) => !prev);
+
+  const onBrokerSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined,
+  ) => {
+    if (value === t("all_brokers")) {
+      onSetSelectedBroker(undefined);
+    } else {
+      onSetSelectedBroker(value as string);
+    }
+    setIsBrokerSelectOpen(false);
+  };
+
+  // Define the toggle (new API pattern)
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isBrokerSelectOpen}
+      isDisabled={disableToolbar || brokerList.length === 0}
+      style={{ width: "250px" }}
+    >
+      {selectedBroker || t("all_brokers")}
+    </MenuToggle>
+  );
+
+  return (
+    <ToolbarItem>
+      <Select
+        id="broker-select"
+        isOpen={isBrokerSelectOpen}
+        selected={selectedBroker || t("all_brokers")}
+        onSelect={onBrokerSelect}
+        onOpenChange={setIsBrokerSelectOpen}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          <SelectOption value={t("all_brokers")}>
+            {t("all_brokers")}
+          </SelectOption>
+          {brokerList.map((broker, index) => (
+            <SelectOption key={`broker-${index}`} value={broker}>
+              {broker}
+            </SelectOption>
+          ))}
+        </SelectList>
+      </Select>
+    </ToolbarItem>
+  );
+}

ui/components/ClusterOverview/components/FilterByTime.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { FilterByTime } from "./FilterByTime";
+
+const meta: Meta<typeof FilterByTime> = {
+  component: FilterByTime,
+  args: {
+    keyText: "string",
+    disableToolbar: false,
+    ariaLabel: "the aria label",
+    duration: 60,
+  },
+} as Meta<typeof FilterByTime>;
+
+export default meta;
+type Story = StoryObj<typeof FilterByTime>;
+
+export const Default: Story = {};

ui/components/ClusterOverview/components/FilterByTime.tsx

@@ -0,0 +1,104 @@
+import {
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  ToolbarItem,
+} from "@/libs/patternfly/react-core";
+import { useState } from "react";
+
+export enum DurationOptions {
+  Last5minutes = 5,
+  Last15minutes = 15,
+  Last30minutes = 30,
+  Last1hour = 60,
+  Last3hours = 3 * 60,
+  Last6hours = 6 * 60,
+  Last12hours = 12 * 60,
+  Last24hours = 24 * 60,
+  Last2days = 2 * 24 * 60,
+  Last7days = 7 * 24 * 60,
+}
+
+export const DurationOptionsMap = {
+  [DurationOptions.Last5minutes]: "Last 5 minutes",
+  [DurationOptions.Last15minutes]: "Last 15 minutes",
+  [DurationOptions.Last30minutes]: "Last 30 minutes",
+  [DurationOptions.Last1hour]: "Last 1 hour",
+  [DurationOptions.Last3hours]: "Last 3 hours",
+  [DurationOptions.Last6hours]: "Last 6 hours",
+  [DurationOptions.Last12hours]: "Last 12 hours",
+  [DurationOptions.Last24hours]: "Last 24 hours",
+  [DurationOptions.Last2days]: "Last 2 days",
+  [DurationOptions.Last7days]: "Last 7 days",
+} as const;
+
+export function FilterByTime({
+  duration,
+  keyText,
+  ariaLabel,
+  disableToolbar,
+  onDurationChange,
+}: {
+  duration: DurationOptions;
+  onDurationChange: (value: DurationOptions) => void;
+  keyText: string;
+  ariaLabel: string;
+  disableToolbar: boolean;
+}) {
+  const [isTimeSelectOpen, setIsTimeSelectOpen] = useState(false);
+
+  const onToggleClick = () => setIsTimeSelectOpen((prev) => !prev);
+
+  const onTimeSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined,
+  ) => {
+    const mapping = Object.entries(DurationOptionsMap).find(
+      ([, label]) => label === value,
+    );
+    if (mapping) {
+      onDurationChange(parseInt(mapping[0], 10) as DurationOptions);
+    }
+    setIsTimeSelectOpen(false);
+  };
+
+  // Menu toggle (new PF6 API)
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isTimeSelectOpen}
+      isDisabled={disableToolbar}
+      style={{ width: "250px" }}
+    >
+      {DurationOptionsMap[duration]}
+    </MenuToggle>
+  );
+
+  return (
+    <ToolbarItem>
+      <label hidden id={`${keyText}-label`}>
+        {ariaLabel}
+      </label>
+      <Select
+        id={`filter-by-time-${keyText}`}
+        isOpen={isTimeSelectOpen}
+        selected={DurationOptionsMap[duration]}
+        onSelect={onTimeSelect}
+        onOpenChange={setIsTimeSelectOpen}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          {Object.values(DurationOptionsMap).map((label, idx) => (
+            <SelectOption key={`${keyText}-${idx}`} value={label}>
+              {label}
+            </SelectOption>
+          ))}
+        </SelectList>
+      </Select>
+    </ToolbarItem>
+  );
+}

ui/messages/en.json

@@ -414,6 +414,9 @@
     "no_data": "No clusters available.",
     "not_available": "n/a"
   },
+  "metrics": {
+     "all_brokers": "All Brokers"
+  },
   "ColumnsModal": {
     "title": "Manage columns",
     "description": "Chosen fields will be displayed in the table.",