diff options
-rw-r--r-- | src/env/env.md | 43 | ||||
-rw-r--r-- | src/env/router/ibm.js | 7 | ||||
-rw-r--r-- | src/env/router/intel.js | 7 | ||||
-rw-r--r-- | src/router/index.js | 252 | ||||
-rw-r--r-- | src/router/routes.js | 251 | ||||
-rw-r--r-- | src/store/api.js | 4 | ||||
-rw-r--r-- | vue.config.js | 26 |
7 files changed, 282 insertions, 308 deletions
diff --git a/src/env/env.md b/src/env/env.md index 8d53b023..e315109d 100644 --- a/src/env/env.md +++ b/src/env/env.md @@ -25,11 +25,11 @@ VUE_APP_ENV_NAME=ibm ## Store ->[Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the application's API calls. +> [Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the application's API calls. 1. If making customizations to the default store, add `CUSTOM_STORE=true` key value pair to the new .env file. 2. Create a `<ENV_NAME>.js` file in `src/env/store` - >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The store import in `src/main.js` will resolve to this new file. + > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The store import in `src/main.js` will resolve to this new file. 3. Import the base store 4. Import environment specific store modules 5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule` and `unregisterModule` instance methods to add/remove store modules @@ -48,39 +48,14 @@ export default store; ## Router ->[Vue Router](https://router.vuejs.org/guide/) determines which pages are accessible in the UI. +> [Vue Router](https://router.vuejs.org/guide/) determines which pages are accessible in the UI. 1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key value pair to the new .env file. 2. Create a `<ENV_NAME>.js` file in `src/env/router` - >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The router import in `src/main.js` will resolve to this new file. -3. Import the base router -4. Use the [Vue Router](https://router.vuejs.org/api/#router-addroutes) `addRoutes` instance method to define new routes -5. Add default export - -Example `src/env/router/ibm.js`: - -``` -import router from '@/router'; //@ aliases to src directory -import AppLayout from '@/layouts/AppLayout'; - -router.addRoutes([ - { - path: '/', - component: AppLayout, - children: [ - { - path: '/access-control/hmc', - component: () => import('../views/Hmc'), - meta: { - title: 'appPageTitle.hmc' - } - } - ] - } -]); - -export default router; -``` + > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The routes import in `src/router/index.js` will resolve to this new file. +3. Define new [routes](https://router.vuejs.org/api/#routes). + > Use static imports (over lazy-loading routes) to avoid creating separate JS chunks. Static imports also helps to keep the total build size down. +4. Add default export ## App navigation @@ -90,7 +65,7 @@ This configuration will make customizations to the rendered markup in src/compon 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. + > 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 @@ -100,7 +75,7 @@ This configuration will make customizations to the rendered markup in src/compon 1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key value pair to the new .env file. 2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles` - >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The webpack sass loader will attempt to import a file with this name. + > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The webpack sass loader will attempt to import a file with this name. 3. Add style customizations. Refer to [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/) for details about [color overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults) and [other customizable options](https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options). Example for adding custom colors diff --git a/src/env/router/ibm.js b/src/env/router/ibm.js index dccb2de5..3a25650f 100644 --- a/src/env/router/ibm.js +++ b/src/env/router/ibm.js @@ -1,6 +1,3 @@ -import router from '@/router'; +import routes from '@/router/routes'; -// Use router.addRoutes() to add layer specific routes -// https://router.vuejs.org/api/#router-addroutes - -export default router; +export default routes; diff --git a/src/env/router/intel.js b/src/env/router/intel.js index dccb2de5..3a25650f 100644 --- a/src/env/router/intel.js +++ b/src/env/router/intel.js @@ -1,6 +1,3 @@ -import router from '@/router'; +import routes from '@/router/routes'; -// Use router.addRoutes() to add layer specific routes -// https://router.vuejs.org/api/#router-addroutes - -export default router; +export default routes; diff --git a/src/router/index.js b/src/router/index.js index 68340452..6db80b70 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,258 +1,10 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; -import store from '../store/index'; -import AppLayout from '../layouts/AppLayout.vue'; -import LoginLayout from '@/layouts/LoginLayout'; -import ConsoleLayout from '@/layouts/ConsoleLayout.vue'; -import Overview from '@/views/Overview'; -import ProfileSettings from '@/views/ProfileSettings'; -import EventLogs from '@/views/Health/EventLogs'; -import HardwareStatus from '@/views/Health/HardwareStatus'; -import Sensors from '@/views/Health/Sensors'; -import Ldap from '@/views/AccessControl/Ldap'; -import LocalUserManagement from '@/views/AccessControl/LocalUserManagement'; -import SslCertificates from '@/views/AccessControl/SslCertificates'; -import DateTimeSettings from '@/views/Configuration/DateTimeSettings'; -import Firmware from '@/views/Configuration/Firmware'; -import Kvm from '@/views/Control/Kvm'; -import ManagePowerUsage from '@/views/Control/ManagePowerUsage'; -import NetworkSettings from '@/views/Configuration/NetworkSettings'; -import PageNotFound from '@/views/PageNotFound'; -import RebootBmc from '@/views/Control/RebootBmc'; -import ServerLed from '@/views/Control/ServerLed'; -import SerialOverLan from '@/views/Control/SerialOverLan'; -import ServerPowerOperations from '@/views/Control/ServerPowerOperations'; -import Unauthorized from '@/views/Unauthorized'; -import Login from '@/views/Login'; -import ChangePassword from '@/views/ChangePassword'; -import SerialOverLanConsole from '@/views/Control/SerialOverLan/SerialOverLanConsole'; -import KvmConsole from '@/views/Control/Kvm/KvmConsole'; -import VirtualMedia from '@/views/Control/VirtualMedia'; +import store from '../store'; +import routes from './routes'; Vue.use(VueRouter); -// Meta title is translated using i18n in App.vue and PageTitle.Vue -// Example meta: {title: 'appPageTitle.overview'} -const routes = [ - { - path: '/login', - component: LoginLayout, - children: [ - { - path: '', - name: 'login', - component: Login, - meta: { - title: 'appPageTitle.login' - } - }, - { - path: '/change-password', - name: 'change-password', - component: ChangePassword, - meta: { - title: 'appPageTitle.changePassword', - requiresAuth: true - } - } - ] - }, - { - path: '/console', - component: ConsoleLayout, - meta: { - requiresAuth: true - }, - children: [ - { - path: 'serial-over-lan-console', - name: 'serial-over-lan-console', - component: SerialOverLanConsole, - meta: { - title: 'appPageTitle.serialOverLan' - } - }, - { - path: 'kvm', - name: 'kvm-console', - component: KvmConsole, - meta: { - title: 'appPageTitle.kvm' - } - } - ] - }, - { - path: '/', - meta: { - requiresAuth: true - }, - component: AppLayout, - children: [ - { - path: '', - name: 'overview', - component: Overview, - meta: { - title: 'appPageTitle.overview' - } - }, - { - path: '/profile-settings', - name: 'profile-settings', - component: ProfileSettings, - meta: { - title: 'appPageTitle.profileSettings' - } - }, - { - path: '/health/event-logs', - name: 'event-logs', - component: EventLogs, - meta: { - title: 'appPageTitle.eventLogs' - } - }, - { - path: '/health/hardware-status', - name: 'hardware-status', - component: HardwareStatus, - meta: { - title: 'appPageTitle.hardwareStatus' - } - }, - { - path: '/health/sensors', - name: 'sensors', - component: Sensors, - meta: { - title: 'appPageTitle.sensors' - } - }, - { - path: '/access-control/ldap', - name: 'ldap', - component: Ldap, - meta: { - title: 'appPageTitle.ldap' - } - }, - { - path: '/access-control/local-user-management', - name: 'local-users', - component: LocalUserManagement, - meta: { - title: 'appPageTitle.localUserManagement' - } - }, - { - path: '/access-control/ssl-certificates', - name: 'ssl-certificates', - component: SslCertificates, - meta: { - title: 'appPageTitle.sslCertificates' - } - }, - { - path: '/configuration/date-time-settings', - name: 'date-time-settings', - component: DateTimeSettings, - meta: { - title: 'appPageTitle.dateTimeSettings' - } - }, - { - path: '/configuration/firmware', - name: 'firmware', - component: Firmware, - meta: { - title: 'appPageTitle.firmware' - } - }, - { - path: '/control/kvm', - name: 'kvm', - component: Kvm, - meta: { - title: 'appPageTitle.kvm' - } - }, - { - path: '/control/manage-power-usage', - name: 'manage-power-usage', - component: ManagePowerUsage, - meta: { - title: 'appPageTitle.managePowerUsage' - } - }, - { - path: '/configuration/network-settings', - name: 'network-settings', - component: NetworkSettings, - meta: { - title: 'appPageTitle.networkSettings' - } - }, - { - path: '/control/reboot-bmc', - name: 'reboot-bmc', - component: RebootBmc, - meta: { - title: 'appPageTitle.rebootBmc' - } - }, - { - path: '/control/server-led', - name: 'server-led', - component: ServerLed, - meta: { - title: 'appPageTitle.serverLed' - } - }, - { - path: '/control/serial-over-lan', - name: 'serial-over-lan', - component: SerialOverLan, - meta: { - title: 'appPageTitle.serialOverLan' - } - }, - { - path: '/control/server-power-operations', - name: 'server-power-operations', - component: ServerPowerOperations, - meta: { - title: 'appPageTitle.serverPowerOperations' - } - }, - { - path: '/control/virtual-media', - name: 'virtual-media', - component: VirtualMedia, - meta: { - title: 'appPageTitle.virtualMedia' - } - }, - { - path: '/unauthorized', - name: 'unauthorized', - component: Unauthorized, - meta: { - title: 'appPageTitle.unauthorized' - } - }, - { - path: '*', - name: 'page-not-found', - component: PageNotFound, - meta: { - title: 'appPageTitle.pageNotFound' - } - } - ] - } -]; - const router = new VueRouter({ base: process.env.BASE_URL, routes, diff --git a/src/router/routes.js b/src/router/routes.js new file mode 100644 index 00000000..d187713a --- /dev/null +++ b/src/router/routes.js @@ -0,0 +1,251 @@ +import AppLayout from '@/layouts/AppLayout.vue'; +import ChangePassword from '@/views/ChangePassword'; +import ConsoleLayout from '@/layouts/ConsoleLayout.vue'; +import DateTimeSettings from '@/views/Configuration/DateTimeSettings'; +import EventLogs from '@/views/Health/EventLogs'; +import Firmware from '@/views/Configuration/Firmware'; +import HardwareStatus from '@/views/Health/HardwareStatus'; +import Kvm from '@/views/Control/Kvm'; +import KvmConsole from '@/views/Control/Kvm/KvmConsole'; +import Ldap from '@/views/AccessControl/Ldap'; +import LocalUserManagement from '@/views/AccessControl/LocalUserManagement'; +import Login from '@/views/Login'; +import LoginLayout from '@/layouts/LoginLayout'; +import ManagePowerUsage from '@/views/Control/ManagePowerUsage'; +import NetworkSettings from '@/views/Configuration/NetworkSettings'; +import Overview from '@/views/Overview'; +import PageNotFound from '@/views/PageNotFound'; +import ProfileSettings from '@/views/ProfileSettings'; +import RebootBmc from '@/views/Control/RebootBmc'; +import Sensors from '@/views/Health/Sensors'; +import SerialOverLan from '@/views/Control/SerialOverLan'; +import SerialOverLanConsole from '@/views/Control/SerialOverLan/SerialOverLanConsole'; +import ServerLed from '@/views/Control/ServerLed'; +import ServerPowerOperations from '@/views/Control/ServerPowerOperations'; +import SslCertificates from '@/views/AccessControl/SslCertificates'; +import Unauthorized from '@/views/Unauthorized'; +import VirtualMedia from '@/views/Control/VirtualMedia'; + +// Meta title is translated using i18n in App.vue and PageTitle.Vue +// Example meta: {title: 'appPageTitle.overview'} +const routes = [ + { + path: '/login', + component: LoginLayout, + children: [ + { + path: '', + name: 'login', + component: Login, + meta: { + title: 'appPageTitle.login' + } + }, + { + path: '/change-password', + name: 'change-password', + component: ChangePassword, + meta: { + title: 'appPageTitle.changePassword', + requiresAuth: true + } + } + ] + }, + { + path: '/console', + component: ConsoleLayout, + meta: { + requiresAuth: true + }, + children: [ + { + path: 'serial-over-lan-console', + name: 'serial-over-lan-console', + component: SerialOverLanConsole, + meta: { + title: 'appPageTitle.serialOverLan' + } + }, + { + path: 'kvm', + name: 'kvm-console', + component: KvmConsole, + meta: { + title: 'appPageTitle.kvm' + } + } + ] + }, + { + path: '/', + meta: { + requiresAuth: true + }, + component: AppLayout, + children: [ + { + path: '', + name: 'overview', + component: Overview, + meta: { + title: 'appPageTitle.overview' + } + }, + { + path: '/profile-settings', + name: 'profile-settings', + component: ProfileSettings, + meta: { + title: 'appPageTitle.profileSettings' + } + }, + { + path: '/health/event-logs', + name: 'event-logs', + component: EventLogs, + meta: { + title: 'appPageTitle.eventLogs' + } + }, + { + path: '/health/hardware-status', + name: 'hardware-status', + component: HardwareStatus, + meta: { + title: 'appPageTitle.hardwareStatus' + } + }, + { + path: '/health/sensors', + name: 'sensors', + component: Sensors, + meta: { + title: 'appPageTitle.sensors' + } + }, + { + path: '/access-control/ldap', + name: 'ldap', + component: Ldap, + meta: { + title: 'appPageTitle.ldap' + } + }, + { + path: '/access-control/local-user-management', + name: 'local-users', + component: LocalUserManagement, + meta: { + title: 'appPageTitle.localUserManagement' + } + }, + { + path: '/access-control/ssl-certificates', + name: 'ssl-certificates', + component: SslCertificates, + meta: { + title: 'appPageTitle.sslCertificates' + } + }, + { + path: '/configuration/date-time-settings', + name: 'date-time-settings', + component: DateTimeSettings, + meta: { + title: 'appPageTitle.dateTimeSettings' + } + }, + { + path: '/configuration/firmware', + name: 'firmware', + component: Firmware, + meta: { + title: 'appPageTitle.firmware' + } + }, + { + path: '/control/kvm', + name: 'kvm', + component: Kvm, + meta: { + title: 'appPageTitle.kvm' + } + }, + { + path: '/control/manage-power-usage', + name: 'manage-power-usage', + component: ManagePowerUsage, + meta: { + title: 'appPageTitle.managePowerUsage' + } + }, + { + path: '/configuration/network-settings', + name: 'network-settings', + component: NetworkSettings, + meta: { + title: 'appPageTitle.networkSettings' + } + }, + { + path: '/control/reboot-bmc', + name: 'reboot-bmc', + component: RebootBmc, + meta: { + title: 'appPageTitle.rebootBmc' + } + }, + { + path: '/control/server-led', + name: 'server-led', + component: ServerLed, + meta: { + title: 'appPageTitle.serverLed' + } + }, + { + path: '/control/serial-over-lan', + name: 'serial-over-lan', + component: SerialOverLan, + meta: { + title: 'appPageTitle.serialOverLan' + } + }, + { + path: '/control/server-power-operations', + name: 'server-power-operations', + component: ServerPowerOperations, + meta: { + title: 'appPageTitle.serverPowerOperations' + } + }, + { + path: '/control/virtual-media', + name: 'virtual-media', + component: VirtualMedia, + meta: { + title: 'appPageTitle.virtualMedia' + } + }, + { + path: '/unauthorized', + name: 'unauthorized', + component: Unauthorized, + meta: { + title: 'appPageTitle.unauthorized' + } + }, + { + path: '*', + name: 'page-not-found', + component: PageNotFound, + meta: { + title: 'appPageTitle.pageNotFound' + } + } + ] + } +]; + +export default routes; diff --git a/src/store/api.js b/src/store/api.js index 63fd75cb..fa76067c 100644 --- a/src/store/api.js +++ b/src/store/api.js @@ -1,6 +1,6 @@ import Axios from 'axios'; -import router from '../router'; -import store from '@/store'; +import router from '@/router'; +import store from '../store'; const api = Axios.create({ withCredentials: true diff --git a/vue.config.js b/vue.config.js index 53dc6141..ca8e9f08 100644 --- a/vue.config.js +++ b/vue.config.js @@ -58,22 +58,16 @@ module.exports = { const hasCustomAppNav = process.env.CUSTOM_APP_NAV === 'true' ? true : false; - if (process.env.NODE_ENV === 'production') { - config.plugins.push( - new CompressionPlugin({ - deleteOriginalAssets: true - }) - ); - } - if (envName !== undefined) { if (hasCustomStore) { - // If env has custom store, resolve store module in src/main.js - config.resolve.alias['./store$'] = `./env/store/${envName}.js`; + // If env has custom store, resolve all store modules. Currently found + // in src/router/index.js src/store/api.js and src/main.js + config.resolve.alias['./store$'] = `@/env/store/${envName}.js`; + config.resolve.alias['../store$'] = `@/env/store/${envName}.js`; } if (hasCustomRouter) { - // If env has custom router, resolve router module in src/main.js - config.resolve.alias['./router$'] = `./env/router/${envName}.js`; + // If env has custom router, resolve routes in src/router/index.js + config.resolve.alias['./routes$'] = `@/env/router/${envName}.js`; } if (hasCustomAppNav) { // If env has custom AppNavigation, resolve AppNavigationMixin module in src/components/AppNavigation/AppNavigation.vue @@ -82,6 +76,14 @@ module.exports = { ] = `@/env/components/AppNavigation/${envName}.js`; } } + + if (process.env.NODE_ENV === 'production') { + config.plugins.push( + new CompressionPlugin({ + deleteOriginalAssets: true + }) + ); + } }, chainWebpack: config => { if (process.env.NODE_ENV === 'production') { |