diff --git a/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.js b/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.js
index a0a5970fd..7fd26bde7 100644
--- a/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.js
+++ b/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.js
@@ -5,76 +5,144 @@ import { useObserver } from "mobx-react-lite";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
-import { faCheckCircle } from "@fortawesome/free-regular-svg-icons/faCheckCircle";
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
import { AlertStore } from "Stores/AlertStore";
import { SilenceFormStore } from "Stores/SilenceFormStore";
import { SilenceSubmitProgress } from "./SilenceSubmitProgress";
+const SingleClusterStatus = ({ silenceFormStore, alertStore }) => {
+ const clusterRequest = Object.values(
+ silenceFormStore.data.requestsByCluster
+ )[0];
+
+ return useObserver(() => (
+
+
+ {clusterRequest.isDone ? (
+ clusterRequest.error ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+
{clusterRequest.cluster}
+ {clusterRequest.isDone ? (
+
+ {clusterRequest.error ? (
+ clusterRequest.error
+ ) : (
+
+ {clusterRequest.silenceID}
+
+ )}
+
+ ) : null}
+
+ ));
+};
+
+const MultiClusterStatus = ({ silenceFormStore, alertStore }) => {
+ return useObserver(() => (
+
-
-
-
- {Object.values(silenceFormStore.data.requestsByCluster).map(
- (clusterRequest) => (
-
- |
- {clusterRequest.isDone ? (
- clusterRequest.error ? (
-
- ) : (
-
- )
- ) : (
-
- )}
- |
- {clusterRequest.cluster} |
-
-
- |
-
- )
- )}
-
-
-
+ {Object.keys(silenceFormStore.data.requestsByCluster).length === 1 ? (
+
+ ) : (
+
+ )}