feat: add intent based service

Signed-off-by: liuwh7 <liuwh7@asiainfo.com>
Change-Id: If63eb5e61f01751771ad090728f33214077edd6f
Issue-ID: USECASEUI-605

6 files changed, 360 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html
new file mode 100644
index 00000000..a07f948c
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html
@@ -0,0 +1,39 @@
+<div class="main">
+  <div class="divCls">
+    <table>
+      <tr>
+        <td>
+            <nz-form-label class= "colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">FinishedInstance</nz-form-label>
+        </td>
+        <td>
+          <nz-select
+            id="subscriptionType"
+            class= "colm-s-2"
+            [(ngModel)]="instanceId"
+            (ngModelChange)="queryInstancePerformance($event)"
+            nzAllowClear
+          >
+            <nz-option
+              *ngFor="let option of instanceLists"
+              [nzValue]="option.instanceId"
+              [nzLabel]="option.name"
+            ></nz-option>
+          </nz-select>
+        </td>
+      </tr>
+    </table>
+  </div>
+  <div class="flexDiv">
+    <div class="topocontainer">
+      <div
+        id="chartLine"
+        echarts 
+        [initOpts]="initOpts"
+        [options]="lineOption" 
+        [merge]="updateOption"
+        (chartInit)="chartInit($event)">
+          Line Chart
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less
new file mode 100644
index 00000000..f7db5523
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less
@@ -0,0 +1,99 @@
+#mynetwork {
+  width: 100%;
+  height: calc(~"100vh - 300px");
+  border: 1px solid lightgray;
+  margin-right: 40px;
+  // background-color: #333333;
+}
+
+
+:host ::ng-deep .ant-form-item-label label {
+  color:  var(--on-primary) ;
+  background-color:var(--primary);
+}
+
+:host ::ng-deep .ant-select-dropdown-menu-item{
+  color: var(--on-primary) ;
+  background-color:var(--primary);
+
+}
+:host ::ng-deep .ant-select-selection__rendered {
+  background-color:var(--primary);
+
+}
+:host ::ng-deep .ant-select-selection--single {
+  background-color:var(--primary);
+
+}
+
+:host ::ng-deep .ant-select-selection-selected-value {
+
+  color: var(--on-primary) !important ;
+
+}
+
+@media only screen and (min-width: 600px) {    
+.flexDiv {
+  display: flex!important; 
+}
+}
+@media only screen and (min-width: 768px) {    
+.flexDiv {
+  display: flex!important; 
+}  
+}
+
+.font-size{
+  font-size: 17px;
+}
+.font-weight{
+  font-weight:bold;
+}
+
+.refreshBtn{
+  right: 580px;
+  position: absolute;
+  top: 35px;
+  z-index: 1
+}
+
+:host ::ng-deep .ant-form-item-label label {
+  color:  var(--on-primary) ;
+}
+
+:host ::ng-deep .ant-select-selection__placeholder
+{
+  color: var(--on-primary);
+}
+
+:host ::ng-deep .ant-select-arrow {
+
+
+  color:  var(--on-primary);
+  font-size: 12px;
+}
+
+
+.popup-table-row
+{
+  color: aqua;
+}
+
+.divCls{
+  display: inline-block;
+  width: 100%;
+  padding-bottom: 10px;
+   color : var(--on-lables) ; 
+ }
+
+ .main {
+    //  padding-left:80px
+ }
+ .ant-col-sm-6 {
+     width:100%;
+ }
+
+ #subscriptionType, #serviceInstance {
+     width: 250px;
+ }
+
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts
new file mode 100644
index 00000000..8da138bf
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts
@@ -0,0 +1,199 @@
+import { HttpClient } from "@angular/common/http";
+import { Component, OnInit } from "@angular/core";
+import { NzMessageService } from "ng-zorro-antd";
+import { intentBaseService } from "../../../../core/services/intentBase.service";
+
+@Component({
+	selector: "app-monitor-facps-service",
+	templateUrl: "./monitor-facps-service.component.html",
+	styleUrls: ["./monitor-facps-service.component.less"],
+})
+export class MonitorFacpsServiceComponent implements OnInit {
+
+  constructor(
+    private nzMessage: NzMessageService,
+    private myHttp: intentBaseService,
+    private http: HttpClient
+  ) {}
+  
+	selectedSubscriptionType: string = "";
+	selectedServiceInstance: string = "";
+	selectedTopology: string = "";
+        instanceId: string = "";
+  chartData: any = {
+    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: [
+      {
+        data: [
+          30,
+          45,
+          34,
+          35,
+          43,
+          56,
+          36,
+          53,
+          42,
+          45,
+          44,
+          35,
+          32
+        ] 
+      },
+      {
+        data: [
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60,
+          60
+        ]
+      }
+    ]
+  };
+	initData: any = {
+		height: 320,
+		option: {
+			legend: { bottom: "0px", data: ["RATE", "MAXRATE"] },
+			xAxis: { data: [] },
+			series: [
+				{
+					name: "RATE",
+					type: "line",
+					itemStyle: { color: "#70ACEC" },
+					data: [],
+				},
+        {
+          name: 'MAXRATE',
+          type: 'line',
+          step: 'end',
+          itemStyle: {
+            color: "#3BCD79"
+          },
+          data: []
+        }
+			],
+		},
+	};
+  
+	initOpts: any;
+	lineOption: any;
+	chartIntance: any;
+	updateOption: any;
+
+	instanceLists: any[] = [];
+
+  ngOnInit() {
+    this.getFinishedInstanceInfo();
+		this.initOpts = {
+			renderer: "canvas",
+			height: this.initData.height,
+			width: this.initData.width,
+		};
+		this.lineOption = {
+			tooltip: this.initData.option.tooltip,
+			icon: "circle",
+			legend: this.initData.option.legend,
+			dataZoom: this.initData.option.dataZoom,
+			grid: {
+				left: "0%",
+				right: "3%",
+				top: "10%",
+				bottom: "18%",
+				containLabel: true,
+			},
+			xAxis: {
+				axisTick: {
+					show: false,
+				},
+				axisLine: {
+					show: false,
+				},
+				axisLabel: {
+					color: "#3C4F8C",
+				},
+				data: this.initData.option.xAxis.data,
+			},
+			yAxis: {
+				axisTick: {
+					show: false,
+				},
+				axisLine: {
+					show: false,
+				},
+				axisLabel: {
+					color: "#3C4F8C",
+				},
+				splitLine: {
+					lineStyle: {
+						type: "dashed",
+					},
+				},
+			},
+			series: this.initData.option.series,
+		};
+	}
+
+	chartInit(chart) {
+		this.chartIntance = chart;
+	}
+
+  getFinishedInstanceInfo() {
+    this.myHttp.getFinishedInstanceInfo().subscribe(
+      (response) => {
+        const { code, message, data } = response;
+        if (code !== 200) {
+          this.nzMessage.error(message);
+          return;
+        }
+        this.instanceLists = [...data];
+      },
+      (err) => {
+        console.log(err);
+      }
+    )
+  }
+
+	queryInstancePerformance(instanceId) {
+    this.myHttp.queryInstancePerformanceData({ instanceId}).subscribe(
+      (response) => {
+        const { code, message, data } = response;
+        if (code !== 200) {
+          this.nzMessage.error(message);
+          return;
+        }
+        if(this.chartIntance){
+          this.updateOption = data;
+        }
+      },
+      (err) => {
+        console.log(err);
+      }
+    )
+  }
+
+}
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html
new file mode 100644
index 00000000..554d8887
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html
@@ -0,0 +1,5 @@
+<nz-tabset class="slicing">
+  <nz-tab [nzTitle]="'i18nTextDefine_monitorService' | translate">
+    <app-monitor-facps-service></app-monitor-facps-service>
+  </nz-tab>
+</nz-tabset>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts
new file mode 100644
index 00000000..39fd95e8
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts
@@ -0,0 +1,18 @@
+import { Component, HostBinding, OnInit } from '@angular/core';
+import { slideToRight } from '../../../shared/utils/animates';
+
+@Component({
+  selector: 'app-monitor-management-service',
+  templateUrl: './monitor-management-service.component.html',
+  styleUrls: ['./monitor-management-service.component.less'],
+  animations: [slideToRight]
+})
+export class MonitorManagementService implements OnInit {
+
+  @HostBinding('@routerAnimate') routerAnimateState;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}
\ No newline at end of file