@oneuptime/common 12.0.32 → 12.0.34

package/UI/Components/Charts/Utils/XAxis.ts

@@ -1,5 +1,7 @@
+import AggregationInterval from "../../../../Types/BaseDatabase/AggregationInterval";
 import OneUptimeDate from "../../../../Types/Date";
 import NotImplementedException from "../../../../Types/Exception/NotImplementedException";
+import SeriesPoints from "../Types/SeriesPoints";
 import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin";
 import XAxisPrecision from "../Types/XAxis/XAxisPrecision";
 
@@ -8,6 +10,49 @@ export default class XAxisUtil {
     return new Date(value.getTime());
   }
 
+  /*
+   * The grid step a caller should pin when its points are buckets the
+   * analytics backend produced, rather than raw samples.
+   *
+   * This is the bridge between the two ladders. AggregationInterval is what
+   * the server was asked to bucket by (AggregationIntervalUtil owns that
+   * decision, and the server compiles it into `toStartOfInterval`);
+   * XAxisPrecision is the step this file walks the axis at. Pinning the
+   * translation of one to the other is what makes "one slot == one backend
+   * bucket" a fact rather than a coincidence of two duration ladders
+   * agreeing.
+   *
+   * `Total` is the one interval with no grid at all — it collapses the whole
+   * window into a single aggregate whose timestamp is the earliest sample,
+   * not a bucket start — so it pins nothing and the duration ladder applies.
+   */
+  public static getPrecisionForAggregationInterval(
+    interval: AggregationInterval,
+  ): XAxisPrecision | undefined {
+    switch (interval) {
+      case AggregationInterval.Minute:
+        return XAxisPrecision.EVERY_MINUTE;
+      case AggregationInterval.FiveMinutes:
+        return XAxisPrecision.EVERY_FIVE_MINUTES;
+      case AggregationInterval.FifteenMinutes:
+        return XAxisPrecision.EVERY_FIFTEEN_MINUTES;
+      case AggregationInterval.ThirtyMinutes:
+        return XAxisPrecision.EVERY_THIRTY_MINUTES;
+      case AggregationInterval.Hour:
+        return XAxisPrecision.EVERY_HOUR;
+      case AggregationInterval.Day:
+        return XAxisPrecision.EVERY_DAY;
+      case AggregationInterval.Week:
+        return XAxisPrecision.EVERY_WEEK;
+      case AggregationInterval.Month:
+        return XAxisPrecision.EVERY_MONTH;
+      case AggregationInterval.Year:
+        return XAxisPrecision.EVERY_YEAR;
+      default:
+        return undefined;
+    }
+  }
+
   /*
    * A chart's x-axis label is not decoration — it IS the identity of its
    * bucket. DataPointUtil places a series row by finding the first row
@@ -110,7 +155,18 @@ export default class XAxisUtil {
   public static getPrecision(data: {
     xAxisMin: XAxisMaxMin;
     xAxisMax: XAxisMaxMin;
+    precision?: XAxisPrecision | undefined;
   }): XAxisPrecision {
+    /*
+     * An explicit pin wins outright — see XAxisOptions.precision for why a
+     * caller that knows the bucket size must not have it re-guessed from the
+     * window duration. Checked before the Date guard so a pinned axis stays
+     * pinned regardless of how its bounds are expressed.
+     */
+    if (data.precision) {
+      return data.precision;
+    }
+
     if (
       typeof data.xAxisMax === "number" ||
       typeof data.xAxisMin === "number"
@@ -184,6 +240,7 @@ export default class XAxisUtil {
   public static getPrecisionIntervals(data: {
     xAxisMin: XAxisMaxMin;
     xAxisMax: XAxisMaxMin;
+    precision?: XAxisPrecision | undefined;
   }): Array<Date> {
     const precision: XAxisPrecision = XAxisUtil.getPrecision(data);
 
@@ -280,9 +337,169 @@ export default class XAxisUtil {
     return intervals;
   }
 
+  /*
+   * How much of the LAST slot's bucket has to lie inside the window before
+   * an empty slot is worth an axis position. Half.
+   *
+   * The bound has to sit somewhere between the two ends it separates, and
+   * both ends are real:
+   *
+   *  - Near zero coverage means the bucket is not in the window in any
+   *    meaningful sense. The alert snapshot that prompted this covered
+   *    243 MILLISECONDS of a 60-second bucket (its window ends at the
+   *    instant the alert was declared, which fell just past a minute
+   *    boundary); a window that ends exactly on a boundary covers none of
+   *    the next bucket at all. Those slots cannot carry data, and an
+   *    unfillable slot at the right-hand edge is the reported gap.
+   *  - Most-of-the-bucket coverage means an empty slot is INFORMATION.
+   *    "Last 7 days" ends mid-afternoon, so today's bucket is ~60% inside
+   *    the window; if a count chart has nothing in it, that empty final bar
+   *    says "nothing today", and dropping the tick would hide it.
+   *
+   * A half-covered bucket is the natural line between "barely touched" and
+   * "genuinely part of this window", and it keeps every rolling window
+   * anchored at `now` — where the in-progress bucket is on average half
+   * elapsed — on the safe side.
+   */
+  private static readonly MIN_TRAILING_BUCKET_COVERAGE: number = 0.5;
+
+  /*
+   * The intervals a chart should actually RENDER, which is the raw grid
+   * minus a trailing slot that no data could ever land in.
+   *
+   * getPrecisionIntervals walks inclusively to the window end, so the final
+   * slot is the start of whichever bucket CONTAINS that end. That bucket
+   * runs past the end of the window, so the query never covered all of it —
+   * and when the window ends at or just after a bucket boundary it covered
+   * essentially none of it. The backend returns rows only for buckets that
+   * had samples, so such a slot comes back empty every time; and because the
+   * recharts x-axis is categorical over exactly these slots, an empty one at
+   * the end is not a rounding detail — it stretches the axis a whole bucket
+   * past the last plotted point. On a 5-minute alert snapshot that is a
+   * fifth of the chart left blank.
+   *
+   * Only ever ONE slot is dropped, and only when BOTH hold:
+   *
+   *  - it carries no data, so a live in-progress bucket keeps rendering
+   *    (dropping populated trailing buckets would make every now-anchored
+   *    chart lag by a bucket — the opposite complaint), and
+   *  - the window covers less than half of it, so an empty bucket that the
+   *    window really does span stays on the axis.
+   *
+   * Dropping at most one is what keeps a genuine outage visible: a source
+   * that stopped reporting three buckets before the window end still leaves
+   * two blank slots on the axis, which is the truth. Callers with no series
+   * to check get the raw grid unchanged.
+   */
+  public static getRenderableIntervals(data: {
+    xAxisMin: XAxisMaxMin;
+    xAxisMax: XAxisMaxMin;
+    precision?: XAxisPrecision | undefined;
+    seriesPoints?: Array<SeriesPoints> | undefined;
+  }): Array<Date> {
+    const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals(data);
+
+    if (!data.seriesPoints || intervals.length < 2) {
+      return intervals;
+    }
+
+    const lastInterval: Date = intervals[intervals.length - 1]!;
+    const previousInterval: Date = intervals[intervals.length - 2]!;
+
+    /*
+     * Bucket width read off the grid itself rather than recomputed from the
+     * precision: the walk steps in wall-clock time, so a month, a year or a
+     * daylight-saving day is exactly as wide as the grid says it is.
+     */
+    const bucketWidthInMs: number =
+      lastInterval.getTime() - previousInterval.getTime();
+    if (bucketWidthInMs <= 0) {
+      return intervals;
+    }
+
+    /*
+     * Emptiness — and the bucket boundary below — are decided with the SAME
+     * formatter that DataPointUtil uses to place a datapoint on a row.
+     * Anything else would let the two disagree about which bucket the last
+     * slot IS, and the whole point of trimming here rather than in
+     * DataPointUtil is that the rows, the categorical axis and the
+     * annotation indexes are built from one array.
+     */
+    const formatter: (value: Date) => string = XAxisUtil.getFormatter(data);
+    const lastLabel: string = formatter(lastInterval);
+
+    /*
+     * A slot's DATE and the bucket it collects into are not the same thing.
+     * The walk starts at the window's own start, so on most charts the grid
+     * is anchored mid-bucket: a "last 7 days" axis stepping a day from
+     * 28 Aug 14:42 ends on a slot dated 4 Sep 14:42, which the formatter
+     * floors to the label "4 Sep" — the bucket [4 Sep 00:00, 5 Sep 00:00),
+     * of which the window covers nearly fifteen hours.
+     *
+     * Coverage can therefore only be measured off the slot's date when the
+     * slot IS its bucket's start, which is what this asks: a slot on a
+     * boundary has a different label one millisecond before it. When the
+     * grid is anchored mid-bucket the window necessarily spans everything
+     * from the bucket's real start up to the window end, which is most of
+     * it, so the slot stays — the conservative answer, and the one that
+     * keeps an empty "today" bar on a daily count chart.
+     *
+     * The alert snapshot is the aligned case (MetricView floors the window
+     * start onto the bucket grid), which is exactly when the slot date is
+     * the bucket start and the coverage measured below is the real one.
+     */
+    const isSlotOnBucketBoundary: boolean =
+      formatter(new Date(lastInterval.getTime() - 1)) !== lastLabel;
+    if (!isSlotOnBucketBoundary) {
+      return intervals;
+    }
+
+    const windowEndInMs: number =
+      typeof data.xAxisMax === "number"
+        ? data.xAxisMax
+        : OneUptimeDate.fromString(data.xAxisMax).getTime();
+    const coverage: number =
+      (windowEndInMs - lastInterval.getTime()) / bucketWidthInMs;
+    if (coverage >= XAxisUtil.MIN_TRAILING_BUCKET_COVERAGE) {
+      return intervals;
+    }
+
+    const slotLabels: Set<string> = new Set<string>(
+      intervals.map((interval: Date) => {
+        return formatter(interval);
+      }),
+    );
+
+    let hasAnyData: boolean = false;
+    for (const series of data.seriesPoints) {
+      for (const point of series.data) {
+        const label: string = formatter(point.x);
+        if (label === lastLabel) {
+          // The trailing bucket is populated — it stays.
+          return intervals;
+        }
+        if (!hasAnyData && slotLabels.has(label)) {
+          hasAnyData = true;
+        }
+      }
+    }
+
+    /*
+     * A chart with nothing on it anywhere keeps its full grid, so an empty
+     * chart still draws an axis spanning the window the user asked for
+     * instead of one silently a bucket short.
+     */
+    if (!hasAnyData) {
+      return intervals;
+    }
+
+    return intervals.slice(0, intervals.length - 1);
+  }
+
   public static getFormatter(data: {
     xAxisMin: XAxisMaxMin;
     xAxisMax: XAxisMaxMin;
+    precision?: XAxisPrecision | undefined;
   }): (value: Date) => string {
     const precision: XAxisPrecision = XAxisUtil.getPrecision(data);
 

package/UI/Components/CommandPalette/CommandPalette.tsx

@@ -8,7 +8,7 @@ import KeyboardKey, {
 } from "../KeyboardShortcut/KeyboardKey";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
-import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
+import { usePageScrollLock } from "../../Utils/PageScrollLock";
 import {
   PaletteCommand,
   PaletteSearchProvider,
@@ -194,13 +194,7 @@ const CommandPalettePanel: FunctionComponent<PanelProps> = (
   }, []);
 
   // The page behind the palette must not scroll while it is open.
-  useEffect(() => {
-    lockPageScroll();
-
-    return () => {
-      unlockPageScroll();
-    };
-  }, []);
+  usePageScrollLock(true);
 
   useEffect(() => {
     inputRef.current?.focus();

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -19,6 +19,12 @@ import {
   CustomFieldDropdownOption,
   parseCustomFieldDropdownOptions,
 } from "../../../Types/CustomField/CustomFieldDropdownOption";
+import {
+  CustomFieldMappingSourceInfo,
+  getCustomFieldMappingRelationSelect,
+  getCustomFieldMappingSources,
+  hasCustomFieldMappingSource,
+} from "../../../Types/CustomField/CustomFieldMappingCatalog";
 import Color from "../../../Types/Color";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
@@ -94,6 +100,74 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
   const [model, setModel] = useState<BaseModel | null>(null);
   const [showModelForm, setShowModelForm] = useState<boolean>(false);
 
+  /*
+   * Which related resources this resource's custom fields may inherit from.
+   * Empty for most of them, in which case everything below behaves exactly as
+   * it did before mapping existed.
+   */
+  const mappingSources: Array<CustomFieldMappingSourceInfo> =
+    getCustomFieldMappingSources(new props.customFieldType().tableName!);
+
+  /*
+   * A mapped field is a derived value, so it is shown rather than edited — but
+   * only on records that actually have a source to derive it from. On a record
+   * with none, the mapping can never fill it in and there is no reason to take
+   * the field away from the operator.
+   */
+  type IsMappedAndInheritedFunction = (schemaItem: BaseModel) => boolean;
+
+  const isMappedAndInherited: IsMappedAndInheritedFunction = (
+    schemaItem: BaseModel,
+  ): boolean => {
+    const resource: string | undefined = (schemaItem as any)
+      .mapFromResourceType;
+    const fieldName: string | undefined = (schemaItem as any)
+      .mapFromCustomFieldName;
+
+    if (!resource || !fieldName) {
+      return false;
+    }
+
+    const source: CustomFieldMappingSourceInfo | undefined =
+      mappingSources.find((candidate: CustomFieldMappingSourceInfo) => {
+        return candidate.resource === resource;
+      });
+
+    if (!source) {
+      return false;
+    }
+
+    return hasCustomFieldMappingSource({
+      source: source,
+      record: model as unknown as Record<string, unknown>,
+    });
+  };
+
+  type GetMappedDescriptionFunction = (
+    schemaItem: BaseModel,
+  ) => string | undefined;
+
+  const getMappedDescription: GetMappedDescriptionFunction = (
+    schemaItem: BaseModel,
+  ): string | undefined => {
+    const description: string | undefined = (schemaItem as any).description;
+
+    if (!isMappedAndInherited(schemaItem)) {
+      return description;
+    }
+
+    const source: CustomFieldMappingSourceInfo | undefined =
+      mappingSources.find((candidate: CustomFieldMappingSourceInfo) => {
+        return candidate.resource === (schemaItem as any).mapFromResourceType;
+      });
+
+    const note: string = `Copied from the ${source?.title} custom field "${
+      (schemaItem as any).mapFromCustomFieldName
+    }".`;
+
+    return description ? `${description} ${note}` : note;
+  };
+
   const onLoad: PromiseVoidFunction = async (): Promise<void> => {
     try {
       // load schema.
@@ -113,16 +187,33 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
             customFieldType: true,
             description: true,
             dropdownOptions: true,
+            mapFromResourceType: true,
+            mapFromCustomFieldName: true,
           } as any,
           sort: {},
         });
 
+      /*
+       * The relation a mapped field would inherit through is read alongside
+       * the values, so the card can tell "this field is mapped and this record
+       * has a monitor" (show it, read-only) from "this field is mapped but
+       * this record has none" (leave it editable — an SLO or security-event
+       * alert has no monitor and would otherwise be locked out of the field
+       * entirely). Nothing extra is selected for the six resources that have
+       * no mapping sources at all.
+       */
+      const itemSelect: JSONObject = {
+        customFields: true,
+      };
+
+      for (const source of mappingSources) {
+        Object.assign(itemSelect, getCustomFieldMappingRelationSelect(source));
+      }
+
       const item: BaseModel | null = await ModelAPI.getItem<BaseModel>({
         modelType: props.modelType,
         id: props.modelId,
-        select: {
-          customFields: true,
-        } as any,
+        select: itemSelect as any,
       });
 
       setSchemaList(schemaList.data);
@@ -195,8 +286,19 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
    * take the button away, or the error message is telling the operator to
    * retry something they can no longer reach.
    */
+  /*
+   * A field whose value is copied from a related resource is not one the
+   * modal offers, so a card where EVERY field is mapped has nothing to edit
+   * and the button would open an empty form.
+   */
+  const editableSchemaCount: number = schemaList.filter(
+    (schemaItem: BaseModel) => {
+      return !isMappedAndInherited(schemaItem);
+    },
+  ).length;
+
   const canEdit: boolean =
-    isEditable && !isLoading && schemaList.length > 0 && Boolean(model);
+    isEditable && !isLoading && editableSchemaCount > 0 && Boolean(model);
 
   /*
    * Custom field values live on the record itself, so editing them is an
@@ -269,7 +371,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
               return {
                 key: (schemaItem as any).name,
                 title: (schemaItem as any).name,
-                description: (schemaItem as any).description,
+                description: getMappedDescription(schemaItem) as string,
                 fieldType: (schemaItem as any).customFieldType,
                 placeholder: "No data entered",
                 dropdownOptions: isDropdown
@@ -292,26 +394,42 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
             }}
             formProps={{
               initialValues: (model as any)?.["customFields"] || {},
-              fields: schemaList.map((schemaItem: BaseModel) => {
-                const isDropdown: boolean =
-                  (schemaItem as any).customFieldType ===
-                    CustomFieldType.Dropdown ||
-                  (schemaItem as any).customFieldType ===
-                    CustomFieldType.MultiSelectDropdown;
-                return {
-                  field: {
-                    [(schemaItem as any).name]: true,
-                  },
-                  title: (schemaItem as any).name,
-                  description: (schemaItem as any).description,
-                  fieldType: (schemaItem as any).customFieldType,
-                  required: false,
-                  placeholder: "",
-                  dropdownOptions: isDropdown
-                    ? parseDropdownOptions((schemaItem as any).dropdownOptions)
-                    : undefined,
-                };
-              }),
+              /*
+               * Mapped fields are left OUT of the form rather than rendered
+               * disabled: `Field.disabled` is honoured by only three of the
+               * form's input branches, so a disabled Dropdown, multi-select or
+               * toggle stays fully editable and the value would silently snap
+               * back on the next sync. Their stored values still survive the
+               * save — this form submits its whole values object, which starts
+               * from the record's existing bag — and the server re-applies the
+               * mapping on update either way.
+               */
+              fields: schemaList
+                .filter((schemaItem: BaseModel) => {
+                  return !isMappedAndInherited(schemaItem);
+                })
+                .map((schemaItem: BaseModel) => {
+                  const isDropdown: boolean =
+                    (schemaItem as any).customFieldType ===
+                      CustomFieldType.Dropdown ||
+                    (schemaItem as any).customFieldType ===
+                      CustomFieldType.MultiSelectDropdown;
+                  return {
+                    field: {
+                      [(schemaItem as any).name]: true,
+                    },
+                    title: (schemaItem as any).name,
+                    description: (schemaItem as any).description,
+                    fieldType: (schemaItem as any).customFieldType,
+                    required: false,
+                    placeholder: "",
+                    dropdownOptions: isDropdown
+                      ? parseDropdownOptions(
+                          (schemaItem as any).dropdownOptions,
+                        )
+                      : undefined,
+                  };
+                }),
             }}
           />
         )}