From 22eda038b6cb646d63bfaf617372fce2b5d98631 Mon Sep 17 00:00:00 2001
From: "Manor, Yanir (ym903w)" <ym903w@intl.att.com>
Date: Thu, 20 Sep 2018 14:18:38 +0300
Subject: update code to latest

update code to latest

Change-Id: I6ed427434b0da47e0d33507a0992b09fe48f9c52
Issue-ID: DCAEGEN2-821
Signed-off-by: Manor, Yanir (ym903w) <ym903w@intl.att.com>
---
 .../app/rule-engine/action/action.component.html   | 336 +++++++++++++++++----
 1 file changed, 283 insertions(+), 53 deletions(-)

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

diff --git a/public/src/app/rule-engine/action/action.component.html b/public/src/app/rule-engine/action/action.component.html
index 250af34..38a9aa0 100644
--- a/public/src/app/rule-engine/action/action.component.html
+++ b/public/src/app/rule-engine/action/action.component.html
@@ -8,22 +8,238 @@
       </div>
 
       <!-- from component -->
-      <app-from [hidden]="action.actionType === 'log event' || action.actionType === 'log text'" class="center-content-item" #from
-        [actionType]="action.actionType" (onFromChange)="updateFrom($event)"></app-from>
+      <app-from [hidden]="action.actionType === 'log event' || action.actionType === 'log text' || action.actionType === 'hp metric' || action.actionType === 'Topology Search' ||  action.actionType === 'string transform'"
+        class="center-content-item" #from [actionType]="action.actionType" (onFromChange)="updateFrom($event)"></app-from>
 
       <!-- target component -->
-      <app-target [hidden]="action.actionType === 'clear' || action.actionType === 'replace text' || action.actionType === 'log text' || action.actionType === 'log event'"
+      <app-target [hidden]="action.actionType === 'clear' || action.actionType === 'clear nsf' || action.actionType === 'replace text' || action.actionType === 'log text' || action.actionType === 'log event' || action.actionType === 'hp metric' || action.actionType === 'string transform' || action.actionType === 'Topology Search' "
         #target style="width: 100%" (onTargetChange)="updateTarget($event)" [nodes]="action.nodes">
       </app-target>
 
+      <!-- search -->
+      <div *ngIf="action.actionType === 'Topology Search'" style="width: 100%;">
+        <div style="display:flex; margin-bottom:10px;">
+          <div class="from" style="width: 100%;">
+            <div class="from-container">
+              <div style="display: flex; align-items: center; width: 100%;" class="label">
+                <span class="label" style="padding: 0 5px; ">
+                  Field
+                </span>
+                <input required name="searchField" class="input-text" data-tests-id="searchField" [(ngModel)]="action.search.searchField"
+                  type="text" placeholder="Search Field">
+              </div>
+            </div>
+          </div>
+          <div class="from" style="width: 100%; padding-right: 0;">
+            <div class="from-container">
+              <div style="display: flex; align-items: center; width: 100%;" class="label">
+                <span class="label" style="padding: 0 5px;">
+                  Value
+                </span>
+                <input required class="input-text" data-tests-id="searchValue" [(ngModel)]="action.search.searchValue" type="text" name="searchValue"
+                  placeholder="Search Value">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="from" style="width: 100%; padding-right: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;">
+                Filter
+              </span>
+              <input required class="input-text" name="searchFilter" data-tests-id="searchFilter" [(ngModel)]="action.search.searchFilter"
+                type="text" placeholder="Search Filter">
+            </div>
+          </div> -->
+          <div class="from-conatiner">
+            <div style="display: flex;">
+              <div class="label" style="width:100%">
+                <span class="label" style="padding: 0 10px; border-left: none;">
+                  Input
+                </span>
+                <input class="input-text" name="searchLeft" data-tests-id="searchLeft" [(ngModel)]="action.search.searchFilter.left" type="text">
+              </div>
+
+              <div style="margin: 0 1rem;">
+                <select style="height: 30px; padding: 0 10px;
+                border-color: #e0e0e0;" name="searchOperator" data-tests-id="searchOperator" [(ngModel)]="action.search.searchFilter.operator">
+                  <option [ngValue]="null" disabled>Select operator</option>
+                  <option value="contains">Contains</option>
+                  <option value="endsWith">Ends with</option>
+                  <option value="startsWith">Starts with</option>
+                  <option value="equals">Equals</option>
+                  <option value="notEqual">Not equal</option>
+                  <option value="oneOf">One of</option>
+                  <option value="NotOneOf">Not one of</option>
+                </select>
+              </div>
+
+              <div class="label" style="width:100%">
+                <span class="label" style="padding: 0 10px; border-left: none;">
+                  Value
+                </span>
+                <input class="input-text" name="searchRight" data-tests-id="searchRight" [(ngModel)]="action.search.searchFilter.right" type="text">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style="margin: 15px 0;">
+          <p-radioButton name="searchRadio" label="Updates" value="updates" [ngModel]="action.search.radio" data-tests-id="radioUpdates"
+            (ngModelChange)="searchRadioChange($event)"></p-radioButton>
+          <span style="padding-left:15px;">
+            <p-radioButton name="searchRadio" label="Enrich" value="enrich" [ngModel]="action.search.radio" data-tests-id="radioEnrich"
+              (ngModelChange)="searchRadioChange($event)"></p-radioButton>
+          </span>
+        </div>
+
+        <div *ngIf="action.search.radio === 'enrich'" style="display:flex; margin-bottom:10px;">
+          <div>
+            <div>
+              <div style="display: flex; flex-direction: column; align-items: flex-start; width: 100%;">
+                <div *ngFor="let input of action.search.enrich.fields; let index = index;" data-tests-id="searchFields" (mouseleave)="hoveredIndex=-1"
+                  (mouseover)="hoveredIndex=index" class="from" style="margin-bottom:1rem; display: flex; flex-direction: row; align-items: flex-start;">
+                  <div class="from-container" style="display: flex; flex-direction: row;">
+                    <div style="display: flex; align-items: center; width: 100%;" class="label">
+                      <span class="label" style="padding: 0 5px; width: 50px;">Fields</span>
+                      <input class="input-text" [(ngModel)]="input.value" type="text" data-tests-id="searchFieldValue" required name="searchFeild[{{index}}]">
+                    </div>
+
+                    <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" (click)="removeSearchField(index)"
+                      *ngIf="action.search.enrich.fields.length > 1" style="box-shadow: none; height: 24px; width: 24px; display:flex"
+                      data-tests-id="btnDelete">
+                      <mat-icon class="md-24">delete</mat-icon>
+                    </button>
+                  </div>
+
+                </div>
+                <div style="display:flex; justify-content: space-between;">
+                  <div style="display: flex; align-items: center;">
+                    <button mat-mini-fab color="primary" (click)="addSearchFeild()" style="box-shadow: none; height: 16px; width: 16px; display:flex"
+                      data-tests-id="btnAddSearchFeild">
+                      <span style="padding-left: 2px; display: flex; justify-content: center; align-items: center" [innerHTML]="'plus' | feather:12"></span>
+                    </button>
+                    <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add Fields</span>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+          <div class="from">
+            <div class="from-container">
+              <div style="display: flex; align-items: center; width: 100%;" class="label">
+                <span class="label" style="padding: 0 5px;">
+                  Prefix
+                </span>
+                <input required class="input-text" name="searchPrefix" data-tests-id="searchPrefix" [(ngModel)]="action.search.enrich.prefix"
+                  type="text" placeholder="Search prefix">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div *ngIf="action.search.radio === 'updates'">
+          <table style="width: 100%; margin-bottom: 1rem;">
+            <thead style="background: #D2D2D2;">
+              <tr style="height: 30px;">
+                <th style="padding-left: 10px;">Key</th>
+                <th style="padding-left: 10px;">value</th>
+              </tr>
+            </thead>
+            <tbody ngModelGroup="searchUpdateKeyValue" #searchUpdateKeyValue="ngModelGroup">
+              <tr *ngFor="let item of action.search.updates; let index = index;" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index">
+                <th style="height: 30px; border: 1px solid #F3F3F3;">
+                  <input [(ngModel)]="item.key" required name="searchKey[{{index}}]" data-tests-id="updatesKey" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
+                </th>
+                <th style="height: 30px; border: 1px solid #F3F3F3;">
+                  <input [(ngModel)]="item.value" required name="searchValue[{{index}}]" data-tests-id="updatesValue" 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 data-tests-id="btn-remove-row" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}"
+                    class="button-remove" (click)="removeSearchUpdatesRow(index)" *ngIf="action.search.updates.length > 1"
+                    style="height: 24px; width: 24px; display:flex; box-shadow: none;">
+                    <mat-icon class="md-24">delete</mat-icon>
+                  </button>
+                </th>
+              </tr>
+            </tbody>
+          </table>
+          <div style="display:flex; justify-content: flex-start;">
+            <div style="display: flex; align-items: center;">
+              <button mat-mini-fab color="primary" (click)="addSearchUpdateRow()" 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>
+              </button>
+              <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add Row</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Hp Metric -->
+      <div *ngIf="action.actionType === 'hp metric'" class="center-content-item">
+        <ng-select name="hp-metric" [items]="metrics" required [virtualScroll]="true" placeholder="Select Parser Type" [(ngModel)]="action.selectedHpMetric"
+          (change)="metricChange($event)" data-tests-id="hp metric">
+        </ng-select>
+      </div>
+
+      <!-- string transform -->
+      <div *ngIf="action.actionType === 'string transform'" class="center-content-item">
+
+        <div style="display:flex; margin-bottom:10px;">
+          <div class="from">
+            <div class="from-container">
+              <div style="display: flex; align-items: center; width: 100%;" class="label">
+                <span class="label" style="padding: 0 5px; width: 100px;">
+                  Start Value
+                </span>
+                <input required class="input-text" data-tests-id="startValue" name="title" [(ngModel)]="action.stringTransform.startValue"
+                  type="text" placeholder="Select start value">
+              </div>
+            </div>
+          </div>
+
+          <app-target [hidden]="! (action.actionType === 'string transform')" #target style="width: 100%" (onTargetChange)="updateTarget($event)"
+            [nodes]="action.nodes">
+          </app-target>
+        </div>
+
+        <div class="from" style="padding-right: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;">
+                Target case
+              </span>
+              <input required class="input-text" data-tests-id="targetCase" name="title" [(ngModel)]="action.stringTransform.targetCase"
+                type="text" placeholder="Select target case">
+            </div>
+          </div>
+        </div>
+
+        <div class="pretty p-svg" style="margin: 1rem 0rem;">
+          <input type="checkbox" name="isTrimString" data-tests-id="isTrimString" [checked]="action.stringTransform.isTrimString" (change)="action.stringTransform.isTrimString = !action.stringTransform.isTrimString"
+          />
+          <div class="state">
+            <svg class="svg svg-icon" viewBox="0 0 20 20">
+              <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
+                style="stroke: #009fdb; fill:#009fdb;"></path>
+            </svg>
+            <label>Trim String</label>
+          </div>
+        </div>
+      </div>
+
       <!-- log Event -->
       <div *ngIf="action.actionType === 'log event'" class="center-content-item">
         <div class="from">
           <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">
+              <input required class="input-text" data-tests-id="InputLogTitle" name="title" [(ngModel)]="action.logEvent.title" type="text"
+                placeholder="The title for the log entry">
             </div>
           </div>
         </div>
@@ -35,8 +251,8 @@
           <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">
+              <input required class="input-text" data-tests-id="InputLogText" name="logText" [(ngModel)]="action.logText.text" type="text"
+                placeholder="Text to log">
             </div>
           </div>
         </div>
@@ -44,49 +260,53 @@
 
     </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>
+    <!-- dateFormatter -->
+    <div *ngIf="action.actionType === 'date formatter'" style="flex-direction: column; margin-left: 163px; 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" required name="fromFormat" [(ngModel)]="action.dateFormatter.fromFormat"
+                type="text">
             </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 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" required name="toFormat" [(ngModel)]="action.dateFormatter.toFormat"
+                type="text">
             </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>
+
+      <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" required name="fromTimezone" [(ngModel)]="action.dateFormatter.fromTimezone"
+                type="text">
             </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 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" required name="toTimezone" [(ngModel)]="action.dateFormatter.toTimezone"
+                type="text">
             </div>
           </div>
         </div>
+      </div>
+    </div>
 
     <!-- replace text -->
-    <div *ngIf="action.actionType === 'replace text'" class="action-container" style="flex-direction: row; margin-left: 152px; padding: 0 0.8em;">
+    <div *ngIf="action.actionType === 'replace text'" class="action-container" style="flex-direction: row; margin-left: 160px; padding: 0 0.8em;">
 
       <div class="action-item">
         <div class="from" style="width:100%;">
@@ -94,8 +314,8 @@
 
             <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">
+              <input data-tests-id="InputFindWhat" class="input-text" required name="findWhat" [(ngModel)]="action.replaceText.find" type="text"
+                placeholder="Find text">
             </div>
 
           </div>
@@ -109,7 +329,7 @@
 
             <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"
+              <input data-tests-id="InputReplaceWith" class="input-text" required name="replaceWith" [(ngModel)]="action.replaceText.replace"
                 type="text" placeholder="Replace with text">
             </div>
 
@@ -120,15 +340,14 @@
     </div>
 
     <!-- log text -->
-    <div *ngIf="action.actionType === 'log text'" class="action-container" style="flex-direction: row; margin-left: 152px; padding: 0 0.8em;">
+    <div *ngIf="action.actionType === 'log text'" class="action-container" style="flex-direction: row; margin-left: 160px; 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">
+              <input class="input-text" data-tests-id="InputLogName" name="logName" [(ngModel)]="action.logText.name" type="text" placeholder="Enter log name">
             </div>
           </div>
         </div>
@@ -139,8 +358,8 @@
           <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">
+              <input class="input-text" data-tests-id="InputLogLevel" required name="logLevel" [(ngModel)]="action.logText.level" type="text"
+                placeholder="The title for the log entry">
             </div>
           </div>
         </div>
@@ -165,7 +384,7 @@
           </div>
         </div>
         <div *ngIf="action.map.haveDefault" class="input-wrapper">
-          <input type="text" ngModel required name="defaultInput" data-tests-id="defaultInput" [(ngModel)]="action.map.default" class="input">
+          <input type="text" required name="defaultInput" data-tests-id="defaultInput" [(ngModel)]="action.map.default" class="input">
         </div>
       </div>
 
@@ -179,10 +398,10 @@
         <tbody ngModelGroup="mapKeyValue" #mapKeyValue="ngModelGroup">
           <tr *ngFor="let item of action.map.values; let index = index;" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index">
             <th style="height: 30px; border: 1px solid #F3F3F3;">
-              <input [(ngModel)]="item.key" ngModel required name="mapValue[{{index}}]" data-tests-id="key" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
+              <input [(ngModel)]="item.key" required name="mapKey[{{index}}]" data-tests-id="key" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
             </th>
             <th style="height: 30px; border: 1px solid #F3F3F3;">
-              <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;">
+              <input [(ngModel)]="item.value" 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 data-tests-id="btn-remove-row" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}"
@@ -195,7 +414,7 @@
       </table>
 
 
-      <div style="display:flex; justify-content: space-between;">
+      <div style="display:flex; justify-content: flex-start;">
         <div style="display: flex; align-items: center;">
           <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>
@@ -203,6 +422,17 @@
           </button>
           <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add Row</span>
         </div>
+        <div class="btn-wrapper">
+          <div style="width: 36px; height: 36px; cursor: pointer;">
+            <span style="width: 100%;
+                    color:#5a5a5a;
+                    height: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;" [innerHTML]="'download' | feather:20"></span>
+          </div>
+          <input type="file" id="file" accept=".csv" (change)="handleFileInput($event.target.files)">
+        </div>
       </div>
     </div>
 
-- 
cgit 1.2.3-korg