Show platform status in headerbar

dashboard/src/components/Headerbar.vue

@@ -4,12 +4,13 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { onMounted, ref, useTemplateRef, inject } from 'vue';
+import { onMounted, onUnmounted, ref, useTemplateRef, inject } from 'vue';
 import { marked } from 'marked';
 import { eachLimit } from 'async';
-import { Button, Popover, Icon } from 'pankow';
+import { Button, Popover, Icon, Spinner } from 'pankow';
 import { prettyDate, prettyLongDate } from 'pankow/utils';
 import NotificationsModel from '../models/NotificationsModel.js';
+import ServicesModel from '../models/ServicesModel.js';
 
 const props = defineProps(['config', 'profile', 'subscription']);
 
@@ -20,6 +21,8 @@ function onOpenHelp(popover, event, elem) {
   popover.open(event, elem);
 }
 
+const servicesModel = ServicesModel.create();
+
 const notificationModel = NotificationsModel.create();
 const notificationButton = useTemplateRef('notificationButton');
 const notificationPopover = useTemplateRef('notificationPopover');
@@ -70,16 +73,37 @@ function onSubscriptionRequired() {
   subscriptionRequiredDialog.value.open();
 }
 
-onMounted(async () => {
-  if (props.profile.isAtLeastAdmin) await refresh();
+const platformStatus = ref({
+  message: '',
+  isReady: true,
 });
 
+let platformTimeoutId = 0;
+async function trackPlatformStatus() {
+  const [error, result] = await servicesModel.getPlatformStatus();
+  if (error) return console.error('Failed to get platform status.', error);
+
+  platformStatus.value = result;
+
+  if (!result.isReady) platformTimeoutId = setTimeout(trackPlatformStatus, 5000);
+}
+
 const description = marked.parse(t('support.help.description', {
   docsLink: 'https://docs.cloudron.io/?support_view',
   packagingLink: 'https://docs.cloudron.io/packaging/tutorial/?support_view',
   forumLink: 'https://forum.cloudron.io/'
 }));
 
+onMounted(async () => {
+  if (props.profile.isAtLeastAdmin) await refresh();
+
+  await trackPlatformStatus();
+});
+
+onUnmounted(() => {
+  clearTimeout(platformTimeoutId);
+});
+
 </script>
 
 <template>
@@ -123,6 +147,10 @@ const description = marked.parse(t('support.help.description', {
 
     <div style="flex-grow: 1;"></div>
 
+    <div v-if="!platformStatus.isReady" class="headerbar-action">
+      <Spinner style="margin-right: 10px"/> {{ platformStatus.message }}
+    </div>
+
     <!-- Warnings if subscription is expired or unpaid -->
     <div v-if="profile.isAtLeastOwner && subscription.plan.id === 'expired'" class="headerbar-action subscription-expired" style="gap: 6px" @click="onSubscriptionRequired()">Subscription Expired</div>