Fix#1379 Creating an ingestion job when airflow is down returns 400. (#1460)

* Fix#1379 Creating an ingestion job when airflow is down returns 400.

* Fixed typo

* Minor fix

openmetadata-ui/src/main/resources/ui/src/components/common/error/IngestionError.tsx

@@ -0,0 +1,84 @@
+import { uniqueId } from 'lodash';
+import React from 'react';
+
+const stepsData = [
+  {
+    step: 1,
+    title: 'Step1',
+    description:
+      'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam, dolores!',
+    link: 'https://docs.open-metadata.org/install/metadata-ingestion/ingest-sample-data',
+  },
+  {
+    step: 2,
+    title: 'Step2',
+    description:
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, quos.',
+    link: 'https://docs.open-metadata.org/install/metadata-ingestion/ingest-sample-data#index-sample-data-into-elasticsearch',
+  },
+  {
+    step: 3,
+    title: 'Step3',
+    description:
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, quos.',
+    link: 'https://docs.open-metadata.org/install/metadata-ingestion/connectors',
+  },
+  {
+    step: 4,
+    title: 'Step4',
+    description:
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, quos.',
+    link: 'https://slack.open-metadata.org',
+  },
+];
+
+const IngestionError = () => {
+  return (
+    <div className="tw-p-4 tw-mt-10 ">
+      <div className="tw-mb-3 tw-text-center">
+        <p>
+          <span>Welcome to OpenMetadata. </span>
+          We are unable to access Airflow for ingestion workflow.
+        </p>
+
+        <p>
+          Please follow the instructions here to set up Airflow for ingestion
+          workflow.
+        </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>
+  );
+};
+
+export default IngestionError;

openmetadata-ui/src/main/resources/ui/src/pages/IngestionPage/IngestionPage.component.tsx

@@ -16,8 +16,9 @@
 */
 
 import { AxiosError, AxiosResponse } from 'axios';
+import { toString } from 'lodash';
 import { Paging } from 'Models';
-import React, { useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import {
   addIngestionWorkflow,
   deleteIngestionWorkflowsById,
@@ -26,6 +27,7 @@ import {
   updateIngestionWorkflow,
 } from '../../axiosAPIs/ingestionWorkflowAPI';
 import { getServices } from '../../axiosAPIs/serviceAPI';
+import IngestionError from '../../components/common/error/IngestionError';
 import Ingestion from '../../components/Ingestion/Ingestion.component';
 import { IngestionData } from '../../components/Ingestion/ingestion.interface';
 import Loader from '../../components/Loader/Loader';
@@ -41,6 +43,8 @@ const IngestionPage = () => {
   const [ingestions, setIngestions] = useState([]);
   const [serviceList, setServiceList] = useState<Array<DatabaseService>>([]);
   const [paging, setPaging] = useState<Paging>({} as Paging);
+  const [isConnectionAvailable, setConnectionAvailable] =
+    useState<boolean>(true);
   const getDatabaseServices = () => {
     getServices('databaseServices')
       .then((res: AxiosResponse) => {
@@ -178,11 +182,10 @@ const IngestionPage = () => {
         }
       })
       .catch((err: AxiosError) => {
-        const msg = err.message;
+        const errMsg = toString(err.response?.data?.message) ?? '';
-        showToast({
+        if (errMsg.includes('Connection refused')) {
-          variant: 'error',
+          setConnectionAvailable(false);
-          body: msg ?? `Something went wrong`,
+        }
-        });
         setIsLoading(false);
       });
   };
@@ -204,16 +207,22 @@ const IngestionPage = () => {
       {isLoading ? (
         <Loader />
       ) : (
-        <Ingestion
+        <Fragment>
-          addIngestion={addIngestionWorkflowHandler}
+          {isConnectionAvailable ? (
-          deleteIngestion={deleteIngestionById}
+            <Ingestion
-          ingestionList={ingestions}
+              addIngestion={addIngestionWorkflowHandler}
-          paging={paging}
+              deleteIngestion={deleteIngestionById}
-          pagingHandler={pagingHandler}
+              ingestionList={ingestions}
-          serviceList={serviceList}
+              paging={paging}
-          triggerIngestion={triggerIngestionById}
+              pagingHandler={pagingHandler}
-          updateIngestion={updateIngestion}
+              serviceList={serviceList}
-        />
+              triggerIngestion={triggerIngestionById}
+              updateIngestion={updateIngestion}
+            />
+          ) : (
+            <IngestionError />
+          )}
+        </Fragment>
       )}
     </>
   );