Service Dashboard Endpoint Sidepanel

packages/api/src/clickhouse/index.ts

@@ -1516,6 +1516,112 @@ export const getMultiSeriesChartLegacyFormat = async ({
   };
 };
 
+// This query needs to be generalized and replaced once use-case matures
+export const getSpanPerformanceChart = async ({
+  parentSpanWhere,
+  childrenSpanWhere,
+  teamId,
+  tableVersion,
+  maxNumGroups,
+  propertyTypeMappingsModel,
+  startTime,
+  endTime,
+}: {
+  parentSpanWhere: string;
+  childrenSpanWhere: string;
+  tableVersion: number | undefined;
+  teamId: string;
+  maxNumGroups: number;
+  endTime: number; // unix in ms,
+  startTime: number;
+  propertyTypeMappingsModel: LogsPropertyTypeMappingsModel;
+}) => {
+  const tableName = getLogStreamTableName(tableVersion, teamId);
+
+  const parentSpanWhereCondition = await buildSearchQueryWhereCondition({
+    endTime,
+    propertyTypeMappingsModel,
+    query: parentSpanWhere,
+    startTime,
+  });
+
+  const childrenSpanWhereCondition = await buildSearchQueryWhereCondition({
+    endTime,
+    propertyTypeMappingsModel,
+    query: childrenSpanWhere,
+    startTime,
+  });
+
+  // This needs to return in a format that matches multi-series charts
+  const query = SqlString.format(
+    `WITH trace_ids AS (
+SELECT 
+  distinct trace_id
+FROM ??
+WHERE (?)
+)
+SELECT 
+  [span_name] as "group", 
+  sum(_duration) as "series_0.data",
+  count(*) as "series_1.data", 
+  avg(_duration) as "series_2.data", 
+  min(_duration) as "series_3.data", 
+  max(_duration) as "series_4.data",
+  count(distinct trace_id) as "series_5.data",
+  "series_1.data" / "series_5.data" as "series_6.data",
+  '0' as "ts_bucket"
+FROM ??
+WHERE 
+  (?)
+  AND trace_id IN (SELECT trace_id FROM trace_ids)
+GROUP BY span_name
+ORDER BY "series_0.data" DESC
+LIMIT ?`,
+    [
+      tableName,
+      SqlString.raw(parentSpanWhereCondition),
+      tableName,
+      SqlString.raw(childrenSpanWhereCondition),
+      maxNumGroups,
+    ],
+  );
+
+  return await tracer.startActiveSpan(
+    'clickhouse.getSpanPerformanceChart',
+    async span => {
+      try {
+        span.setAttribute('query', query);
+        logger.info({ query });
+
+        const rows = await client.query({
+          query,
+          format: 'JSON',
+          clickhouse_settings: {
+            additional_table_filters: buildLogStreamAdditionalFilters(
+              tableVersion,
+              teamId,
+            ),
+          },
+        });
+        const result = await rows.json<
+          ResponseJSON<{
+            data: string;
+            ts_bucket: number;
+            group: string[];
+          }>
+        >();
+        return result;
+      } catch (e) {
+        span.recordException(e as any);
+        span.end();
+        throw e;
+      } finally {
+        span.end();
+      }
+    },
+  );
+};
+
 export const getLogsChart = async ({
   aggFn,
   endTime,

packages/api/src/routers/api/chart.ts

@@ -116,9 +116,6 @@ router.post(
       if (teamId == null) {
         return res.sendStatus(403);
       }
-      if (!isNumber(startTime) || !isNumber(endTime)) {
-        return res.sendStatus(400);
-      }
 
       const team = await getTeam(teamId);
       if (team == null) {

packages/api/src/routers/api/logs.ts

@@ -361,6 +361,67 @@ router.get('/chart/histogram', async (req, res, next) => {
   }
 });
 
+// This endpoint needs to be generalized replaced once use-case matures
+router.post(
+  '/chart/spanPerformance',
+  validateRequest({
+    body: z.object({
+      parentSpanWhere: z.string().max(1024),
+      childrenSpanWhere: z.string().max(1024),
+      endTime: z.number(),
+      startTime: z.number(),
+      maxGroups: z.optional(z.number().min(1).max(20)),
+    }),
+  }),
+  async (req, res, next) => {
+    try {
+      const teamId = req.user?.team;
+      const {
+        endTime,
+        startTime,
+        parentSpanWhere,
+        childrenSpanWhere,
+        maxGroups,
+      } = req.body;
+
+      if (teamId == null) {
+        return res.sendStatus(403);
+      }
+
+      const team = await getTeam(teamId);
+      if (team == null) {
+        return res.sendStatus(403);
+      }
+
+      const propertyTypeMappingsModel =
+        await clickhouse.buildLogsPropertyTypeMappingsModel(
+          team.logStreamTableVersion,
+          teamId.toString(),
+          startTime,
+          endTime,
+        );
+
+      res.json(
+        await clickhouse.getSpanPerformanceChart({
+          endTime: endTime,
+          maxNumGroups: maxGroups ?? 20,
+          startTime: startTime,
+          tableVersion: team.logStreamTableVersion,
+          teamId: teamId.toString(),
+          parentSpanWhere,
+          childrenSpanWhere,
+          propertyTypeMappingsModel,
+        }),
+      );
+    } catch (e) {
+      const span = opentelemetry.trace.getActiveSpan();
+      span?.recordException(e as Error);
+      span?.setStatus({ code: SpanStatusCode.ERROR });
+      next(e);
+    }
+  },
+);
+
 router.get(
   '/chart',
   validateRequest({

packages/app/src/ChartUtils.tsx

@@ -116,7 +116,7 @@ export function seriesColumns({
     seriesReturnType === 'ratio'
       ? [
           {
-            dataKey: `series_0.data`,
+            dataKey: `series_0.data` as `series_${number}.data`,
             displayName:
               'displayName' in series[0] && series[0].displayName != null
                 ? series[0].displayName
@@ -135,7 +135,7 @@ export function seriesColumns({
         ]
       : series.map((s, i) => {
           return {
-            dataKey: `series_${i}.data`,
+            dataKey: `series_${i}.data` as `series_${number}.data`,
             displayName: seriesDisplayName(s, {
               showField,
               showWhere,

packages/app/src/EndpointLatencyTile.tsx

@@ -25,7 +25,7 @@ export default function EndpointLatencyTile({
   return (
     <Card p="md">
       <Card.Section p="md" py="xs" withBorder>
-        <Flex justify="space-between">
+        <Flex justify="space-between" align="center">
           <span>Request Latency</span>
           <Box>
             <Button.Group>
@@ -90,6 +90,7 @@ export default function EndpointLatencyTile({
               ],
               seriesReturnType: 'column',
             }}
+            showDisplaySwitcher={false}
           />
         ) : (
           <HDXHistogramChart