feature dockerize & deployment plugin & attachment button

.dockerignore

@@ -0,0 +1,3 @@
+components/bpmn-q/node_modules/
+npm-debug.log
+yarn-error.log

.github/workflows/docker-publish.yaml

@@ -0,0 +1,24 @@
+
+on:
+  push:
+    branches:
+      - 'master'
+
+jobs:
+  docker-publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          push: true
+          tags: ghcr.io/sequenc-consortium/workflow-modeler:latest

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

Dockerfile

@@ -1,11 +1,33 @@
-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
 
-RUN npm install 
+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
+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

README.md

@@ -38,6 +38,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 ghcr.io/sequenc-consortium/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 

components/bpmn-q/karma.conf.js

@@ -17,12 +17,15 @@ module.exports = function (config) {
             '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/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',

components/bpmn-q/modeler-component/QuantumWorkflowModeler.js

@@ -81,6 +81,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>`;

components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js

@@ -1,5 +1,6 @@
 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';
@@ -29,6 +30,10 @@ const PLUGINS = [
     {
         plugin: PlanQKPlugin,
         dependencies: []
+    },
+    {
+        plugin: OpenToscaPlugin,
+        dependencies: []
     }
 ];
 
@@ -72,13 +77,15 @@ export function getActivePlugins() {
 export function checkEnabledStatus(pluginName) {
     switch (pluginName) {
         case 'dataflow':
-            return process.env.ENABLE_DATA_FLOW_PLUGIN;
+            return process.env.ENABLE_DATA_FLOW_PLUGIN !== "false";
         case 'planqk':
-            return process.env.ENABLE_PLANQK_PLUGIN;
+            return process.env.ENABLE_PLANQK_PLUGIN !== "false";
         case 'qhana':
-            return process.env.ENABLE_QHANA_PLUGIN;
+            return process.env.ENABLE_QHANA_PLUGIN !== "false";
         case 'quantme':
-            return process.env.ENABLE_QUANTME_PLUGIN;
+            return process.env.ENABLE_QUANTME_PLUGIN !== "false";
+        case 'opentosca':
+            return process.env.ENABLE_OPENTOSCA_PLUGIN !== "false";
     }
 }
 /**

components/bpmn-q/modeler-component/editor/resources/styling/editor-ui.css

@@ -13,6 +13,20 @@
     color: #636363;
 }
 
+.qwm-properties-btn {
+    box-sizing: border-box;
+    outline: none;
+    background-color: transparent;
+    border: solid;
+    border-radius: 6px;
+    font-size: 15px;
+    font-family: Arial, serif;
+    font-weight: bold;
+    margin: 2px;
+    padding: 8px;
+    color: #636363;
+}
+
 .qwm-shortcuts {
     right: 0px;
     position: absolute;

components/bpmn-q/modeler-component/editor/ui/notifications/NotificationHandler.js

@@ -50,9 +50,10 @@ export default class NotificationHandler {
      * @param title The title of the notification.
      * @param content The text displayed by the notification.
      * @param duration The duration in milliseconds.
+     * @returns {{update: update, close: close}}
      */
     displayNotification({type = 'info', title, content, duration = 4000}) {
-        this.notificationRef.current.displayNotification({
+        return this.notificationRef.current.displayNotification({
             type: type,
             title: title,
             content: content,

components/bpmn-q/modeler-component/editor/util/RenderUtilities.js

@@ -61,24 +61,32 @@ function drawRect(parentNode, width, height, borderRadius, color) {
  * @param parentGfx The parent element the SVG is drawn in
  * @param importSVG The SVG
  * @param svgAttributes Attributes for the SVG
+ * @param foreground true if SVG should be above Task
+ * @returns The created svg element
  */
-export function drawTaskSVG(parentGfx, importSVG, svgAttributes) {
+export function drawTaskSVG(parentGfx, importSVG, svgAttributes, foreground) {
     const innerSvgStr = importSVG.svg,
         transformDef = importSVG.transform;
 
     const groupDef = svgCreate('g');
     svgAttr(groupDef, {transform: transformDef});
     innerSVG(groupDef, innerSvgStr);
 
-    // set task box opacity to 0 such that icon can be in the background
-    svgAttr(svgSelect(parentGfx, 'rect'), {'fill-opacity': 0});
+    if(!foreground) {
+        // set task box opacity to 0 such that icon can be in the background
+        svgAttr(svgSelect(parentGfx, 'rect'), { 'fill-opacity': 0 });
+    }
 
     if (svgAttributes) {
         svgAttr(groupDef, svgAttributes);
     }
 
-    // draw svg in the background
-    parentGfx.prepend(groupDef);
+    if(foreground) {
+        parentGfx.append(groupDef);
+    } else {
+        parentGfx.prepend(groupDef);
+    }
+    return groupDef;
 }
 
 /**

components/bpmn-q/modeler-component/extensions/data-extension/palette/DataFlowPaletteProvider.js

@@ -3,7 +3,6 @@ import * as consts from '../Constants';
 export default class DataFlowPaletteProvider {
 
     constructor(bpmnFactory, create, elementFactory, palette, translate) {
-
         this.bpmnFactory = bpmnFactory;
         this.create = create;
         this.elementFactory = elementFactory;

components/bpmn-q/modeler-component/extensions/opentosca/OpenTOSCAPlugin.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+import OpenTOSCATab from "./configTabs/OpenTOSCATab";
+
+import opentoscaStyles from './styling/opentosca.css';
+import DeploymentPlugin from "./ui/deployment/services/DeploymentPlugin";
+import OpenToscaExtensionModule from "./modeling";
+let openToscaModdleExtension = require('./resources/opentosca4bpmn.json');
+
+
+/**
+ * Plugin Object of the OpenTOSCA extension. Used to register the plugin in the plugin handler of the modeler.
+ */
+export default {
+    buttons: [<DeploymentPlugin/>],
+    configTabs: [
+        {
+            tabId: 'OpenTOSCAEndpointTab',
+            tabTitle: 'OpenTOSCA',
+            configTab: OpenTOSCATab,
+        }
+    ],
+    extensionModule: OpenToscaExtensionModule,
+    moddleDescription: openToscaModdleExtension,
+    name: 'opentosca',
+    styling: [opentoscaStyles]
+};

components/bpmn-q/modeler-component/extensions/opentosca/configTabs/OpenTOSCATab.js

@@ -0,0 +1,81 @@
+import React, {useState} from 'react';
+import {getModeler} from "../../../editor/ModelerHandler";
+import * as config from "../framework-config/config-manager";
+
+/**
+ * React component specifying a tab for the configuration dialog of the modeler. The tab allows the user to change the
+ * OpenTOSCA and Winery endpoint.
+ *
+ * @return {JSX.Element} The tab as a React component
+ * @constructor
+ */
+export default function OpenTOSCATab() {
+
+    const [opentoscaEndpoint, setOpentoscaEndpoint] = useState(config.getOpenTOSCAEndpoint());
+    const [wineryEndpoint, setWineryEndpoint] = useState(config.getWineryEndpoint());
+
+    const modeler = getModeler();
+
+    const editorActions = modeler.get('editorActions');
+    const eventBus = modeler.get('eventBus');
+
+    // register editor action listener for changes in config entries
+    if (!editorActions._actions.hasOwnProperty('opentoscaEndpointChanged')) {
+        editorActions.register({
+            opentoscaEndpointChanged: function (opentoscaEndpoint) {
+                self.modeler.config.opentoscaEndpoint = opentoscaEndpoint;
+            }
+        });
+    }
+    if (!editorActions._actions.hasOwnProperty('wineryEndpointChanged')) {
+        editorActions.register({
+            wineryEndpointChanged: function (wineryEndpoint) {
+                self.modeler.config.wineryEndpoint = wineryEndpoint;
+                eventBus.fire('config.updated', self.modeler.config);
+            }
+        });
+    }
+
+    // save changed config entries on close
+    OpenTOSCATab.prototype.onClose = () => {
+        modeler.config.opentoscaEndpoint = opentoscaEndpoint;
+        modeler.config.wineryEndpoint = wineryEndpoint;
+        config.setOpenTOSCAEndpoint(opentoscaEndpoint);
+        config.setWineryEndpoint(wineryEndpoint);
+    };
+
+    return <>
+        <h3>OpenTOSCA</h3>
+        <table>
+            <tbody>
+            <tr className="spaceUnder">
+                <td align="right">OpenTOSCA Endpoint:</td>
+                <td align="left">
+                    <input
+                        type="string"
+                        name="opentoscaEndpoint"
+                        value={opentoscaEndpoint}
+                        onChange={event => setOpentoscaEndpoint(event.target.value)}/>
+                </td>
+            </tr>
+            <tr className="spaceUnder">
+                <td align="right">Winery Endpoint:</td>
+                <td align="left">
+                    <input
+                        type="string"
+                        name="wineryEndpoint"
+                        value={wineryEndpoint}
+                        onChange={event => setWineryEndpoint(event.target.value)}/>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </>;
+}
+
+OpenTOSCATab.prototype.config = () => {
+    const modeler = getModeler();
+
+    modeler.config.opentoscaEndpoint = config.getOpenTOSCAEndpoint();
+    modeler.config.wineryEndpoint = config.getWineryEndpoint();
+};