mirror of
https://github.com/BluemediaDev/fancy-gatus.git
synced 2025-04-12 05:53:56 +02:00
Compare commits
5 commits
| Author | SHA1 | Date | |
|---|---|---|---|
8809daca7e
|
|||
| a1c06f84ae | |||
|
27f679146e | ||
|
3ac190e747
|
|||
|
2aef4fb9bb
|
6 changed files with 1750 additions and 1555 deletions
21
README.md
21
README.md
|
|
@ -10,13 +10,20 @@ You can see it in action here: https://status.bluemedia.dev
|
|||
|
||||
The frontend tries to retrieve a configuration file named `config.json` from the webroot during page load. If the configuration is loaded successfully, it will be used to make advanced adjustments to the frontend. The possible options are listed below.
|
||||
|
||||
| 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. | `""` |
|
||||
| `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. | `[]` |
|
||||
| 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` |
|
||||
| `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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
21
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@ export default {
|
|||
while (tmp.length < 20) {
|
||||
tmp.unshift({});
|
||||
}
|
||||
for (let t of tmp) {
|
||||
t.timestamp = new Date(t.timestamp).toLocaleString();
|
||||
}
|
||||
return tmp;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
57
src/components/Notice.vue
Normal file
57
src/components/Notice.vue
Normal 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>
|
||||
Loading…
Add table
Reference in a new issue