astryx-dracula 0.2.1 → 0.3.0

package/templates/table-page-heatmap-status.tsx

@@ -1,7 +1,25 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > (LH > H[g2 a=center] > Hd"Status"[level=1] + IB*2 + B"Refresh") + (LC[p3] > V[g4] > (V[g3] > C[p3] + Tx"Incidents by day and hour"[t=supporting] + (H[g4] > (H[g2] > Tx[t=supporting])*4)) + (T > (TR > THC*8) + (TR > TC*8)*5))
+//   L > (LH[divider] > H[g2 a=center] > Hd"Status"[level=1] + IB"Filter"[variant=ghost] + IB"Export"[variant=ghost] + B.secondary"Refresh") + (LC[p3] > V[g4] > (V[g3] > C[p4] + Tx"Incidents by day and hour"[t=supporting] + (H[g4] > (H[g2] > Tx[t=supporting])*4)) + (T[hover] > (TR > THC"Incident" + THC"Product" + THC"Description" + THC"Started" + THC"Duration" + THC"On-call" + THC"Status" + THC"Date") + (TR > TC"INC-4008" + TC"Business Suite" + TC"Notification delivery delays" + TC"09:15" + TC"ongoing" + TC"Carlos Mendez" + (TC > Tk.red"Ongoing") + TC"2025-01-15")*5))
 
+/**
+ * Status — the incident heatmap for the week plus the log behind it.
+ *
+ * Frame: page header (title + icon actions) | content column (heatmap, table).
+ *
+ * Container policy: the day/hour heatmap is a single Card widget; incidents
+ * render as dense rows in one edge-to-edge table. Every heat cell prints its
+ * count, so the green/orange/red ramp reinforces the numbers rather than
+ * carrying the reading on its own, and status is a Token instead of a badge.
+ *
+ * Responsive contract:
+ *   no media queries — the heatmap is an SVG that scales to its column, so it
+ *   reflows at any width. The table declares a ~910px floor across its eight
+ *   columns and truncates cells (description to two lines), so narrower
+ *   viewports scroll the table horizontally instead of widening the page.
+ */
+
+import type {CSSProperties} from 'react';
 import {
   VStack,
   HStack,
@@ -15,12 +33,16 @@ import {Button} from '@astryxdesign/core/Button';
 import {IconButton} from '@astryxdesign/core/IconButton';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Avatar} from '@astryxdesign/core/Avatar';
-import {Badge} from '@astryxdesign/core/Badge';
+import {Token} from '@astryxdesign/core/Token';
 import {Card} from '@astryxdesign/core/Card';
 import {Link} from '@astryxdesign/core/Link';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
 import {Filter, Download, RotateCw} from 'lucide-react';
+import {CHART_HUES} from 'astryx-dracula/shared/chart-hues';
+import {ChartLegend, type ChartLegendEntry} from 'astryx-dracula/shared/chart-legend';
+import {CHART_PANEL_STYLE} from 'astryx-dracula/shared/chart-panel-style';
+import {ChartLabel} from 'astryx-dracula/shared/chart-labels';
 
 // ============= ICONS (verified lucide-react exports) =============
 // Filter ← FunnelIcon, Download ← ArrowDownTrayIcon, RotateCw ← ArrowPathIcon.
@@ -58,7 +80,7 @@ const incidents: IncidentRow[] = [
     id: 'INC-4008',
     product: 'Business Suite',
     title:
-      'Notification delivery delays affecting mobile push and email channels — queue saturation under investigation',
+      'Notification delivery delays affecting mobile push and email channels, queue saturation under investigation',
     severity: 'major',
     oncall: 'Carlos Mendez',
     status: 'ongoing',
@@ -73,7 +95,7 @@ const incidents: IncidentRow[] = [
     id: 'INC-4001',
     product: 'Ads Manager',
     title:
-      'Campaign creation timing out for ~12% of advertisers in EMEA region — root caused to elevated DB write latency',
+      'Campaign creation timing out for ~12% of advertisers in EMEA region, root caused to elevated DB write latency',
     severity: 'critical',
     oncall: 'Sarah Chen',
     status: 'resolved',
@@ -160,7 +182,7 @@ const incidents: IncidentRow[] = [
     id: 'INC-4007',
     product: 'Messenger API',
     title:
-      'Webhook delivery failures for subscribed page events — retries succeeded but signaled false alerts',
+      'Webhook delivery failures for subscribed page events, retries succeeded but signaled false alerts',
     severity: 'minor',
     oncall: 'Mei Lin',
     status: 'resolved',
@@ -176,7 +198,7 @@ const incidents: IncidentRow[] = [
     id: 'INC-4009',
     product: 'Pages',
     title:
-      'Image upload timeouts for posts larger than 4MB — auto-recovered after CDN region failover',
+      'Image upload timeouts for posts larger than 4MB, auto-recovered after CDN region failover',
     severity: 'minor',
     oncall: 'Fatima Al-Rashid',
     status: 'resolved',
@@ -190,7 +212,7 @@ const incidents: IncidentRow[] = [
     id: 'INC-4010',
     product: 'Graph API',
     title:
-      'Intermittent 503 errors on a single load balancer in us-east-1 — auto-healed by health check rotation',
+      'Intermittent 503 errors on a single load balancer in us-east-1, auto-healed by health check rotation',
     severity: 'minor',
     oncall: 'Lucas Andersson',
     status: 'resolved',
@@ -246,7 +268,7 @@ const incidents: IncidentRow[] = [
     id: 'INC-4014',
     product: 'Business Suite',
     title:
-      'Slow inbox loading times (>3s p95) for accounts with large message histories — index rebuild in progress',
+      'Slow inbox loading times (>3s p95) for accounts with large message histories, index rebuild in progress',
     severity: 'minor',
     oncall: 'Andre Santos',
     status: 'resolved',
@@ -291,19 +313,28 @@ function buildHeatmapData(data: IncidentRow[]) {
   );
 }
 
-const statusVariant: Record<string, 'error' | 'warning' | 'info' | 'success'> =
-  {
-    ongoing: 'error',
-    identified: 'warning',
-    monitoring: 'info',
-    resolved: 'success',
-  };
+const STATUS_TOKEN_COLOR: Record<
+  IncidentRow['status'],
+  'red' | 'yellow' | 'cyan' | 'green'
+> = {
+  ongoing: 'red',
+  identified: 'yellow',
+  monitoring: 'cyan',
+  resolved: 'green',
+};
+
+const STATUS_LABEL: Record<IncidentRow['status'], string> = {
+  ongoing: 'Ongoing',
+  identified: 'Identified',
+  monitoring: 'Monitoring',
+  resolved: 'Resolved',
+};
 
 const columns: TableColumn<IncidentRow>[] = [
   {
     key: 'id',
     header: 'Incident',
-    width: pixel(110),
+    width: pixel(96),
     renderCell: (item: IncidentRow) => (
       <Link href="#/templates/table-page-heatmap-status" isStandalone>
         {item.id}
@@ -313,21 +344,29 @@ const columns: TableColumn<IncidentRow>[] = [
   {
     key: 'product',
     header: 'Product',
-    width: proportional(2),
-    renderCell: (item: IncidentRow) => <Text type="body">{item.product}</Text>,
+    width: proportional(2, {minWidth: 120}),
+    renderCell: (item: IncidentRow) => (
+      <Text type="body" maxLines={1}>
+        {item.product}
+      </Text>
+    ),
   },
   {
     key: 'title',
     header: 'Description',
-    width: proportional(5),
-    renderCell: (item: IncidentRow) => <Text type="body">{item.title}</Text>,
+    width: proportional(5, {minWidth: 160}),
+    renderCell: (item: IncidentRow) => (
+      <Text type="body" maxLines={2}>
+        {item.title}
+      </Text>
+    ),
   },
   {
     key: 'startTime',
     header: 'Started',
-    width: pixel(96),
+    width: pixel(88),
     renderCell: (item: IncidentRow) => (
-      <Text type="body" hasTabularNumbers>
+      <Text type="body" hasTabularNumbers maxLines={1}>
         {item.startTime}
       </Text>
     ),
@@ -335,9 +374,9 @@ const columns: TableColumn<IncidentRow>[] = [
   {
     key: 'duration',
     header: 'Duration',
-    width: pixel(100),
+    width: pixel(96),
     renderCell: (item: IncidentRow) => (
-      <Text type="body" hasTabularNumbers>
+      <Text type="body" hasTabularNumbers maxLines={1}>
         {item.duration}
       </Text>
     ),
@@ -345,11 +384,15 @@ const columns: TableColumn<IncidentRow>[] = [
   {
     key: 'oncall',
     header: 'On-call',
-    width: proportional(2),
+    width: proportional(2, {minWidth: 120}),
     renderCell: (item: IncidentRow) => (
       <HStack gap={2} vAlign="center">
         <Avatar name={item.oncall} size="sm" />
-        <Text type="body">{item.oncall}</Text>
+        <StackItem size="fill">
+          <Text type="body" maxLines={1}>
+            {item.oncall}
+          </Text>
+        </StackItem>
       </HStack>
     ),
   },
@@ -358,18 +401,19 @@ const columns: TableColumn<IncidentRow>[] = [
     header: 'Status',
     width: pixel(120),
     renderCell: (item: IncidentRow) => (
-      <Badge
-        label={item.status.charAt(0).toUpperCase() + item.status.slice(1)}
-        variant={statusVariant[item.status]}
+      <Token
+        size="sm"
+        color={STATUS_TOKEN_COLOR[item.status]}
+        label={STATUS_LABEL[item.status]}
       />
     ),
   },
   {
     key: 'date',
     header: 'Date',
-    width: pixel(110),
+    width: pixel(112),
     renderCell: (item: IncidentRow) => (
-      <Text type="body" hasTabularNumbers>
+      <Text type="body" hasTabularNumbers maxLines={1}>
         {item.date}
       </Text>
     ),
@@ -380,24 +424,32 @@ const columns: TableColumn<IncidentRow>[] = [
 
 // Incident-count ramp: quiet days rest on the Dracula surface, busier cells
 // climb green → orange → red.
+// Delegates to CHART_HUES, the sanctioned categorical source. Writing the
+// literal here is what let a --dracula-* primitive reach a chart mark: the
+// dictionary itself held primitives, so "use the module" was not available.
 function heatFill(count: number): string {
   if (count >= 3) {
-    return 'var(--dracula-red)';
+    return CHART_HUES.red;
   }
   if (count === 2) {
-    return 'var(--dracula-orange)';
+    return CHART_HUES.orange;
   }
   if (count === 1) {
-    return 'var(--dracula-green)';
+    return CHART_HUES.green;
   }
-  return 'var(--dracula-bg-light)';
+  // Zero is a magnitude, not a severity, so it wears the surface tier rather
+  // than a data hue -- which is why the legend type needs a background arm.
+  return 'var(--color-background-card)';
 }
 
-const HEAT_LEGEND = [
-  {label: '0', fill: 'var(--dracula-bg-light)'},
-  {label: '1', fill: 'var(--dracula-green)'},
-  {label: '2', fill: 'var(--dracula-orange)'},
-  {label: '3+', fill: 'var(--dracula-red)'},
+// The zero swatch and its cell MUST move together: the legend is how a reader
+// learns what a colour means, so a legend that disagrees with the grid teaches
+// them the wrong mapping.
+const HEAT_LEGEND: readonly ChartLegendEntry[] = [
+  {label: '0', color: 'var(--color-background-card)'},
+  {label: '1', color: CHART_HUES.green},
+  {label: '2', color: CHART_HUES.orange},
+  {label: '3+', color: CHART_HUES.red},
 ];
 
 function OutageHeatmap() {
@@ -413,40 +465,28 @@ function OutageHeatmap() {
     heatmapData.find(d => d.day === day && d.hour === hour)?.incidents ?? 0;
   return (
     <VStack gap={3}>
-      <Card
-        padding={3}
-        style={{
-          backgroundColor: 'var(--color-background)',
-          border: 'var(--border-width) solid var(--color-separator)',
-        }}>
+      <Card padding={4} style={CHART_PANEL_STYLE}>
         <svg
           viewBox={`0 0 ${W} ${H}`}
           width="100%"
           role="img"
           aria-label="Incidents by day and hour, January 12 to 18">
           {DAYS.map((day, di) => (
-            <text
+            <ChartLabel
               key={day}
               x={labelW + di * (cellW + gap) + cellW / 2}
-              y={14}
-              textAnchor="middle"
-              fontSize={9}
-              fill="var(--color-text-paragraph)"
-              fontFamily="var(--font-family-mono)">
+              y={14}>
               {day}
-            </text>
+            </ChartLabel>
           ))}
           {HOURS.map((hour, hi) => (
             <g key={hour}>
-              <text
+              <ChartLabel
                 x={labelW - 6}
                 y={labelH + hi * (cellH + gap) + cellH / 2 + 3}
-                textAnchor="end"
-                fontSize={9}
-                fill="var(--color-text-paragraph)"
-                fontFamily="var(--font-family-mono)">
+                textAnchor="end">
                 {hour}
-              </text>
+              </ChartLabel>
               {DAYS.map((day, di) => {
                 const count = countFor(day, hour);
                 return (
@@ -459,17 +499,28 @@ function OutageHeatmap() {
                       rx={4}
                       fill={heatFill(count)}
                     />
-                    {count > 0 && (
-                      <text
-                        x={labelW + di * (cellW + gap) + cellW / 2}
-                        y={labelH + hi * (cellH + gap) + cellH / 2 + 3}
-                        textAnchor="middle"
-                        fontSize={9}
-                        fill="var(--dracula-bg-dark)"
-                        fontFamily="var(--font-family-mono)">
-                        {count}
-                      </text>
-                    )}
+                    {/* Every cell prints its count, empty ones included, so
+                        the ramp reinforces the number instead of carrying the
+                        reading on its own. */}
+                    <ChartLabel
+                      x={labelW + di * (cellW + gap) + cellW / 2}
+                      y={labelH + hi * (cellH + gap) + cellH / 2 + 3}
+                      // On-fill ink follows the cell it sits on, so it takes
+                      // the --color-on-* arm for that status rather than one
+                      // fixed token. --color-on-dark is the wrong target here:
+                      // it is #F8F8F2, near-white, which would fail on the
+                      // saturated green/orange/red fills.
+                      fill={
+                        count >= 3
+                          ? 'var(--color-on-error)'
+                          : count === 2
+                            ? 'var(--color-on-warning)'
+                            : count === 1
+                              ? 'var(--color-on-success)'
+                              : undefined
+                      }>
+                      {count}
+                    </ChartLabel>
                   </g>
                 );
               })}
@@ -477,40 +528,48 @@ function OutageHeatmap() {
           ))}
         </svg>
       </Card>
-      <Text type="supporting" color="secondary">
-        Incidents by day and hour · Jan 12–18
-      </Text>
-      <HStack gap={4} vAlign="center">
-        {HEAT_LEGEND.map(entry => (
-          <HStack key={entry.label} gap={2} vAlign="center">
-            <svg
-              width={12}
-              height={12}
-              role="img"
-              aria-label={`${entry.label} incidents`}>
-              <rect width={12} height={12} rx={4} fill={entry.fill} />
-            </svg>
-            <Text type="supporting" color="secondary" hasTabularNumbers>
-              {entry.label}
-            </Text>
-          </HStack>
-        ))}
-      </HStack>
+      {/* Legend rows go through shared/chart-legend.tsx. The ramp itself stays
+          local: it encodes SEVERITY (0/1/2/3+ against green/orange/red), which
+          is a status vocabulary, not a magnitude. A sequential magnitude ramp
+          would invert this one — on a dark page a high count reads lighter,
+          which is the opposite of "more is worse" here. The --color-data-<family>-
+          1..5 steps remain in tokens.css for a consumer that genuinely needs
+          one; nothing in this kit does, which is why the module that wrapped
+          them is gone. */}
+      <ChartLegend
+        entries={HEAT_LEGEND}
+        gap={2}
+        swatchSize={12}
+        caption={
+          <Text type="supporting" color="secondary">
+            Incidents by day and hour · Jan 12–18
+          </Text>
+        }
+      />
     </VStack>
   );
 }
 
 // ============= PAGE =============
 
+// A definite ancestor for `Layout height="fill"`. 100dvh, not minHeight: '100%':
+// a percentage min-height against an indefinite containing block computes to 0
+// (CSS 2.1 10.5), so the soft failure would survive and the document would keep
+// the scroll. LayoutContent is overflow:auto, so the definite height lands as a
+// content-pane scroller rather than a clip. Same shape as dashboard.tsx and
+// editor.tsx:302.
+const pageStyle: CSSProperties = {height: '100dvh'};
+
 export default function HeatmapTable() {
   return (
     <Layout
+      style={pageStyle}
       height="fill"
       header={
-        <LayoutHeader hasDivider>
+        <LayoutHeader hasDivider padding={6}>
           <HStack gap={2} vAlign="center">
             <StackItem size="fill">
-              <Heading level={1}>Status</Heading>
+              <Heading level={1} type="display-2">Status</Heading>
             </StackItem>
             <IconButton
               label="Filter"
@@ -524,7 +583,11 @@ export default function HeatmapTable() {
               variant="ghost"
               tooltip="Export"
             />
-            <Button label="Refresh" icon={<Icon icon={RotateCw} size="sm" />} />
+            <Button
+              label="Refresh"
+              variant="secondary"
+              icon={<Icon icon={RotateCw} size="sm" />}
+            />
           </HStack>
         </LayoutHeader>
       }
@@ -539,6 +602,7 @@ export default function HeatmapTable() {
               idKey="id"
               density="balanced"
               dividers="rows"
+              textOverflow="truncate"
               hasHover
             />
           </VStack>