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

Create usePolling custom hook

Browse Source
This commit is contained in:
Ken Hibino
2020-11-29 15:04:24 -08:00
parent b9cb9211ce
commit 3dd6fdc0b0
10 changed files with 53 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useState, useCallback } from "react";
import { connect, ConnectedProps } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
@@ -28,6 +28,7 @@ import TablePaginationActions, {
rowsPerPageOptions,
defaultPageSize,
} from "./TablePaginationActions";
import { usePolling } from "../hooks";
const useStyles = makeStyles({
table: {
@@ -73,14 +74,12 @@ function ActiveTasksTable(props: Props & ReduxProps) {
setPage(0);
};
useEffect(() => {
listActiveTasksAsync(queue);
const interval = setInterval(
() => listActiveTasksAsync(queue),
pollInterval * 1000
);
return () => clearInterval(interval);
}, [pollInterval, listActiveTasksAsync, queue]);
const fetchData = useCallback(() => {
const pageOpts = { page: page + 1, size: pageSize };
listActiveTasksAsync(queue, pageOpts);
}, [page, pageSize, queue, listActiveTasksAsync]);
usePolling(fetchData, pollInterval);
if (props.tasks.length === 0) {
return (

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

@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import React, { useCallback, useState } from "react";
import { connect, ConnectedProps } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
@@ -29,6 +29,7 @@ import TablePaginationActions, {
rowsPerPageOptions,
} from "./TablePaginationActions";
import { timeAgo } from "../timeutil";
import { usePolling } from "../hooks";
const useStyles = makeStyles({
table: {
@@ -83,14 +84,12 @@ function DeadTasksTable(props: Props & ReduxProps) {
setPage(0);
};
useEffect(() => {
const fetchData = useCallback(() => {
const pageOpts = { page: page + 1, size: pageSize };
listDeadTasksAsync(queue, pageOpts);
const interval = setInterval(() => {
listDeadTasksAsync(queue, pageOpts);
}, pollInterval * 1000);
return () => clearInterval(interval);
}, [pollInterval, listDeadTasksAsync, queue, page, pageSize]);
}, [page, pageSize, queue, listDeadTasksAsync]);
usePolling(fetchData, pollInterval);
if (props.tasks.length === 0) {
return (

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

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useCallback, useState } from "react";
import { connect, ConnectedProps } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
@@ -28,6 +28,7 @@ import TablePaginationActions, {
import { listPendingTasksAsync } from "../actions/tasksActions";
import { AppState } from "../store";
import { PendingTask } from "../api";
import { usePolling } from "../hooks";
const useStyles = makeStyles({
table: {
@@ -74,14 +75,12 @@ function PendingTasksTable(props: Props & ReduxProps) {
setPage(0);
};
useEffect(() => {
const fetchData = useCallback(() => {
const pageOpts = { page: page + 1, size: pageSize };
listPendingTasksAsync(queue, pageOpts);
const interval = setInterval(() => {
listPendingTasksAsync(queue, pageOpts);
}, pollInterval * 1000);
return () => clearInterval(interval);
}, [pollInterval, listPendingTasksAsync, queue, page, pageSize]);
}, [page, pageSize, queue, listPendingTasksAsync]);
usePolling(fetchData, pollInterval);
if (props.tasks.length === 0) {
return (

2
ui/src/components/ProcessedTasksChart.tsx
View File

@@ -25,7 +25,7 @@ function ProcessedTasksChart(props: Props) {
const theme = useTheme<Theme>();
return (
<ResponsiveContainer>
<BarChart data={props.data} maxBarSize={100}>
<BarChart data={props.data} maxBarSize={120}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="queue" />
<YAxis />

2
ui/src/components/QueueSizeChart.tsx
View File

@@ -26,7 +26,7 @@ interface TaskBreakdown {
function QueueSizeChart(props: Props) {
return (
<ResponsiveContainer>
<BarChart data={props.data}>
<BarChart data={props.data} maxBarSize={120}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="queue" />
<YAxis />

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

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useCallback, useState } from "react";
import { connect, ConnectedProps } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
@@ -29,6 +29,7 @@ import TablePaginationActions, {
rowsPerPageOptions,
} from "./TablePaginationActions";
import { durationBefore } from "../timeutil";
import { usePolling } from "../hooks";
const useStyles = makeStyles({
table: {
@@ -75,14 +76,12 @@ function RetryTasksTable(props: Props & ReduxProps) {
setPage(0);
};
useEffect(() => {
const fetchData = useCallback(() => {
const pageOpts = { page: page + 1, size: pageSize };
listRetryTasksAsync(queue, pageOpts);
const interval = setInterval(() => {
listRetryTasksAsync(queue, pageOpts);
}, pollInterval * 1000);
return () => clearInterval(interval);
}, [pollInterval, listRetryTasksAsync, queue, page, pageSize]);
}, [page, pageSize, queue, listRetryTasksAsync]);
usePolling(fetchData, pollInterval);
if (props.tasks.length === 0) {
return (

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

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useState, useCallback } from "react";
import { connect, ConnectedProps } from "react-redux";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
@@ -29,6 +29,7 @@ import TablePaginationActions, {
rowsPerPageOptions,
} from "./TablePaginationActions";
import { durationBefore } from "../timeutil";
import { usePolling } from "../hooks";
const useStyles = makeStyles({
table: {
@@ -75,14 +76,12 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
setPage(0);
};
useEffect(() => {
const fetchData = useCallback(() => {
const pageOpts = { page: page + 1, size: pageSize };
listScheduledTasksAsync(queue, pageOpts);
const interval = setInterval(() => {
listScheduledTasksAsync(queue, pageOpts);
}, pollInterval * 1000);
return () => clearInterval(interval);
}, [pollInterval, listScheduledTasksAsync, queue, page, pageSize]);
}, [page, pageSize, queue, listScheduledTasksAsync]);
usePolling(fetchData, pollInterval);
if (props.tasks.length === 0) {
return (