ui: Replace and reposition old icons by SVG icons (#349)

web/app/package-lock.json

@@ -8,6 +8,8 @@
       "name": "gatus",
       "version": "4.0.0",
       "dependencies": {
+        "@headlessui/vue": "^1.7.3",
+        "@heroicons/vue": "^2.0.12",
         "core-js": "3.22.8",
         "vue": "3.2.37",
         "vue-router": "4.0.16"
@@ -1768,6 +1770,25 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@headlessui/vue": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz",
+      "integrity": "sha512-Is4iakKts9u9E0+jEZNzoJpBjwq2SamwEIoEl2RlyYSu6Zco536GsPXaQEfg/o7Eyc1GUUlcL+dJd4Rt7qyf7A==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/@heroicons/vue": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.12.tgz",
+      "integrity": "sha512-ypuQl/Wei7BoShO65AdRVikXDaSt6hJBRuKs2pVd/6HvxfEz18oXraH+J5G/QPIwObMEVhMb6nkOs9l3WZv/gA==",
+      "peerDependencies": {
+        "vue": ">= 3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -12804,6 +12825,18 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@headlessui/vue": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz",
+      "integrity": "sha512-Is4iakKts9u9E0+jEZNzoJpBjwq2SamwEIoEl2RlyYSu6Zco536GsPXaQEfg/o7Eyc1GUUlcL+dJd4Rt7qyf7A==",
+      "requires": {}
+    },
+    "@heroicons/vue": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.12.tgz",
+      "integrity": "sha512-ypuQl/Wei7BoShO65AdRVikXDaSt6hJBRuKs2pVd/6HvxfEz18oXraH+J5G/QPIwObMEVhMb6nkOs9l3WZv/gA==",
+      "requires": {}
+    },
     "@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",

web/app/package.json

@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.3",
+    "@heroicons/vue": "^2.0.12",
     "core-js": "3.22.8",
     "vue": "3.2.37",
     "vue-router": "4.0.16"

web/app/src/components/EndpointGroup.vue

@@ -2,13 +2,17 @@
   <div :class="endpoints.length === 0 ? 'mt-3' : 'mt-4'">
     <slot v-if="name !== 'undefined'">
       <div class="endpoint-group pt-2 border dark:bg-gray-800 dark:border-gray-500" @click="toggleGroup">
-        <h5 class='font-mono text-gray-400 text-xl font-medium pb-2 px-3 dark:text-gray-200 dark:hover:text-gray-500 dark:border-gray-500'>
-          <span v-if="healthy" class='text-green-600'>&#10003;</span>
-          <span v-else class='text-yellow-400'>~</span>
-          {{ name }}
-          <span class='float-right endpoint-group-arrow'>
+        <h5 class="font-mono text-gray-400 text-xl font-medium pb-2 px-3 dark:text-gray-200 dark:hover:text-gray-500 dark:border-gray-500">
+          <span class="endpoint-group-arrow mr-2">
             {{ collapsed ? '&#9660;' : '&#9650;' }}
           </span>
+          {{ name }}
+          <span v-if="healthy" class="float-right text-green-600 w-7 hover:scale-110" title="Operational">
+            <CheckCircleIcon />
+          </span>
+          <span v-else class="float-right text-yellow-500 text-sm w-7 hover:scale-110" title="Partial Outage">
+            <ExclamationCircleIcon />
+          </span>
         </h5>
       </div>
     </slot>
@@ -28,11 +32,14 @@
 
 <script>
 import Endpoint from './Endpoint.vue';
+import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/vue/20/solid'
 
 export default {
   name: 'EndpointGroup',
   components: {
-    Endpoint
+    Endpoint,
+    CheckCircleIcon,
+    ExclamationCircleIcon
   },
   props: {
     name: String,
@@ -44,9 +51,8 @@ export default {
     healthCheck() {
       if (this.endpoints) {
         for (let i in this.endpoints) {
-          for (let j in this.endpoints[i].results) {
-            if (!this.endpoints[i].results[j].success) {
-              // Set the endpoint group to unhealthy (only if it's currently healthy)
+          if (this.endpoints[i].results && this.endpoints[i].results.length > 0) {
+            if (!this.endpoints[i].results[this.endpoints[i].results.length-1].success) {
               if (this.healthy) {
                 this.healthy = false;
               }

web/app/src/components/Settings.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="settings" class="flex bg-gray-200 border-gray-300 rounded border shadow dark:text-gray-200 dark:bg-gray-800 dark:border-gray-500">
-    <div class="text-xs text-gray-600 rounded-xl py-1 px-2 dark:text-gray-200">
-      &#x21bb;
+    <div class="text-xs text-gray-600 rounded-xl py-1.5 px-1.5 dark:text-gray-200">
+      <ArrowPathIcon class="w-3"/>
     </div>
     <select class="text-center text-gray-500 text-xs dark:text-gray-200 dark:bg-gray-800 border-r border-l border-gray-300 dark:border-gray-500" id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
       <option value="10" :selected="refreshInterval === 10">10s</option>
@@ -12,16 +12,24 @@
       <option value="600" :selected="refreshInterval === 600">10m</option>
     </select>
     <button @click="toggleDarkMode" class="text-xs p-1">
-      <slot v-if="darkMode">☀</slot>
-      <slot v-else>🌙</slot>
+      <slot v-if="darkMode"><SunIcon class="w-4"/></slot>
+      <slot v-else><MoonIcon class="w-4 text-gray-500"/></slot>
     </button>
   </div>
 </template>
 
 
 <script>
+import { MoonIcon, SunIcon } from '@heroicons/vue/20/solid'
+import { ArrowPathIcon } from '@heroicons/vue/24/solid'
+
 export default {
   name: 'Settings',
+  components: {
+    ArrowPathIcon,
+    MoonIcon,
+    SunIcon
+  },
   props: {},
   methods: {
     setRefreshInterval(seconds) {

web/app/src/views/Details.vue

@@ -67,17 +67,14 @@
       <hr />
       <ul role="list" class="px-0 xl:px-24 divide-y divide-gray-200 dark:divide-gray-600">
         <li v-for="event in events" :key="event" class="p-3 my-4">
-          <h2 class="text-lg">
-            <img v-if="event.type === 'HEALTHY'" src="../assets/arrow-up-green.png" alt="Healthy"
-                 class="border border-green-600 rounded-full opacity-75 bg-green-100 mr-2 inline" width="26"/>
-            <img v-else-if="event.type === 'UNHEALTHY'" src="../assets/arrow-down-red.png" alt="Unhealthy"
-                 class="border border-red-500 rounded-full opacity-75 bg-red-100 mr-2 inline" width="26"/>
-            <img v-else-if="event.type === 'START'" src="../assets/arrow-right-black.png" alt="Start"
-                 class="border border-gray-500 rounded-full opacity-75 bg-gray-100 mr-2 inline" width="26"/>
+          <h2 class="text-sm sm:text-lg">
+            <ArrowUpCircleIcon v-if="event.type === 'HEALTHY'" class="w-8 inline mr-2 text-green-600" />
+            <ArrowDownCircleIcon v-else-if="event.type === 'UNHEALTHY'" class="w-8 inline mr-2 text-red-500" />
+            <PlayCircleIcon v-else-if="event.type === 'START'" class="w-8 inline mr-2 text-gray-400 dark:text-gray-100" />
             {{ event.fancyText }}
           </h2>
-          <div class="flex mt-1 text-sm text-gray-400">
-            <div class="flex-1 text-left pl-10">
+          <div class="flex mt-1 text-xs sm:text-sm text-gray-400">
+            <div class="flex-2 text-left pl-12">
               {{ prettifyTimestamp(event.timestamp) }}
             </div>
             <div class="flex-1 text-right">
@@ -98,6 +95,7 @@ import Endpoint from '@/components/Endpoint.vue';
 import {SERVER_URL} from "@/main.js";
 import {helper} from "@/mixins/helper.js";
 import Pagination from "@/components/Pagination";
+import { ArrowDownCircleIcon, ArrowUpCircleIcon, PlayCircleIcon } from '@heroicons/vue/20/solid'
 
 export default {
   name: 'Details',
@@ -105,6 +103,9 @@ export default {
     Pagination,
     Endpoint,
     Settings,
+    ArrowDownCircleIcon,
+    ArrowUpCircleIcon,
+    PlayCircleIcon
   },
   emits: ['showTooltip'],
   mixins: [helper],