Merge branch 'main' into visualization-loading

eclipse-basyx · Dec 7, 2024 · 395446e · 395446e
2 parents 59211b5 + c04d5bd
commit 395446e
Show file tree

Hide file tree

Showing 22 changed files with 2,474 additions and 214 deletions.
diff --git a/.github/workflows/docker-prerelease-ui.yml b/.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
diff --git a/.github/workflows/docker-release-ui.yml b/.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
diff --git a/aas-web-ui/.gitignore b/aas-web-ui/.gitignore
@@ -19,4 +19,7 @@ pnpm-debug.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?
+
+# coverages
+/coverage
diff --git a/aas-web-ui/package.json b/aas-web-ui/package.json
@@ -6,10 +6,15 @@
   "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",
@@ -25,35 +30,41 @@
     "roboto-fontface": "*",
     "three": "^0.169.0",
     "uuid": "^10.0.0",
-    "vue": "^3.5.12",
-    "vue-router": "^4.4.5",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
     "vue3-apexcharts": "^1.7.0",
     "vuetify": "^3.7.4",
     "webfontloader": "^1.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@testing-library/vue": "^8.1.0",
     "@types/eslint__js": "^8.42.3",
     "@types/leaflet": "^1.9.13",
-    "@types/lodash": "^4.17.7",
+    "@types/lodash": "^4.17.13",
     "@types/md5": "^2.3.5",
     "@types/node": "^22.8.7",
     "@types/three": "^0.169.0",
     "@types/uuid": "^10.0.0",
     "@types/webfontloader": "^1.6.38",
     "@vitejs/plugin-vue": "^5.1.4",
+    "@vitest/coverage-istanbul": "2.1.8",
+    "@vitest/ui": "^2.1.8",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "^9.11.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-vue": "^9.28.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "jsdom": "^25.0.1",
     "prettier": "^3.3.3",
     "sass": "^1.79.4",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.8.1",
-    "vite": "^5.4.10",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^5.4.11",
     "vite-plugin-vuetify": "^2.0.4",
+    "vitest": "^2.1.8",
     "vue-tsc": "^2.1.4"
   }
 }
diff --git a/aas-web-ui/src/components/Dashboard/Dashboard.vue b/aas-web-ui/src/components/Dashboard/Dashboard.vue
@@ -33,13 +33,10 @@
                     <v-card-title>{{ 'Are you sure?' }}</v-card-title>
                     <v-divider></v-divider>
                     <v-card-text>
-                        <div
-                            class="text-subtitleText"
-                            v-html="
-                                'Careful! You are about to delete the whole <strong class=\'text-normalText\'>' +
-                                selectedGroup.groupName +
-                                '</strong> Dashboard.'
-                            "></div>
+                        <div class="text-subtitleText">
+                            Careful! You are about to delete the whole
+                            <strong class="text-normalText"> {{ selectedGroup.groupName }} '</strong> Dashboard.
+                        </div>
                         <div class="mt-3 mb-2">Type the Dashboard Name to proceed.</div>
                         <v-text-field
                             v-model="selectedGroupInput"

diff --git a/aas-web-ui/src/components/Plugins/Submodels/BillsOfMaterial.vue b/aas-web-ui/src/components/Plugins/Submodels/BillsOfMaterial.vue
@@ -3,8 +3,13 @@
         <!-- Header -->
         <v-card class="mb-4">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Bills of Material:' }}</div>
+                <div class="text-subtitle-1">
+                    {{ nameToDisplay(submodelElementData, 'Bills of Material') }}
+                </div>
             </v-card-title>
+            <v-card-text v-if="descriptionToDisplay(submodelElementData)" class="pt-0">
+                {{ descriptionToDisplay(submodelElementData) }}
+            </v-card-text>
         </v-card>
         <!-- BoM Graph -->
         <v-card>

diff --git a/aas-web-ui/src/components/Plugins/Submodels/ContactInformation.vue b/aas-web-ui/src/components/Plugins/Submodels/ContactInformation.vue
@@ -3,8 +3,13 @@
         <!-- Header -->
         <v-card class="mb-4">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Contact Information:' }}</div>
+                <div class="text-subtitle-1">
+                    {{ nameToDisplay(submodelElementData, 'Contact Information') }}
+                </div>
             </v-card-title>
+            <v-card-text v-if="descriptionToDisplay(submodelElementData)" class="pt-0">
+                {{ descriptionToDisplay(submodelElementData) }}
+            </v-card-text>
         </v-card>
         <!-- Documents -->
         <v-card v-if="loading">

diff --git a/aas-web-ui/src/components/Plugins/Submodels/DigitalNameplate.vue b/aas-web-ui/src/components/Plugins/Submodels/DigitalNameplate.vue
@@ -3,8 +3,13 @@
         <!-- Header -->
         <v-card class="mb-4">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Digital Nameplate:' }}</div>
+                <div class="text-subtitle-1">
+                    {{ nameToDisplay(submodelElementData, 'Digital Nameplate') }}
+                </div>
             </v-card-title>
+            <v-card-text v-if="descriptionToDisplay(submodelElementData)" class="pt-0">
+                {{ descriptionToDisplay(submodelElementData) }}
+            </v-card-text>
         </v-card>
         <!-- Product -->
         <v-card v-if="loading" class="mb-4">

diff --git a/aas-web-ui/src/components/Plugins/Submodels/HandoverDocumentation.vue b/aas-web-ui/src/components/Plugins/Submodels/HandoverDocumentation.vue
@@ -3,8 +3,13 @@
         <!-- Header -->
         <v-card class="mb-4">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Handover Documentation:' }}</div>
+                <div class="text-subtitle-1">
+                    {{ nameToDisplay(submodelElementData, 'Handover Documentation') }}
+                </div>
             </v-card-title>
+            <v-card-text v-if="descriptionToDisplay(submodelElementData)" class="pt-0">
+                {{ descriptionToDisplay(submodelElementData) }}
+            </v-card-text>
         </v-card>
         <!-- Documents -->
         <v-card v-if="loading">
@@ -17,7 +22,7 @@
                         <template #prepend>
                             <v-icon size="small">mdi-file-outline</v-icon>
                         </template>
-                        <v-list-item-title>{{ document.idShort }}</v-list-item-title>
+                        <v-list-item-title>{{ nameToDisplay(document) }}</v-list-item-title>
                     </v-list-item>
                 </v-expansion-panel-title>
                 <v-divider v-if="panel === index"></v-divider>
@@ -228,7 +233,7 @@
                                     <th v-for="idProperty in document.documentIds[0].value" :key="idProperty.idShort">
                                         <v-list-item class="pl-0">
                                             <v-list-item-title class="text-caption">{{
-                                                idProperty.idShort
+                                                nameToDisplay(idProperty)
                                             }}</v-list-item-title>
                                         </v-list-item>
                                     </th>

diff --git a/aas-web-ui/src/components/Plugins/Submodels/TechnicalData.vue b/aas-web-ui/src/components/Plugins/Submodels/TechnicalData.vue
@@ -3,8 +3,13 @@
         <!-- Header -->
         <v-card class="mb-4">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Technical Data:' }}</div>
+                <div class="text-subtitle-1">
+                    {{ nameToDisplay(submodelElementData, 'Technical Data') }}
+                </div>
             </v-card-title>
+            <v-card-text v-if="descriptionToDisplay(submodelElementData)" class="pt-0">
+                {{ descriptionToDisplay(submodelElementData) }}
+            </v-card-text>
         </v-card>
         <!-- Technical Data Collections -->
         <v-card v-if="loading">

diff --git a/aas-web-ui/src/components/Plugins/Submodels/TimeSeriesData.vue b/aas-web-ui/src/components/Plugins/Submodels/TimeSeriesData.vue
@@ -3,8 +3,13 @@
         <!-- Header -->
         <v-card v-if="!hideSettings" class="mb-4">
             <v-card-title>
-                <div class="text-subtitle-1">{{ 'Time Series Data:' }}</div>
+                <div class="text-subtitle-1">
+                    {{ nameToDisplay(submodelElementData, 'Time Series Data') }}
+                </div>
             </v-card-title>
+            <v-card-text v-if="descriptionToDisplay(submodelElementData)" class="pt-0">
+                {{ descriptionToDisplay(submodelElementData) }}
+            </v-card-text>
         </v-card>
         <!-- Data Preview Config -->
         <v-card v-if="!hideSettings || editDialog" class="mb-4">

diff --git a/aas-web-ui/src/components/SubmodelElementView.vue b/aas-web-ui/src/components/SubmodelElementView.vue
@@ -49,7 +49,7 @@
                             :semantic-title="'SemanticID'"></SemanticID>
                     </v-list>
                     <v-divider></v-divider>
-                    <v-list nav class="px-4 pt-0 pb-0">
+                    <v-list nav class="px-4 pt-0 pb-5">
                         <!-- SubmodelELement Representation for different modelTypes -->
                         <Submodel
                             v-if="submodelElementData.modelType === 'Submodel'"
@@ -100,8 +100,7 @@
                         v-if="
                             submodelElementData.conceptDescriptions &&
                             submodelElementData.conceptDescriptions.length > 0
-                        "
-                        class="mt-5"></v-divider>
+                        "></v-divider>
                     <v-list
                         v-if="
                             submodelElementData.conceptDescriptions &&
@@ -118,7 +117,7 @@
                         </v-list-item>
                     </v-list>
                     <!-- Last Sync -->
-                    <v-divider class="mt-5"></v-divider>
+                    <v-divider></v-divider>
                     <v-list class="py-0">
                         <v-list-item>
                             <v-list-item-subtitle>

diff --git a/aas-web-ui/src/components/SubmodelElements/Entity.vue b/aas-web-ui/src/components/SubmodelElements/Entity.vue
@@ -13,7 +13,7 @@
         <!-- globalAssetId -->
         <v-list-item v-if="entityObject.globalAssetId" class="px-1 pb-1 py-2 mb-3">
             <template #title>
-                <div class="text-subtitle-2 mt-2" v-html="'Global Asset ID: '"></div>
+                <div class="text-subtitle-2 mt-2">{{ 'Global Asset ID: ' }}</div>
             </template>
             <template #subtitle>
                 <div class="pt-2">
@@ -26,7 +26,7 @@
                         @click="jump(entityObject.globalAssetId)"
                         >Jump</v-btn
                     >
-                    <span v-html="entityObject.globalAssetId"></span>
+                    <span>{{ entityObject.globalAssetId }}</span>
                 </div>
             </template>
         </v-list-item>
@@ -36,7 +36,7 @@
             v-if="entityObject.specificAssetIds && entityObject.specificAssetIds.length > 0"
             class="px-1 pb-1 py-2 mb-3">
             <template #title>
-                <div class="text-subtitle-2 mt-2" v-html="'Specific Asset IDs: '"></div>
+                <div class="text-subtitle-2 mt-2">{{ 'Specific Asset IDs: ' }}</div>
             </template>
             <template #subtitle>
                 <div v-for="specificAssetId in entityObject.specificAssetIds" :key="specificAssetId.name" class="pt-2">
@@ -52,7 +52,7 @@
                     <v-chip label size="x-small" border color="primary" class="mr-2" style="margin-top: -3px">{{
                         specificAssetId.name
                     }}</v-chip>
-                    <span v-html="specificAssetId.value"></span>
+                    <span>{{ specificAssetId.value }}</span>
                 </div>
             </template>
         </v-list-item>

diff --git a/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue b/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
@@ -21,15 +21,15 @@
                         </v-tooltip>
                         <!-- Reference Title -->
                         <template #title>
-                            <div
-                                class="text-subtitle-2 mt-2"
-                                v-html="IsOperationVariable ? 'Reference:' : 'Description:'"></div>
+                            <div class="text-subtitle-2 mt-2">
+                                {{ IsOperationVariable ? 'Reference:' : 'Description:' }}
+                            </div>
                         </template>
                         <!-- Reference Representation -->
                         <template #subtitle>
                             <div v-if="!IsOperationVariable || IsOutputVariable" class="pt-2">
                                 <v-chip label size="x-small" border class="mr-2">{{ value.type }}</v-chip>
-                                <span v-html="value.value"></span>
+                                <span> {{ value.value }}</span>
                             </div>
                             <!-- Input Field containing the Variable Value -->
                             <v-text-field