mirror of
https://github.com/hibiken/asynqmon.git
synced 2025-08-24 14:48:42 +08:00
Show error alert when data is not available
This commit is contained in:
Ken Hibino
@@ -6,6 +6,8 @@ import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import InfoIcon from "@material-ui/icons/Info";
|
||||
import Alert from "@material-ui/lab/Alert";
|
||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
||||
import {
|
||||
listQueuesAsync,
|
||||
pauseQueueAsync,
|
||||
@@ -67,6 +69,7 @@ function mapStateToProps(state: AppState) {
|
||||
...q.currentStats,
|
||||
requestPending: q.requestPending,
|
||||
})),
|
||||
error: state.queues.error,
|
||||
pollInterval: state.settings.pollInterval,
|
||||
queueStats: state.queueStats.data,
|
||||
};
|
||||
@@ -115,6 +118,15 @@ function DashboardView(props: Props) {
|
||||
return (
|
||||
<Container maxWidth="lg" className={classes.container}>
|
||||
<Grid container spacing={3}>
|
||||
{props.error.length > 0 && (
|
||||
<Grid item xs={12}>
|
||||
<Alert severity="error">
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
Could not retreive queues live data —{" "}
|
||||
<strong>See the logs for details</strong>
|
||||
</Alert>
|
||||
</Grid>
|
||||
)}
|
||||
<Grid item xs={6}>
|
||||
<Paper className={classes.paper} variant="outlined">
|
||||
<div className={classes.chartHeader}>
|
||||
|
||||
@@ -6,6 +6,8 @@ import Grid from "@material-ui/core/Grid";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Card from "@material-ui/core/Card";
|
||||
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 { getRedisInfoAsync } from "../actions/redisInfoActions";
|
||||
@@ -23,6 +25,7 @@ const useStyles = makeStyles((theme) => ({
|
||||
function mapStateToProps(state: AppState) {
|
||||
return {
|
||||
loading: state.redis.loading,
|
||||
error: state.redis.error,
|
||||
redisInfo: state.redis.data,
|
||||
redisAddress: state.redis.address,
|
||||
redisInfoRaw: state.redis.rawData,
|
||||
@@ -50,102 +53,122 @@ function RedisInfoView(props: Props) {
|
||||
return (
|
||||
<Container maxWidth="lg" className={classes.container}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h5">Redis Info</Typography>
|
||||
<Typography variant="subtitle1" color="textSecondary">
|
||||
Connected to: {props.redisAddress}
|
||||
</Typography>
|
||||
</Grid>
|
||||
{redisInfo !== null && (
|
||||
{props.error === "" ? (
|
||||
<>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6" color="textSecondary">
|
||||
Server
|
||||
<Typography variant="h5">Redis Info</Typography>
|
||||
<Typography variant="subtitle1" color="textSecondary">
|
||||
Connected to: {props.redisAddress}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard title="Version" content={redisInfo.redis_version} />
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Uptime"
|
||||
content={`${redisInfo.uptime_in_days} days`}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} />
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6" color="textSecondary">
|
||||
Memory
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Used Memory"
|
||||
content={redisInfo.used_memory_human}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Peak Memory Used"
|
||||
content={redisInfo.used_memory_peak_human}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Memory Fragmentation Ratio"
|
||||
content={redisInfo.mem_fragmentation_ratio}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3} />
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6" color="textSecondary">
|
||||
Connections
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Connected Clients"
|
||||
content={redisInfo.connected_clients}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Connected Replicas"
|
||||
content={redisInfo.connected_slaves}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} />
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6" color="textSecondary">
|
||||
Persistence
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Last Save to Disk"
|
||||
content={timeAgoUnix(parseInt(redisInfo.rdb_last_save_time))}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Number of Changes Since Last Dump"
|
||||
content={redisInfo.rdb_changes_since_last_save}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} />
|
||||
</>
|
||||
)}
|
||||
{redisInfoRaw !== null && (
|
||||
<>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="h6" color="textSecondary">
|
||||
INFO Command Output
|
||||
</Typography>
|
||||
<SyntaxHighlighter language="yaml" style={syntaxHighlightStyle}>
|
||||
{redisInfoRaw}
|
||||
</SyntaxHighlighter>
|
||||
</Grid>
|
||||
{redisInfo !== null && (
|
||||
<>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6" color="textSecondary">
|
||||
Server
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Version"
|
||||
content={redisInfo.redis_version}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Uptime"
|
||||
content={`${redisInfo.uptime_in_days} days`}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} />
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6" color="textSecondary">
|
||||
Memory
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Used Memory"
|
||||
content={redisInfo.used_memory_human}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Peak Memory Used"
|
||||
content={redisInfo.used_memory_peak_human}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Memory Fragmentation Ratio"
|
||||
content={redisInfo.mem_fragmentation_ratio}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3} />
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6" color="textSecondary">
|
||||
Connections
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Connected Clients"
|
||||
content={redisInfo.connected_clients}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Connected Replicas"
|
||||
content={redisInfo.connected_slaves}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} />
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h6" color="textSecondary">
|
||||
Persistence
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Last Save to Disk"
|
||||
content={timeAgoUnix(
|
||||
parseInt(redisInfo.rdb_last_save_time)
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<MetricCard
|
||||
title="Number of Changes Since Last Dump"
|
||||
content={redisInfo.rdb_changes_since_last_save}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} />
|
||||
</>
|
||||
)}
|
||||
{redisInfoRaw !== null && (
|
||||
<>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="h6" color="textSecondary">
|
||||
INFO Command Output
|
||||
</Typography>
|
||||
<SyntaxHighlighter
|
||||
language="yaml"
|
||||
style={syntaxHighlightStyle}
|
||||
>
|
||||
{redisInfoRaw}
|
||||
</SyntaxHighlighter>
|
||||
</Grid>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Grid item xs={12}>
|
||||
<Alert severity="error">
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
Could not retreive redis live data —{" "}
|
||||
<strong>See the logs for details</strong>
|
||||
</Alert>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</Container>
|
||||
|
||||
@@ -6,6 +6,8 @@ import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import SchedulerEntriesTable from "../components/SchedulerEntriesTable";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Alert from "@material-ui/lab/Alert";
|
||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
||||
import { AppState } from "../store";
|
||||
import { listSchedulerEntriesAsync } from "../actions/schedulerEntriesActions";
|
||||
import { usePolling } from "../hooks";
|
||||
@@ -30,6 +32,7 @@ const useStyles = makeStyles((theme) => ({
|
||||
function mapStateToProps(state: AppState) {
|
||||
return {
|
||||
loading: state.schedulerEntries.loading,
|
||||
error: state.schedulerEntries.error,
|
||||
entries: state.schedulerEntries.data,
|
||||
pollInterval: state.settings.pollInterval,
|
||||
};
|
||||
@@ -48,14 +51,24 @@ function SchedulersView(props: Props) {
|
||||
return (
|
||||
<Container maxWidth="lg" className={classes.container}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
<Paper className={classes.paper} variant="outlined">
|
||||
<Typography variant="h6" className={classes.heading}>
|
||||
Scheduler Entries
|
||||
</Typography>
|
||||
<SchedulerEntriesTable entries={props.entries} />
|
||||
</Paper>
|
||||
</Grid>
|
||||
{props.error === "" ? (
|
||||
<Grid item xs={12}>
|
||||
<Paper className={classes.paper} variant="outlined">
|
||||
<Typography variant="h6" className={classes.heading}>
|
||||
Scheduler Entries
|
||||
</Typography>
|
||||
<SchedulerEntriesTable entries={props.entries} />
|
||||
</Paper>
|
||||
</Grid>
|
||||
) : (
|
||||
<Grid item xs={12}>
|
||||
<Alert severity="error">
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
Could not retreive scheduler entries live data —{" "}
|
||||
<strong>See the logs for details</strong>
|
||||
</Alert>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
|
||||
@@ -5,6 +5,8 @@ import { makeStyles } from "@material-ui/core/styles";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Alert from "@material-ui/lab/Alert";
|
||||
import AlertTitle from "@material-ui/lab/AlertTitle";
|
||||
import ServersTable from "../components/ServersTable";
|
||||
import { listServersAsync } from "../actions/serversActions";
|
||||
import { AppState } from "../store";
|
||||
@@ -30,6 +32,7 @@ const useStyles = makeStyles((theme) => ({
|
||||
function mapStateToProps(state: AppState) {
|
||||
return {
|
||||
loading: state.servers.loading,
|
||||
error: state.servers.error,
|
||||
servers: state.servers.data,
|
||||
pollInterval: state.settings.pollInterval,
|
||||
};
|
||||
@@ -48,14 +51,24 @@ function ServersView(props: Props) {
|
||||
return (
|
||||
<Container maxWidth="lg" className={classes.container}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
<Paper className={classes.paper} variant="outlined">
|
||||
<Typography variant="h6" className={classes.heading}>
|
||||
Servers
|
||||
</Typography>
|
||||
<ServersTable servers={props.servers} />
|
||||
</Paper>
|
||||
</Grid>
|
||||
{props.error === "" ? (
|
||||
<Grid item xs={12}>
|
||||
<Paper className={classes.paper} variant="outlined">
|
||||
<Typography variant="h6" className={classes.heading}>
|
||||
Servers
|
||||
</Typography>
|
||||
<ServersTable servers={props.servers} />
|
||||
</Paper>
|
||||
</Grid>
|
||||
) : (
|
||||
<Grid item xs={12}>
|
||||
<Alert severity="error">
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
Could not retreive servers live data —{" "}
|
||||
<strong>See the logs for details</strong>
|
||||
</Alert>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user