Merge pull request #137 from International-Data-Spaces-Association/de…

…velop

Version 9.1.0

CHANGELOG.md

@@ -2,6 +2,23 @@
 All notable changes to this project will be documented in this file.
 (Skipped major version 1, 2 and 3 to match versioning of IDS DataSpaceConnector)
 
+## [9.1.0] - 2022-04-01 (compatible with DSC 7.0.0)
+
+### Added
+- Data Offering: Add local data resources
+- Backend Connections: Source type "Other"
+- Added route creator (Data Offering & Consumption) with apps
+- Data Consumption: Dispatch data via routes
+- Start/Stop apps
+
+### Changes
+- Moved "Backend Connections" to the top menu level
+
+### Fixes
+- Raised comparison of variable from value to type level
+- Removed sensitive data in HTTP response
+- Also delete docker container of app on delete
+
 ## [9.0.0] - 2022-02-07 (compatible with DSC 7.0.0)
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dataspaceconnector-ui",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --open --port 8082",
@@ -13,30 +13,30 @@
     "postinstall": "cd src/backend && npm install"
   },
   "dependencies": {
-    "apexcharts": "^3.25.0",
-    "axios": "0.21.4",
+    "apexcharts": "^3.33.1",
+    "axios": "0.26.0",
     "concurrently": "^5.3.0",
-    "core-js": "^3.6.5",
+    "core-js": "^3.21.1",
     "d3": "5.15.0",
-    "material-design-icons-iconfont": "^6.1.0",
+    "material-design-icons-iconfont": "^6.1.1",
     "moment": "2.29.1",
-    "vue": "^2.6.11",
+    "vue": "^2.6.14",
     "vue-apexcharts": "1.6.0",
     "vue-router": "3.1.6",
     "vuetify": "2.3.12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "4.x",
+    "@vue/cli-plugin-babel": "4.5.15",
+    "@vue/cli-plugin-eslint": "4.5.15",
+    "@vue/cli-service": "^4.5.15",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.19.0",
+    "sass": "^1.49.7",
     "sass-loader": "^8.0.0",
-    "vue-cli-plugin-vuetify": "~2.0.7",
-    "vue-template-compiler": "^2.6.11",
-    "vuetify-loader": "^1.3.0"
+    "vue-cli-plugin-vuetify": "^2.4.5",
+    "vue-template-compiler": "^2.6.14",
+    "vuetify-loader": "^1.7.3"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -22,6 +22,10 @@ export default {
   src: local("icons"), url(./assets/fonts/icons.ttf) format("truetype");
 }
 
+.v-tab--active {
+  border-bottom: 2px solid var(--v-primary-base) !important;
+}
+
 .icon-dashboard:before {
   content: "\e900";
 }

src/backend/index.js

@@ -91,14 +91,34 @@ function del(url, data) {
     });
 }
 
-function escape(text) {
-    return encodeURIComponent(text);
+function escape(text, key) {
+    let escapedText = "";
+    if (Array.isArray(text)) {
+        for (let i = 0; i < text.length; i++) {
+            if (i > 0) {
+                escapedText += "&" + key + "=";
+            }
+            escapedText += encodeURIComponent(text[i]);
+        }
+    } else {
+        escapedText = encodeURIComponent(text);
+    }
+    return escapedText;
 }
 
 function stringifySafe(obj, replacer, spaces, cycleReplacer) {
     return JSON.stringify(obj, serializer(replacer, cycleReplacer), spaces)
 }
 
+function filterError(origError) {
+    if (origError.response !== undefined) {
+        // remove config & request data, because it contains sensitive data. 
+        origError.response.config = null;
+        origError.response.request = null;
+    }
+    return origError;
+}
+
 function serializer(replacer, cycleReplacer) {
     var stack = [], keys = []
 
@@ -120,6 +140,15 @@ function serializer(replacer, cycleReplacer) {
     }
 }
 
+app.get('/testdata', function (req, res) {
+    res.send("TEST DATA FROM BACKEND");
+});
+
+app.post('/testdata', function (req, res) {
+    console.log(">>> TEST DATA RECEIVED: ", req.body);
+    res.send("OK");
+});
+
 app.get('/', function (req, res) {
     res.sendFile(vuePath + "index.html");
 });
@@ -128,17 +157,18 @@ app.post('/', (req, res) => {
     let call = req.body.url;
     let i = 0;
     for (let key in req.body.params) {
-        if (i == 0) {
-            call += "?" + key + "=" + escape(req.body.params[key]);
+        if (i === 0) {
+            call += "?" + key + "=" + escape(req.body.params[key], key);
         } else {
-            call += "&" + key + "=" + escape(req.body.params[key]);
+            call += "&" + key + "=" + escape(req.body.params[key], key);
         }
         i++;
     }
     if (req.body.type == "POST") {
         post(connectorUrl + call, req.body.body).then(response => {
             res.send(response.data);
-        }).catch(error => {
+        }).catch(origError => {
+            let error = filterError(origError);
             if (error.response === undefined) {
                 console.log("Error on POST " + req.body.url, error);
                 res.send(stringifySafe(error));
@@ -151,7 +181,8 @@ app.post('/', (req, res) => {
     } else if (req.body.type == "PUT") {
         put(connectorUrl + call, req.body.body).then(response => {
             res.send(response.data);
-        }).catch(error => {
+        }).catch(origError => {
+            let error = filterError(origError);
             if (error.response === undefined) {
                 console.log("Error on PUT " + req.body.url, error);
                 res.send(stringifySafe(error));
@@ -166,7 +197,8 @@ app.post('/', (req, res) => {
         } else {
             get(connectorUrl + call).then(response => {
                 res.send(response.data);
-            }).catch(error => {
+            }).catch(origError => {
+                let error = filterError(origError);
                 if (error.response === undefined) {
                     console.log("Error on GET " + req.body.url, error);
                     res.send(stringifySafe(error));
@@ -179,7 +211,8 @@ app.post('/', (req, res) => {
     } else if (req.body.type == "DELETE") {
         del(connectorUrl + call, req.body.body).then(response => {
             res.send(response.data);
-        }).catch(error => {
+        }).catch(origError => {
+            let error = filterError(origError);
             if (error.response === undefined) {
                 console.log("Error on DELETE " + req.body.url, error);
                 res.send(stringifySafe(error));

src/components/infobox/InfoBox.html

@@ -63,7 +63,7 @@
             Overview of all currently defined routes of offered data.<br>
         </v-card-text>
     </v-card-text>
-    <v-card-text v-if="currentRoute  == 'addroute'">
+    <v-card-text v-if="currentRoute  == 'addrouteoffering'">
         <v-card-text>
             Creation of a route. Nodes of the types "Backend", "App" and "IDS Endpoint" can be created and connected by
             edges. For each edge, the inputs and outputs to be connected can be selected by double-clicking. The

src/datamodel/clientDataModel.js

@@ -230,7 +230,7 @@ export default {
         return configuration;
     },
 
-    createGenericEndpoint(id, accessUrl, dataSourceId, username, password, apiKey, type) {
+    createGenericEndpoint(id, accessUrl, username, password, apiKey, type, driverClassName, camelSqlUri) {
         let genericEndpoint = {};
 
         if (id === undefined) {
@@ -245,12 +245,6 @@ export default {
             genericEndpoint.accessUrl = accessUrl;
         }
 
-        if (dataSourceId === undefined) {
-            genericEndpoint.dataSourceId = "";
-        } else {
-            genericEndpoint.dataSourceId = dataSourceId;
-        }
-
         if (username === undefined) {
             genericEndpoint.username = "";
         } else {
@@ -275,18 +269,37 @@ export default {
             genericEndpoint.type = type;
         }
 
+        if (driverClassName === undefined) {
+            genericEndpoint.driverClassName = "";
+        } else {
+            genericEndpoint.driverClassName = driverClassName;
+        }
+
+        if (camelSqlUri === undefined) {
+            genericEndpoint.camelSqlUri = "";
+        } else {
+            genericEndpoint.camelSqlUri = camelSqlUri;
+        }
+
         return genericEndpoint;
     },
 
-    convertIdsGenericEndpoint(genericEndpoint) {
+    convertIdsGenericEndpoint(genericEndpoint, dataSource) {
         let id = dataUtils.getIdOfConnectorResponse(genericEndpoint);
         let accessUrl = undefined;
-        accessUrl = genericEndpoint.location;
-        let dataSourceId = dataUtils.getIdOfLink(genericEndpoint, "datasource");
+        let driverClassName = undefined;
+        let camelSqlUri = undefined;
+        if (dataSource.type == "REST" || dataSource.type == "Other") {
+            accessUrl = genericEndpoint.location;
+        } else {
+            accessUrl = dataSource.url;
+            driverClassName = dataSource.driverClassName;
+            camelSqlUri = genericEndpoint.location;
+        }
         let username = undefined;
         let password = undefined;
         let apiKey = undefined;
-        return this.createGenericEndpoint(id, accessUrl, dataSourceId, username, password, apiKey, genericEndpoint.type);
+        return this.createGenericEndpoint(id, accessUrl, username, password, apiKey, genericEndpoint.type, driverClassName, camelSqlUri);
     },
 
     createApp(id, title, description, type) {

src/pages/PageStructure.js

@@ -1,6 +1,8 @@
 import DashboardPage from "@/pages/dashboard/DashboardPage.vue";
 import IDSResourcesPage from "@/pages/dataoffering/resources/IDSResourcesPage.vue";
 import AddResourcePage from "@/pages/dataoffering/resources/addresource/AddResourcePage.vue";
+import RoutesPage from "@/pages/dataoffering/routes/RoutesPage.vue";
+import AddRoutePage from "@/pages/dataoffering/routes/addroute/AddRoutePage.vue";
 import IDSDataConsumptionPage from "@/pages/dataconsumption/dataconsumption/IDSDataConsumptionPage.vue";
 import IDSResourcesPageConsumption from "@/pages/dataconsumption/resources/IDSResourcesPageConsumption.vue";
 import BrokersPage from "@/pages/brokers/BrokersPage.vue";
@@ -41,9 +43,20 @@ export default {
                     subpages: []
                 }]
             }, {
-                path: "backendconnectionsoffering",
-                name: "Backend Connections (Offering)",
-                component: BackendConnectionsPage
+                path: "routesoffering",
+                name: "Routes (Offering)",
+                component: RoutesPage,
+                subpages: [{
+                    path: "addrouteoffering",
+                    name: "Add Route (Offering)",
+                    component: AddRoutePage,
+                    subpages: []
+                }, {
+                    path: "showrouteoffering",
+                    name: "Show Route (Offering)",
+                    component: AddRoutePage,
+                    subpages: []
+                }]
             }, {
                 path: "catalogsoffering",
                 name: "Catalogs (Offering)",
@@ -66,10 +79,26 @@ export default {
                     subpages: []
                 }]
             }, {
-                path: "backendconnectionsconsumption",
-                name: "Backend Connections (Consumation)",
-                component: null
+                path: "routesconsumption",
+                name: "Routes (Consumption)",
+                component: RoutesPage,
+                subpages: [{
+                    path: "addrouteconsumption",
+                    name: "Add Route (Consumption)",
+                    component: AddRoutePage,
+                    subpages: []
+                }, {
+                    path: "showrouteconsumption",
+                    name: "Show Route (Consumption)",
+                    component: AddRoutePage,
+                    subpages: []
+                }]
             }]
+        }, {
+            path: "backendconnections",
+            name: "Backend Connections",
+            icon: "mdi-database",
+            component: BackendConnectionsPage
         }, {
             path: "brokers",
             name: "Brokers",

src/pages/apps/AppsPage.html

@@ -8,31 +8,33 @@
     <v-row no-gutters>
         <v-col cols="12" md="11" sm="12">
             <v-data-table v-model="selected" :headers="headers" :items="apps" :items-per-page="5" :search="search"
-                item-key="id" no-data-text="No apps available">
+                item-key="id" no-data-text="No apps available" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc">
                 <template v-slot:item.actions="{ item }">
-                    <!-- <v-tooltip bottom>
+                    <v-tooltip bottom>
                         <template v-slot:activator="{ on, attrs }">
-                            <v-icon class="mr-2" @click="startApp(item)" v-bind="attrs" v-on="on">
+                            <v-icon class="mr-2" @click="startApp(item)" v-bind="attrs" v-on="on"
+                                :disabled="item.isAppRunning">
                                 mdi-play
                             </v-icon>
                         </template>
-                        <span>Install apps</span>
+                        <span>Start app</span>
                     </v-tooltip>
                     <v-tooltip bottom>
                         <template v-slot:activator="{ on, attrs }">
-                            <v-icon class="mr-2" @click="stopApp(item)" v-bind="attrs" v-on="on">
+                            <v-icon class="mr-2" @click="stopApp(item)" v-bind="attrs" v-on="on"
+                                :disabled="!item.isAppRunning">
                                 mdi-stop
                             </v-icon>
                         </template>
-                        <span>Edit app store</span>
-                    </v-tooltip> -->
+                        <span>Stop app</span>
+                    </v-tooltip>
                     <v-tooltip bottom>
                         <template v-slot:activator="{ on, attrs }">
                             <v-icon @click="deleteItem(item)" v-bind="attrs" v-on="on">
                                 mdi-delete
                             </v-icon>
                         </template>
-                        <span>Delete app store</span>
+                        <span>Delete app</span>
                     </v-tooltip>
                 </template>
             </v-data-table>