improvement: show proper error message for aborted workflows (flyteor…

…g#195) * improvement: show proper error message for aborted workflows Signed-off-by: Pianist038801 <[email protected]> * improvement: show abort message in the execution list Signed-off-by: Pianist038801 <[email protected]> Co-authored-by: Pianist038801 <[email protected]>
eapolinario · Sep 1, 2021 · bc39692 · bc39692
1 parent 3db2892
commit bc39692
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 9 deletions.
diff --git a/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx b/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx
@@ -66,7 +66,13 @@ export const ExecutionMetadata: React.FC<{
     const styles = useStyles();
 
     const { domain } = execution.id;
-    const { duration, error, startedAt, workflowId } = execution.closure;
+    const {
+        abortMetadata,
+        duration,
+        error,
+        startedAt,
+        workflowId
+    } = execution.closure;
     const { referenceExecution, systemMetadata } = execution.spec.metadata;
     const cluster = systemMetadata?.executionCluster ?? dashedValueString;
 
@@ -134,7 +140,12 @@ export const ExecutionMetadata: React.FC<{
                 ))}
             </div>
 
-            {error ? <ExpandableExecutionError error={error} /> : null}
+            {error || abortMetadata ? (
+                <ExpandableExecutionError
+                    abortMetadata={abortMetadata ?? undefined}
+                    error={error}
+                />
+            ) : null}
         </div>
     );
 };
diff --git a/src/components/Executions/ExecutionDetails/ExecutionNodeViews.tsx b/src/components/Executions/ExecutionDetails/ExecutionNodeViews.tsx
@@ -44,6 +44,9 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({
     const filterState = useNodeExecutionFiltersState();
     const tabState = useTabState(tabs, tabs.nodes.id);
     const [graphStateReady, setGraphStateReady] = useState(false);
+    const {
+        closure: { abortMetadata }
+    } = execution;
 
     /* We want to maintain the filter selection when switching away from the Nodes
     tab and back, but do not want to filter the nodes when viewing the graph. So,
@@ -60,7 +63,10 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({
         <NodeExecutionsRequestConfigContext.Provider
             value={nodeExecutionsRequestConfig}
         >
-            <NodeExecutionsTable nodeExecutions={nodeExecutions} />
+            <NodeExecutionsTable
+                abortMetadata={abortMetadata ?? undefined}
+                nodeExecutions={nodeExecutions}
+            />
         </NodeExecutionsRequestConfigContext.Provider>
     );
 

diff --git a/src/components/Executions/Tables/ExpandableExecutionError.tsx b/src/components/Executions/Tables/ExpandableExecutionError.tsx
@@ -1,3 +1,4 @@
+import { Admin } from 'flyteidl';
 import { ExpandableMonospaceText } from 'components/common/ExpandableMonospaceText';
 import { ExecutionError } from 'models/Execution/types';
 import * as React from 'react';
@@ -7,17 +8,23 @@ import { useExecutionTableStyles } from './styles';
  * a button for copying the error string.
  */
 export const ExpandableExecutionError: React.FC<{
-    error: ExecutionError;
+    abortMetadata?: Admin.IAbortMetadata;
+    error?: ExecutionError;
     initialExpansionState?: boolean;
     onExpandCollapse?(expanded: boolean): void;
-}> = ({ error, initialExpansionState = false, onExpandCollapse }) => {
+}> = ({
+    abortMetadata,
+    error,
+    initialExpansionState = false,
+    onExpandCollapse
+}) => {
     const styles = useExecutionTableStyles();
     return (
         <div className={styles.errorContainer}>
             <ExpandableMonospaceText
                 onExpandCollapse={onExpandCollapse}
                 initialExpansionState={initialExpansionState}
-                text={error.message}
+                text={abortMetadata?.cause ?? error?.message ?? ''}
             />
         </div>
     );

diff --git a/src/components/Executions/Tables/NodeExecutionChildren.tsx b/src/components/Executions/Tables/NodeExecutionChildren.tsx
@@ -2,19 +2,22 @@ import { Typography } from '@material-ui/core';
 import * as classnames from 'classnames';
 import { getCacheKey } from 'components/Cache/utils';
 import { useTheme } from 'components/Theme/useTheme';
+import { Admin } from 'flyteidl';
 import * as React from 'react';
 import { NodeExecutionGroup } from '../types';
 import { NodeExecutionRow } from './NodeExecutionRow';
 import { useExecutionTableStyles } from './styles';
 import { calculateNodeExecutionRowLeftSpacing } from './utils';
 
 export interface NodeExecutionChildrenProps {
+    abortMetadata?: Admin.IAbortMetadata;
     childGroups: NodeExecutionGroup[];
     level: number;
 }
 
 /** Renders a nested list of row items for children of a NodeExecution */
 export const NodeExecutionChildren: React.FC<NodeExecutionChildrenProps> = ({
+    abortMetadata,
     childGroups,
     level
 }) => {
@@ -33,6 +36,7 @@ export const NodeExecutionChildren: React.FC<NodeExecutionChildrenProps> = ({
             {childGroups.map(({ name, nodeExecutions }, groupIndex) => {
                 const rows = nodeExecutions.map((nodeExecution, index) => (
                     <NodeExecutionRow
+                        abortMetadata={abortMetadata}
                         key={getCacheKey(nodeExecution.id)}
                         index={index}
                         execution={nodeExecution}

diff --git a/src/components/Executions/Tables/NodeExecutionRow.tsx b/src/components/Executions/Tables/NodeExecutionRow.tsx
@@ -1,4 +1,5 @@
 import { CircularProgress, IconButton } from '@material-ui/core';
+import { Admin } from 'flyteidl';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import * as classnames from 'classnames';
 import { useTheme } from 'components/Theme/useTheme';
@@ -16,6 +17,7 @@ import { selectedClassName, useExecutionTableStyles } from './styles';
 import { calculateNodeExecutionRowLeftSpacing } from './utils';
 
 interface NodeExecutionRowProps {
+    abortMetadata?: Admin.IAbortMetadata;
     index: number;
     execution: NodeExecution;
     level?: number;
@@ -42,6 +44,7 @@ const ChildFetchErrorIcon: React.FC<{
 
 /** Renders a NodeExecution as a row inside a `NodeExecutionsTable` */
 export const NodeExecutionRow: React.FC<NodeExecutionRowProps> = ({
+    abortMetadata,
     execution: nodeExecution,
     index,
     level = 0,
@@ -88,7 +91,7 @@ export const NodeExecutionRow: React.FC<NodeExecutionRowProps> = ({
     ) : null;
 
     const errorContent = error ? (
-        <ExpandableExecutionError error={error} />
+        <ExpandableExecutionError error={error} abortMetadata={abortMetadata} />
     ) : null;
 
     const extraContent = expanded ? (
@@ -98,6 +101,7 @@ export const NodeExecutionRow: React.FC<NodeExecutionRowProps> = ({
             })}
         >
             <NodeExecutionChildren
+                abortMetadata={abortMetadata}
                 childGroups={childGroups}
                 level={level + 1}
             />

diff --git a/src/components/Executions/Tables/NodeExecutionsTable.tsx b/src/components/Executions/Tables/NodeExecutionsTable.tsx
@@ -1,4 +1,5 @@
 import * as classnames from 'classnames';
+import { Admin } from 'flyteidl';
 import { getCacheKey } from 'components/Cache/utils';
 import { DetailsPanel } from 'components/common/DetailsPanel';
 import { useCommonStyles } from 'components/common/styles';
@@ -14,6 +15,7 @@ import { NoExecutionsContent } from './NoExecutionsContent';
 import { useColumnStyles, useExecutionTableStyles } from './styles';
 
 export interface NodeExecutionsTableProps {
+    abortMetadata?: Admin.IAbortMetadata;
     nodeExecutions: NodeExecution[];
 }
 
@@ -25,6 +27,7 @@ const scrollbarPadding = scrollbarSize();
  * TaskExecutions
  */
 export const NodeExecutionsTable: React.FC<NodeExecutionsTableProps> = ({
+    abortMetadata,
     nodeExecutions
 }) => {
     const [
@@ -65,6 +68,7 @@ export const NodeExecutionsTable: React.FC<NodeExecutionsTableProps> = ({
                 return (
                     <NodeExecutionRow
                         {...rowProps}
+                        abortMetadata={abortMetadata}
                         index={index}
                         key={cacheKey}
                         execution={nodeExecution}

diff --git a/src/components/Executions/Tables/WorkflowExecutionRow.tsx b/src/components/Executions/Tables/WorkflowExecutionRow.tsx
@@ -35,7 +35,7 @@ export const WorkflowExecutionRow: React.FC<WorkflowExecutionRowProps> = ({
     state,
     style
 }) => {
-    const { error } = execution.closure;
+    const { abortMetadata, error } = execution.closure;
     const tableStyles = useExecutionTableStyles();
     const styles = useStyles();
 
@@ -61,11 +61,12 @@ export const WorkflowExecutionRow: React.FC<WorkflowExecutionRowProps> = ({
                     </div>
                 ))}
             </div>
-            {error ? (
+            {error || abortMetadata ? (
                 <ExpandableExecutionError
                     onExpandCollapse={onExpandCollapseError}
                     initialExpansionState={errorExpanded}
                     error={error}
+                    abortMetadata={abortMetadata ?? undefined}
                 />
             ) : null}
         </div>