@elevasis/ui 2.31.0 → 2.33.0

package/dist/chunk-542WPQU2.js

@@ -1,413 +0,0 @@
-import { CyberAreaChart, useCyberColors, CyberLegendItem } from './chunk-CW3UNAF2.js';
-import { useErrorTrends } from './chunk-6YT4IKJ7.js';
-import { CardHeader, CenteredErrorState, TrendIndicator, EmptyState, StatCard } from './chunk-L3BVJWML.js';
-import { getTimeRangeLabel, getTimeRangeDates, formatBucketTime } from './chunk-XQHZBA65.js';
-import { useRef, useState, useLayoutEffect, useEffect, useMemo, useCallback } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Center, Loader, Paper, Button, Group, Text, NumberFormatter, Badge, Space, Tooltip, SimpleGrid, Alert, SegmentedControl, Box } from '@mantine/core';
-import { IconActivity, IconDownload, IconChartLine, IconInfoCircle, IconApps, IconPlayerPlay, IconChartBar, IconAlertTriangle, IconRocket, IconAlertCircle } from '@tabler/icons-react';
-
-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 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, { 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 { ActivityTrendChart, ChartFrame, CombinedTrendChart, CostTrendChart, HeroStatsRow };