Skip to content

Commit 35b517e

Browse files
pulpdrewpulpdrew
committed
feat: Add dashboard listing page
1 parent 2207edb commit 35b517e

22 files changed

+1092
-269
lines changed

‎.changeset/tender-fans-retire.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hyperdx/app": patch
3+
---
4+
5+
feat: Add dashboard listing page

‎packages/app/pages/dashboards/list.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import DashboardsListPage from '@/components/Dashboards/DashboardsListPage';
2+
export default DashboardsListPage;

‎packages/app/src/ClickhousePage.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useEffect, useMemo, useState } from 'react';
22
import dynamic from 'next/dynamic';
3+
import Link from 'next/link';
34
import {
45
parseAsFloat,
56
parseAsStringEnum,
@@ -16,7 +17,9 @@ import {
1617
} from '@hyperdx/common-utils/dist/types';
1718
import {
1819
ActionIcon,
20+
Anchor,
1921
Box,
22+
Breadcrumbs,
2023
Button,
2124
Grid,
2225
Group,
@@ -584,6 +587,14 @@ function ClickhousePage() {
584587

585588
return (
586589
<Box p="sm" data-testid="clickhouse-dashboard-page">
590+
<Breadcrumbs mb="xs" mt="xs" fz="sm">
591+
<Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
592+
Dashboards
593+
</Anchor>
594+
<Text fz="sm" c="dimmed">
595+
ClickHouse
596+
</Text>
597+
</Breadcrumbs>
587598
<OnboardingModal requireSource={false} />
588599
<Group justify="space-between">
589600
<Group>

‎packages/app/src/DBDashboardImportPage.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useEffect, useRef, useState } from 'react';
22
import dynamic from 'next/dynamic';
33
import Head from 'next/head';
4+
import Link from 'next/link';
45
import { useRouter } from 'next/router';
56
import { Controller, useForm, useWatch } from 'react-hook-form';
67
import { StringParam, useQueryParam } from 'use-query-params';
@@ -13,6 +14,8 @@ import {
1314
SavedChartConfig,
1415
} from '@hyperdx/common-utils/dist/types';
1516
import {
17+
Anchor,
18+
Breadcrumbs,
1619
Button,
1720
Collapse,
1821
Container,
@@ -508,11 +511,16 @@ function DBDashboardImportPage() {
508511
return (
509512
<div>
510513
<Head>
511-
<title>Create a Dashboard - {brandName}</title>
514+
<title>Import Dashboard - {brandName}</title>
512515
</Head>
513-
<PageHeader>
514-
<div>Create Dashboard &gt; Import Dashboard</div>
515-
</PageHeader>
516+
<Breadcrumbs my="lg" ms="xs" fz="sm">
517+
<Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
518+
Dashboards
519+
</Anchor>
520+
<Text fz="sm" c="dimmed">
521+
Import
522+
</Text>
523+
</Breadcrumbs>
516524
<div>
517525
<Container>
518526
<Stack gap="lg" mt="xl">

‎packages/app/src/DBDashboardPage.tsx‎

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
} from 'react';
1010
import dynamic from 'next/dynamic';
1111
import Head from 'next/head';
12+
import Link from 'next/link';
1213
import { useRouter } from 'next/router';
1314
import { formatRelative } from 'date-fns';
1415
import produce from 'immer';
@@ -38,11 +39,12 @@ import {
3839
SearchConditionLanguage,
3940
SourceKind,
4041
SQLInterval,
41-
TSource,
4242
} from '@hyperdx/common-utils/dist/types';
4343
import {
4444
ActionIcon,
45+
Anchor,
4546
Box,
47+
Breadcrumbs,
4648
Button,
4749
Flex,
4850
Group,
@@ -1495,17 +1497,42 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
14951497
);
14961498
}}
14971499
/>
1498-
{isLocalDashboard && (
1499-
<Paper my="lg" p="md" data-testid="temporary-dashboard-banner">
1500-
<Flex justify="space-between" align="center">
1501-
<Text size="sm">
1502-
This is a temporary dashboard and can not be saved.
1500+
1501+
{isLocalDashboard ? (
1502+
<>
1503+
<Breadcrumbs mb="xs" mt="xs" fz="sm">
1504+
<Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
1505+
Dashboards
1506+
</Anchor>
1507+
<Text fz="sm" c="dimmed">
1508+
Temporary Dashboard
15031509
</Text>
1504-
<Button variant="primary" fw={400} onClick={onCreateDashboard}>
1505-
Create New Saved Dashboard
1506-
</Button>
1507-
</Flex>
1508-
</Paper>
1510+
</Breadcrumbs>
1511+
<Paper my="lg" p="md" data-testid="temporary-dashboard-banner">
1512+
<Flex justify="space-between" align="center">
1513+
<Text size="sm">
1514+
This is a temporary dashboard and can not be saved.
1515+
</Text>
1516+
<Button
1517+
variant="primary"
1518+
fw={400}
1519+
onClick={onCreateDashboard}
1520+
data-testid="create-dashboard-button"
1521+
>
1522+
Create New Saved Dashboard
1523+
</Button>
1524+
</Flex>
1525+
</Paper>
1526+
</>
1527+
) : (
1528+
<Breadcrumbs mb="xs" mt="xs" fz="sm">
1529+
<Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
1530+
Dashboards
1531+
</Anchor>
1532+
<Text fz="sm" c="dimmed">
1533+
{dashboard?.name ?? 'Untitled'}
1534+
</Text>
1535+
</Breadcrumbs>
15091536
)}
15101537
<Flex mt="xs" mb="md" justify="space-between" align="center">
15111538
<DashboardName

‎packages/app/src/KubernetesDashboardPage.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@ import {
1818
import {
1919
ActionIcon,
2020
Alert,
21+
Anchor,
2122
Badge,
2223
Box,
24+
Breadcrumbs,
2325
Card,
2426
Flex,
2527
Grid,
@@ -1245,6 +1247,14 @@ function KubernetesDashboardPage() {
12451247

12461248
return (
12471249
<Box data-testid="kubernetes-dashboard-page" p="sm">
1250+
<Breadcrumbs mb="xs" mt="xs" fz="sm">
1251+
<Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
1252+
Dashboards
1253+
</Anchor>
1254+
<Text fz="sm" c="dimmed">
1255+
Kubernetes
1256+
</Text>
1257+
</Breadcrumbs>
12481258
<OnboardingModal requireSource={false} />
12491259
{metricSource && logSource && (
12501260
<PodDetailsSidePanel

‎packages/app/src/ServicesDashboardPage.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useCallback, useEffect, useMemo, useState } from 'react';
22
import dynamic from 'next/dynamic';
3+
import Link from 'next/link';
34
import {
45
parseAsString,
56
parseAsStringEnum,
@@ -37,7 +38,9 @@ function pickSourceConfigFields(source: TSource) {
3738
}
3839
import {
3940
ActionIcon,
41+
Anchor,
4042
Box,
43+
Breadcrumbs,
4144
Button,
4245
Grid,
4346
Group,
@@ -1548,6 +1551,14 @@ function ServicesDashboardPage() {
15481551

15491552
return (
15501553
<Box p="sm" data-testid="services-dashboard-page">
1554+
<Breadcrumbs mb="sm" mt="xs" fz="sm">
1555+
<Anchor component={Link} href="/dashboards/list" fz="sm" c="dimmed">
1556+
Dashboards
1557+
</Anchor>
1558+
<Text fz="sm" c="dimmed">
1559+
Services
1560+
</Text>
1561+
</Breadcrumbs>
15511562
<OnboardingModal requireSource={false} />
15521563
<ServiceDashboardEndpointSidePanel
15531564
service={service}

0 commit comments

Comments
 (0)