Fixes #19860: Added Diagnostic tab to display diagnostic information || Added Sync offset button

openmetadata-ui/src/main/resources/ui/playwright/e2e/Flow/ObservabilityAlerts.spec.ts

@@ -156,6 +156,18 @@ test('Pipeline Alert', async ({ page }) => {
     });
   });
 
+  await test.step('Verify diagnostic info tab', async () => {
+    await visitObservabilityAlertPage(page);
+    await visitAlertDetailsPage(page, data.alertDetails);
+
+    const diagnosticTab = page.getByRole('tab', { name: /diagnostic info/i });
+    const diagnosticInfoResponse = page.waitForResponse(
+      `/api/v1/events/subscriptions/**/diagnosticInfo`
+    );
+    await diagnosticTab.click();
+    await diagnosticInfoResponse;
+  });
+
   await test.step('Check created alert details', async () => {
     await visitObservabilityAlertPage(page);
     await visitAlertDetailsPage(page, data.alertDetails);

openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertDetails/AlertDiagnosticInfo/AlertDiagnosticInfoTab.interface.ts

@@ -0,0 +1,20 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed 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.
+ */
+export interface DiagnosticItem {
+  key: string;
+  value: string | number | boolean;
+  description: string;
+}
+export interface AlertDiagnosticInfoTabProps {
+  fqn: string;
+}

openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertDetails/AlertDiagnosticInfo/AlertDiagnosticInfoTab.test.tsx

@@ -0,0 +1,93 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed 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 { act, render, screen } from '@testing-library/react';
+import React from 'react';
+import {
+  mockDiagnosticData,
+  mockEmptyDiagnosticData,
+} from '../../../../mocks/Alerts.mock';
+import { getDiagnosticInfo } from '../../../../rest/observabilityAPI';
+import AlertDiagnosticInfoTab from './AlertDiagnosticInfoTab';
+
+// Mock the API call
+jest.mock('../../../../rest/observabilityAPI', () => ({
+  getDiagnosticInfo: jest.fn(),
+}));
+
+describe('AlertDiagnosticInfoTab', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render all offset information correctly', async () => {
+    (getDiagnosticInfo as jest.Mock).mockResolvedValue(mockDiagnosticData);
+
+    await act(async () => {
+      render(<AlertDiagnosticInfoTab fqn="test-fqn" />);
+    });
+
+    // Check labels
+    expect(screen.getByText('label.latest-offset:')).toBeInTheDocument();
+    expect(screen.getByText('label.current-offset:')).toBeInTheDocument();
+    expect(screen.getByText('label.starting-offset:')).toBeInTheDocument();
+    expect(
+      screen.getByText('label.successful-event-plural:')
+    ).toBeInTheDocument();
+    expect(screen.getByText('label.failed-event-plural:')).toBeInTheDocument();
+    expect(
+      screen.getByText('label.processed-all-event-plural:')
+    ).toBeInTheDocument();
+
+    // Check values
+    expect(screen.getByText('100')).toBeInTheDocument();
+    expect(screen.getByText('80')).toBeInTheDocument();
+    expect(screen.getByText('0')).toBeInTheDocument();
+    expect(screen.getByText('75')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('Yes')).toBeInTheDocument();
+  });
+
+  it('should render processed all events status as "No" when false', async () => {
+    (getDiagnosticInfo as jest.Mock).mockResolvedValue(mockEmptyDiagnosticData);
+
+    await act(async () => {
+      render(<AlertDiagnosticInfoTab fqn="test-fqn" />);
+    });
+
+    expect(screen.getByText('No')).toBeInTheDocument();
+  });
+
+  it('should render with empty/zero values correctly', async () => {
+    (getDiagnosticInfo as jest.Mock).mockResolvedValue(mockEmptyDiagnosticData);
+
+    await act(async () => {
+      render(<AlertDiagnosticInfoTab fqn="test-fqn" />);
+    });
+
+    // Check numeric fields have value "0"
+    const zeroValues = screen.getAllByText('0');
+
+    expect(zeroValues).toHaveLength(5); // Should find 5 zero values
+  });
+
+  it('should handle API error correctly', async () => {
+    const error = new Error('API Error');
+    (getDiagnosticInfo as jest.Mock).mockRejectedValue(error);
+
+    await act(async () => {
+      render(<AlertDiagnosticInfoTab fqn="test-fqn" />);
+    });
+
+    expect(screen.queryByText('100')).not.toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertDetails/AlertDiagnosticInfo/AlertDiagnosticInfoTab.tsx

@@ -0,0 +1,85 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed 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 { InfoCircleOutlined } from '@ant-design/icons';
+import { Card, Col, Row, Tooltip, Typography } from 'antd';
+import { AxiosError } from 'axios';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GRAYED_OUT_COLOR } from '../../../../constants/constants';
+import { EventSubscriptionDiagnosticInfo } from '../../../../generated/events/api/eventSubscriptionDiagnosticInfo';
+import { getDiagnosticInfo } from '../../../../rest/observabilityAPI';
+import { getDiagnosticItems } from '../../../../utils/Alerts/AlertsUtil';
+import { showErrorToast } from '../../../../utils/ToastUtils';
+import './alert-diagnostic-info-tab.less';
+import { AlertDiagnosticInfoTabProps } from './AlertDiagnosticInfoTab.interface';
+
+function AlertDiagnosticInfoTab({ fqn }: AlertDiagnosticInfoTabProps) {
+  const { t } = useTranslation();
+  const { Text } = Typography;
+  const [diagnosticData, setDiagnosticData] =
+    useState<EventSubscriptionDiagnosticInfo>();
+
+  const fetchDiagnosticInfo = useCallback(async () => {
+    try {
+      const diagnosticInfoData = await getDiagnosticInfo(fqn);
+      setDiagnosticData(diagnosticInfoData);
+    } catch (error) {
+      showErrorToast(error as AxiosError);
+    }
+  }, [fqn]);
+
+  useEffect(() => {
+    fetchDiagnosticInfo();
+  }, [fetchDiagnosticInfo]);
+
+  const diagnosticItems = useMemo(
+    () => getDiagnosticItems(diagnosticData, t),
+    [diagnosticData, t]
+  );
+
+  return (
+    <Card>
+      <Row className="w-full" gutter={[16, 16]}>
+        {diagnosticItems.map((item) => (
+          <Col key={item.key} span={12}>
+            <Row align="middle">
+              <Col className="d-flex items-center" span={10}>
+                <span className="d-flex items-center gap-1">
+                  <p className="text-grey-muted m-0">{t(item.key)}:</p>
+                  <Tooltip placement="bottom" title={item.description}>
+                    <InfoCircleOutlined
+                      className="info-icon"
+                      style={{ color: GRAYED_OUT_COLOR }}
+                    />
+                  </Tooltip>
+                </span>
+              </Col>
+              <Col span={10}>
+                <Text>
+                  {typeof item.value === 'boolean'
+                    ? item.value
+                      ? 'Yes'
+                      : 'No'
+                    : item.value}
+                </Text>
+              </Col>
+            </Row>
+          </Col>
+        ))}
+      </Row>
+    </Card>
+  );
+}
+
+export default React.memo(AlertDiagnosticInfoTab);

openmetadata-ui/src/main/resources/ui/src/components/Alerts/AlertDetails/AlertDiagnosticInfo/alert-diagnostic-info-tab.less

@@ -0,0 +1,58 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed 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 (reference) url('../../../../styles/variables.less');
+
+.alert-diagnostic-container {
+  .ant-card {
+    border-radius: 8px;
+  }
+
+  .ant-statistic {
+    .ant-statistic-title {
+      color: @primary-color;
+      font-size: 14px;
+    }
+
+    .ant-statistic-content {
+      font-size: 24px;
+      font-weight: 600;
+    }
+  }
+
+  .ant-typography {
+    margin-bottom: 16px;
+  }
+
+  .text-grey-muted {
+    color: @primary-color;
+  }
+}
+
+.label-info-wrapper {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px !important;
+
+  .info-icon {
+    color: @grey-3;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+  }
+
+  .text-grey-muted {
+    display: inline;
+  }
+}

openmetadata-ui/src/main/resources/ui/src/enums/Alerts.enum.ts

@@ -14,6 +14,7 @@
 export enum AlertDetailTabs {
   CONFIGURATION = 'configuration',
   RECENT_EVENTS = 'recentEvents',
+  DIAGNOSTIC_INFO = 'diagnostic info',
 }
 
 export enum AlertRecentEventFilters {