Integration for Pipeline services (#674)

catalog-rest-service/src/main/resources/ui/src/components/Modals/AddServiceModal/AddServiceModal.tsx

@@ -58,6 +58,7 @@ export type DataObj = {
   api_version?: string;
   server?: string;
   env?: string;
+  pipelineUrl?: string;
 };
 
 // type DataObj = CreateDatabaseService &
@@ -115,6 +116,7 @@ type ErrorMsg = {
   siteName?: boolean;
   apiVersion?: boolean;
   server?: boolean;
+  pipelineUrl?: boolean;
 };
 type EditorContentRef = {
   getEditorContent: () => string;
@@ -211,6 +213,7 @@ export const AddServiceModal: FunctionComponent<Props> = ({
   const [apiVersion, setApiVersion] = useState(data?.api_version || '');
   const [server, setServer] = useState(data?.server || '');
   const [env, setEnv] = useState(data?.env || '');
+  const [pipelineUrl, setPipelineUrl] = useState(data?.pipelineUrl || '');
   const [frequency, setFrequency] = useState(
     fromISOString(data?.ingestionSchedule?.repeatFrequency)
   );
@@ -228,6 +231,7 @@ export const AddServiceModal: FunctionComponent<Props> = ({
     siteName: false,
     apiVersion: false,
     server: false,
+    pipelineUrl: false,
   });
   const [sameNameError, setSameNameError] = useState(false);
   const markdownRef = useRef<EditorContentRef>();
@@ -314,6 +318,7 @@ export const AddServiceModal: FunctionComponent<Props> = ({
       siteName,
       apiVersion,
       server,
+      pipelineUrl,
     } = value;
 
     return (
@@ -329,7 +334,8 @@ export const AddServiceModal: FunctionComponent<Props> = ({
       !apiKey &&
       !siteName &&
       !apiVersion &&
-      !server
+      !server &&
+      !pipelineUrl
     );
   };
 
@@ -399,6 +405,15 @@ export const AddServiceModal: FunctionComponent<Props> = ({
           }
         }
 
+        break;
+      case ServiceCategory.PIPELINE_SERVICES:
+        {
+          setMsg = {
+            ...setMsg,
+            pipelineUrl: !pipelineUrl,
+          };
+        }
+
         break;
       default:
         break;
@@ -488,6 +503,15 @@ export const AddServiceModal: FunctionComponent<Props> = ({
             }
           }
 
+          break;
+        case ServiceCategory.PIPELINE_SERVICES:
+          {
+            dataObj = {
+              ...dataObj,
+              pipelineUrl: pipelineUrl,
+            };
+          }
+
           break;
         default:
           break;
@@ -814,6 +838,26 @@ export const AddServiceModal: FunctionComponent<Props> = ({
     return elemFields;
   };
 
+  const getPipelineFields = (): JSX.Element => {
+    return (
+      <div className="tw-mt-4">
+        <label className="tw-block tw-form-label" htmlFor="pipeline-url">
+          {requiredField('Pipeline Url:')}
+        </label>
+        <input
+          className="tw-form-inputs tw-px-3 tw-py-1"
+          id="pipeline-url"
+          name="pipeline-url"
+          placeholder="http(s)://hostname:port"
+          type="text"
+          value={pipelineUrl}
+          onChange={(e) => setPipelineUrl(e.target.value)}
+        />
+        {showErrorMsg.pipelineUrl && errorMsg('Url is required')}
+      </div>
+    );
+  };
+
   const getOptionalFields = (): JSX.Element => {
     switch (serviceName) {
       case ServiceCategory.DATABASE_SERVICES:
@@ -822,6 +866,8 @@ export const AddServiceModal: FunctionComponent<Props> = ({
         return getMessagingFields();
       case ServiceCategory.DASHBOARD_SERVICES:
         return getDashboardFields();
+      case ServiceCategory.PIPELINE_SERVICES:
+        return getPipelineFields();
       default:
         return <></>;
     }

catalog-rest-service/src/main/resources/ui/src/constants/services.const.ts

@@ -77,7 +77,7 @@ export const serviceTypes: Record<ServiceTypes, Array<string>> = {
   ],
   messagingServices: ['Kafka'],
   dashboardServices: ['Superset', 'Looker', 'Tableau', 'Redash'],
-  pipelineServices: ['Airflow', 'Prefect'],
+  pipelineServices: ['Airflow'],
 };
 
 export const arrServiceTypes: Array<ServiceTypes> = [

catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx

@@ -119,6 +119,7 @@ const ServicesPage = () => {
               serviceRecord[serviceName] as unknown as Array<ServiceDataObj>
             );
           }
+          setIsLoading(false);
         }
       );
     }
@@ -293,6 +294,20 @@ const ServicesPage = () => {
           </>
         );
       }
+      case ServiceCategory.PIPELINE_SERVICES: {
+        const pipelineService = service as unknown as PipelineService;
+
+        return (
+          <>
+            <div className="tw-mb-1" data-testid="additional-field">
+              <label className="tw-mb-0">Pipeline URL:</label>
+              <span className=" tw-ml-1 tw-font-normal tw-text-grey-body">
+                {pipelineService.pipelineUrl}
+              </span>
+            </div>
+          </>
+        );
+      }
       default: {
         return <></>;
       }
@@ -311,7 +326,6 @@ const ServicesPage = () => {
             value: service.collection.name,
           };
         });
-        setIsLoading(false);
       } else {
         setIsLoading(false);
       }