Using the test panel in the automation history tab, same experience as that of the automation flow.
This commit is contained in:
mike12345567
parent
58afd1b6cc
commit
72cfd09b8f
|
|
@ -7,12 +7,18 @@
|
||||||
export let blockComplete
|
export let blockComplete
|
||||||
export let showTestStatus = false
|
export let showTestStatus = false
|
||||||
export let showParameters = {}
|
export let showParameters = {}
|
||||||
|
export let testResult
|
||||||
|
export let isTrigger
|
||||||
|
|
||||||
$: testResult =
|
$: {
|
||||||
$automationStore.selectedAutomation?.testResults?.steps.filter(step =>
|
if (!testResult) {
|
||||||
block.id ? step.id === block.id : step.stepId === block.stepId
|
testResult =
|
||||||
)
|
$automationStore.selectedAutomation?.testResults?.steps.filter(step =>
|
||||||
$: isTrigger = block.type === "TRIGGER"
|
block.id ? step.id === block.id : step.stepId === block.stepId
|
||||||
|
)[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$: isTrigger = isTrigger || block.type === "TRIGGER"
|
||||||
|
|
||||||
async function onSelect(block) {
|
async function onSelect(block) {
|
||||||
await automationStore.update(state => {
|
await automationStore.update(state => {
|
||||||
|
|
@ -60,13 +66,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="blockTitle">
|
<div class="blockTitle">
|
||||||
{#if showTestStatus && testResult && testResult[0]}
|
{#if showTestStatus && testResult}
|
||||||
<div style="float: right;">
|
<div style="float: right;">
|
||||||
<StatusLight
|
<StatusLight
|
||||||
positive={isTrigger || testResult[0].outputs?.success}
|
positive={isTrigger || testResult.outputs?.success}
|
||||||
negative={!testResult[0].outputs?.success}
|
negative={!testResult.outputs?.success}
|
||||||
><Body size="XS"
|
><Body size="XS"
|
||||||
>{testResult[0].outputs?.success || isTrigger
|
>{testResult.outputs?.success || isTrigger
|
||||||
? "Success"
|
? "Success"
|
||||||
: "Error"}</Body
|
: "Error"}</Body
|
||||||
></StatusLight
|
></StatusLight
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
<script>
|
||||||
|
import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
|
||||||
|
import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
|
||||||
|
|
||||||
|
export let automation
|
||||||
|
export let testResults
|
||||||
|
export let width = "400px"
|
||||||
|
|
||||||
|
let showParameters
|
||||||
|
let blocks
|
||||||
|
|
||||||
|
function prepTestResults(results) {
|
||||||
|
return results.steps.filter(x => x.stepId !== "LOOP" || [])
|
||||||
|
}
|
||||||
|
|
||||||
|
$: filteredResults = prepTestResults(testResults)
|
||||||
|
|
||||||
|
$: {
|
||||||
|
blocks = []
|
||||||
|
if (automation) {
|
||||||
|
if (automation.definition.trigger) {
|
||||||
|
blocks.push(automation.definition.trigger)
|
||||||
|
}
|
||||||
|
blocks = blocks
|
||||||
|
.concat(automation.definition.steps || [])
|
||||||
|
.filter(x => x.stepId !== "LOOP")
|
||||||
|
} else if (filteredResults) {
|
||||||
|
blocks = filteredResults || []
|
||||||
|
// make sure there is an ID for each block being displayed
|
||||||
|
let count = 0
|
||||||
|
for (let block of blocks) {
|
||||||
|
block.id = count++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
{#each blocks as block, idx}
|
||||||
|
<div class="block" style={width ? `width: ${width}` : ""}>
|
||||||
|
{#if block.stepId !== "LOOP"}
|
||||||
|
<FlowItemHeader
|
||||||
|
showTestStatus={true}
|
||||||
|
bind:showParameters
|
||||||
|
{block}
|
||||||
|
isTrigger={idx === 0}
|
||||||
|
testResult={filteredResults?.[idx]}
|
||||||
|
/>
|
||||||
|
{#if showParameters && showParameters[block.id]}
|
||||||
|
<Divider noMargin />
|
||||||
|
{#if filteredResults?.[idx]?.outputs.iterations}
|
||||||
|
<div style="display: flex; padding: 10px 10px 0px 12px;">
|
||||||
|
<Icon name="Reuse" />
|
||||||
|
<div style="margin-left: 10px;">
|
||||||
|
<Label>
|
||||||
|
This loop ran {filteredResults?.[idx]?.outputs.iterations} times.</Label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="tabs">
|
||||||
|
<Tabs quiet noPadding selected="Input">
|
||||||
|
<Tab title="Input">
|
||||||
|
<div style="padding: 10px 10px 10px 10px;">
|
||||||
|
<TextArea
|
||||||
|
minHeight="80px"
|
||||||
|
disabled
|
||||||
|
value={JSON.stringify(
|
||||||
|
filteredResults?.[idx]?.inputs,
|
||||||
|
null,
|
||||||
|
2
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div></Tab
|
||||||
|
>
|
||||||
|
<Tab title="Output">
|
||||||
|
<div style="padding: 10px 10px 10px 10px;">
|
||||||
|
<TextArea
|
||||||
|
minHeight="100px"
|
||||||
|
disabled
|
||||||
|
value={JSON.stringify(
|
||||||
|
filteredResults?.[idx]?.outputs,
|
||||||
|
null,
|
||||||
|
2
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if blocks.length - 1 !== idx}
|
||||||
|
<div class="separator" />
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
padding: 0 30px 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: stretch;
|
||||||
|
position: relative;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block {
|
||||||
|
display: inline-block;
|
||||||
|
width: 400px;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: var(--background);
|
||||||
|
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||||
|
border-radius: 4px 4px 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
width: 1px;
|
||||||
|
height: 40px;
|
||||||
|
border-left: 1px dashed var(--grey-4);
|
||||||
|
color: var(--grey-4);
|
||||||
|
/* center horizontally */
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
|
import { Icon, Divider } from "@budibase/bbui"
|
||||||
import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
|
import TestDisplay from "./TestDisplay.svelte"
|
||||||
import { automationStore } from "builderStore"
|
import { automationStore } from "builderStore"
|
||||||
|
|
||||||
export let automation
|
export let automation
|
||||||
|
export let testResults
|
||||||
|
|
||||||
let showParameters
|
|
||||||
let blocks
|
let blocks
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
|
|
@ -17,13 +17,15 @@
|
||||||
blocks = blocks
|
blocks = blocks
|
||||||
.concat(automation.definition.steps || [])
|
.concat(automation.definition.steps || [])
|
||||||
.filter(x => x.stepId !== "LOOP")
|
.filter(x => x.stepId !== "LOOP")
|
||||||
|
} else if (testResults) {
|
||||||
|
blocks = testResults.steps || []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$: {
|
||||||
|
if (!testResults) {
|
||||||
|
testResults = $automationStore.selectedAutomation?.testResults
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: testResults =
|
|
||||||
$automationStore.selectedAutomation?.testResults?.steps.filter(
|
|
||||||
x => x.stepId !== "LOOP" || []
|
|
||||||
)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
|
@ -44,59 +46,9 @@
|
||||||
|
|
||||||
<Divider />
|
<Divider />
|
||||||
|
|
||||||
<div class="container">
|
<TestDisplay {automation} {testResults} />
|
||||||
{#each blocks as block, idx}
|
|
||||||
<div class="block">
|
|
||||||
{#if block.stepId !== "LOOP"}
|
|
||||||
<FlowItemHeader showTestStatus={true} bind:showParameters {block} />
|
|
||||||
{#if showParameters && showParameters[block.id]}
|
|
||||||
<Divider noMargin />
|
|
||||||
{#if testResults?.[idx]?.outputs.iterations}
|
|
||||||
<div style="display: flex; padding: 10px 10px 0px 12px;">
|
|
||||||
<Icon name="Reuse" />
|
|
||||||
<div style="margin-left: 10px;">
|
|
||||||
<Label>
|
|
||||||
This loop ran {testResults?.[idx]?.outputs.iterations} times.</Label
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="tabs">
|
|
||||||
<Tabs quiet noPadding selected="Input">
|
|
||||||
<Tab title="Input">
|
|
||||||
<div style="padding: 10px 10px 10px 10px;">
|
|
||||||
<TextArea
|
|
||||||
minHeight="80px"
|
|
||||||
disabled
|
|
||||||
value={JSON.stringify(testResults?.[idx]?.inputs, null, 2)}
|
|
||||||
/>
|
|
||||||
</div></Tab
|
|
||||||
>
|
|
||||||
<Tab title="Output">
|
|
||||||
<div style="padding: 10px 10px 10px 10px;">
|
|
||||||
<TextArea
|
|
||||||
minHeight="100px"
|
|
||||||
disabled
|
|
||||||
value={JSON.stringify(testResults?.[idx]?.outputs, null, 2)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{#if blocks.length - 1 !== idx}
|
|
||||||
<div class="separator" />
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container {
|
|
||||||
padding: 0px 30px 0px 30px;
|
|
||||||
}
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
@ -106,15 +58,6 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: stretch;
|
|
||||||
position: relative;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-text {
|
.title-text {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
@ -124,23 +67,4 @@
|
||||||
.title :global(h1) {
|
.title :global(h1) {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block {
|
|
||||||
display: inline-block;
|
|
||||||
width: 400px;
|
|
||||||
font-size: 16px;
|
|
||||||
background-color: var(--background);
|
|
||||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
|
||||||
border-radius: 4px 4px 4px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.separator {
|
|
||||||
width: 1px;
|
|
||||||
height: 40px;
|
|
||||||
border-left: 1px dashed var(--grey-4);
|
|
||||||
color: var(--grey-4);
|
|
||||||
/* center horizontally */
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 50%;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { Layout, Icon, ActionButton } from "@budibase/bbui"
|
import { Layout, Icon, ActionButton } from "@budibase/bbui"
|
||||||
import StatusRenderer from "components/portal/overview/StatusRenderer.svelte"
|
import StatusRenderer from "components/portal/overview/StatusRenderer.svelte"
|
||||||
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
|
||||||
import FlowItemHeader from "components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte"
|
import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
|
||||||
|
|
||||||
export let history
|
export let history
|
||||||
export let close
|
export let close
|
||||||
|
|
@ -32,9 +32,7 @@
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
{#each history.steps as step}
|
<TestDisplay testResults={history} width="100%" />
|
||||||
<FlowItemHeader block={step} />
|
|
||||||
{/each}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
|
|
@ -57,6 +55,7 @@
|
||||||
.bottom {
|
.bottom {
|
||||||
margin-top: var(--spacing-m);
|
margin-top: var(--spacing-m);
|
||||||
border-top: var(--border-light);
|
border-top: var(--border-light);
|
||||||
|
padding-top: var(--spacing-xl);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -62,12 +62,28 @@
|
||||||
steps: [
|
steps: [
|
||||||
{
|
{
|
||||||
stepId: "ROW_SAVED",
|
stepId: "ROW_SAVED",
|
||||||
outputs: {},
|
inputs: null,
|
||||||
|
outputs: {
|
||||||
|
id: "awd",
|
||||||
|
revision: "awd",
|
||||||
|
row: {
|
||||||
|
tableId: "ta_240cfde36405479fa814b8a2c46655b5",
|
||||||
|
name: "",
|
||||||
|
suppliers: [],
|
||||||
|
"supplier name": "",
|
||||||
|
_id: "awd",
|
||||||
|
_rev: "awd",
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
stepId: "SEND_EMAIL_SMTP",
|
stepId: "SERVER_LOG",
|
||||||
inputs: {},
|
inputs: {
|
||||||
outputs: {},
|
text: "awdawdawd",
|
||||||
|
},
|
||||||
|
outputs: {
|
||||||
|
success: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -78,6 +94,7 @@
|
||||||
steps: [
|
steps: [
|
||||||
{
|
{
|
||||||
stepId: "ROW_SAVED",
|
stepId: "ROW_SAVED",
|
||||||
|
inputs: {},
|
||||||
outputs: {},
|
outputs: {},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue