TLS certificates page: count reads upfront and keep partial ACME rows

core/ui/src/components/settings/AcmeSettings.vue

@@ -8,6 +8,15 @@
       <cv-grid class="no-padding">
         <cv-row>
           <cv-column>
+            <!-- NsDataTable replaces the rows with its error: report a partial
+                 failure here, so the nodes that did answer stay readable -->
+            <NsInlineNotification
+              v-if="tableError && servers.length"
+              kind="error"
+              :title="tableErrorTitle"
+              :description="tableErrorDescription"
+              :showCloseButton="false"
+            />
             <NsDataTable
               :allRows="servers"
               :columns="i18nTableColumns"
@@ -26,7 +35,7 @@
               "
               :isLoading="loadingServers"
               :skeletonRows="5"
-              :isErrorShown="!!instancesError || !!error.getAcmeServer"
+              :isErrorShown="!!tableError && !servers.length"
               :errorTitle="tableErrorTitle"
               :errorDescription="tableErrorDescription"
               :itemsPerPageLabel="$t('pagination.items_per_page')"
@@ -155,6 +164,9 @@ export default {
     loadingServers() {
       return this.isLoadingInstances || this.loading.getAcmeServerNum > 0;
     },
+    tableError() {
+      return this.instancesError || this.error.getAcmeServer;
+    },
     tableErrorTitle() {
       return this.instancesError
         ? this.$t("action.list-installed-modules")
@@ -218,15 +230,16 @@ export default {
     async getAcmeServer() {
       // a handler of a previous round would decrement the counter of this one
       this.clearTaskListeners();
-      this.loading.getAcmeServerNum = 0;
       this.servers = [];
       // otherwise a transient error sticks after the nodes answer again
       this.clearTableError();
+      // count the whole batch upfront: the counter must not reach zero between
+      // two iterations
+      this.loading.getAcmeServerNum = this.traefikInstances.length;
 
       for (const traefikInstance of this.traefikInstances) {
         const taskAction = "get-acme-server";
         const eventId = this.getUuid();
-        this.loading.getAcmeServerNum++;
 
         // register to task events
 
@@ -262,7 +275,7 @@ export default {
           this.error.getAcmeServer = errMessage;
           this.currentErrorAction = this.$t("action." + taskAction);
           this.currentErrorDescription = errMessage;
-          this.decreaseGetAcmeServerNum();
+          this.loading.getAcmeServerNum--;
         }
       }
     },
@@ -271,7 +284,7 @@ export default {
       this.error.getAcmeServer = this.$t("error.generic_error");
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
-      this.decreaseGetAcmeServerNum();
+      this.loading.getAcmeServerNum--;
     },
     getAcmeServerCompleted(taskContext, taskResult) {
       const server = taskResult.output;
@@ -297,14 +310,7 @@ export default {
         this.servers.push(server);
       }
       this.servers.sort(this.sortByProperty("node"));
-      this.decreaseGetAcmeServerNum();
-    },
-    decreaseGetAcmeServerNum() {
-      // never go below zero: a new round resets the counter
-      this.loading.getAcmeServerNum = Math.max(
-        0,
-        this.loading.getAcmeServerNum - 1
-      );
+      this.loading.getAcmeServerNum--;
     },
     onReloadServers() {
       this.getAcmeServer();

core/ui/src/views/settings/SettingsTlsCertificates.vue

@@ -980,6 +980,8 @@ export default {
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
       this.loading.listInstalledModules = false;
+      // the certificates chain will not run: release its skeleton rows
+      this.loading.listCertificatesNum = 0;
     },
     listInstalledModulesCompleted(taskContext, taskResult) {
       // init nodes
@@ -1038,12 +1040,13 @@ export default {
       this.clearTaskListeners();
       this.offlineTraefikInstances = [];
       this.listCertificatesErrors = [];
-      this.loading.listCertificatesNum = 0;
+      // count the whole batch upfront: the counter must not reach zero between
+      // two iterations
+      this.loading.listCertificatesNum = this.traefikInstances.length;
 
       for (const traefikInstance of this.traefikInstances) {
         const taskAction = "list-certificates";
         const eventId = this.getUuid();
-        this.loading.listCertificatesNum++;
 
         // register to task events
 
@@ -1109,7 +1112,7 @@ export default {
               )} - ${this.getNodeLabel(traefikInstance)})`,
             });
           }
-          this.decreaseListCertificatesNum();
+          this.loading.listCertificatesNum--;
         }
       }
     },
@@ -1128,7 +1131,7 @@ export default {
           traefikInstance
         )} - ${this.getNodeLabel(traefikInstance)})`,
       });
-      this.decreaseListCertificatesNum();
+      this.loading.listCertificatesNum--;
     },
     listCertificatesCompleted(taskContext, taskResult) {
       const traefikId = taskContext.extra.traefikInstance.id;
@@ -1203,14 +1206,7 @@ export default {
       // $set() is needed for reactivity (see https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects)
       this.$set(this.certificatesByTraefikId, traefikId, certs);
 
-      this.decreaseListCertificatesNum();
-    },
-    decreaseListCertificatesNum() {
-      // never go below zero: a new round resets the counter
-      this.loading.listCertificatesNum = Math.max(
-        0,
-        this.loading.listCertificatesNum - 1
-      );
+      this.loading.listCertificatesNum--;
     },
     getTagKind(status) {
       switch (status) {