Add shift handover and RunPod, and make CX-Tools work in a container
Handover - The Confluence shift doc becomes the landing page: shift metadata, the top-of-page checks, key updates with their Zendesk/Jira refs and status, and the free-text comments. "Hand over shift" closes the shift, opens the next one and carries the live items across, dropping anything done or marked "remove at end of shift" - the retyping this replaces. - The RunPod table on that page is read from live host state instead of being copied in by hand, with the six-colour key preserved. RunPod - GraphQL client keyed on CX_RUNPOD_API_KEY. The old console login is kept as a fallback but cannot run unattended: the account has 2FA, so Clerk verifies the password and then asks for an emailed code and never issues a session. That is the real cause of the "No active session found" failure, and the client now says so instead of failing opaquely. TOTP is supported if the account moves to an authenticator app. - Hosts and their listing history are persisted, so "most problematic hosts" can be ranked and each machine has a timeline of who listed or unlisted it, with the Zendesk comment and the error hint. - The unlisting emails are parsed for the error block (they arrive quoted-printable) and classified into a likely cause and a next step. Zendesk and Jira - Unlisting raises a Zendesk ticket that follows the format of RunPod's own email, keyed on the machine so one machine keeps one thread, posted as an internal note. - Jira is split in two: the Infrahub/OIE instance and the RunPod/RMA one, which may be a different Atlassian site. Blank RunPod values fall back to the defaults rather than failing. Running in a container - CX-Tools reads its keys from 1Password, which needs a desktop app. Config is a dataclass whose lookups live in per-field default factories, so passing CX_INFRAHUB_TOKEN/CX_INFRAINSIGHT_TOKEN in means those factories never run and CX-Tools itself stays unmodified. - CX-Tools reaches OpenStack with `docker exec <region>-osc`, so the image now carries the Docker client (the static binary, not the docker.io package) and compose mounts the host socket with group_add for it. Verified from inside the container: live OpenStack and Infrahub calls both succeed. Also fixes Settings, which read the environment at class-definition time and so ignored anything set afterwards; a fresh Settings() silently returned stale values. Caught by the Jira scoping tests. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
241
frontend/src/pages/Handover.tsx
Normal file
241
frontend/src/pages/Handover.tsx
Normal file
@@ -0,0 +1,241 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { api } from "../lib/api";
|
||||
|
||||
interface Item {
|
||||
id: number; position: number; title: string; zendesk_tickets: string;
|
||||
jira_key: string; jira_status: string; body: string; links: string[];
|
||||
state: string; remove_at_end_of_shift: boolean; first_raised_on: string | null;
|
||||
carried_from_id: number | null;
|
||||
}
|
||||
interface RunpodRow {
|
||||
machine_id: string; name: string; colour: string; zendesk_ticket: string;
|
||||
jira_key: string; jira_status: string; gpu_reserved: number; gpu_total: number;
|
||||
last_error: string; next_steps: string; hours_unlisted: number | null; unlist_count: number;
|
||||
}
|
||||
interface Doc {
|
||||
id: number; title: string; shift: string; shift_date: string; handing_to: string;
|
||||
status: string; team_members: string; significant_issues_checked: boolean;
|
||||
hubspot_checked: boolean; total_open_tickets: number | null;
|
||||
member_checks: { name: string; hs_checked: boolean; jira_checked: boolean }[];
|
||||
other_comments: string; item_count: number; items: Item[];
|
||||
}
|
||||
|
||||
const STATES: Record<string, string> = {
|
||||
pending_infra: "Pending Infra", pending_customer: "Pending customer",
|
||||
pending_runpod: "Pending RunPod", pending_rma: "Pending RMA", pending_cx: "Pending CX",
|
||||
in_progress: "In progress", monitoring: "Monitoring",
|
||||
no_further_engagement: "No further engagement", done: "Done",
|
||||
};
|
||||
|
||||
const COLOURS: Record<string, { dot: string; text: string }> = {
|
||||
red: { dot: "#f2545b", text: "Blocked from relisting — recurring issue" },
|
||||
purple: { dot: "#a97bf0", text: "Pending RunPod" },
|
||||
yellow: { dot: "#e0a336", text: "Pending Infrastructure / DC team" },
|
||||
blue: { dot: "#59a0f5", text: "Pending removal from the RunPod platform" },
|
||||
green: { dot: "#35c46a", text: "Stress testing >24h — GPUs may look reserved" },
|
||||
white: { dot: "#8a93a5", text: "Actionable by CX" },
|
||||
};
|
||||
|
||||
const blankItem = (): Partial<Item> => ({
|
||||
title: "", zendesk_tickets: "", jira_key: "", jira_status: "", body: "",
|
||||
links: [], state: "in_progress", remove_at_end_of_shift: false,
|
||||
});
|
||||
|
||||
export default function HandoverPage() {
|
||||
const [doc, setDoc] = useState<Doc | null>(null);
|
||||
const [runpod, setRunpod] = useState<RunpodRow[]>([]);
|
||||
const [editing, setEditing] = useState<Partial<Item> | null>(null);
|
||||
const [saved, setSaved] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const r = await api.get<{ handover: Doc | null; runpod: RunpodRow[] }>("/api/handover/current");
|
||||
setDoc(r.handover); setRunpod(r.runpod ?? []);
|
||||
}, []);
|
||||
useEffect(() => { void load(); }, [load]);
|
||||
|
||||
const flash = (m: string) => { setSaved(m); setTimeout(() => setSaved(""), 2200); };
|
||||
|
||||
const saveDoc = async (patch: Partial<Doc>) => {
|
||||
if (!doc) return;
|
||||
const next = await api.post<Doc>(`/api/handover/${doc.id}`, { ...doc, ...patch });
|
||||
setDoc(next); flash("Saved");
|
||||
};
|
||||
|
||||
const saveItem = async () => {
|
||||
if (!doc || !editing) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const path = editing.id
|
||||
? `/api/handover/${doc.id}/items/${editing.id}`
|
||||
: `/api/handover/${doc.id}/items`;
|
||||
setDoc(await api.post<Doc>(path, editing));
|
||||
setEditing(null); flash("Item saved");
|
||||
} finally { setBusy(false); }
|
||||
};
|
||||
|
||||
const handOver = async () => {
|
||||
if (!doc) return;
|
||||
if (!confirm("Close this shift and start the next one? Live items carry forward; " +
|
||||
"anything done or flagged 'remove at end of shift' is left behind.")) return;
|
||||
const r = await api.post<{ next: Doc; carried: number }>(`/api/handover/${doc.id}/hand-over`);
|
||||
setDoc(r.next); flash(`Handed over — ${r.carried} items carried forward`);
|
||||
};
|
||||
|
||||
if (!doc) {
|
||||
return (
|
||||
<main style={{ padding: 26 }}>
|
||||
<div className="card">
|
||||
<h3 className="sec">No handover yet</h3>
|
||||
<button className="pri" onClick={async () => {
|
||||
await api.post("/api/handover", { shift: "APAC", handing_to: "EMEA" });
|
||||
void load();
|
||||
}}>Start today's handover</button>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main style={{ padding: "22px 26px 80px", maxWidth: 1180 }}>
|
||||
<div className="row">
|
||||
<h2 style={{ margin: 0, fontSize: 20 }}>{doc.title}</h2>
|
||||
<span className="badge">{doc.shift} → {doc.handing_to}</span>
|
||||
<span className={`badge ${doc.status === "draft" ? "" : "ok"}`}>{doc.status.replace("_", " ")}</span>
|
||||
<span className="spacer" style={{ marginLeft: "auto" }} />
|
||||
{saved && <span className="t-ok" style={{ fontSize: 12.5 }}>{saved}</span>}
|
||||
<button className="pri" onClick={handOver} disabled={doc.status !== "draft"}>Hand over shift</button>
|
||||
</div>
|
||||
|
||||
<div className="card mt">
|
||||
<h3 className="sec">Shift</h3>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "190px 1fr", gap: "10px 12px", alignItems: "center" }}>
|
||||
<label className="hint" style={{ margin: 0 }}>CX team members</label>
|
||||
<input defaultValue={doc.team_members} onBlur={(e) => saveDoc({ team_members: e.target.value })} />
|
||||
<label className="hint" style={{ margin: 0 }}>Total open tickets</label>
|
||||
<input type="number" defaultValue={doc.total_open_tickets ?? undefined} style={{ maxWidth: 140 }}
|
||||
onBlur={(e) => saveDoc({ total_open_tickets: Number(e.target.value) })} />
|
||||
<label className="hint" style={{ margin: 0 }}>Checks</label>
|
||||
<div className="row">
|
||||
<label className="row" style={{ gap: 6 }}>
|
||||
<input type="checkbox" style={{ width: "auto" }} checked={doc.significant_issues_checked}
|
||||
onChange={(e) => saveDoc({ significant_issues_checked: e.target.checked })} />
|
||||
Active issues of significance
|
||||
</label>
|
||||
<label className="row" style={{ gap: 6 }}>
|
||||
<input type="checkbox" style={{ width: "auto" }} checked={doc.hubspot_checked}
|
||||
onChange={(e) => saveDoc({ hubspot_checked: e.target.checked })} />
|
||||
HubSpot “My tickets on hold”
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row mt">
|
||||
<h3 className="sec" style={{ flex: 1, margin: 0 }}>Key updates ({doc.items.length})</h3>
|
||||
<button onClick={() => setEditing(blankItem())}>Add an update</button>
|
||||
</div>
|
||||
|
||||
{doc.items.map((it) => (
|
||||
<div className="card" key={it.id} style={{ marginBottom: 10 }}>
|
||||
<div className="row">
|
||||
<b style={{ flex: 1 }}>{it.title || "(untitled)"}</b>
|
||||
{it.carried_from_id && <span className="badge" title={`First raised ${it.first_raised_on}`}>carried over</span>}
|
||||
{it.remove_at_end_of_shift && <span className="badge">remove at end of shift</span>}
|
||||
<span className={`badge ${it.state === "done" ? "ok" : it.state.startsWith("pending") ? "real" : ""}`}>
|
||||
{STATES[it.state] ?? it.state}</span>
|
||||
<button className="sm" onClick={() => setEditing(it)}>Edit</button>
|
||||
<button className="sm del" onClick={async () => {
|
||||
if (!confirm("Remove this update?")) return;
|
||||
setDoc(await api.del<Doc>(`/api/handover/${doc.id}/items/${it.id}`));
|
||||
}}>Remove</button>
|
||||
</div>
|
||||
<div className="row" style={{ gap: 14, marginTop: 2 }}>
|
||||
{it.zendesk_tickets && <span className="hint" style={{ margin: 0 }}>Zendesk {it.zendesk_tickets}</span>}
|
||||
{it.jira_key && <span className="hint" style={{ margin: 0 }}>{it.jira_key} {it.jira_status}</span>}
|
||||
</div>
|
||||
{it.body && <div style={{ whiteSpace: "pre-wrap", marginTop: 8, fontSize: 13.5 }}>{it.body}</div>}
|
||||
{(it.links ?? []).map((l) => (
|
||||
<div key={l}><a href={l} target="_blank" rel="noreferrer" style={{ fontSize: 12 }}>{l}</a></div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{editing && (
|
||||
<div className="card" style={{ borderColor: "var(--accent)" }}>
|
||||
<div className="fld"><label>Title</label>
|
||||
<input value={editing.title ?? ""} onChange={(e) => setEditing({ ...editing, title: e.target.value })} /></div>
|
||||
<div className="row">
|
||||
<div className="fld" style={{ flex: 1 }}><label>Zendesk ticket(s)</label>
|
||||
<input value={editing.zendesk_tickets ?? ""} placeholder="#8495, #8453"
|
||||
onChange={(e) => setEditing({ ...editing, zendesk_tickets: e.target.value })} /></div>
|
||||
<div className="fld" style={{ flex: 1 }}><label>Jira key</label>
|
||||
<input value={editing.jira_key ?? ""} placeholder="OIE-3213"
|
||||
onChange={(e) => setEditing({ ...editing, jira_key: e.target.value })} /></div>
|
||||
<div className="fld" style={{ flex: 1 }}><label>Jira status</label>
|
||||
<input value={editing.jira_status ?? ""} placeholder="In Progress"
|
||||
onChange={(e) => setEditing({ ...editing, jira_status: e.target.value })} /></div>
|
||||
</div>
|
||||
<div className="fld"><label>Detail</label>
|
||||
<textarea value={editing.body ?? ""} onChange={(e) => setEditing({ ...editing, body: e.target.value })} /></div>
|
||||
<div className="row">
|
||||
<div className="fld" style={{ flex: 1 }}><label>Status</label>
|
||||
<select value={editing.state ?? "in_progress"}
|
||||
onChange={(e) => setEditing({ ...editing, state: e.target.value })}>
|
||||
{Object.entries(STATES).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
|
||||
</select></div>
|
||||
<label className="row" style={{ gap: 6, marginTop: 18 }}>
|
||||
<input type="checkbox" style={{ width: "auto" }} checked={!!editing.remove_at_end_of_shift}
|
||||
onChange={(e) => setEditing({ ...editing, remove_at_end_of_shift: e.target.checked })} />
|
||||
Remove at end of shift
|
||||
</label>
|
||||
</div>
|
||||
<div className="row">
|
||||
<button className="pri" onClick={saveItem} disabled={busy}>Save</button>
|
||||
<button onClick={() => setEditing(null)}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h3 className="sec" style={{ marginTop: 28 }}>RunPod — unlisted machines ({runpod.length})</h3>
|
||||
<div className="hint" style={{ marginTop: 0 }}>
|
||||
Live from RunPod, not retyped. Colours follow the handover key.
|
||||
</div>
|
||||
<div className="row" style={{ gap: 14, margin: "8px 0 12px" }}>
|
||||
{Object.entries(COLOURS).map(([k, v]) => (
|
||||
<span key={k} className="hint" style={{ margin: 0 }} title={v.text}>
|
||||
<i style={{ display: "inline-block", width: 9, height: 9, borderRadius: 2,
|
||||
background: v.dot, marginRight: 5 }} />{k}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="card" style={{ padding: 0 }}>
|
||||
{runpod.length === 0 ? <div className="empty">Nothing unlisted.</div> : runpod.map((r, i) => (
|
||||
<div key={r.machine_id} style={{ padding: "10px 14px", borderTop: i ? "1px solid var(--line)" : undefined }}>
|
||||
<div className="row">
|
||||
<i style={{ width: 9, height: 9, borderRadius: 2, background: COLOURS[r.colour]?.dot ?? "#888" }}
|
||||
title={COLOURS[r.colour]?.text} />
|
||||
<b style={{ flex: 1 }}>{r.name}</b>
|
||||
<span className="hint" style={{ margin: 0, fontFamily: "var(--mono)" }}>{r.machine_id}</span>
|
||||
{r.zendesk_ticket && <span className="badge">ZD {r.zendesk_ticket}</span>}
|
||||
{r.jira_key && <span className="badge">{r.jira_key} {r.jira_status}</span>}
|
||||
<span className="badge">{r.gpu_reserved}/{r.gpu_total} GPU</span>
|
||||
{r.hours_unlisted != null && <span className="badge">{r.hours_unlisted}h</span>}
|
||||
{r.unlist_count > 3 && <span className="badge overdue">{r.unlist_count}× unlisted</span>}
|
||||
</div>
|
||||
{r.last_error && (
|
||||
<pre style={{ marginTop: 6, fontSize: 11.5, background: "var(--bg)" }}>{r.last_error}</pre>
|
||||
)}
|
||||
{r.next_steps && <div className="hint" style={{ marginTop: 4 }}>{r.next_steps}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h3 className="sec" style={{ marginTop: 28 }}>Other comments</h3>
|
||||
<div className="card">
|
||||
<textarea defaultValue={doc.other_comments} style={{ minHeight: 160 }}
|
||||
onBlur={(e) => saveDoc({ other_comments: e.target.value })} />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user