NAS-110078: Ngrx for system config

src/app/pages/system/advanced/advanced-settings.component.ts

@@ -4,7 +4,7 @@ import { Component, OnInit, Type } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { TranslateService } from '@ngx-translate/core';
+import { Store } from '@ngrx/store';
 import * as cronParser from 'cron-parser';
 import { Subject } from 'rxjs';
 import { filter, switchMap, take } from 'rxjs/operators';
@@ -13,6 +13,7 @@ import { DeviceType } from 'app/enums/device-type.enum';
 import { helptext_system_advanced } from 'app/helptext/system/advanced';
 import { helptext_system_general as helptext } from 'app/helptext/system/general';
 import { AdvancedConfig } from 'app/interfaces/advanced-config.interface';
+import { AppState } from 'app/interfaces/app-state.interface';
 import { Device } from 'app/interfaces/device.interface';
 import { CoreEvent } from 'app/interfaces/events';
 import { GlobalActionConfig } from 'app/interfaces/global-action.interface';
@@ -37,6 +38,7 @@ import {
 } from 'app/services';
 import { AppLoaderService } from 'app/services/app-loader/app-loader.service';
 import { ModalService } from 'app/services/modal.service';
+import { selectAdvancedConfig } from 'app/stores/system-config/system-config.selectors';
 import { T } from 'app/translate-marker';
 import { TunableFormComponent } from '../tunable/tunable-form/tunable-form.component';
 import { ConsoleFormComponent } from './console-form/console-form.component';
@@ -208,13 +210,13 @@ export class AdvancedSettingsComponent implements OnInit {
     private core: CoreService,
     public datePipe: DatePipe,
     protected userService: UserService,
-    private translate: TranslateService,
+    private store$: Store<AppState>,
   ) {}
 
   ngOnInit(): void {
     this.getDatasetData();
     this.getDataCardData();
-    this.sysGeneralService.refreshSysGeneral$.pipe(untilDestroyed(this)).subscribe(() => {
+    this.store$.select(selectAdvancedConfig).pipe(untilDestroyed(this)).subscribe(() => {
       this.getDatasetData();
       this.getDataCardData();
     });
@@ -446,18 +448,10 @@ export class AdvancedSettingsComponent implements OnInit {
       this.dialog
         .info(helptext_system_advanced.first_time.title, helptext_system_advanced.first_time.message)
         .pipe(untilDestroyed(this)).subscribe(() => {
-          if ([CardId.Console, CardId.Kernel, CardId.Syslog].includes(name)) {
-            this.sysGeneralService.sendConfigData(this.configData as any);
-          }
-
           this.modalService.openInSlideIn(addComponent, id);
           this.isFirstTime = false;
         });
     } else {
-      if ([CardId.Console, CardId.Kernel, CardId.Syslog].includes(name)) {
-        this.sysGeneralService.sendConfigData(this.configData as any);
-      }
-
       this.modalService.openInSlideIn(addComponent, id);
     }
   }

src/app/pages/system/advanced/console-form/console-form.component.ts

@@ -2,21 +2,22 @@ import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Store } from '@ngrx/store';
 import { Subscription } from 'rxjs';
 import { helptext_system_advanced } from 'app/helptext/system/advanced';
+import { AppState } from 'app/interfaces/app-state.interface';
 import { FormConfiguration } from 'app/interfaces/entity-form.interface';
-import { SystemGeneralConfig } from 'app/interfaces/system-config.interface';
 import { EntityFormComponent } from 'app/pages/common/entity/entity-form';
 import { FieldSets } from 'app/pages/common/entity/entity-form/classes/field-sets';
 import { FieldConfig, FormSelectConfig } from 'app/pages/common/entity/entity-form/models/field-config.interface';
 import { RelationAction } from 'app/pages/common/entity/entity-form/models/relation-action.enum';
 import { EntityUtils } from 'app/pages/common/entity/utils';
 import {
-  DialogService, LanguageService, StorageService,
-  SystemGeneralService, WebSocketService,
+  DialogService, LanguageService, StorageService, WebSocketService,
 } from 'app/services';
 import { AppLoaderService } from 'app/services/app-loader/app-loader.service';
 import { ModalService } from 'app/services/modal.service';
+import { advancedConfigUpdated } from 'app/stores/system-config/system-config.actions';
 
 @UntilDestroy()
 @Component({
@@ -97,7 +98,6 @@ export class ConsoleFormComponent implements FormConfiguration {
   ]);
 
   private entityForm: EntityFormComponent;
-  private configData: SystemGeneralConfig;
   title = helptext_system_advanced.fieldset_console;
 
   constructor(
@@ -108,13 +108,9 @@ export class ConsoleFormComponent implements FormConfiguration {
     protected loader: AppLoaderService,
     public http: HttpClient,
     protected storage: StorageService,
-    private sysGeneralService: SystemGeneralService,
     private modalService: ModalService,
-  ) {
-    this.sysGeneralService.sendConfigData$.pipe(untilDestroyed(this)).subscribe((res) => {
-      this.configData = res;
-    });
-  }
+    private store$: Store<AppState>,
+  ) {}
 
   reconnect(href: string): void {
     if (this.ws.connected) {
@@ -150,7 +146,7 @@ export class ConsoleFormComponent implements FormConfiguration {
       this.entityForm.success = true;
       this.entityForm.formGroup.markAsPristine();
       this.modalService.close('slide-in-form');
-      this.sysGeneralService.refreshSysGeneral();
+      this.store$.dispatch(advancedConfigUpdated());
     }, (res) => {
       this.loader.close();
       new EntityUtils().handleWSError(this.entityForm, res);

src/app/pages/system/advanced/isolated-gpu-pcis/isolated-gpu-pcis-form.component.ts

@@ -13,6 +13,7 @@ import { EntityUtils } from 'app/pages/common/entity/utils';
 import { SystemGeneralService, WebSocketService } from 'app/services';
 import { AppLoaderService } from 'app/services/app-loader/app-loader.service';
 import { ModalService } from 'app/services/modal.service';
+import { advancedConfigUpdated } from 'app/stores/system-config/system-config.actions';
 import { selectAdvancedConfig } from 'app/stores/system-config/system-config.selectors';
 import { T } from 'app/translate-marker';
 
@@ -115,7 +116,7 @@ export class IsolatedGpuPcisFormComponent implements FormConfiguration {
         this.entityForm.success = true;
         this.entityForm.formGroup.markAsPristine();
         this.modalService.close('slide-in-form');
-        this.sysGeneralService.refreshSysGeneral();
+        this.store$.dispatch(advancedConfigUpdated());
       },
       (err) => {
         this.loader.close();

src/app/pages/system/advanced/kernel-form/kernel-form.component.ts

@@ -2,20 +2,21 @@ import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Store } from '@ngrx/store';
 import { Subscription } from 'rxjs';
 import { helptext_system_advanced } from 'app/helptext/system/advanced';
+import { AppState } from 'app/interfaces/app-state.interface';
 import { FormConfiguration } from 'app/interfaces/entity-form.interface';
-import { SystemGeneralConfig } from 'app/interfaces/system-config.interface';
 import { EntityFormComponent } from 'app/pages/common/entity/entity-form';
 import { FieldConfig } from 'app/pages/common/entity/entity-form/models/field-config.interface';
 import { FieldSet } from 'app/pages/common/entity/entity-form/models/fieldset.interface';
 import { EntityUtils } from 'app/pages/common/entity/utils';
 import {
-  DialogService, LanguageService, StorageService,
-  SystemGeneralService, WebSocketService,
+  DialogService, LanguageService, StorageService, WebSocketService,
 } from 'app/services';
 import { AppLoaderService } from 'app/services/app-loader/app-loader.service';
 import { ModalService } from 'app/services/modal.service';
+import { advancedConfigUpdated } from 'app/stores/system-config/system-config.actions';
 
 @UntilDestroy()
 @Component({
@@ -56,7 +57,6 @@ export class KernelFormComponent implements FormConfiguration {
   ];
 
   private entityForm: EntityFormComponent;
-  private configData: SystemGeneralConfig;
   title = helptext_system_advanced.fieldset_kernel;
 
   constructor(
@@ -67,13 +67,9 @@ export class KernelFormComponent implements FormConfiguration {
     protected loader: AppLoaderService,
     public http: HttpClient,
     protected storage: StorageService,
-    private sysGeneralService: SystemGeneralService,
     private modalService: ModalService,
-  ) {
-    this.sysGeneralService.sendConfigData$.pipe(untilDestroyed(this)).subscribe((res) => {
-      this.configData = res;
-    });
-  }
+    private store$: Store<AppState>,
+  ) {}
 
   reconnect(href: string): void {
     if (this.ws.connected) {
@@ -98,7 +94,7 @@ export class KernelFormComponent implements FormConfiguration {
       this.entityForm.success = true;
       this.entityForm.formGroup.markAsPristine();
       this.modalService.close('slide-in-form');
-      this.sysGeneralService.refreshSysGeneral();
+      this.store$.dispatch(advancedConfigUpdated());
     }, (res) => {
       this.loader.close();
       new EntityUtils().handleWSError(this.entityForm, res);

src/app/pages/system/advanced/syslog-form/syslog-form.component.ts

@@ -2,11 +2,12 @@ import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Store } from '@ngrx/store';
 import { Subscription } from 'rxjs';
 import { JobState } from 'app/enums/job-state.enum';
 import { helptext_system_advanced } from 'app/helptext/system/advanced';
+import { AppState } from 'app/interfaces/app-state.interface';
 import { FormConfiguration } from 'app/interfaces/entity-form.interface';
-import { SystemGeneralConfig } from 'app/interfaces/system-config.interface';
 import { EntityFormComponent } from 'app/pages/common/entity/entity-form';
 import { FieldConfig } from 'app/pages/common/entity/entity-form/models/field-config.interface';
 import { FieldSet } from 'app/pages/common/entity/entity-form/models/fieldset.interface';
@@ -16,11 +17,11 @@ import {
   DialogService,
   LanguageService,
   StorageService,
-  SystemGeneralService,
   WebSocketService,
 } from 'app/services';
 import { AppLoaderService } from 'app/services/app-loader/app-loader.service';
 import { ModalService } from 'app/services/modal.service';
+import { advancedConfigUpdated } from 'app/stores/system-config/system-config.actions';
 
 @UntilDestroy()
 @Component({
@@ -99,7 +100,6 @@ export class SyslogFormComponent implements FormConfiguration {
   ];
 
   private entityForm: EntityFormComponent;
-  private configData: SystemGeneralConfig;
   title = helptext_system_advanced.fieldset_syslog;
 
   constructor(
@@ -110,13 +110,9 @@ export class SyslogFormComponent implements FormConfiguration {
     protected loader: AppLoaderService,
     public http: HttpClient,
     protected storage: StorageService,
-    private sysGeneralService: SystemGeneralService,
     private modalService: ModalService,
-  ) {
-    this.sysGeneralService.sendConfigData$.pipe(untilDestroyed(this)).subscribe((res) => {
-      this.configData = res;
-    });
-  }
+    private store$: Store<AppState>,
+  ) {}
 
   reconnect(href: string): void {
     if (this.ws.connected) {
@@ -156,7 +152,7 @@ export class SyslogFormComponent implements FormConfiguration {
           this.entityForm.success = true;
           this.entityForm.formGroup.markAsPristine();
           this.modalService.close('slide-in-form');
-          this.sysGeneralService.refreshSysGeneral();
+          this.store$.dispatch(advancedConfigUpdated());
         }
       },
       (err) => {

src/app/pages/system/advanced/system-dataset-pool/system-dataset-pool.component.ts

 import { Component } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import _ from 'lodash';
 import { of, Observable } from 'rxjs';
 import { filter, switchMap } from 'rxjs/operators';
 import { ServiceName } from 'app/enums/service-name.enum';
 import { ServiceStatus } from 'app/enums/service-status.enum';
+import { AppState } from 'app/interfaces/app-state.interface';
 import { FormConfiguration } from 'app/interfaces/entity-form.interface';
 import { EntityFormComponent } from 'app/pages/common/entity/entity-form';
 import { FieldSets } from 'app/pages/common/entity/entity-form/classes/field-sets';
@@ -15,6 +17,7 @@ import {
   DialogService, WebSocketService, AppLoaderService, SystemGeneralService,
 } from 'app/services';
 import { ModalService } from 'app/services/modal.service';
+import { generalConfigUpdated } from 'app/stores/system-config/system-config.actions';
 
 const poolFieldName = 'pool';
 
@@ -54,6 +57,7 @@ export class SystemDatasetPoolComponent implements FormConfiguration {
     private translate: TranslateService,
     private modalService: ModalService,
     private sysGeneralService: SystemGeneralService,
+    private store$: Store<AppState>,
   ) { }
 
   afterInit(entityForm: EntityFormComponent): void {
@@ -98,7 +102,7 @@ export class SystemDatasetPoolComponent implements FormConfiguration {
         this.entityForm.success = true;
         this.entityForm.formGroup.markAsPristine();
         this.modalService.close('slide-in-form');
-        this.sysGeneralService.refreshSysGeneral();
+        this.store$.dispatch(generalConfigUpdated());
       },
       error: (error) => {
         this.loader.close();

src/app/pages/system/general-settings/general-settings.component.ts

@@ -10,6 +10,7 @@ import { helptext_system_general as helptext } from 'app/helptext/system/general
 import { AppState } from 'app/interfaces/app-state.interface';
 import { CoreEvent } from 'app/interfaces/events';
 import { NtpServer } from 'app/interfaces/ntp-server.interface';
+import { SystemGeneralConfig } from 'app/interfaces/system-config.interface';
 import { WebsocketError } from 'app/interfaces/websocket-error.interface';
 import { EntityJobComponent } from 'app/pages//common/entity/entity-job/entity-job.component';
 import { DialogFormConfiguration } from 'app/pages/common/entity/entity-dialog/dialog-form-configuration.interface';
@@ -41,7 +42,7 @@ export class GeneralSettingsComponent implements OnInit {
   supportTitle = helptext.supportTitle;
   ntpTitle = helptext.ntpTitle;
   localeData: DataCard;
-  configData: any;
+  configData: SystemGeneralConfig;
   displayedColumns: string[];
   subs: any;
   dataSource: NtpServer[];
@@ -125,9 +126,6 @@ export class GeneralSettingsComponent implements OnInit {
 
   ngOnInit(): void {
     this.getDataCardData();
-    this.sysGeneralService.refreshSysGeneral$.pipe(untilDestroyed(this)).subscribe(() => {
-      this.getDataCardData();
-    });
     this.getNTPData();
     this.modalService.refreshTable$.pipe(untilDestroyed(this)).subscribe(() => {
       this.getNTPData();
@@ -240,7 +238,6 @@ export class GeneralSettingsComponent implements OnInit {
       default:
         addComponent = LocalizationFormComponent;
     }
-    this.sysGeneralService.sendConfigData(this.configData);
     this.modalService.openInSlideIn(addComponent, id);
   }
 

src/app/pages/system/general-settings/gui-form/gui-form.component.ts

@@ -23,6 +23,7 @@ import {
 } from 'app/services';
 import { AppLoaderService } from 'app/services/app-loader/app-loader.service';
 import { ModalService } from 'app/services/modal.service';
+import { generalConfigUpdated } from 'app/stores/system-config/system-config.actions';
 import { selectGeneralConfig } from 'app/stores/system-config/system-config.selectors';
 
 @UntilDestroy()
@@ -333,7 +334,7 @@ export class GuiFormComponent implements FormConfiguration {
     return this.ws.call('system.general.update', [body]).pipe(untilDestroyed(this)).subscribe(() => {
       this.loader.close();
       this.modalService.close('slide-in-form');
-      this.sysGeneralService.refreshSysGeneral();
+      this.store$.dispatch(generalConfigUpdated());
       this.entityForm.success = true;
       this.entityForm.formGroup.markAsPristine();
       this.afterSubmit(body);

src/app/pages/system/general-settings/localization-form/localization-form.component.ts

@@ -20,6 +20,7 @@ import {
 import { AppLoaderService } from 'app/services/app-loader/app-loader.service';
 import { LocaleService } from 'app/services/locale.service';
 import { ModalService } from 'app/services/modal.service';
+import { generalConfigUpdated } from 'app/stores/system-config/system-config.actions';
 import { selectGeneralConfig } from 'app/stores/system-config/system-config.selectors';
 
 @UntilDestroy()
@@ -199,7 +200,7 @@ export class LocalizationFormComponent implements FormConfiguration {
     delete body.time_format;
     this.loader.open();
     return this.ws.call('system.general.update', [body]).pipe(untilDestroyed(this)).subscribe(() => {
-      this.sysGeneralService.refreshSysGeneral();
+      this.store$.dispatch(generalConfigUpdated());
       this.loader.close();
       this.entityForm.success = true;
       this.entityForm.formGroup.markAsPristine();

src/app/pages/system/tunable/tunable-form/tunable-form.component.ts

 import { Component } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Store } from '@ngrx/store';
 import * as _ from 'lodash';
 import { ProductType } from 'app/enums/product-type.enum';
 import { TunableType } from 'app/enums/tunable-type.enum';
 import { helptext_system_tunable as helptext } from 'app/helptext/system/tunable';
+import { AppState } from 'app/interfaces/app-state.interface';
 import { FormConfiguration } from 'app/interfaces/entity-form.interface';
 import { EntityFormComponent } from 'app/pages/common/entity/entity-form/entity-form.component';
 import { FieldConfig, FormSelectConfig } from 'app/pages/common/entity/entity-form/models/field-config.interface';
 import { FieldSet } from 'app/pages/common/entity/entity-form/models/fieldset.interface';
-import { SystemGeneralService, WebSocketService } from 'app/services';
+import { WebSocketService } from 'app/services';
+import { generalConfigUpdated } from 'app/stores/system-config/system-config.actions';
 import { T } from 'app/translate-marker';
 
 @UntilDestroy()
@@ -82,7 +85,10 @@ export class TunableFormComponent implements FormConfiguration {
     },
   ];
 
-  constructor(protected ws: WebSocketService, protected sysGeneralService: SystemGeneralService) {}
+  constructor(
+    protected ws: WebSocketService,
+    protected store$: Store<AppState>,
+  ) {}
 
   preInit(): void {
     this.type_fc = _.find(this.fieldSets[0].config, { name: 'type' });
@@ -105,6 +111,6 @@ export class TunableFormComponent implements FormConfiguration {
   }
 
   afterSubmit(): void {
-    this.sysGeneralService.refreshSysGeneral();
+    this.store$.dispatch(generalConfigUpdated());
   }
 }

src/app/services/system-general.service.ts

 import { EventEmitter, Injectable } from '@angular/core';
-import * as _ from 'lodash';
 import { Subject, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { AdvancedConfig } from 'app/interfaces/advanced-config.interface';
 import { CertificateAuthority } from 'app/interfaces/certificate-authority.interface';
 import { Certificate } from 'app/interfaces/certificate.interface';
 import { Choices } from 'app/interfaces/choices.interface';
 import { Option } from 'app/interfaces/option.interface';
-import { SystemGeneralConfig } from 'app/interfaces/system-config.interface';
-import { SystemInfo } from 'app/interfaces/system-info.interface';
 import { WebSocketService } from './ws.service';
 
 @Injectable({ providedIn: 'root' })
@@ -20,44 +16,6 @@ export class SystemGeneralService {
   updateRunningNoticeSent = new EventEmitter<string>();
   updateIsDone$ = new Subject();
 
-  /**
-   * @deprecated Use selectAdvancedConfig
-   */
-  sendConfigData$ = new Subject<SystemGeneralConfig>();
-
-  /**
-   * @deprecated Use selectAdvancedConfig
-   */
-  refreshSysGeneral$ = new Subject();
-
-  /**
-   * @deprecated Use selectAdvancedConfig
-   */
-  advancedConfigInfo: AdvancedConfig | { waiting: true };
-
-  /**
-   * @deprecated Use selectAdvancedConfig
-   */
-  getAdvancedConfig$ = new Observable<AdvancedConfig>((observer) => {
-    if ((!this.advancedConfigInfo || _.isEmpty(this.advancedConfigInfo))) {
-      this.advancedConfigInfo = { waiting: true };
-      this.ws.call('system.advanced.config').subscribe((advancedConfig) => {
-        this.advancedConfigInfo = advancedConfig;
-        observer.next(this.advancedConfigInfo);
-      });
-    } else {
-      const wait = setInterval(() => {
-        if (this.advancedConfigInfo && !(this.advancedConfigInfo as { waiting: true }).waiting) {
-          clearInterval(wait);
-          observer.next(this.advancedConfigInfo as AdvancedConfig);
-        }
-      }, 10);
-    }
-    setTimeout(() => {
-      this.advancedConfigInfo = {} as AdvancedConfig;
-    }, 2000);
-  });
-
   productType = '';
   getProductType$ = new Observable<string>((observer) => {
     if (!this.productType) {
@@ -101,10 +59,6 @@ export class SystemGeneralService {
     return this.ws.call('certificate.country_choices');
   }
 
-  getSysInfo(): Observable<SystemInfo> {
-    return this.ws.call('system.info');
-  }
-
   ipChoicesv4(): Observable<Option[]> {
     return this.ws.call('system.general.ui_address_choices').pipe(
       map((response) =>
@@ -157,14 +111,6 @@ export class SystemGeneralService {
     this.updateIsDone$.next();
   }
 
-  sendConfigData(data: SystemGeneralConfig): void {
-    this.sendConfigData$.next(data);
-  }
-
-  refreshSysGeneral(): void {
-    this.refreshSysGeneral$.next();
-  }
-
   checkRootPW(password: string): Observable<boolean> {
     return this.ws.call('auth.check_user', ['root', password]);
   }

src/app/stores/system-config/system-config.actions.ts

@@ -6,3 +6,6 @@ export const systemConfigLoaded = createAction(
   '[System Config] Loaded',
   props<{ generalConfig: SystemGeneralConfig; advancedConfig: AdvancedConfig }>(),
 );
+
+export const generalConfigUpdated = createAction('[System Config] General Config Updated');
+export const advancedConfigUpdated = createAction('[System Config] Advanced Config Updated');

src/app/stores/system-config/system-config.effects.ts

@@ -4,12 +4,16 @@ import { EMPTY, forkJoin } from 'rxjs';
 import { catchError, map, mergeMap } from 'rxjs/operators';
 import { WebSocketService } from 'app/services';
 import { adminAppInitialized } from 'app/stores/application/application.actions';
-import { systemConfigLoaded } from 'app/stores/system-config/system-config.actions';
+import {
+  advancedConfigUpdated,
+  generalConfigUpdated,
+  systemConfigLoaded,
+} from 'app/stores/system-config/system-config.actions';
 
 @Injectable()
 export class SystemConfigEffects {
   loadConfig$ = createEffect(() => this.actions$.pipe(
-    ofType(adminAppInitialized),
+    ofType(adminAppInitialized, generalConfigUpdated, advancedConfigUpdated),
     mergeMap(() => {
       return forkJoin([
         this.ws.call('system.general.config'),