forked from tsai/budibase
Peter Clement
4 years ago
committed by
GitHub
GitHub
8 changed files with 345 additions and 262 deletions
@ -0,0 +1,111 @@ |
|||||
|
<script> |
||||
|
import { automationStore } from "builderStore" |
||||
|
import { Icon, Body, Detail, StatusLight } from "@budibase/bbui" |
||||
|
import { externalActions } from "./ExternalActions" |
||||
|
|
||||
|
export let block |
||||
|
export let blockComplete |
||||
|
export let showTestStatus = false |
||||
|
export let showParameters = {} |
||||
|
|
||||
|
$: testResult = |
||||
|
$automationStore.selectedAutomation?.testResults?.steps.filter(step => |
||||
|
block.id ? step.id === block.id : step.stepId === block.stepId |
||||
|
) |
||||
|
$: isTrigger = block.type === "TRIGGER" |
||||
|
|
||||
|
async function onSelect(block) { |
||||
|
await automationStore.update(state => { |
||||
|
state.selectedBlock = block |
||||
|
return state |
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="blockSection"> |
||||
|
<div |
||||
|
on:click={() => { |
||||
|
blockComplete = !blockComplete |
||||
|
showParameters[block.id] = blockComplete |
||||
|
}} |
||||
|
class="splitHeader" |
||||
|
> |
||||
|
<div class="center-items"> |
||||
|
{#if externalActions[block.stepId]} |
||||
|
<img |
||||
|
alt={externalActions[block.stepId].name} |
||||
|
width="28px" |
||||
|
height="28px" |
||||
|
src={externalActions[block.stepId].icon} |
||||
|
/> |
||||
|
{:else} |
||||
|
<svg |
||||
|
width="28px" |
||||
|
height="28px" |
||||
|
class="spectrum-Icon" |
||||
|
style="color:grey;" |
||||
|
focusable="false" |
||||
|
> |
||||
|
<use xlink:href="#spectrum-icon-18-{block.icon}" /> |
||||
|
</svg> |
||||
|
{/if} |
||||
|
<div class="iconAlign"> |
||||
|
{#if isTrigger} |
||||
|
<Body size="XS">When this happens:</Body> |
||||
|
{:else} |
||||
|
<Body size="XS">Do this:</Body> |
||||
|
{/if} |
||||
|
|
||||
|
<Detail size="S">{block?.name?.toUpperCase() || ""}</Detail> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="blockTitle"> |
||||
|
{#if showTestStatus && testResult && testResult[0]} |
||||
|
<div style="float: right;"> |
||||
|
<StatusLight |
||||
|
positive={isTrigger || testResult[0].outputs?.success} |
||||
|
negative={!testResult[0].outputs?.success} |
||||
|
><Body size="XS" |
||||
|
>{testResult[0].outputs?.success || isTrigger |
||||
|
? "Success" |
||||
|
: "Error"}</Body |
||||
|
></StatusLight |
||||
|
> |
||||
|
</div> |
||||
|
{/if} |
||||
|
<div |
||||
|
style="margin-left: 10px; margin-bottom: var(--spacing-xs);" |
||||
|
on:click={() => { |
||||
|
onSelect(block) |
||||
|
}} |
||||
|
> |
||||
|
<Icon name={blockComplete ? "ChevronUp" : "ChevronDown"} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.center-items { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.splitHeader { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.iconAlign { |
||||
|
padding: 0 0 0 var(--spacing-m); |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.blockSection { |
||||
|
padding: var(--spacing-xl); |
||||
|
} |
||||
|
|
||||
|
.blockTitle { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
</style> |
||||
@ -1,133 +0,0 @@ |
|||||
<script> |
|
||||
import { ModalContent, Icon, Detail, TextArea, Label } from "@budibase/bbui" |
|
||||
|
|
||||
export let testResult |
|
||||
export let isTrigger |
|
||||
let inputToggled |
|
||||
let outputToggled |
|
||||
</script> |
|
||||
|
|
||||
<ModalContent |
|
||||
showCloseIcon={false} |
|
||||
showConfirmButton={false} |
|
||||
cancelText="Close" |
|
||||
> |
|
||||
<div slot="header" class="result-modal-header"> |
|
||||
<span>Test Results</span> |
|
||||
<div> |
|
||||
{#if isTrigger || testResult[0].outputs.success} |
|
||||
<div class="iconSuccess"> |
|
||||
<Icon size="S" name="CheckmarkCircle" /> |
|
||||
</div> |
|
||||
{:else} |
|
||||
<div class="iconFailure"> |
|
||||
<Icon size="S" name="CloseCircle" /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
<span> |
|
||||
{#if testResult[0].outputs.iterations} |
|
||||
<div style="display: flex;"> |
|
||||
<Icon name="Reuse" /> |
|
||||
<div style="margin-left: 10px;"> |
|
||||
<Label> |
|
||||
This loop ran {testResult[0].outputs.iterations} times.</Label |
|
||||
> |
|
||||
</div> |
|
||||
</div> |
|
||||
{/if} |
|
||||
</span> |
|
||||
<div |
|
||||
on:click={() => { |
|
||||
inputToggled = !inputToggled |
|
||||
}} |
|
||||
class="toggle splitHeader" |
|
||||
> |
|
||||
<div> |
|
||||
<div style="display: flex; align-items: center;"> |
|
||||
<span style="padding-left: var(--spacing-s);"> |
|
||||
<Detail size="S">Input</Detail> |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div> |
|
||||
{#if inputToggled} |
|
||||
<Icon size="M" name="ChevronDown" /> |
|
||||
{:else} |
|
||||
<Icon size="M" name="ChevronRight" /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
{#if inputToggled} |
|
||||
<div class="text-area-container"> |
|
||||
<TextArea |
|
||||
disabled |
|
||||
value={JSON.stringify(testResult[0].inputs, null, 2)} |
|
||||
/> |
|
||||
</div> |
|
||||
{/if} |
|
||||
|
|
||||
<div |
|
||||
on:click={() => { |
|
||||
outputToggled = !outputToggled |
|
||||
}} |
|
||||
class="toggle splitHeader" |
|
||||
> |
|
||||
<div> |
|
||||
<div style="display: flex; align-items: center;"> |
|
||||
<span style="padding-left: var(--spacing-s);"> |
|
||||
<Detail size="S">Output</Detail> |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div> |
|
||||
{#if outputToggled} |
|
||||
<Icon size="M" name="ChevronDown" /> |
|
||||
{:else} |
|
||||
<Icon size="M" name="ChevronRight" /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
{#if outputToggled} |
|
||||
<div class="text-area-container"> |
|
||||
<TextArea |
|
||||
disabled |
|
||||
value={JSON.stringify(testResult[0].outputs, null, 2)} |
|
||||
/> |
|
||||
</div> |
|
||||
{/if} |
|
||||
</ModalContent> |
|
||||
|
|
||||
<style> |
|
||||
.result-modal-header { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.iconSuccess { |
|
||||
color: var(--spectrum-global-color-green-600); |
|
||||
} |
|
||||
|
|
||||
.iconFailure { |
|
||||
color: var(--spectrum-global-color-red-600); |
|
||||
} |
|
||||
|
|
||||
.splitHeader { |
|
||||
cursor: pointer; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
|
|
||||
.toggle { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.text-area-container :global(textarea) { |
|
||||
height: 150px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,146 @@ |
|||||
|
<script> |
||||
|
import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui" |
||||
|
import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte" |
||||
|
import { automationStore } from "builderStore" |
||||
|
|
||||
|
export let automation |
||||
|
|
||||
|
let showParameters |
||||
|
let blocks |
||||
|
|
||||
|
$: { |
||||
|
blocks = [] |
||||
|
if (automation) { |
||||
|
if (automation.definition.trigger) { |
||||
|
blocks.push(automation.definition.trigger) |
||||
|
} |
||||
|
blocks = blocks |
||||
|
.concat(automation.definition.steps || []) |
||||
|
.filter(x => x.stepId !== "LOOP") |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
$: testResults = |
||||
|
$automationStore.selectedAutomation?.testResults?.steps.filter( |
||||
|
x => x.stepId !== "LOOP" || [] |
||||
|
) |
||||
|
</script> |
||||
|
|
||||
|
<div class="title"> |
||||
|
<div class="title-text"> |
||||
|
<Icon name="MultipleCheck" /> |
||||
|
<div style="padding-left: var(--spacing-l)">Test Details</div> |
||||
|
</div> |
||||
|
<div style="padding-right: var(--spacing-xl)"> |
||||
|
<Icon |
||||
|
on:click={async () => { |
||||
|
$automationStore.selectedAutomation.automation.showTestPanel = false |
||||
|
}} |
||||
|
hoverable |
||||
|
name="Close" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<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> |
||||
|
|
||||
|
<style> |
||||
|
.container { |
||||
|
padding: 0px 30px 0px 30px; |
||||
|
} |
||||
|
.title { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
gap: var(--spacing-xs); |
||||
|
padding-left: var(--spacing-xl); |
||||
|
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; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.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> |
||||
Loading…
Reference in new issue