Merge branch 'main' into mikeshi/multi-seriesjoin-on-all-keys

hyperdxio · Feb 3, 2024 · 36ecdbd · 36ecdbd
2 parents 7a9b921 + a29e979
commit 36ecdbd
Show file tree

Hide file tree

Showing 11 changed files with 372 additions and 144 deletions.
diff --git a/docker/ingestor/core.toml b/docker/ingestor/core.toml
@@ -327,6 +327,11 @@ if .hdx_platform == "vector-internal" {
       if is_nullish(.sv) {
         .sv = .b.fly.app.name
       }
+
+      # TODO: maybe move this to post_logs
+      if !is_nullish(.b.message) {
+        .b._hdx_body = .b.message
+      }
     } else if .hdx_platform == "vercel" {
       .h = .b.host
       .st = downcase(.b.level) ?? downcase(.b.severity) ?? null
@@ -581,11 +586,6 @@ if is_object(.b) {
     }
   }
 
-  # extract message from body
-  if !is_nullish(.b.message) && contains(string(.b._hdx_body) ?? "", string(.b.message) ?? "", case_sensitive: true) {
-    .b._hdx_body = .b.message
-  }
-
   # add _hdx_body to raw logs (make it searchable)
   if is_object(.r) {
     if !is_nullish(.b._hdx_body) && !contains(encode_json(.r), to_string(.b._hdx_body) ?? "", case_sensitive: false) {

diff --git a/packages/app/src/CreateLogAlertModal.tsx b/packages/app/src/CreateLogAlertModal.tsx
@@ -12,7 +12,7 @@ import {
 } from './Alert';
 import api from './api';
 import { FieldSelect } from './ChartUtils';
-import HDXLineChart from './HDXLineChart';
+import HDXMultiSeriesTimeChart from './HDXMultiSeriesTimeChart';
 import { genEnglishExplanation } from './queryv2';
 import TabBar from './TabBar';
 import type {
@@ -82,11 +82,17 @@ function AlertForm({
 
   const previewChartConfig = useMemo(() => {
     return {
-      table: 'logs' as const,
-      aggFn: 'count' as const,
-      field: '',
-      groupBy: groupBy ?? '',
-      where: query,
+      series: [
+        {
+          type: 'time' as const,
+          table: 'logs' as const,
+          aggFn: 'count' as const,
+          field: '',
+          groupBy: groupBy != null ? [groupBy] : [],
+          where: query,
+        },
+      ],
+      seriesReturnType: 'column' as const,
       dateRange: intervalToDateRange(interval),
       granularity: intervalToGranularity(interval),
     };
@@ -179,7 +185,7 @@ function AlertForm({
       <div className="mt-4">
         <div className="mb-3 text-muted ps-2 fs-7">Alert Threshold Preview</div>
         <div style={{ height: 400 }}>
-          <HDXLineChart
+          <HDXMultiSeriesTimeChart
             config={previewChartConfig}
             alertThreshold={threshold}
             alertThresholdType={type === 'presence' ? 'above' : 'below'}

diff --git a/packages/app/src/HDXLineChart.tsx b/packages/app/src/HDXLineChart.tsx
@@ -326,6 +326,9 @@ export const HDXLineChartTooltip = withErrorBoundary(
   },
 );
 
+/**
+ * @deprecated Use HDXMultiSeriesTimeChart instead
+ */
 const HDXLineChart = memo(
   ({
     config: {

diff --git a/packages/app/src/HDXListBarChart.tsx b/packages/app/src/HDXListBarChart.tsx
@@ -26,7 +26,14 @@ function ListItem({
   const item = (
     <Box>
       <Flex justify="space-between">
-        <Text size="sm">{title}</Text>
+        <Text
+          size="sm"
+          style={{ overflowWrap: 'anywhere' }}
+          pr="xs"
+          lineClamp={2}
+        >
+          {title}
+        </Text>
         <Text size="sm">{value}</Text>
       </Flex>
       <Box pt="xs">

diff --git a/packages/app/src/HDXMultiSeriesTimeChart.tsx b/packages/app/src/HDXMultiSeriesTimeChart.tsx
@@ -2,6 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
 import cx from 'classnames';
 import { add, format } from 'date-fns';
+import { toast } from 'react-toastify';
 import {
   Bar,
   BarChart,
@@ -16,6 +17,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
+import { Popover } from '@mantine/core';
 
 import api from './api';
 import {
@@ -24,12 +26,94 @@ import {
   seriesColumns,
   seriesToUrlSearchQueryParam,
 } from './ChartUtils';
-import { LegendRenderer } from './HDXLineChart';
 import { HDXLineChartTooltip } from './HDXLineChart';
 import type { ChartSeries, NumberFormat } from './types';
 import useUserPreferences, { TimeFormat } from './useUserPreferences';
 import { formatNumber } from './utils';
-import { semanticKeyedColor, TIME_TOKENS } from './utils';
+import { semanticKeyedColor, TIME_TOKENS, truncateMiddle } from './utils';
+
+import styles from '../styles/HDXLineChart.module.scss';
+
+const MAX_LEGEND_ITEMS = 4;
+
+function CopyableLegendItem({ entry }: any) {
+  return (
+    <span
+      className={styles.legendItem}
+      style={{ color: entry.color }}
+      role="button"
+      onClick={() => {
+        window.navigator.clipboard.writeText(entry.value);
+        toast.success(`Copied to clipboard`);
+      }}
+      title="Click to expand"
+    >
+      <i className="bi bi-circle-fill me-1" style={{ fontSize: 6 }} />
+      {entry.value}
+    </span>
+  );
+}
+
+function ExpandableLegendItem({ entry, expanded }: any) {
+  const [_expanded, setExpanded] = useState(false);
+  const isExpanded = _expanded || expanded;
+
+  return (
+    <span
+      className={styles.legendItem}
+      style={{ color: entry.color }}
+      role="button"
+      onClick={() => setExpanded(v => !v)}
+      title="Click to expand"
+    >
+      <i className="bi bi-circle-fill me-1" style={{ fontSize: 6 }} />
+      {isExpanded ? entry.value : truncateMiddle(`${entry.value}`, 35)}
+    </span>
+  );
+}
+
+export const LegendRenderer = memo<{
+  payload?: {
+    value: string;
+    color: string;
+  }[];
+}>(props => {
+  const payload = props.payload ?? [];
+  const shownItems = payload.slice(0, MAX_LEGEND_ITEMS);
+  const restItems = payload.slice(MAX_LEGEND_ITEMS);
+
+  return (
+    <div className={styles.legend}>
+      {shownItems.map((entry, index) => (
+        <ExpandableLegendItem
+          key={`item-${index}`}
+          value={entry.value}
+          entry={entry}
+        />
+      ))}
+      {restItems.length ? (
+        <Popover withinPortal withArrow closeOnEscape closeOnClickOutside>
+          <Popover.Target>
+            <div className={cx(styles.legendItem, styles.legendMoreLink)}>
+              +{restItems.length} more
+            </div>
+          </Popover.Target>
+          <Popover.Dropdown p="xs">
+            <div className={styles.legendTooltipContent}>
+              {restItems.map((entry, index) => (
+                <CopyableLegendItem
+                  key={`item-${index}`}
+                  value={entry.value}
+                  entry={entry}
+                />
+              ))}
+            </div>
+          </Popover.Dropdown>
+        </Popover>
+      ) : null}
+    </div>
+  );
+});
 
 const HARD_LINES_LIMIT = 60;
 const MemoChart = memo(function MemoChart({
@@ -41,6 +125,7 @@ const MemoChart = memo(function MemoChart({
   lineNames,
   alertThreshold,
   alertThresholdType,
+  logReferenceTimestamp,
   displayType = 'line',
   numberFormat,
 }: {
@@ -54,6 +139,7 @@ const MemoChart = memo(function MemoChart({
   alertThresholdType?: 'above' | 'below';
   displayType?: 'stacked_bar' | 'line';
   numberFormat?: NumberFormat;
+  logReferenceTimestamp?: number;
 }) {
   const ChartComponent = displayType === 'stacked_bar' ? BarChart : LineChart;
 
@@ -211,6 +297,14 @@ const MemoChart = memo(function MemoChart({
         {isClickActive != null ? (
           <ReferenceLine x={isClickActive.activeLabel} stroke="#ccc" />
         ) : null}
+        {logReferenceTimestamp != null ? (
+          <ReferenceLine
+            x={logReferenceTimestamp}
+            stroke="#ff5d5b"
+            strokeDasharray="3 3"
+            label="Event"
+          />
+        ) : null}
       </ChartComponent>
     </ResponsiveContainer>
   );
@@ -224,6 +318,7 @@ const HDXMultiSeriesTimeChart = memo(
     alertThresholdType,
     showDisplaySwitcher = true,
     defaultDisplayType = 'line',
+    logReferenceTimestamp,
   }: {
     config: {
       series: ChartSeries[];
@@ -236,6 +331,7 @@ const HDXMultiSeriesTimeChart = memo(
     alertThresholdType?: 'above' | 'below';
     showDisplaySwitcher?: boolean;
     defaultDisplayType?: 'stacked_bar' | 'line';
+    logReferenceTimestamp?: number;
   }) => {
     const { data, isError, isLoading } = api.useMultiSeriesChart(
       {
@@ -487,6 +583,7 @@ const HDXMultiSeriesTimeChart = memo(
             alertThresholdType={alertThresholdType}
             displayType={displayType}
             numberFormat={numberFormat}
+            logReferenceTimestamp={logReferenceTimestamp}
           />
         </div>
       </div>