Make ui configurable via environment variables

Issue-ID: PORTALNG-4

Signed-off-by: Fiete Ostkamp <Fiete.Ostkamp@telekom.de>
Change-Id: I31b968cef23c7727cfd8cfb2ba65691745a0b8f3

11 files changed, 50 insertions, 12 deletions

diff --git a/Dockerfile b/Dockerfile
index 4b0f004..fc88ab5 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,9 +1,22 @@
+FROM node:14-bullseye-slim as builder
+# the JRE is required by the openapi-generator-cli
+RUN apt update && apt install -y openjdk-17-jre-headless
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
 FROM openresty/openresty:1.21.4.1-4-alpine
-RUN  apk add gettext
+RUN apk add gettext
 COPY server/resty /usr/local/openresty/lualib/resty/
 COPY server/nginx* ./
 COPY docker_entrypoint.sh .
-COPY dist/frontend /usr/share/nginx/html
+COPY --from=builder /usr/src/app/dist/frontend /usr/share/nginx/html
 ENTRYPOINT ["/docker_entrypoint.sh"]
 EXPOSE ${NGINX_PORT}
 CMD ["nginx", "-g", "daemon off;"]
diff --git a/docker_entrypoint.sh b/docker_entrypoint.sh
index 823086f..4092155 100755
--- a/docker_entrypoint.sh
+++ b/docker_entrypoint.sh
@@ -24,4 +24,7 @@ set -eu
 
 envsubst '${BFF_URL} ${NGINX_PORT} ${KEYCLOAK_URL} ${KEYCLOAK_REALM} ${KEYCLOAK_INTERNAL_URL} ${CLUSTER_NAMESERVER_IP}' < ./nginx.template > /etc/nginx/conf.d/default.conf
 
+# dynamically set Angular environment config upon container startup
+envsubst < /usr/share/nginx/html/assets/env.template.js > /usr/share/nginx/html/assets/env.js
+
 exec "$@"
diff --git a/src/app/components/layout/header/header/header.component.ts b/src/app/components/layout/header/header/header.component.ts
index f5c1a1c..b6c513f 100644
--- a/src/app/components/layout/header/header/header.component.ts
+++ b/src/app/components/layout/header/header/header.component.ts
@@ -48,7 +48,7 @@ export class HeaderComponent implements OnInit {
   isOnapTheme = false;
   switchToMainContent: string = '';
   isFullScreen = false;
-  changePasswordUrl = `${environment.keycloakEditProfile}/password`;
+  changePasswordUrl = `${environment.keycloak.hostname}/auth/realms/${environment.keycloak.realm}/account/password`;
   shortcuts: Map<KeyboardShortcuts,string> = this.shortcutService.getShortcuts();
 
   public ACCESS_KEY = KeyboardShortcuts;
diff --git a/src/app/components/layout/sidemenu/sidemenu.component.ts b/src/app/components/layout/sidemenu/sidemenu.component.ts
index 1f5c123..8cbe6b2 100644
--- a/src/app/components/layout/sidemenu/sidemenu.component.ts
+++ b/src/app/components/layout/sidemenu/sidemenu.component.ts
@@ -35,7 +35,6 @@ export class SidemenuComponent {
   @Input() isSidebarCollapsed = false;
 
   public ACCESS_KEY = KeyboardShortcuts;
-  public keycloakEditProfile = environment.keycloakEditProfile;
   public isKpiDashboardSubMenuCollapsed = false;
 
   constructor() {
diff --git a/src/app/model/environment.model.ts b/src/app/model/environment.model.ts
index 5bfb615..8e6bba1 100644
--- a/src/app/model/environment.model.ts
+++ b/src/app/model/environment.model.ts
@@ -21,18 +21,17 @@ export interface Environment {
   customStyleEnabled: boolean;
   backendServerUrl: string;
   hostname: string;
-  keycloakEditProfile: string;
   production: boolean;
   keycloak: KeycloakEnvironment;
   dateTimeFormat: string;
   loggingUrl: string;
   loggingEnabled: boolean
   supportUrlLink: string
-
 }
 
 export interface KeycloakEnvironment {
-  issuer: string;
+  hostname: string;
+  realm: string;
   redirectUri: string;
   clientId: string;
   responseType: string;
diff --git a/src/app/modules/auth/auth.config.ts b/src/app/modules/auth/auth.config.ts
index 3414edd..8f8035e 100644
--- a/src/app/modules/auth/auth.config.ts
+++ b/src/app/modules/auth/auth.config.ts
@@ -22,7 +22,7 @@ import { environment } from '../../../environments/environment';
 
 export const authConfig: AuthConfig = {
   // Url of the Identity Provider
-  issuer: environment.keycloak.issuer,
+  issuer: `${environment.keycloak.hostname}/auth/realms/${environment.keycloak.realm}`,
 
   // URL of the SPA to redirect the user to after login
   redirectUri: environment.keycloak.redirectUri,
diff --git a/src/assets/env.js b/src/assets/env.js
new file mode 100644
index 0000000..154ed3b
--- /dev/null
+++ b/src/assets/env.js
@@ -0,0 +1,10 @@
+(function(window) {
+  window["env"] = window["env"] || {};
+  window["env"]["keycloak"] = window["env"]["keycloak"] || {};
+
+  // Environment variables
+  window["env"]["customStyleEnabled"];
+  window["env"]["keycloak"]["hostname"];
+  window["env"]["keycloak"]["realm"];
+  window["env"]["keycloak"]["clientId"];
+})(this);
diff --git a/src/assets/env.template.js b/src/assets/env.template.js
new file mode 100644
index 0000000..037014b
--- /dev/null
+++ b/src/assets/env.template.js
@@ -0,0 +1,10 @@
+(function(window) {
+  window["env"] = window["env"] || {};
+  window["env"]["keycloak"] = window["env"]["keycloak"] || {};
+
+  // Environment variables
+  window["env"]["customStyleEnabled"] = "${CUSTOM_STYLE_ENABLED}";
+  window["env"]["keycloak"]["hostname"] = "${KEYCLOAK_HOSTNAME}";
+  window["env"]["keycloak"]["realm"] = "${KEYCLOAK_REALM}";
+  window["env"]["keycloak"]["clientId"] = "${KEYCLOAK_CLIENT_ID}";
+})(this);
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index a533520..72d0d29 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright (c) 2022. Deutsche Telekom AG
  *
@@ -27,9 +28,10 @@ export const environment: Environment = {
   production: true,
   keycloakEditProfile: `${window.location.origin}/auth/realms/ONAP/account`,
   keycloak: {
-    issuer: `${window.location.origin}/auth/realms/ONAP`, // Url of the Identity Provider
+    hostname: window["env"]["keycloak"]["hostname"] || `https://${window.location.host.replace('portal', 'keycloak')}`,
+    realm: window["env"]["keycloak"]["realm"] || 'ONAP',
     redirectUri: window.location.origin, // URL of the SPA to redirect the user to after login
-    clientId: 'portal-app', // The Frontend is registered with this id at the auth-server
+    clientId: window["env"]["keycloak"]["clientId"] || 'portal-app', // The Frontend is registered with this id at the auth-server
     responseType: 'code',
     scope: 'openid', // set the scope for the permissions the client should request
     requireHttps: false, // Don't require https
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 80d0005..9b734c6 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -29,11 +29,11 @@ import { Environment } from '../app/model/environment.model';
 export const environment: Environment = {
   customStyleEnabled: true,
   backendServerUrl: window.location.origin + '/api',
-  keycloakEditProfile: `${window.location.origin}/auth/realms/ONAP/account`,
   hostname: window.location.hostname,
   production: false,
   keycloak: {
-    issuer: `${window.location.origin}/auth/realms/ONAP`, // Url of the Identity Provider
+    hostname: window.location.origin, // Url of the Identity Provider
+    realm: 'ONAP',
     redirectUri: window.location.origin, // URL of the SPA to redirect the user to after login
     clientId: 'portal-app', // The Frontend is registered with this id at the auth-server
     responseType: 'code',
diff --git a/src/index.html b/src/index.html
index 9ff9ef5..72b1820 100644
--- a/src/index.html
+++ b/src/index.html
@@ -27,6 +27,8 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <script src="assets/js/jquery-2.1.3.min.js"></script>
     <script src="assets/js/bootstrap.min.js"></script>
+    <!-- Load environment variables -->
+    <script src="assets/env.js"></script>
   </head>
   <body>
     <app-root></app-root>