Skip to content

Commit

Permalink
fix types; add external storage to task detail; fix storage in exec w…
Browse files Browse the repository at this point in the history 
…orkflow detail (#283)
  • Loading branch information
@Paulooze
Paulooze authored Nov 12, 2021
1 parent 92147e5 commit a852f04
Show file tree
Hide file tree
Showing 6 changed files with 224 additions and 191 deletions.
320 changes: 177 additions & 143 deletions packages/frinx-workflow-ui/src/common/task-modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// @flow
import React, { useState } from 'react';
import React, { useState, VoidFunctionComponent } from 'react';
import {
Box,
Modal,
Expand All @@ -21,29 +21,31 @@ import {
Divider,
Button,
} from '@chakra-ui/react';
import type { Task } from '../types/task';
import type { ExecutedWorkflowTask } from '../types/types';
import { jsonParse } from './utils';
import { CopyIcon } from '@chakra-ui/icons';
import unescapeJs from 'unescape-js';
import ExternalStorageModal from '../pages/executed-workflow-detail/executed-workflow-detail-tabs/external-storage-modal';

type Props = {
task: Task;
task: ExecutedWorkflowTask;
isOpen: boolean;
onClose: () => void;
};

function renderTaskDescription(task: Task) {
function renderTaskDescription(task: ExecutedWorkflowTask) {
return (
jsonParse(task?.workflowTask?.description)?.description ||
jsonParse(task?.workflowTask?.taskDefinition?.description)?.description
);
}

const TaskModal = ({ task, isOpen, onClose }: Props) => {
const TaskModal: VoidFunctionComponent<Props> = ({ task, isOpen, onClose }) => {
const [isEscaped, setIsEscaped] = useState(true);
const { inputData, outputData, logs } = task;
const { inputData, outputData, logs, externalInputPayloadStoragePath, externalOutputPayloadStoragePath } = task;
const [payload, setPayload] = useState<{ type: 'Input' | 'Output'; data: string } | null>(null);

function getUnescapedJSON(data: Task | Object) {
function getUnescapedJSON(data: ExecutedWorkflowTask | Record<string, string>) {
const jsonString = JSON.stringify(data, null, 2);

if (!jsonString) {
Expand All @@ -68,150 +70,182 @@ const TaskModal = ({ task, isOpen, onClose }: Props) => {
};

return (
<Modal size="5xl" isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>
{task.taskType} ({task.status})
</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Tabs defaultIndex={0}>
<TabList>
<Tab>Summary</Tab>
<Tab>JSON</Tab>
<Tab>Logs</Tab>
</TabList>
<TabPanels>
<TabPanel>
<SimpleGrid columns={2} spacing={4} mb={4}>
<>
{payload && (
<ExternalStorageModal
title={payload.type}
isOpen={payload != null}
onClose={() => {
setPayload(null);
}}
storagePath={payload.data}
/>
)}
<Modal size="5xl" isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>
{task.taskType} ({task.status})
</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Tabs defaultIndex={0}>
<TabList>
<Tab>Summary</Tab>
<Tab>JSON</Tab>
<Tab>Logs</Tab>
</TabList>
<TabPanels>
<TabPanel>
<SimpleGrid columns={2} spacing={4} mb={4}>
<Box>
<b>Task Ref. Name: </b>
{task.referenceTaskName}
</Box>
<Box>
<b>Callback After: </b>
{task.callbackAfterSeconds ? task.callbackAfterSeconds : 0} (second)
</Box>
<Box>
<b>Poll Count: </b>
{task.pollCount}
</Box>
<Box>
<b>Description: </b>
{renderTaskDescription(task)}
</Box>
</SimpleGrid>
<Divider />
<Box>
<b>Task Ref. Name: </b>
{task.referenceTaskName}
<Stack direction="row" spacing={2} align="center" mb={2} mt={2}>
<Text as="b" fontSize="sm">
Input
</Text>
<IconButton
aria-label="Copy summary input"
icon={<CopyIcon />}
size="sm"
className="clp"
onClick={() => copyToClipBoard(inputData)}
/>
<Button size="sm" onClick={() => setIsEscaped((prevState) => !prevState)}>
{isEscaped ? 'Unescape' : 'Escape'}
</Button>
{externalInputPayloadStoragePath != null && (
<Button
size="sm"
onClick={() => {
setPayload({ type: 'Input', data: externalInputPayloadStoragePath });
}}
>
External storage input
</Button>
)}
</Stack>
<Textarea
fontFamily="monospace"
value={getUnescapedJSON(inputData)}
isReadOnly
id="t_input"
variant="filled"
minH={200}
/>
</Box>
<Box>
<b>Callback After: </b>
{task.callbackAfterSeconds ? task.callbackAfterSeconds : 0} (second)
<Stack direction="row" spacing={2} align="center" mb={2} mt={2}>
<Text as="b" fontSize="sm">
Output
</Text>
<IconButton
aria-label="Copy summary output"
icon={<CopyIcon />}
size="sm"
className="clp"
onClick={() => copyToClipBoard(outputData)}
/>
<Button size="sm" onClick={() => setIsEscaped((prevState) => !prevState)}>
{isEscaped ? 'Unescape' : 'Escape'}
</Button>
{externalOutputPayloadStoragePath && (
<Button
size="sm"
onClick={() => {
setPayload({ type: 'Output', data: externalOutputPayloadStoragePath });
}}
>
External storage output
</Button>
)}
</Stack>
<Textarea
fontFamily="monospace"
value={getUnescapedJSON(outputData)}
isReadOnly
id="t_output"
variant="filled"
minH={200}
/>
</Box>
</TabPanel>
<TabPanel>
<Box>
<b>Poll Count: </b>
{task.pollCount}
<Stack direction="row" spacing={2} align="center" mb={2}>
<Text as="b" fontSize="sm">
JSON
</Text>
<IconButton
aria-label="Copy JSON"
icon={<CopyIcon />}
size="sm"
className="clp"
onClick={() => copyToClipBoard(task)}
/>
<Button size="sm" onClick={() => setIsEscaped((prevState) => !prevState)}>
{isEscaped ? 'Unescape' : 'Escape'}
</Button>
</Stack>
<Textarea
fontFamily="monospace"
value={getUnescapedJSON(task)}
isReadOnly={true}
id="t_json"
variant="filled"
minH={300}
/>
</Box>
</TabPanel>
<TabPanel>
<Box>
<b>Description: </b>
{renderTaskDescription(task)}
</Box>
</SimpleGrid>
<Divider />
<Box>
<Stack direction="row" spacing={2} align="center" mb={2} mt={2}>
<Text as="b" fontSize="sm">
Input
</Text>
<IconButton
aria-label="Copy summary input"
icon={<CopyIcon />}
size="sm"
className="clp"
onClick={() => copyToClipBoard(inputData)}
<Stack direction="row" spacing={2} align="center" mb={2}>
<Text as="b" fontSize="sm">
Logs
</Text>
<IconButton
aria-label="Copy logs"
icon={<CopyIcon />}
size="sm"
className="clp"
onClick={() => copyToClipBoard(logs)}
/>
<Button size="sm" onClick={() => setIsEscaped((prevState) => !prevState)}>
{isEscaped ? 'Unescape' : 'Escape'}
</Button>
</Stack>
<Textarea
fontFamily="monospace"
value={getUnescapedJSON(logs)}
isReadOnly={true}
id="t_logs"
variant="filled"
/>
<Button size="sm" onClick={() => setIsEscaped((prevState) => !prevState)}>
{isEscaped ? 'Unescape' : 'Escape'}
</Button>
</Stack>
<Textarea
fontFamily="monospace"
value={getUnescapedJSON(inputData)}
isReadOnly
id="t_input"
variant="filled"
minH={200}
/>
</Box>
<Box>
<Stack direction="row" spacing={2} align="center" mb={2} mt={2}>
<Text as="b" fontSize="sm">
Output
</Text>
<IconButton
aria-label="Copy summary output"
icon={<CopyIcon />}
size="sm"
className="clp"
onClick={() => copyToClipBoard(outputData)}
/>
<Button size="sm" onClick={() => setIsEscaped((prevState) => !prevState)}>
{isEscaped ? 'Unescape' : 'Escape'}
</Button>
</Stack>
<Textarea
fontFamily="monospace"
value={getUnescapedJSON(outputData)}
isReadOnly
id="t_output"
variant="filled"
minH={200}
/>
</Box>
</TabPanel>
<TabPanel>
<Box>
<Stack direction="row" spacing={2} align="center" mb={2}>
<Text as="b" fontSize="sm">
JSON
</Text>
<IconButton
aria-label="Copy JSON"
icon={<CopyIcon />}
size="sm"
className="clp"
onClick={() => copyToClipBoard(task)}
/>
<Button size="sm" onClick={() => setIsEscaped((prevState) => !prevState)}>
{isEscaped ? 'Unescape' : 'Escape'}
</Button>
</Stack>
<Textarea
fontFamily="monospace"
value={getUnescapedJSON(task)}
isReadOnly={true}
id="t_json"
variant="filled"
minH={300}
/>
</Box>
</TabPanel>
<TabPanel>
<Box>
<Stack direction="row" spacing={2} align="center" mb={2}>
<Text as="b" fontSize="sm">
Logs
</Text>
<IconButton
aria-label="Copy logs"
icon={<CopyIcon />}
size="sm"
className="clp"
onClick={() => copyToClipBoard(logs)}
/>
<Button size="sm" onClick={() => setIsEscaped((prevState) => !prevState)}>
{isEscaped ? 'Unescape' : 'Escape'}
</Button>
</Stack>
<Textarea
fontFamily="monospace"
value={getUnescapedJSON(logs)}
isReadOnly={true}
id="t_logs"
variant="filled"
/>
</Box>
</TabPanel>
</TabPanels>
</Tabs>
</ModalBody>
</ModalContent>
</Modal>
</Box>
</TabPanel>
</TabPanels>
</Tabs>
</ModalBody>
</ModalContent>
</Modal>
</>
);
};

Expand Down
2 changes: 1 addition & 1 deletion ...ui/src/pages/executed-workflow-detail/executed-workflow-detail-tabs/workflow-json-tab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { FC } from 'react';
import { Box, Stack, IconButton, Button, Text, Textarea } from '@chakra-ui/react';
import { CopyIcon } from '@chakra-ui/icons';
import { ExecutedWorkflowDetailResult, Status } from '../executed-workflow-detail';
import { ExecutedWorkflowDetailResult } from '../../../types/types';

type Props = {
isEscaped: boolean;
Expand Down
Loading

0 comments on commit a852f04

Please sign in to comment.