Merge pull request #387 from Consdata/IKC-413-validate-brokers

IKC-413 Validate brokers
Consdata · Oct 25, 2024 · 84b4fdd · 84b4fdd
2 parents 7ebc1f3 + 066d2c8
commit 84b4fdd
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/kouncil-frontend/libs/common-components/src/lib/text-field/text-field.component.ts b/kouncil-frontend/libs/common-components/src/lib/text-field/text-field.component.ts
@@ -21,8 +21,8 @@ import {FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms';
         <mat-error class="error" *ngIf="hasError('unique')">
           Field value is not unique
         </mat-error>
-        <mat-error class="error" *ngIf="hasError('noOnlyWhitespace')">
-          Field value is not correct
+        <mat-error class="error" *ngIf="hasError('incorrectValue') || hasError('noOnlyWhitespace')">
+          Field value is incorrect
         </mat-error>
       </ng-container>
     </div>

diff --git a/...rs/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.scss b/...rs/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.scss
@@ -26,7 +26,11 @@
     display: inline-flex;
     width: 100%;
     gap: $space-5;
-    align-items: end;
+  }
+
+  .broker-remove-btn {
+    display: block;
+    padding-top: 36px;
   }
 }
 

diff --git a/...ters/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.ts b/...ters/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.ts
@@ -1,5 +1,13 @@
 import {Component, Input} from '@angular/core';
-import {FormArray, FormControl, FormGroup, Validators} from '@angular/forms';
+import {
+  AbstractControl,
+  FormArray,
+  FormControl,
+  FormGroup,
+  ValidationErrors,
+  ValidatorFn,
+  Validators
+} from '@angular/forms';
 import {ClusterBroker, ClusterMetadata} from '../../../cluster.model';
 import {ViewMode} from '@app/common-utils';
 
@@ -44,12 +52,14 @@ import {ViewMode} from '@app/common-utils';
                                      [form]="brokerForm"
                                      [controlName]="'jmxPassword'"></app-common-password-field>
 
-          <button class="action-button-white" type="button" mat-button [disableRipple]="true"
-                  (click)="removeBroker(i)" *ngIf="viewMode !== ViewMode.VIEW">
-            <mat-icon class="material-symbols-outlined remove">
-              remove
-            </mat-icon>
-          </button>
+          <div class="broker-remove-btn">
+            <button class="action-button-white" type="button" mat-button [disableRipple]="true"
+                    (click)="removeBroker(i)" *ngIf="viewMode !== ViewMode.VIEW">
+              <mat-icon class="material-symbols-outlined remove">
+                remove
+              </mat-icon>
+            </button>
+          </div>
         </div>
       </ng-container>
 
@@ -71,7 +81,7 @@ export class ClusterFormBrokersComponent {
   addBroker(broker?: ClusterBroker): void {
     this.brokers.push(new FormGroup({
       id: new FormControl(broker ? broker.id : ''),
-      bootstrapServer: new FormControl(broker ? broker.bootstrapServer : '', [Validators.required]),
+      bootstrapServer: new FormControl(broker ? broker.bootstrapServer : '', [Validators.required, this.isCorrectValue()]),
       jmxUser: new FormControl(broker ? broker.jmxUser : ''),
       jmxPassword: new FormControl(broker ? broker.jmxPassword : ''),
       jmxPort: new FormControl(broker ? broker.jmxPort : '')
@@ -89,4 +99,11 @@ export class ClusterFormBrokersComponent {
   get brokers(): FormArray<FormGroup> {
     return this.clusterForm.get('brokers') as FormArray<FormGroup>;
   }
+
+  private isCorrectValue(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const regExp: RegExp = /.*:[0-9]+/;
+      return control.value && !regExp.test(control.value) ? {incorrectValue: true} : null;
+    };
+  }
 }