fix(ui/lineage): show data is too large error when limitation exceeds (…

…#10038)
datahub-project · Mar 14, 2024 · 0f2b15c · 0f2b15c
1 parent 77c72da
commit 0f2b15c
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 4 deletions.
diff --git a/datahub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearch.tsx b/datahub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearch.tsx
@@ -106,6 +106,8 @@ type Props = {
     shouldRefetch?: boolean;
     resetShouldRefetch?: () => void;
     applyView?: boolean;
+    onLineageClick?: () => void;
+    isLineageTab?: boolean;
 };
 
 export const EmbeddedListSearch = ({
@@ -134,6 +136,8 @@ export const EmbeddedListSearch = ({
     shouldRefetch,
     resetShouldRefetch,
     applyView = false,
+    onLineageClick,
+    isLineageTab = false,
 }: Props) => {
     const { shouldRefetchEmbeddedListSearch, setShouldRefetchEmbeddedListSearch } = useEntityContext();
     // Adjust query based on props
@@ -143,7 +147,6 @@ export const EmbeddedListSearch = ({
         unionType,
         filters,
     };
-
     const finalFilters =
         (fixedFilters && mergeFilterSets(fixedFilters, baseFilters)) || generateOrFilters(unionType, filters);
 
@@ -191,6 +194,12 @@ export const EmbeddedListSearch = ({
         fetchPolicy: 'cache-first',
     });
 
+    const [serverError, setServerError] = useState<any>(undefined);
+
+    useEffect(() => {
+        setServerError(error);
+    }, [error]);
+
     useEffect(() => {
         if (shouldRefetch && resetShouldRefetch) {
             refetch({
@@ -282,9 +291,18 @@ export const EmbeddedListSearch = ({
         });
     }
 
+    const isServerOverloadError = [503, 500, 504].includes(serverError?.networkError?.response?.status);
+
+    const onClickLessHops = () => {
+        setServerError(undefined);
+        onChangeFilters(defaultFilters);
+    };
+
+    const ErrorMessage = () => <Message type="error" content="Failed to load results! An unexpected error occurred." />;
+
     return (
         <Container>
-            {error && <Message type="error" content="Failed to load results! An unexpected error occurred." />}
+            {!isLineageTab ? error && <ErrorMessage /> : serverError && !isServerOverloadError && <ErrorMessage />}
             <EmbeddedListSearchHeader
                 onSearch={(q) => onChangeQuery(addFixedQuery(q, fixedQuery as string, emptySearchQuery as string))}
                 placeholderText={placeholderText}
@@ -303,6 +321,10 @@ export const EmbeddedListSearch = ({
             />
             <EmbeddedListSearchResults
                 unionType={unionType}
+                isServerOverloadError={isServerOverloadError}
+                onClickLessHops={onClickLessHops}
+                onLineageClick={onLineageClick}
+                isLineageTab={isLineageTab}
                 loading={loading}
                 searchResponse={data}
                 filters={finalFacets}

diff --git a/...ub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearchResults.tsx b/...ub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearchResults.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Pagination, Spin, Typography } from 'antd';
+import { Button, Pagination, Spin, Typography } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import { FacetFilterInput, FacetMetadata, SearchResults as SearchResultType } from '../../../../../../types.generated';
@@ -66,6 +66,20 @@ const StyledLoading = styled(LoadingOutlined)`
     padding-bottom: 18px;
 ]`;
 
+const ErrorMessage = styled.div`
+    padding-top: 70px;
+    font-size: 16px;
+    padding-bottom: 40px;
+    width: 100%;
+    text-align: center;
+    flex: 1;
+`;
+
+const StyledLinkButton = styled(Button)`
+    margin: 0 -14px;
+    font-size: 16px;
+`;
+
 interface Props {
     page: number;
     searchResponse?: SearchResultType | null;
@@ -84,6 +98,10 @@ interface Props {
     setNumResultsPerPage: (numResults: number) => void;
     entityAction?: React.FC<EntityActionProps>;
     applyView?: boolean;
+    isServerOverloadError?: any;
+    onClickLessHops?: () => void;
+    onLineageClick?: () => void;
+    isLineageTab?: boolean;
 }
 
 export const EmbeddedListSearchResults = ({
@@ -104,6 +122,10 @@ export const EmbeddedListSearchResults = ({
     setNumResultsPerPage,
     entityAction,
     applyView,
+    isServerOverloadError,
+    onClickLessHops,
+    onLineageClick,
+    isLineageTab = false,
 }: Props) => {
     const pageStart = searchResponse?.start || 0;
     const pageSize = searchResponse?.count || 0;
@@ -131,7 +153,19 @@ export const EmbeddedListSearchResults = ({
                             <Spin indicator={<StyledLoading />} />
                         </LoadingContainer>
                     )}
-                    {!loading && (
+                    {isLineageTab && !loading && isServerOverloadError && (
+                        <ErrorMessage>
+                            Data is too large. Please use
+                            <StyledLinkButton onClick={onLineageClick} type="link">
+                                visualize lineage
+                            </StyledLinkButton>
+                            or see less hops by clicking
+                            <StyledLinkButton onClick={onClickLessHops} type="link">
+                                here
+                            </StyledLinkButton>
+                        </ErrorMessage>
+                    )}
+                    {!loading && !isServerOverloadError && (
                         <EntitySearchResults
                             searchResults={searchResponse?.searchResults || []}
                             additionalPropertiesList={

diff --git a/...ub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearchSection.tsx b/...ub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearchSection.tsx
@@ -52,6 +52,8 @@ type Props = {
     shouldRefetch?: boolean;
     resetShouldRefetch?: () => void;
     applyView?: boolean;
+    onLineageClick?: () => void;
+    isLineageTab?: boolean;
 };
 
 export const EmbeddedListSearchSection = ({
@@ -69,6 +71,8 @@ export const EmbeddedListSearchSection = ({
     shouldRefetch,
     resetShouldRefetch,
     applyView,
+    onLineageClick,
+    isLineageTab
 }: Props) => {
     const history = useHistory();
     const location = useLocation();
@@ -155,6 +159,8 @@ export const EmbeddedListSearchSection = ({
             shouldRefetch={shouldRefetch}
             resetShouldRefetch={resetShouldRefetch}
             applyView={applyView}
+            onLineageClick={onLineageClick}
+            isLineageTab={isLineageTab}
         />
     );
 };
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Lineage/ImpactAnalysis.tsx b/datahub-web-react/src/app/entity/shared/tabs/Lineage/ImpactAnalysis.tsx
@@ -13,6 +13,8 @@ type Props = {
     skipCache?: boolean;
     setSkipCache?: (skipCache: boolean) => void;
     resetShouldRefetch?: () => void;
+    onLineageClick?: () => void;
+    isLineageTab?: boolean;
 };
 
 export const ImpactAnalysis = ({
@@ -24,6 +26,8 @@ export const ImpactAnalysis = ({
     skipCache,
     setSkipCache,
     resetShouldRefetch,
+    onLineageClick,
+    isLineageTab
 }: Props) => {
     const finalStartTimeMillis = startTimeMillis || undefined;
     const finalEndTimeMillis = endTimeMillis || undefined;
@@ -49,6 +53,8 @@ export const ImpactAnalysis = ({
             defaultFilters={[{ field: 'degree', values: ['1'] }]}
             shouldRefetch={shouldRefetch}
             resetShouldRefetch={resetShouldRefetch}
+            onLineageClick={onLineageClick}
+            isLineageTab={isLineageTab}
         />
     );
 };
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Lineage/LineageTab.tsx b/datahub-web-react/src/app/entity/shared/tabs/Lineage/LineageTab.tsx
@@ -181,6 +181,8 @@ export const LineageTab = ({
             <LineageTabContext.Provider value={{ isColumnLevelLineage, selectedColumn, lineageDirection }}>
                 <ImpactAnalysis
                     urn={impactAnalysisUrn}
+                    onLineageClick={routeToLineage}
+                    isLineageTab
                     direction={lineageDirection as LineageDirection}
                     startTimeMillis={startTimeMillis}
                     endTimeMillis={endTimeMillis}