summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/services/onboard-vnf-vm
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:03 +0800
committerzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:05 +0800
commitde9d2e95b43991fccee342ebed03b006f6fed844 (patch)
tree0667c51a30fd3fed71fec797136d8adefc7d7baf /usecaseui-portal/src/app/services/onboard-vnf-vm
parent101e5e37f4ece60af8d08020c7e4bd8f473adce7 (diff)
Build AngularJs component for usecase-ui
Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/services/onboard-vnf-vm')
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css59
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html61
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less50
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts61
5 files changed, 256 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
new file mode 100644
index 00000000..a1cc6455
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
@@ -0,0 +1,59 @@
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 20px;
+}
+.list {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 10px;
+}
+.list nz-table tbody td span.onboarding {
+ font-size: 12px;
+ color: #147dc2;
+}
+.list nz-table tbody td span.onboarded {
+ font-size: 14px;
+ color: #147dc2;
+}
+.list nz-table tbody td span.updating {
+ font-size: 12px;
+ color: blue;
+}
+.list nz-table tbody td span.deleting {
+ font-size: 12px;
+ color: red;
+}
+.list nz-table tbody td span.invalid {
+ font-size: 14px;
+ color: purple;
+}
+.list nz-table tbody td i.anticon {
+ cursor: pointer;
+ font-size: 18px;
+ padding: 2px;
+}
+.list nz-table tbody td i.anticon:hover {
+ color: #147dc2;
+}
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
new file mode 100644
index 00000000..d5286a3a
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -0,0 +1,61 @@
+<!--
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<h3 class="title"> Onboard VNF </h3>
+<hr>
+<div class="list">
+ <nz-table #nzTable [nzData]="tableData"
+ nzShowSizeChanger
+ [nzFrontPagination]="false"
+ [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]"
+ [nzTotal]= 'total'
+ [(nzPageSize)]="pageSize"
+ [(nzPageIndex)]='pageIndex'
+ [nzLoading]="loading"
+ nzSize="middle"
+ (nzPageIndexChange)="searchData()"
+ (nzPageSizeChange)="searchData(true)">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="5%">NO</th>
+ <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
+ <th nzWidth="20%">Type</th>
+ <th nzWidth="15%">Version</th>
+ <th nzWidth="20%">Status</th>
+ <th nzWidth="15%">Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td>{{i+1}}</td>
+ <td>{{item.name}}</td>
+ <td>{{item.type}}</td>
+ <td>{{item.version}}</td>
+ <td>
+ <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+ 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+ <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+ </td>
+ <td>
+ <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i>
+ <i class="anticon anticon-delete" (click)="deleteService()"></i>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+</div> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
new file mode 100644
index 00000000..ab118737
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
@@ -0,0 +1,50 @@
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 20px;
+}
+.list {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 10px;
+ nz-table {
+ tbody {
+ td {
+ span.onboarding {
+ font-size: 12px;
+ color: #147dc2;
+ }
+ span.onboarded {
+ font-size: 14px;
+ color: #147dc2;
+ }
+ span.updating {
+ font-size: 12px;
+ color: blue;
+ }
+ span.deleting {
+ font-size: 12px;
+ color: red;
+ }
+ span.invalid {
+ font-size: 14px;
+ color: purple;
+ }
+ i.anticon {
+ cursor: pointer;
+ font-size: 18px;
+ padding: 2px;
+ &:hover{
+ color: #147dc2;
+ }
+ }
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
new file mode 100644
index 00000000..0e49f656
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OnboardVnfVmComponent } from './onboard-vnf-vm.component';
+
+describe('OnboardVnfVmComponent', () => {
+ let component: OnboardVnfVmComponent;
+ let fixture: ComponentFixture<OnboardVnfVmComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ OnboardVnfVmComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(OnboardVnfVmComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
new file mode 100644
index 00000000..c42b3ce3
--- /dev/null
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -0,0 +1,61 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { MyhttpService } from '../../myhttp.service';
+import { slideToRight } from '../../animates';
+
+@Component({
+ selector: 'app-onboard-vnf-vm',
+ templateUrl: './onboard-vnf-vm.component.html',
+ styleUrls: ['./onboard-vnf-vm.component.less'],
+ animations: [ slideToRight ]
+})
+export class OnboardVnfVmComponent implements OnInit {
+ @HostBinding('@routerAnimate') routerAnimateState;
+ constructor(private myhttp: MyhttpService) { }
+
+ ngOnInit() {
+ this.getTableData();
+ }
+
+
+ //表格数据
+ tableData = [];
+ pageIndex = 1;
+ pageSize = 10;
+ total = 100;
+ loading = false;
+ sortName = null;
+ sortValue = null;
+ getTableData(){
+ // 查询参数: 当前页码,每页条数,排序方式
+ let paramsObj = {
+ pageIndex:this.pageIndex,
+ pageSize:this.pageSize,
+ nameSort:this.sortValue
+ }
+ this.myhttp.getOnboardTableData(paramsObj)
+ .subscribe((data)=>{
+ console.log(data);
+ this.total = data.body.total;
+ this.tableData = data.body.tableList;
+ },(err)=>{
+ console.log(err);
+ })
+ }
+ sort(sort: { key: string, value: string }): void {
+ console.log(sort);
+ this.sortName = sort.key;
+ this.sortValue = sort.value;
+ this.getTableData();
+ }
+ searchData(reset:boolean = false){
+ console.log(reset)
+ this.getTableData();
+ }
+ updataService(){
+ console.log("updataService!");
+ }
+ deleteService(){
+ console.log("deleteService!");
+ }
+
+}