feat: display log at readWorkflow, redirect to service description

Author: pyphilia

src/config.js

@@ -7,5 +7,6 @@ export const {
   INPUTS_DATA_XML_FILEPATH = "api/inputData.xml",
   USERNAME = "",
   PASSWORD = "",
-  SERVICES_API = ""
+  SERVICES_API = "",
+  BASE_URL = "http://diufvm17.unifr.ch:8080/exist/projects/diae/"
 } = process.env;

src/js/elements/addElement.js

@@ -39,7 +39,7 @@ import { layoutSettingsApp } from "../layoutSettings";
 
 const createBox = (
   e,
-  { position, size, boxId, defaultParams = {}, ports: { items } }
+  { position, size, boxId, defaultParams = {}, ports: { items }, serviceId }
 ) => {
   const { graph } = app;
   const { category, label, description, params = {} } = e;
@@ -73,6 +73,7 @@ const createBox = (
       rect: { ...THEME.rect, ...size }
     },
     boxId,
+    serviceId,
     category: CATEGORY_SERVICE,
     position,
     size,
@@ -194,7 +195,7 @@ const createPortsFromInputOutput = (inputs, outputs) => {
 export const buildElementFromName = name => {
   // find webservice given name
   const webservice = getWebserviceByName(name);
-  const { outputs = [], inputs = [] } = webservice;
+  const { outputs = [], inputs = [], id } = webservice;
 
   const el = transformWebserviceForGraph(webservice);
 
@@ -214,6 +215,7 @@ export const buildElementFromName = name => {
   const position = position ? position : findEmptyPosition(size);
 
   return {
+    serviceId: id,
     category: CATEGORY_SERVICE,
     boxId,
     defaultParams,

src/js/layout/components/Log.js

@@ -4,25 +4,48 @@ import { centerBoxInPaperByBoxId } from "../utils";
 const Log = Vue.component("Log", {
   data() {
     return {
-      messages: []
+      messages: [],
+      activated: false // hacky variable to activate readworkflow initial push
     };
   },
-  computed: {
-    logMessages() {
-      return this.messages;
-    }
-  },
   methods: {
+    findMessage(message) {
+      return this.messages.findIndex(
+        m => m.boxId == message.boxId && m.paramName == message.paramName
+      );
+    },
     setLogMessages(messages) {
       this.messages = messages;
     },
+    addMessage(message) {
+      const mId = this.findMessage(message);
+      // if the input is not already false
+      if (mId < 0) {
+        this.messages.push(message);
+        this.hacky(message);
+      }
+      // replace the message
+      else {
+        this.$set(this.messages[mId], "value", message.value);
+      }
+    },
+    hacky(message) {
+      // BUG HACK: add twice the message for first pushed message:
+      if (!this.activated) {
+        this.messages.push(message);
+        this.activated = true;
+      }
+    },
+    removeMessage(message) {
+      this.messages.splice(this.findMessage(message), 1);
+    },
     goToBox(name) {
       centerBoxInPaperByBoxId(name);
     }
   },
   template: `
   <div id="log">
-    <div v-for="{value, paramName, paramType, name, boxId} in logMessages">Invalid value <span class="value">{{value}}</span> in <span class="name">{{paramName}}</span> of <span class="boxName" @click="goToBox(boxId)">{{name}}</span></div>
+    <div v-for="{value, paramName, paramType, name, boxId} in messages">Invalid value <span class="value">{{value}}</span> in <span class="name">{{paramName}}</span> of <span class="boxName" @click="goToBox(boxId)">{{name}}</span></div>
   </div>
   `
 });

src/js/layout/inputs.js

@@ -4,6 +4,7 @@ const $ = jQuery;
 global.$ = global.jQuery = $;
 
 import "select2js";
+import { BASE_URL } from "../../config";
 import {
   TOOLTIP_BREAK_LINE,
   Inputs,
@@ -45,14 +46,16 @@ export const setSelectValueInElement = (boxId, parameters) => {
   }
 };
 
-export const setInputValueInElement = (boxId, parameters) => {
+export const setInputValueInElement = (box, parameters) => {
+  console.log("TCL: setInputValueInElement -> box", box);
+  const { boxId, type: boxName } = box;
   for (const [key, { value }] of Object.entries(parameters)) {
     // we need to precise paper root because of the minimap duplicate elements
     const el = $(
       `${INTERFACE_ROOT} foreignObject[boxId="${boxId}"] ${Inputs.NUMBER.tag}[name="${key}"]`
     );
     el.val(value);
-    checkInputValue(el);
+    checkInputValue(el, { boxId, boxName });
   }
 };
 
@@ -241,14 +244,17 @@ export const createInput = (
     }
   });
 
+  const { boxId, type: boxName } = element.attributes;
+  const boxParams = { boxId, boxName };
+
   // update param
   inputEl.on({
     blur: function() {
       const input = $(this);
       const value = input.val();
       const attr = input.attr("name");
       app.setInputValueInElement({ element, attr, value });
-      checkInputValue(input);
+      checkInputValue(input, boxParams);
     },
     click: function() {
       $(this).select();
@@ -259,7 +265,7 @@ export const createInput = (
   });
 
   // evaluate default parameters
-  checkInputValue(inputEl);
+  checkInputValue(inputEl, boxParams);
 
   // reset
   const resetButtonNumber = resetButton.clone(true).attr({
@@ -281,7 +287,7 @@ export const createInput = (
   return newInput;
 };
 
-export const checkInputValue = input => {
+export const checkInputValue = (input, { boxName, boxId }) => {
   const currentVal = input.val();
   const { min, max, step } = input.data();
 
@@ -291,13 +297,34 @@ export const checkInputValue = input => {
     step
   });
 
+  if (!isValid) {
+    app.$refs.log.addMessage({
+      value: currentVal,
+      paramName: input.attr("name"),
+      paramType: Inputs.NUMBER.type,
+      name: boxName,
+      boxId
+    });
+  } else {
+    app.$refs.log.removeMessage({
+      paramName: input.attr("name"),
+      name: boxName,
+      boxId
+    });
+  }
+
   input.toggleClass("is-invalid", !isValid);
 };
 
 // cannot merge defaultParams in element, because element needs to be "pure"
 // in order to modify it with jointjs functions
 export const setParametersInForeignObject = (element, defaultParams = {}) => {
-  const { description, type: label, originalParams } = element.attributes;
+  const {
+    description,
+    type: label,
+    originalParams,
+    serviceId
+  } = element.attributes;
 
   const selectsArr = [];
   const inputsArr = [];
@@ -396,6 +423,13 @@ export const setParametersInForeignObject = (element, defaultParams = {}) => {
         "data-toggle": "tooltip",
         "data-placement": "right"
       })
+      .on("click", function() {
+        const win = window.open(
+          `${BASE_URL}services/service?id=${serviceId}`,
+          "_blank"
+        );
+        win.focus();
+      })
       .appendTo(foreignObject.find(`.${TITLE_ROW_CLASS}`));
   }
 

src/styles/mainContent.scss

@@ -96,6 +96,7 @@ input[type="file"]:hover {
       display: block;
       width: 40px;
       margin: auto 10px auto auto;
+      cursor: pointer;
 
       svg {
         display: block;