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

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

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

Update login page layout

This update will:

- Change the positioning of the form to be on the left
- Add the built on OpenBMC logo to the bottom right corner of the
screen
- Add the ability to inclu

Update login page layout

This update will:

- Change the positioning of the form to be on the left
- Add the built on OpenBMC logo to the bottom right corner of the
screen
- Add the ability to include a GUI custom name using a .env variable.
If the variable is not present, the login page will not include the <h1>
section heading element.
- Remove the word "logo" from the alt attribute for the company logo
image used in the application header and on the login page.

Github story: https://github.com/openbmc/webui-vue/issues/63

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

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

Fix login layout logo alt text value

Update Login page logo alt text to use VUE_APP_COMPANY_NAME.
VUE_APP_COMPANY_NAME is already being used for the logo in the
application header.

Signed-off-by: Y

Fix login layout logo alt text value

Update Login page logo alt text to use VUE_APP_COMPANY_NAME.
VUE_APP_COMPANY_NAME is already being used for the logo in the
application header.

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

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

Intel environment

add environment for Intel
add logo as a placeholder

Signed-off-by: Mateusz Gapski <mateuszx.gapski@intel.com>
Change-Id: Iad1ef66ef73e7f9e0857122cc29729543cbf6682

Update use of Sass variables for better theming

Use Bootstrap color functions for theme-colors and grays instead
of directly referencing Sass variable to allow more flexible
theming.

Signed-off-by:

Update use of Sass variables for better theming

Use Bootstrap color functions for theme-colors and grays instead
of directly referencing Sass variable to allow more flexible
theming.

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

show more ...

Add code for Serial Over LAN

- The output of serial connection of the hosts on the workstation
terminal.
- The library used is xterm which will provide the terminal to show the
data.

Signed-off-by:

Add code for Serial Over LAN

- The output of serial connection of the hosts on the workstation
terminal.
- The library used is xterm which will provide the terminal to show the
data.

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I6000cae42f237fffe216e2079cf2a6c39db236fd

show more ...

Create separate LoginLayout component

Create a separate layout for the login page so it can be reused
for first time password reset form.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
C

Create separate LoginLayout component

Create a separate layout for the login page so it can be reused
for first time password reset form.

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

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