summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/services/slicing-management
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-11-21 19:13:58 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-11-21 19:14:08 +0800
commitbfe8df3f9b7409842ddf0c9fbf41ff8b9c17c1fa (patch)
tree4c1850e67e1efe17e65b6060950f6af2a5cd9ada /usecaseui-portal/src/app/views/services/slicing-management
parente83217f0f442f6ad2c376a384b7dcd2232b254bd (diff)
feat: add slicing management page in services module
Change-Id: I6a9d9e7aadaff30109859df4e866da5104f26330 Issue-ID: USECASEUI-352 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/services/slicing-management')
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html11
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html3
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less0
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts15
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html37
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less3
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts43
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html149
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less15
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts61
13 files changed, 409 insertions, 3 deletions
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
index 91062607..59401e02 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
@@ -1,3 +1,8 @@
-<p>
- slicing-management works!
-</p>
+<nz-tabset>
+ <nz-tab nzTitle="Slicing Task Management">
+ <app-slicing-task-management></app-slicing-task-management>
+ </nz-tab>
+ <nz-tab nzTitle="Slicing Resource Management">
+ <app-slicing-resource-management></app-slicing-resource-management>
+ </nz-tab>
+</nz-tabset> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html
new file mode 100644
index 00000000..0408552d
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html
@@ -0,0 +1,3 @@
+<p>
+ slicing-resource-management works!
+</p>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts
new file mode 100644
index 00000000..6a22984b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SlicingResourceManagementComponent } from './slicing-resource-management.component';
+
+describe('SlicingResourceManagementComponent', () => {
+ let component: SlicingResourceManagementComponent;
+ let fixture: ComponentFixture<SlicingResourceManagementComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SlicingResourceManagementComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SlicingResourceManagementComponent);
+ 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/slicing-resource-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts
new file mode 100644
index 00000000..38dc48c8
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-slicing-resource-management',
+ templateUrl: './slicing-resource-management.component.html',
+ styleUrls: ['./slicing-resource-management.component.less']
+})
+export class SlicingResourceManagementComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
new file mode 100644
index 00000000..6a5abe88
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
@@ -0,0 +1,37 @@
+<div>
+ <div nz-row>
+ <div nz-col nzSpan="6">
+ <span>Status:</span>
+ <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a person" [(ngModel)]="selectedValue">
+ <nz-option nzLabel="Jack" nzValue="jack"></nz-option>
+ <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>
+ <nz-option nzLabel="Tom" nzValue="tom"></nz-option>
+ </nz-select>
+ </div>
+ </div>
+ <div>
+ <nz-table #basicTable [nzData]="listOfData">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Age</th>
+ <th>Status</th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let data of basicTable.data">
+ <td>{{ data.name }}</td>
+ <td>{{ data.age }}</td>
+ <td>{{ data.status===0?"Checking Configuration":"Creating Slicing" }}</td>
+ <td>
+ <a (click)="showdetail(data)">Show Detail</a>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+ <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [modelData]="detailData"
+ (cancel)="showDetail=$event">
+ </app-slicing-task-model>
+</div> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less
new file mode 100644
index 00000000..1de685d6
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less
@@ -0,0 +1,3 @@
+nz-select {
+ width: 200px;
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts
new file mode 100644
index 00000000..a2631a98
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SlicingTaskManagementComponent } from './slicing-task-management.component';
+
+describe('SlicingTaskManagementComponent', () => {
+ let component: SlicingTaskManagementComponent;
+ let fixture: ComponentFixture<SlicingTaskManagementComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SlicingTaskManagementComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SlicingTaskManagementComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
new file mode 100644
index 00000000..ad29c5ed
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-slicing-task-management',
+ templateUrl: './slicing-task-management.component.html',
+ styleUrls: ['./slicing-task-management.component.less']
+})
+export class SlicingTaskManagementComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() { }
+ showDetail: boolean = false;
+ selectedValue = null;
+ detailData: object = {};
+ moduleTitle: string = "";
+ listOfData = [
+ {
+ key: '1',
+ name: 'John Brown',
+ age: 32,
+ status: 0
+ },
+ {
+ key: '2',
+ name: 'Jim Green',
+ age: 42,
+ status: 0
+ },
+ {
+ key: '3',
+ name: 'Joe Black',
+ age: 32,
+ status: 1
+ }
+ ];
+ showdetail(data: any) {
+ console.log(data, this.showDetail)
+ this.detailData = data;
+ this.showDetail = true;
+ this.moduleTitle = data.status === 0 ? "Check Configuration" : "View Progress";
+ }
+}
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
new file mode 100644
index 00000000..f864dc92
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
@@ -0,0 +1,149 @@
+<nz-modal [nzVisible]="showDetail" nzWidth="85%" [nzTitle]="moduleTitle" (nzOnCancel)="handleCancel()"
+ (nzOnOk)="handleOk()">
+ <nz-list class="taskmodel_list" [nzDataSource]="checkDetail" nzBordered [nzHeader]="'配置审核详情:'" [nzFooter]="null"
+ [nzRenderItem]="checkItem">
+ <ng-template #checkItem let-check>
+ <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+ <div nz-col nzSpan="10">
+ <span>Task ID: {{ check.id }}</span>
+ </div>
+ <div nz-col nzSpan="8">
+ <span>Task Name: {{ check.name }}</span>
+ </div>
+ <div nz-col nzSpan="6">
+ <span>S-NSSAI:{{ check.snssai }}</span>
+ </div>
+ </nz-list-item>
+ <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+ <div nz-col nzSpan="10">
+ <span>Arrived Time: {{ check.arrivedtime }}</span>
+ </div>
+ <div nz-col nzSpan="8">
+ <span>Status: {{ check.status }}</span>
+ </div>
+ </nz-list-item>
+ </ng-template>
+ </nz-list>
+
+ <nz-list class="taskmodel_list" [nzDataSource]="businessRequirement" nzBordered [nzHeader]="'业务需求信息:'"
+ [nzFooter]="null" [nzRenderItem]="businessItem">
+ <ng-template #businessItem let-item>
+ <nz-list-item>
+ <span class="ant-typography">Name:</span>
+ {{ item.name }}
+ </nz-list-item>
+ <nz-list-item>
+ <span class="ant-typography">S-NSSAI: </span>
+ {{ item.snssai }}
+ </nz-list-item>
+ <nz-list-item>
+ <span class="ant-typography">Time: </span>
+ {{ item.expiretime }}
+ </nz-list-item>
+ <nz-list-item>
+ <span class="ant-typography">Area: </span>
+ {{ item. area }}
+ </nz-list-item>
+ </ng-template>
+ </nz-list>
+
+ <nz-list class="taskmodel_list" [nzDataSource]="NSTinfo" nzBordered [nzHeader]="'匹配NST信息:'" [nzFooter]="null"
+ [nzRenderItem]="taskItem">
+ <ng-template #taskItem let-item>
+ <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+ <div nz-col nzSpan="12">
+ <span>NST ID: {{ item.id }}</span>
+ </div>
+ <div nz-col nzSpan="12">
+ <span>NST Name: {{ item.name }}</span>
+ </div>
+ </nz-list-item>
+ </ng-template>
+ </nz-list>
+
+
+ <div>
+ <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例:'" [nzFooter]="null">
+ <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+ <div nz-col nzSpan="12">
+ 切片实例 ID:
+ <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
+ <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+ </nz-select>
+ </div>
+ <div nz-col nzSpan="8">
+ 切片实例名称:{{selectedServiceName}}
+ </div>
+ <div nz-col nzSpan="4">
+ <button nz-button nzType="primary" (click)="resetService()">
+ <i nz-icon class="anticon anticon-plus"></i>
+ </button>
+ </div>
+ </nz-list-item>
+ <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+ <p class="listitem_subtitle" nz-col nzSpan="24">匹配的共享切片子网实例:</p>
+ <nz-card nzType="inner" nz-col nzSpan="24" nzTitle="无线域:">
+ <div nz-row [nzGutter]="8">
+ <div nz-col nzSpan="12">
+ 切片子网实例 ID:
+ <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
+ <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+ </nz-select>
+ </div>
+ <div nz-col nzSpan="8">
+ 切片子网实例名称:{{selectedServiceName}}
+ </div>
+ <div nz-col nzSpan="4">
+ <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon
+ class="anticon anticon-plus"></i></button>
+ <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting"
+ nzTheme="outline"></i></button>
+ </div>
+ </div>
+ </nz-card>
+ <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="传输域:">
+ <div nz-row [nzGutter]="8">
+ <div nz-col nzSpan="12">
+ 切片子网实例 ID:
+ <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
+ <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+ </nz-select>
+ </div>
+ <div nz-col nzSpan="8">
+ 切片子网实例名称:{{selectedServiceName}}
+ </div>
+ <div nz-col nzSpan="4">
+ <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon
+ class="anticon anticon-plus"></i></button>
+ <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting"
+ nzTheme="outline"></i></button>
+ </div>
+ </div>
+ </nz-card>
+ <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="核心网域:">
+
+ <div nz-row [nzGutter]="12" nzType="flex" nzAlign="middle">
+ <div nz-col nzSpan="12">
+ 切片子网实例 ID:
+ <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
+ <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+ </nz-select>
+ </div>
+ <div nz-col nzSpan="8">
+ 切片子网实例名称:{{selectedServiceName}}
+ </div>
+ <div nz-col nzSpan="4">
+ <button nz-button nzType="primary" (click)="resetService()">
+ <i nz-icon class="anticon anticon-plus"></i>
+ </button>
+ <button nz-button nzType="primary">
+ <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i>
+ </button>
+ </div>
+ </div>
+ </nz-card>
+ </nz-list-item>
+ </nz-list>
+ </div>
+
+</nz-modal> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less
new file mode 100644
index 00000000..aad9a554
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less
@@ -0,0 +1,15 @@
+nz-select {
+ width: 70%;
+}
+
+.taskmodel_list {
+ margin-bottom: 20px;
+
+ .listitem_subtitle {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.85);
+ margin-bottom: 16px;
+ font-weight: 500;
+ }
+
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts
new file mode 100644
index 00000000..a6c02728
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SlicingTaskModelComponent } from './slicing-task-model.component';
+
+describe('SlicingTaskModelComponent', () => {
+ let component: SlicingTaskModelComponent;
+ let fixture: ComponentFixture<SlicingTaskModelComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SlicingTaskModelComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SlicingTaskModelComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
new file mode 100644
index 00000000..2abe8d44
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
@@ -0,0 +1,61 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+ selector: 'app-slicing-task-model',
+ templateUrl: './slicing-task-model.component.html',
+ styleUrls: ['./slicing-task-model.component.less']
+})
+export class SlicingTaskModelComponent implements OnInit {
+ @Input() showDetail: boolean;
+ @Input() moduleTitle: string;
+ @Input() modelData: object;
+ @Output() cancel = new EventEmitter<boolean>();
+
+ constructor() { }
+ checkDetail: [{}] = [{
+ id: "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177",
+ name: "5G Slice eMMB",
+ snssai: "1-010101",
+ arrivedtime: "2019-10-29 10:00",
+ status: "Checking"
+ }]; //配置审核详情
+ businessRequirement: [{}] = [{
+ name: "5G Slice eMMB",
+ snssai: "1-010101",
+ expiretime: "2019-10-29 10:00",
+ area: "Beijing",
+ }];//业务需求信息
+ NSTinfo: [{}] = [{
+ id: "46da8cf8-0878-48ac-bea3-f2200959411a",
+ name: "eMBB instancel"
+ }];//匹配NST信息
+ selectedServiceId = '46da8cf8-0878-48ac-bea3-f2200959411a';
+ selectedServiceName = '';
+ serviceId = ['46da8cf8-0878-48ac-bea3-f2200959411a', '46da8cf8-0878-48ac-bea3-f2200959411b', '46da8cf8-0878-48ac-bea3-f2200959411c'];
+ serviceData: {} = {
+ "46da8cf8-0878-48ac-bea3-f2200959411a": "eMBB instancela",
+ "46da8cf8-0878-48ac-bea3-f2200959411b": "eMBB instancelb",
+ "46da8cf8-0878-48ac-bea3-f2200959411c": "eMBB instancelc",
+ };
+
+ ngOnInit() {
+ this.serviceIdChange(this.selectedServiceId)
+ }
+
+ serviceIdChange(value: string): void {
+ this.selectedServiceName = this.serviceData[value];
+ console.log(this.selectedServiceName, "=====")
+ }
+ resetService() {
+ this.selectedServiceId = "";
+ this.serviceIdChange(this.selectedServiceId);
+ }
+
+ handleCancel() {
+ this.showDetail = false;
+ this.cancel.emit(this.showDetail);
+ }
+ handleOk() {
+ this.handleCancel();
+ }
+}