Fixes #20680: Added readTimeout input field (#20756)

* added readTimeout input field

* fixed comments

* fixed minor comment

* fixed minor comment

openmetadata-ui/src/main/resources/ui/playwright/constant/alert.interface.ts

@@ -34,6 +34,7 @@ export interface AlertDetails {
     category: string;
     type: string;
     timeout: string;
+    readTimeout: string;
     config: {
       secretKey: string;
       receivers: Array<string>;

openmetadata-ui/src/main/resources/ui/playwright/utils/alert.ts

@@ -530,6 +530,11 @@ export const verifyAlertDetails = async ({
       destinations[0].timeout.toString()
     );
 
+    // Check read timeout details
+    await expect(page.getByTestId('read-timeout-input')).toHaveValue(
+      destinations[0].readTimeout.toString()
+    );
+
     for (const destinationNumber in destinations) {
       await expect(
         page.getByTestId(`destination-${destinationNumber}`)
@@ -782,7 +787,9 @@ export const createAlert = async ({
     });
 
     await page.getByTestId('connection-timeout-input').clear();
+    await page.getByTestId('read-timeout-input').clear();
     await page.fill('[data-testid="connection-timeout-input"]', '26');
+    await page.fill('[data-testid="read-timeout-input"]', '26');
   }
 
   // Select Destination

openmetadata-ui/src/main/resources/ui/playwright/utils/notificationAlert.ts

@@ -193,6 +193,9 @@ export const editSingleFilterAlert = async ({
   await page.getByTestId('connection-timeout-input').clear();
   await page.fill('[data-testid="connection-timeout-input"]', '26');
 
+  await page.getByTestId('read-timeout-input').clear();
+  await page.fill('[data-testid="read-timeout-input"]', '26');
+
   // Add owner GChat destination
   await page.click('[data-testid="add-destination-button"]');
   await addInternalDestination({

openmetadata-ui/src/main/resources/ui/src/components/Alerts/DestinationFormItem/DestinationFormItem.component.tsx

@@ -27,6 +27,7 @@ import { testAlertDestination } from '../../../rest/alertsAPI';
 import {
   getConnectionTimeoutField,
   getFormattedDestinations,
+  getReadTimeoutField,
   listLengthValidator,
 } from '../../../utils/Alerts/AlertsUtil';
 import { showErrorToast } from '../../../utils/ToastUtils';
@@ -103,6 +104,7 @@ function DestinationFormItem({ isViewMode = false }: DestinationFormItemProps) {
       heading={t('label.destination')}
       subHeading={t('message.alerts-destination-description')}>
       {getConnectionTimeoutField()}
+      {getReadTimeoutField()}
       <Form.List
         name={['destinations']}
         rules={[

openmetadata-ui/src/main/resources/ui/src/components/Alerts/DestinationFormItem/DestinationFormItem.test.tsx

@@ -28,6 +28,9 @@ jest.mock('../../../utils/Alerts/AlertsUtil', () => ({
   getConnectionTimeoutField: jest
     .fn()
     .mockReturnValue(<div data-testid="connection-timeout" />),
+  getReadTimeoutField: jest
+    .fn()
+    .mockReturnValue(<div data-testid="read-timeout" />),
 }));
 
 jest.mock('../../../utils/ObservabilityUtils', () => ({

openmetadata-ui/src/main/resources/ui/src/constants/Alerts.constants.tsx

@@ -72,3 +72,5 @@ export const DESTINATION_TYPE_BASED_PLACEHOLDERS = {
   [SubscriptionType.Webhook]: 'https://example.com',
   [SubscriptionType.Email]: 'Add ↵ separated Email addresses',
 };
+
+export const DEFAULT_READ_TIMEOUT = 12;

openmetadata-ui/src/main/resources/ui/src/pages/AddObservabilityPage/AddObservabilityPage.interface.ts

@@ -32,10 +32,12 @@ export interface ModifiedDestination extends Destination {
 export interface ModifiedEventSubscription extends EventSubscription {
   destinations: ModifiedDestination[];
   timeout: number;
+  readTimeout: number;
 }
 
 export interface ModifiedCreateEventSubscription
   extends CreateEventSubscription {
   destinations: ModifiedDestination[];
   timeout: number;
+  readTimeout: number;
 }

openmetadata-ui/src/main/resources/ui/src/utils/Alerts/AlertsUtil.tsx

@@ -65,6 +65,7 @@ import { AsyncSelect } from '../../components/common/AsyncSelect/AsyncSelect';
 import { InlineAlertProps } from '../../components/common/InlineAlert/InlineAlert.interface';
 import { ExtraInfoLabel } from '../../components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
 import {
+  DEFAULT_READ_TIMEOUT,
   DESTINATION_DROPDOWN_TABS,
   DESTINATION_SOURCE_ITEMS,
   DESTINATION_TYPE_BASED_PLACEHOLDERS,
@@ -370,6 +371,29 @@ export const getConnectionTimeoutField = () => (
         </Form.Item>
       </Col>
     </Row>
+  </>
+);
+
+export const getReadTimeoutField = () => (
+  <>
+    <Row align="middle" className="mt-4">
+      <Col span={7}>{`${t('label.read-type', {
+        type: t('label.timeout'),
+      })} (${t('label.second-plural')})`}</Col>
+      <Col span={1}>:</Col>
+      <Col data-testid="read-timeout" span={16}>
+        <Form.Item name="readTimeout">
+          <Input
+            data-testid="read-timeout-input"
+            defaultValue={DEFAULT_READ_TIMEOUT}
+            placeholder={`${t('label.read-type', {
+              type: t('label.timeout'),
+            })} (${t('label.second-plural')})`}
+            type="number"
+          />
+        </Form.Item>
+      </Col>
+    </Row>
     <Divider className="p-x-xs" />
   </>
 );
@@ -1076,6 +1100,7 @@ export const handleAlertSave = async ({
         },
         category: d.category,
         timeout: data.timeout,
+        readTimeout: data.readTimeout,
       };
     });
     let alertDetails;
@@ -1107,7 +1132,7 @@ export const handleAlertSave = async ({
       alertDetails = await updateAlertAPI(initialData.id, jsonPatch);
     } else {
       // Remove timeout from alert object since it's only for UI
-      const { timeout, ...finalData } = data;
+      const { timeout, readTimeout, ...finalData } = data;
 
       alertDetails = await createAlertAPI({
         ...finalData,
@@ -1399,6 +1424,7 @@ export const getModifiedAlertDataForForm = (
   return {
     ...alertData,
     timeout: alertData.destinations[0].timeout ?? 10,
+    readTimeout: alertData.destinations[0].readTimeout ?? DEFAULT_READ_TIMEOUT,
     destinations: alertData.destinations.map((destination) => {
       const isExternalDestination =
         destination.category === SubscriptionCategory.External;