@oneuptime/common 14.0.7 → 14.0.9

package/UI/Components/LogsViewer/components/LogsHistogram.tsx

@@ -95,6 +95,15 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
     bucketIntervalMs: props.bucketIntervalMs,
   });
 
+  /*
+   * The crosshair goes on the chart root itself: recharts sets an inline
+   * `cursor: default` on the .recharts-wrapper that fills the plot, so the
+   * cursor on the box around it never shows over the bars. Left off
+   * entirely when nothing can be dragged, so recharts keeps its default.
+   */
+  const chartRootCursorProps: { style?: React.CSSProperties } =
+    props.onTimeRangeSelect ? { style: { cursor: "crosshair" } } : {};
+
   const pivotedData: Array<PivotedRow> = useMemo(() => {
     return pivotBuckets(props.buckets);
   }, [props.buckets]);
@@ -111,15 +120,32 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
     });
   }, [props.buckets]);
 
-  if (props.isLoading && pivotedData.length === 0) {
+  /*
+   * The loader and the empty box below stand where the bars were, and take
+   * the double-click as the bars do: right after a zoom, while its window
+   * loads or when it holds nothing, is exactly when a reader double-clicks
+   * to go back (issue #4116), and the bars can replace them in the middle
+   * of that double-click (see placeholderProps). select-none: a
+   * double-click on the message would otherwise also select a word. A
+   * zoomed chart keeps its card while it loads (below), so the way back
+   * stays in the same place.
+   */
+  if (props.isLoading && pivotedData.length === 0 && !props.onZoomOut) {
     return (
-      <div className="flex h-32 items-center justify-center rounded-lg border border-gray-200 bg-white">
+      <div
+        className="flex h-32 select-none items-center justify-center rounded-lg border border-gray-200 bg-white"
+        {...selection.placeholderProps}
+      >
         <ComponentLoader />
       </div>
     );
   }
 
-  if (pivotedData.length === 0) {
+  /*
+   * A window with no logs has nothing to chart - unless a zoom brought the
+   * reader there: then the card stays, and its empty box is the way back.
+   */
+  if (pivotedData.length === 0 && !props.onZoomOut) {
     return <></>;
   }
 
@@ -129,7 +155,7 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
       <div className="flex items-center justify-between border-b border-gray-100 px-4 py-2">
         <div className="flex items-center gap-2">
           <span className="text-xs font-medium text-gray-500">Log Volume</span>
-          {props.onTimeRangeSelect && (
+          {props.onTimeRangeSelect && pivotedData.length > 0 && (
             <span className="text-[10px] text-gray-300">
               {selection.canClickToZoom
                 ? "Click or drag to zoom"
@@ -138,7 +164,7 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
           )}
           {props.onZoomOut && (
             <span className="text-[10px] text-gray-300">
-              Double-click to zoom out
+              Double-click to reset
             </span>
           )}
         </div>
@@ -158,87 +184,104 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
         </div>
       </div>
 
+      {pivotedData.length === 0 && (
+        <div
+          className="flex h-[120px] select-none items-center justify-center text-xs text-gray-400"
+          {...selection.placeholderProps}
+        >
+          {props.isLoading ? (
+            <ComponentLoader />
+          ) : (
+            "No logs in the selected range"
+          )}
+        </div>
+      )}
+
       {/* Chart */}
-      <div
-        className="select-none px-2 pb-1 pt-2"
-        style={{
-          height: 120,
-          cursor: props.onTimeRangeSelect ? "crosshair" : "default",
-        }}
-        onDoubleClick={selection.onDoubleClick}
-      >
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart
-            data={pivotedData}
-            margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
-            onMouseDown={selection.onMouseDown}
-            onMouseMove={selection.onMouseMove}
-            onMouseUp={selection.onMouseUp}
-            barCategoryGap="15%"
-            barGap={0}
-          >
-            <XAxis
-              dataKey="time"
-              tickFormatter={formatTickTime}
-              tick={{
-                fontSize: 10,
-                fill: "var(--ou-chart-tick, #9ca3af)",
-              }}
-              axisLine={{ stroke: "var(--ou-chart-grid, #e5e7eb)" }}
-              tickLine={false}
-              minTickGap={40}
-              dy={4}
-              interval="preserveStartEnd"
-            />
-            <YAxis
-              tick={{
-                fontSize: 10,
-                fill: "var(--ou-chart-tick, #9ca3af)",
-              }}
-              axisLine={false}
-              tickLine={false}
-              width={48}
-              allowDecimals={false}
-              tickFormatter={formatYAxisTick}
-            />
-            {/*
-             * The tooltip is pinned shut for the length of a drag: it would
-             * otherwise sit over the very bars the reader is trying to read
-             * while they pick the range. Dropping the prop hands control back
-             * to recharts once the drag ends.
-             */}
-            <Tooltip
-              content={<HistogramTooltip />}
-              cursor={{ fill: "rgba(99,102,241,0.06)" }}
-              {...(selection.isDragging ? { active: false } : {})}
-            />
-            {activeSeverities.map((severity: string, index: number) => {
-              const isLast: boolean = index === activeSeverities.length - 1;
-              return (
-                <Bar
-                  key={severity}
-                  dataKey={severity}
-                  stackId="severity"
-                  fill={getSeverityColor(severity).fill}
-                  radius={isLast ? [1.5, 1.5, 0, 0] : [0, 0, 0, 0]}
-                  isAnimationActive={false}
-                  maxBarSize={24}
-                />
-              );
-            })}
-            {selection.selectionStart && selection.selectionEnd && (
-              <ReferenceArea
-                x1={selection.selectionStart}
-                x2={selection.selectionEnd}
-                fill="rgba(99,102,241,0.12)"
-                stroke="rgba(99,102,241,0.5)"
-                strokeWidth={1}
-                radius={2}
+      {pivotedData.length > 0 && (
+        <div
+          className="select-none px-2 pb-1 pt-2"
+          style={{
+            height: 120,
+            cursor: props.onTimeRangeSelect ? "crosshair" : "default",
+          }}
+          onDoubleClick={selection.onDoubleClick}
+        >
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={pivotedData}
+              margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
+              onMouseDown={selection.onMouseDown}
+              {...selection.chartRootProps}
+              onMouseMove={selection.onMouseMove}
+              onMouseUp={selection.onMouseUp}
+              barCategoryGap="15%"
+              barGap={0}
+              {...chartRootCursorProps}
+            >
+              <XAxis
+                dataKey="time"
+                tickFormatter={formatTickTime}
+                tick={{
+                  fontSize: 10,
+                  fill: "var(--ou-chart-tick, #9ca3af)",
+                }}
+                axisLine={{ stroke: "var(--ou-chart-grid, #e5e7eb)" }}
+                tickLine={false}
+                minTickGap={40}
+                dy={4}
+                interval="preserveStartEnd"
               />
-            )}
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
+              <YAxis
+                tick={{
+                  fontSize: 10,
+                  fill: "var(--ou-chart-tick, #9ca3af)",
+                }}
+                axisLine={false}
+                tickLine={false}
+                width={48}
+                allowDecimals={false}
+                tickFormatter={formatYAxisTick}
+              />
+              {/*
+               * The tooltip is pinned shut for the length of a drag: it would
+               * otherwise sit over the very bars the reader is trying to read
+               * while they pick the range. Dropping the prop hands control back
+               * to recharts once the drag ends.
+               */}
+              <Tooltip
+                content={<HistogramTooltip />}
+                cursor={{ fill: "rgba(99,102,241,0.06)" }}
+                {...(selection.isDragging ? { active: false } : {})}
+              />
+              {activeSeverities.map((severity: string, index: number) => {
+                const isLast: boolean = index === activeSeverities.length - 1;
+                return (
+                  <Bar
+                    key={severity}
+                    dataKey={severity}
+                    stackId="severity"
+                    fill={getSeverityColor(severity).fill}
+                    radius={isLast ? [1.5, 1.5, 0, 0] : [0, 0, 0, 0]}
+                    isAnimationActive={false}
+                    maxBarSize={24}
+                  />
+                );
+              })}
+              {selection.selectionStart && selection.selectionEnd && (
+                <ReferenceArea
+                  x1={selection.selectionStart}
+                  x2={selection.selectionEnd}
+                  fill="rgba(99,102,241,0.12)"
+                  stroke="rgba(99,102,241,0.5)"
+                  strokeWidth={1}
+                  radius={2}
+                />
+              )}
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      )}
     </div>
   );
 };

package/UI/Components/LogsViewer/components/LogsViewerToolbar.tsx

@@ -25,6 +25,8 @@ export interface LogsViewerToolbarProps {
   liveOptions?: LiveLogsOptions;
   timeRange?: RangeStartAndEndDateTime;
   onTimeRangeChange?: (value: RangeStartAndEndDateTime) => void;
+  // Whether the picker offers "Reset zoom"; see LogTimeRangePicker.
+  showResetZoom?: boolean | undefined;
   onCreateSavedView?: (() => void) | undefined;
   savedViews?: Array<LogsSavedViewOption> | undefined;
   selectedSavedViewId?: string | null | undefined;
@@ -355,6 +357,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
           <LogTimeRangePicker
             value={props.timeRange}
             onChange={props.onTimeRangeChange}
+            showResetZoom={props.showResetZoom}
           />
         )}
 

package/UI/Components/ModelFormModal/ModelFormModal.tsx

@@ -5,12 +5,12 @@ import ButtonType from "../Button/ButtonTypes";
 import { FormProps } from "../Forms/BasicForm";
 import ModelForm, {
   ComponentProps as ModelFormComponentProps,
+  ModelFormOnBeforeCreate,
 } from "../Forms/ModelForm";
 import FormValues from "../Forms/Types/FormValues";
 import FormAnalyticsName from "../Forms/Utils/FormAnalyticsName";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
-import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
 import React, { MutableRefObject, ReactElement, useRef, useState } from "react";
 
@@ -28,9 +28,7 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   submitButtonStyleType?: undefined | ButtonStyleType;
   formProps: ModelFormComponentProps<TBaseModel>;
   modelIdToEdit?: ObjectID | undefined;
-  onBeforeCreate?:
-    | ((item: TBaseModel, miscDataProps: JSONObject) => Promise<TBaseModel>)
-    | undefined;
+  onBeforeCreate?: ModelFormOnBeforeCreate<TBaseModel> | undefined;
   footer?: ReactElement | undefined;
   formRef?: undefined | MutableRefObject<FormProps<FormValues<TBaseModel>>>;
 }

package/UI/Components/ModelTable/AnalyticsModelTable.tsx

@@ -13,6 +13,7 @@ import Select from "../../../Types/BaseDatabase/Select";
 import Sort from "../../../Types/BaseDatabase/Sort";
 import GroupBy from "../../../Types/BaseDatabase/GroupBy";
 import RequestOptions from "../../Utils/API/RequestOptions";
+import { ModelFormOnBeforeCreate } from "../Forms/ModelForm";
 
 export interface ComponentProps<TBaseModel extends AnalyticsBaseModel>
   extends BaseTableProps<TBaseModel> {
@@ -47,12 +48,7 @@ const AnalyticsModelTable: <TBaseModel extends AnalyticsBaseModel>(
         showCreateEditModal: (_data: {
           modalType: ModalType;
           modelIdToEdit?: ObjectID | undefined;
-          onBeforeCreate?:
-            | ((
-                item: TBaseModel,
-                miscDataProps: JSONObject,
-              ) => Promise<TBaseModel>)
-            | undefined;
+          onBeforeCreate?: ModelFormOnBeforeCreate<TBaseModel> | undefined;
           onSuccess?: ((item: TBaseModel) => void) | undefined;
           onClose?: (() => void) | undefined;
         }): ReactElement => {

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -25,7 +25,9 @@ import PermissionGate, {
 } from "../../Utils/PermissionGate";
 import ProjectUtil from "../../Utils/Project";
 import User from "../../Utils/User";
-import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
+import ActionButtonSchema, {
+  ActionButtonPlacement,
+} from "../ActionButton/ActionButtonSchema";
 import {
   BulkActionButtonSchema,
   BulkActionFailed,
@@ -45,7 +47,7 @@ import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import ClassicFilterType from "../Filters/Types/Filter";
 import FilterData from "../Filters/Types/FilterData";
 import { FormProps, FormSummaryConfig } from "../Forms/BasicForm";
-import { ModelField } from "../Forms/ModelForm";
+import { ModelField, ModelFormOnBeforeCreate } from "../Forms/ModelForm";
 import { FormStep } from "../Forms/Types/FormStep";
 import FormValues from "../Forms/Types/FormValues";
 import List from "../List/List";
@@ -186,9 +188,7 @@ export interface BaseTableCallbacks<
   showCreateEditModal: (data: {
     modalType: ModalType;
     modelIdToEdit?: ObjectID | undefined;
-    onBeforeCreate?:
-      | ((item: TBaseModel, miscDataProps: JSONObject) => Promise<TBaseModel>)
-      | undefined;
+    onBeforeCreate?: ModelFormOnBeforeCreate<TBaseModel> | undefined;
     onSuccess?: ((item: TBaseModel) => void) | undefined;
     onClose?: (() => void) | undefined;
   }) => ReactElement;
@@ -283,9 +283,7 @@ export interface BaseTableProps<
   groupBy?: GroupBy<TBaseModel> | undefined;
   onBeforeFetch?: (() => Promise<TBaseModel>) | undefined;
   createInitialValues?: FormValues<TBaseModel> | undefined;
-  onBeforeCreate?:
-    | ((item: TBaseModel, miscDataProps: JSONObject) => Promise<TBaseModel>)
-    | undefined;
+  onBeforeCreate?: ModelFormOnBeforeCreate<TBaseModel> | undefined;
   // Runs after both create and edit; modalType identifies which form was saved.
   onCreateSuccess?:
     | ((item: TBaseModel, modalType?: ModalType) => Promise<TBaseModel>)
@@ -2834,6 +2832,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         title: tx("Show ID"),
         buttonStyleType: ButtonStyleType.OUTLINE,
         hideOnMobile: true,
+        // A utility every row carries - it belongs in the ⋯ menu, not on the row.
+        placement: ActionButtonPlacement.MoreMenu,
         onClick: async (
           item: TBaseModel,
           onCompleteAction: VoidFunction,
@@ -2867,6 +2867,13 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             ? tx(props.viewButtonText)
             : `${tx("View")} ${tx(props.singularName || model.singularName || "")}`,
           buttonStyleType: ButtonStyleType.NORMAL,
+          /*
+           * Opening the record is what a row is for, so View is the row's one
+           * button and Edit, Delete and the rest go in the ⋯ menu beside it.
+           * Custom actions are listed ahead of View, so a table that wants one
+           * of its own on the row can still mark it Primary.
+           */
+          placement: ActionButtonPlacement.Primary,
           onClick: async (
             item: TBaseModel,
             onCompleteAction: VoidFunction,
@@ -4764,6 +4771,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           onBeforeCreate: async (
             item: TBaseModel,
             miscDataProps: JSONObject,
+            formValues: JSONObject,
           ) => {
             if (
               showAs === ShowAs.OrderedStatesList &&
@@ -4777,7 +4785,11 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             }
 
             if (props.onBeforeCreate) {
-              item = await props.onBeforeCreate(item, miscDataProps);
+              item = await props.onBeforeCreate(
+                item,
+                miscDataProps,
+                formValues,
+              );
             }
 
             return item;

package/UI/Components/ModelTable/CustomFieldColumns.tsx

@@ -7,6 +7,7 @@ import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/Database
 import CustomFieldType from "../../../Types/CustomField/CustomFieldType";
 import OneUptimeDate from "../../../Types/Date";
 import { CustomFieldDefinition } from "../../../Types/CustomField/CustomFieldDefinition";
+import { CUSTOM_FIELD_COLUMN_ID_PREFIX } from "../../../Types/CustomField/CustomFieldSavedViews";
 import {
   CustomFieldDropdownOption,
   parseCustomFieldDropdownOptions,
@@ -316,6 +317,14 @@ export const renderCustomFieldValue: RenderCustomFieldValueFunction = (data: {
     return <span>{JSON.stringify(value)}</span>;
   }
 
+  /*
+   * Long text keeps its line breaks, as the type promises and as the Custom
+   * Fields card and its email show it; runs of spaces still collapse.
+   */
+  if (definition.customFieldType === CustomFieldType.LongText) {
+    return <span className="whitespace-pre-line">{String(value)}</span>;
+  }
+
   return <span>{String(value)}</span>;
 };
 
@@ -343,7 +352,11 @@ export const getCustomFieldColumns: GetCustomFieldColumnsFunction = <
   return (data.definitions || []).map(
     (definition: CustomFieldDefinition): Column<TBaseModel> => {
       return {
-        id: `${CustomFieldsColumnKey}.${definition.name}`,
+        /*
+         * The prefix is shared with renaming a field, which rewrites saved
+         * views' column lists (CustomFieldSavedViews).
+         */
+        id: `${CUSTOM_FIELD_COLUMN_ID_PREFIX}${definition.name}`,
         field: {
           [CustomFieldsColumnKey]: true,
         } as Column<TBaseModel>["field"],

package/UI/Components/ModelTable/ModelTable.tsx

@@ -7,7 +7,11 @@ import PermissionGate, {
   ModelAction,
   PermissionGateResult,
 } from "../../Utils/PermissionGate";
-import { FormType, ModelField } from "../Forms/ModelForm";
+import {
+  FormType,
+  ModelField,
+  ModelFormOnBeforeCreate,
+} from "../Forms/ModelForm";
 import ModelFormModal from "../ModelFormModal/ModelFormModal";
 import BaseModelTable, {
   BaseTableProps,
@@ -260,12 +264,7 @@ const ModelTable: <TBaseModel extends BaseModel>(
           showCreateEditModal: (data: {
             modalType: ModalType;
             modelIdToEdit?: ObjectID | undefined;
-            onBeforeCreate?:
-              | ((
-                  item: TBaseModel,
-                  miscDataProps: JSONObject,
-                ) => Promise<TBaseModel>)
-              | undefined;
+            onBeforeCreate?: ModelFormOnBeforeCreate<TBaseModel> | undefined;
             onSuccess?: ((item: TBaseModel) => void) | undefined;
             onClose?: (() => void) | undefined;
           }): ReactElement => {