@oneuptime/common 10.0.37 → 10.0.38

package/Server/API/TelemetryAPI.ts

@@ -158,6 +158,10 @@ router.post(
         ? (body["spanIds"] as Array<string>)
         : undefined;
 
+      const attributes: Record<string, string> | undefined = body["attributes"]
+        ? (body["attributes"] as Record<string, string>)
+        : undefined;
+
       const request: HistogramRequest = {
         projectId: databaseProps.tenantId,
         startTime,
@@ -168,6 +172,7 @@ router.post(
         bodySearchText,
         traceIds,
         spanIds,
+        attributes,
       };
 
       const buckets: Array<HistogramBucket> =
@@ -242,6 +247,10 @@ router.post(
         ? (body["spanIds"] as Array<string>)
         : undefined;
 
+      const attributes: Record<string, string> | undefined = body["attributes"]
+        ? (body["attributes"] as Record<string, string>)
+        : undefined;
+
       const facets: Record<string, Array<FacetValue>> = {};
 
       for (const facetKey of facetKeys) {
@@ -256,6 +265,7 @@ router.post(
           bodySearchText,
           traceIds,
           spanIds,
+          attributes,
         };
 
         facets[facetKey] = await LogAggregationService.getFacetValues(request);

package/Server/Services/LogAggregationService.ts

@@ -25,6 +25,7 @@ export interface HistogramRequest {
   bodySearchText?: string | undefined;
   traceIds?: Array<string> | undefined;
   spanIds?: Array<string> | undefined;
+  attributes?: Record<string, string> | undefined;
 }
 
 export interface FacetValue {
@@ -43,6 +44,7 @@ export interface FacetRequest {
   bodySearchText?: string | undefined;
   traceIds?: Array<string> | undefined;
   spanIds?: Array<string> | undefined;
+  attributes?: Record<string, string> | undefined;
 }
 
 export type AnalyticsChartType = "timeseries" | "toplist" | "table";
@@ -589,7 +591,12 @@ export class LogAggregationService {
     statement: Statement,
     request: Pick<
       HistogramRequest,
-      "serviceIds" | "severityTexts" | "bodySearchText" | "traceIds" | "spanIds"
+      | "serviceIds"
+      | "severityTexts"
+      | "bodySearchText"
+      | "traceIds"
+      | "spanIds"
+      | "attributes"
     >,
   ): void {
     if (request.serviceIds && request.serviceIds.length > 0) {
@@ -640,6 +647,22 @@ export class LogAggregationService {
         }}`,
       );
     }
+
+    if (request.attributes && Object.keys(request.attributes).length > 0) {
+      for (const [attrKey, attrValue] of Object.entries(request.attributes)) {
+        LogAggregationService.validateFacetKey(attrKey);
+
+        statement.append(
+          SQL` AND attributes[${{
+            type: TableColumnType.Text,
+            value: attrKey,
+          }}] = ${{
+            type: TableColumnType.Text,
+            value: attrValue,
+          }}`,
+        );
+      }
+    }
   }
 
   @CaptureSpan()

package/Server/Utils/Telemetry/Telemetry.ts

@@ -211,33 +211,50 @@ export default class TelemetryUtil {
     const jsonValue: JSONObject = value as JSONObject;
 
     if (jsonValue && typeof jsonValue === "object") {
-      if (Object.prototype.hasOwnProperty.call(jsonValue, "stringValue")) {
-        const stringValue: JSONValue = jsonValue["stringValue"];
+      // Handle both camelCase (JSON encoding) and snake_case (protobuf via protobufjs)
+      if (
+        Object.prototype.hasOwnProperty.call(jsonValue, "stringValue") ||
+        Object.prototype.hasOwnProperty.call(jsonValue, "string_value")
+      ) {
+        const stringValue: JSONValue =
+          jsonValue["stringValue"] ?? jsonValue["string_value"];
         finalObj =
           stringValue !== undefined && stringValue !== null
             ? (stringValue as string)
             : "";
-      } else if (Object.prototype.hasOwnProperty.call(jsonValue, "intValue")) {
-        const intValue: JSONValue = jsonValue["intValue"];
+      } else if (
+        Object.prototype.hasOwnProperty.call(jsonValue, "intValue") ||
+        Object.prototype.hasOwnProperty.call(jsonValue, "int_value")
+      ) {
+        const intValue: JSONValue =
+          jsonValue["intValue"] ?? jsonValue["int_value"];
         if (intValue !== undefined && intValue !== null) {
           finalObj = intValue as number;
         }
       } else if (
-        Object.prototype.hasOwnProperty.call(jsonValue, "doubleValue")
+        Object.prototype.hasOwnProperty.call(jsonValue, "doubleValue") ||
+        Object.prototype.hasOwnProperty.call(jsonValue, "double_value")
       ) {
-        const doubleValue: JSONValue = jsonValue["doubleValue"];
+        const doubleValue: JSONValue =
+          jsonValue["doubleValue"] ?? jsonValue["double_value"];
         if (doubleValue !== undefined && doubleValue !== null) {
           finalObj = doubleValue as number;
         }
-      } else if (Object.prototype.hasOwnProperty.call(jsonValue, "boolValue")) {
-        finalObj = jsonValue["boolValue"] as boolean;
       } else if (
-        jsonValue["arrayValue"] &&
-        (jsonValue["arrayValue"] as JSONObject)["values"]
+        Object.prototype.hasOwnProperty.call(jsonValue, "boolValue") ||
+        Object.prototype.hasOwnProperty.call(jsonValue, "bool_value")
+      ) {
+        finalObj = (jsonValue["boolValue"] ??
+          jsonValue["bool_value"]) as boolean;
+      } else if (
+        (jsonValue["arrayValue"] &&
+          (jsonValue["arrayValue"] as JSONObject)["values"]) ||
+        (jsonValue["array_value"] &&
+          (jsonValue["array_value"] as JSONObject)["values"])
       ) {
-        const values: JSONArray = (jsonValue["arrayValue"] as JSONObject)[
-          "values"
-        ] as JSONArray;
+        const arrayVal: JSONObject = (jsonValue["arrayValue"] ||
+          jsonValue["array_value"]) as JSONObject;
+        const values: JSONArray = arrayVal["values"] as JSONArray;
         finalObj = values.map((v: JSONObject) => {
           return this.getAttributeValues(
             prefixKeysWithString,
@@ -290,17 +307,19 @@ export default class TelemetryUtil {
 
         finalObj = flattenedFields;
       } else if (
-        jsonValue["kvlistValue"] &&
-        (jsonValue["kvlistValue"] as JSONObject)["values"]
+        (jsonValue["kvlistValue"] &&
+          (jsonValue["kvlistValue"] as JSONObject)["values"]) ||
+        (jsonValue["kvlist_value"] &&
+          (jsonValue["kvlist_value"] as JSONObject)["values"])
       ) {
-        const values: JSONArray = (jsonValue["kvlistValue"] as JSONObject)[
-          "values"
-        ] as JSONArray;
+        const kvlistVal: JSONObject = (jsonValue["kvlistValue"] ||
+          jsonValue["kvlist_value"]) as JSONObject;
+        const values: JSONArray = kvlistVal["values"] as JSONArray;
         finalObj = this.getAttributes({
           prefixKeysWithString,
           items: values,
         });
-      } else if ("nullValue" in jsonValue) {
+      } else if ("nullValue" in jsonValue || "null_value" in jsonValue) {
         finalObj = null;
       }
     }

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

@@ -0,0 +1,81 @@
+import { AreaChart } from "../ChartLibrary/AreaChart/AreaChart";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import SeriesPoint from "../Types/SeriesPoints";
+import { XAxis } from "../Types/XAxis/XAxis";
+import YAxis from "../Types/YAxis/YAxis";
+import ChartCurve from "../Types/ChartCurve";
+import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
+import DataPointUtil from "../Utils/DataPoint";
+
+export interface ComponentProps {
+  data: Array<SeriesPoint>;
+  xAxis: XAxis;
+  yAxis: YAxis;
+  curve: ChartCurve;
+  sync: boolean;
+  heightInPx?: number | undefined;
+}
+
+export interface AreaInternalProps extends ComponentProps {
+  syncid: string;
+}
+
+const AreaChartElement: FunctionComponent<AreaInternalProps> = (
+  props: AreaInternalProps,
+): ReactElement => {
+  const [records, setRecords] = React.useState<Array<ChartDataPoint>>([]);
+
+  const categories: Array<string> = props.data.map((item: SeriesPoint) => {
+    return item.seriesName;
+  });
+
+  useEffect(() => {
+    if (!props.data || props.data.length === 0) {
+      setRecords([]);
+    }
+
+    const records: Array<ChartDataPoint> = DataPointUtil.getChartDataPoints({
+      seriesPoints: props.data,
+      xAxis: props.xAxis,
+      yAxis: props.yAxis,
+    });
+
+    setRecords(records);
+  }, [props.data]);
+
+  const className: string = props.heightInPx ? `` : "h-80";
+  const style: React.CSSProperties = props.heightInPx
+    ? { height: `${props.heightInPx}px` }
+    : {};
+
+  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}
+    />
+  );
+};
+
+export default AreaChartElement;

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

@@ -3,6 +3,9 @@ import LineChart, { ComponentProps as LineChartProps } from "../Line/LineChart";
 import BarChartElement, {
   ComponentProps as BarChartProps,
 } from "../Bar/BarChart";
+import AreaChartElement, {
+  ComponentProps as AreaChartProps,
+} from "../Area/AreaChart";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export enum ChartType {
@@ -16,7 +19,7 @@ export interface Chart {
   title: string;
   description?: string | undefined;
   type: ChartType;
-  props: LineChartProps | BarChartProps;
+  props: LineChartProps | BarChartProps | AreaChartProps;
 }
 
 export interface ComponentProps {
@@ -31,71 +34,111 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const syncId: string = Text.generateRandomText(10);
 
+  const isLastChart: (index: number) => boolean = (index: number): boolean => {
+    return index === props.charts.length - 1;
+  };
+
+  type GetChartContentFunction = (chart: Chart, index: number) => ReactElement;
+
+  const getChartContent: GetChartContentFunction = (
+    chart: Chart,
+    index: number,
+  ): ReactElement => {
+    switch (chart.type) {
+      case ChartType.LINE:
+        return (
+          <LineChart
+            key={index}
+            {...(chart.props as LineChartProps)}
+            syncid={syncId}
+            heightInPx={props.heightInPx}
+          />
+        );
+      case ChartType.BAR:
+        return (
+          <BarChartElement
+            key={index}
+            {...(chart.props as BarChartProps)}
+            syncid={syncId}
+            heightInPx={props.heightInPx}
+          />
+        );
+      case ChartType.AREA:
+        return (
+          <AreaChartElement
+            key={index}
+            {...(chart.props as AreaChartProps)}
+            syncid={syncId}
+            heightInPx={props.heightInPx}
+          />
+        );
+      default:
+        return <></>;
+    }
+  };
+
+  // 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>
+                  )}
+                </div>
+                {getChartContent(chart, index)}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // When showing cards, use the grid layout
+  const gridCols: string =
+    props.charts.length > 1 ? "lg:grid-cols-2" : "lg:grid-cols-1";
+
   return (
-    <div className="lg:grid grid-cols-1 gap-5 space-y-5 lg:space-y-0">
+    <div
+      className={`grid grid-cols-1 ${gridCols} gap-4 space-y-4 lg:space-y-0`}
+    >
       {props.charts.map((chart: Chart, index: number) => {
-        switch (chart.type) {
-          case ChartType.LINE:
-            return (
-              <div
-                key={index}
-                className={`p-6 ${props.hideCard ? "" : "rounded-md bg-white shadow"} ${props.chartCssClass || ""}`}
-              >
-                <h2
-                  data-testid="card-details-heading"
-                  id="card-details-heading"
-                  className="text-lg font-medium leading-6 text-gray-900"
-                >
-                  {chart.title}
-                </h2>
-                {chart.description && (
-                  <p
-                    data-testid="card-description"
-                    className="mt-1 text-sm text-gray-500 w-full hidden md:block"
-                  >
-                    {chart.description}
-                  </p>
-                )}
-                <LineChart
-                  key={index}
-                  {...(chart.props as LineChartProps)}
-                  syncid={syncId}
-                  heightInPx={props.heightInPx}
-                />
-              </div>
-            );
-          case ChartType.BAR:
-            return (
-              <div
-                key={index}
-                className={`p-6 ${props.hideCard ? "" : "rounded-md bg-white shadow"} ${props.chartCssClass || ""}`}
+        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"
+            >
+              {chart.title}
+            </h2>
+            {chart.description && (
+              <p
+                data-testid="card-description"
+                className="mt-0.5 text-sm text-gray-500 w-full hidden md:block"
               >
-                <h2
-                  data-testid="card-details-heading"
-                  id="card-details-heading"
-                  className="text-lg font-medium leading-6 text-gray-900"
-                >
-                  {chart.title}
-                </h2>
-                {chart.description && (
-                  <p
-                    data-testid="card-description"
-                    className="mt-1 text-sm text-gray-500 w-full hidden md:block"
-                  >
-                    {chart.description}
-                  </p>
-                )}
-                <BarChartElement
-                  key={index}
-                  {...(chart.props as BarChartProps)}
-                  syncid={syncId}
-                  heightInPx={props.heightInPx}
-                />
-              </div>
-            );
-          default:
-            return <></>;
-        }
+                {chart.description}
+              </p>
+            )}
+            {getChartContent(chart, index)}
+          </div>
+        );
       })}
     </div>
   );