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<{
)}