Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Minor UI fixes #312

Merged
merged 1 commit into from
Feb 17, 2024
Merged

Minor UI fixes #312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/soft-bananas-clean.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@hyperdx/app': patch
---

Minor UI fixes
78 changes: 38 additions & 40 deletions packages/app/src/AppNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
Collapse,
Input,
Loader,
ScrollArea,
} from '@mantine/core';

import { version } from '../package.json';
Expand Down Expand Up @@ -476,7 +477,7 @@ function SearchInput({
placeholder={placeholder}
value={value}
onChange={e => onChange(e.currentTarget.value)}
icon={<i className="bi bi-search fs-8 ps-1" />}
icon={<i className="bi bi-search fs-8 ps-1 text-slate-400" />}
onKeyDown={handleKeyDown}
rightSection={
value ? (
Expand Down Expand Up @@ -821,12 +822,13 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
<>
<AuthLoadingBlocker />
{fixed && <div style={{ width: navWidth, minWidth: navWidth }}></div>}
<div
<ScrollArea
type="scroll"
scrollbarSize={8}
style={{
minWidth: navWidth,
width: navWidth,
maxHeight: '100vh',
overflowY: 'auto',
height: '100%',
...(fixed
? {
Expand Down Expand Up @@ -876,7 +878,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
)}
>
<span>
<i className="bi bi-layout-text-sidebar-reverse pe-1" />{' '}
<i className="bi bi-layout-text-sidebar-reverse pe-1 text-slate-300" />{' '}
{!isCollapsed && <span>Search</span>}
</span>
</Link>
Expand Down Expand Up @@ -909,19 +911,17 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
/>
) : (
<>
{logViews.length > 1 && (
<SearchInput
placeholder="Saved Searches"
value={searchesListQ}
onChange={setSearchesListQ}
onEnterDown={() => {
(
savedSearchesResultsRef?.current
?.firstChild as HTMLAnchorElement
)?.focus?.();
}}
/>
)}
<SearchInput
placeholder="Saved Searches"
value={searchesListQ}
onChange={setSearchesListQ}
onEnterDown={() => {
(
savedSearchesResultsRef?.current
?.firstChild as HTMLAnchorElement
)?.focus?.();
}}
/>

{logViews.length === 0 && (
<div className={styles.listEmptyMsg}>
Expand Down Expand Up @@ -975,7 +975,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
)}
>
<span>
<i className="bi bi-graph-up pe-1" />{' '}
<i className="bi bi-graph-up pe-1 text-slate-300" />{' '}
{!isCollapsed && <span>Chart Explorer</span>}
</span>
</Link>
Expand All @@ -991,7 +991,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
)}
>
<span>
<i className="bi bi-laptop pe-1" />{' '}
<i className="bi bi-laptop pe-1 text-slate-300" />{' '}
{!isCollapsed && <span>Client Sessions</span>}
</span>
</Link>
Expand All @@ -1007,7 +1007,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
)}
>
<div>
<i className="bi bi-bell pe-1" />{' '}
<i className="bi bi-bell pe-1 text-slate-300" />{' '}
{!isCollapsed && (
<div className="d-inline-flex align-items-center">
<span>Alerts</span>
Expand Down Expand Up @@ -1050,7 +1050,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
)}
>
<span>
<i className="bi bi-heart-pulse pe-1" />{' '}
<i className="bi bi-heart-pulse pe-1 text-slate-300" />{' '}
{!isCollapsed && <span>Service Health</span>}
</span>
</Link>
Expand All @@ -1070,7 +1070,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
>
<span>
<span
className="pe-1"
className="pe-1 text-slate-300"
style={{ top: -2, position: 'relative' }}
>
<KubernetesFlatIcon width={16} />
Expand All @@ -1095,7 +1095,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
className="text-decoration-none d-flex justify-content-between align-items-center fs-7 text-muted-hover"
>
<span>
<i className="bi bi-grid-1x2 pe-1" />{' '}
<i className="bi bi-grid-1x2 pe-1 text-slate-300" />{' '}
{!isCollapsed && <span>Dashboards</span>}
</span>
</Link>
Expand Down Expand Up @@ -1153,19 +1153,17 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
/>
) : (
<>
{dashboards.length > 1 && (
<SearchInput
placeholder="Saved Dashboards"
value={dashboardsListQ}
onChange={setDashboardsListQ}
onEnterDown={() => {
(
dashboardsResultsRef?.current
?.firstChild as HTMLAnchorElement
)?.focus?.();
}}
/>
)}
<SearchInput
placeholder="Saved Dashboards"
value={dashboardsListQ}
onChange={setDashboardsListQ}
onEnterDown={() => {
(
dashboardsResultsRef?.current
?.firstChild as HTMLAnchorElement
)?.focus?.();
}}
/>

<AppNavLinkGroups
name="dashboards"
Expand Down Expand Up @@ -1269,7 +1267,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
)}
>
<span>
<i className="bi bi-gear" />{' '}
<i className="bi bi-gear text-slate-300" />{' '}
{!isCollapsed && <span>Team Settings</span>}
</span>
</Link>
Expand All @@ -1283,15 +1281,15 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
target="_blank"
>
<span>
<i className="bi bi-book" />{' '}
<i className="bi bi-book text-slate-300" />{' '}
{!isCollapsed && <span>Documentation</span>}
</span>
</Link>
</div>
<div className="my-4">
<Link href={`${API_SERVER_URL}/logout`} legacyBehavior>
<span role="button" className="text-muted-hover">
<i className="bi bi-box-arrow-left" />{' '}
<i className="bi bi-box-arrow-left text-slate-300" />{' '}
{!isCollapsed && <span>Logout</span>}
</span>
</Link>
Expand All @@ -1302,7 +1300,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
</div>
</>
)}
</div>
</ScrollArea>
</>
);
}
18 changes: 9 additions & 9 deletions packages/app/src/DashboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -883,26 +883,26 @@ export default function DashboardPage() {
});
}}
>
<Badge
color={tagsCount ? 'blue' : 'gray'}
variant={tagsCount ? 'light' : 'filled'}
<MButton
compact
color="blue"
radius="xl"
variant={tagsCount > 0 ? 'light' : 'default'}
size="xs"
mx="sm"
fw="normal"
tt="none"
className="cursor-pointer"
leftIcon={<i className="bi bi-tags-fill" />}
>
<i className="bi bi-tags-fill me-1"></i>
{!tagsCount
? 'Add Tag'
: tagsCount === 1
? dashboard.tags[0]
: `${tagsCount} Tags`}
</Badge>
</MButton>
</Tags>
)}
<Transition mounted={isSavedNow} transition="skew-down">
{style => (
<Badge fw="normal" tt="none" ml="xs" style={style}>
<Badge fw="normal" tt="none" style={style}>
Saved now
</Badge>
)}
Expand Down
7 changes: 4 additions & 3 deletions packages/app/src/SearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -791,6 +791,7 @@ function SearchPage() {
size={20}
color="gray"
withBorder
zIndex={1}
>
<ActionIcon size="lg" variant="default" ml="xs">
<i className="bi bi-tags-fill text-slate-300"></i>
Expand Down Expand Up @@ -818,13 +819,13 @@ function SearchPage() {
href={generateSearchUrl(searchedQuery, [zoomOutFrom, zoomOutTo])}
className="text-muted-hover text-decoration-none fs-8 me-3"
>
<i className="bi bi-zoom-out"></i>Zoom Out
<i className="bi bi-zoom-out me-1"></i>Zoom Out
</Link>
<Link
href={generateSearchUrl(searchedQuery, [zoomInFrom, zoomInTo])}
className="text-muted-hover text-decoration-none fs-8 me-3"
>
<i className="bi bi-zoom-in"></i>Zoom In
<i className="bi bi-zoom-in me-1"></i>Zoom In
</Link>
<Link
href={generateChartUrl({
Expand All @@ -835,7 +836,7 @@ function SearchPage() {
})}
className="text-muted-hover text-decoration-none fs-8"
>
<i className="bi bi-plus-circle"></i>Create Chart
<i className="bi bi-plus-circle me-1"></i>Create Chart
</Link>
</div>
</div>
Expand Down
18 changes: 9 additions & 9 deletions packages/app/src/Tags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import {
Checkbox,
CloseButton,
Group,
HoverCard,
Input,
Popover,
ScrollArea,
Stack,
} from '@mantine/core';
Expand Down Expand Up @@ -37,7 +37,7 @@ export const Tags = React.memo(
const tags = React.useMemo(() => {
return Array.from(
new Set([...values, ...(prefetchedOptionsData?.data || [])]),
);
).sort();
}, [prefetchedOptionsData, values]);

const [q, setQ] = React.useState('');
Expand All @@ -64,7 +64,7 @@ export const Tags = React.memo(
);

return (
<HoverCard
<Popover
withinPortal
width={240}
keepMounted={false}
Expand All @@ -73,9 +73,9 @@ export const Tags = React.memo(
refetch(); // todo: better to use queryClient.invalidateQueries('tags')
setQ('');
}}
withArrow
position="bottom-start"
>
<HoverCard.Target>
<Popover.Target>
{children || (
<ActionIcon
variant="filled"
Expand All @@ -86,8 +86,8 @@ export const Tags = React.memo(
<i className="bi bi-tags text-slate-300 fs-7" />
</ActionIcon>
)}
</HoverCard.Target>
<HoverCard.Dropdown p={0} bg="dark">
</Popover.Target>
<Popover.Dropdown p={0} bg="dark">
{isLoading && 'Loading'}
{isError && 'Error'}
<Input
Expand Down Expand Up @@ -169,8 +169,8 @@ export const Tags = React.memo(
</Button>
)}
</div>
</HoverCard.Dropdown>
</HoverCard>
</Popover.Dropdown>
</Popover>
);
},
);
2 changes: 1 addition & 1 deletion packages/app/styles/AppNav.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
display: flex;
justify-content: space-between;
text-decoration: none;
color: $slate-300;
color: $slate-200;
font-size: 13px;
margin-bottom: 4px;
max-width: 100%;
Expand Down
Loading