Skip to content

[HUD] Use MUI components for nav bar #6543

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[HUD] Use MUI components for nav bar #6543

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
42 changes: 18 additions & 24 deletions torchci/components/LoginSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
import SyncIcon from "@mui/icons-material/Sync";
import { Button as _Button, Menu, MenuItem } from "@mui/material";
import { Button as _Button, MenuItem } from "@mui/material";
import { signIn, signOut, useSession } from "next-auth/react";
import Link from "next/link";
import React from "react";
import { HoverDropDownMenu } from "./common/HoverDropDownMenu";
import styles from "./LoginSection.module.css";

const Button = (props: any) => {
Expand All @@ -13,13 +13,6 @@ const Button = (props: any) => {

export default function LoginSection() {
const { data: session, status } = useSession();
const [anchorEl, setAnchorEl] = React.useState(null);
const onClick = (event: any) => {
setAnchorEl(event.currentTarget);
};
const onClose = () => {
setAnchorEl(null);
};

return (
<>
Expand All @@ -42,20 +35,21 @@ export default function LoginSection() {
)}
{session && (
<>
<Button onClick={onClick}>
{session.user?.image ? (
<img
style={{
backgroundImage: `url('${session.user.image}')`,
}}
className={styles.avatar}
/>
) : (
// Hopefully shouldn't get here
<QuestionMarkIcon fontSize="inherit" />
)}
</Button>
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={onClose}>
<HoverDropDownMenu
title={
session.user?.image ? (
<img
style={{
backgroundImage: `url('${session.user.image}')`,
}}
className={styles.avatar}
/>
) : (
// Hopefully shouldn't get here
<QuestionMarkIcon fontSize="inherit" />
)
}
>
{session.user?.name && (
<MenuItem>Signed in as {session.user.name}</MenuItem>
)}
Expand All @@ -68,7 +62,7 @@ export default function LoginSection() {
>
<MenuItem>Sign out</MenuItem>
</Link>
</Menu>
</HoverDropDownMenu>
</>
)}
</>
Expand Down
62 changes: 0 additions & 62 deletions torchci/components/NavBar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,8 @@
.navbar {
display: flex;
padding: 0 1rem;
font: bold;
background: var(--navbar-bg);
box-shadow: var(--navbar-shadow);
width: 100%;
min-height: 60px;
align-items: center;
}

.navbar li {
padding: 0.9rem 1rem;
position: relative;
z-index: 9999;
display: flex;
align-items: center;
}

.navbar a {
display: block;
}

.navbar span {
padding: 0;
margin: 0;
}

.navbar ul {
list-style: none;
}

.navbar {
margin: 0;
z-index: 100;
}

.navbarlinkslist {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding: 0;
height: 100%;
}

.homeLink {
font-weight: bold;
padding-right: 10px;
}

.dropdowntitle {
padding: 0.7rem 1rem;
cursor: pointer;
display: flex;
align-items: center;
}

.dropdown {
position: absolute;
top: 100%;
left: 0;
box-shadow: var(--dropdown-shadow);
z-index: 9999;
min-width: 12rem;
padding: 0.5rem 0;
background-color: var(--dropdown-bg);
display: none;
border-radius: 4px;
}
221 changes: 120 additions & 101 deletions torchci/components/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,46 @@
import { Button as _Button, Box, MenuItem, Stack } from "@mui/material";
import styles from "components/NavBar.module.css";
import Link from "next/link";
import { useState } from "react";
import { AiFillGithub } from "react-icons/ai";
import LoginSection from "./LoginSection";
import ThemeModePicker from "./ThemeModePicker";
import { HoverDropDownMenu } from "./common/HoverDropDownMenu";

const NavBarDropdown = ({
title,
items,
const MenuItemLink = ({
href,
name,
}: {
title: string;
items: any;
href: string;
name: string;
}): JSX.Element => {
const [dropdown, setDropdown] = useState(false);
const dropdownStyle = dropdown ? { display: "block" } : {};
return (
<Link href={href} prefetch={false}>
<MenuItem>{name}</MenuItem>
</Link>
);
};

const Button = (props: any) => {
// Make button as small as possible
return (
<_Button
style={{ minWidth: 0, textTransform: "none", font: "inherit" }}
{...props}
/>
);
};

const ButtonLink = ({
href,
name,
}: {
href: string;
name: string;
}): JSX.Element => {
return (
<li
onMouseEnter={() => setDropdown(true)}
onMouseLeave={() => setDropdown(false)}
style={{ padding: 0 }}
>
<div className={styles.dropdowntitle}>{title} ▾</div>
<ul className={styles.dropdown} style={dropdownStyle}>
{items.map((item: any) => (
<li key={item.href}>
<Link href={item.href} prefetch={false}>
{item.name}
</Link>
</li>
))}
</ul>
</li>
<Link href={href} prefetch={false}>
<Button>{name}</Button>
</Link>
);
};

Expand Down Expand Up @@ -119,91 +128,101 @@ function NavBar() {
},
];

const leftLinks = [
{
href: "/minihud",
name: "MiniHUD",
},
{
href: "/hud/pytorch/executorch/main",
name: "ExecuTorch",
},
{
href: "/hud/pytorch/vision/main",
name: "TorchVision",
},
{
href: "/hud/pytorch/audio/main",
name: "TorchAudio",
},
];

return (
<div className={styles.navbar}>
<div>
<ul className={styles.navbarlinkslist}>
<li className={styles.homeLink}>
<Link prefetch={false} href="/">
PyTorch CI HUD
</Link>
</li>
<li>
<Link prefetch={false} href="/minihud">
MiniHUD
</Link>
</li>
<li>
<Link prefetch={false} href="/hud/pytorch/executorch/main">
ExecuTorch
</Link>
</li>
<li>
<Link prefetch={false} href="/hud/pytorch/vision/main">
TorchVision
</Link>
</li>
<li>
<Link prefetch={false} href="/hud/pytorch/audio/main">
TorchAudio
</Link>
</li>
</ul>
</div>
<div
style={{
marginLeft: "auto",
marginRight: "0px",
display: "flex",
alignItems: "center",
<Stack
padding={2}
direction="row"
spacing={2}
sx={{
justifyContent: "space-between",
}}
>
<ul className={styles.navbarlinkslist}>
<li>
<Link href="https://github.com/pytorch/pytorch/wiki/Using-hud.pytorch.org">
Help
</Link>
</li>
<li>
<Link href="https://github.com/pytorch/test-infra/issues/new?assignees=&labels=&template=feature_request.yaml&title=%5Bfeature%5D%3A+">
Requests
</Link>
</li>
<li>
<Link prefetch={false} href="/metrics">
Metrics
</Link>
</li>
<li>
<Link prefetch={false} href="/kpis">
KPIs
</Link>
</li>
<NavBarDropdown title="Benchmarks" items={benchmarksDropdown} />
<NavBarDropdown title="Dev Infra" items={devInfraDropdown} />
<li
style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
>
<Link
href="https://github.com/pytorch/test-infra/tree/main/torchci"
passHref
<Stack
direction="row"
spacing={2}
alignItems="center"
useFlexGap
sx={{ flexWrap: "wrap" }}
>
<Link href={"/"} prefetch={false}>
<Button
style={{
color: "var(--icon-color)",
display: "flex",
alignItems: "center",
textTransform: "none",
font: "inherit",
fontWeight: "bold",
}}
>
PyTorch CI HUD
</Button>
</Link>
{leftLinks.map((link) => (
<ButtonLink key={link.name} href={link.href} name={link.name} />
))}
</Stack>
<Stack
direction="row"
spacing={2}
alignItems="center"
useFlexGap
sx={{ flexWrap: "wrap" }}
>
<ButtonLink
href="https://github.com/pytorch/pytorch/wiki/Using-hud.pytorch.org"
name="Help"
/>
<ButtonLink
href="https://github.com/pytorch/test-infra/issues/new?assignees=&labels=&template=feature_request.yaml&title=%5Bfeature%5D%3A+"
name="Requests"
/>
<ButtonLink href="/metrics" name="Metrics" />
<ButtonLink href="/kpis" name="KPIs" />
<HoverDropDownMenu title="Benchmarks ▾">
{benchmarksDropdown.map((item) => (
<MenuItemLink key={item.name} href={item.href} name={item.name} />
))}
</HoverDropDownMenu>
<HoverDropDownMenu title="Dev Infra ▾">
{devInfraDropdown.map((item) => (
<MenuItemLink key={item.name} href={item.href} name={item.name} />
))}
</HoverDropDownMenu>
<Link
href="https://github.com/pytorch/test-infra/tree/main/torchci"
passHref
style={{
color: "var(--icon-color)",
}}
>
<Button style={{ minWidth: "0px" }} color="inherit">
<AiFillGithub />
</Link>
</li>
<li>
<ThemeModePicker />
</li>
<li style={{ padding: "0 1rem" }}>
<LoginSection></LoginSection>
</li>
</ul>
</div>
</Button>
</Link>
<ThemeModePicker />
<Box>
<LoginSection />
</Box>
</Stack>
</Stack>
</div>
);
}
Expand Down
Loading