Separated runtime and UI configurations (#486)

zaychenko-sergei · web-flow · commit 93a7608fdc94 · 2024-11-28T21:58:46.000+02:00
Separated runtime and UI configurations
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Readme section: modified 'Run' button into a link
 - Hint extension for tile widget account
+- Separated runtime and UI configurations
 ### Fixed
 - Typo in feature flags (enableDatasetEnvVarsManagement)
                                                   ^
diff --git a/images/kamu-web-ui/Dockerfile b/images/kamu-web-ui/Dockerfile
@@ -17,6 +17,5 @@ RUN cd /usr/share/nginx/html && \
     rm -r kamu-web-ui-any.tar.gz kamu-web-ui-any
 
 COPY runtime-config.json /usr/share/nginx/html/assets/runtime-config.json
-COPY runtime-config-single-tenant.json /usr/share/nginx/html/assets/runtime-config-single-tenant.json
 
 USER nginx
diff --git a/images/kamu-web-ui/runtime-config-single-tenant.json b/images/kamu-web-ui/runtime-config-single-tenant.json
diff --git a/images/kamu-web-ui/runtime-config.json b/images/kamu-web-ui/runtime-config.json
@@ -1,9 +1,5 @@
 {
   "apiServerGqlUrl": "http://localhost:8080/graphql",
   "apiServerHttpUrl": "http://localhost:8080",
-  "githubClientId": "361a3b4fda86d0234d2f",
-  "ingestUploadFileLimitMb": 50,
-  "featureFlags": {
-    "enableLogout": true
-  }
+  "githubClientId": "361a3b4fda86d0234d2f"
 }
diff --git a/src/app/api/mock/auth.mock.ts b/src/app/api/mock/auth.mock.ts
@@ -1,6 +1,6 @@
 import { GraphQLError } from "graphql";
 import { AccountFragment, AccountType, FetchAccountDetailsMutation, LoginMutation } from "../kamu.graphql.interface";
-import { AppConfigLoginInstructions, LoginMethod } from "src/app/app-config.model";
+import { AppLoginInstructions, LoginMethod } from "src/app/app-config.model";
 import { PasswordLoginCredentials } from "../auth.api.model";
 
 export const TEST_GITHUB_CODE = "12345";
@@ -17,7 +17,7 @@ const mockPasswordLoginCredentials: PasswordLoginCredentials = {
     password: TEST_PASSWORD,
 };
 
-export const mockLoginInstructions: AppConfigLoginInstructions = {
+export const mockLoginInstructions: AppLoginInstructions = {
     loginMethod: LoginMethod.PASSWORD,
     loginCredentialsJson: JSON.stringify(mockPasswordLoginCredentials),
 };
diff --git a/src/app/app-config.model.ts b/src/app/app-config.model.ts
@@ -1,14 +1,12 @@
-export interface AppConfig {
+export interface AppRuntimeConfig {
     apiServerGqlUrl: string;
     apiServerHttpUrl: string;
     githubClientId?: string;
-    ingestUploadFileLimitMb: number;
-    featureFlags: AppConfigFeatureFlags;
-    loginInstructions?: AppConfigLoginInstructions;
+    loginInstructions?: AppLoginInstructions;
     grafanaLogs?: GrafanaLogsConfiguration;
 }
 
-export interface AppConfigLoginInstructions {
+export interface AppLoginInstructions {
     loginMethod: string;
     loginCredentialsJson: string;
 }
@@ -18,14 +16,19 @@ export enum LoginMethod {
     GITHUB = "oauth_github",
 }
 
-export interface AppConfigFeatureFlags {
+export interface GrafanaLogsConfiguration {
+    taskDetailsUrl?: string;
+    flowHistoryUrl?: string;
+}
+
+export interface AppUIConfig {
+    ingestUploadFileLimitMb: number;
+    featureFlags: AppUIConfigFeatureFlags;
+}
+
+export interface AppUIConfigFeatureFlags {
     enableLogout: boolean;
     enableScheduling: boolean;
     enableDatasetEnvVarsManagement: boolean;
     enableTermsOfService: boolean;
 }
-
-export interface GrafanaLogsConfiguration {
-    taskDetailsUrl?: string;
-    flowHistoryUrl?: string;
-}
diff --git a/src/app/app-config.service.ts b/src/app/app-config.service.ts
@@ -1,98 +1,119 @@
 import { Injectable } from "@angular/core";
 import {
-    AppConfig,
-    AppConfigFeatureFlags,
-    AppConfigLoginInstructions,
+    AppRuntimeConfig,
+    AppUIConfigFeatureFlags,
+    AppLoginInstructions,
     GrafanaLogsConfiguration,
+    AppUIConfig,
 } from "./app-config.model";
 import { environment } from "src/environments/environment";
 import { MaybeUndefined } from "./common/app.types";
+import AppValues from "./common/app.values";
 
 @Injectable({
     providedIn: "root",
 })
 export class AppConfigService {
-    private appConfig?: AppConfig;
+    private appRuntimeConfig?: AppRuntimeConfig;
+    private appUiConfig?: AppUIConfig;
 
     get apiServerUrl(): string {
-        if (!this.appConfig) {
-            this.appConfig = AppConfigService.loadAppConfig();
+        if (!this.appRuntimeConfig) {
+            this.appRuntimeConfig = AppConfigService.loadAppRuntimeConfig();
         }
 
         return new URL(this.apiServerGqlUrl).origin;
     }
 
     get apiServerGqlUrl(): string {
-        if (!this.appConfig) {
-            this.appConfig = AppConfigService.loadAppConfig();
+        if (!this.appRuntimeConfig) {
+            this.appRuntimeConfig = AppConfigService.loadAppRuntimeConfig();
         }
 
-        return this.appConfig.apiServerGqlUrl;
+        return this.appRuntimeConfig.apiServerGqlUrl;
     }
 
     get apiServerHttpUrl(): string {
-        if (!this.appConfig) {
-            this.appConfig = AppConfigService.loadAppConfig();
+        if (!this.appRuntimeConfig) {
+            this.appRuntimeConfig = AppConfigService.loadAppRuntimeConfig();
         }
 
-        return this.appConfig.apiServerHttpUrl;
+        return this.appRuntimeConfig.apiServerHttpUrl;
     }
 
-    get ingestUploadFileLimitMb(): number {
-        if (!this.appConfig) {
-            this.appConfig = AppConfigService.loadAppConfig();
+    get githubClientId(): MaybeUndefined<string> {
+        if (!this.appRuntimeConfig) {
+            this.appRuntimeConfig = AppConfigService.loadAppRuntimeConfig();
         }
 
-        return this.appConfig.ingestUploadFileLimitMb;
+        return this.appRuntimeConfig.githubClientId;
     }
 
-    get githubClientId(): MaybeUndefined<string> {
-        if (!this.appConfig) {
-            this.appConfig = AppConfigService.loadAppConfig();
+    get grafanaLogs(): GrafanaLogsConfiguration | null {
+        if (!this.appRuntimeConfig) {
+            this.appRuntimeConfig = AppConfigService.loadAppRuntimeConfig();
         }
 
-        return this.appConfig.githubClientId;
+        return this.appRuntimeConfig.grafanaLogs ?? null;
     }
 
-    get featureFlags(): AppConfigFeatureFlags {
-        if (!this.appConfig) {
-            this.appConfig = AppConfigService.loadAppConfig();
+    get loginInstructions(): AppLoginInstructions | null {
+        if (!this.appRuntimeConfig) {
+            this.appRuntimeConfig = AppConfigService.loadAppRuntimeConfig();
         }
 
-        return this.appConfig.featureFlags;
+        if (this.appRuntimeConfig.loginInstructions) {
+            return this.appRuntimeConfig.loginInstructions;
+        } else {
+            return null;
+        }
     }
 
-    get grafanaLogs(): GrafanaLogsConfiguration | null {
-        if (!this.appConfig) {
-            this.appConfig = AppConfigService.loadAppConfig();
+    get ingestUploadFileLimitMb(): number {
+        if (!this.appRuntimeConfig) {
+            this.appRuntimeConfig = AppConfigService.loadAppRuntimeConfig();
+        }
+        if (!this.appUiConfig) {
+            this.appUiConfig = AppConfigService.loadAppUIConfig(this.appRuntimeConfig);
         }
 
-        return this.appConfig.grafanaLogs ?? null;
+        return this.appUiConfig.ingestUploadFileLimitMb;
     }
 
-    get loginInstructions(): AppConfigLoginInstructions | null {
-        if (!this.appConfig) {
-            this.appConfig = AppConfigService.loadAppConfig();
+    get featureFlags(): AppUIConfigFeatureFlags {
+        if (!this.appRuntimeConfig) {
+            this.appRuntimeConfig = AppConfigService.loadAppRuntimeConfig();
         }
-
-        if (this.appConfig.loginInstructions) {
-            return this.appConfig.loginInstructions;
-        } else {
-            return null;
+        if (!this.appUiConfig) {
+            this.appUiConfig = AppConfigService.loadAppUIConfig(this.appRuntimeConfig);
         }
+
+        return this.appUiConfig.featureFlags;
     }
 
-    private static loadAppConfig(): AppConfig {
+    private static loadAppRuntimeConfig(): AppRuntimeConfig {
         const request = new XMLHttpRequest();
         request.open("GET", environment.runtime_config_file, false);
         request.send(null);
-        const data: AppConfig = JSON.parse(request.responseText) as AppConfig;
+        const data: AppRuntimeConfig = JSON.parse(request.responseText) as AppRuntimeConfig;
         return {
             ...data,
             apiServerGqlUrl: AppConfigService.toRemoteURL(data.apiServerGqlUrl),
         };
     }
 
+    private static loadAppUIConfig(app_runtime_config: AppRuntimeConfig): AppUIConfig {
+        const request = new XMLHttpRequest();
+        request.open("GET", app_runtime_config.apiServerHttpUrl + "/ui-config", false);
+        try {
+            request.send(null);
+            const data: AppUIConfig = JSON.parse(request.responseText) as AppUIConfig;
+            return data;
+        } catch (error) {
+            return AppValues.DEFAULT_UI_CONFIGURATION;
+        }
+    }
+
     // If loopback or any address is used - replace hostname with hostname from the browser
     private static toRemoteURL(url: string): string {
         const turl = new URL(url);
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -12,7 +12,7 @@ import { MaybeNull } from "./common/app.types";
 import _ from "lodash";
 import { isMobileView, promiseWithCatch } from "./common/app.helpers";
 import { AppConfigService } from "./app-config.service";
-import { AppConfigFeatureFlags, LoginMethod } from "./app-config.model";
+import { AppUIConfigFeatureFlags, LoginMethod } from "./app-config.model";
 import { LoginService } from "./auth/login/login.service";
 import { loadErrorMessages } from "@apollo/client/dev";
 import { isDevMode } from "@angular/core";
@@ -37,19 +37,13 @@ export class AppComponent extends BaseComponent implements OnInit {
         accountType: AccountType.User,
         isAdmin: false,
     };
-    public static readonly DEFAULT_FEATURE_FLAGS: AppConfigFeatureFlags = {
-        enableLogout: true,
-        enableScheduling: true,
-        enableDatasetEnvVarsManagement: true,
-        enableTermsOfService: true,
-    };
 
     public readonly APP_LOGO = `/${AppValues.APP_LOGO}`;
 
     public isMobileView = false;
     public isHeaderVisible = true;
 
-    public featureFlags: AppConfigFeatureFlags = AppComponent.DEFAULT_FEATURE_FLAGS;
+    public featureFlags: AppUIConfigFeatureFlags = AppValues.DEFAULT_UI_FEATURE_FLAGS;
     public loggedAccount: AccountFragment = AppComponent.ANONYMOUS_ACCOUNT_INFO;
     public loginMethods: LoginMethod[] = [];
 
diff --git a/src/app/auth/logged-user.service.ts b/src/app/auth/logged-user.service.ts
@@ -7,7 +7,7 @@ import { isNull } from "lodash";
 import { AppConfigService } from "../app-config.service";
 import { AccountFragment } from "../api/kamu.graphql.interface";
 import { UnsubscribeDestroyRefAdapter } from "../common/unsubscribe.ondestroy.adapter";
-import { AppConfigLoginInstructions } from "../app-config.model";
+import { AppLoginInstructions } from "../app-config.model";
 import { Apollo } from "apollo-angular";
 import { promiseWithCatch } from "../common/app.helpers";
 import { LoginService } from "./login/login.service";
@@ -39,7 +39,7 @@ export class LoggedUserService extends UnsubscribeDestroyRefAdapter {
     }
 
     public initializeCompletes(): Observable<void> {
-        const loginInstructions: AppConfigLoginInstructions | null = this.appConfigService.loginInstructions;
+        const loginInstructions: AppLoginInstructions | null = this.appConfigService.loginInstructions;
         if (loginInstructions) {
             return this.loginService.genericLogin(
                 loginInstructions.loginMethod,
diff --git a/src/app/common/app.values.ts b/src/app/common/app.values.ts
@@ -1,4 +1,5 @@
 import { Injectable } from "@angular/core";
+import { AppUIConfig, AppUIConfigFeatureFlags } from "../app-config.model";
 
 @Injectable()
 export default class AppValues {
@@ -50,4 +51,16 @@ const language = 'typescript';
 
 ### Blockquote
 > Blockquote to the max`;
+
+    public static readonly DEFAULT_UI_FEATURE_FLAGS: AppUIConfigFeatureFlags = {
+        enableLogout: true,
+        enableScheduling: true,
+        enableDatasetEnvVarsManagement: true,
+        enableTermsOfService: true,
+    };
+
+    public static readonly DEFAULT_UI_CONFIGURATION: AppUIConfig = {
+        ingestUploadFileLimitMb: 50,
+        featureFlags: AppValues.DEFAULT_UI_FEATURE_FLAGS,
+    };
 }
diff --git a/src/app/components/app-header/app-header.component.ts b/src/app/components/app-header/app-header.component.ts
@@ -23,7 +23,7 @@ import { AccountFragment } from "src/app/api/kamu.graphql.interface";
 import { NgbTypeaheadSelectItemEvent } from "@ng-bootstrap/ng-bootstrap";
 import ProjectLinks from "src/app/project-links";
 import { NavigationService } from "src/app/services/navigation.service";
-import { AppConfigFeatureFlags, LoginMethod } from "src/app/app-config.model";
+import { AppUIConfigFeatureFlags, LoginMethod } from "src/app/app-config.model";
 import { AccountSettingsTabs } from "src/app/auth/settings/account-settings.constants";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
@@ -40,7 +40,7 @@ export class AppHeaderComponent extends BaseComponent implements OnInit {
     @Input({ required: true }) public isMobileView: boolean;
     @Input({ required: true }) public isVisible: boolean;
     @Input({ required: true }) public loggedAccount: AccountFragment;
-    @Input({ required: true }) public featureFlags: AppConfigFeatureFlags;
+    @Input({ required: true }) public featureFlags: AppUIConfigFeatureFlags;
     @Input({ required: true }) public loginMethods: LoginMethod[];
 
     @Output() public onSelectedDataset = new EventEmitter<DatasetAutocompleteItem>();
diff --git a/src/assets/runtime-config-single-tenant.json b/src/assets/runtime-config-single-tenant.json
diff --git a/src/assets/runtime-config.json b/src/assets/runtime-config.json
@@ -2,13 +2,6 @@
   "apiServerGqlUrl": "http://localhost:8080/graphql",
   "apiServerHttpUrl": "http://localhost:8080",
   "githubClientId": "361a3b4fda86d0234d2f",
-  "ingestUploadFileLimitMb": 50,
-  "featureFlags": {
-    "enableLogout": true,
-    "enableScheduling": true,
-    "enableDatasetEnvVarsManagement": true,
-    "enableTermsOfService": true
-  },
   "grafanaLogs": {
     "taskDetailsUrl": " https://grafana.sha.stg.internal.kamu.dev/explore?schemaVersion=1&panes=%7B%22LYy%22%3A%7B%22datasource%22%3A%22365dd1cc-3781-43c1-86a1-a3f78c6ab420%22%2C%22queries%22%3A%5B%7B%22refId%22%3A%22A%22%2C%22expr%22%3A%22%7Bjob%3D%5C%22europort%2Fkamu-api-server%5C%22%7D+%7C+json+root_span%2C+task_id%3D%5C%22log.spans%5B0%5D.task_id%5C%22%2C+target%3D%5C%22log.target%5C%22%2C+message%3D%5C%22log.fields.message%5C%22+%7C+task_id+%3D+%60{{taskId}}%60+%7C%3D+%60%60%22%2C%22queryType%22%3A%22range%22%2C%22datasource%22%3A%7B%22type%22%3A%22loki%22%2C%22uid%22%3A%22365dd1cc-3781-43c1-86a1-a3f78c6ab420%22%7D%2C%22editorMode%22%3A%22builder%22%7D%5D%2C%22range%22%3A%7B%22from%22%3A%22{{fromTime}}%22%2C%22to%22%3A%22{{toTime}}%22%7D%7D%7D&orgId=1",
     "flowHistoryUrl": ""

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0`
`13`	`13`	`### Changed`
`14`	`14`	`- Readme section: modified 'Run' button into a link`
`15`	`15`	`- Hint extension for tile widget account`
	`16`	`+- Separated runtime and UI configurations`
`16`	`17`	`### Fixed`
`17`	`18`	`- Typo in feature flags (enableDatasetEnvVarsManagement)`
`18`	`19`	`^`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"apiServerGqlUrl": "http://localhost:8080/graphql",`
`3`	`3`	`"apiServerHttpUrl": "http://localhost:8080",`
`4`		`- "githubClientId": "361a3b4fda86d0234d2f",`
`5`		`- "ingestUploadFileLimitMb": 50,`
`6`		`- "featureFlags": {`
`7`		`- "enableLogout": true`
`8`		`- }`
	`4`	`+ "githubClientId": "361a3b4fda86d0234d2f"`
`9`	`5`	`}`