Feat: UI button to pause/unpause ingestion pipeline executions (#5884)

* Fixed: UI button to pause/unpause ingestion pipeline executions

* added unit test for pause/unpause button

* addressing comment and fixing miner css
This commit is contained in:
Shailesh Parmar 2022-07-06 18:05:48 +05:30 committed by GitHub
parent f8e3d634c2
commit c4d71adc5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 140 additions and 5 deletions

View File

@ -61,6 +61,12 @@ export const deployIngestionPipelineById = (
return APIClient.post(`/services/ingestionPipelines/deploy/${id}`);
};
export const enableDisableIngestionPipelineById = (
id: string
): Promise<AxiosResponse> => {
return APIClient.post(`/services/ingestionPipelines/toggleIngestion/${id}`);
};
export const deleteIngestionPipelineById = (
id: string
): Promise<AxiosResponse> => {

View File

@ -57,6 +57,7 @@ const Ingestion: React.FC<IngestionProps> = ({
deployIngestion,
paging,
pagingHandler,
handleEnableDisableIngestion,
currrentPage,
}: IngestionProps) => {
const history = useHistory();
@ -286,12 +287,14 @@ const Ingestion: React.FC<IngestionProps> = ({
const status =
i === lastFiveIngestions.length - 1 ? (
<p
className={`tw-h-5 tw-w-16 tw-rounded-sm tw-bg-status-${r.state} tw-mr-1 tw-px-1 tw-text-white tw-text-center`}>
className={`tw-h-5 tw-w-16 tw-rounded-sm tw-bg-status-${r.state} tw-mr-1 tw-px-1 tw-text-white tw-text-center`}
key={i}>
{capitalize(r.state)}
</p>
) : (
<p
className={`tw-w-4 tw-h-5 tw-rounded-sm tw-bg-status-${r.state} tw-mr-1`}
key={i}
/>
);
@ -469,7 +472,32 @@ const Ingestion: React.FC<IngestionProps> = ({
position="bottom"
title={TITLE_FOR_NON_ADMIN_ACTION}>
<div className="tw-flex">
{getTriggerDeployButton(ingestion)}
{ingestion.enabled ? (
<Fragment>
{getTriggerDeployButton(ingestion)}
<button
className="link-text tw-mr-2"
data-testid="pause"
disabled={!isRequiredDetailsAvailable}
onClick={() =>
handleEnableDisableIngestion(
ingestion.id || ''
)
}>
Pause
</button>
</Fragment>
) : (
<button
className="link-text tw-mr-2"
data-testid="unpause"
disabled={!isRequiredDetailsAvailable}
onClick={() =>
handleEnableDisableIngestion(ingestion.id || '')
}>
Unpause
</button>
)}
<button
className="link-text tw-mr-2"
data-testid="edit"

View File

@ -20,6 +20,7 @@ export const mockIngestionWorkFlow = {
id: 'c804ec51-8fcf-4040-b830-5d967c4cbf49',
name: 'test3_metadata',
deployed: true,
enabled: true,
displayName: 'test3_metadata',
pipelineType: 'metadata',
owner: {

View File

@ -16,6 +16,7 @@ import {
findByTestId,
findByText,
fireEvent,
queryByTestId,
render,
} from '@testing-library/react';
import React from 'react';
@ -45,6 +46,7 @@ const mockPaging = {
const mockPaginghandler = jest.fn();
const mockDeleteIngestion = jest.fn();
const handleEnableDisableIngestion = jest.fn();
const mockDeployIngestion = jest
.fn()
.mockImplementation(() => Promise.resolve());
@ -89,6 +91,7 @@ describe('Test Ingestion page', () => {
currrentPage={1}
deleteIngestion={mockDeleteIngestion}
deployIngestion={mockDeployIngestion}
handleEnableDisableIngestion={handleEnableDisableIngestion}
ingestionList={
mockIngestionWorkFlow.data.data as unknown as IngestionPipeline[]
}
@ -130,6 +133,7 @@ describe('Test Ingestion page', () => {
currrentPage={1}
deleteIngestion={mockDeleteIngestion}
deployIngestion={mockDeployIngestion}
handleEnableDisableIngestion={handleEnableDisableIngestion}
ingestionList={
mockIngestionWorkFlow.data.data as unknown as IngestionPipeline[]
}
@ -185,6 +189,7 @@ describe('Test Ingestion page', () => {
currrentPage={1}
deleteIngestion={mockDeleteIngestion}
deployIngestion={mockDeployIngestion}
handleEnableDisableIngestion={handleEnableDisableIngestion}
ingestionList={
mockIngestionWorkFlow.data.data as unknown as IngestionPipeline[]
}
@ -220,6 +225,7 @@ describe('Test Ingestion page', () => {
currrentPage={1}
deleteIngestion={mockDeleteIngestion}
deployIngestion={mockDeployIngestion}
handleEnableDisableIngestion={handleEnableDisableIngestion}
ingestionList={
mockIngestionWorkFlow.data.data as unknown as IngestionPipeline[]
}
@ -257,6 +263,7 @@ describe('Test Ingestion page', () => {
currrentPage={1}
deleteIngestion={mockDeleteIngestion}
deployIngestion={mockDeployIngestion}
handleEnableDisableIngestion={handleEnableDisableIngestion}
ingestionList={
mockIngestionWorkFlow.data.data as unknown as IngestionPipeline[]
}
@ -307,6 +314,7 @@ describe('Test Ingestion page', () => {
currrentPage={1}
deleteIngestion={mockDeleteIngestion}
deployIngestion={mockDeployIngestion}
handleEnableDisableIngestion={handleEnableDisableIngestion}
ingestionList={
mockIngestionWorkFlow.data.data as unknown as IngestionPipeline[]
}
@ -327,4 +335,76 @@ describe('Test Ingestion page', () => {
expect(viewButton).toBeInTheDocument();
});
it('Pause button should be present if enabled is available', async () => {
const { container } = render(
<Ingestion
isRequiredDetailsAvailable
airflowEndpoint="http://localhost"
currrentPage={1}
deleteIngestion={mockDeleteIngestion}
deployIngestion={mockDeployIngestion}
handleEnableDisableIngestion={handleEnableDisableIngestion}
ingestionList={
mockIngestionWorkFlow.data.data as unknown as IngestionPipeline[]
}
paging={mockPaging}
pagingHandler={mockPaginghandler}
serviceCategory={ServiceCategory.DASHBOARD_SERVICES}
serviceDetails={mockService}
serviceList={[]}
serviceName=""
triggerIngestion={mockTriggerIngestion}
/>,
{
wrapper: MemoryRouter,
}
);
const pauseButton = await findByTestId(container, 'pause');
expect(pauseButton).toBeInTheDocument();
fireEvent.click(pauseButton);
expect(handleEnableDisableIngestion).toBeCalled();
});
it('Unpause button should be present if enabled is false', async () => {
const { container } = render(
<Ingestion
isRequiredDetailsAvailable
airflowEndpoint="http://localhost"
currrentPage={1}
deleteIngestion={mockDeleteIngestion}
deployIngestion={mockDeployIngestion}
handleEnableDisableIngestion={handleEnableDisableIngestion}
ingestionList={
[
{ ...mockIngestionWorkFlow.data.data, enabled: false },
] as unknown as IngestionPipeline[]
}
paging={mockPaging}
pagingHandler={mockPaginghandler}
serviceCategory={ServiceCategory.DASHBOARD_SERVICES}
serviceDetails={mockService}
serviceList={[]}
serviceName=""
triggerIngestion={mockTriggerIngestion}
/>,
{
wrapper: MemoryRouter,
}
);
const unpause = await findByTestId(container, 'unpause');
const run = queryByTestId(container, 'run');
expect(unpause).toBeInTheDocument();
expect(run).not.toBeInTheDocument();
fireEvent.click(unpause);
expect(handleEnableDisableIngestion).toBeCalled();
});
});

View File

@ -61,5 +61,6 @@ export interface IngestionProps {
pagingHandler: (value: string | number, activePage?: number) => void;
deleteIngestion: (id: string, displayName: string) => Promise<void>;
deployIngestion: (id: string) => Promise<void>;
handleEnableDisableIngestion: (id: string) => void;
triggerIngestion: (id: string, displayName: string) => Promise<void>;
}

View File

@ -76,8 +76,8 @@
}
.add-ingestion-line {
width: 82%;
left: 55px;
width: 68%;
left: 90px;
}
.ingestion-deploy-line {

View File

@ -24,6 +24,7 @@ import {
checkAirflowStatus,
deleteIngestionPipelineById,
deployIngestionPipelineById,
enableDisableIngestionPipelineById,
getIngestionPipelines,
triggerIngestionPipelineById,
} from '../../axiosAPIs/ingestionPipelineAPI';
@ -326,6 +327,23 @@ const ServicePage: FunctionComponent = () => {
});
};
const handleEnableDisableIngestion = (id: string) => {
enableDisableIngestionPipelineById(id)
.then((res: AxiosResponse) => {
if (res.data) {
getAllIngestionWorkflows();
} else {
throw jsonData['api-error-messages']['unexpected-server-response'];
}
})
.catch((err: AxiosError) => {
showErrorToast(
err,
jsonData['api-error-messages']['unexpected-server-response']
);
});
};
const deleteIngestionById = (
id: string,
displayName: string
@ -861,6 +879,7 @@ const ServicePage: FunctionComponent = () => {
currrentPage={ingestionCurrentPage}
deleteIngestion={deleteIngestionById}
deployIngestion={deployIngestion}
handleEnableDisableIngestion={handleEnableDisableIngestion}
ingestionList={ingestions}
paging={ingestionPaging}
pagingHandler={ingestionPagingHandler}

View File

@ -106,7 +106,7 @@ export const fetchOptions = (
.then((res: AxiosResponse) => {
const hits = res.data.suggest['metadata-suggest'][0]['options'];
// eslint-disable-next-line
const suggestOptions = hits.map((hit: any) => ({
const suggestOptions = hits.map((hit: any) => ({
label: hit._source.name ?? hit._source.display_name,
value: hit._id,
type: hit._source.entityType,