Skip to content

feat: timestamps on notes and ops #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kentbull merged 1 commit into from
Apr 22, 2026
Merged

feat: timestamps on notes and ops #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 46 additions & 2 deletions src/app/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import MenuIcon from '@mui/icons-material/Menu';
import NotificationsIcon from '@mui/icons-material/Notifications';
import { Link as RouterLink } from 'react-router-dom';
import { StatusPill } from './Console';
import { formatOperationWindow, formatTimestamp } from './timeFormat';
import type { AppNotificationRecord } from '../state/appNotifications.slice';
import type { OperationRecord } from '../state/operations.slice';
import { allAppNotificationsRead } from '../state/appNotifications.slice';
Expand Down Expand Up @@ -238,7 +239,28 @@ export const TopBar = ({
>
<ListItemText
primary={operation.title}
secondary={operation.phase}
secondary={
<Box>
<Typography
variant="body2"
color="text.secondary"
>
{operation.phase}
</Typography>
{formatOperationWindow(
operation
) !== null && (
<Typography
variant="caption"
color="text.secondary"
>
{formatOperationWindow(
operation
)}
</Typography>
)}
</Box>
}
/>
</ListItemButton>
))
Expand Down Expand Up @@ -293,7 +315,29 @@ export const TopBar = ({
>
<ListItemText
primary={notification.title}
secondary={notification.message}
secondary={
<Box>
{formatTimestamp(
notification.createdAt
) !== null && (
<Typography
variant="caption"
color="text.secondary"
>
Created{' '}
{formatTimestamp(
notification.createdAt
)}
</Typography>
)}
<Typography
variant="body2"
color="text.secondary"
>
{notification.message}
</Typography>
</Box>
}
/>
</ListItemButton>
))
Expand Down
27 changes: 23 additions & 4 deletions src/app/runtime.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import { sessionDisconnected } from '../state/session.slice';
import { appStore, type AppStore } from '../state/store';
import {
createIdentifierOp,
getIdentifierOp,
listIdentifiersOp,
rotateIdentifierOp,
} from '../workflows/identifiers.op';
Expand Down Expand Up @@ -198,7 +199,8 @@ const abortError = (signal?: AbortSignal): Error => {
return error;
};

const operationRoute = (requestId: string): string => `/operations/${requestId}`;
const operationRoute = (requestId: string): string =>
`/operations/${requestId}`;

const notificationId = (requestId: string): string =>
`notification-${requestId}-${Date.now()}`;
Expand Down Expand Up @@ -419,6 +421,20 @@ export class AppRuntime {
kind: options.kind ?? 'listIdentifiers',
});

/**
* Fetch one identifier by alias or prefix and merge richer state into Redux.
*/
getIdentifier = async (
aid: string,
options: WorkflowRunOptions = {}
): Promise<IdentifierSummary> =>
this.runWorkflow(() => getIdentifierOp(aid), {
...options,
label: options.label,
kind: options.kind ?? 'listIdentifiers',
track: options.track ?? false,
});

/**
* Create an identifier, wait for the resulting KERIA operation, then return
* a freshly loaded identifier list for router revalidation callers.
Expand Down Expand Up @@ -458,7 +474,8 @@ export class AppRuntime {
requestId: options.requestId,
label: `Creating identifier ${name}`,
title: `Create identifier ${name}`,
description: 'Creates a managed identifier and waits for KERIA completion.',
description:
'Creates a managed identifier and waits for KERIA completion.',
kind: 'createIdentifier',
resourceKeys: [`identifier:name:${name}`],
resultRoute: { label: 'View identifiers', path: '/identifiers' },
Expand All @@ -483,7 +500,8 @@ export class AppRuntime {
requestId: options.requestId,
label: `Rotating identifier ${aid}`,
title: `Rotate identifier ${aid}`,
description: 'Rotates a managed identifier and waits for KERIA completion.',
description:
'Rotates a managed identifier and waits for KERIA completion.',
kind: 'rotateIdentifier',
resourceKeys: [`identifier:aid:${aid}`],
resultRoute: { label: 'View identifiers', path: '/identifiers' },
Expand Down Expand Up @@ -707,7 +725,8 @@ export class AppRuntime {
const notification: AppNotificationRecord = {
id,
severity:
template.severity ?? (outcome === 'success' ? 'success' : 'error'),
template.severity ??
(outcome === 'success' ? 'success' : 'error'),
status: 'unread',
title: template.title,
message:
Expand Down
36 changes: 36 additions & 0 deletions src/app/timeFormat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
export const formatTimestamp = (
value: string | null | undefined
): string | null => {
if (value === null || value === undefined || value.trim().length === 0) {
return null;
}

const date = new Date(value);
if (Number.isNaN(date.getTime())) {
return value;
}

return new Intl.DateTimeFormat(undefined, {
dateStyle: 'medium',
timeStyle: 'medium',
}).format(date);
};

export const formatOperationWindow = ({
startedAt,
finishedAt,
}: {
startedAt: string | null | undefined;
finishedAt?: string | null;
}): string | null => {
const started = formatTimestamp(startedAt);
const finished = formatTimestamp(finishedAt);

if (started === null) {
return null;
}

return finished === null
? `Started ${started}`
: `Started ${started} | Ended ${finished}`;
};
36 changes: 31 additions & 5 deletions src/features/identifiers/IdentifierDetailsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ import {
export interface IdentifierDetailsModalProps {
open: boolean;
identifier: IdentifierSummary | null;
refreshStatus: 'idle' | 'loading' | 'success' | 'error';
refreshMessage: string | null;
actionRunning: boolean;
onClose: () => void;
onRotate: (name: string) => void;
Expand Down Expand Up @@ -205,15 +207,22 @@ const JsonCodeBlock = ({ value }: { value: string }) => (
export const IdentifierDetailsModal = ({
open,
identifier,
refreshStatus,
refreshMessage,
actionRunning,
onClose,
onRotate,
}: IdentifierDetailsModalProps) => {
const currentKeys = identifier === null ? [] : identifierCurrentKeys(identifier);
const currentKeys =
identifier === null ? [] : identifierCurrentKeys(identifier);
const currentKey =
identifier === null
? identifierUnavailableValue
: (identifierCurrentKey(identifier) ?? identifierUnavailableValue);
const currentKeyDisplay =
refreshStatus === 'loading' && currentKey === identifierUnavailableValue
? 'Loading from KERIA...'
: currentKey;
const additionalKeyCount = Math.max(currentKeys.length - 1, 0);

return (
Expand Down Expand Up @@ -252,7 +261,9 @@ export const IdentifierDetailsModal = ({
>
<DetailField
label="Name"
value={identifier?.name ?? identifierUnavailableValue}
value={
identifier?.name ?? identifierUnavailableValue
}
footprint="medium"
tone="identity"
/>
Expand All @@ -276,12 +287,19 @@ export const IdentifierDetailsModal = ({
/>
<DetailField
label="Current Key"
value={currentKey}
value={currentKeyDisplay}
mono
footprint="wide"
tone="key"
accessory={
additionalKeyCount > 0 ? (
refreshStatus === 'loading' ? (
<Chip
size="small"
label="refreshing"
color="info"
variant="outlined"
/>
) : additionalKeyCount > 0 ? (
<Chip
size="small"
label={`+${additionalKeyCount} more`}
Expand Down Expand Up @@ -326,13 +344,21 @@ export const IdentifierDetailsModal = ({
tone="metric"
/>
</Box>
{refreshStatus === 'error' && refreshMessage !== null && (
<Typography color="error">
Unable to refresh identifier details:{' '}
{refreshMessage}
</Typography>
)}
{identifier !== null && (
<Accordion disableGutters>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>Advanced JSON</Typography>
</AccordionSummary>
<AccordionDetails>
<JsonCodeBlock value={identifierJson(identifier)} />
<JsonCodeBlock
value={identifierJson(identifier)}
/>
</AccordionDetails>
</Accordion>
)}
Expand Down
58 changes: 53 additions & 5 deletions src/features/identifiers/IdentifiersView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { Box, Button, Fab, Typography } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import { useFetcher, useLoaderData } from 'react-router-dom';
import { ConnectionRequired } from '../../app/ConnectionRequired';
import { EmptyState, PageHeader, StatusPill } from '../../app/Console';
import { useAppRuntime } from '../../app/runtimeHooks';
import type {
IdentifierActionData,
IdentifiersLoaderData,
Expand All @@ -15,6 +16,7 @@ import {
idleIdentifierAction,
type IdentifierActionState,
type IdentifierCreateDraft,
type IdentifierSummary,
} from './identifierTypes';
import { useAppSelector } from '../../state/hooks';
import {
Expand All @@ -32,6 +34,7 @@ import {
export const IdentifiersView = () => {
const loaderData = useLoaderData() as IdentifiersLoaderData;
const fetcher = useFetcher<IdentifierActionData>();
const runtime = useAppRuntime();
const [selectedIdentifierName, setSelectedIdentifierName] = useState<
string | null
>(null);
Expand All @@ -40,6 +43,10 @@ export const IdentifiersView = () => {
string | null
>(null);
const [pendingMessage, setPendingMessage] = useState<string | null>(null);
const [detailRefresh, setDetailRefresh] = useState<{
status: 'idle' | 'loading' | 'success' | 'error';
message: string | null;
}>({ status: 'idle', message: null });
const actionRunning = fetcher.state !== 'idle';
const liveIdentifiers = useAppSelector(selectIdentifiers);
const activeOperations = useAppSelector(selectActiveOperations);
Expand All @@ -65,6 +72,40 @@ export const IdentifiersView = () => {
(identifier) => identifier.name === selectedIdentifierName
) ?? null);

useEffect(() => {
if (selectedIdentifierName === null) {
return undefined;
}

const controller = new AbortController();

void runtime
.getIdentifier(selectedIdentifierName, {
signal: controller.signal,
track: false,
})
.then(() => {
if (!controller.signal.aborted) {
setDetailRefresh({ status: 'success', message: null });
}
})
.catch((error: unknown) => {
if (controller.signal.aborted) {
return;
}

setDetailRefresh({
status: 'error',
message:
error instanceof Error ? error.message : String(error),
});
});

return () => {
controller.abort();
};
}, [runtime, selectedIdentifierName]);

if (loaderData.status === 'blocked') {
return <ConnectionRequired />;
}
Expand Down Expand Up @@ -133,6 +174,10 @@ export const IdentifiersView = () => {
setActiveCreateRequestId(null);
setCreateOpen(true);
};
const handleSelectIdentifier = (identifier: IdentifierSummary) => {
setDetailRefresh({ status: 'loading', message: null });
setSelectedIdentifierName(identifier.name);
};

return (
<Box sx={{ display: 'grid', gap: 2.5 }}>
Expand Down Expand Up @@ -215,9 +260,7 @@ export const IdentifiersView = () => {
)}
<IdentifierTable
identifiers={identifiers}
onSelect={(identifier) =>
setSelectedIdentifierName(identifier.name)
}
onSelect={handleSelectIdentifier}
onRotate={handleRotate}
isRotateDisabled={(identifier) =>
isRotateDisabled(identifier.name)
Expand All @@ -229,12 +272,17 @@ export const IdentifiersView = () => {
selectedIdentifier !== null
}
identifier={selectedIdentifier}
refreshStatus={detailRefresh.status}
refreshMessage={detailRefresh.message}
actionRunning={
selectedIdentifierName === null
? false
: isRotateDisabled(selectedIdentifierName)
}
onClose={() => setSelectedIdentifierName(null)}
onClose={() => {
setSelectedIdentifierName(null);
setDetailRefresh({ status: 'idle', message: null });
}}
onRotate={handleRotate}
/>
{createDialogOpen && (
Expand Down
Loading
Loading