Integrate Email notifications UI with Mail app instances (#624)

core/ui/public/i18n/en/translation.json

@@ -112,7 +112,8 @@
         "path_pattern": "Invalid path pattern",
         "fqdn_format": "Invalid FQDN format",
         "cannot_retrieve_users_admin_configuration": "Cannot retrieve users portal administration",
-        "cannot_retrieve_subscription_status": "Cannot retrieve subscription status"
+        "cannot_retrieve_subscription_status": "Cannot retrieve subscription status",
+        "cannot_retrieve_email_notification_status": "Cannot retrieve email notifications status"
     },
     "websocket": {
         "websocket_disconnected": "Websocket disconnected",
@@ -995,7 +996,9 @@
         "updated_available_c": "Available update | Available updates",
         "core_update_available": "Core update available",
         "subscription_status": "Subscription",
-        "go_to_subscription": "Go to Subscription"
+        "go_to_subscription": "Go to Subscription",
+        "email_notification": "Email notifications",
+        "go_to_settings": "Go to settings"
     },
     "domains": {
         "title": "Domains and users",
@@ -1302,6 +1305,14 @@
         "animated_icons_by": "Animated icons by"
     },
     "smarthost": {
+        "node": "Node {nodeId}",
+        "manual_configuration": "Manual configuration",
+        "mail_app_instance": "Use Mail app instance",
+        "configuration": "Configuration",
+        "choose_instance": "Choose instance",
+        "no_mail_app_instance": "No Mail app instance found",
+        "no_mail_app_instance_description": "You can install Mail app from Software center",
+        "go_to_software_center": "Go to Software center",
         "title": "Email notifications",
         "enabled": "Send notifications with an SMTP server",
         "hostname_label": "SMTP server",

core/ui/src/views/ClusterStatus.vue

@@ -257,6 +257,46 @@
           </template>
         </NsInfoCard>
       </cv-column>
+      <cv-column :md="4" :max="4">
+        <NsInfoCard
+          light
+          :title="$t('cluster_status.email_notification')"
+          :icon="Email32"
+          :loading="loading.getEmailNotification"
+          :isErrorShown="error.getEmailNotification"
+          :errorTitle="$t('error.cannot_retrieve_email_notification_status')"
+          :errorDescription="error.getEmailNotification"
+          class="min-height-card"
+        >
+          <template slot="content">
+            <div class="card-rows">
+              <div class="card-row">
+                <div v-if="!loading.getEmailNotification" class="card-row">
+                  <cv-tag
+                    v-if="emailNotificationEnabled"
+                    kind="green"
+                    :label="$t('common.enabled')"
+                  ></cv-tag>
+                  <cv-tag
+                    v-else
+                    kind="high-contrast"
+                    :label="$t('common.disabled')"
+                  ></cv-tag>
+                </div>
+              </div>
+              <div class="card-row">
+                <NsButton
+                  kind="ghost"
+                  :icon="ArrowRight20"
+                  @click="$router.push('/settings/smarthost')"
+                >
+                  {{ $t("cluster_status.go_to_settings") }}
+                </NsButton>
+              </div>
+            </div>
+          </template>
+        </NsInfoCard>
+      </cv-column>
     </cv-row>
   </cv-grid>
 </template>
@@ -309,13 +349,15 @@ export default {
       instancesNotBackedUp: [],
       isCoreUpdateAvailable: false,
       subscription_status: "inactive",
+      emailNotificationEnabled: false,
       support_active: false,
       loading: {
         getClusterStatus: true,
         listModules: true,
         listBackups: true,
         listCoreModules: true,
         getSubscription: true,
+        getEmailNotification: true,
         getSupportSession: true,
       },
       error: {
@@ -326,6 +368,7 @@ export default {
         listBackups: "",
         listCoreModules: "",
         getSubscription: "",
+        getEmailNotification: "",
       },
     };
   },
@@ -419,6 +462,7 @@ export default {
       this.listCoreModules();
       this.listBackups();
       this.getSubscription();
+      this.getEmailNotification();
     },
     async getSupportSession() {
       this.error.getSupportSession = "";
@@ -497,6 +541,52 @@ export default {
       this.subscription_status = output.subscription.status;
       this.loading.getSubscription = false;
     },
+    async getEmailNotification() {
+      this.clearErrors();
+      this.loading.getEmailNotification = true;
+      const taskAction = "get-smarthost";
+
+      // register to task completion
+      this.$root.$once(
+        taskAction + "-completed",
+        this.getEmailNotificationCompleted
+      );
+
+      // register to task error
+      this.$root.$once(
+        taskAction + "-aborted",
+        this.getEmailNotificationAborted
+      );
+
+      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.getEmailNotification = this.getErrorMessage(err);
+        this.loading.getEmailNotification = false;
+        return;
+      }
+    },
+    getEmailNotificationCompleted(taskContext, taskResult) {
+      this.emailNotificationEnabled = taskResult.output.enabled;
+      this.getSupportSession();
+      this.loading.getEmailNotification = false;
+    },
+    getEmailNotificationAborted(taskContext, taskResult) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.getEmailNotification = this.$t("error.generic_error");
+      this.loading.getEmailNotification = false;
+    },
     async getClusterStatus() {
       this.error.getClusterStatus = "";
       this.loading.getClusterStatus = true;