Vuelidate, I18n, and filter are upgraded to vue3

While navigating to the pages i18n, vuelidate, and filters errors
occurred. i18n, and vuelidate code changes in each page adapted to
vue3. Filter glo

Vuelidate, I18n, and filter are upgraded to vue3

While navigating to the pages i18n, vuelidate, and filters errors
occurred. i18n, and vuelidate code changes in each page adapted to
vue3. Filter global function for date and time format implemented
in the main.js file and those files which as called the filter
functions.

Change-Id: If1a2ee22d47750faef1c35ef2c263299067d9a20
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 kvm session and add event bus

Bug description:
Before this commit KVM window wasn't being closed
after logging out

Test: Step1. Launch webui on browser and see KVM page on /#/operations

Fix kvm session and add event bus

Bug description:
Before this commit KVM window wasn't being closed
after logging out

Test: Step1. Launch webui on browser and see KVM page on /#/operations/kvm.
Step2. Open additional window using 'Open in new tab'.
Step3. Navigate to another page. For example, /#/operations/key-clear.
Step4. Logout. Window is still open.

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

show more ...

Network settings redesign - interface settings

First commit of the network settings redesign:

- Adds the global network settings section for DHCP settings
- Adds read only hostname, FQDN and MAC ad

Network settings redesign - interface settings

First commit of the network settings redesign:

- Adds the global network settings section for DHCP settings
- Adds read only hostname, FQDN and MAC address,
modal to edit each will be done seperately
- Removes interface specific sections to refactor in next commit
- Adds tab component to display ethernet data by interface
- Ability to edit, delete and add ipv4 addresses and DNS will
be done in separate commit

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

show more ...

Fix cross-browser time formatting bug

To format the BMC time as 24 hour time, we used the `hour12` property.
In Chrome, the time between 12:00 AM and 1:00 AM is displaye as 24:xx,
instead of 00:xx.

Fix cross-browser time formatting bug

To format the BMC time as 24 hour time, we used the `hour12` property.
In Chrome, the time between 12:00 AM and 1:00 AM is displaye as 24:xx,
instead of 00:xx. The cross-browser solution is to replace the `hour12`
property with the `hourCycle` property so that all the time is formatted
as 00:xx.

Reference for Intl.DateTimeFormat constructor
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat

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

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

Add comments for imports that support dotenv

We have set up exact match resolve aliases to support different
dotenv build customizations. Added comments to the imports
that should not be changed.

S

Add comments for imports that support dotenv

We have set up exact match resolve aliases to support different
dotenv build customizations. Added comments to the imports
that should not be changed.

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

show more ...

Add Firmware page

Adds ability to upload a fimware image by local workstation
or TFTP. Also adds ability to reboot BMC from the backup image.

- Add route definition, component view, and store for

Add Firmware page

Adds ability to upload a fimware image by local workstation
or TFTP. Also adds ability to reboot BMC from the backup image.

- Add route definition, component view, and store for
Firmware page
- Get ActiveSoftwareImage location at /redfish/v1/Managers/bmc
- Get backup by checking for an image id that is not the same as
the active image /redfish/v1/UpdateService/FirmwareInventory
- Switch running firmware image by making PATCH request to
/redfish/v1/Managers/bmc

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

show more ...

Add timezone to profile settings page

- Users will have two options to select a timezone.
- UTC and browser offset timezone are the two options for the application.
- date-fns and date-fns-tz is

Add timezone to profile settings page

- Users will have two options to select a timezone.
- UTC and browser offset timezone are the two options for the application.
- date-fns and date-fns-tz is used for date and time manipulations because:-
- The package size of library is smaller.
- It allows for importing functions to work with the native date object
rather than having to create a moment instance that carries a larger payload.

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

show more ...

Add date filter on Event logs page

Created global TableDateFilter component that uses the BootstrapVue
Datepicker with a native text input. This will allow users to manually
enter a date in ISO form

Add date filter on Event logs page

Created global TableDateFilter component that uses the BootstrapVue
Datepicker with a native text input. This will allow users to manually
enter a date in ISO format or use the Bootstrap calendar dropdown.

Storing language preference from Login to use locale prop on
BootstrapVue Datepicker component.

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

show more ...

Add pagination to Event Log table

Created BvPaginationMixin for shared pagination values
and methods. Chose to use exising BoostrapVue components
as-is instead of wrapping in a custom component sinc

Add pagination to Event Log table

Created BvPaginationMixin for shared pagination values
and methods. Chose to use exising BoostrapVue components
as-is instead of wrapping in a custom component since
it would add unnecessary complexity.

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

show more ...

Update date filter to use international date format ISO

ISO 8601 format is the standard for international date formats.
- Formats date as: YYYY-MM-DD, example 2020-06-05

https://www.w3.org/QA/Tips

Update date filter to use international date format ISO

ISO 8601 format is the standard for international date formats.
- Formats date as: YYYY-MM-DD, example 2020-06-05

https://www.w3.org/QA/Tips/iso-date

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

show more ...

Create LoadingBar component

Create loading bar component to indicate when page data
is 'loading'. Not every component view will need to show the
loading bar (eg Reboot BMC).
The LoadingBarMixin can

Create LoadingBar component

Create loading bar component to indicate when page data
is 'loading'. Not every component view will need to show the
loading bar (eg Reboot BMC).
The LoadingBarMixin can be imported per component as needed.

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

show more ...

Add LDAP page

Adds ability to enable LDAP service and modify LDAP and
ActiveDirectory properties.

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

Add LDAP page

Adds ability to enable LDAP service and modify LDAP and
ActiveDirectory properties.

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

show more ...

Create TableFilter component

Global TableFilter component and TableFilterMixin can be used
with any table. The TableFilterMixin will return filtered
data with items that match any of the filter tags

Create TableFilter component

Global TableFilter component and TableFilterMixin can be used
with any table. The TableFilterMixin will return filtered
data with items that match any of the filter tags.

When the table search component is built, it should use the
BoostrapVue Table :filter prop.

- Filter by status added to Sensors table

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

show more ...

Create accessible InfoTooltip Component

Adds a global reusable component that will display
the info icon with accesible markup.

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

Create accessible InfoTooltip Component

Adds a global reusable component that will display
the info icon with accesible markup.

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

show more ...

Add generate CSR to SSL certificates page

Adds ability to generate, then download or copy a CSR from the GUI

- Import FormTagsPlugin to use for alternate names field

Signed-off-by: Yoshie Muranaka

Add generate CSR to SSL certificates page

Adds ability to generate, then download or copy a CSR from the GUI

- Import FormTagsPlugin to use for alternate names field

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

show more ...

Add SSL Certificates page

Adds ability to view, add, replace, and delete SSL
certificates in GUI.

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

Add SSL Certificates page

Adds ability to view, add, replace, and delete SSL
certificates in GUI.

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

show more ...

Remove unused colors from color palette

The color palette has been stripped down to a
maximum of two colors shades per palette. This
works for our design since components use a
base color with a lig

Remove unused colors from color palette

The color palette has been stripped down to a
maximum of two colors shades per palette. This
works for our design since components use a
base color with a lighter color as an accent
color. This change reduces the amount of CSS
generated by Bootstrap when the CSS is compiled.

Github Story: https://github.com/openbmc/webui-vue/issues/2

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

show more ...

Format date and time for international locales

Uninstalls vue-date-fns and uses toLocaleDateString() method to
return formatted date and time.

Date language is set by i18n and time/timezone i

Format date and time for international locales

Uninstalls vue-date-fns and uses toLocaleDateString() method to
return formatted date and time.

Date language is set by i18n and time/timezone is formatted by
browser locale.

Uses vue filter to format date and time as:
- short month, day, year, time and timezone
- 'en' example: Feb 23, 2020, 3:40:25 PM CST
- 'es' example: 25 feb 2020 14:23:36 GMT-6
- hour12 value is determined by browser default

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

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

Add toast component interactions

Include boostrap toast component to communicate success
and error requests on the local user management page.

- Created BVToastMixin to share initialization options

Add toast component interactions

Include boostrap toast component to communicate success
and error requests on the local user management page.

- Created BVToastMixin to share initialization options
- Used async/await pattern to make sure toasts are shown
after asynchronous calls are complete
- Followed current AngularJS pattern of manual dismiss for
error toast and automatic dismiss for success toast

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

show more ...

Update local user layout and styles

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

- Add BVConfig plugin to modify boostrap componen

Update local user layout and styles

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

- Add BVConfig plugin to modify boostrap component
defaults
- Add vuelidate
- Add package and basic validations to user form
- Add all user form validations
- Add checks for edit user
- Create VuelidateMixin for shared methods
- Update Login to use Vuelidate

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

show more ...

Revert "Update local user layout and styles"

Merged accidentally. Did not have proper +1s/+2s. The author
will resubmit. Apologies for the noise.

This reverts commit 5fa09a25c207d13ec1c9a8df92fc058

Revert "Update local user layout and styles"

Merged accidentally. Did not have proper +1s/+2s. The author
will resubmit. Apologies for the noise.

This reverts commit 5fa09a25c207d13ec1c9a8df92fc058f15a872e1.

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

show more ...

Update local user layout and styles

- Add BVConfig plugin to modify boostrap component
defaults
- Add vuelidate
- Add package and basic validations to user form
- Add all user form validations
- Add

Update local user layout and styles

- Add BVConfig plugin to modify boostrap component
defaults
- Add vuelidate
- Add package and basic validations to user form
- Add all user form validations
- Add checks for edit user

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

show more ...