feat(dashboard): add provider's tabs

- slit provider between tabs
- remove providerID from backend/frontend title
- add Angular-Boostrap
This commit is contained in:
Fernandez Ludovic 2015-10-07 00:01:24 +02:00
parent f4296dfef0
commit 64d635f776
11 changed files with 48 additions and 19 deletions

View file

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

View file

@ -1,6 +1,6 @@
<div class="panel panel-success"> <div class="panel panel-success">
<div class="panel-heading"> <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>
<div class="panel-body"> <div class="panel-body">
<table class="panel-table__servers table table-striped table-hover"> <table class="panel-table__servers table table-striped table-hover">

View file

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

View file

@ -1,6 +1,6 @@
<div class="panel panel-warning"> <div class="panel panel-warning">
<div class="panel-heading"> <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>
<div class="panel-body"> <div class="panel-body">
<table class="panel-table__routes table table-striped table-hover"> <table class="panel-table__routes table table-striped table-hover">

View file

@ -1,14 +1,20 @@
<!--{{providersCtrl.providers}}--> <div>
<div class="row" data-ng-repeat="(providerId, provider) in providersCtrl.providers"> <tabset>
<div class="col-md-6"> <tab data-ng-repeat="(providerId, provider) in providersCtrl.providers" heading="{{providerId}}">
<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 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> </div>

View file

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

View file

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

View file

@ -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
}

File diff suppressed because one or more lines are too long

View file

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

View file

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