2020-12-19 07:19:43 +13:00
|
|
|
<script>
|
2021-03-18 00:40:24 +13:00
|
|
|
import { goto } from "@roxi/routify"
|
2020-12-19 07:19:43 +13:00
|
|
|
import {
|
2021-04-23 21:55:27 +12:00
|
|
|
Icon,
|
2020-12-19 07:19:43 +13:00
|
|
|
Select,
|
|
|
|
Button,
|
2021-04-29 01:46:11 +12:00
|
|
|
ButtonGroup,
|
2021-02-19 05:58:10 +13:00
|
|
|
Body,
|
2020-12-19 07:19:43 +13:00
|
|
|
Label,
|
2021-04-28 01:26:03 +12:00
|
|
|
Layout,
|
2020-12-19 07:19:43 +13:00
|
|
|
Input,
|
|
|
|
Heading,
|
2021-04-21 23:41:44 +12:00
|
|
|
Tabs,
|
2021-04-23 21:55:27 +12:00
|
|
|
Tab,
|
2020-12-19 07:19:43 +13:00
|
|
|
} from "@budibase/bbui"
|
2021-04-20 22:53:19 +12:00
|
|
|
import { notifications, Divider } from "@budibase/bbui"
|
2021-07-09 00:38:49 +12:00
|
|
|
import ExtraQueryConfig from "./ExtraQueryConfig.svelte"
|
2020-12-19 07:19:43 +13:00
|
|
|
import IntegrationQueryEditor from "components/integration/index.svelte"
|
2021-01-08 02:13:46 +13:00
|
|
|
import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
|
2021-12-09 06:58:30 +13:00
|
|
|
import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
|
2021-12-08 07:50:29 +13:00
|
|
|
import { datasources, integrations, queries } from "stores/backend"
|
2021-04-20 22:53:19 +12:00
|
|
|
import { capitalise } from "../../helpers"
|
2021-10-13 06:45:13 +13:00
|
|
|
import CodeMirrorEditor from "components/common/CodeMirrorEditor.svelte"
|
2021-12-07 06:39:51 +13:00
|
|
|
import JSONPreview from "./JSONPreview.svelte"
|
2021-12-08 07:50:29 +13:00
|
|
|
import { SchemaTypeOptions } from "constants/backend"
|
2021-12-07 06:39:51 +13:00
|
|
|
import KeyValueBuilder from "./KeyValueBuilder.svelte"
|
|
|
|
import { fieldsToSchema, schemaToFields } from "helpers/data/utils"
|
2021-12-08 07:24:10 +13:00
|
|
|
import AccessLevelSelect from "./AccessLevelSelect.svelte"
|
2020-12-19 07:19:43 +13:00
|
|
|
|
|
|
|
export let query
|
|
|
|
|
2021-12-07 06:39:51 +13:00
|
|
|
let fields = query?.schema ? schemaToFields(query.schema) : []
|
2021-01-08 02:13:46 +13:00
|
|
|
let parameters
|
2021-01-16 06:29:46 +13:00
|
|
|
let data = []
|
2021-12-08 07:24:10 +13:00
|
|
|
let saveId
|
2022-03-24 02:47:27 +13:00
|
|
|
const transformerDocs = "https://docs.budibase.com/docs/transformers"
|
2020-12-19 07:19:43 +13:00
|
|
|
|
2021-06-09 04:14:46 +12:00
|
|
|
$: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
|
2021-11-26 00:20:20 +13:00
|
|
|
$: query.schema = fieldsToSchema(fields)
|
2021-01-15 03:22:24 +13:00
|
|
|
$: datasourceType = datasource?.source
|
2022-02-12 23:35:10 +13:00
|
|
|
$: integrationInfo = datasourceType ? $integrations[datasourceType] : null
|
2021-02-19 05:58:10 +13:00
|
|
|
$: queryConfig = integrationInfo?.query
|
2021-02-19 07:55:08 +13:00
|
|
|
$: shouldShowQueryConfig = queryConfig && query.queryVerb
|
2021-06-09 01:26:06 +12:00
|
|
|
$: readQuery = query.queryVerb === "read" || query.readable
|
2021-06-09 04:14:46 +12:00
|
|
|
$: queryInvalid = !query.name || (readQuery && data.length === 0)
|
2021-01-14 03:11:53 +13:00
|
|
|
|
2021-10-13 06:45:13 +13:00
|
|
|
// seed the transformer
|
|
|
|
if (query && !query.transformer) {
|
|
|
|
query.transformer = "return data"
|
|
|
|
}
|
|
|
|
|
2021-07-09 00:38:49 +12:00
|
|
|
function resetDependentFields() {
|
2021-11-10 05:25:23 +13:00
|
|
|
if (query.fields.extra) {
|
|
|
|
query.fields.extra = {}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-09 00:38:49 +12:00
|
|
|
function populateExtraQuery(extraQueryFields) {
|
|
|
|
query.fields.extra = extraQueryFields
|
|
|
|
}
|
|
|
|
|
2020-12-19 07:19:43 +13:00
|
|
|
async function previewQuery() {
|
|
|
|
try {
|
2021-12-07 06:39:51 +13:00
|
|
|
const response = await queries.preview(query)
|
|
|
|
if (response.rows.length === 0) {
|
2021-04-09 22:02:53 +12:00
|
|
|
notifications.info(
|
2021-01-19 04:40:26 +13:00
|
|
|
"Query results empty. Please execute a query with results to create your schema."
|
|
|
|
)
|
2021-01-16 06:29:46 +13:00
|
|
|
return
|
2021-01-19 04:40:26 +13:00
|
|
|
}
|
2021-12-07 06:39:51 +13:00
|
|
|
data = response.rows
|
|
|
|
fields = response.schema
|
2022-01-25 01:37:22 +13:00
|
|
|
notifications.success("Query executed successfully")
|
|
|
|
} catch (error) {
|
|
|
|
notifications.error("Error previewing query")
|
2020-12-19 07:19:43 +13:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-01-08 02:13:46 +13:00
|
|
|
async function saveQuery() {
|
|
|
|
try {
|
2021-04-01 22:29:47 +13:00
|
|
|
const { _id } = await queries.save(query.datasourceId, query)
|
2021-12-08 07:24:10 +13:00
|
|
|
saveId = _id
|
2021-04-09 22:02:53 +12:00
|
|
|
notifications.success(`Query saved successfully.`)
|
2021-04-20 22:53:19 +12:00
|
|
|
$goto(`../${_id}`)
|
2022-01-25 01:37:22 +13:00
|
|
|
} catch (error) {
|
|
|
|
notifications.error("Error creating query")
|
2021-01-08 02:13:46 +13:00
|
|
|
}
|
|
|
|
}
|
2020-12-19 07:19:43 +13:00
|
|
|
</script>
|
|
|
|
|
2021-04-28 01:26:03 +12:00
|
|
|
<Layout gap="S" noPadding>
|
2021-04-30 23:38:06 +12:00
|
|
|
<Heading size="M">Query {integrationInfo?.friendlyName}</Heading>
|
2021-04-20 22:53:19 +12:00
|
|
|
<Divider />
|
2021-04-30 23:38:06 +12:00
|
|
|
<Heading size="S">Config</Heading>
|
2021-04-28 01:26:03 +12:00
|
|
|
<div class="config">
|
2021-02-19 05:58:10 +13:00
|
|
|
<div class="config-field">
|
2021-04-28 01:26:03 +12:00
|
|
|
<Label>Query Name</Label>
|
|
|
|
<Input bind:value={query.name} />
|
2021-01-23 05:49:22 +13:00
|
|
|
</div>
|
2021-04-28 01:26:03 +12:00
|
|
|
{#if queryConfig}
|
|
|
|
<div class="config-field">
|
|
|
|
<Label>Function</Label>
|
|
|
|
<Select
|
|
|
|
bind:value={query.queryVerb}
|
2021-07-09 00:38:49 +12:00
|
|
|
on:change={resetDependentFields}
|
2021-04-28 01:26:03 +12:00
|
|
|
options={Object.keys(queryConfig)}
|
2021-05-04 22:32:22 +12:00
|
|
|
getOptionLabel={verb =>
|
2021-04-28 01:26:03 +12:00
|
|
|
queryConfig[verb]?.displayName || capitalise(verb)}
|
|
|
|
/>
|
|
|
|
</div>
|
2021-11-10 05:25:23 +13:00
|
|
|
<div class="config-field">
|
2021-12-08 07:24:10 +13:00
|
|
|
<AccessLevelSelect {saveId} {query} label="Access Level" />
|
2021-11-10 05:25:23 +13:00
|
|
|
</div>
|
2021-07-09 00:38:49 +12:00
|
|
|
{#if integrationInfo?.extra && query.queryVerb}
|
|
|
|
<ExtraQueryConfig
|
|
|
|
{query}
|
|
|
|
{populateExtraQuery}
|
|
|
|
config={integrationInfo.extra}
|
|
|
|
/>
|
|
|
|
{/if}
|
2022-01-21 05:12:32 +13:00
|
|
|
<BindingBuilder bind:queryBindings={query.parameters} bindable={false} />
|
2021-04-28 01:26:03 +12:00
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
{#if shouldShowQueryConfig}
|
2021-04-20 22:53:19 +12:00
|
|
|
<Divider />
|
2021-01-13 05:49:11 +13:00
|
|
|
<div class="config">
|
2021-04-30 23:38:06 +12:00
|
|
|
<Heading size="S">Fields</Heading>
|
2021-04-30 23:31:45 +12:00
|
|
|
<Body size="S">Fill in the fields specific to this query.</Body>
|
2021-01-14 03:11:53 +13:00
|
|
|
<IntegrationQueryEditor
|
2021-02-19 07:55:08 +13:00
|
|
|
{datasource}
|
2021-01-14 03:11:53 +13:00
|
|
|
{query}
|
2021-10-13 06:45:13 +13:00
|
|
|
height={200}
|
2021-02-19 07:55:08 +13:00
|
|
|
schema={queryConfig[query.queryVerb]}
|
2021-04-23 21:55:27 +12:00
|
|
|
bind:parameters
|
|
|
|
/>
|
2021-04-20 22:53:19 +12:00
|
|
|
<Divider />
|
2021-04-28 01:26:03 +12:00
|
|
|
</div>
|
2021-10-13 06:45:13 +13:00
|
|
|
<div class="config">
|
2021-10-14 04:42:07 +13:00
|
|
|
<div class="help-heading">
|
|
|
|
<Heading size="S">Transformer</Heading>
|
|
|
|
<Icon
|
|
|
|
on:click={() => window.open(transformerDocs)}
|
|
|
|
hoverable
|
|
|
|
name="Help"
|
|
|
|
size="L"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-10-13 06:45:13 +13:00
|
|
|
<Body size="S"
|
2021-10-14 04:42:07 +13:00
|
|
|
>Add a JavaScript function to transform the query result.</Body
|
2021-10-13 06:45:13 +13:00
|
|
|
>
|
|
|
|
<CodeMirrorEditor
|
|
|
|
height={200}
|
|
|
|
label="Transformer"
|
|
|
|
value={query.transformer}
|
2021-10-14 04:42:07 +13:00
|
|
|
resize="vertical"
|
2021-10-13 06:45:13 +13:00
|
|
|
on:change={e => (query.transformer = e.detail)}
|
|
|
|
/>
|
|
|
|
<Divider />
|
|
|
|
</div>
|
2021-04-28 01:26:03 +12:00
|
|
|
<div class="viewer-controls">
|
2021-04-30 23:38:06 +12:00
|
|
|
<Heading size="S">Results</Heading>
|
2022-02-12 23:35:10 +13:00
|
|
|
<ButtonGroup gap="M">
|
2021-06-09 04:14:46 +12:00
|
|
|
<Button cta disabled={queryInvalid} on:click={saveQuery}>
|
2021-04-28 01:26:03 +12:00
|
|
|
Save Query
|
|
|
|
</Button>
|
2021-04-29 01:46:11 +12:00
|
|
|
<Button secondary on:click={previewQuery}>Run Query</Button>
|
|
|
|
</ButtonGroup>
|
2021-04-28 01:26:03 +12:00
|
|
|
</div>
|
2021-04-30 23:31:45 +12:00
|
|
|
<Body size="S">
|
2021-04-29 01:46:11 +12:00
|
|
|
Below, you can preview the results from your query and change the schema.
|
|
|
|
</Body>
|
|
|
|
<section class="viewer">
|
|
|
|
{#if data}
|
|
|
|
<Tabs selected="JSON">
|
|
|
|
<Tab title="JSON">
|
2021-12-07 06:39:51 +13:00
|
|
|
<JSONPreview data={data[0]} minHeight="120" />
|
2021-04-29 01:46:11 +12:00
|
|
|
</Tab>
|
|
|
|
<Tab title="Schema">
|
2021-12-07 06:39:51 +13:00
|
|
|
<KeyValueBuilder
|
|
|
|
bind:object={fields}
|
|
|
|
name="field"
|
|
|
|
headings
|
|
|
|
options={SchemaTypeOptions}
|
|
|
|
/>
|
2021-04-29 01:46:11 +12:00
|
|
|
</Tab>
|
|
|
|
<Tab title="Preview">
|
|
|
|
<ExternalDataSourceTable {query} {data} />
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
{/if}
|
|
|
|
</section>
|
2021-04-28 01:26:03 +12:00
|
|
|
{/if}
|
|
|
|
</Layout>
|
2020-12-19 07:19:43 +13:00
|
|
|
|
|
|
|
<style>
|
2021-04-28 01:26:03 +12:00
|
|
|
.config {
|
|
|
|
display: grid;
|
|
|
|
grid-gap: var(--spacing-s);
|
|
|
|
}
|
2021-10-14 04:42:07 +13:00
|
|
|
|
2021-02-19 05:58:10 +13:00
|
|
|
.config-field {
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 20% 1fr;
|
|
|
|
grid-gap: var(--spacing-l);
|
2021-01-23 05:49:22 +13:00
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
2021-10-14 04:42:07 +13:00
|
|
|
.help-heading {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
|
2021-02-22 22:01:40 +13:00
|
|
|
.viewer {
|
|
|
|
min-height: 200px;
|
2021-08-24 03:32:27 +12:00
|
|
|
width: 640px;
|
2021-02-22 22:01:40 +13:00
|
|
|
}
|
|
|
|
|
2021-01-23 05:49:22 +13:00
|
|
|
.viewer-controls {
|
2021-01-13 05:49:11 +13:00
|
|
|
display: flex;
|
2021-01-23 05:49:22 +13:00
|
|
|
flex-direction: row;
|
2021-02-19 07:55:08 +13:00
|
|
|
justify-content: space-between;
|
2021-01-23 05:49:22 +13:00
|
|
|
gap: var(--spacing-m);
|
|
|
|
min-width: 150px;
|
2021-02-20 03:31:07 +13:00
|
|
|
align-items: center;
|
2021-02-05 23:32:10 +13:00
|
|
|
}
|
2020-12-19 07:19:43 +13:00
|
|
|
</style>
|