From 548c5a220333c7cd666b861e737bff0b45461f18 Mon Sep 17 00:00:00 2001
From: "Stone, Avi (as206k)" <as206k@att.com>
Date: Sun, 3 Jun 2018 13:12:12 +0300
Subject: Update FE project

Update FE to latest version so that fe can run on docker

Change-Id: I9c5dee756b567dbe64fac6d3d6fd89362813bdcc
Issue-ID: SDC-1359
Signed-off-by: Stone, Avi (as206k) <as206k@att.com>
---
 .../app/rule-engine/action/action.component.html   | 154 +++++++++++++++++----
 .../app/rule-engine/action/action.component.scss   |  23 ++-
 .../src/app/rule-engine/action/action.component.ts |   3 +
 3 files changed, 148 insertions(+), 32 deletions(-)

(limited to 'public/src/app/rule-engine/action')

diff --git a/public/src/app/rule-engine/action/action.component.html b/public/src/app/rule-engine/action/action.component.html
index b41ab82..250af34 100644
--- a/public/src/app/rule-engine/action/action.component.html
+++ b/public/src/app/rule-engine/action/action.component.html
@@ -1,56 +1,151 @@
 <form #actionFrm="ngForm" class="conatiner" id="{{action.id}}" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">
   <div>
+
     <div class="center-content">
       <!-- type info -->
       <div class="action-info" [ngClass]="highlight">
         {{action.actionType | uppercase}}
       </div>
+
       <!-- from component -->
-      <app-from #from style="width: 100%" [actionType]="action.actionType" (onFromChange)="updateFrom($event)"></app-from>
+      <app-from [hidden]="action.actionType === 'log event' || action.actionType === 'log text'" class="center-content-item" #from
+        [actionType]="action.actionType" (onFromChange)="updateFrom($event)"></app-from>
+
       <!-- target component -->
-      <app-target #target style="width: 100%" (onTargetChange)="updateTarget($event)" [nodes]="action.nodes">
+      <app-target [hidden]="action.actionType === 'clear' || action.actionType === 'replace text' || action.actionType === 'log text' || action.actionType === 'log event'"
+        #target style="width: 100%" (onTargetChange)="updateTarget($event)" [nodes]="action.nodes">
       </app-target>
-    </div>
 
-    <!-- dateFormatter -->
-    <div *ngIf="action.actionType === 'date formatter'" style="display: flex; flex-direction: column; margin: 1em; align-items: flex-end;">
-      <div style="display: flex; margin: 0.5em 0;">
+      <!-- log Event -->
+      <div *ngIf="action.actionType === 'log event'" class="center-content-item">
         <div class="from">
-          <div class="from-conatiner">
-            <div style="display: flex; align-items: center;" class="label">
-              <span class="label" style="padding: 0 5px; width: 100px;">From Format</span>
-              <input class="input-text" ngModel required name="fromFormat" [(ngModel)]="action.dateFormatter.fromFormat" type="text">
+          <div class="from-container">
+            <div style="display: flex; align-items: center; width: 100%;" class="label">
+              <span class="label" style="padding: 0 5px; width: 100px;">Title</span>
+              <input required class="input-text" data-tests-id="InputLogTitle" ngModel name="title" [(ngModel)]="action.logEvent.title"
+                type="text" placeholder="The title for the log entry">
             </div>
           </div>
         </div>
+      </div>
+
+      <!-- log Text -->
+      <div *ngIf="action.actionType === 'log text'" class="center-content-item">
         <div class="from">
-          <div class="from-conatiner">
-            <div style="display: flex; align-items: center;" class="label">
-              <span class="label" style="padding: 0 5px; width: 100px;">To Format</span>
-              <input class="input-text" ngModel required name="toFormat" [(ngModel)]="action.dateFormatter.toFormat" type="text">
+          <div class="from-container">
+            <div style="display: flex; align-items: center; width: 100%;" class="label">
+              <span class="label" style="padding: 0 5px; width: 100px;">Log Text</span>
+              <input required class="input-text" data-tests-id="InputLogText" ngModel name="logText" [(ngModel)]="action.logText.text"
+                type="text" placeholder="The title for the log entry">
             </div>
           </div>
         </div>
       </div>
 
-      <div style="display: flex; margin: 0.5em 0;">
-        <div class="from">
-          <div class="from-conatiner">
-            <div style="display: flex; align-items: center;" class="label">
-              <span class="label" style="padding: 0 5px; width: 100px;">From Time-zone</span>
-              <input class="input-text" ngModel required name="fromTimezone" [(ngModel)]="action.dateFormatter.fromTimezone" type="text">
+    </div>
+
+      <!-- dateFormatter -->
+      <div *ngIf="action.actionType === 'date formatter'" style="flex-direction: column; margin-left: 156px; align-items: flex-end;">
+          <div style="display: flex; margin: 0.5em 0; padding-left: 6px;">
+            <div class="from" style="width:50%;">
+              <div class="from-container">
+                <div style="display: flex; align-items: center; width: 100%;" class="label">
+                  <span class="label" style="padding: 0 5px; width: 100px;">From Format</span>
+                  <input data-tests-id="InputFromFormat" class="input-text" ngModel required name="fromFormat" [(ngModel)]="action.dateFormatter.fromFormat" type="text">
+                </div>
+              </div>
+            </div>
+            <div class="from"  style="width:50%; padding: 0;">
+              <div class="from-container">
+                <div style="display: flex; align-items: center; width: 100%;" class="label">
+                  <span class="label" style="padding: 0 5px; width: 100px;">To Format</span>
+                  <input data-tests-id="InputToFormat" class="input-text" ngModel required name="toFormat" [(ngModel)]="action.dateFormatter.toFormat" type="text">
+                </div>
+              </div>
+            </div>
+          </div>
+    
+          <div style="display: flex; margin: 0.5em 0; padding-left: 6px;">
+            <div class="from" style="width:50%;">
+              <div class="from-container">
+                <div style="display: flex; align-items: center; width: 100%;" class="label">
+                  <span class="label" style="padding: 0 5px; width: 132px;">From Time-zone</span>
+                  <input class="input-text" data-tests-id="InputFromTimezone" ngModel required name="fromTimezone" [(ngModel)]="action.dateFormatter.fromTimezone" type="text">
+                </div>
+              </div>
+            </div>
+            <div class="from" style="width:50%; padding: 0;">
+              <div class="from-container">
+                <div style="display: flex; align-items: center; width: 100%;" class="label">
+                  <span class="label" style="padding: 0 5px; width: 100px;">To Time-zone</span>
+                  <input class="input-text" data-tests-id="InputToTimezone" ngModel required name="toTimezone" [(ngModel)]="action.dateFormatter.toTimezone" type="text">
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <div class="from">
-          <div class="from-conatiner">
-            <div style="display: flex; align-items: center;" class="label">
-              <span class="label" style="padding: 0 5px; width: 100px;">To Time-zone</span>
-              <input class="input-text" ngModel required name="toTimezone" [(ngModel)]="action.dateFormatter.toTimezone" type="text">
+
+    <!-- replace text -->
+    <div *ngIf="action.actionType === 'replace text'" class="action-container" style="flex-direction: row; margin-left: 152px; padding: 0 0.8em;">
+
+      <div class="action-item">
+        <div class="from" style="width:100%;">
+          <div class="from-container" display="padding:0;">
+
+            <div class="label" style="width: 100%;">
+              <span class="label" style="padding: 0 5px; width: 100px;">Find what</span>
+              <input data-tests-id="InputFindWhat" class="input-text" ngModel required name="findWhat" [(ngModel)]="action.replaceText.find"
+                type="text" placeholder="Find text">
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+
+      <div class="action-item">
+        <div class="from" style="width: 100%; padding: 0;">
+          <div class="from-container">
+
+            <div class="label" style="width: 100%;">
+              <span class="label" style="padding: 0 5px; width: 100px;">Replace with</span>
+              <input data-tests-id="InputReplaceWith" class="input-text" ngModel required name="replaceWith" [(ngModel)]="action.replaceText.replace"
+                type="text" placeholder="Replace with text">
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- log text -->
+    <div *ngIf="action.actionType === 'log text'" class="action-container" style="flex-direction: row; margin-left: 152px; padding: 0 0.8em;">
+
+      <div class="action-item">
+        <div class="from" style="width: 100%;">
+          <div class="from-container" display="padding:0;">
+            <div class="label" style="width: 100%;">
+              <span class="label" style="padding: 0 5px; width: 100px;">Log Name</span>
+              <input class="input-text" data-tests-id="InputLogName" ngModel name="logName" [(ngModel)]="action.logText.name"
+                type="text" placeholder="Enter log name">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="action-item">
+        <div class="from" style="width: 100%; padding: 0;">
+          <div class="from-container">
+            <div class="label" style="width: 100%;">
+              <span class="label" style="padding: 0 5px; width: 100px;">Log Level</span>
+              <input class="input-text" data-tests-id="InputLogLevel" ngModel required name="logLevel" [(ngModel)]="action.logText.level"
+                type="text" placeholder="Text to log">
             </div>
           </div>
         </div>
       </div>
+
     </div>
 
     <!-- Map -->
@@ -90,8 +185,8 @@
               <input [(ngModel)]="item.value" ngModel required name="mapValue[{{index}}]" data-tests-id="value" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
             </th>
             <th style="height: 30px; display: flex; align-items: baseline;">
-              <button mat-icon-button [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" class="button-remove" (click)="removeMapRow(index)"
-                *ngIf="action.map.values.length > 1" style="height: 24px; width: 24px; display:flex; box-shadow: none;">
+              <button mat-icon-button data-tests-id="btn-remove-row" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}"
+                class="button-remove" (click)="removeMapRow(index)" *ngIf="action.map.values.length > 1" style="height: 24px; width: 24px; display:flex; box-shadow: none;">
                 <mat-icon class="md-24">delete</mat-icon>
               </button>
             </th>
@@ -102,8 +197,9 @@
 
       <div style="display:flex; justify-content: space-between;">
         <div style="display: flex; align-items: center;">
-          <button mat-mini-fab color="primary" (click)="addMapRow()" style="height: 24px; width: 24px; display:flex; box-shadow: none;">
-            <mat-icon>add</mat-icon>
+          <button mat-mini-fab color="primary" (click)="addMapRow()" data-tests-id="btn-add-row" style="height: 16px; width: 16px; display:flex; box-shadow: none;">
+            <span style="padding-left: 2px; display: flex; justify-content: center; align-items: center" [innerHTML]="'plus' | feather:12"></span>
+            <!-- <mat-icon>add</mat-icon> -->
           </button>
           <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add Row</span>
         </div>
diff --git a/public/src/app/rule-engine/action/action.component.scss b/public/src/app/rule-engine/action/action.component.scss
index f903db4..fc36380 100644
--- a/public/src/app/rule-engine/action/action.component.scss
+++ b/public/src/app/rule-engine/action/action.component.scss
@@ -4,7 +4,7 @@
   width: 100%;
   height: 100%;
   justify-content: space-between;
-  margin: 10px 0;
+  margin-top: 10px;
   .black {
     color: black;
   }
@@ -25,9 +25,12 @@
       justify-content: center;
       min-width: 142px;
     }
+    .center-content-item {
+      width: 100%;
+    }
   }
   .map-container {
-    padding-left: 115px;
+    padding-left: 172px;
     .default {
       display: flex;
       width: 100%;
@@ -82,7 +85,7 @@
   display: flex;
   flex-direction: column;
   padding: 0 10px;
-  .from-conatiner {
+  .from-container {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -114,3 +117,17 @@
     color: #009fdb;
   }
 }
+
+.action-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.action-item {
+  width: 100%;
+  margin-top: 0.5em;
+}
+.label .action-item-label {
+  padding: 0 5px;
+  width: 110px;
+}
diff --git a/public/src/app/rule-engine/action/action.component.ts b/public/src/app/rule-engine/action/action.component.ts
index 9c7023f..1a62e1a 100644
--- a/public/src/app/rule-engine/action/action.component.ts
+++ b/public/src/app/rule-engine/action/action.component.ts
@@ -27,9 +27,12 @@ export class ActionComponent implements OnInit {
     if (this.action.from !== '') {
       console.log('Action %o', this.action);
       this.fromInstance.updateMode(this.action.from);
+    }
+    if (this.action.target !== '') {
       this.targetInstance.updateMode(this.action);
     }
   }
+
   updateFrom(data) {
     this.action.from = data;
   }
-- 
cgit 1.2.3-korg