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

area/ui: Parca design refresh #4895

Merged
merged 14 commits into from
Sep 2, 2024
Merged

area/ui: Parca design refresh #4895

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
779c0ab
Implement new design for navbar
yomete Jul 25, 2024
8a9563e
Settings page in progress
yomete Jul 25, 2024
1aa002e
Implement settings page
yomete Jul 29, 2024
5c280de
dark mode fixes
yomete Aug 1, 2024
ec4a7e0
Merge branch 'main' into redesign
yomete Aug 15, 2024
25742f7
Merge branch 'new-viz-toolbar' into redesign
yomete Aug 15, 2024
26aa640
latest whitespace changes
yomete Aug 15, 2024
09e974f
Merge branch 'main' into redesign
yomete Aug 21, 2024
faa29e9
Addressing feedback and suggestions
yomete Aug 21, 2024
54f3e0c
Add button to hide metrics graph
yomete Aug 21, 2024
6e99fb8
Only hide the metrics graph
yomete Aug 22, 2024
83f7d7a
Change bg color in dark mode for switch
yomete Aug 22, 2024
730b9f7
Merge branch 'main' into redesign
yomete Sep 2, 2024
bd1b96d
[pre-commit.ci lite] apply automatic fixes
pre-commit-ci-lite[bot] Sep 2, 2024
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
16 changes: 7 additions & 9 deletions ui/packages/app/web/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,15 +71,13 @@ const App = () => {
<QueryClientProvider client={queryClient}>
<ThemeProvider>
<Header />
<div className="px-3">
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/targets" element={<TargetsPage />} />
<Route path="/settings" element={<SettingsPage />} />
<Route path="/PATH_PREFIX_VAR" element={<Navigate to="/" replace />} />
<Route path="*" element={<Component404 />} />
</Routes>
</div>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/targets" element={<TargetsPage />} />
<Route path="/settings" element={<SettingsPage />} />
<Route path="/PATH_PREFIX_VAR" element={<Navigate to="/" replace />} />
<Route path="*" element={<Component404 />} />
</Routes>
</ThemeProvider>
</QueryClientProvider>
</BrowserRouter>
Expand Down
173 changes: 85 additions & 88 deletions ui/packages/app/web/src/components/ui/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,10 @@ const Navbar = () => {
};

return (
<Disclosure as="nav" className="relative z-10 dark:bg-gray-900">
<Disclosure
as="nav"
className="relative z-10 bg-white dark:bg-gray-900 border-b-[1px] border-gray-300 dark:border-gray-700"
>
{({open}) => (
<>
<div className="mx-auto px-3">
Expand Down Expand Up @@ -159,92 +162,90 @@ const Navbar = () => {
</div>
<div className="hidden sm:ml-6 sm:block">
<div className="flex items-center gap-2">
<div className="border-b border-gray-200">
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
{Object.values(links).map(item => {
const href = item.href;
const props: {
target?: LinkProps['target'];
className: string;
rel?: LinkProps['rel'];
'aria-current'?: 'page';
} = {
target: item.external ? '_blank' : undefined,
className: cx(
isCurrentPage(item)
? 'border-indigo-500 dark:border-gray-100 text-indigo-600 dark:text-gray-100 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium'
: 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-100 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium'
),
rel: item.external ? 'noreferrer' : undefined,
};
if (isCurrentPage(item)) {
props['aria-current'] = 'page';
}
return item.href === 'compare' ? (
<div ref={setComparePopperReferenceElement} key={item.label}>
<Button
className={cx(
isCurrentPage(item)
? 'dark:border-gray-100 text-indigo-600 dark:text-gray-100 border-indigo-500'
: 'hover:border-gray-300 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 border-transparent',
'rounded-none hover:no-underline border-b-2 focus:ring-0 focus:outline-none focus:ring-offset-0 h-full whitespace-nowrap font-medium'
)}
variant="link"
onClick={() =>
navigateTo(
'/',
{
...queryToBePassed,
},
{replace: true}
)
}
onMouseEnter={() => setCompareHover(true)}
onMouseLeave={() => setCompareHover(false)}
id="h-compare-button"
<nav className="-mb-px flex space-x-4" aria-label="Tabs">
{Object.values(links).map(item => {
const href = item.href;
const props: {
target?: LinkProps['target'];
className: string;
rel?: LinkProps['rel'];
'aria-current'?: 'page';
} = {
target: item.external ? '_blank' : undefined,
className: cx(
isCurrentPage(item)
? 'whitespace-nowrap text-sm font-medium bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200 py-2 px-4 rounded-lg'
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 whitespace-nowrap py-2 px-4 text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg'
),
rel: item.external ? 'noreferrer' : undefined,
};
if (isCurrentPage(item)) {
props['aria-current'] = 'page';
}
return item.href === 'compare' ? (
<div ref={setComparePopperReferenceElement} key={item.label}>
<Button
className={cx(
isCurrentPage(item)
? 'whitespace-nowrap text-sm font-medium bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200 py-2 px-4 rounded-lg'
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 whitespace-nowrap py-2 px-4 text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg',
'hover:no-underline focus:ring-0 focus:outline-none focus:ring-offset-0 h-full whitespace-nowrap font-medium'
)}
variant="link"
onClick={() =>
navigateTo(
'/',
{
...queryToBePassed,
},
{replace: true}
)
}
onMouseEnter={() => setCompareHover(true)}
onMouseLeave={() => setCompareHover(false)}
id="h-compare-button"
>
Compare
</Button>
{compareHover && (
<div
ref={setComparePopperElement}
style={styles.popper}
{...attributes.popper}
className="z-50"
>
Compare
</Button>
{compareHover && (
<div
ref={setComparePopperElement}
style={styles.popper}
{...attributes.popper}
className="z-50"
>
<div className="flex">
<div className="relative mx-2">
<svg
className="left-0 h-1 w-full text-black"
x="0px"
y="0px"
viewBox="0 0 255 127.5"
>
<polygon
className="fill-current"
points="0,127.5 127.5,0 255,127.5"
/>
</svg>
<div className="right-0 w-40 rounded bg-black px-3 py-2 text-xs text-white">
{compareExplanation}
</div>
<div className="flex">
<div className="relative mx-2">
<svg
className="left-0 h-1 w-full text-black"
x="0px"
y="0px"
viewBox="0 0 255 127.5"
>
<polygon
className="fill-current"
points="0,127.5 127.5,0 255,127.5"
/>
</svg>
<div className="right-0 w-40 rounded bg-black px-3 py-2 text-xs text-white">
{compareExplanation}
</div>
</div>
</div>
)}
</div>
) : item.external === true ? (
<a key={item.label} {...props} href={href}>
{item.label}
</a>
) : (
<Link key={item.label} {...props} to={href}>
{item.label}
</Link>
);
})}
</nav>
</div>
</div>
)}
</div>
) : item.external === true ? (
<a key={item.label} {...props} href={href}>
{item.label}
</a>
) : (
<Link key={item.label} {...props} to={href}>
{item.label}
</Link>
);
})}
</nav>
</div>
</div>
</div>
Expand All @@ -255,11 +256,7 @@ const Navbar = () => {
<div className="hidden md:flex">
<GitHubStarButton />
</div>
<div className="text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-300">
<a target="_blank" href="https://github.com/parca-dev/parca" rel="noreferrer">
GitHub
</a>
</div>

<div className="text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
<ThemeToggle />
</div>
Expand Down
12 changes: 7 additions & 5 deletions ui/packages/app/web/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,13 @@ const Profiles = () => {
isDarkMode,
}}
>
<ProfileExplorer
queryClient={queryClient}
queryParams={queryParams}
navigateTo={navigateTo}
/>
<div className="bg-white dark:bg-gray-900 p-3">
<ProfileExplorer
queryClient={queryClient}
queryParams={queryParams}
navigateTo={navigateTo}
/>
</div>
</ParcaContextProvider>
</URLStateProvider>
);
Expand Down
11 changes: 10 additions & 1 deletion ui/packages/app/web/src/pages/layouts/ThemeProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,16 @@ const ThemeProvider = ({children}: {children: React.ReactNode}) => {
}
}, [darkMode, isSystemSettingsTheme]);

return <div style={{minHeight: '100vh'}}>{children}</div>;
return (
<div
style={{
minHeight: '100vh',
}}
className="bg-white dark:bg-gray-900"
>
{children}
</div>
);
};

export default ThemeProvider;
4 changes: 2 additions & 2 deletions ui/packages/app/web/src/pages/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ import {UserPreferences} from '@parca/components';

const SettingsPage = () => {
return (
<section>
<div className="bg-white dark:bg-gray-700 max-w-[800px] p-10 w-[800px] mx-auto mt-[60px] rounded">
<section className="bg-gray-50 dark:bg-gray-900 h-screen pt-[60px]">
<div className="bg-white dark:bg-gray-700 max-w-[800px] p-10 w-[800px] mx-auto rounded">
<h1 className="text-3xl dark:text-gray-100 font-bold">Visualisation Settings</h1>
<div>
<UserPreferences />
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/shared/components/src/DateTimeRangePicker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const DateTimeRangePicker = ({onRangeSelection, range}: DateTimeRangePickerProps

return (
<Popover>
<div ref={containerRef} className="relative w-fit items-center pb-6">
<div ref={containerRef} className="relative w-fit items-center">
<DateTimeRangePickerText
range={range}
onClick={toggleActive}
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/shared/components/src/Dropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const Dropdown = ({

return (
<>
<Menu as="div" className="relative z-10 inline-block text-left">
<Menu as="div" className="relative z-[1px] inline-block text-left">
<div>
<Menu.Button as="div">
{element === undefined ? (
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/shared/components/src/ParcaContext/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export const defaultValue: Props = {
loader: <Spinner />,
noDataPrompt: <NoDataPrompt />,
profileExplorer: {
PaddingX: 58,
PaddingX: 32,
metricsGraph: {
maxHeightStyle: {
default: 'calc(47vw - 24px)',
Expand Down
6 changes: 3 additions & 3 deletions ui/packages/shared/components/src/Skeletons/IcicleGraphSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const IcicleGraphSkeleton = ({isHalfScreen, isDarkMode}: Props): JSX.Element =>
<linearGradient id="shimmer" x1="0%" y1="0%" x2="100%" y2="0%">
<stop
offset="0.599964"
stopColor={cx(isDarkMode ? '#111827' : '#f3f3f3')}
stopColor={cx(isDarkMode ? '#1f2937' : '#f3f3f3')}
stopOpacity="1"
>
<animate
Expand All @@ -70,7 +70,7 @@ const IcicleGraphSkeleton = ({isHalfScreen, isDarkMode}: Props): JSX.Element =>
repeatCount="indefinite"
></animate>
</stop>
<stop offset="1.59996" stopColor={cx(isDarkMode ? '#1f2937' : '#ecebeb')} stopOpacity="1">
<stop offset="1.59996" stopColor={cx(isDarkMode ? '#374151' : '#ecebeb')} stopOpacity="1">
<animate
attributeName="offset"
values="-1; -1; 2"
Expand All @@ -79,7 +79,7 @@ const IcicleGraphSkeleton = ({isHalfScreen, isDarkMode}: Props): JSX.Element =>
repeatCount="indefinite"
></animate>
</stop>
<stop offset="2.59996" stopColor={cx(isDarkMode ? '#111827' : '#f3f3f3')} stopOpacity="1">
<stop offset="2.59996" stopColor={cx(isDarkMode ? '#1f2937' : '#f3f3f3')} stopOpacity="1">
<animate
attributeName="offset"
values="0; 0; 3"
Expand Down
4 changes: 2 additions & 2 deletions ui/packages/shared/hooks/src/useUserPreference/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,12 @@
'When enabled, this option automatically trims nodes that are too small to be seen in the graph, making it easier to read and understand.',
},
FLAMEGRAPH_COLOR_PROFILE: {
name: 'Flamegraph color profile',
name: 'Iciclegraph color profile',
key: 'FLAMEGRAPH_COLOR_PROFILE',
type: 'string',
default: 'ocean',
description:
'When enabled, this option anchors the graph tooltip to the bottom of your screen instead of floating near your cursor.',
'This setting allows you to customize the color scheme used in the Icicle graph visualization.',
},
GRAPH_METAINFO_DOCKED: {
name: 'Dock Graph MetaInfo',
Expand All @@ -69,7 +69,7 @@
export type UserPreference = keyof typeof USER_PREFERENCES;

const useUserPreference = <T>(preferenceName: UserPreference): [T, (flag: T) => void] => {
const [flags, setFlags] = useLocalStorage<{[flag: string]: any}>(USER_PREFERENCES_KEY, {});

Check warning on line 72 in ui/packages/shared/hooks/src/useUserPreference/index.ts

View workflow job for this annotation

GitHub Actions / UI Test and Lint 

Unexpected any. Specify a different type

const value: T = flags[preferenceName] ?? USER_PREFERENCES[preferenceName].default;
const setFlag = (flag: T): void => {
Expand Down
11 changes: 5 additions & 6 deletions ui/packages/shared/profile/src/MetricsGraph/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,8 @@ export const RawMetricsGraph = ({
width = 0;
}

const graphWidth = width - margin * 1.5 - margin / 2;

const series: Series[] = data.reduce<Series[]>(function (agg: Series[], s: MetricsSeriesPb) {
if (s.labelset !== undefined) {
const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name));
Expand Down Expand Up @@ -184,10 +186,7 @@ export const RawMetricsGraph = ({
});

/* Scale */
const xScale = d3
.scaleUtc()
.domain([from, to])
.range([0, width - 2.5 * margin]);
const xScale = d3.scaleUtc().domain([from, to]).range([0, graphWidth]);

const yScale = d3
.scaleLinear()
Expand Down Expand Up @@ -555,8 +554,8 @@ export const RawMetricsGraph = ({
))}
<line
className="stroke-gray-300 dark:stroke-gray-500"
x1={xScale(from)}
x2={xScale(to)}
x1={0}
x2={graphWidth}
y1={0}
y2={0}
/>
Expand Down
Loading
Loading