Button to web link the UI interface

NethServer · Sep 27, 2022 · 80510b4 · 80510b4
1 parent 2130c4b
commit 80510b4
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 5 deletions.
diff --git a/ui/public/i18n/language.json b/ui/public/i18n/language.json
@@ -18,7 +18,10 @@
     "mount": "Mount",
     "no_services": "No services",
     "no_images": "No images",
-    "no_volumes": "No volumes"
+    "no_volumes": "No volumes",
+    "open_piler_webapp": "Open Piler",
+    "not_configured": "Not configured",
+    "configure": "Configure"
   },
   "settings": {
     "title": "Settings",
@@ -64,6 +67,7 @@
     "403": "Operation not authorized",
     "404": "Resource not found",
     "cannot_retrieve_module_info": "Cannot retrieve module info",
-    "cannot_retrieve_installed_modules": "Cannot retrieve installed modules"
+    "cannot_retrieve_installed_modules": "Cannot retrieve installed modules",
+    "cannot_retrieve_configuration": "Cannot retrieve configuration"
   }
 }
diff --git a/ui/src/views/Status.vue b/ui/src/views/Status.vue
@@ -44,11 +44,37 @@
         <NsInfoCard
           light
           :title="status.instance || '-'"
-          :description="$t('status.app_instance')"
+          :description="
+            config && config.host ? $t('status.app_instance') : $t('status.not_configured')
+          "
           :icon="Application32"
-          :loading="loading.getStatus"
+          :loading="loading.getConfiguration"
+          :isErrorShown="error.getConfiguration"
+          :errorTitle="$t('error.cannot_retrieve_configuration')"
+          :errorDescription="error.getConfiguration"
           class="min-height-card"
-        />
+        >
+          <template slot="content">
+            <NsButton
+              v-if="config && config.host"
+              kind="ghost"
+              :icon="Launch20"
+              :disabled="loading.getConfiguration"
+              @click="goToPiler"
+            >
+              {{ $t("status.open_piler_webapp") }}
+            </NsButton>
+            <NsButton
+              v-else
+              kind="ghost"
+              :disabled="loading.getConfiguration"
+              :icon="ArrowRight20"
+              @click="goToAppPage(instanceName, 'settings')"
+            >
+              {{ $t("status.configure") }}
+            </NsButton>
+          </template>
+        </NsInfoCard>
       </cv-column>
       <cv-column :md="4" :max="4">
         <NsInfoCard
@@ -282,6 +308,7 @@ export default {
       urlCheckInterval: null,
       isRedirectChecked: false,
       redirectTimeout: 0,
+      config: null,
       status: {
         instance: "",
         services: [],
@@ -294,11 +321,13 @@ export default {
         getStatus: false,
         listBackupRepositories: false,
         listBackups: false,
+        getConfiguration: true,
       },
       error: {
         getStatus: "",
         listBackupRepositories: "",
         listBackups: "",
+        getConfiguration: ""
       },
     };
   },
@@ -343,10 +372,60 @@ export default {
     clearTimeout(this.redirectTimeout);
   },
   created() {
+    this.getConfiguration();
     this.getStatus();
     this.listBackupRepositories();
   },
   methods: {
+    goToPiler() {
+      window.open(`https://${this.config.host}`, "_blank");
+    },
+    async getConfiguration() {
+      this.loading.getConfiguration = true;
+      this.error.getConfiguration = "";
+      const taskAction = "get-configuration";
+      const eventId = this.getUuid();
+
+      // register to task error
+      this.core.$root.$once(
+        `${taskAction}-aborted-${eventId}`,
+        this.getConfigurationAborted
+      );
+
+      // register to task completion
+      this.core.$root.$once(
+        `${taskAction}-completed-${eventId}`,
+        this.getConfigurationCompleted
+      );
+
+      const res = await to(
+        this.createModuleTaskForApp(this.instanceName, {
+          action: taskAction,
+          extra: {
+            title: this.$t("action." + taskAction),
+            isNotificationHidden: true,
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.getConfiguration = this.getErrorMessage(err);
+        this.loading.getConfiguration = false;
+        return;
+      }
+    },
+    getConfigurationAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.getConfiguration = this.$t("error.generic_error");
+      this.loading.getConfiguration = false;
+    },
+    getConfigurationCompleted(taskContext, taskResult) {
+      this.config = taskResult.output;
+      this.loading.getConfiguration = false;
+    },
     async getStatus() {
       this.loading.getStatus = true;
       this.error.getStatus = "";