alertmanager/ui/app/CONTRIBUTING.md
stuart nelson 2cf38e4c2e Fix external web url (#836)
Infer path from Navigation.Location

Build uses template, local dev uses elm-reactor

Remove unneeded local dev go server

Add script.js make target

Compiles and uglifies script.js

Before:
~570kb

After:
~170kb

Bootstrap loading state

Add trailing slash via JS & add routePrefix console param

Add Javascript script tag to `index.html` which adds a trailing slash to
the url pathname if none is present. This is done to ensure assets like
`script.js` are loaded properly.

Example without patch:
If the pathname is "mxinden.com/alertmanager" the browser will try to
download the `script.js` asset from "mxinden.com/script.js". This
request will fail.

Example with patch:
If the pathname is "mxinden.com/alertmanager", Javascript redirects the
browser to "mxinden.com/alertmanager/" and then the `script.js` asset
will be downloaded from "mxinden.com/alertmanager/script.js". This
request will succeed.

Add `-web.route-prefix` as a console parameter. This configures a
Prefix for the internal routes of web endpoints. Defaults to path of
-web.external-url like in *Prometheus*.

Trim slashes off of route prefix and add one slash at the beginning.
Make sure route prefix is not empty or just a slash before prefixing
router.
2017-06-07 22:38:39 +02:00

2.1 KiB

Contributing

This document describes how to:

  • Set up your dev environment
  • Become familiar with Elm
  • Develop against AlertManager

Dev Environment Setup

All submitted elm code must be formatted with elm-format. Install and execute it however works best for you. We recommend having formatting the file on save, similar to how many developers use gofmt.

If you prefer, there's a make target available to format all elm source files:

# make format

Once you've installed Elm, install the dependencies listed in elm-package.json:

# elm package install -y

Elm Resources

  • The Official Elm Guide is a great place to start. Going through the entire guide takes about an hour, and is a good primer to get involved in our codebase. Once you've worked through it, you should be able to start writing your feature with the help of the compiler.
  • Check the syntax reference when you need a reminder of how the language works.
  • Read up on how to write elm code.
  • Watch videos from the latest elm-conf
  • Learn how to use the debugger! Elm comes packaged with an excellent debugger. We've found this tool to be invaluable in understanding how the app is working as we're debugging behavior.

Local development workflow

At the top level of this repo, follow the HA AlertManager instructions. Compile the binary, then run with goreman. Add example alerts with the file provided in the HA example folder.

# cd ui/app
# elm-reactor -p <port>

Your app should be available at http://localhost:<port>. Navigate to src/Main.elm. Any changes to the file system are detected automatically, triggering a recompile of the project.