Create foundation for a controller status history view

.env

@@ -10,6 +10,8 @@ VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFz
 VITE_TASK_AUTHORIZATION_URL=https://agent-api-1084703453822.us-central1.run.app/authorize/user/task
 VITE_COLLECTION_AUTHORIZATION_URL=https://agent-api-1084703453822.us-central1.run.app/authorize/user/collection
 
+VITE_ENTITY_STATUS_BASE_URL=https://agent-api-1084703453822.us-central1.run.app/api/v1/catalog/status
+
 VITE_MARKETPLACE_VERIFY_URL=https://gcp-marketplace-verify-mo7rswd2xq-uc.a.run.app
 
 VITE_DEFAULT_DATA_PLANE_SUFFIX=gcp-us-central1-c1

.env.development.local

@@ -11,6 +11,8 @@ VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFz
 VITE_TASK_AUTHORIZATION_URL=http://localhost:8675/authorize/user/task
 VITE_COLLECTION_AUTHORIZATION_URL=http://localhost:8675/authorize/user/collection
 
+VITE_ENTITY_STATUS_BASE_URL=http://localhost:8675/api/v1/catalog/status
+
 VITE_MARKETPLACE_VERIFY_URL=http://example.com
 
 VITE_DEFAULT_DATA_PLANE_SUFFIX=local-cluster

src/api/entityStatus.ts

@@ -0,0 +1,12 @@
+import { client } from 'services/client';
+import { EntityStatusResponse } from 'types/controlPlane';
+import { getEntityStatusSettings } from 'utils/env-utils';
+
+const { entityStatusBaseEndpoint } = getEntityStatusSettings();
+
+// Local API documentation can be found here: http://localhost:8675/api/v1/docs
+export const getEntityStatus = async (
+    accessToken: string,
+    catalogName: string
+): Promise<EntityStatusResponse[]> =>
+    client(`${entityStatusBaseEndpoint}?name=${catalogName}`, {}, accessToken);

src/components/shared/CardWrapper.tsx

@@ -39,44 +39,47 @@ function CardWrapper({ children, height, message, tooltipMessageId }: Props) {
                 background: semiTransparentBackground[theme.palette.mode],
                 boxShadow: defaultBoxShadow,
                 borderRadius: 3,
+                minWidth: 'min-content',
             }}
         >
-            <Stack
-                direction="row"
-                spacing={1}
-                sx={{ mb: 2, alignItems: 'center' }}
-            >
-                {message ? (
-                    <Typography
-                        sx={{
-                            ...cardHeaderSx,
-                            mb: 2,
-                            width: '100%',
-                        }}
-                        component="div"
-                    >
-                        {message}
-                    </Typography>
-                ) : null}
-
-                {tooltipMessageId ? (
-                    <Tooltip
-                        placement={belowLg ? 'bottom' : 'right'}
-                        title={intl.formatMessage({
-                            id: 'admin.billing.graph.dataByTask.tooltip',
-                        })}
-                    >
-                        <HelpCircle
-                            style={{
-                                marginBottom: 16,
-                                fontSize: 12,
-                                strokeWidth: 1,
-                                color: theme.palette.text.primary,
+            {Boolean(message || tooltipMessageId) ? (
+                <Stack
+                    direction="row"
+                    spacing={1}
+                    sx={{ mb: 2, alignItems: 'center' }}
+                >
+                    {message ? (
+                        <Typography
+                            sx={{
+                                ...cardHeaderSx,
+                                mb: 2,
+                                width: '100%',
                             }}
-                        />
-                    </Tooltip>
-                ) : null}
-            </Stack>
+                            component="div"
+                        >
+                            {message}
+                        </Typography>
+                    ) : null}
+
+                    {tooltipMessageId ? (
+                        <Tooltip
+                            placement={belowLg ? 'bottom' : 'right'}
+                            title={intl.formatMessage({
+                                id: 'admin.billing.graph.dataByTask.tooltip',
+                            })}
+                        >
+                            <HelpCircle
+                                style={{
+                                    marginBottom: 16,
+                                    fontSize: 12,
+                                    strokeWidth: 1,
+                                    color: theme.palette.text.primary,
+                                }}
+                            />
+                        </Tooltip>
+                    ) : null}
+                </Stack>
+            ) : null}
 
             {children}
         </Box>

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

@@ -0,0 +1,42 @@
+import { Skeleton, Typography } from '@mui/material';
+import useGlobalSearchParams, {
+    GlobalSearchParams,
+} from 'hooks/searchParams/useGlobalSearchParams';
+import { useIntl } from 'react-intl';
+import {
+    useEntityStatusStore_lastActivated,
+    useEntityStatusStore_singleResponse,
+} from 'stores/EntityStatus/hooks';
+import { useEntityStatusStore } from 'stores/EntityStatus/Store';
+import { getDataPlaneActivationStatus } from 'utils/entityStatus-utils';
+import DetailWrapper from './DetailWrapper';
+import { BaseDetailProps } from './types';
+
+export default function ActivationDetail({ headerMessageId }: BaseDetailProps) {
+    const catalogName = useGlobalSearchParams(GlobalSearchParams.CATALOG_NAME);
+
+    const intl = useIntl();
+
+    const hydrating = useEntityStatusStore((state) => !state.hydrated);
+    const lastActivated = useEntityStatusStore_lastActivated(catalogName);
+    const lastBuildId =
+        useEntityStatusStore_singleResponse(catalogName)?.last_build_id;
+
+    const contentMessageId = getDataPlaneActivationStatus(
+        lastActivated,
+        lastBuildId
+    );
+
+    return (
+        <DetailWrapper
+            headerMessageId={headerMessageId}
+            Hydrating={
+                hydrating ? <Skeleton height={21} width={75} /> : undefined
+            }
+        >
+            <Typography>
+                {intl.formatMessage({ id: contentMessageId })}
+            </Typography>
+        </DetailWrapper>
+    );
+}

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

@@ -0,0 +1,32 @@
+import { Divider, Stack } from '@mui/material';
+import NumberDetail from './NumberDetail';
+import { AutoDiscoverChangesProps } from './types';
+
+export default function AutoDiscoverChanges({
+    added,
+    modified,
+    removed,
+}: AutoDiscoverChangesProps) {
+    return (
+        <Stack direction="row" spacing={1}>
+            <NumberDetail
+                headerMessageId="details.ops.status.overview.autoDiscovery.subheaderAdded"
+                value={added?.length ?? 0}
+            />
+
+            <Divider flexItem orientation="vertical" />
+
+            <NumberDetail
+                headerMessageId="details.ops.status.overview.autoDiscovery.subheaderModified"
+                value={modified?.length ?? 0}
+            />
+
+            <Divider flexItem orientation="vertical" />
+
+            <NumberDetail
+                headerMessageId="details.ops.status.overview.autoDiscovery.subheaderRemoved"
+                value={removed?.length ?? 0}
+            />
+        </Stack>
+    );
+}

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

@@ -0,0 +1,49 @@
+import useGlobalSearchParams, {
+    GlobalSearchParams,
+} from 'hooks/searchParams/useGlobalSearchParams';
+import {
+    useEntityStatusStore_autoDiscoverFailure,
+    useEntityStatusStore_autoDiscoverLastSuccess,
+} from 'stores/EntityStatus/hooks';
+import AutoDiscoverChanges from './AutoDiscoverChanges';
+import TimestampDetail from './TimestampDetail';
+
+export default function AutoDiscoverOutcome() {
+    const catalogName = useGlobalSearchParams(GlobalSearchParams.CATALOG_NAME);
+
+    const failure = useEntityStatusStore_autoDiscoverFailure(catalogName);
+    const lastSuccess =
+        useEntityStatusStore_autoDiscoverLastSuccess(catalogName);
+
+    if (failure) {
+        return (
+            <>
+                <AutoDiscoverChanges
+                    added={failure.last_outcome.added}
+                    modified={failure.last_outcome.modified}
+                    removed={failure.last_outcome.removed}
+                />
+
+                <TimestampDetail
+                    headerMessageId="details.ops.status.overview.autoDiscovery.subheaderLastFailure"
+                    time={failure.last_outcome.ts}
+                />
+            </>
+        );
+    }
+
+    return (
+        <>
+            <AutoDiscoverChanges
+                added={lastSuccess?.added}
+                modified={lastSuccess?.modified}
+                removed={lastSuccess?.removed}
+            />
+
+            <TimestampDetail
+                headerMessageId="details.ops.status.overview.autoDiscovery.subheaderLastSuccess"
+                time={lastSuccess?.ts}
+            />
+        </>
+    );
+}

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

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

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

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

src/components/shared/Entity/Details/Logs/Status/Overview/ControllerOverview.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 ActivationDetail from './ActivationDetail';
+import ControllerStatus from './ControllerStatus';
+import ControllerUpdatedDetail from './ControllerUpdatedDetail';
+
+export default function ControllerOverview() {
+    const intl = useIntl();
+
+    return (
+        <Grid item xs={12} md={6} lg={3}>
+            <CardWrapper>
+                <Stack
+                    direction="row"
+                    style={{ marginBottom: 16, marginLeft: -4 }}
+                >
+                    <ControllerStatus />
+
+                    <Typography component="div" sx={{ ...cardHeaderSx, mr: 3 }}>
+                        {intl.formatMessage({
+                            id: 'details.ops.status.overview.controller.header',
+                        })}
+                    </Typography>
+                </Stack>
+
+                <Stack spacing={2} style={{ marginLeft: 14 }}>
+                    <ActivationDetail headerMessageId="details.ops.status.overview.controller.subheaderActivation" />
+
+                    <ControllerUpdatedDetail headerMessageId="details.ops.status.overview.controller.subheaderLastUpdated" />
+                </Stack>
+            </CardWrapper>
+        </Grid>
+    );
+}

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

@@ -0,0 +1,27 @@
+import { useTheme } from '@mui/material';
+import useGlobalSearchParams, {
+    GlobalSearchParams,
+} from 'hooks/searchParams/useGlobalSearchParams';
+import { useEntityStatusStore_singleResponse } from 'stores/EntityStatus/hooks';
+import { getControllerStatusIndicatorState } from 'utils/entityStatus-utils';
+import StatusIndicator from './StatusIndicator';
+
+export default function ControllerStatus() {
+    const catalogName = useGlobalSearchParams(GlobalSearchParams.CATALOG_NAME);
+
+    const theme = useTheme();
+
+    const controllerError =
+        useEntityStatusStore_singleResponse(catalogName)?.controller_error;
+
+    const controllerNextRun =
+        useEntityStatusStore_singleResponse(catalogName)?.controller_next_run;
+
+    const status = getControllerStatusIndicatorState(
+        theme.palette.mode,
+        controllerError,
+        controllerNextRun
+    );
+
+    return <StatusIndicator status={status} />;
+}

src/components/shared/Entity/Details/Logs/Status/Overview/ControllerUpdatedDetail.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 ControllerUpdatedDetail({
+    headerMessageId,
+}: BaseDetailProps) {
+    const catalogName = useGlobalSearchParams(GlobalSearchParams.CATALOG_NAME);
+
+    const lastUpdated =
+        useEntityStatusStore_singleResponse(catalogName)?.controller_updated_at;
+
+    return (
+        <TimestampDetail headerMessageId={headerMessageId} time={lastUpdated} />
+    );
+}