Iframe: add support for external API

Author: Williangalvani

src/components/widgets/IFrame.vue

@@ -3,6 +3,7 @@
     <teleport to=".widgets-view">
       <iframe
         v-show="iframe_loaded"
+        ref="iframe"
         :src="widget.options.source"
         :style="iframeStyle"
         frameborder="0"
@@ -58,14 +59,16 @@ import { computed, defineProps, onBeforeMount, ref, toRefs, watch } from 'vue'
 
 import { defaultBlueOsAddress } from '@/assets/defaults'
 import Snackbar from '@/components/Snackbar.vue'
+import { listenDataLakeVariable } from '@/libs/actions/data-lake'
 import { isValidURL } from '@/libs/utils'
 import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Widget } from '@/types/widgets'
+
 const interfaceStore = useAppInterfaceStore()
 
 const widgetStore = useWidgetManagerStore()
-
+const iframe = ref()
 const props = defineProps<{
   /**
    * Widget reference
@@ -97,10 +100,24 @@ const updateURL = (): void => {
 }
 
 onBeforeMount(() => {
+  window.addEventListener(
+    'message',
+    (event) => {
+      if (event.data.type !== 'cockpit:listenToDatalakeVariables') {
+        return
+      }
+      const { variable } = event.data
+      console.log('asked to listen to ', variable)
+      listenDataLakeVariable(variable, (value) => {
+        iframe.value.contentWindow.postMessage({ type: 'cockpit:datalakeVariable', variable, value }, '*')
+      })
+    },
+    false
+  )
+
   if (Object.keys(widget.value.options).length !== 0) {
     return
   }
-
   widget.value.options = {
     source: defaultBlueOsAddress,
   }