Add connector status overview to entity details page (#1535)

* Placeholder: create connector status overview card

* Create connector status overview card

* Hide entity status section for non-support users

* Consolidate last updated status overview subheading ids

* Add comment contextualizing the connector status indicator state

* Fix linting issues after merging with main

* Hide connector status overview card for collections

Author: kiahna-tucker

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

@@ -0,0 +1,38 @@
+import { Grid, Stack, Typography } from '@mui/material';
+
+import { useIntl } from 'react-intl';
+
+import CardWrapper from 'src/components/shared/CardWrapper';
+import ConnectorStatus from 'src/components/shared/Entity/Details/Logs/Status/Overview/ConnectorStatus';
+import ConnectorStatusDetail from 'src/components/shared/Entity/Details/Logs/Status/Overview/ConnectorStatusDetail';
+import ConnectorUpdatedDetail from 'src/components/shared/Entity/Details/Logs/Status/Overview/ConnectorUpdatedDetail';
+import { cardHeaderSx } from 'src/context/Theme';
+
+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>
+    );
+}

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

@@ -0,0 +1,24 @@
+import { useTheme } from '@mui/material';
+
+import StatusIndicator from 'src/components/shared/Entity/Details/Logs/Status/Overview/StatusIndicator';
+import useGlobalSearchParams, {
+    GlobalSearchParams,
+} from 'src/hooks/searchParams/useGlobalSearchParams';
+import { useEntityStatusStore_singleResponse } from 'src/stores/EntityStatus/hooks';
+import { getConnectorStatusIndicatorState } from 'src/utils/entityStatus-utils';
+
+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} />;
+}

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

@@ -0,0 +1,33 @@
+import type { BaseDetailProps } from 'src/components/shared/Entity/Details/Logs/Status/Overview/types';
+
+import { Skeleton, Typography } from '@mui/material';
+
+import DetailWrapper from 'src/components/shared/Entity/Details/Logs/Status/Overview/DetailWrapper';
+import useGlobalSearchParams, {
+    GlobalSearchParams,
+} from 'src/hooks/searchParams/useGlobalSearchParams';
+import { useEntityStatusStore_singleResponse } from 'src/stores/EntityStatus/hooks';
+import { useEntityStatusStore } from 'src/stores/EntityStatus/Store';
+
+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>
+    );
+}

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

@@ -0,0 +1,20 @@
+import type { BaseDetailProps } from 'src/components/shared/Entity/Details/Logs/Status/Overview/types';
+
+import TimestampDetail from 'src/components/shared/Entity/Details/Logs/Status/Overview/TimestampDetail';
+import useGlobalSearchParams, {
+    GlobalSearchParams,
+} from 'src/hooks/searchParams/useGlobalSearchParams';
+import { useEntityStatusStore_singleResponse } from 'src/stores/EntityStatus/hooks';
+
+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} />
+    );
+}

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

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

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

@@ -1,5 +1,6 @@
 import { Grid, useMediaQuery, useTheme } from '@mui/material';
 
+import ConnectorOverview from 'src/components/shared/Entity/Details/Logs/Status/Overview//ConnectorOverview';
 import AutoDiscoveryOverview from 'src/components/shared/Entity/Details/Logs/Status/Overview/AutoDiscoveryOverview';
 import ControllerOverview from 'src/components/shared/Entity/Details/Logs/Status/Overview/ControllerOverview';
 import { useEntityType } from 'src/context/EntityContext';
@@ -26,6 +27,8 @@ export default function Overview() {
                 },
             }}
         >
+            {entityType === 'collection' ? null : <ConnectorOverview />}
+
             <ControllerOverview />
 
             {entityType === 'capture' ? <AutoDiscoveryOverview /> : null}

Diff for: src/lang/en-US/Details.ts

@@ -21,9 +21,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`,

Diff for: 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;

Diff for: src/utils/entityStatus-utils.ts

@@ -136,6 +136,32 @@ export const getAutoDiscoveryIndicatorState = (
     };
 };
 
+// This logic is bound to change and, more or less, functions as a placeholder. According to Phil,
+// a null connector_status could be indicative of one of three things:
+//   * A connector status has not come through yet.
+//   * The task is not working.
+//   * The ops catalog is not working.
+
+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 =>