Fix error toast when adding node, add spinner to indicate activity

adminui/clustering.go

@@ -105,7 +105,7 @@ func (au *AdminUI) newNode(w http.ResponseWriter, r *http.Request) {
 
 	newNodeResp.JoinToken, err = data.AddMember(newNodeReq.NodeName, newNodeReq.ConnectionURL, newNodeReq.ManagerURL)
 	if err != nil {
-		log.Println("failed to add member: ", newNodeResp.ErrorMessage)
+		log.Println("failed to add member: ", err)
 		w.WriteHeader(http.StatusInternalServerError)
 		return
 	}

adminui/frontend/src/composables/useToastError.ts

@@ -4,10 +4,15 @@ import { useToast } from 'vue-toastification'
 export function useToastError() {
   const toast = useToast()
 
-  const catcher = (e: any, prefixString: string = '') => {
+  const catcher = (e: any, prefixString: string = '', messageProperty: string = 'message') => {
     let errorString = 'Unknown Error'
     if (e instanceof AxiosError) {
-      errorString = e.response?.data?.message ?? e.message
+      const potentialString = e.response?.data
+      if (potentialString == null) {
+        errorString = e.message
+      } else {
+        errorString = potentialString[messageProperty]
+      }
     } else if (e instanceof Error) {
       errorString = e.message
     }

adminui/frontend/src/pages/ClusterMembers.vue

@@ -39,31 +39,34 @@ const newMemberDetails = ref<NewNodeRequestDTO>({
   node_name: ''
 } as NewNodeRequestDTO)
 
+const isAddLoading = ref(false)
+
 async function addMember() {
   if (newMemberDetails.value?.connection_url.length == 0) {
     toast.error('Peer URL must be defined')
     return
   }
 
   try {
+    isAddLoading.value = true
+
     const resp = await addClusterMember(newMemberDetails.value)
     refresh()
 
     if (resp.error_message) {
       toast.error(resp.error_message)
       return
     } else {
-      toast.info(
-        `New join token: ${resp.join_token}\nThis will not be displayed again, valid 30 seconds\nUse 'wag start -token ${resp.join_token}'`,
-        {
-          timeout: false,
-          closeOnClick: false,
-          draggable: false
-        }
-      )
+      toast.info(`New join token: ${resp.join_token}\nThis will not be displayed again, valid 30 seconds`, {
+        timeout: false,
+        closeOnClick: false,
+        draggable: false
+      })
     }
   } catch (e) {
-    catcher(e, 'failed to add new cluster member: ')
+    catcher(e, 'failed to add new cluster member: ', 'error_message')
+  } finally {
+    isAddLoading.value = false
   }
 }
 
@@ -147,7 +150,9 @@ async function controlNode(member: ClusterMember, action: NodeControlActions) {
           </div>
 
           <span class="mt-8 flex">
-            <button class="btn btn-primary" @click="() => addMember()">Add</button>
+            <button class="btn btn-primary" @click="() => addMember()">
+              Add <span class="loading loading-spinner loading-md" v-if="isAddLoading"></span>
+            </button>
 
             <div class="flex flex-grow"></div>
 
@@ -157,6 +162,7 @@ async function controlNode(member: ClusterMember, action: NodeControlActions) {
       </div>
     </Modal>
     <h1 class="text-4xl font-bold">Cluster Members</h1>
+
     <button class="btn btn-ghost btn-primary" @click="openAddMemberModal">
       Add Cluster Member <font-awesome-icon :icon="Icons.Add" />
     </button>
@@ -204,10 +210,10 @@ async function controlNode(member: ClusterMember, action: NodeControlActions) {
                 @click="() => controlNode(member, NodeControlActions.Promote)"
                 :disabled="member.name.length == 0"
               >
-                Promote
+                Promote <font-awesome-icon :icon="Icons.Up" />
               </button>
               <button v-if="member.leader" class="btn btn-sm btn-info" @click="() => controlNode(member, NodeControlActions.Stepdown)">
-                Step Down
+                Step Down <font-awesome-icon :icon="Icons.Down" />
               </button>
               <span v-if="!member.witness">
                 <button
@@ -216,15 +222,15 @@ async function controlNode(member: ClusterMember, action: NodeControlActions) {
                   @click="() => controlNode(member, NodeControlActions.Restore)"
                   :disabled="member.name.length == 0"
                 >
-                  Restore
+                  Restore <font-awesome-icon :icon="Icons.Restore" />
                 </button>
                 <button
                   v-else
                   class="btn btn-sm btn-info"
                   @click="() => controlNode(member, NodeControlActions.Drain)"
                   :disabled="member.name.length == 0"
                 >
-                  Drain
+                  Drain <font-awesome-icon :icon="Icons.Pause" />
                 </button>
               </span>
             </div>

adminui/frontend/src/util/icons.ts

@@ -1,70 +1,54 @@
 export const Icons = {
   // actions
-  Download: 'fa-solid fa-download',
   Edit: 'fa-solid fa-pencil',
   Delete: 'fa-solid fa-trash',
   Remove: 'fa-solid fa-xmark',
   Close: 'fa-solid fa-xmark',
-  Start: 'fa-solid fa-play',
+  Restore: 'fa-solid fa-play',
+  Pause: 'fa-solid fa-pause',
+
   Stop: 'fa-solid fa-stop',
-  Autofill: 'fa-solid fa-pen-to-square',
-  Clone: 'fa-solid fa-clone',
+
   SignOut: 'fa-solid fa-sign-out',
   Add: 'fa-solid fa-plus-circle',
   Info: 'fa-solid fa-circle-info',
   Clipboard: 'fa-solid fa-clipboard',
   Refresh: 'fa-solid fa-refresh',
 
-  // objects
-  Agent: 'fa-solid fa-robot',
   User: 'fa-solid fa-user',
   RegistrationKey: 'fa-solid fa-key',
 
   Open: 'fa-solid fa-bars',
 
-  Rulefile: 'fa-solid fa-shuffle',
-  Wordlist: 'fa-solid fa-book-open',
-  Charset: 'fa-solid fa-arrow-down-a-z',
-
-  AttackTemplate: 'fa-solid fa-sliders',
-  AttackTemplateSet: 'fa-solid fa-layer-group',
-
   Advanced: 'fa-solid circle-nodes',
 
   FirewallState: 'fa-solid fa-shield-heart',
 
   Test: 'fa-solid fa-vial-circle-check',
 
-  // pages
   Dashboard: 'fa-solid fa-gauge',
   Events: 'fa-solid fa-calendar-days',
   ClusterMembers: 'fa-solid fa-sitemap',
 
+  Up: 'fa-solid fa-arrow-up',
+  Down: 'fa-solid fa-arrow-down',
+
   Groups: 'fa-solid fa-users',
   Device: 'fa-solid fa-display',
 
   List: 'fa-solid fa-list',
   Inspect: 'fa-solid fa-magnifying-glass',
   Utilisation: 'fa-solid fa-gauge',
 
-  // misc
   Password: 'fa-solid fa-key',
-  GPU: 'fa-solid fa-memory',
-  CPU: 'fa-solid fa-microchip',
-  Maintenance: 'fa-solid fa-warning',
-  Warning: 'fa-solid fa-circle-exclamation',
   Admin: 'fa-solid fa-lock',
   Config: 'fa-solid fa-gear',
   Peers: 'fa-solid fa-hexagon-nodes',
   Auth: 'fa-solid fa-passport',
-  Share: 'fa-solid fa-link',
-  RandomlyGenerated: 'fa-solid fa-dice',
+
   Tick: 'fa-solid fa-check',
   Locked: 'fa-solid fa-lock',
   Unlocked: 'fa-solid fa-unlock',
 
-  Awaiting: 'fa-solid fa-hourglass-end',
-  Dead: 'fa-solid fa-skull-crossbones',
-  Unknown: 'fa-solid fa-question',
   Send: 'fa-solid fa-paper-plane'
 }