diff --git a/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx b/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx index 7bab1bfe6a..4e60ee11f9 100644 --- a/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx +++ b/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx @@ -58,6 +58,7 @@ import { IconTerminal, IconTrash, } from "@tabler/icons-react"; +import { removePanel } from "../../state/queryPageSlice"; const promqlExtension = new PromQLExtension(); @@ -106,11 +107,13 @@ export class HistoryCompleteStrategy implements CompleteStrategy { interface ExpressionInputProps { initialExpr: string; executeQuery: (expr: string) => void; + removePanel: () => void; } const ExpressionInput: FC = ({ initialExpr, executeQuery, + removePanel, }) => { const theme = useComputedColorScheme(); const [expr, setExpr] = useState(initialExpr); @@ -183,6 +186,7 @@ const ExpressionInput: FC = ({ leftSection={ } + onClick={removePanel} > Remove query diff --git a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx index a3ceecbe98..a3253efd71 100644 --- a/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx +++ b/web/ui/mantine-ui/src/pages/query/QueryPanel.tsx @@ -52,6 +52,9 @@ const QueryPanel: FC = ({ idx }) => { setRetriggerIdx((idx) => idx + 1); dispatch(setExpr({ idx, expr })); }} + removePanel={() => { + dispatch(removePanel(idx)); + }} />