Skip to content

Commit f45ae28

Browse files
clee2000clee2000
committed
tc
1 parent c624835 commit f45ae28

File tree

6 files changed

+233
-303
lines changed

6 files changed

+233
-303
lines changed

‎torchci/components/LoginSection.tsx

+18-24
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
22
import SyncIcon from "@mui/icons-material/Sync";
3-
import { Button as _Button, Menu, MenuItem } from "@mui/material";
3+
import { Button as _Button, MenuItem } from "@mui/material";
44
import { signIn, signOut, useSession } from "next-auth/react";
55
import Link from "next/link";
6-
import React from "react";
6+
import { HoverDropDownMenu } from "./common/HoverDropDownMenu";
77
import styles from "./LoginSection.module.css";
88

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

1414
export default function LoginSection() {
1515
const { data: session, status } = useSession();
16-
const [anchorEl, setAnchorEl] = React.useState(null);
17-
const onClick = (event: any) => {
18-
setAnchorEl(event.currentTarget);
19-
};
20-
const onClose = () => {
21-
setAnchorEl(null);
22-
};
2316

2417
return (
2518
<>
@@ -42,20 +35,21 @@ export default function LoginSection() {
4235
)}
4336
{session && (
4437
<>
45-
<Button onClick={onClick}>
46-
{session.user?.image ? (
47-
<img
48-
style={{
49-
backgroundImage: `url('${session.user.image}')`,
50-
}}
51-
className={styles.avatar}
52-
/>
53-
) : (
54-
// Hopefully shouldn't get here
55-
<QuestionMarkIcon fontSize="inherit" />
56-
)}
57-
</Button>
58-
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={onClose}>
38+
<HoverDropDownMenu
39+
title={
40+
session.user?.image ? (
41+
<img
42+
style={{
43+
backgroundImage: `url('${session.user.image}')`,
44+
}}
45+
className={styles.avatar}
46+
/>
47+
) : (
48+
// Hopefully shouldn't get here
49+
<QuestionMarkIcon fontSize="inherit" />
50+
)
51+
}
52+
>
5953
{session.user?.name && (
6054
<MenuItem>Signed in as {session.user.name}</MenuItem>
6155
)}
@@ -68,7 +62,7 @@ export default function LoginSection() {
6862
>
6963
<MenuItem>Sign out</MenuItem>
7064
</Link>
71-
</Menu>
65+
</HoverDropDownMenu>
7266
</>
7367
)}
7468
</>

‎torchci/components/NavBar.module.css

-62
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,8 @@
11
.navbar {
2-
display: flex;
3-
padding: 0 1rem;
4-
font: bold;
52
background: var(--navbar-bg);
63
box-shadow: var(--navbar-shadow);
7-
width: 100%;
8-
min-height: 60px;
9-
align-items: center;
10-
}
11-
12-
.navbar li {
13-
padding: 0.9rem 1rem;
14-
position: relative;
15-
z-index: 9999;
16-
display: flex;
17-
align-items: center;
184
}
195

206
.navbar a {
21-
display: block;
22-
}
23-
24-
.navbar span {
25-
padding: 0;
26-
margin: 0;
27-
}
28-
29-
.navbar ul {
30-
list-style: none;
31-
}
32-
33-
.navbar {
34-
margin: 0;
357
z-index: 100;
368
}
37-
38-
.navbarlinkslist {
39-
display: flex;
40-
align-items: center;
41-
flex-wrap: wrap;
42-
margin: 0;
43-
padding: 0;
44-
height: 100%;
45-
}
46-
47-
.homeLink {
48-
font-weight: bold;
49-
padding-right: 10px;
50-
}
51-
52-
.dropdowntitle {
53-
padding: 0.7rem 1rem;
54-
cursor: pointer;
55-
display: flex;
56-
align-items: center;
57-
}
58-
59-
.dropdown {
60-
position: absolute;
61-
top: 100%;
62-
left: 0;
63-
box-shadow: var(--dropdown-shadow);
64-
z-index: 9999;
65-
min-width: 12rem;
66-
padding: 0.5rem 0;
67-
background-color: var(--dropdown-bg);
68-
display: none;
69-
border-radius: 4px;
70-
}

‎torchci/components/NavBar.tsx

+120-101
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,46 @@
1+
import { Button as _Button, Box, MenuItem, Stack } from "@mui/material";
12
import styles from "components/NavBar.module.css";
23
import Link from "next/link";
3-
import { useState } from "react";
44
import { AiFillGithub } from "react-icons/ai";
55
import LoginSection from "./LoginSection";
66
import ThemeModePicker from "./ThemeModePicker";
7+
import { HoverDropDownMenu } from "./common/HoverDropDownMenu";
78

8-
const NavBarDropdown = ({
9-
title,
10-
items,
9+
const MenuItemLink = ({
10+
href,
11+
name,
1112
}: {
12-
title: string;
13-
items: any;
13+
href: string;
14+
name: string;
1415
}): JSX.Element => {
15-
const [dropdown, setDropdown] = useState(false);
16-
const dropdownStyle = dropdown ? { display: "block" } : {};
16+
return (
17+
<Link href={href} prefetch={false}>
18+
<MenuItem>{name}</MenuItem>
19+
</Link>
20+
);
21+
};
22+
23+
const Button = (props: any) => {
24+
// Make button as small as possible
25+
return (
26+
<_Button
27+
style={{ minWidth: 0, textTransform: "none", font: "inherit" }}
28+
{...props}
29+
/>
30+
);
31+
};
1732

33+
const ButtonLink = ({
34+
href,
35+
name,
36+
}: {
37+
href: string;
38+
name: string;
39+
}): JSX.Element => {
1840
return (
19-
<li
20-
onMouseEnter={() => setDropdown(true)}
21-
onMouseLeave={() => setDropdown(false)}
22-
style={{ padding: 0 }}
23-
>
24-
<div className={styles.dropdowntitle}>{title} ▾</div>
25-
<ul className={styles.dropdown} style={dropdownStyle}>
26-
{items.map((item: any) => (
27-
<li key={item.href}>
28-
<Link href={item.href} prefetch={false}>
29-
{item.name}
30-
</Link>
31-
</li>
32-
))}
33-
</ul>
34-
</li>
41+
<Link href={href} prefetch={false}>
42+
<Button>{name}</Button>
43+
</Link>
3544
);
3645
};
3746

@@ -119,91 +128,101 @@ function NavBar() {
119128
},
120129
];
121130

131+
const leftLinks = [
132+
{
133+
href: "/minihud",
134+
name: "MiniHUD",
135+
},
136+
{
137+
href: "/hud/pytorch/executorch/main",
138+
name: "ExecuTorch",
139+
},
140+
{
141+
href: "/hud/pytorch/vision/main",
142+
name: "TorchVision",
143+
},
144+
{
145+
href: "/hud/pytorch/audio/main",
146+
name: "TorchAudio",
147+
},
148+
];
149+
122150
return (
123151
<div className={styles.navbar}>
124-
<div>
125-
<ul className={styles.navbarlinkslist}>
126-
<li className={styles.homeLink}>
127-
<Link prefetch={false} href="/">
128-
PyTorch CI HUD
129-
</Link>
130-
</li>
131-
<li>
132-
<Link prefetch={false} href="/minihud">
133-
MiniHUD
134-
</Link>
135-
</li>
136-
<li>
137-
<Link prefetch={false} href="/hud/pytorch/executorch/main">
138-
ExecuTorch
139-
</Link>
140-
</li>
141-
<li>
142-
<Link prefetch={false} href="/hud/pytorch/vision/main">
143-
TorchVision
144-
</Link>
145-
</li>
146-
<li>
147-
<Link prefetch={false} href="/hud/pytorch/audio/main">
148-
TorchAudio
149-
</Link>
150-
</li>
151-
</ul>
152-
</div>
153-
<div
154-
style={{
155-
marginLeft: "auto",
156-
marginRight: "0px",
157-
display: "flex",
158-
alignItems: "center",
152+
<Stack
153+
padding={2}
154+
direction="row"
155+
spacing={2}
156+
sx={{
157+
justifyContent: "space-between",
159158
}}
160159
>
161-
<ul className={styles.navbarlinkslist}>
162-
<li>
163-
<Link href="https://github.com/pytorch/pytorch/wiki/Using-hud.pytorch.org">
164-
Help
165-
</Link>
166-
</li>
167-
<li>
168-
<Link href="https://github.com/pytorch/test-infra/issues/new?assignees=&labels=&template=feature_request.yaml&title=%5Bfeature%5D%3A+">
169-
Requests
170-
</Link>
171-
</li>
172-
<li>
173-
<Link prefetch={false} href="/metrics">
174-
Metrics
175-
</Link>
176-
</li>
177-
<li>
178-
<Link prefetch={false} href="/kpis">
179-
KPIs
180-
</Link>
181-
</li>
182-
<NavBarDropdown title="Benchmarks" items={benchmarksDropdown} />
183-
<NavBarDropdown title="Dev Infra" items={devInfraDropdown} />
184-
<li
185-
style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
186-
>
187-
<Link
188-
href="https://github.com/pytorch/test-infra/tree/main/torchci"
189-
passHref
160+
<Stack
161+
direction="row"
162+
spacing={2}
163+
alignItems="center"
164+
useFlexGap
165+
sx={{ flexWrap: "wrap" }}
166+
>
167+
<Link href={"/"} prefetch={false}>
168+
<Button
190169
style={{
191-
color: "var(--icon-color)",
192-
display: "flex",
193-
alignItems: "center",
170+
textTransform: "none",
171+
font: "inherit",
172+
fontWeight: "bold",
194173
}}
195174
>
175+
PyTorch CI HUD
176+
</Button>
177+
</Link>
178+
{leftLinks.map((link) => (
179+
<ButtonLink key={link.name} href={link.href} name={link.name} />
180+
))}
181+
</Stack>
182+
<Stack
183+
direction="row"
184+
spacing={2}
185+
alignItems="center"
186+
useFlexGap
187+
sx={{ flexWrap: "wrap" }}
188+
>
189+
<ButtonLink
190+
href="https://github.com/pytorch/pytorch/wiki/Using-hud.pytorch.org"
191+
name="Help"
192+
/>
193+
<ButtonLink
194+
href="https://github.com/pytorch/test-infra/issues/new?assignees=&labels=&template=feature_request.yaml&title=%5Bfeature%5D%3A+"
195+
name="Requests"
196+
/>
197+
<ButtonLink href="/metrics" name="Metrics" />
198+
<ButtonLink href="/kpis" name="KPIs" />
199+
<HoverDropDownMenu title="Benchmarks ▾">
200+
{benchmarksDropdown.map((item) => (
201+
<MenuItemLink key={item.name} href={item.href} name={item.name} />
202+
))}
203+
</HoverDropDownMenu>
204+
<HoverDropDownMenu title="Dev Infra ▾">
205+
{devInfraDropdown.map((item) => (
206+
<MenuItemLink key={item.name} href={item.href} name={item.name} />
207+
))}
208+
</HoverDropDownMenu>
209+
<Link
210+
href="https://github.com/pytorch/test-infra/tree/main/torchci"
211+
passHref
212+
style={{
213+
color: "var(--icon-color)",
214+
}}
215+
>
216+
<Button style={{ minWidth: "0px" }} color="inherit">
196217
<AiFillGithub />
197-
</Link>
198-
</li>
199-
<li>
200-
<ThemeModePicker />
201-
</li>
202-
<li style={{ padding: "0 1rem" }}>
203-
<LoginSection></LoginSection>
204-
</li>
205-
</ul>
206-
</div>
218+
</Button>
219+
</Link>
220+
<ThemeModePicker />
221+
<Box>
222+
<LoginSection />
223+
</Box>
224+
</Stack>
225+
</Stack>
207226
</div>
208227
);
209228
}

0 commit comments

Comments
 (0)