diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-09-03 23:25:50 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-09-17 01:47:38 +0300 |
commit | 0214fedb49c4fcae85be9f6e6c542932518a5ffc (patch) | |
tree | 1aadcb2767e4a21d8b19ff69b562a2eb0d1cdbc1 | |
parent | 14717e338482cceb0f417d4af20a22fb165d6bc5 (diff) | |
download | webui-vue-0214fedb49c4fcae85be9f6e6c542932518a5ffc.tar.xz |
Update config to enable custom app navigation
- Update documentation to include navigation customizations
- Created an IBM specific application navigation file to demonstrate
how to remove KVM navigation item
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I2ea61e9f3a43e6821f274ed90e0eed18afabccb7
-rw-r--r-- | .env.ibm | 3 | ||||
-rw-r--r-- | src/env/components/AppNavigation/ibm.js | 139 | ||||
-rw-r--r-- | src/env/env.md | 13 | ||||
-rw-r--r-- | vue.config.js | 8 |
4 files changed, 162 insertions, 1 deletions
@@ -1,4 +1,5 @@ NODE_ENV=production VUE_APP_ENV_NAME=ibm VUE_APP_COMPANY_NAME="IBM" -CUSTOM_STYLES=true
\ No newline at end of file +CUSTOM_STYLES=true +CUSTOM_APP_NAV=true
\ No newline at end of file diff --git a/src/env/components/AppNavigation/ibm.js b/src/env/components/AppNavigation/ibm.js new file mode 100644 index 00000000..014edd6f --- /dev/null +++ b/src/env/components/AppNavigation/ibm.js @@ -0,0 +1,139 @@ +import IconAnalytics from '@carbon/icons-vue/es/analytics/16'; +import IconDataCheck from '@carbon/icons-vue/es/data--check/16'; +import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16'; +import IconSettings from '@carbon/icons-vue/es/settings/16'; +import IconPassword from '@carbon/icons-vue/es/password/16'; +import IconChevronUp from '@carbon/icons-vue/es/chevron--up/16'; + +const AppNavigationMixin = { + components: { + iconOverview: IconAnalytics, + iconHealth: IconDataCheck, + iconControl: IconSettingsAdjust, + iconConfiguration: IconSettings, + iconAccessControl: IconPassword, + iconExpand: IconChevronUp + }, + data() { + return { + navigationItems: [ + { + id: 'overview', + label: this.$t('appNavigation.overview'), + route: '/', + icon: 'iconOverview' + }, + { + id: 'health', + label: this.$t('appNavigation.health'), + icon: 'iconHealth', + children: [ + { + id: 'event-logs', + label: this.$t('appNavigation.eventLogs'), + route: '/health/event-logs' + }, + { + id: 'hardware-status', + label: this.$t('appNavigation.hardwareStatus'), + route: '/health/hardware-status' + }, + { + id: 'sensors', + label: this.$t('appNavigation.sensors'), + route: '/health/sensors' + } + ] + }, + { + id: 'control', + label: this.$t('appNavigation.control'), + icon: 'iconControl', + children: [ + { + id: 'manage-power-usage', + label: this.$t('appNavigation.managePowerUsage'), + route: '/control/manage-power-usage' + }, + { + id: 'reboot-bmc', + label: this.$t('appNavigation.rebootBmc'), + route: '/control/reboot-bmc' + }, + { + id: 'serial-over-lan', + label: this.$t('appNavigation.serialOverLan'), + route: '/control/serial-over-lan' + }, + { + id: 'server-led', + label: this.$t('appNavigation.serverLed'), + route: '/control/server-led' + }, + { + id: 'server-power-operations', + label: this.$t('appNavigation.serverPowerOperations'), + route: '/control/server-power-operations' + }, + { + id: 'virtual-media', + label: this.$t('appNavigation.virtualMedia'), + route: '/control/virtual-media' + } + ] + }, + { + id: 'configuration', + label: this.$t('appNavigation.configuration'), + icon: 'iconConfiguration', + children: [ + { + id: 'date-time-settings', + label: this.$t('appNavigation.dateTimeSettings'), + route: '/configuration/date-time-settings' + }, + { + id: 'firmware', + label: this.$t('appNavigation.firmware'), + route: '/configuration/firmware' + }, + { + id: 'network-settings', + label: this.$t('appNavigation.networkSettings'), + route: '/configuration/network-settings' + }, + { + id: 'snmp-settings', + label: this.$t('appNavigation.snmpSettings'), + route: '' + } + ] + }, + { + id: 'access-control', + label: this.$t('appNavigation.configuration'), + icon: 'iconAccessControl', + children: [ + { + id: 'ldap', + label: this.$t('appNavigation.ldap'), + route: '/access-control/ldap' + }, + { + id: 'local-user-management', + label: this.$t('appNavigation.localUserManagement'), + route: '/access-control/local-user-management' + }, + { + id: 'ssl-certificates', + label: this.$t('appNavigation.sslCertificates'), + route: '/access-control/ssl-certificates' + } + ] + } + ] + }; + } +}; + +export default AppNavigationMixin; diff --git a/src/env/env.md b/src/env/env.md index 191cd045..8d53b023 100644 --- a/src/env/env.md +++ b/src/env/env.md @@ -5,6 +5,7 @@ This document provides instructions for how to add environment specific modifica - [Setup](#setup) - [Store](#store) - [Router](#router) +- [App Navigation](#app-navigation) - [Theming](#theming) - [Local development](#local-development) - [Production build](#production-build) @@ -81,6 +82,18 @@ router.addRoutes([ export default router; ``` +## App navigation + +The Vue Router definition is closely tied to the app navigation but should be configured separately. +The Vue Router is responsible for defining the application routes which is not always the same as what is visible in the app navigation. +This configuration will make customizations to the rendered markup in src/components/AppNavigation/AppNavigation.vue. + +1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key value pair to the new .env file. +2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation` + >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The AppNavigationMixin import in `src/components/AppNavigation/AppNavigation.vue` will resolve to this new file. +3. Your custom mixin should follow a very similar structure to the default AppNavigationMixin.js file. It should include a data property named `navigationItems` that should be an array of of navigation objects. Each navigation object should have an `id` and `label` property defined. Optionally it can include `icon`, `route`, or `children` properties. +4. Add default export + ## Theming >[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/) allows for easy visual customizations. diff --git a/vue.config.js b/vue.config.js index 1e17def0..53dc6141 100644 --- a/vue.config.js +++ b/vue.config.js @@ -55,6 +55,8 @@ module.exports = { const envName = process.env.VUE_APP_ENV_NAME; const hasCustomStore = process.env.CUSTOM_STORE === 'true' ? true : false; const hasCustomRouter = process.env.CUSTOM_ROUTER === 'true' ? true : false; + const hasCustomAppNav = + process.env.CUSTOM_APP_NAV === 'true' ? true : false; if (process.env.NODE_ENV === 'production') { config.plugins.push( @@ -73,6 +75,12 @@ module.exports = { // If env has custom router, resolve router module in src/main.js config.resolve.alias['./router$'] = `./env/router/${envName}.js`; } + if (hasCustomAppNav) { + // If env has custom AppNavigation, resolve AppNavigationMixin module in src/components/AppNavigation/AppNavigation.vue + config.resolve.alias[ + './AppNavigationMixin$' + ] = `@/env/components/AppNavigation/${envName}.js`; + } } }, chainWebpack: config => { |