diff options
Diffstat (limited to 'usecaseui-portal/src/app')
7 files changed, 139 insertions, 240 deletions
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css index 7268b5dc..e3912fca 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css @@ -1,18 +1,3 @@ -/* - 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. -*/ .content .title { border-radius: 5px 5px 0 0; background-color: #fff; @@ -48,31 +33,29 @@ border: none; } .content .chart { - background-color: #fff; position: relative; border-radius: 5px; margin-bottom: 20px; - height: 106px; + height: 70px; } .content .chart .select { - padding: 20px 50px; + padding: 20px 20px 20px 0px; width: 70%; float: left; } -.content .chart .select nz-dropdown { - margin-right: 20px; -} -.content .chart .select nz-dropdown a { - font: 700 12px "Arial"; - color: #3d4d65; +.content .chart .select span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; } -.content .chart .select nz-dropdown a:hover { - color: #3fa8eb; +.content .chart .select .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; } -.content .chart .AlarmChart { - width: 25%; - padding-top: 7px; - float: left; +.content .chart .select .search span { + color: #fff; + font-weight: 400; } .content .tablelist { background-color: #fff; diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html index 19c7d853..8a1e64da 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html @@ -14,66 +14,44 @@ limitations under the License. --> <div class="content"> - <!-- <div class="title"> - <ul> - <li><h5>CPU</h5> <p>{{alarmList.all }}</p></li> - <li><h5>Memory</h5> <p>{{alarmList.closed }}</p></li> - <li><h5>Disk</h5> <p>{{alarmList.alarm }}</p></li> - </ul> - </div> --> - <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()"> - <app-line [initData]="alarmChartInitBig" [chartData]="alarmChartDataBig"></app-line> - </nz-modal> - <div class="chart"> - <div class="select"> - <nz-dropdown [nzTrigger]="'click'"> - <a nz-dropdown> - {{MeasurementSelected}} <i class="anticon anticon-down"></i> - </a> - <ul nz-menu> - <li nz-menu-item (click)="choseMeasurement(item)" *ngFor="let item of MeasurementList">{{item}}</li> - </ul> - </nz-dropdown> - <nz-dropdown [nzTrigger]="'click'"> - <a nz-dropdown> - {{ReportTimeSelected}} <i class="anticon anticon-down"></i> - </a> - <ul nz-menu> - <li nz-menu-item (click)="choseReportTime(item)" *ngFor="let item of ReportTimeList">{{item}}</li> - </ul> - </nz-dropdown> + <!-- <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()"> + <app-line [initData]="alarmChartInitBig" [chartData]="alarmChartDataBig"></app-line> + </nz-modal> --> + <div class="chart"> + <div class="select"> + <span>Report Time: </span> + <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker> + + <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</span></button> + </div> </div> - <div class="AlarmChart" (click)="showModalMiddle()"> - <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> + <div class="tablelist"> + <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger [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="10%">Priority</th> + <th nzWidth="20%">SpecificProblem</th> + <th nzWidth="20%">Report Time</th> + <th nzWidth="15%">Status</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.age}}</td> + <td>{{item.address}}</td> + <td>{{item.address}}</td> + <td>{{item.address}}</td> + <td><a class="action" (click)="detailShow(i+1)"><i class="details"></i></a></td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> </div> - <!-- <button class="open-close" [ngClass]="{'open-close-active':alarmShow}" (click)="alarmShow=!alarmShow"></button> --> </div> - <div class="tablelist"> - <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger [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="10%">Priority</th> - <th nzWidth="20%">SpecificProblem</th> - <th nzWidth="20%">Report Time</th> - <th nzWidth="15%">Status</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.age}}</td> - <td>{{item.address}}</td> - <td>{{item.address}}</td> - <td>{{item.address}}</td> - <td><a class="action" (click)="detailShow(i+1)"><i class="details"></i></a></td> - </tr> - <!-- </ng-template> --> - </tbody> - </nz-table> - </div> -</div> +
\ No newline at end of file diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less index 30fea328..f6f1435b 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less @@ -34,34 +34,48 @@ } } .chart { - background-color: #fff; + // background-color: #fff; position: relative; border-radius: 5px; margin-bottom: 20px; - height: 106px; + height: 70px; .select { - padding: 20px 50px; + padding: 20px 20px 20px 0px; width: 70%; float: left; - nz-dropdown { - margin-right: 20px; - a { - font: 700 12px "Arial"; - color: #3d4d65; - &:hover { - color: #3fa8eb; - } + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; } } + // nz-dropdown { + // margin-right: 20px; + // a { + // font: 700 12px "Arial"; + // color: #3d4d65; + // &:hover { + // color: #3fa8eb; + // } + // } + // } } - .AlarmChart { - // height: 0px; - // border-bottom: 1px solid #f5f5f5; - // transition: all 0.3s linear; - width: 25%; - padding-top: 7px; - float: left; - } + // .AlarmChart { + // // height: 0px; + // // border-bottom: 1px solid #f5f5f5; + // // transition: all 0.3s linear; + // width: 25%; + // padding-top: 7px; + // float: left; + // } // .alarmChart-active { // height: 386px; // } diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts index fc86ee0d..6eaf19f4 100644 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import * as addDays from 'date-fns/add_days'; @Component({ selector: 'app-graphiclist', @@ -8,18 +9,18 @@ import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@an export class GraphiclistComponent implements OnInit { constructor() { } - isVisibleMiddle = false; + // isVisibleMiddle = false; - showModalMiddle(): void { - this.isVisibleMiddle = true; - } - handleOkMiddle(): void { - console.log('click ok'); - this.isVisibleMiddle = false; - } - handleCancelMiddle(): void { - this.isVisibleMiddle = false; - } + // showModalMiddle(): void { + // this.isVisibleMiddle = true; + // } + // handleOkMiddle(): void { + // console.log('click ok'); + // this.isVisibleMiddle = false; + // } + // handleCancelMiddle(): void { + // this.isVisibleMiddle = false; + // } ngOnInit() { } @@ -37,74 +38,15 @@ export class GraphiclistComponent implements OnInit { console.log(item); this.ReportTimeSelected = item; } + // Date screening + dateRange = [ addDays(new Date(), -30), new Date() ]; + onChange(result: Date): void { + console.log('onChange: ', result); + } sort(e){ } - // 数量统计 - alarmList = { - all:22439, - closed:37923, - alarm: 12342 - } - - //折线图 - alarmChartData:Object; - alarmChartInit:Object = { - height:100, - width:290, - option:{ - tooltip : { - show : false, - }, - legend: { - show :false, - }, - series: [ - { - name: 'Memory', - type: 'bar', - legendHoverLink: true, - barWidth: "25%", - //timeframe_one - data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45], - itemStyle: { - color: "#3fa8eb" - }, - } - ] - } - }; - //折线图 - alarmChartDataBig:Object; - alarmChartInitBig:Object = { - height:240, - width:500, - option:{ - tooltip : { - show : true, - trigger: 'axis', - }, - legend: { - bottom: 'bottom', - data: ['Memory'] - }, - series: [ - { - name: 'Memory', - type: 'bar', - legendHoverLink: true, - barWidth: "25%", - //timeframe_one - data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45], - itemStyle: { - color: "#3fa8eb" - }, - } - ] - } - }; - //表格数据 dataSet = [ { diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts index 00e6bc42..1c36d881 100644 --- a/usecaseui-portal/src/app/myhttp.service.ts +++ b/usecaseui-portal/src/app/myhttp.service.ts @@ -40,7 +40,8 @@ export class MyhttpService { // connectivity:this.baseUrl + "/sotn-connectivity2.json?", // vpnBinding:this.baseUrl + "/vpnbinding.json?", // alarmFormData:this.baseUrl + "/alarmFormData.json?", - // alarmFormDetailData:this.baseUrl + "/alarmFormDetailData.json?" + // alarmFormDetailData:this.baseUrl + "/alarmFormDetailData.json?", + // sourceName:this.baseUrl+ "/SorceName.json?" // } // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1'; @@ -256,27 +257,48 @@ export class MyhttpService { } // Alarm table data - getAlarmFormData(pageNumber:number,pageSaze:number,name?:string,Priority?:string,Status?:string,Report?:string){ - return this.http.post<any>(this.url.alarmFormData,{ - pageNumber:pageNumber, - pageSaze:pageSaze, - name:name, - Priority:Priority, - Status:Status, - Report:Report - }); - } + // getAlarmFormData(currentPage:number,pageSize:number,sourceName?:string,priority?:string,startTime?:string,endTime?:string,vfStatus?:string){ + // return this.http.post<any>(this.url.alarmFormData,{ + // currentPage:currentPage, + // pageSize:pageSize, + // sourceName:sourceName, + // priority:priority, + // startTime:startTime, + // endTime:endTime , + // vfStatus:vfStatus + // }); + // } getSourceNames(){ - return this.http.get<any>('/alarm/getSourceNames/'); + return this.http.get<any>('http://192.168.43.12:8082/alarm/getSourceNames/'); } - // getAlarmFormData(pageNumber:number,pageSaze:number,name?:string,Priority?:string,Status?:string,Report?:string){ - // return this.http.get<any>(this.url.alarmFormData+'?pageNumber='+pageNumber+'?pageSaze'+pageSaze+'?name'+name+'?Priority'+Priority+'?Status'+Status+'?Report'+Report); + + getstatuscount(){ + let httpurl = 'http://192.168.43.12:8082/alarm/statusCount'; + return this.http.get<any>(httpurl); + } + // getSourceNames(){ + // let httpurl = this.baseUrl + "/SourceName.json?"; + // console.log(httpurl); + // return this.http.get<any>(httpurl); + // } + + // getAlarmFormData(currentPage:number,pageSize:number,sourceName?:string,priority?:string,startTime?:string,endTime?:string,vfStatus?:string){ + // return this.http.get<any>(this.url.alarmFormData+'?currentPage='+currentPage+'?pageSize='+pageSize+'?sourceName='+sourceName+'?priority='+priority+'?startTime='+startTime+'?endTime='+endTime+'?vfStatus='+vfStatus); // } + getAlarmFormData(currentPage:number,pageSize:number,sourceName?:string,priority?:string,startTime?:string,endTime?:string,vfStatus?:string){ + return this.http.get<any>('http://192.168.43.12:8082/alarm/'+'/'+currentPage+'/'+pageSize+'/'+sourceName+'/'+priority+'/'+startTime+'/'+endTime+'/'+vfStatus); + } + // Alarm Detail page data + // getAlarmDetailData(id){ + // let httpurl = this.baseUrl + "/alarmFormDetailData.json?id/" +id; + // console.log(httpurl) + // return this.http.get<any>(httpurl); + // } getAlarmDetailData(id){ - let httpurl = this.baseUrl + "/alarmFormDetailData.json?id/" +id; + let httpurl = 'http://192.168.43.12:8082/alarm/getAlarmsHeaderDetail/'+id; console.log(httpurl) return this.http.get<any>(httpurl); } diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css index 4ed015fe..cbb5bfdd 100644 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css @@ -1,18 +1,3 @@ -/* - 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; diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html index 0b398703..824599e7 100644 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html @@ -1,18 +1,3 @@ -<!-- - 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 VNF</span> <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span> @@ -29,16 +14,6 @@ </li> </ul> </nz-dropdown> - - <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"> @@ -60,5 +35,5 @@ <app-graphiclist (detailData)="detailShow($event)"></app-graphiclist> </div> <div [@showHideAnimate]="state3"> - <app-details [detailId]="detailId"></app-details> + <app-performance-details [detailId]="detailId"></app-performance-details> </div> |