feat: Auto-select correlated sources on k8s dashboard (#1302)

Closes HDX-2586

# Summary

This PR updates the K8s dashboard so that it auto-selects correlated log and metric sources.

Auto-selection of sources happens
1. During page load, if sources aren't specified in the URL params
2. When a new log source is selected, a correlated metric source is auto-selected. In this case, a notification is shown to the user to inform them that the metric source has been updated.

When a new metric source is selected, a correlated log source is not selected. This is to ensure the user has some way of selecting two non-correlated sources, if they truly want to. If the user does select a metric source which is not correlated with the selected log source, a warning notification will be shown to the user.

## Demo


https://github.com/user-attachments/assets/492121a1-0a51-4af9-a749-42771537678e

Author: pulpdrew

.changeset/funny-games-cheer.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Auto-select correlated sources on k8s dashboard

packages/app/src/KubernetesDashboardPage.tsx

@@ -6,7 +6,6 @@ import cx from 'classnames';
 import sub from 'date-fns/sub';
 import { useQueryState } from 'nuqs';
 import { useForm } from 'react-hook-form';
-import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 import { SourceKind, TSource } from '@hyperdx/common-utils/dist/types';
 import {
   Badge,
@@ -24,6 +23,7 @@ import {
   Text,
   Tooltip,
 } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
 
 import { TimePicker } from '@/components/TimePicker';
 
@@ -757,57 +757,97 @@ const defaultTimeRange = parseTimeQuery('Past 1h', false);
 
 const CHART_HEIGHT = 300;
 
+const findSource = (
+  sources: TSource[] | undefined,
+  filters: {
+    kind?: SourceKind;
+    connection?: string;
+    id?: string;
+  },
+) => {
+  if (!sources) return undefined;
+
+  const { kind, connection, id } = filters;
+  return sources.find(
+    s =>
+      (kind === undefined || s.kind === kind) &&
+      (id === undefined || s.id === id) &&
+      (connection === undefined || s.connection === connection),
+  );
+};
+
 export const resolveSourceIds = (
   _logSourceId: string | null | undefined,
   _metricSourceId: string | null | undefined,
   sources: TSource[] | undefined,
 ) => {
-  if (_logSourceId && _metricSourceId) {
-    return [_logSourceId, _metricSourceId];
+  if ((_logSourceId && _metricSourceId) || !sources) {
+    return {
+      logSourceId: _logSourceId ?? undefined,
+      metricSourceId: _metricSourceId ?? undefined,
+    };
   }
 
-  // Default the metric source to the first one from the same connection as the log source
-  if (_logSourceId && !_metricSourceId && sources) {
-    const { connection } = sources.find(s => s.id === _logSourceId) ?? {};
-    const metricSource = sources.find(
-      s => s.connection === connection && s.kind === SourceKind.Metric,
-    );
-    return [_logSourceId, metricSource?.id];
+  // Find a default metric source that matches the existing log source
+  if (_logSourceId && !_metricSourceId) {
+    const { connection, metricSourceId: correlatedMetricSourceId } =
+      findSource(sources, { id: _logSourceId }) ?? {};
+    const metricSourceId =
+      (correlatedMetricSourceId &&
+        findSource(sources, { id: correlatedMetricSourceId })?.id) ??
+      (connection &&
+        findSource(sources, { connection, kind: SourceKind.Metric })?.id);
+    return { logSourceId: _logSourceId, metricSourceId };
   }
 
-  // Default the log source to the first one from the same connection as the metric source
-  if (!_logSourceId && _metricSourceId && sources) {
-    const { connection } = sources.find(s => s.id === _metricSourceId) ?? {};
-    const logSource = sources.find(
-      s => s.connection === connection && s.kind === SourceKind.Log,
-    );
-    return [logSource?.id, _metricSourceId];
+  // Find a default log source that matches the existing metric source
+  if (!_logSourceId && _metricSourceId) {
+    const { connection, logSourceId: correlatedLogSourceId } =
+      findSource(sources, { id: _metricSourceId }) ?? {};
+    const logSourceId =
+      (correlatedLogSourceId &&
+        findSource(sources, { id: correlatedLogSourceId })?.id) ??
+      (connection &&
+        findSource(sources, { connection, kind: SourceKind.Log })?.id);
+    return { logSourceId, metricSourceId: _metricSourceId };
   }
 
-  // Find a Log and Metric source from the same connection
-  if (sources) {
-    const connections = sources.map(s => s.connection);
-    const connectionWithBothSourceKinds = connections.find(
-      conn =>
-        sources.some(s => s.connection === conn && s.kind === SourceKind.Log) &&
-        sources.some(
-          s => s.connection === conn && s.kind === SourceKind.Metric,
-        ),
-    );
-    const logSource = sources.find(
-      s =>
-        s.connection === connectionWithBothSourceKinds &&
-        s.kind === SourceKind.Log,
-    );
-    const metricSource = sources.find(
-      s =>
-        s.connection === connectionWithBothSourceKinds &&
-        s.kind === SourceKind.Metric,
-    );
-    return [logSource?.id, metricSource?.id];
+  // Find any two correlated log and metric sources
+  const logSourceWithMetricSource = sources.find(
+    s =>
+      s.kind === SourceKind.Log &&
+      s.metricSourceId &&
+      findSource(sources, { id: s.metricSourceId }),
+  );
+
+  if (logSourceWithMetricSource) {
+    return {
+      logSourceId: logSourceWithMetricSource.id,
+      metricSourceId: logSourceWithMetricSource.metricSourceId,
+    };
   }
 
-  return [_logSourceId, _metricSourceId];
+  // Find a Log and Metric source from the same connection
+  const connections = Array.from(new Set(sources.map(s => s.connection)));
+  const connectionWithBothSourceKinds = connections.find(
+    connection =>
+      findSource(sources, { connection, kind: SourceKind.Log }) &&
+      findSource(sources, { connection, kind: SourceKind.Metric }),
+  );
+  const logSource = connectionWithBothSourceKinds
+    ? findSource(sources, {
+        connection: connectionWithBothSourceKinds,
+        kind: SourceKind.Log,
+      })
+    : undefined;
+  const metricSource = connectionWithBothSourceKinds
+    ? findSource(sources, {
+        connection: connectionWithBothSourceKinds,
+        kind: SourceKind.Metric,
+      })
+    : undefined;
+
+  return { logSourceId: logSource?.id, metricSourceId: metricSource?.id };
 };
 
 function KubernetesDashboardPage() {
@@ -816,7 +856,7 @@ function KubernetesDashboardPage() {
   const [_logSourceId, setLogSourceId] = useQueryState('logSource');
   const [_metricSourceId, setMetricSourceId] = useQueryState('metricSource');
 
-  const [logSourceId, metricSourceId] = useMemo(
+  const { logSourceId, metricSourceId } = useMemo(
     () => resolveSourceIds(_logSourceId, _metricSourceId, sources),
     [_logSourceId, _metricSourceId, sources],
   );
@@ -846,22 +886,59 @@ function KubernetesDashboardPage() {
   watch((data, { name, type }) => {
     if (name === 'logSourceId' && type === 'change') {
       setLogSourceId(data.logSourceId ?? null);
+
+      // Default to the log source's correlated metric source
+      if (data.logSourceId && sources) {
+        const logSource = findSource(sources, { id: data.logSourceId });
+        const correlatedMetricSource = logSource?.metricSourceId
+          ? findSource(sources, { id: logSource.metricSourceId })
+          : undefined;
+        if (
+          correlatedMetricSource &&
+          correlatedMetricSource.id !== data.metricSourceId
+        ) {
+          setMetricSourceId(correlatedMetricSource.id);
+          notifications.show({
+            id: `${correlatedMetricSource.id}-auto-correlated-metric-source`,
+            title: 'Updated Metrics Source',
+            message: `Using correlated metrics source: ${correlatedMetricSource.name}`,
+          });
+        } else if (logSource && !correlatedMetricSource) {
+          notifications.show({
+            id: `${logSource.id}-not-correlated`,
+            title: 'Warning',
+            message: `The selected logs source is not correlated with a metrics source. Source correlations can be configured in Team Settings.`,
+            color: 'yellow',
+          });
+        }
+      }
     } else if (name === 'metricSourceId' && type === 'change') {
       setMetricSourceId(data.metricSourceId ?? null);
+      const metricSource = data.metricSourceId
+        ? findSource(sources, { id: data.metricSourceId })
+        : undefined;
+      if (
+        metricSource &&
+        data.logSourceId &&
+        metricSource.logSourceId !== data.logSourceId
+      ) {
+        notifications.show({
+          id: `${metricSource.id}-not-correlated`,
+          title: 'Warning',
+          message: `The selected metrics source is not correlated with the selected logs source. Source correlations can be configured in Team Settings.`,
+          color: 'yellow',
+        });
+      }
     }
   });
 
-  const [activeTab, setActiveTab] = useQueryParam(
-    'tab',
-    withDefault(StringParam, 'pods'),
-    { updateType: 'replaceIn' },
-  );
+  const [activeTab, setActiveTab] = useQueryState('tab', {
+    defaultValue: 'pods',
+  });
 
-  const [searchQuery, setSearchQuery] = useQueryParam(
-    'q',
-    withDefault(StringParam, ''),
-    { updateType: 'replaceIn' },
-  );
+  const [searchQuery, setSearchQuery] = useQueryState('q', {
+    defaultValue: '',
+  });
 
   const {
     searchedTimeRange: dateRange,