Start working on migrating frontend to Vue 3

web/app/src/components/ServiceGroup.vue

@@ -0,0 +1,80 @@
+<template>
+  <div :class="services.length === 0 ? 'mt-3' : 'mt-4'">
+    <slot v-if="name !== 'undefined'">
+      <div class="service-group container pt-2 border">
+        <h5 class='text-monospace text-gray-400 text-xl font-medium pb-2 px-3'>
+          <span v-if="healthy" class='text-green-600'>&#10003;</span>
+          <span v-else class='text-yellow-400'>~</span>
+          {{ name }}
+        </h5>
+      </div>
+    </slot>
+    <div :class="name === 'undefined' ? '' : 'service-group-content'">
+      <slot v-for="service in services" :key="service">
+        <Service :data="service"/>
+      </slot>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import Service from './Service.vue';
+
+export default {
+  name: 'ServiceGroup',
+  components: {
+    Service
+  },
+  props: {
+    name: String,
+    services: Array
+  },
+  methods: {
+    healthCheck() {
+      if (this.services) {
+        for (let i in this.services) {
+          for (let j in this.services[i].results) {
+            if (!this.services[i].results[j].success) {
+              // Set the service group to unhealthy (only if it's currently healthy)
+              if (this.healthy) {
+                this.healthy = false;
+              }
+              return;
+            }
+          }
+        }
+      }
+      // Set the service group to healthy (only if it's currently unhealthy)
+      if (!this.healthy) {
+        this.healthy = true;
+      }
+    }
+  },
+  watch: {
+    services: function () {
+      this.healthCheck();
+    }
+  },
+  created() {
+    this.healthCheck();
+  },
+  data() {
+    return {
+      healthy: true
+    }
+  }
+}
+</script>
+
+
+<style>
+.service-group {
+  cursor: pointer;
+  user-select: none;
+}
+
+.service-group h5:hover {
+  color: #1b1e21 !important;
+}
+</style>