diff --git a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.test.tsx b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.test.tsx index 1c6f07345..ca74ca4fc 100644 --- a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.test.tsx +++ b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.test.tsx @@ -7,10 +7,12 @@ import fetchMock from "fetch-mock"; import { MockGrid } from "__fixtures__/Stories"; import { AlertStore } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; +import { APIGridT } from "Models/APITypes"; import { GridLabelSelect } from "./GridLabelSelect"; let alertStore: AlertStore; let settingsStore: Settings; +let grid: APIGridT; beforeEach(() => { fetchMock.reset(); @@ -20,13 +22,27 @@ beforeEach(() => { alertStore = new AlertStore([]); settingsStore = new Settings(null); + grid = { + labelName: "foo", + labelValue: "bar", + alertGroups: [], + stateCount: { + active: 0, + suppressed: 0, + unprocessed: 0, + }, + }; jest.useFakeTimers(); }); const MountedGridLabelSelect = () => { return mount( - + ); }; diff --git a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx index 0e5425e2e..6dd67be9a 100644 --- a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx +++ b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx @@ -18,6 +18,7 @@ import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown"; import { AlertStore } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; +import { APIGridT } from "Models/APITypes"; import { CommonPopperModifiers } from "Common/Popper"; import { NewLabelName, StringToOption, OptionT } from "Common/Select"; import { DropdownSlide } from "Components/Animations/DropdownSlide"; @@ -29,7 +30,8 @@ const NullContainer: FC = () => null; const GridLabelNameSelect: FC<{ alertStore: AlertStore; settingsStore: Settings; -}> = ({ alertStore, settingsStore }) => { + grid: APIGridT; +}> = ({ alertStore, settingsStore, grid }) => { const loadOptions = ( inputValue: string, callback: (options: OptionT[]) => void @@ -59,6 +61,7 @@ const GridLabelNameSelect: FC<{ callback( Object.keys(labelNames) + .filter((labelName) => labelName !== grid.labelName) .sort() .map((key) => StringToOption(key)) ); @@ -94,12 +97,14 @@ const Dropdown: FC<{ popperStyle?: CSSProperties; alertStore: AlertStore; settingsStore: Settings; + grid: APIGridT; }> = ({ popperPlacement, popperRef, popperStyle, alertStore, settingsStore, + grid, }) => { return (
); @@ -123,7 +129,8 @@ const Dropdown: FC<{ const GridLabelSelect: FC<{ alertStore: AlertStore; settingsStore: Settings; -}> = observer(({ alertStore, settingsStore }) => { + grid: APIGridT; +}> = observer(({ alertStore, settingsStore, grid }) => { const [isVisible, setIsVisible] = useState(false); const hide = useCallback(() => setIsVisible(false), []); const toggle = useCallback(() => setIsVisible(!isVisible), [isVisible]); @@ -155,6 +162,7 @@ const GridLabelSelect: FC<{ popperStyle={style} alertStore={alertStore} settingsStore={settingsStore} + grid={grid} /> )} diff --git a/ui/src/Components/Grid/AlertGrid/Swimlane.tsx b/ui/src/Components/Grid/AlertGrid/Swimlane.tsx index 4325f6195..3ad220849 100644 --- a/ui/src/Components/Grid/AlertGrid/Swimlane.tsx +++ b/ui/src/Components/Grid/AlertGrid/Swimlane.tsx @@ -44,6 +44,7 @@ const Swimlane: FC<{ )}