Merge pull request #11 from stephdl/launcher

infocard in status page
stephdl · Mar 16, 2024 · 9a3c177 · 9a3c177
2 parents 0ec1c53 + 70988f6
commit 9a3c177
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 10 deletions.
diff --git a/imageroot/systemd/user/kickstart-app.service b/imageroot/systemd/user/kickstart-app.service
@@ -15,7 +15,7 @@ EnvironmentFile=-%S/state/smarthost.env
 WorkingDirectory=%S/state
 Restart=always
 TimeoutStopSec=70
-ExecStartPre=/bin/mkdir -p config
+ExecStartPre=/bin/mkdir -p tmp
 ExecStartPre=/bin/rm -f %t/kickstart-app.pid %t/kickstart-app.ctr-id
 ExecStartPre=-runagent discover-smarthost
 ExecStart=/usr/bin/podman run --conmon-pidfile %t/kickstart-app.pid \

diff --git a/ui/package.json b/ui/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@carbon/icons-vue": "^10.37.0",
     "@carbon/vue": "^2.40.0",
-    "@nethserver/ns8-ui-lib": "^0.1.22",
+    "@nethserver/ns8-ui-lib": "^0.1.32",
     "await-to-js": "^3.0.0",
     "axios": "^0.21.2",
     "carbon-components": "^10.41.0",

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",
+    "kickstart_webapp": "kickstart webapp",
+    "not_configured": "Not configured",
+    "open_webapp": "Open kickstart",
+    "configure": "Configure"
   },
   "settings": {
     "title": "Settings",
@@ -62,6 +66,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,13 +40,47 @@
       </cv-column>
     </cv-row>
     <cv-row>
+      <cv-column :md="4" :max="4">
+        <NsInfoCard
+          light
+          :title="$t('status.kickstart_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
           :title="status.instance || '-'"
           :description="$t('status.app_instance')"
           :icon="Application32"
-          :loading="loading.getStatus"
+          :loading="loading.getStatus || loading.getConfiguration"
           class="min-height-card"
         />
       </cv-column>
@@ -57,7 +91,7 @@
           :titleTooltip="installationNodeTitleTooltip"
           :description="$t('status.installation_node')"
           :icon="Chip32"
-          :loading="loading.getStatus"
+          :loading="loading.getStatus || loading.getConfiguration"
           class="min-height-card"
         />
       </cv-column>
@@ -282,6 +316,7 @@ export default {
       urlCheckInterval: null,
       isRedirectChecked: false,
       redirectTimeout: 0,
+      host: "",
       status: {
         instance: "",
         services: [],
@@ -294,6 +329,7 @@ export default {
         getStatus: false,
         listBackupRepositories: false,
         listBackups: false,
+        getConfiguration: false,
       },
       error: {
         getStatus: "",
@@ -343,10 +379,61 @@ 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.$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 = "";

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1012,10 +1012,10 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@nethserver/ns8-ui-lib@^0.1.22":
-  version "0.1.25"
-  resolved "https://registry.npmjs.org/@nethserver/ns8-ui-lib/-/ns8-ui-lib-0.1.25.tgz"
-  integrity sha512-jSYcG/PDd356Dvdb7BZkMBC+h9fxHvROWTrPsXRplCV4GsTcygO8Uc3H/ch3eo51Rre4qqrk/AP7j5Tzz3tBzQ==
+"@nethserver/ns8-ui-lib@^0.1.32":
+  version "0.1.32"
+  resolved "https://registry.npmmirror.com/@nethserver/ns8-ui-lib/-/ns8-ui-lib-0.1.32.tgz#7556dd5c7f96ff166597552c9b20e02599d86ba6"
+  integrity sha512-CqW+Qr65uFiKYe/cG0qahRD+3ojXhDxMJ8Mf8M9CXDHY0WSWygyGYAftLxF8rtQkOdGHlaYv7cSK7TctHggHGA==
   dependencies:
     "@rollup/plugin-json" "^4.1.0"
     core-js "^3.15.2"