1 files changed, 63 insertions, 0 deletions
diff --git a/src/components/Status.vue b/src/components/Status.vue
new file mode 100644
index 0000000..92ed8a6
--- /dev/null
+++ b/src/components/Status.vue
@@ -0,0 +1,63 @@
+<template>
+    <span class="badge rounded-pill" :class=" 'bg-' + color ">{{ text }}</span>
+</template>
+
+<script>
+export default {
+    props: {
+        /** Current status of monitor */
+        status: {
+            type: Number,
+            default: 0,
+        }
+    },
+
+    computed: {
+        color() {
+            if (this.status === 0) {
+                return "danger";
+            }
+
+            if (this.status === 1) {
+                return "primary";
+            }
+
+            if (this.status === 2) {
+                return "warning";
+            }
+
+            if (this.status === 3) {
+                return "maintenance";
+            }
+
+            return "secondary";
+        },
+
+        text() {
+            if (this.status === 0) {
+                return this.$t("Down");
+            }
+
+            if (this.status === 1) {
+                return this.$t("Up");
+            }
+
+            if (this.status === 2) {
+                return this.$t("Pending");
+            }
+
+            if (this.status === 3) {
+                return this.$t("statusMaintenance");
+            }
+
+            return this.$t("Unknown");
+        },
+    },
+};
+</script>
+
+<style scoped>
+    span {
+        min-width: 64px;
+    }
+</style>