Very generic input: Custom widget creator #1418

ArturoManzoli · 2024-10-18T19:16:37Z

Widget creation toolkit for parametric inputs and control via HTTP requests;

Screenshare.-.2024-10-18.4_09_58.PM.mp4

Screenshare.-.2024-10-18.4_15_54.PM.mp4

Closes #1291

ArturoManzoli · 2024-10-21T13:11:59Z

Last push: Fix dropdown selector not keeping last selected option after reload

rafaellehmkuhl

The horizontal edit-menu bar with the custom widget options does not have a consistent scroll with respect to the other two menus (regular and mini).

Testes on macOS. Vertically scrolling the bar should scroll horizontally.

This is breaking the edit-menu widget container width again:

Does any problem arise if we allow the user to add the custom input widgets to the mini-widget containers? This would make them ever more powerful! This way they can have them on the top/bottom bar.
Should we have this as a button? Is there any other usage that is not tied to a Cockpit Action Variable?

The slider on "large" size is overflowing the container and the label as well. Increasing the container size does not help:

The changes are using "Cockpit Action Parameter" instead of the new name "Cockpit Action Variable".

rafaellehmkuhl

Question: should we indeed separate the whole pipeline for the custom widgets from the mini-widgets?

I understand having them on a separate dropdown on the edit-menu, to make it easier for the user to understand, but I couldn't see a good reason to separate their container from the mini-widgets. Being able to mix them feels like a big feature to me, and if we separate them now, it will be difficult to merge them later.

rafaellehmkuhl · 2024-10-26T01:09:58Z

src/assets/defaults.ts

+  everMounted: false,
+  configMenuOpen: false,
+  highlighted: false,
+  customWidgetVars: CustomWidgetVarsType.Button,


Should we call it customWidgetType?

rafaellehmkuhl · 2024-10-26T01:11:03Z

src/components/EditMenu.vue

-        :ref="(el) => (miniWidgetContainers[miniWidget.component] = el as HTMLElement)"
        :key="miniWidget.hash"
-        class="flex flex-col items-center justify-between w-full rounded-md bg-[#273842] hover:brightness-125 h-[90%] aspect-square cursor-pointer elevation-4 overflow-clip pointer-events-none"
+        class="flex flex-col items-center justify-between rounded-md bg-[#273842] hover:brightness-125 h-[90%] aspect-square cursor-pointer elevation-4 overflow-clip pointer-events-none"


This is the part that breaks the auto-width.

Yes, it is and it's weird how this zombie change keep being deleted and brought back to life over and over... 😄

rafaellehmkuhl · 2024-10-26T01:12:04Z

src/components/EditMenu.vue

+        <div class="flex items-center justify-center w-full p-1 transition-all bg-[#3B78A8] rounded-b-md text-white">
+          <span class="whitespace-normal text-center">{{
+            element.name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (str) => str.toUpperCase()) ||
+            'Very Generic Indicator'


Is this right?

This code is turning a camelCase name such as RelativeAltitudeIndicator to Relative Altitude Indicator to fit the card title. But the exception is indeed unnecessary.

rafaellehmkuhl · 2024-10-26T01:12:58Z

src/components/ElementHugger.vue

+type ElementType = {
+  /**
+   *
+   */
+  position: {
+    /**
+     *
+     */
+    x: number
+    /**
+     *
+     */
+    y: number
+  }
+  /**
+   *
+   */
+  size: {
+    /**
+     *
+     */
+    width: number
+    /**
+     *
+     */
+    height: number
+  }


Blank jsdocs.

rafaellehmkuhl · 2024-10-26T01:14:09Z

src/components/EditMenu.vue

-        <div
-          v-show="widgetMode === 'Regular widgets'"
-          class="2xl:text-md text-sm mt-3 2xl:px-3 px-2 bg-[#3B78A8] rounded-lg"
-        >
-          Click or drag to add
+        <div v-show="widgetMode === 'Regular'" class="2xl:text-md text-sm mt-3 2xl:px-3 px-2 rounded-lg">
+          (Click on card to add)


I think we are wrongly removing a functionality here?

We did rename the selector so it wont have the word 'widgets' repeated over and over. But the helper text should have remained the same.

I mean the "Click or drag to add" vs "Click to add".

rafaellehmkuhl · 2024-10-26T01:18:35Z

src/components/WidgetHugger.vue

-  width: `${100 * size.value.width}%`,
-  height: `${100 * size.value.height}%`,
+  width: disableResponsiveness.value ? `${1000 * size.value.width}px` : `${100 * size.value.width}%`,
+  height: disableResponsiveness.value ? `${1000 * size.value.height}px` : `${100 * size.value.height}%`,


Curiosity: what was the motive for that the custom widgets to be fundamentally different in the resize behavior? I found it to be counterintuitive to the user.

There was a concern about how the various input mini-widgets would react to the custom-widget-base responsiveness. Generic widgets shrink with the window size and its contents are scaled down too.
But this shrink behavior wasn't ideal for input components.

This prop was also causing some size issues on a recently added widget base.
I'll remove it for now and let's see how the responsiveness is doing on the custom widgets.

I think you forgot to remove this (and the other mentions to disableResponsiveness along the code).

ArturoManzoli · 2024-10-28T09:56:47Z

Question: should we indeed separate the whole pipeline for the custom widgets from the mini-widgets?

I understand having them on a separate dropdown on the edit-menu, to make it easier for the user to understand, but I couldn't see a good reason to separate their container from the mini-widgets. Being able to mix them feels like a big feature to me, and if we separate them now, it will be difficult to merge them later.

Totally agree. Allowing the user to add custom mini-widgets to the top, bottom bar and to any other future uses for mini widgets will indeed make Cockpit a lot more powerful.

ArturoManzoli · 2024-10-29T11:14:31Z

4. Should we have this as a button? Is there any other usage that is not tied to a Cockpit Action Variable?

Can you give more info about it? Maybe an example of another usage so we decide if we should implement now or on the next functionalities update

ArturoManzoli · 2024-10-30T13:11:11Z

On last push:

Made the changes requested by @rafaellehmkuhl;
Custom mini widgets are now called 'input' widgets and are now compatible with the regular mini widgets. They all can be placed alongside each other, on the top and bottom bar, and inside user's custom widgets. (video below)
All mini widgets are now instantiated by the same wrapper (MiniWidgetInstatiator.vue)
Still the issue of the card being dragged with the mini widget. This will be solved on a separate task;

Screenshare.-.2024-10-30.9_57_31.AM.mp4

rafaellehmkuhl · 2024-10-31T20:11:05Z

Should we have this as a button? Is there any other usage that is not tied to a Cockpit Action Variable?

Can you give more info about it? Maybe an example of another usage so we decide if we should implement now or on the next functionalities update

My point is that all input widgets are being created to inject variables in the data-lake, and having a button there means creating this variable is optional, when it's in fact mandatory. Those should be required fields.

rafaellehmkuhl · 2024-10-31T21:43:51Z

I'm not able to config the input widgets with the last PR. It was working fine in the previous version thought:

Kapture.2024-11-01.at.06.42.32.mp4

ArturoManzoli · 2024-11-01T10:28:03Z

I'm not able to config the input widgets with the last PR. It was working fine in the previous version thought:

This is something related to the instantiation of the input widget on the top and bottom bar. If you refresh the screen the config panel will open normally.

Will fix that

ArturoManzoli · 2024-11-01T11:35:02Z

Should we have this as a button? Is there any other usage that is not tied to a Cockpit Action Variable?

Can you give more info about it? Maybe an example of another usage so we decide if we should implement now or on the next functionalities update

My point is that all input widgets are being created to inject variables in the data-lake, and having a button there means creating this variable is optional, when it's in fact mandatory. Those should be required fields.

I understand you point that the variable name is mandatory to inject data, but if the user is, at the moment, just creating the custom widget and arranging its layout? Maybe it doesn't need to be named/registered at that very moment, and the user (or even someone else) can do this data injection config on a later moment.

The blue 'create' button was thought the be spotted right away by the user and probably wont be missed out. Also, the whole process for controlling something by the input widgets will usually need some documentation reading/video tutorial for the user to fully understand its applications and usage. So, the variable creation will be something internalized by the user, I suppose.

Also, every variable injected on the data lake will take a small amount of system resources to be kept tracked or on listening mode.

Let me know your thoughts about this.

Anyway, I modified the workflow, so when an input widget is placed on the top or bottom bar, its config panel will always pop out. This way, the user will be 'invited' to configure its proprieties right away

rafaellehmkuhl · 2024-11-01T22:16:29Z

@ArturoManzoli it does make sense!

rafaellehmkuhl

I'm trying to setup a button widget but it's not calling the Cockpit Action it was assigned to:

Kapture.2024-11-04.at.23.52.19.mp4

rafaellehmkuhl · 2024-11-06T14:49:14Z

src/components/EditMenu.vue

@@ -596,28 +639,52 @@ import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import { nextTick } from 'vue'
 import { type UseDraggableOptions, useDraggable, VueDraggable } from 'vue-draggable-plus'

-import { defaultMiniWidgetManagerVars } from '@/assets/defaults'
+import { defaultCustomWidgetManagerVars, defaultMiniWidgetManagerVars } from '@/assets/defaults'
+/* @ts-ignore */


Those @ts-ignore are not needed. You can remove them and push and will see that the CI will not complaint.

rafaellehmkuhl · 2024-11-06T14:49:50Z

src/components/EditMenu.vue

-            miniWidget.name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (str) => str.toUpperCase()) ||
-            'Very Generic Indicator'
+            miniWidget.name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (str) => str.toUpperCase())


I'm not sure if it's because this specific change, but the VGI name disappeared:

rafaellehmkuhl · 2024-11-06T14:51:24Z

src/components/MiniWidgetInstantiator.vue

-   * Mini-widget instance
+   *
   */


No need to remove this line.

rafaellehmkuhl · 2024-11-06T14:52:40Z

src/components/WidgetHugger.vue

-  width: `${100 * size.value.width}%`,
-  height: `${100 * size.value.height}%`,
+  width: disableResponsiveness.value ? `${1000 * size.value.width}px` : `${100 * size.value.width}%`,
+  height: disableResponsiveness.value ? `${1000 * size.value.height}px` : `${100 * size.value.height}%`,


I think you forgot to remove this (and the other mentions to disableResponsiveness along the code).

src/components/mini-widgets/ArmerButton.vue

rafaellehmkuhl · 2024-11-06T15:04:52Z

src/libs/actions/data-lake.ts

-    throw new Error(`Cockpit action variable with id '${variable.id}' already exists. Update it instead.`)
+    console.log(`Cockpit action variable with id '${variable.id}' already exists. Renaming to ${variable.name}_new.`)
+    showSnackbar({
+      message: `Cockpit action variable with id '${variable.id}' already exists. Renaming to ${variable.name}_new.`,
+    })
+    variable.id = `${variable.id}_new`
+    variable.name = `${variable.name}_new`
+    cockpitActionVariableInfo[variable.id] = variable


There's no need for the snackbar here.
You can have the snackbar in the component that is calling createCockpitActionVariable.
This is a void method with a throw, so there you can put a try/catch block to deal with error/success case, like so:

// EditMenu.vue import { useSnackbar } from '@/composables/snackbar' const { showSnackbar } = useSnackbar() try { createCockpitActionVariable(variable) showSnackbar({ message: 'Parameter successfully updated', variant: 'success' }) } catch(error) { showSnackbar({message: `Failed to add Cockpit action variable with id '${variable.id}'. Name already exists. Please rename it.`}) }

If necessary to deal with the renaming process, please do it in the EditMenu.vue component. You can do that by adding an code property to the error (inside the data-lake.ts file) and checking for the error in the Vue component, although I think the more correct approach is to ask the user to rename the variable, so it's clear to them that they already have a variable with that name).

rafaellehmkuhl · 2024-11-06T15:06:38Z

src/views/ConfigurationActionsView.vue

@@ -312,7 +312,7 @@
 </template>

 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'


Unnecessary change. Should be removed.

rafaellehmkuhl · 2024-11-06T15:06:41Z

src/views/ConfigurationActionsView.vue

@@ -665,6 +665,7 @@ const saveUrlParameter = (): void => {

 onMounted(() => {
  loadSavedActions()
+  console.log('🚀 ~ allSavedActionConfigs:', allSavedActionConfigs.value)


Unnecessary change. Should be removed.

src/components/MiniWidgetInstantiator.vue

src/components/WidgetHugger.vue

rafaellehmkuhl

Code-wise I think everything is fine now.
The button is also working (for calling actions).
What I can't get to work are the inputs. I tried to add a slider input, but it isn't updating it's action variable. It keeps undefined, on both boot and while moving it. The test below has both a setInterval as well as a listenCockpitActionVariable added to the code, and none get any change in the slider value:

Kapture.2024-11-11.at.06.57.12.mp4

rafaellehmkuhl · 2024-11-11T16:24:39Z

We discussed in private and came to the conclusion that there was a missing function in the data-lake for those to work as expected. The ability to set the initial value was implemented on #1443 and will be used here.

ArturoManzoli · 2024-11-11T21:07:36Z

We discussed in private and came to the conclusion that there was a missing function in the data-lake for those to work as expected. The ability to set the initial value was implemented on #1443 and will be used here.

The modifications on the data-lake and input mini widgets are implemented.
Take a look

rafaellehmkuhl

@ArturoManzoli I've found some problems in my last test. Will list them below:

I'm testing here but I'm having the same NaN problem with the Dial widget I was having in our last talk. Was this part worked on?

Kapture.2024-11-19.at.08.52.24.mp4

I made sure I was using the latest branch version for the test. Vite server was reloaded and application process was killed and reset.

I could reproduce it with both old Dial widgets as well as to ones I had just added. The problem happens if you add a Dial widget, create a data-lake variable to it but reload the application without using the dial for the first time before the reload. I can reproduce it 100% of the times I try. If I use the dial (turn it) before reloading Cockpit, the problem does not happen, but if I don't, the Dial gets stuck at NaN forever.

When I drag an input widget from the CustomWidgetBase, the trash icon does not appear.

Also around that, the edit-menu left panel is not showing the CustomWidgetBase as a container for mini-widget, so that the user can delete or configure mini-widgets from there, although this is a problem also for the current MiniWidgetBar widget, so I opened issue #1452 to track that. Feel free to work on it on this PR or to let it as it is and we fix it later for both.

Both the switch as well as the checkbox, when with a false value, require two clicks to change to true again.

rafaellehmkuhl · 2024-11-19T01:22:15Z

src/types/widgets.ts

+export enum CustomWidgetType {
+  Button = 'boolean',
+  Checkbox = 'boolean',
+  Dial = 'number',
+  Dropdown = 'string',
+  Label = 'string',
+  Slider = 'number',
+  Switch = 'boolean',
+}


This was created but was never used.

rafaellehmkuhl · 2024-11-19T01:23:13Z

src/types/widgets.ts

+      /**
+       * Variable type
+       */
+      variableType: string


Checkbox is not of type string.
Actually all elements are set as string type.

rafaellehmkuhl · 2024-11-19T01:23:29Z

src/types/widgets.ts

+      /**
+       * Last known value of the element
+       */
+      lastValue: string | number | boolean | undefined


Last value here should be boolean or undefined, not string or number.

ArturoManzoli · 2024-11-21T10:39:20Z

@rafaellehmkuhl, I had to relocate the lastValue storage location out of the mini-widget data object due to reactivity problems on some boolean vuetify components. Its working fast and reliable as I tested. Take a look and see if we need to store those values somewhere else.

rafaellehmkuhl · 2024-11-21T18:41:32Z

@rafaellehmkuhl, I had to relocate the lastValue storage location out of the mini-widget data object due to reactivity problems on some boolean vuetify components. Its working fast and reliable as I tested. Take a look and see if we need to store those values somewhere else.

I feel like those changes are passing a lot of the responsibility that should be in the widgets themselves to the widget management store, but at the same time I don't want to postpone the merging of this feature much more.

I will perform some more tests to see if everything is working and take a look at the code again, and if everything goes right we are good to go.

rafaellehmkuhl · 2024-11-21T18:43:00Z

src/stores/widgetManager.ts

+  const isElementsPropsDrawerVisible = ref(false)
+  const elementToShowOnDrawer = ref<CustomWidgetElement>()
+  const widgetToEdit = ref<Widget>()
+  const miniWidgetLastValues = useBlueOsStorage<Record<string, any>>('mini-widget-last-values', {})


One small thing here: the storage key should start with "cockpit-...".

Done. I also have relocated the save widget method to outside the store

Signed-off-by: Arturo Manzoli <[email protected]>

ArturoManzoli requested a review from rafaellehmkuhl October 18, 2024 19:16

ArturoManzoli force-pushed the very-generic-input-widget branch 2 times, most recently from 8cb8e98 to 96ab58a Compare October 21, 2024 13:10

ArturoManzoli force-pushed the very-generic-input-widget branch from 96ab58a to 5cca995 Compare October 21, 2024 13:42

rafaellehmkuhl requested changes Oct 26, 2024

View reviewed changes

ArturoManzoli force-pushed the very-generic-input-widget branch from 798d9c5 to c53b578 Compare October 30, 2024 13:09

ArturoManzoli requested a review from rafaellehmkuhl October 30, 2024 13:13

ArturoManzoli force-pushed the very-generic-input-widget branch from c53b578 to a1233c5 Compare November 1, 2024 11:44

rafaellehmkuhl requested changes Nov 4, 2024

View reviewed changes

ArturoManzoli force-pushed the very-generic-input-widget branch from a1233c5 to f629ea6 Compare November 5, 2024 11:10

ArturoManzoli requested a review from rafaellehmkuhl November 5, 2024 11:11

rafaellehmkuhl requested changes Nov 6, 2024

View reviewed changes

ArturoManzoli force-pushed the very-generic-input-widget branch from f629ea6 to 9dc9b1a Compare November 7, 2024 14:35

ArturoManzoli requested a review from rafaellehmkuhl November 7, 2024 14:36

rafaellehmkuhl requested changes Nov 10, 2024

View reviewed changes

ArturoManzoli force-pushed the very-generic-input-widget branch 2 times, most recently from a6adc55 to 6709204 Compare November 11, 2024 10:51

ArturoManzoli requested a review from rafaellehmkuhl November 11, 2024 10:52

ArturoManzoli force-pushed the very-generic-input-widget branch from 6709204 to fb1ce39 Compare November 11, 2024 21:05

ArturoManzoli force-pushed the very-generic-input-widget branch 2 times, most recently from f84cbd5 to eb882a2 Compare November 18, 2024 12:22

rafaellehmkuhl requested changes Nov 18, 2024

View reviewed changes

rafaellehmkuhl requested changes Nov 19, 2024

View reviewed changes

ArturoManzoli force-pushed the very-generic-input-widget branch from eb882a2 to c722735 Compare November 21, 2024 10:35

ArturoManzoli requested a review from rafaellehmkuhl November 21, 2024 10:39

rafaellehmkuhl reviewed Nov 21, 2024

View reviewed changes

Components: Very-generic-input-widget: Add component

f6eae1e

Signed-off-by: Arturo Manzoli <[email protected]>

ArturoManzoli force-pushed the very-generic-input-widget branch from c722735 to 4a02d30 Compare November 21, 2024 18:47

ArturoManzoli requested a review from rafaellehmkuhl November 21, 2024 18:55

Mini-widgets: Armer-button: Disable button on edit mode

a5bbb9d

Signed-off-by: Arturo Manzoli <[email protected]>

ArturoManzoli force-pushed the very-generic-input-widget branch from 4a02d30 to a5bbb9d Compare November 22, 2024 15:27

Very generic input: Custom widget creator #1418

Are you sure you want to change the base?

Very generic input: Custom widget creator #1418

Conversation

ArturoManzoli commented Oct 18, 2024 • edited Loading

ArturoManzoli commented Oct 21, 2024 • edited Loading

rafaellehmkuhl left a comment

Choose a reason for hiding this comment

rafaellehmkuhl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ArturoManzoli Oct 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rafaellehmkuhl Oct 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ArturoManzoli commented Oct 28, 2024

ArturoManzoli commented Oct 29, 2024

ArturoManzoli commented Oct 30, 2024 • edited Loading

rafaellehmkuhl commented Oct 31, 2024

rafaellehmkuhl commented Oct 31, 2024

ArturoManzoli commented Nov 1, 2024 • edited Loading

ArturoManzoli commented Nov 1, 2024 • edited Loading

rafaellehmkuhl commented Nov 1, 2024

rafaellehmkuhl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rafaellehmkuhl left a comment

Choose a reason for hiding this comment

rafaellehmkuhl commented Nov 11, 2024

ArturoManzoli commented Nov 11, 2024

rafaellehmkuhl left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ArturoManzoli commented Nov 21, 2024

rafaellehmkuhl commented Nov 21, 2024

Choose a reason for hiding this comment

ArturoManzoli Nov 22, 2024 • edited Loading

Choose a reason for hiding this comment

ArturoManzoli commented Oct 18, 2024 •

edited

Loading

ArturoManzoli commented Oct 21, 2024 •

edited

Loading

ArturoManzoli Oct 28, 2024 •

edited

Loading

rafaellehmkuhl Oct 31, 2024 •

edited

Loading

ArturoManzoli commented Oct 30, 2024 •

edited

Loading

ArturoManzoli commented Nov 1, 2024 •

edited

Loading

ArturoManzoli commented Nov 1, 2024 •

edited

Loading

rafaellehmkuhl left a comment •

edited

Loading

ArturoManzoli Nov 22, 2024 •

edited

Loading