pub/fancy-gatus
pub/fancy-gatus
1
0
Fork 0
Code Packages Activity Actions

Add possibility to publish a public notice

Browse source
This commit is contained in:
BluemediaGER 2022-01-24 22:54:26 +01:00
parent 2aef4fb9bb
commit 3ac190e747
No known key found for this signature in database
GPG key ID: C7BA47275B086E2C
4 changed files with 82 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

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

2
package.json
View file

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

21
src/App.vue
View file

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

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>