Dashboard page is redesigned (#108)
* Dashboard page is redesigned
* UI changes done
diff --git a/frontend/app/apiList/apiList.js b/frontend/app/apiList/apiList.js
index f57d3ff..d9cd21f 100644
--- a/frontend/app/apiList/apiList.js
+++ b/frontend/app/apiList/apiList.js
@@ -38,6 +38,10 @@
schema: {
url: 'registry/v3/microservices/{{serviceId}}/schemas/{{schemaId}}',
method: 'GET'
+ },
+ allServices: {
+ url: 'registry/v3/govern/services?options=all',
+ method: 'GET'
}
}
});
diff --git a/frontend/app/scripts/modules/dashboard/controllers/dashboardCtrl.js b/frontend/app/scripts/modules/dashboard/controllers/dashboardCtrl.js
index c648888..b63de4b 100644
--- a/frontend/app/scripts/modules/dashboard/controllers/dashboardCtrl.js
+++ b/frontend/app/scripts/modules/dashboard/controllers/dashboardCtrl.js
@@ -21,97 +21,59 @@
$scope.startingServices = [];
$scope.outofserviceServices =[];
- $scope.instancesData = [];
- $scope.runningInstances = [];
- $scope.stoppedInstances = [];
- $scope.startingInstances = [];
- $scope.outofserviceInstances =[];
-
$scope.totalServices = 0;
$scope.totalInstances = 0;
+ $scope.totalProviders = 0;
+ $scope.totalConsumers = 0;
$scope.labels = ["UP", "DOWN", "STRATING", "OUT OF SERVICE"];
$scope.colors = ["#5ecc49","#d50000", "#e6e600", "#bcc2c9"];
- var instancePromises = [];
-
-
- $scope.getServices = function(){
+ $scope.getAllServices = function(){
$(".loader").show();
- var url = apiConstant.api.microservice.url;
- var method = apiConstant.api.microservice.method;
+ var url = apiConstant.api.allServices.url;
+ var method = apiConstant.api.allServices.method;
httpService.apiRequest(url, method, null, null).then(function(response){
$(".loader").hide();
- if(response && response.data && response.data.services){
- $scope.totalServices = response.data.services.length;
- $scope.getInstances(response.data.services);
- response.data.services.forEach(function(service){
- if(service.status.toLowerCase() === "up"){
- $scope.runningServices.push(service);
+ if(response && response.data && response.data.allServicesDetail) {
+ $scope.totalServices = response.data.allServicesDetail.length;
+ response.data.allServicesDetail.forEach(function(services){
+ if(services.microSerivce.status.toLowerCase() == "starting") {
+ $scope.startingServices.push(services);
}
- if(service.status.toLowerCase() === "down"){
- $scope.stoppedServices.push(service);
+ if(services.microSerivce.status.toLowerCase() == "up"){
+ console.log("hi")
+ $scope.runningServices.push(services);
}
- if(service.status.toLowerCase() === "starting"){
- $scope.startingServices.push(service);
+ if(services.microSerivce.status.toLowerCase() == "down"){
+ $scope.stoppedServices.push(services);
}
- if(service.status.toLowerCase() === "outofservice"){
- $scope.outofserviceServices.push(service);
+ if(services.microSerivce.status.toLowerCase() == "outofservice"){
+ $scope.outofserviceServices.push(services);
}
- });
+ if(services.instances){
+ $scope.totalInstances = $scope.totalInstances + services.instances.length;
+ }
+
+ if(services.providers){
+ $scope.totalProviders = $scope.totalInstances + services.providers.length;
+ }
+
+ if(services.consumers){
+ $scope.totalConsumers = $scope.totalInstances + services.consumers.length;
+ }
+ });
$scope.servicesData[0] = $scope.runningServices.length;
$scope.servicesData[1] = $scope.stoppedServices.length;
$scope.servicesData[2] = $scope.startingServices.length;
$scope.servicesData[3] = $scope.outofserviceServices.length;
- }
+ }
},function(error){
$(".loader").hide();
});
};
-
- $scope.getServices();
-
- $scope.getInstances = function(servicesList){
- for (var i = 0; i < servicesList.length; i++) {
- var api = apiConstant.api.instances.url;
- var url = api.replace("{{serviceId}}", servicesList[i].serviceId);
- var method = apiConstant.api.instances.method;
- var headers = {"X-ConsumerId": servicesList[i].serviceId};
-
- instancePromises.push(httpService.apiRequest(url, method, null, headers, "nopopup"));
- }
-
- $q.all(instancePromises).then(function(response){
- if(response && response[0].data && response[0].data.instances){
- $scope.totalInstances = response[0].data.instances.length;
- response[0].data.instances.forEach(function(instance){
- if(instance.status.toLowerCase() === "up"){
- $scope.runningInstances.push(instance);
- }
- if(instance.status.toLowerCase() === "down"){
- $scope.stoppedInstances.push(instance);
- }
- if(instance.status.toLowerCase() === "starting"){
- $scope.startingInstances.push(instance);
- }
- if(instance.status.toLowerCase() === "outofservice"){
- $scope.outofserviceInstances.push(instance);
- }
- });
- $scope.instancesData[0] = $scope.runningInstances.length;
- $scope.instancesData[1] = $scope.stoppedInstances.length;
- $scope.instancesData[2] = $scope.startingInstances.length;
- $scope.instancesData[3] = $scope.outofserviceInstances.length;
- }
- },function(error){
- $(".loader").hide();
- });
-
- };
-
-
-
+ $scope.getAllServices();
}]);
\ No newline at end of file
diff --git a/frontend/app/scripts/modules/dashboard/views/dashboard.html b/frontend/app/scripts/modules/dashboard/views/dashboard.html
index a3a3a5e..5613e00 100644
--- a/frontend/app/scripts/modules/dashboard/views/dashboard.html
+++ b/frontend/app/scripts/modules/dashboard/views/dashboard.html
@@ -24,8 +24,19 @@
</div>
</div>
+ <div class="row dashboardTitle no-margin" id="pc">
+ <div class="col-md-5 col-sm-5 left">
+ <span class="dashboardName"> {{ "providers" | translate }} </span>
+ <span class="dashboardName pull-right">{{ totalProviders }}</span>
+ </div>
+ <div class="col-md-5 col-sm-5 right">
+ <span class="dashboardName"> {{ "consumers" | translate }} </span>
+ <span class="dashboardName pull-right">{{ totalConsumers }}</span>
+ </div>
+ </div>
+
<div class="row no-margin dashboardChart">
- <div class="col-md-6 col-sm-6 dashboardChartLeft">
+ <div class="col-md-12 col-sm-12 dashboardChartLeft">
<div class="dashboardInfo">
<ul>
<li><span class="glyphicon glyphicon-stop starting"></span>{{ "starting" | translate }}</li>
@@ -36,40 +47,6 @@
</div>
<canvas class="chart chart-doughnut" chart-data="servicesData" chart-colors="colors" chart-labels="labels"></canvas>
</div>
- <div class="col-md-6 col-sm-6 dashboardChartRight">
- <div class="dashboardInfo">
- <ul>
- <li><span class="glyphicon glyphicon-stop starting"></span>{{ "starting" | translate }}</li>
- <li><span class="glyphicon glyphicon-stop up"></span>{{ "up" | translate }}</li>
- <li><span class="glyphicon glyphicon-stop down"></span>{{ "down" | translate }}</li>
- <li><span class="glyphicon glyphicon-stop unavailable"></span>{{ "outofservice" | translate }}</li>
- </ul>
- </div>
- <canvas class="chart chart-doughnut" chart-data="instancesData" chart-colors="colors" chart-labels="labels"></canvas>
- </div>
</div>
- <div class="row dashboardUpDown no-margin">
- <div class="col-md-5 col-sm-5 left">
- <div class="col-md-2 col-sm-2 up">
- <span>{{ "up" | translate }} </span>
- <span class="pull-right">{{ runningServices.length }}</span>
- </div>
- <div class="col-md-2 col-sm-2 down">
- <span>{{ "down" | translate }}</span>
- <span class="pull-right">{{ stoppedServices.length }}</span>
- </div>
- </div>
- <div class="col-md-5 col-sm-5 right">
- <div class="col-md-2 col-sm-2 up">
- <span>{{ "up" | translate }} </span>
- <span class="pull-right">{{ runningInstances.length }}</span>
- </div>
- <div class="col-md-2 col-sm-2 down">
- <span>{{ "down" | translate }}</span>
- <span class="pull-right"">{{ stoppedInstances.length }}</span>
- </div>
- </div>
- </div>
-
</div>
\ No newline at end of file
diff --git a/frontend/app/scripts/modules/serviceCenter/controllers/serviceInfoCtrl.js b/frontend/app/scripts/modules/serviceCenter/controllers/serviceInfoCtrl.js
index a3b3819..9f70434 100644
--- a/frontend/app/scripts/modules/serviceCenter/controllers/serviceInfoCtrl.js
+++ b/frontend/app/scripts/modules/serviceCenter/controllers/serviceInfoCtrl.js
@@ -53,9 +53,9 @@
}
$q.all(promises).then(function(response){
- $scope.instances = response[0].data.instances;
- $scope.providers = response[1].data.providers;
- $scope.consumers = response[2].data.consumers;
+ $scope.instances = response[0].data.instances || [];
+ $scope.providers = response[1].data.providers || [];
+ $scope.consumers = response[2].data.consumers || [];
},function(error){
$scope.instances = [];
$scope.providers = [];
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 5236d24..393a0c4 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -23,7 +23,8 @@
-webkit-text-size-adjust: 100%; }
body {
- margin: 0; }
+ margin: 0;
+ }
article,
aside,
@@ -4080,7 +4081,7 @@
.breadcrumb > li {
display: inline-block; }
.breadcrumb > li + li:before {
- content: "/ ";
+ content: "/ ";
padding: 0 5px;
color: #ccc; }
.breadcrumb > .active {
@@ -5928,7 +5929,7 @@
margin-left: 8px;
margin-top: 50px; }
body canvas {
- max-width: 65% !important;
+ max-width: 50% !important;
margin: 0px auto;
padding: 15px; }
body canvas:hover {
@@ -5963,7 +5964,6 @@
body .dashboardBody .dashboardPC {
margin-top: 20px !important; }
body .dashboardBody .dashboardChart .dashboardChartLeft, body .dashboardBody .dashboardChart .dashboardChartRight {
- width: 49% !important;
background-color: #F0F2F5;
margin-top: 20px;
margin-right: 10px; }
@@ -5971,7 +5971,6 @@
height: 90px;
width: 100%;
float: right;
- margin-right: -8px;
padding: 5px 0px; }
body .dashboardBody .dashboardChart .dashboardChartLeft .dashboardInfo ul, body .dashboardBody .dashboardChart .dashboardChartRight .dashboardInfo ul {
padding: 5px 15px;
@@ -6050,5 +6049,30 @@
border: 2px solid #006666; }
body .swaggerDiv {
margin: 0px 20px; }
+ .dashboardBody {
+ width: 80%;
+ }
+ .left,.right {
+ background-color: #fff !important;
+ box-shadow: 0px 1px 1px 1px darkgrey;
+ }
+ .left:hover,.right:hover {
+ box-shadow: 2px 2px 2px 2px grey;
+ }
+ #pc {
+ margin-top: 20px !important;
+ }
+ .dashboardChartLeft {
+ background-color: #fff !important;
+ box-shadow: 0px 1px 5px 0px grey;
+ }
+ .dashboardName {
+ color: grey;
+ font-weight: bold;
+ font-family: sans-serif;
+ }
+ .dashboardChart {
+ width: 99%;
+ }
/*# sourceMappingURL=main.css.map */
diff --git a/frontend/app/styles/main.scss b/frontend/app/styles/main.scss
deleted file mode 100644
index 46d710c..0000000
--- a/frontend/app/styles/main.scss
+++ /dev/null
@@ -1,357 +0,0 @@
-/*
-Copyright 2017 Huawei Technologies Co., Ltd
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-$icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
-$fa-font-path: "../../bower_components/components-font-awesome/fonts/";
-
-@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
-
-body {
- height: 100%;
- margin: 0;
- padding: 0;
- font-family: Roboto !important;
- .loader {
- background: rgba(0,0,0,.2) url('../images/loader.gif') no-repeat 50% center;
- width:100%;
- height:100%;
- position:fixed;
- top:0;
- left:0;
- z-index:999;
- display:none;
- }
- .no-margin{
- margin:0px !important;
- }
- .glyphicon-trash:hover{
- cursor: pointer;
- }
- .pagination-class {
- .label {
- color: rgba(0, 0, 0, .54);
- font-size: 12px;
- font-weight: normal;
- }
- }
- .serviceStatus {
- height: 20px;
- width: 40px;
- color: white;
- text-align: center;
- &.up {
- background-color: #5ecc49;
- }
- &.starting {
- background-color: #e6e600;
- }
- &.down {
- background-color: #d50000;
- }
- &.outofservice {
- background-color: #bcc2c9;
- }
- }
- .navbar {
- border-radius: unset !important;
- .logo {
- margin-top: 6px;
- margin-left: 25px;
- }
- .label {
- color: white;
- font-size: 16px;
- }
- .tenant {
- height: 30px;
- }
- .language {
- height: 31px;
- margin-top: 7px;
- }
- .navbar-right{
- margin-right:15px !important;
- }
- }
-
- .sidebar-wrapper {
- height: 100%;
- width: 230px;
- position: fixed;
- background: #f5f5f0;
- margin-top: -20px;
- .sidebar-nav {
- position: fixed;
- top: 50px;
- width: 230px;
- margin: 0;
- padding: 0;
- list-style: none;
- li {
- text-indent: 20px;
- line-height: 50px;
- a {
- display: block;
- text-decoration: none;
- color: #666666;
- font-size: 14px;
- &:hover {
- text-decoration: none;
- color: black;
- background: #f5f5f0;
- }
- }
- }
- .active, .activeProvider, .activeConsumer, .schemaTab {
- text-decoration: none;
- background: #fff;
- color: #009ee0 !important;
- border-left: 3px solid #009ee0;
-}
- }
- .brand {
- font-size: 18px;
- margin: 10px 0px 10px 0px;
- }
- }
-
-.bodyContent {
- margin-left: 250px;
- padding-top: 70px;
-}
-.fa-close {
- color: white;
-}
-
-.table-header {
- height: 50px;
- min-height: 50px;
-}
-
-.no-padding {
- padding: 0;
-}
-#search {
- max-width: 300px;
-}
-
-table.md-table {
- td.md-cell {
- height: 48px;
- }
- .md-head {
- tr{
- th {
- font-size: 14px;
- color: #000;
- }
- }
- }
-}
-
-.serviceInfo {
- margin: 0px;
- .details {
- height:80px;
- width:80px;
- background-color:#efefef;
- border-radius:50%;
- text-align:center;
- }
- ul {
- list-style-type: none;
- li:first-child {
- line-height: 30px;
- }
- }
-}
-.serviceInfoTab {
- margin-left: 8px;
- margin-top: 50px;
-}
-canvas {
- max-width: 65% !important;
- margin: 0px auto;
- padding: 15px;
- &:hover{
- cursor: pointer;
- }
-}
-.margin20 {
- margin-top: 20px;
-}
-.infoTableHead {
- background-color: #efefef;
-}
-
-.dashboardHeader{
- .dashboard {
- font-size: 30px;
- color: brown;
- }
- height:100px;
-}
-
-.dashboardBody{
- .dashboardTitle{
- height:100px;
- .left{
- height:inherit;
- background-color:#F0F2F5;
- margin-right: 10px;
- width: 49% !important;
- padding-top: 30px;
- .dashboardName {
- font-size: 25px;
- text-align: center;
- padding: 5px;
- }
- .dashboardCount{
- width: 65%;
- text-align: end;
- font-size: 25px;
- }
- }
- .right{
- @extend .left;
- margin-right:0px !important;
- }
- }
- .dashboardPC {
- @extend .dashboardTitle;
- margin-top: 20px !important;
- }
- .dashboardChart{
- .dashboardChartLeft{
- width: 49% !important;
- background-color:#F0F2F5;
- margin-top: 20px;
- margin-right: 10px;
- .dashboardInfo {
- height: 90px;
- width: 100%;
- float: right;
- margin-right: -8px;
- padding: 5px 0px;
- ul {
- padding: 5px 15px;
- border: 1px solid darkgrey;
- float: right;
- li{
- list-style-type: none;
- span {
- padding-right: 10px;
- }
- .starting {
- color: #e6e600;
- }
- .up {
- color: #5ecc49;
- }
- .down {
- color: #d50000;
- }
- .unavailable {
- color: #bcc2c9;
- }
- }
- }
- }
- }
- .dashboardChartRight{
- @extend .dashboardChartLeft;
- margin-right:0px !important;
- }
- }
-
- .dashboardStatus{
- height:100px;
- margin-top: 20px !important;
- .left{
- height:inherit;
- background-color:#F0F2F5;
- margin-right: 10px;
- width: 49% !important;
- .dashboardName {
- font-size: 25px;
- text-align: center;
- padding: 5px;
- margin-top: 25px;
- }
- .dashboardCount{
- width: 65%;
- text-align: end;
- font-size: 25px;
- margin-top: 25px;
- }
- }
- .right{
- @extend .left;
- margin-right:0px !important;
- }
- }
- .dashboardUpDown{
- margin-top: 20px !important;
- .left{
- height:inherit;
- background-color: white;
- margin-right: 10px;
- width: 49% !important;
- padding: 0px !important;
- .up {
- background-color:#F0F2F5;
- width:49% !important;
- margin-right:5px;
- height:100px;
- font-size:22px;
- text-align:left;
- padding:35px;
- }
- .down {
- background-color:#F0F2F5;
- width:50% !important;
- margin-right:0px;
- height:100px;
- font-size:22px;
- text-align:left;
- padding:35px;
- }
- }
- .right{
- @extend .left;
- margin-right:0px !important;
- }
- }
-}
-.schemaTable {
- th {
- width: 50%;
- }
-}
-md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) {
- background-color : rgb(59,120,231) !important;
-}
-md-toolbar.md-default-theme:not(.md-menu-toolbar).md-warn, md-toolbar:not(.md-menu-toolbar).md-warn {
- background-color : rgb(59,120,231) !important;
-}
-md-dialog {
- min-width: 75%;
-}
-#schemes {
- width: 8%;
- border: 2px solid #006666;
-}
-.swaggerDiv {
- margin: 0px 20px;
-}
-
-}
