• Stars
    star
    109
  • Rank 319,077 (Top 7 %)
  • Language Vue
  • License
    Apache License 2.0
  • Created almost 6 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Alerta Web UI 7.0

Alerta Web UI 7.0

Actions Status Slack chat

Version 7.0 of the Alerta web UI is a VueJS web app.

webui

Installation

To install the web console:

$ wget https://github.com/alerta/alerta-webui/releases/latest/download/alerta-webui.tar.gz
$ tar zxvf alerta-webui.tar.gz
$ cd dist
$ python3 -m http.server 8000

>> browse to http://localhost:8000

Configuration

Most configuration will come from the Alerta API server. The minimum, and most common, configuration is simply to tell the web UI where the API server is located.

Environment variables for some settings can be used at build time:

$ export VUE_APP_ALERTA_ENDPOINT=https://alerta-api.example.com
$ npm install
$ npm run build

or place a config.json configuration file in the dist directory for run time configuration:

{
    "endpoint": "https://alerta-api.example.com"
}

Any setting from the API server can be overridden if included in the local config.json file. For a full list of supported settings see the web UI config settings in the online docs.

As a special case, support for setting an OAuth Client ID using a build-time environment variable is possible but should not be be necessary for most deployments.

$ export VUE_APP_CLIENT_ID=0ffe5d26-6c66-4871-a6fa-593d9fa972b1

Quick Start

A docker container that is built using the most recent master branch is available for download from Docker Hub.

$ docker pull alerta/alerta-beta

It can also be built locally using the Dockerfile in this repository.

$ docker build -t alerta/alerta-beta .

To run, create a config.json file and mount the file into the container

$ echo '{"endpoint": "https://alerta-api.example.com"}' > config.json
$ docker run -v "$PWD/config.json:/usr/share/nginx/html/config.json" \
  -it -p 8000:80 --rm --name alerta-beta alerta/alerta-beta

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 downloading the release tarball and copying the dist directory to the a location that can be served via a web server or CDN.

See the VueJS platform guide for more information.

Troubleshooting

The two main issues with deployment in production involve CORS and HTML5 history mode.

Cross-origin Errors (CORS)

All modern browsers restrict access of a web app running at one domain to resources at a different origin (domain). This mechanism is known as CORS.

To ensure that the Alerta web app has permission to access the Alerta API at a different origin the web URL needs to be added to the CORS_ORIGINS settings for the API.

See API server configuration for more details.

HTML5 History Mode

The web app uses HTML5 history mode 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 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;
}

Development

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Tests

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your end-to-end tests

npm run test:e2e

Run your unit tests

npm run test:unit

License

Alerta monitoring system and console
Copyright 2019-2021 Nick Satterly

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

More Repositories

1

alerta

Alerta monitoring system
Python
2,357
star
2

prometheus-config

Prometheus config for Alerta
256
star
3

docker-alerta

Run alerta in a docker container
Ruby
154
star
4

alerta-contrib

Contributed integrations, plugins and custom webhooks
Python
119
star
5

zabbix-alerta

Forward Zabbix alerts to the alerta monitoring system
Python
98
star
6

angular-alerta-webui

Alerta Web UI 6.0 (DEPRECATED) - See latest version Web UI 7.0
JavaScript
68
star
7

python-alerta-client

Unified command-line tool and python SDK for alerta
Python
29
star
8

kibana-alerta

Log alerts to Elasticsearch and view them in Kibana
28
star
9

nagios-alerta

Forward nagios alerts to the alerta monitoring system
C
22
star
10

sensu-alerta-handler

Use Alerta as a dashboard for Sensu
Go
20
star
11

vagrant-try-alerta

Vagrant Boxes of alerta with other popular monitoring tools eg. Nagios, Riemann, Zabbix, Sensu, Kibana
Shell
17
star
12

riemann-alerta

Create alerts from riemann metrics
HTML
16
star
13

packer-templates

Packer templates used to build virtual machine images for alerta
Shell
7
star
14

alerta-cloudformation

AWS CloudFormation templates for an Alerta stack
Shell
7
star
15

alerta-chrome-extension

Chrome extension for Alerta showing alert counts
JavaScript
5
star
16

alerta-docs

Alerta documentation using "Read the Docs"
CSS
4
star
17

gcloud-api-alerta

Deploy Alerta API to Google Cloud
3
star
18

heroku-api-alerta

Demo Alerta API on Heroku
3
star
19

angular-alerta-explorer

Web-based demo explorer for Alerta API
HTML
1
star
20

alerta.github.io

Alerta landing page
HTML
1
star
21

alerta-dashboard

Version 2.0 (DEPRECATED) - not under active development.
HTML
1
star