CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-18 18:35:37 +12:00
Code Issues Projects Releases Wiki Activity

Allow dynamic query execution from front end components

Browse source
This commit is contained in:
Martin McKeaveney 2021-01-08 12:06:37 +00:00
parent f2abc7d351
commit 98a7085bbc
22 changed files with 344 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/builder/src/builderStore/store/frontend.js
View file

@ -40,6 +40,7 @@ const INITIAL_FRONTEND_STATE = {
libraries: null,
appId: "",
routes: {},
bottomDrawerVisible: false,
}
export const getFrontendStore = () => {

49
packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
View file

@ -1,49 +0,0 @@
<script>
import { goto } from "@sveltech/routify"
import {
DropdownMenu,
TextButton as Button,
Icon,
Label,
Modal,
ModalContent,
TextArea,
} from "@budibase/bbui"
import { notifier } from "builderStore/store/notifications"
import { backendUiStore } from "builderStore"
import api from "builderStore/api"
import EditIntegrationConfig from "../modals/EditIntegrationConfig.svelte"
// import CreateEditQuery from "components/backend/DataTable/modals/CreateEditQuery.svelte"
export let query = {}
export let edit
let modal
let fields = []
async function saveQuery() {
try {
await backendUiStore.actions.queries.save(query.datasourceId, query)
notifier.success(`Query created successfully.`)
} catch (err) {
console.error(err)
notifier.danger(`Error creating query. ${err.message}`)
}
}
</script>
<div>
<Button text small on:click={modal.show}>
<Icon name="filter" />
{edit ? 'Edit' : 'Create'} Query
</Button>
</div>
<!-- <Modal bind:this={modal}> -->
<!-- <ModalContent
confirmText="Save"
cancelText="Cancel"
onConfirm={saveQuery}
title={edit ? 'Edit Query' : 'Create New Query'}> -->
<!-- <CreateEditQuery bind:query /> -->
<!-- </ModalContent> -->
<!-- </Modal> -->

29
packages/builder/src/components/common/BottomDrawer.svelte Normal file
View file

@ -0,0 +1,29 @@
<script>
import { slide } from "svelte/transition"
import Portal from "svelte-portal"
export let title
export let onClose
</script>
<Portal>
<section class="drawer" transition:slide>
{#if title}
<heading>{title}</heading>
{/if}
<slot />
</section>
</Portal>
<style>
.drawer {
height: 50vh;
position: absolute;
bottom: 0;
width: 97%;
background: var(--background);
padding: var(--spacing-xl);
border-top: var(--border-light);
z-index: 2;
}
</style>

4
packages/builder/src/components/integration/QueryEditor.svelte
View file

@ -12,6 +12,10 @@
// $: codemirror && codemirror.setValue(value)
console.log("Running init")
$: console.log("Running reactive")
onMount(async () => {
codemirror = cm.fromTextArea(editor, {
lineNumbers: true,

52
packages/builder/src/components/integration/QueryParameterBuilder.svelte Normal file
View file

@ -0,0 +1,52 @@
<script>
import { TextArea, Label, Input, Heading } from "@budibase/bbui"
import Editor from "./QueryEditor.svelte"
import BindableInput from "components/userInterface/BindableInput.svelte"
export let parameters = []
export let bindings = []
export let customParams = {}
function newQueryParameter() {
parameters = [...parameters, {}]
}
function deleteQueryParameter(idx) {
parameters.splice(idx, 1)
parameters = parameters
}
</script>
<Heading extraSmall black>Parameters</Heading>
<div class="parameters">
<Label extraSmall grey>Parameter Name</Label>
<Label extraSmall grey>Default</Label>
<Label extraSmall grey>Value</Label>
<div />
{#each parameters as parameter, idx}
<Input thin bind:value={parameter.name} />
<Input thin bind:value={parameter.default} />
<BindableInput
type="string"
thin
bind:value={customParams[parameter.name]}
{bindings} />
<i
class="ri-close-circle-line delete"
on:click={() => deleteQueryParameter(idx)} />
{/each}
</div>
<i class="ri-add-circle-line add" on:click={newQueryParameter} />
<style>
.parameters {
display: grid;
grid-template-columns: 1fr 1fr 1fr 5%;
grid-gap: 10px;
align-items: center;
}
.add {
margin-top: var(--spacing-m);
}
</style>

15
packages/builder/src/components/integration/QueryViewer.svelte
View file

@ -85,8 +85,18 @@
async function previewQuery() {
try {
// parse all the parameters in the UI
// send them
const response = await api.post(`/api/queries/preview`, {
parameters: query.parameters,
// TODO: revisit
parameters: query.parameters.reduce(
(acc, next) => ({
...acc,
[next.name]: next.default,
}),
{}
),
datasourceId: datasource._id,
query: query.queryString,
})
@ -96,7 +106,8 @@
data = json || []
// TODO: refactor
// Assume all the fields are strings and create a basic schema
// from the first record returned by the query
fields = Object.keys(json[0]).map(field => ({
name: field,
type: "STRING",

53
packages/builder/src/components/integration/index.svelte
View file

@ -1,65 +1,16 @@
<script>
import { TextArea, Label, Input, Heading } from "@budibase/bbui"
import Editor from "./QueryEditor.svelte"
const CAPTURE_VAR_INSIDE_MUSTACHE = /{{([^}]+)}}/g
import ParameterBuilder from "./QueryParameterBuilder.svelte"
const QueryTypes = {
SQL: "sql",
}
export let query
// TODO: bind these to the query
let parameters = []
$: query.parameters = parameters.reduce(
(acc, next) => ({ [next.key]: next.value, ...acc }),
{}
)
function newQueryParameter() {
parameters = [...parameters, {}]
}
function deleteQueryParameter(idx) {
parameters.splice(idx, 1)
parameters = parameters
}
</script>
<Heading extraSmall black>Parameters</Heading>
{#if query.queryType === QueryTypes.SQL}
<section>
<div class="parameters">
<Label extraSmall grey>Parameter Name</Label>
<Label extraSmall grey>Default Value</Label>
<!-- CLEAR ALL PARAMS OR SOMETHING -->
<i class="ri-close-circle-line delete" on:click={console.log} />
{#each parameters as parameter, idx}
<Input thin bind:value={parameter.key} />
<Input thin bind:value={parameter.value} />
<i
class="ri-close-circle-line delete"
on:click={() => deleteQueryParameter(idx)} />
{/each}
<i class="ri-add-circle-line" on:click={newQueryParameter} />
</div>
</section>
<ParameterBuilder bind:parameters={query.parameters} />
<Editor label="Query" bind:value={query.queryString} />
{/if}
<style>
.parameters {
display: grid;
grid-template-columns: 1fr 1fr 5%;
grid-gap: 10px;
align-items: center;
}
section {
margin-bottom: var(--spacing-xl);
}
</style>

35
packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte Normal file
View file

@ -0,0 +1,35 @@
<script>
import BottomDrawer from "components/common/BottomDrawer.svelte"
import { store, backendUiStore } from "builderStore"
import { slide } from "svelte/transition"
import QueryInterface from "components/integration/QueryViewer.svelte"
$: query = $backendUiStore.queries.find(
query => query._id === $backendUiStore.selectedQueryId
)
function closeDatabindingDrawer() {
store.update(state => {
state.bindingDrawerVisible = false
return state
})
}
</script>
{#if query}
<BottomDrawer>
<div class="drawer-contents">
<i class="ri-close-fill close" on:click={closeDatabindingDrawer} />
<QueryInterface {query} />
</div>
</BottomDrawer>
{/if}
<style>
i {
position: absolute;
top: var(--spacing-xl);
right: var(--spacing-xl);
font-size: var(--font-size-m);
}
</style>

105
packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
View file

@ -1,5 +1,11 @@
<script>
import { TextButton, Body, DropdownMenu, ModalContent } from "@budibase/bbui"
import {
Button,
TextButton,
Body,
DropdownMenu,
ModalContent,
} from "@budibase/bbui"
import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
import actionTypes from "./actions"
import { createEventDispatcher } from "svelte"
@ -49,61 +55,58 @@
}
</script>
<ModalContent title="Actions" confirmText="Save" onConfirm={saveEventData}>
<div slot="header">
<div bind:this={addActionButton}>
<TextButton text small blue on:click={addActionDropdown.show}>
<div style="height: 20px; width: 20px;">
<AddIcon />
</div>
Add Action
</TextButton>
</div>
<DropdownMenu
bind:this={addActionDropdown}
anchor={addActionButton}
align="right">
<div class="available-actions-container">
{#each actionTypes as actionType}
<div class="available-action" on:click={addAction(actionType)}>
<span>{actionType.name}</span>
</div>
{/each}
<div>
<div bind:this={addActionButton}>
<TextButton text small blue on:click={addActionDropdown.show}>
<div style="height: 20px; width: 20px;">
<AddIcon />
</div>
</DropdownMenu>
Add Action
</TextButton>
</div>
<div class="actions-container">
{#if actions && actions.length > 0}
{#each actions as action, index}
<div class="action-container">
<div class="action-header" on:click={selectAction(action)}>
<Body small lh>{index + 1}. {action[eventTypeKey]}</Body>
<div class="row-expander" class:rotate={action !== selectedAction}>
<ArrowDownIcon />
</div>
</div>
{#if action === selectedAction}
<div class="selected-action-container">
<svelte:component
this={selectedActionComponent}
parameters={selectedAction.parameters} />
<div class="delete-action-button">
<TextButton text medium on:click={() => deleteAction(index)}>
Delete
</TextButton>
</div>
</div>
{/if}
<DropdownMenu
bind:this={addActionDropdown}
anchor={addActionButton}
align="right">
<div class="available-actions-container">
{#each actionTypes as actionType}
<div class="available-action" on:click={addAction(actionType)}>
<span>{actionType.name}</span>
</div>
{/each}
{/if}
</div>
</div>
</DropdownMenu>
</div>
<div slot="footer">
<a href="https://docs.budibase.com">Learn more about Actions</a>
</div>
</ModalContent>
<div class="actions-container">
{#if actions && actions.length > 0}
{#each actions as action, index}
<div class="action-container">
<div class="action-header" on:click={selectAction(action)}>
<Body small lh>{index + 1}. {action[eventTypeKey]}</Body>
<div class="row-expander" class:rotate={action !== selectedAction}>
<ArrowDownIcon />
</div>
</div>
{#if action === selectedAction}
<div class="selected-action-container">
<svelte:component
this={selectedActionComponent}
parameters={selectedAction.parameters} />
<div class="delete-action-button">
<TextButton text medium on:click={() => deleteAction(index)}>
Delete
</TextButton>
</div>
</div>
{/if}
</div>
{/each}
{/if}
<Button thin blue on:click={saveEventData}>Save</Button>
</div>
<a href="https://docs.budibase.com">Learn more about Actions</a>
<style>
.action-header {

21
packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
View file

@ -1,17 +1,26 @@
<script>
import { Button, Modal } from "@budibase/bbui"
import EventEditorModal from "./EventEditorModal.svelte"
import { createEventDispatcher } from "svelte"
import { store } from "builderStore"
import EventEditorModal from "./EventEditorModal.svelte"
import BottomDrawer from "components/common/BottomDrawer.svelte"
const dispatch = createEventDispatcher()
export let value
export let name
let modal
let drawerVisible
function showDrawer() {
drawerVisible = true
}
</script>
<Button secondary small on:click={modal.show}>Define Actions</Button>
<Button secondary small on:click={showDrawer}>Define Actions</Button>
<Modal bind:this={modal} width="600px">
<EventEditorModal event={value} eventType={name} on:change />
</Modal>
{#if drawerVisible}
<BottomDrawer>
<EventEditorModal event={value} eventType={name} on:change />
</BottomDrawer>
{/if}

36
packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
View file

@ -1,17 +1,36 @@
<script>
import { Select, Label, Spacer } from "@budibase/bbui"
import { backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
import ParameterBuilder from "../../../integration/QueryParameterBuilder.svelte"
export let parameters
$: datasource = $backendUiStore.datasources.find(
ds => ds._id === parameters.datasourceId
)
// TODO: binding needs a significant refactor and needs to
// be centralised
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $currentAsset,
tables: $backendUiStore.tables,
}).map(property => ({
...property,
category: property.type === "instance" ? "Component" : "Table",
label: property.readableBinding,
path: property.runtimeBinding,
}))
$: query =
parameters.queryId &&
$backendUiStore.queries.find(query => query._id === parameters.queryId)
</script>
<div class="root">
<Label size="m" color="dark">Datasource</Label>
<Select secondary bind:value={parameters.datasourceId}>
<Select thin secondary bind:value={parameters.datasourceId}>
<option value="" />
{#each $backendUiStore.datasources as datasource}
<option value={datasource._id}>{datasource.name}</option>
@ -22,11 +41,22 @@
{#if parameters.datasourceId}
<Label size="m" color="dark">Query</Label>
<Select secondary bind:value={parameters.queryId}>
<Select thin secondary bind:value={parameters.queryId}>
<option value="" />
{#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
<option value={query._id}>{query.name}</option>
{/each}
</Select>
{/if}
<Spacer medium />
<!-- TODO: Need to render defaults, but allow interpolation of frontend values -->
{#if query}
<ParameterBuilder
bind:customParams={parameters.queryParams}
parameters={query.parameters}
bindings={bindableProperties} />
<pre>{query.queryString}</pre>
{/if}
</div>

6
packages/builder/src/components/userInterface/GenericBindingPopover.svelte
View file

@ -20,6 +20,8 @@
let getCaretPosition
$: console.log(bindings)
$: categories = Object.entries(groupBy("category", bindings))
function onClickBinding(binding) {
@ -50,7 +52,9 @@
<span class="binding__label">{binding.label}</span>
<span class="binding__type">{binding.type}</span>
<br />
<div class="binding__description">{binding.description}</div>
<div class="binding__description">
{binding.description || ''}
</div>
</div>
{/each}
{/each}

1
packages/builder/src/components/userInterface/PropertyControl.svelte
View file

@ -120,6 +120,7 @@
flex-flow: row;
align-items: center;
}
.label {
display: flex;
align-items: center;

14
packages/builder/src/components/userInterface/TableViewSelect.svelte
View file

@ -14,6 +14,17 @@
dropdownRight.hide()
}
function openBindingDrawer() {
backendUiStore.update(state => {
state.selectedQueryId = value._id
return state
})
store.update(state => {
state.bottomDrawerVisible = true
return state
})
}
$: tables = $backendUiStore.tables.map(m => ({
label: m.name,
name: `all_${m._id}`,
@ -67,6 +78,9 @@
<span>{value.label ? value.label : 'Table / View / Query'}</span>
<Icon name="arrowdown" />
</div>
{#if value.type === "query"}
<i class="ri-settings-3-line" on:click={openBindingDrawer} />
{/if}
<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
<div class="dropdown">
<div class="title">

3
packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
View file

@ -14,10 +14,11 @@
query = {
datasourceId: $params.selectedDatasource,
name: "New Query",
parameters: {},
parameters: [],
// TODO: set dynamically
}
}
console.log("The query changes", query)
}
</script>

1
packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
View file

@ -4,7 +4,6 @@
import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
import CreateQueryButton from "components/backend/DataTable/buttons/CreateQueryButton.svelte"
$: datasource = $backendUiStore.datasources.find(
ds => ds._id === $backendUiStore.selectedDatasourceId

14
packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
View file

@ -10,6 +10,7 @@
import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
import DataBindingDrawer from "components/userInterface/DataBindingDrawer/index.svelte"
$: instance = $store.appInstance
@ -47,6 +48,10 @@
{/if}
</div>
{#if $store.bottomDrawerVisible}
<DataBindingDrawer />
{/if}
{#if $selectedComponent != null}
<div class="components-pane">
<ComponentPropertiesPanel />
@ -103,6 +108,15 @@
padding: var(--spacing-l) var(--spacing-xl);
}
.binding-drawer-container {
height: 50vh;
position: absolute;
bottom: 0;
width: 100%;
background: var(--background);
padding: var(--spacing-xl);
}
.nav-group-header > div:nth-child(1) {
padding: 0rem 0.5rem 0rem 0rem;
vertical-align: bottom;

8
packages/client/src/api/queries.js
View file

@ -13,10 +13,12 @@ export const fetchQueryData = async ({ _id }) => {
/**
* Executes a query against an external data connector.
*/
export const executeQuery = async ({ _id }) => {
export const executeQuery = async ({ queryId, params }) => {
const response = await API.post({
url: `/api/queries/${_id}`,
// body: params,
url: `/api/queries/${queryId}`,
body: {
params,
},
})
return response.rows
}

17
packages/client/src/utils/buttonActions.js
View file

@ -26,19 +26,12 @@ const navigationHandler = action => {
}
const queryExecutionHandler = async (action, context) => {
const { datasourceId, queryId, params } = action.parameters
console.log(context)
// TODO: allow context based bindings for query params
// const enrichedQueryParameters = enrichDataBindings(params, context)
const { datasourceId, queryId, queryParams } = action.parameters
// console.log({
// action,
// context,
// // enrichedQueryParameters,
// datasourceId,
// // queryId
// })
await executeQuery({ datasourceId, queryId })
// TODO: allow context based bindings for query params
const enrichedQueryParameters = enrichDataBindings(queryParams, context)
await executeQuery({ datasourceId, queryId, params: enrichedQueryParameters })
}
const handlerMap = {

20
packages/server/src/api/controllers/query.js
View file

@ -75,9 +75,13 @@ exports.preview = async function(ctx) {
exports.execute = async function(ctx) {
const db = new CouchDB(ctx.user.appId)
const datasource = await db.get(ctx.params.datasourceId)
const query = await db.get(ctx.params.queryId)
const datasource = await db.get(query.datasourceId)
const query = datasource.queries[ctx.params.queryId]
const queryTemplate = handlebars.compile(query.queryString)
// TODO: Take the default params into account
const parsedQuery = queryTemplate(ctx.request.body.params)
const Integration = integrations[datasource.source]
@ -85,17 +89,7 @@ exports.execute = async function(ctx) {
ctx.throw(400, "Integration type does not exist.")
return
}
// TODO: allow the ability to POST parameters down when executing the query
// const customParams = ctx.request.body
const queryTemplate = handlebars.compile(query.queryString)
const response = await new Integration(
datasource.config,
queryTemplate({
// pass the params here from the UI and backend contexts
})
).query()
const response = await new Integration(datasource.config, parsedQuery).query()
ctx.body = response
}

2
packages/server/src/db/client.js
View file

@ -38,6 +38,6 @@ function replicateLocal() {
})
}
replicateLocal()
// replicateLocal()
module.exports = Pouch

56
packages/server/src/integrations/postgres.js
View file

@ -1,5 +1,47 @@
const { Client } = require("pg")
const SCHEMA = {
datasource: {
host: {
type: "string",
default: "localhost",
required: true,
},
port: {
type: "number",
required: true,
default: 5432,
},
database: {
type: "string",
default: "postgres",
required: true,
},
username: {
type: "string",
default: "root",
required: true,
},
password: {
type: "password",
default: "root",
required: true,
},
},
editor: {
sql: {
type: "sql",
},
gui: {
type: "config",
fields: {
something: "",
other: "",
},
},
},
}
const DATASOURCE_CONFIG = {
host: {
type: "string",
@ -34,10 +76,16 @@ const QUERY_CONFIG = {
},
gui: {
type: "config",
fields: {
something: "",
other: "",
},
fields: [
{
name: "",
type: "",
},
{
name: "",
type: "",
},
],
},
}