[NAE-2116] Frontend remote configuration

camperko · camperko · commit 34613a681dc9 · 2025-06-03T14:35:09.000+02:00
- pull application configuration (nae.json) from backend (gateway which redirects to admin node)
- load new pulled configuration inside configuration.service
- add environment setup (env.js, environment.ts, index.html)
diff --git a/projects/nae-example-app/src/app/app.module.ts b/projects/nae-example-app/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {Injector, NgModule} from '@angular/core';
+import {APP_INITIALIZER, Injector, NgModule} from '@angular/core';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {
@@ -19,7 +19,8 @@ import {
     ViewService,
     ProfileModule,
     Dashboard,
-    FrontActionModule, NAE_ASYNC_RENDERING_CONFIGURATION
+    FrontActionModule, NAE_ASYNC_RENDERING_CONFIGURATION,
+    loadConfiguration
 } from '@netgrif/components-core';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {FlexLayoutModule, FlexModule} from '@ngbracket/ngx-layout';
@@ -244,10 +245,18 @@ export function HttpLoaderFactory(http: HttpClient) {
         DialogComponentsModule,
         FrontActionModule
     ],
-    providers: [{
-        provide: ConfigurationService,
-        useClass: NaeExampleAppConfigurationService
-    },
+    providers: [
+        ResourceProvider,
+        {
+            provide: ConfigurationService,
+            useClass: NaeExampleAppConfigurationService
+        },
+        {
+            provide: APP_INITIALIZER,
+            useFactory: loadConfiguration,
+            deps: [ConfigurationService],
+            multi: true
+        },
         {provide: NAE_SNACKBAR_VERTICAL_POSITION, useValue: SnackBarVerticalPosition.TOP},
         {provide: NAE_SNACKBAR_HORIZONTAL_POSITION, useValue: SnackBarHorizontalPosition.LEFT},
         {provide: NAE_ASYNC_RENDERING_CONFIGURATION, useValue: {
@@ -257,7 +266,6 @@ export function HttpLoaderFactory(http: HttpClient) {
                 enableAsyncRenderingForNewFields: true,
                 enableAsyncRenderingOnTaskExpand: true
             }},
-        ResourceProvider,
         TranslateService,
         TranslatePipe,
         TranslateStore,
diff --git a/projects/nae-example-app/src/app/nae-example-app-configuration.service.ts b/projects/nae-example-app/src/app/nae-example-app-configuration.service.ts
@@ -1,13 +1,19 @@
 import {Injectable} from '@angular/core';
-import {ConfigurationService} from '@netgrif/components-core';
-import {NetgrifApplicationEngine} from '@netgrif/components-core/';
+import {ApplicationConfiguration, ConfigurationService, ResourceProvider, NetgrifApplicationEngine} from '@netgrif/components-core';
 import {default as naeConfig} from '../../../../nae.json';
+import {environment} from '../environments/environment';
 
 @Injectable({
     providedIn: 'root'
 })
 export class NaeExampleAppConfigurationService extends ConfigurationService {
-    constructor() {
-        super(naeConfig as unknown as NetgrifApplicationEngine);
+    constructor(private resourceProvider: ResourceProvider) {
+        const applicationConfig: ApplicationConfiguration = {
+            application: environment.application_identifier,
+            type: environment.type_identifier,
+            gateway_url: environment.gateway_url,
+            resolve_configuration: environment.resolve_configuration
+        };
+        super(naeConfig as unknown as NetgrifApplicationEngine, resourceProvider, applicationConfig);
     }
 }
diff --git a/projects/nae-example-app/src/assets/env.js b/projects/nae-example-app/src/assets/env.js
@@ -0,0 +1,8 @@
+(function(window) {
+    window["env"] = window["env"] || {};
+
+    window['env']['resolve_configuration'] = false;
+    window['env']['gateway_url'] = 'http://localhost:8800/api';
+    window['env']['application_identifier'] = 'nae';
+    window['env']['type_identifier'] = 'default';
+})(this);
diff --git a/projects/nae-example-app/src/assets/env.template.js b/projects/nae-example-app/src/assets/env.template.js
@@ -0,0 +1,8 @@
+(function(window) {
+    window["env"] = window["env"] || {};
+
+    window['env']['resolve_configuration'] = "${RESOLVE_CONFIGURATION}";
+    window['env']['gateway_url'] = "${GATEWAY_URL}";
+    window['env']['application_identifier'] = "${APPLICATION_IDENTIFIER}";
+    window['env']['type_identifier'] = "${TYPE_IDENTIFIER}";
+})(this);
diff --git a/projects/nae-example-app/src/environments/environment.ts b/projects/nae-example-app/src/environments/environment.ts
@@ -3,7 +3,11 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+    production: false,
+    resolve_configuration:  window['env']['resolve_configuration'] || false,
+    gateway_url:  window['env']['gateway_url'] || 'http://localhost:8800/api',
+    application_identifier: window['env']['application_identifier'] || 'nae',
+    type_identifier: window['env']['type_identifier'] || 'default'
 };
 
 /*
diff --git a/projects/nae-example-app/src/index.html b/projects/nae-example-app/src/index.html
@@ -6,6 +6,7 @@
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <script src="./assets/env.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
diff --git a/projects/netgrif-components-core/src/lib/configuration/application-configuration.ts b/projects/netgrif-components-core/src/lib/configuration/application-configuration.ts
@@ -0,0 +1,9 @@
+import {NetgrifApplicationEngine} from '../../commons/schema';
+
+export interface ApplicationConfiguration {
+    application: string;
+    type: string;
+    resolve_configuration?: boolean;
+    gateway_url?: string;
+    properties?: NetgrifApplicationEngine;
+}
diff --git a/projects/netgrif-components-core/src/lib/configuration/configuration.service.ts b/projects/netgrif-components-core/src/lib/configuration/configuration.service.ts
@@ -1,11 +1,24 @@
 import {NetgrifApplicationEngine, Services, View, Views} from '../../commons/schema';
 import {Observable, of} from 'rxjs';
+import {ResourceProvider} from '../resources/resource-provider.service';
+import {ApplicationConfiguration} from './application-configuration';
+
 
 export abstract class ConfigurationService {
 
-    private readonly _dataFieldConfiguration: Services['dataFields'];
+    private _dataFieldConfiguration: Services['dataFields'];
+
+    private readonly APPLICATION_CONFIG: ApplicationConfiguration;
+
+    protected constructor(protected configuration: NetgrifApplicationEngine,
+                          protected _resourceProvider: ResourceProvider,
+                          protected _applicationConfiguration: ApplicationConfiguration) {
+        this.initialize();
+
+        this.APPLICATION_CONFIG = _applicationConfiguration;
+    }
 
-    protected constructor(protected configuration: NetgrifApplicationEngine) {
+    private initialize(): void {
         this.resolveEndpointURLs();
         this._dataFieldConfiguration = this.getConfigurationSubtree(['services', 'dataFields']);
     }
@@ -246,6 +259,23 @@ export abstract class ConfigurationService {
         return config.providers.auth.address + config.providers.auth.endpoints[endpointKey];
     }
 
+    public loadConfiguration(): Promise<any> {
+        if (!this.APPLICATION_CONFIG.resolve_configuration) {
+            return null;
+        }
+        return this._resourceProvider.get$(
+                `/frontend-config/public/${this.APPLICATION_CONFIG.application}/${this.APPLICATION_CONFIG.type}`,
+                this.APPLICATION_CONFIG.gateway_url
+            ).toPromise()
+            .then((data: ApplicationConfiguration) => {
+                if (!data || !data.properties) {
+                    return;
+                }
+                this.configuration = data.properties as NetgrifApplicationEngine;
+                this.initialize();
+            });
+    }
+
     private createConfigurationCopy(): any {
         return this.deepCopy(this.configuration);
     }
diff --git a/projects/netgrif-components-core/src/lib/configuration/public-api.ts b/projects/netgrif-components-core/src/lib/configuration/public-api.ts
@@ -1,2 +1,3 @@
 /* SERVICES */
 export * from './configuration.service';
+export * from './application-configuration';
diff --git a/projects/netgrif-components-core/src/lib/utility/load-configuration.ts b/projects/netgrif-components-core/src/lib/utility/load-configuration.ts
@@ -0,0 +1,8 @@
+import {ConfigurationService} from '../configuration/configuration.service';
+
+
+export function loadConfiguration(configurationService: ConfigurationService): () => Promise<any> | void {
+    return (): Promise<any> => {
+        return configurationService.loadConfiguration();
+    }
+}
diff --git a/projects/netgrif-components-core/src/lib/utility/public-api.ts b/projects/netgrif-components-core/src/lib/utility/public-api.ts
@@ -27,6 +27,7 @@ export * from './contains.pipe';
 export * from './utility.module';
 export * from './directives/let.directive';
 export * from './base64';
+export * from './load-configuration';
 
 /* TESTS */
 export * from './tests/mocks/mock-authentication.service';
diff --git a/projects/netgrif-components-core/src/lib/utility/tests/test-config.ts b/projects/netgrif-components-core/src/lib/utility/tests/test-config.ts
@@ -1,7 +1,10 @@
 import {ConfigurationService} from '../../configuration/configuration.service';
+import {ResourceProvider} from '../../resources/resource-provider.service';
+import {Injectable} from '@angular/core';
 
+@Injectable()
 export class TestConfigurationService extends ConfigurationService {
-    constructor() {
+    constructor(private resourceProvider: ResourceProvider) {
         super({
             extends: 'nae-default',
             providers: {
@@ -427,6 +430,12 @@ export class TestConfigurationService extends ConfigurationService {
                     groupNavigationRoute: 'config-route'
                 }
             }
-        });
+        },
+        resourceProvider,
+            {
+                application: 'nae',
+                type: 'default',
+                gateway_url: 'http://localhost:8888/api'
+            });
     }
 }
diff --git a/projects/netgrif-components-core/src/lib/utility/tests/test-mock-dependencies.module.ts b/projects/netgrif-components-core/src/lib/utility/tests/test-mock-dependencies.module.ts
@@ -4,6 +4,7 @@ import {AuthenticationMethodService} from '../../authentication/services/authent
 import {MockAuthenticationMethodService} from './mocks/mock-authentication-method-service';
 import {ConfigurationService} from '../../configuration/configuration.service';
 import {TestConfigurationService} from './test-config';
+import {ResourceProvider} from '../../resources/resource-provider.service';
 
 
 /**
@@ -23,6 +24,7 @@ import {TestConfigurationService} from './test-config';
     ],
     providers: [
         {provide: AuthenticationMethodService, useClass: MockAuthenticationMethodService},
+        ResourceProvider,
         {provide: ConfigurationService, useClass: TestConfigurationService}
     ]
 })

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`/* SERVICES */`
`2`	`2`	`export * from './configuration.service';`
	`3`	`+export * from './application-configuration';`