-
Notifications
You must be signed in to change notification settings - Fork 703
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Component for editing package installation values in table mode #4396
Comments
This might also make it simpler for us to have a standard way to render forms both for simple form components as well as schema items for extra fields required by packaging plugins. |
More updates here:
|
Yep, too much stuff for browser's JS. Probably the best way to go is to stack the changes and apply them as you did.
I don't think we should put on the user's decision the result of a technical limitation (i.e. remembering to click "sync").
What do you think about removing the sync button, and automatically doing the actual sync in both?:
We could also try to leverage Web workers? |
It is cool that there is a search option, great progress! |
Neither do I: it was implemented like a manual action but just while developing. The underlying action is expected to be triggered automatically, for instance, always deferring the sync process to the moment when the user changes the tab.
I have tested the "old" custom from (aka the bitnami one, just using a reduced subset of params) and it works perfectly. However, is when using the full schema (at least in the bitnami charts, as they are pretty configurable) that the lag appears.
Technically, it will appear a browser-native pop-up saying that you have unsaved changes. I was playing around with the
100% agree
Good idea, not sure how can we use them along with the usual react's state typical management, but, for sure it is an interesting option to run such a lengthy operation like this one in bg.
Not at all! I just prioritized having a "working" table and just added a POC of the filters and pagination. Collapsible rows is something I wanna explore shortly. |
Today's update: After implementing the groping by parent property, I've sketched up the sync flow inside the component and "upstream" (to the parent's). I've tried to minimize the YAML parsing operations for perfornce and, instead, the table parms are updated locally. The observed response times seem to be much better than before, so perhaps storing the modifications and applying them in batch when switching tabs is not that necessary. Pending stuff from the top of my mind: 1) use the "deployed value", "default value from the schema", "default value from the values" properly; 2) improve the performance of the yaml editor; 3) improve the performance of the initial load (it takes several seconds) |
Awesome, that looks always better!! Some minor observations:
|
Awesome work @antgamdia !!! Looking forward for this table view available in Kubeapps 🚀 |
Sharing the progress with some gifs, but will describe the approach + reply to the comments soon. For now the quick summary is: I've removed the old ace text editor + react-diff component in favor of a single instance of a Monaco (aka vs code engine) diff editor. Since it uses webworkers under the hood, the overall performance is way better. There are plenty of bugs and open issues in the current design, especially, some glitches when editing, since more deboucing is still required. Current performance when using the biggest bitnami chart's values (thanos): The editions in the table + diffEditor (+ real time feedback about what changed): The diff view now allows choosing between diffing the deployed values or the package values (eg. a new version): PS: I've been trying to add https://monaco-yaml.js.org/ (note the actual YAML validation against a json schema; it's awesome), but after some time dealing with webpack, I gave up (for now) since I wanted to have a fully working scenario today. |
Happy to see that webworkers work as expected. It is a really good job! Minor observation about UI from the last GIF: the switch that toggles the diff mode confused me a bit. It wasn't clear what was the state when the toggle was off (due to being off), and then the label changes when switching. What do you think about replacing that control with two radio buttons or a single dropdown? |
I'll extract the TODOs into a separate issue, but, for the moment, let me quickly write them down here:
|
When using a chart with a full schema (ie, for every value), I'm running into this issue: which seems surprisingly similar to this other one: #4803 I'm having a look at it. EDIT: no, the problem is the schema itself indeed. In the case of empty arrays, the yielded schema is just wrong, wherefore the error: bitnami/readme-generator-for-helm#34 The other issue is fortunately gone now: |
Description:
Currently Kubeapps is capable of dynamically generating a form with chart values metadata so that users can use it to adjust installation values.
Sometimes this kind of dynamic forms are a bit sluggish, specially when the form is very large. Also, finding the right control that corresponds to the right installation value is sometimes complicated.
It could be nice being able to edit installation values in table mode. One row -> one installation value.
Something like TMC colleagues have done:
Information presented on screen would be the same, but smaller in size and quicker to edit than the form edition. It would be straight forward to know the corresponding package value key.
The only editable part would be the
Value
column. Edited values would have some kind of visual sign (e.g. asterisk, different color, etc.)The text was updated successfully, but these errors were encountered: