Add possibility to publish a public notice

This commit is contained in:
Oliver Traber 2022-01-24 22:54:26 +01:00
parent 2aef4fb9bb
commit 3ac190e747
Signed by: Bluemedia
GPG key ID: C7BA47275B086E2C
4 changed files with 82 additions and 6 deletions

View file

@ -18,6 +18,12 @@ The frontend tries to retrieve a configuration file named `config.json` from the
| `hiddenEndpoints` | Array containing names of endpoints that should be hidden. These endpoints 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. | `[]` | | `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` | | `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 ## Deployment

View file

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

View file

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

57
src/components/Notice.vue Normal file
View file

@ -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>