Add possibility to publish a public notice

README.md

@@ -13,11 +13,17 @@ The frontend tries to retrieve a configuration file named `config.json` from the
 | Parameter                | Description                                                                                                                                                                                                                                                              | Default                 |
 |:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------|
 | `title`                  | Title of the page. Both in the tab and next to the logo.                                                                                                                                                                                                                 | `Infrastructure Status` |
-| `gatusBaseUrl`           | Alternative base URL (without trailing slash) of the Gatus instance, if the API is not available relative to the frontend.                                                                                                                                               | `none`                    |
+| `gatusBaseUrl`           | Alternative base URL (without trailing slash) of the Gatus instance, if the API is not available relative to the frontend.                                                                                                                                               | `none`                  |
 | `hiddenGroups`           | Array containing names of groups that should be hidden. These groups are still visible in the API response!                                                                                                                                                              | `[]`                    |
 | `hiddenEndpoints`        | Array containing names of endpoints that should be hidden. These endpoints are still visible in the API response!                                                                                                                                                        | `[]`                    |
 | `groupOrder`             | Array containing names of groups. The groups are sorted in the frontend according to the order in the array (different from alphabetical sorting by default). If groups are not included in the array, they will be added alphabetically sorted below the sorted groups. | `[]`                    |
 | `defaultRefreshInterval` | Interval in seconds after which the API data is refreshed in the background by default. Can be changed by the user by selecting a value in the lower left corner of the page. Possible values: `10`, `30`, `60`, `120`, `300`, `600`                                     | `60`                    |
+| `notice`                 | Optional configuration for a notice on the page. It can be used to provide information about a current problem, for example.                                                                                                                                             | `{}`                    |
+| `notice.type`            | Type of the notice. This determines the background color of the card. Possible values: `info`, `primary`, `warning`, `danger`, `""` (empty / white)                                                                                                                      | `""`                    |
+| `notice.title`           | Title of the notice card.                                                                                                                                                                                                                                                | `""`                    |
+| `notice.content`         | Content text of the notice card.                                                                                                                                                                                                                                         | `""`                    |
+| `notice.createdAt`       | Date and time the notice was created at. For example, use the format `yyyy-MM-dd hh:mm`                                                                                                                                                                                  | `""`                    |
+| `notice.updatedAt`       | Date and time the notice was last updated at. For example, use the format `yyyy-MM-dd hh:mm`                                                                                                                                                                             | `""`                    |
 
 ## Deployment
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancy-gatus",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/App.vue

@@ -5,6 +5,7 @@
     </div>
     <div v-if="!$data.loading" class="flex flex-column jc-center content-wrapper">
       <Header :title="this.config.title" />
+      <Notice class="mtop-2" v-if="this.config.notice" :notice="this.config.notice" />
       <OverallStatus class="mtop-2" :failedEndpoints="failedEndpoints" />
       <EndpointGroup class="mtop-2" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
     </div>
@@ -18,6 +19,7 @@
 <script>
 import Loader from '@/components/Loader.vue';
 import Header from '@/components/Header.vue';
+import Notice from '@/components/Notice.vue';
 import OverallStatus from '@/components/OverallStatus.vue';
 import EndpointGroup from '@/components/EndpointGroup.vue';
 import RefreshSettings from '@/components/RefreshSettings.vue';
@@ -30,6 +32,7 @@ export default {
   components: {
     Loader,
     Header,
+    Notice,
     OverallStatus,
     EndpointGroup,
     RefreshSettings,
@@ -150,7 +153,20 @@ export default {
   margin-top: 1rem;
   margin-bottom: 3rem;
 }
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1200px) {
+  .content-wrapper {
+    width: 80%;
+  }
+}
+@media screen and (max-width: 820px) {
+  .content-wrapper {
+    width: 90%;
+  }
+  .refresh-settings {
+    display: none;
+  }
+}
+@media screen and (max-width: 767px) {
   .main {
     padding-left: 15px;
     padding-right: 15px;
@@ -158,9 +174,6 @@ export default {
   .content-wrapper {
     width: 100%;
   }
-  .refresh-settings {
-    display: none;
-  }
 }
 </style>
 

src/components/Notice.vue

@@ -0,0 +1,57 @@
+<template>
+    <div :class="{
+        notice: true, 'shadow-box': true,
+        primary: this.notice.type === 'primary',
+        warning: this.notice.type === 'warning',
+        danger: this.notice.type === 'danger',
+        info: this.notice.type === 'info'
+    }">
+        <h4>{{ this.notice.title }}</h4>
+        <p>{{ this.notice.content }}</p>
+        <div class="flex flex-column time">
+            Created at: {{ this.notice.createdAt }}
+            <br>
+            <span v-if="this.notice.updatedAt">Last updated: {{ this.notice.updatedAt }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Notice',
+    props: {
+        notice: {
+            type: Object,
+            required: true
+        }
+    },
+}
+</script>
+
+<style scoped>
+.notice {
+    padding: 1.35rem;
+}
+.notice > h4 {
+    margin: 0;
+    font-size: calc(1rem + 0.3vw);
+}
+.time {
+    font-size: calc(0.7rem + 0.1vw);
+}
+.time > span {
+    margin-top: 0.2rem;
+}
+.primary {
+    background-color: #5cdd8b;
+}
+.warning {
+    background-color: #ffc107;
+}
+.danger {
+    background-color: #ff5252;
+}
+.info {
+    background-color: #5ae4ff;
+}
+</style>