Show backup target status

dashboard/src/views/BackupTargetsView.vue

@@ -7,6 +7,7 @@ const t = i18n.t;
 import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, ButtonGroup, TableView, InputDialog } from '@cloudron/pankow';
 import Section from  '../components/Section.vue';
+import StateLED from  '../components/StateLED.vue';
 import BackupScheduleDialog from  '../components/BackupScheduleDialog.vue';
 import BackupTargetDialog from  '../components/BackupTargetDialog.vue';
 import BackupList from  '../components/BackupList.vue';
@@ -28,6 +29,9 @@ const columns = {
     width: '40px',
     sort: true
   },
+  status: {
+    width: '40px',
+  },
   provider: {
     label: 'Provider',
     sort: true,
@@ -96,6 +100,21 @@ async function refresh() {
   const [error, result] = await backupTargetsModel.list();
   if (error) return console.error(error);
 
+  for (const target of result) {
+    target.status = { busy: true, state: '', message: '' };
+  }
+
+  for (const target of result) {
+    const [error, status] = await backupTargetsModel.status(target.id);
+    if (error) {
+      console.error(error);
+      continue;
+    }
+
+    target.status.state = status.state === 'active' ? 'success' : 'danger';
+    target.status.busy = false;
+  }
+
   targets.value = result;
 }
 
@@ -128,6 +147,12 @@ onMounted(async () => {
           <i class="fa-solid fa-crown" v-if="target.primary" v-tooltip="'Primary'"></i>
         </template>
 
+        <template #status="target">
+          <div style="text-align: center;" :title="target.status.message">
+            <StateLED :busy="target.status.busy" :state="target.status.state"/>
+          </div>
+        </template>
+
         <template #provider="target">
           {{ target.provider }}
         </template>