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

…velop

Version 9.2.0

CHANGELOG.md

@@ -2,6 +2,18 @@
 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.2.0] - XXXX-XX-XX (compatible with DSC 7.0.0)
+
+### Added
+- Delete associated routes of apps on stop/delete
+- Subscriptions page
+- Data Consumption: Checkbox for subscription
+- Data Consumption: Delete requested resource
+- Data Consumption: Table column "subscribed"
+
+### Fixes
+- Route validation: Offering/Consumption routes need to end/start with artifact
+
 ## [9.1.0] - 2022-04-01 (compatible with DSC 7.0.0)
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dataspaceconnector-ui",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --open --port 8082",

src/components/confirmationdialog/ConfirmationDialog.html

@@ -8,6 +8,9 @@
             <div>
                 {{text}}
             </div>
+            <div v-if="text2 != null">
+                {{text2}}
+            </div>
         </v-card-text>
 
         <v-divider></v-divider>
@@ -22,4 +25,4 @@
             </v-btn>
         </v-card-actions>
     </v-card>
-</v-dialog>
+</v-dialog>

src/components/confirmationdialog/ConfirmationDialog.js

@@ -5,11 +5,12 @@ export default {
             dialog: false,
             title: "",
             text: "",
+            text2: null,
             callback: null,
             callbackData: null
         };
     },
-    mounted: function () {},
+    mounted: function () { },
     methods: {
         yesClicked() {
             this.dialog = false;

src/components/infobox/InfoBox.html

@@ -63,11 +63,35 @@
             Overview of all currently defined routes of offered data.<br>
         </v-card-text>
     </v-card-text>
+    <v-card-text v-if="currentRoute  == 'routesconsumption'">
+        <v-card-text>
+            Overview of all currently defined routes of requested data.<br>
+        </v-card-text>
+    </v-card-text>
     <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
-            resource data can be entered by double-clicking on the "IDS Endpoint" node.<br>
+            Creation of a route. Nodes of the types "Backend", "App" and "Artifact" can be created and connected by
+            edges.
+            <br>
+            <br>
+            For each edge, the inputs and outputs to be connected can be selected by double-clicking.
+            <br>
+            <br>
+            The resource data can be entered by double-clicking on the "Artifact" node.<br>
+        </v-card-text>
+    </v-card-text>
+    <v-card-text v-if="currentRoute  == 'addrouteconsumption'">
+        <v-card-text>
+            Creation of a route. Nodes of the types "Backend", "App" and "Artifact" can be created and connected by
+            edges.
+            <br>
+            <br>
+            For each edge, the inputs and outputs to be connected can be selected by double-clicking.
+            <br>
+            <br>
+            The "Artifact" node here is only a placeholder for the artifact of the requested resource.
+            <br><br>
+            This route must be linked to the requested artifact at the "Request Resource" page.
         </v-card-text>
     </v-card-text>
     <v-card-text v-if="currentRoute  == 'showroute'">
@@ -102,4 +126,16 @@
             connectors, which can be requested.
         </v-card-text>
     </v-card-text>
+    <v-card-text v-if="currentRoute  == 'apps'">
+        <v-card-text>
+            Overview of all currently installed apps.
+            <br>
+            <br>
+            Here, the associated Docker containers of the apps can be started or stopped.
+            <br>
+            <br>
+            Apps (and their containers) can also be deleted.<br>
+            Running apps cannot be deleted and must be stopped first.
+        </v-card-text>
+    </v-card-text>
 </v-card>

src/pages/PageStructure.js

@@ -10,7 +10,8 @@ import AppsPage from "@/pages/apps/AppsPage.vue";
 import AppStoresPage from "@/pages/appstores/AppStoresPage.vue";
 import InstallAppsPage from "@/pages/appstores/installapps/InstallAppsPage.vue";
 import SettingsPage from "@/pages/settings/SettingsPage.vue";
-import BackendConnectionsPage from "@/pages/dataoffering/backendconnections/BackendConnectionsPage.vue";
+import BackendConnectionsPage from "@/pages/backendconnections/BackendConnectionsPage.vue";
+import SubscriptionsPage from "@/pages/subscriptions/SubscriptionsPage.vue";
 import ResourceCatalogsPage from "@/pages/dataoffering/resources/addresource/catalog/ResourceCatalogsPage.vue";
 
 export default {
@@ -99,6 +100,11 @@ export default {
             name: "Backend Connections",
             icon: "mdi-database",
             component: BackendConnectionsPage
+        }, {
+            path: "subscriptions",
+            name: "Subscriptions",
+            icon: "mdi-rss",
+            component: SubscriptionsPage
         }, {
             path: "brokers",
             name: "Brokers",

src/pages/apps/AppsPage.html

@@ -30,7 +30,7 @@
                     </v-tooltip>
                     <v-tooltip bottom>
                         <template v-slot:activator="{ on, attrs }">
-                            <v-icon @click="deleteItem(item)" v-bind="attrs" v-on="on">
+                            <v-icon @click="deleteItem(item)" v-bind="attrs" v-on="on" :disabled="item.isAppRunning">
                                 mdi-delete
                             </v-icon>
                         </template>

src/pages/apps/AppsPage.js

@@ -95,23 +95,46 @@ export default {
         },
         async stopApp(item) {
             this.$root.$emit('showBusyIndicator', true);
-            await dataUtils.stopApp(item.id);
+            let inUse = await dataUtils.stopApp(item.id);
             this.$root.$emit('showBusyIndicator', false);
-            this.getApps();
+            if (inUse) {
+                this.$refs.confirmationDialog.title = "Stop App";
+                this.$refs.confirmationDialog.text = "App is used in route(s). Associated routes need to be deleted.";
+                this.$refs.confirmationDialog.text2 = "Delete all associated routes and stop app?";
+                this.$refs.confirmationDialog.callbackData = {
+                    item: item
+                };
+                this.$refs.confirmationDialog.callback = this.stopCallback;
+                this.$refs.confirmationDialog.dialog = true;
+            } else {
+                this.getApps();
+            }
+
+        },
+        async stopCallback(choice, callbackData) {
+            if (choice == "yes") {
+                this.$root.$emit('showBusyIndicator', true);
+                await dataUtils.deleteAllRoutesOfApp(callbackData.item.id);
+                await dataUtils.stopApp(callbackData.item.id);
+                this.$root.$emit('showBusyIndicator', false);
+                this.getApps();
+            }
         },
         deleteItem(item) {
             this.$refs.confirmationDialog.title = "Delete App";
             this.$refs.confirmationDialog.text = "Are you sure you want to delete the App?";
+            this.$refs.confirmationDialog.text2 = "Associated routes will be deleted.";
             this.$refs.confirmationDialog.callbackData = {
                 item: item
             };
             this.$refs.confirmationDialog.callback = this.deleteCallback;
             this.$refs.confirmationDialog.dialog = true;
         },
-        deleteCallback(choice, callbackData) {
+        async deleteCallback(choice, callbackData) {
             if (choice == "yes") {
                 this.$root.$emit('showBusyIndicator', true);
-                this.deleteApp(callbackData.item.id);
+                await dataUtils.deleteAllRoutesOfApp(callbackData.item.id);
+                await this.deleteApp(callbackData.item.id);
             }
         },
         async deleteApp(appId) {

src/pages/dataoffering/backendconnections/BackendConnectionsPage.js → src/pages/backendconnections/BackendConnectionsPage.js

@@ -1,4 +1,4 @@
-import AddBackendConnectionDialog from "@/pages/dataoffering/backendconnections/dialog/AddBackendConnectionDialog.vue";
+import AddBackendConnectionDialog from "@/pages/backendconnections/dialog/AddBackendConnectionDialog.vue";
 import ConfirmationDialog from "@/components/confirmationdialog/ConfirmationDialog.vue";
 import dataUtils from "@/utils/dataUtils";
 import errorUtils from "@/utils/errorUtils";

src/pages/dataoffering/backendconnections/dialog/AddBackendConnectionDialog.js → src/pages/backendconnections/dialog/AddBackendConnectionDialog.js

@@ -1,5 +1,5 @@
 import dataUtils from "@/utils/dataUtils";
-import validationUtils from "../../../../utils/validationUtils";
+import validationUtils from "@/utils/validationUtils";
 
 export default {
     components: {},

src/pages/dataconsumption/dataconsumption/IDSDataConsumptionPage.js

@@ -252,9 +252,9 @@ export default {
             }
         },
 
-        async subscribeToResource() {
+        async subscribeToResource(subscriptionLocation) {
             try {
-                this.$data.subscribeToResourceResponse = await dataUtils.subscribeToResource(this.$data.recipientId, this.$data.selectedResource["@id"]);
+                this.$data.subscribeToResourceResponse = await dataUtils.subscribeToResource(this.$data.recipientId, this.$data.selectedResource["@id"], subscriptionLocation);
             } catch (error) {
                 errorUtils.showError(error, "subscribe to Resource");
             }
@@ -305,14 +305,28 @@ export default {
             this.$data.selectedArtifacts = representation["ids:instance"];
         },
 
-        requestArtifact(item) {
-            this.$refs.artifactDialog.show(this.$data.selectedResource["ids:contractOffer"][0]["ids:permission"], this.$data.selectedResource["ids:standardLicense"]["@id"], item, this.clickAcceptContract);
+        async requestArtifact(item) {
+            let configuration = await dataUtils.getConnectorConfiguration();
+            let subscriptionLocations = [];
+            subscriptionLocations.push({
+                display: configuration.endpoint,
+                value: configuration.endpoint
+            });
+            for (let route of this.$data.routes) {
+                subscriptionLocations.push({
+                    display: route.description,
+                    value: route.selfLink
+                });
+            }
+            this.$refs.artifactDialog.show(this.$data.selectedResource["ids:contractOffer"][0]["ids:permission"], this.$data.selectedResource["ids:standardLicense"]["@id"], item, subscriptionLocations, this.clickAcceptContract);
         },
 
-        clickAcceptContract(artifact) {
+        clickAcceptContract(artifact, subscribe, subscriptionLocation) {
             this.$data.selectedIdsArtifact = artifact;
             this.requestContract();
-            this.subscribeToResource();
+            if (subscribe) {
+                this.subscribeToResource(subscriptionLocation);
+            }
         },
         async dispatchViaRoutes() {
             this.$root.$emit('showBusyIndicator', true);

src/pages/dataconsumption/dataconsumption/artifactdialog/ArtifactDialog.css

@@ -6,4 +6,8 @@
 #btn-decline {
     color: red;
     align-self: center;
+}
+
+.artifact-dialog-location.v-input--is-disabled {
+    visibility: hidden;
 }

src/pages/dataconsumption/dataconsumption/artifactdialog/ArtifactDialog.html

@@ -11,6 +11,17 @@ <h4 class="data-consumption-page-dialog-title">Rules:</h4>
             </policy-line>
             <h4 class="data-consumption-page-dialog-title">License:</h4>
             {{ license }}
+            <v-checkbox v-model="subscribe" label="Subscribe"></v-checkbox>
+            <v-row no-gutters>
+                <v-col cols="12" md="1">
+                </v-col>
+                <v-col cols="12" md="11">
+                    <v-select class="artifact-dialog-location" v-model="subscriptionLocation"
+                        :items="subscriptionLocations" label="Subscription location" :disabled="!subscribe"
+                        item-text="display" item-value="value">
+                    </v-select>
+                </v-col>
+            </v-row>
         </v-card-text>
 
         <v-divider></v-divider>

src/pages/dataconsumption/dataconsumption/artifactdialog/ArtifactDialog.js

@@ -10,21 +10,29 @@ export default {
             rules: [],
             license: "",
             artifact: null,
-            callback: null
+            callback: null,
+            subscribe: false,
+            subscriptionLocations: [],
+            subscriptionLocation: null
         };
     },
     mounted: function () { },
     methods: {
-        show(rules, license, artifact, callback) {
+        show(rules, license, artifact, subscriptionLocations, callback) {
             this.$data.rules = rules;
             this.$data.license = license;
             this.$data.artifact = artifact;
+            this.$data.subscribe = false;
+            this.$data.subscriptionLocations = subscriptionLocations;
+            if (subscriptionLocations !== undefined && subscriptionLocations != null && subscriptionLocations.length > 0) {
+                this.$data.subscriptionLocation = subscriptionLocations[0].value;
+            }
             this.$data.callback = callback;
             this.$data.dialog = true;
         },
         clickAcceptContract() {
             this.$data.dialog = false;
-            this.$data.callback(this.$data.artifact);
+            this.$data.callback(this.$data.artifact, this.$data.subscribe, this.$data.subscriptionLocation);
         }
     }
 };

src/pages/dataconsumption/resources/IDSResourcesPageConsumption.html

@@ -13,9 +13,22 @@
         <v-data-table :headers="headers" :items="filteredResources" :items-per-page="5" :search="search"
           no-data-text="No resources available">
           <template v-slot:item.actions="{ item }">
-            <v-icon class="mr-2" @click="showItem(item)">
-              mdi-eye
-            </v-icon>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on, attrs }">
+                <v-icon class="mr-2" @click="showItem(item)" v-bind="attrs" v-on="on">
+                  mdi-eye
+                </v-icon>
+              </template>
+              <span>Show details</span>
+            </v-tooltip>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on, attrs }">
+                <v-icon class="mr-2" @click="deleteItem(item)" v-bind="attrs" v-on="on">
+                  mdi-delete
+                </v-icon>
+              </template>
+              <span>Delete requested resource</span>
+            </v-tooltip>
           </template>
         </v-data-table>
       </v-col>