summaryrefslogtreecommitdiff
path: root/vue.config.js
AgeCommit message (Collapse)AuthorFilesLines
2024-04-26Allow the favicon to be cachedEd Tanous1-0/+8
The favicon is currently loaded directly by url. This commit changes it to be loaded by file-loader. Note, the default vue webpack file loader doesn't support ico file types (because it seems to expect to use a png here), so add that to the file loader config. This allows bmcweb [1] to provide caching headers for the favicon, and avoid downloading a new favicon on every refresh. Tested: Webui-vue loads, favicon in the network panel loads properly. [1] https://gerrit.openbmc.org/c/openbmc/bmcweb/+/70644 Change-Id: I27e5b459ff8822294ac9273220111e9944e8d1e5 Signed-off-by: Ed Tanous <ed@tanous.net>
2024-04-26Limit to one chunkEd Tanous1-0/+20
Considering that currently, there's no way to load the login page without both the main json, and the 1 vendor chunk, chunking itself gets us no extra performance, and makes it harder on the bmc, because we now have to respond to two requests instead of one. These requests in practice happen serially, so on high RTT connections, it can be a negative on performance. Simplify by changing the webpack settings to produce one chunk. Tested: Webui loads properly. No errors on console when clicking around. Change-Id: Ida5bb748429137eb2414be1990168affe1d001af Signed-off-by: Ed Tanous <ed@tanous.net>
2024-04-09Inline SVGEd Tanous1-0/+6
Having the SVG files loaded as a separate package significantly increases the load time of the UI, as it forces the images to be downloaded AFTER the page has loaded. This commit adds the vue-svg-inline-loader, and appropriate config such that the styles can be inlined, and a second trip to the BMC is not required to load the login screen. This improves the "time to glass" of the webui quite a bit. Tested: Webui loads. Network tab shows svg files are not loaded. Webui login page looks correct. First load of the webui renders 500ms faster (1.9s vs 1.4s) Change-Id: Iebcd9ab5df6edad0a1a5c53c028eccd2fda8f63c Signed-off-by: Ed Tanous <ed@tanous.net>
2024-03-05Reformat files with new linterEd Tanous1-4/+3
All changes should be whitespace, and were done using npm run-script lint. Change-Id: I943c6b435c5c872841af5affc1e89910468b5ca6 Signed-off-by: Ed Tanous <ed@tanous.net>
2022-01-14Hack webpack to not use MD4Gunnar Mills1-0/+5
No longer have support for MD4, the default hashFunction. Mess with webpack to use sha256. This solution is from: https://github.com/webpack/webpack/issues/13572#issuecomment-923736472 And was added to phosphor-webui here: https://github.com/openbmc/phosphor-webui/commit/85884002164aacfeac8ca40e6fd169b0a2de43f0 Ideally --openssl-legacy-provider would work as https://github.com/webpack/webpack/issues/14532 describes but Node 16 supports linking with SSL 3.0 but doesn't support openssl-legacy-provider. See https://github.com/nodejs/node/issues/40948. This should enable the new Yocto bump to pass. Tested: Build Witherspoon Tacoma with https://gerrit.openbmc-project.xyz/c/openbmc/openbmc/+/48473 and the 3 and this change. The webui looked good. Change-Id: I66f2cc45af85096f9abe935d269838c6a680bc9b Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
2021-11-04Add keep-alive option in webpack devServerDixsie Wolmers1-0/+3
When running the UI locally we were running into the issue of getting logged off after logging in because of this change: https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/45175 Adding the keep-alive option in the webpack config prevents this. Signed-off-by: Dixsie Wolmers <dixsie@ibm.com> Change-Id: Ic82b4aa1a272d8ea900c240fbe5f527ebe2e608d
2020-11-03Update linting packages to use latestDerick Montague1-12/+12
- 99% of changes were small syntax changes that were changed by the lint command. There were a couple of small manual changes to meet the property order patterns established as part of the vue:recommended guidelines. There are rules that were set from errors to warnings and new stories are being opened to address those issues. Testing: - Successfully ran npm run serve - Successfully ran npm run lint - Verified functionality works as expected, e.g. success and failure use cases - Resolved any JavaScript errors thrown to the console Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Ie082f31c73ccbe8a60afa8f88a9ef6dbf33d9fd2
2020-10-23Resolve Content-Security-Policy errorDerick Montague1-6/+0
In Firefox there was an no unsafe eval error which was caused when users had the vue dev tools extenstion installed and enabled. The other issue was the loading of a resrouce at inline (style-src) which was caused by the SVG icons coming from the Carbon icons vue library. - Updated the Carbon icons to the latest version to resolve the CSP issue. - Remove chainwebpack option only used for prefecth as this is not needed. Originally this was an issue when using code splitting. Changing how we import views for routes and creating a single bundle removes the need for this option. - Update how fill color is applied to StatusIcon component. The Carbon icons update results in adding the fill property to the svg container does not cascade resulting in all icons rendering as their default fill color. GitHub Issue: https://github.com/openbmc/webui-vue/issues/32 Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I4846f80c993c129d5e88fceda13d53fab51d7c8a
2020-09-25Create separate file for Vue Router routesYoshie Muranaka1-12/+14
Separating routes into its own JS file to allow for easier env customizations. Update store resolve path to make sure right env stores modules are imported in every file. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I5c646c81fab54085198b2e179be80c954258f51c
2020-09-17Update config to enable custom app navigationYoshie Muranaka1-0/+8
- 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
2020-09-01Add env variable check to improve build customizationsYoshie Muranaka1-6/+15
Added flags for styles, router, and store. If these flags are set to true, then webpack will attempt to resolve the environment specific files. If these flags are not explicitly set to true, the default files are used. This will give us more flexibility and remove the need to create empty env files (eg env/router/ibm.js). Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I552ad402621a3bbad3e871076a894ecadf9e82c7
2020-07-27Add ability to customize theme stylesYoshie Muranaka1-0/+33
Showcases how different themes/styles can be supported using .env variables. If an environemnt name is specified during the build process, an overrides file will be pulled in to allow modifications to color and font definitions. This commit includes possible style modifications with the openpower env name as an example. To see the openpower changes, add the variable definition VUE_APP_NAME="openpower" to your .env.development.local file or build using 'npm run build -- --mode openpower' - Moves helper imports into vue config to allow for specific import order - Removed helper imports in SFCs Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Iaf7a59c24fda06a7b74e23f2f042fb3300cb2056
2020-05-05Update Sass architecture to require helper importsDerick Montague1-9/+0
- Restructuring file strucure to support single file components use of Sass variables when imported into vuepress. - Creating a scalable file structure using Sass best practices Tested by building and testing both the vue web ui and the the documentation application. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Iddcefbf305c8dac978ee24e903df33b609e395e3
2020-04-25Add webpack config for env specific buildsYoshie Muranaka1-0/+8
Add documentation and example files to make environment specific build modifications. - Store any env specific router and store modules in separate env directory Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: I06ff3cb0928707354266dd25b399710847e7fa18
2020-02-13Set up initial language translationDixsie Wolmers1-1/+7
- Add i18n internationalization plugin - Create json files for group 0 English and Spanish - Uses $t method to set up initial translations on login page - Meta title is translated using i18n in App.vue and PageTitle.Vue Signed-off-by: Dixsie Wolmers <dixsie@ibm.com> Change-Id: Ifce9f5e54d96f8b2a13239ad6178892f99fc4537
2020-02-05Update config to keep 'secure' attributeYoshie Muranaka1-8/+0
Since switching to secure https protocol for development https://gerrit.openbmc-project.xyz/c/openbmc/webui-vue/+/28729/7 no need to remove 'secure' attribute from response header. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Ic7bddb4572ec8ccd3029c493ca57627dd24b8ae4
2020-01-29Add host status pluginYoshie Muranaka1-0/+13
- Create WebSocket and get host state changes from server - Changed webpack devServer to https to allow for secure WebSocket creation (wss) - Updates to AppHeader to visually indicate changes in host state - Cleaned up api.js file - Check if user is logged in when creating WebSocket - Adds check if user is already authenticated so WebSocket is created when browser refreshed. - Add appliation header styles - Add sass loader config changes to allow sass variables to be used in single file components URL must use https protocol when running locally or the page will not load. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I35e89bdc09e1aa35a6215ef952409a8ed16dd9e1
2020-01-27Add singlequote override and fix filesDerick Montague1-10/+10
Based on phosphor-webui and JavaScript common practices we are setting ESLint to required single quote for JS files and double quote for SCSS files. This commit adds the ESLint override to the prettier rules and runs the npm lint script that fixes the files that violate the rule. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I50cba77b2d0797595ce94258029608efa8665005
2020-01-27Add compression and remove incompatible pluginsDerick Montague1-0/+19
- Add gzip file compression - Prefetch and preload plugins that add web loading primitives that are not compatible with our server settings - Move port to run dev from script flag to vue config file - Remove sourcemap files from production build Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I8df6ef7a73ad687dc2c7f5db810a221668a1dd01
2020-01-27Add cookie based login authenticationYoshie Muranaka1-1/+15
- Changed POST request data structure to match backend requirements for set-cookie in response header - Added withCredentials property to default axios config - Modifying proxied response to remove 'Secure' flag so browser can create Cookie while running locally - Add logout api request - Add js-cookie package to manage browser cookies - Update the babel preset config to include useBuiltIns, which resolves MIME type errors when overlaying - Disable vue-router history mode to use routher hash mode to resolves 404 errors when refreshing certain pages. This is expected behavior with history mode enabled. Server configuration changes are required to support HTML5 history mode: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I5d43f36ef546962474b6cc8fff89564f29048fde
2020-01-22Add proxy dev server for local developmentYoshie Muranaka1-1/+5
Adding proxy server to vue config to handle API requests for local development. You need to create a .env.development.local file with BASE_URL, VUE_APP_USERNAME, VUE_APP_PASSWORD defined. Temporarily adding authentication to defaults until login flow is functional. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Ib1a1a992508fb9567af66ecb5775638e6ae6ee8d
2020-01-21Create basic application using vueDerick Montague1-0/+1
- Create vue app - Add AppHeader and AppNavigation - Set up routes for server overview and local user management - Add themes and set to gray-10 theme - Add active class for current navigation - Add a prototype method named $http to vue prototype - The UI uses console logs in production to communicate to users - Add boostrap vue component library Change-Id: Ib6618e6357ca01bdac6de4ed031a15c8552226f3 Signed-off-by: Derick Montague <derick.montague@ibm.com>