@astryxdesign/cli 0.4.3 → 0.4.4-canary.0f4d45f

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

@@ -1,467 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useMemo} from 'react';
-import {
-  VStack,
-  HStack,
-  StackItem,
-  Layout,
-  LayoutContent,
-  LayoutHeader,
-} from '@astryxdesign/core/Layout';
-import {Text, Heading} from '@astryxdesign/core/Text';
-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 {Link} from '@astryxdesign/core/Link';
-import {Table, proportional, pixel} from '@astryxdesign/core/Table';
-import type {TableColumn} from '@astryxdesign/core/Table';
-import {Chart, ChartAxis, ChartHeatmapGL} from '@astryxdesign/lab';
-import {
-  FunnelIcon,
-  ArrowDownTrayIcon,
-  ArrowPathIcon,
-} from '@heroicons/react/24/outline';
-
-// ============= DATA =============
-
-type Severity = 'critical' | 'major' | 'minor' | 'resolved';
-type ProductName =
-  | 'Ads Manager'
-  | 'Business Suite'
-  | 'Commerce Manager'
-  | 'Pages'
-  | 'Messenger API'
-  | 'Graph API'
-  | 'WhatsApp Business'
-  | 'Instagram API';
-
-function avatarSvg(bg: string) {
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="${bg}"/><circle cx="50" cy="38" r="18" fill="white" opacity="0.85"/><ellipse cx="50" cy="90" rx="30" ry="28" fill="white" opacity="0.85"/></svg>`;
-  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-}
-
-const ONCALL_AVATARS: Record<string, string> = {
-  'Sarah Chen': avatarSvg('#6366F1'),
-  'David Kim': avatarSvg('#EC4899'),
-  'Priya Sharma': avatarSvg('#F59E0B'),
-  'Marcus Rivera': avatarSvg('#10B981'),
-  'Elena Volkov': avatarSvg('#8B5CF6'),
-  'Noah Williams': avatarSvg('#EF4444'),
-  'Mei Lin': avatarSvg('#06B6D4'),
-  'Carlos Mendez': avatarSvg('#F97316'),
-  'Fatima Al-Rashid': avatarSvg('#3B82F6'),
-  'Lucas Andersson': avatarSvg('#14B8A6'),
-  'Sofia Garcia': avatarSvg('#A855F7'),
-  'Raj Kapoor': avatarSvg('#E11D48'),
-  'Emma Thompson': avatarSvg('#0EA5E9'),
-  'Andre Santos': avatarSvg('#84CC16'),
-};
-
-interface IncidentRow extends Record<string, unknown> {
-  id: string;
-  product: ProductName;
-  title: string;
-  severity: Severity;
-  status: 'ongoing' | 'identified' | 'monitoring' | 'resolved';
-  oncall: string;
-  startTime: string;
-  duration: string;
-  date: string;
-  dayOfWeek: number;
-  hour: number;
-}
-
-const incidents: IncidentRow[] = [
-  // Active — ongoing
-  {
-    id: 'INC-4008',
-    product: 'Business Suite',
-    title:
-      'Notification delivery delays affecting mobile push and email channels — queue saturation under investigation',
-    severity: 'major',
-    oncall: 'Carlos Mendez',
-    status: 'ongoing',
-    startTime: '09:15',
-    duration: 'ongoing',
-    date: '2025-01-15',
-    dayOfWeek: 3,
-    hour: 9,
-  },
-  // Tue (2) 3pm — the only major outage cluster (3 incidents)
-  {
-    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',
-    severity: 'critical',
-    oncall: 'Sarah Chen',
-    status: 'resolved',
-    startTime: '15:10',
-    duration: '2h 15m',
-    date: '2025-01-14',
-    dayOfWeek: 2,
-    hour: 15,
-  },
-  {
-    id: 'INC-4002',
-    product: 'Graph API',
-    title:
-      'Elevated 5xx error rates on /me and /me/accounts endpoints affecting third-party integrations globally',
-    severity: 'critical',
-    oncall: 'David Kim',
-    status: 'resolved',
-    startTime: '15:30',
-    duration: '3h 20m',
-    date: '2025-01-14',
-    dayOfWeek: 2,
-    hour: 15,
-  },
-  {
-    id: 'INC-4003',
-    product: 'Instagram API',
-    title:
-      'Media upload failures for image and video content via /media endpoint affecting ~8% of publishers',
-    severity: 'major',
-    oncall: 'Priya Sharma',
-    status: 'resolved',
-    startTime: '15:05',
-    duration: '1h 50m',
-    date: '2025-01-14',
-    dayOfWeek: 2,
-    hour: 15,
-  },
-  // Tue (2) 4pm — spillover (2 incidents)
-  {
-    id: 'INC-4004',
-    product: 'Ads Manager',
-    title:
-      'Audience insights tab returning empty results due to cache invalidation cascade from earlier outage',
-    severity: 'minor',
-    oncall: 'Marcus Rivera',
-    status: 'resolved',
-    startTime: '16:00',
-    duration: '45m',
-    date: '2025-01-14',
-    dayOfWeek: 2,
-    hour: 16,
-  },
-  {
-    id: 'INC-4005',
-    product: 'WhatsApp Business',
-    title:
-      'Outbound message delivery delays of 2-5 minutes for high-volume senders due to queue backpressure',
-    severity: 'major',
-    oncall: 'Elena Volkov',
-    status: 'resolved',
-    startTime: '16:20',
-    duration: '1h 15m',
-    date: '2025-01-14',
-    dayOfWeek: 2,
-    hour: 16,
-  },
-  // Thu (4) 10am — single incident
-  {
-    id: 'INC-4006',
-    product: 'Commerce Manager',
-    title:
-      'Product catalog sync failures from Shopify and BigCommerce integrations after schema migration deployed',
-    severity: 'major',
-    oncall: 'Noah Williams',
-    status: 'resolved',
-    startTime: '10:15',
-    duration: '2h 40m',
-    date: '2025-01-16',
-    dayOfWeek: 4,
-    hour: 10,
-  },
-  // Fri (5) 4pm — single incident
-  {
-    id: 'INC-4007',
-    product: 'Messenger API',
-    title:
-      'Webhook delivery failures for subscribed page events — retries succeeded but signaled false alerts',
-    severity: 'minor',
-    oncall: 'Mei Lin',
-    status: 'resolved',
-    startTime: '16:30',
-    duration: '45m',
-    date: '2025-01-17',
-    dayOfWeek: 5,
-    hour: 16,
-  },
-  // Active incident
-  // Scattered minor blips — light pink cells
-  {
-    id: 'INC-4009',
-    product: 'Pages',
-    title:
-      'Image upload timeouts for posts larger than 4MB — auto-recovered after CDN region failover',
-    severity: 'minor',
-    oncall: 'Fatima Al-Rashid',
-    status: 'resolved',
-    startTime: '11:00',
-    duration: '20m',
-    date: '2025-01-12',
-    dayOfWeek: 0,
-    hour: 11,
-  },
-  {
-    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',
-    severity: 'minor',
-    oncall: 'Lucas Andersson',
-    status: 'resolved',
-    startTime: '14:30',
-    duration: '15m',
-    date: '2025-01-13',
-    dayOfWeek: 1,
-    hour: 14,
-  },
-  {
-    id: 'INC-4011',
-    product: 'WhatsApp Business',
-    title:
-      'Template message rejections due to stale category cache for newly approved templates',
-    severity: 'minor',
-    oncall: 'Sofia Garcia',
-    status: 'resolved',
-    startTime: '13:00',
-    duration: '30m',
-    date: '2025-01-16',
-    dayOfWeek: 4,
-    hour: 13,
-  },
-  {
-    id: 'INC-4012',
-    product: 'Commerce Manager',
-    title:
-      'Inventory count mismatch between checkout and catalog services for ~200 SKUs in test region',
-    severity: 'minor',
-    oncall: 'Raj Kapoor',
-    status: 'resolved',
-    startTime: '12:00',
-    duration: '1h 00m',
-    date: '2025-01-17',
-    dayOfWeek: 5,
-    hour: 12,
-  },
-  {
-    id: 'INC-4013',
-    product: 'Instagram API',
-    title:
-      'Story insights data delayed by 30-60 minutes for accounts with >100K followers',
-    severity: 'minor',
-    oncall: 'Emma Thompson',
-    status: 'resolved',
-    startTime: '10:00',
-    duration: '45m',
-    date: '2025-01-18',
-    dayOfWeek: 6,
-    hour: 10,
-  },
-  {
-    id: 'INC-4014',
-    product: 'Business Suite',
-    title:
-      'Slow inbox loading times (>3s p95) for accounts with large message histories — index rebuild in progress',
-    severity: 'minor',
-    oncall: 'Andre Santos',
-    status: 'resolved',
-    startTime: '15:00',
-    duration: '25m',
-    date: '2025-01-15',
-    dayOfWeek: 3,
-    hour: 15,
-  },
-];
-
-const DAYS = [
-  'Jan 12',
-  'Jan 13',
-  'Jan 14',
-  'Jan 15',
-  'Jan 16',
-  'Jan 17',
-  'Jan 18',
-];
-const HOURS = [
-  '9am',
-  '10am',
-  '11am',
-  '12pm',
-  '1pm',
-  '2pm',
-  '3pm',
-  '4pm',
-  '5pm',
-];
-
-function buildHeatmapData(data: IncidentRow[]) {
-  return HOURS.flatMap((hour, hi) =>
-    DAYS.map((day, di) => {
-      const hourValue = 9 + hi;
-      const count = data.filter(
-        o => o.dayOfWeek === di && o.hour === hourValue,
-      ).length;
-      return {day, hour, incidents: count};
-    }),
-  );
-}
-
-const statusVariant: Record<string, 'error' | 'warning' | 'info' | 'success'> =
-  {
-    ongoing: 'error',
-    identified: 'warning',
-    monitoring: 'info',
-    resolved: 'success',
-  };
-
-const columns: TableColumn<IncidentRow>[] = [
-  {
-    key: 'id',
-    header: 'Incident',
-    width: pixel(110),
-    renderCell: (item: IncidentRow) => (
-      <Link href="#" isStandalone>
-        {item.id}
-      </Link>
-    ),
-  },
-  {
-    key: 'product',
-    header: 'Product',
-    width: proportional(2),
-    renderCell: (item: IncidentRow) => <Text type="body">{item.product}</Text>,
-  },
-  {
-    key: 'title',
-    header: 'Description',
-    width: proportional(5),
-    renderCell: (item: IncidentRow) => <Text type="body">{item.title}</Text>,
-  },
-  {
-    key: 'startTime',
-    header: 'Started',
-    width: pixel(80),
-    renderCell: (item: IncidentRow) => (
-      <Text type="body">{item.startTime}</Text>
-    ),
-  },
-  {
-    key: 'duration',
-    header: 'Duration',
-    width: pixel(100),
-    renderCell: (item: IncidentRow) => <Text type="body">{item.duration}</Text>,
-  },
-  {
-    key: 'oncall',
-    header: 'On-call',
-    width: proportional(2),
-    renderCell: (item: IncidentRow) => (
-      <HStack gap={2} vAlign="center">
-        <Avatar
-          name={item.oncall}
-          src={ONCALL_AVATARS[item.oncall]}
-          size="sm"
-        />
-        <Text type="body">{item.oncall}</Text>
-      </HStack>
-    ),
-  },
-  {
-    key: 'status',
-    header: 'Status',
-    width: pixel(120),
-    renderCell: (item: IncidentRow) => (
-      <Badge
-        label={item.status.charAt(0).toUpperCase() + item.status.slice(1)}
-        variant={statusVariant[item.status]}
-      />
-    ),
-  },
-  {
-    key: 'date',
-    header: 'Date',
-    width: pixel(110),
-    renderCell: (item: IncidentRow) => <Text type="body">{item.date}</Text>,
-  },
-];
-
-// ============= HEATMAP =============
-
-function OutageHeatmap() {
-  const heatmapData = useMemo(() => buildHeatmapData(incidents), []);
-
-  return (
-    <Chart
-      data={heatmapData}
-      xKey="day"
-      yKeys={['incidents']}
-      height={280}
-      margin={{left: 0, right: 0, top: 0, bottom: 30}}>
-      <ChartAxis position="bottom" />
-      <ChartHeatmapGL
-        xKey="day"
-        yKey="hour"
-        valueKey="incidents"
-        colorRange={['#dcfce7', '#fee2e2', '#fca5a5', '#ef4444', '#991b1b']}
-      />
-    </Chart>
-  );
-}
-
-// ============= PAGE =============
-
-export default function TablePageHeatmapStatusTemplate() {
-  return (
-    <Layout
-      height="fill"
-      header={
-        <LayoutHeader hasDivider>
-          <HStack gap={2} vAlign="center">
-            <StackItem size="fill">
-              <Heading level={1}>Status</Heading>
-            </StackItem>
-            <IconButton
-              label="Filter"
-              icon={<Icon icon={FunnelIcon} size="sm" />}
-              variant="ghost"
-            />
-            <IconButton
-              label="Export"
-              icon={<Icon icon={ArrowDownTrayIcon} size="sm" />}
-              variant="ghost"
-            />
-            <Button
-              label="Refresh"
-              icon={<Icon icon={ArrowPathIcon} size="sm" />}
-            />
-          </HStack>
-        </LayoutHeader>
-      }
-      content={
-        <LayoutContent padding={3}>
-          <VStack gap={4}>
-            <OutageHeatmap />
-
-            <Table<IncidentRow>
-              data={incidents}
-              columns={columns}
-              idKey="id"
-              density="balanced"
-              dividers="rows"
-              hasHover
-            />
-          </VStack>
-        </LayoutContent>
-      }
-    />
-  );
-}

package/assets/templates/pages/table-page-heatmap-status/template.doc.mjs

@@ -1,13 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
-export const doc = {
-  type: 'page',
-  name: 'Outage Heatmap Table',
-  displayName: 'Outage Heatmap Table',
-  description:
-    'Product status page with an outage heatmap and incident log table.',
-  isReady: true,
-  category: 'Table - Heatmap',
-  isHiddenFromOverview: true,
-};