@oneuptime/common 10.0.52 → 10.0.54

package/Server/Utils/Workspace/Workspace.ts

@@ -7,7 +7,7 @@ import ObjectID from "../../../Types/ObjectID";
 import WorkspaceMessagePayload, {
   WorkspacePayloadMarkdown,
 } from "../../../Types/Workspace/WorkspaceMessagePayload";
-import logger from "../Logger";
+import logger, { LogAttributes } from "../Logger";
 import WorkspaceProjectAuthTokenService from "../../Services/WorkspaceProjectAuthTokenService";
 import WorkspaceProjectAuthToken, {
   SlackMiscData,
@@ -157,8 +157,15 @@ export default class WorkspaceUtil {
     projectId: ObjectID;
     messagePayloadsByWorkspace: Array<WorkspaceMessagePayload>;
   }): Promise<Array<WorkspaceSendMessageResponse>> {
-    logger.debug("postToWorkspaceChannels called with data:");
-    logger.debug(JSON.stringify(data, null, 2));
+    const workspaceLogAttributes: LogAttributes = {
+      projectId: data.projectId?.toString(),
+    };
+
+    logger.debug(
+      "postToWorkspaceChannels called with data:",
+      workspaceLogAttributes,
+    );
+    logger.debug(JSON.stringify(data, null, 2), workspaceLogAttributes);
 
     const responses: Array<WorkspaceSendMessageResponse> = [];
 
@@ -214,9 +221,12 @@ export default class WorkspaceUtil {
       responses.push(result);
     }
 
-    logger.debug("Message posted to workspace channels successfully");
-    logger.debug("Returning thread IDs");
-    logger.debug(JSON.stringify(responses, null, 2));
+    logger.debug(
+      "Message posted to workspace channels successfully",
+      workspaceLogAttributes,
+    );
+    logger.debug("Returning thread IDs", workspaceLogAttributes);
+    logger.debug(JSON.stringify(responses, null, 2), workspaceLogAttributes);
 
     return responses;
   }
@@ -229,8 +239,15 @@ export default class WorkspaceUtil {
     workspaceMessagePayload: WorkspaceMessagePayload;
     projectId: ObjectID;
   }): Promise<WorkspaceSendMessageResponse> {
-    logger.debug("postToWorkspaceChannels called with data:");
-    logger.debug(data);
+    const postLogAttributes: LogAttributes = {
+      projectId: data.projectId?.toString(),
+    };
+
+    logger.debug(
+      "postToWorkspaceChannels called with data:",
+      postLogAttributes,
+    );
+    logger.debug(data, postLogAttributes);
 
     const result: WorkspaceSendMessageResponse =
       await WorkspaceUtil.getWorkspaceTypeUtil(data.workspaceType).sendMessage({
@@ -240,9 +257,12 @@ export default class WorkspaceUtil {
         projectId: data.projectId,
       });
 
-    logger.debug("Message posted to workspace channels successfully");
-    logger.debug("Returning thread IDs");
-    logger.debug(result);
+    logger.debug(
+      "Message posted to workspace channels successfully",
+      postLogAttributes,
+    );
+    logger.debug("Returning thread IDs", postLogAttributes);
+    logger.debug(result, postLogAttributes);
 
     return result;
   }
@@ -283,6 +303,7 @@ export default class WorkspaceUtil {
         if (!params.teamId) {
           logger.error(
             "Team ID is required for Microsoft Teams channel messages",
+            { projectId: params.projectId?.toString() },
           );
           return [];
         }
@@ -312,6 +333,7 @@ export default class WorkspaceUtil {
       default:
         logger.debug(
           `Unsupported workspace type for channel messages: ${params.workspaceType}`,
+          { projectId: params.projectId?.toString() },
         );
         return [];
     }

package/Server/Utils/Workspace/WorkspaceBase.ts

@@ -343,7 +343,9 @@ export default class WorkspaceBase {
           );
           break;
         default:
-          logger.error("Unknown block type: " + block._type);
+          logger.error("Unknown block type: " + block._type, {
+            blockType: block._type,
+          });
           break;
       }
     }

package/Server/Utils/Workspace/WorkspaceMessages/Alert.ts

@@ -35,8 +35,14 @@ export default class AlertWorkspaceMessages {
       );
     } catch (err) {
       // log the error and continue.
-      logger.error("Error in createChannelsAndInviteUsersToChannels");
-      logger.error(err);
+      logger.error("Error in createChannelsAndInviteUsersToChannels", {
+        projectId: data.projectId?.toString(),
+        alertId: data.alertId?.toString(),
+      });
+      logger.error(err, {
+        projectId: data.projectId?.toString(),
+        alertId: data.alertId?.toString(),
+      });
       return null;
     }
   }

package/Tests/Server/Middleware/UserAuthorization.test.ts

@@ -123,7 +123,7 @@ describe("UserMiddleware", () => {
 
       expect(result).toEqual({});
       expect(spyDecode).toHaveBeenCalledWith(mockedAccessToken);
-      expect(spyErrorLogger).toHaveBeenCalledWith(error);
+      expect(spyErrorLogger).toHaveBeenCalledWith(error, undefined);
     });
 
     test("should return an empty object when the decoded sso-token object doesn't have projectId property", () => {

package/Tests/Server/Services/AnalyticsDatabaseService.test.ts

@@ -96,8 +96,11 @@ describe("AnalyticsDatabaseService", () => {
       expect(logger.debug).toHaveBeenNthCalledWith(
         1,
         "<table-name> Count Statement",
+        { tableName: "<table-name>" },
       );
-      expect(logger.debug).toHaveBeenNthCalledWith(2, statement);
+      expect(logger.debug).toHaveBeenNthCalledWith(2, statement, {
+        tableName: "<table-name>",
+      });
 
       expect(statement.query).toBe(
         "SELECT\n" +
@@ -201,8 +204,11 @@ describe("AnalyticsDatabaseService", () => {
       expect(jest.mocked(logger.debug)).toHaveBeenNthCalledWith(
         1,
         "<table-name> Find Statement",
+        { tableName: "<table-name>" },
       );
-      expect(jest.mocked(logger.debug)).toHaveBeenNthCalledWith(2, statement);
+      expect(jest.mocked(logger.debug)).toHaveBeenNthCalledWith(2, statement, {
+        tableName: "<table-name>",
+      });
 
       expect(statement.query).toBe(
         "SELECT <select-statement> FROM {p0:Identifier}.{p1:Identifier} WHERE TRUE <where-statement> ORDER BY <sort-statement> LIMIT {p2:Int32} OFFSET {p3:Int32}",
@@ -340,8 +346,11 @@ describe("AnalyticsDatabaseService", () => {
       expect(logger.debug).toHaveBeenNthCalledWith(
         1,
         "<table-name> Delete Statement",
+        { tableName: "<table-name>" },
       );
-      expect(logger.debug).toHaveBeenNthCalledWith(2, statement);
+      expect(logger.debug).toHaveBeenNthCalledWith(2, statement, {
+        tableName: "<table-name>",
+      });
 
       expect(statement.query).toBe(
         "ALTER TABLE {p0:Identifier}.{p1:Identifier}\n" +

package/UI/Components/BulkUpdate/BulkUpdateForm.tsx

@@ -6,7 +6,6 @@ import ConfirmModal, {
 } from "../Modal/ConfirmModal";
 import ProgressBar, { ProgressBarSize } from "../ProgressBar/ProgressBar";
 import ShortcutKey from "../ShortcutKey/ShortcutKey";
-import SimpleLogViewer from "../SimpleLogViewer/SimpleLogViewer";
 import { Green, Red } from "../../../Types/BrandColors";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import GenericObject from "../../../Types/GenericObject";
@@ -83,8 +82,6 @@ const BulkUpdateForm: <T extends GenericObject>(
   const [actionInProgress, setActionInProgress] =
     React.useState<boolean>(false);
 
-  const [actionName, setActionName] = React.useState<string>("");
-
   if (props.selectedItems.length === 0) {
     return <></>;
   }
@@ -102,44 +99,71 @@ const BulkUpdateForm: <T extends GenericObject>(
     }
 
     if (!actionInProgress && progressInfo) {
+      const hasFailures: boolean = progressInfo.failed.length > 0;
+      const hasSuccesses: boolean = progressInfo.successItems.length > 0;
+
       return (
-        <div className="mt-1 mb-1 space-y-1">
-          <div className="flex">
-            <Icon
-              className="h-5 w-5"
-              icon={IconProp.CheckCircle}
-              color={Green}
-            />
-            <div className="ml-1 font-medium">
-              {progressInfo.successItems.length} {props.pluralLabel} Succeeded
-            </div>
-          </div>
-          {progressInfo.failed.length > 0 && (
-            <div>
-              <div className="flex mt-3">
-                <Icon className="h-5 w-5" icon={IconProp.Close} color={Red} />
-                <div className="ml-1 font-medium">
-                  {progressInfo.failed.length} {props.pluralLabel} Failed. Here
-                  is more information:
+        <div className="space-y-4">
+          {/* Summary counts */}
+          <div className="flex flex-col space-y-3">
+            {hasSuccesses && (
+              <div className="flex items-center rounded-lg bg-green-50 p-3">
+                <Icon
+                  className="h-5 w-5 flex-shrink-0"
+                  icon={IconProp.CheckCircle}
+                  color={Green}
+                />
+                <div className="ml-2 text-sm font-medium text-green-800">
+                  {progressInfo.successItems.length}{" "}
+                  {progressInfo.successItems.length === 1
+                    ? props.singularLabel
+                    : props.pluralLabel}{" "}
+                  succeeded
                 </div>
               </div>
-              <div>
-                <SimpleLogViewer>
-                  {progressInfo.failed.map(
-                    (failedItem: BulkActionFailed<T>, i: number) => {
-                      return (
-                        <div className="flex mb-2" key={i}>
-                          {actionName}{" "}
-                          {props.itemToString
-                            ? props.itemToString(failedItem.item)
-                            : ""}{" "}
-                          {"Failed: "}
+            )}
+            {hasFailures && (
+              <div className="flex items-center rounded-lg bg-red-50 p-3">
+                <Icon
+                  className="h-5 w-5 flex-shrink-0"
+                  icon={IconProp.Close}
+                  color={Red}
+                />
+                <div className="ml-2 text-sm font-medium text-red-800">
+                  {progressInfo.failed.length}{" "}
+                  {progressInfo.failed.length === 1
+                    ? props.singularLabel
+                    : props.pluralLabel}{" "}
+                  failed
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Failure details */}
+          {hasFailures && (
+            <div className="rounded-lg border border-gray-200 overflow-hidden">
+              <div className="max-h-64 overflow-y-auto divide-y divide-gray-200">
+                {progressInfo.failed.map(
+                  (failedItem: BulkActionFailed<T>, i: number) => {
+                    const itemName: string = props.itemToString
+                      ? props.itemToString(failedItem.item)
+                      : "";
+
+                    return (
+                      <div className="px-4 py-3 text-sm" key={i}>
+                        {itemName && (
+                          <div className="font-medium text-gray-900">
+                            {itemName}
+                          </div>
+                        )}
+                        <div className="text-gray-500 mt-0.5">
                           {failedItem.failedMessage}
                         </div>
-                      );
-                    },
-                  )}
-                </SimpleLogViewer>
+                      </div>
+                    );
+                  },
+                )}
               </div>
             </div>
           )}
@@ -217,7 +241,6 @@ const BulkUpdateForm: <T extends GenericObject>(
                           },
                           onBulkActionStart: () => {
                             setShowProgressInfoModal(true);
-                            setActionName(button.title);
                             setProgressInfo({
                               inProgressItems: props.selectedItems,
                               successItems: [],
@@ -231,7 +254,6 @@ const BulkUpdateForm: <T extends GenericObject>(
                           },
                           onBulkActionEnd: () => {
                             setActionInProgress(false);
-                            setActionName("");
                           },
                         };
 

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

@@ -1,12 +1,20 @@
 import { AreaChart } from "../ChartLibrary/AreaChart/AreaChart";
-import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useMemo,
+} 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 FormattedExemplarPoint from "../ChartLibrary/Types/FormattedExemplarPoint";
 import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import ExemplarPoint from "../Types/ExemplarPoint";
+import XAxisUtil from "../Utils/XAxis";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export interface ComponentProps {
@@ -17,6 +25,8 @@ export interface ComponentProps {
   sync: boolean;
   heightInPx?: number | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  exemplarPoints?: Array<ExemplarPoint> | undefined;
+  onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
 }
 
 export interface AreaInternalProps extends ComponentProps {
@@ -42,6 +52,26 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
     setRecords(records);
   }, [props.data]);
 
+  // Format exemplar x values to match the chart's x-axis labels
+  const formattedExemplars: Array<FormattedExemplarPoint> = useMemo(() => {
+    if (!props.exemplarPoints || props.exemplarPoints.length === 0) {
+      return [];
+    }
+
+    const formatter: (value: Date) => string = XAxisUtil.getFormatter({
+      xAxisMax: props.xAxis.options.max,
+      xAxisMin: props.xAxis.options.min,
+    });
+
+    return props.exemplarPoints.map((exemplar: ExemplarPoint) => {
+      return {
+        formattedX: formatter(exemplar.x),
+        y: exemplar.y,
+        original: exemplar,
+      };
+    });
+  }, [props.exemplarPoints, props.xAxis]);
+
   const className: string = props.heightInPx ? `` : "h-80";
   const style: React.CSSProperties = props.heightInPx
     ? { height: `${props.heightInPx}px` }
@@ -83,6 +113,10 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         yAxisWidth={60}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
+        formattedExemplarPoints={
+          formattedExemplars.length > 0 ? formattedExemplars : undefined
+        }
+        onExemplarClick={props.onExemplarClick}
       />
       {hasNoData && <NoDataMessage />}
     </div>

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

@@ -7,6 +7,7 @@ import BarChartElement, {
 import AreaChartElement, {
   ComponentProps as AreaChartProps,
 } from "../Area/AreaChart";
+import ExemplarPoint from "../Types/ExemplarPoint";
 import Icon, { SizeProp } from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
 import Modal, { ModalWidth } from "../../Modal/Modal";
@@ -33,6 +34,8 @@ export interface Chart {
   type: ChartType;
   props: LineChartProps | BarChartProps | AreaChartProps;
   metricInfo?: ChartMetricInfo | undefined;
+  exemplarPoints?: Array<ExemplarPoint> | undefined;
+  onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
 }
 
 export interface ComponentProps {
@@ -67,6 +70,8 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
             {...(chart.props as LineChartProps)}
             syncid={syncId}
             heightInPx={props.heightInPx}
+            exemplarPoints={chart.exemplarPoints}
+            onExemplarClick={chart.onExemplarClick}
           />
         );
       case ChartType.BAR:
@@ -85,6 +90,8 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
             {...(chart.props as AreaChartProps)}
             syncid={syncId}
             heightInPx={props.heightInPx}
+            exemplarPoints={chart.exemplarPoints}
+            onExemplarClick={chart.onExemplarClick}
           />
         );
       default:

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

@@ -11,6 +11,7 @@ import {
   Dot,
   Label,
   Legend as RechartsLegend,
+  ReferenceDot,
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
@@ -18,6 +19,8 @@ import {
   YAxis,
 } from "recharts";
 import ChartReferenceLineProps from "../../Types/ReferenceLineProps";
+import ExemplarPoint from "../../Types/ExemplarPoint";
+import FormattedExemplarPoint from "../Types/FormattedExemplarPoint";
 import { AxisDomain } from "recharts/types/util/types";
 
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
@@ -557,6 +560,8 @@ interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
   customTooltip?: React.ComponentType<TooltipProps>;
   syncid?: string | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  formattedExemplarPoints?: Array<FormattedExemplarPoint> | undefined;
+  onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
 }
 
 const AreaChart: React.ForwardRefExoticComponent<
@@ -1000,6 +1005,34 @@ const AreaChart: React.ForwardRefExoticComponent<
                 );
               },
             )}
+            {/* Exemplar dots - clickable markers linking to traces */}
+            {props.formattedExemplarPoints?.map(
+              (exemplar: FormattedExemplarPoint, exemplarIndex: number) => {
+                return (
+                  <ReferenceDot
+                    key={`exemplar-${exemplarIndex}`}
+                    x={exemplar.formattedX}
+                    y={exemplar.y}
+                    r={5}
+                    fill="#7c3aed"
+                    stroke="#ffffff"
+                    strokeWidth={2}
+                    style={{ cursor: "pointer" }}
+                    onClick={() => {
+                      props.onExemplarClick?.(exemplar.original);
+                    }}
+                  >
+                    <Label
+                      value="E"
+                      position="center"
+                      fill="#ffffff"
+                      fontSize={8}
+                      fontWeight={700}
+                    />
+                  </ReferenceDot>
+                );
+              },
+            )}
           </RechartsAreaChart>
         </ResponsiveContainer>
       </div>

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -12,6 +12,7 @@ import {
   Line,
   Legend as RechartsLegend,
   LineChart as RechartsLineChart,
+  ReferenceDot,
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
@@ -19,6 +20,8 @@ import {
   YAxis,
 } from "recharts";
 import ChartReferenceLineProps from "../../Types/ReferenceLineProps";
+import ExemplarPoint from "../../Types/ExemplarPoint";
+import FormattedExemplarPoint from "../Types/FormattedExemplarPoint";
 import { AxisDomain } from "recharts/types/util/types";
 
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
@@ -574,6 +577,8 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   customTooltip?: React.ComponentType<TooltipProps>;
   syncid?: string | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  formattedExemplarPoints?: Array<FormattedExemplarPoint> | undefined;
+  onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
 }
 
 const LineChart: React.ForwardRefExoticComponent<
@@ -1018,6 +1023,34 @@ const LineChart: React.ForwardRefExoticComponent<
                 );
               },
             )}
+            {/* Exemplar dots - clickable markers linking to traces */}
+            {props.formattedExemplarPoints?.map(
+              (exemplar: FormattedExemplarPoint, exemplarIndex: number) => {
+                return (
+                  <ReferenceDot
+                    key={`exemplar-${exemplarIndex}`}
+                    x={exemplar.formattedX}
+                    y={exemplar.y}
+                    r={5}
+                    fill="#7c3aed"
+                    stroke="#ffffff"
+                    strokeWidth={2}
+                    style={{ cursor: "pointer" }}
+                    onClick={() => {
+                      props.onExemplarClick?.(exemplar.original);
+                    }}
+                  >
+                    <Label
+                      value="E"
+                      position="center"
+                      fill="#ffffff"
+                      fontSize={8}
+                      fontWeight={700}
+                    />
+                  </ReferenceDot>
+                );
+              },
+            )}
           </RechartsLineChart>
         </ResponsiveContainer>
       </div>

package/UI/Components/Charts/ChartLibrary/Types/FormattedExemplarPoint.ts

@@ -0,0 +1,14 @@
+import ExemplarPoint from "../../Types/ExemplarPoint";
+
+/**
+ * An exemplar point with a formatted x-axis label that matches the chart's
+ * x-axis formatting. Used internally by chart library components.
+ */
+export default interface FormattedExemplarPoint {
+  /** The formatted x-axis label (e.g. "12:30", "Feb 22") */
+  formattedX: string;
+  /** The y value */
+  y: number;
+  /** The original exemplar data for click handling */
+  original: ExemplarPoint;
+}

package/UI/Components/Charts/Line/LineChart.tsx

@@ -1,12 +1,20 @@
 import { LineChart } from "../ChartLibrary/LineChart/LineChart";
-import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useMemo,
+} 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 FormattedExemplarPoint from "../ChartLibrary/Types/FormattedExemplarPoint";
 import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import ExemplarPoint from "../Types/ExemplarPoint";
+import XAxisUtil from "../Utils/XAxis";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export interface ComponentProps {
@@ -17,6 +25,8 @@ export interface ComponentProps {
   sync: boolean;
   heightInPx?: number | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  exemplarPoints?: Array<ExemplarPoint> | undefined;
+  onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
 }
 
 export interface LineInternalProps extends ComponentProps {
@@ -42,6 +52,26 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
     setRecords(records);
   }, [props.data]);
 
+  // Format exemplar x values to match the chart's x-axis labels
+  const formattedExemplars: Array<FormattedExemplarPoint> = useMemo(() => {
+    if (!props.exemplarPoints || props.exemplarPoints.length === 0) {
+      return [];
+    }
+
+    const formatter: (value: Date) => string = XAxisUtil.getFormatter({
+      xAxisMax: props.xAxis.options.max,
+      xAxisMin: props.xAxis.options.min,
+    });
+
+    return props.exemplarPoints.map((exemplar: ExemplarPoint) => {
+      return {
+        formattedX: formatter(exemplar.x),
+        y: exemplar.y,
+        original: exemplar,
+      };
+    });
+  }, [props.exemplarPoints, props.xAxis]);
+
   const className: string = props.heightInPx ? `` : "h-80";
   const style: React.CSSProperties = props.heightInPx
     ? { height: `${props.heightInPx}px` }
@@ -82,6 +112,10 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         yAxisWidth={60}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
+        formattedExemplarPoints={
+          formattedExemplars.length > 0 ? formattedExemplars : undefined
+        }
+        onExemplarClick={props.onExemplarClick}
       />
       {hasNoData && <NoDataMessage />}
     </div>

package/UI/Components/Charts/Types/ExemplarPoint.ts

@@ -0,0 +1,6 @@
+export default interface ExemplarPoint {
+  x: Date;
+  y: number;
+  traceId: string;
+  spanId?: string | undefined;
+}

package/UI/Components/Dictionary/Dictionary.tsx

@@ -28,6 +28,8 @@ export interface ComponentProps {
   addButtonSuffix?: string | undefined;
   valueTypes?: Array<ValueType>; // by default it'll be Text
   keys?: Array<string> | undefined;
+  valueSuggestions?: Record<string, Array<string>> | undefined;
+  onKeySelected?: ((key: string) => void) | undefined;
 }
 
 interface Item {
@@ -160,6 +162,11 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                     newData[index]!.key = value;
                     setData(newData);
                     onDataChange(newData);
+
+                    // If this key matches one of the known keys, notify parent to fetch values
+                    if (props.onKeySelected && props.keys?.includes(value)) {
+                      props.onKeySelected(value);
+                    }
                   }}
                 />
               </div>
@@ -212,9 +219,14 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                   />
                 </div>
                 {item.type === ValueType.Text && (
-                  <Input
+                  <AutocompleteTextInput
                     value={item.value.toString()}
                     placeholder={props.valuePlaceholder}
+                    suggestions={
+                      item.key && props.valueSuggestions?.[item.key]
+                        ? props.valueSuggestions[item.key]
+                        : undefined
+                    }
                     onChange={(value: string) => {
                       const newData: Array<Item> = [...data];
                       newData[index]!.value = value;

package/UI/Components/Filters/FiltersForm.tsx

@@ -128,6 +128,8 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
                       filterData={props.filterData}
                       onFilterChanged={changeFilterData}
                       jsonKeys={filter.jsonKeys}
+                      jsonValueSuggestions={filter.jsonValueSuggestions}
+                      onJsonKeySelected={filter.onJsonKeySelected}
                     />
                   </div>
                 );