Skip to content

update the distinct active state for the Job and Job Sets tab #4887

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
YHines004 wants to merge 9 commits into
base: master
Choose a base branch
from
+15 −2
Open

update the distinct active state for the Job and Job Sets tab #4887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bed4ffb
chore: update the active button for the Job and Job Sets tab
YHines004 Apr 28, 2026
78dd193
chore: update the back-ground active state to be a bit darker Signed…
YHines004 Apr 28, 2026
fd79808
Drop failure_info column from job_run table (#4855)
dejanzele Apr 29, 2026
5b5c745
Add hot cold config flag and lookout pruner optimizations (#4885)
dslear Apr 29, 2026
bafe446
Add lookoutingestor metrics to track state changes (#4894)
ianhockett May 1, 2026
60bc2e1
chore: change from hardcoded color
YHines004 May 4, 2026
b48ca09
Merge branch 'master' into fix/Job-JobSets-visual-active-tab
YHines004 May 4, 2026
0dffb18
Merge branch 'master' into fix/Job-JobSets-visual-active-tab
YHines004 May 7, 2026
f70ad1a
chore: update based on comments
YHines004 May 7, 2026
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
9 changes: 9 additions & 0 deletions internal/lookoutui/src/app/NavBar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,15 @@
margin-bottom: 0;
}

.toolbar a.MuiButton-root {
transition: background-color 0.15s ease;
}

.toolbar a.MuiButton-root.active {
background-color: var(--nav-active-bg);
font-weight: bold;
Comment thread
YHines004 marked this conversation as resolved.
}
Comment thread
YHines004 marked this conversation as resolved.

.toolbar .nav-end {
display: flex;
flex-direction: row;
Expand Down
8 changes: 6 additions & 2 deletions internal/lookoutui/src/app/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { forwardRef } from "react"

import { Settings } from "@mui/icons-material"
import { AppBar, Button, IconButton, Stack, styled, Toolbar, Typography } from "@mui/material"
import { alpha, AppBar, Button, IconButton, Stack, styled, Toolbar, Typography } from "@mui/material"
import { Link, NavLink, NavLinkProps } from "react-router-dom"

import { SPACING } from "../common/spacing"
Expand All @@ -18,17 +18,20 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
backgroundColor: theme.palette.appBar.main,
backgroundImage: "unset",
color: theme.palette.appBar.contrastText,
"--nav-active-bg": alpha(theme.palette.appBar.contrastText, 0.33),
}))

interface Page {
title: string
location: string
end?: boolean
}

const PAGES: Page[] = [
{
title: "Jobs",
location: JOBS,
end: true,
},
{
title: "Job Sets",
Expand Down Expand Up @@ -59,14 +62,15 @@ export const NavBar = ({ customTitle }: NavBarProps) => {
</a>
</div>
<Stack direction="row" alignItems="center" spacing={SPACING.sm}>
{PAGES.map(({ location, title }) => (
{PAGES.map(({ location, title, end }) => (
<Button
key={location}
variant="outlined"
color="inherit"
size="large"
component={NavLinkButton}
to={location}
end={end}
>
{title}
</Button>
Expand Down
Loading