576 lines
22 KiB
TypeScript
576 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
import {
|
|
OperationsRole,
|
|
OpsAction,
|
|
OpsActionType,
|
|
OpsActionState,
|
|
OpsActionCapabilities,
|
|
OpsActionsResponse,
|
|
} from './types';
|
|
|
|
interface OperationsActionsProps {
|
|
role: OperationsRole;
|
|
onActionCompleted?: () => void;
|
|
}
|
|
|
|
const ACTION_CONFIGS: Record<
|
|
OpsActionType,
|
|
{
|
|
title: string;
|
|
description: string;
|
|
icon: string;
|
|
destructive: boolean;
|
|
requiredConfirmation?: string;
|
|
}
|
|
> = {
|
|
deploy_website: {
|
|
title: 'Deploy Website',
|
|
description: 'Pulls latest master commit, builds Next.js production bundle, verifies health, and updates current symlink with automatic rollback.',
|
|
icon: 'rocket_launch',
|
|
destructive: false,
|
|
},
|
|
restart_website: {
|
|
title: 'Restart Website',
|
|
description: 'Gracefully restarts the motorsignal-website systemd service and verifies /api/version ingress readiness.',
|
|
icon: 'restart_alt',
|
|
destructive: false,
|
|
},
|
|
restart_api: {
|
|
title: 'Restart API',
|
|
description: 'Initiates detached systemd restart of motorsignal-api. In-flight requests may terminate. Type confirmation below.',
|
|
icon: 'sync_problem',
|
|
destructive: true,
|
|
requiredConfirmation: 'RESTART API',
|
|
},
|
|
reboot_server: {
|
|
title: 'Reboot Host Server',
|
|
description: 'Schedules full host server reboot. All services, website, and API traffic will be temporarily unavailable. Type confirmation below.',
|
|
icon: 'power_settings_new',
|
|
destructive: true,
|
|
requiredConfirmation: 'REBOOT MOTORSIGNAL SERVER',
|
|
},
|
|
};
|
|
|
|
const ACTIVE_STATES: OpsActionState[] = [
|
|
'queued',
|
|
'preflight',
|
|
'running',
|
|
'verifying',
|
|
'rollback_running',
|
|
];
|
|
|
|
export function OperationsActions({ role, onActionCompleted }: OperationsActionsProps) {
|
|
const [capabilities, setCapabilities] = useState<OpsActionCapabilities | null>(null);
|
|
const [actions, setActions] = useState<OpsAction[]>([]);
|
|
const [activeAction, setActiveAction] = useState<OpsAction | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [historyError, setHistoryError] = useState<string | null>(null);
|
|
|
|
// Modal State
|
|
const [modalActionType, setModalActionType] = useState<OpsActionType | null>(null);
|
|
const [confirmationInput, setConfirmationInput] = useState('');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [submitError, setSubmitError] = useState<string | null>(null);
|
|
|
|
const pollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
const isOwner = role === 'owner';
|
|
|
|
// Fetch capabilities & recent action history
|
|
const fetchActions = useCallback(async () => {
|
|
try {
|
|
const resp = await fetch('/api/ops/actions?limit=10', {
|
|
headers: { accept: 'application/json' },
|
|
cache: 'no-store',
|
|
});
|
|
if (resp.ok) {
|
|
const data: OpsActionsResponse = await resp.json();
|
|
setActions(data.actions || []);
|
|
setHistoryError(null);
|
|
|
|
// Check if there is an active action
|
|
const active = (data.actions || []).find((a) =>
|
|
ACTIVE_STATES.includes(a.state)
|
|
);
|
|
setActiveAction(active || null);
|
|
} else {
|
|
setHistoryError('Unable to load operations action history.');
|
|
}
|
|
} catch {
|
|
setHistoryError('Network error connecting to operations actions platform.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
const fetchCapabilities = useCallback(async () => {
|
|
try {
|
|
const resp = await fetch('/api/ops/actions/capabilities', {
|
|
headers: { accept: 'application/json' },
|
|
cache: 'no-store',
|
|
});
|
|
if (resp.ok) {
|
|
const data: OpsActionCapabilities = await resp.json();
|
|
setCapabilities(data);
|
|
}
|
|
} catch {
|
|
// Non-blocking
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
void fetchCapabilities();
|
|
void fetchActions();
|
|
}, [fetchCapabilities, fetchActions]);
|
|
|
|
// Polling when an action is active
|
|
useEffect(() => {
|
|
let isCancelled = false;
|
|
|
|
if (activeAction) {
|
|
const poll = async () => {
|
|
try {
|
|
const resp = await fetch(`/api/ops/actions/${encodeURIComponent(activeAction.id)}`, {
|
|
headers: { accept: 'application/json' },
|
|
cache: 'no-store',
|
|
});
|
|
if (resp.ok && !isCancelled) {
|
|
const updated: OpsAction = await resp.json();
|
|
if (!ACTIVE_STATES.includes(updated.state)) {
|
|
setActiveAction(null);
|
|
void fetchActions();
|
|
if (onActionCompleted) onActionCompleted();
|
|
return;
|
|
} else {
|
|
setActiveAction(updated);
|
|
}
|
|
}
|
|
} catch {
|
|
// Non-blocking error
|
|
}
|
|
|
|
if (!isCancelled) {
|
|
pollTimeoutRef.current = setTimeout(() => {
|
|
void poll();
|
|
}, 2500);
|
|
}
|
|
};
|
|
|
|
pollTimeoutRef.current = setTimeout(() => {
|
|
void poll();
|
|
}, 2500);
|
|
}
|
|
|
|
return () => {
|
|
isCancelled = true;
|
|
if (pollTimeoutRef.current) {
|
|
clearTimeout(pollTimeoutRef.current);
|
|
pollTimeoutRef.current = null;
|
|
}
|
|
};
|
|
}, [activeAction, fetchActions, onActionCompleted]);
|
|
|
|
const handleOpenModal = (actionType: OpsActionType) => {
|
|
if (!isOwner || activeAction) return;
|
|
setModalActionType(actionType);
|
|
setConfirmationInput('');
|
|
setSubmitError(null);
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setModalActionType(null);
|
|
setConfirmationInput('');
|
|
setSubmitError(null);
|
|
};
|
|
|
|
const handleSubmitAction = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!modalActionType || !isOwner || isSubmitting) return;
|
|
|
|
const config = ACTION_CONFIGS[modalActionType];
|
|
if (
|
|
config.requiredConfirmation &&
|
|
confirmationInput.trim() !== config.requiredConfirmation
|
|
) {
|
|
setSubmitError(`Please type exact confirmation text: "${config.requiredConfirmation}"`);
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
setSubmitError(null);
|
|
|
|
const idempotencyKey = `ops-action-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
|
|
|
try {
|
|
const resp = await fetch('/api/ops/actions', {
|
|
method: 'POST',
|
|
headers: {
|
|
'content-type': 'application/json',
|
|
accept: 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
action_type: modalActionType,
|
|
confirmation: confirmationInput.trim() || undefined,
|
|
idempotency_key: idempotencyKey,
|
|
}),
|
|
});
|
|
|
|
const data = await resp.json().catch(() => null);
|
|
|
|
if (resp.ok) {
|
|
setActiveAction(data);
|
|
handleCloseModal();
|
|
void fetchActions();
|
|
} else if (resp.status === 409) {
|
|
setSubmitError(data?.detail || 'Another operations action is currently active.');
|
|
} else if (resp.status === 403) {
|
|
setSubmitError(data?.detail || 'Owner role authority required.');
|
|
} else {
|
|
setSubmitError(data?.detail || 'Failed to trigger operations action.');
|
|
}
|
|
} catch {
|
|
setSubmitError('Network failure submitting action request.');
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const getStateBadge = (state: OpsActionState) => {
|
|
switch (state) {
|
|
case 'succeeded':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
|
|
<span className="material-symbols-outlined text-[13px]">check_circle</span>
|
|
Succeeded
|
|
</span>
|
|
);
|
|
case 'rolled_back':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-mono bg-amber-500/10 text-amber-400 border border-amber-500/20">
|
|
<span className="material-symbols-outlined text-[13px]">undo</span>
|
|
Rolled Back
|
|
</span>
|
|
);
|
|
case 'failed':
|
|
case 'rollback_failed':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-mono bg-rose-500/10 text-rose-400 border border-rose-500/20">
|
|
<span className="material-symbols-outlined text-[13px]">error</span>
|
|
{state === 'rollback_failed' ? 'Rollback Failed' : 'Failed'}
|
|
</span>
|
|
);
|
|
case 'queued':
|
|
case 'preflight':
|
|
case 'running':
|
|
case 'verifying':
|
|
case 'rollback_running':
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-mono bg-sky-500/10 text-sky-400 border border-sky-500/20 animate-pulse">
|
|
<span className="material-symbols-outlined text-[13px] animate-spin">progress_activity</span>
|
|
{state.replace('_', ' ').toUpperCase()}
|
|
</span>
|
|
);
|
|
default:
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-mono bg-surface-container-highest text-outline border border-outline-variant/20">
|
|
{state}
|
|
</span>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Active Action Banner */}
|
|
{activeAction && (
|
|
<div className="p-4 rounded-xl border border-sky-500/30 bg-sky-950/20 text-sky-200">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<span className="material-symbols-outlined text-2xl text-sky-400 animate-spin">
|
|
progress_activity
|
|
</span>
|
|
<div>
|
|
<h4 className="font-medium text-sm text-sky-100 flex items-center gap-2">
|
|
<span>Action in Progress:</span>
|
|
<span className="font-mono text-sky-300">
|
|
{ACTION_CONFIGS[activeAction.action_type]?.title || activeAction.action_type}
|
|
</span>
|
|
{getStateBadge(activeAction.state)}
|
|
</h4>
|
|
<p className="text-xs text-sky-300/80 mt-0.5 font-mono">
|
|
{activeAction.status_message || 'Executing action across system boundary...'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right text-[11px] font-mono text-sky-300/70">
|
|
ID: {activeAction.id.substring(0, 8)}...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Role Notice for Operators */}
|
|
{!isOwner && (
|
|
<div className="p-3 rounded-lg border border-amber-500/20 bg-amber-500/5 text-amber-300 text-xs flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-sm">lock</span>
|
|
<span>
|
|
Owner role required to execute operational actions. Operator accounts have read-only visibility into action status and history.
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Execution Boundary / Helper Status Notice */}
|
|
{capabilities && !capabilities.helper_configured && (
|
|
<div className="p-3 rounded-lg border border-rose-500/20 bg-rose-500/5 text-rose-300 text-xs flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-sm">warning</span>
|
|
<span>
|
|
Action execution boundary helper is unconfigured or not executable on this host. Mutating actions will be rejected by backend policy.
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Trigger Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{(Object.keys(ACTION_CONFIGS) as OpsActionType[]).map((actionKey) => {
|
|
const config = ACTION_CONFIGS[actionKey];
|
|
const isDisabled = !isOwner || !!activeAction;
|
|
|
|
return (
|
|
<div
|
|
key={actionKey}
|
|
className={`p-4 rounded-xl border transition-all ${
|
|
config.destructive
|
|
? 'border-rose-500/20 bg-surface-container/40'
|
|
: 'border-outline-variant/20 bg-surface-container/40'
|
|
} flex flex-col justify-between`}
|
|
>
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`material-symbols-outlined text-lg ${
|
|
config.destructive ? 'text-rose-400' : 'text-primary'
|
|
}`}
|
|
>
|
|
{config.icon}
|
|
</span>
|
|
<h4 className="font-medium text-sm text-on-surface">{config.title}</h4>
|
|
</div>
|
|
{config.destructive && (
|
|
<span className="text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-rose-500/10 text-rose-400 border border-rose-500/20">
|
|
Guarded
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-on-surface-variant leading-relaxed mb-4">
|
|
{config.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="pt-2 border-t border-outline-variant/10 flex items-center justify-between">
|
|
<span className="text-[11px] font-mono text-outline">
|
|
{actionKey}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleOpenModal(actionKey)}
|
|
disabled={isDisabled}
|
|
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1.5 ${
|
|
isDisabled
|
|
? 'bg-surface-container-highest text-outline cursor-not-allowed opacity-50'
|
|
: config.destructive
|
|
? 'bg-rose-500/10 text-rose-300 hover:bg-rose-500/20 border border-rose-500/30'
|
|
: 'bg-primary/10 text-primary hover:bg-primary/20 border border-primary/30'
|
|
}`}
|
|
>
|
|
<span className="material-symbols-outlined text-sm">play_arrow</span>
|
|
<span>Trigger</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Action History Section */}
|
|
<div className="p-4 rounded-xl border border-outline-variant/20 bg-surface-container/30">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-on-surface">Operations Action History</h3>
|
|
<p className="text-xs text-on-surface-variant">
|
|
Audited system actions and deployments executed across privileged execution boundary.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => void fetchActions()}
|
|
disabled={loading}
|
|
className="p-1.5 rounded-lg text-outline hover:text-on-surface hover:bg-surface-container-highest transition-colors"
|
|
title="Refresh action history"
|
|
>
|
|
<span className={`material-symbols-outlined text-base ${loading ? 'animate-spin' : ''}`}>
|
|
refresh
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
{historyError && (
|
|
<div className="p-3 text-xs bg-error/10 text-error border border-error/20 rounded-lg mb-3">
|
|
{historyError}
|
|
</div>
|
|
)}
|
|
|
|
{actions.length === 0 && !loading && (
|
|
<div className="p-6 text-center text-xs text-outline font-mono">
|
|
No operations actions have been executed yet.
|
|
</div>
|
|
)}
|
|
|
|
{actions.length > 0 && (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-xs border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-outline-variant/15 text-outline font-mono text-[11px]">
|
|
<th className="pb-2 font-normal">Timestamp</th>
|
|
<th className="pb-2 font-normal">Action</th>
|
|
<th className="pb-2 font-normal">Actor</th>
|
|
<th className="pb-2 font-normal">Status</th>
|
|
<th className="pb-2 font-normal">Details</th>
|
|
<th className="pb-2 font-normal">Revision</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-outline-variant/10 font-mono">
|
|
{actions.map((act) => (
|
|
<tr key={act.id} className="hover:bg-surface-container-highest/20 transition-colors">
|
|
<td className="py-2.5 text-on-surface-variant whitespace-nowrap pr-3">
|
|
{new Date(act.request_timestamp).toLocaleString(undefined, {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
})}
|
|
</td>
|
|
<td className="py-2.5 font-semibold text-on-surface pr-3">
|
|
{ACTION_CONFIGS[act.action_type]?.title || act.action_type}
|
|
</td>
|
|
<td className="py-2.5 text-on-surface-variant pr-3">
|
|
{act.actor_identity}
|
|
</td>
|
|
<td className="py-2.5 pr-3 whitespace-nowrap">
|
|
{getStateBadge(act.state)}
|
|
</td>
|
|
<td className="py-2.5 text-on-surface-variant max-w-xs truncate pr-3" title={act.status_message || ''}>
|
|
{act.status_message || (act.failure_code ? `Error: ${act.failure_code}` : '—')}
|
|
</td>
|
|
<td className="py-2.5 text-on-surface-variant font-mono whitespace-nowrap">
|
|
{act.deployed_revision ? act.deployed_revision.substring(0, 8) : '—'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Confirmation Modal */}
|
|
{modalActionType && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm animate-in fade-in duration-150">
|
|
<div className="w-full max-w-lg bg-surface-container border border-outline-variant/30 rounded-2xl shadow-2xl overflow-hidden flex flex-col">
|
|
<div className="flex items-center justify-between p-4 border-b border-outline-variant/15">
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`material-symbols-outlined text-xl ${
|
|
ACTION_CONFIGS[modalActionType].destructive ? 'text-rose-400' : 'text-primary'
|
|
}`}
|
|
>
|
|
{ACTION_CONFIGS[modalActionType].icon}
|
|
</span>
|
|
<h3 className="font-semibold text-base text-on-surface">
|
|
Confirm {ACTION_CONFIGS[modalActionType].title}
|
|
</h3>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleCloseModal}
|
|
disabled={isSubmitting}
|
|
className="p-1 rounded-full text-outline hover:text-on-surface hover:bg-surface-container-highest transition-colors"
|
|
>
|
|
<span className="material-symbols-outlined text-lg">close</span>
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmitAction} className="p-5 space-y-4">
|
|
{submitError && (
|
|
<div className="p-3 text-xs bg-error/10 text-error border border-error/20 rounded-lg">
|
|
{submitError}
|
|
</div>
|
|
)}
|
|
|
|
<p className="text-sm text-on-surface-variant leading-relaxed">
|
|
{ACTION_CONFIGS[modalActionType].description}
|
|
</p>
|
|
|
|
{ACTION_CONFIGS[modalActionType].requiredConfirmation && (
|
|
<div className="space-y-2 pt-2">
|
|
<label htmlFor="confirmation_text" className="block text-xs font-mono text-rose-300">
|
|
Type <span className="font-bold text-rose-400 select-all">"{ACTION_CONFIGS[modalActionType].requiredConfirmation}"</span> to authorize:
|
|
</label>
|
|
<input
|
|
id="confirmation_text"
|
|
type="text"
|
|
required
|
|
value={confirmationInput}
|
|
onChange={(e) => setConfirmationInput(e.target.value)}
|
|
placeholder={ACTION_CONFIGS[modalActionType].requiredConfirmation}
|
|
className="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant/40 rounded-lg text-sm font-mono text-on-surface focus:outline-none focus:ring-2 focus:ring-rose-500/50"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="pt-4 border-t border-outline-variant/10 flex items-center justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={handleCloseModal}
|
|
disabled={isSubmitting}
|
|
className="px-4 py-2 rounded-lg text-xs font-medium text-outline hover:text-on-surface transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={
|
|
isSubmitting ||
|
|
(Boolean(ACTION_CONFIGS[modalActionType].requiredConfirmation) &&
|
|
confirmationInput.trim() !==
|
|
ACTION_CONFIGS[modalActionType].requiredConfirmation)
|
|
}
|
|
className={`px-4 py-2 rounded-lg text-xs font-medium transition-colors flex items-center gap-1.5 ${
|
|
isSubmitting ||
|
|
(Boolean(ACTION_CONFIGS[modalActionType].requiredConfirmation) &&
|
|
confirmationInput.trim() !==
|
|
ACTION_CONFIGS[modalActionType].requiredConfirmation)
|
|
? 'bg-surface-container-highest text-outline cursor-not-allowed opacity-50'
|
|
: ACTION_CONFIGS[modalActionType].destructive
|
|
? 'bg-rose-600 text-white hover:bg-rose-500 shadow-md shadow-rose-900/30'
|
|
: 'bg-primary text-on-primary hover:bg-primary/90 shadow-md shadow-primary/20'
|
|
}`}
|
|
>
|
|
{isSubmitting && (
|
|
<span className="material-symbols-outlined text-sm animate-spin">
|
|
progress_activity
|
|
</span>
|
|
)}
|
|
<span>Authorize & Execute</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|