#647 Added Pipeline Service Page (#673)

catalog-rest-service/src/main/resources/ui/src/axiosAPIs/pipelineAPI.ts

@@ -0,0 +1,92 @@
+/*
+  * Licensed to the Apache Software Foundation (ASF) under one or more
+  * contributor license agreements. See the NOTICE file distributed with
+  * this work for additional information regarding copyright ownership.
+  * The ASF licenses this file to You under the Apache License, Version 2.0
+  * (the "License"); you may not use this file except in compliance with
+  * the License. You may obtain a copy of the License at
+
+  * http://www.apache.org/licenses/LICENSE-2.0
+
+  * Unless required by applicable law or agreed to in writing, software
+  * distributed under the License is distributed on an "AS IS" BASIS,
+  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  * See the License for the specific language governing permissions and
+  * limitations under the License.
+*/
+
+import { AxiosResponse } from 'axios';
+import { Pipeline } from '../generated/entity/data/pipeline';
+import { getURLWithQueryFields } from '../utils/APIUtils';
+import APIClient from './index';
+
+export const getPipelines: Function = (
+  serviceName: string,
+  paging: string,
+  arrQueryFields: string
+): Promise<AxiosResponse> => {
+  const url = `${getURLWithQueryFields(
+    `/pipelines`,
+    arrQueryFields
+  )}&service=${serviceName}${paging ? paging : ''}`;
+
+  return APIClient.get(url);
+};
+
+export const getPipelineDetails: Function = (
+  id: string,
+  arrQueryFields: string
+): Promise<AxiosResponse> => {
+  const url = getURLWithQueryFields(`/pipelines/${id}`, arrQueryFields);
+
+  return APIClient.get(url);
+};
+
+export const getPipelineByFqn: Function = (
+  fqn: string,
+  arrQueryFields: string
+): Promise<AxiosResponse> => {
+  const url = getURLWithQueryFields(`/pipelines/name/${fqn}`, arrQueryFields);
+
+  return APIClient.get(url);
+};
+
+export const addFollower: Function = (
+  pipelineID: string,
+  userId: string
+): Promise<AxiosResponse> => {
+  const configOptions = {
+    headers: { 'Content-type': 'application/json' },
+  };
+
+  return APIClient.put(
+    `/pipelines/${pipelineID}/followers`,
+    userId,
+    configOptions
+  );
+};
+
+export const removeFollower: Function = (
+  pipelineID: string,
+  userId: string
+): Promise<AxiosResponse> => {
+  const configOptions = {
+    headers: { 'Content-type': 'application/json' },
+  };
+
+  return APIClient.delete(
+    `/pipelines/${pipelineID}/followers/${userId}`,
+    configOptions
+  );
+};
+
+export const patchPipelineDetails: Function = (
+  id: string,
+  data: Pipeline
+): Promise<AxiosResponse> => {
+  const configOptions = {
+    headers: { 'Content-type': 'application/json-patch+json' },
+  };
+
+  return APIClient.patch(`/pipelines/${id}`, data, configOptions);
+};

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

@@ -23,6 +23,7 @@ import React, { Fragment, FunctionComponent, useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { getDashboards } from '../../axiosAPIs/dashboardAPI';
 import { getDatabases } from '../../axiosAPIs/databaseAPI';
+import { getPipelines } from '../../axiosAPIs/pipelineAPI';
 import { getServiceByFQN, updateService } from '../../axiosAPIs/serviceAPI';
 import { getTopics } from '../../axiosAPIs/topicsAPI';
 import NextPrevious from '../../components/common/next-previous/NextPrevious';
@@ -42,10 +43,12 @@ import {
 } from '../../enums/service.enum';
 import { Dashboard } from '../../generated/entity/data/dashboard';
 import { Database } from '../../generated/entity/data/database';
+import { Pipeline } from '../../generated/entity/data/pipeline';
 import { Topic } from '../../generated/entity/data/topic';
 import { DashboardService } from '../../generated/entity/services/dashboardService';
 import { DatabaseService } from '../../generated/entity/services/databaseService';
 import { MessagingService } from '../../generated/entity/services/messagingService';
+import { PipelineService } from '../../generated/entity/services/pipelineService';
 import useToastContext from '../../hooks/useToastContext';
 import { isEven } from '../../utils/CommonUtils';
 import {
@@ -59,7 +62,8 @@ import { getEntityLink, getUsagePercentile } from '../../utils/TableUtils';
 type Data = Database | Topic | Dashboard;
 type ServiceDataObj = { name: string } & Partial<DatabaseService> &
   Partial<MessagingService> &
-  Partial<DashboardService>;
+  Partial<DashboardService> &
+  Partial<PipelineService>;
 
 const ServicePage: FunctionComponent = () => {
   const { serviceFQN, serviceType } = useParams() as Record<string, string>;
@@ -143,6 +147,31 @@ const ServicePage: FunctionComponent = () => {
       });
   };
 
+  const fetchPipeLines = (paging?: string) => {
+    setIsloading(true);
+    getPipelines(serviceFQN, paging, [
+      'owner',
+      'service',
+      'usageSummary',
+      'tags',
+    ])
+      .then((res: AxiosResponse) => {
+        if (res.data.data) {
+          setData(res.data.data);
+          setPaging(res.data.paging);
+          setInstanceCount(res.data.paging.total);
+          setIsloading(false);
+        } else {
+          setData([]);
+          setPaging(pagingObject);
+          setIsloading(false);
+        }
+      })
+      .catch(() => {
+        setIsloading(false);
+      });
+  };
+
   const getOtherDetails = (paging?: string) => {
     switch (serviceName) {
       case ServiceCategory.DATABASE_SERVICES: {
@@ -160,6 +189,11 @@ const ServicePage: FunctionComponent = () => {
 
         break;
       }
+      case ServiceCategory.PIPELINE_SERVICES: {
+        fetchPipeLines(paging);
+
+        break;
+      }
       default:
         break;
     }
@@ -349,6 +383,39 @@ const ServicePage: FunctionComponent = () => {
 
         return elemFields;
       }
+      case ServiceCategory.PIPELINE_SERVICES:
+        return (
+          <span>
+            <span className="tw-text-grey-muted tw-font-normal">
+              Pipeline Url :
+            </span>{' '}
+            <span className="tw-pl-1tw-font-normal ">
+              {serviceDetails?.pipelineUrl ? (
+                <a
+                  className="link-text"
+                  href={serviceDetails.pipelineUrl}
+                  rel="noopener noreferrer"
+                  target="_blank">
+                  <>
+                    <span className="tw-mr-1">
+                      {serviceDetails.pipelineUrl}
+                    </span>
+                    <SVGIcons
+                      alt="external-link"
+                      className="tw-align-middle"
+                      icon="external-link"
+                      width="12px"
+                    />
+                  </>
+                </a>
+              ) : (
+                '--'
+              )}
+            </span>
+            <span className="tw-mx-3 tw-text-grey-muted">•</span>
+          </span>
+        );
+
       default: {
         return <></>;
       }
@@ -387,6 +454,16 @@ const ServicePage: FunctionComponent = () => {
           </>
         );
       }
+      case ServiceCategory.PIPELINE_SERVICES: {
+        return (
+          <>
+            <th className="tableHead-cell">Pipeline Name</th>
+            <th className="tableHead-cell">Description</th>
+            <th className="tableHead-cell">Owner</th>
+            <th className="tableHead-cell">Tags</th>
+          </>
+        );
+      }
       default:
         return <></>;
     }
@@ -461,6 +538,33 @@ const ServicePage: FunctionComponent = () => {
           </td>
         );
       }
+      case ServiceCategory.PIPELINE_SERVICES: {
+        const pipeline = data as Pipeline;
+
+        return (
+          <td className="tableBody-cell">
+            {pipeline.tags && pipeline.tags?.length > 0
+              ? pipeline.tags.map((tag, tagIndex) => (
+                  <PopOver
+                    key={tagIndex}
+                    position="top"
+                    size="small"
+                    title={tag.labelType}
+                    trigger="mouseenter">
+                    <Tags
+                      className="tw-bg-gray-200"
+                      tag={`#${
+                        tag.tagFQN?.startsWith('Tier.Tier')
+                          ? tag.tagFQN.split('.')[1]
+                          : tag.tagFQN
+                      }`}
+                    />
+                  </PopOver>
+                ))
+              : '--'}
+          </td>
+        );
+      }
       default:
         return <></>;
     }
@@ -515,6 +619,8 @@ const ServicePage: FunctionComponent = () => {
             body: errMsg,
           });
         });
+    } else {
+      setIsEdit(false);
     }
   };
 
@@ -535,6 +641,8 @@ const ServicePage: FunctionComponent = () => {
         return 'Dashboards';
       case ServiceCategory.MESSAGING_SERVICES:
         return 'Topics';
+      case ServiceCategory.PIPELINE_SERVICES:
+        return 'Pipelines';
       case ServiceCategory.DATABASE_SERVICES:
       default:
         return 'Databases';