feat(alerts): Add memory utilization rules

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [Unreleased]
+
+### Added
+- Container memory utilization for percentage-based alert rules and dashboard panels
+
 ## [0.4.0-beta.7] - 2026-08-23
 
 ### Fixed

src/components/AlertRulesPanel.test.ts

@@ -60,6 +60,17 @@ describe("AlertRulesPanel", () => {
     expect(wrapper.text()).toContain("CPU usage above 80% for 60s, on shop");
   });
 
+  it("presents container memory utilization as a percentage", async () => {
+    vi.mocked(observabilityApi.alertRules).mockResolvedValue({
+      data: [{ ...rule, name: "Memory high", metric: "container.memory.utilization", threshold: 90 }],
+    } as any);
+
+    const wrapper = mountPanel();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("Container memory utilization (%) above 90% for 60s, on shop");
+  });
+
   it("marks a rule that is currently firing", async () => {
     vi.mocked(observabilityApi.firingAlerts).mockResolvedValue({
       data: [{ rule_id: "r1", rule_name: "CPU high", state: "firing" }],

src/components/AlertRulesPanel.vue

@@ -164,9 +164,22 @@ const firingSnapshot = (id?: string): string => {
   return ev.snapshot.map((c) => `${c.container} (${asBytes ? bytes(c.value) : `${c.value.toFixed(1)}%`})`).join(", ");
 };
 
-const allMetricOptions: { value: string; label: string; unit: string; host?: boolean; rate?: boolean }[] = [
+const allMetricOptions: {
+  value: string;
+  label: string;
+  unit: string;
+  hint?: string;
+  host?: boolean;
+  rate?: boolean;
+}[] = [
   { value: METRIC.cpu, label: "Container CPU usage", unit: "percent" },
-  { value: METRIC.memUsage, label: "Container memory usage", unit: "bytes" },
+  {
+    value: METRIC.memUtilization,
+    label: "Container memory utilization (%)",
+    unit: "percent",
+    hint: "A percentage of the container's effective memory limit.",
+  },
+  { value: METRIC.memUsage, label: "Container memory usage (bytes)", unit: "bytes" },
   { value: METRIC.netRx, label: "Container network in (per second)", unit: "bytes", rate: true },
   { value: METRIC.netTx, label: "Container network out (per second)", unit: "bytes", rate: true },
   { value: METRIC.hostCpu, label: "Host CPU", unit: "percent", host: true },
@@ -212,6 +225,7 @@ watch(isHostMetric, (host) => {
 
 const unitHint = computed(() => {
   const opt = metricOptions.value.find((m) => m.value === draft.value.metric);
+  if (opt?.hint) return opt.hint;
   if (opt?.unit !== "bytes") return "A percentage.";
   return opt.rate ? "In bytes per second." : "In bytes.";
 });

src/components/dashboards/PanelCard.vue

@@ -53,6 +53,7 @@ const series = ref<MetricSeries | null>(null);
 const unit = computed<"percent" | "bytes" | "ms" | "count">(() => {
   if (props.panel.source === "serving") return props.panel.series === "latency" ? "ms" : "count";
   if (props.panel.series.startsWith("container.cpu")) return "percent";
+  if (props.panel.series === "container.memory.utilization") return "percent";
   if (props.panel.series.startsWith("container.memory")) return "bytes";
   if (props.panel.series.startsWith("container.network")) return "bytes";
   return "count";

src/components/dashboards/PanelEditorModal.vue

@@ -79,6 +79,7 @@ const containerSeries = [
   { value: "container.cpu.usage", label: "CPU usage" },
   { value: "container.memory.usage", label: "Memory usage" },
   { value: "container.memory.limit", label: "Memory limit" },
+  { value: "container.memory.utilization", label: "Memory utilization" },
   { value: "container.network.io.rx", label: "Network in" },
   { value: "container.network.io.tx", label: "Network out" },
 ];

src/services/observability.ts

@@ -5,6 +5,7 @@ export const METRIC = {
   cpu: "container.cpu.usage",
   memUsage: "container.memory.usage",
   memLimit: "container.memory.limit",
+  memUtilization: "container.memory.utilization",
   netRx: "container.network.io.rx",
   netTx: "container.network.io.tx",
   hostCpu: "system.cpu.utilization",