@massdriver/backstage-plugin 1.0.0

package/dist/features/environment/InstanceDrawer/tabs/HistoryTab.esm.js

@@ -0,0 +1,446 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import Box from '@massdriver/ui/Box';
+import Typography from '@massdriver/ui/Typography';
+import Button from '@massdriver/ui/Button';
+import Tooltip from '@massdriver/ui/Tooltip';
+import CopyButton from '@massdriver/ui/CopyButton';
+import Select, { MenuItem } from '@massdriver/ui/Select';
+import stylin from '@massdriver/ui/stylin';
+import { alpha } from '@massdriver/ui/theme';
+import CompareArrowsIcon from '@massdriver/ui/icons/CompareArrowsIcon';
+import FilterListIcon from '@massdriver/ui/icons/FilterListIcon';
+import SortIcon from '@massdriver/ui/icons/SortIcon';
+import { useLiveRelayQuery } from '../../realtime/useLiveRelayQuery.esm.js';
+import InstanceStatusPill from '../../components/InstanceStatusPill.esm.js';
+import { composeInstanceStatus } from '../../../../utils/instanceStatuses.esm.js';
+import VersionBadge from '../../../../components/VersionBadge.esm.js';
+import { CompareDeploymentsDialog } from '../../CompareDeploymentsDialog/CompareDeploymentsDialog.esm.js';
+import { TabState } from '../TabState.esm.js';
+import { HISTORY_QUERY } from '../queries.esm.js';
+import { formatRelativeTime, formatDeploymentStatus, formatElapsed, truncateDeploymentId, parsePlanMessage, parseRollbackMessage, stripMessageContext, deploymentHasLogs } from '../helpers.esm.js';
+import { ViewDeploymentDetails } from './ViewDeploymentDetails.esm.js';
+import { useOpenLogs } from './DeploymentLogsPanel.esm.js';
+import { DisabledApprovalCluster, LogsButton } from './DeploymentReadOnlyActions.esm.js';
+import '@mui/material/Chip';
+import '@mui/material/Drawer';
+import '@mui/material/OutlinedInput';
+import { selectClasses } from '@mui/material/Select';
+import '@mui/material/ToggleButton';
+
+const SORT_OPTIONS = [
+  { value: "UPDATED_AT_DESC", label: "Recently active first" },
+  { value: "UPDATED_AT_ASC", label: "Least recently active first" },
+  { value: "STATUS_ASC", label: "Status (A\u2013Z)" }
+];
+const DEFAULT_SORT_VALUE = "UPDATED_AT_DESC";
+const sortValueToInput = (value) => {
+  switch (value) {
+    case "UPDATED_AT_ASC":
+      return { field: "UPDATED_AT", order: "ASC" };
+    case "STATUS_ASC":
+      return { field: "STATUS", order: "ASC" };
+    case "UPDATED_AT_DESC":
+    default:
+      return { field: "UPDATED_AT", order: "DESC" };
+  }
+};
+const ACTION_OPTIONS = [
+  { value: "ALL", label: "All actions" },
+  { value: "PROVISION", label: "Provision" },
+  { value: "DECOMMISSION", label: "Decommission" },
+  { value: "PLAN", label: "Plan" }
+];
+const DEFAULT_ACTION_VALUE = "ALL";
+const HistoryTab = ({ instanceId }) => {
+  const openLogs = useOpenLogs();
+  const [sortValue, setSortValue] = useState(DEFAULT_SORT_VALUE);
+  const [actionFilter, setActionFilter] = useState(DEFAULT_ACTION_VALUE);
+  const [selectedDeploymentId, setSelectedDeploymentId] = useState(null);
+  const [compareOpen, setCompareOpen] = useState(false);
+  const { value, loading, error } = useLiveRelayQuery(
+    HISTORY_QUERY,
+    instanceId ? {
+      instanceId,
+      filter: {
+        instanceId: { eq: instanceId },
+        ...actionFilter !== "ALL" && { action: { eq: actionFilter } }
+      },
+      sort: sortValueToInput(sortValue)
+    } : null
+  );
+  const items = useMemo(
+    () => (value?.deployments?.items ?? []).filter(Boolean),
+    [value]
+  );
+  const instance = value?.instance ?? null;
+  const canCompare = items.length >= 2;
+  const showInitializedRow = Boolean(instance) && actionFilter === "ALL";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Root, { children: [
+      /* @__PURE__ */ jsxs(TitleRow, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "Deployments" }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: canCompare ? "" : "You need at least 2 deployments to compare.",
+            arrow: true,
+            placement: "top",
+            children: /* @__PURE__ */ jsx(CompareButtonWrap, { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outlined",
+                size: "small",
+                startIcon: /* @__PURE__ */ jsx(CompareArrowsIcon, {}),
+                disabled: !canCompare,
+                onClick: () => setCompareOpen(true),
+                children: "Compare deployments"
+              }
+            ) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(ControlRow, { children: [
+        /* @__PURE__ */ jsxs(ControlGroup, { children: [
+          /* @__PURE__ */ jsx(FilterListIcon, { fontSize: "small" }),
+          /* @__PURE__ */ jsx(
+            ControlSelect,
+            {
+              value: actionFilter,
+              onChange: (event) => setActionFilter(event.target.value),
+              size: "small",
+              variant: "standard",
+              disableUnderline: true,
+              "aria-label": "Filter by action",
+              children: ACTION_OPTIONS.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, children: option.label }, option.value))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(ControlGroup, { children: [
+          /* @__PURE__ */ jsx(SortIcon, { fontSize: "small" }),
+          /* @__PURE__ */ jsx(
+            ControlSelect,
+            {
+              value: sortValue,
+              onChange: (event) => setSortValue(event.target.value),
+              size: "small",
+              variant: "standard",
+              disableUnderline: true,
+              "aria-label": "Sort deployments",
+              children: SORT_OPTIONS.map((option) => /* @__PURE__ */ jsx(MenuItem, { value: option.value, children: option.label }, option.value))
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(TabState, { loading, error, children: items.length === 0 && !showInitializedRow ? /* @__PURE__ */ jsx(EmptyNote, { children: "No deployments for this instance yet." }) : /* @__PURE__ */ jsxs(List, { children: [
+        items.map((deployment) => /* @__PURE__ */ jsx(
+          DeploymentRow,
+          {
+            deployment,
+            onViewLogs: openLogs,
+            onShowDetails: setSelectedDeploymentId
+          },
+          deployment.id
+        )),
+        showInitializedRow ? /* @__PURE__ */ jsxs(InitializedRow, { children: [
+          /* @__PURE__ */ jsxs(RowA, { children: [
+            /* @__PURE__ */ jsx(InstanceStatusPill, { status: "INITIALIZED" }),
+            /* @__PURE__ */ jsx(RowSpacer, {})
+          ] }),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              title: "When this instance was added to the environment",
+              arrow: true,
+              placement: "bottom",
+              children: /* @__PURE__ */ jsxs(RowB, { variant: "caption", children: [
+                "Added to",
+                " ",
+                /* @__PURE__ */ jsx("strong", { children: instance?.environment?.name ?? "environment" }),
+                " ",
+                formatRelativeTime(instance?.createdAt)
+              ] })
+            }
+          )
+        ] }) : null
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ViewDeploymentDetails,
+      {
+        deploymentId: selectedDeploymentId,
+        onClose: () => setSelectedDeploymentId(null),
+        onShowSource: setSelectedDeploymentId
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CompareDeploymentsDialog,
+      {
+        open: compareOpen,
+        onClose: () => setCompareOpen(false),
+        instanceId
+      }
+    )
+  ] });
+};
+const DeploymentRow = ({
+  deployment,
+  onViewLogs,
+  onShowDetails
+}) => {
+  const statusLabel = formatDeploymentStatus(
+    deployment.action,
+    deployment.status
+  );
+  const elapsed = formatElapsed(deployment.elapsedTime);
+  const time = formatRelativeTime(
+    deployment.lastTransitionedAt ?? deployment.createdAt
+  );
+  const deployedBy = deployment.deployedBy ?? "system";
+  const truncated = truncateDeploymentId(deployment.id);
+  const isProposed = deployment.status === "PROPOSED";
+  const planSource = deployment.action === "PLAN" ? parsePlanMessage(deployment.message) : null;
+  const rollbackSource = parseRollbackMessage(deployment.message);
+  const displayMessage = stripMessageContext(deployment.message);
+  return /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsxs(RowA, { children: [
+      /* @__PURE__ */ jsx(
+        InstanceStatusPill,
+        {
+          status: composeInstanceStatus(deployment.action, deployment.status),
+          onClick: () => onViewLogs(deployment.id)
+        }
+      ),
+      deployment.version ? /* @__PURE__ */ jsx(VersionBadge, { version: deployment.version }) : null,
+      rollbackSource ? /* @__PURE__ */ jsx(RollbackTag, { children: "Rollback" }) : null,
+      /* @__PURE__ */ jsx(RowSpacer, {}),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          arrow: true,
+          placement: "top",
+          title: /* @__PURE__ */ jsxs(IdTooltip, { children: [
+            /* @__PURE__ */ jsx(IdTooltipText, { children: deployment.id }),
+            /* @__PURE__ */ jsx(CopyButton, { text: deployment.id, ariaLabel: "Copy deployment ID" })
+          ] }),
+          children: /* @__PURE__ */ jsx(DeploymentIdText, { children: truncated })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DetailsButton,
+        {
+          variant: "text",
+          size: "small",
+          onClick: () => onShowDetails(deployment.id),
+          children: "View details"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(RowB, { variant: "caption", children: [
+      /* @__PURE__ */ jsx("span", { children: statusLabel }),
+      /* @__PURE__ */ jsx(MetaSep, { children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { children: time }),
+      elapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MetaSep, { children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { children: elapsed })
+      ] }) : null,
+      /* @__PURE__ */ jsx(MetaSep, { children: "\xB7" }),
+      /* @__PURE__ */ jsx("strong", { children: deployedBy })
+    ] }),
+    planSource ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        SourceLink,
+        {
+          variant: "text",
+          size: "small",
+          onClick: () => onShowDetails(planSource.sourceId),
+          children: [
+            "Planned deployment of ",
+            truncateDeploymentId(planSource.sourceId)
+          ]
+        }
+      ),
+      displayMessage ? /* @__PURE__ */ jsxs(Message, { title: displayMessage, children: [
+        '"',
+        displayMessage,
+        '"'
+      ] }) : null
+    ] }) : rollbackSource ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        SourceLink,
+        {
+          variant: "text",
+          size: "small",
+          onClick: () => onShowDetails(rollbackSource.sourceId),
+          children: [
+            isProposed ? "Proposed rollback to deployment" : "Rollback to deployment",
+            " ",
+            truncateDeploymentId(rollbackSource.sourceId),
+            rollbackSource.version ? ` (v${rollbackSource.version})` : ""
+          ]
+        }
+      ),
+      displayMessage ? /* @__PURE__ */ jsxs(Message, { title: displayMessage, children: [
+        '"',
+        displayMessage,
+        '"'
+      ] }) : null
+    ] }) : displayMessage ? /* @__PURE__ */ jsxs(Message, { title: displayMessage, children: [
+      '"',
+      displayMessage,
+      '"'
+    ] }) : null,
+    /* @__PURE__ */ jsx(Footer, { children: isProposed ? /* @__PURE__ */ jsx(DisabledApprovalCluster, {}) : deploymentHasLogs(deployment.status) ? /* @__PURE__ */ jsx(LogsButton, { onClick: () => onViewLogs(deployment.id) }) : null })
+  ] });
+};
+const Root = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1),
+  padding: theme.spacing(1)
+}));
+const TitleRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing(1),
+  flexWrap: "wrap",
+  paddingBottom: theme.spacing(1),
+  borderBottom: `1px solid ${theme.palette.divider}`
+}));
+const CompareButtonWrap = stylin("span")({
+  display: "inline-flex"
+});
+const ControlRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(2),
+  flexWrap: "wrap",
+  paddingBottom: theme.spacing(0.5)
+}));
+const ControlGroup = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.75),
+  color: theme.palette.text.secondary,
+  "& > svg": {
+    color: theme.palette.text.disabled
+  }
+}));
+const ControlSelect = stylin(Select)(({ theme }) => ({
+  [`& .${selectClasses.select}`]: {
+    fontSize: theme.typography.body2.fontSize,
+    padding: theme.spacing(0.25, 0.5),
+    paddingRight: `${theme.spacing(3)} !important`,
+    color: theme.palette.text.primary
+  },
+  "&:hover": {
+    color: theme.palette.primary.main
+  }
+}));
+const List = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2)
+}));
+const EmptyNote = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(12),
+  color: theme.palette.text.secondary,
+  fontStyle: "italic"
+}));
+const Row = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.5),
+  padding: theme.spacing(1.25, 1.5),
+  borderRadius: 1,
+  border: `1px solid ${theme.palette.divider}`,
+  backgroundColor: theme.palette.background.paper,
+  minWidth: 0
+}));
+const RowA = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  flexWrap: "wrap",
+  minWidth: 0
+}));
+const RowSpacer = stylin(Box)({ flex: 1 });
+const IdTooltip = stylin("span")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5)
+}));
+const IdTooltipText = stylin("span")(({ theme }) => ({
+  fontFamily: theme.typography.fontFamilyMono,
+  fontSize: theme.typography.pxToRem(12),
+  wordBreak: "break-all"
+}));
+const DeploymentIdText = stylin("span")(({ theme }) => ({
+  fontFamily: theme.typography.fontFamilyMono,
+  fontSize: theme.typography.caption.fontSize,
+  color: theme.palette.text.secondary,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: theme.spacing(20)
+}));
+const DetailsButton = stylin(Button)(({ theme }) => ({
+  flexShrink: 0,
+  padding: theme.spacing(0.25, 1)
+}));
+const RowB = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: theme.spacing(0.5)
+}));
+const MetaSep = stylin("span")(({ theme }) => ({
+  color: theme.palette.text.disabled
+}));
+const Message = stylin(Typography)(({ theme }) => ({
+  fontStyle: "italic",
+  fontSize: theme.typography.caption.fontSize,
+  color: theme.palette.text.secondary,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+}));
+const SourceLink = stylin(Button)(({ theme }) => ({
+  alignSelf: "flex-start",
+  padding: theme.spacing(0.25, 1),
+  marginLeft: theme.spacing(-1)
+}));
+const Footer = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "flex-end",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(0.25)
+}));
+const RollbackTag = stylin("span")(({ theme }) => ({
+  fontSize: theme.typography.caption.fontSize,
+  fontWeight: theme.typography.fontWeightBold,
+  textTransform: "uppercase",
+  letterSpacing: "0.04em",
+  lineHeight: 1.4,
+  padding: theme.spacing(0.125, 0.75),
+  borderRadius: 1,
+  color: theme.palette.warning.main,
+  backgroundColor: alpha(theme.palette.warning.main, 0.12),
+  border: `1px solid ${alpha(theme.palette.warning.main, 0.2)}`
+}));
+const InitializedRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.5),
+  padding: theme.spacing(1.25, 1.5),
+  borderRadius: 1,
+  border: `1px dashed ${theme.palette.divider}`,
+  backgroundColor: theme.palette.background.paper,
+  minWidth: 0
+}));
+
+export { HistoryTab, HistoryTab as default };
+//# sourceMappingURL=HistoryTab.esm.js.map

package/dist/features/environment/InstanceDrawer/tabs/HistoryTab.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HistoryTab.esm.js","sources":["../../../../../src/features/environment/InstanceDrawer/tabs/HistoryTab.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport Box from '@massdriver/ui/Box';\nimport Typography from '@massdriver/ui/Typography';\nimport Button from '@massdriver/ui/Button';\nimport Tooltip from '@massdriver/ui/Tooltip';\nimport CopyButton from '@massdriver/ui/CopyButton';\nimport Select, { MenuItem } from '@massdriver/ui/Select';\nimport stylin from '@massdriver/ui/stylin';\nimport { alpha } from '@massdriver/ui/theme';\nimport CompareArrowsIcon from '@massdriver/ui/icons/CompareArrowsIcon';\nimport FilterListIcon from '@massdriver/ui/icons/FilterListIcon';\nimport SortIcon from '@massdriver/ui/icons/SortIcon';\nimport { useLiveRelayQuery } from '../../realtime/useLiveRelayQuery';\nimport InstanceStatusPill from '../../components/InstanceStatusPill';\nimport { composeInstanceStatus } from '../../../../utils/instanceStatuses';\nimport VersionBadge from '../../../../components/VersionBadge';\nimport CompareDeploymentsDialog from '../../CompareDeploymentsDialog';\nimport { TabState } from '../TabState';\nimport { HISTORY_QUERY } from '../queries';\nimport {\n  formatDeploymentStatus,\n  formatElapsed,\n  deploymentHasLogs,\n  formatRelativeTime,\n  parsePlanMessage,\n  parseRollbackMessage,\n  stripMessageContext,\n  truncateDeploymentId,\n} from '../helpers';\nimport type { Deployment, HistoryInstance } from '../types';\nimport ViewDeploymentDetails from './ViewDeploymentDetails';\nimport { useOpenLogs } from './DeploymentLogsPanel';\nimport {\n  DisabledApprovalCluster,\n  LogsButton,\n} from './DeploymentReadOnlyActions';\nimport { selectClasses } from '../../../../theme/muiClasses';\n\n// --- Sort + filter controls (ported verbatim from the web app's\n// historyControls.js). Centralised so label rendering and the DeploymentsSort\n// input mapping stay in lockstep. ------------------------------------------\n\nconst SORT_OPTIONS = [\n  { value: 'UPDATED_AT_DESC', label: 'Recently active first' },\n  { value: 'UPDATED_AT_ASC', label: 'Least recently active first' },\n  { value: 'STATUS_ASC', label: 'Status (A–Z)' },\n];\n\nconst DEFAULT_SORT_VALUE = 'UPDATED_AT_DESC';\n\nconst sortValueToInput = (value: string) => {\n  switch (value) {\n    case 'UPDATED_AT_ASC':\n      return { field: 'UPDATED_AT', order: 'ASC' };\n    case 'STATUS_ASC':\n      return { field: 'STATUS', order: 'ASC' };\n    case 'UPDATED_AT_DESC':\n    default:\n      return { field: 'UPDATED_AT', order: 'DESC' };\n  }\n};\n\nconst ACTION_OPTIONS = [\n  { value: 'ALL', label: 'All actions' },\n  { value: 'PROVISION', label: 'Provision' },\n  { value: 'DECOMMISSION', label: 'Decommission' },\n  { value: 'PLAN', label: 'Plan' },\n];\n\nconst DEFAULT_ACTION_VALUE = 'ALL';\n\ninterface HistoryResult {\n  deployments: { items?: (Deployment | null)[] | null } | null;\n  instance: HistoryInstance | null;\n}\n\n/**\n * Read-only History tab: the web app's deployment history, faithfully ported.\n * Mutations (approve/reject/plan/rollback) render as disabled `DisabledAction`\n * controls; logs link out to Massdriver. Compare + per-row detail panels are\n * driven by local state (the drawer uses `?tab=`, not URL dialog params).\n */\nexport const HistoryTab = ({ instanceId }: { instanceId: string | null }) => {\n  const openLogs = useOpenLogs();\n  const [sortValue, setSortValue] = useState(DEFAULT_SORT_VALUE);\n  const [actionFilter, setActionFilter] = useState(DEFAULT_ACTION_VALUE);\n  const [selectedDeploymentId, setSelectedDeploymentId] = useState<\n    string | null\n  >(null);\n  const [compareOpen, setCompareOpen] = useState(false);\n\n  // Live query: realtime revision bumps keep the rendered list mounted;\n  // changing instance/filter/sort resets to a fresh loading state.\n  const { value, loading, error } = useLiveRelayQuery<HistoryResult>(\n    HISTORY_QUERY,\n    instanceId\n      ? {\n          instanceId,\n          filter: {\n            instanceId: { eq: instanceId },\n            ...(actionFilter !== 'ALL' && { action: { eq: actionFilter } }),\n          },\n          sort: sortValueToInput(sortValue),\n        }\n      : null,\n  );\n\n  const items = useMemo(\n    () => (value?.deployments?.items ?? []).filter(Boolean) as Deployment[],\n    [value],\n  );\n  const instance = value?.instance ?? null;\n  const canCompare = items.length >= 2;\n\n  const showInitializedRow = Boolean(instance) && actionFilter === 'ALL';\n\n  return (\n    <>\n      <Root>\n        <TitleRow>\n          <Typography variant=\"subtitle1\">Deployments</Typography>\n          <Tooltip\n            title={\n              canCompare ? '' : 'You need at least 2 deployments to compare.'\n            }\n            arrow\n            placement=\"top\"\n          >\n            <CompareButtonWrap>\n              <Button\n                variant=\"outlined\"\n                size=\"small\"\n                startIcon={<CompareArrowsIcon />}\n                disabled={!canCompare}\n                onClick={() => setCompareOpen(true)}\n              >\n                Compare deployments\n              </Button>\n            </CompareButtonWrap>\n          </Tooltip>\n        </TitleRow>\n\n        <ControlRow>\n          <ControlGroup>\n            <FilterListIcon fontSize=\"small\" />\n            <ControlSelect\n              value={actionFilter}\n              onChange={(event: any) => setActionFilter(event.target.value)}\n              size=\"small\"\n              variant=\"standard\"\n              disableUnderline\n              aria-label=\"Filter by action\"\n            >\n              {ACTION_OPTIONS.map(option => (\n                <MenuItem key={option.value} value={option.value}>\n                  {option.label}\n                </MenuItem>\n              ))}\n            </ControlSelect>\n          </ControlGroup>\n          <ControlGroup>\n            <SortIcon fontSize=\"small\" />\n            <ControlSelect\n              value={sortValue}\n              onChange={(event: any) => setSortValue(event.target.value)}\n              size=\"small\"\n              variant=\"standard\"\n              disableUnderline\n              aria-label=\"Sort deployments\"\n            >\n              {SORT_OPTIONS.map(option => (\n                <MenuItem key={option.value} value={option.value}>\n                  {option.label}\n                </MenuItem>\n              ))}\n            </ControlSelect>\n          </ControlGroup>\n        </ControlRow>\n\n        <TabState loading={loading} error={error}>\n          {items.length === 0 && !showInitializedRow ? (\n            <EmptyNote>No deployments for this instance yet.</EmptyNote>\n          ) : (\n            <List>\n              {items.map(deployment => (\n                <DeploymentRow\n                  key={deployment.id}\n                  deployment={deployment}\n                  onViewLogs={openLogs}\n                  onShowDetails={setSelectedDeploymentId}\n                />\n              ))}\n              {showInitializedRow ? (\n                <InitializedRow>\n                  <RowA>\n                    <InstanceStatusPill status=\"INITIALIZED\" />\n                    <RowSpacer />\n                  </RowA>\n                  <Tooltip\n                    title=\"When this instance was added to the environment\"\n                    arrow\n                    placement=\"bottom\"\n                  >\n                    <RowB variant=\"caption\">\n                      Added to{' '}\n                      <strong>\n                        {instance?.environment?.name ?? 'environment'}\n                      </strong>{' '}\n                      {formatRelativeTime(instance?.createdAt)}\n                    </RowB>\n                  </Tooltip>\n                </InitializedRow>\n              ) : null}\n            </List>\n          )}\n        </TabState>\n      </Root>\n\n      <ViewDeploymentDetails\n        deploymentId={selectedDeploymentId}\n        onClose={() => setSelectedDeploymentId(null)}\n        onShowSource={setSelectedDeploymentId}\n      />\n      <CompareDeploymentsDialog\n        open={compareOpen}\n        onClose={() => setCompareOpen(false)}\n        instanceId={instanceId}\n      />\n    </>\n  );\n};\n\nexport default HistoryTab;\n\nconst DeploymentRow = ({\n  deployment,\n  onViewLogs,\n  onShowDetails,\n}: {\n  deployment: Deployment;\n  onViewLogs: (id: string) => void;\n  onShowDetails: (id: string) => void;\n}) => {\n  const statusLabel = formatDeploymentStatus(\n    deployment.action,\n    deployment.status,\n  );\n  const elapsed = formatElapsed(deployment.elapsedTime);\n  const time = formatRelativeTime(\n    deployment.lastTransitionedAt ?? deployment.createdAt,\n  );\n  const deployedBy = deployment.deployedBy ?? 'system';\n  const truncated = truncateDeploymentId(deployment.id);\n\n  const isProposed = deployment.status === 'PROPOSED';\n\n  const planSource =\n    deployment.action === 'PLAN' ? parsePlanMessage(deployment.message) : null;\n  const rollbackSource = parseRollbackMessage(deployment.message);\n  const displayMessage = stripMessageContext(deployment.message);\n\n  return (\n    <Row>\n      <RowA>\n        <InstanceStatusPill\n          status={composeInstanceStatus(deployment.action, deployment.status)}\n          onClick={() => onViewLogs(deployment.id)}\n        />\n        {deployment.version ? (\n          <VersionBadge version={deployment.version} />\n        ) : null}\n        {rollbackSource ? <RollbackTag>Rollback</RollbackTag> : null}\n        <RowSpacer />\n        <Tooltip\n          arrow\n          placement=\"top\"\n          title={\n            <IdTooltip>\n              <IdTooltipText>{deployment.id}</IdTooltipText>\n              <CopyButton text={deployment.id} ariaLabel=\"Copy deployment ID\" />\n            </IdTooltip>\n          }\n        >\n          <DeploymentIdText>{truncated}</DeploymentIdText>\n        </Tooltip>\n        <DetailsButton\n          variant=\"text\"\n          size=\"small\"\n          onClick={() => onShowDetails(deployment.id)}\n        >\n          View details\n        </DetailsButton>\n      </RowA>\n\n      <RowB variant=\"caption\">\n        <span>{statusLabel}</span>\n        <MetaSep>·</MetaSep>\n        <span>{time}</span>\n        {elapsed ? (\n          <>\n            <MetaSep>·</MetaSep>\n            <span>{elapsed}</span>\n          </>\n        ) : null}\n        <MetaSep>·</MetaSep>\n        <strong>{deployedBy}</strong>\n      </RowB>\n\n      {planSource ? (\n        <>\n          <SourceLink\n            variant=\"text\"\n            size=\"small\"\n            onClick={() => onShowDetails(planSource.sourceId)}\n          >\n            Planned deployment of {truncateDeploymentId(planSource.sourceId)}\n          </SourceLink>\n          {displayMessage ? (\n            <Message title={displayMessage}>\"{displayMessage}\"</Message>\n          ) : null}\n        </>\n      ) : rollbackSource ? (\n        <>\n          <SourceLink\n            variant=\"text\"\n            size=\"small\"\n            onClick={() => onShowDetails(rollbackSource.sourceId)}\n          >\n            {isProposed\n              ? 'Proposed rollback to deployment'\n              : 'Rollback to deployment'}{' '}\n            {truncateDeploymentId(rollbackSource.sourceId)}\n            {rollbackSource.version ? ` (v${rollbackSource.version})` : ''}\n          </SourceLink>\n          {displayMessage ? (\n            <Message title={displayMessage}>\"{displayMessage}\"</Message>\n          ) : null}\n        </>\n      ) : displayMessage ? (\n        <Message title={displayMessage}>\"{displayMessage}\"</Message>\n      ) : null}\n\n      <Footer>\n        {isProposed ? (\n          <DisabledApprovalCluster />\n        ) : deploymentHasLogs(deployment.status) ? (\n          <LogsButton onClick={() => onViewLogs(deployment.id)} />\n        ) : null}\n      </Footer>\n    </Row>\n  );\n};\n\nconst Root = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n  padding: theme.spacing(1),\n}));\n\nconst TitleRow = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: theme.spacing(1),\n  flexWrap: 'wrap',\n  paddingBottom: theme.spacing(1),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n}));\n\nconst CompareButtonWrap = stylin('span')({\n  display: 'inline-flex',\n});\n\nconst ControlRow = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(2),\n  flexWrap: 'wrap',\n  paddingBottom: theme.spacing(0.5),\n}));\n\nconst ControlGroup = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.75),\n  color: theme.palette.text.secondary,\n  '& > svg': {\n    color: theme.palette.text.disabled,\n  },\n}));\n\nconst ControlSelect = stylin(Select)(({ theme }: { theme: any }) => ({\n  [`& .${selectClasses.select}`]: {\n    fontSize: theme.typography.body2.fontSize,\n    padding: theme.spacing(0.25, 0.5),\n    paddingRight: `${theme.spacing(3)} !important`,\n    color: theme.palette.text.primary,\n  },\n  '&:hover': {\n    color: theme.palette.primary.main,\n  },\n}));\n\nconst List = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n}));\n\nconst EmptyNote = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontSize: theme.typography.pxToRem(12),\n  color: theme.palette.text.secondary,\n  fontStyle: 'italic',\n}));\n\nconst Row = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  padding: theme.spacing(1.25, 1.5),\n  borderRadius: 1,\n  border: `1px solid ${theme.palette.divider}`,\n  backgroundColor: theme.palette.background.paper,\n  minWidth: 0,\n}));\n\nconst RowA = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flexWrap: 'wrap',\n  minWidth: 0,\n}));\n\nconst RowSpacer = stylin(Box)({ flex: 1 });\n\nconst IdTooltip = stylin('span')(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n}));\n\nconst IdTooltipText = stylin('span')(({ theme }: { theme: any }) => ({\n  fontFamily: theme.typography.fontFamilyMono,\n  fontSize: theme.typography.pxToRem(12),\n  wordBreak: 'break-all',\n}));\n\nconst DeploymentIdText = stylin('span')(({ theme }: { theme: any }) => ({\n  fontFamily: theme.typography.fontFamilyMono,\n  fontSize: theme.typography.caption.fontSize,\n  color: theme.palette.text.secondary,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: theme.spacing(20),\n}));\n\nconst DetailsButton = stylin(Button)(({ theme }: { theme: any }) => ({\n  flexShrink: 0,\n  padding: theme.spacing(0.25, 1),\n}));\n\nconst RowB = stylin(Typography)(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.secondary,\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n}));\n\nconst MetaSep = stylin('span')(({ theme }: { theme: any }) => ({\n  color: theme.palette.text.disabled,\n}));\n\nconst Message = stylin(Typography)(({ theme }: { theme: any }) => ({\n  fontStyle: 'italic',\n  fontSize: theme.typography.caption.fontSize,\n  color: theme.palette.text.secondary,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n}));\n\nconst SourceLink = stylin(Button)(({ theme }: { theme: any }) => ({\n  alignSelf: 'flex-start',\n  padding: theme.spacing(0.25, 1),\n  marginLeft: theme.spacing(-1),\n}));\n\nconst Footer = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(0.25),\n}));\n\nconst RollbackTag = stylin('span')(({ theme }: { theme: any }) => ({\n  fontSize: theme.typography.caption.fontSize,\n  fontWeight: theme.typography.fontWeightBold,\n  textTransform: 'uppercase',\n  letterSpacing: '0.04em',\n  lineHeight: 1.4,\n  padding: theme.spacing(0.125, 0.75),\n  borderRadius: 1,\n  color: theme.palette.warning.main,\n  backgroundColor: alpha(theme.palette.warning.main, 0.12),\n  border: `1px solid ${alpha(theme.palette.warning.main, 0.2)}`,\n}));\n\nconst InitializedRow = stylin(Box)(({ theme }: { theme: any }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  padding: theme.spacing(1.25, 1.5),\n  borderRadius: 1,\n  border: `1px dashed ${theme.palette.divider}`,\n  backgroundColor: theme.palette.background.paper,\n  minWidth: 0,\n}));\n"],"names":[],"mappings":"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"}

package/dist/features/environment/InstanceDrawer/tabs/MonitorTab.esm.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import Box from '@massdriver/ui/Box';
+import Typography from '@massdriver/ui/Typography';
+import { HelpIconButton } from '@massdriver/ui/IconButton';
+import NotificationsIcon from '@massdriver/ui/icons/NotificationsIcon';
+import stylin from '@massdriver/ui/stylin';
+import { TabState } from '../TabState.esm.js';
+import { AlarmCard } from '../AlarmCard.esm.js';
+import { ALARMS_QUERY } from '../queries.esm.js';
+import { useInstanceApiQuery } from '../useInstanceApiQuery.esm.js';
+import { bucketAlarms, ALARMS_DOCS_URL } from '../helpers.esm.js';
+
+const MonitorTab = ({ instanceId }) => {
+  const { value, loading, error } = useInstanceApiQuery(ALARMS_QUERY, instanceId);
+  const buckets = useMemo(
+    () => bucketAlarms(value?.instance?.alarms?.items),
+    [value?.instance?.alarms]
+  );
+  const alarms = [...buckets.firing, ...buckets.configured];
+  return /* @__PURE__ */ jsx(TabState, { loading, error, children: /* @__PURE__ */ jsxs(Root, { children: [
+    /* @__PURE__ */ jsxs(HeaderRow, { children: [
+      /* @__PURE__ */ jsxs(TitleRow, { children: [
+        /* @__PURE__ */ jsx(Title, { children: "Alarms" }),
+        /* @__PURE__ */ jsx(
+          AlarmsHelp,
+          {
+            href: ALARMS_DOCS_URL,
+            tooltip: "Learn about alarms",
+            size: "small"
+          }
+        )
+      ] }),
+      buckets.total > 0 ? /* @__PURE__ */ jsxs(CountChip, { children: [
+        buckets.firing.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(FiringCount, { children: [
+            buckets.firing.length,
+            " firing"
+          ] }),
+          /* @__PURE__ */ jsx(Separator, { children: "\u2022" })
+        ] }) : null,
+        /* @__PURE__ */ jsxs(TotalCount, { children: [
+          buckets.total,
+          " total"
+        ] })
+      ] }) : null
+    ] }),
+    buckets.total === 0 ? /* @__PURE__ */ jsxs(Empty, { children: [
+      /* @__PURE__ */ jsx(IconCircle, { children: /* @__PURE__ */ jsx(NotificationsIcon, {}) }),
+      /* @__PURE__ */ jsx(EmptyTitle, { variant: "body2", children: "No alarms configured" }),
+      /* @__PURE__ */ jsx(EmptyDescription, { variant: "caption", children: "Alarms appear here once your bundle provisions monitoring resources." }),
+      /* @__PURE__ */ jsx(
+        DocsLink,
+        {
+          href: ALARMS_DOCS_URL,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "Learn about alarms"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(List, { children: alarms.map((alarm) => /* @__PURE__ */ jsx(AlarmCard, { alarm }, alarm.id)) })
+  ] }) });
+};
+const Root = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: theme.spacing(1)
+}));
+const HeaderRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing(1),
+  marginBottom: theme.spacing(3)
+}));
+const TitleRow = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5)
+}));
+const Title = stylin(Typography)(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(15),
+  fontWeight: theme.typography.fontWeightBold,
+  color: theme.palette.text.primary
+}));
+const AlarmsHelp = stylin(HelpIconButton)({
+  padding: "2px",
+  "& svg": { fontSize: 16 }
+});
+const CountChip = stylin(Box)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  fontSize: theme.typography.pxToRem(11),
+  padding: theme.spacing(0.25, 1),
+  borderRadius: "999px",
+  border: `1px solid ${theme.palette.divider}`,
+  backgroundColor: theme.palette.background.paper
+}));
+const FiringCount = stylin(Box)(({ theme }) => ({
+  color: theme.palette.error.dark,
+  fontWeight: 600
+}));
+const TotalCount = stylin(Box)(({ theme }) => ({
+  color: theme.palette.text.secondary
+}));
+const Separator = stylin(Box)(({ theme }) => ({
+  color: theme.palette.text.disabled
+}));
+const List = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2)
+}));
+const Empty = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  padding: theme.spacing(6, 2),
+  textAlign: "center"
+}));
+const IconCircle = stylin(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: theme.spacing(6),
+  height: theme.spacing(6),
+  borderRadius: "50%",
+  backgroundColor: theme.palette.action.hover,
+  color: theme.palette.text.disabled,
+  "& svg": { width: theme.spacing(3), height: theme.spacing(3) }
+}));
+const EmptyTitle = stylin(Typography)({ fontWeight: 600 });
+const EmptyDescription = stylin(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary
+}));
+const DocsLink = stylin("a")(({ theme }) => ({
+  fontSize: theme.typography.pxToRem(12),
+  color: theme.palette.primary.main,
+  textDecoration: "none",
+  "&:hover": { textDecoration: "underline" }
+}));
+
+export { MonitorTab, MonitorTab as default };
+//# sourceMappingURL=MonitorTab.esm.js.map