style: add Sass configuration for Vue 3

Configure sass in the vue.config.js file and remove the
import of the scss file from each page. The styles are
handled by the css loaderOptions in the config

style: add Sass configuration for Vue 3

Configure sass in the vue.config.js file and remove the
import of the scss file from each page. The styles are
handled by the css loaderOptions in the config file.
Every component and page has the appropriate style applied.
The appearance adjusts to the openBmc webui in Vue 2.

Change-Id: I3773c063646185b80b7bd61d05aa80a993cbd121
Signed-off-by: Surya Venkatesan <suryav@ami.com>

show more ...

refresh notifications upon "refresh" button click

Problem:
Clicking on Refresh button present on UI top panel does not
refresh active notifications or toast messages.
Only success notifications gets

refresh notifications upon "refresh" button click

Problem:
Clicking on Refresh button present on UI top panel does not
refresh active notifications or toast messages.
Only success notifications gets hidden automatically after 10s,
error, info notifications remains active on UI even after refresh
webui.

Solution:
Clear all types of active toast messages upon refresh click.

Changes:
In refresh method, using querySelectorAll on document object
and for each toast currently active, call bvToast.hide to clear.

Change-Id: I47ba416a6b8e8e9872b4b4867abf96bbbef7c0f1
Signed-off-by: Shubhi Garg <shgarg@nvidia.com>

show more ...

i18n, vue-router and vuex upgrade

1. Configuration of i18n legacy as false.
2. Translation function t is called using the useI18n.
3. Used the i18n.global.t() function from i18n instead of this.$t()

i18n, vue-router and vuex upgrade

1. Configuration of i18n legacy as false.
2. Translation function t is called using the useI18n.
3. Used the i18n.global.t() function from i18n instead of this.$t()
4. Event bus error that occurred during logout.
5. Implemented vue-router 4.4.0 and vuex upgrade to 4.1.0

Change-Id: I9464d82c76dcc1445ce271983ea3ab9d7b03d265
Signed-off-by: Surya Venkatesan <suryav@ami.com>

show more ...

Upgrade vue3 and all dependencies

Start the process of porting everything to Vue 3. I have most things
working. npm run-scripts build works, npm install works. prettier
passes. Styles load, logi

Upgrade vue3 and all dependencies

Start the process of porting everything to Vue 3. I have most things
working. npm run-scripts build works, npm install works. prettier
passes. Styles load, login works, webui loads.

This was primarily done using the linked documents below. It makes the
following design decisions:
1. Vue is put in compat 2 mode, which allows most of the components to
work as-is.
2. Bootstrap v4 is used along with bootstrap-vue to keep our components
working.
3. Minor changes are made to load the latest versions of vue-router,
vuex, and vue-i18n.

I suspect this patchset is good enough to start with, and we can clean
up the broken things one patchset at a time. The things that need to
happen are:

1. Get remaining features working again. This primiarily is vue-i18n
for mixins, and non vue components. This likely needs to be done by
not pulling in i18n into the non vue components, then using the .Vue
files to do the internationalization in the component context, NOT in
the mixin context. Alternatively, we could drop MixIns alltogether.
2. Get custom styles working again. Previously, we used some path
hackery in vue.config.js to optionally pre-load styles. This stops
working now that we're required to @import our modules. Likely we
need some rearangement of the paths such that custom styles are a
complete replacement (possibly importing the original) rather than
additive with overrides. That's a guess, but I don't really see
anyone else doing customization the way we've defined it here.
3. Bootstrap 5 no longer requires ANY custom vue modules, as it has
dropped the jquery dependency. We won't be able to pull in bootstrap
5 all at once, so pull in bootstrap 5 under an alias, like
"bootstrap5" that we can optionally import 5 or 4.
4. One at a time, start porting components over to Vue3 syntax and
bootstrap 5. This will be the bulk of the manual work and review.

The only thing I think left is getting unit tests passing, which I
commented out the pre-commit hook to make this PR.

Tested: Code builds. Needs better testing.

[1] https://router.vuejs.org/guide/migration/
[2] https://vue-i18n.intlify.dev/guide/migration/vue3
[3] https://vuelidate-next.netlify.app/migration_guide.html#package-name-and-imports

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

show more ...

Fix bug with running kvm-session after logout

Add listener that checks username in local storage every 10 seconds.
If it's empty, listener closes kvm console.

Change-Id: I3cde71f4dc9772cddcf3a2f00f

Fix bug with running kvm-session after logout

Add listener that checks username in local storage every 10 seconds.
If it's empty, listener closes kvm console.

Change-Id: I3cde71f4dc9772cddcf3a2f00f6e49f4d78f8383
Signed-off-by: Konstantin Maskov <sulwirld@gmail.com>

show more ...

Fixed refresh system info on header

The refresh button in the App header previously only re-rendered
the main mage section, this change also refreshes the app header
and main content.

Signed-off-by

Fixed refresh system info on header

The refresh button in the App header previously only re-rendered
the main mage section, this change also refreshes the app header
and main content.

Signed-off-by: Kenneth Fullbright <kennyneedsmilky@gmail.com>
Change-Id: Iff7f3f14bca8ddfd815ccb1b87dd182c4bfd79ba

show more ...

Add quicklinks to hardware status page

- Renames SetFocusMixin to JumpLinkMixin to better describe what the
mixin is for: jump links like quick links and skip to main content
- Adds scrollToOffset m

Add quicklinks to hardware status page

- Renames SetFocusMixin to JumpLinkMixin to better describe what the
mixin is for: jump links like quick links and skip to main content
- Adds scrollToOffset method to JumpLinkMixin methods to scroll to
selected page elements
- Scroll offset is required to show table header below the nav header
- Setting focus is required for accessibility

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I500a2d70727c5a78aeae4a6193ba22a38e4f0b6f

show more ...

Fix skip link 404 error on refresh bug

Problem:
When a user uses the skip link anchor to skip the navigation, the
route was being changed to /#main-content. This route does not
exist. If a user were

Fix skip link 404 error on refresh bug

Problem:
When a user uses the skip link anchor to skip the navigation, the
route was being changed to /#main-content. This route does not
exist. If a user were to manually refresh the page, it would
return a 404. This link is critical to meet accessibility
guidelines and is needed by users that navigate with a keyboard.

The challenge is that we need to mirror a full page refresh on all
route changes, so we set focus on the app-header element on each route
change. When we click the skip to navigation link, there should not be
a route change. All we need is to set focus on the <main> element so
that the user can tab to the first tabbable element in the main content
section.

Solution:
- Use a native <a> element with an attached click event handler
- Prevent the default action of adding the hash to the URL
- Create a global mixin to reuse for route changes and skip link
activation
- Emit an event that can be listened for to call the global mixin

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I4c2301b02f608eeb376ed2d1bd809f3d5c1bf545

show more ...

Update single file firmware upload page

These updates are visible with IBM dotenv variables. Updates
include changes to layout and verbiage.

- Added a global application refresh listener, so app re

Update single file firmware upload page

These updates are visible with IBM dotenv variables. Updates
include changes to layout and verbiage.

- Added a global application refresh listener, so app refresh
can be called from components outside of the application header

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I5ebe6452a0360b6cced5597b648cde33e97c5a1f

show more ...

Add back to top button to hardware status page

- Created global back to top button

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I32022613e1ba62667b46150463c8f407b0b4ff11

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

Update relative path imports to use '@' alias

- Add '@/' instead of '../../../'

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ida1dc26f2bd62f38914a74b729ee8fd143c360ac

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

The main navigation will be collapsed until the viewport
minimum width reaches the Bootstrap defined 'lg' breakpoint
(defaults to 992px).

- Adding motion variables and updatin

Add responsive layout

The main navigation will be collapsed until the viewport
minimum width reaches the Bootstrap defined 'lg' breakpoint
(defaults to 992px).

- Adding motion variables and updating some CSS values to
use existing Sass variables

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id159b84da6adf55fdb15842b0e33b1ede4eeceb4

show more ...

Add refresh functionality in app header

Clicking refresh in the app header will update the :key
value for the router-view component, and trigger a
component re-render.

Signed-off-by: Yoshie Muranak

Add refresh functionality in app header

Clicking refresh in the app header will update the :key
value for the router-view component, and trigger a
component re-render.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I15da6d2d04fc311dfc092fbe840add950180124f

show more ...

Change eslint rules to use vue recommended

Resubmitting after reverted–original commit here
https://gerrit.openbmc-project.xyz/c/openbmc/webui-vue/+/28763/7

- Ran npm run lint
- Resolved eslint iss

Change eslint rules to use vue recommended

Resubmitting after reverted–original commit here
https://gerrit.openbmc-project.xyz/c/openbmc/webui-vue/+/28763/7

- Ran npm run lint
- Resolved eslint issues

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I2b8b9244acddd483d0a72f9a5d156a79de9869a0

show more ...

Revert "Change eslint rules to use vue recommended"

Merged accidentally. Although this one did have the proper +1s/+2s.
The 2 underneath did not. The author will resubmit.

This reverts commit 5e7ac

Revert "Change eslint rules to use vue recommended"

Merged accidentally. Although this one did have the proper +1s/+2s.
The 2 underneath did not. The author will resubmit.

This reverts commit 5e7ac49058e5dc37fd43ecf3c0d06f5dda14af5b.

Change-Id: Iceb1de3a170cc0b592b183545c792aa3eb87bfee
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>

show more ...

Change eslint rules to use vue recommended

- Ran npm run lint
- Resolved eslint issues

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Icd433ca55321d8bceb941e2d13ebade72bd4981f

Fix linting in script blocks in vue files

- Removed the .eslintrc and added the pretteri rules to the eslintrc file
- Ran `npm run lint --fix`

Signed-off-by: Derick Montague <derick.montague@ibm.co

Fix linting in script blocks in vue files

- Removed the .eslintrc and added the pretteri rules to the eslintrc file
- Ran `npm run lint --fix`

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I4e36c1967ae9b4d839ef88f1d47ffa20ab4e4991

show more ...

Add page level layout components

Adding components to help standardize type, size, spacing
for common elements on a page.

Also removed a conflicting class name and added modifications
to the main c

Add page level layout components

Adding components to help standardize type, size, spacing
for common elements on a page.

Also removed a conflicting class name and added modifications
to the main container. The main container needed a min-height
and height value set, which became apparent with added
background color. Adding a background color will move us
closer to agreed design solution to add a subtle background
color instead of adding a border to separate main content from
left hand navigation.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie63c4f0c0f3fd199fa0ca790065402e06a613691

show more ...

Add skip navigation link

This is needed because SPAs do not perform a full page load.
- Add watchers to change focus on ApplicationHeader component element.
This is needed because SPAs do not perfor

Add skip navigation link

This is needed because SPAs do not perform a full page load.
- Add watchers to change focus on ApplicationHeader component element.
This is needed because SPAs do not perform a full page load.
- Add styling for skip to content button

Remove setTimeout call the nextTick method is sufficient. The setTimeout
call was used to handle an iOS 7 bug, which is not a device we support.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ia80c4442ee917d50513c5d1aeb22791e8598bee7

show more ...

Add login and logout functionality

- Add AuthenticationStore
- Add ability to login and logout
- Add route navigation guard
- Add login styles
- Add temporary authentication for api call
- Add Login

Add login and logout functionality

- Add AuthenticationStore
- Add ability to login and logout
- Add route navigation guard
- Add login styles
- Add temporary authentication for api call
- Add Login directory
- Add index.js

In order to login a .env.development.local file that contains
BASE_URL="https://<ip address> or <FQDN>"

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I88b93e287e66f4bae82a1ec2934cdef12d78264e

show more ...