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

openmetadata-ui/src/main/resources/ui/src/axiosAPIs/ingestionPipelineAPI.ts

@@ -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> => {

openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx

@@ -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"

openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.mock.ts

@@ -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: {

openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.test.tsx

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

openmetadata-ui/src/main/resources/ui/src/components/Ingestion/ingestion.interface.ts

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

openmetadata-ui/src/main/resources/ui/src/components/IngestionStepper/IngestionStepper.css

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

openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx

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

openmetadata-ui/src/main/resources/ui/src/utils/TasksUtils.ts

@@ -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,