Add DIY widget #1546
Add DIY widget #1546
Conversation
This is the editor behind VSCode. It will help with features that allow users to edit code.
This library makes it easy to add dragging and resizing on any component.
This is a widget that runs bare Javascript code created by the user. It does nothing this the user writes the code. The idea with this widget is to allow people to add any type of functionality to Cockpit without actually knowing the Cockpit codebase previously. We expect a lot of cool stuff to come from this!
rafaellehmkuhl
force-pushed
the
add-diy-widget
branch
from
063fe88 to
8a190f7
Compare
|
Still reviewing the code, but for now, you can adjust some interface details:
|
Nice catches, thanks! |
|
Some suggestions that could be implemented on this first version:
Some suggestions to be implemented in further versions of the DIY widget:
|
| <div ref="htmlEditorContainer" class="editor-container" /> | ||
| <div ref="cssEditorContainer" class="editor-container" /> | ||
| <div ref="jsEditorContainer" class="editor-container" /> |
There was a problem hiding this comment.
You could switch the two last to match Vue pattern:
<div ref="htmlEditorContainer" class="editor-container" />
<div ref="jsEditorContainer" class="editor-container" />
<div ref="cssEditorContainer" class="editor-container" />
| const handleDialogOpen = async (): Promise<void> => { | ||
| await initEditor() | ||
| } | ||
|
|
||
| const handleDialogClose = async (): Promise<void> => { | ||
| finishEditor() | ||
| } |
There was a problem hiding this comment.
It's not wrong, but would be nice to have standardized function names such as: 'handleCloseDialog' and 'handleOpenDialog'
| finishEditor() | ||
| } | ||
|
|
||
| const applyChanges = (): void => { |
There was a problem hiding this comment.
As mentioned on the functionality review, a ctrl+enter shortcut for this apply function would be very handy.
This allows the users to create their own widget, with custom HTML+JS+CSS code.
The widget has access to the data-lake and actions APIs (as shown in the video), so one can create rich widgets that interact with the entire Cockpit ecosystem.
I'm using the Monaco editor here (the one VSCode is based on), and the editor window can be dragged to facilitate editing.
In the video I show a simple widget that consists on the memory used by Cockpit (consumed from the data-lake) that changes its color based on a threshold.
diywidget.mp4