Dashboard interface front-end development

Change-Id: Ife8dbb89e9a5d465e1c3b6b6a290059f376b673b
Issue-ID: USECASEUI-214
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

7 files changed, 230 insertions, 71 deletions

diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
index 61bed45e..b5142410 100644
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
+++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
@@ -47,7 +47,7 @@ export class PieComponent implements OnInit {
               legendHoverLink: false,
               hoverOffset: 3,
               avoidLabelOverlap: false,
-              minAngle:1,
+              // minAngle:1,
               label: this.initData.option.series[0].label,
               data:[],
               itemStyle: this.initData.option.series[0].itemStyle
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html
index 5a38944c..82ef2818 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.html
+++ b/usecaseui-portal/src/app/components/customer/customer.component.html
@@ -17,8 +17,9 @@
     <div class="chearts">
         <div class="Cu">
           <p> {{"i18nTextDefine_Instance_Count_of_Customer" | translate}} </p>
-          <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie>
-          <div class="legend"></div><span> {{"i18nTextDefine_users" | translate}} </span>
+          <app-pie [initData]="CUChartInit" [chartData]="CUChartData" *ngIf="serviceChart"></app-pie>
+          <div *ngIf="!serviceChart"  style="color: #ddd; font-weight: 700;font-size: 19px;height: 200px;text-align: center;line-height: 8;">No Service Instances </div>
+          <!-- <div class="legend"></div><span> {{"i18nTextDefine_users" | translate}} </span> -->
         </div>
         <div class="type">
           <p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p>
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts
index 51486dbf..b609de57 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.ts
+++ b/usecaseui-portal/src/app/components/customer/customer.component.ts
@@ -94,7 +94,7 @@ export class CustomerComponent implements OnInit {
                     normal: {
                         position: 'center',
                         show: false,
-                        formatter: '   {b|{b}：{c}%}  ',
+                        formatter: '   {b|{b}：{c}}  ',
                         backgroundColor: 'rgba(51,51,51,0.9)',
                         borderColor: 'rgba(51,51,51,0.9)',
                         borderWidth: 1,
@@ -112,6 +112,11 @@ export class CustomerComponent implements OnInit {
 
                     }
                 },
+                labelLine: {
+                    normal: {
+                      show: false
+                    }
+                },
                 itemStyle: {
                     normal: {
                         borderWidth: 3,
@@ -131,6 +136,7 @@ export class CustomerComponent implements OnInit {
                             }],
                             global: false
                         },
+                        borderWidth: 0,
                         shadowBlur: 10,
                         shadowOffsetX: 0,
                         shadowColor: 'rgba(0, 10, 5, 0)'
@@ -141,8 +147,18 @@ export class CustomerComponent implements OnInit {
     };
 
     // get customers chart pie
+    Pie_name = [];
+    Pie_value = [];
+    serviceChart=true;
+    serviceNumber;
     getCustomersPie() {
         this.managemencs.getCustomersPie().subscribe((data) => {
+            this.serviceNumber = data.serviceTotalNum;
+          if (this.serviceNumber>0) {
+              this.serviceChart = true;
+          } else {
+            this.serviceChart = false;
+          }
             this.CUChartData = {
                 series: [{
                     data:data.customerServiceList
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
index 34954314..ba847ecb 100644
--- a/usecaseui-portal/src/app/home/home.component.html
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -22,21 +22,52 @@
       <h4>{{"i18nTextDefine_SERVICES" | translate}}</h4>
       <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
       <p>{{serviceNumber}} {{"services has been created" | translate}}</p> -->
-      <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie>
+      <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData" *ngIf="serviceChart"></app-pie>
+      <div *ngIf="!serviceChart"
+        style="color: #ddd; font-weight: 700;font-size: 19px;height: 200px;text-align: center;line-height: 8;">No Service Instances </div>
+
       <div>
-        <h5><span>{{"i18nTextDefine_Total" | translate}}:</span> {{serviceNumber}} <span>{{"i18nTextDefine_cutomers_and" | translate}}</span> {{serviceNumber}} <span>{{"i18nTextDefine_service_instance" | translate}}</span></h5>
+        <h5><span>{{"i18nTextDefine_Total" | translate}}:</span> {{serviceNumber}}
+          <span>{{"i18nTextDefine_cutomers_and" | translate}}</span> {{serviceNumber}}
+          <span>{{"i18nTextDefine_service_instance" | translate}}</span></h5>
       </div>
       <p class="tip">
-        <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a>
+        <span  style="color:#3C4F8C"  (click) = "goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
       </p>
     </div>
-    <div class="PACKAGE" style="height: 37%;margin-top: 3%">
-      <h4 style="margin-bottom: 50px">{{"i18nTextDefine_PACKAGE" | translate}}</h4>
+    <div class="PACKAGE" style="height: 43%;margin-top: 3%">
+      <h4>{{"i18nTextDefine_PACKAGE" | translate}}</h4>
       <div class="details">
-        <li> <div class="detailstoplin" *ngFor="let item of userdata"> <div>{{item.name}}</div> <div> <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar></div> <div>{{item.value1}}/{{item.value2}}</div></div> </li>
+        <li>
+          <div class="detailstoplin">
+            <div><span></span> NS</div>
+            <div>
+              <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar>
+            </div>
+            <div>{{NSdata}}</div>
+          </div>
+        </li>
+        <li>
+            <div class="detailstoplin">
+              <div><span style="background-color:#BCECB8;"></span> VNF</div>
+              <div>
+                <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData1"></app-bar>
+              </div>
+              <div>{{Vnfdata}}</div>
+            </div>
+          </li>
+          <li>
+              <div class="detailstoplin">
+                <div><span style="background-color:#ACCAF4;"></span> PNF</div>
+                <div>
+                  <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData2"></app-bar>
+                </div>
+                <div>{{PnfData}}</div>
+              </div>
+            </li>
       </div>
-      <p class="tip">
-        <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a>
+      <p class="tip" style="margin-top: 20px;">
+        <span style="color:#3C4F8C" (click) = "goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span>
       </p>
     </div>
   </div>
diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less
index 6d57fbf2..4297f5bb 100644
--- a/usecaseui-portal/src/app/home/home.component.less
+++ b/usecaseui-portal/src/app/home/home.component.less
@@ -28,7 +28,7 @@
     .services,.PACKAGE{
         background-color: #fff;
         width: 100%;
-        height: 60%;
+        height: 57%;
         border-radius: 5px;
         padding: 28px 22px;
         clear: both;
@@ -47,8 +47,8 @@
         }
         h5 {
             font: 500 18px/18px "ArialMT";
-            color:#0DA9E2;
-            margin: -2em 0 1em 0 ;
+            color: #0DA9E2;
+            margin: -1em 0 0em 0;
             span {
                 font-size: 14px;
                 font-family: "Arial";
@@ -70,21 +70,32 @@
             margin-bottom: 48px;
         }
         .details {
+            li:first-child{
+                border-top: 0.5px solid #ededed; 
+            }
             li {
-                border-bottom:0.5px solid rgba(237,237,237,1);
-                border-radius:4px;
-                line-height: 45px;
+                border-bottom: 0.5px solid #ededed;
+                border-radius: 4px;
+                line-height: 40px;
                 font-size: 14px;
                 color: #3C4F8C;
                 font-family:"ArialMT";
                 .detailstoplin {
                     width: 100%;
-                    height: 50px;
-                    border-top: 0.5px solid #ededed;
+                    height: 40px;
+                    /* border-top: 0.5px solid #ededed; */
                     border-radius: 4px;
                     div:first-child{
                         width: 20%;
                         float: left;
+                        span{
+                            height: 12px;
+                            width: 12px;
+                            margin-left: 2px;
+                            border-radius: 6px;
+                            background-color: #FECE72;
+                            display: inline-block;
+                        }
                     }
                     div:nth-child(2){
                         width: 65%;
@@ -106,7 +117,7 @@
             color: #3C4F8C;
             font-size: 16px;
             float: right;
-            margin-top: 20px;
+            // margin-top: 20px;
             margin-bottom: 0!important;
             line-height: 35px;
             border-radius: 5px;
@@ -176,7 +187,7 @@
             }
             .alarm-name{
                 text-align: center;
-                margin-top: 15px;
+                // margin-top: 15px;
             }
             .tip{
                 width: 110px;
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
index 9bd02941..4e18c71c 100644
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -16,7 +16,8 @@
 import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
 import { HomesService } from '../homes.service';
 import { slideToRight } from '../animates';
-import {TranslateService} from "@ngx-translate/core";
+import { TranslateService } from "@ngx-translate/core";
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-home',
@@ -27,16 +28,17 @@ import {TranslateService} from "@ngx-translate/core";
 export class HomeComponent implements OnInit {
   @HostBinding('@routerAnimate') routerAnimateState;
 
-  constructor(private myhttp: HomesService) { }
+  constructor(private myhttp: HomesService,private router:Router) { }
 
   ngOnInit() {
     this.getListSortMasters();
     this.getSourceNames();
     this.getHomeServiceData();
-    // this.getHomePerformanceData();
     this.getHomeAlarmData();
     this.getHomeAlarmChartData();
-    this.getHomeServiceBarData();
+    this.getHomeServiceBarNsData();
+    this.getHomeServiceBarVnfData();
+    this.getHomeServiceBarPnfData();
   }
   
 
@@ -45,7 +47,7 @@ export class HomeComponent implements OnInit {
   serviceChartData:Object;
   serviceChartInit:Object = {
   backgroundColor: '#fff',
-    height: 300,
+    height: 200,
     option:{
       legend: {
         orient: 'vertical',
@@ -93,12 +95,18 @@ export class HomeComponent implements OnInit {
     }
   };
   // gethomeServiceData
+  serviceChart = true;
   getHomeServiceData(){
     this.myhttp.getHomeServiceData()
     .subscribe(
       (data)=>{
         // console.log(data);
         this.serviceNumber = data.serviceTotalNum;
+          if (this.serviceNumber > 0) {
+            this.serviceChart = true;
+          } else {
+            this.serviceChart = false;
+          }
         this.serviceChartData = {
           series:[{data:data.customerServiceList}]
         };
@@ -110,16 +118,6 @@ export class HomeComponent implements OnInit {
     )
   }
 
-    // performance
-    // performanceVnfNum = 0;
-    // performanceVmNum = 0;
-    // getHomePerformanceData() {
-    //   this.myhttp.getHomePerformanceData()
-    //     .subscribe((data) => {
-    //       this.performanceVnfNum = data.length;
-    //     })
-    // }
-
     // VM alarm
     VMAlarmChartData: Object;
     VMAlarmChartInit: Object = {
@@ -287,6 +285,8 @@ export class HomeComponent implements OnInit {
   
    // services 
   servicesBarChartData: Object;
+  servicesBarChartData1: Object;
+  servicesBarChartData2: Object;
   serviceBarChartInit: Object = {
     height: 40,
     width: 160,
@@ -298,11 +298,10 @@ export class HomeComponent implements OnInit {
         
       },
       xAxis: {
-        // data: [],
         type: 'value',
         show: false,
         min: 0,
-        max: 80,
+        max: 100,
         axisTick: {
           show: false
         },
@@ -319,13 +318,24 @@ export class HomeComponent implements OnInit {
         name: 'a',
         silent: true,
         animation: false,
-        data: [80],
+        data: [],
         stack: 'income',
         barWidth: 12,
         itemStyle: {
           normal: {
-            color: '#7AC0EF',
-            barBorderRadius: [10, 10, 10, 10]
+            // color: {
+            //   type: 'bar',
+            //   colorStops: [{
+            //     offset: 0,
+            //     color: '#FDAC63' 
+            //   }, {
+            //     offset: 1,
+            //     color: '#FECE72' 
+            //   }],
+            //   globalCoord: false,
+
+            // },
+            // barBorderRadius: [10, 10, 10, 10]
           }
         },
       }, {
@@ -333,7 +343,7 @@ export class HomeComponent implements OnInit {
         name: '',
         animation: false,
         silent: true,
-        data: [60],
+        data: [100],
         tooltip: {
           show: false
         },
@@ -354,35 +364,106 @@ export class HomeComponent implements OnInit {
       ]
     }
   }
-  userdata;
-  getHomeServiceBarData() {
-    this.myhttp.getHomeServiceBarData()
+
+
+  NSdata: number;
+  Vnfdata: number;
+  PnfData: number;
+  getHomeServiceBarNsData() {
+    this.myhttp.getHomeServiceBarNsData()
       .subscribe((data) => {
-        this.userdata = data.customerServiceList;
-        let Val1;
-        let Val2;
-        let MIN: number = 0;
-        let MAX: number = Val1;
-        Val1 = data.customerServiceList[1].value1;
-        Val2 = data.customerServiceList[1].value2;
-        if (Val1 > Val2) {
-          MIN = 0;
-          MAX = Val1;
-        } else {
-          MIN = Val1 - Val2;
-          MAX = Val2;
-        }
+        this.NSdata = data.length;
         this.servicesBarChartData = {
-          xAxis: {
-            min: MIN,
-            max: MAX,
-          },
           series: [
-            { data: [Val1] },
-            { data: [Val1 - Val2] },
+            {
+              data: [this.NSdata],
+              itemStyle: {
+                normal: {
+                  color: {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#FDAC63'
+                    }, {
+                      offset: 1,
+                      color: '#FECE72' 
+                    }],
+                    globalCoord: false, 
+                  },
+                  barBorderRadius: [10, 10, 10, 10]
+                }
+              },
+            },
+            { data: [100] },
+
+          ]
+        }
+      }, (err) => {
+        console.log(err);
+      })
+  }
+
+  getHomeServiceBarVnfData() {
+    this.myhttp.getHomeServiceBarVnfData()
+      .subscribe((data) => {
+        this.Vnfdata = data.length;
+        this.servicesBarChartData1 = {
+          series: [
+            {
+              data: [this.Vnfdata],
+              itemStyle: {
+                normal: {
+                  color: {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#9AD09F' 
+                    }, {
+                      offset: 1,
+                      color: '#BCECB8' 
+                    }],
+                    globalCoord: false, 
+
+                  },
+                  barBorderRadius: [10, 10, 10, 10]
+                }
+              },
+            },
+            { data: [100] },
+          ]
+        }
+      }, (err) => {
+        console.log(err);
+      })
+  }
+
+  getHomeServiceBarPnfData() {
+    this.myhttp.getHomeServiceBarPnfData()
+      .subscribe((data) => {
+        this.PnfData = data.length;
+        this.servicesBarChartData2 = {
+          series: [
+            { data: [this.PnfData],
+              itemStyle: {
+                normal: {
+                  color: {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#71ADEF' 
+                    }, {
+                      offset: 1,
+                      color: '#ACCAF4' 
+                    }],
+                    globalCoord: false, 
+
+                  },
+                  barBorderRadius: [10, 10, 10, 10]
+                }
+              },},
+            { data: [100] },
           ]
         }
-                console.log(this.servicesBarChartData)
       }, (err) => {
         console.log(err);
       })
@@ -398,7 +479,7 @@ export class HomeComponent implements OnInit {
       this.myhttp.getListSortMasters()
           .subscribe((data)=>{
               this.listSortMasters = JSON.stringify(data);
-              console.log(this.listSortMasters);
+        // console.log(this.listSortMasters);
               sessionStorage.setItem('listSortMasters',this.listSortMasters)
           })
   }
@@ -425,7 +506,7 @@ export class HomeComponent implements OnInit {
       endTime:nowTime,
       format:"day"
     }
-    console.log(obj);
+    // console.log(obj);
     this.myhttp.getHomeAlarmChartData(obj)
       .subscribe((data)=>{
         this.alarmLineChartData = {
@@ -443,5 +524,11 @@ export class HomeComponent implements OnInit {
       })
   }
 
+  goback_services(){
+    this.router.navigateByUrl('/services/services-list');
+  }
+  goback_onboard(){
+    this.router.navigateByUrl('/services/onboard-vnf-vm');
+  }
 
 }
diff --git a/usecaseui-portal/src/app/homes.service.ts b/usecaseui-portal/src/app/homes.service.ts
index a556a954..dc0b5cef 100644
--- a/usecaseui-portal/src/app/homes.service.ts
+++ b/usecaseui-portal/src/app/homes.service.ts
@@ -22,13 +22,17 @@ import { homeData, homeVmLineData, servicesSelectData, servicesTableData, create
 export class HomesService {
 
   constructor(private http: HttpClient) { }
-  baseUrl = baseUrl.baseUrl
+  baseUrl = baseUrl.baseUrl;
+  baseUrlbar = baseUrl.baseUrl + "/uui-lcm/";
   url = {
     home_serviceData: this.baseUrl + "/uui-lcm/serviceNumByCustomer",
     home_performanceData: this.baseUrl + "/performance/queryAllSourceNames",
     home_alarmData: this.baseUrl + "/alarm/statusCount",
     home_alarmChartData: this.baseUrl + "/alarm/diagram",
-    home_servicebarData:this.baseUrl + "",	
+    home_servicebarData:this.baseUrl + "",
+    home_servicebarnsData: this.baseUrlbar + "ns-packages",
+    home_servicebarvnfData: this.baseUrlbar + "vnf-packages",
+    home_servicebarpnfData: this.baseUrlbar + "pnf-packages",	
     sourceNames: this.baseUrl + "/alarm/getSourceNames",
     listSortMasters:this.baseUrl+"/listSortMasters",
     currentLanguage:this.baseUrl+"/ONAPPORTAL/auxapi/languageSetting/user/",
@@ -71,6 +75,15 @@ export class HomesService {
    getHomeServiceBarData(){
     return this.http.get<any>(this.url.home_servicebarData);
   }
+  getHomeServiceBarNsData(){
+    return this.http.get<any>(this.url.home_servicebarnsData);
+  }
+  getHomeServiceBarVnfData(){
+    return this.http.get<any>(this.url.home_servicebarvnfData);
+  }
+  getHomeServiceBarPnfData(){
+    return this.http.get<any>(this.url.home_servicebarpnfData);
+  }
 
    // alarm data
    getAlarmFormData(currentPage: number, pageSize: number, sourceName?: string, priority?: string, startTime?: string, endTime?: string, vfStatus?: string) {