feat(dashboard): add provider's tabs

- slit provider between tabs
- remove providerID from backend/frontend title
- add Angular-Boostrap

static/app/sections/providers/backend-monitor/backend-monitor.directive.js

@@ -12,8 +12,7 @@
         bindToController: true,
         scope: {
           backend: '=',
-          backendId: '=',
-          providerId: '='
+          backendId: '='
         }
       };
     });

static/app/sections/providers/backend-monitor/backend-monitor.html

@@ -1,6 +1,6 @@
 <div class="panel panel-success">
   <div class="panel-heading">
-    <strong><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> {{backendCtrl.backendId}}</strong> [{{backendCtrl.providerId}}]
+    <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">

static/app/sections/providers/frontend-monitor/frontend-monitor.directive.js

@@ -12,8 +12,7 @@
         bindToController: true,
         scope: {
           frontend: '=',
-          frontendId: '=',
-          providerId: '='
+          frontendId: '='
         }
       };
     });

static/app/sections/providers/frontend-monitor/frontend-monitor.html

@@ -1,6 +1,6 @@
 <div class="panel panel-warning">
   <div class="panel-heading">
-    <strong><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> {{frontendCtrl.frontendId}}</strong> [{{frontendCtrl.providerId}}]
+    <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">

static/app/sections/providers/providers.html

@@ -1,5 +1,8 @@
-<!--{{providersCtrl.providers}}-->
-<div class="row" data-ng-repeat="(providerId, provider) in providersCtrl.providers">
+<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>
@@ -10,5 +13,8 @@
             <backend-monitor data-provider-id="providerId" data-backend-id="backendId" data-backend="backend"></backend-monitor>
           </div>
         </div>
-
+      </div>
+
+    </tab>
+  </tabset>
 </div>

static/app/sections/sections.module.js

@@ -4,6 +4,7 @@
   angular
     .module('traefik.section', [
       'ui.router',
+      'ui.bootstrap',
       'traefik.section.providers',
       'traefik.section.health'
      ]);

static/bower.json

@@ -19,6 +19,7 @@
     "angular": "angularjs#~1.4.7",
     "bootstrap": "~3.3.5",
     "angular-resource": "~1.4.7",
-    "angular-ui-router": "~0.2.15"
+    "angular-ui-router": "~0.2.15",
+    "angular-bootstrap": "~0.13.4"
   }
 }

static/bower_components/angular-bootstrap/ui-bootstrap-csp.css

@@ -0,0 +1,6 @@
+/* Include this file in your html if you are using the CSP mode. */
+
+.ng-animate.item:not(.left):not(.right) {
+  -webkit-transition: 0s ease-in-out left;
+  transition: 0s ease-in-out left
+}

static/index.html

@@ -11,6 +11,8 @@
   <!-- Bootstrap -->
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
+  <link rel="stylesheet" href="bower_components/angular-bootstrap/ui-bootstrap-csp.css">
+
   <link rel="stylesheet" href="style.css">
 </head>
 
@@ -54,6 +56,7 @@
   <script src="bower_components/angular/angular.min.js"></script>
   <script src="bower_components/angular-resource/angular-resource.min.js"></script>
   <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
+  <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
   <!-- end vendors -->
 
   <script src="app/traefik.js"></script>

static/style.css

@@ -20,3 +20,7 @@
 .panel-body .panel-table__routes {
   margin-bottom: 0;
 }
+
+.tabset-row__providers {
+  margin-top: 3rem;
+}