From f343d450dfc2582f869242d3465ca05c623b6213 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 12 Jun 2019 20:37:13 +0100
Subject: [PATCH] feat(ui): show a spinner while silence is being deleted

Makes it obvious that the UI didn't freeze on slow connections
---
 .../AlertGroup/Silence/DeleteSilence.js       | 27 ++++++++++++++++++-
 .../AlertGroup/Silence/DeleteSilence.test.js  |  2 ++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js
index 098f59031..ab5ac9143 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js
@@ -10,6 +10,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
+import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
 
 import { APIAlertmanagerUpstream } from "Models/API";
 import { AlertStore, FormatBackendURI, FormatAlertsQ } from "Stores/AlertStore";
@@ -20,6 +21,16 @@ import {
   GroupListToUniqueLabelsList
 } from "Components/LabelSetList";
 
+const ProgressMessage = () => (
+  <div className="text-center">
+    <FontAwesomeIcon
+      icon={faCircleNotch}
+      className="text-muted display-1 mb-3"
+      spin
+    />
+  </div>
+);
+
 const ErrorMessage = ({ message }) => (
   <div className="text-center">
     <FontAwesomeIcon
@@ -83,11 +94,16 @@ const DeleteSilenceModalContent = observer(
         },
         setError(err) {
           this.error = err;
+        },
+        reset() {
+          this.done = false;
+          this.error = null;
         }
       },
       {
         setDone: action.bound,
-        setError: action.bound
+        setError: action.bound,
+        reset: action.bound
       }
     );
 
@@ -140,6 +156,9 @@ const DeleteSilenceModalContent = observer(
       // if it's already deleted then do nothing
       if (this.deleteState.done && this.deleteState.error === null) return;
 
+      // reset state so we get a spinner
+      this.deleteState.reset();
+
       const isOpenAPI = semver.satisfies(alertmanager.version, ">=0.16.0");
 
       const uri = isOpenAPI
@@ -196,6 +215,8 @@ const DeleteSilenceModalContent = observer(
               ) : (
                 <SuccessMessage />
               )
+            ) : this.deleteState.fetch !== null ? (
+              <ProgressMessage />
             ) : this.previewState.error === null ? (
               <LabelSetList
                 alertStore={alertStore}
@@ -210,6 +231,10 @@ const DeleteSilenceModalContent = observer(
                   type="button"
                   className="btn btn-outline-danger mr-2"
                   onClick={this.onDelete}
+                  disabled={
+                    this.deleteState.fetch !== null &&
+                    this.deleteState.done === false
+                  }
                 >
                   <FontAwesomeIcon icon={faCheckCircle} className="mr-1" />
                   {this.deleteState.fetch !== null &&
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.test.js
index a119c9309..7704ff8b2 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.test.js
@@ -149,6 +149,8 @@ describe("<DeleteSilenceModalContent />", () => {
     expect(fetch.mock.calls).toHaveLength(2);
     tree.find(".btn-outline-danger").simulate("click");
     expect(fetch.mock.calls).toHaveLength(2);
+    tree.instance().onDelete();
+    expect(fetch.mock.calls).toHaveLength(2);
   });
 
   it("renders SuccessMessage on 'success' response status", async () => {