FOGL-7457: Fixed configuration issues (#255)

Fixed configuration issues

Author: mshariq-nerd

src/app/components/core/configuration-manager/configuration-group/configuration-group.component.html

@@ -7,6 +7,14 @@ <h6 class="is-6 has-text-weight-semibold">
         </a>
       </h6>
     </li>
+    <!-- Advanced and security group -->
+    <li *ngFor="let g of advanceCategoriesGroup" [ngClass]="{'is-active': selectedGroup == g.group}">
+      <h6 class="is-6 has-text-weight-semibold">
+        <a (click)="selectTab(g.group)">
+          {{g.group}}
+        </a>
+      </h6>
+    </li>
     <ng-container *ngIf="from !== 'notification'">
       <li [ngClass]="{'is-active': selectedGroup == 'developer'}"
         *ngIf="developerFeaturesService.getDeveloperFeatureControl() && pages.includes(from) && rolesService.hasEditPermissions()">
@@ -19,6 +27,12 @@ <h6 class="is-6 has-text-weight-semibold">
 </div>
 <div [ngClass]="{'highlight': from !== 'config-manager'}">
   <ng-container *ngFor="let g of groups">
+    <app-show-configuration [hidden]="selectedGroup !== g.group" [groupConfiguration]="g.config" [group]="g.group"
+      [selectedGroup]="selectedGroup" [fullConfiguration]="category.config" (event)="getChangedConfiguration($event)"
+      (formStatusEvent)="formStatus($event)"></app-show-configuration>
+  </ng-container>
+  <!-- Advanced and security group configuration -->
+  <ng-container *ngFor="let g of advanceCategoriesGroup">
     <ng-container *ngIf="g.category == category?.name+'Advanced'; else SecurityGroup">
       <app-show-configuration [hidden]="selectedGroup !== g.group" [groupConfiguration]="g.config" [group]="g.group"
         [selectedGroup]="selectedGroup" [fullConfiguration]="g.config" (event)="getChangedAdvanceConfiguration($event)"
@@ -32,16 +46,11 @@ <h6 class="is-6 has-text-weight-semibold">
           (formStatusEvent)="formStatus($event)"></app-show-configuration>
       </ng-container>
     </ng-template>
-    <ng-template #pluginGroup>
-      <app-show-configuration [hidden]="selectedGroup !== g.group" [groupConfiguration]="g.config" [group]="g.group"
-        [selectedGroup]="selectedGroup" [fullConfiguration]="category.config" (event)="getChangedConfiguration($event)"
-        (formStatusEvent)="formStatus($event)"></app-show-configuration>
-    </ng-template>
   </ng-container>
   <ng-container *ngIf="from !== 'notification'">
     <app-plugin-persist-data *ngIf="selectedGroup == 'developer' && pages.includes(from)" [serviceStaus]="serviceStatus"
       [serviceName]="category?.name" [pluginName]="plugin">
     </app-plugin-persist-data>
   </ng-container>
 
-</div>
+</div>

src/app/components/core/configuration-manager/configuration-group/configuration-group.component.ts

@@ -29,6 +29,7 @@ export class ConfigurationGroupComponent implements OnInit {
   securityConfiguration: any;
   changedAdvanceConfiguration: any;
   changedSecurityConfiguration: any;
+  advanceCategoriesGroup = [];
 
   constructor(
     public developerFeaturesService: DeveloperFeaturesService,
@@ -70,6 +71,9 @@ export class ConfigurationGroupComponent implements OnInit {
         e.group === 'Default Configuration' ? acc.unshift(e) : acc.push(e);
         return acc;
       }, []);
+
+    // set initial group
+    this.selectedGroup = this.groups[0]?.group;
   }
 
   /**
@@ -83,6 +87,7 @@ export class ConfigurationGroupComponent implements OnInit {
   }
 
   public getChildConfigData() {
+    this.advanceCategoriesGroup = [];
     // No advance configuration on add form
     if (this.pages.includes(this.from) && this.category) {
       this.categoryKey = this.category.name;
@@ -94,6 +99,7 @@ export class ConfigurationGroupComponent implements OnInit {
     this.configService.getCategoryConfigChildren(categoryName).
       subscribe(
         (data: any) => {
+          this.advanceCategoriesGroup = [];
           const categoryChildren = data.categories?.filter(cat => (cat.key == `${this.categoryKey}Advanced`) || (cat.key == `${this.categoryKey}Security`));
           categoryChildren.forEach(cat => {
             // Set group of advance/security configuration
@@ -128,7 +134,7 @@ export class ConfigurationGroupComponent implements OnInit {
           if (category.key == `${this.categoryKey}Security`) {
             this.securityConfiguration = { key: category.key, config: cloneDeep(data) };
           }
-          this.upsertAdvanceConfiguration(this.groups, { category: category.key, group: category.group, config: data });
+          this.upsertAdvanceConfiguration(this.advanceCategoriesGroup, { category: category.key, group: category.group, config: data });
         },
         error => {
           console.log('error ', error);
@@ -141,7 +147,6 @@ export class ConfigurationGroupComponent implements OnInit {
       );
   }
 
-
   /**
    * Get the change config item values form show-child
    * component and emit that value to parent component.
@@ -194,6 +199,13 @@ export class ConfigurationGroupComponent implements OnInit {
     else {
       groups.push(config);
     }
+
+    groups = groups
+      .sort((a, b) => a.group.localeCompare(b.group))
+      .reduce((acc, e) => {
+        e.group === 'Default Configuration' ? acc.unshift(e) : acc.push(e);
+        return acc;
+      }, []);
   }
 
   formStatus(status: boolean) {

src/app/components/core/configuration-manager/configuration-manager.component.html

@@ -41,8 +41,7 @@
             <div class="media">
               <div class="media-content">
                 <p class="subtitle is-6">{{ category.description }}
-                  <button class="button is-small" id="refresh-check"
-                    (click)="refreshCategory(category.name, category.description)">
+                  <button class="button is-small" id="refresh-check" (click)="refreshCategory(category.name)">
                     <span class="icon is-small">
                       <i class="fa fa-sm fa-sync"></i>
                     </span>
@@ -70,4 +69,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

src/app/components/core/configuration-manager/configuration-manager.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { TreeComponent } from '@circlon/angular-tree-component';
-import { isEmpty, findIndex, cloneDeep } from 'lodash';
+import { isEmpty, find, cloneDeep } from 'lodash';
 
 import {
   AlertService, ConfigurationControlService, ConfigurationService,
@@ -213,7 +213,7 @@ export class ConfigurationManagerComponent implements OnInit {
         });
   }
 
-  public refreshCategory(categoryKey: string, categoryDesc: string): void {
+  public refreshCategory(categoryKey: string): void {
     this.changedConfig = null;
     this.validConfigForm = false;
     /** request started */
@@ -223,8 +223,8 @@ export class ConfigurationManagerComponent implements OnInit {
         (data) => {
           /** request completed */
           this.ngProgress.done();
-          const index = findIndex(this.categoryData, ['name', categoryKey]);
-          this.categoryData[index] = { name: categoryKey, config: data, description: categoryDesc };
+          const category = find(this.categoryDataCopy, ['name', categoryKey]);
+          category.config = data;
         },
         error => {
           /** request completed */
@@ -274,6 +274,7 @@ export class ConfigurationManagerComponent implements OnInit {
         this.validConfigForm = false;
         this.alertService.success('Configuration updated successfully.', true);
         this.ngProgress.done();
+        this.refreshCategory(categoryName);
       },
         (error) => {
           this.ngProgress.done();

src/app/components/core/configuration-manager/show-configuration/show-configuration.component.ts

@@ -38,24 +38,6 @@ export class ShowConfigurationComponent implements OnInit {
       if (changes?.selectedGroup?.currentValue == this.group) {
         this.configControlService.checkConfigItemOnGroupChange(this.form, this.fullConfiguration);
       }
-
-      if (this.jsonElements) {
-        this.jsonElements.forEach((jsonComp: CodemirrorComponent) => {
-          jsonComp.codeMirror.refresh();
-        });
-      }
-
-      if (this.codeElements) {
-        this.codeElements.forEach((codeElmt: CodemirrorComponent) => {
-          codeElmt.codeMirror.refresh();
-        });
-      }
-      // refresh codemirror editor to reflect changed values
-      if (this.codeMirrorCmpt) {
-        this.codeMirrorCmpt.forEach((comp: CodemirrorComponent) => {
-          comp.codeMirror?.refresh();
-        })
-      }
     }
   }
 
@@ -78,23 +60,48 @@ export class ShowConfigurationComponent implements OnInit {
       filter(changes => Object.keys(changes).length !== 0)
     ).subscribe(
       data => {
-        const [key, value] = Object.entries(data)[0];
-        const configuration = this.groupConfiguration.find(c => c.key === key);
-        if (configuration && configuration.type !== 'script') {
-          configuration.value = value.toString();
-          this.configControlService.checkConfigItemValidityOnChange(this.form, configuration, this.fullConfiguration);
-          this.formStatusEvent.emit(this.form.status === 'VALID' ? true : false);
-          if (this.form.valid) {
-            this.event.emit(data);
+        Object.keys(data).forEach(k => {
+          if (data[k] !== this.fullConfiguration[k].value) {
+            const configuration = this.groupConfiguration.find(c => c.key === k);
+            if (configuration && configuration.type !== 'script') {
+              configuration.value = data[k].toString();
+              this.configControlService.checkConfigItemValidityOnChange(this.form, configuration, this.fullConfiguration);
+              this.formStatusEvent.emit(this.form.status === 'VALID' ? true : false);
+              if (this.form.valid) {
+                this.event.emit(data);
+              }
+            } else {
+              configuration.value = data[k].toString();
+              const file = this.createScriptFile(data[k].toString(), configuration);
+              this.event.emit({ [configuration.key]: file });
+            }
           }
-        } else {
-          configuration.value = value.toString();
-          const file = this.createScriptFile(value.toString(), configuration);
-          this.event.emit({ [configuration.key]: file });
-        }
+        })
       });
   }
 
+  ngAfterViewChecked() {
+    // refresh code mirror content after page load
+    if (this.jsonElements) {
+      this.jsonElements.forEach((jsonComp: CodemirrorComponent) => {
+        jsonComp.codeMirror?.refresh();
+      });
+    }
+
+    if (this.codeElements) {
+      this.codeElements.forEach((codeElmt: CodemirrorComponent) => {
+        codeElmt.codeMirror?.refresh();
+      });
+    }
+
+    // refresh codemirror editor to reflect changed values
+    if (this.codeMirrorCmpt) {
+      this.codeMirrorCmpt.forEach((comp: CodemirrorComponent) => {
+        comp.codeMirror?.refresh();
+      })
+    }
+  }
+
   createScriptFile(value: string, config: any) {
     const blob = new Blob([value], { type: 'plain/text' });
     const file = new File([blob], config.fileName.substring(config.fileName.lastIndexOf(config + 1)));

src/app/components/core/filter/add-filter-wizard/add-filter-wizard.component.html

@@ -35,7 +35,9 @@
                     [loading]="!pluginData.length && !stopLoading" (change)="filterSelectionChanged($event)"
                     bindLabel="pluginToInstall" formControlName="pluginToInstall">
                   </ng-select>
-                  <small *ngIf="!isValidPlugin" class="help is-danger level-left">* Please select a valid plugin</small>
+                  <small
+                    *ngIf="serviceForm.controls['pluginToInstall'].hasError('required') && serviceForm.controls['pluginToInstall'].touched"
+                    class="help is-danger level-left">* Please select a valid plugin</small>
                 </div>
               </div>
             </div>
@@ -53,9 +55,11 @@
                 <div class="column">
                   <div class="field">
                     <div class="control">
-                      <input class="input" id="name" type="text" placeholder="name" title="No double quotes!" autocomplete="off" formControlName="name" required
-                        (input)="validateServiceName($event)">
-                      <small *ngIf="!isValidName" class="help is-danger level-left">Application name is required</small>
+                      <input class="input" id="name" type="text" placeholder="name" title="No double quotes!"
+                        autocomplete="off" formControlName="name">
+                      <small
+                        *ngIf="serviceForm.controls['name'].hasError('required') && serviceForm.controls['name'].touched"
+                        class="help is-danger level-left">Application name is required</small>
                     </div>
                   </div>
                 </div>
@@ -73,14 +77,15 @@
               <div class="column is-vertical-center">
                 <div class="select is-multiple">
                   <select #selectedPlugin multiple name="type" formControlName="plugin"
-                    (change)="getDescription(selectedPlugin.value)" required>
+                    (change)="selectPlugin(selectedPlugin.value)">
                     <option *ngFor="let p of plugins" [value]="p.name"> {{ p.name }}</option>
                   </select>
                 </div>
                 &nbsp;
-                <small *ngIf="selectedPluginDescription && isValidPlugin && isSinglePlugin"
+                <small *ngIf="!serviceForm.controls['plugin'].hasError('required')
+                  && !serviceForm.controls['plugin'].hasError('multiplePlugins') "
                   class="help description level-left">{{ selectedPluginDescription }}</small>
-                <small *ngIf="!isSinglePlugin" class="help is-danger level-left">* Please select a single plugin</small>
+
               </div>
             </div>
             <div *ngIf="plugin" class="column is-1">
@@ -116,7 +121,11 @@
                   notFoundText="No plugins available to install" (change)="filterSelectionChanged($event)"
                   bindLabel="pluginToInstall" formControlName="pluginToInstall">
                 </ng-select>
-                <small *ngIf="!isValidPlugin" class="help is-danger level-left">* Please select a valid plugin</small>
+                <small
+                  *ngIf="serviceForm.controls['plugin'].hasError('required') && serviceForm.controls['plugin'].touched"
+                  class="help is-danger level-left">* Please select a valid plugin</small>
+                <small *ngIf="serviceForm.controls['plugin'].hasError('multiplePlugins')"
+                  class="help is-danger level-left">* Please select a single plugin</small>
                 <p id="requestInProgress" class="help has-text-centered"></p>
               </div>
             </div>
@@ -129,9 +138,11 @@
             <div class="field-body">
               <div class="field">
                 <div class="control">
-                  <input class="input" id="name" type="text" placeholder="name" title="No double quotes!" autocomplete="off" formControlName="name" required
-                    (input)="validateServiceName($event)">
-                  <small *ngIf="!isValidName" class="help is-danger level-left">Application name is required</small>
+                  <input class="input" id="name" type="text" placeholder="name" title="No double quotes!"
+                    autocomplete="off" formControlName="name">
+                  <small
+                    *ngIf="serviceForm.controls['name'].hasError('required') && serviceForm.controls['name'].touched"
+                    class="help is-danger level-left">Application name is required</small>
                 </div>
               </div>
             </div>
@@ -153,8 +164,8 @@
       <button (click)="movePrevious()" data-nav="previous" class="button" id="previous">Back</button>
     </div>
     <div class="steps-action">
-      <button (click)="gotoNext()" data-nav="next" [disabled]="serviceForm.invalid" class="button is-link"
-        id="next">Next</button>
+      <button (click)="gotoNext()" data-nav="next" [disabled]="serviceForm.invalid || !validChildConfigurationForm"
+        class="button is-link" id="next">Next</button>
     </div>
   </div>
-</div>
+</div>