fix(ui): enhance CloneOrMoveAppModal with cluster status handling and error notifications

Author: stephdl

core/ui/src/components/software-center/CloneOrMoveAppModal.vue

@@ -6,12 +6,15 @@
   <NsModal
     size="default"
     :visible="isShown"
-    @modal-hidden="$emit('hide')"
+    @modal-hidden="onModalHidden"
     @primary-click="cloneOrMove"
+    @modal-shown="onModalShown"
     :primary-button-disabled="
       !selectedNode ||
       (!isClone && installationNode == selectedNode.id) ||
-      loading.cloneModule
+      loading.cloneModule ||
+      loading.getClusterStatus ||
+      clusterStatus.length == disabledNodes.length
     "
   >
     <template slot="title">{{
@@ -27,9 +30,19 @@
             : $t("software_center.move_app_description", { instanceLabel })
         }}
       </div>
+      <NsInlineNotification
+        v-if="error.getClusterStatus"
+        kind="error"
+        :title="$t('action.get-cluster-status')"
+        :description="error.getClusterStatus"
+        :showCloseButton="false"
+      />
       <div>{{ $t("software_center.select_destination_node") }}:</div>
       <NsInlineNotification
-        v-if="clusterNodes.length == disabledNodes.length"
+        v-if="
+          clusterStatus.length == disabledNodes.length &&
+          !loading.getClusterStatus
+        "
         kind="info"
         :title="
           isClone
@@ -42,6 +55,7 @@
         class="mg-top-xlg"
         @selectNode="onSelectNode"
         :disabledNodes="disabledNodes"
+        :loading="loading.getClusterStatus"
       >
         <template v-for="(nodeMessages, nodeId) in nodesInfo">
           <template :slot="`node-${nodeId}`">
@@ -109,11 +123,14 @@ export default {
   data() {
     return {
       selectedNode: null,
+      clusterStatus: [],
       loading: {
         cloneModule: false,
+        getClusterStatus: true,
       },
       error: {
         cloneModule: "",
+        getClusterStatus: "",
       },
     };
   },
@@ -173,6 +190,15 @@ export default {
           }
           nodesInfo[nodeInfo.node_id] = nodeMessages;
         }
+        // Add offline nodes message
+        for (const node of this.clusterStatus) {
+          if (!node.online) {
+            if (!nodesInfo[node.id]) {
+              nodesInfo[node.id] = [];
+            }
+            nodesInfo[node.id].push(this.$t("software_center.node_offline"));
+          }
+        }
       }
       return nodesInfo;
     },
@@ -181,20 +207,92 @@ export default {
         return [];
       }
 
+      // Get non-eligible nodes from install_destinations
       const ineligibleNodes = this.app.install_destinations
         .filter((nodeInfo) => !nodeInfo.eligible)
         .map((nodeInfo) => nodeInfo.node_id);
 
+      // Get offline nodes from clusterStatus
+      const offlineNodeIds = this.clusterStatus
+        .filter((node) => !node.online)
+        .map((node) => node.id);
+
       if (this.isClone) {
-        // cloning app
-        return ineligibleNodes;
+        // cloning app: combine ineligible and offline nodes
+        return [...new Set([...ineligibleNodes, ...offlineNodeIds])];
       } else {
-        // moving app: add current node to ineligible nodes and remove possible duplicates
-        return [...new Set(ineligibleNodes.concat(this.installationNode))];
+        // moving app: add current node to ineligible/offline nodes and remove possible duplicates
+        return [
+          ...new Set([
+            ...ineligibleNodes.concat(this.installationNode),
+            ...offlineNodeIds,
+          ]),
+        ];
       }
     },
   },
   methods: {
+    onModalShown() {
+      // reset state before showing modal
+      // Force selection to node 1 if only available
+      if (this.clusterNodes.length == 1) {
+        this.selectedNode = this.clusterNodes[0];
+        this.clusterNodes[0].selected = true;
+      } else {
+        this.selectedNode = null;
+      }
+      this.clusterStatus = [];
+      this.getClusterStatus();
+    },
+    onModalHidden() {
+      // reset state
+      this.$emit("hide");
+      this.clearErrors();
+      this.selectedNode = null;
+      this.clusterStatus = [];
+      this.loading.getClusterStatus = true;
+    },
+    async getClusterStatus() {
+      this.error.getClusterStatus = "";
+      const taskAction = "get-cluster-status";
+
+      // register to task error
+      this.$root.$off(taskAction + "-aborted");
+      this.$root.$once(taskAction + "-aborted", this.getClusterStatusAborted);
+
+      // register to task completion
+      this.$root.$off(taskAction + "-completed");
+      this.$root.$once(
+        taskAction + "-completed",
+        this.getClusterStatusCompleted
+      );
+
+      const res = await to(
+        this.createClusterTask({
+          action: taskAction,
+          extra: {
+            title: this.$t("action." + taskAction),
+            isNotificationHidden: true,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.getClusterStatus = this.getErrorMessage(err);
+        return;
+      }
+    },
+    getClusterStatusAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.getClusterStatus = this.$t("error.generic_error");
+      this.loading.getClusterStatus = false;
+    },
+    getClusterStatusCompleted(taskContext, taskResult) {
+      this.clusterStatus = taskResult.output.nodes;
+      this.loading.getClusterStatus = false;
+    },
     async cloneOrMove() {
       this.loading.cloneModule = true;
       const taskAction = "clone-module";