@oneuptime/common 14.0.0 → 14.0.1

package/UI/Components/Feed/useFeedItems.ts

@@ -25,6 +25,14 @@ export interface FeedPage<TFeedModel> {
 
 export interface UseFeedItemsProps<TFeedModel> {
   resourceKey: string;
+  /*
+   * What the reader has chosen to see of this resource's feed - its sort
+   * order and event type filter (see useFeedOptions). A change re-reads the
+   * feed from its first window, exactly like moving to another resource:
+   * rows already loaded were read for the old view, so keeping them, or the
+   * size of the window they filled, would mix two different feeds.
+   */
+  viewKey?: string | undefined;
   refreshToken?: number | undefined;
   getItems: (limit: number) => Promise<FeedPage<TFeedModel>>;
   mapItems: (items: Array<TFeedModel>) => Array<FeedItemProps>;
@@ -50,7 +58,8 @@ interface FetchOptions {
 
 /*
  * Every dashboard activity feed follows the same paging contract: read the
- * newest top N rows and replace that window when the reader asks for more.
+ * first N rows in the reader's chosen order (newest first unless they asked
+ * for oldest first) and replace that window when the reader asks for more.
  * Re-reading from zero matters for a live feed. Offset-appending can duplicate
  * or skip a row when a new event arrives between page requests.
  */
@@ -71,10 +80,20 @@ const useFeedItems: <TFeedModel>(
     null,
   );
 
-  const activeResourceKeyRef: MutableRefObject<string> = useRef<string>(
-    props.resourceKey,
-  );
-  activeResourceKeyRef.current = props.resourceKey;
+  /*
+   * The resource and the view together name the feed being shown. Everything
+   * below that guards against a stale response or resets the window keys on
+   * this, so a response for the previous view is dropped the same way as a
+   * response for the previous resource.
+   */
+  const feedKey: string =
+    props.viewKey === undefined
+      ? props.resourceKey
+      : `${props.resourceKey}\u0000${props.viewKey}`;
+
+  const activeResourceKeyRef: MutableRefObject<string> =
+    useRef<string>(feedKey);
+  activeResourceKeyRef.current = feedKey;
   const previousResourceKeyRef: MutableRefObject<string | null> = useRef<
     string | null
   >(null);
@@ -184,8 +203,8 @@ const useFeedItems: <TFeedModel>(
 
   useEffect(() => {
     const hasResourceChanged: boolean =
-      previousResourceKeyRef.current !== props.resourceKey;
-    previousResourceKeyRef.current = props.resourceKey;
+      previousResourceKeyRef.current !== feedKey;
+    previousResourceKeyRef.current = feedKey;
 
     if (hasResourceChanged) {
       currentLimitRef.current = DEFAULT_LIMIT;
@@ -200,7 +219,7 @@ const useFeedItems: <TFeedModel>(
     }).catch(() => {
       // fetchItems converts request failures into the appropriate UI state.
     });
-  }, [fetchItems, props.resourceKey, props.refreshToken]);
+  }, [fetchItems, feedKey, props.refreshToken]);
 
   useEffect(() => {
     return () => {
@@ -208,7 +227,7 @@ const useFeedItems: <TFeedModel>(
     };
   }, []);
 
-  const isCurrentFeedLoaded: boolean = loadedResourceKey === props.resourceKey;
+  const isCurrentFeedLoaded: boolean = loadedResourceKey === feedKey;
 
   return {
     feedItems,

package/UI/Components/Feed/useFeedOptions.ts

@@ -0,0 +1,225 @@
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import SortOrder from "../../../Types/BaseDatabase/SortOrder";
+import LocalStorage from "../../Utils/LocalStorage";
+import {
+  DEFAULT_FEED_SORT_ORDER,
+  FeedEventTypeOption,
+  FeedOptions,
+  GetFeedEventTypeIconFunction,
+  GetFeedEventTypeLabelFunction,
+  getFeedEventTypeOptions,
+  getFeedOptionsKey,
+  isFeedFiltered,
+  isFeedSortOrder,
+  sanitizeFeedEventTypes,
+} from "./FeedOptions";
+
+export interface UseFeedOptionsProps {
+  // Every event type the feed model can record, e.g. Object.values(the enum).
+  eventTypes: Array<string>;
+  getEventTypeLabel?: GetFeedEventTypeLabelFunction | undefined;
+  getEventTypeIcon?: GetFeedEventTypeIconFunction | undefined;
+  /*
+   * Names this kind of feed ("incident", "monitor", ...) so the reader's sort
+   * order is remembered across pages and visits. The event type filter is
+   * deliberately not remembered: it narrows one investigation, and a filter
+   * that silently followed the reader to the next incident would read as a
+   * feed with missing events.
+   */
+  storageKey?: string | undefined;
+  /*
+   * The resource whose feed this is (the incident id, the cluster id, ...).
+   * The dashboard moves between resources without remounting the feed, and
+   * the event type filter belongs to the resource it was chosen on, so a new
+   * resource starts unfiltered. The sort order is a preference and stays.
+   */
+  resetKey?: string | undefined;
+}
+
+export interface UseFeedOptionsResult {
+  options: FeedOptions;
+  // Pass to useFeedItems as viewKey: a change re-reads the feed.
+  optionsKey: string;
+  eventTypeOptions: Array<FeedEventTypeOption>;
+  isFiltered: boolean;
+  setOptions: (options: FeedOptions) => void;
+}
+
+const SORT_ORDER_STORAGE_KEY_PREFIX: string = "feed-sort-order:";
+
+// One shared empty selection, so an unfiltered render keeps its identity.
+const NO_EVENT_TYPES: Array<string> = [];
+
+type GetSortOrderStorageKey = (storageKey: string) => string;
+
+export const getSortOrderStorageKey: GetSortOrderStorageKey = (
+  storageKey: string,
+): string => {
+  return `${SORT_ORDER_STORAGE_KEY_PREFIX}${storageKey}`;
+};
+
+type ReadStoredSortOrder = (storageKey: string | undefined) => SortOrder;
+
+/*
+ * Storage can be missing, blocked or hold anything, so every read falls back
+ * to the default order.
+ */
+const readStoredSortOrder: ReadStoredSortOrder = (
+  storageKey: string | undefined,
+): SortOrder => {
+  if (!storageKey) {
+    return DEFAULT_FEED_SORT_ORDER;
+  }
+
+  try {
+    const storedValue: unknown = LocalStorage.getItem(
+      getSortOrderStorageKey(storageKey),
+    );
+
+    return isFeedSortOrder(storedValue) ? storedValue : DEFAULT_FEED_SORT_ORDER;
+  } catch {
+    return DEFAULT_FEED_SORT_ORDER;
+  }
+};
+
+type WriteStoredSortOrder = (
+  storageKey: string | undefined,
+  sortOrder: SortOrder,
+) => void;
+
+const writeStoredSortOrder: WriteStoredSortOrder = (
+  storageKey: string | undefined,
+  sortOrder: SortOrder,
+): void => {
+  if (!storageKey) {
+    return;
+  }
+
+  try {
+    if (sortOrder === DEFAULT_FEED_SORT_ORDER) {
+      LocalStorage.removeItem(getSortOrderStorageKey(storageKey));
+    } else {
+      LocalStorage.setItem(getSortOrderStorageKey(storageKey), sortOrder);
+    }
+  } catch {
+    // A preference that cannot be saved still applies to this page.
+  }
+};
+
+const useFeedOptions: (props: UseFeedOptionsProps) => UseFeedOptionsResult = (
+  props: UseFeedOptionsProps,
+): UseFeedOptionsResult => {
+  /*
+   * Callers pass Object.values(SomeEnum), a new array on every render, so the
+   * list is keyed by its contents.
+   */
+  const eventTypesKey: string = props.eventTypes.join("\u0000");
+  const knownEventTypes: Array<string> = useMemo(() => {
+    return props.eventTypes;
+  }, [eventTypesKey]);
+
+  const [sortOrder, setSortOrder] = useState<SortOrder>(() => {
+    return readStoredSortOrder(props.storageKey);
+  });
+  /*
+   * The selection remembers which resource it was made on. It is read through
+   * that, during render rather than in an effect, so the first render for a
+   * new resource is already unfiltered and never asks the API for the old
+   * resource's filter. The stale selection is also dropped (React's "adjust
+   * state when a prop changes" pattern), so going back to the first resource
+   * does not bring its old filter back either.
+   */
+  const [selection, setSelection] = useState<{
+    resetKey: string | undefined;
+    eventTypes: Array<string>;
+  }>(() => {
+    return {
+      resetKey: props.resetKey,
+      eventTypes: [],
+    };
+  });
+  const isSelectionForThisResource: boolean =
+    selection.resetKey === props.resetKey;
+
+  if (!isSelectionForThisResource) {
+    setSelection({
+      resetKey: props.resetKey,
+      eventTypes: NO_EVENT_TYPES,
+    });
+  }
+
+  const selectedEventTypes: Array<string> = isSelectionForThisResource
+    ? selection.eventTypes
+    : NO_EVENT_TYPES;
+
+  const options: FeedOptions = useMemo(() => {
+    return {
+      sortOrder,
+      eventTypes: sanitizeFeedEventTypes({
+        selectedEventTypes,
+        knownEventTypes,
+      }),
+    };
+  }, [sortOrder, selectedEventTypes, knownEventTypes]);
+
+  const eventTypeOptions: Array<FeedEventTypeOption> = useMemo(() => {
+    return getFeedEventTypeOptions({
+      eventTypes: knownEventTypes,
+      getEventTypeLabel: props.getEventTypeLabel,
+      getEventTypeIcon: props.getEventTypeIcon,
+    });
+  }, [knownEventTypes, props.getEventTypeLabel, props.getEventTypeIcon]);
+
+  const setOptions: (nextOptions: FeedOptions) => void = useCallback(
+    (nextOptions: FeedOptions): void => {
+      const nextSortOrder: SortOrder = isFeedSortOrder(nextOptions.sortOrder)
+        ? nextOptions.sortOrder
+        : DEFAULT_FEED_SORT_ORDER;
+
+      setSortOrder(nextSortOrder);
+      setSelection({
+        resetKey: props.resetKey,
+        eventTypes: sanitizeFeedEventTypes({
+          selectedEventTypes: nextOptions.eventTypes,
+          knownEventTypes,
+        }),
+      });
+    },
+    [knownEventTypes, props.resetKey],
+  );
+
+  /*
+   * The stored order follows the committed state, not each setOptions call:
+   * two changes batched into one render would otherwise leave storage holding
+   * the first while the page shows the second. The first run is the value
+   * just read from storage, so there is nothing to write.
+   */
+  const hasCommittedSortOrderRef: MutableRefObject<boolean> =
+    useRef<boolean>(false);
+
+  useEffect(() => {
+    if (!hasCommittedSortOrderRef.current) {
+      hasCommittedSortOrderRef.current = true;
+      return;
+    }
+
+    writeStoredSortOrder(props.storageKey, sortOrder);
+  }, [sortOrder]);
+
+  return {
+    options,
+    optionsKey: getFeedOptionsKey(options),
+    eventTypeOptions,
+    isFiltered: isFeedFiltered(options),
+    setOptions,
+  };
+};
+
+export default useFeedOptions;

package/UI/Components/Icon/Icon.tsx

@@ -800,7 +800,7 @@ const Icon: FunctionComponent<ComponentProps> = ({
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25"
+        d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12"
       />,
     );
   } else if (icon === IconProp.CheckCircle) {

package/Utils/LabelRuleImportExport.ts

@@ -25,6 +25,7 @@ import RunbookLabelRule from "../Models/DatabaseModels/RunbookLabelRule";
 import ScheduledMaintenanceLabelRule from "../Models/DatabaseModels/ScheduledMaintenanceLabelRule";
 import ServerlessFunctionLabelRule from "../Models/DatabaseModels/ServerlessFunctionLabelRule";
 import ServiceLabelRule from "../Models/DatabaseModels/ServiceLabelRule";
+import ServiceLevelObjectiveLabelRule from "../Models/DatabaseModels/ServiceLevelObjectiveLabelRule";
 import StatusPageLabelRule from "../Models/DatabaseModels/StatusPageLabelRule";
 import WorkflowLabelRule from "../Models/DatabaseModels/WorkflowLabelRule";
 import Select from "../Types/BaseDatabase/Select";
@@ -74,10 +75,22 @@ export const LABEL_RULE_MODELS: Array<DatabaseBaseModelType> = [
   ScheduledMaintenanceLabelRule,
   ServerlessFunctionLabelRule,
   ServiceLabelRule,
+  ServiceLevelObjectiveLabelRule,
   StatusPageLabelRule,
   WorkflowLabelRule,
 ];
 
+/*
+ * Rule types whose engines match patterns through RulePatternMatchUtil: a
+ * regex, with a '*' wildcard fallback, on the trimmed pattern. Every other
+ * label rule compiles its pattern as a plain regex, so a pattern moving
+ * between the two groups can change what it matches.
+ */
+const WILDCARD_PATTERN_RULE_TYPES: ReadonlySet<string> = new Set<string>([
+  "NetworkDeviceLabelRule",
+  "ServiceLevelObjectiveLabelRule",
+]);
+
 export interface ParsedLabelRuleImport {
   sourceResourceType: string;
   destinationResourceType: string;
@@ -759,13 +772,14 @@ export default class LabelRuleImportExport {
       );
     }
     if (validatePattern && column.endsWith("Pattern") && value) {
-      const valid: boolean =
-        resourceType === "NetworkDeviceLabelRule"
-          ? RulePatternMatchUtil.isSupportedPattern(value)
-          : RulePatternMatchUtil.isValidRegex(value);
+      const acceptsWildcards: boolean =
+        WILDCARD_PATTERN_RULE_TYPES.has(resourceType);
+      const valid: boolean = acceptsWildcards
+        ? RulePatternMatchUtil.isSupportedPattern(value)
+        : RulePatternMatchUtil.isValidRegex(value);
       if (!valid) {
         throw new BadDataException(
-          `${title} is not a valid ${resourceType === "NetworkDeviceLabelRule" ? "regular expression or wildcard pattern" : "regular expression"}.`,
+          `${title} is not a valid ${acceptsWildcards ? "regular expression or wildcard pattern" : "regular expression"}.`,
         );
       }
     }
@@ -776,13 +790,17 @@ export default class LabelRuleImportExport {
     source: string,
     destination: string,
   ): void {
+    // Two rule types that match patterns the same way can trade any pattern.
     if (
-      (source === "NetworkDeviceLabelRule" ||
-        destination === "NetworkDeviceLabelRule") &&
-      (pattern.includes("*") || pattern !== pattern.trim())
+      WILDCARD_PATTERN_RULE_TYPES.has(source) ===
+      WILDCARD_PATTERN_RULE_TYPES.has(destination)
     ) {
+      return;
+    }
+
+    if (pattern.includes("*") || pattern !== pattern.trim()) {
       throw new BadDataException(
-        "Network device patterns also use wildcard matching and trim surrounding whitespace. A pattern containing '*' or surrounding whitespace cannot be transferred between network devices and another rule type without changing its meaning. Edit this pattern for the destination before importing.",
+        "Network device and SLO patterns also use wildcard matching and trim surrounding whitespace. A pattern containing '*' or surrounding whitespace cannot be transferred between those rules and another rule type without changing its meaning. Edit this pattern for the destination before importing.",
       );
     }
   }

package/Utils/Monitor/MetricValueFormatter.ts

@@ -14,9 +14,9 @@ import ValueFormatter from "../ValueFormatter";
  * head at 3am to find out whether the pod is anywhere near its limit.
  *
  * This module is the single place that decides how a (value, unit) pair
- * is rendered for a notification, so the breaching-samples table, the
+ * is rendered for a notification, so the breaching-samples list, the
  * "Filter Conditions Met" sentence, the observation summary and the
- * per-platform resource tables cannot drift apart inside one email.
+ * per-platform resource lists cannot drift apart inside one email.
  *
  * WHY IT WRAPS ValueFormatter RATHER THAN BEING A CALL TO IT.
  *

package/Utils/Rules/MonitorTypeRuleCriteria.ts

@@ -0,0 +1,31 @@
+import MonitorType from "../../Types/Monitor/MonitorType";
+import {
+  RuleCriteriaFilter,
+  RuleCriteriaOperator,
+} from "../../Types/Rules/RuleCriteria";
+
+const MONITOR_TYPES: ReadonlySet<string> = new Set(Object.values(MonitorType));
+
+export function isMonitorTypeCriteriaValue(
+  value: unknown,
+): value is MonitorType {
+  return typeof value === "string" && MONITOR_TYPES.has(value);
+}
+
+/** Monitor types are enum choices, so text and relation operators do not apply. */
+export function getMonitorTypeCriteriaValidationError(
+  filter: RuleCriteriaFilter,
+): string | null {
+  if (
+    filter.operator !== RuleCriteriaOperator.Equals &&
+    filter.operator !== RuleCriteriaOperator.NotEquals
+  ) {
+    return "Monitor type criteria only support Equals and Does not equal operators.";
+  }
+
+  if (!isMonitorTypeCriteriaValue(filter.value)) {
+    return "Monitor type criteria require a valid monitor type.";
+  }
+
+  return null;
+}

package/Utils/Slo/SloDuration.ts

@@ -15,9 +15,6 @@
  * DOM.
  */
 
-/** U+2212 MINUS SIGN — reads as a minus rather than a hyphen at tile sizes. */
-const MINUS_SIGN: string = "−";
-
 /**
  * Seconds per unit, largest first. Only the two most significant non-zero
  * units are rendered: "2d 5h" is what an on-call engineer needs, "2d 5h
@@ -97,6 +94,16 @@ export const formatDurationCompact: FormatDurationCompactFunction = (
   return parts.join(" ");
 };
 
+type FormatBudgetDurationFunction = (seconds: number) => string;
+
+const formatBudgetDuration: FormatBudgetDurationFunction = (
+  seconds: number,
+): string => {
+  return seconds !== 0 && Math.abs(seconds) < 1
+    ? "under 1s"
+    : formatDurationCompact(seconds);
+};
+
 /**
  * `errorBudgetRemainingSeconds` is SIGNED: negative means the budget is
  * overspent, and that overage is the single most useful number during a
@@ -121,10 +128,10 @@ export const formatErrorBudgetRemaining: FormatErrorBudgetRemainingFunction = (
   }
 
   if (numericSeconds < 0) {
-    return `${MINUS_SIGN}${formatDurationCompact(numericSeconds)} over budget`;
+    return `${formatBudgetDuration(numericSeconds)} over budget`;
   }
 
-  return `${formatDurationCompact(numericSeconds)} left`;
+  return `${formatBudgetDuration(numericSeconds)} left`;
 };
 
 /**
@@ -161,5 +168,14 @@ export const formatErrorBudgetRemainingOfTotal: FormatErrorBudgetRemainingOfTota
       return remainingText;
     }
 
-    return `${remainingText} of ${formatDurationCompact(totalSeconds)}`;
+    const totalText: string = formatBudgetDuration(totalSeconds);
+
+    if (
+      typeof data.remainingSeconds === "number" &&
+      data.remainingSeconds < 0
+    ) {
+      return `${remainingText} · ${totalText} allowed`;
+    }
+
+    return `${remainingText} of ${totalText}`;
   };

package/Utils/Slo/SloHealth.ts

@@ -248,16 +248,17 @@ export const getSloNotice: GetSloNoticeFunction = (
     }
 
     /*
-     * What is left are the worker's two data guards: the attached monitors
-     * no longer exist, or none of them has reported a status yet. Both are
-     * answered on the Monitors page.
+     * Monitors may have been attached since the last evaluation, or the
+     * worker may still be waiting for their status data. A stored
+     * Misconfigured status alone does not mean the current setup is wrong.
+     * Keep the monitor link so users can check data that is still missing.
      */
     return {
-      type: SloNoticeType.Warning,
-      title: "This SLO cannot be evaluated",
-      body: "Check that its monitors still exist and have started reporting a status, then wait a few minutes for the next evaluation.",
+      type: SloNoticeType.Info,
+      title: "Waiting for SLO evaluation",
+      body: "Monitors are attached. OneUptime evaluates this SLO every few minutes. Results will appear once monitor status data is available and the next evaluation completes.",
       action: {
-        label: "Review monitors",
+        label: "View monitors",
         target: SloNoticeActionTarget.Monitors,
       },
     };

package/Utils/Slo/SloMonitorRuleCriteria.ts

@@ -1,10 +1,15 @@
 import FilterCondition from "../../Types/Filter/FilterCondition";
 import ObjectID from "../../Types/ObjectID";
+import MonitorType from "../../Types/Monitor/MonitorType";
 import RuleCriteria, {
   RuleCriteriaFilter,
   RuleCriteriaOperator,
 } from "../../Types/Rules/RuleCriteria";
 import { isValidRuleCriteria } from "../Rules/RuleCriteriaMatcher";
+import {
+  getMonitorTypeCriteriaValidationError,
+  isMonitorTypeCriteriaValue,
+} from "../Rules/MonitorTypeRuleCriteria";
 
 /*
  * Plain-English descriptions of what an SLO monitor rule matches, for the
@@ -33,6 +38,7 @@ export const SLO_MONITOR_RULE_CRITERIA_FIELD_TITLES: Readonly<
   Record<string, string>
 > = {
   monitorLabels: "Labels",
+  monitorType: "Type",
   monitorNamePattern: "Name",
   monitorDescriptionPattern: "Description",
 };
@@ -78,6 +84,7 @@ export interface SloMonitorRuleLabelReference {
 export interface SloMonitorRuleCriteriaCarrier {
   criteria?: RuleCriteria | null | undefined;
   monitorLabels?: Array<SloMonitorRuleLabelReference> | undefined;
+  monitorType?: MonitorType | null | undefined;
   monitorNamePattern?: string | null | undefined;
   monitorDescriptionPattern?: string | null | undefined;
 }
@@ -247,7 +254,15 @@ export const describeSloMonitorRuleCriteria: DescribeSloMonitorRuleCriteriaFunct
     }
 
     if (hasConfiguredCriteria(rule)) {
-      if (!isValidRuleCriteria(rule.criteria)) {
+      if (
+        !isValidRuleCriteria(rule.criteria) ||
+        rule.criteria.filters.some((filter: RuleCriteriaFilter): boolean => {
+          return (
+            filter.field === "monitorType" &&
+            getMonitorTypeCriteriaValidationError(filter) !== null
+          );
+        })
+      ) {
         return SLO_MONITOR_RULE_INVALID_CRITERIA_DESCRIPTION;
       }
 
@@ -267,6 +282,14 @@ export const describeSloMonitorRuleCriteria: DescribeSloMonitorRuleCriteriaFunct
         .join(connector);
     }
 
+    if (
+      rule.monitorType !== undefined &&
+      rule.monitorType !== null &&
+      !isMonitorTypeCriteriaValue(rule.monitorType)
+    ) {
+      return SLO_MONITOR_RULE_INVALID_CRITERIA_DESCRIPTION;
+    }
+
     const parts: Array<string> = [];
 
     const legacyLabelIds: Array<string> = getSloMonitorRuleLabelIds(rule);
@@ -279,6 +302,14 @@ export const describeSloMonitorRuleCriteria: DescribeSloMonitorRuleCriteriaFunct
       );
     }
 
+    if (rule.monitorType) {
+      parts.push(
+        `${SLO_MONITOR_RULE_CRITERIA_FIELD_TITLES["monitorType"]} ${
+          SLO_MONITOR_RULE_OPERATOR_PHRASES[RuleCriteriaOperator.Equals]
+        } ${quote(rule.monitorType)}`,
+      );
+    }
+
     if (rule.monitorNamePattern) {
       parts.push(
         `${SLO_MONITOR_RULE_CRITERIA_FIELD_TITLES["monitorNamePattern"]} ${
@@ -358,6 +389,7 @@ export const getSloMonitorRuleCriteriaKey: GetSloMonitorRuleCriteriaKeyFunction
           return id.toLowerCase();
         })
         .sort(),
+      monitorType: rule.monitorType || "",
       name: rule.monitorNamePattern || "",
       description: rule.monitorDescriptionPattern || "",
     })}`;

package/Utils/Slo/SloOverviewText.ts

@@ -102,6 +102,39 @@ export const getSloTargetText: GetSloTargetTextFunction = (
   return target === null ? null : `Target ${target}`;
 };
 
+/**
+ * A budget below zero is exceeded, not a useful negative percentage left.
+ * Classify before rounding so even a small overage cannot read as 0%.
+ * The signed value remains available to calculations and history charts.
+ */
+export type GetSloBudgetRemainingTextFunction = (
+  percentage: number | undefined | null,
+) => string | null;
+
+export const getSloBudgetRemainingText: GetSloBudgetRemainingTextFunction = (
+  percentage: number | undefined | null,
+): string | null => {
+  const remaining: number | null = toFiniteNumber(percentage);
+
+  if (remaining === null) {
+    return null;
+  }
+
+  if (remaining < 0) {
+    return "Budget exceeded";
+  }
+
+  if (remaining === 0) {
+    return "No budget left";
+  }
+
+  if (remaining < 0.1) {
+    return "<0.1%";
+  }
+
+  return formatSloPercent(Math.min(remaining, 100), 1);
+};
+
 /** "No monitors" / "1 monitor" / "12 monitors". */
 export type GetSloMonitorCountTextFunction = (count: number) => string;
 

package/Utils/Slo/SloProjection.ts

@@ -518,15 +518,16 @@ export interface SloBudgetBarGeometry {
   atRiskThresholdPercentage: number;
   /** Same tier as every other red/amber/green on the SLO pages. */
   tier: SloBudgetTier;
-  /** Remaining budget is below zero — the fill is clamped, the text is not. */
+  /** Remaining budget is below zero; preserve this even though the fill is zero. */
   isOverspent: boolean;
 }
 
 /**
  * Everything the budget bar draws, from the SIGNED remaining percentage.
  *
- * The percentage is unrounded and uncapped below zero (an overspent budget
- * reads -340%), so only the drawing is clamped; the colour comes from
+ * The input percentage is unrounded and uncapped below zero, so an overspent
+ * budget still gets an explicit exceeded state when the drawing is clamped.
+ * The colour comes from
  * SloHealth.getSloBudgetTier with the SLO's own threshold, so the bar can
  * never be green while the status pill says At Risk.
  */

package/build/dist/Models/DatabaseModels/Index.js

@@ -392,6 +392,8 @@ import ServiceLevelObjectiveOwnerUser from "./ServiceLevelObjectiveOwnerUser";
 import ServiceLevelObjectiveOwnerTeam from "./ServiceLevelObjectiveOwnerTeam";
 import ServiceLevelObjectiveMonitorRule from "./ServiceLevelObjectiveMonitorRule";
 import ServiceLevelObjectiveFeed from "./ServiceLevelObjectiveFeed";
+import ServiceLevelObjectiveOwnerRule from "./ServiceLevelObjectiveOwnerRule";
+import ServiceLevelObjectiveLabelRule from "./ServiceLevelObjectiveLabelRule";
 import IncidentReminderRule from "./IncidentReminderRule";
 import AlertReminderRule from "./AlertReminderRule";
 import ScheduledMaintenanceReminderRule from "./ScheduledMaintenanceReminderRule";
@@ -592,6 +594,8 @@ const AllModelTypes = [
     ServiceLevelObjectiveOwnerTeam,
     ServiceLevelObjectiveMonitorRule,
     ServiceLevelObjectiveFeed,
+    ServiceLevelObjectiveOwnerRule,
+    ServiceLevelObjectiveLabelRule,
     IncidentReminderRule,
     AlertReminderRule,
     ScheduledMaintenanceReminderRule,