added downtime minutes and availability view

frontend/src/routeTree.gen.ts

@@ -10,13 +10,19 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as AvailabilityIndexRouteImport } from './routes/availability/index'
 import { Route as IncidentIdIndexRouteImport } from './routes/$incidentId/index'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AvailabilityIndexRoute = AvailabilityIndexRouteImport.update({
+  id: '/availability/',
+  path: '/availability/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IncidentIdIndexRoute = IncidentIdIndexRouteImport.update({
   id: '/$incidentId/',
   path: '/$incidentId/',
@@ -26,27 +32,31 @@ const IncidentIdIndexRoute = IncidentIdIndexRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/$incidentId': typeof IncidentIdIndexRoute
+  '/availability': typeof AvailabilityIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/$incidentId': typeof IncidentIdIndexRoute
+  '/availability': typeof AvailabilityIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/$incidentId/': typeof IncidentIdIndexRoute
+  '/availability/': typeof AvailabilityIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/$incidentId'
+  fullPaths: '/' | '/$incidentId' | '/availability'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/$incidentId'
-  id: '__root__' | '/' | '/$incidentId/'
+  to: '/' | '/$incidentId' | '/availability'
+  id: '__root__' | '/' | '/$incidentId/' | '/availability/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   IncidentIdIndexRoute: typeof IncidentIdIndexRoute
+  AvailabilityIndexRoute: typeof AvailabilityIndexRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -58,6 +68,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/availability/': {
+      id: '/availability/'
+      path: '/availability'
+      fullPath: '/availability'
+      preLoaderRoute: typeof AvailabilityIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/$incidentId/': {
       id: '/$incidentId/'
       path: '/$incidentId'
@@ -71,6 +88,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   IncidentIdIndexRoute: IncidentIdIndexRoute,
+  AvailabilityIndexRoute: AvailabilityIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

frontend/src/routes/$incidentId/components/DowntimeField.tsx

@@ -0,0 +1,45 @@
+interface DowntimeFieldProps {
+  isEditing: boolean;
+  value: number | null;
+  draftValue: number | null;
+  onChange: (value: number | null) => void;
+}
+
+export function DowntimeField({
+  isEditing,
+  value,
+  draftValue,
+  onChange,
+}: DowntimeFieldProps) {
+  return (
+    <div className="flex items-center gap-space-md">
+      <div className="text-content-secondary w-20 flex-none text-sm font-medium">
+        Downtime
+      </div>
+      <div className="flex flex-1 items-center justify-end">
+        {isEditing ? (
+          <div className="flex items-center gap-space-xs">
+            <input
+              type="number"
+              min="0"
+              value={draftValue ?? ''}
+              onChange={e => {
+                const num = e.target.valueAsNumber;
+                onChange(e.target.value === '' ? null : Number.isNaN(num) ? null : num);
+              }}
+              placeholder="—"
+              className="w-20 rounded-radius-sm border border-secondary bg-background-primary px-space-sm py-space-xs text-right text-sm focus:outline-none focus:ring-1"
+            />
+            <span className="text-content-secondary text-sm">min</span>
+          </div>
+        ) : (
+          <span
+            className={`text-sm ${value != null ? 'text-content-primary' : 'text-content-tertiary'}`}
+          >
+            {value != null ? `${value} min` : 'Not set'}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/routes/$incidentId/components/MilestonesCard.tsx

@@ -8,6 +8,8 @@ import {Pencil} from 'lucide-react';
 import type {IncidentDetail} from '../queries/incidentDetailQueryOptions';
 import {updateIncidentFieldMutationOptions} from '../queries/updateIncidentFieldMutationOptions';
 
+import {DowntimeField} from './DowntimeField';
+
 interface MilestonesCardProps {
   incident: IncidentDetail;
 }
@@ -71,6 +73,9 @@ function combineDateAndTime(date: Date, time: string): Date {
 
 export function MilestonesCard({incident}: MilestonesCardProps) {
   const [isEditing, setIsEditing] = useState(false);
+  const [draftDowntime, setDraftDowntime] = useState<number | null>(
+    incident.total_downtime
+  );
   const [draftValues, setDraftValues] = useState<DraftValues>(() => ({
     time_started: parseIncidentDateTime(incident.time_started),
     time_detected: parseIncidentDateTime(incident.time_detected),
@@ -98,6 +103,7 @@ export function MilestonesCard({incident}: MilestonesCardProps) {
   };
 
   const startEditing = () => {
+    setDraftDowntime(incident.total_downtime);
     const drafts: DraftValues = {
       time_started: parseIncidentDateTime(incident.time_started),
       time_detected: parseIncidentDateTime(incident.time_detected),
@@ -147,6 +153,14 @@ export function MilestonesCard({incident}: MilestonesCardProps) {
           });
         }
       }
+      if (draftDowntime !== incident.total_downtime) {
+        await updateIncidentField.mutateAsync({
+          incidentId: incident.id,
+          field: 'total_downtime',
+          value: draftDowntime,
+        });
+      }
+
       setIsEditing(false);
     } finally {
       setIsSaving(false);
@@ -198,6 +212,12 @@ export function MilestonesCard({incident}: MilestonesCardProps) {
             </div>
           </div>
         ))}
+        <DowntimeField
+          isEditing={isEditing}
+          value={incident.total_downtime}
+          draftValue={draftDowntime}
+          onChange={setDraftDowntime}
+        />
       </div>
       {isEditing && (
         <div className="mt-space-lg flex items-center justify-end gap-space-xs">

frontend/src/routes/$incidentId/queries/incidentDetailQueryOptions.ts

@@ -43,6 +43,7 @@ const IncidentDetailSchema = z.object({
   time_analyzed: z.string().nullable(),
   time_mitigated: z.string().nullable(),
   time_recovered: z.string().nullable(),
+  total_downtime: z.number().int().nullable(),
 });
 
 const IncidentOrRedirectSchema = z.union([

frontend/src/routes/$incidentId/queries/updateIncidentFieldMutationOptions.ts

@@ -39,7 +39,8 @@ export type UpdateIncidentFieldArgs =
         | 'time_mitigated'
         | 'time_recovered';
       value: string | null;
-    };
+    }
+  | {incidentId: string; field: 'total_downtime'; value: number | null};
 
 const PatchResponseSchema = z.object({
   id: z.string(),
@@ -59,6 +60,7 @@ const PatchResponseSchema = z.object({
   time_analyzed: z.string().nullable(),
   time_mitigated: z.string().nullable(),
   time_recovered: z.string().nullable(),
+  total_downtime: z.number().int().nullable(),
 });
 
 export function updateIncidentFieldMutationOptions(queryClient: QueryClient) {

frontend/src/routes/availability/components/HeatmapBar.tsx

@@ -0,0 +1,83 @@
+import {Link} from '@tanstack/react-router';
+import {cn} from 'utils/cn';
+
+import {getAvailabilityLevel, type AvailabilityLevel} from '../utils';
+
+const AVAILABILITY_BG: Record<AvailabilityLevel, string> = {
+  success: 'bg-graphics-success-moderate',
+  warning: 'bg-graphics-warning-moderate',
+  danger: 'bg-graphics-danger-moderate',
+};
+
+interface HeatmapBlock {
+  label: string;
+  availability: number;
+  periodStart: string;
+  periodEnd: string;
+  regionName: string;
+}
+
+interface HeatmapBarProps {
+  blocks: HeatmapBlock[];
+  showEndLabels?: boolean;
+}
+
+export function HeatmapBar({blocks, showEndLabels}: HeatmapBarProps) {
+  return (
+    <div className="flex gap-px overflow-visible">
+      {blocks.map((block, i) => {
+        const isFullUptime = block.availability >= 100;
+        const displayPct = isFullUptime
+          ? '100.00'
+          : Math.min(99.99, block.availability).toFixed(2);
+        const inner = (
+          <>
+            <div
+              className={cn(
+                'flex h-8 items-center justify-center sm:transition-opacity sm:group-hover:opacity-80',
+                AVAILABILITY_BG[getAvailabilityLevel(block.availability)],
+                i === 0 && 'rounded-l-md',
+                i === blocks.length - 1 && 'rounded-r-md'
+              )}
+            >
+              <span className="font-mono text-size-sm font-medium text-white drop-shadow-md">
+                {displayPct}%
+              </span>
+            </div>
+            <div
+              className={cn(
+                'pointer-events-none absolute top-full left-1/2 z-10 mt-0.5 -translate-x-1/2 whitespace-nowrap sm:block',
+                showEndLabels && i === blocks.length - 1
+                  ? 'opacity-100'
+                  : 'hidden opacity-0 transition-opacity group-hover:opacity-100'
+              )}
+            >
+              <span className="text-size-xs text-content-secondary">{block.label}</span>
+            </div>
+          </>
+        );
+
+        return isFullUptime ? (
+          <div key={i} className="group relative min-w-0 flex-1">
+            {inner}
+          </div>
+        ) : (
+          <Link
+            key={i}
+            className="group relative min-w-0 flex-1"
+            to="/"
+            search={{
+              affected_region: [block.regionName],
+              created_after: block.periodStart,
+              created_before: block.periodEnd,
+              service_tier: ['T0'],
+              status: ['Any'],
+            }}
+          >
+            {inner}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}

frontend/src/routes/availability/components/PeriodTabs.tsx

@@ -0,0 +1,40 @@
+import {Link} from '@tanstack/react-router';
+import {cn} from 'utils/cn';
+
+import {type Period} from '../queries/availabilityQueryOptions';
+
+const TABS: {value: Period; label: string}[] = [
+  {value: 'month', label: 'Month'},
+  {value: 'quarter', label: 'Quarter'},
+  {value: 'year', label: 'Year'},
+];
+
+interface PeriodTabsProps {
+  activePeriod: Period;
+}
+
+export function PeriodTabs({activePeriod}: PeriodTabsProps) {
+  return (
+    <div className="gap-space-2xs flex">
+      {TABS.map(tab => (
+        <Link
+          key={tab.value}
+          to="/availability"
+          search={{period: tab.value}}
+          preload="intent"
+          className={cn(
+            'rounded-radius-sm px-space-lg py-space-sm text-size-sm font-medium transition-colors',
+            {
+              'bg-background-primary dark:bg-background-transparent-neutral-muted text-content-headings shadow-sm':
+                activePeriod === tab.value,
+              'text-content-secondary hover:text-black dark:hover:text-white':
+                activePeriod !== tab.value,
+            }
+          )}
+        >
+          {tab.label}
+        </Link>
+      ))}
+    </div>
+  );
+}

frontend/src/routes/availability/components/RegionCard.tsx

@@ -0,0 +1,35 @@
+import {Card} from 'components/Card';
+
+import {type PeriodData} from '../queries/availabilityQueryOptions';
+
+import {HeatmapBar} from './HeatmapBar';
+
+interface RegionCardProps {
+  regionName: string;
+  periods: PeriodData[];
+  showPeriodLabels?: boolean;
+}
+
+export function RegionCard({regionName, periods, showPeriodLabels}: RegionCardProps) {
+  const heatmapBlocks = [...periods].reverse().map(p => {
+    const region = p.regions.find(r => r.name === regionName);
+    return {
+      label: p.label,
+      availability: region?.availability_percentage ?? 100,
+      periodStart: p.start,
+      periodEnd: p.end,
+      regionName,
+    };
+  });
+
+  return (
+    <Card className="p-0">
+      <div className="flex flex-col gap-3 px-space-xl pt-3 pb-6">
+        <span className="text-content-headings text-size-lg font-semibold">
+          {regionName}
+        </span>
+        <HeatmapBar blocks={heatmapBlocks} showEndLabels={showPeriodLabels} />
+      </div>
+    </Card>
+  );
+}