diff --git a/frontend/src/__tests__/ladder-timeline-filters.test.ts b/frontend/src/__tests__/ladder-timeline-filters.test.ts index 793889c4..7307bdfe 100644 --- a/frontend/src/__tests__/ladder-timeline-filters.test.ts +++ b/frontend/src/__tests__/ladder-timeline-filters.test.ts @@ -1,5 +1,5 @@ import type { LadderEvent } from '../api/ladder'; -import { emptyLadderFilters, filterLadderEvents, ladderFilterOptions, ladderTotal, ladderEditReason } from '../ladder-timeline-filters'; +import { emptyLadderFilters, filterLadderEvents, ladderFilterOptions, ladderTotal, ladderEditReason, ladderLabel, formatLadderAmount, formatLadderDateTime } from '../ladder-timeline-filters'; const event: LadderEvent = { id: 'one', config_id: 'config', run_id: 'run', layer_type: 'compute-sp', term: '1yr', @@ -34,3 +34,30 @@ test('eligibility covers status, execution, deadline, and unavailable revision A expect(ladderEditReason(event, Date.parse(event.scheduled_date))).toContain('passed'); expect(ladderEditReason({ ...event, revision: undefined as unknown as number })).toContain('upgraded'); }); + +// FIXTURE: enum codes from cloud-commitments-go pkg/ladder. +test('ladder labels cover every known enum and show unknown codes raw', () => { + expect(['ec2-instance-sp', 'compute-sp', 'convertible-ri', 'azure-reservation', 'azure-savings-plan'].map(v => ladderLabel('layer_type', v))) + .toEqual(['EC2 Instance Savings Plan', 'Compute Savings Plan', 'Convertible RI', 'Azure Reservation', 'Azure Savings Plan']); + expect(['scheduled', 'fired', 'completed', 'cancelled', 'failed'].map(v => ladderLabel('status', v))) + .toEqual(['Scheduled', 'Fired', 'Completed', 'Cancelled', 'Failed']); + expect(['1yr', '3yr'].map(v => ladderLabel('term', v))).toEqual(['1 Year', '3 Years']); + expect(['no-upfront', 'partial-upfront', 'all-upfront'].map(v => ladderLabel('payment_option', v))).toEqual(['No Upfront', 'Partial Upfront', 'All Upfront']); + expect(ladderLabel('layer_type', 'new-thing')).toBe('new-thing'); + expect(ladderLabel('term', '5yrs')).toBe('5yrs'); + expect(ladderLabel('status', '')).toBe(''); +}); + +test('amounts keep zero and absent distinct and never round a small value to $0.00', () => { + expect(formatLadderAmount('0.000000')).toBe('$0.00/hr'); + expect(formatLadderAmount(null)).toBe('unavailable'); + expect(formatLadderAmount('0.001200')).toBe('$0.0012/hr'); + expect(formatLadderAmount('1234.500000')).toBe('$1,234.50/hr'); + expect(() => formatLadderAmount('abc')).toThrow('Invalid planning budget.'); +}); + +test('dates render the UTC calendar day and time regardless of browser zone', () => { + expect(formatLadderDateTime('2030-01-02T23:30:00Z')).toBe('Jan 2, 2030, 23:30 UTC'); + expect(formatLadderDateTime('2030-01-02T23:30:00-05:00')).toBe('Jan 3, 2030, 04:30 UTC'); + expect(formatLadderDateTime('garbage')).toBe('garbage'); +}); diff --git a/frontend/src/__tests__/ladder-timeline.test.ts b/frontend/src/__tests__/ladder-timeline.test.ts index 0cab49bc..ee3b1410 100644 --- a/frontend/src/__tests__/ladder-timeline.test.ts +++ b/frontend/src/__tests__/ladder-timeline.test.ts @@ -26,7 +26,7 @@ test('real selection opens editor, UTC draft resets and cancel preserves authori document.querySelector('[data-event]')!.click(); const amount = document.getElementById('ladder-event-amount') as HTMLInputElement; amount.value = '0.5'; amount.dispatchEvent(new Event('input')); - expect(document.getElementById('ladder-event-preview')!.textContent).toContain('0.500000'); + expect(document.getElementById('ladder-event-preview')!.textContent).toContain('$0.5000/hr'); document.querySelector('.ladder-event-editor [data-reset]')!.click(); expect(amount.value).toBe('1.000000'); document.querySelector('.ladder-event-editor [data-cancel]')!.click(); @@ -187,3 +187,49 @@ test('focus returns to the edited purchase after a successful save and the canva expect(document.querySelector('.ladder-event-editor')).toBeNull(); expect(document.activeElement).toBe(document.querySelector('[data-event="one"]')); }); + +// FIXTURE: hand-written wire shape of GET /api/ladder/tranches and /runs (not captured from a live backend). +test('table, filters, summary, snapshot and tooltip show formatted values, not raw wire values (#697)', async () => { + const raw = { ...event, term: '3yr', payment_option: 'all-upfront', layer_type: 'convertible-ri', amount_usd_hr: '0.123456', scheduled_date: '2030-01-02T23:30:00Z' }; + const unknown = { ...event, id: 'two', layer_type: 'future-layer', amount_usd_hr: '0.000000', scheduled_date: '2030-01-03T00:00:00Z' }; + jest.mocked(getLadderEvents).mockResolvedValue([raw, unknown]); + jest.mocked(getLadderRuns).mockResolvedValue([{ ...run, baseline_usd_hr: '0.000000', existing_usd_hr: null, target_usd_hr: '12.500000' }]); + await initLadderTimeline(document.getElementById('timeline')!, [], false); + const rows = Array.from(document.querySelectorAll('#timeline tbody tr')).map(row => row.textContent ?? ''); + expect(rows[0]).toContain('Jan 2, 2030, 23:30 UTC'); + expect(rows[0]).toContain('Convertible RI'); + expect(rows[0]).toContain('3 Years'); + expect(rows[0]).toContain('All Upfront'); + expect(rows[0]).toContain('$0.1235/hr'); + expect(rows[0]).toContain('Scheduled'); + expect(rows[0]).not.toMatch(/0\.123456|2030-01-02T|convertible-ri|3yr|all-upfront/); + expect(rows[1]).toContain('future-layer'); + expect(rows[1]).toContain('$0.00/hr'); + const summary = document.querySelector('[data-summary]')!.textContent!; + expect(summary).toContain('$0.1235/hr in this selection'); + expect(summary).not.toContain('USD/hour'); + const layer = document.querySelector('[data-filter="layer_type"]')!; + expect(Array.from(layer.options).map(o => [o.value, o.textContent])).toEqual([['', 'All'], ['convertible-ri', 'Convertible RI'], ['future-layer', 'future-layer']]); + const runFilter = document.querySelector('[data-filter="run_id"]')!; + runFilter.value = 'run'; runFilter.dispatchEvent(new Event('change')); + expect(runFilter.options[1]?.textContent).toBe('Jan 1, 2026, 00:00 UTC'); + const snapshot = document.querySelector('[data-snapshot]')!.textContent!; + expect(snapshot).toContain('baseline $0.00/hr, existing unavailable, target $12.50/hr'); + const chartCalls = jest.mocked(Chart).mock.calls; + const tooltip = chartCalls[chartCalls.length - 1]?.[1].options?.plugins?.tooltip?.callbacks?.label as (c: { datasetIndex: number; dataIndex: number }) => string; + expect(tooltip({ datasetIndex: 0, dataIndex: 0 })).toBe('Jan 2, 2030, 23:30 UTC: $0.1235/hr (Convertible RI, Scheduled)'); +}); + +// FIXTURE: hand-written editor input. +test('editor header and run ceiling are formatted while the amount input keeps the exact wire value (#697)', async () => { + jest.mocked(getLadderEvents).mockResolvedValue([{ ...event, term: '3yr', payment_option: 'partial-upfront', amount_usd_hr: '0.123456' }]); + jest.mocked(getLadderRuns).mockResolvedValue([{ ...run, total_hourly_commit: '2.500000' }]); + await initLadderTimeline(document.getElementById('timeline')!, [], false); + document.querySelector('[data-event]')!.click(); + const text = document.querySelector('.ladder-event-editor')!.textContent!; + expect(text).toContain('Compute Savings Plan / 3 Years / Partial Upfront'); + expect(text).toContain('Original plan: Jan 1, 2026, 00:00 UTC'); + expect(text).toContain('Original run ceiling: $2.50/hr'); + expect(text).toContain('Current run total after this change: $0.1235/hr'); + expect((document.getElementById('ladder-event-amount') as HTMLInputElement).value).toBe('0.123456'); +}); diff --git a/frontend/src/ladder-timeline-editor.ts b/frontend/src/ladder-timeline-editor.ts index 677a32c0..94216694 100644 --- a/frontend/src/ladder-timeline-editor.ts +++ b/frontend/src/ladder-timeline-editor.ts @@ -2,7 +2,7 @@ import type { ApiError } from './api/types'; import { amendLadderEvent, type LadderEvent, type LadderRun } from './api/ladder'; import { openModal, closeModal } from './modal'; import { escapeHtml } from './utils'; -import { formatLadderUnits, ladderAmountUnits, ladderTotal } from './ladder-timeline-filters'; +import { formatLadderAmount, formatLadderDateTime, formatLadderUnits, ladderAmountUnits, ladderLabel, ladderTotal } from './ladder-timeline-filters'; export function openLadderEventEditor(event: LadderEvent, run: LadderRun, siblings: readonly LadderEvent[], onReload: () => void): void { const modal = document.createElement('div'); @@ -12,8 +12,8 @@ export function openLadderEventEditor(event: LadderEvent, run: LadderRun, siblin modal.setAttribute('aria-labelledby', 'ladder-event-title'); modal.innerHTML = `

Edit planned purchase

-

${escapeHtml(event.layer_type)} / ${escapeHtml(event.term)} / ${escapeHtml(event.payment_option)}

-

Original plan: ${escapeHtml(run.started_at)}. +

${escapeHtml(ladderLabel('layer_type', event.layer_type))} / ${escapeHtml(ladderLabel('term', event.term))} / ${escapeHtml(ladderLabel('payment_option', event.payment_option))}

+

Original plan: ${escapeHtml(formatLadderDateTime(run.started_at))}. ${run.actions.filter(action => action.layer === event.layer_type).map(action => `${escapeHtml(action.rationale)}${action.data_sources?.length ? ` Sources: ${escapeHtml(action.data_sources.join(', '))}.` : ''}`).join(' ')}

These are planning budgets. Purchases are not executed by this editor.

@@ -21,7 +21,7 @@ export function openLadderEventEditor(event: LadderEvent, run: LadderRun, siblin

-

Original run ceiling: ${escapeHtml(run.total_hourly_commit)} USD/hour. +

Original run ceiling: ${escapeHtml(formatLadderAmount(run.total_hourly_commit))}. The server also enforces the current per-run cap.

Reducing a tranche can cause the next planning run to add it back. Change target coverage in account settings for a lasting target reduction.

@@ -53,7 +53,7 @@ export function openLadderEventEditor(event: LadderEvent, run: LadderRun, siblin try { const units = ladderAmountUnits(amount.value); const total = originalTotal - ladderAmountUnits(event.amount_usd_hr) + units; - preview.textContent = `Current run total after this change: ${formatLadderUnits(total)} USD/hour.`; + preview.textContent = `Current run total after this change: ${formatLadderAmount(formatLadderUnits(total))}.`; save.disabled = pending || units <= 0n || total > ladderAmountUnits(run.total_hourly_commit); } catch { preview.textContent = 'Enter a positive decimal with up to six fractional digits.'; diff --git a/frontend/src/ladder-timeline-filters.ts b/frontend/src/ladder-timeline-filters.ts index 4b667803..6d26a018 100644 --- a/frontend/src/ladder-timeline-filters.ts +++ b/frontend/src/ladder-timeline-filters.ts @@ -1,4 +1,6 @@ import type { LadderEvent } from './api/ladder'; +import { formatCurrency, formatDate, formatTerm } from './utils'; +import { getPaymentLabel } from './commitmentOptions'; export const ladderDimensions = ['run_id', 'layer_type', 'term', 'payment_option', 'status'] as const; export type LadderDimension = typeof ladderDimensions[number]; @@ -44,3 +46,42 @@ export function ladderEditReason(event: LadderEvent, now = Date.now()): string | if (!Number.isSafeInteger(event.revision) || event.revision < 0) return 'Editing is unavailable until the timeline API is upgraded.'; return undefined; } + +// Enum values from cloud-commitments-go pkg/ladder (types.go, store.go). +const layerLabels: Record = { + 'ec2-instance-sp': 'EC2 Instance Savings Plan', 'compute-sp': 'Compute Savings Plan', 'convertible-ri': 'Convertible RI', + 'azure-reservation': 'Azure Reservation', 'azure-savings-plan': 'Azure Savings Plan', +}; +const statusLabels: Record = { + scheduled: 'Scheduled', fired: 'Fired', completed: 'Completed', cancelled: 'Cancelled', failed: 'Failed', +}; + +/** Label for a ladder enum code. An unknown code is shown raw so it stays visible. */ +export function ladderLabel(dimension: LadderDimension, value: string): string { + switch (dimension) { + case 'layer_type': return layerLabels[value] ?? value; + case 'status': return statusLabels[value] ?? value; + case 'payment_option': return getPaymentLabel(value); + case 'term': { + const years = /^([1-9]\d?)yr$/.exec(value); + return years ? formatTerm(Number(years[1])) : value; + } + case 'run_id': return value; + } +} + +/** USD/hour budget for display: 2 digits from $1, 4 below $1 so a small non-zero value never reads as $0.00. */ +export function formatLadderAmount(amount: string | null | undefined): string { + if (amount === null || amount === undefined) return 'unavailable'; + ladderAmountUnits(amount); + const value = Number(amount); + return `${formatCurrency(value, '$', value > 0 && value < 1 ? 4 : 2)}/hr`; +} + +/** Calendar date and UTC time ("Jan 2, 2030, 00:00 UTC"); never browser-local. Unparseable input is shown raw. */ +export function formatLadderDateTime(iso: string): string { + const stamp = Date.parse(iso); + if (!Number.isFinite(stamp)) return iso; + const utc = new Date(stamp).toISOString(); + return `${formatDate(utc.slice(0, 10))}, ${utc.slice(11, 16)} UTC`; +} diff --git a/frontend/src/ladder-timeline.ts b/frontend/src/ladder-timeline.ts index 48547294..4b7d8f04 100644 --- a/frontend/src/ladder-timeline.ts +++ b/frontend/src/ladder-timeline.ts @@ -3,7 +3,7 @@ import { listAccountsMinimal, type AccountSummary } from './api/accounts'; import { getLadderEvents, getLadderRuns, type LadderConfig, type LadderEvent, type LadderRun } from './api/ladder'; import { canAccess } from './permissions'; import { escapeHtml } from './utils'; -import { emptyLadderFilters, filterLadderEvents, ladderDimensions, ladderFilterOptions, ladderEditReason, ladderTotal, type LadderFilters } from './ladder-timeline-filters'; +import { emptyLadderFilters, filterLadderEvents, ladderDimensions, ladderFilterOptions, ladderEditReason, ladderTotal, ladderLabel, formatLadderAmount, formatLadderDateTime, type LadderFilters } from './ladder-timeline-filters'; import { openLadderEventEditor } from './ladder-timeline-editor'; Chart.register(...registerables); @@ -62,13 +62,13 @@ export async function initLadderTimeline(root: HTMLElement, configs: readonly La const key = select.dataset['filter'] as typeof ladderDimensions[number]; const options = ladderFilterOptions(events, filters, key); if (filters[key] && !options.includes(filters[key])) options.unshift(filters[key]); - select.innerHTML = `${options.map(value => ``).join('')}`; + select.innerHTML = `${options.map(value => ``).join('')}`; select.value = filters[key]; }); - summary.textContent = `${visible.length} of ${events.length} retained tranches; ${ladderTotal(visible)} USD/hour in this selection.`; + summary.textContent = `${visible.length} of ${events.length} retained tranches; ${formatLadderAmount(ladderTotal(visible))} in this selection.`; const snapshot = root.querySelector('[data-snapshot]')!; const run = runs.find(item => item.id === filters.run_id); - snapshot.textContent = run ? `Original run ${run.started_at}: baseline ${run.baseline_usd_hr ?? 'unavailable'}, existing ${run.existing_usd_hr ?? 'unavailable'}, target ${run.target_usd_hr ?? 'unavailable'} USD/hour. These snapshots are not a coverage forecast. ${run.actions.map(action => `${action.rationale}${action.data_sources?.length ? ` Sources: ${action.data_sources.join(', ')}.` : ''}`).join(' ')}` : 'Select a run to inspect its original baseline, existing commitment and target snapshots.'; + snapshot.textContent = run ? `Original run ${formatLadderDateTime(run.started_at)}: baseline ${formatLadderAmount(run.baseline_usd_hr)}, existing ${formatLadderAmount(run.existing_usd_hr)}, target ${formatLadderAmount(run.target_usd_hr)}. These snapshots are not a coverage forecast. ${run.actions.map(action => `${action.rationale}${action.data_sources?.length ? ` Sources: ${action.data_sources.join(', ')}.` : ''}`).join(' ')}` : 'Select a run to inspect its original baseline, existing commitment and target snapshots.'; chart?.destroy(); const groups = Array.from(new Set(visible.map(event => event.layer_type))).map(layer => ({ layer, events: visible.filter(event => event.layer_type === layer) })); const colors: Record = { 'compute-sp': '#2563eb', 'ec2-instance-sp': '#0891b2', 'convertible-ri': '#7c3aed' }; @@ -82,7 +82,7 @@ export async function initLadderTimeline(root: HTMLElement, configs: readonly La y: { beginAtZero: true, title: { display: true, text: 'Additional planning budget (USD/hour)' } } }, plugins: { legend: { onClick: (_event, item) => { const group = groups[item.datasetIndex ?? -1]; if (group) { filters.layer_type = filters.layer_type === group.layer ? '' : group.layer; render(); } } }, tooltip: { callbacks: { label: context => { const event = groups[context.datasetIndex]?.events[context.dataIndex]; - return event ? `${event.scheduled_date}: ${event.amount_usd_hr} USD/hour (${event.layer_type}, ${event.status})` : ''; + return event ? `${formatLadderDateTime(event.scheduled_date)}: ${formatLadderAmount(event.amount_usd_hr)} (${ladderLabel('layer_type', event.layer_type)}, ${ladderLabel('status', event.status)})` : ''; } } } }, onClick: (_event, points) => { const point = points[0]; const item = point && groups[point.datasetIndex]?.events[point.index]; if (item) selectEvent(item); }, }, }); @@ -91,9 +91,9 @@ export async function initLadderTimeline(root: HTMLElement, configs: readonly La table.textContent = events.length ? 'No purchases match these filters. Clear filters to see the retained plan.' : `No planned purchase tranches. ${rationale}`; return; } - table.innerHTML = `${visible.map(event => { + table.innerHTML = `
Scheduled (UTC)TypeTermPaymentBudget (USD/hour)StatusSelect or edit
${visible.map(event => { const reason = ladderEditReason(event); - return ``; + return ``; }).join('')}
Scheduled (UTC)TypeTermPaymentBudgetStatusSelect or edit
${escapeHtml(event.scheduled_date)}${escapeHtml(event.layer_type)}${escapeHtml(event.term)}${escapeHtml(event.payment_option)}${escapeHtml(event.amount_usd_hr)}${escapeHtml(event.status)}${reason ? `${escapeHtml(reason)}` : ''}
${escapeHtml(formatLadderDateTime(event.scheduled_date))}${escapeHtml(ladderLabel('layer_type', event.layer_type))}${escapeHtml(ladderLabel('term', event.term))}${escapeHtml(ladderLabel('payment_option', event.payment_option))}${escapeHtml(formatLadderAmount(event.amount_usd_hr))}${escapeHtml(ladderLabel('status', event.status))}${reason ? `${escapeHtml(reason)}` : ''}
`; table.querySelectorAll('[data-event]').forEach(button => button.addEventListener('click', () => { const event = visible.find(item => item.id === button.dataset['event']); diff --git a/frontend/tests-e2e/ladder-timeline.spec.ts b/frontend/tests-e2e/ladder-timeline.spec.ts index 4a3fddfd..8f2fa8fe 100644 --- a/frontend/tests-e2e/ladder-timeline.spec.ts +++ b/frontend/tests-e2e/ladder-timeline.spec.ts @@ -37,7 +37,7 @@ for (const width of [1280, 390]) { await timeline.getByRole('combobox', { name: 'Commitment term', exact: true }).selectOption('3yr'); await expect(timeline.locator('[data-summary]')).toContainText('1 of 3'); await timeline.getByRole('combobox', { name: 'Payment option', exact: true }).selectOption('all-upfront'); - await expect(timeline.locator('[data-summary]')).toContainText('1.000000 USD/hour'); + await expect(timeline.locator('[data-summary]')).toContainText('$1.00/hr in this selection'); await timeline.getByRole('button', { name: 'Clear filters' }).click(); const canvas = timeline.locator('canvas'); await canvas.scrollIntoViewIfNeeded(); @@ -53,7 +53,7 @@ for (const width of [1280, 390]) { await expect(modal).toBeVisible(); await expect(modal.getByLabel('Planning budget (USD/hour)')).toHaveValue('0.500000'); await modal.getByLabel('Planning budget (USD/hour)').fill('0.250000'); - await expect(modal.locator('#ladder-event-preview')).toContainText('2.250000'); + await expect(modal.locator('#ladder-event-preview')).toContainText('$2.25/hr'); await modal.getByRole('button', { name: 'Undo draft changes' }).click(); await expect(modal.getByLabel('Planning budget (USD/hour)')).toHaveValue('0.500000'); await modal.getByLabel('Scheduled date and time (UTC)').fill('2020-01-01T00:00'); @@ -72,8 +72,8 @@ for (const width of [1280, 390]) { await expect(modal).toHaveCount(0); expect(saves).toHaveLength(1); await page.reload(); - await expect(timeline.locator('[data-table]')).toContainText('0.250000'); - await expect(timeline.locator('[data-table]')).toContainText('2030-01-04T00:00:00.000Z'); + await expect(timeline.locator('[data-table]')).toContainText('$0.2500/hr'); + await expect(timeline.locator('[data-table]')).toContainText('Jan 4, 2030, 00:00 UTC'); await timeline.locator('[data-event="event-2"]').focus(); await page.keyboard.press('Enter'); await expect(modal.getByLabel('Scheduled date and time (UTC)')).toBeFocused(); rejectNextSave = true;