Fix env var config in docker container (PlanQK#115)

* fix env var config not working in docker container

* complement documentation about env vars, merge two almost identical documentation files

* fix formatting

Dockerfile

@@ -3,43 +3,14 @@ LABEL maintainer = "Martin Beisel <martin.beisel@iaas.uni-stuttgart.de>"
 COPY "components/bpmn-q" /app
 WORKDIR /app
 RUN npm ci
-
-ARG DATA_CONFIG
-ARG OPENTOSCA_ENDPOINT
-ARG WINERY_ENDPOINT
-ARG NISQ_ANALYZER_ENDPOINT
-ARG TRANSFORMATION_FRAMEWORK_ENDPOINT
-ARG QISKIT_RUNTIME_HANDLER_ENDPOINT
-ARG AWS_RUNTIME_HANDLER_ENDPOINT
-ARG SCRIPT_SPLITTER_ENDPOINT
-ARG SCRIPT_SPLITTER_THRESHOLD
-ARG QRM_REPONAME
-ARG QRM_USERNAME
-ARG QRM_REPOPATH
-ARG PROVENANCE_COLLECTION
-ARG ENABLE_DATA_FLOW_PLUGIN
-ARG ENABLE_PLANQK_PLUGIN
-ARG ENABLE_QHANA_PLUGIN
-ARG ENABLE_QUANTME_PLUGIN
-ARG ENABLE_OPENTOSCA_PLUGIN
-ARG AUTOSAVE_INTERVAL
-ARG CAMUNDA_ENDPOINT
-ARG DOWNLOAD_FILE_NAME
-ARG GITHUB_TOKEN
-ARG QHANA_GET_PLUGIN_URL
-ARG QHANA_LIST_PLUGINS_URL
-ARG SERVICE_DATA_CONFIG
-ARG UPLOAD_BRANCH_NAME
-ARG UPLOAD_FILE_NAME
-ARG UPLOAD_GITHUB_REPO
-ARG UPLOAD_GITHUB_USER
-
-RUN env
 RUN npm run build -- --mode=production
 
 
 FROM nginxinc/nginx-unprivileged:alpine
 USER root
 RUN rm -rf /usr/share/nginx/html
 COPY --from=builder /app/public /usr/share/nginx/html
+RUN chown 101 -R /usr/share/nginx/html
 USER 101
+
+CMD ["/bin/sh", "-c", "envsubst < /usr/share/nginx/html/env.js.template > /usr/share/nginx/html/env.js && exec nginx -g 'daemon off;'"]

components/bpmn-q/.gitignore

@@ -2,4 +2,6 @@ node_modules/*
 public/*
 !public/index.html
 !public/src
+!public/env.js
+!public/env.js.template
 bpmnlint-plugin-custom/node_modules/*

components/bpmn-q/public/env.js

@@ -0,0 +1 @@
+window.env = {};

components/bpmn-q/public/env.js.template

@@ -0,0 +1,35 @@
+/* eslint-disable no-constant-condition */
+// when the docker image is run, the defined environment variables will be inserted here and made available in a global variable
+window.env = {
+    "AUTOSAVE_INTERVAL": "${AUTOSAVE_INTERVAL}" !== "" ? "${AUTOSAVE_INTERVAL}" : undefined, 
+    "AWS_RUNTIME_HANDLER_ENDPOINT": "${AWS_RUNTIME_HANDLER_ENDPOINT}" !== "" ? "${AWS_RUNTIME_HANDLER_ENDPOINT}" : undefined, 
+    "CAMUNDA_ENDPOINT": "${CAMUNDA_ENDPOINT}" !== "" ? "${CAMUNDA_ENDPOINT}" : undefined, 
+    "DATA_CONFIG": "${DATA_CONFIG}" !== "" ? "${DATA_CONFIG}" : undefined, 
+    "DOWNLOAD_FILE_NAME": "${DOWNLOAD_FILE_NAME}" !== "" ? "${DOWNLOAD_FILE_NAME}" : undefined, 
+    "ENABLE_DATA_FLOW_PLUGIN": "${ENABLE_DATA_FLOW_PLUGIN}" !== "" ? "${ENABLE_DATA_FLOW_PLUGIN}" : undefined, 
+    "ENABLE_PATTERN_PLUGIN": "${ENABLE_PATTERN_PLUGIN}" !== "" ? "${ENABLE_PATTERN_PLUGIN}" : undefined, 
+    "ENABLE_PLANQK_PLUGIN": "${ENABLE_PLANQK_PLUGIN}" !== "" ? "${ENABLE_PLANQK_PLUGIN}" : undefined, 
+    "ENABLE_QHANA_PLUGIN": "${ENABLE_QHANA_PLUGIN}" !== "" ? "${ENABLE_QHANA_PLUGIN}" : undefined, 
+    "ENABLE_QUANTME_PLUGIN": "${ENABLE_QUANTME_PLUGIN}" !== "" ? "${ENABLE_QUANTME_PLUGIN}" : undefined, 
+    "ENABLE_OPENTOSCA_PLUGIN": "${ENABLE_OPENTOSCA_PLUGIN}" !== "" ? "${ENABLE_OPENTOSCA_PLUGIN}" : undefined, 
+    "GITHUB_TOKEN": "${GITHUB_TOKEN}" !== "" ? "${GITHUB_TOKEN}" : undefined, 
+    "OPENTOSCA_ENDPOINT": "${OPENTOSCA_ENDPOINT}" !== "" ? "${OPENTOSCA_ENDPOINT}" : undefined, 
+    "NISQ_ANALYZER_ENDPOINT": "${NISQ_ANALYZER_ENDPOINT}" !== "" ? "${NISQ_ANALYZER_ENDPOINT}" : undefined, 
+    "PATTERN_ATLAS_ENDPOINT": "${PATTERN_ATLAS_ENDPOINT}" !== "" ? "${PATTERN_ATLAS_ENDPOINT}" : undefined, 
+    "PROVENANCE_COLLECTION": "${PROVENANCE_COLLECTION}" !== "" ? "${PROVENANCE_COLLECTION}" : undefined, 
+    "QHANA_GET_PLUGIN_URL": "${QHANA_GET_PLUGIN_URL}" !== "" ? "${QHANA_GET_PLUGIN_URL}" : undefined, 
+    "QHANA_LIST_PLUGINS_URL": "${QHANA_LIST_PLUGINS_URL}" !== "" ? "${QHANA_LIST_PLUGINS_URL}" : undefined, 
+    "QISKIT_RUNTIME_HANDLER_ENDPOINT": "${QISKIT_RUNTIME_HANDLER_ENDPOINT}" !== "" ? "${QISKIT_RUNTIME_HANDLER_ENDPOINT}" : undefined, 
+    "QRM_USERNAME": "${QRM_USERNAME}" !== "" ? "${QRM_USERNAME}" : undefined, 
+    "QRM_REPONAME": "${QRM_REPONAME}" !== "" ? "${QRM_REPONAME}" : undefined, 
+    "QRM_REPOPATH": "${QRM_REPOPATH}" !== "" ? "${QRM_REPOPATH}" : undefined, 
+    "SERVICE_DATA_CONFIG": "${SERVICE_DATA_CONFIG}" !== "" ? "${SERVICE_DATA_CONFIG}" : undefined, 
+    "SCRIPT_SPLITTER_ENDPOINT": "${SCRIPT_SPLITTER_ENDPOINT}" !== "" ? "${SCRIPT_SPLITTER_ENDPOINT}" : undefined, 
+    "SCRIPT_SPLITTER_THRESHOLD": "${SCRIPT_SPLITTER_THRESHOLD}" !== "" ? "${SCRIPT_SPLITTER_THRESHOLD}" : undefined, 
+    "TRANSFORMATION_FRAMEWORK_ENDPOINT": "${TRANSFORMATION_FRAMEWORK_ENDPOINT}" !== "" ? "${TRANSFORMATION_FRAMEWORK_ENDPOINT}" : undefined, 
+    "UPLOAD_BRANCH_NAME": "${UPLOAD_BRANCH_NAME}" !== "" ? "${UPLOAD_BRANCH_NAME}" : undefined, 
+    "UPLOAD_FILE_NAME": "${UPLOAD_FILE_NAME}" !== "" ? "${UPLOAD_FILE_NAME}" : undefined, 
+    "UPLOAD_GITHUB_REPO": "${UPLOAD_GITHUB_REPO}" !== "" ? "${UPLOAD_GITHUB_REPO}" : undefined, 
+    "UPLOAD_GITHUB_USER": "${UPLOAD_GITHUB_USER}" !== "" ? "${UPLOAD_GITHUB_USER}" : undefined, 
+    "WINERY_ENDPOINT": "${WINERY_ENDPOINT}" !== "" ? "${WINERY_ENDPOINT}" : undefined, 
+};

components/bpmn-q/public/index.html

@@ -28,6 +28,7 @@
       editor.getSession().setMode("ace/mode/xml");
       editor.setTheme("ace/theme/textmate");
     </script>
+    <script src="/env.js" , type="text/javascript"></script>
     <script src="/index.js" type="text/javascript"></script>
     <script>
       const app1 = {

components/bpmn-q/webpack.config.js

@@ -2,6 +2,63 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const path = require("path");
 const webpack = require("webpack");
 
+// here are the default values defined, that will be used if the corresponding environment variable is not set
+let defaultConfig = {
+  AUTOSAVE_INTERVAL: 300000,
+  AWS_RUNTIME_HANDLER_ENDPOINT: "http://localhost:8890",
+  CAMUNDA_ENDPOINT: "http://localhost:8090/engine-rest",
+  DATA_CONFIG:
+    "https://raw.githubusercontent.com/PlanQK/workflow-modeler/master/components/bpmn-q/modeler-component/extensions/quantme/configurations/quantmeDataObjects.json",
+  DOWNLOAD_FILE_NAME: "quantum-workflow-model",
+  ENABLE_DATA_FLOW_PLUGIN: "true",
+  ENABLE_PATTERN_PLUGIN: "true",
+  ENABLE_PLANQK_PLUGIN: "true",
+  ENABLE_QHANA_PLUGIN: "true",
+  ENABLE_QUANTME_PLUGIN: "true",
+  ENABLE_OPENTOSCA_PLUGIN: "true",
+  GITHUB_TOKEN: "",
+  OPENTOSCA_ENDPOINT: "http://localhost:1337/csars",
+  NISQ_ANALYZER_ENDPOINT: "http://localhost:8098/nisq-analyzer",
+  PATTERN_ATLAS_ENDPOINT:
+    "http://localhost:1977/patternatlas/patternLanguages/af7780d5-1f97-4536-8da7-4194b093ab1d",
+  PROVENANCE_COLLECTION: "false",
+  QHANA_GET_PLUGIN_URL: "http://localhost:5006/api/plugins/",
+  QHANA_LIST_PLUGINS_URL: "http://localhost:5006/api/plugins/?item-count=100",
+  QISKIT_RUNTIME_HANDLER_ENDPOINT: "http://localhost:8889",
+  QRM_USERNAME: "",
+  QRM_REPONAME: "",
+  QRM_REPOPATH: "",
+  SERVICE_DATA_CONFIG: "http://localhost:8000/service-task",
+  SCRIPT_SPLITTER_ENDPOINT: "http://localhost:8891",
+  SCRIPT_SPLITTER_THRESHOLD: 5,
+  TRANSFORMATION_FRAMEWORK_ENDPOINT: "http://localhost:8888",
+  UPLOAD_BRANCH_NAME: "",
+  UPLOAD_FILE_NAME: "workflow",
+  UPLOAD_GITHUB_REPO: "",
+  UPLOAD_GITHUB_USER: "",
+  WINERY_ENDPOINT: "http://localhost:8080/winery",
+};
+
+// The DefinePlugin from webpack will be used to replace every occurrence of "process.env.<ENV_VAR>" with the configured value.
+// First it will check if the env var was defined when run as a docker container. If not, it will check if it was defined during build time.
+// If this was also not the case it will use the default value defined above.
+for (let env_var_name in defaultConfig) {
+  let docker_env_var = `window.env?.${env_var_name}`;
+
+  let build_time_env_var = process.env[env_var_name];
+
+  if (build_time_env_var) {
+    build_time_env_var = JSON.stringify(build_time_env_var);
+  }
+
+  let default_env_var_value = JSON.stringify(defaultConfig[env_var_name]);
+
+  defaultConfig[
+    `process.env.${env_var_name}`
+  ] = `(${docker_env_var} ?? ${build_time_env_var} ?? ${default_env_var_value})`;
+  delete defaultConfig[env_var_name];
+}
+
 module.exports = {
   entry: {
     bundle: ["./modeler-component/QuantumWorkflowModeler.js"],
@@ -64,42 +121,7 @@ module.exports = {
       filename: "modeler-styles.css",
     }),
     // use the default values if environment variable does not exist
-    new webpack.EnvironmentPlugin({
-      AUTOSAVE_INTERVAL: 300000,
-      AWS_RUNTIME_HANDLER_ENDPOINT: "http://localhost:8890",
-      CAMUNDA_ENDPOINT: "http://localhost:8090/engine-rest",
-      DATA_CONFIG:
-        "https://raw.githubusercontent.com/PlanQK/workflow-modeler/master/components/bpmn-q/modeler-component/extensions/quantme/configurations/quantmeDataObjects.json",
-      DOWNLOAD_FILE_NAME: "quantum-workflow-model",
-      ENABLE_DATA_FLOW_PLUGIN: "true",
-      ENABLE_PATTERN_PLUGIN: "true",
-      ENABLE_PLANQK_PLUGIN: "true",
-      ENABLE_QHANA_PLUGIN: "true",
-      ENABLE_QUANTME_PLUGIN: "true",
-      ENABLE_OPENTOSCA_PLUGIN: "true",
-      GITHUB_TOKEN: "",
-      OPENTOSCA_ENDPOINT: "http://localhost:1337/csars",
-      NISQ_ANALYZER_ENDPOINT: "http://localhost:8098/nisq-analyzer",
-      PATTERN_ATLAS_ENDPOINT:
-        "http://localhost:1977/patternatlas/patternLanguages/af7780d5-1f97-4536-8da7-4194b093ab1d",
-      PROVENANCE_COLLECTION: "false",
-      QHANA_GET_PLUGIN_URL: "http://localhost:5006/api/plugins/",
-      QHANA_LIST_PLUGINS_URL:
-        "http://localhost:5006/api/plugins/?item-count=100",
-      QISKIT_RUNTIME_HANDLER_ENDPOINT: "http://localhost:8889",
-      QRM_USERNAME: "",
-      QRM_REPONAME: "",
-      QRM_REPOPATH: "",
-      SERVICE_DATA_CONFIG: "http://localhost:8000/service-task",
-      SCRIPT_SPLITTER_ENDPOINT: "http://localhost:8891",
-      SCRIPT_SPLITTER_THRESHOLD: 5,
-      TRANSFORMATION_FRAMEWORK_ENDPOINT: "http://localhost:8888",
-      UPLOAD_BRANCH_NAME: "",
-      UPLOAD_FILE_NAME: "workflow",
-      UPLOAD_GITHUB_REPO: "",
-      UPLOAD_GITHUB_USER: "",
-      WINERY_ENDPOINT: "http://localhost:8080/winery",
-    }),
+    new webpack.DefinePlugin(defaultConfig),
   ],
   mode: "development",
   devtool: "source-map",

doc/quantum-workflow-modeler/modeler-configuration.md

@@ -10,6 +10,8 @@ In the following, all environment variables that can be used to customize the wo
 
 * ```DATA_CONFIG``` (default: 'http://localhost:8100/data-objects'): Defines the configuration of data objects.
 
+* ```DOWNLOAD_FILE_NAME``` (default: 'quantum-workflow-model'): Defines the name of the download file.
+
 * ```ENABLE_DATA_FLOW_PLUGIN``` (default: 'true'): Defines if the Data Flow plugin is enabled.
 
 * ```ENABLE_PLANQK_PLUGIN``` (default: 'true'): Defines if the PlanQK plugin is enabled.
@@ -46,8 +48,17 @@ In the following, all environment variables that can be used to customize the wo
 
 * ```TRANSFORMATION_FRAMEWORK_ENDPOINT``` (default: 'http://localhost:8888'): Defines the endpoint of the QuantME Transformation Framework to use for the automated hardware selection.
 
+* ```UPLOAD_BRANCH_NAME``` (default: ' '): Defines the branch name where the workflow will be uploaded.
+
+* ```UPLOAD_FILE_NAME``` (default: ' '): Defines the name of the workflow file which will be uploaded.
+
+* ```UPLOAD_GITHUB_REPO``` (default: ' '): Defines the repository for the file upload.
+
+* ```UPLOAD_GITHUB_USER``` (default: ' '): Defines the owner for the upload repository.
+
 * ```WINERY_ENDPOINT``` (default: 'http://localhost:8081/winery'): Defines the endpoint of the Winery to retrieve deployment models for services from.
 
 * ```PROVENANCE_COLLECTION``` (default: 'false'): Defines if the intermediate results of the workflow executed should be collected.
 
-The value of an environment variable is accessed using `process.env.ENV_NAME`. If you want to add a new environment variable, add it to the [webpack.config](../../../../../components/bpmn-q/webpack.config.js) file and restart the application.
+The value of an environment variable is accessed using `process.env.ENV_NAME`.
+If you want to add a new environment variable, add it to the [webpack.config.js](../../components/bpmn-q/webpack.config.js) file and also to [env.js.template](../../components/bpmn-q/public/env.js.template) so that it works in the docker image.