Fixed some UI bugs

Change-Id: Ic7229b94bcfca46b33bc3e6184e4dccf34982c60
Issue-ID: HOLMES-154
Signed-off-by: GuangrongFu <fu.guangrong@zte.com.cn>

6 files changed, 33 insertions, 30 deletions

diff --git a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
index 4481e18..99966a8 100644
--- a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
+++ b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
@@ -87,16 +87,16 @@
                 </tr>
                 <tr *ngFor="let rule of rules">
                     <td>
-                        <a routerLink="/ruleInfo/{{rule.ruleId}}&add">{{rule.rulename}}</a>
+                        <a routerLink="/ruleInfo/{{rule.ruleId}}&add">{{rule.ruleName}}</a>
                     </td>
-                    <td [hidden]="rule.enabled === 1" style="text-align: center">
+                    <td [hidden]="rule.enabled === 0">
                         <span value=1>
-                            <img src="../../assets/thirdparty/images/round_off.png" alt="">
+                            <i class="fas fa-power-off" style="color:#4ac9ff;"></i>
                         </span>
                     </td>
-                    <td [hidden]="rule.enabled === 0" style="text-align: center">
+                    <td [hidden]="rule.enabled === 1">
                         <span value=0>
-                            <img src="../../assets/thirdparty/images/round_on.png" alt="">
+                            <i class="fas fa-power-off" style="color: #aaa;"></i>
                         </span>
                     </td>
                     <td>{{rule.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
@@ -104,20 +104,20 @@
                     <td>{{rule.updateTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                     <td>
                         <span (click)="updateRule(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">
-                            <img src="../../assets/thirdparty/images/edit.png" alt="">
+                            <i class="fas fa-pencil-alt" style="font-size: 14px;"></i>
                         </span>
                         <span>
 
                         </span>
-                        <span [hidden]="rule.enabled===1" class="" (click)="on_off(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">
-                            <img src="../../assets/thirdparty/images/on.png" alt="">
-                        </span>
                         <span [hidden]="rule.enabled===0" class="" (click)="on_off(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">
-                            <img src="../../assets/thirdparty/images/off.png" alt="">
+                            <i class="fas fa-toggle-on" style="font-size: 20px; color:#4ac9ff; vertical-align:-2px;"></i>
+                        </span>
+                        <span [hidden]="rule.enabled===1" class="" (click)="on_off(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">
+                            <i class="fas fa-toggle-off" style="font-size: 20px; color:black; vertical-align:-2px;" title="Switch On"></i>
                         </span>
 
                         <span class="" id={{rule.ruleId}} (click)="delete(rule)" style="cursor: pointer;margin: 0 5px">
-                            <img src="../../assets/thirdparty/images/delete.png" alt="">
+                            <i class="fas fa-times" style="color: rgba(255, 0, 0, 0.788);font-size:16px;vertical-align:-1px;"></i>
                         </span>
                     </td>
                 </tr>
diff --git a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
index 6a3ea0a..6e2c997 100644
--- a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
+++ b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
@@ -43,7 +43,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) { }
 
     switch(select: string): void {
         console.log(select);
@@ -56,7 +56,7 @@ export class AlarmRule implements OnInit {
             this.ruleModel.enabled = null;
         }
         this.setActiveText();
-    };
+    }
 
     setActiveText(): void {
         if (this.ruleModel.enabled == 1) {
@@ -70,18 +70,18 @@ export class AlarmRule implements OnInit {
             this.activeText = "option_all";
             this.ruleRequest.enabled = null;
         }
-    };
+    }
 
     getRules(): Promise<any> {
         return this._alarmRuleService
             .getRules()
             .then(rules => {
                 this.rules = rules.correlationRules;
-                this.totalcount = rules.totalcount;
+                this.totalcount = rules.totalCount;
             });
     }
 
-    searchRules(): void {
+    public searchRules(): void {
         if (this.ruleModel.enabled == null) {
             this.ruleRequest.enabled = null;
         }
@@ -95,15 +95,15 @@ export class AlarmRule implements OnInit {
                 this.totalcount = rules.length;
             });
     }
-    updateRule(rule: RuleModel): void {
+    public updateRule(rule: RuleModel): void {
         this.router.navigate(['ruleInfo/', rule.ruleId]);
     }
 
-    delete(rule: RuleModel): void {
+    public delete(rule: RuleModel): void {
         rule.enabled == 1 ? this.deleteActiveRule(rule) : this.deleteModel(rule.ruleId, this._alarmRuleService, this);
     }
 
-    on_off(rule: RuleModel) {
+    public on_off(rule: RuleModel) {
         rule.enabled == 0 ? rule.enabled = 1 : rule.enabled = 0;
         this._alarmRuleService
             .updateRule(rule)
@@ -112,14 +112,14 @@ export class AlarmRule implements OnInit {
             });
     }
 
-    reset(): void {
+    public reset(): void {
         this.ruleModel.ruleName = null;
         this.activeText = 'option_all';
         this.ruleModel.enabled = null;
         this.getRules();
     }
 
-    deleteActiveRule(rule: RuleModel): void {
+    public deleteActiveRule(rule: RuleModel): void {
         jQuery('#' + rule.ruleId).popModal({
             html: jQuery('#deleteActiveRuleContent'),
             placement: 'leftTop',
@@ -129,7 +129,7 @@ export class AlarmRule implements OnInit {
             },
         });
     }
-    deleteModel(ruleId: string, alarm: AlarmRuleService, obj: any): void {
+    public deleteModel(ruleId: string, alarm: AlarmRuleService, obj: any): void {
         jQuery('#' + ruleId).popModal({
             html: jQuery('#deleteTimingTaskContent'),
             placement: 'leftTop',
@@ -145,7 +145,7 @@ export class AlarmRule implements OnInit {
         });
     }
 
-    ngOnInit(): void {
+    public ngOnInit(): void {
         this.activeText = 'option_all';
         this.ruleModel = {
             ruleId: null,
@@ -158,7 +158,7 @@ export class AlarmRule implements OnInit {
             modifier: null,
             enabled: 0,
             loopControlName: ''
-        }
+        };
         this.ruleRequest = {
             ruleId: null,
             ruleName: null,
@@ -166,7 +166,7 @@ export class AlarmRule implements OnInit {
             modifier: null,
             enabled: null,
             loopControlName: ''
-        }
+        };
         this.getRules();
     }
 }
diff --git a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.service.ts b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.service.ts
index b410d6d..1f0ee3e 100644
--- a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.service.ts
+++ b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.service.ts
@@ -59,7 +59,7 @@ export class AlarmRuleService {
         const url = `${this.ruleUrl}?queryrequest=${queryrequest}`;
         return this.http.get(url, {headers:this.headers})
             .toPromise()
-            .then(res => res.json().rules as RuleModel)
+            .then(res => res.json().correlationRules as RuleModel[])
             .catch(this.handleError);
     }
 
@@ -69,7 +69,7 @@ export class AlarmRuleService {
         const url = `${this.ruleUrl}?queryrequest=${JSON.stringify(data)}`
         return this.http.get(url, { body: data, headers: this.headers })
             .toPromise()
-            .then(res => res.json().correlatoinRules as RuleModel[])
+            .then(res => res.json().correlationRules as RuleModel[])
             .catch(this.handleError);
     }
 
diff --git a/rulemgt-frontend/src/assets/framework/browser/css/open-ostyle.css b/rulemgt-frontend/src/assets/framework/browser/css/open-ostyle.css
index 14d964d..720dc60 100644
--- a/rulemgt-frontend/src/assets/framework/browser/css/open-ostyle.css
+++ b/rulemgt-frontend/src/assets/framework/browser/css/open-ostyle.css
@@ -909,7 +909,7 @@ a:hover {
 }
 
 .customtable tbody tr:hover td{
-    background-color: #e6fbe0 !important;
+    background-color: #fafafa !important;
 }
 
 .shortnote{
diff --git a/rulemgt-frontend/src/assets/framework/css/open-ostyle.css b/rulemgt-frontend/src/assets/framework/css/open-ostyle.css
index 73ec064..200d91f 100644
--- a/rulemgt-frontend/src/assets/framework/css/open-ostyle.css
+++ b/rulemgt-frontend/src/assets/framework/css/open-ostyle.css
@@ -924,7 +924,7 @@ tr{
 }
 
 .customtable tbody tr:hover td{
-    background-color: #e6fbe0 !important;
+    background-color: #fafafa !important;
 }
 
 .shortnote{
diff --git a/rulemgt-frontend/src/index.html b/rulemgt-frontend/src/index.html
index 5331b5e..8a8252a 100644
--- a/rulemgt-frontend/src/index.html
+++ b/rulemgt-frontend/src/index.html
@@ -17,10 +17,13 @@
 <html>
 
 <head>
-    <base href="/">
+    <base href="/iui/holmes-local/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
+        crossorigin="anonymous">
+
     <script src="./assets/thirdparty/js/jquery_1.12.4.min.js"></script>
     <script src="./assets/common/js/popModal.js"></script>
     <script src="./assets/common/js/jQuery-File-Upload/js/jquery.ui.widget.js"></script>