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

Fixed icon or text only button accessibility

- Add sr-only element to icon only buttons
- Removed title from text only buttons

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

Fixed icon or text only button accessibility

- Add sr-only element to icon only buttons
- Removed title from text only buttons

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

show more ...

Add alignment on Event Logs page

- Align table search, count and date components on Event Logs page.

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

Add alignment on Event Logs page

- Align table search, count and date components on Event Logs page.

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

show more ...

Align button icons

- Fixes button icon and text alignment
- App header buttons to be addressed separately
- Button documentation will be addressed in separate commit
- Aligns form input buttons: dat

Align button icons

- Fixes button icon and text alignment
- App header buttons to be addressed separately
- Button documentation will be addressed in separate commit
- Aligns form input buttons: datepicker, clear search, and password toggle
- Moves title from icon to button for icon only buttons
- Aligns validation icon with form input buttons

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

show more ...

Resolve custom-event-name-casing lint warnings

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

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 table search filter clear button

- Adds ability to quickly clear a table input search field
- Uses similar styling to password toggle icon and datepicker
- Button style to be addressed in separa

Add table search filter clear button

- Adds ability to quickly clear a table input search field
- Uses similar styling to password toggle icon and datepicker
- Button style to be addressed in separate commit to match
style guide

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

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

Fix browser warning of non-unique id on Hardware page

Adds a unique id to the global search component.
The search component has an id attribute. When it is reused on
the same page, like Hardware sta

Fix browser warning of non-unique id on Hardware page

Adds a unique id to the global search component.
The search component has an id attribute. When it is reused on
the same page, like Hardware status, the id is no longer unique
within the document.

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

show more ...

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

Fix Search component default prop validation

Changed placeholder prop validation to use a regular function instead of
an arrow function to fix undefined errors where 'this' is undefined.

Signed-off

Fix Search component default prop validation

Changed placeholder prop validation to use a regular function instead of
an arrow function to fix undefined errors where 'this' is undefined.

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

show more ...

Global Search component

Added global Search component to Sensors page.

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