Revert "Add keep-alive option in webpack devServer"

This reverts commit bf37b317496c80dc9a87f49356efdab8a3b50caa.

The current version of the stack doesn't prevent logging in and all
operations with

Revert "Add keep-alive option in webpack devServer"

This reverts commit bf37b317496c80dc9a87f49356efdab8a3b50caa.

The current version of the stack doesn't prevent logging in and all
operations without overriding "Connection:" header.

This overriding is making it impossible to test any WebSocket-based
functionality (IP KVM, SOL, Virtual Media).

Tested: logging in, navigating the interface, using IP KVM and SOL
console.

Fixes: https://github.com/openbmc/webui-vue/issues/94
Change-Id: I6174c75e35784ff370f6adf7841c98ae78a26ceb
Signed-off-by: Paul Fertser <fercerpav@gmail.com>

show more ...

Disable index hashing in development mode

When in Dev server mode, we the webpack dev server isn't capable of
understanding wildcards, and that index.html, and index.<hash>.html are
the same thing.

Disable index hashing in development mode

When in Dev server mode, we the webpack dev server isn't capable of
understanding wildcards, and that index.html, and index.<hash>.html are
the same thing.

Disable the index file hashing when in dev mode.

Tested:
Launched dev server without bmc present. Observed UI could be loaded
correctly.

Change-Id: Ie2d3bfe4af0117681cec8c92f93d7e278b2071f2
Signed-off-by: Ed Tanous <ed@tanous.net>

show more ...

Make two webpack plugin modifications

First, remove the preload plugin installed by default. Given that the
login page requires the complete javascript package to be loaded before
the page can be r

Make two webpack plugin modifications

First, remove the preload plugin installed by default. Given that the
login page requires the complete javascript package to be loaded before
the page can be rendered, and doing the rendering inside of bmcweb
before javascript is loaded[1] doesn't seem to be desired by the
community, preloading it does us essentially no good. The DOM itself is
tiny.

This fixes a split second flash that's seen on refresh, where the DOM is
loaded, but the javascript has not, so there's no content to render.

Second, modify the html loader plugin to produce the hash of the file at
output, thus allowing the index file to be cached, and allowing the etag
machinery[2] to work.

[1] https://gerrit.openbmc.org/c/openbmc/bmcweb/+/35456
[2] https://gerrit.openbmc.org/c/openbmc/bmcweb/+/70644

Tested: After this patch, nearly all resources on refresh return 304,
not modified from bmcweb. This significantly reduces the requirements
for TLS encryption on the BMC.

Change-Id: I7189c6024cacba099705ff6d27e4567bf88f3df4
Signed-off-by: Ed Tanous <ed@tanous.net>

show more ...

Allow the favicon to be cached

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 fil

Allow the favicon to be cached

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>

show more ...

Limit to one chunk

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 ha

Limit to one chunk

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>

show more ...

Inline SVG

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 th

Inline SVG

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>

show more ...

Reformat files with new linter

All changes should be whitespace, and were done using npm run-script
lint.

Change-Id: I943c6b435c5c872841af5affc1e89910468b5ca6
Signed-off-by: Ed Tanous <ed@tanous.ne

Reformat files with new linter

All changes should be whitespace, and were done using npm run-script
lint.

Change-Id: I943c6b435c5c872841af5affc1e89910468b5ca6
Signed-off-by: Ed Tanous <ed@tanous.net>

show more ...

Hack webpack to not use MD4

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#issueco

Hack webpack to not use MD4

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>

show more ...

Add keep-alive option in webpack devServer

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.xy

Add keep-alive option in webpack devServer

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

show more ...

Update linting packages to use latest

- 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 pattern

Update linting packages to use latest

- 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

show more ...

Resolve Content-Security-Policy error

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

Resolve Content-Security-Policy error

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

show more ...

Create separate file for Vue Router routes

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

Create separate file for Vue Router routes

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

show more ...

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 nav

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

show more ...

Add env variable check to improve build customizations

Added flags for styles, router, and store. If these flags are set
to true, then webpack will attempt to resolve the environment
specific files.

Add env variable check to improve build customizations

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

show more ...

Add ability to customize theme styles

Showcases how different themes/styles can be supported using
.env variables. If an environemnt name is specified during
the build process, an overrides file wil

Add ability to customize theme styles

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

show more ...

Update Sass architecture to require helper imports

- Restructuring file strucure to support single file components use of
Sass variables when imported into vuepress.
- Creating a scalable file struc

Update Sass architecture to require helper imports

- 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

show more ...

Add webpack config for env specific builds

Add documentation and example files to make environment specific
build modifications.

- Store any env specific router and store modules in
separate env

Add webpack config for env specific builds

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

show more ...

Set up initial language translation

- 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 ti

Set up initial language translation

- 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

show more ...

Update config to keep 'secure' attribute

Since switching to secure https protocol for development
https://gerrit.openbmc-project.xyz/c/openbmc/webui-vue/+/28729/7
no need to remove 'secure' attribut

Update config to keep 'secure' attribute

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

show more ...

Add host status plugin

- 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 visuall

Add host status plugin

- 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

show more ...

Add singlequote override and fix files

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 commi

Add singlequote override and fix files

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

show more ...

Add compression and remove incompatible plugins

- Add gzip file compression
- Prefetch and preload plugins that add web loading primitives that are
not compatible with our server settings
- Move por

Add compression and remove incompatible plugins

- 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

show more ...

Add cookie based login authentication

- Changed POST request data structure to match
backend requirements for set-cookie in response
header
- Added withCredentials property to default
axios co

Add cookie based login authentication

- 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

show more ...

Add proxy dev server for local development

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_USE

Add proxy dev server for local development

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

show more ...

Create basic application using vue

- 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 a

Create basic application using vue

- 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>

show more ...