Skip to content

Commit

Permalink
Merge branch 'main' into logo-dark-theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@seicke
seicke authored Nov 12, 2024
2 parents 2f10aed + 56103dc commit aba1c4e
Show file tree
Hide file tree
Showing 8 changed files with 160 additions and 137 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,8 @@ docker run -p 3000:3000 eclipsebasyx/aas-ui

`-e BASE_PATH=<base_path>`

`-e ENDPOINT_CONFIG_AVAILABLE=<true/false>`

4. If you want to use a custom logo, you can mount a folder containing the logo and the favicon.ico to the container by adding the following argument to the run command:

`-v <local_path_to_logo_folder>:/usr/src/app/dist/Logo`
Expand Down Expand Up @@ -210,6 +212,7 @@ aas-web-gui:
LOGO_LIGHT_PATH: "<logo_light_path>"
LOGO_DARK_PATH: "<logo_dark_path>"
BASE_PATH: "<base_path>"
ENDPOINT_CONFIG_AVAILABLE: "<true/false>"
volumes:
- <local_path_to_logo_folder>:/usr/src/app/dist/Logo
```
Expand Down
4 changes: 4 additions & 0 deletions aas-web-ui/entrypoint.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,10 @@ if [ -n "$KEYCLOAK_CLIENT_ID" ]; then
jq '.keycloakClientId = env.KEYCLOAK_CLIENT_ID' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
fi

if [ -n "$ENDPOINT_CONFIG_AVAILABLE" ]; then
jq '.endpointConfigAvailable = env.ENDPOINT_CONFIG_AVAILABLE' /usr/src/app/dist/config.json > /tmp/config.json && mv /tmp/config.json /usr/src/app/dist/config.json
fi

if [ -n "$BASE_PATH" ]; then
echo "====================="
echo "BASE_PATH: $BASE_PATH"
Expand Down
4 changes: 2 additions & 2 deletions aas-web-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"@fontsource/roboto": "^5.0.14",
"@mdi/font": "^7.4.47",
"@vue-leaflet/vue-leaflet": "^0.10.1",
"apexcharts": "^3.54.1",
"apexcharts": "^4.0.0",
"keycloak-js": "^25.0.4",
"leaflet": "^1.9.4",
"lodash": "^4.17.21",
Expand All @@ -28,7 +28,7 @@
"vue": "^3.5.12",
"vue-router": "^4.4.5",
"vue3-apexcharts": "^1.7.0",
"vuetify": "^3.7.1",
"vuetify": "^3.7.4",
"webfontloader": "^1.0.0"
},
"devDependencies": {
Expand Down
1 change: 1 addition & 0 deletions aas-web-ui/public/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,5 @@
"keycloakUrl": "",
"keycloakRealm": "",
"keycloakClientId": ""
"endpointConfigAvailable": true
}
123 changes: 69 additions & 54 deletions aas-web-ui/src/components/AppNavigation/AppNavigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,7 @@
mainMenu: false, // Variable to show the Main Menu
mobileMenu: false, // Variable to show the Mobile Menu
dashboardAvailable: false, // Dashboard Availability
endpointConfigAvailable: true,
drawerVisibility: true, // Variable to show the AAS List Drawer
};
},
Expand Down Expand Up @@ -321,6 +322,10 @@
}
},
getEndpointConfigAvailable() {
return this.envStore.getEndpointConfigAvailable;
},
dashboardServicePath() {
return this.envStore.getEnvDashboardServicePath;
},
Expand Down Expand Up @@ -375,6 +380,7 @@
mounted() {
this.isDashboardAvailable();
this.endpointConfigAvailable = this.getEndpointConfigAvailable;
// check the local storage for a saved theme preference
let theme = localStorage.getItem('theme');
if (theme) {
Expand All @@ -398,88 +404,97 @@
}
// auto connect to aas discovery that was saved in local storage
let aasDiscoveryURL = window.localStorage.getItem('aasDiscoveryURL');
if (aasDiscoveryURL) {
this.aasDiscoveryURL = aasDiscoveryURL;
this.connectToAASDiscovery();
// console.log('DiscoveryURL was found in local storage', DiscoveryURL);
} else {
// if no discovery server was saved in local storage, check if an environment variable is set
if (this.EnvAASDiscoveryPath && this.EnvAASDiscoveryPath != '') {
this.aasDiscoveryURL = this.EnvAASDiscoveryPath;
if (this.endpointConfigAvailable) {
let aasDiscoveryURL = window.localStorage.getItem('aasDiscoveryURL');
if (aasDiscoveryURL) {
this.aasDiscoveryURL = aasDiscoveryURL;
this.connectToAASDiscovery();
// console.log('DiscoveryURL was found in local storage', DiscoveryURL);
}
}
if (!this.aasDiscoveryURL && this.EnvAASDiscoveryPath && this.EnvAASDiscoveryPath != '') {
this.aasDiscoveryURL = this.EnvAASDiscoveryPath;
this.connectToAASDiscovery();
}
// auto connect to aas registry that was saved in local storage
let aasRegistryURL = window.localStorage.getItem('aasRegistryURL');
if (aasRegistryURL) {
this.aasRegistryURL = aasRegistryURL;
this.connectToAASRegistry();
// console.log('RegistryURL was found in local storage', RegistryURL);
} else {
// if no registry server was saved in local storage, check if an environment variable is set
if (this.EnvAASRegistryPath && this.EnvAASRegistryPath != '') {
this.aasRegistryURL = this.EnvAASRegistryPath;
if (this.endpointConfigAvailable) {
let aasRegistryURL = window.localStorage.getItem('aasRegistryURL');
if (aasRegistryURL) {
this.aasRegistryURL = aasRegistryURL;
this.connectToAASRegistry();
// console.log('RegistryURL was found in local storage', RegistryURL);
}
}
if (!this.aasRegistryURL && this.EnvAASRegistryPath && this.EnvAASRegistryPath != '') {
this.aasRegistryURL = this.EnvAASRegistryPath;
this.connectToAASRegistry();
}
// auto connect to submodel registry that was saved in local storage
let submodelRegistryURL = window.localStorage.getItem('submodelRegistryURL');
if (submodelRegistryURL) {
this.submodelRegistryURL = submodelRegistryURL;
this.connectToSubmodelRegistry();
// console.log('SubmodelRegistryURL was found in local storage', SubmodelRegistryURL);
} else {
// if no submodel registry server was saved in local storage, check if an environment variable is set
if (this.EnvSubmodelRegistryPath && this.EnvSubmodelRegistryPath != '') {
this.submodelRegistryURL = this.EnvSubmodelRegistryPath;
if (this.endpointConfigAvailable) {
let submodelRegistryURL = window.localStorage.getItem('submodelRegistryURL');
if (submodelRegistryURL) {
this.submodelRegistryURL = submodelRegistryURL;
this.connectToSubmodelRegistry();
// console.log('SubmodelRegistryURL was found in local storage', SubmodelRegistryURL);
}
}
if (!this.submodelRegistryURL && this.EnvSubmodelRegistryPath && this.EnvSubmodelRegistryPath != '') {
this.submodelRegistryURL = this.EnvSubmodelRegistryPath;
this.connectToSubmodelRegistry();
}
// auto connect to AAS Repository that was saved in local storage
let aasRepoURL = window.localStorage.getItem('AASRepoURL');
if (aasRepoURL) {
this.AASRepoURL = aasRepoURL;
this.connectToEnvironment('AAS');
// console.log('AASRepoURL was found in local storage', AASRepoURL);
} else {
// if no aas server was saved in local storage, check if an environment variable is set
if (this.EnvAASRepoPath && this.EnvAASRepoPath != '') {
this.AASRepoURL = this.EnvAASRepoPath;
if (this.endpointConfigAvailable) {
let aasRepoURL = window.localStorage.getItem('AASRepoURL');
if (aasRepoURL) {
this.AASRepoURL = aasRepoURL;
this.connectToEnvironment('AAS');
// console.log('AASRepoURL was found in local storage', AASRepoURL);
}
}
if (!this.AASRepoURL && this.EnvAASRepoPath && this.EnvAASRepoPath != '') {
this.AASRepoURL = this.EnvAASRepoPath;
this.connectToEnvironment('AAS');
}
// auto connect to Submodel Repository that was saved in local storage
let submodelRepoURL = window.localStorage.getItem('SubmodelRepoURL');
if (submodelRepoURL) {
this.SubmodelRepoURL = submodelRepoURL;
this.connectToEnvironment('Submodel');
// console.log('SubmodelRepoURL was found in local storage', SubmodelRepoURL);
} else {
// if no submodel server was saved in local storage, check if an environment variable is set
if (this.EnvSubmodelRepoPath && this.EnvSubmodelRepoPath != '') {
this.SubmodelRepoURL = this.EnvSubmodelRepoPath;
if (this.endpointConfigAvailable) {
let submodelRepoURL = window.localStorage.getItem('SubmodelRepoURL');
if (submodelRepoURL) {
this.SubmodelRepoURL = submodelRepoURL;
this.connectToEnvironment('Submodel');
// // console.log('SubmodelRepoURL was found in local storage', SubmodelRepoURL);
}
}
if (!this.SubmodelRepoURL && this.EnvSubmodelRepoPath && this.EnvSubmodelRepoPath != '') {
this.SubmodelRepoURL = this.EnvSubmodelRepoPath;
this.connectToEnvironment('Submodel');
}
// auto connect to Concept Description Repository that was saved in local storage
let conceptDescriptionRepoURL = window.localStorage.getItem('ConceptDescriptionRepoURL');
if (conceptDescriptionRepoURL) {
this.ConceptDescriptionRepoURL = conceptDescriptionRepoURL;
this.connectToEnvironment('ConceptDescription');
// console.log('ConceptDescriptionRepoURL was found in local storage', ConceptDescriptionRepoURL);
} else {
// if no concept description server was saved in local storage, check if an environment variable is set
if (this.EnvConceptDescriptionRepoPath && this.EnvConceptDescriptionRepoPath != '') {
this.ConceptDescriptionRepoURL = this.EnvConceptDescriptionRepoPath;
if (this.endpointConfigAvailable) {
let conceptDescriptionRepoURL = window.localStorage.getItem('ConceptDescriptionRepoURL');
if (conceptDescriptionRepoURL) {
this.ConceptDescriptionRepoURL = conceptDescriptionRepoURL;
this.connectToEnvironment('ConceptDescription');
// console.log('ConceptDescriptionRepoURL was found in local storage', ConceptDescriptionRepoURL);
}
}
if (
!this.ConceptDescriptionRepoURL &&
this.EnvConceptDescriptionRepoPath &&
this.EnvConceptDescriptionRepoPath != ''
) {
this.ConceptDescriptionRepoURL = this.EnvConceptDescriptionRepoPath;
this.connectToEnvironment('ConceptDescription');
}
},
methods: {
Expand Down
47 changes: 36 additions & 11 deletions aas-web-ui/src/components/AppNavigation/MainMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
<template>
<v-container fluid class="pa-0">
<v-card
:min-width="isMobile ? 0 : 700"
:min-width="isMobile || !endpointConfigAvailable ? 200 : 700"
:flat="isMobile ? true : false"
:color="isMobile ? 'card' : 'navigationMenu'"
:style="{ 'border-style': isMobile ? '' : 'solid', 'border-width': isMobile ? '' : '1px' }">
<v-row>
<v-col :cols="isMobile ? 12 : 4" :class="isMobile ? 'bg-card' : 'bg-navigationMenuSecondary'">
<v-col
:cols="isMobile || !endpointConfigAvailable ? 12 : 4"
:class="isMobile ? 'bg-card' : 'bg-navigationMenuSecondary'">
<v-card
variant="flat"
style="border-radius: 0px"
class="pt-3"
:color="isMobile ? 'card' : 'navigationMenuSecondary'">
<template v-if="!isMobile">
<template v-if="!isMobile && endpointConfigAvailable">
<span class="mx-3 text-primary">General Settings</span>
<v-list
nav
Expand Down Expand Up @@ -46,6 +48,7 @@
</v-card>
</v-col>
<v-col
v-if="endpointConfigAvailable"
:cols="isMobile ? 12 : 8"
:class="isMobile ? 'pt-0 mb-2 px-6 bg-card' : 'pt-4 bg-navigationMenu'">
<!-- Configure AAS Discovery URL -->
Expand Down Expand Up @@ -247,6 +250,7 @@
loadingSubmodelRepo: false, // Loading State of the Submodel Repository Connection
loadingConceptDescriptionRepo: false, // Loading State of the Concept Description Repository Connection
dashboardAvailable: false, // Dashboard Availability
endpointConfigAvailable: true,
};
},
Expand Down Expand Up @@ -286,6 +290,10 @@
return this.navigationStore.getConceptDescriptionRepoURL;
},
getEndpointConfigAvailable() {
return this.envStore.getEndpointConfigAvailable;
},
// Check if the current Theme is dark
isDark() {
return this.theme.global.current.value.dark;
Expand All @@ -311,6 +319,7 @@
this.AASRepoURL = this.aasRepoURL;
this.SubmodelRepoURL = this.submodelRepoURL;
this.ConceptDescriptionRepoURL = this.conceptDescriptionRepoURL;
this.endpointConfigAvailable = this.getEndpointConfigAvailable;
this.isDashboardAvailable();
},
Expand All @@ -331,10 +340,14 @@
this.loadingAASDiscovery = false;
if (response.success) {
this.navigationStore.dispatchAASDiscoveryURL(this.aasDiscoveryURL); // save the URL in the NavigationStore
window.localStorage.setItem('aasDiscoveryURL', this.aasDiscoveryURL); // save the URL in the local storage
if (this.endpointConfigAvailable) {
window.localStorage.setItem('aasDiscoveryURL', this.aasDiscoveryURL); // save the URL in the local storage
}
} else {
this.navigationStore.dispatchAASDiscoveryURL(''); // clear the AAS Discovery Service URL in the NavigationStore
window.localStorage.removeItem('aasDiscoveryURL'); // remove the URL from the local storage
if (this.endpointConfigAvailable) {
window.localStorage.removeItem('aasDiscoveryURL'); // remove the URL from the local storage
}
}
});
}
Expand All @@ -356,10 +369,14 @@
this.loadingAASRegistry = false;
if (response.success) {
this.navigationStore.dispatchAASRegistryURL(this.aasRegistryURL); // save the URL in the NavigationStore
window.localStorage.setItem('aasRegistryURL', this.aasRegistryURL); // save the URL in the local storage
if (this.endpointConfigAvailable) {
window.localStorage.setItem('aasRegistryURL', this.aasRegistryURL); // save the URL in the local storage
}
} else {
this.navigationStore.dispatchAASRegistryURL(''); // clear the AAS Registry URL in the NavigationStore
window.localStorage.removeItem('aasRegistryURL'); // remove the URL from the local storage
if (this.endpointConfigAvailable) {
window.localStorage.removeItem('aasRegistryURL'); // remove the URL from the local storage
}
}
});
}
Expand All @@ -381,10 +398,14 @@
this.loadingSubmodelRegistry = false;
if (response.success) {
this.navigationStore.dispatchSubmodelRegistryURL(this.submodelRegistryURL); // save the URL in the NavigationStore
window.localStorage.setItem('submodelRegistryURL', this.submodelRegistryURL); // save the URL in the local storage
if (this.endpointConfigAvailable) {
window.localStorage.setItem('submodelRegistryURL', this.submodelRegistryURL); // save the URL in the local storage
}
} else {
this.navigationStore.dispatchSubmodelRegistryURL(''); // clear the Submodel Registry URL in the NavigationStore
window.localStorage.removeItem('submodelRegistryURL'); // remove the URL from the local storage
if (this.endpointConfigAvailable) {
window.localStorage.removeItem('submodelRegistryURL'); // remove the URL from the local storage
}
}
});
}
Expand All @@ -405,10 +426,14 @@
(this as any)['loading' + RepoType + 'Repo'] = false;
if (response.success) {
this.navigationStore.dispatchRepoURL(RepoType, (this as any)[RepoType + 'RepoURL']); // save the URL in the NavigationStore
window.localStorage.setItem(RepoType + 'RepoURL', (this as any)[RepoType + 'RepoURL']); // save the URL in the local storage
if (this.endpointConfigAvailable) {
window.localStorage.setItem(RepoType + 'RepoURL', (this as any)[RepoType + 'RepoURL']); // save the URL in the local storage
}
} else {
this.navigationStore.dispatchRepoURL(RepoType, ''); // clear the URL in the NavigationStore
window.localStorage.removeItem(RepoType + 'RepoURL'); // remove the URL from the local storage
if (this.endpointConfigAvailable) {
window.localStorage.removeItem(RepoType + 'RepoURL'); // remove the URL from the local storage
}
}
});
}
Expand Down
4 changes: 4 additions & 0 deletions aas-web-ui/src/store/EnvironmentStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const useEnvStore = defineStore({
keycloakUrl: '',
keycloakRealm: '',
keycloakClientId: '',
endpointConfigAvailable: true,
}),
getters: {
getEnvLogoLightPath: (state) => state.logoLightPath,
Expand All @@ -37,6 +38,7 @@ export const useEnvStore = defineStore({
getKeycloakUrl: (state) => state.keycloakUrl,
getKeycloakRealm: (state) => state.keycloakRealm,
getKeycloakClientId: (state) => state.keycloakClientId,
getEndpointConfigAvailable: (state) => state.endpointConfigAvailable,
},
actions: {
async fetchConfig() {
Expand All @@ -59,6 +61,8 @@ export const useEnvStore = defineStore({
this.keycloakUrl = config.keycloakUrl;
this.keycloakRealm = config.keycloakRealm;
this.keycloakClientId = config.keycloakClientId;
this.endpointConfigAvailable =
config.endpointConfigAvailable === true || config.endpointConfigAvailable === 'true' ? true : false;
} catch (error) {
console.error('Error fetching config.json: ', error);
}
Expand Down
Loading

0 comments on commit aba1c4e

Please sign in to comment.