Skip to content

Commit e176a27

Browse files
clee2000clee2000
committed
tc
1 parent c624835 commit e176a27

File tree

6 files changed

+234
-301
lines changed

6 files changed

+234
-301
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

+121-101
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,47 @@
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";
8+
import { fontFamily, fontWeight } from "@mui/system";
79

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

34+
const ButtonLink = ({
35+
href,
36+
name,
37+
}: {
38+
href: string;
39+
name: string;
40+
}): JSX.Element => {
1841
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>
42+
<Link href={href} prefetch={false}>
43+
<Button>{name}</Button>
44+
</Link>
3545
);
3646
};
3747

@@ -119,91 +129,101 @@ function NavBar() {
119129
},
120130
];
121131

132+
const leftLinks = [
133+
{
134+
href: "/minihud",
135+
name: "MiniHUD",
136+
},
137+
{
138+
href: "/hud/pytorch/executorch/main",
139+
name: "ExecuTorch",
140+
},
141+
{
142+
href: "/hud/pytorch/vision/main",
143+
name: "TorchVision",
144+
},
145+
{
146+
href: "/hud/pytorch/audio/main",
147+
name: "TorchAudio",
148+
},
149+
];
150+
122151
return (
123152
<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",
153+
<Stack
154+
padding={2}
155+
direction="row"
156+
spacing={2}
157+
sx={{
158+
justifyContent: "space-between",
159159
}}
160160
>
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
161+
<Stack
162+
direction="row"
163+
spacing={2}
164+
alignItems="center"
165+
useFlexGap
166+
sx={{ flexWrap: "wrap" }}
167+
>
168+
<Link href={"/"} prefetch={false}>
169+
<Button
190170
style={{
191-
color: "var(--icon-color)",
192-
display: "flex",
193-
alignItems: "center",
171+
textTransform: "none",
172+
font: "inherit",
173+
fontWeight: "bold",
194174
}}
195175
>
176+
PyTorch CI HUD
177+
</Button>
178+
</Link>
179+
{leftLinks.map((link) => (
180+
<ButtonLink key={link.name} href={link.href} name={link.name} />
181+
))}
182+
</Stack>
183+
<Stack
184+
direction="row"
185+
spacing={2}
186+
alignItems="center"
187+
useFlexGap
188+
sx={{ flexWrap: "wrap" }}
189+
>
190+
<ButtonLink
191+
href="https://github.com/pytorch/pytorch/wiki/Using-hud.pytorch.org"
192+
name="Help"
193+
/>
194+
<ButtonLink
195+
href="https://github.com/pytorch/test-infra/issues/new?assignees=&labels=&template=feature_request.yaml&title=%5Bfeature%5D%3A+"
196+
name="Requests"
197+
/>
198+
<ButtonLink href="/metrics" name="Metrics" />
199+
<ButtonLink href="/kpis" name="KPIs" />
200+
<HoverDropDownMenu title="Benchmarks ▾">
201+
{benchmarksDropdown.map((item) => (
202+
<MenuItemLink key={item.name} href={item.href} name={item.name} />
203+
))}
204+
</HoverDropDownMenu>
205+
<HoverDropDownMenu title="Dev Infra ▾">
206+
{devInfraDropdown.map((item) => (
207+
<MenuItemLink key={item.name} href={item.href} name={item.name} />
208+
))}
209+
</HoverDropDownMenu>
210+
<Link
211+
href="https://github.com/pytorch/test-infra/tree/main/torchci"
212+
passHref
213+
style={{
214+
color: "var(--icon-color)",
215+
}}
216+
>
217+
<Button style={{ minWidth: "0px" }} color="inherit">
196218
<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>
219+
</Button>
220+
</Link>
221+
<ThemeModePicker />
222+
<Box>
223+
<LoginSection />
224+
</Box>
225+
</Stack>
226+
</Stack>
207227
</div>
208228
);
209229
}

0 commit comments

Comments
 (0)