From f3012caaebb50d6776c20a3ce1729edf4e1e227d Mon Sep 17 00:00:00 2001 From: Gleb Kanterov Date: Mon, 31 Aug 2020 14:16:02 +0200 Subject: [PATCH] feat: get full inputs/outputs from execution data --- .../OutputNodeDetails.tsx | 5 +- .../ExecutionDetails/NodeExecutionData.tsx | 4 +- .../ExecutionDetails/NodeExecutionInputs.tsx | 3 +- .../ExecutionDetails/NodeExecutionOutputs.tsx | 3 +- .../ExecutionInputsOutputsModal.tsx | 12 ++- .../Literals/RemoteLiteralMapViewer.tsx | 15 ++-- .../test/RemoteLiteralMapViewer.test.tsx | 74 +++++++++++++++++++ src/models/Execution/types.ts | 2 + 8 files changed, 107 insertions(+), 11 deletions(-) create mode 100644 src/components/Literals/test/RemoteLiteralMapViewer.test.tsx diff --git a/src/components/Executions/ExecutionDetails/ExecutionNodeDetails/OutputNodeDetails.tsx b/src/components/Executions/ExecutionDetails/ExecutionNodeDetails/OutputNodeDetails.tsx index 9d2b5530f..5e81a0750 100644 --- a/src/components/Executions/ExecutionDetails/ExecutionNodeDetails/OutputNodeDetails.tsx +++ b/src/components/Executions/ExecutionDetails/ExecutionNodeDetails/OutputNodeDetails.tsx @@ -15,7 +15,10 @@ const RemoteExecutionOutputs: React.FC<{ execution: Execution }> = ({ return ( {() => ( - + )} ); diff --git a/src/components/Executions/ExecutionDetails/NodeExecutionData.tsx b/src/components/Executions/ExecutionDetails/NodeExecutionData.tsx index 4bb7c0f6e..12eb1829c 100644 --- a/src/components/Executions/ExecutionDetails/NodeExecutionData.tsx +++ b/src/components/Executions/ExecutionDetails/NodeExecutionData.tsx @@ -3,7 +3,7 @@ import Typography from '@material-ui/core/Typography'; import { WaitForData } from 'components/common'; import { useCommonStyles } from 'components/common/styles'; import { useNodeExecutionData } from 'components/hooks'; -import { RemoteLiteralMapViewer } from 'components/Literals'; +import { LiteralMapViewer, RemoteLiteralMapViewer } from 'components/Literals'; import { NodeExecution } from 'models'; import * as React from 'react'; @@ -27,6 +27,7 @@ export const NodeExecutionData: React.FC<{ execution: NodeExecution }> = ({
@@ -41,6 +42,7 @@ export const NodeExecutionData: React.FC<{ execution: NodeExecution }> = ({
diff --git a/src/components/Executions/ExecutionDetails/NodeExecutionInputs.tsx b/src/components/Executions/ExecutionDetails/NodeExecutionInputs.tsx index ba69b7841..0ba73c702 100644 --- a/src/components/Executions/ExecutionDetails/NodeExecutionInputs.tsx +++ b/src/components/Executions/ExecutionDetails/NodeExecutionInputs.tsx @@ -1,7 +1,7 @@ import { WaitForData } from 'components/common'; import { useCommonStyles } from 'components/common/styles'; import { useNodeExecutionData } from 'components/hooks'; -import { RemoteLiteralMapViewer } from 'components/Literals'; +import { LiteralMapViewer, RemoteLiteralMapViewer } from 'components/Literals'; import { NodeExecution } from 'models'; import * as React from 'react'; @@ -18,6 +18,7 @@ export const NodeExecutionInputs: React.FC<{ execution: NodeExecution }> = ({
diff --git a/src/components/Executions/ExecutionDetails/NodeExecutionOutputs.tsx b/src/components/Executions/ExecutionDetails/NodeExecutionOutputs.tsx index 19efc4dd0..097a236aa 100644 --- a/src/components/Executions/ExecutionDetails/NodeExecutionOutputs.tsx +++ b/src/components/Executions/ExecutionDetails/NodeExecutionOutputs.tsx @@ -1,7 +1,7 @@ import { WaitForData } from 'components/common'; import { useCommonStyles } from 'components/common/styles'; import { useNodeExecutionData } from 'components/hooks'; -import { RemoteLiteralMapViewer } from 'components/Literals'; +import { LiteralMapViewer, RemoteLiteralMapViewer } from 'components/Literals'; import { NodeExecution } from 'models'; import * as React from 'react'; @@ -18,6 +18,7 @@ export const NodeExecutionOutputs: React.FC<{ execution: NodeExecution }> = ({
diff --git a/src/components/Executions/ExecutionInputsOutputsModal.tsx b/src/components/Executions/ExecutionInputsOutputsModal.tsx index d33980efe..1905b8ab4 100644 --- a/src/components/Executions/ExecutionInputsOutputsModal.tsx +++ b/src/components/Executions/ExecutionInputsOutputsModal.tsx @@ -42,7 +42,12 @@ const RemoteExecutionInputs: React.FC<{ execution: Execution }> = ({ const executionData = useWorkflowExecutionData(execution.id); return ( - {() => } + {() => ( + + )} ); }; @@ -54,7 +59,10 @@ const RemoteExecutionOutputs: React.FC<{ execution: Execution }> = ({ return ( {() => ( - + )} ); diff --git a/src/components/Literals/RemoteLiteralMapViewer.tsx b/src/components/Literals/RemoteLiteralMapViewer.tsx index 468256d33..b4c1e19cd 100644 --- a/src/components/Literals/RemoteLiteralMapViewer.tsx +++ b/src/components/Literals/RemoteLiteralMapViewer.tsx @@ -1,6 +1,6 @@ import { WaitForData } from 'components/common'; import { useRemoteLiteralMap } from 'components/hooks'; -import { UrlBlob } from 'models'; +import { Literal, LiteralMap, UrlBlob } from 'models'; import * as React from 'react'; import { maxBlobDownloadSizeBytes } from './constants'; import { LiteralMapViewer } from './LiteralMapViewer'; @@ -24,11 +24,12 @@ const BlobTooLarge: React.FC<{ url: string }> = ({ url }) => ( * address, this component will initiate a fetch of the data and then render it * using a `LiteralMapViewer`. Special behaviors are used for blobs missing * a URL or which are too large to view in the UI. For the latter case, a direct - * download link is provided. + * download link is provided. If `map` is defined, use it instead of fetching. */ -export const RemoteLiteralMapViewer: React.FC<{ blob: UrlBlob }> = ({ - blob -}) => { +export const RemoteLiteralMapViewer: React.FC<{ + blob: UrlBlob; + map?: LiteralMap; +}> = ({ blob, map }) => { if (!blob.url || !blob.bytes) { return (

@@ -37,6 +38,10 @@ export const RemoteLiteralMapViewer: React.FC<{ blob: UrlBlob }> = ({ ); } + if (map !== undefined) { + return ; + } + return blob.bytes.gt(maxBlobDownloadSizeBytes) ? ( ) : ( diff --git a/src/components/Literals/test/RemoteLiteralMapViewer.test.tsx b/src/components/Literals/test/RemoteLiteralMapViewer.test.tsx new file mode 100644 index 000000000..4de9e509f --- /dev/null +++ b/src/components/Literals/test/RemoteLiteralMapViewer.test.tsx @@ -0,0 +1,74 @@ +import { getByText, render } from '@testing-library/react'; +import * as React from 'react'; + +import { FetchableData } from 'components/hooks'; +import { loadedFetchable } from 'components/hooks/__mocks__/fetchableData'; +import { useRemoteLiteralMap } from 'components/hooks/useRemoteLiteralMap'; +import * as Long from 'long'; +import { LiteralMap } from 'models'; +import { RemoteLiteralMapViewer } from '../RemoteLiteralMapViewer'; + +jest.mock('components/hooks/useRemoteLiteralMap'); + +describe('RemoteLiteralMapViewer', () => { + it('renders no data available', () => { + const blob = { + url: '', + bytes: Long.fromInt(0) + }; + + const { getAllByText } = render( + + ); + + const items = getAllByText('No data is available.'); + expect(items.length).toBe(1); + }); + + it('renders map if it is defined', () => { + const blob = { + url: 'http://url', + bytes: Long.fromInt(1337) + }; + + const map: LiteralMap = { + literals: { + input1: {} + } + }; + + const { getAllByText } = render( + + ); + + const items = getAllByText('input1:'); + expect(items.length).toBe(1); + }); + + it('fetches blob if map is undefined', () => { + const map: LiteralMap = { + literals: { + input1: {} + } + }; + + const mockUseRemoteLiteralMap = useRemoteLiteralMap as jest.Mock< + FetchableData + >; + mockUseRemoteLiteralMap.mockReturnValue( + loadedFetchable(map, () => null) + ); + + const blob = { + url: 'http://url', + bytes: Long.fromInt(1337) + }; + + const { getAllByText } = render( + + ); + + const items = getAllByText('input1:'); + expect(items.length).toBe(1); + }); +}); diff --git a/src/models/Execution/types.ts b/src/models/Execution/types.ts index ddd117a01..759641440 100644 --- a/src/models/Execution/types.ts +++ b/src/models/Execution/types.ts @@ -124,4 +124,6 @@ export interface TaskExecutionClosure extends Admin.ITaskExecutionClosure { export interface ExecutionData { inputs: UrlBlob; outputs: UrlBlob; + fullInputs?: LiteralMap; + fullOutputs?: LiteralMap; }