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 showTestStatus = false
|
||||
export let showParameters = {}
|
||||
export let testResult
|
||||
export let isTrigger
|
||||
|
||||
$: testResult =
|
||||
$automationStore.selectedAutomation?.testResults?.steps.filter(step =>
|
||||
block.id ? step.id === block.id : step.stepId === block.stepId
|
||||
)
|
||||
$: isTrigger = block.type === "TRIGGER"
|
||||
$: {
|
||||
if (!testResult) {
|
||||
testResult =
|
||||
$automationStore.selectedAutomation?.testResults?.steps.filter(step =>
|
||||
block.id ? step.id === block.id : step.stepId === block.stepId
|
||||
)[0]
|
||||
}
|
||||
}
|
||||
$: isTrigger = isTrigger || block.type === "TRIGGER"
|
||||
|
||||
async function onSelect(block) {
|
||||
await automationStore.update(state => {
|
||||
|
|
@ -60,13 +66,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="blockTitle">
|
||||
{#if showTestStatus && testResult && testResult[0]}
|
||||
{#if showTestStatus && testResult}
|
||||
<div style="float: right;">
|
||||
<StatusLight
|
||||
positive={isTrigger || testResult[0].outputs?.success}
|
||||
negative={!testResult[0].outputs?.success}
|
||||
positive={isTrigger || testResult.outputs?.success}
|
||||
negative={!testResult.outputs?.success}
|
||||
><Body size="XS"
|
||||
>{testResult[0].outputs?.success || isTrigger
|
||||
>{testResult.outputs?.success || isTrigger
|
||||
? "Success"
|
||||
: "Error"}</Body
|
||||
></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>
|
||||
import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
|
||||
import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
|
||||
import { Icon, Divider } from "@budibase/bbui"
|
||||
import TestDisplay from "./TestDisplay.svelte"
|
||||
import { automationStore } from "builderStore"
|
||||
|
||||
export let automation
|
||||
export let testResults
|
||||
|
||||
let showParameters
|
||||
let blocks
|
||||
|
||||
$: {
|
||||
|
|
@ -17,13 +17,15 @@
|
|||
blocks = blocks
|
||||
.concat(automation.definition.steps || [])
|
||||
.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>
|
||||
|
||||
<div class="title">
|
||||
|
|
@ -44,59 +46,9 @@
|
|||
|
||||
<Divider />
|
||||
|
||||
<div class="container">
|
||||
{#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>
|
||||
<TestDisplay {automation} {testResults} />
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 0px 30px 0px 30px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -106,15 +58,6 @@
|
|||
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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -124,23 +67,4 @@
|
|||
.title :global(h1) {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { Layout, Icon, ActionButton } from "@budibase/bbui"
|
||||
import StatusRenderer from "components/portal/overview/StatusRenderer.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 close
|
||||
|
|
@ -32,9 +32,7 @@
|
|||
</div>
|
||||
</Layout>
|
||||
<div class="bottom">
|
||||
{#each history.steps as step}
|
||||
<FlowItemHeader block={step} />
|
||||
{/each}
|
||||
<TestDisplay testResults={history} width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
|
|
@ -57,6 +55,7 @@
|
|||
.bottom {
|
||||
margin-top: var(--spacing-m);
|
||||
border-top: var(--border-light);
|
||||
padding-top: var(--spacing-xl);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -62,12 +62,28 @@
|
|||
steps: [
|
||||
{
|
||||
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",
|
||||
inputs: {},
|
||||
outputs: {},
|
||||
stepId: "SERVER_LOG",
|
||||
inputs: {
|
||||
text: "awdawdawd",
|
||||
},
|
||||
outputs: {
|
||||
success: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -78,6 +94,7 @@
|
|||
steps: [
|
||||
{
|
||||
stepId: "ROW_SAVED",
|
||||
inputs: {},
|
||||
outputs: {},
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue