summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/performance/performance-vm
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/performance/performance-vm')
-rw-r--r--usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css75
-rw-r--r--usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html79
-rw-r--r--usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less61
-rw-r--r--usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts159
5 files changed, 399 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css
new file mode 100644
index 00000000..079a409c
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css
@@ -0,0 +1,75 @@
+/*
+ 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;
+}
+.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 .submit {
+ margin-left: 20px;
+ vertical-align: middle;
+ height: 30px;
+ padding: 0 10px;
+}
+.select .submit span {
+ color: #fff;
+ font-weight: 400;
+}
+.content {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 12px;
+}
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html
new file mode 100644
index 00000000..76d2485e
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html
@@ -0,0 +1,79 @@
+<!--
+ 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">
+ <span (click)="performanceShow()" style="cursor:pointer;">Performance VM</span>
+ <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span>
+ <span *ngIf="detailshow">> Details </span>
+</h3>
+<hr>
+<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>
+ &nbsp;&nbsp;
+ <span>ReportingEntityName: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{ReportingEntityNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+ <ul nz-menu>
+ <li nz-menu-item (click)="choseReportingEntityName(item)" *ngFor="let item of ReportingEntityNameList">
+ <a>{{item}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
+ <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><i class="anticon anticon-plus-circle-o"></i><span>Submit</span></button>
+</div>
+<div class="content" [@showHideAnimate]="state">
+ <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger nzShowQuickJumper [nzPageSizeOptions]="[5,10,15,20]" nzSize="middle">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="5%">NO</th>
+ <th nzWidth="20%">Source Name</th>
+ <th nzWidth="20%">ReportingEntityName</th>
+ <th nzWidth="10%">Type</th>
+ <th nzWidth="15%">CPU</th>
+ <th nzWidth="10%">Memory</th>
+ <th nzWidth="10%">Disk</th>
+ <th nzWidth="10%">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.address}}</td>
+ <td>{{item.age}}</td>
+ <td>{{item.address}}</td>
+ <td>{{item.age}}</td>
+ <td>{{item.age}}</td>
+ <td><a (click)="graphicShow()">Delete</a></td>
+ </tr> -->
+ <!-- </ng-template> -->
+ <!-- </tbody>
+ </nz-table>
+</div>
+<div [@showHideAnimate]="state2">
+ <app-graphiclist (detailData)="detailShow($event)"></app-graphiclist>
+</div>
+<div [@showHideAnimate]="state3">
+ <app-details [detailId]="detailId"></app-details>
+</div> -->
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less
new file mode 100644
index 00000000..8a9005c5
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less
@@ -0,0 +1,61 @@
+.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;
+ span {
+ display: inline-block;
+ font: 700 14px "Arial";
+ color: #4c5e70;
+ }
+ nz-dropdown {
+ vertical-align: middle;
+ :hover{
+ border-color: #147dc2;
+ }
+ button {
+ width: 165px;
+ height: 30px;
+ background-color: #eceff4;
+ text-align: left;
+ border-color: #9fa9ab;
+ span {
+ font-weight: 400;
+ display: inline-block;
+ width: 120px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-top: 2px;
+ }
+ i {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
+ }
+ //下拉框中的样式在style.less中,下拉框是在body中额外临时生成的
+ }
+ .submit {
+ margin-left: 20px;
+ vertical-align: middle;
+ height: 30px;
+ padding: 0 10px;
+ span {
+ color: #fff;
+ font-weight: 400;
+ }
+ }
+}
+.content {
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 12px;
+} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts
new file mode 100644
index 00000000..fd441da3
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformanceVmComponent } from './performance-vm.component';
+
+describe('PerformanceVmComponent', () => {
+ let component: PerformanceVmComponent;
+ let fixture: ComponentFixture<PerformanceVmComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ PerformanceVmComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PerformanceVmComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts
new file mode 100644
index 00000000..1fb099c9
--- /dev/null
+++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts
@@ -0,0 +1,159 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { slideToRight, showHideAnimate } from '../../animates';
+
+@Component({
+ selector: 'app-performance-vm',
+ templateUrl: './performance-vm.component.html',
+ styleUrls: ['./performance-vm.component.less'],
+ animations: [ slideToRight, showHideAnimate ]
+})
+export class PerformanceVmComponent implements OnInit {
+ @HostBinding('@routerAnimate') routerAnimateState;
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+ // 筛选框(下拉框)
+ sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD'];
+ sourceNameSelected = this.sourceNameList[0];
+ ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd'];
+ ReportingEntityNameSelected = this.ReportingEntityNameList[0];
+ choseSourceName(item){
+ console.log(item);
+ this.sourceNameSelected = item;
+ }
+ choseReportingEntityName(item){
+ console.log(item);
+ this.ReportingEntityNameSelected = item;
+ }
+
+ //表格数据
+ dataSet = [
+ {
+ name : 'John Brown',
+ age : 32,
+ expand : false,
+ address : 'New York No. 1',
+ description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'
+ },
+ {
+ name : 'Aim Green',
+ age : 42,
+ expand : false,
+ address : 'London No. 1',
+ description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+ },
+ {
+ name : 'Bim Green',
+ age : 42,
+ expand : false,
+ address : 'London No. 1',
+ description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+ },
+ {
+ name : 'Cim Green',
+ age : 42,
+ expand : false,
+ address : 'London No. 1',
+ description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+ },
+ {
+ name : 'Jim Green',
+ age : 42,
+ expand : false,
+ address : 'London No. 1',
+ description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+ },
+ {
+ name : 'Xim Green',
+ age : 42,
+ expand : false,
+ address : 'London No. 1',
+ description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+ },
+ {
+ name : 'Jim Green',
+ age : 42,
+ expand : false,
+ address : 'London No. 1',
+ description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+ },
+ {
+ name : 'Jim Green',
+ age : 42,
+ expand : false,
+ address : 'London No. 1',
+ description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+ },
+ {
+ name : 'Jim Green',
+ age : 42,
+ expand : false,
+ address : 'London No. 1',
+ description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+ },
+ {
+ name : 'Jim Green',
+ age : 42,
+ expand : false,
+ address : 'London No. 1',
+ description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+ },
+ {
+ name : 'cim Green',
+ age : 42,
+ expand : false,
+ address : 'London No. 1',
+ description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+ },
+ {
+ name : 'bim Green',
+ age : 42,
+ expand : false,
+ address : 'London No. 1',
+ description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
+ },
+ {
+ name : 'aoe Black',
+ age : 32,
+ expand : false,
+ address : 'Sidney No. 1',
+ description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'
+ }
+ ];
+
+ //详情页标题显示
+ graphicshow = false;
+ detailshow = false;
+ // 显示隐藏动画
+ state = "show";
+ state2 = "hide";
+ state3 = "hide";
+ performanceShow() {
+ this.state = 'show';
+ this.state2 = 'hide';
+ this.state3 = 'hide';
+ this.graphicshow = false;
+ this.detailshow = false;
+ }
+ graphicShow() {
+ this.state = 'hide';
+ this.state2 = 'show';
+ this.state3 = 'hide';
+ this.graphicshow = true;
+ this.detailshow = false;
+ }
+ // 选中id
+ detailId:number;
+ detailShow(prems) {
+ this.state = 'hide';
+ this.state2 = 'hide';
+ this.state3 = 'show';
+ this.graphicshow = true;
+ this.detailshow = true;
+ console.log(prems);
+ this.detailId = prems.id;
+ }
+
+}