feat:add detail model of slicing nsi page and add nssi detail model Base code

Change-Id: I1636bc07415a8e6588bfa742333c684351082d62
Issue-ID: USECASEUI-369
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

7 files changed, 162 insertions, 12 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
index a90a90d1..47bd9e59 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
@@ -1,4 +1,64 @@
-<p>
-  nsi-model works!
-  <button (click)="button()">我是nsi--button</button>
-</p>
+<nz-list class="taskmodel_list"  nzBordered [nzHeader]="'Carry Slicing Businress List ：'" [nzFooter]="null">
+  <nz-table
+          #businessTable
+          [nzData]="businessList"
+          [nzShowPagination]="false"
+          nzHideOnSinglePage
+  >
+    <thead>
+    <tr>
+      <th>Service Instance Id</th>
+      <th>Service Instance Name</th>
+      <th>Service Type</th>
+      <th>Status</th>
+      <th width="100px">Detail</th>
+    </tr>
+    </thead>
+    <tbody>
+    <ng-template ngFor let-data [ngForOf]="businessTable.data" let-i="index">
+      <tr>
+        <td>{{ data.service_instance_id }}</td>
+        <td>{{ data.service_instance_name }}</td>
+        <td>{{ data.service_type }}</td>
+        <td>{{ data.service_snssai }}</td>
+        <td>{{ data.orchestration_status }}</td>
+        <td>
+          <a (click)="showBusinessDetail(data)">detail</a>
+        </td>
+      </tr>
+    </ng-template>
+    </tbody>
+  </nz-table>
+</nz-list>
+<nz-list class="taskmodel_list"  nzBordered [nzHeader]="'Include Slicing NSSI List ：'" [nzFooter]="null">
+  <nz-table
+          #nssiTable
+          [nzData]="nssiList"
+          [nzShowPagination]="false"
+          nzHideOnSinglePage
+  >
+    <thead>
+    <tr>
+      <th>Service Instance Id</th>
+      <th>Service Instance Name</th>
+      <th>Service Type</th>
+      <th>Status</th>
+      <th width="100px">Detail</th>
+    </tr>
+    </thead>
+    <tbody>
+    <ng-template ngFor let-data [ngForOf]="nssiTable.data" let-i="index">
+      <tr>
+        <td>{{ data.service_instance_id }}</td>
+        <td>{{ data.service_instance_name }}</td>
+        <td>{{ data.service_type }}</td>
+        <td>{{ data.environment_context }}</td>
+        <td>{{ data.orchestration_status }}</td>
+        <td>
+          <a (click)="showNssiDetail(data)">detail</a>
+        </td>
+      </tr>
+    </ng-template>
+    </tbody>
+  </nz-table>
+</nz-list>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts
index 1b8a6627..070a483f 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts
@@ -1,6 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {NzModalService} from "ng-zorro-antd";
+import {SlicingTaskServices} from '.././../../../../../core/services/slicingTaskServices';
 import { SlicingBusinessModelComponent } from '../../slicing-business-management/slicing-business-model/slicing-business-model.component';
+import { NssiModelComponent } from '../../nssi-management/nssi-model/nssi-model.component';
 @Component({
   selector: 'app-nsi-model',
   templateUrl: './nsi-model.component.html',
@@ -9,14 +11,47 @@ import { SlicingBusinessModelComponent } from '../../slicing-business-management
 export class NsiModelComponent implements OnInit {
 
     constructor(
+        private myhttp: SlicingTaskServices,
         private modalService: NzModalService
     ) {
     }
-
+    @Input() nsiId;
+    businessList: any[];
+    nssiList: any[];
   ngOnInit() {
+      this.getNsiDetail()
   }
-    button(){
-        this.modalService.create({nzContent:SlicingBusinessModelComponent});
-        console.log(2222)
+    getNsiDetail() {
+        this.myhttp.getSlicingNsiDetail(this.nsiId).subscribe(res => {
+            const {result_header: {result_code}, result_body: {hosted_business_list,included_nssi_list} } = res;
+            if (+result_code === 200) {
+                this.businessList = hosted_business_list;
+                this.nssiList = included_nssi_list;
+            }
+        })
+    }
+    showBusinessDetail(data){
+        this.modalService.create({
+            nzContent:SlicingBusinessModelComponent,
+            nzTitle:"Detail",
+            nzWidth:"70%",
+            nzOkText: null,
+            nzCancelText: null,
+            nzComponentParams:{
+                businessId:data.service_instance_id
+            }
+        });
+    }
+    showNssiDetail(data){
+        this.modalService.create({
+            nzContent:NssiModelComponent,
+            nzTitle:"Detail",
+            nzWidth:"70%",
+            nzOkText: null,
+            nzCancelText: null,
+            nzComponentParams:{
+                nssiId:data.service_instance_id
+            }
+        });
     }
 }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts
index 48c8d5ac..22cc3eec 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import {BUSINESS_STATUS} from '../../../../../../../constants/constants';
 import {SlicingTaskServices} from "../../../../../../core/services/slicingTaskServices";
+import {NsiModelComponent} from "../nsi-model/nsi-model.component";
+import { NzModalService } from 'ng-zorro-antd';
 @Component({
   selector: 'app-nsi-table',
   templateUrl: './nsi-table.component.html',
@@ -9,7 +11,8 @@ import {SlicingTaskServices} from "../../../../../../core/services/slicingTaskSe
 export class NsiTableComponent implements OnInit {
 
     constructor(
-        private myhttp: SlicingTaskServices
+        private myhttp: SlicingTaskServices,
+        private modalService: NzModalService
     ) {
     }
 
@@ -53,7 +56,16 @@ export class NsiTableComponent implements OnInit {
     searchData(reset: boolean = false) {
         this.getNsiList();
     }
-    showdetail(data){
-
+    showdetail(data) {
+        const nsiModal = this.modalService.create({
+            nzTitle:"Detail",
+            nzContent: NsiModelComponent,
+            nzWidth:"70%",
+            nzOkText: null,
+            nzCancelText: null,
+            nzComponentParams:{
+                nsiId:data.service_instance_id
+            }
+        })
     }
 }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html
new file mode 100644
index 00000000..b661e26f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html
@@ -0,0 +1,3 @@
+<p>
+  nssi-model works!
+</p>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.less
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.spec.ts
new file mode 100644
index 00000000..2fc1336e
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NssiModelComponent } from './nssi-model.component';
+
+describe('NssiModelComponent', () => {
+  let component: NssiModelComponent;
+  let fixture: ComponentFixture<NssiModelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NssiModelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NssiModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts
new file mode 100644
index 00000000..11da9087
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-nssi-model',
+  templateUrl: './nssi-model.component.html',
+  styleUrls: ['./nssi-model.component.less']
+})
+export class NssiModelComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}