diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-08-12 04:24:59 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-09-15 02:02:26 +0300 |
commit | d329ec84b105c55abafc53db061bbfc57494c582 (patch) | |
tree | 247bd3d11306803a6bd0dc74fbcf828e60d3ec34 | |
parent | b771849c66ff5793905eb00c793eb846c5a7a1e0 (diff) | |
download | webui-vue-d329ec84b105c55abafc53db061bbfc57494c582.tar.xz |
Refactor navigation component
We are anticipating necessary customizations to the app
navigation for different environments.
This refactoring will allow for a more programmatic approach.
By abstracting the navigation into a JS object we can leverage
the Vue mixin to isolate customizations while sharing a
standard template and styles.
There may be slight changes to data-test-id-* hooks.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I0d095acfee29cfdd4ce1094b860d754f45dc6db9
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 203 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigationMixin.js | 144 | ||||
-rw-r--r-- | src/locales/en-US.json | 2 |
3 files changed, 180 insertions, 169 deletions
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index ef689d5f..47ed3c1d 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -3,162 +3,41 @@ <div class="nav-container" :class="{ open: isNavigationOpen }"> <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')"> <b-nav vertical class="mb-4"> - <b-nav-item to="/" data-test-id="nav-container-overview"> - <icon-overview /> - {{ $t('appNavigation.overview') }} - </b-nav-item> - - <li class="nav-item"> - <b-button - v-b-toggle.health-menu - variant="link" - data-test-id="nav-button-health" - > - <icon-health /> - {{ $t('appNavigation.health') }} - <icon-expand class="icon-expand" /> - </b-button> - <b-collapse id="health-menu" tag="ul" class="nav-item__nav"> - <b-nav-item - to="/health/event-logs" - data-test-id="nav-container-event-logs" - > - {{ $t('appNavigation.eventLogs') }} - </b-nav-item> - <b-nav-item - to="/health/hardware-status" - data-test-id="nav-container-hardware-status" - > - {{ $t('appNavigation.hardwareStatus') }} - </b-nav-item> - <b-nav-item - to="/health/sensors" - data-test-id="nav-container-sensors" - > - {{ $t('appNavigation.sensors') }} - </b-nav-item> - </b-collapse> - </li> - - <li class="nav-item"> - <b-button - v-b-toggle.control-menu - variant="link" - data-test-id="nav-button-control" - > - <icon-control /> - {{ $t('appNavigation.control') }} - <icon-expand class="icon-expand" /> - </b-button> - <b-collapse id="control-menu" tag="ul" class="nav-item__nav"> - <b-nav-item to="/control/kvm" data-test-id="nav-container-kvm"> - {{ $t('appNavigation.kvm') }} - </b-nav-item> - <b-nav-item - to="/control/manage-power-usage" - data-test-id="nav-container-managePowerUsage" - > - {{ $t('appNavigation.managePowerUsage') }} - </b-nav-item> - <b-nav-item - to="/control/reboot-bmc" - data-test-id="nav-container-rebootBmc" - > - {{ $t('appNavigation.rebootBmc') }} - </b-nav-item> - <b-nav-item - to="/control/serial-over-lan" - data-test-id="nav-container-sol" - > - {{ $t('appNavigation.serialOverLan') }} - </b-nav-item> - <b-nav-item - to="/control/server-led" - data-test-id="nav-container-serverLed" - > - {{ $t('appNavigation.serverLed') }} - </b-nav-item> - <b-nav-item - to="/control/server-power-operations" - data-test-id="nav-container-serverPowerOperations" - > - {{ $t('appNavigation.serverPowerOperations') }} - </b-nav-item> - <b-nav-item to="/control/virtual-media"> - {{ $t('appNavigation.virtualMedia') }} - </b-nav-item> - </b-collapse> - </li> - - <li class="nav-item"> - <b-button - v-b-toggle.configuration-menu - variant="link" - data-test-id="nav-button-configuration" + <template v-for="(navItem, index) in navigationItems"> + <!-- Navigation items with no children --> + <b-nav-item + v-if="!navItem.children" + :key="index" + :to="navItem.route" + :data-test-id="`nav-item-${navItem.id}`" > - <icon-configuration /> - {{ $t('appNavigation.configuration') }} - <icon-expand class="icon-expand" /> - </b-button> - <b-collapse id="configuration-menu" tag="ul" class="nav-item__nav"> - <b-nav-item - to="/configuration/date-time-settings" - data-test-id="nav-container-dateTimeSettings" - > - {{ $t('appNavigation.dateTimeSettings') }} - </b-nav-item> - <b-nav-item - to="/configuration/firmware" - data-test-id="nav-container-firmware" + <component :is="navItem.icon" /> + {{ navItem.label }} + </b-nav-item> + + <!-- Navigation items with children --> + <li v-else :key="index" class="nav-item"> + <b-button + v-b-toggle="`${navItem.id}`" + variant="link" + :data-test-id="`nav-button-${navItem.id}`" > - {{ $t('appNavigation.firmware') }} - </b-nav-item> - <b-nav-item - to="/configuration/network-settings" - data-test-id="nav-container-networkSettings" - > - {{ $t('appNavigation.networkSettings') }} - </b-nav-item> - <b-nav-item - href="javascript:void(0)" - data-test-id="nav-container-snmp" - > - {{ $t('appNavigation.snmpSettings') }} - </b-nav-item> - </b-collapse> - </li> - - <li class="nav-item"> - <b-button - v-b-toggle.access-control-menu - variant="link" - data-test-id="nav-button-accessControl" - > - <icon-access-control /> - {{ $t('appNavigation.accessControl') }} - <icon-expand class="icon-expand" /> - </b-button> - <b-collapse id="access-control-menu" tag="ul" class="nav-item__nav"> - <b-nav-item - to="/access-control/ldap" - data-test-id="nav-container-ldap" - > - {{ $t('appNavigation.ldap') }} - </b-nav-item> - <b-nav-item - to="/access-control/local-user-management" - data-test-id="nav-container-localUserManagement" - > - {{ $t('appNavigation.localUserManagement') }} - </b-nav-item> - <b-nav-item - to="/access-control/ssl-certificates" - data-test-id="nav-container-sslCertificates" - > - {{ $t('appNavigation.sslCertificates') }} - </b-nav-item> - </b-collapse> - </li> + <component :is="navItem.icon" /> + {{ navItem.label }} + <icon-expand class="icon-expand" /> + </b-button> + <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav"> + <b-nav-item + v-for="(subNavItem, i) of navItem.children" + :key="i" + :to="subNavItem.route" + :data-test-id="`nav-item-${subNavItem.id}`" + > + {{ subNavItem.label }} + </b-nav-item> + </b-collapse> + </li> + </template> </b-nav> </nav> </div> @@ -174,23 +53,11 @@ </template> <script> -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'; +import AppNavigationMixin from './AppNavigationMixin'; export default { name: 'AppNavigation', - components: { - iconOverview: IconAnalytics, - iconHealth: IconDataCheck, - iconControl: IconSettingsAdjust, - iconConfiguration: IconSettings, - iconAccessControl: IconPassword, - iconExpand: IconChevronUp - }, + mixins: [AppNavigationMixin], data() { return { isNavigationOpen: false diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js new file mode 100644 index 00000000..8cd54c5f --- /dev/null +++ b/src/components/AppNavigation/AppNavigationMixin.js @@ -0,0 +1,144 @@ +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: 'kvm', + label: this.$t('appNavigation.kvm'), + route: '/control/kvm' + }, + { + 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/locales/en-US.json b/src/locales/en-US.json index de6dfce6..2d69a7b0 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -125,7 +125,7 @@ "snmpSettings": "SNMP settings", "sslCertificates": "SSL certificates", "unauthorized": "Unauthorized", - "virtualMedia": "Virtual Media" + "virtualMedia": "Virtual media" }, "pageChangePassword": { "changePassword": "Change password", |