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 | 202 |
1 files changed, 109 insertions, 93 deletions
diff --git a/public/src/app/rule-engine/action/action.component.html b/public/src/app/rule-engine/action/action.component.html index 38a9aa0..f439c5c 100644 --- a/public/src/app/rule-engine/action/action.component.html +++ b/public/src/app/rule-engine/action/action.component.html @@ -7,6 +7,52 @@ {{action.actionType | uppercase}} </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" [readonly]="store.viewOnly" 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" [readonly]="store.viewOnly" 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> + <!-- from component --> <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> @@ -25,7 +71,7 @@ <span class="label" style="padding: 0 5px; "> Field </span> - <input required name="searchField" class="input-text" data-tests-id="searchField" [(ngModel)]="action.search.searchField" + <input required name="searchField" class="input-text" [readonly]="store.viewOnly" data-tests-id="searchField" [(ngModel)]="action.search.searchField" type="text" placeholder="Search Field"> </div> </div> @@ -36,8 +82,8 @@ <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"> + <input required class="input-text" data-tests-id="searchValue" [(ngModel)]="action.search.searchValue" [readonly]="store.viewOnly" + type="text" name="searchValue" placeholder="Search Value"> </div> </div> </div> @@ -59,18 +105,22 @@ <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"> + <input class="input-text" name="searchLeft" data-tests-id="searchLeft" [(ngModel)]="action.search.searchFilter.left" [readonly]="store.viewOnly" + 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"> + 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="assigned">Assigned</option> + <option value="unassigned">Unassigned</option> <option value="oneOf">One of</option> <option value="NotOneOf">Not one of</option> </select> @@ -80,18 +130,19 @@ <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"> + <input class="input-text" name="searchRight" data-tests-id="searchRight" [(ngModel)]="action.search.searchFilter.right" [readonly]="store.viewOnly" + 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> + <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> + <p-radioButton name="searchRadio" label="Enrich" value="enrich" [ngModel]="action.search.radio" + data-tests-id="radioEnrich" (ngModelChange)="searchRadioChange($event)"></p-radioButton> </span> </div> @@ -99,17 +150,18 @@ <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 *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}}]"> + <input class="input-text" [readonly]="store.viewOnly" [(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"> + <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" [disabled]="store.viewOnly"> <mat-icon class="md-24">delete</mat-icon> </button> </div> @@ -118,8 +170,9 @@ <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> + data-tests-id="btnAddSearchFeild" [disabled]="store.viewOnly"> + <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> @@ -134,7 +187,7 @@ <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" + <input required class="input-text" [readonly]="store.viewOnly" name="searchPrefix" data-tests-id="searchPrefix" [(ngModel)]="action.search.enrich.prefix" type="text" placeholder="Search prefix"> </div> </div> @@ -150,16 +203,19 @@ </tr> </thead> <tbody ngModelGroup="searchUpdateKeyValue" #searchUpdateKeyValue="ngModelGroup"> - <tr *ngFor="let item of action.search.updates; let index = index;" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index"> + <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;"> + <input [(ngModel)]="item.key" [readonly]="store.viewOnly" 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;"> + <input [(ngModel)]="item.value" [readonly]="store.viewOnly" 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" + class="button-remove" (click)="removeSearchUpdatesRow(index)" *ngIf="action.search.updates.length > 1" [disabled]="store.viewOnly" style="height: 24px; width: 24px; display:flex; box-shadow: none;"> <mat-icon class="md-24">delete</mat-icon> </button> @@ -170,7 +226,8 @@ <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> + <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> @@ -181,56 +238,11 @@ <!-- 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 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"> @@ -238,8 +250,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;">Title</span> - <input required class="input-text" data-tests-id="InputLogTitle" name="title" [(ngModel)]="action.logEvent.title" type="text" - placeholder="The title for the log entry"> + <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="InputLogTitle" name="title" [(ngModel)]="action.logEvent.title" + type="text" placeholder="The title for the log entry"> </div> </div> </div> @@ -251,8 +263,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" name="logText" [(ngModel)]="action.logText.text" type="text" - placeholder="Text to log"> + <input required class="input-text" [readonly]="store.viewOnly" data-tests-id="InputLogText" name="logText" [(ngModel)]="action.logText.text" + type="text" placeholder="Text to log"> </div> </div> </div> @@ -267,7 +279,7 @@ <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" + <input data-tests-id="InputFromFormat" [readonly]="store.viewOnly" class="input-text" required name="fromFormat" [(ngModel)]="action.dateFormatter.fromFormat" type="text"> </div> </div> @@ -276,7 +288,7 @@ <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" + <input data-tests-id="InputToFormat" [readonly]="store.viewOnly" class="input-text" required name="toFormat" [(ngModel)]="action.dateFormatter.toFormat" type="text"> </div> </div> @@ -288,7 +300,7 @@ <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" + <input class="input-text" [readonly]="store.viewOnly" data-tests-id="InputFromTimezone" required name="fromTimezone" [(ngModel)]="action.dateFormatter.fromTimezone" type="text"> </div> </div> @@ -297,7 +309,7 @@ <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" + <input class="input-text" [readonly]="store.viewOnly" data-tests-id="InputToTimezone" required name="toTimezone" [(ngModel)]="action.dateFormatter.toTimezone" type="text"> </div> </div> @@ -314,8 +326,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" required name="findWhat" [(ngModel)]="action.replaceText.find" type="text" - placeholder="Find text"> + <input data-tests-id="InputFindWhat" [readonly]="store.viewOnly" class="input-text" required name="findWhat" [(ngModel)]="action.replaceText.find" + type="text" placeholder="Find text"> </div> </div> @@ -329,7 +341,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" required name="replaceWith" [(ngModel)]="action.replaceText.replace" + <input data-tests-id="InputReplaceWith" [readonly]="store.viewOnly" class="input-text" required name="replaceWith" [(ngModel)]="action.replaceText.replace" type="text" placeholder="Replace with text"> </div> @@ -347,7 +359,8 @@ <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" name="logName" [(ngModel)]="action.logText.name" type="text" placeholder="Enter log name"> + <input class="input-text" [readonly]="store.viewOnly" data-tests-id="InputLogName" name="logName" [(ngModel)]="action.logText.name" + type="text" placeholder="Enter log name"> </div> </div> </div> @@ -358,8 +371,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" required name="logLevel" [(ngModel)]="action.logText.level" type="text" - placeholder="The title for the log entry"> + <input class="input-text" [readonly]="store.viewOnly" data-tests-id="InputLogLevel" required name="logLevel" [(ngModel)]="action.logText.level" + type="text" placeholder="The title for the log entry"> </div> </div> </div> @@ -372,8 +385,8 @@ <!-- Default checkbox and input --> <div class="default" style="display: flex; align-items: center"> <div class="pretty p-svg"> - <input type="checkbox" name="defaultCheckbox" data-tests-id="defaultCheckbox" [checked]="action.map.haveDefault" (change)="changeCheckbox()" - /> + <input type="checkbox" name="defaultCheckbox" data-tests-id="defaultCheckbox" [checked]="action.map.haveDefault" + (change)="changeCheckbox()" /> <div class="state"> <!-- svg path --> <svg class="svg svg-icon" viewBox="0 0 20 20"> @@ -384,7 +397,8 @@ </div> </div> <div *ngIf="action.map.haveDefault" class="input-wrapper"> - <input type="text" 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" [readonly]="store.viewOnly" + class="input"> </div> </div> @@ -398,14 +412,15 @@ <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" required name="mapKey[{{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;" [readonly]="store.viewOnly"> </th> <th style="height: 30px; border: 1px solid #F3F3F3;"> - <input [(ngModel)]="item.value" 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;" [readonly]="store.viewOnly"> </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)="removeMapRow(index)" *ngIf="action.map.values.length > 1" style="height: 24px; width: 24px; display:flex; box-shadow: none;"> + class="button-remove" (click)="removeMapRow(index)" *ngIf="action.map.values.length > 1" style="height: 24px; width: 24px; display:flex; box-shadow: none;" [disabled]="store.viewOnly"> <mat-icon class="md-24">delete</mat-icon> </button> </th> @@ -416,7 +431,7 @@ <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;"> + <button mat-mini-fab color="primary" (click)="addMapRow()" data-tests-id="btn-add-row" style="height: 16px; width: 16px; display:flex; box-shadow: none;" [disabled]="store.viewOnly"> <span style="padding-left: 2px; display: flex; justify-content: center; align-items: center" [innerHTML]="'plus' | feather:12"></span> <!-- <mat-icon>add</mat-icon> --> </button> @@ -429,7 +444,8 @@ height: 100%; display: flex; justify-content: center; - align-items: center;" [innerHTML]="'download' | feather:20"></span> + align-items: center;" + [innerHTML]="'download' | feather:20"></span> </div> <input type="file" id="file" accept=".csv" (change)="handleFileInput($event.target.files)"> </div> |