summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/performance/performance-vnf
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-22 16:55:57 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-22 16:56:09 +0800
commitd0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch)
treeb3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/views/performance/performance-vnf
parent56923755c761897cc86ca2457667fcc3e6a0e43f (diff)
feat: change the project structure and add mock data function
Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/performance/performance-vnf')
-rw-r--r--usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css126
-rw-r--r--usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html63
-rw-r--r--usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less136
-rw-r--r--usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts45
-rw-r--r--usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts145
5 files changed, 515 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css
new file mode 100644
index 00000000..269af7a9
--- /dev/null
+++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css
@@ -0,0 +1,126 @@
+/*
+ Copyright (C) 2019 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;
+}
+.select {
+ margin-bottom: 20px;
+}
+.select span {
+ display: inline-block;
+ font: 700 14px "Arial";
+ color: #4c5e70;
+}
+.select nz-dropdown {
+ vertical-align: middle;
+}
+.select nz-dropdown :hover {
+ border-color: #147dc2;
+}
+.select nz-dropdown button {
+ width: 165px;
+ height: 30px;
+ background-color: #eceff4;
+ text-align: left;
+ border-color: #9fa9ab;
+}
+.select nz-dropdown button span {
+ font-weight: 400;
+ display: inline-block;
+ width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-top: 2px;
+}
+.select nz-dropdown button i {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+.select .search {
+ margin-left: 20px;
+ vertical-align: middle;
+ height: 30px;
+ padding: 0 10px;
+}
+.select .search span {
+ color: #fff;
+ font-weight: 400;
+}
+.content {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 12px;
+}
+.content .vnfs {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+.content .vnfs .vnf {
+ width: 18%;
+ height: 200px;
+ margin: 5px;
+ padding: 20px;
+ border-radius: 2px;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s linear;
+}
+.content .vnfs .vnf:hover {
+ background-color: #f5f5f5;
+ transform: scale(1.02);
+}
+.content .vnfs .vnf h3 {
+ font-size: 14px;
+ color: #3fa8eb;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-bottom: 0;
+}
+.content .vnfs .vnf .intro {
+ text-align: left;
+ font-size: 12px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ word-wrap: break-word;
+ word-break: break-all;
+}
+.content .vnfs .empty {
+ width: 18%;
+ height: 200px;
+ margin: 5px;
+ border-radius: 2px;
+}
+.content .pages {
+ height: 25px;
+ margin: 20px 10px;
+ position: relative;
+}
+.content .pages nz-pagination {
+ float: right;
+}
diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html
new file mode 100644
index 00000000..9e0e2ed6
--- /dev/null
+++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html
@@ -0,0 +1,63 @@
+<!--
+ Copyright (C) 2019 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">
+ <span (click)="performanceShow()" style="cursor:pointer;" *ngIf="graphicshow">Performance VNF</span>
+ <span (click)="graphicShow()" *ngIf="graphicshow">/ Graphic list </span>
+ <span *ngIf="detailshow">/ Details </span>
+</h3>
+<div class="select" [@showHideAnimate]="state">
+ <span>Source Name: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
+ <a>{{item}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+ <button class="search" nz-button [nzType]="'primary'"><i
+ class="anticon anticon-search"></i><span>Search</span></button>
+ <!-- <button class="search" nz-button [nzType]="'primary'" (click)="getperformanceSsourceNames()"><i class="anticon anticon-search"></i><span>Search</span></button> -->
+</div>
+<div class="content" [@showHideAnimate]="state">
+ <div class="vnfs">
+ <div class="vnf" *ngFor="let item of totalRecords">
+ <img src="../../../../assets/images/vnf01.png" title="VNF" (click)="graphicShow2(item)">
+ <!-- <h3>{{item.name}}</h3> -->
+ <div class="intro">
+ {{item.name}}
+ </div>
+ </div>
+ <div class="vnf" *ngFor="let item of totalpnfs">
+ <img src="../../../../assets/images/pnf01.png" alt="PNF" (click)="graphicShow2(item)">
+ <div class="intro">
+ {{item.name}}
+ </div>
+ </div>
+ <div class="empty" *ngFor="let empty of emptys"></div>
+ </div>
+ <div class="pages">
+ <nz-pagination [(nzPageIndex)]="currentPage" [nzTotal]="vnfsdataTotal" [nzSize]="'small'"
+ [(nzPageSize)]="pageSize" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper>
+ </nz-pagination>
+ </div>
+</div>
+<div [@showHideAnimate]="state2">
+ <app-graphiclist (detailData)="detailShow($event)" [vnfname]="vnfname"></app-graphiclist>
+</div>
+<div [@showHideAnimate]="state3">
+ <app-performance-details [detailId]="detailId"></app-performance-details>
+</div> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less
new file mode 100644
index 00000000..cc4e1ca5
--- /dev/null
+++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less
@@ -0,0 +1,136 @@
+/*
+ Copyright (C) 2019 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: 500 14px/18px "ArialMT";
+ color: #3C4F8C;
+ padding: 20px 0 0 20px;
+}
+.select {
+ height: 70px;
+ background-color: #fff;
+ margin-top: -30px;
+ padding-left: 20px;
+ box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+ line-height: 5;
+ span {
+ display: inline-block;
+ font: 400 14px "ArialMT";
+ color: #3C4F8C;
+ }
+ nz-dropdown {
+ vertical-align: middle;
+ :hover{
+ border-color: #147dc2;
+ }
+ button {
+ width: 165px;
+ height: 30px;
+ background-color: #fff;
+ text-align: left;
+ border-color: #E5E8F2;
+ span {
+ font-weight: 400;
+ display: inline-block;
+ width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-top: 2px;
+ }
+ i {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
+ }
+ :hover {
+ border-color: #48C6EF;
+ }
+ //下拉框中的样式在style.less中,下拉框是在body中额外临时生成的
+ }
+ .search {
+ margin-left: 20px;
+ margin-top: -6px;
+ vertical-align: middle;
+ height: 30px;
+ padding: 0 10px;
+ span {
+ color: #fff;
+ font-weight: 400;
+ }
+ }
+}
+
+.content {
+ // background-color: #fff;
+ border-radius: 5px;
+ padding: 12px;
+ .vnfs {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ .vnf {
+ // width: 180px;
+ background-color: #fff;
+ width: 18%;
+ height: 200px;
+ margin: 5px;
+ padding: 20px;
+ border-radius: 2px;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s linear;
+ &:hover {
+ background-color: #fff;
+ transform: scale(1.02);
+ color: #3F9CFF;
+ }
+ h3 {
+ font-size: 14px;
+ color: #3fa8eb;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-bottom: 0;
+ }
+ .intro {
+ text-align: left;
+ font-size: 12px;
+ overflow: hidden;
+ padding-top: 25px;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ word-wrap:break-word;
+ word-break:break-all;
+ }
+ }
+ .empty {
+ // width: 180px;
+ width: 18%;
+ height: 200px;
+ margin: 5px;
+ border-radius: 2px;
+ }
+ }
+ .pages {
+ height: 25px;
+ margin: 20px 10px;
+ position: relative;
+ nz-pagination {
+ float: right;
+ }
+ }
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts
new file mode 100644
index 00000000..25bcfd50
--- /dev/null
+++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts
@@ -0,0 +1,45 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader} from '@ngx-translate/core';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { NZ_I18N, en_US } from 'ng-zorro-antd';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { PerformanceDetailsComponent } from '../../../shared/components/performance-details/performance-details.component';
+import { GraphiclistComponent } from '../../../shared/components/graphiclist/graphiclist.component';
+import { PerformanceVnfComponent } from './performance-vnf.component';
+import { HomesService } from '../../../core/services/homes.service';
+
+describe('PerformanceVnfComponent', () => {
+ let component: PerformanceVnfComponent;
+ let fixture: ComponentFixture<PerformanceVnfComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PerformanceVnfComponent, PerformanceDetailsComponent, GraphiclistComponent ],
+ imports: [ TranslateModule.forRoot({loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }}),
+ NgZorroAntdModule.forRoot(),
+ NgxEchartsModule,
+ HttpClientModule,
+ BrowserAnimationsModule ],
+ providers: [TranslateService, HomesService ],
+ schemas: [
+ CUSTOM_ELEMENTS_SCHEMA,
+ NO_ERRORS_SCHEMA
+ ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PerformanceVnfComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+}); \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts
new file mode 100644
index 00000000..96b5404c
--- /dev/null
+++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts
@@ -0,0 +1,145 @@
+/*
+ Copyright (C) 2019 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.
+*/
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { slideToRight, showHideAnimate } from '../../../animates';
+import { HomesService } from '../../../core/services/homes.service';
+
+@Component({
+ selector: 'app-performance-vnf',
+ templateUrl: './performance-vnf.component.html',
+ styleUrls: ['./performance-vnf.component.less'],
+ animations: [slideToRight, showHideAnimate],
+})
+export class PerformanceVnfComponent implements OnInit {
+ @HostBinding('@routerAnimate') routerAnimateState;
+ public sourceNameList: Array<any> = ['---auto---'];
+ public sourceName: string = '';
+ public vnfsdataTotal: number;
+ public startTime: string = '';
+ public endTime: string = '';
+ public currentPage: number = 1;
+ public pageSize: number = 10;
+ list: any;
+
+ constructor(
+ private myhttp: HomesService) { }
+
+ ngOnInit() {
+ this.getqueryAllSourceNames();
+ // this.getperformanceSsourceNames();
+ let _this = this;
+ setTimeout(function(){
+ _this.totalRecords = [
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}
+ ];
+ _this.totalpnfs = [
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"},
+ {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}
+ ]
+ _this.emptys = new Array(12-_this.totalRecords.length);
+ },300)
+ }
+
+
+ sourceNameSelected = this.sourceNameList[0];
+ getqueryAllSourceNames() {
+ this.myhttp.getqueryAllSourceNames().subscribe((data) => {
+ for (let i = 0; i < data.length; i++) {
+ this.sourceNameList.push(data[i]);
+ }
+ this.sourceNameSelected = this.sourceNameList[0];
+ })
+ }
+ choseSourceName(item) {
+ this.sourceNameSelected = item;
+ if (item == "---auto---") {
+ this.sourceName = '';
+ } else {
+ this.sourceName = item;
+ }
+ }
+ // vnfs data
+ totalRecords = [];
+ totalpnfs = [];
+ //Fill the box
+ emptys = [];
+
+ // getperformanceSsourceNames() {
+ // this.myhttp.getperformanceSourceNames(this.currentPage, this.pageSize, this.sourceName).subscribe((data) => {
+ // this.totalRecords = data.totalRecords;
+ // this.vnfsdataTotal = data.names;
+ // if (Number.isInteger(this.totalRecords.length / 5)) {
+ // this.emptys = new Array(0);
+ // } else {
+ // this.emptys = new Array(5 - this.totalRecords.length % 5);
+ // }
+ // })
+ // }
+ //Detail page title display
+ isHidden = true;
+ graphicshow = false;
+ detailshow = false;
+ // Show hidden animation
+ state = "show";
+ state2 = "hide";
+ state3 = "hide";
+ performanceShow() {
+ this.state = 'show';
+ this.state2 = 'hide';
+ this.state3 = 'hide';
+ this.graphicshow = false;
+ this.detailshow = false;
+ }
+ // Selected name
+
+ graphicShow() {
+ this.state = 'hide';
+ this.state2 = 'show';
+ this.state3 = 'hide';
+ this.graphicshow = true;
+ this.detailshow = false;
+ }
+ vnfname: string;
+ graphicShow2(item) {
+ this.state = 'hide';
+ this.state2 = 'show';
+ this.state3 = 'hide';
+ this.graphicshow = true;
+ this.detailshow = false;
+ this.vnfname = item;
+ }
+ // Selected id
+ detailId: string;
+ detailShow(item) {
+ this.state = 'hide';
+ this.state2 = 'hide';
+ this.state3 = 'show';
+ this.graphicshow = true;
+ this.detailshow = true;
+ this.detailId = item.id.id;
+ }
+}