feat: get full inputs/outputs from execution data (#92)

flyteorg · Sep 22, 2020 · 78b250d · 78b250d
1 parent 1448569
commit 78b250d
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 11 deletions.
diff --git 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 (
         <WaitForData {...executionData}>
             {() => (
-                <RemoteLiteralMapViewer blob={executionData.value.outputs} />
+                <RemoteLiteralMapViewer
+                    map={executionData.value.fullOutputs}
+                    blob={executionData.value.outputs}
+                />
             )}
         </WaitForData>
     );

diff --git 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 }> = ({
                             </header>
                             <section>
                                 <RemoteLiteralMapViewer
+                                    map={executionData.value.fullInputs}
                                     blob={executionData.value.inputs}
                                 />
                             </section>
@@ -41,6 +42,7 @@ export const NodeExecutionData: React.FC<{ execution: NodeExecution }> = ({
                             </header>
                             <section>
                                 <RemoteLiteralMapViewer
+                                    map={executionData.value.fullOutputs}
                                     blob={executionData.value.outputs}
                                 />
                             </section>

diff --git 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 }> = ({
                     <div className={commonStyles.detailsPanelCard}>
                         <div className={commonStyles.detailsPanelCardContent}>
                             <RemoteLiteralMapViewer
+                                map={executionData.value.fullInputs}
                                 blob={executionData.value.inputs}
                             />
                         </div>

diff --git 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 }> = ({
                     <div className={commonStyles.detailsPanelCard}>
                         <div className={commonStyles.detailsPanelCardContent}>
                             <RemoteLiteralMapViewer
+                                map={executionData.value.fullOutputs}
                                 blob={executionData.value.outputs}
                             />
                         </div>

diff --git 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 (
         <WaitForData {...executionData} spinnerVariant="none">
-            {() => <RemoteLiteralMapViewer blob={executionData.value.inputs} />}
+            {() => (
+                <RemoteLiteralMapViewer
+                    map={executionData.value.fullInputs}
+                    blob={executionData.value.inputs}
+                />
+            )}
         </WaitForData>
     );
 };
@@ -54,7 +59,10 @@ const RemoteExecutionOutputs: React.FC<{ execution: Execution }> = ({
     return (
         <WaitForData {...executionData} spinnerVariant="none">
             {() => (
-                <RemoteLiteralMapViewer blob={executionData.value.outputs} />
+                <RemoteLiteralMapViewer
+                    map={executionData.value.fullOutputs}
+                    blob={executionData.value.outputs}
+                />
             )}
         </WaitForData>
     );

diff --git 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 (
             <p>
@@ -37,6 +38,10 @@ export const RemoteLiteralMapViewer: React.FC<{ blob: UrlBlob }> = ({
         );
     }
 
+    if (map !== undefined) {
+        return <LiteralMapViewer map={map} />;
+    }
+
     return blob.bytes.gt(maxBlobDownloadSizeBytes) ? (
         <BlobTooLarge url={blob.url} />
     ) : (

diff --git a/src/components/Literals/test/RemoteLiteralMapViewer.test.tsx 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(
+            <RemoteLiteralMapViewer map={undefined} blob={blob} />
+        );
+
+        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(
+            <RemoteLiteralMapViewer map={map} blob={blob} />
+        );
+
+        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<LiteralMap>
+        >;
+        mockUseRemoteLiteralMap.mockReturnValue(
+            loadedFetchable(map, () => null)
+        );
+
+        const blob = {
+            url: 'http://url',
+            bytes: Long.fromInt(1337)
+        };
+
+        const { getAllByText } = render(
+            <RemoteLiteralMapViewer map={undefined} blob={blob} />
+        );
+
+        const items = getAllByText('input1:');
+        expect(items.length).toBe(1);
+    });
+});
diff --git 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;
 }