Dashboard finish

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

5 files changed, 177 insertions, 152 deletions

diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts
index 3f563b6e..58c75e7b 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.ts
+++ b/usecaseui-portal/src/app/alarm/alarm.component.ts
@@ -132,13 +132,16 @@ export class AlarmComponent implements OnInit {
       startTime: this.startTime,
       endTime: this.endTime
     }
-    this.myhttp.getHomePerformanceChartData(paramsObj)
+    this.myhttp.getHomeAlarmChartData(paramsObj)
       .subscribe((data) => {
         this.alarmChartData = {
-          series: [
-            { data: data.CPU },
-            { data: data.CPU },
-            { data: data.Memory }
+          xAxis:{
+            data:data.dataList
+          },
+          series:[
+            {data:data.allList},
+            {data:data.ActiveList},
+            {data:data.closedList}
           ]
         }
       }, (err) => {
@@ -151,13 +154,16 @@ export class AlarmComponent implements OnInit {
       alarmSourceName: this.sourceName,
       day:"day"
     }
-    this.myhttp.getHomePerformanceChartData(paramsObj)
+    this.myhttp.getHomeAlarmChartData(paramsObj)
       .subscribe((data) => {
         this.alarmChartData = {
-          series: [
-            { data: data.CPU },
-            { data: data.CPU },
-            { data: data.Memory }
+          xAxis:{
+            data:data.dataList
+          },
+          series:[
+            {data:data.allList},
+            {data:data.ActiveList},
+            {data:data.closedList}
           ]
         }
       }, (err) => {
@@ -169,13 +175,16 @@ export class AlarmComponent implements OnInit {
       alarmSourceName: this.sourceName,
       day:"month"
     }
-    this.myhttp.getHomePerformanceChartData(paramsObj)
+    this.myhttp.getHomeAlarmChartData(paramsObj)
       .subscribe((data) => {
         this.alarmChartData = {
-          series: [
-            { data: data.CPU },
-            { data: data.CPU },
-            { data: data.Memory }
+          xAxis:{
+            data:data.dataList
+          },
+          series:[
+            {data:data.allList},
+            {data:data.ActiveList},
+            {data:data.closedList}
           ]
         }
       }, (err) => {
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.ts b/usecaseui-portal/src/app/components/charts/line/line.component.ts
index fa9c0367..fde63ed6 100644
--- a/usecaseui-portal/src/app/components/charts/line/line.component.ts
+++ b/usecaseui-portal/src/app/components/charts/line/line.component.ts
@@ -39,7 +39,7 @@ export class LineComponent implements OnInit {
         axisLine:{
           show: false
         },
-          data: ['01','02','04','06','08','10','12','14','16','18','20','22','24']
+          data: this.initData.option.xAxis.data
       },
       yAxis: {
         axisTick: {
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
index b2fa5eb4..c93d3f76 100644
--- a/usecaseui-portal/src/app/home/home.component.html
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -29,14 +29,14 @@
       <div class="poerformance">
         <h4>{{"PERFORMANCE" | translate}}</h4>
         <div class="pfVnf">
-          <h3 class="pfVnfNum">126</h3>
+          <h3 class="pfVnfNum">{{performanceVnfNum}}</h3>
           <p>Performance VNF</p>
-          <img src="../../assets/images/VNF.png" alt="VNF">
+          <img src="./assets/images/VNF.png" alt="VNF">
         </div>
         <div class="pfVmPm">
-          <h3 class="pfVmPmNum">286</h3>
+          <h3 class="pfVmPmNum">{{performanceVmNum}}</h3>
           <p>Performance VM/PM</p>
-          <img src="../../assets/images/VM.png" alt="VM/PM">
+          <img src="./assets/images/VM.png" alt="VM/PM">
         </div>
       </div>
       <div class="alarm">
@@ -46,16 +46,16 @@
     </div>
 
     <div class="rb-content">
-      <h4>{{"VM Performance" | translate}}</h4>
+      <h4>{{"Alarm" | translate}}</h4>
       <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
-        <button nz-button nz-dropdown><span>{{vmPerformanceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+        <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
         <ul nz-menu>
-          <li nz-menu-item (click)="vmPerformanceNameSelect(item)" *ngFor="let item of vmPerformanceNames">
+          <li nz-menu-item (click)="sourceNameSelect(item)" *ngFor="let item of sourceNameList">
             <a>{{item}}</a>
           </li>
         </ul>
       </nz-dropdown>
-      <app-line [initData]="performanceChartInit" [chartData]="performanceChartData"></app-line>
+      <app-line [initData]="alarmLineChartInit" [chartData]="alarmLineChartData"></app-line>
     </div>
   </div>
 
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
index 39fab25d..5d91e357 100644
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -14,38 +14,15 @@ export class HomeComponent implements OnInit {
   constructor(private myhttp: MyhttpService) { }
 
   ngOnInit() {
-    this.getHomeAllData();
+    this.getSourceNames();
+    this.getHomeServiceData();
+    this.getHomePerformanceData();
+    this.getHomeAlarmData();
+    this.getHomeAlarmChartData();
   }
   
-  // alarm饼图
-  alarmChartData:Object;
-  alarmChartInit:Object = {
-    height: 164,
-    option:{
-      legend: {
-        orient: 'vertical',
-        left: '0px',
-        bottom: '0px',
-        data: ['Active','Closed']
-      },
-      color:["#fb6e6e","#526b75"],
-      series:[{
-        name:"告警信息",
-        radius : '55%',
-        label:{
-          normal:{
-            show: false,
-          },
-          emphasis: {
-            show: true,
-            formatter:'{b}\n{c},{d}%',
-          }
-        }
-      }]
-    }
-  };
 
-  // services饼图
+  // services
   serviceNumber:number = 0;
   serviceChartData:Object;
   serviceChartInit:Object = {
@@ -84,40 +61,141 @@ export class HomeComponent implements OnInit {
       }]
     }
   };
+  // gethomeServiceData
+  getHomeServiceData(){
+    this.myhttp.getHomeServiceData()
+    .subscribe(
+      (data)=>{
+        // console.log(data);
+        this.serviceNumber = data.serviceTotalNum;
+        this.serviceChartData = {
+          series:[{data:data.customerServiceList}]
+        };
+        // console.log(this.serviceChartData);
+      },
+      (err)=>{
+        console.log(err);
+      }
+    )
+  }
+
+  // performance
+  performanceVnfNum = 0;
+  performanceVmNum = 0;
+  getHomePerformanceData(){
+    this.myhttp.getHomePerformanceData()
+      .subscribe((data)=>{
+        this.performanceVnfNum = data.length;
+      })
+  }
+
+  // alarm饼图
+  alarmChartData:Object;
+  alarmChartInit:Object = {
+    height: 164,
+    option:{
+      legend: {
+        orient: 'vertical',
+        left: '0px',
+        bottom: '0px',
+        data: ['Active','Closed']
+      },
+      color:["#fb6e6e","#526b75"],
+      series:[{
+        name:"告警信息",
+        radius : '55%',
+        label:{
+          normal:{
+            show: false,
+          },
+          emphasis: {
+            show: true,
+            formatter:'{b}\n{c},{d}%',
+          }
+        }
+      }]
+    }
+  };
+  getHomeAlarmData(){
+    this.myhttp.getHomeAlarmData()
+      .subscribe((data)=>{
+        this.alarmChartData ={
+          series:[{
+            data:[{name:"Active",value:data[0]},{name:"Closed",value:data[1]}]
+          }]
+        };
+      })
+  }
 
-  // Performance线图
-  performanceChartData:Object;
-  performanceChartInit:Object = {
+  // alarm线图
+  alarmLineChartData:Object;
+  alarmLineChartInit:Object = {
     height:320,
     option:{
       legend: {
         bottom: '0px',
-        data: ['CPU','Memory']
+        data: ['All','Active','Closed']
+      },
+      xAxis:{
+        data:["2018-09-10 ","2018-09-11","2018-09-12","2018-09-13","2018-09-14",
+        "2018-09-15","2018-09-16","2018-09-17","2018-09-18","2018-09-19",
+        "2018-09-20","2018-09-21","2018-09-22"]
       },
       series : [
         {
-            name: 'CPU',
+            name: 'All',
             type: 'line',
-            data:[20,23,14,12,34,25,22,42,52,35,34,13,13]
+            data:[30,45,34,35,43,56,36,53,42,45,44,35,32]
         },
         {
-            name: 'Memory',
+            name: 'Active',
             type: 'line',
             data:[10,23,24,22,14,15,32,12,12,32,14,23,23]
+        },
+        {
+          name: 'Closed',
+          type: 'line',
+          data:[20,23,14,12,34,25,22,42,52,35,34,13,13]
         }
       ]
     }
   };
-  getPerformanceChartData(){
-    let paramsObj = {
-      vmPerformanceName:this.vmPerformanceNameSelected
+  // sourceName筛选框
+  sourceNameList = ['performanceNameOne'];
+  sourceNameSelected = null;
+  getSourceNames(){
+    this.myhttp.getSourceNames()
+      .subscribe((data)=>{
+        this.sourceNameList = data;
+      })
+  }
+  sourceNameSelect(item){
+    if(this.sourceNameSelected != item){
+      // console.log(item);
+      this.sourceNameSelected = item;
+      this.getHomeAlarmChartData()
+    } 
+  }
+  getHomeAlarmChartData(){
+    let nowTime = this.myhttp.dateformater( Date.now());
+    let startTime = this.myhttp.dateformater( Date.now()-30*24*60*60*1000 );
+    let obj = {
+      sourceName:this.sourceNameSelected,
+      startTime: startTime,
+      endTime:nowTime,
+      format:"day"
     }
-    this.myhttp.getHomePerformanceChartData(paramsObj)
+    console.log(obj);
+    this.myhttp.getHomeAlarmChartData(obj)
       .subscribe((data)=>{
-        this.performanceChartData = {
+        this.alarmLineChartData = {
+          xAxis:{
+            data:data.dataList
+          },
           series:[
-            {data:data.CPU},
-            {data:data.Memory}
+            {data:data.allList},
+            {data:data.ActiveList},
+            {data:data.closedList}
           ]
         }
       },(err)=>{
@@ -125,42 +203,5 @@ export class HomeComponent implements OnInit {
       })
   }
 
-  // vm筛选框
-  vmPerformanceNames = ['performanceNameOne'];
-  vmPerformanceNameSelected = this.vmPerformanceNames[0];
-  vmPerformanceNameSelect(item){
-    if(this.vmPerformanceNameSelected != item){
-      console.log(item);
-      this.vmPerformanceNameSelected = item;
-      this.getPerformanceChartData()
-    } 
-  }
-
-  // 获取数据
-  getHomeAllData(){
-    this.myhttp.getAllHomeData()
-    .subscribe(
-      (data)=>{
-        console.log(data);
-        this.alarmChartData ={
-          series:[{
-            data:data.alarm.chartdata
-          }]
-        };
-        this.serviceNumber = data.services.number;
-        this.serviceChartData ={
-          series:[{
-            data:data.services.chartdata
-          }]
-        };
-        this.vmPerformanceNames = data.Vm_performance.names;
-        this.vmPerformanceNameSelected = this.vmPerformanceNames[0];
-        this.getPerformanceChartData();
-      },
-      (err)=>{
-        console.log(err);
-      }
-    )
-  }
 
 }
diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts
index 53a25cec..b2ab91be 100644
--- a/usecaseui-portal/src/app/myhttp.service.ts
+++ b/usecaseui-portal/src/app/myhttp.service.ts
@@ -27,16 +27,15 @@ export class MyhttpService {
   
   // baseUrl = "./assets/json";
   // url={
-  //   allhome:this.baseUrl + "/homeAllData.json",
-  //   homeLineData:this.baseUrl + "/homePerformanceChartData.json",
-  //   serviceSelectList:this.baseUrl + "/servicesList.json",   //customer、serviceType
-  //   servicesTableData:this.baseUrl + "/servicesTableData.json",
-  //   onboardTableData:this.baseUrl + "/onboardTableData.json",
+  //   home_serviceData:this.baseUrl + "/home_serviceData.json",
+  //   home_performanceData:this.baseUrl + "/home_performanceData.json",
+  //   home_alarmData:this.baseUrl + "/home_alarmData.json",
+  //   home_alarmChartData:this.baseUrl + "/home_alarmChartData.json",
+  //   sourceNames:this.baseUrl + "/SourceName.json",
 
   //   customers:this.baseUrl + "/customers.json?",
   //   serviceType:this.baseUrl + "/serviceTypes.json?*_*",
-  //   servicesCategory:this.baseUrl + "/configuration_files/servicesCategory.json?",
-  //   serviceInstanceList:this.baseUrl + "/instanceTableData.json?",
+  //   servicesTableData:this.baseUrl + "/servicesTableData.json",
   //   serviceTemplates:this.baseUrl + "/serviceTemplates2.json?",
   //   templateParameters:this.baseUrl + "/*_*" + "ServiceTemplateParameters.json?",
   //   vimInfo:this.baseUrl + "/vimInfo.json?",
@@ -59,24 +58,20 @@ export class MyhttpService {
   //   connectivity:this.baseUrl + "/sotn-connectivity2.json?",
   //   vpnBinding:this.baseUrl + "/vpnbinding.json?",
   //   alarmFormData:this.baseUrl + "/alarmFormData.json?",
-  //   alarmFormDetailData:this.baseUrl + "/alarmFormDetailData.json?",
-  //   sourceName:this.baseUrl+ "/SorceName.json?"
   // }
 
   // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1';
   baseUrl = '/api/usecaseui-server/v1';
   url={
-    allhome:this.baseUrl + "/alarm/getAlarmDataByStatus/0",
-    homeLineData:this.baseUrl + "/...........",
-    serviceSelectList:this.baseUrl + "/xxxxxxxxxxxxx",
-    servicesTableData:this.baseUrl + "/xxxxxxxx.json",
-    onboardTableData:this.baseUrl + "/xxxxxxx.json",
-
+    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",
+    sourceNames:this.baseUrl + "/alarm/getSourceNames",
 
     customers:this.baseUrl + "/uui-lcm/customers",
     serviceType:this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions",
-    servicesCategory: "./assets/json/configuration_files/servicesCategory.json",
-    serviceInstanceList:this.baseUrl + '/uui-sotn/getServiceInstanceList',
+    servicesTableData:this.baseUrl + '/uui-sotn/getServiceInstanceList',
     serviceTemplates:this.baseUrl + "/uui-lcm/service-templates",
     templateParameters:this.baseUrl + "/uui-lcm/service-templates/" + "*_*" +"?toscaModelPath=",
     nstemplateParameters:this.baseUrl + "/uui-lcm/fetchNsTemplateData",
@@ -102,32 +97,26 @@ export class MyhttpService {
   }
 
   // home
-  getAllHomeData() {
-    return this.http.get<homeData>(this.url.allhome);
+  getHomeServiceData(){
+    return this.http.get<any>(this.url.home_serviceData);
+  }
+  getHomePerformanceData(){
+    return this.http.get<String[]>(this.url.home_performanceData);
   }
-  //home lin
-  getHomePerformanceChartData(paramsObj){
+  getHomeAlarmData(){
+    return this.http.get<any>(this.url.home_alarmData);
+  }
+  getHomeAlarmChartData(paramsObj){
     let params = new HttpParams({fromObject:paramsObj});
-    return this.http.get<homeVmLineData>(this.url.homeLineData,{params});
+    return this.http.get<any>(this.url.home_alarmChartData,{params});
   }
 
-  // servicesList data
-  // getServicesSelectData():Observable<HttpResponse<servicesSelectData>>{
-  //   return this.http.get<servicesSelectData>(this.url.serviceSelectList,{observe:'response'});
-  // }
+  // serviceTable list
   getServicesTableData(paramsObj):Observable<HttpResponse<servicesTableData>>{
     let params = new HttpParams({fromObject:paramsObj});
     return this.http.get<servicesTableData>(this.url.servicesTableData,{observe:'response',params});
   }
 
-  // onboard data
-  getOnboardTableData(paramsObj):Observable<HttpResponse<onboardTableData>>{
-    let params = new HttpParams({fromObject:paramsObj});
-    return this.http.get<onboardTableData>(this.url.onboardTableData,{observe:'response',params});
-  }
-
-
-
   //---------------------------------------------------------------------------------
 
   // Get all customers
@@ -140,21 +129,7 @@ export class MyhttpService {
     let url = this.url.serviceType.replace("*_*",customer.id);
     return this.http.get<any>(url);
   }
-  // Get service classification information, local configuration file
-  // getServicesCategory(){
-  //   return this.http.get<any>(this.url.servicesCategory);
-  // }
-  // list Tabular data
-  getInstanceTableData(paramsObj){
-    let params = new HttpParams({fromObject:paramsObj});
-    return this.http.get<any>(this.url.serviceInstanceList,{params});
-  }
 
-  // // Service details data
-  // getInstanceDetails(id){
-  //   let url = this.baseUrl + "/detailsData.json?id=" + id;
-  //   return this.http.get<instanceDetail>(url);
-  // }
 
   // Get all template types
   getAllServiceTemplates(type){