Add connector status overview to entity details page

src/components/shared/Entity/Details/Logs/Status/Overview/ConnectorOverview.tsx

@@ -0,0 +1,36 @@
+import { Grid, Stack, Typography } from '@mui/material';
+import CardWrapper from 'components/shared/CardWrapper';
+import { cardHeaderSx } from 'context/Theme';
+import { useIntl } from 'react-intl';
+import ConnectorStatus from './ConnectorStatus';
+import ConnectorStatusDetail from './ConnectorStatusDetail';
+import ConnectorUpdatedDetail from './ConnectorUpdatedDetail';
+
+export default function ConnectorOverview() {
+    const intl = useIntl();
+
+    return (
+        <Grid item xs={12} md={6} lg={3}>
+            <CardWrapper>
+                <Stack
+                    direction="row"
+                    style={{ marginBottom: 16, marginLeft: -4 }}
+                >
+                    <ConnectorStatus />
+
+                    <Typography component="div" sx={{ ...cardHeaderSx, mr: 3 }}>
+                        {intl.formatMessage({
+                            id: 'details.ops.status.overview.connector.header',
+                        })}
+                    </Typography>
+                </Stack>
+
+                <Stack spacing={2} style={{ marginLeft: 14 }}>
+                    <ConnectorStatusDetail headerMessageId="details.ops.status.overview.connector.subheaderLastStatus" />
+
+                    <ConnectorUpdatedDetail headerMessageId="details.ops.status.overview.generic.subheaderLastUpdated" />
+                </Stack>
+            </CardWrapper>
+        </Grid>
+    );
+}

src/components/shared/Entity/Details/Logs/Status/Overview/ConnectorStatus.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from '@mui/material';
+import useGlobalSearchParams, {
+    GlobalSearchParams,
+} from 'hooks/searchParams/useGlobalSearchParams';
+import { useEntityStatusStore_singleResponse } from 'stores/EntityStatus/hooks';
+import { getConnectorStatusIndicatorState } from 'utils/entityStatus-utils';
+import StatusIndicator from './StatusIndicator';
+
+export default function ConnectorStatus() {
+    const catalogName = useGlobalSearchParams(GlobalSearchParams.CATALOG_NAME);
+
+    const theme = useTheme();
+
+    const connectorStatus =
+        useEntityStatusStore_singleResponse(catalogName)?.connector_status;
+
+    const status = getConnectorStatusIndicatorState(
+        theme.palette.mode,
+        connectorStatus
+    );
+
+    return <StatusIndicator status={status} />;
+}

src/components/shared/Entity/Details/Logs/Status/Overview/ConnectorStatusDetail.tsx

@@ -0,0 +1,31 @@
+import { Skeleton, Typography } from '@mui/material';
+import useGlobalSearchParams, {
+    GlobalSearchParams,
+} from 'hooks/searchParams/useGlobalSearchParams';
+import { useEntityStatusStore_singleResponse } from 'stores/EntityStatus/hooks';
+import { useEntityStatusStore } from 'stores/EntityStatus/Store';
+import DetailWrapper from './DetailWrapper';
+import { BaseDetailProps } from './types';
+
+export default function ConnectorStatusDetail({
+    headerMessageId,
+}: BaseDetailProps) {
+    const catalogName = useGlobalSearchParams(GlobalSearchParams.CATALOG_NAME);
+
+    const hydrating = useEntityStatusStore((state) => !state.hydrated);
+
+    const lastStatus =
+        useEntityStatusStore_singleResponse(catalogName)?.connector_status
+            ?.message;
+
+    return (
+        <DetailWrapper
+            headerMessageId={headerMessageId}
+            Hydrating={
+                hydrating ? <Skeleton height={21} width={75} /> : undefined
+            }
+        >
+            <Typography> {lastStatus ?? '--'} </Typography>
+        </DetailWrapper>
+    );
+}

src/components/shared/Entity/Details/Logs/Status/Overview/ConnectorUpdatedDetail.tsx

@@ -0,0 +1,19 @@
+import useGlobalSearchParams, {
+    GlobalSearchParams,
+} from 'hooks/searchParams/useGlobalSearchParams';
+import { useEntityStatusStore_singleResponse } from 'stores/EntityStatus/hooks';
+import TimestampDetail from './TimestampDetail';
+import { BaseDetailProps } from './types';
+
+export default function ConnectorUpdatedDetail({
+    headerMessageId,
+}: BaseDetailProps) {
+    const catalogName = useGlobalSearchParams(GlobalSearchParams.CATALOG_NAME);
+
+    const lastUpdated =
+        useEntityStatusStore_singleResponse(catalogName)?.connector_status?.ts;
+
+    return (
+        <TimestampDetail headerMessageId={headerMessageId} time={lastUpdated} />
+    );
+}

src/components/shared/Entity/Details/Logs/Status/Overview/ControllerOverview.tsx

@@ -28,7 +28,7 @@ export default function ControllerOverview() {
                 <Stack spacing={2} style={{ marginLeft: 14 }}>
                     <ActivationDetail headerMessageId="details.ops.status.overview.controller.subheaderActivation" />
 
-                    <ControllerUpdatedDetail headerMessageId="details.ops.status.overview.controller.subheaderLastUpdated" />
+                    <ControllerUpdatedDetail headerMessageId="details.ops.status.overview.generic.subheaderLastUpdated" />
                 </Stack>
             </CardWrapper>
         </Grid>

src/components/shared/Entity/Details/Logs/Status/Overview/index.tsx

@@ -1,6 +1,7 @@
 import { Grid, useMediaQuery, useTheme } from '@mui/material';
 import { useEntityType } from 'context/EntityContext';
 import AutoDiscoveryOverview from './AutoDiscoveryOverview';
+import ConnectorOverview from './ConnectorOverview';
 import ControllerOverview from './ControllerOverview';
 
 const GRID_ITEM_SELECTOR = '.MuiGrid-item';
@@ -25,6 +26,8 @@ export default function Overview() {
                 },
             }}
         >
+            <ConnectorOverview />
+
             <ControllerOverview />
 
             {entityType === 'capture' ? <AutoDiscoveryOverview /> : null}

src/lang/en-US/Details.ts

@@ -19,9 +19,11 @@ export const Details: Record<string, string> = {
     'details.ops.status.overview.autoDiscovery.subheaderAdded': `Added`,
     'details.ops.status.overview.autoDiscovery.subheaderModified': `Modified`,
     'details.ops.status.overview.autoDiscovery.subheaderRemoved': `Removed`,
+    'details.ops.status.overview.connector.header': `Connector`,
+    'details.ops.status.overview.connector.subheaderLastStatus': `Status`,
     'details.ops.status.overview.controller.header': `Controller`,
     'details.ops.status.overview.controller.subheaderActivation': `Data Plane Activation`,
-    'details.ops.status.overview.controller.subheaderLastUpdated': `Last Updated`,
+    'details.ops.status.overview.generic.subheaderLastUpdated': `Last Updated`,
     'details.ops.status.overview.menuLabel.details': `View details`,
     'details.ops.status.overview.menuLabel.troubleshoot': `Contact support`,
     'details.ops.status.table.label': `Controller Status History Table`,

src/types/controlPlane.ts

@@ -47,6 +47,13 @@ export interface CollectionControllerStatus extends EntityControllerStatus {
     inferred_schema?: InferredSchemaStatus | null;
 }
 
+interface ConnectorStatus {
+    message: string;
+    shard: ShardRef;
+    ts: string;
+    fields?: object;
+}
+
 interface DiscoverChange {
     disable: boolean;
     resource_path: string[];
@@ -61,6 +68,7 @@ export interface EntityControllerStatus extends PublicationControllerStatus {
 
 export interface EntityStatusResponse {
     catalog_name: string;
+    connector_status: ConnectorStatus | null;
     controller_failures: number;
     controller_next_run: string | null;
     controller_updated_at: string;
@@ -122,6 +130,13 @@ interface PublicationStatus {
     max_observed_pub_id?: string;
 }
 
+interface ShardRef {
+    build: string;
+    keyBegin: string;
+    name: string;
+    rClockBegin: string;
+}
+
 interface SourceCaptureStatus {
     add_bindings?: string[];
     up_to_date?: boolean;

src/utils/entityStatus-utils.ts

@@ -135,6 +135,26 @@ export const getAutoDiscoveryIndicatorState = (
     };
 };
 
+export const getConnectorStatusIndicatorState = (
+    _colorMode: PaletteMode,
+    connectorStatus: EntityStatusResponse['connector_status'] | undefined
+): StatusIndicatorState => {
+    if (!connectorStatus) {
+        return {
+            color: { hex: warningMain, id: 'warning' },
+            messageId: 'status.error.medium',
+        };
+    }
+
+    return {
+        color: {
+            hex: successMain,
+            id: 'success',
+        },
+        messageId: 'status.error.low',
+    };
+};
+
 export const isEntityControllerStatus = (
     value: ControllerStatus
 ): value is EntityControllerStatus =>