From 0214fedb49c4fcae85be9f6e6c542932518a5ffc Mon Sep 17 00:00:00 2001 From: Yoshie Muranaka Date: Thu, 3 Sep 2020 13:25:50 -0700 Subject: 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 Change-Id: I2ea61e9f3a43e6821f274ed90e0eed18afabccb7 --- src/env/components/AppNavigation/ibm.js | 139 ++++++++++++++++++++++++++++++++ src/env/env.md | 13 +++ 2 files changed, 152 insertions(+) create mode 100644 src/env/components/AppNavigation/ibm.js (limited to 'src') 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 `.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. -- cgit v1.2.3