go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-08-24 14:48:42 +08:00
Code Issues Projects Releases Wiki Activity

Fix dark theme styles

Browse Source
This commit is contained in:
Ken Hibino
2021-01-12 16:41:14 -08:00
parent b15fa59cf9
commit e7cfbc6bf7
13 changed files with 307 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ui/src/components/ActiveTasksTable.tsx
View File

@@ -41,11 +41,14 @@ import { ActiveTaskExtended } from "../reducers/tasksReducer";
import { uuidPrefix } from "../utils";
import { TableColumn } from "../types/table";
const useStyles = makeStyles({
const useStyles = makeStyles((theme) => ({
table: {
minWidth: 650,
},
});
stickyHeaderCell: {
background: theme.palette.background.paper,
},
}));
function mapStateToProps(state: AppState) {
return {
@@ -168,7 +171,10 @@ function ActiveTasksTable(props: Props & ReduxProps) {
>
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<TableCell
padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }}
>
<Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
@@ -179,7 +185,11 @@ function ActiveTasksTable(props: Props & ReduxProps) {
/>
</TableCell>
{columns.map((col) => (
<TableCell key={col.key} align={col.align}>
<TableCell
key={col.key}
align={col.align}
classes={{ stickyHeader: classes.stickyHeaderCell }}
>
{col.label}
</TableCell>
))}

18
ui/src/components/ArchivedTasksTable.tsx
View File

@@ -46,11 +46,14 @@ import { usePolling } from "../hooks";
import { ArchivedTaskExtended } from "../reducers/tasksReducer";
import { TableColumn } from "../types/table";
const useStyles = makeStyles({
const useStyles = makeStyles((theme) => ({
table: {
minWidth: 650,
},
});
stickyHeaderCell: {
background: theme.palette.background.paper,
},
}));
const useRowStyles = makeStyles({
root: {
@@ -214,7 +217,10 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
>
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<TableCell
padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }}
>
<Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
@@ -225,7 +231,11 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
/>
</TableCell>
{columns.map((col) => (
<TableCell key={col.key} align={col.align}>
<TableCell
key={col.key}
align={col.align}
classes={{ stickyHeader: classes.stickyHeaderCell }}
>
{col.label}
</TableCell>
))}

13
ui/src/components/PendingTasksTable.tsx
View File

@@ -32,11 +32,14 @@ import { usePolling } from "../hooks";
import { uuidPrefix } from "../utils";
import { TableColumn } from "../types/table";
const useStyles = makeStyles({
const useStyles = makeStyles((theme) => ({
table: {
minWidth: 650,
},
});
stickyHeaderCell: {
background: theme.palette.background.paper,
},
}));
function mapStateToProps(state: AppState) {
return {
@@ -110,7 +113,11 @@ function PendingTasksTable(props: Props & ReduxProps) {
<TableHead>
<TableRow>
{columns.map((col) => (
<TableCell key={col.key} align={col.align}>
<TableCell
key={col.key}
align={col.align}
classes={{ stickyHeader: classes.stickyHeaderCell }}
>
{col.label}
</TableCell>
))}

8
ui/src/components/QueuesOverviewTable.tsx
View File

@@ -27,6 +27,7 @@ const useStyles = makeStyles((theme) => ({
},
linkCell: {
textDecoration: "none",
color: theme.palette.text.primary,
},
footerCell: {
fontWeight: 600,
@@ -40,7 +41,7 @@ const useStyles = makeStyles((theme) => ({
position: "sticky",
zIndex: 1,
left: 0,
background: theme.palette.common.white,
background: theme.palette.background.paper,
},
actionIconsContainer: {
display: "flex",
@@ -211,7 +212,10 @@ export default function QueuesOverviewTable(props: Props) {
scope="row"
className={clsx(classes.boldCell, classes.fixedCell)}
>
<Link to={queueDetailsPath(q.queue)}>
<Link
to={queueDetailsPath(q.queue)}
className={classes.linkCell}
>
{q.queue}
{q.paused ? " (paused)" : ""}
</Link>

18
ui/src/components/RetryTasksTable.tsx
View File

@@ -50,11 +50,14 @@ import { RetryTaskExtended } from "../reducers/tasksReducer";
import clsx from "clsx";
import { TableColumn } from "../types/table";
const useStyles = makeStyles({
const useStyles = makeStyles((theme) => ({
table: {
minWidth: 650,
},
});
stickyHeaderCell: {
background: theme.palette.background.paper,
},
}));
function mapStateToProps(state: AppState) {
return {
@@ -229,7 +232,10 @@ function RetryTasksTable(props: Props & ReduxProps) {
>
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<TableCell
padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }}
>
<Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
@@ -240,7 +246,11 @@ function RetryTasksTable(props: Props & ReduxProps) {
/>
</TableCell>
{columns.map((col) => (
<TableCell key={col.label} align={col.align}>
<TableCell
key={col.label}
align={col.align}
classes={{ stickyHeader: classes.stickyHeaderCell }}
>
{col.label}
</TableCell>
))}

18
ui/src/components/ScheduledTasksTable.tsx
View File

@@ -50,11 +50,14 @@ import { usePolling } from "../hooks";
import { ScheduledTaskExtended } from "../reducers/tasksReducer";
import { TableColumn } from "../types/table";
const useStyles = makeStyles({
const useStyles = makeStyles((theme) => ({
table: {
minWidth: 650,
},
});
stickyHeaderCell: {
background: theme.palette.background.paper,
},
}));
function mapStateToProps(state: AppState) {
return {
@@ -226,7 +229,10 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
>
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<TableCell
padding="checkbox"
classes={{ stickyHeader: classes.stickyHeaderCell }}
>
<Checkbox
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
@@ -237,7 +243,11 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
/>
</TableCell>
{columns.map((col) => (
<TableCell key={col.label} align={col.align}>
<TableCell
key={col.label}
align={col.align}
classes={{ stickyHeader: classes.stickyHeaderCell }}
>
{col.label}
</TableCell>
))}

29
ui/src/components/ServersTable.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
import { makeStyles, useTheme, Theme } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import Collapse from "@material-ui/core/Collapse";
@@ -19,7 +19,8 @@ import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import SyntaxHighlighter from "react-syntax-highlighter";
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
import syntaxHighlightStyleDark from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark";
import syntaxHighlightStyleLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light";
import { ServerInfo } from "../api";
import { SortDirection, SortableTableColumn } from "../types/table";
import { timeAgo, uuidPrefix } from "../utils";
@@ -34,7 +35,7 @@ const useStyles = makeStyles((theme) => ({
position: "sticky",
zIndex: 1,
left: 0,
background: theme.palette.common.white,
background: theme.palette.background.paper,
},
}));
@@ -208,10 +209,15 @@ const useRowStyles = makeStyles((theme) => ({
noBorder: {
border: "none",
},
link: {
color: theme.palette.text.primary,
},
}));
function Row(props: RowProps) {
const classes = useRowStyles();
const theme = useTheme<Theme>();
const isDarkTheme = theme.palette.type === "dark";
const { server } = props;
const [open, setOpen] = useState<boolean>(false);
const qnames = Object.keys(server.queue_priorities);
@@ -226,7 +232,9 @@ function Row(props: RowProps) {
<TableCell>
{qnames.map((qname, idx) => (
<span key={qname}>
<Link to={queueDetailsPath(qname)}>{qname}</Link>
<Link to={queueDetailsPath(qname)} className={classes.link}>
{qname}
</Link>
{idx === qnames.length - 1 ? "" : ", "}
</span>
))}
@@ -276,7 +284,11 @@ function Row(props: RowProps) {
<TableCell>
<SyntaxHighlighter
language="json"
style={syntaxHighlightStyle}
style={
isDarkTheme
? syntaxHighlightStyleDark
: syntaxHighlightStyleLight
}
customStyle={{ margin: 0 }}
>
{JSON.stringify(worker.task.payload)}
@@ -308,7 +320,12 @@ function Row(props: RowProps) {
{qnames.map((qname) => (
<TableRow key={qname}>
<TableCell>
<Link to={queueDetailsPath(qname)}>{qname}</Link>
<Link
to={queueDetailsPath(qname)}
className={classes.link}
>
{qname}
</Link>
</TableCell>
<TableCell align="right">
{server.queue_priorities[qname]}

174
ui/src/components/TasksTable.tsx
View File

@@ -1,9 +1,10 @@
import React from "react";
import { connect, ConnectedProps } from "react-redux";
import styled from "styled-components";
import { makeStyles } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
import ActiveTasksTable from "./ActiveTasksTable";
import PendingTasksTable from "./PendingTasksTable";
import ScheduledTasksTable from "./ScheduledTasksTable";
@@ -11,8 +12,6 @@ import RetryTasksTable from "./RetryTasksTable";
import ArchivedTasksTable from "./ArchivedTasksTable";
import { useHistory } from "react-router-dom";
import { queueDetailsPath } from "../paths";
import { Typography } from "@material-ui/core";
import Paper from "@material-ui/core/Paper/Paper";
import { QueueInfo } from "../reducers/queuesReducer";
import { AppState } from "../store";
@@ -22,24 +21,20 @@ interface TabPanelProps {
value: string; // tab panel will be shown if selected value equals to the value
}
const TabPanelRoot = styled.div`
flex: 1;
overflow-y: scroll;
`;
function TabPanel(props: TabPanelProps) {
const { children, value, selected, ...other } = props;
return (
<TabPanelRoot
<div
role="tabpanel"
hidden={value !== selected}
id={`scrollable-auto-tabpanel-${selected}`}
aria-labelledby={`scrollable-auto-tab-${selected}`}
style={{ flex: 1, overflowY: "scroll" }}
{...other}
>
{value === selected && children}
</TabPanelRoot>
</div>
);
}
@@ -50,67 +45,13 @@ function a11yProps(value: string) {
};
}
const Container = styled.div`
display: flex;
width: 100%;
height: 100%;
`;
const TaskCount = styled.div`
font-size: 2rem;
font-weight: 600;
margin: 0;
`;
const Heading = styled.div`
opacity: 0.7;
font-size: 1.7rem;
font-weight: 500;
background: #f5f7f9;
padding-left: 28px;
padding-top: 28px;
padding-bottom: 28px;
`;
const PanelContainer = styled.div`
padding: 24px;
background: #ffffff;
`;
const TabsContainer = styled.div`
background: #f5f7f9;
`;
const useStyles = makeStyles((theme) => ({
const usePanelHeadingStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(2),
marginBottom: theme.spacing(2),
display: "flex",
justifyContent: "space-between",
},
heading: {
padingLeft: theme.spacing(2),
},
tabsRoot: {
paddingLeft: theme.spacing(2),
background: theme.palette.background.default,
},
tabsIndicator: {
right: "auto",
left: "0",
},
tabroot: {
width: "204px",
textAlign: "left",
padding: theme.spacing(2),
},
tabwrapper: {
alignItems: "flex-start",
},
tabSelected: {
background: theme.palette.common.white,
boxShadow: theme.shadows[1],
},
}));
function PanelHeading(props: {
@@ -119,9 +60,9 @@ function PanelHeading(props: {
failed: number;
paused: boolean;
}) {
const classes = useStyles();
const classes = usePanelHeadingStyles();
return (
<Paper className={classes.paper}>
<Paper variant="outlined" className={classes.paper}>
<div>
<Typography variant="overline" display="block">
Queue Name
@@ -183,15 +124,66 @@ interface Props {
selected: string;
}
const useStyles = makeStyles((theme) => ({
container: {
display: "flex",
width: "100%",
height: "100%",
},
heading: {
opacity: 0.7,
fontSize: "1.7rem",
fontWeight: 500,
backgroundColor: theme.palette.background.paper,
paddingLeft: "28px", // TODO: maybe use theme.spacing(3),
paddingTop: "28px",
paddingBottom: "28px",
color: theme.palette.text.primary,
},
tabsContainer: {
background: theme.palette.background.paper,
},
tabsRoot: {
paddingLeft: theme.spacing(2),
background: theme.palette.background.paper,
},
tabsIndicator: {
right: "auto",
left: "0",
},
tabroot: {
width: "204px",
textAlign: "left",
padding: theme.spacing(2),
},
tabwrapper: {
alignItems: "flex-start",
color: theme.palette.text.primary,
},
tabSelected: {
background: theme.palette.action.selected,
boxShadow: theme.shadows[1],
},
panelContainer: {
padding: "24px",
background: theme.palette.background.paper,
},
taskCount: {
fontSize: "2rem",
fontWeight: 600,
margin: 0,
},
}));
function TasksTable(props: Props & ReduxProps) {
const { currentStats } = props;
const classes = useStyles();
const history = useHistory();
return (
<Container>
<TabsContainer>
<Heading>Tasks</Heading>
<div className={classes.container}>
<div className={classes.tabsContainer}>
<div className={classes.heading}>Tasks</div>
<Tabs
value={props.selected}
onChange={(_, value: string) =>
@@ -204,7 +196,9 @@ function TasksTable(props: Props & ReduxProps) {
<Tab
value="active"
label="Active"
icon={<TaskCount>{currentStats.active}</TaskCount>}
icon={
<div className={classes.taskCount}>{currentStats.active}</div>
}
classes={{
root: classes.tabroot,
wrapper: classes.tabwrapper,
@@ -215,7 +209,9 @@ function TasksTable(props: Props & ReduxProps) {
<Tab
value="pending"
label="Pending"
icon={<TaskCount>{currentStats.pending}</TaskCount>}
icon={
<div className={classes.taskCount}>{currentStats.pending}</div>
}
classes={{
root: classes.tabroot,
wrapper: classes.tabwrapper,
@@ -226,7 +222,9 @@ function TasksTable(props: Props & ReduxProps) {
<Tab
value="scheduled"
label="Scheduled"
icon={<TaskCount>{currentStats.scheduled}</TaskCount>}
icon={
<div className={classes.taskCount}>{currentStats.scheduled}</div>
}
classes={{
root: classes.tabroot,
wrapper: classes.tabwrapper,
@@ -237,7 +235,7 @@ function TasksTable(props: Props & ReduxProps) {
<Tab
value="retry"
label="Retry"
icon={<TaskCount>{currentStats.retry}</TaskCount>}
icon={<div className={classes.taskCount}>{currentStats.retry}</div>}
classes={{
root: classes.tabroot,
wrapper: classes.tabwrapper,
@@ -248,7 +246,9 @@ function TasksTable(props: Props & ReduxProps) {
<Tab
value="archived"
label="Archived"
icon={<TaskCount>{currentStats.archived}</TaskCount>}
icon={
<div className={classes.taskCount}>{currentStats.archived}</div>
}
classes={{
root: classes.tabroot,
wrapper: classes.tabwrapper,
@@ -257,9 +257,9 @@ function TasksTable(props: Props & ReduxProps) {
{...a11yProps("archived")}
/>
</Tabs>
</TabsContainer>
</div>
<TabPanel value="active" selected={props.selected}>
<PanelContainer>
<div className={classes.panelContainer}>
<PanelHeading
queue={props.queue}
processed={currentStats.processed}
@@ -267,10 +267,10 @@ function TasksTable(props: Props & ReduxProps) {
paused={currentStats.paused}
/>
<ActiveTasksTable queue={props.queue} />
</PanelContainer>
</div>
</TabPanel>
<TabPanel value="pending" selected={props.selected}>
<PanelContainer>
<div className={classes.panelContainer}>
<PanelHeading
queue={props.queue}
processed={currentStats.processed}
@@ -281,10 +281,10 @@ function TasksTable(props: Props & ReduxProps) {
queue={props.queue}
totalTaskCount={currentStats.pending}
/>
</PanelContainer>
</div>
</TabPanel>
<TabPanel value="scheduled" selected={props.selected}>
<PanelContainer>
<div className={classes.panelContainer}>
<PanelHeading
queue={props.queue}
processed={currentStats.processed}
@@ -295,10 +295,10 @@ function TasksTable(props: Props & ReduxProps) {
queue={props.queue}
totalTaskCount={currentStats.scheduled}
/>
</PanelContainer>
</div>
</TabPanel>
<TabPanel value="retry" selected={props.selected}>
<PanelContainer>
<div className={classes.panelContainer}>
<PanelHeading
queue={props.queue}
processed={currentStats.processed}
@@ -309,10 +309,10 @@ function TasksTable(props: Props & ReduxProps) {
queue={props.queue}
totalTaskCount={currentStats.retry}
/>
</PanelContainer>
</div>
</TabPanel>
<TabPanel value="archived" selected={props.selected}>
<PanelContainer>
<div className={classes.panelContainer}>
<PanelHeading
queue={props.queue}
processed={currentStats.processed}
@@ -323,9 +323,9 @@ function TasksTable(props: Props & ReduxProps) {
queue={props.queue}
totalTaskCount={currentStats.archived}
/>
</PanelContainer>
</div>
</TabPanel>
</Container>
</div>
);
}