feat: new Web UI build system

- use generator-gulp-angular by @swiip
- remove old static file

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

@@ -0,0 +1,13 @@
+(function () {
+  'use strict';
+
+    angular
+      .module('traefik.core.health', ['ngResource'])
+      .factory('Health', Health);
+
+      /** @ngInject */
+      function Health($resource) {
+        return $resource('/health');
+      }
+
+})();

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

@@ -0,0 +1,13 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('traefik.core.provider', ['ngResource'])
+    .factory('Providers', Providers);
+
+    /** @ngInject */
+    function Providers($resource) {
+      return $resource('/api/providers');
+    }
+
+})();

webui/src/app/index.config.js

@@ -0,0 +1,15 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('traefik')
+    .config(config);
+
+  /** @ngInject */
+  function config($logProvider) {
+    // Enable log
+    $logProvider.debugEnabled(true);
+
+  }
+
+})();

webui/src/app/index.constants.js

@@ -0,0 +1,9 @@
+/* global moment:false */
+(function() {
+  'use strict';
+
+  angular
+    .module('traefik')
+    .constant('moment', moment);
+
+})();

webui/src/app/index.module.js

@@ -0,0 +1,7 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('traefik', ['ngAnimate', 'ngCookies', 'ngSanitize', 'ngMessages', 'ngAria', 'ngResource', 'ui.router', 'ui.bootstrap', 'traefik.section']);
+
+})();

webui/src/app/index.run.js

@@ -0,0 +1,14 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('traefik')
+    .run(runBlock);
+
+  /** @ngInject */
+  function runBlock($log) {
+
+    $log.debug('runBlock end');
+  }
+
+})();

webui/src/app/index.scss

@@ -0,0 +1,35 @@
+/**
+ *  If you want to override some bootstrap variables, you have to change values here.
+ *  The list of variables are listed here bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
+ */
+$navbar-inverse-link-color: #5AADBB;
+$icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/";
+
+/**
+ *  Do not remove the comments below. It's the markers used by wiredep to inject
+ *  sass dependencies when defined in the bower.json of your dependencies
+ */
+// bower:scss
+// endbower
+
+.browsehappy {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0;
+}
+
+.thumbnail {
+  height: 200px;
+
+  img.pull-right {
+    width: 50px;
+  }
+}
+
+/**
+ *  Do not remove the comments below. It's the markers used by gulp-inject to inject
+ *  all your sass files automatically
+ */
+// injector
+// endinjector

webui/src/app/sections/health/health.controller.js

@@ -0,0 +1,209 @@
+/* global d3:false */
+(function (d3) {
+  'use strict';
+
+  angular
+    .module('traefik.section.health')
+    .controller('HealthController', HealthController);
+
+    /** @ngInject */
+    function HealthController($scope, $interval, $log, Health) {
+
+      var vm = this;
+
+      vm.graph = {
+        averageResponseTime: {},
+        totalStatusCodeCount: {}
+      };
+
+      vm.graph.totalStatusCodeCount.options = {
+        "chart": {
+          type: 'discreteBarChart',
+          height: 200,
+          margin: {
+            top: 20,
+            right: 20,
+            bottom: 40,
+            left: 55
+          },
+          x: function (d) {
+            return d.label;
+          },
+          y: function (d) {
+            return d.value;
+          },
+          showValues: true,
+          valueFormat: function (d) {
+            return d3.format('d')(d);
+          },
+          transitionDuration: 50,
+          yAxis: {
+            axisLabelDistance: 30
+          }
+        },
+        "title": {
+          "enable": true,
+          "text": "Total Status Code Count",
+          "css": {
+            "textAlign": "center"
+          }
+        }
+      };
+
+      vm.graph.totalStatusCodeCount.data = [
+        {
+          key: "Total Status Code Count",
+          values: [
+            {
+              "label": "200",
+              "value": 0
+            }
+          ]
+        }
+      ];
+
+      /**
+       * Update Total Status Code Count graph
+       *
+       * @param {Object} totalStatusCodeCount Object from API
+       */
+      function updateTotalStatusCodeCount(totalStatusCodeCount) {
+
+        // extract values
+        vm.graph.totalStatusCodeCount.data[0].values = [];
+        for (var code in totalStatusCodeCount) {
+          if (totalStatusCodeCount.hasOwnProperty(code)) {
+            vm.graph.totalStatusCodeCount.data[0].values.push({
+              label: code,
+              value: totalStatusCodeCount[code]
+            });
+          }
+        }
+
+        // Update Total Status Code Count graph render
+        if (vm.graph.totalStatusCodeCount.api) {
+          vm.graph.totalStatusCodeCount.api.update();
+        } else {
+          $log.error('fail');
+        }
+
+      }
+
+      vm.graph.averageResponseTime.options = {
+        chart: {
+          type: 'lineChart',
+          height: 200,
+          margin: {
+            top: 20,
+            right: 40,
+            bottom: 40,
+            left: 55
+          },
+          transitionDuration: 50,
+          x: function (d) {
+            return d.x;
+          },
+          y: function (d) {
+            return d.y;
+          },
+          useInteractiveGuideline: true,
+          xAxis: {
+            tickFormat: function (d) {
+              return d3.time.format('%X')(new Date(d));
+            }
+          },
+          yAxis: {
+            tickFormat: function (d) {
+              return d3.format(',.1f')(d);
+            }
+          }
+        },
+        "title": {
+          "enable": true,
+          "text": "Average response time",
+          "css": {
+            "textAlign": "center"
+          }
+        }
+      };
+
+      var initialPoint = {
+        x: Date.now() - 3000,
+        y: 0
+      };
+      vm.graph.averageResponseTime.data = [
+        {
+          values: [initialPoint],
+          key: 'Average response time (ms)',
+          type: 'line',
+          color: '#2ca02c'
+        }
+      ];
+
+      /**
+       * Update average response time graph
+       *
+       * @param {Number} x     Coordinate X
+       * @param {Number} y     Coordinate Y
+       */
+      function updateAverageResponseTimeGraph(x, y) {
+
+        // x multiply 1000 by because unix time is in seconds and JS Date are in milliseconds
+        var data = {
+          x: x * 1000,
+          y: y * 1000
+        };
+        vm.graph.averageResponseTime.data[0].values.push(data);
+        // limit graph entries
+        if (vm.graph.averageResponseTime.data[0].values.length > 100) {
+          vm.graph.averageResponseTime.data[0].values.shift();
+        }
+
+        // Update Average Response Time graph render
+        if (vm.graph.averageResponseTime.api) {
+          vm.graph.averageResponseTime.api.update();
+        }
+      }
+
+      /**
+       * Load all graph's datas
+       *
+       * @param {Object} health Health data from server
+       */
+      function loadData(health) {
+        // Load datas and update Average Response Time graph render
+        updateAverageResponseTimeGraph(health.unixtime, health.average_response_time_sec);
+
+        // Load datas and update Total Status Code Count graph render
+        updateTotalStatusCodeCount(health.total_status_code_count);
+
+        // set data's view
+        vm.health = health;
+      }
+
+      /**
+       * Action when load datas failed
+       *
+       * @param {Object} error Error state object
+       */
+      function erroData(error) {
+        vm.health = {};
+        $log.error(error);
+      }
+
+      // first load
+      Health.get(loadData, erroData);
+
+      // Auto refresh data
+      var intervalId = $interval(function () {
+        Health.get(loadData, erroData);
+      }, 3000);
+
+      // Stop auto refresh when page change
+      $scope.$on('$destroy', function () {
+        $interval.cancel(intervalId);
+      });
+
+    }
+
+})(d3);

webui/src/app/sections/health/health.html

@@ -0,0 +1,43 @@
+<div>
+  <h1 class="text-danger">
+    <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Health
+  </h1>
+
+  <div class="row">
+
+    <div class="col-md-6">
+      <div>
+        <nvd3 options="healthCtrl.graph.averageResponseTime.options" data="healthCtrl.graph.averageResponseTime.data" api="healthCtrl.graph.averageResponseTime.api"></nvd3>
+      </div>
+      <ul class="list-group">
+        <li class="list-group-item">
+          <span>Total response time :</span><span class="badge">{{healthCtrl.health.total_response_time}}</span>
+        </li>
+      </ul>
+      <ul class="list-group">
+        <li class="list-group-item">
+          <span>PID :</span><span class="badge">{{healthCtrl.health.pid}}</span>
+        </li>
+        <li class="list-group-item">
+          <span>Uptime :</span><span class="badge">{{healthCtrl.health.uptime}}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-md-6">
+      <div>
+        <nvd3 options="healthCtrl.graph.totalStatusCodeCount.options" data="healthCtrl.graph.totalStatusCodeCount.data" api="healthCtrl.graph.totalStatusCodeCount.api"></nvd3>
+      </div>
+      <ul class="list-group">
+        <li class="list-group-item">
+          <span>Total count :</span><span class="badge">{{healthCtrl.health.total_count}}</span>
+        </li>
+        <li class="list-group-item">
+          <span>Count :</span><span class="badge">{{healthCtrl.health.count}}</span>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+
+</div>

webui/src/app/sections/health/health.module.js

@@ -0,0 +1,19 @@
+(function () {
+  'use strict';
+
+  angular.module('traefik.section.health', ['traefik.core.health'])
+    .config(config);
+
+    /** @ngInject */
+    function config($stateProvider) {
+
+      $stateProvider.state('health', {
+        url: '/health',
+        templateUrl: 'app/sections/health/health.html',
+        controller: 'HealthController',
+        controllerAs: 'healthCtrl'
+      });
+
+    }
+
+})();

webui/src/app/sections/providers/backend-monitor/backend-monitor.directive.js

@@ -0,0 +1,26 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('traefik.section.providers.backend-monitor')
+    .directive('backendMonitor', backendMonitor);
+
+    function backendMonitor() {
+      return {
+        restrict: 'EA',
+        templateUrl: 'app/sections/providers/backend-monitor/backend-monitor.html',
+        controller: BackendMonitorController,
+        controllerAs: 'backendCtrl',
+        bindToController: true,
+        scope: {
+          backend: '=',
+          backendId: '='
+        }
+      };
+    }
+
+    function BackendMonitorController() {
+      // Nothing
+    }
+
+})();

webui/src/app/sections/providers/backend-monitor/backend-monitor.html

@@ -0,0 +1,23 @@
+<div class="panel panel-success">
+  <div class="panel-heading">
+    <strong><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> {{backendCtrl.backendId}}</strong>
+  </div>
+  <div class="panel-body">
+    <table class="panel-table__servers table table-striped table-hover">
+      <tr>
+        <td><em>Server</em></td>
+        <td><em>URL</em></td>
+        <td><em>Weight</em></td>
+      </tr>
+      <tr data-ng-repeat="(serverId, server) in backendCtrl.backend.servers">
+        <td>{{serverId}}</td>
+        <td><code><a data-ng-href="{{server.url}}">{{server.url}}</a></code></td>
+        <td>{{server.weight}}</td>
+      </tr>
+    </table>
+  </div>
+  <div class="panel-footer" data-ng-show="backendCtrl.backend.loadBalancer || backendCtrl.backend.circuitBreaker">
+    <span data-ng-show="backendCtrl.backend.loadBalancer" class="label label-success">Load Balancer: {{backendCtrl.backend.loadBalancer.method}}</span>
+    <span data-ng-show="backendCtrl.backend.circuitBreaker" class="label label-success">Circuit Breaker: {{backendCtrl.backend.circuitBreaker.expression}}</span>
+  </div>
+</div>

webui/src/app/sections/providers/backend-monitor/backend-monitor.module.js

@@ -0,0 +1,7 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('traefik.section.providers.backend-monitor', []);
+
+})();

webui/src/app/sections/providers/frontend-monitor/frontend-monitor.directive.js

@@ -0,0 +1,26 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('traefik.section.providers.frontend-monitor')
+    .directive('frontendMonitor', frontendMonitor);
+
+    function frontendMonitor() {
+      return {
+        restrict: 'EA',
+        templateUrl: 'app/sections/providers/frontend-monitor/frontend-monitor.html',
+        controller: FrontendMonitorController,
+        controllerAs: 'frontendCtrl',
+        bindToController: true,
+        scope: {
+          frontend: '=',
+          frontendId: '='
+        }
+      };
+    }
+
+    function FrontendMonitorController() {
+      // Nothing
+    }
+
+})();

webui/src/app/sections/providers/frontend-monitor/frontend-monitor.html

@@ -0,0 +1,23 @@
+<div class="panel panel-warning">
+  <div class="panel-heading">
+    <strong><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> {{frontendCtrl.frontendId}}</strong>
+  </div>
+  <div class="panel-body">
+    <table class="panel-table__routes table table-striped table-hover">
+      <tr>
+        <td><em>Route</em></td>
+        <td><em>Rule</em></td>
+        <td><em>Value</em></td>
+      </tr>
+      <tr data-ng-repeat="(routeId, route) in frontendCtrl.frontend.routes">
+        <td>{{routeId}}</td>
+        <td>{{route.rule}}</td>
+        <td><code>{{route.value}}</code></td>
+      </tr>
+    </table>
+  </div>
+  <div data-bg-show="frontendCtrl.frontend.backend" class="panel-footer">
+    <span class="label label-warning" role="button" data-toggle="collapse" href="#{{frontendCtrl.frontend.backend}}" aria-expanded="false">{{frontendCtrl.frontend.backend}}</span>
+    <span data-ng-show="frontendCtrl.frontend.passHostHeader" class="label label-warning">Pass Host Header</span>
+  </div>
+</div>

webui/src/app/sections/providers/frontend-monitor/frontend-monitor.module.js

@@ -0,0 +1,6 @@
+(function () {
+  'use strict';
+
+  angular.module('traefik.section.providers.frontend-monitor', []);
+
+})();

webui/src/app/sections/providers/providers.controller.js

@@ -0,0 +1,28 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('traefik.section.providers')
+    .controller('ProvidersController', ProvidersController);
+
+    /** @ngInject */
+    function ProvidersController($scope, $interval, $log, Providers) {
+      var vm = this;
+
+      vm.providers = Providers.get();
+
+      var intervalId = $interval(function () {
+        Providers.get(function (providers) {
+          vm.providers = providers;
+        }, function (error) {
+          vm.providers = {};
+          $log.error(error);
+        });
+      }, 2000);
+
+      $scope.$on('$destroy', function () {
+        $interval.cancel(intervalId);
+      });
+    }
+
+})();

webui/src/app/sections/providers/providers.html

@@ -0,0 +1,20 @@
+<div>
+  <tabset>
+    <tab data-ng-repeat="(providerId, provider) in providersCtrl.providers" heading="{{providerId}}">
+
+      <div class="row tabset-row__providers">
+        <div class="col-md-6">
+          <div data-ng-repeat="(frontendId, frontend) in provider.frontends">
+            <frontend-monitor data-provider-id="providerId" data-frontend-id="frontendId" data-frontend="frontend"></frontend-monitor>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div data-ng-repeat="(backendId, backend) in provider.backends">
+            <backend-monitor data-provider-id="providerId" data-backend-id="backendId" data-backend="backend"></backend-monitor>
+          </div>
+        </div>
+      </div>
+
+    </tab>
+  </tabset>
+</div>

webui/src/app/sections/providers/providers.module.js

@@ -0,0 +1,24 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('traefik.section.providers', [
+      'traefik.core.provider',
+      'traefik.section.providers.backend-monitor',
+      'traefik.section.providers.frontend-monitor'
+    ])
+    .config(config);
+
+    /** @ngInject */
+    function config($stateProvider) {
+
+      $stateProvider.state('provider', {
+        url: '/',
+        templateUrl: 'app/sections/providers/providers.html',
+        controller: 'ProvidersController',
+        controllerAs: 'providersCtrl'
+      });
+
+    }
+
+})();

webui/src/app/sections/sections.config.js

@@ -0,0 +1,13 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('traefik.section')
+    .config(config);
+
+    /** @ngInject */
+    function config($urlRouterProvider) {
+      $urlRouterProvider.otherwise('/');
+    }
+
+})();

webui/src/app/sections/sections.module.js

@@ -0,0 +1,13 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('traefik.section', [
+      'ui.router',
+      'ui.bootstrap',
+      'nvd3',
+      'traefik.section.providers',
+      'traefik.section.health'
+     ]);
+
+})();

webui/src/app/traefik.scss

@@ -0,0 +1,26 @@
+
+@font-face {
+    font-family: 'charterregular';
+    src: url('../assets/fonts/charter_regular-webfont.eot');
+    src: url('../assets/fonts/charter_regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../assets/fonts/charter_regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.traefik-blue {
+  color: #00B1FF;
+}
+
+.traefik-text {
+   font-family: 'charterregular', Arial, sans-serif;
+}
+
+.panel-body .panel-table__servers,
+.panel-body .panel-table__routes {
+  margin-bottom: 0;
+}
+
+.tabset-row__providers {
+  margin-top: 3rem;
+}

webui/src/index.html

@@ -0,0 +1,76 @@
+<!doctype html>
+<html ng-app="traefik">
+  <head>
+    <meta charset="utf-8">
+      <title>/ˈTræfɪk/</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width">
+    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+
+    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
+    <!-- bower:css -->
+    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
+    <!-- endbower -->
+    <!-- endbuild -->
+
+    <!-- build:css({.tmp/serve,src}) styles/app.css -->
+    <!-- inject:css -->
+    <!-- css files will be automatically insert here -->
+    <!-- endinject -->
+    <!-- endbuild -->
+  </head>
+  <body>
+    <!--[if lt IE 10]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+
+    <div class="container">
+      <header>
+        <nav class="navbar navbar-default">
+          <div class="container-fluid">
+            <div class="navbar-header">
+              <a class="navbar-brand traefik-text" ui-sref="provider">/ˈTr<span class="traefik-blue">æ</span>fɪk/</a>
+            </div>
+
+            <div class="collapse navbar-collapse">
+              <ul class="nav navbar-nav">
+                <li><a ui-sref="provider" class="active">Providers</a></li>
+                <li><a ui-sref="health">Health</a></li>
+              </ul>
+              <ul class="nav navbar-nav navbar-right">
+                <li>
+                  <a href="https://github.com/EmileVauge/traefik/blob/master/docs/index.md" target="_blank">Documentation</a>
+                </li>
+                <li>
+                  <a href="http://traefik.io" target="_blank"><span class="traefik-blue">traefik.io</span></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </nav>
+      </header>
+
+      <main class="main">
+        <div data-ui-view></div>
+      </main>
+
+    </div>
+
+    <!-- build:js(src) scripts/vendor.js -->
+    <!-- bower:js -->
+    <!-- run `gulp inject` to automatically populate bower script dependencies -->
+    <!-- endbower -->
+    <!-- endbuild -->
+
+    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
+    <!-- inject:js -->
+    <!-- js files will be automatically insert here -->
+    <!-- endinject -->
+
+    <!-- inject:partials -->
+    <!-- angular templates will be automatically converted in js and inserted here -->
+    <!-- endinject -->
+    <!-- endbuild -->
+
+  </body>
+</html>