From 19a11640b3ed8d770fd1cb6f296c4c0e793cdb2a Mon Sep 17 00:00:00 2001
From: GuangrongFu <fu.guangrong@zte.com.cn>
Date: Tue, 18 Sep 2018 17:30:18 +0800
Subject: Changed the Style of GUI

Change-Id: Ie30363f6358639c660f49585aa03d243b560e444
Issue-ID: HOLMES-148
Signed-off-by: GuangrongFu <fu.guangrong@zte.com.cn>
---
 .../correlation-ruleList/alarmRule.component.html  | 26 ++++++++++------------
 .../correlation-ruleList/alarmRule.component.ts    | 22 ++++++++++++------
 2 files changed, 27 insertions(+), 21 deletions(-)

(limited to 'rulemgt-frontend/src/app/correlation-ruleList')

diff --git a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
index 7678395..f909940 100644
--- a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
+++ b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
@@ -46,13 +46,11 @@
         </div>
 
         <div class="fmrule_btn_group display_table col-xs-4">
-          <div class="inline row">
-            <button id="batchDeleteButton" class="btn btn-primary" (click)="searchRules()">
-              <span class="glyphicon glyphicon-search" style="padding-top: 2px"></span>
+          <div class="row">
+            <button id="batchDeleteButton" class="btn btn-primary btn-small" (click)="searchRules()">
               <span>{{"common_query"|translate}}</span>
             </button>
-            <button class="btn btn-secondary" (click)="reset()" style="margin-left: 10px">
-              <span class="glyphicon glyphicon-refresh"></span>
+            <button class="btn btn-small" (click)="reset()" style="margin-left: 10px">
               <span>{{"common_reset"|translate}}</span>
             </button>
           </div>
@@ -61,8 +59,7 @@
 
       <div class="row form-group" style="margin-top: 10px">
         <div class="inline col-xs-12">
-          <button type="button" routerLink='/ruleInfo' class="btn btn-info">
-            <span class="glyphicon glyphicon-plus"></span>
+          <button type="button" routerLink='/ruleInfo' class="btn btn-small">
             <span>{{"common_add"|translate}}</span>
           </button>
         </div>
@@ -70,19 +67,20 @@
     </div>
 
   </form>
+  
   <div>
     <div class="row form-group col-xs-12" style="margin-top: 20px">
       {{"common_total1"|translate}}{{totalcount}}{{"common_total2"|translate}}
     </div>
-    <table class="table table-bordered table-striped customtable table-hover">
+    <table>
       <thead class="nf_thead">
       <tr class="heading">
-        <td>{{"field_rule_name_Add_Page"|translate}}</td>
-        <td>{{"common_status"|translate}}</td>
-        <td>{{"field_create_time"|translate}}</td>
-        <td>{{"field_creator"|translate}}</td>
-        <td>{{"field_update_time"|translate}}</td>
-        <td>{{"common_operator"|translate}}</td>
+        <th>{{"field_rule_name_Add_Page"|translate}}</th>
+        <th>{{"common_status"|translate}}</th>
+        <th>{{"field_create_time"|translate}}</th>
+        <th>{{"field_creator"|translate}}</th>
+        <th>{{"field_update_time"|translate}}</th>
+        <th>{{"common_operator"|translate}}</th>
       </tr>
       </thead>
       <tbody>
diff --git a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
index cb413b5..d3897fe 100644
--- a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
+++ b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
@@ -13,12 +13,13 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 */
-import {Component, OnInit} from '@angular/core';
-import {ModalService} from '../correlation-modal/modal.service';
-import {RuleModel} from './alarmRule';
-import {RuleRequest} from './ruleRequest';
-import {Router} from '@angular/router';
-import {AlarmRuleService} from './alarmRule.service';
+import { Component, OnInit, ElementRef } from '@angular/core';
+import { ModalService } from '../correlation-modal/modal.service';
+import { RuleModel } from './alarmRule';
+import { RuleRequest } from './ruleRequest';
+import { Router } from '@angular/router';
+import { AlarmRuleService } from './alarmRule.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'alarmRule',
@@ -41,7 +42,7 @@ export class AlarmRule implements OnInit {
   activeStatus = ["option_all", "common_enabled", "common_disabled"];
 
   constructor(public _alarmRuleService: AlarmRuleService, private modalService: ModalService,
-              private router: Router) {
+    private router: Router, private ele: ElementRef) {
   }
 
   switch(select: string): void {
@@ -155,5 +156,12 @@ export class AlarmRule implements OnInit {
       loopControlName: ''
     };
     this.getRules();
+
+    this.ele.nativeElement.querySelector('.container-fluid').style.height = window.innerHeight + 'px';
+    Observable.fromEvent(window, 'resize')
+      .debounceTime(100)
+      　　.subscribe(() => {
+        this.ele.nativeElement.querySelector('.container-fluid').style.height = window.innerHeight + 'px';
+      　　});
   }
 }
-- 
cgit 1.2.3-korg