@oneuptime/common 7.0.2990 → 7.0.3010

package/Server/Utils/Telemetry.ts

@@ -1,4 +1,9 @@
-import OpenTelemetryAPI, { Meter } from "@opentelemetry/api";
+import OpenTelemetryAPI, {
+  // diag,
+  // DiagConsoleLogger,
+  // DiagLogLevel,
+  Meter,
+} from "@opentelemetry/api";
 import { Logger, logs } from "@opentelemetry/api-logs";
 import {
   Counter,
@@ -13,7 +18,10 @@ import { CompressionAlgorithm } from "@opentelemetry/otlp-exporter-base";
 import { Resource } from "@opentelemetry/resources";
 import {
   BatchLogRecordProcessor,
+  ConsoleLogRecordExporter,
   LoggerProvider,
+  LogRecordProcessor,
+  SimpleLogRecordProcessor,
 } from "@opentelemetry/sdk-logs";
 import {
   MeterProvider,
@@ -21,18 +29,37 @@ import {
 } from "@opentelemetry/sdk-metrics";
 import * as opentelemetry from "@opentelemetry/sdk-node";
 import { SpanExporter } from "@opentelemetry/sdk-trace-node";
-import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
+import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
 import URL from "Common/Types/API/URL";
 import Dictionary from "Common/Types/Dictionary";
+import { DisableTelemetry } from "../EnvironmentConfig";
+import logger from "./Logger";
 
 // Enable this line to see debug logs
 // diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.DEBUG);
 
+export type Span = opentelemetry.api.Span;
+export type SpanStatus = opentelemetry.api.SpanStatus;
+export type SpanException = opentelemetry.api.Exception;
+export type SpanOptions = opentelemetry.api.SpanOptions;
+export type TelemetryLogger = Logger;
+export type TelemetryAttributes = opentelemetry.api.Attributes;
+export type TelemetryCounter = Counter<opentelemetry.api.Attributes>;
+
+export enum SpanStatusCode {
+  UNSET = 0,
+  OK = 1,
+  ERROR = 2,
+}
+
 export default class Telemetry {
   public static sdk: opentelemetry.NodeSDK | null = null;
   public static logger: Logger | null = null;
   public static meter: Meter | null = null;
   public static meterProvider: MeterProvider | null = null;
+  public static loggerProvider: LoggerProvider | null = null;
+  public static metricReader: PeriodicExportingMetricReader | undefined;
+  public static serviceName: string | null = null;
 
   public static getHeaders(): Dictionary<string> {
     if (!process.env["OPENTELEMETRY_EXPORTER_OTLP_HEADERS"]) {
@@ -96,11 +123,19 @@ export default class Telemetry {
 
   public static getResource(data: { serviceName: string }): Resource {
     return new Resource({
-      [SemanticResourceAttributes.SERVICE_NAME]: data.serviceName,
+      [ATTR_SERVICE_NAME]: data.serviceName,
     });
   }
 
-  public static init(data: { serviceName: string }): opentelemetry.NodeSDK {
+  public static init(data: {
+    serviceName: string;
+  }): opentelemetry.NodeSDK | null {
+    this.serviceName = data.serviceName;
+
+    if (DisableTelemetry) {
+      return null;
+    }
+
     if (!this.sdk) {
       const headers: Dictionary<string> = this.getHeaders();
 
@@ -108,8 +143,6 @@ export default class Telemetry {
 
       let traceExporter: SpanExporter | undefined = undefined;
 
-      let metricReader: PeriodicExportingMetricReader | undefined = undefined;
-
       if (this.getOltpTracesEndpoint() && hasHeaders) {
         traceExporter = new OTLPTraceExporter({
           url: this.getOltpTracesEndpoint()!.toString(),
@@ -119,7 +152,7 @@ export default class Telemetry {
       }
 
       if (this.getOltpMetricsEndpoint() && hasHeaders) {
-        metricReader = new PeriodicExportingMetricReader({
+        this.metricReader = new PeriodicExportingMetricReader({
           exporter: new OTLPMetricExporter({
             url: this.getOltpMetricsEndpoint()!.toString(),
             headers: headers,
@@ -128,12 +161,16 @@ export default class Telemetry {
         });
       }
 
-      const loggerProvider: LoggerProvider = new LoggerProvider({
+      this.loggerProvider = new LoggerProvider({
         resource: this.getResource({
           serviceName: data.serviceName,
         }),
       });
 
+      let logRecordProcessor: LogRecordProcessor = new SimpleLogRecordProcessor(
+        new ConsoleLogRecordExporter(),
+      );
+
       if (this.getOltpLogsEndpoint() && hasHeaders) {
         const logExporter: OTLPLogExporter = new OTLPLogExporter({
           url: this.getOltpLogsEndpoint()!.toString(),
@@ -141,39 +178,43 @@ export default class Telemetry {
           compression: CompressionAlgorithm.GZIP,
         });
 
-        loggerProvider.addLogRecordProcessor(
-          new BatchLogRecordProcessor(logExporter),
-        );
+        logRecordProcessor = new BatchLogRecordProcessor(logExporter);
       }
 
-      logs.setGlobalLoggerProvider(loggerProvider);
+      this.loggerProvider.addLogRecordProcessor(logRecordProcessor);
+
+      logs.setGlobalLoggerProvider(this.loggerProvider);
 
       const nodeSdkConfiguration: Partial<opentelemetry.NodeSDKConfiguration> =
         {
           idGenerator: new AWSXRayIdGenerator(),
-          instrumentations: hasHeaders
-            ? [
-                // Add instrumentations here
-              ]
-            : [],
+          instrumentations: [],
           resource: this.getResource({
             serviceName: data.serviceName,
           }),
-          logRecordProcessor: loggerProvider as any,
+          autoDetectResources: true,
         };
 
       if (traceExporter) {
         nodeSdkConfiguration.traceExporter = traceExporter;
       }
 
-      if (metricReader) {
-        nodeSdkConfiguration.metricReader = metricReader as any;
+      // We will skip this becasue we're attachng this metric reader to the meter provider later.
+      // if (this.metricReader) {
+      //   nodeSdkConfiguration.metricReader = this.metricReader;
+      // }
+
+      if (logRecordProcessor) {
+        nodeSdkConfiguration.logRecordProcessor = logRecordProcessor;
       }
 
       const sdk: opentelemetry.NodeSDK = new opentelemetry.NodeSDK(
         nodeSdkConfiguration,
       );
 
+      this.getMeterProvider();
+      this.getMeter();
+
       process.on("SIGTERM", () => {
         sdk.shutdown().finally(() => {
           return process.exit(0);
@@ -188,17 +229,23 @@ export default class Telemetry {
     return this.sdk;
   }
 
-  public static getLogger(): Logger {
-    if (!this.logger) {
-      this.logger = logs.getLogger("default");
+  public static getLogger(): Logger | null {
+    if (!this.loggerProvider) {
+      return null;
     }
 
-    return this.logger;
+    return this.loggerProvider.getLogger("default");
   }
 
   public static getMeterProvider(): MeterProvider {
     if (!this.meterProvider) {
-      this.meterProvider = new MeterProvider();
+      this.meterProvider = new MeterProvider({
+        resource: this.getResource({
+          serviceName: this.serviceName || "default",
+        }),
+        readers: this.metricReader ? [this.metricReader] : [],
+      });
+
       OpenTelemetryAPI.metrics.setGlobalMeterProvider(this.meterProvider);
     }
 
@@ -279,4 +326,41 @@ export default class Telemetry {
 
     return histogram;
   }
+
+  public static getTracer(): opentelemetry.api.Tracer {
+    const tracer: opentelemetry.api.Tracer =
+      OpenTelemetryAPI.trace.getTracer("default");
+    return tracer;
+  }
+
+  public static startActiveSpan<T>(data: {
+    name: string;
+    options?: SpanOptions | undefined;
+    fn: (span: Span) => T;
+  }): T {
+    const { name } = data;
+
+    return this.getTracer().startActiveSpan(name, data.options || {}, data.fn);
+  }
+
+  public static recordExceptionMarkSpanAsErrorAndEndSpan(data: {
+    span: Span;
+    exception: unknown;
+  }): void {
+    const { span, exception } = data;
+
+    // log the exception as well
+    logger.error(exception);
+
+    span.recordException(exception as SpanException);
+    span.setStatus({
+      code: SpanStatusCode.ERROR,
+    });
+
+    this.endSpan(span);
+  }
+
+  public static endSpan(span: Span): void {
+    span.end();
+  }
 }

package/Types/Code/CodeType.ts

@@ -5,6 +5,7 @@ enum CodeType {
   JSON = "json",
   Markdown = "markdown",
   SQL = "sql",
+  Text = "text",
   // TODO add more mime types.
 }
 

package/Types/Database/PartialEntity.ts

@@ -1,3 +1,16 @@
-import { QueryDeepPartialEntity } from "typeorm/query-builder/QueryPartialEntity";
+/**
+ * Make all properties in T optional. Deep version.
+ */
+
+type QueryDeepPartialEntity<T> = {
+  [P in keyof T]?:
+    | (T[P] extends Array<infer U>
+        ? Array<QueryDeepPartialEntity<U>>
+        : T[P] extends ReadonlyArray<infer U>
+          ? ReadonlyArray<QueryDeepPartialEntity<U>>
+          : QueryDeepPartialEntity<T[P]>)
+    | (() => string)
+    | null;
+};
 
 export default QueryDeepPartialEntity;

package/Types/Date.ts

@@ -9,10 +9,18 @@ import Timezone from "./Timezone";
 export const Moment: typeof moment = moment;
 
 export default class OneUptimeDate {
-  public getNanoSecondsFromSeconds(seconds: number): number {
+  public static convertMinutesToMilliseconds(minutes: number): number {
+    return minutes * 60 * 1000;
+  }
+
+  public static getNanoSecondsFromSeconds(seconds: number): number {
     return seconds * 1000 * 1000 * 1000;
   }
 
+  public static now(): Date {
+    return this.getCurrentDate();
+  }
+
   public static getDateFromYYYYMMDD(
     year: string,
     month: string,

package/Types/Icon/IconProp.ts

@@ -1,5 +1,6 @@
 enum IconProp {
   Equals = "Equals",
+  Archive = "Archive",
   File = "File",
   Automation = "Automation",
   Workflow = "Workflow",
@@ -15,6 +16,7 @@ enum IconProp {
   CursorArrowRays = "CursorArrowRays",
   ArrowUpDown = "ArrowUpDown",
   Cube = "Cube",
+  Unarchive = "Unarchive",
   Swatch = "Swatch",
   Squares = "Squares",
   RectangleStack = "RectangleStack",

package/Types/Permission.ts

@@ -53,6 +53,12 @@ enum Permission {
   EditTelemetryServiceLog = "EditTelemetryServiceLog",
   ReadTelemetryServiceLog = "ReadTelemetryServiceLog",
 
+  // Exceptions
+  CreateTelemetryException = "CreateTelemetryException",
+  DeleteTelemetryException = "DeleteTelemetryException",
+  EditTelemetryException = "EditTelemetryException",
+  ReadTelemetryException = "ReadTelemetryException",
+
   // Spans
   CreateTelemetryServiceTraces = "CreateTelemetryServiceTraces",
   DeleteTelemetryServiceTraces = "DeleteTelemetryServiceTraces",
@@ -2445,6 +2451,39 @@ export class PermissionHelper {
         isAccessControlPermission: false,
       },
 
+      {
+        permission: Permission.CreateTelemetryException,
+        title: "Create Telemetry Service Exception",
+        description:
+          "This permission can create Telemetry Service Exception this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.DeleteTelemetryException,
+        title: "Delete Telemetry Service Exception",
+        description:
+          "This permission can delete Telemetry Service Exception of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.EditTelemetryException,
+        title: "Edit Telemetry Service Exception",
+        description:
+          "This permission can edit Telemetry Service Exception of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.ReadTelemetryException,
+        title: "Read Telemetry Service Exception",
+        description:
+          "This permission can read Telemetry Service Exception of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+
       {
         permission: Permission.CreateCopilotCodeRepository,
         title: "Create Code Repository",

package/UI/Components/ActionCard/ActionCard.tsx

@@ -0,0 +1,66 @@
+import { ButtonStyleType } from "../Button/Button";
+import Card from "../Card/Card";
+import ConfirmModal from "../Modal/ConfirmModal";
+import IconProp from "Common/Types/Icon/IconProp";
+import React, { ReactElement, useState } from "react";
+
+export interface ConfirmAction {
+  actionName: string;
+  actionIcon: IconProp;
+  onConfirmAction: () => void;
+  actionButtonStyle?: ButtonStyleType;
+  isLoading?: boolean;
+}
+
+export interface ComponentProps {
+  title: string;
+  description: string;
+  actions: Array<ConfirmAction>;
+}
+
+const ActionCard: (props: ComponentProps) => ReactElement = (
+  props: ComponentProps,
+): ReactElement => {
+  const [currentAction, setCurrentAction] = useState<ConfirmAction | undefined>(
+    undefined,
+  );
+
+  return (
+    <>
+      <Card
+        title={props.title}
+        description={props.description}
+        buttons={props.actions.map((action: ConfirmAction) => {
+          return {
+            title: action.actionName,
+            buttonStyle: action.actionButtonStyle || ButtonStyleType.NORMAL,
+            onClick: () => {
+              setCurrentAction(action);
+            },
+            icon: action.actionIcon,
+            isLoading: action.isLoading,
+          };
+        })}
+      />
+
+      {currentAction ? (
+        <ConfirmModal
+          description={`Are you sure you want to ${currentAction.actionName}?`}
+          title={`Confirm ${currentAction.actionName}`}
+          onSubmit={() => {
+            currentAction.onConfirmAction();
+            setCurrentAction(undefined);
+          }}
+          submitButtonText={`Confirm`}
+          onClose={() => {
+            setCurrentAction(undefined);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default ActionCard;

package/UI/Components/Alerts/Alert.tsx

@@ -16,13 +16,13 @@ export enum AlertSize {
 }
 
 export interface ComponentProps {
-  strongTitle?: undefined | string;
-  title?: undefined | string;
-  onClose?: undefined | (() => void);
-  type?: undefined | AlertType;
-  onClick?: (() => void) | undefined;
+  strongTitle?: string;
+  title?: string;
+  onClose?: () => void;
+  type?: AlertType;
+  onClick?: () => void;
   doNotShowIcon?: boolean | undefined;
-  dataTestId?: string;
+  dataTestId?: string | undefined;
   textClassName?: string | undefined;
   className?: string | undefined;
   color?: Color | undefined;
@@ -33,93 +33,102 @@ export interface ComponentProps {
 const Alert: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  let type: AlertType = AlertType.INFO;
+  const type: AlertType = props.type || AlertType.INFO;
 
-  if (props.type) {
-    type = props.type;
-  }
+  const typeClassNames: {
+    [key in AlertType]: {
+      text: string;
+      bg: string;
+      hover: string;
+    };
+  } = {
+    [AlertType.DANGER]: {
+      text: "text-red-200",
+      bg: "bg-red-700",
+      hover: "hover:bg-red-600",
+    },
+    [AlertType.INFO]: {
+      text: "text-gray-200",
+      bg: "bg-gray-700",
+      hover: "hover:bg-gray-600",
+    },
+    [AlertType.WARNING]: {
+      text: "text-yellow-200",
+      bg: "bg-gray-700",
+      hover: "hover:bg-yellow-600",
+    },
+    [AlertType.SUCCESS]: {
+      text: "text-green-200",
+      bg: "bg-gray-700",
+      hover: "hover:bg-green-600",
+    },
+  };
 
-  let className: string = "text-gray";
-  let bgClassName: string = "bg-gray";
-
-  if (AlertType.DANGER === type) {
-    className = "text-red";
-    bgClassName = "bg-red";
-  } else if (AlertType.INFO === type) {
-    className = "text-gray";
-    bgClassName = "bg-gray";
-  } else if (AlertType.WARNING === type) {
-    className = "text-yellow";
-    bgClassName = "bg-gray";
-  } else if (AlertType.SUCCESS === type) {
-    className = "text-green";
-    bgClassName = "bg-gray";
-  }
+  const {
+    text: textClassName,
+    bg: bgClassName,
+    hover: hoverClassName,
+  } = typeClassNames[type];
 
   return (
     <div
       id={props.id}
-      className={`rounded-md ${bgClassName}-700 p-4`}
+      className={`alert rounded-md ${bgClassName} p-4 ${props.className}`}
       data-testid={props.dataTestId}
-      onClick={() => {
-        props.onClick && props.onClick();
-      }}
+      onClick={props.onClick}
       role="alert"
-      style={
-        props.color
-          ? {
-              backgroundColor: props.color?.toString(),
-            }
-          : {}
-      }
+      style={props.color ? { backgroundColor: props.color.toString() } : {}}
     >
-      <div className="flex ">
+      <div className="alert-content flex">
         {!props.doNotShowIcon && (
-          <div className="flex-shrink-0">
-            {AlertType.DANGER === type && (
-              <Icon icon={IconProp.Alert} className="h-5 w-5 text-red-200" />
+          <div className="alert-icon flex-shrink-0">
+            {type === AlertType.DANGER && (
+              <Icon
+                icon={IconProp.Alert}
+                className={`h-5 w-5 ${textClassName}`}
+              />
             )}
-            {AlertType.WARNING === type && (
-              <Icon icon={IconProp.Alert} className="h-5 w-5 text-yellow-200" />
+            {type === AlertType.WARNING && (
+              <Icon
+                icon={IconProp.Alert}
+                className={`h-5 w-5 ${textClassName}`}
+              />
             )}
-            {AlertType.SUCCESS === type && (
+            {type === AlertType.SUCCESS && (
               <Icon
                 icon={IconProp.CheckCircle}
-                className="h-5 w-5 text-green-400"
+                className={`h-5 w-5 ${textClassName}`}
               />
             )}
-            {AlertType.INFO === type && (
-              <Icon icon={IconProp.Info} className="h-5 w-5 text-gray-200" />
+            {type === AlertType.INFO && (
+              <Icon
+                icon={IconProp.Info}
+                className={`h-5 w-5 ${textClassName}`}
+              />
             )}
           </div>
         )}
         <div
-          className={`ml-3 mr-3 flex-1 md:flex md:justify-between ${props.className}`}
+          className={`alert-text ml-3 mr-3 flex-1 md:flex md:justify-between ${props.textClassName}`}
         >
           <div
-            className={
-              props.textClassName ||
-              `text-sm flex justify-between ${className}-200`
-            }
+            className={`alert-message text-sm flex justify-between ${textClassName}`}
           >
             <div>
               <span className="font-medium">
                 {props.strongTitle}{" "}
-                {props.title && props.strongTitle ? "-" : ""}{" "}
+                {props.title && props.strongTitle ? "-" : ""}
               </span>
               {props.title}
             </div>
             {props.textOnRight && <div>{props.textOnRight}</div>}
           </div>
-
           {props.onClose && (
-            <p className="mt-3 text-sm md:mt-0 md:ml-6">
+            <p className="alert-close mt-3 text-sm md:mt-0 md:ml-6">
               <button
-                onClick={() => {
-                  props.onClose && props.onClose();
-                }}
-                role={"alert-close-button"}
-                className={`whitespace-nowrap font-medium ${className}-200 hover:${className}-50`}
+                onClick={props.onClose}
+                role="alert-close-button"
+                className={`whitespace-nowrap font-medium ${textClassName} hover:${hoverClassName}`}
               >
                 Close
                 <span aria-hidden="true"> &rarr;</span>

package/UI/Components/Card/Card.tsx

@@ -83,6 +83,7 @@ const Card: FunctionComponent<ComponentProps> = (
                         icon={button.icon}
                         shortcutKey={button.shortcutKey}
                         dataTestId="card-button"
+                        isLoading={button.isLoading}
                       />
                     </div>
                   );

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -1,5 +1,6 @@
+import Text from "../../../../Types/Text";
 import LineChart, { ComponentProps as LineChartProps } from "../Line/LineChart";
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, { FunctionComponent, ReactElement } from "react";
 
 export enum ChartType {
   LINE = "line",
@@ -13,7 +14,6 @@ export interface Chart {
   description?: string | undefined;
   type: ChartType;
   props: LineChartProps;
-  sync: boolean;
 }
 
 export interface ComponentProps {
@@ -23,9 +23,7 @@ export interface ComponentProps {
 const ChartGroup: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [syncValue, setSyncValue] = useState<
-    number | string | Date | undefined
-  >(undefined);
+  const syncId: string = Text.generateRandomText(10);
 
   return (
     <div className="lg:grid grid-cols-1 gap-5">
@@ -49,18 +47,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                     {chart.description}
                   </p>
                 )}
-                <LineChart
-                  key={index}
-                  {...chart.props}
-                  xAxisMarker={{
-                    value: chart.sync ? syncValue : undefined,
-                  }}
-                  onHoverXAxis={(value: string | number | Date) => {
-                    if (chart.sync) {
-                      setSyncValue(value);
-                    }
-                  }}
-                />
+                <LineChart key={index} {...chart.props} syncId={syncId} />
               </div>
             );
           default: