traefik/webui

Træfɪk Web UI

Access to Træfɪk Web UI, ex: http://localhost:8080

Interface

Træfɪk Web UI provide 2 types of informations:

• Providers with their backends and frontends information.
• Health of the web server.

How to build (for backends developer)

Use the make file :

make build           # Generate Docker image
make generate-webui  # Generate static contents in `traefik/static/` folder.

How to build (only for frontends developer)

• prerequisite: Node

• Go to the directory webui

• To install dependencies, execute the following commands:

  • npm install
  • bower install

• Build static Web UI, execute the following command:

  • gulp

• Static contents are build in the directory static

Don't change manually the files in the directory static

• The build allow to:
  • optimize all JavaScript
  • optimize all CSS
  • add vendor prefixes to CSS (cross-bowser support)
  • add a hash in the file names to prevent browser cache problems
  • all images will be optimized at build

How to edit (only for frontends developer)

Don't change manually the files in the directory static

• Go to the directory webui

• Edit files in webui/src

• Run in development mode :

  • gulp serve

• Træfɪk API connections are defined in:

  • webui/src/app/core/health.resource.js
  • webui/src/app/core/providers.resource.js

• The pages contents are in the directory webui/src/app/sections.

Libraries

• Node
• Generator Gulp-Angular
• AngularJS
• UI Router
  • UI Router - Documentation
• Bootstrap
• Angular Bootstrap
• D3
  • D3 - Documentation
• NVD3
• Angular nvD3