hyperdxio · kodiakhq · Mar 26, 2026 · Mar 24, 2026 · Mar 25, 2026 · Mar 25, 2026
diff --git a/.changeset/tender-fans-retire.md b/.changeset/tender-fans-retire.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Add dashboard listing page
diff --git a/packages/app/pages/dashboards/list.tsx b/packages/app/pages/dashboards/list.tsx
@@ -0,0 +1,2 @@
+import DashboardsListPage from '@/components/Dashboards/DashboardsListPage';
+export default DashboardsListPage;
diff --git a/packages/app/src/ClickhousePage.tsx b/packages/app/src/ClickhousePage.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 import {
   parseAsFloat,
   parseAsStringEnum,
@@ -16,7 +17,9 @@ import {
 } from '@hyperdx/common-utils/dist/types';
 import {
   ActionIcon,
+  Anchor,
   Box,
+  Breadcrumbs,
   Button,
   Grid,
   Group,
@@ -584,6 +587,14 @@ function ClickhousePage() {
 
   return (
     <Box p="sm" data-testid="clickhouse-dashboard-page">
+      <Breadcrumbs mb="xs" mt="xs" fz="sm">
+        <Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
+          Dashboards
+        </Anchor>
+        <Text fz="sm" c="dimmed">
+          ClickHouse
+        </Text>
+      </Breadcrumbs>
       <OnboardingModal requireSource={false} />
       <Group justify="space-between">
         <Group>

diff --git a/packages/app/src/DBDashboardImportPage.tsx b/packages/app/src/DBDashboardImportPage.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { StringParam, useQueryParam } from 'use-query-params';
@@ -13,6 +14,8 @@ import {
   SavedChartConfig,
 } from '@hyperdx/common-utils/dist/types';
 import {
+  Anchor,
+  Breadcrumbs,
   Button,
   Collapse,
   Container,
@@ -508,11 +511,16 @@ function DBDashboardImportPage() {
   return (
     <div>
       <Head>
-        <title>Create a Dashboard - {brandName}</title>
+        <title>Import Dashboard - {brandName}</title>
       </Head>
-      <PageHeader>
-        <div>Create Dashboard &gt; Import Dashboard</div>
-      </PageHeader>
+      <Breadcrumbs my="lg" ms="xs" fz="sm">
+        <Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
+          Dashboards
+        </Anchor>
+        <Text fz="sm" c="dimmed">
+          Import
+        </Text>
+      </Breadcrumbs>
       <div>
         <Container>
           <Stack gap="lg" mt="xl">

diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
@@ -9,6 +9,7 @@ import {
 } from 'react';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { formatRelative } from 'date-fns';
 import produce from 'immer';
@@ -38,11 +39,12 @@ import {
   SearchConditionLanguage,
   SourceKind,
   SQLInterval,
-  TSource,
 } from '@hyperdx/common-utils/dist/types';
 import {
   ActionIcon,
+  Anchor,
   Box,
+  Breadcrumbs,
   Button,
   Flex,
   Group,
@@ -1495,17 +1497,42 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
           );
         }}
       />
-      {isLocalDashboard && (
-        <Paper my="lg" p="md" data-testid="temporary-dashboard-banner">
-          <Flex justify="space-between" align="center">
-            <Text size="sm">
-              This is a temporary dashboard and can not be saved.
+
+      {isLocalDashboard ? (
+        <>
+          <Breadcrumbs mb="xs" mt="xs" fz="sm">
+            <Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
+              Dashboards
+            </Anchor>
+            <Text fz="sm" c="dimmed">
+              Temporary Dashboard
             </Text>
-            <Button variant="primary" fw={400} onClick={onCreateDashboard}>
-              Create New Saved Dashboard
-            </Button>
-          </Flex>
-        </Paper>
+          </Breadcrumbs>
+          <Paper my="lg" p="md" data-testid="temporary-dashboard-banner">
+            <Flex justify="space-between" align="center">
+              <Text size="sm">
+                This is a temporary dashboard and can not be saved.
+              </Text>
+              <Button
+                variant="primary"
+                fw={400}
+                onClick={onCreateDashboard}
+                data-testid="create-dashboard-button"
+              >
+                Create New Saved Dashboard
+              </Button>
+            </Flex>
+          </Paper>
+        </>
+      ) : (
+        <Breadcrumbs mb="xs" mt="xs" fz="sm">
+          <Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
+            Dashboards
+          </Anchor>
+          <Text fz="sm" c="dimmed">
+            {dashboard?.name ?? 'Untitled'}
+          </Text>
+        </Breadcrumbs>
       )}
       <Flex mt="xs" mb="md" justify="space-between" align="center">
         <DashboardName

diff --git a/packages/app/src/KubernetesDashboardPage.tsx b/packages/app/src/KubernetesDashboardPage.tsx
@@ -18,8 +18,10 @@ import {
 import {
   ActionIcon,
   Alert,
+  Anchor,
   Badge,
   Box,
+  Breadcrumbs,
   Card,
   Flex,
   Grid,
@@ -1245,6 +1247,14 @@ function KubernetesDashboardPage() {
 
   return (
     <Box data-testid="kubernetes-dashboard-page" p="sm">
+      <Breadcrumbs mb="xs" mt="xs" fz="sm">
+        <Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
+          Dashboards
+        </Anchor>
+        <Text fz="sm" c="dimmed">
+          Kubernetes
+        </Text>
+      </Breadcrumbs>
       <OnboardingModal requireSource={false} />
       {metricSource && logSource && (
         <PodDetailsSidePanel

diff --git a/packages/app/src/ServicesDashboardPage.tsx b/packages/app/src/ServicesDashboardPage.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 import {
   parseAsString,
   parseAsStringEnum,
@@ -37,7 +38,9 @@ function pickSourceConfigFields(source: TSource) {
 }
 import {
   ActionIcon,
+  Anchor,
   Box,
+  Breadcrumbs,
   Button,
   Grid,
   Group,
@@ -1548,6 +1551,14 @@ function ServicesDashboardPage() {
 
   return (
     <Box p="sm" data-testid="services-dashboard-page">
+      <Breadcrumbs mb="sm" mt="xs" fz="sm">
+        <Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
+          Dashboards
+        </Anchor>
+        <Text fz="sm" c="dimmed">
+          Services
+        </Text>
+      </Breadcrumbs>
       <OnboardingModal requireSource={false} />
       <ServiceDashboardEndpointSidePanel
         service={service}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import DashboardsListPage from '@/components/Dashboards/DashboardsListPage';
		export default DashboardsListPage;