Merge branch 'main' into supplemental-semantic-id

.github/workflows/docker-prerelease-ui.yml

@@ -0,0 +1,49 @@
+name: Build and Push Docker Images on PR Merge
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'aas-web-ui/**'
+
+jobs:
+  build-and-push-prerelease:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1: Checkout the repository
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      # Step 2: Set up Docker Buildx
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # Step 3: Log in to Docker Hub
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USER }}
+          password: ${{ secrets.DOCKER_HUB_TOKEN }}
+
+      # Step 4: Build and Push Docker Image with Fixed Pre-release Tag
+      - name: Build and Push Docker Image (Pre-release)
+        uses: docker/build-push-action@v6
+        with:
+          context: ./aas-web-ui
+          file: ./aas-web-ui/Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          tags: |
+            eclipsebasyx/aas-gui:SNAPSHOT
+
+      # Step 5: Verify the Push
+      - name: Verify Docker Image
+        run: |
+          docker pull eclipsebasyx/aas-gui:SNAPSHOT

.github/workflows/docker-release-ui.yml

@@ -0,0 +1,56 @@
+name: Build and Push Docker Images on Release
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build-and-push-release:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1: Checkout the repository
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      # Step 2: Set up Docker Buildx
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # Step 3: Log in to Docker Hub
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USER }}
+          password: ${{ secrets.DOCKER_HUB_TOKEN }}
+
+      # Step 4: Extract Release Tag as Date
+      - name: Extract Release Tag
+        id: extract_tag
+        run: |
+          # Assuming the release tag is in yymmdd format
+          TAG_NAME=${GITHUB_REF#refs/tags/}
+          echo "TAG_NAME=${TAG_NAME}" >> $GITHUB_ENV
+
+      # Step 5: Build and Push Docker Images
+      - name: Build and Push Docker Images
+        uses: docker/build-push-action@v6
+        with:
+          context: ./aas-web-ui
+          file: ./aas-web-ui/Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          tags: |
+            eclipsebasyx/aas-gui:${{ env.TAG_NAME }}
+            eclipsebasyx/aas-gui:latest
+
+      # Step 6: Verify the Push
+      - name: Verify Docker Images
+        run: |
+          docker pull eclipsebasyx/aas-gui:${{ env.TAG_NAME }}
+          docker pull eclipsebasyx/aas-gui:latest

README.md

@@ -54,9 +54,9 @@ See examples in the [basyx-java-server-sdk](https://github.com/eclipse-basyx/bas
 
 The BaSyx-UI includes a Feature to develop your own Plugins. They can be used to display and interact with a Submodel (and/or SubmodelElements).
 
-Plugins will be displayed in the `Visualization`-Part of the UI. In order for Plugins to be shown, a Submodel(Element) has to have a SemanticID which matches with the configured SemanticID of the desired Plugin.
+Plugins will be displayed in the `Visualization`-Part of the UI. In order for Plugins to be loaded, a Submodel(Element) has to have a SemanticID which matches with the configured `semanticId` of the desired Plugin. The configuration of a Plugin `semanticId` can be done via a string (e.g. `'http://hello.world.de/plugin_submodel'`) or via an array for multiple SemanticIds (e.g. `['http://hello.world.de/plugin_submodel', 'http://hello.world.de/plugin_property']`)
 
-To include your own Plugin, you have to create a Vue.js Component and add it to the `UserPlugins`-Folder in the `aas-web-ui/src`-Directory. The Plugin will then be automatically loaded and displayed in the UI. 
+To include your own Plugins, you have to create a Vue.js Component and add it to the `UserPlugins`-Folder in the `aas-web-ui/src`-Directory. The Plugin will then be automatically loaded and displayed in the UI. 
 
 > If you plan on including your own plugins, keep in mind that you have to build the Docker Image yourself!
 

aas-web-ui/.gitignore

@@ -21,3 +21,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# coverages
+/coverage

aas-web-ui/package.json

@@ -6,54 +6,65 @@
   "license": "MIT",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "prebuild": "vitest run && vue-tsc --noEmit",
+    "build": "vite build",
     "preview": "vite preview",
     "lint:check": "eslint ./",
-    "lint:fix": "eslint --fix ./"
+    "lint:fix": "eslint --fix ./",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
-    "@fontsource/roboto": "^5.0.14",
+    "@fontsource/roboto": "^5.1.0",
     "@mdi/font": "^7.4.47",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
-    "apexcharts": "^4.0.0",
+    "apexcharts": "^4.1.0",
     "keycloak-js": "^25.0.4",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
-    "mermaid": "^11.4.0",
-    "pinia": "^2.2.6",
+    "mermaid": "^11.4.1",
+    "pinia": "^2.3.0",
     "roboto-fontface": "*",
-    "three": "^0.169.0",
-    "uuid": "^10.0.0",
-    "vue": "^3.5.12",
-    "vue-router": "^4.4.5",
-    "vue3-apexcharts": "^1.7.0",
-    "vuetify": "^3.7.4",
+    "three": "^0.171.0",
+    "uuid": "^11.0.3",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue3-apexcharts": "^1.8.0",
+    "vuetify": "^3.7.5",
     "webfontloader": "^1.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.13.0",
+    "@eslint/js": "^9.16.0",
+    "@testing-library/vue": "^8.1.0",
     "@types/eslint__js": "^8.42.3",
-    "@types/leaflet": "^1.9.13",
-    "@types/lodash": "^4.17.7",
+    "@types/leaflet": "^1.9.15",
+    "@types/lodash": "^4.17.13",
     "@types/md5": "^2.3.5",
-    "@types/node": "^22.8.7",
-    "@types/three": "^0.169.0",
+    "@types/node": "^22.10.1",
+    "@types/three": "^0.170.0",
     "@types/uuid": "^10.0.0",
     "@types/webfontloader": "^1.6.38",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "eslint": "^9.11.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-istanbul": "2.1.8",
+    "@vitest/ui": "^2.1.8",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-vue": "^9.28.0",
-    "prettier": "^3.3.3",
-    "sass": "^1.79.4",
+    "eslint-plugin-vue": "^9.32.0",
+    "jsdom": "^25.0.1",
+    "prettier": "^3.4.2",
+    "sass": "^1.82.0",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.8.1",
-    "vite": "^5.4.10",
+    "typescript-eslint": "^8.18.0",
+    "vite": "^5.4.11",
     "vite-plugin-vuetify": "^2.0.4",
-    "vue-tsc": "^2.1.4"
+    "vitest": "^2.1.8",
+    "vue-tsc": "^2.1.10"
   }
 }

aas-web-ui/src/UserPlugins/HelloWorldPlugin.vue

@@ -65,11 +65,11 @@
         methods: {
             // Function to initialize the HelloWorld-Plugin
             initializePlugin() {
-                // Check if a Node is selected
                 if (Object.keys(this.submodelElementData).length == 0) {
                     this.pluginData = {}; // Reset the Plugin Data when no Node is selected
                     return;
                 }
+
                 let pluginData = { ...this.submodelElementData }; // Get the SubmodelElement from the AAS
                 let pluginSubmodelElements = pluginData.submodelElements;
                 // add pathes and id's to the SubmodelElements