fix: add jobId back for sync fail events (#13709)

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
airbytehq · Sep 3, 2024 · 5eae8bd · 5eae8bd
1 parent 59dfc70
commit 5eae8bd
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 1 deletion.
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/ClearRunningItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/ClearRunningItem.tsx
@@ -4,6 +4,7 @@ import { Box } from "components/ui/Box";
 import { Text } from "components/ui/Text";
 
 import { ResetStreamsDetails } from "area/connection/components/JobHistoryItem/ResetStreamDetails";
+import { useLocalStorage } from "core/utils/useLocalStorage";
 
 import { ConnectionTimelineEventActions } from "../ConnectionTimelineEventActions";
 import { ConnectionTimelineEventIcon } from "../ConnectionTimelineEventIcon";
@@ -17,6 +18,8 @@ interface ClearRunningItemProps {
 }
 
 export const ClearRunningItem: React.FC<ClearRunningItemProps> = ({ jobId, streams, startedAt }) => {
+  const [showExtendedStats] = useLocalStorage("airbyte_extended-attempts-stats", false);
+
   return (
     <ConnectionTimelineEventItem centered>
       <ConnectionTimelineEventIcon icon="cross" running />
@@ -26,6 +29,11 @@ export const ClearRunningItem: React.FC<ClearRunningItemProps> = ({ jobId, strea
         </Text>
 
         <Box pt="xs">{streams.length > 0 && <ResetStreamsDetails names={streams} />}</Box>
+        {showExtendedStats && (
+          <Text as="span" color="grey400" size="sm">
+            <FormattedMessage id="jobs.jobId" values={{ id: jobId }} />
+          </Text>
+        )}
       </ConnectionTimelineEventSummary>
       <ConnectionTimelineEventActions createdAt={startedAt} jobId={jobId} />
     </ConnectionTimelineEventItem>

diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/JobStats.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/JobStats.tsx
@@ -64,7 +64,7 @@ export const JobStats: React.FC<JobStatsProps> = ({
   );
 };
 
-const StatSeparator = () => (
+export const StatSeparator = () => (
   <Text as="span" color="grey400" size="sm">
     |
   </Text>

diff --git a/...yte-webapp/src/pages/connections/ConnectionTimelinePage/components/RefreshRunningItem.tsx b/...yte-webapp/src/pages/connections/ConnectionTimelinePage/components/RefreshRunningItem.tsx
@@ -4,6 +4,7 @@ import { Box } from "components/ui/Box";
 import { Text } from "components/ui/Text";
 
 import { ResetStreamsDetails } from "area/connection/components/JobHistoryItem/ResetStreamDetails";
+import { useLocalStorage } from "core/utils/useLocalStorage";
 
 import { ConnectionTimelineEventActions } from "../ConnectionTimelineEventActions";
 import { ConnectionTimelineEventIcon } from "../ConnectionTimelineEventIcon";
@@ -17,6 +18,8 @@ interface RefreshRunningItemProps {
 }
 
 export const RefreshRunningItem: React.FC<RefreshRunningItemProps> = ({ jobId, streams, startedAt }) => {
+  const [showExtendedStats] = useLocalStorage("airbyte_extended-attempts-stats", false);
+
   return (
     <ConnectionTimelineEventItem centered>
       <ConnectionTimelineEventIcon icon="rotate" running />
@@ -25,6 +28,11 @@ export const RefreshRunningItem: React.FC<RefreshRunningItemProps> = ({ jobId, s
           <FormattedMessage id="connection.timeline.refresh_running" values={{ count: streams.length }} />
         </Text>
         <Box pt="xs">{streams.length > 0 && <ResetStreamsDetails names={streams} />}</Box>
+        {showExtendedStats && (
+          <Text as="span" color="grey400" size="sm">
+            <FormattedMessage id="jobs.jobId" values={{ id: jobId }} />
+          </Text>
+        )}
       </ConnectionTimelineEventSummary>
       <ConnectionTimelineEventActions createdAt={startedAt} jobId={jobId} />
     </ConnectionTimelineEventItem>

diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/SyncFailEventItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/SyncFailEventItem.tsx
@@ -6,7 +6,9 @@ import { Text } from "components/ui/Text";
 
 import { JobFailureDetails } from "area/connection/components/JobHistoryItem/JobFailureDetails";
 import { failureUiDetailsFromReason } from "core/utils/errorStatusMessage";
+import { useLocalStorage } from "core/utils/useLocalStorage";
 
+import { JobStats } from "./JobStats";
 import styles from "./SyncFailEventItem.module.scss";
 import { ConnectionTimelineEventActions } from "../ConnectionTimelineEventActions";
 import { ConnectionTimelineEventIcon } from "../ConnectionTimelineEventIcon";
@@ -20,6 +22,8 @@ interface SyncFailEventItemProps {
 }
 
 export const SyncFailEventItem: React.FC<SyncFailEventItemProps> = ({ syncEvent }) => {
+  const [showExtendedStats] = useLocalStorage("airbyte_extended-attempts-stats", false);
+
   const { formatMessage } = useIntl();
   const titleId = titleIdMap[syncEvent.eventType];
 
@@ -33,11 +37,17 @@ export const SyncFailEventItem: React.FC<SyncFailEventItemProps> = ({ syncEvent
         <Text bold>
           <FormattedMessage id={titleId} />
         </Text>
+        <JobStats {...syncEvent.summary} />
         {failureUiDetails && (
           <Box pt="xs" className={styles.details}>
             <JobFailureDetails failureUiDetails={failureUiDetails} />
           </Box>
         )}
+        {showExtendedStats && (
+          <Text as="span" color="grey400" size="sm">
+            <FormattedMessage id="jobs.jobId" values={{ id: syncEvent.summary.jobId }} />
+          </Text>
+        )}
       </ConnectionTimelineEventSummary>
       <ConnectionTimelineEventActions
         createdAt={syncEvent.createdAt}

diff --git a/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/SyncRunningItem.tsx b/airbyte-webapp/src/pages/connections/ConnectionTimelinePage/components/SyncRunningItem.tsx
@@ -2,6 +2,8 @@ import { FormattedMessage } from "react-intl";
 
 import { Text } from "components/ui/Text";
 
+import { useLocalStorage } from "core/utils/useLocalStorage";
+
 import { ConnectionTimelineEventActions } from "../ConnectionTimelineEventActions";
 import { ConnectionTimelineEventIcon } from "../ConnectionTimelineEventIcon";
 import { ConnectionTimelineEventItem } from "../ConnectionTimelineEventItem";
@@ -13,13 +15,20 @@ interface SyncRunningItemProps {
 }
 
 export const SyncRunningItem: React.FC<SyncRunningItemProps> = ({ startedAt, jobId }) => {
+  const [showExtendedStats] = useLocalStorage("airbyte_extended-attempts-stats", false);
+
   return (
     <ConnectionTimelineEventItem centered>
       <ConnectionTimelineEventIcon icon="sync" running />
       <ConnectionTimelineEventSummary>
         <Text bold>
           <FormattedMessage id="connection.timeline.sync_running" />
         </Text>
+        {showExtendedStats && (
+          <Text as="span" color="grey400" size="sm">
+            <FormattedMessage id="jobs.jobId" values={{ id: jobId }} />
+          </Text>
+        )}
       </ConnectionTimelineEventSummary>
 
       <ConnectionTimelineEventActions createdAt={startedAt} jobId={jobId} />
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,7 +64,7 @@ export const JobStats: React.FC<JobStatsProps> = ({ @@
       );
     };
-    const StatSeparator = () => (
+    export const StatSeparator = () => (
       <Text as="span" color="grey400" size="sm">
         |
       </Text>
@@ Expand Down @@