fix: default to not showing errors for WaitForQuery (#146)

flyteorg · Jan 15, 2021 · 62e7ab3 · 62e7ab3
1 parent 5390924
commit 62e7ab3
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 10 deletions.
diff --git a/src/components/Executions/ExecutionDetails/ExecutionDetails.tsx b/src/components/Executions/ExecutionDetails/ExecutionDetails.tsx
@@ -5,6 +5,7 @@ import * as classnames from 'classnames';
 import { LargeLoadingSpinner } from 'components/common/LoadingSpinner';
 import { WaitForQuery } from 'components/common/WaitForQuery';
 import { withRouteParams } from 'components/common/withRouteParams';
+import { DataError } from 'components/Errors/DataError';
 import { Execution } from 'models/Execution/types';
 import * as React from 'react';
 import { ExecutionContext } from '../contexts';
@@ -97,6 +98,7 @@ export const ExecutionDetailsContainer: React.FC<ExecutionDetailsProps> = ({
 
     return (
         <WaitForQuery
+            errorComponent={DataError}
             loadingComponent={LargeLoadingSpinner}
             query={useWorkflowExecutionQuery(id)}
         >

diff --git a/src/components/Executions/ExecutionDetails/ExecutionNodeViews.tsx b/src/components/Executions/ExecutionDetails/ExecutionNodeViews.tsx
@@ -1,6 +1,7 @@
 import { Tab, Tabs } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { WaitForQuery } from 'components/common/WaitForQuery';
+import { DataError } from 'components/Errors/DataError';
 import { useTabState } from 'components/hooks/useTabState';
 import { secondaryBackgroundColor } from 'components/Theme/constants';
 import { Execution, NodeExecution } from 'models/Execution/types';
@@ -80,13 +81,19 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({
                         <div className={styles.filters}>
                             <ExecutionFilters {...filterState} />
                         </div>
-                        <WaitForQuery query={nodeExecutionsQuery}>
+                        <WaitForQuery
+                            errorComponent={DataError}
+                            query={nodeExecutionsQuery}
+                        >
                             {renderNodeExecutionsTable}
                         </WaitForQuery>
                     </>
                 )}
                 {tabState.value === tabs.graph.id && (
-                    <WaitForQuery query={nodeExecutionsQuery}>
+                    <WaitForQuery
+                        errorComponent={DataError}
+                        query={nodeExecutionsQuery}
+                    >
                         {renderExecutionWorkflowGraph}
                     </WaitForQuery>
                 )}

diff --git a/src/components/Executions/ExecutionDetails/ExecutionWorkflowGraph.tsx b/src/components/Executions/ExecutionDetails/ExecutionWorkflowGraph.tsx
@@ -1,5 +1,6 @@
 import { DetailsPanel } from 'components/common/DetailsPanel';
 import { WaitForQuery } from 'components/common/WaitForQuery';
+import { DataError } from 'components/Errors/DataError';
 import { makeWorkflowQuery } from 'components/Workflow/workflowQueries';
 import { WorkflowGraph } from 'components/WorkflowGraph/WorkflowGraph';
 import { keyBy } from 'lodash';
@@ -64,7 +65,9 @@ export const ExecutionWorkflowGraph: React.FC<ExecutionWorkflowGraphProps> = ({
     return (
         <>
             <NodeExecutionsContext.Provider value={nodeExecutionsById}>
-                <WaitForQuery query={workflowQuery}>{renderGraph}</WaitForQuery>
+                <WaitForQuery errorComponent={DataError} query={workflowQuery}>
+                    {renderGraph}
+                </WaitForQuery>
             </NodeExecutionsContext.Provider>
             <DetailsPanel
                 open={selectedExecution !== null}

diff --git a/src/components/Executions/TaskExecutionDetails/TaskExecutionDetails.tsx b/src/components/Executions/TaskExecutionDetails/TaskExecutionDetails.tsx
@@ -1,6 +1,7 @@
 import { LargeLoadingSpinner } from 'components/common/LoadingSpinner';
 import { WaitForQuery } from 'components/common/WaitForQuery';
 import { withRouteParams } from 'components/common/withRouteParams';
+import { DataError } from 'components/Errors/DataError';
 import { useConditionalQuery } from 'components/hooks/useConditionalQuery';
 import { TaskExecution, TaskExecutionIdentifier } from 'models/Execution/types';
 import * as React from 'react';
@@ -69,6 +70,7 @@ export const TaskExecutionDetailsContainer: React.FC<TaskExecutionDetailsProps>
 
     return (
         <WaitForQuery
+            errorComponent={DataError}
             loadingComponent={LargeLoadingSpinner}
             query={taskExecutionQuery}
         >

diff --git a/src/components/Executions/TaskExecutionDetails/TaskExecutionNodes.tsx b/src/components/Executions/TaskExecutionDetails/TaskExecutionNodes.tsx
@@ -1,6 +1,7 @@
 import { Tab, Tabs } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { WaitForQuery } from 'components/common/WaitForQuery';
+import { DataError } from 'components/Errors/DataError';
 import { useConditionalQuery } from 'components/hooks/useConditionalQuery';
 import { useTabState } from 'components/hooks/useTabState';
 import { every } from 'lodash';
@@ -94,7 +95,10 @@ export const TaskExecutionNodes: React.FC<TaskExecutionNodesProps> = ({
                         <div className={styles.filters}>
                             <ExecutionFilters {...filterState} />
                         </div>
-                        <WaitForQuery query={nodeExecutionsQuery}>
+                        <WaitForQuery
+                            errorComponent={DataError}
+                            query={nodeExecutionsQuery}
+                        >
                             {renderNodeExecutionsTable}
                         </WaitForQuery>
                     </>

diff --git a/src/components/common/WaitForQuery.tsx b/src/components/common/WaitForQuery.tsx
@@ -1,15 +1,19 @@
 import { log } from 'common/log';
-import { DataError } from 'components/Errors/DataError';
 import * as React from 'react';
 import { QueryObserverResult } from 'react-query';
 import { ErrorBoundary } from './ErrorBoundary';
 
 const defaultErrorTitle = 'Failed to fetch data';
 
+interface ErrorComponentProps {
+    error?: Error;
+    retry?(): any;
+    errorTitle: string;
+}
 interface WaitForQueryProps<T> {
     children: (data: T) => React.ReactNode;
     /** Component to use for displaying errors. This will override `errorTitle` */
-    errorComponent?: React.ComponentType<{ error?: Error; retry?(): any }>;
+    errorComponent?: React.ComponentType<ErrorComponentProps>;
     /** The string to display as the header of the error content */
     errorTitle?: string;
     /** Component to show while loading. If not provided, nothing will be rendered
@@ -60,14 +64,12 @@ export const WaitForQuery = <T extends object>({
         case 'error': {
             const error = query.error || new Error('Unknown failure');
             return ErrorComponent ? (
-                <ErrorComponent error={error} retry={fetch} />
-            ) : (
-                <DataError
+                <ErrorComponent
                     error={error}
                     errorTitle={errorTitle}
                     retry={fetch}
                 />
-            );
+            ) : null;
         }
         default:
             log.error(`Unexpected query status value: ${status}`);