-/*
- 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;
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;
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
}
}
.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;
// }
import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+import * as addDays from 'date-fns/add_days';
@Component({
selector: 'app-graphiclist',
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() {
}
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 = [
{
// 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';
}
// 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);
}
-/*
- 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;
-<!--
- 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>
</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">
<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>
Code Review / usecase-ui.git / commitdiff