@oneuptime/common 10.0.43 → 10.0.45

package/Types/Exception/ExceptionMetricType.ts

@@ -0,0 +1,15 @@
+enum ExceptionMetricType {
+  ExceptionCount = "oneuptime.exception.count",
+  ExceptionRate = "oneuptime.exception.rate",
+  ExceptionCountByType = "oneuptime.exception.count.by.type",
+  ExceptionCountByService = "oneuptime.exception.count.by.service",
+  UnresolvedExceptionCount = "oneuptime.exception.unresolved.count",
+  ResolvedExceptionCount = "oneuptime.exception.resolved.count",
+  MutedExceptionCount = "oneuptime.exception.muted.count",
+  ExceptionFirstSeenTime = "oneuptime.exception.first.seen.time",
+  ExceptionLastSeenTime = "oneuptime.exception.last.seen.time",
+  ExceptionOccurrenceCount = "oneuptime.exception.occurrence.count",
+  ExceptionAffectedServiceCount = "oneuptime.exception.affected.service.count",
+}
+
+export default ExceptionMetricType;

package/Types/IsolatedVM/ReturnResult.ts

@@ -1,4 +1,7 @@
+import CapturedMetric from "../Monitor/CustomCodeMonitor/CapturedMetric";
+
 export default interface ReturnResult {
   returnValue: any;
   logMessages: string[];
+  capturedMetrics: CapturedMetric[];
 }

package/Types/Metrics/MetricDashboardMetricType.ts

@@ -0,0 +1,28 @@
+enum MetricDashboardMetricType {
+  // HTTP metrics
+  HttpRequestDuration = "http.server.request.duration",
+  HttpRequestCount = "http.server.request.count",
+  HttpRequestErrorRate = "http.server.request.error.rate",
+  HttpResponseSize = "http.server.response.body.size",
+  HttpRequestSize = "http.server.request.body.size",
+  HttpActiveRequests = "http.server.active_requests",
+
+  // System metrics
+  SystemCpuUtilization = "system.cpu.utilization",
+  SystemMemoryUsage = "system.memory.usage",
+  SystemDiskIo = "system.disk.io",
+  SystemNetworkIo = "system.network.io",
+
+  // Runtime metrics
+  ProcessCpuUtilization = "process.cpu.utilization",
+  ProcessMemoryUsage = "process.runtime.jvm.memory.usage",
+  GcDuration = "process.runtime.jvm.gc.duration",
+  ThreadCount = "process.runtime.jvm.threads.count",
+
+  // Custom application metrics
+  CustomCounter = "custom.counter",
+  CustomGauge = "custom.gauge",
+  CustomHistogram = "custom.histogram",
+}
+
+export default MetricDashboardMetricType;

package/Types/Metrics/MetricsQuery.ts

@@ -1,9 +1,10 @@
+import Search from "../BaseDatabase/Search";
 import Dictionary from "../Dictionary";
 import MetricsAggregationType from "./MetricsAggregationType";
 
 export default interface MetricsQuery {
   metricName: string;
-  attributes: Dictionary<string | boolean | number>;
+  attributes: Dictionary<string | boolean | number | Search<string>>;
   aggegationType: MetricsAggregationType;
   aggregateBy: Dictionary<boolean>;
 

package/Types/Monitor/CustomCodeMonitor/CapturedMetric.ts

@@ -0,0 +1,7 @@
+import { JSONObject } from "../../JSON";
+
+export default interface CapturedMetric {
+  name: string;
+  value: number;
+  attributes?: JSONObject | undefined;
+}

package/Types/Monitor/CustomCodeMonitor/CustomCodeMonitorResponse.ts

@@ -1,8 +1,10 @@
+import CapturedMetric from "./CapturedMetric";
 import { JSONObject } from "../../JSON";
 
 export default interface CustomCodeMonitorResponse {
   result: string | number | boolean | JSONObject | undefined;
   scriptError?: string | undefined;
   logMessages: string[];
+  capturedMetrics: CapturedMetric[];
   executionTimeInMS: number;
 }

package/Types/Monitor/UptimeBarTooltipIncident.ts

@@ -0,0 +1,21 @@
+import Color from "../Color";
+import ObjectID from "../ObjectID";
+
+export default interface UptimeBarTooltipIncident {
+  id: string;
+  title: string;
+  declaredAt: Date;
+  incidentSeverity?:
+    | {
+        name: string;
+        color: Color;
+      }
+    | undefined;
+  currentIncidentState?:
+    | {
+        name: string;
+        color: Color;
+      }
+    | undefined;
+  monitorIds: Array<ObjectID>;
+}

package/Types/Profile/ProfileMetricType.ts

@@ -0,0 +1,16 @@
+enum ProfileMetricType {
+  CpuProfileDuration = "oneuptime.profile.cpu.duration",
+  CpuProfileSampleCount = "oneuptime.profile.cpu.sample.count",
+  WallClockDuration = "oneuptime.profile.wall.duration",
+  MemoryAllocationSize = "oneuptime.profile.memory.allocation.size",
+  MemoryAllocationCount = "oneuptime.profile.memory.allocation.count",
+  HeapUsage = "oneuptime.profile.heap.usage",
+  GoroutineCount = "oneuptime.profile.goroutine.count",
+  ThreadCount = "oneuptime.profile.thread.count",
+  ProfileSampleRate = "oneuptime.profile.sample.rate",
+  ProfileCount = "oneuptime.profile.count",
+  TopFunctionCpuTime = "oneuptime.profile.top.function.cpu.time",
+  TopFunctionAllocations = "oneuptime.profile.top.function.allocations",
+}
+
+export default ProfileMetricType;

package/Types/Span/SpanMetricType.ts

@@ -0,0 +1,17 @@
+enum SpanMetricType {
+  SpanCount = "oneuptime.span.count",
+  SpanDuration = "oneuptime.span.duration",
+  SpanErrorCount = "oneuptime.span.error.count",
+  SpanErrorRate = "oneuptime.span.error.rate",
+  SpanRequestRate = "oneuptime.span.request.rate",
+  SpanP50Duration = "oneuptime.span.duration.p50",
+  SpanP90Duration = "oneuptime.span.duration.p90",
+  SpanP95Duration = "oneuptime.span.duration.p95",
+  SpanP99Duration = "oneuptime.span.duration.p99",
+  SpanStatusOk = "oneuptime.span.status.ok",
+  SpanStatusError = "oneuptime.span.status.error",
+  SpanStatusUnset = "oneuptime.span.status.unset",
+  SpanThroughput = "oneuptime.span.throughput",
+}
+
+export default SpanMetricType;

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -7,6 +7,7 @@ import ChartCurve from "../Types/ChartCurve";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export interface ComponentProps {
   data: Array<SeriesPoint>;
@@ -32,12 +33,8 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
   });
 
   useEffect(() => {
-    if (!props.data || props.data.length === 0) {
-      setRecords([]);
-    }
-
     const records: Array<ChartDataPoint> = DataPointUtil.getChartDataPoints({
-      seriesPoints: props.data,
+      seriesPoints: props.data || [],
       xAxis: props.xAxis,
       yAxis: props.yAxis,
     });
@@ -50,35 +47,45 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
     ? { height: `${props.heightInPx}px` }
     : {};
 
+  const hasNoData: boolean =
+    !props.data ||
+    props.data.length === 0 ||
+    props.data.every((series: SeriesPoint) => {
+      return series.data.length === 0;
+    });
+
   return (
-    <AreaChart
-      className={className}
-      style={style}
-      data={records}
-      tickGap={1}
-      index={"Time"}
-      categories={categories}
-      colors={[
-        "blue",
-        "emerald",
-        "violet",
-        "amber",
-        "cyan",
-        "pink",
-        "lime",
-        "fuchsia",
-        "indigo",
-        "rose",
-      ]}
-      valueFormatter={props.yAxis.options.formatter || undefined}
-      showTooltip={true}
-      connectNulls={true}
-      curve={props.curve || ChartCurve.MONOTONE}
-      syncid={props.sync ? props.syncid : undefined}
-      yAxisWidth={60}
-      onValueChange={() => {}}
-      referenceLines={props.referenceLines}
-    />
+    <div className="relative">
+      <AreaChart
+        className={className}
+        style={style}
+        data={records}
+        tickGap={1}
+        index={"Time"}
+        categories={categories}
+        colors={[
+          "blue",
+          "emerald",
+          "violet",
+          "amber",
+          "cyan",
+          "pink",
+          "lime",
+          "fuchsia",
+          "indigo",
+          "rose",
+        ]}
+        valueFormatter={props.yAxis.options.formatter || undefined}
+        showTooltip={true}
+        connectNulls={true}
+        curve={props.curve || ChartCurve.MONOTONE}
+        syncid={props.sync ? props.syncid : undefined}
+        yAxisWidth={60}
+        onValueChange={() => {}}
+        referenceLines={props.referenceLines}
+      />
+      {hasNoData && <NoDataMessage />}
+    </div>
   );
 };
 

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -6,6 +6,7 @@ import YAxis from "../Types/YAxis/YAxis";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export interface ComponentProps {
   data: Array<SeriesPoint>;
@@ -30,12 +31,8 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
   });
 
   useEffect(() => {
-    if (!props.data || props.data.length === 0) {
-      setRecords([]);
-    }
-
     const records: Array<ChartDataPoint> = DataPointUtil.getChartDataPoints({
-      seriesPoints: props.data,
+      seriesPoints: props.data || [],
       xAxis: props.xAxis,
       yAxis: props.yAxis,
     });
@@ -48,32 +45,42 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
     ? { height: `${props.heightInPx}px` }
     : {};
 
+  const hasNoData: boolean =
+    !props.data ||
+    props.data.length === 0 ||
+    props.data.every((series: SeriesPoint) => {
+      return series.data.length === 0;
+    });
+
   return (
-    <BarChart
-      className={className}
-      style={style}
-      data={records}
-      tickGap={1}
-      index={"Time"}
-      categories={categories}
-      colors={[
-        "indigo",
-        "rose",
-        "emerald",
-        "amber",
-        "cyan",
-        "gray",
-        "pink",
-        "lime",
-        "fuchsia",
-      ]}
-      valueFormatter={props.yAxis.options.formatter || undefined}
-      showTooltip={true}
-      yAxisWidth={60}
-      syncid={props.sync ? props.syncid : undefined}
-      onValueChange={() => {}}
-      referenceLines={props.referenceLines}
-    />
+    <div className="relative">
+      <BarChart
+        className={className}
+        style={style}
+        data={records}
+        tickGap={1}
+        index={"Time"}
+        categories={categories}
+        colors={[
+          "indigo",
+          "rose",
+          "emerald",
+          "amber",
+          "cyan",
+          "gray",
+          "pink",
+          "lime",
+          "fuchsia",
+        ]}
+        valueFormatter={props.yAxis.options.formatter || undefined}
+        showTooltip={true}
+        yAxisWidth={60}
+        syncid={props.sync ? props.syncid : undefined}
+        onValueChange={() => {}}
+        referenceLines={props.referenceLines}
+      />
+      {hasNoData && <NoDataMessage />}
+    </div>
   );
 };
 

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

@@ -1,4 +1,5 @@
 import Text from "../../../../Types/Text";
+import Dictionary from "../../../../Types/Dictionary";
 import LineChart, { ComponentProps as LineChartProps } from "../Line/LineChart";
 import BarChartElement, {
   ComponentProps as BarChartProps,
@@ -6,7 +7,10 @@ import BarChartElement, {
 import AreaChartElement, {
   ComponentProps as AreaChartProps,
 } from "../Area/AreaChart";
-import React, { FunctionComponent, ReactElement } from "react";
+import Icon, { SizeProp } from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+import Modal, { ModalWidth } from "../../Modal/Modal";
+import React, { FunctionComponent, ReactElement, useState } from "react";
 
 export enum ChartType {
   LINE = "line",
@@ -14,12 +18,21 @@ export enum ChartType {
   AREA = "area",
 }
 
+export interface ChartMetricInfo {
+  metricName: string;
+  aggregationType: string;
+  attributes?: Dictionary<string> | undefined;
+  groupByAttribute?: string | undefined;
+  unit?: string | undefined;
+}
+
 export interface Chart {
   id: string;
   title: string;
   description?: string | undefined;
   type: ChartType;
   props: LineChartProps | BarChartProps | AreaChartProps;
+  metricInfo?: ChartMetricInfo | undefined;
 }
 
 export interface ComponentProps {
@@ -33,6 +46,8 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const syncId: string = Text.generateRandomText(10);
+  const [metricInfoModalChart, setMetricInfoModalChart] =
+    useState<ChartMetricInfo | null>(null);
 
   const isLastChart: (index: number) => boolean = (index: number): boolean => {
     return index === props.charts.length - 1;
@@ -77,33 +92,157 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     }
   };
 
+  type GetInfoIconFunction = (chart: Chart) => ReactElement;
+
+  const getInfoIcon: GetInfoIconFunction = (chart: Chart): ReactElement => {
+    if (!chart.metricInfo) {
+      return <></>;
+    }
+
+    return (
+      <button
+        type="button"
+        className="ml-1.5 inline-flex items-center justify-center rounded-full w-5 h-5 text-gray-300 hover:text-gray-500 hover:bg-gray-100 transition-all duration-150"
+        title="View metric details"
+        onClick={() => {
+          setMetricInfoModalChart(chart.metricInfo || null);
+        }}
+      >
+        <Icon
+          icon={IconProp.InformationCircle}
+          size={SizeProp.Smaller}
+          className="h-3.5 w-3.5"
+        />
+      </button>
+    );
+  };
+
+  const renderMetricInfoModal: () => ReactElement = (): ReactElement => {
+    if (!metricInfoModalChart) {
+      return <></>;
+    }
+
+    const attributes: Dictionary<string> =
+      metricInfoModalChart.attributes || {};
+    const attributeKeys: Array<string> = Object.keys(attributes);
+
+    return (
+      <Modal
+        title="Metric Details"
+        onClose={() => {
+          setMetricInfoModalChart(null);
+        }}
+        onSubmit={() => {
+          setMetricInfoModalChart(null);
+        }}
+        submitButtonText="Close"
+        modalWidth={ModalWidth.Normal}
+      >
+        <div className="space-y-4">
+          <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+            <table className="w-full text-sm">
+              <tbody>
+                <tr className="border-b border-gray-200">
+                  <td className="py-2.5 pr-4 font-medium text-gray-500 whitespace-nowrap">
+                    Metric Name
+                  </td>
+                  <td className="py-2.5 text-gray-900 font-mono text-xs">
+                    {metricInfoModalChart.metricName}
+                  </td>
+                </tr>
+                <tr className="border-b border-gray-200">
+                  <td className="py-2.5 pr-4 font-medium text-gray-500 whitespace-nowrap">
+                    Aggregation
+                  </td>
+                  <td className="py-2.5 text-gray-900">
+                    {metricInfoModalChart.aggregationType}
+                  </td>
+                </tr>
+                {metricInfoModalChart.unit && (
+                  <tr className="border-b border-gray-200">
+                    <td className="py-2.5 pr-4 font-medium text-gray-500 whitespace-nowrap">
+                      Unit
+                    </td>
+                    <td className="py-2.5 text-gray-900">
+                      {metricInfoModalChart.unit}
+                    </td>
+                  </tr>
+                )}
+                {metricInfoModalChart.groupByAttribute && (
+                  <tr className="border-b border-gray-200">
+                    <td className="py-2.5 pr-4 font-medium text-gray-500 whitespace-nowrap">
+                      Grouped By
+                    </td>
+                    <td className="py-2.5 text-gray-900 font-mono text-xs">
+                      {metricInfoModalChart.groupByAttribute}
+                    </td>
+                  </tr>
+                )}
+                {attributeKeys.length > 0 && (
+                  <tr>
+                    <td className="py-2.5 pr-4 font-medium text-gray-500 whitespace-nowrap align-top">
+                      Attributes
+                    </td>
+                    <td className="py-2.5">
+                      <div className="space-y-1.5">
+                        {attributeKeys.map((key: string) => {
+                          return (
+                            <div key={key} className="flex items-center gap-2">
+                              <span className="inline-flex items-center rounded bg-gray-200 px-2 py-0.5 text-xs font-mono text-gray-700">
+                                {key}
+                              </span>
+                              <span className="text-gray-400">=</span>
+                              <span className="text-xs text-gray-900 font-mono">
+                                {attributes[key]}
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </Modal>
+    );
+  };
+
   // When hideCard is true, render charts in a clean vertical stack with dividers
   if (props.hideCard) {
     return (
-      <div className="space-y-0">
-        {props.charts.map((chart: Chart, index: number) => {
-          return (
-            <div
-              key={index}
-              className={`${!isLastChart(index) ? "border-b border-gray-100" : ""} ${props.chartCssClass || ""}`}
-            >
-              <div className="px-1 pt-5 pb-4">
-                <div className="mb-1">
-                  <h3 className="text-sm font-semibold text-gray-700 tracking-tight">
-                    {chart.title}
-                  </h3>
-                  {chart.description && (
-                    <p className="mt-0.5 text-xs text-gray-400 hidden md:block">
-                      {chart.description}
-                    </p>
-                  )}
+      <>
+        {renderMetricInfoModal()}
+        <div className="space-y-0">
+          {props.charts.map((chart: Chart, index: number) => {
+            return (
+              <div
+                key={index}
+                className={`${!isLastChart(index) ? "border-b border-gray-100" : ""} ${props.chartCssClass || ""}`}
+              >
+                <div className="px-1 pt-5 pb-4">
+                  <div className="mb-1">
+                    <div className="flex items-center">
+                      <h3 className="text-sm font-semibold text-gray-700 tracking-tight">
+                        {chart.title}
+                      </h3>
+                      {getInfoIcon(chart)}
+                    </div>
+                    {chart.description && (
+                      <p className="mt-0.5 text-xs text-gray-400 hidden md:block">
+                        {chart.description}
+                      </p>
+                    )}
+                  </div>
+                  {getChartContent(chart, index)}
                 </div>
-                {getChartContent(chart, index)}
               </div>
-            </div>
-          );
-        })}
-      </div>
+            );
+          })}
+        </div>
+      </>
     );
   }
 
@@ -112,35 +251,41 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     props.charts.length > 1 ? "lg:grid-cols-2" : "lg:grid-cols-1";
 
   return (
-    <div
-      className={`grid grid-cols-1 ${gridCols} gap-4 space-y-4 lg:space-y-0`}
-    >
-      {props.charts.map((chart: Chart, index: number) => {
-        return (
-          <div
-            key={index}
-            className={`p-5 rounded-lg border border-gray-200 bg-white shadow-sm ${props.chartCssClass || ""}`}
-          >
-            <h2
-              data-testid="card-details-heading"
-              id="card-details-heading"
-              className="text-base font-semibold leading-6 text-gray-900"
+    <>
+      {renderMetricInfoModal()}
+      <div
+        className={`grid grid-cols-1 ${gridCols} gap-4 space-y-4 lg:space-y-0`}
+      >
+        {props.charts.map((chart: Chart, index: number) => {
+          return (
+            <div
+              key={index}
+              className={`p-5 rounded-lg border border-gray-200 bg-white shadow-sm ${props.chartCssClass || ""}`}
             >
-              {chart.title}
-            </h2>
-            {chart.description && (
-              <p
-                data-testid="card-description"
-                className="mt-0.5 text-sm text-gray-500 w-full hidden md:block"
-              >
-                {chart.description}
-              </p>
-            )}
-            {getChartContent(chart, index)}
-          </div>
-        );
-      })}
-    </div>
+              <div className="flex items-center">
+                <h2
+                  data-testid="card-details-heading"
+                  id="card-details-heading"
+                  className="text-base font-semibold leading-6 text-gray-900"
+                >
+                  {chart.title}
+                </h2>
+                {getInfoIcon(chart)}
+              </div>
+              {chart.description && (
+                <p
+                  data-testid="card-description"
+                  className="mt-0.5 text-sm text-gray-500 w-full hidden md:block"
+                >
+                  {chart.description}
+                </p>
+              )}
+              {getChartContent(chart, index)}
+            </div>
+          );
+        })}
+      </div>
+    </>
   );
 };
 

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

@@ -0,0 +1,13 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+const NoDataMessage: FunctionComponent = (): ReactElement => {
+  return (
+    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+      <span className="text-sm text-gray-400 bg-white/90 border border-gray-100 rounded-full px-4 py-1.5 shadow-sm">
+        No data available
+      </span>
+    </div>
+  );
+};
+
+export default NoDataMessage;