@oneuptime/common 12.0.5 → 12.0.7

package/UI/Utils/PageScrollLock.ts

@@ -0,0 +1,66 @@
+/*
+ * The page behind an open dialog surface must not scroll, and nested surfaces
+ * share a single lock: a counter, rather than a boolean, is what stops an inner
+ * dialog from handing scrolling back while the surface that opened it is still
+ * up.
+ *
+ * This lives outside any one component on purpose. Modal and SideOver nest
+ * inside each other in shipped code — Workflow's "Run Workflow" panel is a
+ * SideOver that opens a ConfirmModal — and two private counters would race over
+ * document.body.style. Whichever surface unmounted first would restore the
+ * snapshot the other had already overwritten, leaving the page either scrolling
+ * under a dialog that is still open or locked forever with no dialog on screen.
+ */
+
+let openDialogCount: number = 0;
+let bodyOverflowBeforeLock: string = "";
+let bodyPaddingRightBeforeLock: string = "";
+
+export type PageScrollLockFunction = () => void;
+
+export const lockPageScroll: PageScrollLockFunction = (): void => {
+  openDialogCount++;
+
+  if (openDialogCount > 1 || typeof document === "undefined") {
+    return;
+  }
+
+  bodyOverflowBeforeLock = document.body.style.overflow;
+  bodyPaddingRightBeforeLock = document.body.style.paddingRight;
+
+  /*
+   * Hiding the scrollbar reclaims its width, so the page underneath would
+   * jump sideways by exactly that much. Pad it back to hold everything still.
+   */
+  const scrollbarWidth: number =
+    window.innerWidth - document.documentElement.clientWidth;
+
+  if (scrollbarWidth > 0) {
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+  }
+
+  document.body.style.overflow = "hidden";
+};
+
+export const unlockPageScroll: PageScrollLockFunction = (): void => {
+  openDialogCount = Math.max(0, openDialogCount - 1);
+
+  if (openDialogCount > 0 || typeof document === "undefined") {
+    return;
+  }
+
+  document.body.style.overflow = bodyOverflowBeforeLock;
+  document.body.style.paddingRight = bodyPaddingRightBeforeLock;
+};
+
+/*
+ * Test-only escape hatch. The counter is module state that survives between
+ * cases in the same jest file, so a suite that asserts on the FIRST lock needs
+ * a way back to a known zero.
+ */
+export const resetPageScrollLockForTesting: PageScrollLockFunction =
+  (): void => {
+    openDialogCount = 0;
+    bodyOverflowBeforeLock = "";
+    bodyPaddingRightBeforeLock = "";
+  };

package/UI/Utils/TestDataSource.ts

@@ -0,0 +1,61 @@
+import URL from "../../Types/API/URL";
+import Dictionary from "../../Types/Dictionary";
+import HTTPErrorResponse from "../../Types/API/HTTPErrorResponse";
+import HTTPResponse from "../../Types/API/HTTPResponse";
+import { JSONObject } from "../../Types/JSON";
+import { APP_API_URL } from "../Config";
+import API from "./API/API";
+
+export interface DataSourceTestResult {
+  success: boolean;
+  message: string;
+}
+
+export default class TestDataSource {
+  /*
+   * Tests a data source's connectivity and credentials (by id) via the
+   * /data-source/test endpoint and returns a friendly success/failure
+   * result. The endpoint replies 200 with { ok, message } for both
+   * outcomes, so failures surface through `ok` rather than an HTTP error.
+   * Callers pass the project tenant headers.
+   */
+  public static async test(data: {
+    dataSourceId: string;
+    headers?: Dictionary<string> | undefined;
+  }): Promise<DataSourceTestResult> {
+    try {
+      const response: HTTPResponse<JSONObject> | HTTPErrorResponse =
+        await API.post({
+          url: URL.fromString(APP_API_URL.toString()).addRoute(
+            "/data-source/test",
+          ),
+          data: {
+            dataSourceId: data.dataSourceId,
+          },
+          ...(data.headers ? { headers: data.headers } : {}),
+        });
+
+      if (response.isFailure()) {
+        return {
+          success: false,
+          message: API.getFriendlyMessage(response),
+        };
+      }
+
+      const responseData: JSONObject = response.data as JSONObject;
+      const isOk: boolean = Boolean(responseData["ok"]);
+
+      return {
+        success: isOk,
+        message:
+          (responseData["message"] as string) ||
+          (isOk ? "Connection successful." : "Connection failed."),
+      };
+    } catch (err) {
+      return {
+        success: false,
+        message: API.getFriendlyMessage(err),
+      };
+    }
+  }
+}

package/UI/esbuild-config.js

@@ -201,6 +201,42 @@ function copyMonacoAssets(outdir) {
   fs.cpSync(source, destination, { recursive: true });
 }
 
+// Tailwind's Play CDN build, copied out of Common the same way.
+//
+// It used to be committed once per frontend - five byte-identical copies of a
+// 684 KB minified file, each one its own set of code-scanning alerts to
+// triage. The server-rendered pages (docs, the API reference, the on-call and
+// SSO message views) needed a copy too, and adding a sixth is not a thing
+// worth doing. Common/Server/Static/Vendor is now the only copy in the tree:
+// the services mount it at /oneuptime-assets, and the frontends get it copied
+// in here, at the path their index.ejs already asks for.
+//
+// The filename carries the version, so it stays in the URL - changing it would
+// mean editing five index.ejs files to match, and getting one wrong is an
+// unstyled page.
+const TAILWIND_FILENAME = "tailwind-3.4.5.js";
+
+function copyTailwindAsset(outdir) {
+  const source = path.resolve(
+    __dirname,
+    "..",
+    "Server",
+    "Static",
+    "Vendor",
+    "tailwind",
+    TAILWIND_FILENAME,
+  );
+
+  const destination = path.resolve(
+    path.dirname(outdir),
+    "assets/js",
+    TAILWIND_FILENAME,
+  );
+
+  fs.mkdirSync(path.dirname(destination), { recursive: true });
+  fs.copyFileSync(source, destination);
+}
+
 // Read environment variables from .env file
 function readEnvFile(pathToFile) {
   if (!fs.existsSync(pathToFile)) {
@@ -346,6 +382,9 @@ async function build(config, serviceName) {
     copyMonacoAssets(config.outdir);
     console.log(`📦 Copied Monaco assets for ${serviceName}`);
 
+    copyTailwindAsset(config.outdir);
+    console.log(`📦 Copied Tailwind for ${serviceName}`);
+
     if (isAnalyze && result.metafile) {
       const analyzeText = await esbuild.analyzeMetafile(result.metafile);
       console.log(`\n📊 Bundle analysis for ${serviceName}:`);
@@ -379,6 +418,9 @@ async function watch(config, serviceName) {
     copyMonacoAssets(config.outdir);
     console.log(`📦 Copied Monaco assets for ${serviceName}`);
 
+    copyTailwindAsset(config.outdir);
+    console.log(`📦 Copied Tailwind for ${serviceName}`);
+
     await context.watch();
     console.log(`👀 Watching ${serviceName} for changes...`);
   } catch (error) {
@@ -394,4 +436,7 @@ module.exports = {
   createCSSPlugin,
   createFileLoaderPlugin,
   readEnvFile,
+  // Exported so Common/Tests can run it, rather than assert on its source.
+  copyTailwindAsset,
+  TAILWIND_FILENAME,
 };

package/Utils/Analytics.ts

@@ -1,6 +1,11 @@
 import Email from "../Types/Email";
 import { JSONObject } from "../Types/JSON";
 import posthog from "posthog-js";
+import {
+  REVENUE_EVENT_SCHEMA_VERSION,
+  RevenueEventName,
+  RevenueEventProperties,
+} from "../Types/Analytics/RevenueEvent";
 
 export default class Analytics {
   private _isInitialized: boolean = false;
@@ -32,6 +37,16 @@ export default class Analytics {
     posthog.reset();
   }
 
+  public captureRevenueEvent(
+    eventName: RevenueEventName,
+    data: RevenueEventProperties,
+  ): void {
+    this.capture(eventName, {
+      ...data,
+      event_schema_version: REVENUE_EVENT_SCHEMA_VERSION,
+    });
+  }
+
   public capture(eventName: string, data?: JSONObject): void {
     // PostHog tracking
     if (this.isInitialized) {

package/Utils/Dashboard/Components/DashboardDataSourceChartComponent.ts

@@ -0,0 +1,88 @@
+import DashboardDataSourceChartComponent from "../../../Types/Dashboard/DashboardComponents/DashboardDataSourceChartComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import DashboardChartType from "../../../Types/Dashboard/Chart/ChartType";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Customize the chart appearance",
+  order: 1,
+};
+
+export default class DashboardDataSourceChartComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardDataSourceChartComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.DataSourceChart,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 3,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        /*
+         * Seeded with one blank query so the editor opens on a query card
+         * instead of an empty panel the user has to discover a button in.
+         */
+        queries: [
+          {
+            id: ObjectID.generate().toString(),
+            dataSourceId: "",
+            query: "",
+          },
+        ],
+        chartType: DashboardChartType.Line,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardDataSourceChartComponent>
+  > {
+    return [
+      {
+        name: "Chart Type",
+        description: "How the returned series will be visualized",
+        required: true,
+        type: ComponentInputType.Dropdown,
+        id: "chartType",
+        section: DisplaySection,
+        dropdownOptions: [
+          { label: "Line Chart", value: DashboardChartType.Line },
+          { label: "Bar Chart", value: DashboardChartType.Bar },
+          { label: "Area Chart", value: DashboardChartType.Area },
+          {
+            label: "Stacked Area Chart",
+            value: DashboardChartType.StackedArea,
+          },
+          { label: "Pie Chart", value: DashboardChartType.Pie },
+        ],
+      },
+      {
+        name: "Title",
+        description: "Displayed above the chart",
+        required: false,
+        type: ComponentInputType.Text,
+        id: "chartTitle",
+        section: DisplaySection,
+      },
+      {
+        name: "Description",
+        description: "Subtitle shown below the title",
+        required: false,
+        type: ComponentInputType.LongText,
+        id: "chartDescription",
+        section: DisplaySection,
+      },
+    ];
+  }
+}

package/Utils/Dashboard/Components/DashboardDataSourceGaugeComponent.ts

@@ -0,0 +1,123 @@
+import DashboardDataSourceGaugeComponent from "../../../Types/Dashboard/DashboardComponents/DashboardDataSourceGaugeComponent";
+import { DataSourceValueReduce } from "../../../Types/Dashboard/DashboardComponents/DashboardDataSourceValueComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import { DATA_SOURCE_REDUCE_DROPDOWN_OPTIONS } from "./DashboardDataSourceShared";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Customize the gauge range and appearance",
+  order: 1,
+};
+
+const ThresholdsSection: ComponentArgumentSection = {
+  name: "Thresholds",
+  description: "Set warning and critical levels",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export default class DashboardDataSourceGaugeComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardDataSourceGaugeComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.DataSourceGauge,
+      widthInDashboardUnits: 3,
+      heightInDashboardUnits: 3,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 2,
+      minWidthInDashboardUnits: 2,
+      arguments: {
+        query: {
+          id: ObjectID.generate().toString(),
+          dataSourceId: "",
+          query: "",
+        },
+        reduce: DataSourceValueReduce.Last,
+        minValue: 0,
+        maxValue: 100,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardDataSourceGaugeComponent>
+  > {
+    return [
+      {
+        name: "Title",
+        description: "Label shown above the gauge",
+        required: false,
+        type: ComponentInputType.Text,
+        id: "gaugeTitle",
+        section: DisplaySection,
+      },
+      {
+        name: "Reduce",
+        description:
+          "How the points returned across the dashboard's time range collapse into the single number the needle points at",
+        required: false,
+        type: ComponentInputType.Dropdown,
+        id: "reduce",
+        placeholder: DataSourceValueReduce.Last,
+        section: DisplaySection,
+        dropdownOptions: DATA_SOURCE_REDUCE_DROPDOWN_OPTIONS,
+      },
+      {
+        name: "Unit",
+        description:
+          'Suffix rendered after the centre value and on the min/max labels. Known units also scale it — "Bytes" reads as 1.5 MB, "ms" as 2.4 sec, "%" as 99.9%.',
+        required: false,
+        type: ComponentInputType.Text,
+        id: "unit",
+        placeholder: "e.g. %, ms, Bytes",
+        section: DisplaySection,
+      },
+      {
+        name: "Min Value",
+        description: "Left end of the gauge scale",
+        required: false,
+        type: ComponentInputType.Number,
+        id: "minValue",
+        placeholder: "0",
+        section: DisplaySection,
+      },
+      {
+        name: "Max Value",
+        description: "Right end of the gauge scale",
+        required: false,
+        type: ComponentInputType.Number,
+        id: "maxValue",
+        placeholder: "100",
+        section: DisplaySection,
+      },
+      {
+        name: "Warning Threshold",
+        description: "Yellow zone starts at this value",
+        required: false,
+        type: ComponentInputType.Number,
+        id: "warningThreshold",
+        isAdvanced: true,
+        section: ThresholdsSection,
+      },
+      {
+        name: "Critical Threshold",
+        description: "Red zone starts at this value",
+        required: false,
+        type: ComponentInputType.Number,
+        id: "criticalThreshold",
+        isAdvanced: true,
+        section: ThresholdsSection,
+      },
+    ];
+  }
+}

package/Utils/Dashboard/Components/DashboardDataSourceShared.ts

@@ -0,0 +1,16 @@
+import { DropdownOption } from "../../../UI/Components/Dropdown/Dropdown";
+import { DataSourceValueReduce } from "../../../Types/Dashboard/DashboardComponents/DashboardDataSourceValueComponent";
+
+/*
+ * Reduction picker shared by the Data Source Value and Gauge widgets — both
+ * collapse a series into one number the same way, so the option list (and
+ * its wording) lives in one place.
+ */
+export const DATA_SOURCE_REDUCE_DROPDOWN_OPTIONS: Array<DropdownOption> = [
+  { label: "Last value", value: DataSourceValueReduce.Last },
+  { label: "First value", value: DataSourceValueReduce.First },
+  { label: "Average", value: DataSourceValueReduce.Avg },
+  { label: "Sum", value: DataSourceValueReduce.Sum },
+  { label: "Min", value: DataSourceValueReduce.Min },
+  { label: "Max", value: DataSourceValueReduce.Max },
+];

package/Utils/Dashboard/Components/DashboardDataSourceTableComponent.ts

@@ -0,0 +1,72 @@
+import DashboardDataSourceTableComponent from "../../../Types/Dashboard/DashboardComponents/DashboardDataSourceTableComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Customize how the returned rows render",
+  order: 1,
+};
+
+export default class DashboardDataSourceTableComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardDataSourceTableComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.DataSourceTable,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 4,
+      arguments: {
+        query: {
+          id: ObjectID.generate().toString(),
+          dataSourceId: "",
+          query: "",
+        },
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardDataSourceTableComponent>
+  > {
+    return [
+      {
+        name: "Title",
+        description: "Header shown above the table",
+        required: false,
+        type: ComponentInputType.Text,
+        id: "tableTitle",
+        section: DisplaySection,
+      },
+      {
+        name: "Description",
+        description: "Subtitle shown below the title",
+        required: false,
+        type: ComponentInputType.LongText,
+        id: "tableDescription",
+        section: DisplaySection,
+      },
+      {
+        name: "Max Rows",
+        description:
+          "Only render this many rows, applied after sorting. Leave empty to render every row the query returns.",
+        required: false,
+        type: ComponentInputType.Number,
+        id: "maxRows",
+        placeholder: "All rows",
+        section: DisplaySection,
+      },
+    ];
+  }
+}

package/Utils/Dashboard/Components/DashboardDataSourceValueComponent.ts

@@ -0,0 +1,126 @@
+import DashboardDataSourceValueComponent, {
+  DataSourceValueReduce,
+} from "../../../Types/Dashboard/DashboardComponents/DashboardDataSourceValueComponent";
+import { DashboardValueTrendDirection } from "../../../Types/Dashboard/DashboardComponents/DashboardValueComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import { DATA_SOURCE_REDUCE_DROPDOWN_OPTIONS } from "./DashboardDataSourceShared";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Title, unit, and how the returned points reduce to one number",
+  order: 1,
+};
+
+const ThresholdsSection: ComponentArgumentSection = {
+  name: "Thresholds",
+  description: "Set warning and critical levels",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export default class DashboardDataSourceValueComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardDataSourceValueComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.DataSourceValue,
+      widthInDashboardUnits: 3,
+      heightInDashboardUnits: 1,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 1,
+      minWidthInDashboardUnits: 1,
+      arguments: {
+        title: "",
+        query: {
+          id: ObjectID.generate().toString(),
+          dataSourceId: "",
+          query: "",
+        },
+        reduce: DataSourceValueReduce.Last,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardDataSourceValueComponent>
+  > {
+    return [
+      {
+        name: "Title",
+        description: "Label shown above the value",
+        required: false,
+        type: ComponentInputType.Text,
+        id: "title",
+        section: DisplaySection,
+      },
+      {
+        name: "Reduce",
+        description:
+          "How the points returned across the dashboard's time range collapse into the single number shown",
+        required: false,
+        type: ComponentInputType.Dropdown,
+        id: "reduce",
+        placeholder: DataSourceValueReduce.Last,
+        section: DisplaySection,
+        dropdownOptions: DATA_SOURCE_REDUCE_DROPDOWN_OPTIONS,
+      },
+      {
+        name: "Unit",
+        description:
+          'Suffix rendered after the number. Known units also scale it — "Bytes" reads as 1.5 MB, "ms" as 2.4 sec, "%" as 99.9%. Leave empty for a bare number.',
+        required: false,
+        type: ComponentInputType.Text,
+        id: "unit",
+        placeholder: "e.g. %, ms, Bytes, requests",
+        section: DisplaySection,
+      },
+      {
+        name: "Trend Direction",
+        description:
+          "How the trend arrow is coloured. Higher is better paints a rise green; higher is worse paints it red.",
+        required: false,
+        type: ComponentInputType.Dropdown,
+        id: "trendDirection",
+        isAdvanced: true,
+        section: DisplaySection,
+        dropdownOptions: [
+          {
+            label: "Higher is better (↑ green)",
+            value: DashboardValueTrendDirection.HigherIsBetter,
+          },
+          {
+            label: "Higher is worse (↑ red)",
+            value: DashboardValueTrendDirection.HigherIsWorse,
+          },
+        ],
+      },
+      {
+        name: "Warning Threshold",
+        description: "Yellow background when value exceeds this",
+        required: false,
+        type: ComponentInputType.Number,
+        id: "warningThreshold",
+        isAdvanced: true,
+        section: ThresholdsSection,
+      },
+      {
+        name: "Critical Threshold",
+        description: "Red background when value exceeds this",
+        required: false,
+        type: ComponentInputType.Number,
+        id: "criticalThreshold",
+        isAdvanced: true,
+        section: ThresholdsSection,
+      },
+    ];
+  }
+}