From b496a2bca80699d04ff3a5fbe34e818f46d9cd4d Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Tue, 5 Oct 2021 19:35:56 +0530 Subject: [PATCH] #647 Added Pipeline Service Page (#673) --- .../resources/ui/src/axiosAPIs/pipelineAPI.ts | 92 +++++++++++++++ .../resources/ui/src/pages/service/index.tsx | 110 +++++++++++++++++- 2 files changed, 201 insertions(+), 1 deletion(-) create mode 100644 catalog-rest-service/src/main/resources/ui/src/axiosAPIs/pipelineAPI.ts diff --git a/catalog-rest-service/src/main/resources/ui/src/axiosAPIs/pipelineAPI.ts b/catalog-rest-service/src/main/resources/ui/src/axiosAPIs/pipelineAPI.ts new file mode 100644 index 00000000000..1066df7fbae --- /dev/null +++ b/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 => { + const url = `${getURLWithQueryFields( + `/pipelines`, + arrQueryFields + )}&service=${serviceName}${paging ? paging : ''}`; + + return APIClient.get(url); +}; + +export const getPipelineDetails: Function = ( + id: string, + arrQueryFields: string +): Promise => { + const url = getURLWithQueryFields(`/pipelines/${id}`, arrQueryFields); + + return APIClient.get(url); +}; + +export const getPipelineByFqn: Function = ( + fqn: string, + arrQueryFields: string +): Promise => { + const url = getURLWithQueryFields(`/pipelines/name/${fqn}`, arrQueryFields); + + return APIClient.get(url); +}; + +export const addFollower: Function = ( + pipelineID: string, + userId: string +): Promise => { + const configOptions = { + headers: { 'Content-type': 'application/json' }, + }; + + return APIClient.put( + `/pipelines/${pipelineID}/followers`, + userId, + configOptions + ); +}; + +export const removeFollower: Function = ( + pipelineID: string, + userId: string +): Promise => { + const configOptions = { + headers: { 'Content-type': 'application/json' }, + }; + + return APIClient.delete( + `/pipelines/${pipelineID}/followers/${userId}`, + configOptions + ); +}; + +export const patchPipelineDetails: Function = ( + id: string, + data: Pipeline +): Promise => { + const configOptions = { + headers: { 'Content-type': 'application/json-patch+json' }, + }; + + return APIClient.patch(`/pipelines/${id}`, data, configOptions); +}; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx index cb394be586e..2ce7c5403c3 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx +++ b/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 & Partial & - Partial; + Partial & + Partial; const ServicePage: FunctionComponent = () => { const { serviceFQN, serviceType } = useParams() as Record; @@ -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 ( + + + Pipeline Url : + {' '} + + {serviceDetails?.pipelineUrl ? ( + + <> + + {serviceDetails.pipelineUrl} + + + + + ) : ( + '--' + )} + + • + + ); + default: { return <>; } @@ -387,6 +454,16 @@ const ServicePage: FunctionComponent = () => { ); } + case ServiceCategory.PIPELINE_SERVICES: { + return ( + <> + Pipeline Name + Description + Owner + Tags + + ); + } default: return <>; } @@ -461,6 +538,33 @@ const ServicePage: FunctionComponent = () => { ); } + case ServiceCategory.PIPELINE_SERVICES: { + const pipeline = data as Pipeline; + + return ( + + {pipeline.tags && pipeline.tags?.length > 0 + ? pipeline.tags.map((tag, tagIndex) => ( + + + + )) + : '--'} + + ); + } 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';