2017-03-31 04:29:03 +00:00
|
|
|
# Træfik Web UI
|
2015-10-07 11:54:00 +00:00
|
|
|
|
2017-03-31 04:29:03 +00:00
|
|
|
Access to Træfik Web UI, ex: http://localhost:8080
|
2015-10-07 11:54:00 +00:00
|
|
|
|
|
|
|
|
## Interface
|
|
|
|
|
|
2017-03-31 04:29:03 +00:00
|
|
|
Træfik Web UI provide 2 types of informations:
|
2015-10-07 11:54:00 +00:00
|
|
|
- Providers with their backends and frontends information.
|
|
|
|
|
- Health of the web server.
|
|
|
|
|
|
2016-01-20 21:45:51 +00:00
|
|
|
## How to build (for backends developer)
|
|
|
|
|
|
|
|
|
|
Use the make file :
|
|
|
|
|
|
|
|
|
|
```shell
|
|
|
|
|
make build # Generate Docker image
|
|
|
|
|
make generate-webui # Generate static contents in `traefik/static/` folder.
|
|
|
|
|
```
|
2015-10-07 11:54:00 +00:00
|
|
|
|
2015-12-22 22:33:12 +00:00
|
|
|
## How to build (only for frontends developer)
|
2015-10-07 11:54:00 +00:00
|
|
|
|
2016-11-16 02:25:06 +00:00
|
|
|
- prerequisite: [Node 4+](https://nodejs.org) [yarn](https://yarnpkg.com/)
|
2015-10-07 11:54:00 +00:00
|
|
|
|
2017-05-05 16:13:30 +00:00
|
|
|
Note: In case of conflict with the Apache Hadoop Yarn Command Line Interface, use the `yarnpkg`
|
|
|
|
|
alias.
|
|
|
|
|
|
2015-12-22 22:33:12 +00:00
|
|
|
- Go to the directory `webui`
|
2015-12-22 00:02:59 +00:00
|
|
|
|
2015-12-22 22:33:12 +00:00
|
|
|
- To install dependencies, execute the following commands:
|
2016-11-16 02:25:06 +00:00
|
|
|
- `yarn install`
|
2015-12-22 00:02:59 +00:00
|
|
|
|
2015-12-22 22:33:12 +00:00
|
|
|
- Build static Web UI, execute the following command:
|
2017-04-14 09:21:23 +00:00
|
|
|
- `yarn run build`
|
2015-12-22 22:33:12 +00:00
|
|
|
|
|
|
|
|
- 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
|
2016-07-23 17:59:54 +00:00
|
|
|
- bundle JavaScript in one file
|
2015-12-22 22:33:12 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
## 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 :
|
2017-04-14 09:21:23 +00:00
|
|
|
- `yarn run serve`
|
2015-12-22 22:33:12 +00:00
|
|
|
|
2017-03-31 04:29:03 +00:00
|
|
|
- Træfik API connections are defined in:
|
2015-12-22 22:33:12 +00:00
|
|
|
- `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`.
|
2015-10-07 11:54:00 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
## Libraries
|
|
|
|
|
|
|
|
|
|
- [Node](https://nodejs.org)
|
2016-11-16 02:25:06 +00:00
|
|
|
- [Yarn](https://yarnpkg.com/)
|
2016-07-23 17:59:54 +00:00
|
|
|
- [Generator FountainJS](https://github.com/FountainJS/generator-fountain-webapp)
|
|
|
|
|
- [Webpack](https://github.com/webpack/webpack)
|
2015-10-07 11:54:00 +00:00
|
|
|
- [AngularJS](https://docs.angularjs.org/api)
|
|
|
|
|
- [UI Router](https://github.com/angular-ui/ui-router)
|
|
|
|
|
- [UI Router - Documentation](https://github.com/angular-ui/ui-router/wiki)
|
2017-09-01 17:44:03 +00:00
|
|
|
- [Bootstrap](https://getbootstrap.com)
|
2015-10-07 11:54:00 +00:00
|
|
|
- [Angular Bootstrap](https://angular-ui.github.io/bootstrap)
|
2017-09-01 17:44:03 +00:00
|
|
|
- [D3](https://d3js.org)
|
2015-10-07 20:31:00 +00:00
|
|
|
- [D3 - Documentation](https://github.com/mbostock/d3/wiki)
|
|
|
|
|
- [NVD3](http://nvd3.org)
|
2017-09-01 17:44:03 +00:00
|
|
|
- [Angular nvD3](https://krispo.github.io/angular-nvd3)
|
