Define an incremental plan to upgrade towards Vue.js 3

[viniarck]

Vue 2 will reach End of Life (EOL) on December 31st, 2023. After that date, Vue 2 will continue to be available in all existing distribution channels (CDNs and package managers), but will no longer receive updates, including security and browser compatibility fixes.

https://v2.vuejs.org/lts/

Objective

Define an incremental plan to upgrade towards Vue.js 3, just so ui core doesn't not accumulate technical debt and other vulnerabilities. ui is a core part of kytos-ng as a product, it's important for network operators. We don't necessarily need an full blown blueprint for this, having the discussion on this issue is sufficient.

At the moment, our goal is to try to maintain most of the ui functionality as it is, we don't immediately need new functionalities, better perf, TypeScript support from Vue3. So, when choosing and strategy let's keep that in mind, and then later on we also decide if it's worth trying to adopt the composition API over the options API.

This issue here is partly related to https://github.com/kytos-ng/kytos/issues/183, but we have reduced the scope to only deal with Vue 2 EOL situation.

Initial Information

As highlighted on Vue2 js website, the options are:

• Upgrade to Vue 3
• Upgrade or not to Upgrade

Is @vue/compat an option for us (do our dependencies break)? or should we go with the intermediary Vue 2.7 at least that's recommended?

cc'ing @rmotitsuki @Niehaus if you'd like to contribute to what strategy we should go for (other core members and contributors will also participate but if you'd like to lead the discussion and which approaches we should go for).

Barbara, thanks for initially brainstorming about overall strategies.

[viniarck]

Feb 10th meeting notes:

• Assess/measure the effort and possibility to try to go to Vue 3 based on the changelog
• vuex/pinia (related to managing global vars)? See if it helps with requests / cache
• webpack -> vite? (can this help with build production to improve error messages on console?)
• check libraries deprecations and what else what we have that might break

[viniarck]

• https://storybook.js.org/ -> it can improve the docs, build and mocks

[viniarck]

On 2024.1 the migration is expected to happen, regarding the plan @rmotitsuki will share with us. Feel free to consolidate it wherever its best, whether it's on a issue discussion or lightweight blueprint, thanks, Rogerio.

[rmotitsuki]

Vue3 - migration

For the first phase of migration to Vue3 Kytos will use Vue3 libraries with Vue2 compatibility. Most Vue2 code will work with warning messages.

https://v3-migration.vuejs.org/

Some libraries were replaced to be compatible with Vue3:

• vue-awesome for fortawesome

For debugging purposes, Kytos UI must be compiled using a new pre-production profile. $ npm run preprod

This profile will create a compiled webpacket file with debug mode enabled. Copy the ./dist/build.js into Kytos installation ./kytos/web-ui/dist/build.js to replace the production UI.

Kytos will display any compatibility warning/error messages in the browser log window. (press F12 to activate the developer window inside the browser)

The following NApps must be updated with the new UI:

• MEF Eline
• Topology
• Pathfinder
• Maintenance
• SDNTrace
• SDNTrace CP

The rest of the napps in this list will not be updated:

• of_core
• flow_manager
• of_lldp
• coloring
• kytos_stats
• of_multi_table

Usual NApps' code upgrades

Common UI code used in NApps that need to be changed for UI compatibility.

• beforeDestroy is replaced for beforeUnmount

• Object value synchronization Replace: <k-input-auto id="source" :value.sync="source" for: <k-input-auto id="source" v-model:value="source"

• Click Event Click events must be triggered using @click

  Replace: <k-button icon="search" title="Search" v-on:click.native="get_paths"> for: <k-button icon="search" title="Search" @click="get_paths">

  Replace: <k-button icon="search" title="Search" v-on:click="get_paths"> for: <k-button icon="search" title="Search" @click="get_paths">

  Replace: <k-button icon="search" title="Search" :on_click="get_paths"> for: <k-button icon="search" title="Search" @click="get_paths">

• Kytos events Custom events are deprecated. Now Kytos has an eventBus with global access called eventBus to implement the communication among the NApps. The eventBus function is defined on src/event-bus.js

  Replace: this.$kytos.$emit("showInfoPanel", content) for: this.$kytos.eventBus.$emit("showInfoPanel", content)

  Replace: this.$kytos.$on for: this.$kytos.eventbus.$on

• filters are deprecated Replace: {{content | orNone}} for:

  • Define a method, or a computed function: methods: { orNone: function(value) { ... } }
  • call the method in template: {{ orNone(content) }}

  For global filter replace: {{ tx_bytes | humanize_bytes }} for: {{ $filters.humanize_types(tx_bytes) }}

• icon. New parameter to bind the icon name: Replace: <icon v-bind:name=iconName> for <icon :icon=iconName>

• icon. Icon names don´t have "regular" prefix anymore: Replace: <icon name="regular/clock" /> for: <icon icon="clock" />

• v-if and v-for can´t be combined in same tag due to syntax ambiguity. https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html Replace: <k-property v-if="..." v-for="..." > for: `