yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-04 04:29:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

#647 Added Pipeline Service Page (#673)

Browse Source
This commit is contained in:
Sachin Chaurasiya 2021-10-05 19:35:56 +05:30 committed by GitHub
parent 1a0a9dfed3
commit b496a2bca8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 201 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
catalog-rest-service/src/main/resources/ui/src/axiosAPIs/pipelineAPI.ts Normal file
View File

@ -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);
};

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

@ -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';