Merge pull request #26 from NethServer/status_ui NethServer/dev#7108

Add a button to configure and access the web application.
NethServer · Nov 12, 2024 · c024ac9 · c024ac9
2 parents 9d593c1 + 6973c2c
commit c024ac9
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 3 deletions.
diff --git a/ui/public/i18n/en/translation.json b/ui/public/i18n/en/translation.json
@@ -18,7 +18,11 @@
     "mount": "Mount",
     "no_services": "No services",
     "no_images": "No images",
-    "no_volumes": "No volumes"
+    "no_volumes": "No volumes",
+    "not_configured": "Not configured",
+    "sogo_webapp": "SOGo webmail",
+    "open_webapp": "Open SOGo",
+    "configure": "Configure"
   },
   "settings": {
     "title": "Settings",
@@ -37,7 +41,7 @@
     "mail_server_is_not_valid": "This mail server cannot be used by SOGo webmail",
     "adminList": "Administrator list",
     "Write_administrator_list": "Write one administrator per line",
-    "dav_tips":"Dav allows to synchronize calendars and adressbooks",
+    "dav_tips": "Dav allows to synchronize calendars and adressbooks",
     "dav": "DAV",
     "activesync": "ActiveSync",
     "activesync_tips": "ActiveSync allows to syncronize mobile devices",
@@ -78,6 +82,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
@@ -40,6 +40,40 @@
       </cv-column>
     </cv-row>
     <cv-row>
+      <cv-column :md="4" :max="4">
+        <NsInfoCard
+          light
+          :title="$t('status.sogo_webapp')"
+          :description="this.host ? this.host : $t('status.not_configured')"
+          :icon="Wikis32"
+          :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="this.host"
+              kind="ghost"
+              :icon="Launch20"
+              :disabled="loading.getConfiguration"
+              @click="goToWebapp"
+            >
+              {{ $t("status.open_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
           light
@@ -282,6 +316,7 @@ export default {
       urlCheckInterval: null,
       isRedirectChecked: false,
       redirectTimeout: 0,
+      host: "",
       status: {
         instance: "",
         services: [],
@@ -291,6 +326,7 @@ export default {
       backupRepositories: [],
       backups: [],
       loading: {
+        getConfiguration: true,
         getStatus: false,
         listBackupRepositories: false,
         listBackups: false,
@@ -299,6 +335,7 @@ export default {
         getStatus: "",
         listBackupRepositories: "",
         listBackups: "",
+        getConfiguration: "",
       },
     };
   },
@@ -343,10 +380,60 @@ export default {
     clearTimeout(this.redirectTimeout);
   },
   created() {
+    this.getConfiguration();
     this.getStatus();
     this.listBackupRepositories();
   },
   methods: {
+    goToWebapp() {
+      window.open(`https://${this.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.core.$t("error.generic_error");
+      this.loading.getConfiguration = false;
+    },
+    getConfigurationCompleted(taskContext, taskResult) {
+      const config = taskResult.output;
+      this.host = config.host;
+      this.loading.getConfiguration = false;
+    },
     async getStatus() {
       this.loading.getStatus = true;
       this.error.getStatus = "";