@oneuptime/common 11.3.3 → 11.3.4

package/Server/Services/TraceAggregationService.ts

@@ -107,8 +107,12 @@ export interface TraceAnalyticsTopItem {
 export interface TraceAnalyticsTableRow {
   groupValues: Record<string, string>;
   count: number;
+  errorCount: number;
   avgDurationMs: number;
   p50DurationMs: number;
+  p90DurationMs: number;
+  p95DurationMs: number;
+  p99DurationMs: number;
   minDurationMs: number;
   maxDurationMs: number;
 }
@@ -1344,8 +1348,12 @@ export class TraceAggregationService {
       return {
         groupValues,
         count: Number(row["cnt"] || 0),
+        errorCount: Number(row["err_cnt"] || 0),
         avgDurationMs: Number(row["avg_ms"] || 0),
         p50DurationMs: Number(row["p50_ms"] || 0),
+        p90DurationMs: Number(row["p90_ms"] || 0),
+        p95DurationMs: Number(row["p95_ms"] || 0),
+        p99DurationMs: Number(row["p99_ms"] || 0),
         minDurationMs: Number(row["min_ms"] || 0),
         maxDurationMs: Number(row["max_ms"] || 0),
       };
@@ -1676,15 +1684,20 @@ export class TraceAggregationService {
       request.limit ?? TraceAggregationService.DEFAULT_ANALYTICS_LIMIT;
 
     /*
-     * The "top dimensions" table always carries the full duration stat set
-     * (count, avg, median, min, max) — one query answers "requests and
-     * median response time per tenant" without a follow-up.
+     * The "top dimensions" table always carries the full stat set (count,
+     * errors, avg, p50/p90/p95/p99, min, max) — one query answers "requests,
+     * errors and tail latency per tenant" without a follow-up. errorCount
+     * mirrors the METRIC_EXPRESSIONS convention: statusCode = 2 is an error.
      */
     const statement: Statement = new Statement();
     statement.append(
       "SELECT count() AS cnt" +
+        ", countIf(statusCode = 2) AS err_cnt" +
         ", avg(durationUnixNano) / 1000000 AS avg_ms" +
         ", quantile(0.5)(durationUnixNano) / 1000000 AS p50_ms" +
+        ", quantile(0.9)(durationUnixNano) / 1000000 AS p90_ms" +
+        ", quantile(0.95)(durationUnixNano) / 1000000 AS p95_ms" +
+        ", quantile(0.99)(durationUnixNano) / 1000000 AS p99_ms" +
         ", min(durationUnixNano) / 1000000 AS min_ms" +
         ", max(durationUnixNano) / 1000000 AS max_ms",
     );

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

@@ -328,10 +328,20 @@ describe("TraceAggregationService", () => {
 
       const query: string = normalizedQuery(statement);
       expect(query).toContain("count() AS cnt");
+      expect(query).toContain("countIf(statusCode = 2) AS err_cnt");
       expect(query).toContain("avg(durationUnixNano) / 1000000 AS avg_ms");
       expect(query).toContain(
         "quantile(0.5)(durationUnixNano) / 1000000 AS p50_ms",
       );
+      expect(query).toContain(
+        "quantile(0.9)(durationUnixNano) / 1000000 AS p90_ms",
+      );
+      expect(query).toContain(
+        "quantile(0.95)(durationUnixNano) / 1000000 AS p95_ms",
+      );
+      expect(query).toContain(
+        "quantile(0.99)(durationUnixNano) / 1000000 AS p99_ms",
+      );
       expect(query).toContain("min(durationUnixNano) / 1000000 AS min_ms");
       expect(query).toContain("max(durationUnixNano) / 1000000 AS max_ms");
       expect(query).toContain(" AND name IN (");

package/Types/Dashboard/DashboardComponentType.ts

@@ -7,6 +7,7 @@ enum DashboardComponentType {
   LogStream = `LogStream`,
   TraceList = `TraceList`,
   TraceChart = `TraceChart`,
+  TraceTable = `TraceTable`,
   IncidentList = `IncidentList`,
   AlertList = `AlertList`,
   MonitorList = `MonitorList`,

package/Types/Dashboard/DashboardComponents/DashboardTraceTableComponent.ts

@@ -0,0 +1,39 @@
+import ObjectID from "../../ObjectID";
+import DashboardComponentType from "../DashboardComponentType";
+import BaseComponent from "./DashboardBaseComponent";
+
+export default interface DashboardTraceTableComponent extends BaseComponent {
+  componentType: DashboardComponentType.TraceTable;
+  componentId: ObjectID;
+  arguments: {
+    title?: string | undefined;
+    // Substring filter on span name (e.g. "/Shipment/ShipShipment").
+    spanNameContains?: string | undefined;
+    /*
+     * Attribute equality filters, ANDed. The structured editor stores a
+     * key/value record (e.g. { "url.host": "torginol.starship.online" }).
+     * A legacy "key=value; key2=value2" string is still read for widgets
+     * saved before the structured editor existed.
+     */
+    attributeFilters?:
+      | string
+      | Record<string, string | number | boolean>
+      | undefined;
+    /*
+     * The dimension to break the table into rows by: a span attribute key
+     * (e.g. url.host, resource.service.instance.id) or a top-level column
+     * (name, primaryEntityId, statusCode, kind). One row per value. Unlike
+     * the trace chart's optional split, this is REQUIRED — the table is a
+     * "top dimensions" breakdown, so an unset group-by renders an empty
+     * prompt instead of a query.
+     */
+    groupByAttribute?: string | undefined;
+    // Cap on the number of rows (default 10).
+    topLimit?: number | undefined;
+    /*
+     * Include non-root spans. Off by default so "Requests" matches the
+     * traces explorer, which is root-spans-only.
+     */
+    includeChildSpans?: boolean | undefined;
+  };
+}

package/UI/Components/Date/RangeStartAndEndDateEdit.tsx

@@ -1,64 +1,248 @@
 import React, { FunctionComponent, ReactElement } from "react";
-import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import RangeStartAndEndDateTime, {
+  RangeStartAndEndDateTimeUtil,
+} from "../../../Types/Time/RangeStartAndEndDateTime";
 import StartAndEndDate, {
   StartAndEndDateType,
 } from "../../../UI/Components/Date/StartAndEndDate";
 import InBetween from "../../../Types/BaseDatabase/InBetween";
 import TimeRange from "../../../Types/Time/TimeRange";
-import Dropdown, {
-  DropdownOption,
-  DropdownValue,
-} from "../../../UI/Components/Dropdown/Dropdown";
-import DropdownUtil from "../../../UI/Utils/Dropdown";
+import OneUptimeDate from "../../../Types/Date";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
 
 export interface ComponentProps {
   value?: RangeStartAndEndDateTime | undefined;
   onChange: (startAndEndDate: RangeStartAndEndDateTime) => void;
+  /*
+   * When provided, clicking a quick range immediately commits the selection
+   * (and the parent is expected to close the picker). Custom ranges always
+   * go through onChange so the user can fine-tune before applying.
+   */
+  onApply?: ((startAndEndDate: RangeStartAndEndDateTime) => void) | undefined;
 }
 
-const DashboardStartAndEndDateEditElement: FunctionComponent<ComponentProps> = (
+/*
+ * Quick ranges shown in the left rail, in display order. Custom is handled
+ * separately below the list.
+ */
+const QUICK_RANGES: Array<TimeRange> = [
+  TimeRange.PAST_FIVE_MINS,
+  TimeRange.PAST_FIFTEEN_MINS,
+  TimeRange.PAST_THIRTY_MINS,
+  TimeRange.PAST_ONE_HOUR,
+  TimeRange.PAST_TWO_HOURS,
+  TimeRange.PAST_THREE_HOURS,
+  TimeRange.PAST_ONE_DAY,
+  TimeRange.PAST_TWO_DAYS,
+  TimeRange.PAST_ONE_WEEK,
+  TimeRange.PAST_TWO_WEEKS,
+  TimeRange.PAST_ONE_MONTH,
+  TimeRange.PAST_THREE_MONTHS,
+];
+
+const RangeStartAndEndDateEdit: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const dropdownOptions: DropdownOption[] =
-    DropdownUtil.getDropdownOptionsFromEnum(TimeRange);
-  const defaultDropdownOption: DropdownOption =
-    dropdownOptions.find((option: DropdownOption) => {
-      return option.value === TimeRange.PAST_ONE_HOUR;
-    }) || dropdownOptions[0]!;
-  const selectedDropdownnOption: DropdownOption =
-    dropdownOptions.find((option: DropdownOption) => {
-      return option.value === props.value?.range;
-    }) || defaultDropdownOption;
+  const selectedRange: TimeRange =
+    props.value?.range || TimeRange.PAST_ONE_HOUR;
+  const isCustom: boolean = selectedRange === TimeRange.CUSTOM;
+
+  /*
+   * Absolute window for the current selection. Used to preview a quick range
+   * and to seed the custom editor when the user switches to it.
+   */
+  const resolvedRange: InBetween<Date> =
+    RangeStartAndEndDateTimeUtil.getStartAndEndDate(
+      props.value || { range: TimeRange.PAST_ONE_HOUR },
+    );
+
+  const formatDateTime: (date: Date) => string = (date: Date): string => {
+    return OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+      date,
+      false,
+      true,
+    );
+  };
+
+  const getDurationText: (start: Date, end: Date) => string = (
+    start: Date,
+    end: Date,
+  ): string => {
+    const seconds: number = OneUptimeDate.getDifferenceInSeconds(end, start);
+
+    if (seconds <= 0) {
+      return "";
+    }
+
+    return OneUptimeDate.secondsToFormattedFriendlyTimeString(seconds).trim();
+  };
+
+  const onSelectQuickRange: (range: TimeRange) => void = (
+    range: TimeRange,
+  ): void => {
+    const next: RangeStartAndEndDateTime = { range };
+
+    if (props.onApply) {
+      props.onApply(next);
+    } else {
+      props.onChange(next);
+    }
+  };
+
+  const onSelectCustom: () => void = (): void => {
+    props.onChange({
+      range: TimeRange.CUSTOM,
+      startAndEndDate: props.value?.startAndEndDate || resolvedRange,
+    });
+  };
+
+  const customStart: Date | undefined =
+    props.value?.startAndEndDate?.startValue;
+  const customEnd: Date | undefined = props.value?.startAndEndDate?.endValue;
+  /*
+   * Only show the duration hint for a valid range. getDifferenceInSeconds is
+   * absolute, so without this guard an inverted (end-before-start) range would
+   * read as a positive "Showing N of data" while Apply is disabled.
+   */
+  const customDuration: string =
+    customStart && customEnd && OneUptimeDate.isAfter(customEnd, customStart)
+      ? getDurationText(customStart, customEnd)
+      : "";
+
+  const previewDuration: string = getDurationText(
+    resolvedRange.startValue,
+    resolvedRange.endValue,
+  );
 
   return (
-    <div>
-      <Dropdown
-        value={selectedDropdownnOption}
-        onChange={(range: DropdownValue | Array<DropdownValue> | null) => {
-          props.onChange({
-            range: range as TimeRange,
-          });
-        }}
-        options={dropdownOptions}
-      />
-      {/* Start and End Date */}
-      {props.value?.range === TimeRange.CUSTOM && (
-        <StartAndEndDate
-          type={StartAndEndDateType.DateTime}
-          value={props.value?.startAndEndDate || undefined}
-          hideTimeButtons={true}
-          onValueChanged={(startAndEndDate: InBetween<Date> | null) => {
-            if (startAndEndDate) {
-              props.onChange({
-                range: TimeRange.CUSTOM,
-                startAndEndDate,
-              });
-            }
-          }}
-        />
-      )}
+    <div className="flex flex-col md:flex-row md:divide-x md:divide-gray-200">
+      {/* Left rail: quick ranges */}
+      <div
+        className="md:w-52 md:shrink-0 md:pr-4 md:max-h-96 md:overflow-y-auto"
+        role="radiogroup"
+        aria-label="Time range"
+      >
+        <div className="px-1 pb-2 text-xs font-semibold uppercase tracking-wide text-gray-400">
+          Quick ranges
+        </div>
+        <div className="grid grid-cols-2 gap-1 md:grid-cols-1">
+          {QUICK_RANGES.map((range: TimeRange) => {
+            const isActive: boolean = !isCustom && selectedRange === range;
+
+            return (
+              <button
+                key={range}
+                type="button"
+                role="radio"
+                aria-checked={isActive}
+                onClick={() => {
+                  return onSelectQuickRange(range);
+                }}
+                className={`w-full rounded-md px-3 py-1.5 text-left text-sm transition-colors ${
+                  isActive
+                    ? "bg-indigo-50 font-medium text-indigo-700"
+                    : "text-gray-700 hover:bg-gray-100"
+                }`}
+              >
+                {range}
+              </button>
+            );
+          })}
+        </div>
+        <div className="mt-2 border-t border-gray-100 pt-2">
+          <button
+            type="button"
+            role="radio"
+            aria-checked={isCustom}
+            onClick={onSelectCustom}
+            className={`flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm transition-colors ${
+              isCustom
+                ? "bg-indigo-50 font-medium text-indigo-700"
+                : "text-gray-700 hover:bg-gray-100"
+            }`}
+          >
+            <Icon icon={IconProp.Calendar} className="h-4 w-4" />
+            Custom range
+          </button>
+        </div>
+      </div>
+
+      {/* Right pane: custom editor or quick-range preview */}
+      <div className="mt-4 md:mt-0 md:flex-1 md:pl-4">
+        {isCustom ? (
+          <div>
+            <div className="text-sm font-medium text-gray-900">
+              Custom range
+            </div>
+            <div className="mt-0.5 text-xs text-gray-500">
+              Pick the exact start and end date &amp; time.
+            </div>
+            <StartAndEndDate
+              type={StartAndEndDateType.DateTime}
+              value={props.value?.startAndEndDate || resolvedRange}
+              hideTimeButtons={true}
+              onValueChanged={(startAndEndDate: InBetween<Date> | null) => {
+                if (startAndEndDate) {
+                  props.onChange({
+                    range: TimeRange.CUSTOM,
+                    startAndEndDate,
+                  });
+                }
+              }}
+            />
+            {customDuration ? (
+              <div className="mt-2 flex items-center gap-1.5 text-xs text-gray-500">
+                <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
+                <span>
+                  Showing{" "}
+                  <span className="font-medium text-gray-700">
+                    {customDuration}
+                  </span>{" "}
+                  of data.
+                </span>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+        ) : (
+          <div>
+            <div className="text-sm font-medium text-gray-900">
+              {selectedRange}
+            </div>
+            <div className="mt-0.5 text-xs text-gray-500">
+              Relative to now &mdash; updates every time the dashboard loads.
+            </div>
+            <div className="mt-3 space-y-2 rounded-md border border-gray-200 bg-gray-50 p-3">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-500">From</span>
+                <span className="font-medium text-gray-900">
+                  {formatDateTime(resolvedRange.startValue)}
+                </span>
+              </div>
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-500">To</span>
+                <span className="font-medium text-gray-900">
+                  {formatDateTime(resolvedRange.endValue)}
+                </span>
+              </div>
+              {previewDuration ? (
+                <div className="flex items-center justify-between border-t border-gray-200 pt-2 text-sm">
+                  <span className="text-gray-500">Duration</span>
+                  <span className="font-medium text-gray-900">
+                    {previewDuration}
+                  </span>
+                </div>
+              ) : (
+                <></>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
 
-export default DashboardStartAndEndDateEditElement;
+export default RangeStartAndEndDateEdit;

package/UI/Components/Date/RangeStartAndEndDateView.tsx

@@ -7,7 +7,7 @@ import { GetReactElementFunction } from "../../../UI/Types/FunctionTypes";
 import Icon from "../Icon/Icon";
 import Tooltip from "../Tooltip/Tooltip";
 import RangeStartAndEndDateEdit from "./RangeStartAndEndDateEdit";
-import Modal from "../Modal/Modal";
+import Modal, { ModalWidth } from "../Modal/Modal";
 
 export interface ComponentProps {
   dashboardStartAndEndDate: RangeStartAndEndDateTime;
@@ -25,17 +25,65 @@ const DashboardStartAndEndDateView: FunctionComponent<ComponentProps> = (
   const isCustomRange: boolean =
     props.dashboardStartAndEndDate.range === TimeRange.CUSTOM;
 
-  const getContent: GetReactElementFunction = (): ReactElement => {
-    const title: string = isCustomRange
-      ? `${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-          props.dashboardStartAndEndDate.startAndEndDate?.startValue ||
-            OneUptimeDate.getCurrentDate(),
-        )} - ${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-          props.dashboardStartAndEndDate.startAndEndDate?.endValue ||
-            OneUptimeDate.getCurrentDate(),
-        )}`
-      : props.dashboardStartAndEndDate.range;
+  /*
+   * The Apply button should only commit a custom range when both ends are set
+   * and the start is strictly before the end.
+   */
+  const isSelectionValid: (
+    selection: RangeStartAndEndDateTime | null,
+  ) => boolean = (selection: RangeStartAndEndDateTime | null): boolean => {
+    if (!selection) {
+      return false;
+    }
+
+    if (selection.range !== TimeRange.CUSTOM) {
+      return true;
+    }
+
+    const startAndEndDate: typeof selection.startAndEndDate =
+      selection.startAndEndDate;
+
+    if (!startAndEndDate) {
+      return false;
+    }
+
+    return OneUptimeDate.isAfter(
+      startAndEndDate.endValue,
+      startAndEndDate.startValue,
+    );
+  };
+
+  const closeModal: () => void = (): void => {
+    setTempStartAndEndDate(null);
+    setShowTimeSelectModal(false);
+  };
 
+  const commitSelection: (selection: RangeStartAndEndDateTime) => void = (
+    selection: RangeStartAndEndDateTime,
+  ): void => {
+    props.onChange(selection);
+    closeModal();
+  };
+
+  const getButtonTitle: () => string = (): string => {
+    if (isCustomRange) {
+      return `${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+        props.dashboardStartAndEndDate.startAndEndDate?.startValue ||
+          OneUptimeDate.getCurrentDate(),
+        false,
+        true,
+      )} - ${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+        props.dashboardStartAndEndDate.startAndEndDate?.endValue ||
+          OneUptimeDate.getCurrentDate(),
+        false,
+        true,
+      )}`;
+    }
+
+    return props.dashboardStartAndEndDate.range;
+  };
+
+  const getContent: GetReactElementFunction = (): ReactElement => {
     return (
       <div>
         <Tooltip text="Click to change the date and time range of data on this dashboard.">
@@ -48,30 +96,34 @@ const DashboardStartAndEndDateView: FunctionComponent<ComponentProps> = (
             }}
           >
             <Icon icon={IconProp.Clock} className="w-3.5 h-3.5 text-gray-500" />
-            <span className="text-xs text-gray-500">{title}</span>
+            <span className="text-xs text-gray-500">{getButtonTitle()}</span>
           </button>
         </Tooltip>
         {showTimeSelectModal && (
           <Modal
-            title="Select Start and End Time"
-            onClose={() => {
-              setTempStartAndEndDate(null);
-              setShowTimeSelectModal(false);
-            }}
+            title="Select Time Range"
+            description="Choose a quick range or set an exact start and end date & time."
+            icon={IconProp.Clock}
+            modalWidth={ModalWidth.Medium}
+            submitButtonText="Apply"
+            disableSubmitButton={!isSelectionValid(tempStartAndEndDate)}
+            onClose={closeModal}
             onSubmit={() => {
               if (tempStartAndEndDate) {
-                props.onChange(tempStartAndEndDate);
+                commitSelection(tempStartAndEndDate);
               }
-              setShowTimeSelectModal(false);
-              setTempStartAndEndDate(null);
             }}
           >
-            <div className="mt-5">
+            <div className="mt-3">
               <RangeStartAndEndDateEdit
                 value={tempStartAndEndDate || undefined}
                 onChange={(startAndEndDate: RangeStartAndEndDateTime) => {
                   setTempStartAndEndDate(startAndEndDate);
                 }}
+                onApply={(startAndEndDate: RangeStartAndEndDateTime) => {
+                  // Quick ranges apply immediately and close the modal.
+                  commitSelection(startAndEndDate);
+                }}
               />
             </div>
           </Modal>

package/UI/Components/GanttChart/ChartContainer.tsx

@@ -33,7 +33,14 @@ const ChartContainer: FunctionComponent<ComponentProps> = (
   }, []);
 
   return (
-    <div ref={divRef} className={"w-full"}>
+    /*
+     * `isolate` creates a new stacking context so the chart's internal
+     * z-indexes (e.g. a highlighted/matched bar uses z-30, see Bar/Index.tsx)
+     * stay trapped inside the chart. Without it those bars paint above
+     * page-level overlays like the span-details SideOver (z-10), making a
+     * matched span "show above" the sidebar.
+     */
+    <div ref={divRef} className={"w-full"} style={{ isolation: "isolate" }}>
       {props.children}
     </div>
   );

package/Utils/Dashboard/Components/DashboardTraceTableComponent.ts

@@ -0,0 +1,65 @@
+import DashboardTraceTableComponent from "../../../Types/Dashboard/DashboardComponents/DashboardTraceTableComponent";
+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: "Configure the widget title",
+  order: 1,
+};
+
+/*
+ * The "Query" section (span-name filter, attribute filters, group-by, max
+ * rows, include-child-spans) is rendered by the shared structured editor —
+ * TraceChartQueryEditor in "table" mode — rather than these declarative
+ * free-text fields, so those arguments are deliberately not listed here.
+ * See ArgumentsForm.tsx. Unlike the trace chart, there is no "Metric"
+ * argument: the table always shows the full duration stat set (Requests,
+ * Median, Avg, Min, Max) per row.
+ */
+
+export default class DashboardTraceTableComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardTraceTableComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.TraceTable,
+      widthInDashboardUnits: 8,
+      heightInDashboardUnits: 5,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        groupByAttribute: "name",
+        topLimit: 10,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardTraceTableComponent>
+  > {
+    const componentArguments: Array<
+      ComponentArgument<DashboardTraceTableComponent>
+    > = [];
+
+    componentArguments.push({
+      name: "Title",
+      description: "Header shown above the table",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "title",
+      section: DisplaySection,
+    });
+
+    return componentArguments;
+  }
+}

package/Utils/Dashboard/Components/Index.ts

@@ -36,6 +36,7 @@ import DashboardDockerSwarmServiceListComponentUtil from "./DashboardDockerSwarm
 import DashboardTableComponentUtil from "./DashboardTableComponent";
 import DashboardTextComponentUtil from "./DashboardTextComponent";
 import DashboardTraceChartComponentUtil from "./DashboardTraceChartComponent";
+import DashboardTraceTableComponentUtil from "./DashboardTraceTableComponent";
 import DashboardTraceListComponentUtil from "./DashboardTraceListComponent";
 import DashboardValueComponentUtil from "./DashboardValueComponent";
 
@@ -91,6 +92,12 @@ export default class DashboardComponentsUtil {
       >;
     }
 
+    if (dashboardComponentType === DashboardComponentType.TraceTable) {
+      return DashboardTraceTableComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
     if (dashboardComponentType === DashboardComponentType.IncidentList) {
       return DashboardIncidentListComponentUtil.getComponentConfigArguments() as Array<
         ComponentArgument<DashboardBaseComponent>