@oneuptime/common 12.0.4 → 12.0.6

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,
+      },
+    ];
+  }
+}

package/Utils/Dashboard/Components/Index.ts

@@ -7,6 +7,10 @@ import DashboardCephOsdListComponentUtil from "./DashboardCephOsdListComponent";
 import DashboardCephPoolListComponentUtil from "./DashboardCephPoolListComponent";
 import DashboardChartComponentUtil from "./DashboardChartComponent";
 import DashboardClockComponentUtil from "./DashboardClockComponent";
+import DashboardDataSourceChartComponentUtil from "./DashboardDataSourceChartComponent";
+import DashboardDataSourceGaugeComponentUtil from "./DashboardDataSourceGaugeComponent";
+import DashboardDataSourceTableComponentUtil from "./DashboardDataSourceTableComponent";
+import DashboardDataSourceValueComponentUtil from "./DashboardDataSourceValueComponent";
 import DashboardDockerContainerListComponentUtil from "./DashboardDockerContainerListComponent";
 import DashboardDockerHostListComponentUtil from "./DashboardDockerHostListComponent";
 import DashboardDockerImageListComponentUtil from "./DashboardDockerImageListComponent";
@@ -85,6 +89,30 @@ export default class DashboardComponentsUtil {
       >;
     }
 
+    if (dashboardComponentType === DashboardComponentType.DataSourceChart) {
+      return DashboardDataSourceChartComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.DataSourceValue) {
+      return DashboardDataSourceValueComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.DataSourceGauge) {
+      return DashboardDataSourceGaugeComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (dashboardComponentType === DashboardComponentType.DataSourceTable) {
+      return DashboardDataSourceTableComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
     if (dashboardComponentType === DashboardComponentType.LogStream) {
       return DashboardLogStreamComponentUtil.getComponentConfigArguments() as Array<
         ComponentArgument<DashboardBaseComponent>