0
0
Fork 0
mirror of https://github.com/alerta/alerta-webui.git synced 2025-03-16 21:43:29 +00:00

Add html5 history mode info and new screenshot

This commit is contained in:
Nick Satterly 2019-08-13 21:27:35 +02:00
parent 497b310f63
commit 3a0e361a67
3 changed files with 42 additions and 10 deletions

View file

@ -1,11 +1,11 @@
beta.alerta.io
==============
Alerta Web UI 7.0
=================
Version 7.0 of the Alerta web UI is a [VueJS](https://vuejs.org/) web app.
[![Gitter chat](https://badges.gitter.im/alerta/chat.png)](https://gitter.im/alerta/chat)
This is the repository for the next major release of the Alerta web console.
![webui](/docs/images/alerta-webui-v7-beta1.png?raw=true&v=1)
![webui](/docs/images/alerta-webui-v7.png?raw=true&v=1)
Installation
-------------
@ -50,12 +50,12 @@ necessary for most deployments.
$ export VUE_APP_CLIENT_ID=0ffe5d26-6c66-4871-a6fa-593d9fa972b1
Deployment
----------
Quick Start
-----------
During the beta phase a docker container is available to download and
test the new web UI. It can be built locally using the `Dockerfile` in
this repository
A docker container that is built using the most recent master branch is
available to download and trial the latest version of the web UI. It
can be built locally using the `Dockerfile` in this repository.
$ docker build -t alerta/alerta-beta .
@ -73,6 +73,38 @@ Note: Update the `CORS_ORIGINS` setting in the Alerta API server config
to include the URL that the beta web console is hosted at otherwise
the browser will throw "blocked by CORS policy" errors and not work.
Deployment
----------
Since this is a static web app then a production deployment of Alerta web UI
is simply a matter of copying the `dist` directory to the a location that can
be served via a web server or CDN. See the [VueJS platform guide][2] for more
information.
[2]: https://cli.vuejs.org/guide/deployment.html#general-guidelines
Troubleshooting
---------------
### HTML5 History Mode
The web app uses [HTML5 history mode][3] so you must ensure to configure
the web server or CDN correctly otherwise users will get `404` errors when
accessing deep links such as `/alert/:id` directly in their browser.
The fix is to provide a [catch-all fallback route][4] so that any URL that
doesn't match a static asset will be handled by the web app and redirected.
**Example using nginx**
```
location / {
try_files $uri $uri/ /index.html;
}
```
[3]: https://router.vuejs.org/guide/essentials/history-mode.html
[4]: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
Development
-----------

BIN
alerta-webui-v7.png Normal file

Binary file not shown.

After

(image error) Size: 825 KiB

Binary file not shown.

After

(image error) Size: 889 KiB