search

openbmc / webui-vue

Web-based user interface built on Vue.js for managing OpenBMC systems
https://openbmc.github.io/webui-vue/
Apache License 2.0
52 stars 54 forks source link

Migrate to Vue 3 #95

Open dixsie opened 2 years ago

dixsie commented 2 years ago

Overview

Migration docs

Requirements

UI Checklist

Browser Tests (Chrome, Firefox, Safari (Mac), Edge (Windows))

dixsie commented 2 years ago

@edtanous's proposal/discussion: https://gerrit.openbmc.org/c/openbmc/webui-vue/+/55438

dixsie commented 2 years ago

Dixsie's attempt April 4, 2021

All official libraries and tools now support Vue 3, but @vue/test-utils is still in release candidate status.

Breaking changes observed:

  • The beforeDestroy lifecycle hook is deprecated. Use beforeUnmount instead
  • Filters deprecated
  • VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.
  • VueCompilerError: v-if/else branches must use unique keys.
  • Props default value factory functions no longer have access to this
dixsie commented 2 years ago

BootstrapVue currently does not support Vue3

https://bootstrap-vue.org/docs

Vue.js v2.6 is required, v2.6.12 is recommended

edtanous commented 2 years ago

It looks like bootstrap-vue-3 exists in an early state?

https://www.npmjs.com/package/bootstrap-vue-3

edtanous commented 2 years ago

The beforeDestroy lifecycle hook is deprecated. Use beforeUnmount instead

This is handled in my patch

Filters deprecated

VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.

I didn't see this one in my tests; Maybe it was a regression that was fixed later?

VueCompilerError: v-if/else branches must use unique keys. Props default value factory functions no longer have access to this

There was one instance of this, and I think I resolved it by moving to the more common pattern (I think). I added a comment on my review on this line for someone with more knowledge to review.

laoshaw commented 1 year ago

what about vuetify3, it's now fully vue3 ready with MIT license.

kirankumarb07 commented 8 months ago

Raised following WIP PR for Vue3 migration.

https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959

@gtmills @Nikhil-Ashoka @Renuka9527 @sivaprabug

Renuka9527 commented 7 months ago

Pushed one commit to the https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959 1.Added Global Mixins 2.Added Global styles and sass configuration in vite config

  1. Implemented Appheader with composition Api with setup attribute Screenshot: Header image

    Mixins

    image

    Styles:

    image

    @gtmills @Nikhil-Ashoka @kirankumarb07 @sivaprabug

Renuka9527 commented 5 months ago

Pushed the below changes

  1. Removed Mixins Folder.
  2. Implemented Composables.
  3. Implemented Date filters and eventBus( We can use event Bus for emitting the global events).
  4. Added Toast implementation, can be removed when we change the styling library. @gtmills @Nikhil-Ashoka @kirankumarb07 @sivaprabug
suryav9724 commented 2 months ago

Pushed below changes to the https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959

  1. Search global component.
  2. Table cell count global component.
  3. Table row action global component.
  4. Table toolbar global component.
  5. Session page.

Session Page: image

@kirankumarb07 @sivaprabug @gtmills @Renuka9527 @Nikhil-Ashoka

Renuka9527 commented 2 months ago

Pushed below changes. https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959

  1. Added CSP.
  2. Added build build chunksize limit, The build time is reduced from 6mins to 25 secs.Application Loads faster
  3. As we are sticking to the bootstrap-vue-next, added the functionlaity of Toast as-well. image
suryav9724 commented 1 month ago

Pushed below changes https://gerrit.openbmc.org/c/openbmc/webui-vue/+/55438/5..6

  1. The above PR is not built in the local development, fixed that issue by configuring i18n legacy as false.
  2. The translation function t is called using the useI18n in the Login page, Overview page, App Header, App Navigation, and respective file for those pages.
  3. In the script tag, we can't use this.$t() function for translation. we should use the i18n.global.t() function from i18n. So the page title issue is fixed by this function.
  4. Fixed the event bus error that occurred during logout.

image

kirankumarb07 commented 1 month ago

Pushed below changes https://gerrit.openbmc.org/c/openbmc/webui-vue/+/55438/5..6

  1. i18n for the Login page, Overview page, and app navigation.
  2. Page title.
  3. logout error.

@suryav9724 As discussed, please explain the issues/fixes in detailed manner for the latest pushed the code changes.

suryav9724 commented 1 month ago

Pushed below changes to https://gerrit.openbmc.org/c/openbmc/webui-vue/+/72552/3..4

  1. upgrade vue-router to "4.4.0", upgrade vuex to "4.1.0".
  2. App navigation issue fixed by index configuration for router.
  3. I18n implemented in the Event log page and Global component that are used in the Event log page.
suryav9724 commented 1 month ago

Pushed below changes to PR https://gerrit.openbmc.org/c/openbmc/webui-vue/+/72701

  1. i18n Issues fixed in all pages that occur while navigating.
  2. vuelidate $v changed to v$ to support vuelidate in vue 3 on all pages.
  3. Filter function for date and time format declared in main.js
  4. To use the filter function in Vue 3 pipe can't be used. We have to call the filter function using the $filters, that changes has been implemented in the pages that used the filters.
suryav9724 commented 3 weeks ago

Cherry-pick the master commits to the vue3 branch

vue3 #PR Master commit ID
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73124 bc49e09187cab43f8564f2adb6b8860544870641
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73188 1ff8e89fd2397c468ab0237158e5aeeff2692413
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73189 582e954ecff4edf58c143dc644a21b15005e8109
suryav9724 commented 3 weeks ago

Add user validation in the user management page code changes push to the PR#73249 in Vue3 branch https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73249