refactor(app): split ServicesDashboardPage into smaller sibling files (#2626)

## Summary

`ServicesDashboardPage.tsx` had grown to **1,759 lines** in a single file — the page shell, three tab views, an endpoint latency chart, a service selector, and shared filter/query helpers all interleaved. This splits it into a `ServicesDashboardPage/` directory of smaller, cohesive files so the tabs and helpers can be read and edited in isolation.

**This is a pure file-move refactor: no behavior, logic, JSX, or effects changed.** Code was relocated verbatim and relative imports rewired.

## Line count

| | Lines |
|---|---:|
| Before — `ServicesDashboardPage.tsx` (monolith) | **1,759** |
| After — largest file (`HttpTab.tsx`) | **699** |

## New structure

```
packages/app/src/ServicesDashboardPage/
  index.ts                 (3)    barrel — re-exports the original public API only
  types.ts                 (12)   AppliedConfig type
  helpers.ts               (78)   pickSourceConfigFields, buildInFilterCondition,
                                   getScopedFilters, MAX_NUM_SERIES
  ServicesDashboardPage.tsx (446)  page shell, ServiceSelectControlled, dynamic wrapper
  HttpTab.tsx              (699)   HttpTab + EndpointLatencyChart (colocated)
  DatabaseTab.tsx          (517)   DatabaseTab
  ErrorsTab.tsx            (76)    ErrorsTab
  __tests__/ServicesDashboardPage.test.tsx (171)  new smoke test
```

## Drop-in barrel

`index.ts` re-exports exactly the original public API — the default page (with `getLayout`), `EndpointLatencyChart`, and `buildInFilterCondition` — so every external consumer keeps importing `@/ServicesDashboardPage` unchanged:

- `pages/services.tsx` (default export)
- `components/ServiceDashboardEndpointSidePanel.tsx` (`EndpointLatencyChart`)
- `src/__tests__/ServicesDashboardPage.test.ts` (`buildInFilterCondition`)

## Decisions

- **`EndpointLatencyChart` colocated with `HttpTab`** rather than its own file — `HttpTab` renders it directly, so splitting them would introduce a cross-file cycle. The barrel still re-exports it for the side panel.
- **Relative imports rewritten to `@/` absolute** in the moved files (they now sit one level deeper); sibling imports within the directory use `./`.
- **One essential smoke test added** — the existing `buildInFilterCondition` unit test does not render the component, so a minimal "it mounts" test was added (heavy children/hooks stubbed). No per-sub-component tests.

## Verification

- `npx tsc --noEmit` — clean
- `make ci-lint` — clean across all 5 projects
- Unit tests — 4 passed (existing `buildInFilterCondition` + new smoke test)
- E2E `services-dashboard.spec.ts` — **3 passed** (page load, HTTP tab charts, Lucene filtering)

## Follow-ups (intentionally not done here)

- Each tab independently calls `useSource` + `useServiceDashboardExpressions` with identical args; could be lifted to a shared hook later (behavior-adjacent, out of scope for a pure move).
- Two pre-existing lint warnings (`as [Date, Date]` assertion; a setter-naming warning) were carried over verbatim.

Author: brandon-pereira

packages/app/src/ServicesDashboardPage.tsx

@@ -0,0 +1,76 @@
+import {
+  DisplayType,
+  isLogSource,
+  isTraceSource,
+  SourceKind,
+} from '@hyperdx/common-utils/dist/types';
+import { Grid } from '@mantine/core';
+
+import { INTEGER_NUMBER_FORMAT } from '@/ChartUtils';
+import { ChartBox } from '@/components/ChartBox';
+import { DBTimeChart } from '@/components/DBTimeChart';
+import { getStoredLanguage } from '@/components/SearchInput/SearchWhereInput';
+import { useServiceDashboardExpressions } from '@/serviceDashboard';
+import { useSource } from '@/source';
+
+import { getScopedFilters, pickSourceConfigFields } from './helpers';
+import { AppliedConfig } from './types';
+
+// Errors Tab
+function ErrorsTab({
+  searchedTimeRange,
+  appliedConfig,
+}: {
+  searchedTimeRange: [Date, Date];
+  appliedConfig: AppliedConfig;
+}) {
+  const { data: source } = useSource({
+    id: appliedConfig.source,
+    kinds: [SourceKind.Trace],
+  });
+  const { expressions } = useServiceDashboardExpressions({ source });
+
+  return (
+    <Grid mt="md" grow={false} w="100%" maw="100%">
+      <Grid.Col span={12}>
+        <ChartBox style={{ height: 350 }}>
+          {source && expressions && (
+            <DBTimeChart
+              title="Error Events per Service"
+              sourceId={source.id}
+              config={{
+                source: source.id,
+                ...pickSourceConfigFields(source),
+                where: appliedConfig.where || '',
+                whereLanguage:
+                  (appliedConfig.whereLanguage ?? getStoredLanguage()) || 'sql',
+                displayType: DisplayType.StackedBar,
+                select: [
+                  {
+                    valueExpression: '',
+                    aggFn: 'count',
+                  },
+                ],
+                numberFormat: INTEGER_NUMBER_FORMAT,
+                filters: [
+                  {
+                    type: 'sql',
+                    condition: expressions.isError,
+                  },
+                  ...getScopedFilters({ appliedConfig, expressions }),
+                ],
+                groupBy:
+                  (isLogSource(source) || isTraceSource(source)
+                    ? source.serviceNameExpression
+                    : undefined) || expressions.service,
+                dateRange: searchedTimeRange,
+              }}
+            />
+          )}
+        </ChartBox>
+      </Grid.Col>
+    </Grid>
+  );
+}
+
+export default ErrorsTab;