add iframe

Author: omohokcoj

.tool-versions

@@ -0,0 +1,2 @@
+nodejs 16.13.1
+ruby 3.3.3

ui/src/data_resources/components/query_tab.vue

@@ -17,7 +17,7 @@
         fix
       />
       <div
-        v-else-if="!data.length"
+        v-else-if="!data.length && !isIframe"
         class="d-flex justify-content-center align-items-center"
         style="height: 100%"
       >
@@ -35,12 +35,22 @@
         :header-border="showVariablesForm"
         :preferences="query.preferences"
       />
+      <div
+        v-else-if="isIframe"
+        style="overflow: hidden; height: 100%"
+      >
+        <iframe
+          :src="iframeSrc"
+          :style="{ height: '100%', border: 0, width: '100%' }"
+        />
+      </div>
     </template>
   </div>
 </template>
 
 <script>
 import QueryResult from 'queries/components/result'
+import { interpolateForQueryParams } from 'utils/scripts/string'
 import VariablesForm from 'queries/components/variables_form'
 import api from 'api'
 
@@ -69,13 +79,17 @@ export default {
       errors: [],
       data: [],
       columns: [],
+      iframeSrc: '',
       query: {}
     }
   },
   computed: {
     queryId () {
       return this.tab.preferences.query_id
     },
+    isIframe () {
+      return this.query?.preferences?.visualization === 'iframe'
+    },
     style () {
       if (this.isLoadingQuery || !this.showVariablesForm) {
         return 'height: 100%'
@@ -91,8 +105,19 @@ export default {
     }
   },
   mounted () {
-    this.loadQuery()
-    this.runQuery()
+    this.loadQuery().then(() => {
+      if (this.isIframe) {
+        const [apiPath, queryParams] = interpolateForQueryParams(this.query.preferences.api_path, {
+            ...this.dataVariables,
+            ...this.variables
+        })
+
+        console.log(this.query.preferences.api_path, this.variables)
+        this.iframeSrc = `${apiPath}?${new URLSearchParams(queryParams).toString()}`
+      } else {
+        this.runQuery()
+      }
+    })
   },
   methods: {
     loadQuery () {

ui/src/queries/components/settings.vue

@@ -81,7 +81,7 @@
             {{ ' ' }} {{ i18n['stacked_bars'] }}
           </Checkbox>
         </template>
-        <template v-if="!['table', 'markdown', 'html', 'value', 'map'].includes(preferences.visualization)">
+        <template v-if="!['table', 'markdown', 'html', 'value', 'map', 'iframe'].includes(preferences.visualization)">
           <p class="fs-4 fw-bold my-1">
             Format
           </p>
@@ -102,7 +102,7 @@
             </Radio>
           </RadioGroup>
         </template>
-        <template v-if="!['table', 'markdown', 'html'].includes(preferences.visualization) && preferences.visualization_options.label_format === 'currency'">
+        <template v-if="!['table', 'markdown', 'html', 'iframe'].includes(preferences.visualization) && preferences.visualization_options.label_format === 'currency'">
           <p class="fs-4 fw-bold my-1">
             {{ i18n['currency'] }}
           </p>
@@ -148,6 +148,11 @@ export default {
       required: false,
       default: () => []
     },
+    withIframe: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withVariablesEditor: {
       type: Boolean,
       required: false,
@@ -162,7 +167,7 @@ export default {
   },
   computed: {
     visualizationOptions () {
-      return [
+      const options = [
         { label: this.i18n.table, value: 'table' },
         { label: this.i18n.value, value: 'value' },
         { label: this.i18n.markdown, value: 'markdown' },
@@ -175,6 +180,12 @@ export default {
         { label: this.i18n.funnel, value: 'funnel' },
         { label: this.i18n.map, value: 'map' }
       ]
+
+      if (this.withIframe) {
+        options.push({ label: 'Iframe', value: 'iframe' })
+      }
+
+      return options
     },
     formatOptions () {
       return [

ui/src/queries/pages/show.vue

@@ -105,6 +105,7 @@
         :preferences="dataQuery.preferences"
         :columns="columns"
         :with-variables-editor="queryType === 'api'"
+        :with-iframe="queryType === 'api'"
         style="height: 100%"
         @close="toggleSettings"
       />
@@ -184,7 +185,7 @@
             fix
           />
           <div
-            v-else-if="!data.length && !errors.length && !dataHTML"
+            v-else-if="!data.length && !errors.length && !dataHTML && !isIframe"
             class="d-flex justify-content-center align-items-center h-100"
           >
             {{ i18n['no_data'] }}
@@ -203,6 +204,15 @@
             :preferences="dataQuery.preferences"
             @settings="toggleSettings"
           />
+          <div
+            v-else-if="isIframe"
+            style="overflow: hidden; height: 100%"
+          >
+            <iframe
+              :src="iframeSrc"
+              :style="{ height: withFooter ? '100%' : '100%', border: 0, width: '100%' }"
+            />
+          </div>
           <div
             v-else-if="dataHTML"
             class="h-100 overflow-auto"
@@ -304,7 +314,7 @@ import QueryForm from '../components/form'
 import Settings from '../components/settings'
 import throttle from 'view3/src/utils/throttle'
 import VariablesForm from '../components/variables_form'
-import { titleize } from 'utils/scripts/string'
+import { interpolateForQueryParams, titleize } from 'utils/scripts/string'
 import singularize from 'inflected/src/singularize'
 import { widthLessThan } from 'utils/scripts/dimensions'
 import { modelNameMap } from 'data_resources/scripts/schema'
@@ -359,7 +369,8 @@ export default {
       errors: [],
       columns: [],
       data: [],
-      dataHTML: ''
+      dataHTML: '',
+      iframeSrc: ''
     }
   },
   computed: {
@@ -377,6 +388,9 @@ export default {
     showApiUi () {
       return this.queryType === 'api' || (!this.isNewPage && this.dataQuery.preferences.api_path)
     },
+    isIframe () {
+      return this.dataQuery.preferences.visualization === 'iframe'
+    },
     queryTypes () {
       return [
         { label: this.i18n.sql, value: 'sql' },
@@ -696,7 +710,13 @@ export default {
     loadQueryData () {
       this.maybeUpdateVariablesQueryParams()
 
-      if (this.queryType === 'api') {
+      if (this.queryType === 'api' && this.isIframe) {
+        const [apiPath, queryParams] = interpolateForQueryParams(this.dataQuery.preferences.api_path, this.variablesData)
+
+        this.iframeSrc = `${apiPath}?${new URLSearchParams(queryParams).toString()}`
+
+        return Promise.resolve({ src: this.iframeSrc })
+      } else if (this.queryType === 'api') {
         return this.runApiQuery()
       } else {
         if (this.dataQuery.sql_body && (this.isEdited || !this.query.id)) {