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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/src/actions/tasksActions.ts
View File

@ -133,11 +133,14 @@ export type TasksActionTypes =
| ListDeadTasksSuccessAction
| ListDeadTasksErrorAction;
export function listActiveTasksAsync(qname: string) {
export function listActiveTasksAsync(
qname: string,
pageOpts?: PaginationOptions
) {
return async (dispatch: Dispatch<TasksActionTypes>) => {
dispatch({ type: LIST_ACTIVE_TASKS_BEGIN, queue: qname });
try {
const response = await listActiveTasks(qname);
const response = await listActiveTasks(qname, pageOpts);
dispatch({
type: LIST_ACTIVE_TASKS_SUCCESS,
queue: qname,

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 (

11
ui/src/hooks/index.tsx Normal file
View File

@ -0,0 +1,11 @@
import { useEffect } from "react";
// usePolling repeatedly calls doFn with a fix time delay specified
// by interval (in millisecond).
export function usePolling(doFn: () => void, interval: number) {
useEffect(() => {
doFn();
const id = setInterval(doFn, interval * 1000);
return () => clearInterval(id);
}, [interval, doFn]);
}

9
ui/src/views/DashboardView.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React from "react";
import { connect, ConnectedProps } from "react-redux";
import Container from "@material-ui/core/Container";
import { makeStyles } from "@material-ui/core/styles";
@ -18,6 +18,7 @@ import ProcessedTasksChart from "../components/ProcessedTasksChart";
import QueuesOverviewTable from "../components/QueuesOverviewTable";
import Tooltip from "../components/Tooltip";
import { getCurrentUTCDate } from "../timeutil";
import { usePolling } from "../hooks";
const useStyles = makeStyles((theme) => ({
container: {
@ -78,11 +79,7 @@ function DashboardView(props: Props) {
const { pollInterval, listQueuesAsync, queues } = props;
const classes = useStyles();
useEffect(() => {
listQueuesAsync();
const interval = setInterval(listQueuesAsync, pollInterval * 1000);
return () => clearInterval(interval);
}, [pollInterval, listQueuesAsync]);
usePolling(listQueuesAsync, pollInterval);
const processedStats = queues.map((q) => ({
queue: q.queue,