Merge branch 'main' into seicke/issue94

README.md

@@ -166,9 +166,13 @@ docker run -p 3000:3000 eclipsebasyx/aas-ui
 
 `-e CD_REPO_PATH: <concept_description_repo_path>`
 
-`-e PRIMARY_COLOR=<primary_color>`
+`-e PRIMARY_LIGHT_COLOR=<primary_light_color>`
 
-`-e LOGO_PATH=<logo_path>`
+`-e PRIMARY_DARK_COLOR=<primary_dark_color>`
+
+`-e LOGO_LIGHT_PATH=<logo_light_path>`
+
+`-e LOGO_DARK_PATH=<logo_dark_path>`
 
 `-e BASE_PATH=<base_path>`
 
@@ -202,7 +206,11 @@ aas-web-gui:
         SUBMODEL_REPO_PATH: "submodel_repo_path"
         CD_REPO_PATH: "concept_description_repo_path"
         PRIMARY_COLOR: "<primary_color>"
+        PRIMARY_LIGHT_COLOR: "<primary_light_color>"
+        PRIMARY_DARK_COLOR: "<primary_dark_color>"
         LOGO_PATH: "<logo_path>"
+        LOGO_LIGHT_PATH: "<logo_light_path>"
+        LOGO_DARK_PATH: "<logo_dark_path>"
         BASE_PATH: "<base_path>"
         ENDPOINT_CONFIG_AVAILABLE: "<true/false>"
     volumes:

aas-web-ui/Dockerfile

@@ -1,5 +1,7 @@
 # Build Stage
 FROM node:lts-slim AS build-stage
+ARG HTTP_PROXY
+ARG HTTPS_PROXY
 # Set working directory
 WORKDIR /app
 # Copy the package.json and yarn.lock files
@@ -13,6 +15,8 @@ RUN yarn build && rm -rf node_modules
 
 # Production Stage
 FROM nginx:mainline-alpine3.20-slim AS production-stage
+ARG HTTP_PROXY
+ARG HTTPS_PROXY
 # Set working directory
 WORKDIR /usr/src/app
 # Install jq

aas-web-ui/entrypoint.sh

@@ -1,8 +1,19 @@
 #!/bin/sh
 
 # Check if environment variables are set and update config.json accordingly
+
+# For backward compatibility
 if [ -n "$LOGO_PATH" ]; then
-    jq '.logoPath = env.LOGO_PATH' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
+    jq '.logoLightPath = env.LOGO_PATH' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
+    jq '.logoDarkPath = env.LOGO_PATH' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
+fi
+
+if [ -n "$LOGO_LIGHT_PATH" ]; then
+    jq '.logoLightPath = env.LOGO_PATH' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
+fi
+
+if [ -n "$LOGO_DARK_PATH" ]; then
+    jq '.logoDarkPath = env.LOGO_DARK_PATH' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
 fi
 
 if [ -n "$AAS_DISCOVERY_PATH" ]; then
@@ -33,8 +44,18 @@ if [ -n "$DASHBOARD_SERVICE_PATH" ]; then
     jq '.dashboardServicePath = env.DASHBOARD_SERVICE_PATH' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
 fi
 
+# For backward compatibility
 if [ -n "$PRIMARY_COLOR" ]; then
-    jq '.primaryColor = env.PRIMARY_COLOR' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
+    jq '.primaryLightColor = env.PRIMARY_COLOR' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
+    jq '.primaryDarkColor = env.PRIMARY_COLOR' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
+fi
+
+if [ -n "$PRIMARY_LIGHT_COLOR" ]; then
+    jq '.primaryLightColor = env.PRIMARY_LIGHT_COLOR' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
+fi
+
+if [ -n "$PRIMARY_DARK_COLOR" ]; then
+    jq '.primaryDarkColor = env.PRIMARY_DARK_COLOR' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
 fi
 
 if [ -n "$INFLUXDB_TOKEN" ]; then

aas-web-ui/package.json

@@ -20,7 +20,7 @@
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
-    "mermaid": "^11.2.0",
+    "mermaid": "^11.4.0",
     "pinia": "^2.2.6",
     "roboto-fontface": "*",
     "three": "^0.169.0",

aas-web-ui/public/config.json

@@ -1,5 +1,6 @@
 {
-  "logoPath": "Logo/Logo.svg",
+  "logoLightPath": "Logo/Logo_light.svg",
+  "logoDarkPath": "Logo/Logo_dark.svg",
   "basePath": "",
   "aasDiscoveryPath": "",
   "aasRegistryPath": "",
@@ -8,10 +9,11 @@
   "submodelRepoPath": "",
   "cdRepoPath": "",
   "dashboardServicePath": "",
-  "primaryColor": "#0cb2f0",
+  "primaryLightColor": "#0cb2f0",
+  "primaryDarkColor": "#F69222",
   "influxdbToken": "",
   "keycloakUrl": "",
   "keycloakRealm": "",
-  "keycloakClientId": "",
+  "keycloakClientId": ""
   "endpointConfigAvailable": true
 }

aas-web-ui/src/components/AASTreeview.vue

@@ -3,7 +3,16 @@
         <v-card color="rgba(0,0,0,0)" elevation="0">
             <v-card-title style="padding: 15px 16px 16px">
                 <!-- TODO: Add Searchfield to filter the Treeview -->
-                AAS Treeview
+                <v-row align="center">
+                    <v-col cols="auto">
+                        <span>AAS Treeview</span>
+                    </v-col>
+                    <v-col v-if="nameToDisplay(SelectedAAS)" cols="auto" class="pl-1 pt-2">
+                        <v-chip size="x-small" color="primary" label border>{{
+                            'AAS: ' + nameToDisplay(SelectedAAS)
+                        }}</v-chip>
+                    </v-col>
+                </v-row>
             </v-card-title>
             <v-divider></v-divider>
             <v-card-text style="overflow-y: auto; height: calc(100vh - 170px)">
@@ -160,16 +169,19 @@
                 this.submodelData = []; // reset Treeview Data
                 // retrieve AAS from endpoint
                 const shellHref = this.extractEndpointHref(this.selectedAAS, 'AAS-3.0');
-                let path = shellHref + '/submodel-refs';
-                let context = 'retrieving Submodel References';
+                let path = shellHref;
+                let context = 'retrieving AAS Data';
                 let disableMessage = false;
                 this.getRequest(path, context, disableMessage)
                     .then(async (response: any) => {
                         if (response.success) {
                             // execute if the Request was successful
                             try {
+                                let AAS = response.data;
+                                AAS.endpoints = this.SelectedAAS.endpoints;
+                                this.aasStore.dispatchSelectedAAS(AAS); // dispatch the selected AAS to the Store
                                 // request submodels from the retrieved AAS (top layer of the Treeview)
-                                let submodelData = await this.requestSubmodels(response.data.result);
+                                let submodelData = await this.requestSubmodels(AAS.submodels);
                                 // set the isActive prop of the initialNode if it exists and the initialUpdate flag is set
                                 if (this.initialUpdate && this.initialNode) {
                                     let expandedSubmodelData = this.expandTree(submodelData, this.initialNode); // Update the Treeview to expand until the initially set node is reached

aas-web-ui/src/components/About.vue

@@ -70,11 +70,7 @@
                 <v-list-item>
                     <template #prepend>
                         <v-avatar>
-                            <v-img :src="contributor.image">
-                                <template #sources>
-                                    <source :srcset="'src/assets/Contributors/' + contributor.image" />
-                                </template>
-                            </v-img>
+                            <v-img :src="getImageUrl(contributor.image)"></v-img>
                         </v-avatar>
                     </template>
                     <template #append>
@@ -185,5 +181,11 @@
                 ] as Array<any>,
             };
         },
+
+        methods: {
+            getImageUrl(imageName: string) {
+                return new URL(`../assets/Contributors/${imageName}`, import.meta.url).href;
+            },
+        },
     });
 </script>

aas-web-ui/src/components/AppNavigation/AASList.vue

@@ -43,8 +43,9 @@
             <!-- AAS List -->
             <v-list nav class="bg-card card pa-0">
                 <v-virtual-scroll
+                    ref="virtualScroll"
                     :items="AASData"
-                    item-height="48"
+                    :item-height="56"
                     :height="isMobile ? 'calc(100svh - 170px)' : 'calc(100vh - 218px)'"
                     class="pb-2 bg-card">
                     <template #default="{ item }">
@@ -220,6 +221,11 @@
                 return this.navigationStore.getIsMobile;
             },
 
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
+
             // get Drawer State from store
             drawerState() {
                 // Computed Property to control the state of the Navigation Drawer (true -> collapsed, false -> extended)
@@ -241,19 +247,18 @@
                 return this.aasStore.getSelectedAAS;
             },
 
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
-
             // gets loading State from Store
             loading() {
                 return this.aasStore.getLoadingState;
             },
 
             // returns the primary color of the current theme
             primaryColor() {
-                return this.$vuetify.theme.themes.light.colors.primary;
+                if (this.isDark) {
+                    return this.$vuetify.theme.themes.dark.colors.primary;
+                } else {
+                    return this.$vuetify.theme.themes.light.colors.primary;
+                }
             },
 
             // get the status-check state from the store
@@ -266,6 +271,11 @@
                 return this.navigationStore.getTriggerAASListReload;
             },
 
+            // get trigger signal for AAS List scroll from store
+            triggerAASListScroll() {
+                return this.navigationStore.getTriggerAASListScroll;
+            },
+
             // Get the AAS Repository URL from the Store
             aasRepoURL() {
                 return this.navigationStore.getAASRepoURL;
@@ -306,6 +316,11 @@
                     this.showDetailsCard = false;
                 }
             },
+
+            // watch for changes in the trigger for AAS List scroll
+            triggerAASListScroll() {
+                this.scrollToSelectedAAS();
+            },
         },
 
         mounted() {
@@ -335,6 +350,10 @@
             }
         },
 
+        activated() {
+            this.scrollToSelectedAAS();
+        },
+
         methods: {
             // Function to determine the name of the aas to be displayed
             aasNameToDisplay(AAS: any) {
@@ -375,6 +394,7 @@
                         });
                         this.AASData = Object.freeze(sortedData); // store the sorted data in the AASData variable
                         this.unfilteredAASData = sortedData; // make a copy of the sorted data and store it in the unfilteredAASData variable
+                        this.scrollToSelectedAAS(); // scroll to the selected AAS
                         if (this.statusCheck) {
                             this.checkAASStatus(); // check the AAS Status
                         }
@@ -656,6 +676,22 @@
                 this.deleteDialogShowing = true;
                 this.aasToDelete = AAS;
             },
+
+            async scrollToSelectedAAS() {
+                // Find the index of the selected item
+                const index = this.AASData.findIndex((item: any) => this.isSelected(item));
+                const virtualScrollRef = this.$refs.virtualScroll as any;
+
+                if (index !== -1 && virtualScrollRef) {
+                    const intervalId = setInterval(() => {
+                        if (virtualScrollRef.$el.querySelector('.v-virtual-scroll__container').children.length > 0) {
+                            // Access the scrollable container
+                            virtualScrollRef.scrollToIndex(index);
+                            clearInterval(intervalId);
+                        }
+                    }, 50);
+                }
+            },
         },
     });
 </script>

aas-web-ui/src/components/AppNavigation/AppNavigation.vue

@@ -5,7 +5,7 @@
             <v-row class="mx-0" align="center">
                 <v-card flat color="appBar" class="ml-2">
                     <!-- Logo in the App Bar -->
-                    <img :src="EnvLogoPath" style="min-height: 42px; max-height: 42px" alt="Logo" />
+                    <img :src="LogoPath" style="min-height: 42px; max-height: 42px" alt="Logo" />
                 </v-card>
                 <!-- Menu Toggle (Desktop) -->
                 <v-menu v-if="!isMobile" v-model="mainMenu" :close-on-content-click="false">
@@ -314,8 +314,12 @@
             },
 
             // Get the Env Variable for the logo path from the store
-            EnvLogoPath() {
-                return this.envStore.getEnvLogoPath;
+            LogoPath() {
+                if (this.isDark && this.envStore.getEnvLogoDarkPath.trim().length > 0) {
+                    return this.envStore.getEnvLogoDarkPath;
+                } else {
+                    return this.envStore.getEnvLogoLightPath;
+                }
             },
 
             getEndpointConfigAvailable() {