feat: Add ability to disable data sources (fixes #1545)

- Add 'disabled' field to source schema (common-utils, api, app)
- Move enable/disable toggle to expanded form header (top right)
- Dim disabled sources in list view (50% opacity when closed)
- Show full opacity when form is open for editing
- Filter out disabled sources in search page, dashboards, sessions
- Add changeset for release management
- Smooth transition effects for visual feedback

Based on PR feedback, form simplification will be addressed separately.

Author: alok87

.changeset/clever-sources-disable.md

@@ -0,0 +1,8 @@
+---
+"@hyperdx/common-utils": patch
+"@hyperdx/api": patch
+"@hyperdx/app": patch
+---
+
+Add ability to disable data sources with improved UX
+

packages/api/src/models/source.ts

@@ -40,6 +40,10 @@ export const Source = mongoose.model<ISource>(
       },
 
       name: String,
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
       displayedTimestampValueExpression: String,
       implicitColumnExpression: String,
       serviceNameExpression: String,

packages/app/src/DBSearchPage.tsx

@@ -171,17 +171,22 @@ type SearchConfigFromSchema = z.infer<typeof SearchConfigSchema>;
 
 // Helper function to get the default source id
 export function getDefaultSourceId(
-  sources: { id: string }[] | undefined,
+  sources: { id: string; disabled?: boolean }[] | undefined,
   lastSelectedSourceId: string | undefined,
 ): string {
   if (!sources || sources.length === 0) return '';
+  
+  // Filter out disabled sources
+  const enabledSources = sources.filter(s => !s.disabled);
+  if (enabledSources.length === 0) return '';
+  
   if (
     lastSelectedSourceId &&
-    sources.some(s => s.id === lastSelectedSourceId)
+    enabledSources.some(s => s.id === lastSelectedSourceId)
   ) {
     return lastSelectedSourceId;
   }
-  return sources[0].id;
+  return enabledSources[0].id;
 }
 
 function SourceEditMenu({

packages/app/src/KubernetesDashboardPage.tsx

@@ -944,7 +944,8 @@ const findSource = (
     s =>
       (kind === undefined || s.kind === kind) &&
       (id === undefined || s.id === id) &&
-      (connection === undefined || s.connection === connection),
+      (connection === undefined || s.connection === connection) &&
+      !s.disabled,
   );
 };
 
@@ -989,7 +990,8 @@ export const resolveSourceIds = (
     s =>
       s.kind === SourceKind.Log &&
       s.metricSourceId &&
-      findSource(sources, { id: s.metricSourceId }),
+      findSource(sources, { id: s.metricSourceId }) &&
+      !s.disabled,
   );
 
   if (logSourceWithMetricSource) {

packages/app/src/ServicesDashboardPage.tsx

@@ -1414,7 +1414,9 @@ function ServicesDashboardPage() {
   const appliedConfigWithoutFilters = useMemo(() => {
     if (!sources?.length) return appliedConfigParams;
 
-    const traceSources = sources?.filter(s => s.kind === SourceKind.Trace);
+    const traceSources = sources?.filter(
+      s => s.kind === SourceKind.Trace && !s.disabled,
+    );
     const paramsSourceIdIsTraceSource = traceSources?.find(
       s => s.id === appliedConfigParams.source,
     );

packages/app/src/SessionsPage.tsx

@@ -257,9 +257,9 @@ export default function SessionsPage() {
   // Auto-select the first session source when the page loads
   useEffect(() => {
     if (sources && sources.length > 0 && !appliedConfig.sessionSource) {
-      // Find the first session source
+      // Find the first enabled session source
       const sessionSource = sources.find(
-        source => source.kind === SourceKind.Session,
+        source => source.kind === SourceKind.Session && !source.disabled,
       );
       if (sessionSource) {
         setValue('source', sessionSource.id);

packages/app/src/components/SourceSelect.tsx

@@ -66,7 +66,8 @@ function SourceSelectControlledComponent({
         data
           ?.filter(
             source =>
-              !allowedSourceKinds || allowedSourceKinds.includes(source.kind),
+              (!allowedSourceKinds || allowedSourceKinds.includes(source.kind)) &&
+              !source.disabled,
           )
           .map(d => ({
             value: d.id,

packages/app/src/components/Sources/SourceForm.tsx

@@ -30,6 +30,7 @@ import {
   Select,
   Slider,
   Stack,
+  Switch,
   Text,
   Tooltip,
 } from '@mantine/core';
@@ -1453,6 +1454,37 @@ export function TableSourceForm({
 }) {
   const { data: source } = useSource({ id: sourceId });
   const { data: connections } = useConnections();
+  const updateSourceMutation = useUpdateSource();
+
+  const handleDisabledToggle = useCallback(
+    (newDisabledValue: boolean) => {
+      if (!source || isNew) return;
+
+      updateSourceMutation.mutate(
+        {
+          source: {
+            ...source,
+            disabled: newDisabledValue,
+          },
+        },
+        {
+          onSuccess: () => {
+            notifications.show({
+              color: 'green',
+              message: `Source ${newDisabledValue ? 'disabled' : 'enabled'} successfully`,
+            });
+          },
+          onError: error => {
+            notifications.show({
+              color: 'red',
+              message: `Failed to ${newDisabledValue ? 'disable' : 'enable'} source - ${error.message}`,
+            });
+          },
+        },
+      );
+    },
+    [source, isNew, updateSourceMutation],
+  );
 
   const { control, setValue, handleSubmit, resetField, setError, clearErrors } =
     useForm<TSourceUnion>({
@@ -1824,7 +1856,27 @@ export function TableSourceForm({
       }
     >
       <Stack gap="md" mb="md">
-        <Text mb="lg">Source Settings</Text>
+        <Flex justify="space-between" align="center" mb="lg">
+          <Text>Source Settings</Text>
+          {!isNew && (
+            <Controller
+              control={control}
+              name="disabled"
+              render={({ field: { value, onChange } }) => (
+                <Switch
+                  size="sm"
+                  checked={!value}
+                  onChange={(event) => {
+                    const newDisabledValue = !event.currentTarget.checked;
+                    onChange(newDisabledValue);
+                    handleDisabledToggle(newDisabledValue);
+                  }}
+                  label={value ? 'Disabled' : 'Enabled'}
+                />
+              )}
+            />
+          )}
+        </Flex>
         <FormRow label={'Name'}>
           <InputControlled
             control={control}

packages/app/src/components/Sources/SourcesList.tsx

@@ -156,30 +156,43 @@ export function SourcesList({
 
         {sources?.map((s, index) => (
           <React.Fragment key={s.id}>
-            <Flex justify="space-between" align="center">
-              <div>
-                <Text size={textSize} fw={500}>
-                  {s.name}
-                </Text>
-                <Text size={subtextSize} c="dimmed" mt={4}>
-                  <Group gap="xs">
-                    {capitalizeFirstLetter(s.kind)}
-                    <Group gap={4}>
-                      <IconServer size={iconSize} />
-                      {connections?.find(c => c.id === s.connection)?.name}
-                    </Group>
-                    <Group gap={4}>
-                      {s.from && (
-                        <>
-                          <IconStack size={iconSize} />
-                          {s.from.databaseName}
-                          {s.kind === SourceKind.Metric ? '' : '.'}
-                          {s.from.tableName}
-                        </>
-                      )}
+            <Flex
+              justify="space-between"
+              align="center"
+              opacity={s.disabled ? 0.5 : 1}
+              style={{
+                transition: 'opacity 0.2s ease',
+              }}
+            >
+              <div style={{ flex: 1 }}>
+                <Flex align="center" gap="sm">
+                  <div>
+                    <Group gap="xs" align="center">
+                      <Text size={textSize} fw={500}>
+                        {s.name}
+                      </Text>
                     </Group>
-                  </Group>
-                </Text>
+                    <Text size={subtextSize} c="dimmed" mt={4}>
+                      <Group gap="xs">
+                        {capitalizeFirstLetter(s.kind)}
+                        <Group gap={4}>
+                          <IconServer size={iconSize} />
+                          {connections?.find(c => c.id === s.connection)?.name}
+                        </Group>
+                        <Group gap={4}>
+                          {s.from && (
+                            <>
+                              <IconStack size={iconSize} />
+                              {s.from.databaseName}
+                              {s.kind === SourceKind.Metric ? '' : '.'}
+                              {s.from.tableName}
+                            </>
+                          )}
+                        </Group>
+                      </Group>
+                    </Text>
+                  </div>
+                </Flex>
               </div>
               <ActionIcon
                 variant="secondary"

packages/app/src/source.ts

@@ -144,6 +144,7 @@ export function useUpdateSource() {
             return s;
           });
         });
+        return source;
       } else {
         return await hdxServer(`sources/${source.id}`, {
           method: 'PUT',