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

Add content to RedisInfoView

Browse Source
This commit is contained in:
Ken Hibino
2021-01-04 12:05:37 -08:00
parent 0c3cd80728
commit 14dc7de869
5 changed files with 141 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,9 +4,14 @@ import Container from "@material-ui/core/Container";
import { makeStyles } from "@material-ui/core/styles";
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 SyntaxHighlighter from "react-syntax-highlighter";
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
import { getRedisInfoAsync } from "../actions/redisInfoActions";
import { usePolling } from "../hooks";
import { AppState } from "../store";
import { timeAgoUnix } from "../utils";
const useStyles = makeStyles((theme) => ({
container: {
@@ -26,6 +31,7 @@ function mapStateToProps(state: AppState) {
loading: state.redis.loading,
redisInfo: state.redis.data,
redisAddress: state.redis.address,
redisInfoRaw: state.redis.rawData,
pollInterval: state.settings.pollInterval,
};
}
@@ -35,12 +41,10 @@ type Props = ConnectedProps<typeof connector>;
function RedisInfoView(props: Props) {
const classes = useStyles();
const { pollInterval, getRedisInfoAsync } = props;
const { pollInterval, getRedisInfoAsync, redisInfo, redisInfoRaw } = props;
usePolling(getRedisInfoAsync, pollInterval);
console.log("DEBUG: redisInfo", props.redisInfo);
// Metrics to show
// - Used Memory
// - Memory Fragmentation Ratio
@@ -58,9 +62,125 @@ function RedisInfoView(props: Props) {
Connected to: {props.redisAddress}
</Typography>
</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>
</Container>
);
}
interface MetricCardProps {
title: string;
content: string;
}
function MetricCard(props: MetricCardProps) {
return (
<Card variant="outlined">
<CardContent>
<Typography
gutterBottom
color="textPrimary"
variant="h5"
align="center"
>
{props.content}
</Typography>
<Typography color="textSecondary" variant="subtitle2" align="center">
{props.title}
</Typography>
</CardContent>
</Card>
);
}
export default connector(RedisInfoView);