Merge "Fix VNF Alarm Query Bugs"

4 files changed, 261 insertions, 272 deletions

diff --git a/usecaseui-portal/src/app/alarm/alarm.component.css b/usecaseui-portal/src/app/alarm/alarm.component.css
index cb6a8edc..37c2d936 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.css
+++ b/usecaseui-portal/src/app/alarm/alarm.component.css
@@ -25,31 +25,27 @@ hr {
   margin-bottom: 20px;
 }
 .select {
-  clear: both;
-}
-.select .query_criteria {
-  width: 75%;
-  float: left;
+  margin-bottom: 20px;
 }
-.select .query_criteria span {
+.select span {
   display: inline-block;
   font: 700 14px "Arial";
   color: #4c5e70;
 }
-.select .query_criteria nz-dropdown {
+.select nz-dropdown {
   vertical-align: middle;
 }
-.select .query_criteria nz-dropdown :hover {
+.select nz-dropdown :hover {
   border-color: #147dc2;
 }
-.select .query_criteria nz-dropdown button {
+.select nz-dropdown button {
   width: 165px;
   height: 30px;
   background-color: #eceff4;
   text-align: left;
   border-color: #9fa9ab;
 }
-.select .query_criteria nz-dropdown button span {
+.select nz-dropdown button span {
   font-weight: 400;
   display: inline-block;
   width: 120px;
@@ -57,42 +53,28 @@ hr {
   text-overflow: ellipsis;
   padding-top: 2px;
 }
-.select .query_criteria nz-dropdown button i {
+.select nz-dropdown button i {
   position: absolute;
   top: 10px;
   right: 10px;
 }
-.select .query_criteria .search {
+.select .search {
   margin-left: 20px;
   height: 30px;
   padding: 0 10px;
 }
-.select .query_criteria .search span {
+.select .search span {
   color: #fff;
   font-weight: 400;
 }
-.select .thumbnail {
-  width: 25%;
-  height: 90px;
-  float: left;
-  margin-top: 8px;
-}
-::ng-deep .vertical-center-modal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-::ng-deep .vertical-center-modal .ant-modal {
-  top: 0;
-}
-.titles {
-  border-radius: 5px 5px 5px 5px;
+.content .title {
+  border-radius: 5px 5px 0 0;
   background-color: #fff;
   height: 106px;
   border-bottom: 1px solid #f0f0f0;
-  margin-bottom: 20px;
+  margin-bottom: 0;
 }
-.titles ul {
+.content .title ul {
   display: flex;
   display: -webkit-flex;
   justify-content: space-around;
@@ -100,30 +82,68 @@ hr {
   padding: 0;
   margin: 0;
   height: 100%;
-  width: 70%;
-  float: left;
 }
-.titles ul li {
+.content .title ul li {
   list-style: none;
   padding-left: 32px;
   width: 100%;
   border-left: 1px solid #eceff4;
 }
-.titles ul li h5 {
+.content .title ul li h5 {
   font: 500 14px "Arial";
   color: #3d4d65;
 }
-.titles ul li p {
+.content .title ul li p {
   font: 500 24px "Arial";
   color: #3fa8eb;
   margin-bottom: 0;
 }
-.titles ul li:nth-child(1) {
+.content .title ul li:nth-child(1) {
   border: none;
 }
-.content {
-  clear: both;
-  padding-top: 20px;
+.content .chart {
+  background-color: #fff;
+  position: relative;
+  padding-bottom: 24px;
+}
+.content .chart h3 {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  padding: 20px 15px;
+  margin: 0;
+  width: 12%;
+  display: inline-block;
+}
+.content .chart .AlarmChart {
+  height: 0px;
+  overflow: hidden;
+  border-bottom: 1px solid #f5f5f5;
+  transition: all 0.3s linear;
+}
+.content .chart .alarmChart-active {
+  height: 386px;
+}
+.content .chart .open-close {
+  width: 50px;
+  height: 25px;
+  position: absolute;
+  left: 50%;
+  bottom: 0px;
+  transform: translate(-25px, 0);
+  border: none;
+  outline: none;
+  cursor: pointer;
+  background-color: #fff;
+  background: url(../../assets/images/open-close.png) no-repeat center -27px;
+}
+.content .chart .open-close:hover {
+  background: url(../../assets/images/open-close.png) no-repeat center -79px;
+}
+.content .chart .open-close-active {
+  background: url(../../assets/images/open-close.png) center -1px;
+}
+.content .chart .open-close-active:hover {
+  background: url(../../assets/images/open-close.png) no-repeat center -53px;
 }
 .content .tablelist {
   background-color: #fff;
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html
index fcb0e70e..378cebc2 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.html
+++ b/usecaseui-portal/src/app/alarm/alarm.component.html
@@ -16,19 +16,6 @@
 <h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;">Alarm</span> <span *ngIf="detailshow">>
     Details</span> </h3>
 <hr>
-<div class="titles" [@showHideAnimate]="state">
-<ul>
-    <li>
-        <h5>Closed</h5>
-        <p>{{alarmList.closed }}</p>
-    </li>
-    <li>
-        <h5>Action</h5>
-        <p>{{alarmList.Action }}</p>
-    </li>
-</ul>
-
-</div>
 <div class="select" [@showHideAnimate]="state">
 <div class="query_criteria">
     <span>Source Name: </span>
@@ -64,17 +51,29 @@
     <span>Report Time: </span>
     <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
 
-    <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
-</div>
-<div class="thumbnail" (click)="showModalMiddle()">
-    <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+    <!-- <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button> -->
+    <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</span></button>
 </div>
 </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="content" [@showHideAnimate]="state">
+<div class="title">
+    <ul>
+        <li><h5>All</h5> <p>{{alarmList.all }}</p></li>
+        <li><h5>Closed</h5> <p>{{alarmList.closed }}</p></li>
+        <li><h5>Active</h5> <p>{{alarmList.activeNum }}</p></li>
+    </ul>
+</div>
+<div class="chart">
+    <h3>Alarm Chart</h3>
+    <nz-radio-group [(ngModel)]="size">
+        <label nz-radio-button nzValue="day"> day </label>
+        <label nz-radio-button nzValue="month">month</label>
+      </nz-radio-group>
+    <div class="AlarmChart" [ngClass]="{'alarmChart-active':alarmShow}">
+        <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+    </div>
+    <button class="open-close" [ngClass]="{'open-close-active':alarmShow}" (click)="alarmShow=!alarmShow"></button>
+</div>
 <div class="tablelist">
     <nz-table #nzTable [nzData]="list" [nzPageSize]="10" nzShowSizeChanger nzShowQuickJumper [nzPageSizeOptions]="[5,10,15,20]"
         nzSize="middle">
@@ -90,7 +89,7 @@
             </tr>
         </thead>
         <tbody>
-            <tr *ngFor="let item of list; let i = index;">
+            <tr *ngFor="let item of nzTable.data; let i = index;">
                 <td>{{i+1}}</td>
                 <td>{{item.sourceName}}</td>
                 <td>{{item.priority}}</td>
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.less b/usecaseui-portal/src/app/alarm/alarm.component.less
index dc07bdc6..649815c5 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.less
+++ b/usecaseui-portal/src/app/alarm/alarm.component.less
@@ -25,109 +25,128 @@ hr {
     margin-bottom: 20px;
 }
 .select {
-    clear: both;
-    .query_criteria {
-        width: 75%;
-        float: left;
-        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中额外临时生成的
+    margin-bottom: 20px;
+    span {
+        display: inline-block;
+        font: 700 14px "Arial";
+        color: #4c5e70;
+    }
+    nz-dropdown {
+        vertical-align: middle;
+        :hover{
+            border-color: #147dc2;
         }
-        .search {
-            margin-left: 20px;       
+        button {
+            width: 165px;
             height: 30px;
-            padding: 0 10px;
+            background-color: #eceff4;
+            text-align: left;
+            border-color: #9fa9ab;
             span {
-                color: #fff;
                 font-weight: 400;
+                display: inline-block;
+                width: 120px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                padding-top: 2px;
+            }
+            i {
+                position: absolute;
+                top: 10px;
+                right: 10px;
             }
         }
     }
-    .thumbnail {
-        width: 25%;
-        height: 90px;
-        float: left;
-        margin-top: 8px;
+    .search {
+        margin-left: 20px;       
+        height: 30px;
+        padding: 0 10px;
+        span {
+            color: #fff;
+            font-weight: 400;
+        }
     }
+    
 }
-// model style
-::ng-deep .vertical-center-modal {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-::ng-deep .vertical-center-modal .ant-modal {
-    top: 0;
-}
-.titles {
-    border-radius: 5px 5px 5px 5px;
-    background-color: #fff;
-    height: 106px;
-    border-bottom: 1px solid #f0f0f0;
-    margin-bottom: 20px;
-    // clear: both;
-    ul {
-        display: flex;
-        display: -webkit-flex; 
-        justify-content: space-around;
-        align-items: center;
-        padding: 0;
-        margin: 0;
-        height: 100%;
-        width: 70%;
-        float: left;
-        li {
-            list-style: none;
-            padding-left: 32px;
-            width: 100%;
-            border-left: 1px solid #eceff4;
-            h5 {
-                font: 500 14px "Arial";
-                color: #3d4d65;
+.content {
+    .title {
+        border-radius: 5px 5px 0 0;
+        background-color: #fff;
+        height: 106px;
+        border-bottom: 1px solid #f0f0f0;
+        margin-bottom: 0;
+        ul {
+            display: flex;
+            display: -webkit-flex; 
+            justify-content: space-around;
+            align-items: center;
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            li {
+                list-style: none;
+                padding-left: 32px;
+                width: 100%;
+                border-left: 1px solid #eceff4;
+                h5 {
+                    font: 500 14px "Arial";
+                    color: #3d4d65;
+                }
+                p {
+                    font: 500 24px "Arial";
+                    color: #3fa8eb;
+                    margin-bottom: 0;
+                }
             }
-            p {
-                font: 500 24px "Arial";
-                color: #3fa8eb;
-                margin-bottom: 0;
+            li:nth-child(1){
+                border: none;
             }
         }
-        li:nth-child(1){
+    }
+    .chart {
+        background-color: #fff;
+        position: relative;
+        padding-bottom: 24px;
+        h3 {
+            font: 700 18px/18px "思源黑体";
+            color: #4c5e70;
+            padding: 20px 15px;
+            margin: 0;
+            width: 12%;
+            display: inline-block;
+        }
+        .AlarmChart {
+            height: 0px;
+            overflow: hidden;
+            border-bottom: 1px solid #f5f5f5;
+            transition: all 0.3s linear;
+        }
+        .alarmChart-active {
+            height: 386px;
+        }
+        .open-close {
+            width: 50px;
+            height: 25px;
+            position: absolute;
+            left: 50%;
+            bottom: 0px;
+            transform: translate(-25px,0);
             border: none;
+            outline: none;
+            cursor: pointer;
+            background-color: #fff;
+            background: url(../../assets/images/open-close.png) no-repeat center -27px;
+            &:hover {
+                background: url(../../assets/images/open-close.png) no-repeat center -79px;
+            }
+        }
+        .open-close-active {
+            background: url(../../assets/images/open-close.png) center -1px;
+            &:hover {
+                background: url(../../assets/images/open-close.png) no-repeat center -53px;
+            }
         }
     }
-  
-}
-.content {
-    clear: both;
-    padding-top: 20px;
     .tablelist {
         background-color: #fff;
         padding: 24px 10px 0px;
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts
index 42b05b16..d4372113 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.ts
+++ b/usecaseui-portal/src/app/alarm/alarm.component.ts
@@ -27,55 +27,61 @@ import { showHideAnimate, slideToRight } from '../animates';
   ]
 })
 export class AlarmComponent implements OnInit {
-  @HostBinding('@routerAnimate') routerAnimateState; //路由动画
-  public pageNumber:number=1;
+  size = 'day';
+  @HostBinding('@routerAnimate') routerAnimateState; //Routing animation
+  public currentPage:number=1;
   public pageSize:number=5;
-  public name:string='';
-  public Priority:string ='';
-  public Status:string ='';
-  public Report:string ='';
+  public sourceName:string='';
+  public priority:string ='';
+  public startTime:string ='';
+  public endTime:string ='';
+  public vfStatus:string ='';
   list: any;
+  sourcenames:any;
 
 
   constructor(
     private myhttp:MyhttpService) { }
-  isVisibleMiddle = false;
+    ngOnInit() {
+      // this.getAlarmFormData();
+      // this. getSourceNames();
+      // this.getstatuscount();
+    }
 
-  showModalMiddle(): void {
-    this.isVisibleMiddle = true;
-  }
-  handleOkMiddle(): void {
-    console.log('click ok');
-    this.isVisibleMiddle = false;
-  }
-  handleCancelMiddle(): void {
-    this.isVisibleMiddle = false;
-  }
-  ngOnInit() {
-    this.getAlarmFormData();
-  }
+  // Filter box
+  sourceNameList = [];
+  sourceNameSelected = this.sourceNameList;
 
-  // 筛选框（下拉框）
-  sourceNameList = ['---auto---','shentao-test-1001','vnf_a_1','cccc','dddddDDDDDDD'];
-  sourceNameSelected = this.sourceNameList[0];
   priorityList = ['---auto---','Critical','Major','Minor','Warning'];
   prioritySelected = this.priorityList[0];
+
+  
   statusList = ['---auto---','active','Close'];
   statusSelected = this.statusList[0];
+  
   choseSourceName(item){
     console.log(item,'item1');
     this.sourceNameSelected = item;
+    return this.sourceName = item;
   }
   chosePriority(item){
     console.log(item);
     this.prioritySelected = item;
+    return this.priority = item;
   }
   choseStatus(item){
     console.log(item);
     this.statusSelected = item;
+    return this.vfStatus = item;
   }
+  //  getSourceNames(){
+  //   this.myhttp.getSourceNames().subscribe((data)=>{
+  //     this.sourceNameList=data;
+  //   console.log(data,'datass');
+  // })
+  // }
 
-  // 日期筛选
+  // Date screening
   dateRange =  [ addDays(new Date(), -30), new Date() ];
 
   onChange(result: Date): void {
@@ -84,38 +90,52 @@ export class AlarmComponent implements OnInit {
   sort(e){
 
   }
-  // 数量统计
+  // total
   alarmList = {
-    closed:37923,
-    Action: 12342
+    all:200,
+    closed:0,
+    activeNum:0
   }
+  // total data
+  // getstatuscount(){
+  //   this.myhttp.getstatuscount().subscribe((data)=>{
+  //     this.alarmList.activeNum = data[0];
+  //     this.alarmList.closed = data[1];
+      
+  //   })
+  // }
 
-  //折线图縮略圖
+  //Line chart
+  alarmShow = false;
   alarmChartData:Object;
   alarmChartInit:Object = {
-    height:100,
-    width:290,
+    height:380,
     option:{
-      tooltip : {
-        show : false,
-        trigger: 'axis',
-      },
       legend: {
-        show :false,
         bottom: '0px',
         data: ['All', 'Active', 'Closed']
       },
+      dataZoom: [
+        {
+          type: 'slider',
+          show: true,
+          // xAxisIndex: [0],
+          start: 1,
+          height: 10,
+          end: 40
+        }
+    ],
       series: [
         {
             name: 'All',
             type: 'line',
-            smooth: true,//将图变得平缓
+            smooth: true,
             showSymbol: false,
             areaStyle: {
               opacity: 0.8
             },
             //timeframe_one
-            data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65],
+            data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65,38, 52, 64, 58, 69, 87, 76, 33, 64, 87,40, 45, 38, 52, 64, 58, 69, 87, 76,40, 45, 38, 52, 64, 58, 69, 87, 76],
             itemStyle: {
               color: "#526b75"
             },
@@ -127,13 +147,13 @@ export class AlarmComponent implements OnInit {
         {
             name: 'Active',
             type: 'line',
-            smooth: true,//将图变得平缓
+            smooth: true,
             showSymbol: false,
             areaStyle: {
               opacity: 0.8
             },
             //timeframe_two
-            data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12],
+            data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12,32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12,32, 43, 23, 45, 63, 24, 54, 22],
             itemStyle: {
               color: "#fb6e6e"
             },
@@ -145,13 +165,13 @@ export class AlarmComponent implements OnInit {
         {
             name: 'Closed',
             type: 'line',
-            smooth: true,//将图变得平缓
+            smooth: true,//
             showSymbol: false,
             areaStyle: {
               opacity: 0.8
             },
             //timeframe_two
-            data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5],
+            data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5,12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5,12, 23, 13, 25, 33, 14, 34, 12, 125],
             itemStyle: {
               color: "#3fa8eb"
             },
@@ -180,82 +200,9 @@ export class AlarmComponent implements OnInit {
         console.log(err);
       })
   }
-  //折线图放大圖 
-  alarmChartDataBig:Object;
-  alarmChartInitBig:Object = {
-    height:240,
-    width:500,
-    option:{
-      tooltip : {
-        show : true,
-        trigger: 'axis',
-      },
-      legend: {
-        show :true,
-        bottom: '0px',
-        data: ['All', 'Active', 'Closed']
-      },
-      series: [
-        {
-            name: 'All',
-            type: 'line',
-            smooth: true,//将图变得平缓
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8
-            },
-            //timeframe_one
-            data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65],
-            itemStyle: {
-              color: "#526b75"
-            },
-            lineStyle: {
-              width: 1,
-              opacity: 0.5
-            }
-        },
-        {
-            name: 'Active',
-            type: 'line',
-            smooth: true,//将图变得平缓
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8
-            },
-            //timeframe_two
-            data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12],
-            itemStyle: {
-              color: "#fb6e6e"
-            },
-            lineStyle: {
-              width: 1,
-              opacity: 0.5
-            }
-        },
-        {
-            name: 'Closed',
-            type: 'line',
-            smooth: true,//将图变得平缓
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8
-            },
-            //timeframe_two
-            data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5],
-            itemStyle: {
-              color: "#3fa8eb"
-            },
-            lineStyle: {
-              width: 1,
-              opacity: 0.5
-            }
-        }
-      ]
-    }
-  };
-  //详情页标题显示
+  //Detail page title display
   detailshow = false;
-  // 显示隐藏动画
+  // Show hidden animation
   state = "show";
   state2 = "hide";
   detailShow() {
@@ -268,6 +215,9 @@ export class AlarmComponent implements OnInit {
     this.state2 = 'hide';
     this.detailshow = false;
   }
+
+
+ 
   getSelects:Object = {
     countAll:0,
     countClose:0,
@@ -277,10 +227,11 @@ export class AlarmComponent implements OnInit {
     reportingEntityNameList:[],
     sourceNameList:[],
 };
-  getAlarmFormData(){
-    this.myhttp.getAlarmFormData(this.pageNumber,this.pageSize,this.name,this.Priority,this.Status,this.Report).subscribe((data)=>{
-        this.list = data.list;
-      console.log(data,'data');
-    })
-  }
+  // getAlarmFormData(){
+  //   this.myhttp.getAlarmFormData(this.currentPage,this.pageSize,this.sourceName,this.priority,this.startTime,this.endTime,this.vfStatus).subscribe((data)=>{
+  //       this.list = data.alarms;
+  //     // console.log(data,'data');
+  //   })
+  // }
+
 }