diff options
Diffstat (limited to 'public/src/app/rule-engine/action/action.component.html')
| -rw-r--r-- | public/src/app/rule-engine/action/action.component.html | 336 |
1 files changed, 283 insertions, 53 deletions
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> |