From 20686e39b67bde995ae8ed2bce2423eb43f616ed Mon Sep 17 00:00:00 2001
From: BluemediaGER <oliver@traber-info.de>
Date: Sat, 15 Jan 2022 02:22:37 +0100
Subject: [PATCH] Initial build

---
 README.md                          |  23 +++
 package.json                       |   2 +
 public/favicon.ico                 | Bin 0 -> 15086 bytes
 public/index.html                  |   4 +-
 src/App.vue                        | 144 +++++++++++++++-
 src/assets/logo.png                | Bin 0 -> 3607 bytes
 src/components/Endpoint.vue        |  61 +++++++
 src/components/EndpointGroup.vue   |  41 +++++
 src/components/EndpointHistory.vue |  54 ++++++
 src/components/Footer.vue          |  25 +++
 src/components/Header.vue          |  33 ++++
 src/components/Loader.vue          | 256 +++++++++++++++++++++++++++++
 src/components/OverallStatus.vue   |  60 +++++++
 yarn.lock                          |  17 ++
 14 files changed, 714 insertions(+), 6 deletions(-)
 create mode 100644 public/favicon.ico
 create mode 100644 src/assets/logo.png
 create mode 100644 src/components/Endpoint.vue
 create mode 100644 src/components/EndpointGroup.vue
 create mode 100644 src/components/EndpointHistory.vue
 create mode 100644 src/components/Footer.vue
 create mode 100644 src/components/Header.vue
 create mode 100644 src/components/Loader.vue
 create mode 100644 src/components/OverallStatus.vue

diff --git a/README.md b/README.md
index ecc671c..10be58d 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,26 @@
 # fancy-gatus
 
 Fancy-Gatus is an alternative frontend for [Gatus](https://github.com/TwiN/gatus). The goal is to provide a simplified and modern status page based on data from a Gatus instance, which only displays the most important information in a way that is understandable for end users.
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/package.json b/package.json
index 15ecd5d..9f852b7 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.24.0",
+    "bootstrap-icons-vue": "^0.8.0",
     "core-js": "^3.6.5",
     "vue": "^3.0.0"
   },
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..0cff86ff531a9459887e28711f279f444735a49f
GIT binary patch
literal 15086
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
Lv_V_ms`vdLYtg4M

literal 0
HcmV?d00001

diff --git a/public/index.html b/public/index.html
index 3e5a139..3deb2ed 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,11 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Fancy Gatus</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/src/App.vue b/src/App.vue
index fd7fd3f..79248f1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,157 @@
 <template>
-  
+  <div class="main">
+    <div v-if="$data.loading" class="loader-wrapper">
+      <Loader />
+    </div>
+    <div v-if="!$data.loading" class="content-wrapper">
+      <Header :title="this.config.title" />
+      <OverallStatus class="overall-status" :failedEndpoints="failedEndpoints" />
+      <EndpointGroup class="endpoint-group" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
+    </div>
+    <Footer />
+  </div>
 </template>
 
 <script>
+import Loader from '@/components/Loader.vue';
+import Header from '@/components/Header.vue';
+import OverallStatus from '@/components/OverallStatus.vue';
+import EndpointGroup from '@/components/EndpointGroup.vue';
+import Footer from '@/components/Footer.vue';
+
+import axios from 'axios';
+
 export default {
   name: 'App',
   components: {
-    
+    Loader,
+    Header,
+    OverallStatus,
+    EndpointGroup,
+    Footer
+  },
+  data() {
+    return {
+      loading: true,
+      config: null,
+      apiData: null
+    };
+  },
+  computed: {
+    // Group endpoints by their group name
+    groups() {
+      return this.apiData.reduce(function(rv, x) {
+        (rv[x["group"]] = rv[x["group"]] || []).push(x);
+        return rv;
+      }, {});
+    },
+    // Get an array of all failed endpoints
+    failedEndpoints() {
+      return this.apiData.filter(endpoint => {
+        return !endpoint.results[endpoint.results.length - 1].success;
+      });
+    }
+  },
+  methods: {
+    // Get frontend config and trigger initial data fetch
+    getConfig() {
+      axios.get('/config.json')
+        .then(response => {
+          this.config = response.data;
+          // Set title if defined in config
+          if (this.config.title) {
+            document.title = this.config.title;
+          }
+          this.getApiData();
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    getApiData() {
+      // Set base URL for API calls if defined in config
+      if (this.config.gatusBaseUrl && axios.defaults.baseURL !== this.config.gatusBaseUrl) {
+        axios.defaults.baseURL = this.config.gatusBaseUrl;
+      }
+      axios.get('/api/v1/endpoints/statuses')
+        .then(response => {
+          // Remove hidden endpoints if defined in config
+          if (this.config.hiddenEndpoints) {
+            this.apiData = response.data.filter(endpoint => {
+              return !this.config.hiddenEndpoints.includes(endpoint.name);
+            });
+          } else {
+            this.apiData = response.data;
+          }
+          this.loading = false;
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  },
+  mounted() {
+    this.getConfig();
   }
 }
 </script>
 
+<style scoped>
+.main {
+  padding-left: 30px;
+  padding-right: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.loader-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+.content-wrapper {
+  min-width: 60%;
+  max-width: 90%;
+  margin-top: 1rem;
+  margin-bottom: 5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.overall-status {
+  margin-top: 2rem;
+}
+.endpoint-group {
+  margin-top: 2rem;
+}
+</style>
+
 <style>
+
+body,
+html {
+  padding: 0;
+  margin: 0;
+  --green: #00d560;
+  --orange: #ff9100;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  color: #2F3545;
+  padding: 0;
 }
-</style>
+.shadow-box {
+  box-shadow: 0 15px 70px rgb(0 0 0 / 10%);
+  padding: 10px;
+  border-radius: 10px;
+}
+.green {
+  color: var(--green);
+}
+.orange {
+  color: var(--orange);
+}
+</style>
\ No newline at end of file
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6e1828ad914238b480783a4bbc77e53ebdca554
GIT binary patch
literal 3607
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
a1)>PHoSd=<&DzUPfGN!CdX=F^;(q`NI6}Ap

literal 0
HcmV?d00001

diff --git a/src/components/Endpoint.vue b/src/components/Endpoint.vue
new file mode 100644
index 0000000..2fd1921
--- /dev/null
+++ b/src/components/Endpoint.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="endpoint">
+    <BIconCheckCircleFill class="green icon" v-if="isSuccessfull" />
+    <BIconExclamationCircleFill class="orange icon" v-if="!isSuccessfull" />
+    <span>{{ endpoint.name }}</span>
+    <span class="hostname" v-if="hostname">| {{ hostname }}</span>
+    <span class="spacer"></span>
+    <EndpointHistory :results="endpoint.results" />
+  </div>
+</template>
+
+<script>
+import { BIconExclamationCircleFill, BIconCheckCircleFill } from 'bootstrap-icons-vue';
+import EndpointHistory from '@/components/EndpointHistory.vue';
+
+export default {
+  name: 'Endpoint',
+  components: {
+    BIconExclamationCircleFill,
+    BIconCheckCircleFill,
+    EndpointHistory
+  },
+  props: {
+    endpoint: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    isSuccessfull() {
+      return this.endpoint.results[this.endpoint.results.length - 1].success;
+    },
+    hostname() {
+      return this.endpoint.results[0].hostname;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.endpoint {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+span {
+  margin: 0;
+  margin-left: 10px;
+  margin-top: 2px;
+}
+.hostname {
+  margin-left: 5px;
+  color: rgb(143, 143, 143);
+}
+.icon {
+  font-size: 20px;
+}
+.spacer {
+  flex: 1;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/EndpointGroup.vue b/src/components/EndpointGroup.vue
new file mode 100644
index 0000000..c06b19a
--- /dev/null
+++ b/src/components/EndpointGroup.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="endpoint-group">
+    <h3>{{ name }}</h3>
+    <div class="shadow-box list">
+      <Endpoint class="endpoint" v-for="endpoint in endpoints" :key="endpoint.name" :endpoint="endpoint" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Endpoint from '@/components/Endpoint.vue';
+
+export default {
+  name: 'EndpointGroup',
+  components: {
+    Endpoint
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    endpoints: {
+      type: Array,
+      required: true
+    }
+  },
+}
+</script>
+
+<style scoped>
+.list {
+  display: flex;
+  flex-direction: column;
+  justify-items: space-between;
+}
+.endpoint {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/EndpointHistory.vue b/src/components/EndpointHistory.vue
new file mode 100644
index 0000000..8b2e6c1
--- /dev/null
+++ b/src/components/EndpointHistory.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="history">
+    <div v-for="(result, index) in preparedResults" :key="index" :title="result.timestamp" :class="{blob: true, green: result.success === true, orange: result.success === false, grey: !result.timestamp}"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EndpointHistory',
+  props: {
+    results: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    preparedResults() {
+      let tmp = [...this.results];
+      while (tmp.length < 20) {
+        tmp.unshift({});
+      }
+      return tmp;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.history {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ width: 300px;
+}
+.blob {
+  width: 7px;
+  height: 20px;
+  margin: 0;
+  border-radius: 50rem;
+  --hover-scale: 1.5;
+}
+.blob:hover {
+  transform: scale(var(--hover-scale));
+}
+.green {
+  background-color: var(--green);
+}
+.orange {
+  background-color: var(--orange);
+}
+.grey {
+  background-color: grey;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..2221ba6
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,25 @@
+<template>
+  <footer>Powered by
+    <a target="_blank" href="https://github.com/TwiN/gatus">Gatus</a>
+    and
+    <a target="_blank" href="https://github.com/BluemediaGER/fancy-gatus">Fancy Gatus</a>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'Footer'
+}
+</script>
+
+<style scoped>
+footer {
+  margin-bottom: 1rem;
+  text-align: center;
+  font-size: 14px;
+}
+a {
+  color: #111;
+  text-decoration: underline;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..fb2f6e5
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="header">
+    <img src="@/assets/logo.png" alt="Logo" class="logo">
+    <h2>{{ this.title }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  props: {
+    title: {
+      type: String,
+      default: 'Infrastructure Status'
+    },
+  },
+}
+</script>
+
+<style scoped>
+.header {
+  display: flex;
+  align-items: center;
+}
+.logo {
+  width: 60px;
+  height: auto;
+}
+h2 {
+  margin: 0;
+  margin-left: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Loader.vue b/src/components/Loader.vue
new file mode 100644
index 0000000..0e34d1f
--- /dev/null
+++ b/src/components/Loader.vue
@@ -0,0 +1,256 @@
+<template>
+<div>
+  <div class="loader">
+    <svg viewBox="0 0 80 80">
+      <circle id="test" cx="40" cy="40" r="32"></circle>
+    </svg>
+  </div>
+
+  <div class="loader triangle">
+    <svg viewBox="0 0 86 80">
+      <polygon points="43 8 79 72 7 72"></polygon>
+    </svg>
+  </div>
+
+  <div class="loader">
+    <svg viewBox="0 0 80 80">
+      <rect x="8" y="8" width="64" height="64"></rect>
+    </svg>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "Loader"
+}
+</script>
+
+<style scoped>
+.loader {
+  --path: #2F3545;
+  --dot: #00d560;
+  --duration: 3s;
+  width: 44px;
+  height: 44px;
+  position: relative;
+}
+.loader:before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  position: absolute;
+  display: block;
+  background: var(--dot);
+  top: 37px;
+  left: 19px;
+  transform: translate(-18px, -18px);
+  -webkit-animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+          animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+.loader svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.loader svg rect,
+.loader svg polygon,
+.loader svg circle {
+  fill: none;
+  stroke: var(--path);
+  stroke-width: 10px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+.loader svg polygon {
+  stroke-dasharray: 145 76 145 76;
+  stroke-dashoffset: 0;
+  -webkit-animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+          animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+.loader svg rect {
+  stroke-dasharray: 192 64 192 64;
+  stroke-dashoffset: 0;
+  -webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+          animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+.loader svg circle {
+  stroke-dasharray: 150 50 150 50;
+  stroke-dashoffset: 75;
+  -webkit-animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+          animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+.loader.triangle {
+  width: 48px;
+}
+.loader.triangle:before {
+  left: 21px;
+  transform: translate(-10px, -18px);
+  -webkit-animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+          animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+@-webkit-keyframes pathTriangle {
+  33% {
+    stroke-dashoffset: 74;
+  }
+  66% {
+    stroke-dashoffset: 147;
+  }
+  100% {
+    stroke-dashoffset: 221;
+  }
+}
+
+@keyframes pathTriangle {
+  33% {
+    stroke-dashoffset: 74;
+  }
+  66% {
+    stroke-dashoffset: 147;
+  }
+  100% {
+    stroke-dashoffset: 221;
+  }
+}
+@-webkit-keyframes dotTriangle {
+  33% {
+    transform: translate(0, 0);
+  }
+  66% {
+    transform: translate(10px, -18px);
+  }
+  100% {
+    transform: translate(-10px, -18px);
+  }
+}
+@keyframes dotTriangle {
+  33% {
+    transform: translate(0, 0);
+  }
+  66% {
+    transform: translate(10px, -18px);
+  }
+  100% {
+    transform: translate(-10px, -18px);
+  }
+}
+@-webkit-keyframes pathRect {
+  25% {
+    stroke-dashoffset: 64;
+  }
+  50% {
+    stroke-dashoffset: 128;
+  }
+  75% {
+    stroke-dashoffset: 192;
+  }
+  100% {
+    stroke-dashoffset: 256;
+  }
+}
+@keyframes pathRect {
+  25% {
+    stroke-dashoffset: 64;
+  }
+  50% {
+    stroke-dashoffset: 128;
+  }
+  75% {
+    stroke-dashoffset: 192;
+  }
+  100% {
+    stroke-dashoffset: 256;
+  }
+}
+@-webkit-keyframes dotRect {
+  25% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(18px, -18px);
+  }
+  75% {
+    transform: translate(0, -36px);
+  }
+  100% {
+    transform: translate(-18px, -18px);
+  }
+}
+@keyframes dotRect {
+  25% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(18px, -18px);
+  }
+  75% {
+    transform: translate(0, -36px);
+  }
+  100% {
+    transform: translate(-18px, -18px);
+  }
+}
+@-webkit-keyframes pathCircle {
+  25% {
+    stroke-dashoffset: 125;
+  }
+  50% {
+    stroke-dashoffset: 175;
+  }
+  75% {
+    stroke-dashoffset: 225;
+  }
+  100% {
+    stroke-dashoffset: 275;
+  }
+}
+@keyframes pathCircle {
+  25% {
+    stroke-dashoffset: 125;
+  }
+  50% {
+    stroke-dashoffset: 175;
+  }
+  75% {
+    stroke-dashoffset: 225;
+  }
+  100% {
+    stroke-dashoffset: 275;
+  }
+}
+.loader {
+  display: inline-block;
+  margin: 0 16px;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+*:before, *:after {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  background: #F5F9FF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+body .dribbble {
+  position: fixed;
+  display: block;
+  right: 20px;
+  bottom: 20px;
+}
+body .dribbble img {
+  display: block;
+  height: 28px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/OverallStatus.vue b/src/components/OverallStatus.vue
new file mode 100644
index 0000000..5aad5c7
--- /dev/null
+++ b/src/components/OverallStatus.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="shadow-box">
+    <div class="status-wrapper" v-if="this.failedEndpoints.length === 0">
+      <BIconCheckCircleFill class="icon green" />
+      <span>All services healthy.</span>
+    </div>
+    <div class="status-wrapper" v-else>
+      <BIconExclamationCircleFill class="icon orange" />
+      <span>{{ failedEndpointCountText }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BIconExclamationCircleFill, BIconCheckCircleFill } from 'bootstrap-icons-vue';
+
+export default {
+  name: 'OverallStatus',
+  components: {
+    BIconExclamationCircleFill,
+    BIconCheckCircleFill
+  },
+  props: {
+    failedEndpoints: {
+      type: Array,
+      required: true
+    },
+  },
+  computed: {
+    failedEndpointCountText() {
+      if (this.failedEndpoints.length === 2) {
+        return 'Two services are experiencing issues.';
+      } else if (this.failedEndpoints.length === 3) {
+        return 'Three services are experiencing issues.';
+      } else if (this.failedEndpoints.length > 3) {
+        return 'Multiple services are experiencing issues.';
+      } else {
+        return 'One service is experiencing issues.';
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+.status-wrapper {
+  display: flex;
+  align-items: center;
+  font-size: 1.3rem;
+  margin-left: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.icon {
+  font-size: 30px;
+}
+span {
+  margin-left: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index e1fa90e..e923897 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1941,6 +1941,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+  dependencies:
+    follow-redirects "^1.14.4"
+
 babel-eslint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -2114,6 +2121,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap-icons-vue@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/bootstrap-icons-vue/-/bootstrap-icons-vue-0.8.0.tgz#922dfc368e62c85fe9cadad4f3568ce4c2b7bdba"
+  integrity sha512-bFBpTGNN5RtUpSH7zTz3WkZs2UZA7WXSmkwAKsrA7qddjbIQrvoGsu/yNJiAl14eJgZ+rTqmjqSB+0gRlNZEfA==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -4026,6 +4038,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.6.tgz#8cfb281bbc035b3c067d6cd975b0f6ade6e855cd"
   integrity sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==
 
+follow-redirects@^1.14.4:
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
+  integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"