go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-01-19 03:05:53 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/package.json
View File

@ -19,7 +19,6 @@
"@types/react-router-dom": "5.1.6",
"@types/react-syntax-highlighter": "13.5.0",
"@types/recharts": "1.8.16",
"@types/styled-components": "5.1.4",
"axios": "0.20.0",
"clsx": "1.1.1",
"lodash.uniqby": "4.7.0",
@ -31,7 +30,6 @@
"react-scripts": "3.4.3",
"react-syntax-highlighter": "15.3.0",
"recharts": "1.8.5",
"styled-components": "5.2.0",
"typescript": "~3.7.2"
},
"scripts": {

179
ui/src/App.tsx
View File

@ -2,7 +2,7 @@ import React, { useState } from "react";
import { connect, ConnectedProps } from "react-redux";
import clsx from "clsx";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { makeStyles, ThemeProvider } from "@material-ui/core/styles";
import { makeStyles, Theme, ThemeProvider } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Drawer from "@material-ui/core/Drawer";
import Toolbar from "@material-ui/core/Toolbar";
@ -39,91 +39,94 @@ import PageNotFoundView from "./views/PageNotFoundView";
const drawerWidth = 220;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "0 8px",
...theme.mixins.toolbar,
},
appBar: {
backgroundColor: theme.palette.background.paper,
zIndex: theme.zIndex.drawer + 1,
},
menuButton: {
marginRight: theme.spacing(2),
color: theme.palette.grey[700],
},
menuButtonHidden: {
display: "none",
},
title: {
flexGrow: 1,
color: theme.palette.grey[800],
},
drawerPaper: {
position: "relative",
whiteSpace: "nowrap",
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
border: "none",
},
drawerPaperClose: {
overflowX: "hidden",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing(7),
[theme.breakpoints.up("sm")]: {
width: theme.spacing(9),
// FIXME: For some reason, the following code does not work:
// makeStyles(theme => ({ /* use theme here */}));
// Using closure to work around this problem.
const useStyles = (theme: Theme) =>
makeStyles({
root: {
display: "flex",
},
},
snackbar: {
background: theme.palette.grey["A400"],
color: "#ffffff",
},
snackbarCloseIcon: {
color: theme.palette.grey[400],
},
appBarSpacer: theme.mixins.toolbar,
mainContainer: {
display: "flex",
width: "100vw",
},
content: {
flex: 1,
height: "100vh",
overflow: "hidden",
background: "#ffffff",
},
contentWrapper: {
height: "100%",
display: "flex",
paddingTop: "64px", // app-bar height
overflow: "scroll",
},
sidebarContainer: {
display: "flex",
justifyContent: "space-between",
height: "100%",
flexDirection: "column",
},
listItem: {
borderTopRightRadius: "24px",
borderBottomRightRadius: "24px",
},
}));
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "0 8px",
...theme.mixins.toolbar,
},
appBar: {
backgroundColor: theme.palette.background.paper,
zIndex: theme.zIndex.drawer + 1,
},
menuButton: {
marginRight: theme.spacing(2),
color: theme.palette.grey[700],
},
menuButtonHidden: {
display: "none",
},
title: {
flexGrow: 1,
},
drawerPaper: {
position: "relative",
whiteSpace: "nowrap",
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
border: "none",
},
drawerPaperClose: {
overflowX: "hidden",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing(7),
[theme.breakpoints.up("sm")]: {
width: theme.spacing(9),
},
},
snackbar: {
background: theme.palette.grey["A400"],
color: "#ffffff",
},
snackbarCloseIcon: {
color: theme.palette.grey[400],
},
appBarSpacer: theme.mixins.toolbar,
mainContainer: {
display: "flex",
width: "100vw",
},
content: {
flex: 1,
height: "100vh",
overflow: "hidden",
background: theme.palette.background.paper,
},
contentWrapper: {
height: "100%",
display: "flex",
paddingTop: "64px", // app-bar height
overflow: "scroll",
},
sidebarContainer: {
display: "flex",
justifyContent: "space-between",
height: "100%",
flexDirection: "column",
},
listItem: {
borderTopRightRadius: "24px",
borderBottomRightRadius: "24px",
},
});
function mapStateToProps(state: AppState) {
return {
@ -143,10 +146,10 @@ function SlideUpTransition(props: TransitionProps) {
}
function App(props: ConnectedProps<typeof connector>) {
const classes = useStyles();
const theme = makeTheme(props.isDarkTheme);
const classes = useStyles(theme)();
const [open, setOpen] = useState(true);
const toggleDrawer = () => setOpen(!open);
const theme = makeTheme(props.isDarkTheme);
return (
<ThemeProvider theme={theme}>
<Router>
@ -169,9 +172,9 @@ function App(props: ConnectedProps<typeof connector>) {
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
color="textPrimary"
>
Asynq Monitoring
</Typography>

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>
);
}

19
ui/src/reducers/settingsReducer.ts
View File

@ -1,4 +1,8 @@
import {POLL_INTERVAL_CHANGE, SettingsActionTypes, TOGGLE_DARK_THEME,} from '../actions/settingsActions';
import {
POLL_INTERVAL_CHANGE,
SettingsActionTypes,
TOGGLE_DARK_THEME,
} from "../actions/settingsActions";
interface SettingsState {
pollInterval: number;
@ -7,18 +11,21 @@ interface SettingsState {
const initialState: SettingsState = {
pollInterval: 8,
isDarkTheme: false,
isDarkTheme: true,
};
function settingsReducer(
state = initialState, action: SettingsActionTypes): SettingsState {
state = initialState,
action: SettingsActionTypes
): SettingsState {
switch (action.type) {
case POLL_INTERVAL_CHANGE:
return {...state, pollInterval: action.value};
return { ...state, pollInterval: action.value };
case TOGGLE_DARK_THEME:
return {
...state, isDarkTheme: !state.isDarkTheme
}
...state,
isDarkTheme: !state.isDarkTheme,
};
default:
return state;
}

22
ui/src/views/RedisInfoView.tsx
View File

@ -9,7 +9,8 @@ import CardContent from "@material-ui/core/CardContent";
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 { getRedisInfoAsync } from "../actions/redisInfoActions";
import { usePolling } from "../hooks";
import { AppState } from "../store";
@ -30,6 +31,7 @@ function mapStateToProps(state: AppState) {
redisAddress: state.redis.address,
redisInfoRaw: state.redis.rawData,
pollInterval: state.settings.pollInterval,
isDarkTheme: state.settings.isDarkTheme,
};
}
@ -38,7 +40,13 @@ type Props = ConnectedProps<typeof connector>;
function RedisInfoView(props: Props) {
const classes = useStyles();
const { pollInterval, getRedisInfoAsync, redisInfo, redisInfoRaw } = props;
const {
pollInterval,
getRedisInfoAsync,
redisInfo,
redisInfoRaw,
isDarkTheme,
} = props;
usePolling(getRedisInfoAsync, pollInterval);
@ -56,7 +64,9 @@ function RedisInfoView(props: Props) {
{props.error === "" ? (
<>
<Grid item xs={12}>
<Typography variant="h5">Redis Info</Typography>
<Typography variant="h5" color="textPrimary">
Redis Info
</Typography>
<Typography variant="subtitle1" color="textSecondary">
Connected to: {props.redisAddress}
</Typography>
@ -153,7 +163,11 @@ function RedisInfoView(props: Props) {
</Typography>
<SyntaxHighlighter
language="yaml"
style={syntaxHighlightStyle}
style={
isDarkTheme
? syntaxHighlightStyleDark
: syntaxHighlightStyleLight
}
>
{redisInfoRaw}
</SyntaxHighlighter>

4
ui/src/views/SettingsView.tsx
View File

@ -60,7 +60,9 @@ function SettingsView(props: PropsFromRedux) {
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Typography variant="h5">Settings</Typography>
<Typography variant="h5" color="textPrimary">
Settings
</Typography>
</Grid>
<Grid item xs={5}>
<Paper className={classes.paper} variant="outlined">