Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix: banner can collapse for clickhouse build (#1812)

Browse source
This commit is contained in:
Aaron Knudtson 2026-02-26 14:16:24 -05:00 committed by GitHub
parent 875f78d484
commit a6edb0dd4c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 60 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/five-laws-pull.md Normal file
View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
fix: the banner for the clickhouse build can now be collapsed

90
packages/app/src/layout.tsx
View file

@ -1,11 +1,13 @@
import React from 'react';
import Link from 'next/link';
import { Box, Center, Text } from '@mantine/core';
import { Button, Center, Group, Text } from '@mantine/core';
import { IconX } from '@tabler/icons-react';
import AppNav from '@/components/AppNav';
import { IS_CLICKHOUSE_BUILD } from '@/config';
import { HDXSpotlightProvider } from './Spotlights';
import { useLocalStorage } from './utils';
/**
* Next.js layout for pages that use the AppNav component. Using the same layout
@ -16,44 +18,62 @@ import { HDXSpotlightProvider } from './Spotlights';
*
* @example SearchPage.getLayout = withAppNav;
*/
export const withAppNav = (page: React.ReactNode) => {
function PageWrapper({ children }: { children: React.ReactNode }) {
const [bannerState, setBannerState] = useLocalStorage(
'clickstack-banner-state',
'opened',
);
const [hasMounted, setHasMounted] = React.useState(false); // prevents banner flash
React.useEffect(() => setHasMounted(true), []);
const bannerIsActive =
hasMounted && IS_CLICKHOUSE_BUILD && bannerState === 'opened';
return (
<HDXSpotlightProvider>
<div
className={
IS_CLICKHOUSE_BUILD ? 'app-layout-with-banner' : 'app-layout'
}
>
{IS_CLICKHOUSE_BUILD && (
<Box bg="var(--color-text-primary)">
<Center>
<Text py="xs" size="sm" c="var(--color-text-inverted)">
This is not recommended for production use and is lacking core
ClickStack features such as alerts and saved searches. For a
proper experience, visit the{' '}
<strong>
<Link
href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started"
target="_blank"
rel="noopener norefeer"
>
ClickStack Docs
</Link>
</strong>
</Text>
</Center>
</Box>
)}
<div className="d-flex" style={{ height: '100%', overflow: 'hidden' }}>
<AppNav />
<div
className="w-100 min-w-0"
style={{ minWidth: 0, overflow: 'auto' }}
<div className={bannerIsActive ? 'app-layout-with-banner' : 'app-layout'}>
{bannerIsActive && (
<Group bg="var(--color-text-primary)">
<Center style={{ flexGrow: 1 }}>
<Text py="xs" size="sm" c="var(--color-text-inverted)">
This is not recommended for production use and is lacking core
ClickStack features such as alerts and saved searches. For a
proper experience, visit the{' '}
<strong>
<Link
href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started"
target="_blank"
rel="noopener noreferrer"
>
ClickStack Docs
</Link>
</strong>
</Text>
</Center>
<Button
onClick={() => setBannerState('closed')}
variant="transparent"
color="var(--color-text-inverted)"
>
{page}
</div>
<IconX />{' '}
</Button>
</Group>
)}
<div className="d-flex" style={{ height: '100%', overflow: 'hidden' }}>
<AppNav />
<div
className="w-100 min-w-0"
style={{ minWidth: 0, overflow: 'auto' }}
>
{children}
</div>
</div>
</div>
);
}
export const withAppNav = (page: React.ReactNode): React.ReactNode => {
return (
<HDXSpotlightProvider>
<PageWrapper>{page}</PageWrapper>
</HDXSpotlightProvider>
);
};