|
1 | | -<p>pipeline-stepper works!</p> |
2 | 1 | <mat-stepper #stepper> |
| 2 | + <mat-step [stepControl]="parserFormGroup"> |
| 3 | + <form [formGroup]="parserFormGroup"> |
| 4 | + <ng-template matStepLabel>Parser config</ng-template> |
| 5 | + <mat-tab-group color="primary" class="parser-chain-step"> |
| 6 | + <mat-tab label="General Config"> |
| 7 | + <div class="general-section"> |
| 8 | + <h1>Kafka Topic config: </h1> |
| 9 | + <span>Configuration of Kafka topic for parser job</span> |
| 10 | + <div style="display: flex; flex-direction: column"> |
| 11 | + <div style="display: flex; flex-direction: row"> |
| 12 | + <mat-form-field class="input-form" color="primary" appearance="outline"> |
| 13 | + <mat-label>Topic output</mat-label> |
| 14 | + <input matInput |
| 15 | + type="text" |
| 16 | + formControlName="topicOutput" |
| 17 | + id="topicOutput" |
| 18 | + label="topic Output" |
| 19 | + placeholder="topic Output" |
| 20 | + > |
| 21 | + </mat-form-field> |
| 22 | + <mat-form-field class="input-form" color="primary" appearance="outline" [style.margin-left.px]="15"> |
| 23 | + <mat-label>Error Topic</mat-label> |
| 24 | + <input matInput |
| 25 | + type="text" |
| 26 | + formControlName="errorTopic" |
| 27 | + id="errorTopic" |
| 28 | + label="error topic name" |
| 29 | + placeholder="error topic"> |
| 30 | + </mat-form-field> |
| 31 | + </div> |
| 32 | + <mat-slide-toggle color="primary" formControlName="sourceFlag" [style.margin-bottom.px]="15">Enable source |
| 33 | + </mat-slide-toggle> |
| 34 | + <div *ngIf="parserFormGroup.controls.sourceFlag.value" class="general-section"> |
| 35 | + <mat-form-field class="input-form" color="primary" |
| 36 | + appearance="outline"> |
| 37 | + <mat-label>Original base path</mat-label> |
| 38 | + <input matInput |
| 39 | + type="text" |
| 40 | + formControlName="origBasePath" |
| 41 | + id="origBasePath" |
| 42 | + label="original base path" |
| 43 | + placeholder="orig Base Path name"> |
| 44 | + </mat-form-field> |
| 45 | + </div> |
| 46 | + </div> |
| 47 | + </div> |
| 48 | + |
| 49 | + </mat-tab> |
| 50 | + |
| 51 | + <div formArrayName="chains"> |
| 52 | + <mat-tab *ngFor="let chain of chains.controls; let index = index" formGroupName="{{index}}"> |
| 53 | + <ng-template mat-tab-label> |
| 54 | + <ng-container *ngIf="!chain.getRawValue().editMode"> |
| 55 | + <div (dblclick)="dbClick(chain)">{{ chain.getRawValue().chainName }}</div> |
| 56 | + </ng-container> |
| 57 | + |
| 58 | + <ng-container *ngIf="chain.getRawValue().editMode"> |
| 59 | + <input style="max-width: 100px" formControlName="chainName"/> |
| 60 | + <mat-icon class="save-tab-icon" (click)="dbClick(chain)">save</mat-icon> |
| 61 | + <mat-icon *ngIf="chains.length > 1" class="delete-tab-icon" (click)="deleteChain(index)">delete |
| 62 | + </mat-icon> |
| 63 | + </ng-container> |
| 64 | + </ng-template> |
| 65 | + <mat-form-field *ngIf="vm$ | async as vm" class="source-list" appearance="outline"> |
| 66 | + <mat-label>Source</mat-label> |
| 67 | + <mat-chip-list #chipList aria-label="Source selection" selectable="false"> |
| 68 | + <mat-chip |
| 69 | + *ngFor="let selectedPipeline of getSelectedSource(index)" |
| 70 | + (removed)="remove(selectedPipeline, index)" |
| 71 | + > |
| 72 | + {{ selectedPipeline }} |
| 73 | + <button matChipRemove> |
| 74 | + <mat-icon>cancel</mat-icon> |
| 75 | + </button> |
| 76 | + </mat-chip> |
| 77 | + <input |
| 78 | + placeholder="Select source..." |
| 79 | + #sourceInput |
| 80 | + formControlName="source" |
| 81 | + [style.width.%]="85" |
| 82 | + [matAutocomplete]="auto" |
| 83 | + [matChipInputFor]="chipList" |
| 84 | + [matChipInputSeparatorKeyCodes]="separatorKeysCodes" |
| 85 | + (matChipInputTokenEnd)="add($event, index)"> |
| 86 | + <mat-autocomplete #auto="matAutocomplete" |
| 87 | + (optionSelected)="selected($event, index)"> |
| 88 | + <mat-option |
| 89 | + *ngFor="let searchedPipeline of vm.pipelines | filter:getSelectedSource(index) | contains:getSource(index)" |
| 90 | + [value]="searchedPipeline"> |
| 91 | + {{ searchedPipeline }} |
| 92 | + </mat-option> |
| 93 | + </mat-autocomplete> |
| 94 | + </mat-chip-list> |
| 95 | + |
| 96 | + </mat-form-field> |
| 97 | + |
| 98 | + <!-- Chains list --> |
| 99 | + |
| 100 | + <div *ngIf="vm$ | async as vm"> |
| 101 | + <app-custom-list *ngIf="vm.currentChains.length > 0"> |
| 102 | + <app-custom-list-line *ngFor="let chain of vm.currentChains"> |
| 103 | + <mat-icon customListIcon>link</mat-icon> |
| 104 | + <div customListLine>{{ chain.name }}</div> |
| 105 | + <app-styled-chips-list customListChips |
| 106 | + [chips]="topicMap.get(index)?.get(chain.id) ? [topicMap.get(index).get(chain.id)] : [] " |
| 107 | + [forceStyleDisplay]="true"></app-styled-chips-list> |
| 108 | + <button |
| 109 | + customListAction |
| 110 | + mat-button |
| 111 | + color="primary" |
| 112 | + class="flex-row-jc-ac" |
| 113 | + data-qe-id="view-fields-button" |
| 114 | + matTooltip="Add topic to the chain" |
| 115 | + matTooltipPosition="above" |
| 116 | + (click)="assignTopic(assignTopicDialog, chain.id, index)"> |
| 117 | + <mat-chip selected>ASSIGN TOPIC |
| 118 | + <mat-icon [style.color]="'white'">add</mat-icon> |
| 119 | + </mat-chip> |
| 120 | + </button> |
| 121 | + <button |
| 122 | + customListAction |
| 123 | + mat-button |
| 124 | + color="primary" |
| 125 | + class="flex-row-jc-ac" |
| 126 | + data-qe-id="view-fields-button" |
| 127 | + matTooltip="Edit" |
| 128 | + matTooltipPosition="below" |
| 129 | + [routerLink]="['/parserconfig', 'chains', chain.id]" |
| 130 | + [queryParams]="{pipeline: chain.pipeline}" |
| 131 | + |
| 132 | + > |
| 133 | + <mat-icon class="edit-action-color">edit</mat-icon> |
| 134 | + </button> |
| 135 | + <button |
| 136 | + customListAction |
| 137 | + mat-button |
| 138 | + color="primary" |
| 139 | + class="flex-row-jc-ac" |
| 140 | + data-qe-id="delete-field-type-btn" |
| 141 | + matTooltip="Delete" |
| 142 | + matTooltipPosition="below" |
| 143 | + (click)="deleteItem(chain.id)"> |
| 144 | + <mat-icon class="delete-action-color">delete</mat-icon> |
| 145 | + </button> |
| 146 | + </app-custom-list-line> |
| 147 | + </app-custom-list> |
| 148 | + <button [style.margin.px]="10" mat-raised-button routerLink="/parserconfig" |
| 149 | + color="primary">ADD CHAIN |
| 150 | + </button> |
| 151 | + </div> |
| 152 | + </mat-tab> |
| 153 | + </div> |
| 154 | + <mat-tab disabled> |
| 155 | + <ng-template mat-tab-label> |
| 156 | + <button mat-icon-button (click)="addTab()"> |
| 157 | + <mat-icon>add_circle</mat-icon> |
| 158 | + </button> |
| 159 | + </ng-template> |
| 160 | + </mat-tab> |
| 161 | + </mat-tab-group> |
| 162 | + <div> |
| 163 | + <button mat-raised-button color="primary" (click)="navigateToReceiver()" matStepperNext>Next |
| 164 | + </button> |
| 165 | + </div> |
| 166 | + </form> |
| 167 | + </mat-step> |
3 | 168 | </mat-stepper> |
| 169 | + |
| 170 | + |
| 171 | +<ng-template #assignTopicDialog let-data> |
| 172 | + <h2 mat-dialog-title>Assign Topic</h2> |
| 173 | + <div mat-dialog-content [style.display]="'inline'"> |
| 174 | + <div class="inner-assign-wrapper"> |
| 175 | + <span class="inner-assign-wrapper-span"> |
| 176 | + Topic or Topic pattern that would associated with this chain. |
| 177 | + </span> |
| 178 | + <mat-form-field appearance="outline"> |
| 179 | + <mat-label>Topic Name</mat-label> |
| 180 | + <input matInput [(ngModel)]="data.name"> |
| 181 | + </mat-form-field> |
| 182 | + </div> |
| 183 | + </div> |
| 184 | + <div mat-dialog-actions align="end"> |
| 185 | + <button mat-raised-button color="accent" [mat-dialog-close]="false">Cancel</button> |
| 186 | + <button mat-raised-button color="primary" [mat-dialog-close]="data">Assign</button> |
| 187 | + </div> |
| 188 | +</ng-template> |
0 commit comments