@elevasis/ui 2.30.0 → 2.32.0

package/dist/{chunk-CW3UNAF2.js → chunk-4DYOXEH6.js}

@@ -1,9 +1,40 @@
-import { useMemo, useState, useEffect } from 'react';
-import { useComputedColorScheme, Group, Text, Box, Stack } from '@mantine/core';
+import { useErrorTrends } from './chunk-VNAZTCHA.js';
+import { CardHeader, CenteredErrorState, TrendIndicator, EmptyState, StatCard } from './chunk-EPTHX4VZ.js';
+import { getTimeRangeLabel, getTimeRangeDates, formatBucketTime } from './chunk-2RJMVWFJ.js';
+import { useRef, useState, useLayoutEffect, useEffect, useMemo, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComputedColorScheme, Group, Text, Box, Stack, Center, Loader, Paper, Button, NumberFormatter, Badge, Space, Tooltip as Tooltip$1, SimpleGrid, Alert, SegmentedControl } from '@mantine/core';
 import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine as ReferenceLine$1, Area, PieChart, Pie, Cell } from 'recharts';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { IconActivity, IconDownload, IconChartLine, IconInfoCircle, IconApps, IconPlayerPlay, IconChartBar, IconAlertTriangle, IconRocket, IconAlertCircle } from '@tabler/icons-react';
 
-// src/components/charts/cyber-theme.ts
+function ChartFrame({ h, debounceMs = 150, children }) {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const w = el.getBoundingClientRect().width;
+    if (w > 0) setWidth(w);
+  }, []);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let timeout;
+    const ro = new ResizeObserver((entries) => {
+      if (timeout !== void 0) window.clearTimeout(timeout);
+      const nextWidth = entries[0]?.contentRect.width ?? 0;
+      timeout = window.setTimeout(() => {
+        if (nextWidth > 0) setWidth(nextWidth);
+      }, debounceMs);
+    });
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      if (timeout !== void 0) window.clearTimeout(timeout);
+    };
+  }, [debounceMs]);
+  return /* @__PURE__ */ jsx("div", { ref, style: { width: "100%", height: h, position: "relative" }, children: width > 0 && /* @__PURE__ */ jsx("div", { style: { width, height: h }, children }) });
+}
 var THEME_DERIVED = {
   grid: "var(--color-border)",
   gridLine: "var(--color-border)",
@@ -542,5 +573,379 @@ function CyberDonut({
     ] }, seg.name)) })
   ] });
 }
+var GRANULARITY_MAP = {
+  "1h": "hour",
+  "24h": "hour",
+  "7d": "day",
+  "30d": "day"
+};
+var BUCKET_CONFIG = {
+  "1h": { size: 5 * 60 * 1e3, count: 12 },
+  "24h": { size: 60 * 60 * 1e3, count: 24 },
+  "7d": { size: 24 * 60 * 60 * 1e3, count: 7 },
+  "30d": { size: 24 * 60 * 60 * 1e3, count: 30 }
+};
+function groupTimestampsByTime(timestamps, timeRange) {
+  const { size: bucketSize, count: bucketCount } = BUCKET_CONFIG[timeRange];
+  const granularity = GRANULARITY_MAP[timeRange];
+  const now = /* @__PURE__ */ new Date();
+  const flooredNow = new Date(now.getTime() - now.getTime() % bucketSize);
+  const buckets = /* @__PURE__ */ new Map();
+  for (let i = bucketCount - 1; i >= 0; i--) {
+    const bucketTime = new Date(flooredNow.getTime() - i * bucketSize);
+    const label = formatBucketTime(bucketTime.toISOString(), granularity);
+    buckets.set(label, 0);
+  }
+  timestamps.forEach((occurredAt) => {
+    const timeDiff = flooredNow.getTime() - occurredAt.getTime();
+    const bucketIndex = Math.floor(timeDiff / bucketSize);
+    if (bucketIndex >= 0 && bucketIndex < bucketCount) {
+      const bucketTime = new Date(flooredNow.getTime() - bucketIndex * bucketSize);
+      const label = formatBucketTime(bucketTime.toISOString(), granularity);
+      buckets.set(label, (buckets.get(label) || 0) + 1);
+    }
+  });
+  return Array.from(buckets.entries()).map(([time, count]) => ({
+    time,
+    "Activity Count": count
+  }));
+}
+function ActivityTrendChart({ timestamps, total, isLoading, timeRange }) {
+  const chartData = useMemo(() => {
+    return groupTimestampsByTime(timestamps, timeRange);
+  }, [timestamps, timeRange]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) });
+  }
+  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        icon: /* @__PURE__ */ jsx(IconActivity, { size: 18 }),
+        title: "Activity Trend",
+        subtitle: `${total} activities in ${getTimeRangeLabel(timeRange)}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CyberAreaChart,
+      {
+        data: chartData,
+        series: [{ dataKey: "Activity Count", color: "blue" }],
+        height: 200,
+        yAxisLabel: "Count",
+        yDomain: [0, "auto"]
+      }
+    )
+  ] });
+}
+function formatDollar(value) {
+  return `$${value.toFixed(2)}`;
+}
+function CostTrendChart({ data, summaryData, isLoading, error }) {
+  const todayCost = summaryData?.current.totalCostUsd ?? 0;
+  const previousCost = summaryData?.previous.totalCostUsd ?? 0;
+  const mtdCost = summaryData?.mtd.totalCostUsd ?? 0;
+  const projectedMonthlyCost = summaryData?.projection.monthlyCostUsd ?? 0;
+  const confidence = summaryData?.projection.confidence ?? "low";
+  const budget = 1500;
+  const budgetStatus = projectedMonthlyCost <= budget ? "green" : projectedMonthlyCost <= budget * 1.1 ? "yellow" : "red";
+  const budgetLabel = projectedMonthlyCost <= budget ? "On Budget" : projectedMonthlyCost <= budget * 1.1 ? "Warning" : "Over Budget";
+  const chartData = data?.trendData.map((point) => {
+    const date = new Date(point.time);
+    const timeLabel = data.granularity === "hour" ? date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }) : date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    return {
+      time: timeLabel,
+      "Total Cost": point.totalCostUsd
+    };
+  }) ?? [];
+  const handleExport = () => {
+    if (!data) return;
+    const csvContent = [
+      ["Time", "Total Cost ($)", "Executions", "Avg Cost/Execution ($)"],
+      ...data.trendData.map((d) => [
+        d.time,
+        d.totalCostUsd.toFixed(4),
+        d.executionCount,
+        d.avgCostPerExecution.toFixed(4)
+      ])
+    ].map((row) => row.join(",")).join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `cost-trends-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+  if (error) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(CenteredErrorState, { error, title: "Failed to load cost trends" }) });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  const granularityLabel = data?.granularity === "hour" ? "Hourly" : "Daily";
+  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        icon: /* @__PURE__ */ jsx(IconChartLine, { size: 18 }),
+        title: `Cost Trend (${granularityLabel})`,
+        rightSection: /* @__PURE__ */ jsx(Button, { variant: "subtle", size: "xs", leftSection: /* @__PURE__ */ jsx(IconDownload, { size: 14 }), onClick: handleExport, children: "Export CSV" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", mb: "md", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "lg", children: [
+        /* @__PURE__ */ jsxs(Group, { gap: 6, align: "baseline", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: todayCost, decimalScale: 2 }) }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "period" }),
+          /* @__PURE__ */ jsx(TrendIndicator, { current: todayCost, previous: previousCost, inverse: true })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: 6, align: "baseline", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xl", fw: 700, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: mtdCost, thousandSeparator: true, decimalScale: 2 }) }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "MTD" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Badge, { size: "md", variant: "dot", color: budgetStatus, children: budgetLabel })
+    ] }),
+    chartData.length > 0 ? /* @__PURE__ */ jsx(
+      CyberAreaChart,
+      {
+        data: chartData,
+        series: [{ dataKey: "Total Cost", color: "blue", name: "Total Cost" }],
+        height: 200,
+        yDomain: [0, (max) => Math.max(max * 1.1, 0.01)],
+        yTickFormatter: formatDollar,
+        tooltipFormatter: formatDollar,
+        baselineColor: "blue"
+      }
+    ) : /* @__PURE__ */ jsx(EmptyState, { icon: IconChartLine, title: "No cost data available for this time period" }),
+    /* @__PURE__ */ jsx(Space, { h: "lg" }),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+        /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+          "Projected monthly:",
+          " ",
+          /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: projectedMonthlyCost, thousandSeparator: true, decimalScale: 2 })
+        ] }),
+        /* @__PURE__ */ jsx(Tooltip$1, { label: `Projection confidence: ${confidence}`, children: /* @__PURE__ */ jsx(IconInfoCircle, { size: 12, color: "var(--color-text-subtle)" }) })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          size: "xs",
+          fw: 600,
+          c: projectedMonthlyCost > budget ? "red" : "dimmed",
+          style: { fontFamily: "var(--mantine-font-family-headings)" },
+          children: [
+            "Budget: ",
+            /* @__PURE__ */ jsx(NumberFormatter, { prefix: "$", value: budget, thousandSeparator: true, decimalScale: 2 })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var EM_DASH = "\u2014";
+function getSuccessRateColor(rate) {
+  if (rate >= 95) return "var(--mantine-color-teal-6)";
+  if (rate >= 80) return "var(--mantine-color-yellow-6)";
+  return "var(--mantine-color-red-6)";
+}
+function getErrorCountColor(count) {
+  if (count === 0) return "var(--mantine-color-teal-6)";
+  if (count <= 5) return "var(--mantine-color-yellow-6)";
+  return "var(--mantine-color-red-6)";
+}
+function HeroStatsRow({
+  resourcesData,
+  resourcesLoading,
+  dashboardData,
+  dashboardLoading,
+  unresolvedErrorCount,
+  errorsLoading
+}) {
+  const health = dashboardData?.executionHealth;
+  const resourceCount = resourcesData?.total ?? null;
+  const totalExecutions = health?.totalExecutions ?? null;
+  const successRate = totalExecutions ? health?.successRate ?? null : null;
+  return /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 2, sm: 5 }, children: [
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        variant: "hero",
+        icon: IconApps,
+        value: resourceCount ?? EM_DASH,
+        label: "Resources",
+        isLoading: resourcesLoading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        variant: "hero",
+        icon: IconPlayerPlay,
+        value: totalExecutions ?? EM_DASH,
+        label: "Executions",
+        isLoading: dashboardLoading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        variant: "hero",
+        icon: IconChartBar,
+        value: successRate != null ? `${Math.round(successRate)}%` : EM_DASH,
+        label: "Success Rate",
+        valueColor: successRate != null ? getSuccessRateColor(successRate) : void 0,
+        isLoading: dashboardLoading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        variant: "hero",
+        icon: IconAlertTriangle,
+        value: errorsLoading ? EM_DASH : unresolvedErrorCount ?? EM_DASH,
+        label: "Errors",
+        valueColor: unresolvedErrorCount != null ? getErrorCountColor(unresolvedErrorCount) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatCard,
+      {
+        variant: "hero",
+        icon: IconRocket,
+        value: dashboardData?.activeDeploymentVersion ?? EM_DASH,
+        label: "Deployment",
+        isLoading: dashboardLoading
+      }
+    )
+  ] });
+}
+function getGranularityFromTimeRange(timeRange) {
+  return ["1h", "24h"].includes(timeRange) ? "hour" : "day";
+}
+function formatPeakPeriod(peakPeriod, granularity) {
+  if (!peakPeriod) return "N/A";
+  const date = new Date(peakPeriod);
+  if (granularity === "hour") {
+    return date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true });
+  } else {
+    return date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
+  }
+}
+function CombinedTrendChart({
+  healthData,
+  errorData: _errorData,
+  isLoading,
+  error,
+  timeRange,
+  navigationAction,
+  compact = false
+}) {
+  const [activeTab, setActiveTab] = useState("success");
+  const colors = useCyberColors();
+  const { startDate: start, endDate: end } = useMemo(() => getTimeRangeDates(timeRange), [timeRange]);
+  const granularity = getGranularityFromTimeRange(timeRange);
+  const { data: errorTrends } = useErrorTrends({
+    startDate: start,
+    endDate: end,
+    granularity
+  });
+  const xTickFormatter = useCallback((value) => formatBucketTime(value, granularity), [granularity]);
+  if (error) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(CenteredErrorState, { error, title: "Failed to load trend data" }) });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  const errorTrendsMap = new Map(errorTrends?.map((trend) => [trend.time, trend.errorCount]) || []);
+  const successErrorData = healthData?.trendData.length ? healthData.trendData.map((d) => {
+    const errorCount = errorTrendsMap.get(d.time) || 0;
+    return {
+      time: d.time,
+      "Success Count": d.successCount,
+      "Error Count": errorCount
+    };
+  }) : [];
+  const throughputData = healthData?.trendData.length ? healthData.trendData.map((d) => ({
+    time: d.time,
+    Executions: d.executionCount
+  })) : [];
+  const totalExecutions = healthData?.totalExecutions ?? 0;
+  const peakPeriod = healthData?.peakPeriod ?? "";
+  const dataGranularity = healthData?.granularity ?? granularity;
+  if (!successErrorData.length) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(Center, { h: 300, children: /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, {}), color: "gray", variant: "light", children: "No trend data available for the selected time range" }) }) });
+  }
+  return /* @__PURE__ */ jsxs(Paper, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        icon: /* @__PURE__ */ jsx(IconChartLine, { size: 18 }),
+        title: "Execution Trends",
+        subtitle: `${getTimeRangeLabel(timeRange)} - ${dataGranularity === "hour" ? "Hourly" : "Daily"} data`,
+        rightSection: /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              value: activeTab ?? "success",
+              onChange: setActiveTab,
+              size: "xs",
+              data: [
+                { label: "Success & Errors", value: "success" },
+                { label: "Throughput", value: "throughput" }
+              ]
+            }
+          ),
+          navigationAction
+        ] })
+      }
+    ),
+    activeTab === "success" && /* @__PURE__ */ jsxs(Box, { style: { height: compact ? 180 : 280 }, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "lg", justify: "center", mb: "xs", h: 24, align: "center", children: [
+        /* @__PURE__ */ jsx(CyberLegendItem, { color: colors.green, label: "Success Count" }),
+        /* @__PURE__ */ jsx(CyberLegendItem, { color: colors.red, label: "Error Count" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        CyberAreaChart,
+        {
+          data: successErrorData,
+          series: [
+            { dataKey: "Error Count", color: "red" },
+            { dataKey: "Success Count", color: "green", animationDuration: 1400 }
+          ],
+          height: compact ? 150 : 250,
+          yAxisLabel: "Count",
+          baselineColor: "green",
+          xTickFormatter
+        }
+      )
+    ] }),
+    activeTab === "throughput" && /* @__PURE__ */ jsxs(Box, { style: { height: compact ? 180 : 280 }, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "lg", justify: "center", mb: "xs", h: 24, align: "center", children: [
+        /* @__PURE__ */ jsxs(Group, { gap: 6, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { color: colors.blue, fontVariantNumeric: "tabular-nums" }, children: totalExecutions.toLocaleString() }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "executions" })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "|" }),
+        /* @__PURE__ */ jsxs(Group, { gap: 6, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "peak" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { color: colors.blue, fontVariantNumeric: "tabular-nums" }, children: formatPeakPeriod(peakPeriod, dataGranularity) })
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "dot", color: "green", children: "Normal" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        CyberAreaChart,
+        {
+          data: throughputData,
+          series: [{ dataKey: "Executions", color: "blue" }],
+          height: compact ? 150 : 250,
+          xTickFormatter
+        }
+      )
+    ] })
+  ] });
+}
 
-export { CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, getSeriesColor, useCyberColors };
+export { ActivityTrendChart, ChartFrame, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors };