Feat: Change UI of ES error placeholder (#1044)

* Feat: issue-944 add documentation guid for user when ES disconnected and index is missing * change miner UI of error placeholder * fixed failing test * rename entityList to entityIndexList * show full screen error placeholder on index missing in explore page
2025-11-01 11:09:14 +00:00 · 2021-11-08 13:37:13 +05:30 · 2021-11-08 13:37:13 +05:30 · e1d7260b3c
commit e1d7260b3c
parent 7771e42e1b
10 changed files with 209 additions and 123 deletions
--- a/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx
@ -112,6 +112,7 @@ const Explore: React.FC<ExploreProps> = ({
  const [fieldList, setFieldList] =
    useState<Array<{ name: string; value: string }>>(tableSortingFields);
  const [isEntityLoading, setIsEntityLoading] = useState(true);
+  const [connectionError] = useState(error.includes('Connection refused'));
  const isMounting = useRef(true);
  const forceSetAgg = useRef(false);
  const previsouIndex = usePrevious(searchIndex);
@ -503,9 +504,9 @@ const Explore: React.FC<ExploreProps> = ({
  };

  return (
-    <PageContainer leftPanelContent={fetchLeftPanel()}>
+    <PageContainer leftPanelContent={Boolean(!error) && fetchLeftPanel()}>
      <div className="container-fluid" data-testid="fluid-container">
-        {getTabs()}
+        {!connectionError && getTabs()}
        {error ? (
          <ErrorPlaceHolderES errorMessage={error} type="error" />
        ) : (
--- a/catalog-rest-service/src/main/resources/ui/src/components/MyData/MyData.component.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/MyData/MyData.component.tsx
@ -21,6 +21,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Ownership } from '../../enums/mydata.enum';
 import { formatDataResponse } from '../../utils/APIUtils';
 import { getCurrentUserId } from '../../utils/CommonUtils';
+import ErrorPlaceHolderES from '../common/error-with-placeholder/ErrorPlaceHolderES';
 import PageContainer from '../containers/PageContainer';
 import MyDataHeader from '../MyDataHeader/MyDataHeader.component';
 import RecentlyViewed from '../recently-viewed/RecentlyViewed';
@ -28,8 +29,11 @@ import SearchedData from '../searched-data/SearchedData';
 import { MyDataProps } from './MyData.interface';

 const MyData: React.FC<MyDataProps> = ({
+  error,
+  errorHandler,
  countServices,
  userDetails,
+  rejectedResult,
  searchResult,
  fetchData,
  entityCounts,
@ -104,7 +108,7 @@ const MyData: React.FC<MyDataProps> = ({
  };

  useEffect(() => {
-    if (isMounted.current) {
+    if (isMounted.current && Boolean(currentTab === 2 || currentTab === 3)) {
      setIsEntityLoading(true);
      fetchData({
        queryString: '',
@ -118,14 +122,18 @@ const MyData: React.FC<MyDataProps> = ({

  useEffect(() => {
    if (searchResult) {
-      const hits = searchResult.data.hits.hits;
-      if (hits.length > 0) {
-        setTotalNumberOfValues(searchResult.data.hits.total.value);
-        setData(formatDataResponse(hits));
-      } else {
-        setData([]);
-        setTotalNumberOfValues(0);
+      const formatedData: Array<FormatedTableData> = [];
+      let totalValue = 0;
+      searchResult.forEach((res) => {
+        totalValue = totalValue + res.data.hits.total.value;
+        formatedData.push(...formatDataResponse(res.data.hits.hits));
+      });
+
+      if (formatedData.length === 0 && rejectedResult.length > 0) {
+        errorHandler(rejectedResult[0].response?.data?.responseMessage);
      }
+      setTotalNumberOfValues(totalValue);
+      setData(formatedData);
    }
    setIsEntityLoading(false);
  }, [searchResult]);
@ -142,18 +150,22 @@ const MyData: React.FC<MyDataProps> = ({
          entityCounts={entityCounts}
        />
        {getTabs()}
-        <SearchedData
-          showOnboardingTemplate
-          currentPage={currentPage}
-          data={data}
-          isLoading={isEntityLoading}
-          paginate={paginate}
-          searchText="*"
-          showOnlyChildren={currentTab === 1}
-          showResultCount={filter && data.length > 0 ? true : false}
-          totalValue={totalNumberOfValue}>
-          {currentTab === 1 ? <RecentlyViewed /> : null}
-        </SearchedData>
+        {error && Boolean(currentTab === 2 || currentTab === 3) ? (
+          <ErrorPlaceHolderES errorMessage={error} type="error" />
+        ) : (
+          <SearchedData
+            showOnboardingTemplate
+            currentPage={currentPage}
+            data={data}
+            isLoading={currentTab === 1 ? false : isEntityLoading}
+            paginate={paginate}
+            searchText="*"
+            showOnlyChildren={currentTab === 1}
+            showResultCount={filter && data.length > 0 ? true : false}
+            totalValue={totalNumberOfValue}>
+            {currentTab === 1 ? <RecentlyViewed /> : null}
+          </SearchedData>
+        )}
      </div>
    </PageContainer>
  );
--- a/catalog-rest-service/src/main/resources/ui/src/components/MyData/MyData.interface.ts
+++ b/catalog-rest-service/src/main/resources/ui/src/components/MyData/MyData.interface.ts
@ -2,9 +2,12 @@ import { EntityCounts, SearchDataFunctionType, SearchResponse } from 'Models';
 import { User } from '../../generated/entity/teams/user';

 export interface MyDataProps {
+  error: string;
  countServices: number;
  userDetails: User;
-  searchResult: SearchResponse | undefined;
+  rejectedResult: PromiseRejectedResult['reason'][];
+  errorHandler: (error: string) => void;
+  searchResult: SearchResponse[] | undefined;
  fetchData: (value: SearchDataFunctionType) => void;
  entityCounts: EntityCounts;
 }
--- a/catalog-rest-service/src/main/resources/ui/src/components/MyData/MyData.test.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/MyData/MyData.test.tsx
@ -252,6 +252,7 @@ jest.mock('../../utils/ServiceUtils', () => ({
 }));

 const fetchData = jest.fn();
+const errorHandler = jest.fn();

 describe('Test MyData page', () => {
  it('Check if there is an element in the page', async () => {
@ -264,8 +265,11 @@ describe('Test MyData page', () => {
          dashboardCount: 8,
          pipelineCount: 1,
        }}
+        error=""
+        errorHandler={errorHandler}
        fetchData={fetchData}
-        searchResult={mockData as unknown as SearchResponse}
+        rejectedResult={[]}
+        searchResult={[mockData] as unknown as SearchResponse[]}
        userDetails={mockUserDetails as unknown as User}
      />,
      {
--- a/catalog-rest-service/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx
@ -1,7 +1,7 @@
+import { uniqueId } from 'lodash';
 import { observer } from 'mobx-react';
 import React from 'react';
 import AppState from '../../../AppState';
-import NoDataFoundPlaceHolder from '../../../assets/img/no-data-placeholder.png';
 import { useAuth } from '../../../hooks/authHooks';

 type Props = {
@ -10,6 +10,36 @@ type Props = {
  query?: string;
 };

+const stepsData = [
+  {
+    step: 1,
+    title: 'Ingest Sample Data',
+    description:
+      'Run sample data to ingest sample entities into your OpenMetadata',
+    link: 'https://docs.open-metadata.org/install/metadata-ingestion/ingest-sample-data',
+  },
+  {
+    step: 2,
+    title: 'Start Elasticsearch Docker',
+    description: 'Run ingestion to index entities into OpenMetadata',
+    link: 'https://docs.open-metadata.org/install/metadata-ingestion/ingest-sample-data#index-sample-data-into-elasticsearch',
+  },
+  {
+    step: 3,
+    title: 'Install Service Connectors',
+    description:
+      'There are a lot of connectors available here to index data from your services. Please checkout our connectors',
+    link: 'https://docs.open-metadata.org/install/metadata-ingestion/connectors',
+  },
+  {
+    step: 4,
+    title: 'More Help',
+    description:
+      'If you are still running into issues, please reach out to us on slack',
+    link: 'https://slack.open-metadata.org',
+  },
+];
+
 const ErrorPlaceHolderES = ({ type, errorMessage, query = '' }: Props) => {
  const { isAuthDisabled } = useAuth();
  const getUserDisplayName = () => {
@ -35,42 +65,64 @@ const ErrorPlaceHolderES = ({ type, errorMessage, query = '' }: Props) => {

  const elasticSearchError = () => {
    const index = errorMessage?.split('[')[3]?.split(']')[0];
+    const errorText = errorMessage && index ? `find ${index} in` : 'access';

-    return errorMessage && index ? (
-      <p className="tw-max-w-sm tw-text-center">
-        OpenMetadata requires index
-        <span className="tw-text-primary tw-font-medium tw-mx-1">
-          {index}
-        </span>{' '}
-        to exist while running Elasticsearch. Please check your Elasticsearch
-        indexes
-      </p>
-    ) : (
-      <p className="tw-max-w-sm tw-text-center">
-        OpenMetadata requires Elasticsearch 7+ running and configured in
-        <span className="tw-text-primary tw-font-medium tw-mx-1">
-          openmetadata.yaml.
-        </span>
-        Please check the configuration and make sure the Elasticsearch is
-        running.
-      </p>
+    return (
+      <div className="tw-mb-5">
+        <div className="tw-mb-3 tw-text-center">
+          <p>
+            <span>Welcome to OpenMetadata. </span>
+            {`We are unable to ${errorText} Elasticsearch for entity indexes.`}
+          </p>
+
+          <p>
+            Please follow the instructions here to set up Metadata ingestion and
+            index them into Elasticsearch.
+          </p>
+        </div>
+        <div className="tw-grid tw-grid-cols-4 tw-gap-4 tw-mt-5">
+          {stepsData.map((data) => (
+            <div
+              className="tw-card tw-flex tw-flex-col tw-justify-between tw-p-5"
+              key={uniqueId()}>
+              <div>
+                <div className="tw-flex tw-mb-2">
+                  <div className="tw-rounded-full tw-flex tw-justify-center tw-items-center tw-h-10 tw-w-10 tw-border-2 tw-border-primary tw-text-lg tw-font-bold tw-text-primary">
+                    {data.step}
+                  </div>
+                </div>
+
+                <h6
+                  className="tw-text-base tw-text-grey-body tw-font-medium"
+                  data-testid="service-name">
+                  {data.title}
+                </h6>
+
+                <p className="tw-text-grey-body tw-pb-1 tw-text-sm tw-mb-5">
+                  {data.description}
+                </p>
+              </div>
+
+              <p>
+                <a href={data.link} rel="noopener noreferrer" target="_blank">
+                  Click here &gt;&gt;
+                </a>
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
    );
  };

  return (
-    <>
-      <div className="tw-flex tw-flex-col tw-mt-24 tw-place-items-center">
-        {' '}
-        <img src={NoDataFoundPlaceHolder} width={200} />
-      </div>
-      <div className="tw-flex tw-flex-col tw-items-center tw-mt-10 tw-text-base tw-font-normal">
-        <p className="tw-text-lg tw-font-bold tw-mb-1 tw-text-primary">
-          {`Hi, ${getUserDisplayName()}!`}
-        </p>
-        {type === 'noData' && noRecordForES()}
-        {type === 'error' && elasticSearchError()}
-      </div>
-    </>
+    <div className="tw-mt-10 tw-text-base tw-font-normal">
+      <p className="tw-text-center tw-text-lg tw-font-bold tw-mb-1 tw-text-primary">
+        {`Hi, ${getUserDisplayName()}!`}
+      </p>
+      {type === 'noData' && noRecordForES()}
+      {type === 'error' && elasticSearchError()}
+    </div>
  );
 };

--- a/catalog-rest-service/src/main/resources/ui/src/constants/Mydata.constants.ts
+++ b/catalog-rest-service/src/main/resources/ui/src/constants/Mydata.constants.ts
@ -19,16 +19,6 @@ import { FilterObject } from 'Models';
 import { getCurrentUserId } from '../utils/CommonUtils';
 import { getFilterString } from '../utils/FilterUtils';

-export const myDataSearchIndex =
-  'dashboard_search_index,topic_search_index,table_search_index,pipeline_search_index';
-
-export const myDataEntityCounts = {
-  tableCount: 0,
-  topicCount: 0,
-  dashboardCount: 0,
-  pipelineCount: 0,
-};
-
 export const myDataFilterType = [
  { key: 'Owned', value: 'owner' },
  { key: 'Following', value: 'followers' },
--- a/catalog-rest-service/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx
@ -15,63 +15,85 @@
  * limitations under the License.
 */

-import { AxiosError } from 'axios';
 import { isUndefined } from 'lodash';
 import { observer } from 'mobx-react';
-import { EntityCounts, SearchDataFunctionType, SearchResponse } from 'Models';
+import {
+  Bucket,
+  EntityCounts,
+  SearchDataFunctionType,
+  SearchResponse,
+} from 'Models';
 import React, { useEffect, useState } from 'react';
 import AppState from '../../AppState';
 import { searchData } from '../../axiosAPIs/miscAPI';
-import ErrorPlaceHolderES from '../../components/common/error-with-placeholder/ErrorPlaceHolderES';
 import Loader from '../../components/Loader/Loader';
 import MyData from '../../components/MyData/MyData.component';
-import { ERROR500, PAGE_SIZE } from '../../constants/constants';
-import {
-  myDataEntityCounts,
-  myDataSearchIndex,
-} from '../../constants/Mydata.constants';
-import useToastContext from '../../hooks/useToastContext';
+import { PAGE_SIZE } from '../../constants/constants';
 import {
  getAllServices,
  getEntityCountByService,
 } from '../../utils/ServiceUtils';

 const MyDataPage = () => {
-  const showToast = useToastContext();
  const [error, setError] = useState<string>('');
  const [countServices, setCountServices] = useState<number>();
  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [searchResult, setSearchResult] = useState<SearchResponse>();
+  const [searchResult, setSearchResult] = useState<SearchResponse[]>();
+  const [rejectedResult, setRejectedResult] = useState<
+    PromiseRejectedResult['reason'][]
+  >([]);
  const [entityCounts, setEntityCounts] = useState<EntityCounts>();

+  const errorHandler = (error: string) => {
+    setError(error);
+  };
+
  const fetchData = (value: SearchDataFunctionType, fetchService = false) => {
-    searchData(
-      value.queryString,
-      value.from,
-      PAGE_SIZE,
-      value.filters,
-      value.sortField,
-      value.sortOrder,
-      myDataSearchIndex
-    )
-      .then((res: SearchResponse) => {
-        setSearchResult(res);
-        if (isUndefined(entityCounts)) {
-          setEntityCounts(
-            getEntityCountByService(
-              res.data.aggregations?.['sterms#Service']?.buckets
-            )
+    setError('');
+
+    const entityIndexList = [
+      'table_search_index',
+      'topic_search_index',
+      'dashboard_search_index',
+      'pipeline_search_index',
+    ];
+
+    const entityResponse = entityIndexList.map((entity) =>
+      searchData(
+        value.queryString,
+        value.from,
+        PAGE_SIZE,
+        value.filters,
+        value.sortField,
+        value.sortOrder,
+        entity
+      )
+    );
+
+    Promise.allSettled(entityResponse).then((response) => {
+      const fulfilledRes: SearchResponse[] = [];
+      const aggregations: Bucket[] = [];
+      const rejectedRes: PromiseRejectedResult['reason'][] = [];
+
+      response.forEach((entity) => {
+        if (entity.status === 'fulfilled') {
+          fulfilledRes.push(entity.value);
+          aggregations.push(
+            ...entity.value.data.aggregations?.['sterms#Service']?.buckets
          );
+        } else {
+          rejectedRes.push(entity.reason);
        }
-      })
-      .catch((err: AxiosError) => {
-        setError(err.response?.data?.responseMessage);
-        showToast({
-          variant: 'error',
-          body: err.response?.data?.responseMessage ?? ERROR500,
-        });
-        setEntityCounts(myDataEntityCounts);
      });
+
+      if (fulfilledRes.length === 0 && response[0].status === 'rejected') {
+        setError(response[0].reason.response?.data?.responseMessage);
+      }
+      setRejectedResult(rejectedRes);
+      setEntityCounts(getEntityCountByService(aggregations));
+      setSearchResult(fulfilledRes as unknown as SearchResponse[]);
+    });
+
    if (fetchService) {
      getAllServices()
        .then((res) => setCountServices(res.length))
@ -98,17 +120,16 @@ const MyDataPage = () => {
      {!isUndefined(countServices) &&
      !isUndefined(entityCounts) &&
      !isLoading ? (
-        error ? (
-          <ErrorPlaceHolderES errorMessage={error} type="error" />
-        ) : (
-          <MyData
-            countServices={countServices}
-            entityCounts={entityCounts}
-            fetchData={fetchData}
-            searchResult={searchResult}
-            userDetails={AppState.userDetails}
-          />
-        )
+        <MyData
+          countServices={countServices}
+          entityCounts={entityCounts}
+          error={error}
+          errorHandler={errorHandler}
+          fetchData={fetchData}
+          rejectedResult={rejectedResult}
+          searchResult={searchResult}
+          userDetails={AppState.userDetails}
+        />
      ) : (
        <Loader />
      )}
--- a/catalog-rest-service/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.test.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.test.tsx
@ -26,9 +26,18 @@ jest.mock('../../components/MyData/MyData.component', () => {
 });

 jest.mock('../../axiosAPIs/miscAPI', () => ({
-  searchData: jest
-    .fn()
-    .mockImplementation(() => Promise.resolve({ data: { hits: [] } })),
+  searchData: jest.fn().mockImplementation(() =>
+    Promise.resolve({
+      data: {
+        aggregations: {
+          'sterms#Service': {
+            buckets: [],
+          },
+        },
+        hits: [],
+      },
+    })
+  ),
 }));

 jest.mock('../../utils/ServiceUtils', () => ({
--- a/catalog-rest-service/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/explore/ExplorePage.component.tsx
@ -27,7 +27,7 @@ import {
  UrlParams,
 } from '../../components/Explore/explore.interface';
 import Loader from '../../components/Loader/Loader';
-import { ERROR500, PAGE_SIZE } from '../../constants/constants';
+import { PAGE_SIZE } from '../../constants/constants';
 import {
  emptyValue,
  getCurrentIndex,
@ -39,11 +39,9 @@ import {
  ZERO_SIZE,
 } from '../../constants/explore.constants';
 import { SearchIndex } from '../../enums/search.enum';
-import useToastContext from '../../hooks/useToastContext';
 import { getTotalEntityCountByService } from '../../utils/ServiceUtils';

 const ExplorePage: FunctionComponent = () => {
-  const showToast = useToastContext();
  const [isLoading, setIsLoading] = useState(true);
  const [isLoadingForData, setIsLoadingForData] = useState(true);
  const [error, setError] = useState<string>('');
@ -175,10 +173,6 @@ const ExplorePage: FunctionComponent = () => {
      )
      .catch((err: AxiosError) => {
        setError(err.response?.data?.responseMessage);
-        showToast({
-          variant: 'error',
-          body: err.response?.data?.responseMessage ?? ERROR500,
-        });
        setIsLoadingForData(false);
      });
  };
--- a/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css
+++ b/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css
@ -236,7 +236,7 @@
  }

  .side-panel {
-    @apply tw-border-r tw-border-separator;
+    @apply tw-border-r tw-border-separator tw-transition-all tw-duration-300;
  }
  .side-panel .seperator,
  .horz-separator {