Legacy JS - things we might want to remove/replace at some point

Hi,
even though we have made a great leaps forward in modernizing our js stack in the past months (big :clap: to everyone involved!), there is still a significant amount of technical debt that we need to deal with. The purpose of this post is start a discussion and identify the dependencies that are outdated or might not be feasible to use with our new stack, whatever the reason may be.

x-editable

  • used for editing settings
  • relies on asset pipeline, provides Rails helpers to make items editable
  • possible resolutions:
    • it should not be too difficult to implement the equivalent functionality with our new js stack

flot char

  • flot_pie_chart and flot_bar_chart helpers defined, but not used in core, flot_chart helper used by the following in core (did I miss any?):
    • app/views/hosts/_resources.html.erb
    • app/views/hosts/_runtime.html.erb
    • app/views/trends/show.html.erb
  • previous attempt to migrate was closed (https://github.com/theforeman/foreman/pull/5600) - my understanding from the comments is that we were unable to find a satisfactory solution to migrate one of the existing features - selecting a section of a graph and zooming on it as PF3 used graph libraries which were not up to date and the maintainer was not very active, which hasn’t changed much. Latest react-c3js version has been released Oct 23, 2017, fix that was needed remains without a review.
  • possible resolutions:
    • do not port the zooming feature and move forward with pull 5600
    • look for solutions outside of patternfly
    • stick with the flot chart forever :frowning_face:

jquery.ui.autocomplete

  • looks like a low hanging fruit, we already have autocomplete React component and search bar uses it
  • still used in some places, like: _audit_summary_query_builder.html.erb
  • possible resolutions:
    • use react component everywhere and then drop

jquery.ui.spinner

  • used in various forms (VM memory allocation, cores count, …)
  • possible resolutions:
    • replace with out own component
    • create a new input component for patternfly-react

turbolinks

jquery.multiselect

select2

gridster

Did I miss anything that should be mentioned here?
The outlined resolutions for each item are definitely not exhaustive, I’d like to hear your ideas, so feel free to share.

8 Likes

We are also maintaining a list of technical debt items here: https://app.asana.com/0/1127382412335097/list (let me know if you need asana access).

Could you please share the list here for the benefit of everyone in the community instead of having people request access explicitly?

1 Like

Thank you for this great research @Ondrej_Prazak :+1:

Looks like we are closer than ever achieving the goal of modernizing our js stack.
Some of the dependencies would be more difficult to replace while most of them should be relatively easy now.

Another goal I believe we should set is removing/deprecating jquery, atm we are using v2 of jquery which is not maintained and has vulnerabilities. To be able to do that we will need to deprecate libraries like jquery.ui.spinner because they require jquery v2.

We can export and share the list, notice this list get updates regularly.

While it is fine that you use assana to track your team’s work and planning, if others are taking part in collaborating in this effort, it would be great to share this information more openly so others in the community are aware of it. I hope @Ondrej_Prazak’s effort of mapping these wasn’t duplicate work that was already undertaken but kept in a closed platform.
We can make this post into a wiki if needed so everyone can collaborate on editing and updating it as we progress.

@Ondrej_Prazak is aware of this list since we shared it with him before his research.

We can make a public wiki, another option is using Redmine for that would you see it works?
We do have automation between asana and Redmine so we can upload the list to Redmine with one click.

I made the main post into a wiki so it can be updated as needed. Discourse is useful for collaborating between different people working together on a joint effort in an open manner, without relying on private tools that are only available to some and have no visibility for the rest of the community.

It would be good to make sure there are Redmine issues for all of these. I know some already exist (because I opened them…) but others might need to be created.
Redmine is where we are tracking what needs to be fixed in the project and should be the main “source of truth” for what needs to be done. I would expect the flow to be from Redmine to team/personal task trackers if other tools are desired, not the other way around.

Thanks @Ondrej_Prazak !

Few more:

noVNC / spice

used for foreman’s console

  • Patternfly implemented a console component which uses these protocols

jquery.cookie

  • a jquery wrapper for cookies, can be replaced with local storage or with react-cookie

used by:

  • Hosts table for storing selected hosts
  • Storing the timezone

datatables

  • used for creating a table with extra features (i.e sorting by a column)
    can be replaced by patternfly table

used by

  • filters index table
  • images - list
  • puppetCA - list
2 Likes

This is probably a discussion for another thread but if we used an issue tracker that was usable (such as github issues) then you wouldn’t have this reluctance to use the issue tracker. We’d probably have more community bug reports as well since there would be one less step to submit one.

I personally use tools to go from bugzilla to redmine and asana to redmine. For me redmine is only a necessary evil. Just like bugzilla in fact.

Actually I would also support us dropping redmine in favor of bugzilla even though bugzilla’s UI is actually worse than redmine because then we’d cut our unusable bug trackers in half :smirk:

To me it makes no sense to use an inferior tool to track our todo list. Other teams create redmine issues before pulling them into a firewalled kanboard so at least our todo list is publicly accessible from outside without being a Red Hat employee. If kansync supported creating the card first then I would imagine teams would do it that way instead.

2 Likes

Thanks to @ezr-ondrej, @Laviro, @Amir_Fefer and other contributors, 2 Items can be removed from this list :slight_smile:

  1. jquery.ui.autocomplete
  2. turbolinks
1 Like