Merge remote-tracking branch 'origin/master' into feature/linter

PlanQK · Oct 23, 2023 · 435b7cd · 435b7cd
2 parents 44a1d6c + 01faf35
commit 435b7cd
Show file tree

Hide file tree

Showing 83 changed files with 4,822 additions and 3,792 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,3 @@
+components/bpmn-q/node_modules/
+npm-debug.log
+yarn-error.log
diff --git a/.github/workflows/docker-publish.yaml b/.github/workflows/docker-publish.yaml
@@ -0,0 +1,23 @@
+
+on:
+  push:
+    branches:
+      - 'master'
+
+jobs:
+  docker-publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          push: true
+          tags: planqk/workflow-modeler:latest
diff --git a/Dockerfile b/Dockerfile
@@ -1,11 +1,45 @@
-FROM node:18-alpine
-
+FROM node:18-alpine as builder
 LABEL maintainer = "Martin Beisel <martin.beisel@iaas.uni-stuttgart.de>"
-COPY "components/bpmn-q" /tmp
-WORKDIR /tmp
+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 npm install 
+RUN env
+RUN npm run build -- --mode=production
 
-EXPOSE 8080
 
-CMD npm run dev
+FROM nginxinc/nginx-unprivileged:alpine
+USER root
+RUN rm -rf /usr/share/nginx/html
+COPY --from=builder /app/public /usr/share/nginx/html
+USER 101
diff --git a/README.md b/README.md
@@ -41,6 +41,20 @@ npm run dev
 ```
 to start the modeler in a simple html website which runs on localhost:8080.
 
+## Execution in Docker
+To serve the application from a Docker container execute:
+```
+docker run --name workflow-modeler -p 8080:8080 planqk/workflow-modeler
+```
+Afterwards the application is available in a browser on localhost:8080 
+
+To build and run an own image execute:
+```
+docker build -t workflow-modeler [--build-arg <Key>=<Value>] .
+docker run --name workflow-modeler -p 8080:8080 workflow-modeler
+```
+
+
 ## How to use this Library
 
 To use the Quantum Workflow Modeler component in your application you have to install its npm package which is published via GitHub packages.

diff --git a/components/bpmn-q/karma.conf.js b/components/bpmn-q/karma.conf.js
@@ -1,32 +1,36 @@
 // Karma configuration
-const webpackConfig = require("./webpack.config.js");
+const webpackConfig = require('./webpack.config.js');
 
 module.exports = function (config) {
   config.set({
+
     // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: "",
+    basePath: '',
 
     // frameworks to use
     // available frameworks: https://www.npmjs.com/search?q=keywords:karma-adapter
-    frameworks: ["mocha", "webpack"],
+    frameworks: ['mocha', 'webpack'],
 
     // list of files / patterns to load in the browser
     files: [
-      "test/tests/editor/configurations.spec.js",
-      "test/tests/editor/editor.spec.js",
-      "test/tests/editor/plugin.spec.js",
-      "test/tests/planqk/planqk-transformation.spec.js",
-      "test/tests/quantme/quantme-transformation.spec.js",
-      "test/tests/editor/utils/modelling-util.spec.js",
-      "test/tests/qhana/qhana-plugin-config.spec.js",
-      "test/tests/qhana/qhana-service-configs.spec.js",
-      "test/tests/quantme/data-object-configs.spec.js",
-      "test/tests/quantme/quantme-config.spec.js",
-      "test/tests/dataflow/data-flow-transformation.spec.js",
-      "test/tests/dataflow/data-flow-plugin-config.spec.js",
-      "test/tests/dataflow/data-flow-configurations-endpoint.spec.js",
-      "test/tests/dataflow/data-flow-palette.spec.js",
-      "test/tests/dataflow/data-flow-replace-menu.spec.js",
+      'test/tests/editor/configurations.spec.js',
+      'test/tests/editor/editor.spec.js',
+      'test/tests/editor/plugin.spec.js',
+      'test/tests/planqk/planqk-transformation.spec.js',
+      'test/tests/editor/utils/modelling-util.spec.js',
+      'test/tests/qhana/qhana-plugin-config.spec.js',
+      'test/tests/qhana/qhana-service-configs.spec.js',
+      'test/tests/quantme/quantme-transformation.spec.js',
+      'test/tests/quantme/data-object-configs.spec.js',
+      'test/tests/quantme/quantme-config.spec.js',
+      'test/tests/opentosca/opentosca-config.spec.js',
+      'test/tests/opentosca/deployment-utils.spec.js',
+      'test/tests/opentosca/deployment-model-renderer.spec.js',
+      'test/tests/dataflow/data-flow-transformation.spec.js',
+      'test/tests/dataflow/data-flow-plugin-config.spec.js',
+      'test/tests/dataflow/data-flow-configurations-endpoint.spec.js',
+      'test/tests/dataflow/data-flow-palette.spec.js',
+      'test/tests/dataflow/data-flow-replace-menu.spec.js',
     ],
 
     // list of files / patterns to exclude
@@ -35,7 +39,7 @@ module.exports = function (config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://www.npmjs.com/search?q=keywords:karma-preprocessor
     preprocessors: {
-      "test/**/*.spec.js": ["webpack"],
+      'test/**/*.spec.js': ['webpack']
     },
 
     webpack: webpackConfig,
@@ -45,7 +49,7 @@ module.exports = function (config) {
 
     // start these browsers
     // available browser launchers: https://www.npmjs.com/search?q=keywords:karma-launcher
-    browsers: ["ChromeHeadless"],
+    browsers: ['ChromeHeadless'],
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
@@ -56,7 +60,7 @@ module.exports = function (config) {
     concurrency: 1,
 
     mochaReporter: {
-      output: "minimal",
+      output: "minimal"
     },
   });
-};
+};
diff --git a/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js b/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js
@@ -91,6 +91,7 @@ export class QuantumWorkflowModeler extends HTMLElement {
               <div id="main-div" style="display: flex; flex: 1; height: 100%">
                 <div id="canvas" style="width: 100%"></div>
                 <div id="properties" style="overflow: auto; width:350px; max-height: 93.5vh; background: #f8f8f8;"></div>
+                <div id="modal-container"></div>
               </div>
               <div id="qwm-notification-container"></div>
             </div>`;

diff --git a/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js b/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js
@@ -1,10 +1,11 @@
-import PlanQKPlugin from "../../extensions/planqk/PlanQKPlugin";
-import QuantMEPlugin from "../../extensions/quantme/QuantMEPlugin";
-import DataFlowPlugin from "../../extensions/data-extension/DataFlowPlugin";
-import QHAnaPlugin from "../../extensions/qhana/QHAnaPlugin";
-import { getAllConfigs } from "./PluginConfigHandler";
-import GeneralTab from "../config/GeneralTab";
-import GitHubTab from "../../extensions/quantme/configTabs/GitHubTab";
+import PlanQKPlugin from '../../extensions/planqk/PlanQKPlugin';
+import QuantMEPlugin from '../../extensions/quantme/QuantMEPlugin';
+import OpenTOSCAPlugin from "../../extensions/opentosca/OpenTOSCAPlugin";
+import DataFlowPlugin from '../../extensions/data-extension/DataFlowPlugin';
+import QHAnaPlugin from '../../extensions/qhana/QHAnaPlugin';
+import { getAllConfigs } from './PluginConfigHandler';
+import GeneralTab from '../config/GeneralTab';
+import GitHubTab from '../../extensions/quantme/configTabs/GitHubTab';
 
 /**
  * Handler for plugins of the modeler. Controls active plugins and the properties they define. Central access point to
@@ -16,20 +17,24 @@ import GitHubTab from "../../extensions/quantme/configTabs/GitHubTab";
 const PLUGINS = [
   {
     plugin: QuantMEPlugin,
-    dependencies: ["DataFlowPlugin"],
+    dependencies: ['DataFlowPlugin']
   },
   {
     plugin: DataFlowPlugin,
-    dependencies: [],
+    dependencies: []
   },
   {
     plugin: QHAnaPlugin,
-    dependencies: [],
+    dependencies: []
   },
   {
     plugin: PlanQKPlugin,
-    dependencies: [],
+    dependencies: []
   },
+  {
+    plugin: OpenTOSCAPlugin,
+    dependencies: []
+  }
 ];
 
 // list of currently active plugins in the current running instance of the modeler, defined based on the plugin configuration
@@ -44,13 +49,8 @@ export function getActivePlugins() {
     const loadPlugin = (plugin) => {
       if (!activePlugins.includes(plugin.plugin)) {
         for (const dependency of plugin.dependencies) {
-          const dependencyPlugin = PLUGINS.find(
-            (p) => p.plugin.name === dependency
-          );
-          if (
-            dependencyPlugin &&
-            !activePlugins.includes(dependencyPlugin.plugin)
-          ) {
+          const dependencyPlugin = PLUGINS.find((p) => p.plugin.name === dependency);
+          if (dependencyPlugin && !activePlugins.includes(dependencyPlugin.plugin)) {
             activePlugins.push(dependencyPlugin.plugin);
             loadPlugin(dependencyPlugin);
           }
@@ -61,9 +61,7 @@ export function getActivePlugins() {
 
     for (const pluginConfig of getAllConfigs()) {
       const plugin = PLUGINS.find(
-        (p) =>
-          p.plugin.name === pluginConfig.name &&
-          checkEnabledStatus(p.plugin.name)
+        (p) => p.plugin.name === pluginConfig.name && checkEnabledStatus(p.plugin.name)
       );
       if (plugin) {
         loadPlugin(plugin);
@@ -74,16 +72,20 @@ export function getActivePlugins() {
   }
 }
 
+
+
 export function checkEnabledStatus(pluginName) {
   switch (pluginName) {
-    case "dataflow":
+    case 'dataflow':
       return process.env.ENABLE_DATA_FLOW_PLUGIN !== "false";
-    case "planqk":
+    case 'planqk':
       return process.env.ENABLE_PLANQK_PLUGIN !== "false";
-    case "qhana":
+    case 'qhana':
       return process.env.ENABLE_QHANA_PLUGIN !== "false";
-    case "quantme":
+    case 'quantme':
       return process.env.ENABLE_QUANTME_PLUGIN !== "false";
+    case 'opentosca':
+      return process.env.ENABLE_OPENTOSCA_PLUGIN !== "false";
   }
 }
 /**
@@ -93,6 +95,7 @@ export function checkEnabledStatus(pluginName) {
  * @returns {*[]} Array of additional modules defined by the active plugins.
  */
 export function getAdditionalModules() {
+
   const modules = [];
 
   // load all additional modules of the active plugins
@@ -102,7 +105,7 @@ export function getAdditionalModules() {
     }
   }
 
-  console.log("\n Get Additional Modules");
+  console.log('\n Get Additional Modules');
   console.log(modules);
   return modules;
 }
@@ -113,6 +116,7 @@ export function getAdditionalModules() {
  * @returns {*[]} Array of css style modules defined by the active plugins.
  */
 export function getStyles() {
+
   let styles = [];
 
   // load css styles of the active plugins
@@ -122,7 +126,7 @@ export function getStyles() {
     }
   }
 
-  console.log("\n Get Plugin Styling");
+  console.log('\n Get Plugin Styling');
   console.log(styles);
   return styles;
 }
@@ -143,7 +147,7 @@ export function getModdleExtension() {
     }
   }
 
-  console.log("\n Get Moddle Extensions: ");
+  console.log('\n Get Moddle Extensions: ');
   console.log(extensions);
   return extensions;
 }
@@ -163,7 +167,7 @@ export function getTransformationButtons() {
     }
   }
 
-  console.log("\n Got " + transformationButtons.length + " Transformations");
+  console.log('\n Got ' + transformationButtons.length + ' Transformations');
   return transformationButtons;
 }
 
@@ -181,7 +185,7 @@ export function getPluginButtons() {
     }
   }
 
-  console.log("\n Got " + pluginButtons.length + " Plugin Buttons");
+  console.log('\n Got ' + pluginButtons.length + ' Plugin Buttons');
   console.log(pluginButtons);
 
   return pluginButtons;
@@ -194,19 +198,17 @@ export function getPluginButtons() {
  * @returns {*[]} Array of config tabs defined by the active plugins.
  */
 export function getConfigTabs() {
+
   // add default editor tab to configure editor configs
-  let configTabs = [
-    {
-      tabId: "EditorTab",
-      tabTitle: "General",
-      configTab: GeneralTab,
-    },
-    {
-      tabId: "GitHubTab",
-      tabTitle: "GitHub",
-      configTab: GitHubTab,
-    },
-  ];
+  let configTabs = [{
+    tabId: 'EditorTab',
+    tabTitle: 'General',
+    configTab: GeneralTab,
+  }, {
+    tabId: 'GitHubTab',
+    tabTitle: 'GitHub',
+    configTab: GitHubTab,
+  }];
 
   // load the config tabs of the active plugins into one array
   for (let plugin of getActivePlugins()) {
@@ -215,8 +217,8 @@ export function getConfigTabs() {
     }
   }
 
-  console.log("\n Got " + configTabs.length + " Config Tabs");
+  console.log('\n Got ' + configTabs.length + ' Config Tabs');
   console.log(configTabs);
 
   return configTabs;
-}
+}