From a852f0431b67016288bf6f3bf4f1767d61f2b76c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pavol=20Porubsk=C3=BD?= <paulooze@gmail.com>
Date: Fri, 12 Nov 2021 13:55:29 +0100
Subject: [PATCH] fix types; add external storage to task detail; fix storage
 in exec workflow detail (#283)

---
 .../src/common/task-modal.tsx                 | 320 ++++++++++--------
 .../workflow-json-tab.tsx                     |   2 +-
 .../executed-workflow-detail.tsx              |  23 +-
 .../executed-workflow-detail/task-table.tsx   |   6 +-
 packages/frinx-workflow-ui/src/types/task.ts  |  23 --
 packages/frinx-workflow-ui/src/types/types.ts |  41 ++-
 6 files changed, 224 insertions(+), 191 deletions(-)

diff --git a/packages/frinx-workflow-ui/src/common/task-modal.tsx b/packages/frinx-workflow-ui/src/common/task-modal.tsx
index a3892325c..40aa404e6 100644
--- a/packages/frinx-workflow-ui/src/common/task-modal.tsx
+++ b/packages/frinx-workflow-ui/src/common/task-modal.tsx
@@ -1,5 +1,5 @@
 // @flow
-import React, { useState } from 'react';
+import React, { useState, VoidFunctionComponent } from 'react';
 import {
   Box,
   Modal,
@@ -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) {
@@ -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>
+    </>
   );
 };
 
diff --git a/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/executed-workflow-detail-tabs/workflow-json-tab.tsx b/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/executed-workflow-detail-tabs/workflow-json-tab.tsx
index 6cb660fa4..d3b471974 100644
--- a/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/executed-workflow-detail-tabs/workflow-json-tab.tsx
+++ b/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/executed-workflow-detail-tabs/workflow-json-tab.tsx
@@ -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;
diff --git a/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/executed-workflow-detail.tsx b/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/executed-workflow-detail.tsx
index 38841515e..e8f0f1f23 100644
--- a/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/executed-workflow-detail.tsx
+++ b/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/executed-workflow-detail.tsx
@@ -17,12 +17,12 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import TaskTable from './task-table';
-import { Task } from '../../types/task';
 import InputOutputTab from './executed-workflow-detail-tabs/input-output-tab';
 import WorkflowJsonTab from './executed-workflow-detail-tabs/workflow-json-tab';
 import EditRerunTab from './executed-workflow-detail-tabs/edit-rerun-tab';
 import DetailsModalHeader from './executed-workflow-detail-header';
 import { useAsyncGenerator } from './executed-workflow-detail-status.helpers';
+import { ExecutedWorkflowTask } from '../../types/types';
 
 const convertWorkflowVariablesToFormFormat = (
   workflowDetails: string,
@@ -71,23 +71,10 @@ type Props = {
   onWorkflowIdClick: (workflowId: string) => void;
 };
 
-export type Status = 'RUNNING' | 'FAILED' | 'TERMINATED' | 'PAUSED' | 'COMPLETED';
-
-export type ExecutedWorkflowDetailResult = {
-  status: Status;
-  tasks: Task[];
-  startTime: Date | number | string;
-  endTime: Date | number | string;
-  input: Record<string, string>;
-  output: Record<string, string>;
-  externalInputPayloadStoragePath?: string;
-  externalOutputPayloadStoragePath?: string;
-};
-
 const DetailsModal: FC<Props> = ({ workflowId, onWorkflowIdClick, onExecutedOperation }) => {
   const taskModalDisclosure = useDisclosure();
   const execPayload = useAsyncGenerator(workflowId);
-  const [openedTask, setOpenedTask] = useState<Task | null>(null);
+  const [openedTask, setOpenedTask] = useState<ExecutedWorkflowTask | null>(null);
   const [isEscaped, setIsEscaped] = useState(false);
   const [workflowVariables, setWorkflowVariables] = useState<Record<string, string> | null>(null);
 
@@ -153,7 +140,7 @@ const DetailsModal: FC<Props> = ({ workflowId, onWorkflowIdClick, onExecutedOper
     onExecutedOperation();
   };
 
-  const handleOnOpenTaskModal = (task: Task) => {
+  const handleOnOpenTaskModal = (task: ExecutedWorkflowTask) => {
     setOpenedTask(task);
     taskModalDisclosure.onOpen();
   };
@@ -217,8 +204,8 @@ const DetailsModal: FC<Props> = ({ workflowId, onWorkflowIdClick, onExecutedOper
                   output={result.output}
                   onEscapeChange={() => setIsEscaped(!isEscaped)}
                   getUnescapedJSON={getUnescapedJSON}
-                  externalInputPayloadStoragePath={details.result?.externalInputPayloadStoragePath}
-                  externalOutputPayloadStoragePath={details.result?.externalOutputPayloadStoragePath}
+                  externalInputPayloadStoragePath={result.externalInputPayloadStoragePath}
+                  externalOutputPayloadStoragePath={result.externalOutputPayloadStoragePath}
                 />
               )}
             </TabPanel>
diff --git a/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/task-table.tsx b/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/task-table.tsx
index 1400e69ed..d36e452b4 100644
--- a/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/task-table.tsx
+++ b/packages/frinx-workflow-ui/src/pages/executed-workflow-detail/task-table.tsx
@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 import { Button, Icon, IconButton, Table, Tbody, Td, Text, Th, Thead, Tooltip, Tr } from '@chakra-ui/react';
-import { Task } from '../../types/task';
+import { ExecutedWorkflowTask } from '../../types/types';
 import { ArrowForwardIcon } from '@chakra-ui/icons';
 
 type Props = {
-  tasks: Task[];
-  onTaskClick: (task: Task) => void;
+  tasks: ExecutedWorkflowTask[];
+  onTaskClick: (task: ExecutedWorkflowTask) => void;
   onWorkflowClick: (wfId: string) => void;
   formatDate: (date: number | string) => string;
 };
diff --git a/packages/frinx-workflow-ui/src/types/task.ts b/packages/frinx-workflow-ui/src/types/task.ts
index d02db100e..e69de29bb 100644
--- a/packages/frinx-workflow-ui/src/types/task.ts
+++ b/packages/frinx-workflow-ui/src/types/task.ts
@@ -1,23 +0,0 @@
-export type Task = {
-  taskType: string;
-  status: string;
-  reasonForIncompletion: string;
-  referenceTaskName: string;
-  callbackAfterSeconds: number;
-  pollCount: number;
-  logs: {};
-  inputData: {};
-  outputData: {};
-  workflowTask: {
-    description: string;
-    taskDefinition: {
-      description: string;
-    };
-  };
-  seq: number;
-  subWorkflowId: string;
-  startTime: number;
-  endTime: number;
-  externalOutputPayloadStoragePath?: string;
-  externalInputPayloadStoragePath?: string;
-};
diff --git a/packages/frinx-workflow-ui/src/types/types.ts b/packages/frinx-workflow-ui/src/types/types.ts
index 8a62883bf..603a5854b 100644
--- a/packages/frinx-workflow-ui/src/types/types.ts
+++ b/packages/frinx-workflow-ui/src/types/types.ts
@@ -1,7 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { Node } from 'beautiful-react-diagrams/@types/DiagramSchema';
-import { Status } from '../pages/executed-workflow-detail/executed-workflow-detail';
-import { Task as WorkflowTask } from '../types/task';
 
 type AnyJson = JsonArray | JsonMap;
 type JsonMap = {
@@ -359,6 +357,30 @@ export type TaskDefinition = {
   ownerEmail: string;
 };
 
+export type ExecutedWorkflowTask = {
+  taskType: string;
+  status: string;
+  reasonForIncompletion: string;
+  referenceTaskName: string;
+  callbackAfterSeconds: number;
+  pollCount: number;
+  logs: {};
+  inputData: {};
+  outputData: {};
+  workflowTask: {
+    description: string;
+    taskDefinition: {
+      description: string;
+    };
+  };
+  seq: number;
+  subWorkflowId: string;
+  startTime: number;
+  endTime: number;
+  externalOutputPayloadStoragePath?: string;
+  externalInputPayloadStoragePath?: string;
+};
+
 // eslint-disable-next-line no-shadow
 export enum SerializerEnum {
   IntegerSerializer = 'org.apache.kafka.common.serialization.IntegerSerializer',
@@ -439,6 +461,17 @@ export type ExecutedWorkflowsHierarchical = {
   hits: number;
 };
 
+export type Status = 'RUNNING' | 'FAILED' | 'TERMINATED' | 'PAUSED' | 'COMPLETED';
+
+export type ExecutedWorkflowDetailResult = {
+  status: Status;
+  tasks: ExecutedWorkflowTask[];
+  startTime: Date | number | string;
+  endTime: Date | number | string;
+  input: Record<string, string>;
+  output: Record<string, string>;
+};
+
 export type WorkflowInstanceDetail = {
   ownerApp: string;
   createTime: number;
@@ -446,7 +479,7 @@ export type WorkflowInstanceDetail = {
   status: Status;
   endTime: number;
   workflowId: string;
-  tasks: WorkflowTask[];
+  tasks: ExecutedWorkflowTask[];
   input: Record<string, string>;
   output: Record<string, string>;
   correlationId: string;
@@ -462,4 +495,6 @@ export type WorkflowInstanceDetail = {
   workflowName: string;
   workflowVersion: number;
   parentWorkflowId: string;
+  externalInputPayloadStoragePath?: string;
+  externalOutputPayloadStoragePath?: string;
 };