Add documentation

This commit is contained in:
BluemediaGER 2022-01-16 01:26:22 +01:00
parent 50f3eff79d
commit 5d00c27707
No known key found for this signature in database
GPG key ID: C7BA47275B086E2C
4 changed files with 88 additions and 12 deletions

View file

@ -1,26 +1,74 @@
# fancy-gatus
# 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.
Fancy Gatus is an alternative frontend for the monitoring tool [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
```
You can see it in action here: https://status.bluemedia.dev
### Compiles and hot-reloads for development
![Demo screenshot](docs/demo-screenshot.png)
## Table of Contents
- [Configuration](#configuration)
- [Deployment](#deployment)
- [Customizing the logo](#customizing-the-logo)
- [Building Fancy Gatus](#building-fancy-gatus)
- [Development](#development)
## Configuration
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. | `[]` |
## Deployment
Fancy Gatus is intended to be delivered directly from a web server (e.g. Nginx). The installation is therefore simple.
Just download the latest ZIP file from the release page and unpack it into the web root of your server. If you want to make further adjustments to the frontend, you can also create the configuration file in the web root. Refer to the [Configuration](#configuration) section for more information.
Make sure that the Gatus API endpoint `/api/v1/endpoints/statuses` is available relative to the frontend if you have not configured a different base URL. An example configuration for Nginx that makes this possible can be found [here](docs/example-nginx.conf).
### Customizing the logo
If you want to use your own logo, you can simply replace the file in the `img` folder. The image should be square, have a minimum size of 250x250 pixels and preferably a transparent background.
You can also easily replace the favicon. You can find various converters for the `ico` format online.
## Building Fancy Gatus
You can also build the project yourself instead of using one of the pre built releases. To do this, you need the following requirements:
- `NodeJS >= v14.16.0`
- `Yarn >= v1.22.17`
If you have the necessary requirements, you can use `yarn install` to install the dependencies and `yarn build` to run the build process. The finished data for your web server can be found in the `dist` folder.
## Development
Fancy Gatus uses Vue.js 3 as its frontend framework. You can therefore use all common Vue.js commands:
Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
Lints and fixes files
```
yarn lint
```
### Contribution Guidelines
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
- Use 2 spaces indent and camelCase
- Comment code (in english), if it has a certain complexity
- Stick to the structure
- Test your changes
- Update the documentation

BIN
docs/demo-screenshot.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

28
docs/example-nginx.conf Normal file
View file

@ -0,0 +1,28 @@
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name status.example.com;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log warn;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/cert.key;
# Make Gatus API available relative to the frontend
location /api/v1/endpoints/statuses {
proxy_pass http://gatus:8080/api/v1/endpoints/statuses;
proxy_set_header Host $host;
proxy_redirect http:// https://;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# Frontend
root /var/www/html;
index index.html index.htm;
location / {
try_files $uri $uri/ =404;
}
}

View file

@ -5,7 +5,7 @@
<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>Fancy Gatus</title>
<title>Infrastructure Status</title>
</head>
<body>
<noscript>