Start working on migrating frontend to Vue 3

2021-01-24 04:50:58 -05:00
parent f1aa5191bf
commit dc6cb8fc1d
19 changed files with 28529 additions and 0 deletions
--- a/web/app/src/components/Service.vue
+++ b/web/app/src/components/Service.vue
@ -0,0 +1,128 @@
+<template>
+  <div class='container px-3 py-3 border-l border-r border-t rounded-none'>
+    <div class='flex flex-wrap mb-2'>
+      <div class='w-3/4'>
+        <span class='font-bold'>{{ data.name }}</span> <span class='text-gray-500 font-light'>- {{ data.results[data.results.length - 1].hostname }}</span>
+      </div>
+      <div class='w-1/4 text-right'>
+        <span class='font-light status-min-max-ms'>
+          {{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + "-" + maxResponseTime)) }}ms
+        </span>
+      </div>
+    </div>
+    <div>
+      <div class='status-over-time flex flex-row'>
+        <slot v-for="filler in 20 - data.results.length" :key="filler">
+          <span class="status rounded border border-dashed"> </span>
+        </slot>
+        <slot v-for="result in data.results" :key="result">
+          <span v-if="result.success" class="status rounded bg-success">&#10003;</span>
+          <span v-else class="status rounded bg-red-600">X</span>
+        </slot>
+      </div>
+    </div>
+    <div class='flex flex-wrap status-time-ago'>
+      <div class='w-1/2'>
+        {{ generatePrettyTimeAgo(data.results[0].timestamp) }}
+      </div>
+      <div class='w-1/2 text-right'>
+        {{ generatePrettyTimeAgo(data.results[data.results.length - 1].timestamp) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: 'Service',
+  props: {
+    data: Object
+  },
+  methods: {
+    updateMinAndMaxResponseTimes() {
+      let minResponseTime = null;
+      let maxResponseTime = null;
+      for (let i in this.data.results) {
+        const responseTime = parseInt(this.data.results[i].duration/1000000);
+        if (minResponseTime == null || minResponseTime > responseTime) {
+          minResponseTime = responseTime;
+        }
+        if (maxResponseTime == null || maxResponseTime < responseTime) {
+          maxResponseTime = responseTime;
+        }
+      }
+      if (this.minResponseTime !== minResponseTime) {
+        this.minResponseTime = minResponseTime;
+      }
+      if (this.maxResponseTime !== maxResponseTime) {
+        this.maxResponseTime = maxResponseTime;
+      }
+    },
+    generatePrettyTimeAgo(t) {
+      let differenceInMs = new Date().getTime() - new Date(t).getTime();
+      if (differenceInMs > 3600000) {
+        let hours = (differenceInMs/3600000).toFixed(0);
+        return hours + " hour" + (hours !== "1" ? "s" : "") + " ago";
+      }
+      if (differenceInMs > 60000) {
+        let minutes = (differenceInMs/60000).toFixed(0);
+        return minutes + " minute" + (minutes !== "1" ? "s" : "") + " ago";
+      }
+      return (differenceInMs/1000).toFixed(0) + " seconds ago";
+    }
+  },
+  watch: {
+    data: function () {
+      this.updateMinAndMaxResponseTimes();
+    }
+  },
+  created() {
+    this.updateMinAndMaxResponseTimes()
+  },
+  data() {
+    return {
+      minResponseTime: 0,
+      maxResponseTime: 0
+    }
+  }
+}
+</script>
+
+
+<style>
+.status {
+  cursor: pointer;
+  transition: all 500ms ease-in-out;
+  overflow-x: hidden;
+  color: white;
+  width: 5%;
+  font-size: 75%;
+  font-weight: 700;
+  text-align: center;
+}
+
+.status:hover {
+  opacity: 0.7;
+  transition: opacity 100ms ease-in-out;
+  color: black;
+}
+
+.status-over-time {
+  overflow: auto;
+}
+
+.status-over-time > span:not(:first-child) {
+  margin-left: 2px;
+}
+
+.status-time-ago {
+  color: #6a737d;
+  opacity: 0.5;
+  margin-top: 5px;
+}
+
+.status-min-max-ms {
+  overflow-x: hidden;
+}
+</style>