Fix docker build

Updating README to include a code example for integration into echo web server.  

Related issue: https://github.com/hibiken/asynqmon/issues/187 and credit to: https://github.com/tempor1s for solution.

.dockerignore

@@ -0,0 +1,16 @@
+
+# Files
+.dockerignore
+.editorconfig
+.gitignore
+Dockerfile
+Makefile
+LICENSE
+**/*.md
+**/*_test.go
+*.out
+
+# Folders
+.git/
+.github/
+**/node_modules/

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: [hibiken] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/ui"
+    schedule:
+      interval: "daily"

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,60 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [master]
+    paths-ignore:
+      - ui/build
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [master]
+    paths-ignore:
+      - ui/build
+  schedule:
+    - cron: "24 0 * * 6"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ["go", "javascript"]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with '+' to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v1
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
+
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
+
+      #- run: |
+      #   make bootstrap
+      #   make release
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

.github/workflows/docker-image-publish.yml

@@ -0,0 +1,44 @@
+name: Publish Docker image
+on:
+  push:
+    branches:
+      - "master"
+    tags:
+      - "v*"
+  pull_request:
+    branches:
+      - "master"
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Docker meta
+        id: meta
+        uses: crazy-max/ghaction-docker-meta@v2
+        with:
+          images: hibiken/asynqmon
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }}

.github/workflows/release.yml

@@ -1,7 +1,9 @@
+name: Release
+
 on:
   release:
     types:
-      - created:
+      - created
 
 jobs:
   release:
@@ -18,36 +20,35 @@ jobs:
       - name: Set up Go
         uses: actions/setup-go@v2
         with:
-          go-version: 1.15
-
-      - name: Install Go1.16
-        run: go get golang.org/dl/go1.16rc1 && go1.16rc1 download
+          go-version: 1.16
 
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
           node-version: "12"
 
-      - name: Install NPM packages
-        run: cd ui && rm yarn.lock && yarn install
-
-      - id: release
+      - name: Get release
+        id: release
         uses: bruceadams/get-release@v1.2.2
         env:
           GITHUB_TOKEN: ${{ github.token }}
 
-      - name: Build release binary
+      - name: Install NPM packages
+        run: cd ui && rm yarn.lock && yarn install
+
+      - name: Build Release Binary
         run: |
           GOOS=${{ matrix.goos }} GOARCH=amd64 make build
           tar -czvf asynqmon_${{ steps.release.outputs.tag_name }}_${{ matrix.goos }}_amd64.tar.gz asynqmon
           ls
 
-      - name: Upload release binary
-        uses: actions/upload-release-asset@v1.0.2
+      - name: Upload Release Binary
+        id: upload-go-release-asset
+        uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:
           upload_url: ${{ steps.release.outputs.upload_url }}
-          asset_path: ./asynqmon_${{ steps.release.outputs.tag_name }}_${{ matrix.goos }}-amd64.tar.gz
-          asset_name: asynqmon_${{ steps.release.outputs.tag_name }}_${{ matrix.goos }}-amd64.tar.gz
+          asset_path: ./asynqmon_${{ steps.release.outputs.tag_name }}_${{ matrix.goos }}_amd64.tar.gz
+          asset_name: asynqmon_${{ steps.release.outputs.tag_name }}_${{ matrix.goos }}_amd64.tar.gz
           asset_content_type: application/gzip

.gitignore

@@ -1,3 +1,6 @@
+# macOS
+**/.DS_Store
+
 # Binaries for programs and plugins
 *.exe
 *.exe~
@@ -13,10 +16,23 @@
 
 # Prevent accidental node_modules installed at root.
 node_modules/
+package.json
+yarn.lock
+package-json.lock
 
 # Output of the go coverage tool, specifically when used with LiteIDE
 *.out
 
-# main binary
-asynqmon
-dist/
+# binaries
+/cmd/asynqmon/asynqmon
+/asynqmon
+/api
+dist/
+
+# Editor configs
+.idea/
+.vscode/
+.editorconfig
+
+# examples
+examples/

CHANGELOG.md

@@ -0,0 +1,82 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on ["Keep a Changelog"](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.7.0] - 2022-04-11
+
+Version 0.7 added support for [Task Aggregation](https://github.com/hibiken/asynq/wiki/Task-aggregation) feature
+
+### Added
+ 
+- (ui): Added tasks view to show aggregated tasks
+
+## [0.6.1] - 2022-03-17
+
+### Fixed
+- (ui): Show metrics link in sidebar when --prometheus-addr flag is provided
+
+## [0.6.0] - 2022-03-02
+
+### Added
+
+- (cmd): Added `--read-only` flag to specify read-only mode
+- (pkg): Added `Options.ReadOnly` to restrict user to view-only mode
+- (ui): Hide action buttons in read-only mode
+- (ui): Display queue latency in dashboard page and queue detail page.
+- (ui): Added copy-to-clipboard button for task ID in tasks list-view page.
+- (ui): Use logo image in the appbar (thank you @koddr!)
+
+### Fixed
+- (ui): Pagination in ActiveTasks table is fixed
+
+## [0.5.0] - 2021-12-19
+
+Version 0.5 added support for [Prometheus](https://prometheus.io/) integration.
+
+- (cmd): Added `--enable-metrics-exporter` option to export queue metrics.
+- (cmd): Added `--prometheus-addr` to enable metrics view in Web UI.
+- (pkg): Added `Options.PrometheusAddress` to enable metrics view in Web UI.
+
+## [0.4.0] - 2021-11-06
+
+- Added "completed" state
+- Updated to be compatible with asynq v0.19
+
+## [0.3.2] - 2021-10-22
+
+- (ui): Fixed build
+
+## [0.3.1] - 2021-10-21
+
+### Added
+
+- (cmd): Added --max-payload-length to allow specifying number of characters displayed for payload, defaults to 200 chars
+- (pkg): DefaultPayloadFormatter is now exported from the package
+
+## [0.3.0]
+
+### Changed
+
+- Asynqmon is now a go package that can be imported to other projects!
+
+## [0.2.1]
+
+### Addded
+
+- Task details view is added
+- Search by task ID feature is added
+
+## [0.2]
+
+### Changed
+
+- Updated to depend on asynq 0.18
+
+## [0.1.0-beta1] - 2021-01-31
+
+Initial Beta Release 🎉

Dockerfile

@@ -0,0 +1,60 @@
+#
+# First stage: 
+# Building a frontend.
+#
+
+FROM alpine:3.17 AS frontend
+
+# Move to a working directory (/static).
+WORKDIR /static
+
+# https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported
+ENV NODE_OPTIONS=--openssl-legacy-provider
+# Install npm (with latest nodejs) and yarn (globally, in silent mode).
+RUN apk add --update nodejs npm && \
+    npm i -g -s --unsafe-perm yarn
+
+# Copy only ./ui folder to the working directory.
+COPY ui .
+
+# Run yarn scripts (install & build).
+RUN yarn install && yarn build
+
+#
+# Second stage: 
+# Building a backend.
+#
+
+FROM golang:1.18-alpine AS backend
+
+# Move to a working directory (/build).
+WORKDIR /build
+
+# Copy and download dependencies.
+COPY go.mod go.sum ./
+RUN go mod download
+
+# Copy a source code to the container.
+COPY . .
+
+# Copy frontend static files from /static to the root folder of the backend container.
+COPY --from=frontend ["/static/build", "ui/build"]
+
+# Set necessary environmet variables needed for the image and build the server.
+ENV CGO_ENABLED=0 GOOS=linux GOARCH=amd64
+
+# Run go build (with ldflags to reduce binary size).
+RUN go build -ldflags="-s -w" -o asynqmon ./cmd/asynqmon
+
+#
+# Third stage: 
+# Creating and running a new scratch container with the backend binary.
+#
+
+FROM scratch
+
+# Copy binary from /build to the root folder of the scratch container.
+COPY --from=backend ["/build/asynqmon", "/"]
+
+# Command to run when starting the container.
+ENTRYPOINT ["/asynqmon"]

Makefile

@@ -1,11 +1,23 @@
+.PHONY: api assets build docker
+
+NODE_PATH ?= $(PWD)/ui/node_modules
 assets:
-	cd ./ui && yarn build
+	@if [ ! -d "$(NODE_PATH)"  ]; then cd ./ui && yarn install --modules-folder $(NODE_PATH); fi
+	cd ./ui && yarn build --modules-folder $(NODE_PATH)
 
-# TODO: Update this once go1.16 is released.
-go_binary:
-	go1.16rc1 build -o asynqmon .
-
-# Target to build a release binary.
-build: assets go_binary
+# This target skips the overhead of building UI assets.
+# Intended to be used during development.
+api:
+	go build -o api ./cmd/asynqmon
 
+# Build a release binary.
+build: assets
+	go build -o asynqmon ./cmd/asynqmon
 
+# Build image and run Asynqmon server (with default settings).
+docker:
+	docker build -t asynqmon .
+	docker run --rm \
+		--name asynqmon \
+		-p 8080:8080 \
+		asynqmon --redis-addr=host.docker.internal:6379

README.md

@@ -1,43 +1,287 @@
-# Asynqmon
+<img src="https://user-images.githubusercontent.com/11155743/114745460-57760500-9d57-11eb-9a2c-43fa88171807.png" alt="Asynqmon logo" width="360px" />
 
-Asynqmon is a web based tool for monitoring and administrating Asynq queues and tasks.
+# Web UI for monitoring & administering [Asynq](https://github.com/hibiken/asynq) task queue
 
-## Installation
+## Overview
+
+Asynqmon is a web UI tool for monitoring and administering [Asynq](https://github.com/hibiken/asynq) queues and tasks.
+It supports integration with [Prometheus](https://prometheus.io) to display time-series data.
+
+Asynqmon is both a library that you can include in your web application, as well as a binary that you can simply install and run.
+
+## Version Compatibility
+
+Please make sure the version compatibility with the Asynq package you are using.
+
+| Asynq version  | WebUI (asynqmon) version |
+| -------------- | ------------------------ |
+| 0.23.x         | 0.7.x                    |
+| 0.22.x         | 0.6.x                    |
+| 0.20.x, 0.21.x | 0.5.x                    |
+| 0.19.x         | 0.4.x                    |
+| 0.18.x         | 0.2.x, 0.3.x             |
+| 0.16.x, 0.17.x | 0.1.x                    |
+
+## Install the binary
+
+There're a few options to install the binary:
+
+- [Download a release binary](#release-binaries)
+- [Download a docker image](#docker-image)
+- [Build a binary from source](building-from-source)
+- [Build a docker image from source](#building-docker-image-locally)
 
 ### Release binaries
 
-You can download the release binary for your system from the
-[releases page](https://github.com/hibiken/asynqmon/releases).
+You can download the release binary for your system from the [releases page](https://github.com/hibiken/asynqmon/releases).
+
+### Docker image
+
+To pull the Docker image:
+
+```bash
+# Pull the latest image
+docker pull hibiken/asynqmon
+
+# Or specify the image by tag
+docker pull hibiken/asynqmon[:tag]
+```
 
 ### Building from source
 
-To build Asynqmon from source code, first ensure that have a working
-Go environment with [version 1.16 or greater installed](https://golang.org/doc/install).
-You also need [Node.js](https://nodejs.org/) and [Yarn](https://yarnpkg.com/)
-installed in order to build the frontend assets.
+To build Asynqmon from source code, make sure you have Go installed ([download](https://golang.org/dl/)). Version `1.16` or higher is required. You also need [Node.js](https://nodejs.org/) and [Yarn](https://yarnpkg.com/) installed in order to build the frontend assets.
 
-Download the source code and then run:
+Download the source code of this repository and then run:
 
-```sh
-$ make build
+```bash
+make build
 ```
 
 The `asynqmon` binary should be created in the current directory.
 
-## Usage
+### Building Docker image locally
 
-To start the server, run
+To build Docker image locally, run:
 
-```sh
-$ asynqmon
+```bash
+make docker
 ```
 
-Pass flags to specify port, redis server address, etc.
+## Run the binary
+
+To use the defaults, simply run and open http://localhost:8080.
+
+```bash
+# with a binary
+./asynqmon
+
+# with a docker image
+docker run --rm \
+    --name asynqmon \
+    -p 8080:8080 \
+    hibiken/asynqmon
+```
+
+By default, Asynqmon web server listens on port `8080` and connects to a Redis server running on `127.0.0.1:6379`.
+
+To see all available flags, run:
+
+```bash
+# with a binary
+./asynqmon --help
+
+# with a docker image
+docker run hibiken/asynqmon --help
+```
+
+Here's the available flags:
+
+_Note_: Use `--redis-url` to specify address, db-number, and password with one flag value; Alternatively, use `--redis-addr`, `--redis-db`, and `--redis-password` to specify each value.
+
+| Flag                              | Env                       | Description                                                                                                                  | Default          |
+| --------------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------- |
+| `--port`(int)                     | `PORT`                    | port number to use for web ui server                                                                                         | 8080             |
+| `---redis-url`(string)            | `REDIS_URL`               | URL to redis or sentinel server. See [godoc](https://pkg.go.dev/github.com/hibiken/asynq#ParseRedisURI) for supported format | ""               |
+| `--redis-addr`(string)            | `REDIS_ADDR`              | address of redis server to connect to                                                                                        | "127.0.0.1:6379" |
+| `--redis-db`(int)                 | `REDIS_DB`                | redis database number                                                                                                        | 0                |
+| `--redis-password`(string)        | `REDIS_PASSWORD`          | password to use when connecting to redis server                                                                              | ""               |
+| `--redis-cluster-nodes`(string)   | `REDIS_CLUSTER_NODES`     | comma separated list of host:port addresses of cluster nodes                                                                 | ""               |
+| `--redis-tls`(string)             | `REDIS_TLS`               | server name for TLS validation used when connecting to redis server                                                          | ""               |
+| `--redis-insecure-tls`(bool)      | `REDIS_INSECURE_TLS`      | disable TLS certificate host checks                                                                                          | false            |
+| `--enable-metrics-exporter`(bool) | `ENABLE_METRICS_EXPORTER` | enable prometheus metrics exporter to expose queue metrics                                                                   | false            |
+| `--prometheus-addr`(string)       | `PROMETHEUS_ADDR`         | address of prometheus server to query time series                                                                            | ""               |
+| `--read-only`(bool)               | `READ_ONLY`               | use web UI in read-only mode                                                                                                 | false            |
+
+### Connecting to Redis
+
+To connect to a **single redis server**, use either `--redis-url` or (`--redis-addr`, `--redis-db`, and `--redis-password`).
+
+Example:
 
 ```sh
-$ asynqmon --port=3000 --redis_addr=localhost:6380
+$ ./asynqmon --redis-url=redis://:mypassword@localhost:6380/2
+
+$ ./asynqmon --redis-addr=localhost:6380 --redis-db=2 --redis-password=mypassword
 ```
 
+To connect to **redis-sentinels**, use `--redis-url`.
+
+Example:
+
+```sh
+$ ./asynqmon --redis-url=redis-sentinel://:mypassword@localhost:5000,localhost:5001,localhost:5002?master=mymaster
+```
+
+To connect to a **redis-cluster**, use `--redis-cluster-nodes`.
+
+Example:
+
+```sh
+$ ./asynqmon --redis-cluster-nodes=localhost:7000,localhost:7001,localhost:7002,localhost:7003,localhost:7004,localhost:7006
+```
+
+### Integration with Prometheus
+
+The binary supports two flags to enable integration with [Prometheus](https://prometheus.io/).
+
+First, enable metrics exporter to expose queue metrics to Prometheus server by passing `--enable-metrics-exporter` flag.
+The metrics data is now available under `/metrics` for Prometheus server to scrape.
+
+Once the metrics data is collected by a Prometheus server, you can pass the address of the Prometheus server to asynqmon to query the time-series data.
+The address can be specified via `--prometheus-addr`. This enables the metrics view on the Web UI.
+
+<img width="1532" alt="Screen Shot 2021-12-19 at 4 37 19 PM" src="https://user-images.githubusercontent.com/10953044/146696852-25916465-07f0-4ed5-af31-18be02390bcb.png">
+
+### Examples
+
+```bash
+# with a local binary; custom port and connect to redis server at localhost:6380
+./asynqmon --port=3000 --redis-addr=localhost:6380
+
+# with prometheus integration enabled
+./asynqmon --enable-metrics-exporter --prometheus-addr=http://localhost:9090
+
+# with Docker (connect to a Redis server running on the host machine)
+docker run --rm \
+    --name asynqmon \
+    -p 3000:3000 \
+    hibiken/asynqmon --port=3000 --redis-addr=host.docker.internal:6380
+
+# with Docker (connect to a Redis server running in the Docker container)
+docker run --rm \
+    --name asynqmon \
+    --network dev-network \
+    -p 8080:8080 \
+    hibiken/asynqmon --redis-addr=dev-redis:6379
+```
+
+Next, go to [localhost:8080](http://localhost:8080) and see Asynqmon dashboard:
+
+![Web UI Queues View](https://user-images.githubusercontent.com/11155743/114697016-07327f00-9d26-11eb-808c-0ac841dc888e.png)
+
+**Tasks view**
+
+![Web UI TasksView](https://user-images.githubusercontent.com/11155743/114697070-1f0a0300-9d26-11eb-855c-d3ec263865b7.png)
+
+**Settings and adaptive dark mode**
+
+![Web UI Settings and adaptive dark mode](https://user-images.githubusercontent.com/11155743/114697149-3517c380-9d26-11eb-9f7a-ae2dd00aad5b.png)
+
+## Import as a Library
+
+[![GoDoc](https://godoc.org/github.com/hibiken/asynqmon?status.svg)](https://godoc.org/github.com/hibiken/asynqmon)
+
+Asynqmon is also a library which can be imported into an existing web application.
+
+Example with [net/http](https://pkg.go.dev/net/http):
+
+```go
+package main
+
+import (
+	"log"
+	"net/http"
+
+	"github.com/hibiken/asynq"
+	"github.com/hibiken/asynqmon"
+)
+
+func main() {
+	h := asynqmon.New(asynqmon.Options{
+		RootPath: "/monitoring", // RootPath specifies the root for asynqmon app
+		RedisConnOpt: asynq.RedisClientOpt{Addr: ":6379"},
+	})
+
+    // Note: We need the tailing slash when using net/http.ServeMux.
+	http.Handle(h.RootPath()+"/", h)
+
+	// Go to http://localhost:8080/monitoring to see asynqmon homepage.
+	log.Fatal(http.ListenAndServe(":8080", nil))
+}
+```
+
+Example with [gorilla/mux](https://pkg.go.dev/github.com/gorilla/mux):
+
+```go
+package main
+
+import (
+	"log"
+	"net/http"
+
+	"github.com/gorilla/mux"
+	"github.com/hibiken/asynq"
+	"github.com/hibiken/asynqmon"
+)
+
+func main() {
+	h := asynqmon.New(asynqmon.Options{
+		RootPath: "/monitoring", // RootPath specifies the root for asynqmon app
+		RedisConnOpt: asynq.RedisClientOpt{Addr: ":6379"},
+	})
+
+	r := mux.NewRouter()
+	r.PathPrefix(h.RootPath()).Handler(h)
+
+	srv := &http.Server{
+		Handler: r,
+		Addr:    ":8080",
+	}
+
+	// Go to http://localhost:8080/monitoring to see asynqmon homepage.
+	log.Fatal(srv.ListenAndServe())
+}
+```
+
+Example with [labstack/echo](https://github.com/labstack/echo)):
+
+
+```go
+package main
+
+import (
+	"github.com/labstack/echo/v4"
+	"github.com/hibiken/asynq"
+	"github.com/hibiken/asynqmon"
+)
+
+func main() {
+        e := echo.New()
+
+	mon := asynqmon.New(asynqmon.Options{
+		RootPath: "/monitoring/tasks",
+		RedisConnOpt: asynq.RedisClientOpt{
+			Addr: ":6379",
+			Password: "",
+			DB: 0,
+		},
+	})
+	e.Any("/monitoring/tasks/*", echo.WrapHandler(mon))
+	e.Start(":8080")
+}
+```
+
+
 ## License
 
-Asynqmon is released under the MIT license. See [LICENSE](https://github.com/hibiken/asynqmon/blob/master/LICENSE).
+Copyright (c) 2019-present [Ken Hibino](https://github.com/hibiken) and [Contributors](https://github.com/hibiken/asynqmon/graphs/contributors). `Asynqmon` is free and open-source software licensed under the [MIT License](https://github.com/hibiken/asynq/blob/master/LICENSE). Official logo was created by [Vic Shóstak](https://github.com/koddr) and distributed under [Creative Commons](https://creativecommons.org/publicdomain/zero/1.0/) license (CC0 1.0 Universal).

cmd/asynqmon/main.go

@@ -0,0 +1,239 @@
+package main
+
+import (
+	"bytes"
+	"crypto/tls"
+	"flag"
+	"fmt"
+	"log"
+	"net/http"
+	"os"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/hibiken/asynq"
+	"github.com/hibiken/asynq/x/metrics"
+	"github.com/hibiken/asynqmon"
+	"github.com/prometheus/client_golang/prometheus"
+	"github.com/prometheus/client_golang/prometheus/promhttp"
+	"github.com/rs/cors"
+)
+
+// Config holds configurations for the program provided via the command line.
+type Config struct {
+	// Server port
+	Port int
+
+	// Redis connection options
+	RedisAddr         string
+	RedisDB           int
+	RedisPassword     string
+	RedisTLS          string
+	RedisURL          string
+	RedisInsecureTLS  bool
+	RedisClusterNodes string
+
+	// UI related configs
+	ReadOnly         bool
+	MaxPayloadLength int
+	MaxResultLength  int
+
+	// Prometheus related configs
+	EnableMetricsExporter bool
+	PrometheusServerAddr  string
+
+	// Args are the positional (non-flag) command line arguments
+	Args []string
+}
+
+// parseFlags parses the command-line arguments provided to the program.
+// Typically, os.Args[0] is provided as 'progname' and os.args[1:] as 'args'.
+// Returns the Config in case parsing succeeded, or an error. In any case, the
+// output of the flag.Parse is returned in output.
+//
+// Reference: https://eli.thegreenplace.net/2020/testing-flag-parsing-in-go-programs/
+func parseFlags(progname string, args []string) (cfg *Config, output string, err error) {
+	flags := flag.NewFlagSet(progname, flag.ContinueOnError)
+	var buf bytes.Buffer
+	flags.SetOutput(&buf)
+
+	var conf Config
+	flags.IntVar(&conf.Port, "port", getEnvOrDefaultInt("PORT", 8080), "port number to use for web ui server")
+	flags.StringVar(&conf.RedisAddr, "redis-addr", getEnvDefaultString("REDIS_ADDR", "127.0.0.1:6379"), "address of redis server to connect to")
+	flags.IntVar(&conf.RedisDB, "redis-db", getEnvOrDefaultInt("REDIS_DB", 0), "redis database number")
+	flags.StringVar(&conf.RedisPassword, "redis-password", getEnvDefaultString("REDIS_PASSWORD", ""), "password to use when connecting to redis server")
+	flags.StringVar(&conf.RedisTLS, "redis-tls", getEnvDefaultString("REDIS_TLS", ""), "server name for TLS validation used when connecting to redis server")
+	flags.StringVar(&conf.RedisURL, "redis-url", getEnvDefaultString("REDIS_URL", ""), "URL to redis server")
+	flags.BoolVar(&conf.RedisInsecureTLS, "redis-insecure-tls", getEnvOrDefaultBool("REDIS_INSECURE_TLS", false), "disable TLS certificate host checks")
+	flags.StringVar(&conf.RedisClusterNodes, "redis-cluster-nodes", getEnvDefaultString("REDIS_CLUSTER_NODES", ""), "comma separated list of host:port addresses of cluster nodes")
+	flags.IntVar(&conf.MaxPayloadLength, "max-payload-length", getEnvOrDefaultInt("MAX_PAYLOAD_LENGTH", 200), "maximum number of utf8 characters printed in the payload cell in the Web UI")
+	flags.IntVar(&conf.MaxResultLength, "max-result-length", getEnvOrDefaultInt("MAX_RESULT_LENGTH", 200), "maximum number of utf8 characters printed in the result cell in the Web UI")
+	flags.BoolVar(&conf.EnableMetricsExporter, "enable-metrics-exporter", getEnvOrDefaultBool("ENABLE_METRICS_EXPORTER", false), "enable prometheus metrics exporter to expose queue metrics")
+	flags.StringVar(&conf.PrometheusServerAddr, "prometheus-addr", getEnvDefaultString("PROMETHEUS_ADDR", ""), "address of prometheus server to query time series")
+	flags.BoolVar(&conf.ReadOnly, "read-only", getEnvOrDefaultBool("READ_ONLY", false), "restrict to read-only mode")
+
+	err = flags.Parse(args)
+	if err != nil {
+		return nil, buf.String(), err
+	}
+	conf.Args = flags.Args()
+	return &conf, buf.String(), nil
+}
+
+func makeTLSConfig(cfg *Config) *tls.Config {
+	if cfg.RedisTLS == "" && !cfg.RedisInsecureTLS {
+		return nil
+	}
+	return &tls.Config{
+		ServerName:         cfg.RedisTLS,
+		InsecureSkipVerify: cfg.RedisInsecureTLS,
+	}
+}
+
+func makeRedisConnOpt(cfg *Config) (asynq.RedisConnOpt, error) {
+	// Connecting to redis-cluster
+	if len(cfg.RedisClusterNodes) > 0 {
+		return asynq.RedisClusterClientOpt{
+			Addrs:     strings.Split(cfg.RedisClusterNodes, ","),
+			Password:  cfg.RedisPassword,
+			TLSConfig: makeTLSConfig(cfg),
+		}, nil
+	}
+
+	// Connecting to redis-sentinels
+	if strings.HasPrefix(cfg.RedisURL, "redis-sentinel") {
+		res, err := asynq.ParseRedisURI(cfg.RedisURL)
+		if err != nil {
+			return nil, err
+		}
+		connOpt := res.(asynq.RedisFailoverClientOpt) // safe to type-assert
+		connOpt.TLSConfig = makeTLSConfig(cfg)
+		return connOpt, nil
+	}
+
+	// Connecting to single redis server
+	var connOpt asynq.RedisClientOpt
+	if len(cfg.RedisURL) > 0 {
+		res, err := asynq.ParseRedisURI(cfg.RedisURL)
+		if err != nil {
+			return nil, err
+		}
+		connOpt = res.(asynq.RedisClientOpt) // safe to type-assert
+	} else {
+		connOpt.Addr = cfg.RedisAddr
+		connOpt.DB = cfg.RedisDB
+		connOpt.Password = cfg.RedisPassword
+	}
+	if connOpt.TLSConfig == nil {
+		connOpt.TLSConfig = makeTLSConfig(cfg)
+	}
+	return connOpt, nil
+}
+
+func main() {
+	cfg, output, err := parseFlags(os.Args[0], os.Args[1:])
+	if err == flag.ErrHelp {
+		fmt.Println(output)
+		os.Exit(2)
+	} else if err != nil {
+		fmt.Printf("error: %v\n", err)
+		fmt.Println(output)
+		os.Exit(1)
+	}
+
+	redisConnOpt, err := makeRedisConnOpt(cfg)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	h := asynqmon.New(asynqmon.Options{
+		RedisConnOpt:      redisConnOpt,
+		PayloadFormatter:  asynqmon.PayloadFormatterFunc(payloadFormatterFunc(cfg)),
+		ResultFormatter:   asynqmon.ResultFormatterFunc(resultFormatterFunc(cfg)),
+		PrometheusAddress: cfg.PrometheusServerAddr,
+		ReadOnly:          cfg.ReadOnly,
+	})
+	defer h.Close()
+
+	c := cors.New(cors.Options{
+		AllowedMethods: []string{"GET", "POST", "DELETE"},
+	})
+	mux := http.NewServeMux()
+	mux.Handle("/", c.Handler(h))
+	if cfg.EnableMetricsExporter {
+		// Using NewPedanticRegistry here to test the implementation of Collectors and Metrics.
+		reg := prometheus.NewPedanticRegistry()
+
+		inspector := asynq.NewInspector(redisConnOpt)
+
+		reg.MustRegister(
+			metrics.NewQueueMetricsCollector(inspector),
+			// Add the standard process and go metrics to the registry
+			prometheus.NewProcessCollector(prometheus.ProcessCollectorOpts{}),
+			prometheus.NewGoCollector(),
+		)
+		mux.Handle("/metrics", promhttp.HandlerFor(reg, promhttp.HandlerOpts{}))
+	}
+
+	srv := &http.Server{
+		Handler:      mux,
+		Addr:         fmt.Sprintf(":%d", cfg.Port),
+		WriteTimeout: 10 * time.Second,
+		ReadTimeout:  10 * time.Second,
+	}
+
+	fmt.Printf("Asynq Monitoring WebUI server is listening on port %d\n", cfg.Port)
+	log.Fatal(srv.ListenAndServe())
+}
+
+func payloadFormatterFunc(cfg *Config) func(string, []byte) string {
+	return func(taskType string, payload []byte) string {
+		payloadStr := asynqmon.DefaultPayloadFormatter.FormatPayload(taskType, payload)
+		return truncate(payloadStr, cfg.MaxPayloadLength)
+	}
+}
+
+func resultFormatterFunc(cfg *Config) func(string, []byte) string {
+	return func(taskType string, result []byte) string {
+		resultStr := asynqmon.DefaultResultFormatter.FormatResult(taskType, result)
+		return truncate(resultStr, cfg.MaxResultLength)
+	}
+}
+
+// truncates string s to limit length (in utf8).
+func truncate(s string, limit int) string {
+	i := 0
+	for pos := range s {
+		if i == limit {
+			return s[:pos] + "…"
+		}
+		i++
+	}
+	return s
+}
+
+func getEnvDefaultString(key, def string) string {
+	v := os.Getenv(key)
+	if v == "" {
+		return def
+	}
+
+	return v
+}
+
+func getEnvOrDefaultInt(key string, def int) int {
+	v, err := strconv.Atoi(os.Getenv(key))
+	if err != nil {
+		return def
+	}
+	return v
+}
+
+func getEnvOrDefaultBool(key string, def bool) bool {
+	v, err := strconv.ParseBool(os.Getenv(key))
+	if err != nil {
+		return def
+	}
+	return v
+}

cmd/asynqmon/main_test.go

@@ -0,0 +1,137 @@
+package main
+
+import (
+	"crypto/tls"
+	"strings"
+	"testing"
+
+	"github.com/google/go-cmp/cmp"
+	"github.com/google/go-cmp/cmp/cmpopts"
+	"github.com/hibiken/asynq"
+)
+
+func TestParseFlags(t *testing.T) {
+	tests := []struct {
+		args []string
+		want *Config
+	}{
+		{
+			args: []string{"--redis-addr", "localhost:6380", "--redis-db", "3"},
+			want: &Config{
+				RedisAddr: "localhost:6380",
+				RedisDB:   3,
+
+				// Default values
+				Port:                  8080,
+				RedisPassword:         "",
+				RedisTLS:              "",
+				RedisURL:              "",
+				RedisInsecureTLS:      false,
+				RedisClusterNodes:     "",
+				MaxPayloadLength:      200,
+				MaxResultLength:       200,
+				EnableMetricsExporter: false,
+				PrometheusServerAddr:  "",
+				ReadOnly:              false,
+
+				Args: []string{},
+			},
+		},
+	}
+
+	for _, tc := range tests {
+		t.Run(strings.Join(tc.args, " "), func(t *testing.T) {
+			cfg, output, err := parseFlags("asynqmon", tc.args)
+			if err != nil {
+				t.Errorf("parseFlags returned error: %v", err)
+			}
+			if output != "" {
+				t.Errorf("parseFlag returned output=%q, want empty", output)
+			}
+			if diff := cmp.Diff(tc.want, cfg); diff != "" {
+				t.Errorf("parseFlag returned Config %v, want %v; (-want,+got)\n%s", cfg, tc.want, diff)
+			}
+		})
+	}
+
+}
+
+func TestMakeRedisConnOpt(t *testing.T) {
+	var tests = []struct {
+		desc string
+		cfg  *Config
+		want asynq.RedisConnOpt
+	}{
+		{
+			desc: "With address, db number and password",
+			cfg: &Config{
+				RedisAddr:     "localhost:6380",
+				RedisDB:       1,
+				RedisPassword: "foo",
+			},
+			want: asynq.RedisClientOpt{
+				Addr:     "localhost:6380",
+				DB:       1,
+				Password: "foo",
+			},
+		},
+		{
+			desc: "With TLS server name",
+			cfg: &Config{
+				RedisAddr: "localhost:6379",
+				RedisTLS:  "foobar",
+			},
+			want: asynq.RedisClientOpt{
+				Addr:      "localhost:6379",
+				TLSConfig: &tls.Config{ServerName: "foobar"},
+			},
+		},
+		{
+			desc: "With redis URL",
+			cfg: &Config{
+				RedisURL: "redis://:bar@localhost:6381/2",
+			},
+			want: asynq.RedisClientOpt{
+				Addr:     "localhost:6381",
+				DB:       2,
+				Password: "bar",
+			},
+		},
+		{
+			desc: "With redis-sentinel URL",
+			cfg: &Config{
+				RedisURL: "redis-sentinel://:secretpassword@localhost:5000,localhost:5001,localhost:5002?master=mymaster",
+			},
+			want: asynq.RedisFailoverClientOpt{
+				MasterName: "mymaster",
+				SentinelAddrs: []string{
+					"localhost:5000", "localhost:5001", "localhost:5002"},
+				Password: "secretpassword", // FIXME: Shouldn't this be SentinelPassword instead?
+			},
+		},
+		{
+			desc: "With cluster nodes",
+			cfg: &Config{
+				RedisClusterNodes: "localhost:5000,localhost:5001,localhost:5002,localhost:5003,localhost:5004,localhost:5005",
+			},
+			want: asynq.RedisClusterClientOpt{
+				Addrs: []string{
+					"localhost:5000", "localhost:5001", "localhost:5002", "localhost:5003", "localhost:5004", "localhost:5005"},
+			},
+		},
+	}
+
+	for _, tc := range tests {
+		t.Run(tc.desc, func(t *testing.T) {
+			got, err := makeRedisConnOpt(tc.cfg)
+			if err != nil {
+				t.Fatalf("makeRedisConnOpt returned error: %v", err)
+			}
+
+			if diff := cmp.Diff(tc.want, got, cmpopts.IgnoreUnexported(tls.Config{})); diff != "" {
+				t.Errorf("diff found: want=%v, got=%v; (-want,+got)\n%s",
+					tc.want, got, diff)
+			}
+		})
+	}
+}

conversion_helpers.go

@@ -1,10 +1,11 @@
-package main
+package asynqmon
 
 import (
 	"time"
+	"unicode"
+	"unicode/utf8"
 
 	"github.com/hibiken/asynq"
-	"github.com/hibiken/asynq/inspeq"
 )
 
 // ****************************************************************************
@@ -13,19 +14,89 @@ import (
 //   - conversion function from an external type to an internal type
 // ****************************************************************************
 
-type QueueStateSnapshot struct {
+// PayloadFormatter is used to convert payload bytes to a string shown in the UI.
+type PayloadFormatter interface {
+	// FormatPayload takes the task's typename and payload and returns a string representation of the payload.
+	FormatPayload(taskType string, payload []byte) string
+}
+
+type PayloadFormatterFunc func(string, []byte) string
+
+func (f PayloadFormatterFunc) FormatPayload(taskType string, payload []byte) string {
+	return f(taskType, payload)
+}
+
+// ResultFormatter is used to convert result bytes to a string shown in the UI.
+type ResultFormatter interface {
+	// FormatResult takes the task's typename and result and returns a string representation of the result.
+	FormatResult(taskType string, result []byte) string
+}
+
+type ResultFormatterFunc func(string, []byte) string
+
+func (f ResultFormatterFunc) FormatResult(taskType string, result []byte) string {
+	return f(taskType, result)
+}
+
+// DefaultPayloadFormatter is the PayloadFormater used by default.
+// It prints the given payload bytes as is if the bytes are printable, otherwise it prints a message to indicate
+// that the bytes are not printable.
+var DefaultPayloadFormatter = PayloadFormatterFunc(func(_ string, payload []byte) string {
+	if !isPrintable(payload) {
+		return "non-printable bytes"
+	}
+	return string(payload)
+})
+
+// DefaultResultFormatter is the ResultFormatter used by default.
+// It prints the given result bytes as is if the bytes are printable, otherwise it prints a message to indicate
+// that the bytes are not printable.
+var DefaultResultFormatter = ResultFormatterFunc(func(_ string, result []byte) string {
+	if !isPrintable(result) {
+		return "non-printable bytes"
+	}
+	return string(result)
+})
+
+// isPrintable reports whether the given data is comprised of all printable runes.
+func isPrintable(data []byte) bool {
+	if !utf8.Valid(data) {
+		return false
+	}
+	isAllSpace := true
+	for _, r := range string(data) {
+		if !unicode.IsPrint(r) {
+			return false
+		}
+		if !unicode.IsSpace(r) {
+			isAllSpace = false
+		}
+	}
+	return !isAllSpace
+}
+
+type queueStateSnapshot struct {
 	// Name of the queue.
 	Queue string `json:"queue"`
 	// Total number of bytes the queue and its tasks require to be stored in redis.
 	MemoryUsage int64 `json:"memory_usage_bytes"`
 	// Total number of tasks in the queue.
 	Size int `json:"size"`
+	// Totoal number of groups in the queue.
+	Groups int `json:"groups"`
+	// Latency of the queue in milliseconds.
+	LatencyMillisec int64 `json:"latency_msec"`
+	// Latency duration string for display purpose.
+	DisplayLatency string `json:"display_latency"`
+
 	// Number of tasks in each state.
-	Active    int `json:"active"`
-	Pending   int `json:"pending"`
-	Scheduled int `json:"scheduled"`
-	Retry     int `json:"retry"`
-	Archived  int `json:"archived"`
+	Active      int `json:"active"`
+	Pending     int `json:"pending"`
+	Aggregating int `json:"aggregating"`
+	Scheduled   int `json:"scheduled"`
+	Retry       int `json:"retry"`
+	Archived    int `json:"archived"`
+	Completed   int `json:"completed"`
 
 	// Total number of tasks processed during the given date.
 	// The number includes both succeeded and failed tasks.
@@ -40,25 +111,30 @@ type QueueStateSnapshot struct {
 	Timestamp time.Time `json:"timestamp"`
 }
 
-func toQueueStateSnapshot(s *inspeq.QueueStats) *QueueStateSnapshot {
-	return &QueueStateSnapshot{
-		Queue:       s.Queue,
-		MemoryUsage: s.MemoryUsage,
-		Size:        s.Size,
-		Active:      s.Active,
-		Pending:     s.Pending,
-		Scheduled:   s.Scheduled,
-		Retry:       s.Retry,
-		Archived:    s.Archived,
-		Processed:   s.Processed,
-		Succeeded:   s.Processed - s.Failed,
-		Failed:      s.Failed,
-		Paused:      s.Paused,
-		Timestamp:   s.Timestamp,
+func toQueueStateSnapshot(info *asynq.QueueInfo) *queueStateSnapshot {
+	return &queueStateSnapshot{
+		Queue:           info.Queue,
+		MemoryUsage:     info.MemoryUsage,
+		Size:            info.Size,
+		Groups:          info.Groups,
+		LatencyMillisec: info.Latency.Milliseconds(),
+		DisplayLatency:  info.Latency.Round(10 * time.Millisecond).String(),
+		Active:          info.Active,
+		Pending:         info.Pending,
+		Aggregating:     info.Aggregating,
+		Scheduled:       info.Scheduled,
+		Retry:           info.Retry,
+		Archived:        info.Archived,
+		Completed:       info.Completed,
+		Processed:       info.Processed,
+		Succeeded:       info.Processed - info.Failed,
+		Failed:          info.Failed,
+		Paused:          info.Paused,
+		Timestamp:       info.Timestamp,
 	}
 }
 
-type DailyStats struct {
+type dailyStats struct {
 	Queue     string `json:"queue"`
 	Processed int    `json:"processed"`
 	Succeeded int    `json:"succeeded"`
@@ -66,8 +142,8 @@ type DailyStats struct {
 	Date      string `json:"date"`
 }
 
-func toDailyStats(s *inspeq.DailyStats) *DailyStats {
-	return &DailyStats{
+func toDailyStats(s *asynq.DailyStats) *dailyStats {
+	return &dailyStats{
 		Queue:     s.Queue,
 		Processed: s.Processed,
 		Succeeded: s.Processed - s.Failed,
@@ -76,26 +152,100 @@ func toDailyStats(s *inspeq.DailyStats) *DailyStats {
 	}
 }
 
-func toDailyStatsList(in []*inspeq.DailyStats) []*DailyStats {
-	out := make([]*DailyStats, len(in))
+func toDailyStatsList(in []*asynq.DailyStats) []*dailyStats {
+	out := make([]*dailyStats, len(in))
 	for i, s := range in {
 		out[i] = toDailyStats(s)
 	}
 	return out
 }
 
-type BaseTask struct {
-	ID        string        `json:"id"`
-	Type      string        `json:"type"`
-	Payload   asynq.Payload `json:"payload"`
-	Queue     string        `json:"queue"`
-	MaxRetry  int           `json:"max_retry"`
-	Retried   int           `json:"retried"`
-	LastError string        `json:"error_message"`
+type taskInfo struct {
+	// ID is the identifier of the task.
+	ID string `json:"id"`
+	// Queue is the name of the queue in which the task belongs.
+	Queue string `json:"queue"`
+	// Type is the type name of the task.
+	Type string `json:"type"`
+	// Payload is the payload data of the task.
+	Payload string `json:"payload"`
+	// State indicates the task state.
+	State string `json:"state"`
+	// MaxRetry is the maximum number of times the task can be retried.
+	MaxRetry int `json:"max_retry"`
+	// Retried is the number of times the task has retried so far.
+	Retried int `json:"retried"`
+	// LastErr is the error message from the last failure.
+	LastErr string `json:"error_message"`
+	// LastFailedAt is the time time of the last failure in RFC3339 format.
+	// If the task has no failures, empty string.
+	LastFailedAt string `json:"last_failed_at"`
+	// Timeout is the number of seconds the task can be processed by Handler before being retried.
+	Timeout int `json:"timeout_seconds"`
+	// Deadline is the deadline for the task in RFC3339 format. If not set, empty string.
+	Deadline string `json:"deadline"`
+	// NextProcessAt is the time the task is scheduled to be processed in RFC3339 format.
+	// If not applicable, empty string.
+	NextProcessAt string `json:"next_process_at"`
+	// CompletedAt is the time the task was successfully processed in RFC3339 format.
+	// If not applicable, empty string.
+	CompletedAt string `json:"completed_at"`
+	// Result is the result data associated with the task.
+	Result string `json:"result"`
+	// TTL is the number of seconds the task has left to be retained in the queue.
+	// This is calculated by (CompletedAt + ResultTTL) - Now.
+	TTL int64 `json:"ttl_seconds"`
 }
 
-type ActiveTask struct {
-	*BaseTask
+// taskTTL calculates TTL for the given task.
+func taskTTL(task *asynq.TaskInfo) time.Duration {
+	if task.State != asynq.TaskStateCompleted {
+		return 0 // N/A
+	}
+	return task.CompletedAt.Add(task.Retention).Sub(time.Now())
+}
+
+// formatTimeInRFC3339 formats t in RFC3339 if the value is non-zero.
+// If t is zero time (i.e. time.Time{}), returns empty string
+func formatTimeInRFC3339(t time.Time) string {
+	if t.IsZero() {
+		return ""
+	}
+	return t.Format(time.RFC3339)
+}
+
+func toTaskInfo(info *asynq.TaskInfo, pf PayloadFormatter, rf ResultFormatter) *taskInfo {
+	return &taskInfo{
+		ID:            info.ID,
+		Queue:         info.Queue,
+		Type:          info.Type,
+		Payload:       pf.FormatPayload(info.Type, info.Payload),
+		State:         info.State.String(),
+		MaxRetry:      info.MaxRetry,
+		Retried:       info.Retried,
+		LastErr:       info.LastErr,
+		LastFailedAt:  formatTimeInRFC3339(info.LastFailedAt),
+		Timeout:       int(info.Timeout.Seconds()),
+		Deadline:      formatTimeInRFC3339(info.Deadline),
+		NextProcessAt: formatTimeInRFC3339(info.NextProcessAt),
+		CompletedAt:   formatTimeInRFC3339(info.CompletedAt),
+		Result:        rf.FormatResult("", info.Result),
+		TTL:           int64(taskTTL(info).Seconds()),
+	}
+}
+
+type baseTask struct {
+	ID        string `json:"id"`
+	Type      string `json:"type"`
+	Payload   string `json:"payload"`
+	Queue     string `json:"queue"`
+	MaxRetry  int    `json:"max_retry"`
+	Retried   int    `json:"retried"`
+	LastError string `json:"error_message"`
+}
+
+type activeTask struct {
+	*baseTask
 
 	// Started time indicates when a worker started working on ths task.
 	//
@@ -109,163 +259,242 @@ type ActiveTask struct {
 	// Value is either time formatted in RFC3339 format, or "-" which indicates that
 	// the data is not available yet.
 	Deadline string `json:"deadline"`
+
+	// IsOrphaned indicates whether the task is left in active state with no worker processing it.
+	IsOrphaned bool `json:"is_orphaned"`
 }
 
-func toActiveTask(t *inspeq.ActiveTask) *ActiveTask {
-	base := &BaseTask{
-		ID:        t.ID,
-		Type:      t.Type,
-		Payload:   t.Payload,
-		Queue:     t.Queue,
-		MaxRetry:  t.MaxRetry,
-		Retried:   t.Retried,
-		LastError: t.LastError,
+func toActiveTask(ti *asynq.TaskInfo, pf PayloadFormatter) *activeTask {
+	base := &baseTask{
+		ID:        ti.ID,
+		Type:      ti.Type,
+		Payload:   pf.FormatPayload(ti.Type, ti.Payload),
+		Queue:     ti.Queue,
+		MaxRetry:  ti.MaxRetry,
+		Retried:   ti.Retried,
+		LastError: ti.LastErr,
 	}
-	return &ActiveTask{BaseTask: base}
+	return &activeTask{baseTask: base, IsOrphaned: ti.IsOrphaned}
 }
 
-func toActiveTasks(in []*inspeq.ActiveTask) []*ActiveTask {
-	out := make([]*ActiveTask, len(in))
-	for i, t := range in {
-		out[i] = toActiveTask(t)
+func toActiveTasks(in []*asynq.TaskInfo, pf PayloadFormatter) []*activeTask {
+	out := make([]*activeTask, len(in))
+	for i, ti := range in {
+		out[i] = toActiveTask(ti, pf)
 	}
 	return out
 }
 
-type PendingTask struct {
-	*BaseTask
-	Key string `json:"key"`
+// TODO: Maybe we don't need state specific type, just use taskInfo
+type pendingTask struct {
+	*baseTask
 }
 
-func toPendingTask(t *inspeq.PendingTask) *PendingTask {
-	base := &BaseTask{
-		ID:        t.ID,
-		Type:      t.Type,
-		Payload:   t.Payload,
-		Queue:     t.Queue,
-		MaxRetry:  t.MaxRetry,
-		Retried:   t.Retried,
-		LastError: t.LastError,
+func toPendingTask(ti *asynq.TaskInfo, pf PayloadFormatter) *pendingTask {
+	base := &baseTask{
+		ID:        ti.ID,
+		Type:      ti.Type,
+		Payload:   pf.FormatPayload(ti.Type, ti.Payload),
+		Queue:     ti.Queue,
+		MaxRetry:  ti.MaxRetry,
+		Retried:   ti.Retried,
+		LastError: ti.LastErr,
 	}
-	return &PendingTask{
-		BaseTask: base,
-		Key:      t.Key(),
+	return &pendingTask{
+		baseTask: base,
 	}
 }
 
-func toPendingTasks(in []*inspeq.PendingTask) []*PendingTask {
-	out := make([]*PendingTask, len(in))
-	for i, t := range in {
-		out[i] = toPendingTask(t)
+func toPendingTasks(in []*asynq.TaskInfo, pf PayloadFormatter) []*pendingTask {
+	out := make([]*pendingTask, len(in))
+	for i, ti := range in {
+		out[i] = toPendingTask(ti, pf)
 	}
 	return out
 }
 
-type ScheduledTask struct {
-	*BaseTask
-	Key           string    `json:"key"`
+type aggregatingTask struct {
+	*baseTask
+	Group string `json:"group"`
+}
+
+func toAggregatingTask(ti *asynq.TaskInfo, pf PayloadFormatter) *aggregatingTask {
+	base := &baseTask{
+		ID:        ti.ID,
+		Type:      ti.Type,
+		Payload:   pf.FormatPayload(ti.Type, ti.Payload),
+		Queue:     ti.Queue,
+		MaxRetry:  ti.MaxRetry,
+		Retried:   ti.Retried,
+		LastError: ti.LastErr,
+	}
+	return &aggregatingTask{
+		baseTask: base,
+		Group:    ti.Group,
+	}
+}
+
+func toAggregatingTasks(in []*asynq.TaskInfo, pf PayloadFormatter) []*aggregatingTask {
+	out := make([]*aggregatingTask, len(in))
+	for i, ti := range in {
+		out[i] = toAggregatingTask(ti, pf)
+	}
+	return out
+}
+
+type scheduledTask struct {
+	*baseTask
 	NextProcessAt time.Time `json:"next_process_at"`
 }
 
-func toScheduledTask(t *inspeq.ScheduledTask) *ScheduledTask {
-	base := &BaseTask{
-		ID:        t.ID,
-		Type:      t.Type,
-		Payload:   t.Payload,
-		Queue:     t.Queue,
-		MaxRetry:  t.MaxRetry,
-		Retried:   t.Retried,
-		LastError: t.LastError,
+func toScheduledTask(ti *asynq.TaskInfo, pf PayloadFormatter) *scheduledTask {
+	base := &baseTask{
+		ID:        ti.ID,
+		Type:      ti.Type,
+		Payload:   pf.FormatPayload(ti.Type, ti.Payload),
+		Queue:     ti.Queue,
+		MaxRetry:  ti.MaxRetry,
+		Retried:   ti.Retried,
+		LastError: ti.LastErr,
 	}
-	return &ScheduledTask{
-		BaseTask:      base,
-		Key:           t.Key(),
-		NextProcessAt: t.NextProcessAt,
+	return &scheduledTask{
+		baseTask:      base,
+		NextProcessAt: ti.NextProcessAt,
 	}
 }
 
-func toScheduledTasks(in []*inspeq.ScheduledTask) []*ScheduledTask {
-	out := make([]*ScheduledTask, len(in))
-	for i, t := range in {
-		out[i] = toScheduledTask(t)
+func toScheduledTasks(in []*asynq.TaskInfo, pf PayloadFormatter) []*scheduledTask {
+	out := make([]*scheduledTask, len(in))
+	for i, ti := range in {
+		out[i] = toScheduledTask(ti, pf)
 	}
 	return out
 }
 
-type RetryTask struct {
-	*BaseTask
-	Key           string    `json:"key"`
+type retryTask struct {
+	*baseTask
 	NextProcessAt time.Time `json:"next_process_at"`
 }
 
-func toRetryTask(t *inspeq.RetryTask) *RetryTask {
-	base := &BaseTask{
-		ID:        t.ID,
-		Type:      t.Type,
-		Payload:   t.Payload,
-		Queue:     t.Queue,
-		MaxRetry:  t.MaxRetry,
-		Retried:   t.Retried,
-		LastError: t.LastError,
+func toRetryTask(ti *asynq.TaskInfo, pf PayloadFormatter) *retryTask {
+	base := &baseTask{
+		ID:        ti.ID,
+		Type:      ti.Type,
+		Payload:   pf.FormatPayload(ti.Type, ti.Payload),
+		Queue:     ti.Queue,
+		MaxRetry:  ti.MaxRetry,
+		Retried:   ti.Retried,
+		LastError: ti.LastErr,
 	}
-	return &RetryTask{
-		BaseTask:      base,
-		Key:           t.Key(),
-		NextProcessAt: t.NextProcessAt,
+	return &retryTask{
+		baseTask:      base,
+		NextProcessAt: ti.NextProcessAt,
 	}
 }
 
-func toRetryTasks(in []*inspeq.RetryTask) []*RetryTask {
-	out := make([]*RetryTask, len(in))
-	for i, t := range in {
-		out[i] = toRetryTask(t)
+func toRetryTasks(in []*asynq.TaskInfo, pf PayloadFormatter) []*retryTask {
+	out := make([]*retryTask, len(in))
+	for i, ti := range in {
+		out[i] = toRetryTask(ti, pf)
 	}
 	return out
 }
 
-type ArchivedTask struct {
-	*BaseTask
-	Key          string    `json:"key"`
+type archivedTask struct {
+	*baseTask
 	LastFailedAt time.Time `json:"last_failed_at"`
 }
 
-func toArchivedTask(t *inspeq.ArchivedTask) *ArchivedTask {
-	base := &BaseTask{
-		ID:        t.ID,
-		Type:      t.Type,
-		Payload:   t.Payload,
-		Queue:     t.Queue,
-		MaxRetry:  t.MaxRetry,
-		Retried:   t.Retried,
-		LastError: t.LastError,
+func toArchivedTask(ti *asynq.TaskInfo, pf PayloadFormatter) *archivedTask {
+	base := &baseTask{
+		ID:        ti.ID,
+		Type:      ti.Type,
+		Payload:   pf.FormatPayload(ti.Type, ti.Payload),
+		Queue:     ti.Queue,
+		MaxRetry:  ti.MaxRetry,
+		Retried:   ti.Retried,
+		LastError: ti.LastErr,
 	}
-	return &ArchivedTask{
-		BaseTask:     base,
-		Key:          t.Key(),
-		LastFailedAt: t.LastFailedAt,
+	return &archivedTask{
+		baseTask:     base,
+		LastFailedAt: ti.LastFailedAt,
 	}
 }
 
-func toArchivedTasks(in []*inspeq.ArchivedTask) []*ArchivedTask {
-	out := make([]*ArchivedTask, len(in))
-	for i, t := range in {
-		out[i] = toArchivedTask(t)
+func toArchivedTasks(in []*asynq.TaskInfo, pf PayloadFormatter) []*archivedTask {
+	out := make([]*archivedTask, len(in))
+	for i, ti := range in {
+		out[i] = toArchivedTask(ti, pf)
 	}
 	return out
 }
 
-type SchedulerEntry struct {
-	ID            string        `json:"id"`
-	Spec          string        `json:"spec"`
-	TaskType      string        `json:"task_type"`
-	TaskPayload   asynq.Payload `json:"task_payload"`
-	Opts          []string      `json:"options"`
-	NextEnqueueAt string        `json:"next_enqueue_at"`
+type completedTask struct {
+	*baseTask
+	CompletedAt time.Time `json:"completed_at"`
+	Result      string    `json:"result"`
+	// Number of seconds left for retention (i.e. (CompletedAt + ResultTTL) - Now)
+	TTL int64 `json:"ttl_seconds"`
+}
+
+func toCompletedTask(ti *asynq.TaskInfo, pf PayloadFormatter, rf ResultFormatter) *completedTask {
+	base := &baseTask{
+		ID:        ti.ID,
+		Type:      ti.Type,
+		Payload:   pf.FormatPayload(ti.Type, ti.Payload),
+		Queue:     ti.Queue,
+		MaxRetry:  ti.MaxRetry,
+		Retried:   ti.Retried,
+		LastError: ti.LastErr,
+	}
+	return &completedTask{
+		baseTask:    base,
+		CompletedAt: ti.CompletedAt,
+		TTL:         int64(taskTTL(ti).Seconds()),
+		Result:      rf.FormatResult(ti.Type, ti.Result),
+	}
+}
+
+func toCompletedTasks(in []*asynq.TaskInfo, pf PayloadFormatter, rf ResultFormatter) []*completedTask {
+	out := make([]*completedTask, len(in))
+	for i, ti := range in {
+		out[i] = toCompletedTask(ti, pf, rf)
+	}
+	return out
+}
+
+type groupInfo struct {
+	Group string `json:"group"`
+	Size  int    `json:"size"`
+}
+
+func toGroupInfos(in []*asynq.GroupInfo) []*groupInfo {
+	out := make([]*groupInfo, len(in))
+	for i, g := range in {
+		out[i] = toGroupInfo(g)
+	}
+	return out
+}
+
+func toGroupInfo(in *asynq.GroupInfo) *groupInfo {
+	return &groupInfo{
+		Group: in.Group,
+		Size:  in.Size,
+	}
+}
+
+type schedulerEntry struct {
+	ID            string   `json:"id"`
+	Spec          string   `json:"spec"`
+	TaskType      string   `json:"task_type"`
+	TaskPayload   string   `json:"task_payload"`
+	Opts          []string `json:"options"`
+	NextEnqueueAt string   `json:"next_enqueue_at"`
 	// This field is omitted if there were no previous enqueue events.
 	PrevEnqueueAt string `json:"prev_enqueue_at,omitempty"`
 }
 
-func toSchedulerEntry(e *inspeq.SchedulerEntry) *SchedulerEntry {
+func toSchedulerEntry(e *asynq.SchedulerEntry, pf PayloadFormatter) *schedulerEntry {
 	opts := make([]string, 0) // create a non-nil, empty slice to avoid null in json output
 	for _, o := range e.Opts {
 		opts = append(opts, o.String())
@@ -274,46 +503,46 @@ func toSchedulerEntry(e *inspeq.SchedulerEntry) *SchedulerEntry {
 	if !e.Prev.IsZero() {
 		prev = e.Prev.Format(time.RFC3339)
 	}
-	return &SchedulerEntry{
+	return &schedulerEntry{
 		ID:            e.ID,
 		Spec:          e.Spec,
-		TaskType:      e.Task.Type,
-		TaskPayload:   e.Task.Payload,
+		TaskType:      e.Task.Type(),
+		TaskPayload:   pf.FormatPayload(e.Task.Type(), e.Task.Payload()),
 		Opts:          opts,
 		NextEnqueueAt: e.Next.Format(time.RFC3339),
 		PrevEnqueueAt: prev,
 	}
 }
 
-func toSchedulerEntries(in []*inspeq.SchedulerEntry) []*SchedulerEntry {
-	out := make([]*SchedulerEntry, len(in))
+func toSchedulerEntries(in []*asynq.SchedulerEntry, pf PayloadFormatter) []*schedulerEntry {
+	out := make([]*schedulerEntry, len(in))
 	for i, e := range in {
-		out[i] = toSchedulerEntry(e)
+		out[i] = toSchedulerEntry(e, pf)
 	}
 	return out
 }
 
-type SchedulerEnqueueEvent struct {
+type schedulerEnqueueEvent struct {
 	TaskID     string `json:"task_id"`
 	EnqueuedAt string `json:"enqueued_at"`
 }
 
-func toSchedulerEnqueueEvent(e *inspeq.SchedulerEnqueueEvent) *SchedulerEnqueueEvent {
-	return &SchedulerEnqueueEvent{
+func toSchedulerEnqueueEvent(e *asynq.SchedulerEnqueueEvent) *schedulerEnqueueEvent {
+	return &schedulerEnqueueEvent{
 		TaskID:     e.TaskID,
 		EnqueuedAt: e.EnqueuedAt.Format(time.RFC3339),
 	}
 }
 
-func toSchedulerEnqueueEvents(in []*inspeq.SchedulerEnqueueEvent) []*SchedulerEnqueueEvent {
-	out := make([]*SchedulerEnqueueEvent, len(in))
+func toSchedulerEnqueueEvents(in []*asynq.SchedulerEnqueueEvent) []*schedulerEnqueueEvent {
+	out := make([]*schedulerEnqueueEvent, len(in))
 	for i, e := range in {
 		out[i] = toSchedulerEnqueueEvent(e)
 	}
 	return out
 }
 
-type ServerInfo struct {
+type serverInfo struct {
 	ID             string         `json:"id"`
 	Host           string         `json:"host"`
 	PID            int            `json:"pid"`
@@ -322,11 +551,11 @@ type ServerInfo struct {
 	StrictPriority bool           `json:"strict_priority_enabled"`
 	Started        string         `json:"start_time"`
 	Status         string         `json:"status"`
-	ActiveWorkers  []*WorkerInfo  `json:"active_workers"`
+	ActiveWorkers  []*workerInfo  `json:"active_workers"`
 }
 
-func toServerInfo(info *inspeq.ServerInfo) *ServerInfo {
-	return &ServerInfo{
+func toServerInfo(info *asynq.ServerInfo, pf PayloadFormatter) *serverInfo {
+	return &serverInfo{
 		ID:             info.ID,
 		Host:           info.Host,
 		PID:            info.PID,
@@ -335,34 +564,40 @@ func toServerInfo(info *inspeq.ServerInfo) *ServerInfo {
 		StrictPriority: info.StrictPriority,
 		Started:        info.Started.Format(time.RFC3339),
 		Status:         info.Status,
-		ActiveWorkers:  toWorkerInfoList(info.ActiveWorkers),
+		ActiveWorkers:  toWorkerInfoList(info.ActiveWorkers, pf),
 	}
 }
 
-func toServerInfoList(in []*inspeq.ServerInfo) []*ServerInfo {
-	out := make([]*ServerInfo, len(in))
+func toServerInfoList(in []*asynq.ServerInfo, pf PayloadFormatter) []*serverInfo {
+	out := make([]*serverInfo, len(in))
 	for i, s := range in {
-		out[i] = toServerInfo(s)
+		out[i] = toServerInfo(s, pf)
 	}
 	return out
 }
 
-type WorkerInfo struct {
-	Task    *ActiveTask `json:"task"`
-	Started string      `json:"start_time"`
+type workerInfo struct {
+	TaskID      string `json:"task_id"`
+	Queue       string `json:"queue"`
+	TaskType    string `json:"task_type"`
+	TaskPayload string `json:"task_payload"`
+	Started     string `json:"start_time"`
 }
 
-func toWorkerInfo(info *inspeq.WorkerInfo) *WorkerInfo {
-	return &WorkerInfo{
-		Task:    toActiveTask(info.Task),
-		Started: info.Started.Format(time.RFC3339),
+func toWorkerInfo(info *asynq.WorkerInfo, pf PayloadFormatter) *workerInfo {
+	return &workerInfo{
+		TaskID:      info.TaskID,
+		Queue:       info.Queue,
+		TaskType:    info.TaskType,
+		TaskPayload: pf.FormatPayload(info.TaskType, info.TaskPayload),
+		Started:     info.Started.Format(time.RFC3339),
 	}
 }
 
-func toWorkerInfoList(in []*inspeq.WorkerInfo) []*WorkerInfo {
-	out := make([]*WorkerInfo, len(in))
+func toWorkerInfoList(in []*asynq.WorkerInfo, pf PayloadFormatter) []*workerInfo {
+	out := make([]*workerInfo, len(in))
 	for i, w := range in {
-		out[i] = toWorkerInfo(w)
+		out[i] = toWorkerInfo(w, pf)
 	}
 	return out
 }

example_test.go

@@ -0,0 +1,19 @@
+package asynqmon_test
+
+import (
+	"log"
+	"net/http"
+
+	"github.com/hibiken/asynq"
+	"github.com/hibiken/asynqmon"
+)
+
+func ExampleHTTPHandler() {
+	h := asynqmon.New(asynqmon.Options{
+		RootPath:     "/monitoring",
+		RedisConnOpt: asynq.RedisClientOpt{Addr: ":6379"},
+	})
+
+	http.Handle(h.RootPath(), h)
+	log.Fatal(http.ListenAndServe(":8000", nil)) // visit localhost:8000/monitoring to see asynqmon homepage
+}

go.mod

@@ -1,11 +1,18 @@
-module asynqmon
+module github.com/hibiken/asynqmon
 
 go 1.16
 
 require (
-	github.com/go-redis/redis/v8 v8.4.4
+	github.com/golang/protobuf v1.5.3 // indirect
+	github.com/google/go-cmp v0.5.7
 	github.com/gorilla/mux v1.8.0
-	github.com/hibiken/asynq v0.15.0
+	github.com/hibiken/asynq v0.24.1
+	github.com/hibiken/asynq/x v0.0.0-20211219150637-8dfabfccb3be
+	github.com/prometheus/client_golang v1.11.1
+	github.com/redis/go-redis/v9 v9.0.4
 	github.com/rs/cors v1.7.0
+	github.com/spf13/cast v1.5.0 // indirect
+	golang.org/x/sys v0.7.0 // indirect
+	golang.org/x/time v0.3.0 // indirect
+	google.golang.org/protobuf v1.30.0 // indirect
 )
-

go.sum

@@ -1,120 +1,289 @@
-github.com/cespare/xxhash/v2 v2.1.1 h1:6MnRN8NT7+YBpUIWxHtefFZOKTAPgGjpQSxqLNn0+qY=
+cloud.google.com/go v0.26.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=
+cloud.google.com/go v0.34.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=
+github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
+github.com/alecthomas/template v0.0.0-20160405071501-a0175ee3bccc/go.mod h1:LOuyumcjzFXgccqObfd/Ljyb9UuFJ6TxHnclSeseNhc=
+github.com/alecthomas/template v0.0.0-20190718012654-fb15b899a751/go.mod h1:LOuyumcjzFXgccqObfd/Ljyb9UuFJ6TxHnclSeseNhc=
+github.com/alecthomas/units v0.0.0-20151022065526-2efee857e7cf/go.mod h1:ybxpYRFXyAe+OPACYpWeL0wqObRcbAqCMya13uyzqw0=
+github.com/alecthomas/units v0.0.0-20190717042225-c3de453c63f4/go.mod h1:ybxpYRFXyAe+OPACYpWeL0wqObRcbAqCMya13uyzqw0=
+github.com/alecthomas/units v0.0.0-20190924025748-f65c72e2690d/go.mod h1:rBZYJk541a8SKzHPHnH3zbiI+7dagKZ0cgpgrD7Fyho=
+github.com/beorn7/perks v0.0.0-20180321164747-3a771d992973/go.mod h1:Dwedo/Wpr24TaqPxmxbtue+5NUziq4I4S80YR8gNf3Q=
+github.com/beorn7/perks v1.0.0/go.mod h1:KWe93zE9D1o94FZ5RNwFwVgaQK1VOXiVxmqh+CedLV8=
+github.com/beorn7/perks v1.0.1 h1:VlbKKnNfV8bJzeqoa4cOKqO6bYr3WgKZxO8Z16+hsOM=
+github.com/beorn7/perks v1.0.1/go.mod h1:G2ZrVWU2WbWT9wwq4/hrbKbnv/1ERSJQ0ibhJ6rlkpw=
+github.com/bsm/ginkgo/v2 v2.7.0 h1:ItPMPH90RbmZJt5GtkcNvIRuGEdwlBItdNVoyzaNQao=
+github.com/bsm/ginkgo/v2 v2.7.0/go.mod h1:AiKlXPm7ItEHNc/2+OkrNG4E0ITzojb9/xWzvQ9XZ9w=
+github.com/bsm/gomega v1.26.0 h1:LhQm+AFcgV2M0WyKroMASzAzCAJVpAxQXv4SaI9a69Y=
+github.com/bsm/gomega v1.26.0/go.mod h1:JyEr/xRbxbtgWNi8tIEVPUYZ5Dzef52k01W3YH0H+O0=
+github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
 github.com/cespare/xxhash/v2 v2.1.1/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
+github.com/cespare/xxhash/v2 v2.1.2/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
+github.com/cespare/xxhash/v2 v2.2.0 h1:DC2CZ1Ep5Y4k3ZQ899DldepgrayRUGE6BBZ/cd9Cj44=
+github.com/cespare/xxhash/v2 v2.2.0/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
+github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
+github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f h1:lO4WD4F/rVNCu3HqELle0jiPLLBs70cWOduZpkS1E78=
 github.com/dgryski/go-rendezvous v0.0.0-20200823014737-9f7001d12a5f/go.mod h1:cuUVRXasLTGF7a8hSLbxyZXjz+1KgoB3wDUb6vlszIc=
+github.com/envoyproxy/go-control-plane v0.9.1-0.20191026205805-5f8ba28d4473/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
+github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
+github.com/frankban/quicktest v1.14.3 h1:FJKSZTDHjyhriyC81FLQ0LY93eSai0ZyR/ZIkd3ZUKE=
+github.com/frankban/quicktest v1.14.3/go.mod h1:mgiwOwqx65TmIk1wJ6Q7wvnVMocbUorkibMOrVTHZps=
 github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
-github.com/fsnotify/fsnotify v1.4.9 h1:hsms1Qyu0jgnwNXIxa+/V/PDsU6CfLf6CNO8H7IWoS4=
 github.com/fsnotify/fsnotify v1.4.9/go.mod h1:znqG4EE+3YCdAaPaxE2ZRY/06pZUdp0tY4IgpuI1SZQ=
-github.com/go-redis/redis/v7 v7.4.0 h1:7obg6wUoj05T0EpY0o8B59S9w5yeMWql7sw2kwNW1x4=
-github.com/go-redis/redis/v7 v7.4.0/go.mod h1:JDNMw23GTyLNC4GZu9njt15ctBQVn7xjRfnwdHj/Dcg=
-github.com/go-redis/redis/v8 v8.4.4 h1:fGqgxCTR1sydaKI00oQf3OmkU/DIe/I/fYXvGklCIuc=
-github.com/go-redis/redis/v8 v8.4.4/go.mod h1:nA0bQuF0i5JFx4Ta9RZxGKXFrQ8cRWntra97f0196iY=
+github.com/go-kit/kit v0.8.0/go.mod h1:xBxKIO96dXMWWy0MnWVtmwkA9/13aqxPnvrjFYMA2as=
+github.com/go-kit/kit v0.9.0/go.mod h1:xBxKIO96dXMWWy0MnWVtmwkA9/13aqxPnvrjFYMA2as=
+github.com/go-kit/log v0.1.0/go.mod h1:zbhenjAZHb184qTLMA9ZjW7ThYL0H2mk7Q6pNt4vbaY=
+github.com/go-logfmt/logfmt v0.3.0/go.mod h1:Qt1PoO58o5twSAckw1HlFXLmHsOX5/0LbT9GBnD5lWE=
+github.com/go-logfmt/logfmt v0.4.0/go.mod h1:3RMwSq7FuexP4Kalkev3ejPJsZTpXXBr9+V4qmtdjCk=
+github.com/go-logfmt/logfmt v0.5.0/go.mod h1:wCYkCAKZfumFQihp8CzCvQ3paCTfi41vtzG1KdI/P7A=
+github.com/go-redis/redis/v8 v8.11.2/go.mod h1:DLomh7y2e3ggQXQLd1YgmvIfecPJoFl7WU5SOQ/r06M=
+github.com/go-redis/redis/v8 v8.11.4/go.mod h1:2Z2wHZXdQpCDXEGzqMockDpNyYvi2l4Pxt6RJr792+w=
+github.com/go-stack/stack v1.8.0/go.mod h1:v0f6uXyyMGvRgIKkXu+yp6POWl0qKG85gN/melR3HDY=
+github.com/go-task/slim-sprig v0.0.0-20210107165309-348f09dbbbc0/go.mod h1:fyg7847qk6SyHyPtNmDHnmrv/HOrqktSC+C9fM+CJOE=
+github.com/gogo/protobuf v1.1.1/go.mod h1:r8qH/GZQm5c6nD/R0oafs1akxWv10x8SbQlK7atdtwQ=
+github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfUlaOkMMuAQtPIUF8ecWP5IEl/CR7VP2Q=
+github.com/golang/mock v1.1.1/go.mod h1:oTYuIxOrZwtPieC+H1uAHpcLFnEyAGVDL/k47Jfbm0A=
 github.com/golang/protobuf v1.2.0/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
+github.com/golang/protobuf v1.3.1/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/protobuf v1.3.2/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/protobuf v1.4.0-rc.1/go.mod h1:ceaxUfeHdC40wWswd/P6IGgMaK3YpKi5j83Wpe3EHw8=
 github.com/golang/protobuf v1.4.0-rc.1.0.20200221234624-67d41d38c208/go.mod h1:xKAWHe0F5eneWXFV3EuXVDTCmh+JuBKY0li0aMyXATA=
 github.com/golang/protobuf v1.4.0-rc.2/go.mod h1:LlEzMj4AhA7rCAGe4KMBDvJI+AwstrUpVNzEA03Pprs=
 github.com/golang/protobuf v1.4.0-rc.4.0.20200313231945-b860323f09d0/go.mod h1:WU3c8KckQ9AFe+yFwt9sWVRKCVIyN9cPHBJSNnbL67w=
 github.com/golang/protobuf v1.4.0/go.mod h1:jodUvKwWbYaEsadDk5Fwe5c77LiNKVO9IDvqG2KuDX0=
-github.com/golang/protobuf v1.4.2 h1:+Z5KGCizgyZCbGh1KZqA0fcLLkwbsjIzS4aV2v7wJX0=
+github.com/golang/protobuf v1.4.1/go.mod h1:U8fpvMrcmy5pZrNK1lt4xCsGvpyWQ/VVv6QDs8UjoX8=
 github.com/golang/protobuf v1.4.2/go.mod h1:oDoupMAO8OvCJWAcko0GGGIgR6R6ocIYbsSw735rRwI=
+github.com/golang/protobuf v1.4.3/go.mod h1:oDoupMAO8OvCJWAcko0GGGIgR6R6ocIYbsSw735rRwI=
+github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
+github.com/golang/protobuf v1.5.2/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
+github.com/golang/protobuf v1.5.3 h1:KhyjKVUg7Usr/dYsdSqoFveMYd5ko72D+zANwlG1mmg=
+github.com/golang/protobuf v1.5.3/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
+github.com/google/go-cmp v0.2.0/go.mod h1:oXzfMopK8JAjlY9xF4vHSVASa0yLyX7SntLO5aqRK0M=
 github.com/google/go-cmp v0.3.0/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMywk6iLU=
 github.com/google/go-cmp v0.3.1/go.mod h1:8QqcDgzrUqlUb/G2PQTWiueGozuR1884gddMywk6iLU=
 github.com/google/go-cmp v0.4.0/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
-github.com/google/go-cmp v0.5.4 h1:L8R9j+yAqZuZjsqh/z+F1NCffTKKLShY6zXTItVIZ8M=
+github.com/google/go-cmp v0.5.0/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.5.4/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
-github.com/google/uuid v1.1.1 h1:Gkbcsh/GbpXz7lPftLA3P6TYMwjCLYm83jiFQZF/3gY=
-github.com/google/uuid v1.1.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
+github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
+github.com/google/go-cmp v0.5.7 h1:81/ik6ipDQS2aGcBfIN5dHDB36BwrStyeAQquSYCV4o=
+github.com/google/go-cmp v0.5.7/go.mod h1:n+brtR0CgQNWTVd5ZUFpTBC8YFBDLK/h/bpaJ8/DtOE=
+github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/google/uuid v1.2.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
+github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/gorilla/mux v1.8.0 h1:i40aqfkR1h2SlN9hojwV5ZA91wcXFOvkdNIeFDP5koI=
 github.com/gorilla/mux v1.8.0/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
-github.com/hibiken/asynq v0.14.0 h1:J4qUdkGGrI6XQc2HqtLvqR4kYvp4Rw/Gs48nqpiwOkQ=
-github.com/hibiken/asynq v0.14.0/go.mod h1:yfQUmjFqSBSUIVxTK0WyW4LPj4gpr283UpWb6hKYaqE=
-github.com/hibiken/asynq v0.15.0 h1:fhx1EQJwv3oaCCwetnujwTWHVb51FS50HmDrC9bdhdQ=
-github.com/hibiken/asynq v0.15.0/go.mod h1:yfQUmjFqSBSUIVxTK0WyW4LPj4gpr283UpWb6hKYaqE=
+github.com/hibiken/asynq v0.19.0/go.mod h1:tyc63ojaW8SJ5SBm8mvI4DDONsguP5HE85EEl4Qr5Ig=
+github.com/hibiken/asynq v0.24.1 h1:+5iIEAyA9K/lcSPvx3qoPtsKJeKI5u9aOIvUmSsazEw=
+github.com/hibiken/asynq v0.24.1/go.mod h1:u5qVeSbrnfT+vtG5Mq8ZPzQu/BmCKMHvTGb91uy9Tts=
+github.com/hibiken/asynq/x v0.0.0-20211219150637-8dfabfccb3be h1:89J7WrDuoqFaKoQjZwqPczQXgXZ71liWYM+z9a8sILs=
+github.com/hibiken/asynq/x v0.0.0-20211219150637-8dfabfccb3be/go.mod h1:VmxwMfMKyb6gyv8xG0oOBMXIhquWKPx+zPtbVBd2Q1s=
 github.com/hpcloud/tail v1.0.0/go.mod h1:ab1qPbhIpdTxEkNHXyeSf5vhxWSCs/tWer42PpOxQnU=
-github.com/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
+github.com/jpillora/backoff v1.0.0/go.mod h1:J/6gKK9jxlEcS3zixgDgUAsiuZ7yrSoa/FX5e0EB2j4=
+github.com/json-iterator/go v1.1.6/go.mod h1:+SdeFBvtyEkXs7REEP0seUULqWtbJapLOCVDaaPEHmU=
+github.com/json-iterator/go v1.1.10/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
+github.com/json-iterator/go v1.1.11/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
+github.com/julienschmidt/httprouter v1.2.0/go.mod h1:SYymIcj16QtmaHHD7aYtjjsJG7VTCxuUUipMqKk8s4w=
+github.com/julienschmidt/httprouter v1.3.0/go.mod h1:JR6WtHb+2LUe8TCKY3cZOxFyyO8IZAc4RVcycCCAKdM=
+github.com/konsorten/go-windows-terminal-sequences v1.0.1/go.mod h1:T0+1ngSBFLxvqU3pZ+m/2kptfBszLMUkC4ZK/EgS/cQ=
+github.com/konsorten/go-windows-terminal-sequences v1.0.3/go.mod h1:T0+1ngSBFLxvqU3pZ+m/2kptfBszLMUkC4ZK/EgS/cQ=
+github.com/kr/logfmt v0.0.0-20140226030751-b84e30acd515/go.mod h1:+0opPa2QZZtGFBFZlji/RkVcI2GknAs/DXo4wKdlNEc=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
+github.com/kr/pretty v0.3.0 h1:WgNl7dwNpEZ6jJ9k1snq4pZsg7DOEN8hP9Xw0Tsjwk0=
+github.com/kr/pretty v0.3.0/go.mod h1:640gp4NfQd8pI5XOwp5fnNeVWj67G7CFk/SaSQn7NBk=
 github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
-github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
 github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
-github.com/nxadm/tail v1.4.4 h1:DQuhQpB1tVlglWS2hLQ5OV6B5r8aGxSrPc5Qo6uTN78=
+github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
+github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
+github.com/matttproud/golang_protobuf_extensions v1.0.1 h1:4hp9jkHxhMHkqkrB3Ix0jegS5sx/RkqARlsWZ6pIwiU=
+github.com/matttproud/golang_protobuf_extensions v1.0.1/go.mod h1:D8He9yQNgCq6Z5Ld7szi9bcBfOoFv/3dc6xSMkL2PC0=
+github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
+github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
+github.com/modern-go/reflect2 v0.0.0-20180701023420-4b7aa43c6742/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
+github.com/modern-go/reflect2 v1.0.1/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
+github.com/mwitkow/go-conntrack v0.0.0-20161129095857-cc309e4a2223/go.mod h1:qRWi+5nqEBWmkhHvq77mSJWrCKwh8bxhgT7d/eI7P4U=
+github.com/mwitkow/go-conntrack v0.0.0-20190716064945-2f068394615f/go.mod h1:qRWi+5nqEBWmkhHvq77mSJWrCKwh8bxhgT7d/eI7P4U=
 github.com/nxadm/tail v1.4.4/go.mod h1:kenIhsEOeOJmVchQTgglprH7qJGnHDVpk1VPCcaMI8A=
+github.com/nxadm/tail v1.4.8/go.mod h1:+ncqLTQzXmGhMZNUePPaPqPvBxHAIsmXswZKocGu+AU=
 github.com/onsi/ginkgo v1.6.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
-github.com/onsi/ginkgo v1.10.1/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
 github.com/onsi/ginkgo v1.12.1/go.mod h1:zj2OWP4+oCPe1qIXoGWkgMRwljMUYCdkwsT2108oapk=
-github.com/onsi/ginkgo v1.14.2 h1:8mVmC9kjFFmA8H4pKMUhcblgifdkOIXPvbhN1T36q1M=
-github.com/onsi/ginkgo v1.14.2/go.mod h1:iSB4RoI2tjJc9BBv4NKIKWKya62Rps+oPG/Lv9klQyY=
-github.com/onsi/gomega v1.7.0/go.mod h1:ex+gbHU/CVuBBDIJjb2X0qEXbFg53c61hWP/1CpauHY=
+github.com/onsi/ginkgo v1.15.0/go.mod h1:hF8qUzuuC8DJGygJH3726JnCZX4MYbRB8yFfISqnKUg=
+github.com/onsi/ginkgo v1.16.4/go.mod h1:dX+/inL/fNMqNlz0e9LfyB9TswhZpCVdJM/Z6Vvnwo0=
 github.com/onsi/gomega v1.7.1/go.mod h1:XdKZgCCFLUoM/7CFJVPcG8C1xQ1AJ0vpAezJrB7JYyY=
 github.com/onsi/gomega v1.10.1/go.mod h1:iN09h71vgCQne3DLsj+A5owkum+a2tYe+TOCB1ybHNo=
-github.com/onsi/gomega v1.10.4 h1:NiTx7EEvBzu9sFOD1zORteLSt3o8gnlvZZwSE9TnY9U=
-github.com/onsi/gomega v1.10.4/go.mod h1:g/HbgYopi++010VEqkFgJHKC09uJiW9UkXvMUuKHUCQ=
-github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/onsi/gomega v1.10.5/go.mod h1:gza4q3jKQJijlu05nKWRCW/GavJumGt8aNRxWg7mt48=
+github.com/onsi/gomega v1.16.0/go.mod h1:HnhC7FXeEQY45zxNK3PPoIUhzk/80Xly9PcubAlGdZY=
+github.com/pkg/errors v0.8.0/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
+github.com/pkg/errors v0.8.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
+github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/prometheus/client_golang v0.9.1/go.mod h1:7SWBe2y4D6OKWSNQJUaRYU/AaXPKyh/dDVn+NZz0KFw=
+github.com/prometheus/client_golang v1.0.0/go.mod h1:db9x61etRT2tGnBNRi70OPL5FsnadC4Ky3P0J6CfImo=
+github.com/prometheus/client_golang v1.7.1/go.mod h1:PY5Wy2awLA44sXw4AOSfFBetzPP4j5+D6mVACh+pe2M=
+github.com/prometheus/client_golang v1.11.0/go.mod h1:Z6t4BnS23TR94PD6BsDNk8yVqroYurpAkEiz0P2BEV0=
+github.com/prometheus/client_golang v1.11.1 h1:+4eQaD7vAZ6DsfsxB15hbE0odUjGI5ARs9yskGu1v4s=
+github.com/prometheus/client_golang v1.11.1/go.mod h1:Z6t4BnS23TR94PD6BsDNk8yVqroYurpAkEiz0P2BEV0=
+github.com/prometheus/client_model v0.0.0-20180712105110-5c3871d89910/go.mod h1:MbSGuTsp3dbXC40dX6PRTWyKYBIrTGTE9sqQNg2J8bo=
+github.com/prometheus/client_model v0.0.0-20190129233127-fd36f4220a90/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
+github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
+github.com/prometheus/client_model v0.2.0 h1:uq5h0d+GuxiXLJLNABMgp2qUWDPiLvgCzz2dUR+/W/M=
+github.com/prometheus/client_model v0.2.0/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
+github.com/prometheus/common v0.4.1/go.mod h1:TNfzLD0ON7rHzMJeJkieUDPYmFC7Snx/y86RQel1bk4=
+github.com/prometheus/common v0.10.0/go.mod h1:Tlit/dnDKsSWFlCLTWaA1cyBgKHSMdTB80sz/V91rCo=
+github.com/prometheus/common v0.26.0 h1:iMAkS2TDoNWnKM+Kopnx/8tnEStIfpYA0ur0xQzzhMQ=
+github.com/prometheus/common v0.26.0/go.mod h1:M7rCNAaPfAosfx8veZJCuw84e35h3Cfd9VFqTh1DIvc=
+github.com/prometheus/procfs v0.0.0-20181005140218-185b4288413d/go.mod h1:c3At6R/oaqEKCNdg8wHV1ftS6bRYblBhIjjI8uT2IGk=
+github.com/prometheus/procfs v0.0.2/go.mod h1:TjEm7ze935MbeOT/UhFTIMYKhuLP4wbCsTZCD3I8kEA=
+github.com/prometheus/procfs v0.1.3/go.mod h1:lV6e/gmhEcM9IjHGsFOCxxuZ+z1YqCvr4OA4YeYWdaU=
+github.com/prometheus/procfs v0.6.0 h1:mxy4L2jP6qMonqmq+aTtOx1ifVWUgG/TAmntgbh3xv4=
+github.com/prometheus/procfs v0.6.0/go.mod h1:cz+aTbrPOrUb4q7XlbU9ygM+/jj0fzG6c1xBZuNvfVA=
+github.com/redis/go-redis/v9 v9.0.3/go.mod h1:WqMKv5vnQbRuZstUwxQI195wHy+t4PuXDOjzMvcuQHk=
+github.com/redis/go-redis/v9 v9.0.4 h1:FC82T+CHJ/Q/PdyLW++GeCO+Ol59Y4T7R4jbgjvktgc=
+github.com/redis/go-redis/v9 v9.0.4/go.mod h1:WqMKv5vnQbRuZstUwxQI195wHy+t4PuXDOjzMvcuQHk=
 github.com/robfig/cron/v3 v3.0.1 h1:WdRxkvbJztn8LMz/QEvLN5sBU+xKpSqwwUO1Pjr4qDs=
 github.com/robfig/cron/v3 v3.0.1/go.mod h1:eQICP3HwyT7UooqI/z+Ov+PtYAWygg1TEWWzGIFLtro=
+github.com/rogpeppe/go-internal v1.6.1 h1:/FiVV8dS/e+YqF2JvO3yXRFbBLTIuSDkuC7aBOAvL+k=
+github.com/rogpeppe/go-internal v1.6.1/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
 github.com/rs/cors v1.7.0 h1:+88SsELBHx5r+hZ8TCkggzSstaWNbDvThkVK8H6f9ik=
 github.com/rs/cors v1.7.0/go.mod h1:gFx+x8UowdsKA9AchylcLynDq+nNFfI8FkUZdN/jGCU=
-github.com/spf13/cast v1.3.1 h1:nFm6S0SMdyzrzcmThSipiEubIDy8WEXKNZ0UOgiRpng=
+github.com/sirupsen/logrus v1.2.0/go.mod h1:LxeOpSwHxABJmUn/MG1IvRgCAasNZTLOkJPxbbu5VWo=
+github.com/sirupsen/logrus v1.4.2/go.mod h1:tLMulIdttU9McNUspp0xgXVQah82FyeX6MwdIuYE2rE=
+github.com/sirupsen/logrus v1.6.0/go.mod h1:7uNnSEd1DgxDLC74fIahvMZmmYsHGZGEOFrfsX/uA88=
 github.com/spf13/cast v1.3.1/go.mod h1:Qx5cxh0v+4UWYiBimWS+eyWzqEqokIECu5etghLkUJE=
+github.com/spf13/cast v1.5.0 h1:rj3WzYc11XZaIZMPKmwP96zkFEnnAmV8s6XbB2aY32w=
+github.com/spf13/cast v1.5.0/go.mod h1:SpXXQ5YoyJw6s3/6cMTQuxvgRl3PCJiyaX9p6b155UU=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.1.1/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/testify v1.2.2/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXfy6kDkUVs=
-github.com/stretchr/testify v1.6.1 h1:hDPOHmpOpP40lSULcqw7IrRb/u7w6RpDC9399XyoNd0=
+github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
+github.com/stretchr/testify v1.5.1/go.mod h1:5W2xD1RspED5o8YsWQXVCued0rvSQ+mT+I5cxcmMvtA=
 github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-go.opentelemetry.io/otel v0.15.0 h1:CZFy2lPhxd4HlhZnYK8gRyDotksO3Ip9rBweY1vVYJw=
-go.opentelemetry.io/otel v0.15.0/go.mod h1:e4GKElweB8W2gWUqbghw0B8t5MCTccc9212eNHnOHwA=
-go.uber.org/goleak v0.10.0 h1:G3eWbSNIskeRqtsN/1uI5B+eP73y3JUuBsv9AZjehb4=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
+github.com/yuin/goldmark v1.3.5/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1Zlc8k=
 go.uber.org/goleak v0.10.0/go.mod h1:VCZuO8V8mFPlL0F5J5GK1rtHV3DrFcQ1R8ryq7FK0aI=
+go.uber.org/goleak v1.1.12 h1:gZAh5/EyT/HQwlpkCy6wTpqfH9H8Lz8zbm3dZh+OyzA=
+go.uber.org/goleak v1.1.12/go.mod h1:cwTWslyiVhfpKIDGSZEM2HlOvcqm+tG4zioyIeLoqMQ=
+golang.org/x/crypto v0.0.0-20180904163835-0709b304e793/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
+golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
+golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
+golang.org/x/lint v0.0.0-20190227174305-5b3e6a55c961/go.mod h1:wehouNa3lNwaWXcvxsM5YxQ5yQlVC4a0KAMCusXpPoU=
+golang.org/x/lint v0.0.0-20190313153728-d0100b6bd8b3/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
+golang.org/x/lint v0.0.0-20190930215403-16217165b5de/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
+golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
+golang.org/x/mod v0.4.2/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
+golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180906233101-161cd47e91fd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20181114220301-adae6a3d119a/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20190108225652-1e06a53dbb7e/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20190213061140-3a22650c66bd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
-golang.org/x/net v0.0.0-20190923162816-aa69164e4478/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20190613194153-d28f0bde5980/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20200520004742-59133d7f0dd7/go.mod h1:qpuaurCH72eLCgpAm/N6yyVIVM9cpaDIP3A8BGJEC5A=
-golang.org/x/net v0.0.0-20201202161906-c7110b5ffcbb h1:eBmm0M9fYhWpKZLjQUUKka/LtIxf46G4fxeEz5KJr9U=
+golang.org/x/net v0.0.0-20200625001655-4c5254603344/go.mod h1:/O7V0waA8r7cgGh81Ro3o1hOxt32SMVPicZroKQ2sZA=
+golang.org/x/net v0.0.0-20201021035429-f5854403a974/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
 golang.org/x/net v0.0.0-20201202161906-c7110b5ffcbb/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
+golang.org/x/net v0.0.0-20210405180319-a5a99cb37ef4/go.mod h1:p54w0d4576C0XHj96bSt6lcn1PtDYWL6XObtHCRCNQM=
+golang.org/x/net v0.0.0-20210428140749-89ef3d95e781/go.mod h1:OJAsFXCWl8Ukc7SiCT/9KSuxbyM7479/AVlXFRxuMCk=
+golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
+golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20181108010431-42b317875d0f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20181221193216-37e7f081c4d4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20190911185100-cd5d95a43a6e/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20201207232520-09787c993a3a/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20210220032951-036812b2e83c/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20180905080454-ebe1bf3edb33/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20180909124046-d0be0721c37e/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20181116152217-5ac8a444bdc5/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20190422165155-953cdadca894/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190904154756-749cb33beabd/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20191005200804-aed5e4c7ecf9/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20191010194322-b09406accb47/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20191120155948-bd437916bb0e/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20191204072324-ce4227a45e2e/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200106162015-b016eb3dc98e/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200323222414-85ca7c5b95cd/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20200519105757-fe76b779f299/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f h1:+Nyd8tzPX9R7BWHguqsrbFdRx3WQ/1ib8I44HXV5yTA=
+golang.org/x/sys v0.0.0-20200615200032-f1bc736245b1/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200625212154-ddb9806d33ae/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210112080510-489259a85091/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210124154548-22da62e12c0c/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210330210617-4fbd30eecc44/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210510120138-977fb7262007/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20210603081109-ebe580a85c40/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20211216021012-1d35b9e2eb4e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.7.0 h1:3jlCCIQZPdOYu1h8BkNvLz8Kgwtae2cagcG/VamtZRU=
+golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
-golang.org/x/text v0.3.3 h1:cokOdA+Jmi5PJGXLlLllQSgYigAEfHXJAERHVMaCc2k=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/time v0.0.0-20190308202827-9d24e82272b4 h1:SvFZT6jyqRaOeXpc5h/JSfZenJ2O330aBsf7JfSUXmQ=
+golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
+golang.org/x/time v0.3.0 h1:rg5rLMjNzMS1RkNLzCG38eapWhnYLFYXDXj2gOlr8j4=
+golang.org/x/time v0.3.0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543 h1:E7g+9GITq07hpfrRu66IVDexMakfv52eLZ2CXBWiKr4=
+golang.org/x/tools v0.0.0-20190114222345-bf090417da8b/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20190226205152-f727befe758c/go.mod h1:9Yl7xja0Znq3iFh3HoIrodX9oNMXvdceNzlUR8zjMvY=
+golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
+golang.org/x/tools v0.0.0-20190524140312-2c0ae7006135/go.mod h1:RgjU9mgBXZiqYHBnxXauZ1Gv1EHHAz9KjViQ78xBX0Q=
+golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.0.0-20201224043029-2b0845dc783e/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
+golang.org/x/tools v0.1.5/go.mod h1:o0xws9oXOQQZyjljx8fwUC0k7L1pTE6eaCbjGeHmOkk=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 h1:go1bK/D/BFZV2I8cIQd1NKEZ+0owSTG1fDTci4IqFcE=
+golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+google.golang.org/appengine v1.1.0/go.mod h1:EbEs0AVv82hx2wNQdGPgUI5lhzA/G0D9YwlJXL52JkM=
+google.golang.org/appengine v1.4.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7/EB5XEv4=
+google.golang.org/genproto v0.0.0-20180817151627-c66870c02cf8/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc=
+google.golang.org/genproto v0.0.0-20190819201941-24fa4b261c55/go.mod h1:DMBHOl98Agz4BDEuKkezgsaosCRResVns1a3J2ZsMNc=
+google.golang.org/genproto v0.0.0-20200526211855-cb27e3aa2013/go.mod h1:NbSheEEYHJ7i3ixzK3sjbqSGDJWnxyFXZblF3eUsNvo=
+google.golang.org/grpc v1.19.0/go.mod h1:mqu4LbDTu4XGKhr4mRzUsmM4RtVoemTSY81AxZiDr8c=
+google.golang.org/grpc v1.23.0/go.mod h1:Y5yQAOtifL1yxbo5wqy6BxZv8vAUGQwXBOALyacEbxg=
+google.golang.org/grpc v1.27.0/go.mod h1:qbnxyOmOxrQa7FizSgH+ReBfzJrCY1pSN7KXBS8abTk=
 google.golang.org/protobuf v0.0.0-20200109180630-ec00e32a8dfd/go.mod h1:DFci5gLYBciE7Vtevhsrf46CRTquxDuWsQurQQe4oz8=
 google.golang.org/protobuf v0.0.0-20200221191635-4d8936d0db64/go.mod h1:kwYJMbMJ01Woi6D6+Kah6886xMZcty6N08ah7+eCXa0=
 google.golang.org/protobuf v0.0.0-20200228230310-ab0ca4ff8a60/go.mod h1:cfTl7dwQJ+fmap5saPgwCLgHXTUD7jkjRqWcaiX5VyM=
 google.golang.org/protobuf v1.20.1-0.20200309200217-e05f789c0967/go.mod h1:A+miEFZTKqfCUM6K7xSMQL9OKL/b6hQv+e19PK+JZNE=
 google.golang.org/protobuf v1.21.0/go.mod h1:47Nbq4nVaFHyn7ilMalzfO3qCViNmqZ2kzikPIcrTAo=
-google.golang.org/protobuf v1.23.0 h1:4MY060fB1DLGMB/7MBTLnwQUY6+F09GEiz6SsrNqyzM=
+google.golang.org/protobuf v1.22.0/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
 google.golang.org/protobuf v1.23.0/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
+google.golang.org/protobuf v1.23.1-0.20200526195155-81db48ad09cc/go.mod h1:EGpADcykh3NcUnDUJcl1+ZksZNG86OlYog2l/sGQquU=
+google.golang.org/protobuf v1.25.0/go.mod h1:9JNX74DMeImyA3h4bdi1ymwjUzf21/xIlbajtzgsN7c=
+google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
+google.golang.org/protobuf v1.26.0/go.mod h1:9q0QmTI4eRPtz6boOQmLYwt+qCgq0jsYwAQnmE0givc=
+google.golang.org/protobuf v1.30.0 h1:kPPoIgf3TsEvrm0PFe15JQ+570QVxYzEvvHqChK+cng=
+google.golang.org/protobuf v1.30.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
+gopkg.in/alecthomas/kingpin.v2 v2.2.6/go.mod h1:FMv+mEhP44yOT+4EoQTLFTRgOQ1FBLkstjWtayDeSgw=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15 h1:YR8cESwS4TdDjEe65xsg0ogRM/Nc3DYOhEAlW+xobZo=
+gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/errgo.v2 v2.1.0/go.mod h1:hNsd1EY+bozCKY1Ytp96fpM3vjJbqLJn88ws8XvfDNI=
 gopkg.in/fsnotify.v1 v1.4.7/go.mod h1:Tz8NjZHkW78fSQdbUxIjBTcgA1z1m8ZHf0WmKUhAMys=
-gopkg.in/tomb.v1 v1.0.0-20141024135613-dd632973f1e7 h1:uRGJdciOHaEIrze2W8Q3AKkepLTh2hOroT7a+7czfdQ=
 gopkg.in/tomb.v1 v1.0.0-20141024135613-dd632973f1e7/go.mod h1:dt/ZhP58zS4L8KSrWDmTeBkI65Dw0HsyUHuEVlX15mw=
 gopkg.in/yaml.v2 v2.2.1/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
+gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v2 v2.2.4/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
-gopkg.in/yaml.v2 v2.2.7/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
-gopkg.in/yaml.v2 v2.3.0 h1:clyUAQHOM3G0M3f5vQj7LuJrETvjVot3Z5el9nffUtU=
+gopkg.in/yaml.v2 v2.2.5/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
-gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c h1:dUUwHk2QECo/6vqA44rthZ8ie2QXMNeKRTHCNY2nXvo=
+gopkg.in/yaml.v2 v2.4.0/go.mod h1:RDklbk79AGWmwhnvt/jBztapEOGDOx6ZbXqjP6csGnQ=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
+honnef.co/go/tools v0.0.0-20190523083050-ea95bdfd59fc/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=

group_handlers.go

@@ -0,0 +1,40 @@
+package asynqmon
+
+import (
+	"encoding/json"
+	"net/http"
+
+	"github.com/gorilla/mux"
+	"github.com/hibiken/asynq"
+)
+
+type listGroupsResponse struct {
+	Queue  *queueStateSnapshot `json:"stats"`
+	Groups []*groupInfo        `json:"groups"`
+}
+
+func newListGroupsHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		qname := mux.Vars(r)["qname"]
+
+		groups, err := inspector.Groups(qname)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		qinfo, err := inspector.GetQueueInfo(qname)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		resp := listGroupsResponse{
+			Queue:  toQueueStateSnapshot(qinfo),
+			Groups: toGroupInfos(groups),
+		}
+		if err := json.NewEncoder(w).Encode(resp); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+	}
+}

handler.go

@@ -0,0 +1,237 @@
+package asynqmon
+
+import (
+	"embed"
+	"fmt"
+	"net/http"
+	"strings"
+
+	"github.com/gorilla/mux"
+	"github.com/hibiken/asynq"
+	"github.com/redis/go-redis/v9"
+)
+
+// Options are used to configure HTTPHandler.
+type Options struct {
+	// URL path the handler is responsible for.
+	// The path is used for the homepage of asynqmon, and every other page is rooted in this subtree.
+	//
+	// This field is optional. Default is "/".
+	RootPath string
+
+	// RedisConnOpt specifies the connection to a redis-server or redis-cluster.
+	//
+	// This field is required.
+	RedisConnOpt asynq.RedisConnOpt
+
+	// PayloadFormatter is used to convert payload bytes to string shown in the UI.
+	//
+	// This field is optional.
+	PayloadFormatter PayloadFormatter
+
+	// ResultFormatter is used to convert result bytes to string shown in the UI.
+	//
+	// This field is optional.
+	ResultFormatter ResultFormatter
+
+	// PrometheusAddress specifies the address of the Prometheus to connect to.
+	//
+	// This field is optional. If this field is set, asynqmon will query the Prometheus server
+	// to get the time series data about queue metrics and show them in the web UI.
+	PrometheusAddress string
+
+	// Set ReadOnly to true to restrict user to view-only mode.
+	ReadOnly bool
+}
+
+// HTTPHandler is a http.Handler for asynqmon application.
+type HTTPHandler struct {
+	router   *mux.Router
+	closers  []func() error
+	rootPath string // the value should not have the trailing slash
+}
+
+func (h *HTTPHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	h.router.ServeHTTP(w, r)
+}
+
+// New creates a HTTPHandler with the given options.
+func New(opts Options) *HTTPHandler {
+	if opts.RedisConnOpt == nil {
+		panic("asynqmon.New: RedisConnOpt field is required")
+	}
+	rc, ok := opts.RedisConnOpt.MakeRedisClient().(redis.UniversalClient)
+	if !ok {
+		panic(fmt.Sprintf("asnyqmon.New: unsupported RedisConnOpt type %T", opts.RedisConnOpt))
+	}
+	i := asynq.NewInspector(opts.RedisConnOpt)
+
+	// Make sure that RootPath starts with a slash if provided.
+	if opts.RootPath != "" && !strings.HasPrefix(opts.RootPath, "/") {
+		panic(fmt.Sprintf("asynqmon.New: RootPath must start with a slash"))
+	}
+	// Remove tailing slash from RootPath.
+	opts.RootPath = strings.TrimSuffix(opts.RootPath, "/")
+
+	return &HTTPHandler{
+		router:   muxRouter(opts, rc, i),
+		closers:  []func() error{rc.Close, i.Close},
+		rootPath: opts.RootPath,
+	}
+}
+
+// Close closes connections to redis.
+func (h *HTTPHandler) Close() error {
+	for _, f := range h.closers {
+		if err := f(); err != nil {
+			return err
+		}
+	}
+	return nil
+}
+
+// RootPath returns the root URL path used for asynqmon application.
+// Returned path string does not have the trailing slash.
+func (h *HTTPHandler) RootPath() string {
+	return h.rootPath
+}
+
+//go:embed ui/build/*
+var staticContents embed.FS
+
+func muxRouter(opts Options, rc redis.UniversalClient, inspector *asynq.Inspector) *mux.Router {
+	router := mux.NewRouter().PathPrefix(opts.RootPath).Subrouter()
+
+	var payloadFmt PayloadFormatter = DefaultPayloadFormatter
+	if opts.PayloadFormatter != nil {
+		payloadFmt = opts.PayloadFormatter
+	}
+
+	var resultFmt ResultFormatter = DefaultResultFormatter
+	if opts.ResultFormatter != nil {
+		resultFmt = opts.ResultFormatter
+	}
+
+	api := router.PathPrefix("/api").Subrouter()
+
+	// Queue endpoints.
+	api.HandleFunc("/queues", newListQueuesHandlerFunc(inspector)).Methods("GET")
+	api.HandleFunc("/queues/{qname}", newGetQueueHandlerFunc(inspector)).Methods("GET")
+	api.HandleFunc("/queues/{qname}", newDeleteQueueHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}:pause", newPauseQueueHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}:resume", newResumeQueueHandlerFunc(inspector)).Methods("POST")
+
+	// Queue Historical Stats endpoint.
+	api.HandleFunc("/queue_stats", newListQueueStatsHandlerFunc(inspector)).Methods("GET")
+
+	// Task endpoints.
+	api.HandleFunc("/queues/{qname}/active_tasks", newListActiveTasksHandlerFunc(inspector, payloadFmt)).Methods("GET")
+	api.HandleFunc("/queues/{qname}/active_tasks/{task_id}:cancel", newCancelActiveTaskHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/active_tasks:cancel_all", newCancelAllActiveTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/active_tasks:batch_cancel", newBatchCancelActiveTasksHandlerFunc(inspector)).Methods("POST")
+
+	api.HandleFunc("/queues/{qname}/pending_tasks", newListPendingTasksHandlerFunc(inspector, payloadFmt)).Methods("GET")
+	api.HandleFunc("/queues/{qname}/pending_tasks/{task_id}", newDeleteTaskHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/pending_tasks:delete_all", newDeleteAllPendingTasksHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/pending_tasks:batch_delete", newBatchDeleteTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/pending_tasks/{task_id}:archive", newArchiveTaskHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/pending_tasks:archive_all", newArchiveAllPendingTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/pending_tasks:batch_archive", newBatchArchiveTasksHandlerFunc(inspector)).Methods("POST")
+
+	api.HandleFunc("/queues/{qname}/scheduled_tasks", newListScheduledTasksHandlerFunc(inspector, payloadFmt)).Methods("GET")
+	api.HandleFunc("/queues/{qname}/scheduled_tasks/{task_id}", newDeleteTaskHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/scheduled_tasks:delete_all", newDeleteAllScheduledTasksHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/scheduled_tasks:batch_delete", newBatchDeleteTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/scheduled_tasks/{task_id}:run", newRunTaskHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/scheduled_tasks:run_all", newRunAllScheduledTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/scheduled_tasks:batch_run", newBatchRunTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/scheduled_tasks/{task_id}:archive", newArchiveTaskHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/scheduled_tasks:archive_all", newArchiveAllScheduledTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/scheduled_tasks:batch_archive", newBatchArchiveTasksHandlerFunc(inspector)).Methods("POST")
+
+	api.HandleFunc("/queues/{qname}/retry_tasks", newListRetryTasksHandlerFunc(inspector, payloadFmt)).Methods("GET")
+	api.HandleFunc("/queues/{qname}/retry_tasks/{task_id}", newDeleteTaskHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/retry_tasks:delete_all", newDeleteAllRetryTasksHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/retry_tasks:batch_delete", newBatchDeleteTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/retry_tasks/{task_id}:run", newRunTaskHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/retry_tasks:run_all", newRunAllRetryTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/retry_tasks:batch_run", newBatchRunTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/retry_tasks/{task_id}:archive", newArchiveTaskHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/retry_tasks:archive_all", newArchiveAllRetryTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/retry_tasks:batch_archive", newBatchArchiveTasksHandlerFunc(inspector)).Methods("POST")
+
+	api.HandleFunc("/queues/{qname}/archived_tasks", newListArchivedTasksHandlerFunc(inspector, payloadFmt)).Methods("GET")
+	api.HandleFunc("/queues/{qname}/archived_tasks/{task_id}", newDeleteTaskHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/archived_tasks:delete_all", newDeleteAllArchivedTasksHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/archived_tasks:batch_delete", newBatchDeleteTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/archived_tasks/{task_id}:run", newRunTaskHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/archived_tasks:run_all", newRunAllArchivedTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/archived_tasks:batch_run", newBatchRunTasksHandlerFunc(inspector)).Methods("POST")
+
+	api.HandleFunc("/queues/{qname}/completed_tasks", newListCompletedTasksHandlerFunc(inspector, payloadFmt, resultFmt)).Methods("GET")
+	api.HandleFunc("/queues/{qname}/completed_tasks/{task_id}", newDeleteTaskHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/completed_tasks:delete_all", newDeleteAllCompletedTasksHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/completed_tasks:batch_delete", newBatchDeleteTasksHandlerFunc(inspector)).Methods("POST")
+
+	api.HandleFunc("/queues/{qname}/groups/{gname}/aggregating_tasks", newListAggregatingTasksHandlerFunc(inspector, payloadFmt)).Methods("GET")
+	api.HandleFunc("/queues/{qname}/groups/{gname}/aggregating_tasks/{task_id}", newDeleteTaskHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/groups/{gname}/aggregating_tasks:delete_all", newDeleteAllAggregatingTasksHandlerFunc(inspector)).Methods("DELETE")
+	api.HandleFunc("/queues/{qname}/groups/{gname}/aggregating_tasks:batch_delete", newBatchDeleteTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/groups/{gname}/aggregating_tasks/{task_id}:run", newRunTaskHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/groups/{gname}/aggregating_tasks:run_all", newRunAllAggregatingTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/groups/{gname}/aggregating_tasks:batch_run", newBatchRunTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/groups/{gname}/aggregating_tasks/{task_id}:archive", newArchiveTaskHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/groups/{gname}/aggregating_tasks:archive_all", newArchiveAllAggregatingTasksHandlerFunc(inspector)).Methods("POST")
+	api.HandleFunc("/queues/{qname}/groups/{gname}/aggregating_tasks:batch_archive", newBatchArchiveTasksHandlerFunc(inspector)).Methods("POST")
+
+	api.HandleFunc("/queues/{qname}/tasks/{task_id}", newGetTaskHandlerFunc(inspector, payloadFmt, resultFmt)).Methods("GET")
+
+	// Groups endponts
+	api.HandleFunc("/queues/{qname}/groups", newListGroupsHandlerFunc(inspector)).Methods("GET")
+
+	// Servers endpoints.
+	api.HandleFunc("/servers", newListServersHandlerFunc(inspector, payloadFmt)).Methods("GET")
+
+	// Scheduler Entry endpoints.
+	api.HandleFunc("/scheduler_entries", newListSchedulerEntriesHandlerFunc(inspector, payloadFmt)).Methods("GET")
+	api.HandleFunc("/scheduler_entries/{entry_id}/enqueue_events", newListSchedulerEnqueueEventsHandlerFunc(inspector)).Methods("GET")
+
+	// Redis info endpoint.
+	switch c := rc.(type) {
+	case *redis.ClusterClient:
+		api.HandleFunc("/redis_info", newRedisClusterInfoHandlerFunc(c, inspector)).Methods("GET")
+	case *redis.Client:
+		api.HandleFunc("/redis_info", newRedisInfoHandlerFunc(c)).Methods("GET")
+	}
+
+	// Time series metrics endpoints.
+	api.HandleFunc("/metrics", newGetMetricsHandlerFunc(http.DefaultClient, opts.PrometheusAddress)).Methods("GET")
+
+	// Restrict APIs when running in read-only mode.
+	if opts.ReadOnly {
+		api.Use(restrictToReadOnly)
+	}
+
+	// Everything else, route to uiAssetsHandler.
+	router.NotFoundHandler = &uiAssetsHandler{
+		rootPath:       opts.RootPath,
+		contents:       staticContents,
+		staticDirPath:  "ui/build",
+		indexFileName:  "index.html",
+		prometheusAddr: opts.PrometheusAddress,
+		readOnly:       opts.ReadOnly,
+	}
+
+	return router
+}
+
+// restrictToReadOnly is a middleware function to restrict users to perform only GET requests.
+func restrictToReadOnly(h http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != "GET" && r.Method != "" {
+			http.Error(w, fmt.Sprintf("API Server is running in read-only mode: %s request is not allowed", r.Method), http.StatusMethodNotAllowed)
+			return
+		}
+		h.ServeHTTP(w, r)
+	})
+}

main.go

@@ -1,204 +0,0 @@
-package main
-
-import (
-	"crypto/tls"
-	"embed"
-	"errors"
-	"flag"
-	"fmt"
-	"io/fs"
-	"log"
-	"net/http"
-	"path/filepath"
-	"time"
-
-	"github.com/go-redis/redis/v8"
-	"github.com/gorilla/mux"
-	"github.com/hibiken/asynq"
-	"github.com/hibiken/asynq/inspeq"
-	"github.com/rs/cors"
-)
-
-// Command-line flags
-var (
-	flagPort          int
-	flagRedisAddr     string
-	flagRedisDB       int
-	flagRedisPassword string
-	flagRedisTLS      string
-)
-
-func init() {
-	flag.IntVar(&flagPort, "port", 8080, "port number to use for web ui server")
-	flag.StringVar(&flagRedisAddr, "redis_addr", "localhost:6379", "address of redis server to connect to")
-	flag.IntVar(&flagRedisDB, "redis_db", 0, "redis database number")
-	flag.StringVar(&flagRedisPassword, "redis_password", "", "password to use when connecting to redis server")
-	flag.StringVar(&flagRedisTLS, "redis_tls", "", "server name for TLS validation used when connecting to redis server")
-}
-
-// staticFileServer implements the http.Handler interface, so we can use it
-// to respond to HTTP requests. The path to the static directory and
-// path to the index file within that static directory are used to
-// serve the SPA in the given static directory.
-type staticFileServer struct {
-	contents      embed.FS
-	staticDirPath string
-	indexFileName string
-}
-
-// ServeHTTP inspects the URL path to locate a file within the static dir
-// on the SPA handler.
-// If path '/' is requested, it will serve the index file, otherwise it will
-// serve the file specified by the URL path.
-func (srv *staticFileServer) ServeHTTP(w http.ResponseWriter, r *http.Request) {
-	// Get the absolute path to prevent directory traversal.
-	path, err := filepath.Abs(r.URL.Path)
-	if err != nil {
-		http.Error(w, err.Error(), http.StatusBadRequest)
-		return
-	}
-
-	if path == "/" {
-		path = srv.indexFilePath()
-	} else {
-		path = filepath.Join(srv.staticDirPath, path)
-	}
-
-	bytes, err := srv.contents.ReadFile(path)
-	// If path is error (e.g. file not exist, path is a directory), serve index file.
-	var pathErr *fs.PathError
-	if errors.As(err, &pathErr) {
-		bytes, err = srv.contents.ReadFile(srv.indexFilePath())
-	}
-	if err != nil {
-		http.Error(w, err.Error(), http.StatusInternalServerError)
-		return
-	}
-
-	if _, err := w.Write(bytes); err != nil {
-		http.Error(w, err.Error(), http.StatusInternalServerError)
-		return
-	}
-}
-
-func (srv *staticFileServer) indexFilePath() string {
-	return filepath.Join(srv.staticDirPath, srv.indexFileName)
-}
-
-//go:embed ui/build/*
-var staticContents embed.FS
-
-func main() {
-	flag.Parse()
-
-	var tlsConfig *tls.Config
-	if flagRedisTLS != "" {
-		tlsConfig = &tls.Config{ServerName: flagRedisTLS}
-	}
-
-	inspector := inspeq.New(asynq.RedisClientOpt{
-		Addr:      flagRedisAddr,
-		DB:        flagRedisDB,
-		Password:  flagRedisPassword,
-		TLSConfig: tlsConfig,
-	})
-	defer inspector.Close()
-
-	rdb := redis.NewClient(&redis.Options{
-		Addr:      flagRedisAddr,
-		DB:        flagRedisDB,
-		Password:  flagRedisPassword,
-		TLSConfig: tlsConfig,
-	})
-	defer rdb.Close()
-
-	router := mux.NewRouter()
-	router.Use(loggingMiddleware)
-
-	api := router.PathPrefix("/api").Subrouter()
-	// Queue endpoints.
-	api.HandleFunc("/queues", newListQueuesHandlerFunc(inspector)).Methods("GET")
-	api.HandleFunc("/queues/{qname}", newGetQueueHandlerFunc(inspector)).Methods("GET")
-	api.HandleFunc("/queues/{qname}", newDeleteQueueHandlerFunc(inspector)).Methods("DELETE")
-	api.HandleFunc("/queues/{qname}:pause", newPauseQueueHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}:resume", newResumeQueueHandlerFunc(inspector)).Methods("POST")
-
-	// Queue Historical Stats endpoint.
-	api.HandleFunc("/queue_stats", newListQueueStatsHandlerFunc(inspector)).Methods("GET")
-
-	// Task endpoints.
-	api.HandleFunc("/queues/{qname}/active_tasks", newListActiveTasksHandlerFunc(inspector)).Methods("GET")
-	api.HandleFunc("/queues/{qname}/active_tasks/{task_id}:cancel", newCancelActiveTaskHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/active_tasks:cancel_all", newCancelAllActiveTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/active_tasks:batch_cancel", newBatchCancelActiveTasksHandlerFunc(inspector)).Methods("POST")
-
-	api.HandleFunc("/queues/{qname}/pending_tasks", newListPendingTasksHandlerFunc(inspector)).Methods("GET")
-	api.HandleFunc("/queues/{qname}/pending_tasks/{task_key}", newDeleteTaskHandlerFunc(inspector)).Methods("DELETE")
-	api.HandleFunc("/queues/{qname}/pending_tasks:delete_all", newDeleteAllPendingTasksHandlerFunc(inspector)).Methods("DELETE")
-	api.HandleFunc("/queues/{qname}/pending_tasks:batch_delete", newBatchDeleteTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/pending_tasks/{task_key}:archive", newArchiveTaskHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/pending_tasks:archive_all", newArchiveAllPendingTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/pending_tasks:batch_archive", newBatchArchiveTasksHandlerFunc(inspector)).Methods("POST")
-
-	api.HandleFunc("/queues/{qname}/scheduled_tasks", newListScheduledTasksHandlerFunc(inspector)).Methods("GET")
-	api.HandleFunc("/queues/{qname}/scheduled_tasks/{task_key}", newDeleteTaskHandlerFunc(inspector)).Methods("DELETE")
-	api.HandleFunc("/queues/{qname}/scheduled_tasks:delete_all", newDeleteAllScheduledTasksHandlerFunc(inspector)).Methods("DELETE")
-	api.HandleFunc("/queues/{qname}/scheduled_tasks:batch_delete", newBatchDeleteTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/scheduled_tasks/{task_key}:run", newRunTaskHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/scheduled_tasks:run_all", newRunAllScheduledTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/scheduled_tasks:batch_run", newBatchRunTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/scheduled_tasks/{task_key}:archive", newArchiveTaskHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/scheduled_tasks:archive_all", newArchiveAllScheduledTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/scheduled_tasks:batch_archive", newBatchArchiveTasksHandlerFunc(inspector)).Methods("POST")
-
-	api.HandleFunc("/queues/{qname}/retry_tasks", newListRetryTasksHandlerFunc(inspector)).Methods("GET")
-	api.HandleFunc("/queues/{qname}/retry_tasks/{task_key}", newDeleteTaskHandlerFunc(inspector)).Methods("DELETE")
-	api.HandleFunc("/queues/{qname}/retry_tasks:delete_all", newDeleteAllRetryTasksHandlerFunc(inspector)).Methods("DELETE")
-	api.HandleFunc("/queues/{qname}/retry_tasks:batch_delete", newBatchDeleteTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/retry_tasks/{task_key}:run", newRunTaskHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/retry_tasks:run_all", newRunAllRetryTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/retry_tasks:batch_run", newBatchRunTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/retry_tasks/{task_key}:archive", newArchiveTaskHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/retry_tasks:archive_all", newArchiveAllRetryTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/retry_tasks:batch_archive", newBatchArchiveTasksHandlerFunc(inspector)).Methods("POST")
-
-	api.HandleFunc("/queues/{qname}/archived_tasks", newListArchivedTasksHandlerFunc(inspector)).Methods("GET")
-	api.HandleFunc("/queues/{qname}/archived_tasks/{task_key}", newDeleteTaskHandlerFunc(inspector)).Methods("DELETE")
-	api.HandleFunc("/queues/{qname}/archived_tasks:delete_all", newDeleteAllArchivedTasksHandlerFunc(inspector)).Methods("DELETE")
-	api.HandleFunc("/queues/{qname}/archived_tasks:batch_delete", newBatchDeleteTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/archived_tasks/{task_key}:run", newRunTaskHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/archived_tasks:run_all", newRunAllArchivedTasksHandlerFunc(inspector)).Methods("POST")
-	api.HandleFunc("/queues/{qname}/archived_tasks:batch_run", newBatchRunTasksHandlerFunc(inspector)).Methods("POST")
-
-	// Servers endpoints.
-	api.HandleFunc("/servers", newListServersHandlerFunc(inspector)).Methods("GET")
-
-	// Scheduler Entry endpoints.
-	api.HandleFunc("/scheduler_entries", newListSchedulerEntriesHandlerFunc(inspector)).Methods("GET")
-	api.HandleFunc("/scheduler_entries/{entry_id}/enqueue_events", newListSchedulerEnqueueEventsHandlerFunc(inspector)).Methods("GET")
-
-	// Redis info endpoint.
-	api.HandleFunc("/redis_info", newRedisInfoHandlerFunc(rdb)).Methods("GET")
-
-	fs := &staticFileServer{
-		contents:      staticContents,
-		staticDirPath: "ui/build",
-		indexFileName: "index.html",
-	}
-	router.PathPrefix("/").Handler(fs)
-
-	c := cors.New(cors.Options{
-		AllowedMethods: []string{"GET", "POST", "DELETE"},
-	})
-	handler := c.Handler(router)
-
-	srv := &http.Server{
-		Handler:      handler,
-		Addr:         fmt.Sprintf(":%d", flagPort),
-		WriteTimeout: 10 * time.Second,
-		ReadTimeout:  10 * time.Second,
-	}
-
-	fmt.Printf("Asynq Monitoring WebUI server is listening on port %d\n", flagPort)
-	log.Fatal(srv.ListenAndServe())
-}

metrics_handler.go

@@ -0,0 +1,230 @@
+package asynqmon
+
+import (
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"net/url"
+	"strconv"
+	"strings"
+	"time"
+)
+
+type getMetricsResponse struct {
+	QueueSize            *json.RawMessage `json:"queue_size"`
+	QueueLatency         *json.RawMessage `json:"queue_latency_seconds"`
+	QueueMemUsgApprox    *json.RawMessage `json:"queue_memory_usage_approx_bytes"`
+	ProcessedPerSecond   *json.RawMessage `json:"tasks_processed_per_second"`
+	FailedPerSecond      *json.RawMessage `json:"tasks_failed_per_second"`
+	ErrorRate            *json.RawMessage `json:"error_rate"`
+	PendingTasksByQueue  *json.RawMessage `json:"pending_tasks_by_queue"`
+	RetryTasksByQueue    *json.RawMessage `json:"retry_tasks_by_queue"`
+	ArchivedTasksByQueue *json.RawMessage `json:"archived_tasks_by_queue"`
+}
+
+type metricsFetchOptions struct {
+	// Specifies the number of seconds to scan for metrics.
+	duration time.Duration
+
+	// Specifies the end time when fetching metrics.
+	endTime time.Time
+
+	// Optional filter to speicify a list of queues to get metrics for.
+	// Empty list indicates no filter (i.e. get metrics for all queues).
+	queues []string
+}
+
+func newGetMetricsHandlerFunc(client *http.Client, prometheusAddr string) http.HandlerFunc {
+	// res is the result of calling a JSON API endpoint.
+	type res struct {
+		query string
+		msg   *json.RawMessage
+		err   error
+	}
+
+	// List of PromQLs.
+	// Strings are used as template to optionally insert queue filter specified by QUEUE_FILTER.
+	const (
+		promQLQueueSize      = "asynq_queue_size{QUEUE_FILTER}"
+		promQLQueueLatency   = "asynq_queue_latency_seconds{QUEUE_FILTER}"
+		promQLMemUsage       = "asynq_queue_memory_usage_approx_bytes{QUEUE_FILTER}"
+		promQLProcessedTasks = "rate(asynq_tasks_processed_total{QUEUE_FILTER}[5m])"
+		promQLFailedTasks    = "rate(asynq_tasks_failed_total{QUEUE_FILTER}[5m])"
+		promQLErrorRate      = "rate(asynq_tasks_failed_total{QUEUE_FILTER}[5m]) / rate(asynq_tasks_processed_total{QUEUE_FILTER}[5m])"
+		promQLPendingTasks   = "asynq_tasks_enqueued_total{state=\"pending\",QUEUE_FILTER}"
+		promQLRetryTasks     = "asynq_tasks_enqueued_total{state=\"retry\",QUEUE_FILTER}"
+		promQLArchivedTasks  = "asynq_tasks_enqueued_total{state=\"archived\",QUEUE_FILTER}"
+	)
+
+	// Optional query params:
+	// `duration_sec`: specifies the number of seconds to scan
+	// `end_time`:     specifies the end_time in Unix time seconds
+	return func(w http.ResponseWriter, r *http.Request) {
+		opts, err := extractMetricsFetchOptions(r)
+		if err != nil {
+			http.Error(w, fmt.Sprintf("invalid query parameter: %v", err), http.StatusBadRequest)
+			return
+		}
+		// List of queries (i.e. promQL) to send to prometheus server.
+		queries := []string{
+			promQLQueueSize,
+			promQLQueueLatency,
+			promQLMemUsage,
+			promQLProcessedTasks,
+			promQLFailedTasks,
+			promQLErrorRate,
+			promQLPendingTasks,
+			promQLRetryTasks,
+			promQLArchivedTasks,
+		}
+		resp := getMetricsResponse{}
+		// Make multiple API calls concurrently
+		n := len(queries)
+		ch := make(chan res, len(queries))
+		for _, q := range queries {
+			go func(q string) {
+				url := buildPrometheusURL(prometheusAddr, q, opts)
+				msg, err := fetchPrometheusMetrics(client, url)
+				ch <- res{q, msg, err}
+			}(q)
+		}
+		for r := range ch {
+			n--
+			if r.err != nil {
+				http.Error(w, fmt.Sprintf("failed to fetch %q: %v", r.query, r.err), http.StatusInternalServerError)
+				return
+			}
+			switch r.query {
+			case promQLQueueSize:
+				resp.QueueSize = r.msg
+			case promQLQueueLatency:
+				resp.QueueLatency = r.msg
+			case promQLMemUsage:
+				resp.QueueMemUsgApprox = r.msg
+			case promQLProcessedTasks:
+				resp.ProcessedPerSecond = r.msg
+			case promQLFailedTasks:
+				resp.FailedPerSecond = r.msg
+			case promQLErrorRate:
+				resp.ErrorRate = r.msg
+			case promQLPendingTasks:
+				resp.PendingTasksByQueue = r.msg
+			case promQLRetryTasks:
+				resp.RetryTasksByQueue = r.msg
+			case promQLArchivedTasks:
+				resp.ArchivedTasksByQueue = r.msg
+			}
+			if n == 0 {
+				break // fetched all metrics
+			}
+		}
+		bytes, err := json.Marshal(resp)
+		if err != nil {
+			http.Error(w, fmt.Sprintf("failed to marshal response into JSON: %v", err), http.StatusInternalServerError)
+			return
+		}
+		if _, err := w.Write(bytes); err != nil {
+			http.Error(w, fmt.Sprintf("failed to write to response: %v", err), http.StatusInternalServerError)
+			return
+		}
+	}
+}
+
+const prometheusAPIPath = "/api/v1/query_range"
+
+func extractMetricsFetchOptions(r *http.Request) (*metricsFetchOptions, error) {
+	opts := &metricsFetchOptions{
+		duration: 60 * time.Minute,
+		endTime:  time.Now(),
+	}
+	q := r.URL.Query()
+	if d := q.Get("duration"); d != "" {
+		val, err := strconv.Atoi(d)
+		if err != nil {
+			return nil, fmt.Errorf("invalid value provided for duration: %q", d)
+		}
+		opts.duration = time.Duration(val) * time.Second
+	}
+	if t := q.Get("endtime"); t != "" {
+		val, err := strconv.Atoi(t)
+		if err != nil {
+			return nil, fmt.Errorf("invalid value provided for end_time: %q", t)
+		}
+		opts.endTime = time.Unix(int64(val), 0)
+	}
+	if qs := q.Get("queues"); qs != "" {
+		opts.queues = strings.Split(qs, ",")
+	}
+	return opts, nil
+}
+
+func buildPrometheusURL(baseAddr, promQL string, opts *metricsFetchOptions) string {
+	var b strings.Builder
+	b.WriteString(strings.TrimSuffix(baseAddr, "/"))
+	b.WriteString(prometheusAPIPath)
+	v := url.Values{}
+	v.Add("query", applyQueueFilter(promQL, opts.queues))
+	v.Add("start", unixTimeString(opts.endTime.Add(-opts.duration)))
+	v.Add("end", unixTimeString(opts.endTime))
+	v.Add("step", strconv.Itoa(int(step(opts).Seconds())))
+	b.WriteString("?")
+	b.WriteString(v.Encode())
+	return b.String()
+}
+
+func applyQueueFilter(promQL string, qnames []string) string {
+	if len(qnames) == 0 {
+		return strings.ReplaceAll(promQL, "QUEUE_FILTER", "")
+	}
+	var b strings.Builder
+	b.WriteString(`queue=~"`)
+	for i, q := range qnames {
+		if i != 0 {
+			b.WriteString("|")
+		}
+		b.WriteString(q)
+	}
+	b.WriteByte('"')
+	return strings.ReplaceAll(promQL, "QUEUE_FILTER", b.String())
+}
+
+func fetchPrometheusMetrics(client *http.Client, url string) (*json.RawMessage, error) {
+	resp, err := client.Get(url)
+	if err != nil {
+		return nil, err
+	}
+	defer resp.Body.Close()
+	bytes, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return nil, err
+	}
+	msg := json.RawMessage(bytes)
+	return &msg, err
+}
+
+// Returns step to use given the fetch options.
+// In general, the longer the duration, longer the each step.
+func step(opts *metricsFetchOptions) time.Duration {
+	if opts.duration <= 6*time.Hour {
+		// maximum number of data points to return: 6h / 10s = 2160
+		return 10 * time.Second
+	}
+	if opts.duration <= 24*time.Hour {
+		// maximum number of data points to return: 24h / 1m = 1440
+		return 1 * time.Minute
+	}
+	if opts.duration <= 8*24*time.Hour {
+		// maximum number of data points to return: (8*24)h / 3m = 3840
+		return 3 * time.Minute
+	}
+	if opts.duration <= 30*24*time.Hour {
+		// maximum number of data points to return: (30*24)h / 10m = 4320
+		return 10 * time.Minute
+	}
+	return opts.duration / 3000
+}
+
+func unixTimeString(t time.Time) string {
+	return strconv.Itoa(int(t.Unix()))
+}

package.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "pretty-bytes": "5.5.0"
-  }
-}

queue_handlers.go

@@ -1,11 +1,13 @@
-package main
+package asynqmon
 
 import (
 	"encoding/json"
+	"errors"
 	"net/http"
 
 	"github.com/gorilla/mux"
-	"github.com/hibiken/asynq/inspeq"
+
+	"github.com/hibiken/asynq"
 )
 
 // ****************************************************************************
@@ -13,40 +15,40 @@ import (
 //   - http.Handler(s) for queue related endpoints
 // ****************************************************************************
 
-func newListQueuesHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newListQueuesHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		qnames, err := inspector.Queues()
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		var snapshots []*QueueStateSnapshot
-		for _, qname := range qnames {
-			s, err := inspector.CurrentStats(qname)
+		snapshots := make([]*queueStateSnapshot, len(qnames))
+		for i, qname := range qnames {
+			qinfo, err := inspector.GetQueueInfo(qname)
 			if err != nil {
 				http.Error(w, err.Error(), http.StatusInternalServerError)
 				return
 			}
-			snapshots = append(snapshots, toQueueStateSnapshot(s))
+			snapshots[i] = toQueueStateSnapshot(qinfo)
 		}
 		payload := map[string]interface{}{"queues": snapshots}
 		json.NewEncoder(w).Encode(payload)
 	}
 }
 
-func newGetQueueHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newGetQueueHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
 		qname := vars["qname"]
 
 		payload := make(map[string]interface{})
-		stats, err := inspector.CurrentStats(qname)
+		qinfo, err := inspector.GetQueueInfo(qname)
 		if err != nil {
 			// TODO: Check for queue not found error.
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		payload["current"] = toQueueStateSnapshot(stats)
+		payload["current"] = toQueueStateSnapshot(qinfo)
 
 		// TODO: make this n a variable
 		data, err := inspector.History(qname, 10)
@@ -54,7 +56,7 @@ func newGetQueueHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		var dailyStats []*DailyStats
+		var dailyStats []*dailyStats
 		for _, s := range data {
 			dailyStats = append(dailyStats, toDailyStats(s))
 		}
@@ -63,16 +65,16 @@ func newGetQueueHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
 	}
 }
 
-func newDeleteQueueHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newDeleteQueueHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
 		qname := vars["qname"]
 		if err := inspector.DeleteQueue(qname, false); err != nil {
-			if _, ok := err.(*inspeq.ErrQueueNotFound); ok {
+			if errors.Is(err, asynq.ErrQueueNotFound) {
 				http.Error(w, err.Error(), http.StatusNotFound)
 				return
 			}
-			if _, ok := err.(*inspeq.ErrQueueNotEmpty); ok {
+			if errors.Is(err, asynq.ErrQueueNotEmpty) {
 				http.Error(w, err.Error(), http.StatusBadRequest)
 				return
 			}
@@ -83,7 +85,7 @@ func newDeleteQueueHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
 	}
 }
 
-func newPauseQueueHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newPauseQueueHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
 		qname := vars["qname"]
@@ -95,7 +97,7 @@ func newPauseQueueHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
 	}
 }
 
-func newResumeQueueHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newResumeQueueHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
 		qname := vars["qname"]
@@ -107,18 +109,18 @@ func newResumeQueueHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
 	}
 }
 
-type ListQueueStatsResponse struct {
-	Stats map[string][]*DailyStats `json:"stats"`
+type listQueueStatsResponse struct {
+	Stats map[string][]*dailyStats `json:"stats"`
 }
 
-func newListQueueStatsHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newListQueueStatsHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		qnames, err := inspector.Queues()
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		resp := ListQueueStatsResponse{Stats: make(map[string][]*DailyStats)}
+		resp := listQueueStatsResponse{Stats: make(map[string][]*dailyStats)}
 		const numdays = 90 // Get stats for the last 90 days.
 		for _, qname := range qnames {
 			stats, err := inspector.History(qname, numdays)

redis_info_handlers.go

@@ -1,4 +1,4 @@
-package main
+package asynqmon
 
 import (
 	"context"
@@ -6,7 +6,8 @@ import (
 	"net/http"
 	"strings"
 
-	"github.com/go-redis/redis/v8"
+	"github.com/hibiken/asynq"
+	"github.com/redis/go-redis/v9"
 )
 
 // ****************************************************************************
@@ -14,25 +15,89 @@ import (
 //   - http.Handler(s) for redis info related endpoints
 // ****************************************************************************
 
-type RedisInfoResponse struct {
+type redisInfoResponse struct {
 	Addr    string            `json:"address"`
 	Info    map[string]string `json:"info"`
 	RawInfo string            `json:"raw_info"`
+	Cluster bool              `json:"cluster"`
+
+	// Following fields are only set when connected to redis cluster.
+	RawClusterNodes string               `json:"raw_cluster_nodes"`
+	QueueLocations  []*queueLocationInfo `json:"queue_locations"`
 }
 
-func newRedisInfoHandlerFunc(rdb *redis.Client) http.HandlerFunc {
+type queueLocationInfo struct {
+	Queue   string   `json:"queue"`   // queue name
+	KeySlot int64    `json:"keyslot"` // cluster key slot for the queue
+	Nodes   []string `json:"nodes"`   // list of cluster node addresses
+}
+
+func newRedisInfoHandlerFunc(client *redis.Client) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
-		ctx := context.Background()
-		res, err := rdb.Info(ctx).Result()
+		res, err := client.Info(context.Background()).Result()
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
 		info := parseRedisInfo(res)
-		resp := RedisInfoResponse{
-			Addr:    flagRedisAddr,
+		resp := redisInfoResponse{
+			Addr:    client.Options().Addr,
 			Info:    info,
 			RawInfo: res,
+			Cluster: false,
+		}
+		if err := json.NewEncoder(w).Encode(resp); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+	}
+}
+
+func newRedisClusterInfoHandlerFunc(client *redis.ClusterClient, inspector *asynq.Inspector) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		ctx := context.Background()
+		rawClusterInfo, err := client.ClusterInfo(ctx).Result()
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		info := parseRedisInfo(rawClusterInfo)
+		rawClusterNodes, err := client.ClusterNodes(ctx).Result()
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		queues, err := inspector.Queues()
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		var queueLocations []*queueLocationInfo
+		for _, qname := range queues {
+			q := queueLocationInfo{Queue: qname}
+			q.KeySlot, err = inspector.ClusterKeySlot(qname)
+			if err != nil {
+				http.Error(w, err.Error(), http.StatusInternalServerError)
+				return
+			}
+			nodes, err := inspector.ClusterNodes(qname)
+			if err != nil {
+				http.Error(w, err.Error(), http.StatusInternalServerError)
+				return
+			}
+			for _, n := range nodes {
+				q.Nodes = append(q.Nodes, n.Addr)
+			}
+			queueLocations = append(queueLocations, &q)
+		}
+
+		resp := redisInfoResponse{
+			Addr:            strings.Join(client.Options().Addrs, ","),
+			Info:            info,
+			RawInfo:         rawClusterInfo,
+			Cluster:         true,
+			RawClusterNodes: rawClusterNodes,
+			QueueLocations:  queueLocations,
 		}
 		if err := json.NewEncoder(w).Encode(resp); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)

scheduler_entry_handlers.go

@@ -1,11 +1,12 @@
-package main
+package asynqmon
 
 import (
 	"encoding/json"
 	"net/http"
 
 	"github.com/gorilla/mux"
-	"github.com/hibiken/asynq/inspeq"
+
+	"github.com/hibiken/asynq"
 )
 
 // ****************************************************************************
@@ -13,7 +14,7 @@ import (
 //   - http.Handler(s) for scheduler entry related endpoints
 // ****************************************************************************
 
-func newListSchedulerEntriesHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newListSchedulerEntriesHandlerFunc(inspector *asynq.Inspector, pf PayloadFormatter) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		entries, err := inspector.SchedulerEntries()
 		if err != nil {
@@ -23,9 +24,9 @@ func newListSchedulerEntriesHandlerFunc(inspector *inspeq.Inspector) http.Handle
 		payload := make(map[string]interface{})
 		if len(entries) == 0 {
 			// avoid nil for the entries field in json output.
-			payload["entries"] = make([]*SchedulerEntry, 0)
+			payload["entries"] = make([]*schedulerEntry, 0)
 		} else {
-			payload["entries"] = toSchedulerEntries(entries)
+			payload["entries"] = toSchedulerEntries(entries, pf)
 		}
 		if err := json.NewEncoder(w).Encode(payload); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
@@ -34,21 +35,21 @@ func newListSchedulerEntriesHandlerFunc(inspector *inspeq.Inspector) http.Handle
 	}
 }
 
-type ListSchedulerEnqueueEventsResponse struct {
-	Events []*SchedulerEnqueueEvent `json:"events"`
+type listSchedulerEnqueueEventsResponse struct {
+	Events []*schedulerEnqueueEvent `json:"events"`
 }
 
-func newListSchedulerEnqueueEventsHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newListSchedulerEnqueueEventsHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		entryID := mux.Vars(r)["entry_id"]
 		pageSize, pageNum := getPageOptions(r)
 		events, err := inspector.ListSchedulerEnqueueEvents(
-			entryID, inspeq.PageSize(pageSize), inspeq.Page(pageNum))
+			entryID, asynq.PageSize(pageSize), asynq.Page(pageNum))
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		resp := ListSchedulerEnqueueEventsResponse{
+		resp := listSchedulerEnqueueEventsResponse{
 			Events: toSchedulerEnqueueEvents(events),
 		}
 		if err := json.NewEncoder(w).Encode(resp); err != nil {

server_handlers.go

@@ -1,10 +1,10 @@
-package main
+package asynqmon
 
 import (
 	"encoding/json"
 	"net/http"
 
-	"github.com/hibiken/asynq/inspeq"
+	"github.com/hibiken/asynq"
 )
 
 // ****************************************************************************
@@ -12,19 +12,19 @@ import (
 //   - http.Handler(s) for server related endpoints
 // ****************************************************************************
 
-type ListServersResponse struct {
-	Servers []*ServerInfo `json:"servers"`
+type listServersResponse struct {
+	Servers []*serverInfo `json:"servers"`
 }
 
-func newListServersHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newListServersHandlerFunc(inspector *asynq.Inspector, pf PayloadFormatter) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		srvs, err := inspector.Servers()
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		resp := ListServersResponse{
-			Servers: toServerInfoList(srvs),
+		resp := listServersResponse{
+			Servers: toServerInfoList(srvs, pf),
 		}
 		if err := json.NewEncoder(w).Encode(resp); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)

static.go

@@ -0,0 +1,114 @@
+package asynqmon
+
+import (
+	"embed"
+	"errors"
+	"html/template"
+	"io/fs"
+	"net/http"
+	"path/filepath"
+	"strings"
+)
+
+// uiAssetsHandler is a http.Handler.
+// The path to the static file directory and
+// the path to the index file within that static directory are used to
+// serve the SPA.
+type uiAssetsHandler struct {
+	rootPath       string
+	contents       embed.FS
+	staticDirPath  string
+	indexFileName  string
+	prometheusAddr string
+	readOnly       bool
+}
+
+// ServeHTTP inspects the URL path to locate a file within the static dir
+// on the SPA handler.
+// If path '/' is requested, it will serve the index file, otherwise it will
+// serve the file specified by the URL path.
+func (h *uiAssetsHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	// Get the absolute path to prevent directory traversal.
+	path, err := filepath.Abs(r.URL.Path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	// Get the path relative to the root path.
+	if !strings.HasPrefix(path, h.rootPath) {
+		http.Error(w, "unexpected path prefix", http.StatusBadRequest)
+		return
+	}
+	path = strings.TrimPrefix(path, h.rootPath)
+
+	if code, err := h.serveFile(w, path); err != nil {
+		http.Error(w, err.Error(), code)
+		return
+	}
+}
+
+func (h *uiAssetsHandler) indexFilePath() string {
+	return filepath.Join(h.staticDirPath, h.indexFileName)
+}
+
+func (h *uiAssetsHandler) renderIndexFile(w http.ResponseWriter) error {
+	// Note: Replace the default delimiter ("{{") with a custom one
+	// since webpack escapes the '{' character when it compiles the index.html file.
+	// See the "homepage" field in package.json.
+	tmpl, err := template.New(h.indexFileName).Delims("/[[", "]]").ParseFS(h.contents, h.indexFilePath())
+	if err != nil {
+		return err
+	}
+	data := struct {
+		RootPath       string
+		PrometheusAddr string
+		ReadOnly       bool
+	}{
+		RootPath:       h.rootPath,
+		PrometheusAddr: h.prometheusAddr,
+		ReadOnly:       h.readOnly,
+	}
+	return tmpl.Execute(w, data)
+}
+
+// serveFile writes file requested at path and returns http status code and error if any.
+// If requested path is root, it serves the index file.
+// Otherwise, it looks for file requiested in the static content filesystem
+// and serves if a file is found.
+// If a requested file is not found in the filesystem, it serves the index file to
+// make sure when user refreshes the page in SPA things still work.
+func (h *uiAssetsHandler) serveFile(w http.ResponseWriter, path string) (code int, err error) {
+	if path == "/" || path == "" {
+		if err := h.renderIndexFile(w); err != nil {
+			return http.StatusInternalServerError, err
+		}
+		return http.StatusOK, nil
+	}
+	path = filepath.Join(h.staticDirPath, path)
+	bytes, err := h.contents.ReadFile(path)
+	if err != nil {
+		// If path is error (e.g. file not exist, path is a directory), serve index file.
+		var pathErr *fs.PathError
+		if errors.As(err, &pathErr) {
+			if err := h.renderIndexFile(w); err != nil {
+				return http.StatusInternalServerError, err
+			}
+			return http.StatusOK, nil
+		}
+		return http.StatusInternalServerError, err
+	}
+	// Setting the MIME type for .js files manually to application/javascript as
+	// http.DetectContentType is using https://mimesniff.spec.whatwg.org/ which
+	// will not recognize application/javascript for security reasons.
+	if strings.HasSuffix(path, ".js") {
+		w.Header().Add("Content-Type", "application/javascript; charset=utf-8")
+	} else {
+		w.Header().Add("Content-Type", http.DetectContentType(bytes))
+	}
+
+	if _, err := w.Write(bytes); err != nil {
+		return http.StatusInternalServerError, err
+	}
+	return http.StatusOK, nil
+}

task_handlers.go

@@ -1,14 +1,17 @@
-package main
+package asynqmon
 
 import (
 	"encoding/json"
+	"errors"
 	"log"
 	"net/http"
 	"strconv"
+	"strings"
 	"time"
 
 	"github.com/gorilla/mux"
-	"github.com/hibiken/asynq/inspeq"
+
+	"github.com/hibiken/asynq"
 )
 
 // ****************************************************************************
@@ -16,24 +19,24 @@ import (
 //   - http.Handler(s) for task related endpoints
 // ****************************************************************************
 
-type ListActiveTasksResponse struct {
-	Tasks []*ActiveTask       `json:"tasks"`
-	Stats *QueueStateSnapshot `json:"stats"`
+type listActiveTasksResponse struct {
+	Tasks []*activeTask       `json:"tasks"`
+	Stats *queueStateSnapshot `json:"stats"`
 }
 
-func newListActiveTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newListActiveTasksHandlerFunc(inspector *asynq.Inspector, pf PayloadFormatter) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
 		qname := vars["qname"]
 		pageSize, pageNum := getPageOptions(r)
 
 		tasks, err := inspector.ListActiveTasks(
-			qname, inspeq.PageSize(pageSize), inspeq.Page(pageNum))
+			qname, asynq.PageSize(pageSize), asynq.Page(pageNum))
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		stats, err := inspector.CurrentStats(qname)
+		qinfo, err := inspector.GetQueueInfo(qname)
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
@@ -43,16 +46,16 @@ func newListActiveTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		// m maps taskID to WorkerInfo.
-		m := make(map[string]*inspeq.WorkerInfo)
+		// m maps taskID to workerInfo.
+		m := make(map[string]*asynq.WorkerInfo)
 		for _, srv := range servers {
 			for _, w := range srv.ActiveWorkers {
-				if w.Task.Queue == qname {
-					m[w.Task.ID] = w
+				if w.Queue == qname {
+					m[w.TaskID] = w
 				}
 			}
 		}
-		activeTasks := toActiveTasks(tasks)
+		activeTasks := toActiveTasks(tasks, pf)
 		for _, t := range activeTasks {
 			workerInfo, ok := m[t.ID]
 			if ok {
@@ -64,21 +67,18 @@ func newListActiveTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc
 			}
 		}
 
-		resp := ListActiveTasksResponse{
+		resp := listActiveTasksResponse{
 			Tasks: activeTasks,
-			Stats: toQueueStateSnapshot(stats),
-		}
-		if err := json.NewEncoder(w).Encode(resp); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
+			Stats: toQueueStateSnapshot(qinfo),
 		}
+		writeResponseJSON(w, resp)
 	}
 }
 
-func newCancelActiveTaskHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newCancelActiveTaskHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		id := mux.Vars(r)["task_id"]
-		if err := inspector.CancelActiveTask(id); err != nil {
+		if err := inspector.CancelProcessing(id); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
@@ -86,19 +86,19 @@ func newCancelActiveTaskHandlerFunc(inspector *inspeq.Inspector) http.HandlerFun
 	}
 }
 
-func newCancelAllActiveTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newCancelAllActiveTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		const batchSize = 100
 		page := 1
 		qname := mux.Vars(r)["qname"]
 		for {
-			tasks, err := inspector.ListActiveTasks(qname, inspeq.Page(page), inspeq.PageSize(batchSize))
+			tasks, err := inspector.ListActiveTasks(qname, asynq.Page(page), asynq.PageSize(batchSize))
 			if err != nil {
 				http.Error(w, err.Error(), http.StatusInternalServerError)
 				return
 			}
 			for _, t := range tasks {
-				if err := inspector.CancelActiveTask(t.ID); err != nil {
+				if err := inspector.CancelProcessing(t.ID); err != nil {
 					http.Error(w, err.Error(), http.StatusInternalServerError)
 					return
 				}
@@ -121,7 +121,7 @@ type batchCancelTasksResponse struct {
 	ErrorIDs    []string `json:"error_ids"`
 }
 
-func newBatchCancelActiveTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newBatchCancelActiveTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		r.Body = http.MaxBytesReader(w, r.Body, maxRequestBodySize)
 		dec := json.NewDecoder(r.Body)
@@ -139,32 +139,29 @@ func newBatchCancelActiveTasksHandlerFunc(inspector *inspeq.Inspector) http.Hand
 			ErrorIDs:    make([]string, 0),
 		}
 		for _, id := range req.TaskIDs {
-			if err := inspector.CancelActiveTask(id); err != nil {
+			if err := inspector.CancelProcessing(id); err != nil {
 				log.Printf("error: could not send cancelation signal to task %s", id)
 				resp.ErrorIDs = append(resp.ErrorIDs, id)
 			} else {
 				resp.CanceledIDs = append(resp.CanceledIDs, id)
 			}
 		}
-		if err := json.NewEncoder(w).Encode(resp); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
+		writeResponseJSON(w, resp)
 	}
 }
 
-func newListPendingTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newListPendingTasksHandlerFunc(inspector *asynq.Inspector, pf PayloadFormatter) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
 		qname := vars["qname"]
 		pageSize, pageNum := getPageOptions(r)
 		tasks, err := inspector.ListPendingTasks(
-			qname, inspeq.PageSize(pageSize), inspeq.Page(pageNum))
+			qname, asynq.PageSize(pageSize), asynq.Page(pageNum))
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		stats, err := inspector.CurrentStats(qname)
+		qinfo, err := inspector.GetQueueInfo(qname)
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
@@ -172,30 +169,27 @@ func newListPendingTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFun
 		payload := make(map[string]interface{})
 		if len(tasks) == 0 {
 			// avoid nil for the tasks field in json output.
-			payload["tasks"] = make([]*PendingTask, 0)
+			payload["tasks"] = make([]*pendingTask, 0)
 		} else {
-			payload["tasks"] = toPendingTasks(tasks)
-		}
-		payload["stats"] = toQueueStateSnapshot(stats)
-		if err := json.NewEncoder(w).Encode(payload); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
+			payload["tasks"] = toPendingTasks(tasks, pf)
 		}
+		payload["stats"] = toQueueStateSnapshot(qinfo)
+		writeResponseJSON(w, payload)
 	}
 }
 
-func newListScheduledTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newListScheduledTasksHandlerFunc(inspector *asynq.Inspector, pf PayloadFormatter) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
 		qname := vars["qname"]
 		pageSize, pageNum := getPageOptions(r)
 		tasks, err := inspector.ListScheduledTasks(
-			qname, inspeq.PageSize(pageSize), inspeq.Page(pageNum))
+			qname, asynq.PageSize(pageSize), asynq.Page(pageNum))
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		stats, err := inspector.CurrentStats(qname)
+		qinfo, err := inspector.GetQueueInfo(qname)
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
@@ -203,30 +197,27 @@ func newListScheduledTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerF
 		payload := make(map[string]interface{})
 		if len(tasks) == 0 {
 			// avoid nil for the tasks field in json output.
-			payload["tasks"] = make([]*ScheduledTask, 0)
+			payload["tasks"] = make([]*scheduledTask, 0)
 		} else {
-			payload["tasks"] = toScheduledTasks(tasks)
-		}
-		payload["stats"] = toQueueStateSnapshot(stats)
-		if err := json.NewEncoder(w).Encode(payload); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
+			payload["tasks"] = toScheduledTasks(tasks, pf)
 		}
+		payload["stats"] = toQueueStateSnapshot(qinfo)
+		writeResponseJSON(w, payload)
 	}
 }
 
-func newListRetryTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newListRetryTasksHandlerFunc(inspector *asynq.Inspector, pf PayloadFormatter) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
 		qname := vars["qname"]
 		pageSize, pageNum := getPageOptions(r)
 		tasks, err := inspector.ListRetryTasks(
-			qname, inspeq.PageSize(pageSize), inspeq.Page(pageNum))
+			qname, asynq.PageSize(pageSize), asynq.Page(pageNum))
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		stats, err := inspector.CurrentStats(qname)
+		qinfo, err := inspector.GetQueueInfo(qname)
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
@@ -234,30 +225,27 @@ func newListRetryTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc
 		payload := make(map[string]interface{})
 		if len(tasks) == 0 {
 			// avoid nil for the tasks field in json output.
-			payload["tasks"] = make([]*RetryTask, 0)
+			payload["tasks"] = make([]*retryTask, 0)
 		} else {
-			payload["tasks"] = toRetryTasks(tasks)
-		}
-		payload["stats"] = toQueueStateSnapshot(stats)
-		if err := json.NewEncoder(w).Encode(payload); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
+			payload["tasks"] = toRetryTasks(tasks, pf)
 		}
+		payload["stats"] = toQueueStateSnapshot(qinfo)
+		writeResponseJSON(w, payload)
 	}
 }
 
-func newListArchivedTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newListArchivedTasksHandlerFunc(inspector *asynq.Inspector, pf PayloadFormatter) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
 		qname := vars["qname"]
 		pageSize, pageNum := getPageOptions(r)
 		tasks, err := inspector.ListArchivedTasks(
-			qname, inspeq.PageSize(pageSize), inspeq.Page(pageNum))
+			qname, asynq.PageSize(pageSize), asynq.Page(pageNum))
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		stats, err := inspector.CurrentStats(qname)
+		qinfo, err := inspector.GetQueueInfo(qname)
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
@@ -265,27 +253,86 @@ func newListArchivedTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFu
 		payload := make(map[string]interface{})
 		if len(tasks) == 0 {
 			// avoid nil for the tasks field in json output.
-			payload["tasks"] = make([]*ArchivedTask, 0)
+			payload["tasks"] = make([]*archivedTask, 0)
 		} else {
-			payload["tasks"] = toArchivedTasks(tasks)
-		}
-		payload["stats"] = toQueueStateSnapshot(stats)
-		if err := json.NewEncoder(w).Encode(payload); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
+			payload["tasks"] = toArchivedTasks(tasks, pf)
 		}
+		payload["stats"] = toQueueStateSnapshot(qinfo)
+		writeResponseJSON(w, payload)
 	}
 }
 
-func newDeleteTaskHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newListCompletedTasksHandlerFunc(inspector *asynq.Inspector, pf PayloadFormatter, rf ResultFormatter) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
-		qname, key := vars["qname"], vars["task_key"]
-		if qname == "" || key == "" {
+		qname := vars["qname"]
+		pageSize, pageNum := getPageOptions(r)
+		tasks, err := inspector.ListCompletedTasks(qname, asynq.PageSize(pageSize), asynq.Page(pageNum))
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		qinfo, err := inspector.GetQueueInfo(qname)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		payload := make(map[string]interface{})
+		if len(tasks) == 0 {
+			// avoid nil for the tasks field in json output.
+			payload["tasks"] = make([]*completedTask, 0)
+		} else {
+			payload["tasks"] = toCompletedTasks(tasks, pf, rf)
+		}
+		payload["stats"] = toQueueStateSnapshot(qinfo)
+		writeResponseJSON(w, payload)
+	}
+}
+
+func newListAggregatingTasksHandlerFunc(inspector *asynq.Inspector, pf PayloadFormatter) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		vars := mux.Vars(r)
+		qname := vars["qname"]
+		gname := vars["gname"]
+		pageSize, pageNum := getPageOptions(r)
+		tasks, err := inspector.ListAggregatingTasks(
+			qname, gname, asynq.PageSize(pageSize), asynq.Page(pageNum))
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		qinfo, err := inspector.GetQueueInfo(qname)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		groups, err := inspector.Groups(qname)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		payload := make(map[string]interface{})
+		if len(tasks) == 0 {
+			// avoid nil for the tasks field in json output.
+			payload["tasks"] = make([]*aggregatingTask, 0)
+		} else {
+			payload["tasks"] = toAggregatingTasks(tasks, pf)
+		}
+		payload["stats"] = toQueueStateSnapshot(qinfo)
+		payload["groups"] = toGroupInfos(groups)
+		writeResponseJSON(w, payload)
+	}
+}
+
+func newDeleteTaskHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		vars := mux.Vars(r)
+		qname, taskid := vars["qname"], vars["task_id"]
+		if qname == "" || taskid == "" {
 			http.Error(w, "route parameters should not be empty", http.StatusBadRequest)
 			return
 		}
-		if err := inspector.DeleteTaskByKey(qname, key); err != nil {
+		if err := inspector.DeleteTask(qname, taskid); err != nil {
 			// TODO: Handle task not found error and return 404
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
@@ -294,15 +341,15 @@ func newDeleteTaskHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
 	}
 }
 
-func newRunTaskHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newRunTaskHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
-		qname, key := vars["qname"], vars["task_key"]
-		if qname == "" || key == "" {
+		qname, taskid := vars["qname"], vars["task_id"]
+		if qname == "" || taskid == "" {
 			http.Error(w, "route parameters should not be empty", http.StatusBadRequest)
 			return
 		}
-		if err := inspector.RunTaskByKey(qname, key); err != nil {
+		if err := inspector.RunTask(qname, taskid); err != nil {
 			// TODO: Handle task not found error and return 404
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
@@ -311,15 +358,15 @@ func newRunTaskHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
 	}
 }
 
-func newArchiveTaskHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newArchiveTaskHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		vars := mux.Vars(r)
-		qname, key := vars["qname"], vars["task_key"]
-		if qname == "" || key == "" {
+		qname, taskid := vars["qname"], vars["task_id"]
+		if qname == "" || taskid == "" {
 			http.Error(w, "route parameters should not be empty", http.StatusBadRequest)
 			return
 		}
-		if err := inspector.ArchiveTaskByKey(qname, key); err != nil {
+		if err := inspector.ArchiveTask(qname, taskid); err != nil {
 			// TODO: Handle task not found error and return 404
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
@@ -328,12 +375,12 @@ func newArchiveTaskHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
 	}
 }
 
-type DeleteAllTasksResponse struct {
+type deleteAllTasksResponse struct {
 	// Number of tasks deleted.
 	Deleted int `json:"deleted"`
 }
 
-func newDeleteAllPendingTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newDeleteAllPendingTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		qname := mux.Vars(r)["qname"]
 		n, err := inspector.DeleteAllPendingTasks(qname)
@@ -341,15 +388,24 @@ func newDeleteAllPendingTasksHandlerFunc(inspector *inspeq.Inspector) http.Handl
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		resp := DeleteAllTasksResponse{n}
-		if err := json.NewEncoder(w).Encode(resp); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
+		writeResponseJSON(w, deleteAllTasksResponse{n})
 	}
 }
 
-func newDeleteAllScheduledTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newDeleteAllAggregatingTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		vars := mux.Vars(r)
+		qname, gname := vars["qname"], vars["gname"]
+		n, err := inspector.DeleteAllAggregatingTasks(qname, gname)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		writeResponseJSON(w, deleteAllTasksResponse{n})
+	}
+}
+
+func newDeleteAllScheduledTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		qname := mux.Vars(r)["qname"]
 		n, err := inspector.DeleteAllScheduledTasks(qname)
@@ -357,15 +413,11 @@ func newDeleteAllScheduledTasksHandlerFunc(inspector *inspeq.Inspector) http.Han
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		resp := DeleteAllTasksResponse{n}
-		if err := json.NewEncoder(w).Encode(resp); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
+		writeResponseJSON(w, deleteAllTasksResponse{n})
 	}
 }
 
-func newDeleteAllRetryTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newDeleteAllRetryTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		qname := mux.Vars(r)["qname"]
 		n, err := inspector.DeleteAllRetryTasks(qname)
@@ -373,15 +425,11 @@ func newDeleteAllRetryTasksHandlerFunc(inspector *inspeq.Inspector) http.Handler
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		resp := DeleteAllTasksResponse{n}
-		if err := json.NewEncoder(w).Encode(resp); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
+		writeResponseJSON(w, deleteAllTasksResponse{n})
 	}
 }
 
-func newDeleteAllArchivedTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newDeleteAllArchivedTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		qname := mux.Vars(r)["qname"]
 		n, err := inspector.DeleteAllArchivedTasks(qname)
@@ -389,102 +437,158 @@ func newDeleteAllArchivedTasksHandlerFunc(inspector *inspeq.Inspector) http.Hand
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		resp := DeleteAllTasksResponse{n}
-		if err := json.NewEncoder(w).Encode(resp); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
+		writeResponseJSON(w, deleteAllTasksResponse{n})
 	}
 }
 
-func newRunAllScheduledTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newDeleteAllCompletedTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		qname := mux.Vars(r)["qname"]
-		if _, err := inspector.RunAllScheduledTasks(qname); err != nil {
+		n, err := inspector.DeleteAllCompletedTasks(qname)
+		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		w.WriteHeader(http.StatusNoContent)
+		writeResponseJSON(w, deleteAllTasksResponse{n})
 	}
 }
 
-func newRunAllRetryTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+type runAllTasksResponse struct {
+	// Number of tasks scheduled to run.
+	Scheduled int `json:"scheduled"`
+}
+
+func newRunAllScheduledTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		qname := mux.Vars(r)["qname"]
-		if _, err := inspector.RunAllRetryTasks(qname); err != nil {
+		n, err := inspector.RunAllScheduledTasks(qname)
+		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		w.WriteHeader(http.StatusNoContent)
+		writeResponseJSON(w, runAllTasksResponse{n})
 	}
 }
 
-func newRunAllArchivedTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newRunAllRetryTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		qname := mux.Vars(r)["qname"]
-		if _, err := inspector.RunAllArchivedTasks(qname); err != nil {
+		n, err := inspector.RunAllRetryTasks(qname)
+		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		w.WriteHeader(http.StatusNoContent)
+		writeResponseJSON(w, runAllTasksResponse{n})
 	}
 }
 
-func newArchiveAllPendingTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newRunAllArchivedTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		qname := mux.Vars(r)["qname"]
-		if _, err := inspector.ArchiveAllPendingTasks(qname); err != nil {
+		n, err := inspector.RunAllArchivedTasks(qname)
+		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		w.WriteHeader(http.StatusNoContent)
+		writeResponseJSON(w, runAllTasksResponse{n})
 	}
 }
 
-func newArchiveAllScheduledTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newRunAllAggregatingTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
-		qname := mux.Vars(r)["qname"]
-		if _, err := inspector.ArchiveAllScheduledTasks(qname); err != nil {
+		vars := mux.Vars(r)
+		qname, gname := vars["qname"], vars["gname"]
+		n, err := inspector.RunAllAggregatingTasks(qname, gname)
+		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		w.WriteHeader(http.StatusNoContent)
+		writeResponseJSON(w, runAllTasksResponse{n})
 	}
 }
 
-func newArchiveAllRetryTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+type archiveAllTasksResponse struct {
+	// Number of tasks archived.
+	Archived int `json:"archived"`
+}
+
+func writeResponseJSON(w http.ResponseWriter, resp interface{}) {
+	if err := json.NewEncoder(w).Encode(resp); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+}
+
+func newArchiveAllPendingTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		qname := mux.Vars(r)["qname"]
-		if _, err := inspector.ArchiveAllRetryTasks(qname); err != nil {
+		n, err := inspector.ArchiveAllPendingTasks(qname)
+		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
-		w.WriteHeader(http.StatusNoContent)
+		writeResponseJSON(w, archiveAllTasksResponse{n})
+	}
+}
+
+func newArchiveAllAggregatingTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		vars := mux.Vars(r)
+		qname, gname := vars["qname"], vars["gname"]
+		n, err := inspector.ArchiveAllAggregatingTasks(qname, gname)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		writeResponseJSON(w, archiveAllTasksResponse{n})
+	}
+}
+
+func newArchiveAllScheduledTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		qname := mux.Vars(r)["qname"]
+		n, err := inspector.ArchiveAllScheduledTasks(qname)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		writeResponseJSON(w, archiveAllTasksResponse{n})
+	}
+}
+
+func newArchiveAllRetryTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		qname := mux.Vars(r)["qname"]
+		n, err := inspector.ArchiveAllRetryTasks(qname)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		writeResponseJSON(w, archiveAllTasksResponse{n})
 	}
 }
 
 // request body used for all batch delete tasks endpoints.
 type batchDeleteTasksRequest struct {
-	TaskKeys []string `json:"task_keys"`
+	TaskIDs []string `json:"task_ids"`
 }
 
 // Note: Redis does not have any rollback mechanism, so it's possible
 // to have partial success when doing a batch operation.
-// For this reason this response contains a list of succeeded keys
-// and a list of failed keys.
+// For this reason this response contains a list of succeeded ids
+// and a list of failed ids.
 type batchDeleteTasksResponse struct {
-	// task keys that were successfully deleted.
-	DeletedKeys []string `json:"deleted_keys"`
+	// task ids that were successfully deleted.
+	DeletedIDs []string `json:"deleted_ids"`
 
-	// task keys that were not deleted.
-	FailedKeys []string `json:"failed_keys"`
+	// task ids that were not deleted.
+	FailedIDs []string `json:"failed_ids"`
 }
 
 // Maximum request body size in bytes.
 // Allow up to 1MB in size.
 const maxRequestBodySize = 1000000
 
-func newBatchDeleteTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newBatchDeleteTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		r.Body = http.MaxBytesReader(w, r.Body, maxRequestBodySize)
 		dec := json.NewDecoder(r.Body)
@@ -499,36 +603,33 @@ func newBatchDeleteTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFun
 		qname := mux.Vars(r)["qname"]
 		resp := batchDeleteTasksResponse{
 			// avoid null in the json response
-			DeletedKeys: make([]string, 0),
-			FailedKeys:  make([]string, 0),
+			DeletedIDs: make([]string, 0),
+			FailedIDs:  make([]string, 0),
 		}
-		for _, key := range req.TaskKeys {
-			if err := inspector.DeleteTaskByKey(qname, key); err != nil {
-				log.Printf("error: could not delete task with key %q: %v", key, err)
-				resp.FailedKeys = append(resp.FailedKeys, key)
+		for _, taskid := range req.TaskIDs {
+			if err := inspector.DeleteTask(qname, taskid); err != nil {
+				log.Printf("error: could not delete task with id %q: %v", taskid, err)
+				resp.FailedIDs = append(resp.FailedIDs, taskid)
 			} else {
-				resp.DeletedKeys = append(resp.DeletedKeys, key)
+				resp.DeletedIDs = append(resp.DeletedIDs, taskid)
 			}
 		}
-		if err := json.NewEncoder(w).Encode(resp); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
+		writeResponseJSON(w, resp)
 	}
 }
 
 type batchRunTasksRequest struct {
-	TaskKeys []string `json:"task_keys"`
+	TaskIDs []string `json:"task_ids"`
 }
 
 type batchRunTasksResponse struct {
-	// task keys that were successfully moved to the pending state.
-	PendingKeys []string `json:"pending_keys"`
-	// task keys that were not able to move to the pending state.
-	ErrorKeys []string `json:"error_keys"`
+	// task ids that were successfully moved to the pending state.
+	PendingIDs []string `json:"pending_ids"`
+	// task ids that were not able to move to the pending state.
+	ErrorIDs []string `json:"error_ids"`
 }
 
-func newBatchRunTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newBatchRunTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		r.Body = http.MaxBytesReader(w, r.Body, maxRequestBodySize)
 		dec := json.NewDecoder(r.Body)
@@ -543,36 +644,33 @@ func newBatchRunTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
 		qname := mux.Vars(r)["qname"]
 		resp := batchRunTasksResponse{
 			// avoid null in the json response
-			PendingKeys: make([]string, 0),
-			ErrorKeys:   make([]string, 0),
+			PendingIDs: make([]string, 0),
+			ErrorIDs:   make([]string, 0),
 		}
-		for _, key := range req.TaskKeys {
-			if err := inspector.RunTaskByKey(qname, key); err != nil {
-				log.Printf("error: could not run task with key %q: %v", key, err)
-				resp.ErrorKeys = append(resp.ErrorKeys, key)
+		for _, taskid := range req.TaskIDs {
+			if err := inspector.RunTask(qname, taskid); err != nil {
+				log.Printf("error: could not run task with id %q: %v", taskid, err)
+				resp.ErrorIDs = append(resp.ErrorIDs, taskid)
 			} else {
-				resp.PendingKeys = append(resp.PendingKeys, key)
+				resp.PendingIDs = append(resp.PendingIDs, taskid)
 			}
 		}
-		if err := json.NewEncoder(w).Encode(resp); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
+		writeResponseJSON(w, resp)
 	}
 }
 
 type batchArchiveTasksRequest struct {
-	TaskKeys []string `json:"task_keys"`
+	TaskIDs []string `json:"task_ids"`
 }
 
 type batchArchiveTasksResponse struct {
-	// task keys that were successfully moved to the archived state.
-	ArchivedKeys []string `json:"archived_keys"`
-	// task keys that were not able to move to the archived state.
-	ErrorKeys []string `json:"error_keys"`
+	// task ids that were successfully moved to the archived state.
+	ArchivedIDs []string `json:"archived_ids"`
+	// task ids that were not able to move to the archived state.
+	ErrorIDs []string `json:"error_ids"`
 }
 
-func newBatchArchiveTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFunc {
+func newBatchArchiveTasksHandlerFunc(inspector *asynq.Inspector) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		r.Body = http.MaxBytesReader(w, r.Body, maxRequestBodySize)
 		dec := json.NewDecoder(r.Body)
@@ -587,21 +685,18 @@ func newBatchArchiveTasksHandlerFunc(inspector *inspeq.Inspector) http.HandlerFu
 		qname := mux.Vars(r)["qname"]
 		resp := batchArchiveTasksResponse{
 			// avoid null in the json response
-			ArchivedKeys: make([]string, 0),
-			ErrorKeys:    make([]string, 0),
+			ArchivedIDs: make([]string, 0),
+			ErrorIDs:    make([]string, 0),
 		}
-		for _, key := range req.TaskKeys {
-			if err := inspector.ArchiveTaskByKey(qname, key); err != nil {
-				log.Printf("error: could not archive task with key %q: %v", key, err)
-				resp.ErrorKeys = append(resp.ErrorKeys, key)
+		for _, taskid := range req.TaskIDs {
+			if err := inspector.ArchiveTask(qname, taskid); err != nil {
+				log.Printf("error: could not archive task with id %q: %v", taskid, err)
+				resp.ErrorIDs = append(resp.ErrorIDs, taskid)
 			} else {
-				resp.ArchivedKeys = append(resp.ArchivedKeys, key)
+				resp.ArchivedIDs = append(resp.ArchivedIDs, taskid)
 			}
 		}
-		if err := json.NewEncoder(w).Encode(resp); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
+		writeResponseJSON(w, resp)
 	}
 }
 
@@ -623,3 +718,30 @@ func getPageOptions(r *http.Request) (pageSize, pageNum int) {
 	}
 	return pageSize, pageNum
 }
+
+func newGetTaskHandlerFunc(inspector *asynq.Inspector, pf PayloadFormatter, rf ResultFormatter) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		vars := mux.Vars(r)
+		qname, taskid := vars["qname"], vars["task_id"]
+		if qname == "" {
+			http.Error(w, "queue name cannot be empty", http.StatusBadRequest)
+			return
+		}
+		if taskid == "" {
+			http.Error(w, "task_id cannot be empty", http.StatusBadRequest)
+			return
+		}
+
+		info, err := inspector.GetTaskInfo(qname, taskid)
+		switch {
+		case errors.Is(err, asynq.ErrQueueNotFound), errors.Is(err, asynq.ErrTaskNotFound):
+			http.Error(w, strings.TrimPrefix(err.Error(), "asynq: "), http.StatusNotFound)
+			return
+		case err != nil:
+			http.Error(w, strings.TrimPrefix(err.Error(), "asynq: "), http.StatusInternalServerError)
+			return
+		}
+
+		writeResponseJSON(w, toTaskInfo(info, pf, rf))
+	}
+}

ui/.gitignore

@@ -8,9 +8,6 @@
 # testing
 /coverage
 
-# production
-/build
-
 # misc
 .DS_Store
 .env.local

ui/build/asset-manifest.json

@@ -0,0 +1,19 @@
+{
+  "files": {
+    "main.js": "/[[.RootPath]]/static/js/main.5adda2da.chunk.js",
+    "main.js.map": "/[[.RootPath]]/static/js/main.5adda2da.chunk.js.map",
+    "runtime-main.js": "/[[.RootPath]]/static/js/runtime-main.9fea6c1a.js",
+    "runtime-main.js.map": "/[[.RootPath]]/static/js/runtime-main.9fea6c1a.js.map",
+    "static/js/2.83624df2.chunk.js": "/[[.RootPath]]/static/js/2.83624df2.chunk.js",
+    "static/js/2.83624df2.chunk.js.map": "/[[.RootPath]]/static/js/2.83624df2.chunk.js.map",
+    "index.html": "/[[.RootPath]]/index.html",
+    "static/js/2.83624df2.chunk.js.LICENSE.txt": "/[[.RootPath]]/static/js/2.83624df2.chunk.js.LICENSE.txt",
+    "static/media/logo-color.c2b0c1f3.svg": "/[[.RootPath]]/static/media/logo-color.c2b0c1f3.svg",
+    "static/media/logo-white.3fa2ac55.svg": "/[[.RootPath]]/static/media/logo-white.3fa2ac55.svg"
+  },
+  "entrypoints": [
+    "static/js/runtime-main.9fea6c1a.js",
+    "static/js/2.83624df2.chunk.js",
+    "static/js/main.5adda2da.chunk.js"
+  ]
+}

ui/build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" type="image/png" href="/[[.RootPath]]/favicon.ico"/><link rel="icon" type="image/png" sizes="32x32" href="/[[.RootPath]]/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/[[.RootPath]]/favicon-16x16.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Asynq monitoring web console"/><link rel="apple-touch-icon" sizes="180x180" href="/[[.RootPath]]/apple-touch-icon.png"/><link rel="manifest" href="/[[.RootPath]]/manifest.json"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/><script>window.FLAG_ROOT_PATH="/[[.RootPath]]",window.FLAG_PROMETHEUS_SERVER_ADDRESS="/[[.PrometheusAddr]]",window.FLAG_READ_ONLY="/[[.ReadOnly]]"</script><title>Asynq - Monitoring</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,l=t[0],a=t[1],f=t[2],c=0,s=[];c<l.length;c++)i=l[c],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,f||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,l=1;l<r.length;l++){var a=r[l];0!==o[a]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/[[.RootPath]]/";var l=this.webpackJsonpui=this.webpackJsonpui||[],a=l.push.bind(l);l.push=t,l=l.slice();for(var f=0;f<l.length;f++)t(l[f]);var p=a;r()}([])</script><script src="/[[.RootPath]]/static/js/2.83624df2.chunk.js"></script><script src="/[[.RootPath]]/static/js/main.5adda2da.chunk.js"></script></body></html>

ui/build/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "Asynq Monitoring",
+  "short_name": "Asynqmon",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

ui/build/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

ui/build/static/js/2.83624df2.chunk.js.LICENSE.txt

@@ -0,0 +1,253 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+/*! Conditions:: INITIAL */
+
+/*! Production::    $accept : expression $end */
+
+/*! Production::    css_value : ANGLE */
+
+/*! Production::    css_value : CHS */
+
+/*! Production::    css_value : EMS */
+
+/*! Production::    css_value : EXS */
+
+/*! Production::    css_value : FREQ */
+
+/*! Production::    css_value : LENGTH */
+
+/*! Production::    css_value : PERCENTAGE */
+
+/*! Production::    css_value : REMS */
+
+/*! Production::    css_value : RES */
+
+/*! Production::    css_value : SUB css_value */
+
+/*! Production::    css_value : TIME */
+
+/*! Production::    css_value : VHS */
+
+/*! Production::    css_value : VMAXS */
+
+/*! Production::    css_value : VMINS */
+
+/*! Production::    css_value : VWS */
+
+/*! Production::    css_variable : CSS_VAR LPAREN CSS_CPROP COMMA math_expression RPAREN */
+
+/*! Production::    css_variable : CSS_VAR LPAREN CSS_CPROP RPAREN */
+
+/*! Production::    expression : math_expression EOF */
+
+/*! Production::    math_expression : LPAREN math_expression RPAREN */
+
+/*! Production::    math_expression : NESTED_CALC LPAREN math_expression RPAREN */
+
+/*! Production::    math_expression : SUB PREFIX SUB NESTED_CALC LPAREN math_expression RPAREN */
+
+/*! Production::    math_expression : css_value */
+
+/*! Production::    math_expression : css_variable */
+
+/*! Production::    math_expression : math_expression ADD math_expression */
+
+/*! Production::    math_expression : math_expression DIV math_expression */
+
+/*! Production::    math_expression : math_expression MUL math_expression */
+
+/*! Production::    math_expression : math_expression SUB math_expression */
+
+/*! Production::    math_expression : value */
+
+/*! Production::    value : NUMBER */
+
+/*! Production::    value : SUB NUMBER */
+
+/*! Rule::       $ */
+
+/*! Rule::       (--[0-9a-z-A-Z-]*) */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)% */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)Hz\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)ch\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)cm\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)deg\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)dpcm\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)dpi\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)dppx\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)em\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)ex\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)grad\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)in\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)kHz\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)mm\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)ms\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)pc\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)pt\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)px\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)rad\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)rem\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)s\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)turn\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)vh\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)vmax\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)vmin\b */
+
+/*! Rule::       ([0-9]+(\.[0-9]*)?|\.[0-9]+)vw\b */
+
+/*! Rule::       ([a-z]+) */
+
+/*! Rule::       (calc) */
+
+/*! Rule::       (var) */
+
+/*! Rule::       , */
+
+/*! Rule::       - */
+
+/*! Rule::       \( */
+
+/*! Rule::       \) */
+
+/*! Rule::       \* */
+
+/*! Rule::       \+ */
+
+/*! Rule::       \/ */
+
+/*! Rule::       \s+ */
+
+/*! decimal.js-light v2.5.1 https://github.com/MikeMcl/decimal.js-light/LICENCE */
+
+/**
+ * A better abstraction over CSS.
+ *
+ * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
+ * @website https://github.com/cssinjs/jss
+ * @license MIT
+ */
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.10.2
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**!
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version 1.16.1-lts
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */

ui/build/static/js/runtime-main.9fea6c1a.js

@@ -0,0 +1,2 @@
+!function(e){function t(t){for(var n,i,l=t[0],a=t[1],f=t[2],c=0,s=[];c<l.length;c++)i=l[c],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,f||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,l=1;l<r.length;l++){var a=r[l];0!==o[a]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/[[.RootPath]]/";var l=this.webpackJsonpui=this.webpackJsonpui||[],a=l.push.bind(l);l.push=t,l=l.slice();for(var f=0;f<l.length;f++)t(l[f]);var p=a;r()}([]);
+//# sourceMappingURL=runtime-main.9fea6c1a.js.map

ui/package.json

@@ -3,37 +3,39 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "4.11.0",
-    "@material-ui/icons": "4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.56",
-    "@reduxjs/toolkit": "1.4.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
+    "@material-ui/core": "4.12.3",
+    "@material-ui/icons": "4.11.2",
+    "@material-ui/lab": "4.0.0-alpha.58",
+    "@reduxjs/toolkit": "1.6.2",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.1.9",
+    "@types/jest": "^27.0.2",
     "@types/lodash.uniqby": "4.7.6",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-redux": "7.1.9",
-    "@types/react-router-dom": "5.1.6",
-    "@types/react-syntax-highlighter": "13.5.0",
-    "@types/recharts": "1.8.16",
-    "axios": "0.20.0",
+    "@types/node": "^16.3.1",
+    "@types/react": "^17.0.29",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-redux": "7.1.19",
+    "@types/react-router-dom": "5.3.1",
+    "@types/react-syntax-highlighter": "13.5.2",
+    "@types/recharts": "1.8.20",
+    "axios": "0.21.2",
     "clsx": "1.1.1",
+    "dayjs": "1.10.7",
     "lodash.uniqby": "4.7.0",
-    "query-string": "6.13.7",
+    "query-string": "7.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-redux": "7.2.2",
-    "react-router-dom": "5.2.0",
-    "react-scripts": "3.4.3",
-    "react-syntax-highlighter": "15.3.0",
-    "recharts": "1.8.5",
-    "typescript": "~3.7.2"
+    "react-redux": "7.2.4",
+    "react-router-dom": "5.3.0",
+    "react-scripts": "5.0.1",
+    "react-syntax-highlighter": "15.4.3",
+    "react-window": "1.8.6",
+    "recharts": "2.1.4",
+    "typescript": "~4.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "export PUBLIC_URL=http://localhost:3000/ && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -54,6 +56,8 @@
     ]
   },
   "devDependencies": {
+    "@types/react-window": "1.8.5",
     "redux-devtools": "3.7.0"
-  }
+  },
+  "homepage": "/[[.RootPath]]"
 }

ui/public/index.html

@@ -1,3 +1,7 @@
+<!--
+  This file is used as a template for go's html/template package.
+  Use delimiter "/[[", "]]" to denote actions.
+-->
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -45,6 +49,11 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
     />
+    <script>
+      window.FLAG_ROOT_PATH = "%PUBLIC_URL%";
+      window.FLAG_PROMETHEUS_SERVER_ADDRESS = "/[[.PrometheusAddr]]";
+	  window.FLAG_READ_ONLY = "/[[.ReadOnly]]";
+    </script>
     <title>Asynq - Monitoring</title>
   </head>
   <body>

ui/src/App.tsx

@@ -10,7 +10,6 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
-import Typography from "@material-ui/core/Typography";
 import Snackbar from "@material-ui/core/Snackbar";
 import SnackbarContent from "@material-ui/core/SnackbarContent";
 import IconButton from "@material-ui/core/IconButton";
@@ -22,21 +21,26 @@ import LayersIcon from "@material-ui/icons/Layers";
 import SettingsIcon from "@material-ui/icons/Settings";
 import ScheduleIcon from "@material-ui/icons/Schedule";
 import FeedbackIcon from "@material-ui/icons/Feedback";
+import TimelineIcon from "@material-ui/icons/Timeline";
 import DoubleArrowIcon from "@material-ui/icons/DoubleArrow";
 import CloseIcon from "@material-ui/icons/Close";
 import { AppState } from "./store";
-import { paths } from "./paths";
-import { useTheme } from "./theme";
+import { paths as getPaths } from "./paths";
+import { isDarkTheme, useTheme } from "./theme";
 import { closeSnackbar } from "./actions/snackbarActions";
 import { toggleDrawer } from "./actions/settingsActions";
 import ListItemLink from "./components/ListItemLink";
 import SchedulersView from "./views/SchedulersView";
 import DashboardView from "./views/DashboardView";
 import TasksView from "./views/TasksView";
+import TaskDetailsView from "./views/TaskDetailsView";
 import SettingsView from "./views/SettingsView";
 import ServersView from "./views/ServersView";
 import RedisInfoView from "./views/RedisInfoView";
+import MetricsView from "./views/MetricsView";
 import PageNotFoundView from "./views/PageNotFoundView";
+import { ReactComponent as Logo } from "./images/logo-color.svg";
+import { ReactComponent as LogoDarkTheme } from "./images/logo-white.svg";
 
 const drawerWidth = 220;
 
@@ -63,18 +67,14 @@ const useStyles = (theme: Theme) =>
       zIndex: theme.zIndex.drawer + 1,
     },
     menuButton: {
-      marginRight: theme.spacing(2),
-      color:
-        theme.palette.type === "dark"
-          ? theme.palette.grey[100]
-          : theme.palette.grey[700],
+      marginRight: theme.spacing(1),
+      color: isDarkTheme(theme)
+        ? theme.palette.grey[100]
+        : theme.palette.grey[700],
     },
     menuButtonHidden: {
       display: "none",
     },
-    title: {
-      flexGrow: 1,
-    },
     drawerPaper: {
       position: "relative",
       whiteSpace: "nowrap",
@@ -154,6 +154,7 @@ function SlideUpTransition(props: TransitionProps) {
 function App(props: ConnectedProps<typeof connector>) {
   const theme = useTheme(props.themePreference);
   const classes = useStyles(theme)();
+  const paths = getPaths();
   return (
     <ThemeProvider theme={theme}>
       <Router>
@@ -173,15 +174,11 @@ function App(props: ConnectedProps<typeof connector>) {
               >
                 <MenuIcon />
               </IconButton>
-              <Typography
-                component="h1"
-                variant="h6"
-                noWrap
-                className={classes.title}
-                color="textPrimary"
-              >
-                Asynq Monitoring
-              </Typography>
+              {isDarkTheme(theme) ? (
+                <LogoDarkTheme width={200} height={48} />
+              ) : (
+                <Logo width={200} height={48} />
+              )}
             </Toolbar>
           </AppBar>
           <div className={classes.mainContainer}>
@@ -244,6 +241,13 @@ function App(props: ConnectedProps<typeof connector>) {
                       primary="Redis"
                       icon={<LayersIcon />}
                     />
+                    {window.PROMETHEUS_SERVER_ADDRESS && (
+                      <ListItemLink
+                        to={paths.QUEUE_METRICS}
+                        primary="Metrics"
+                        icon={<TimelineIcon />}
+                      />
+                    )}
                   </div>
                 </List>
                 <List>
@@ -270,6 +274,9 @@ function App(props: ConnectedProps<typeof connector>) {
             <main className={classes.content}>
               <div className={classes.contentWrapper}>
                 <Switch>
+                  <Route exact path={paths.TASK_DETAILS}>
+                    <TaskDetailsView />
+                  </Route>
                   <Route exact path={paths.QUEUE_DETAILS}>
                     <TasksView />
                   </Route>
@@ -288,6 +295,9 @@ function App(props: ConnectedProps<typeof connector>) {
                   <Route exact path={paths.HOME}>
                     <DashboardView />
                   </Route>
+                  <Route exact path={paths.QUEUE_METRICS}>
+                    <MetricsView />
+                  </Route>
                   <Route path="*">
                     <PageNotFoundView />
                   </Route>

ui/src/actions/groupsActions.ts

@@ -0,0 +1,52 @@
+import { Dispatch } from "redux";
+import { listGroups, ListGroupsResponse } from "../api";
+import { toErrorString, toErrorStringWithHttpStatus } from "../utils";
+
+// List of groups related action types.
+export const LIST_GROUPS_BEGIN = "LIST_GROUPS_BEGIN";
+export const LIST_GROUPS_SUCCESS = "LIST_GROUPS_SUCCESS";
+export const LIST_GROUPS_ERROR = "LIST_GROUPS_ERROR";
+
+interface ListGroupsBeginAction {
+  type: typeof LIST_GROUPS_BEGIN;
+  queue: string;
+}
+
+interface ListGroupsSuccessAction {
+  type: typeof LIST_GROUPS_SUCCESS;
+  payload: ListGroupsResponse;
+  queue: string;
+}
+
+interface ListGroupsErrorAction {
+  type: typeof LIST_GROUPS_ERROR;
+  queue: string;
+  error: string;
+}
+
+// Union of all groups related action types.
+export type GroupsActionTypes =
+  | ListGroupsBeginAction
+  | ListGroupsSuccessAction
+  | ListGroupsErrorAction;
+
+export function listGroupsAsync(qname: string) {
+  return async (dispatch: Dispatch<GroupsActionTypes>) => {
+    dispatch({ type: LIST_GROUPS_BEGIN, queue: qname });
+    try {
+      const response = await listGroups(qname);
+      dispatch({
+        type: LIST_GROUPS_SUCCESS,
+        payload: response,
+        queue: qname,
+      });
+    } catch (error) {
+      console.error(`listGroupsAsync: ${toErrorStringWithHttpStatus(error)}`);
+      dispatch({
+        type: LIST_GROUPS_ERROR,
+        error: toErrorString(error),
+        queue: qname,
+      });
+    }
+  };
+}

ui/src/actions/metricsActions.ts

@@ -0,0 +1,48 @@
+import { Dispatch } from "redux";
+import { getMetrics, MetricsResponse } from "../api";
+import { toErrorString, toErrorStringWithHttpStatus } from "../utils";
+
+// List of metrics related action types.
+export const GET_METRICS_BEGIN = "GET_METRICS_BEGIN";
+export const GET_METRICS_SUCCESS = "GET_METRICS_SUCCESS";
+export const GET_METRICS_ERROR = "GET_METRICS_ERROR";
+
+interface GetMetricsBeginAction {
+  type: typeof GET_METRICS_BEGIN;
+}
+
+interface GetMetricsSuccessAction {
+  type: typeof GET_METRICS_SUCCESS;
+  payload: MetricsResponse;
+}
+
+interface GetMetricsErrorAction {
+  type: typeof GET_METRICS_ERROR;
+  error: string;
+}
+
+// Union of all metrics related actions.
+export type MetricsActionTypes =
+  | GetMetricsBeginAction
+  | GetMetricsSuccessAction
+  | GetMetricsErrorAction;
+
+export function getMetricsAsync(
+  endTime: number,
+  duration: number,
+  queues: string[]
+) {
+  return async (dispatch: Dispatch<MetricsActionTypes>) => {
+    dispatch({ type: GET_METRICS_BEGIN });
+    try {
+      const response = await getMetrics(endTime, duration, queues);
+      dispatch({ type: GET_METRICS_SUCCESS, payload: response });
+    } catch (error) {
+      console.error(`getMetricsAsync: ${toErrorStringWithHttpStatus(error)}`);
+      dispatch({
+        type: GET_METRICS_ERROR,
+        error: toErrorString(error),
+      });
+    }
+  };
+}

ui/src/actions/settingsActions.ts

@@ -1,8 +1,11 @@
 import { ThemePreference } from "../reducers/settingsReducer";
+import { DailyStatsKey } from "../views/DashboardView";
 // List of settings related action types.
 export const POLL_INTERVAL_CHANGE = "POLL_INTERVAL_CHANGE";
 export const THEME_PREFERENCE_CHANGE = "THEME_PREFERENCE_CHANGE";
 export const TOGGLE_DRAWER = "TOGGLE_DRAWER";
+export const TASK_ROWS_PER_PAGE_CHANGE = "TASK_ROWS_PER_PAGE_CHANGE";
+export const DAILY_STATS_KEY_CHANGE = "DAILY_STATS_KEY_CHANGE";
 
 interface PollIntervalChangeAction {
   type: typeof POLL_INTERVAL_CHANGE;
@@ -18,11 +21,23 @@ interface ToggleDrawerAction {
   type: typeof TOGGLE_DRAWER;
 }
 
+interface TaskRowsPerPageChange {
+  type: typeof TASK_ROWS_PER_PAGE_CHANGE;
+  value: number;
+}
+
+interface DailyStatsKeyChange {
+  type: typeof DAILY_STATS_KEY_CHANGE;
+  value: DailyStatsKey;
+}
+
 // Union of all settings related action types.
 export type SettingsActionTypes =
   | PollIntervalChangeAction
   | ThemePreferenceChangeAction
-  | ToggleDrawerAction;
+  | ToggleDrawerAction
+  | TaskRowsPerPageChange
+  | DailyStatsKeyChange;
 
 export function pollIntervalChange(value: number) {
   return {
@@ -41,3 +56,17 @@ export function selectTheme(value: ThemePreference) {
 export function toggleDrawer() {
   return { type: TOGGLE_DRAWER };
 }
+
+export function taskRowsPerPageChange(value: number) {
+  return {
+    type: TASK_ROWS_PER_PAGE_CHANGE,
+    value,
+  };
+}
+
+export function dailyStatsKeyChange(value: DailyStatsKey) {
+  return {
+    type: DAILY_STATS_KEY_CHANGE,
+    value,
+  }
+}

ui/src/api.ts

@@ -4,36 +4,24 @@ import queryString from "query-string";
 // In production build, API server is on listening on the same port as
 // the static file server.
 // In developement, we assume that the API server is listening on port 8080.
-const BASE_URL =
-  process.env.NODE_ENV === "production" ? "/api" : "http://localhost:8080/api";
+const getBaseUrl = () =>
+  process.env.NODE_ENV === "production"
+    ? `${window.ROOT_PATH}/api`
+    : `http://localhost:8080${window.ROOT_PATH}/api`;
 
 export interface ListQueuesResponse {
   queues: Queue[];
 }
 
-export interface ListActiveTasksResponse {
-  tasks: ActiveTask[];
+export interface ListTasksResponse {
+  tasks: TaskInfo[];
   stats: Queue;
 }
 
-export interface ListPendingTasksResponse {
-  tasks: PendingTask[];
-  stats: Queue;
-}
-
-export interface ListScheduledTasksResponse {
-  tasks: ScheduledTask[];
-  stats: Queue;
-}
-
-export interface ListRetryTasksResponse {
-  tasks: RetryTask[];
-  stats: Queue;
-}
-
-export interface ListArchivedTasksResponse {
-  tasks: ArchivedTask[];
+export interface ListAggregatingTasksResponse {
+  tasks: TaskInfo[];
   stats: Queue;
+  groups: GroupInfo[];
 }
 
 export interface ListServersResponse {
@@ -54,32 +42,96 @@ export interface BatchCancelTasksResponse {
 }
 
 export interface BatchDeleteTasksResponse {
-  deleted_keys: string[];
-  failed_keys: string[];
+  deleted_ids: string[];
+  failed_ids: string[];
 }
 
 export interface BatchRunTasksResponse {
-  pending_keys: string[];
-  error_keys: string[];
+  pending_ids: string[];
+  error_ids: string[];
 }
 
 export interface BatchArchiveTasksResponse {
-  archived_keys: string[];
-  error_keys: string[];
+  archived_ids: string[];
+  error_ids: string[];
 }
 
 export interface DeleteAllTasksResponse {
   deleted: number;
 }
 
+export interface ArchiveAllTasksResponse {
+  archived: number;
+}
+
+export interface RunAllTasksResponse {
+  scheduled: number;
+}
+
 export interface ListQueueStatsResponse {
   stats: { [qname: string]: DailyStat[] };
 }
 
+export interface ListGroupsResponse {
+  stats: Queue;
+  groups: GroupInfo[];
+}
+
 export interface RedisInfoResponse {
   address: string;
   info: RedisInfo;
   raw_info: string;
+  cluster: boolean;
+
+  // following fields are set only when cluster=true
+  raw_cluster_nodes: string;
+  queue_locations: QueueLocation[] | null;
+}
+
+// Describes location of a queue in cluster.
+export interface QueueLocation {
+  queue: string; // queue name
+  keyslot: number; // cluster keyslot
+  nodes: string[]; // node addresses
+}
+
+export interface MetricsResponse {
+  queue_size: PrometheusMetricsResponse;
+  queue_latency_seconds: PrometheusMetricsResponse;
+  queue_memory_usage_approx_bytes: PrometheusMetricsResponse;
+  tasks_processed_per_second: PrometheusMetricsResponse;
+  tasks_failed_per_second: PrometheusMetricsResponse;
+  error_rate: PrometheusMetricsResponse;
+  pending_tasks_by_queue: PrometheusMetricsResponse;
+  retry_tasks_by_queue: PrometheusMetricsResponse;
+  archived_tasks_by_queue: PrometheusMetricsResponse;
+}
+
+export interface PrometheusMetricsResponse {
+  status: "success" | "error";
+  data?: MetricsResult; // present if status === "success"
+  error?: string; // present if status === "error"
+  errorType?: string; // present if status === "error"
+}
+
+export interface MetricsResult {
+  resultType: string;
+  result: Metrics[];
+}
+
+export interface Metrics {
+  metric: MetricsInfo;
+  values: [number, string][]; // [unixtime, value]
+}
+
+export interface MetricsInfo {
+  __name__: string;
+  instance: string;
+  job: string;
+
+  // labels (may or may not be present depending on metrics)
+  queue?: string;
+  state?: string;
 }
 
 // Return value from redis INFO command.
@@ -217,16 +269,26 @@ export interface RedisInfo {
   used_memory_startup: string;
 }
 
+export interface GroupInfo {
+  group: string;
+  size: number;
+}
+
 export interface Queue {
   queue: string;
   paused: boolean;
   size: number;
+  groups: number;
+  latency_msec: number;
+  display_latency: string;
   memory_usage_bytes: number;
   active: number;
   pending: number;
+  aggregating: number;
   scheduled: number;
   retry: number;
   archived: number;
+  completed: number;
   processed: number;
   failed: number;
   timestamp: string;
@@ -239,59 +301,25 @@ export interface DailyStat {
   failed: number;
 }
 
-// BaseTask corresponds to asynq.Task type.
-interface BaseTask {
+export interface TaskInfo {
+  id: string;
+  queue: string;
   type: string;
-  payload: { [key: string]: any };
-}
-
-export interface ActiveTask extends BaseTask {
-  id: string;
-  queue: string;
-  start_time: string;
-  deadline: string;
-  max_retry: number;
-  retried: number;
-  error_message: string;
-}
-
-export interface PendingTask extends BaseTask {
-  id: string;
-  key: string;
-  queue: string;
-  max_retry: number;
-  retried: number;
-  error_message: string;
-}
-
-export interface ScheduledTask extends BaseTask {
-  id: string;
-  key: string;
-  queue: string;
-  max_retry: number;
-  retried: number;
-  error_message: string;
-  next_process_at: string;
-}
-
-export interface RetryTask extends BaseTask {
-  id: string;
-  key: string;
-  queue: string;
-  next_process_at: string;
-  max_retry: number;
-  retried: number;
-  error_message: string;
-}
-
-export interface ArchivedTask extends BaseTask {
-  id: string;
-  key: string;
-  queue: string;
+  payload: string;
+  state: string;
+  start_time: string; // Only applies to task.state == 'active'
   max_retry: number;
   retried: number;
   last_failed_at: string;
   error_message: string;
+  next_process_at: string;
+  timeout_seconds: number;
+  deadline: string;
+  group: string;
+  completed_at: string;
+  result: string;
+  ttl_seconds: number;
+  is_orphaned: boolean; // Only applies to task.state == 'active'
 }
 
 export interface ServerInfo {
@@ -307,7 +335,10 @@ export interface ServerInfo {
 }
 
 export interface WorkerInfo {
-  task: ActiveTask;
+  task_id: string;
+  queue: string;
+  task_type: string;
+  task_payload: string;
   start_time: string;
 }
 
@@ -315,7 +346,7 @@ export interface SchedulerEntry {
   id: string;
   spec: string;
   task_type: string;
-  task_payload: { [key: string]: any };
+  task_payload: string;
   options: string[];
   next_enqueue_at: string;
   // prev_enqueue_at will be omitted
@@ -336,7 +367,7 @@ export interface PaginationOptions extends Record<string, number | undefined> {
 export async function listQueues(): Promise<ListQueuesResponse> {
   const resp = await axios({
     method: "get",
-    url: `${BASE_URL}/queues`,
+    url: `${getBaseUrl()}/queues`,
   });
   return resp.data;
 }
@@ -344,28 +375,48 @@ export async function listQueues(): Promise<ListQueuesResponse> {
 export async function deleteQueue(qname: string): Promise<void> {
   await axios({
     method: "delete",
-    url: `${BASE_URL}/queues/${qname}`,
+    url: `${getBaseUrl()}/queues/${qname}`,
   });
 }
 
 export async function pauseQueue(qname: string): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}:pause`,
+    url: `${getBaseUrl()}/queues/${qname}:pause`,
   });
 }
 
 export async function resumeQueue(qname: string): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}:resume`,
+    url: `${getBaseUrl()}/queues/${qname}:resume`,
   });
 }
 
 export async function listQueueStats(): Promise<ListQueueStatsResponse> {
   const resp = await axios({
     method: "get",
-    url: `${BASE_URL}/queue_stats`,
+    url: `${getBaseUrl()}/queue_stats`,
+  });
+  return resp.data;
+}
+
+export async function listGroups(qname: string): Promise<ListGroupsResponse> {
+  const resp = await axios({
+    method: "get",
+    url: `${getBaseUrl()}/queues/${qname}/groups`,
+  });
+  return resp.data;
+}
+
+export async function getTaskInfo(
+  qname: string,
+  id: string
+): Promise<TaskInfo> {
+  const url = `${getBaseUrl()}/queues/${qname}/tasks/${id}`;
+  const resp = await axios({
+    method: "get",
+    url,
   });
   return resp.data;
 }
@@ -373,8 +424,8 @@ export async function listQueueStats(): Promise<ListQueueStatsResponse> {
 export async function listActiveTasks(
   qname: string,
   pageOpts?: PaginationOptions
-): Promise<ListActiveTasksResponse> {
-  let url = `${BASE_URL}/queues/${qname}/active_tasks`;
+): Promise<ListTasksResponse> {
+  let url = `${getBaseUrl()}/queues/${qname}/active_tasks`;
   if (pageOpts) {
     url += `?${queryString.stringify(pageOpts)}`;
   }
@@ -391,14 +442,14 @@ export async function cancelActiveTask(
 ): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/active_tasks/${taskId}:cancel`,
+    url: `${getBaseUrl()}/queues/${qname}/active_tasks/${taskId}:cancel`,
   });
 }
 
 export async function cancelAllActiveTasks(qname: string): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/active_tasks:cancel_all`,
+    url: `${getBaseUrl()}/queues/${qname}/active_tasks:cancel_all`,
   });
 }
 
@@ -408,7 +459,7 @@ export async function batchCancelActiveTasks(
 ): Promise<BatchCancelTasksResponse> {
   const resp = await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/active_tasks:batch_cancel`,
+    url: `${getBaseUrl()}/queues/${qname}/active_tasks:batch_cancel`,
     data: {
       task_ids: taskIds,
     },
@@ -419,8 +470,8 @@ export async function batchCancelActiveTasks(
 export async function listPendingTasks(
   qname: string,
   pageOpts?: PaginationOptions
-): Promise<ListPendingTasksResponse> {
-  let url = `${BASE_URL}/queues/${qname}/pending_tasks`;
+): Promise<ListTasksResponse> {
+  let url = `${getBaseUrl()}/queues/${qname}/pending_tasks`;
   if (pageOpts) {
     url += `?${queryString.stringify(pageOpts)}`;
   }
@@ -434,8 +485,8 @@ export async function listPendingTasks(
 export async function listScheduledTasks(
   qname: string,
   pageOpts?: PaginationOptions
-): Promise<ListScheduledTasksResponse> {
-  let url = `${BASE_URL}/queues/${qname}/scheduled_tasks`;
+): Promise<ListTasksResponse> {
+  let url = `${getBaseUrl()}/queues/${qname}/scheduled_tasks`;
   if (pageOpts) {
     url += `?${queryString.stringify(pageOpts)}`;
   }
@@ -449,8 +500,8 @@ export async function listScheduledTasks(
 export async function listRetryTasks(
   qname: string,
   pageOpts?: PaginationOptions
-): Promise<ListRetryTasksResponse> {
-  let url = `${BASE_URL}/queues/${qname}/retry_tasks`;
+): Promise<ListTasksResponse> {
+  let url = `${getBaseUrl()}/queues/${qname}/retry_tasks`;
   if (pageOpts) {
     url += `?${queryString.stringify(pageOpts)}`;
   }
@@ -464,8 +515,39 @@ export async function listRetryTasks(
 export async function listArchivedTasks(
   qname: string,
   pageOpts?: PaginationOptions
-): Promise<ListArchivedTasksResponse> {
-  let url = `${BASE_URL}/queues/${qname}/archived_tasks`;
+): Promise<ListTasksResponse> {
+  let url = `${getBaseUrl()}/queues/${qname}/archived_tasks`;
+  if (pageOpts) {
+    url += `?${queryString.stringify(pageOpts)}`;
+  }
+  const resp = await axios({
+    method: "get",
+    url,
+  });
+  return resp.data;
+}
+
+export async function listCompletedTasks(
+  qname: string,
+  pageOpts?: PaginationOptions
+): Promise<ListTasksResponse> {
+  let url = `${getBaseUrl()}/queues/${qname}/completed_tasks`;
+  if (pageOpts) {
+    url += `?${queryString.stringify(pageOpts)}`;
+  }
+  const resp = await axios({
+    method: "get",
+    url,
+  });
+  return resp.data;
+}
+
+export async function listAggregatingTasks(
+  qname: string,
+  gname: string,
+  pageOpts?: PaginationOptions
+): Promise<ListAggregatingTasksResponse> {
+  let url = `${getBaseUrl()}/queues/${qname}/groups/${gname}/aggregating_tasks`;
   if (pageOpts) {
     url += `?${queryString.stringify(pageOpts)}`;
   }
@@ -478,23 +560,23 @@ export async function listArchivedTasks(
 
 export async function archivePendingTask(
   qname: string,
-  taskKey: string
+  taskId: string
 ): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/pending_tasks/${taskKey}:archive`,
+    url: `${getBaseUrl()}/queues/${qname}/pending_tasks/${taskId}:archive`,
   });
 }
 
 export async function batchArchivePendingTasks(
   qname: string,
-  taskKeys: string[]
+  taskIds: string[]
 ): Promise<BatchArchiveTasksResponse> {
   const resp = await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/pending_tasks:batch_archive`,
+    url: `${getBaseUrl()}/queues/${qname}/pending_tasks:batch_archive`,
     data: {
-      task_keys: taskKeys,
+      task_ids: taskIds,
     },
   });
   return resp.data;
@@ -503,29 +585,29 @@ export async function batchArchivePendingTasks(
 export async function archiveAllPendingTasks(qname: string): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/pending_tasks:archive_all`,
+    url: `${getBaseUrl()}/queues/${qname}/pending_tasks:archive_all`,
   });
 }
 
 export async function deletePendingTask(
   qname: string,
-  taskKey: string
+  taskId: string
 ): Promise<void> {
   await axios({
     method: "delete",
-    url: `${BASE_URL}/queues/${qname}/pending_tasks/${taskKey}`,
+    url: `${getBaseUrl()}/queues/${qname}/pending_tasks/${taskId}`,
   });
 }
 
 export async function batchDeletePendingTasks(
   qname: string,
-  taskKeys: string[]
+  taskIds: string[]
 ): Promise<BatchDeleteTasksResponse> {
   const resp = await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/pending_tasks:batch_delete`,
+    url: `${getBaseUrl()}/queues/${qname}/pending_tasks:batch_delete`,
     data: {
-      task_keys: taskKeys,
+      task_ids: taskIds,
     },
   });
   return resp.data;
@@ -536,50 +618,161 @@ export async function deleteAllPendingTasks(
 ): Promise<DeleteAllTasksResponse> {
   const resp = await axios({
     method: "delete",
-    url: `${BASE_URL}/queues/${qname}/pending_tasks:delete_all`,
+    url: `${getBaseUrl()}/queues/${qname}/pending_tasks:delete_all`,
+  });
+  return resp.data;
+}
+
+export async function deleteAggregatingTask(
+  qname: string,
+  gname: string,
+  taskId: string
+): Promise<void> {
+  await axios({
+    method: "delete",
+    url: `${getBaseUrl()}/queues/${qname}/groups/${gname}/aggregating_tasks/${taskId}`,
+  });
+}
+
+export async function batchDeleteAggregatingTasks(
+  qname: string,
+  gname: string,
+  taskIds: string[]
+): Promise<BatchDeleteTasksResponse> {
+  const resp = await axios({
+    method: "post",
+    url: `${getBaseUrl()}/queues/${qname}/groups/${gname}/aggregating_tasks:batch_delete`,
+    data: {
+      task_ids: taskIds,
+    },
+  });
+  return resp.data;
+}
+
+export async function deleteAllAggregatingTasks(
+  qname: string,
+  gname: string
+): Promise<DeleteAllTasksResponse> {
+  const resp = await axios({
+    method: "delete",
+    url: `${getBaseUrl()}/queues/${qname}/groups/${gname}/aggregating_tasks:delete_all`,
+  });
+  return resp.data;
+}
+
+export async function runAggregatingTask(
+  qname: string,
+  gname: string,
+  taskId: string
+): Promise<void> {
+  await axios({
+    method: "post",
+    url: `${getBaseUrl()}/queues/${qname}/groups/${gname}/aggregating_tasks/${taskId}:run`,
+  });
+}
+
+export async function batchRunAggregatingTasks(
+  qname: string,
+  gname: string,
+  taskIds: string[]
+): Promise<BatchRunTasksResponse> {
+  const resp = await axios({
+    method: "post",
+    url: `${getBaseUrl()}/queues/${qname}/groups/${gname}/aggregating_tasks:batch_run`,
+    data: {
+      task_ids: taskIds,
+    },
+  });
+  return resp.data;
+}
+
+export async function runAllAggregatingTasks(
+  qname: string,
+  gname: string
+): Promise<RunAllTasksResponse> {
+  const resp = await axios({
+    method: "post",
+    url: `${getBaseUrl()}/queues/${qname}/groups/${gname}/aggregating_tasks:run_all`,
+  });
+  return resp.data;
+}
+
+export async function archiveAggregatingTask(
+  qname: string,
+  gname: string,
+  taskId: string
+): Promise<void> {
+  await axios({
+    method: "post",
+    url: `${getBaseUrl()}/queues/${qname}/groups/${gname}/aggregating_tasks/${taskId}:archive`,
+  });
+}
+
+export async function batchArchiveAggregatingTasks(
+  qname: string,
+  gname: string,
+  taskIds: string[]
+): Promise<BatchArchiveTasksResponse> {
+  const resp = await axios({
+    method: "post",
+    url: `${getBaseUrl()}/queues/${qname}/groups/${gname}/aggregating_tasks:batch_archive`,
+    data: {
+      task_ids: taskIds,
+    },
+  });
+  return resp.data;
+}
+
+export async function archiveAllAggregatingTasks(
+  qname: string,
+  gname: string
+): Promise<ArchiveAllTasksResponse> {
+  const resp = await axios({
+    method: "post",
+    url: `${getBaseUrl()}/queues/${qname}/groups/${gname}/aggregating_tasks:archive_all`,
   });
   return resp.data;
 }
 
 export async function runScheduledTask(
   qname: string,
-  taskKey: string
+  taskId: string
 ): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/scheduled_tasks/${taskKey}:run`,
+    url: `${getBaseUrl()}/queues/${qname}/scheduled_tasks/${taskId}:run`,
   });
 }
 
 export async function archiveScheduledTask(
   qname: string,
-  taskKey: string
+  taskId: string
 ): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/scheduled_tasks/${taskKey}:archive`,
+    url: `${getBaseUrl()}/queues/${qname}/scheduled_tasks/${taskId}:archive`,
   });
 }
 
 export async function deleteScheduledTask(
   qname: string,
-  taskKey: string
+  taskId: string
 ): Promise<void> {
   await axios({
     method: "delete",
-    url: `${BASE_URL}/queues/${qname}/scheduled_tasks/${taskKey}`,
+    url: `${getBaseUrl()}/queues/${qname}/scheduled_tasks/${taskId}`,
   });
 }
 
 export async function batchDeleteScheduledTasks(
   qname: string,
-  taskKeys: string[]
+  taskIds: string[]
 ): Promise<BatchDeleteTasksResponse> {
   const resp = await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/scheduled_tasks:batch_delete`,
+    url: `${getBaseUrl()}/queues/${qname}/scheduled_tasks:batch_delete`,
     data: {
-      task_keys: taskKeys,
+      task_ids: taskIds,
     },
   });
   return resp.data;
@@ -590,20 +783,20 @@ export async function deleteAllScheduledTasks(
 ): Promise<DeleteAllTasksResponse> {
   const resp = await axios({
     method: "delete",
-    url: `${BASE_URL}/queues/${qname}/scheduled_tasks:delete_all`,
+    url: `${getBaseUrl()}/queues/${qname}/scheduled_tasks:delete_all`,
   });
   return resp.data;
 }
 
 export async function batchRunScheduledTasks(
   qname: string,
-  taskKeys: string[]
+  taskIds: string[]
 ): Promise<BatchRunTasksResponse> {
   const resp = await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/scheduled_tasks:batch_run`,
+    url: `${getBaseUrl()}/queues/${qname}/scheduled_tasks:batch_run`,
     data: {
-      task_keys: taskKeys,
+      task_ids: taskIds,
     },
   });
   return resp.data;
@@ -612,19 +805,19 @@ export async function batchRunScheduledTasks(
 export async function runAllScheduledTasks(qname: string): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/scheduled_tasks:run_all`,
+    url: `${getBaseUrl()}/queues/${qname}/scheduled_tasks:run_all`,
   });
 }
 
 export async function batchArchiveScheduledTasks(
   qname: string,
-  taskKeys: string[]
+  taskIds: string[]
 ): Promise<BatchArchiveTasksResponse> {
   const resp = await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/scheduled_tasks:batch_archive`,
+    url: `${getBaseUrl()}/queues/${qname}/scheduled_tasks:batch_archive`,
     data: {
-      task_keys: taskKeys,
+      task_ids: taskIds,
     },
   });
   return resp.data;
@@ -633,49 +826,49 @@ export async function batchArchiveScheduledTasks(
 export async function archiveAllScheduledTasks(qname: string): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/scheduled_tasks:archive_all`,
+    url: `${getBaseUrl()}/queues/${qname}/scheduled_tasks:archive_all`,
   });
 }
 
 export async function runRetryTask(
   qname: string,
-  taskKey: string
+  taskId: string
 ): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/retry_tasks/${taskKey}:run`,
+    url: `${getBaseUrl()}/queues/${qname}/retry_tasks/${taskId}:run`,
   });
 }
 
 export async function archiveRetryTask(
   qname: string,
-  taskKey: string
+  taskId: string
 ): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/retry_tasks/${taskKey}:archive`,
+    url: `${getBaseUrl()}/queues/${qname}/retry_tasks/${taskId}:archive`,
   });
 }
 
 export async function deleteRetryTask(
   qname: string,
-  taskKey: string
+  taskId: string
 ): Promise<void> {
   await axios({
     method: "delete",
-    url: `${BASE_URL}/queues/${qname}/retry_tasks/${taskKey}`,
+    url: `${getBaseUrl()}/queues/${qname}/retry_tasks/${taskId}`,
   });
 }
 
 export async function batchDeleteRetryTasks(
   qname: string,
-  taskKeys: string[]
+  taskIds: string[]
 ): Promise<BatchDeleteTasksResponse> {
   const resp = await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/retry_tasks:batch_delete`,
+    url: `${getBaseUrl()}/queues/${qname}/retry_tasks:batch_delete`,
     data: {
-      task_keys: taskKeys,
+      task_ids: taskIds,
     },
   });
   return resp.data;
@@ -686,20 +879,20 @@ export async function deleteAllRetryTasks(
 ): Promise<DeleteAllTasksResponse> {
   const resp = await axios({
     method: "delete",
-    url: `${BASE_URL}/queues/${qname}/retry_tasks:delete_all`,
+    url: `${getBaseUrl()}/queues/${qname}/retry_tasks:delete_all`,
   });
   return resp.data;
 }
 
 export async function batchRunRetryTasks(
   qname: string,
-  taskKeys: string[]
+  taskIds: string[]
 ): Promise<BatchRunTasksResponse> {
   const resp = await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/retry_tasks:batch_run`,
+    url: `${getBaseUrl()}/queues/${qname}/retry_tasks:batch_run`,
     data: {
-      task_keys: taskKeys,
+      task_ids: taskIds,
     },
   });
   return resp.data;
@@ -708,19 +901,19 @@ export async function batchRunRetryTasks(
 export async function runAllRetryTasks(qname: string): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/retry_tasks:run_all`,
+    url: `${getBaseUrl()}/queues/${qname}/retry_tasks:run_all`,
   });
 }
 
 export async function batchArchiveRetryTasks(
   qname: string,
-  taskKeys: string[]
+  taskIds: string[]
 ): Promise<BatchArchiveTasksResponse> {
   const resp = await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/retry_tasks:batch_archive`,
+    url: `${getBaseUrl()}/queues/${qname}/retry_tasks:batch_archive`,
     data: {
-      task_keys: taskKeys,
+      task_ids: taskIds,
     },
   });
   return resp.data;
@@ -729,39 +922,39 @@ export async function batchArchiveRetryTasks(
 export async function archiveAllRetryTasks(qname: string): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/retry_tasks:archive_all`,
+    url: `${getBaseUrl()}/queues/${qname}/retry_tasks:archive_all`,
   });
 }
 
 export async function runArchivedTask(
   qname: string,
-  taskKey: string
+  taskId: string
 ): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/archived_tasks/${taskKey}:run`,
+    url: `${getBaseUrl()}/queues/${qname}/archived_tasks/${taskId}:run`,
   });
 }
 
 export async function deleteArchivedTask(
   qname: string,
-  taskKey: string
+  taskId: string
 ): Promise<void> {
   await axios({
     method: "delete",
-    url: `${BASE_URL}/queues/${qname}/archived_tasks/${taskKey}`,
+    url: `${getBaseUrl()}/queues/${qname}/archived_tasks/${taskId}`,
   });
 }
 
 export async function batchDeleteArchivedTasks(
   qname: string,
-  taskKeys: string[]
+  taskIds: string[]
 ): Promise<BatchDeleteTasksResponse> {
   const resp = await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/archived_tasks:batch_delete`,
+    url: `${getBaseUrl()}/queues/${qname}/archived_tasks:batch_delete`,
     data: {
-      task_keys: taskKeys,
+      task_ids: taskIds,
     },
   });
   return resp.data;
@@ -772,20 +965,20 @@ export async function deleteAllArchivedTasks(
 ): Promise<DeleteAllTasksResponse> {
   const resp = await axios({
     method: "delete",
-    url: `${BASE_URL}/queues/${qname}/archived_tasks:delete_all`,
+    url: `${getBaseUrl()}/queues/${qname}/archived_tasks:delete_all`,
   });
   return resp.data;
 }
 
 export async function batchRunArchivedTasks(
   qname: string,
-  taskKeys: string[]
+  taskIds: string[]
 ): Promise<BatchRunTasksResponse> {
   const resp = await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/archived_tasks:batch_run`,
+    url: `${getBaseUrl()}/queues/${qname}/archived_tasks:batch_run`,
     data: {
-      task_keys: taskKeys,
+      task_ids: taskIds,
     },
   });
   return resp.data;
@@ -794,14 +987,48 @@ export async function batchRunArchivedTasks(
 export async function runAllArchivedTasks(qname: string): Promise<void> {
   await axios({
     method: "post",
-    url: `${BASE_URL}/queues/${qname}/archived_tasks:run_all`,
+    url: `${getBaseUrl()}/queues/${qname}/archived_tasks:run_all`,
   });
 }
 
+export async function deleteCompletedTask(
+  qname: string,
+  taskId: string
+): Promise<void> {
+  await axios({
+    method: "delete",
+    url: `${getBaseUrl()}/queues/${qname}/completed_tasks/${taskId}`,
+  });
+}
+
+export async function batchDeleteCompletedTasks(
+  qname: string,
+  taskIds: string[]
+): Promise<BatchDeleteTasksResponse> {
+  const resp = await axios({
+    method: "post",
+    url: `${getBaseUrl()}/queues/${qname}/completed_tasks:batch_delete`,
+    data: {
+      task_ids: taskIds,
+    },
+  });
+  return resp.data;
+}
+
+export async function deleteAllCompletedTasks(
+  qname: string
+): Promise<DeleteAllTasksResponse> {
+  const resp = await axios({
+    method: "delete",
+    url: `${getBaseUrl()}/queues/${qname}/completed_tasks:delete_all`,
+  });
+  return resp.data;
+}
+
 export async function listServers(): Promise<ListServersResponse> {
   const resp = await axios({
     method: "get",
-    url: `${BASE_URL}/servers`,
+    url: `${getBaseUrl()}/servers`,
   });
   return resp.data;
 }
@@ -809,7 +1036,7 @@ export async function listServers(): Promise<ListServersResponse> {
 export async function listSchedulerEntries(): Promise<ListSchedulerEntriesResponse> {
   const resp = await axios({
     method: "get",
-    url: `${BASE_URL}/scheduler_entries`,
+    url: `${getBaseUrl()}/scheduler_entries`,
   });
   return resp.data;
 }
@@ -819,7 +1046,7 @@ export async function listSchedulerEnqueueEvents(
 ): Promise<ListSchedulerEnqueueEventsResponse> {
   const resp = await axios({
     method: "get",
-    url: `${BASE_URL}/scheduler_entries/${entryId}/enqueue_events`,
+    url: `${getBaseUrl()}/scheduler_entries/${entryId}/enqueue_events`,
   });
   return resp.data;
 }
@@ -827,7 +1054,32 @@ export async function listSchedulerEnqueueEvents(
 export async function getRedisInfo(): Promise<RedisInfoResponse> {
   const resp = await axios({
     method: "get",
-    url: `${BASE_URL}/redis_info`,
+    url: `${getBaseUrl()}/redis_info`,
+  });
+  return resp.data;
+}
+
+interface MetricsEndpointParams {
+  endtime: number;
+  duration: number;
+  queues?: string; // comma-separated list of queues
+}
+
+export async function getMetrics(
+  endTime: number,
+  duration: number,
+  queues: string[]
+): Promise<MetricsResponse> {
+  let params: MetricsEndpointParams = {
+    endtime: endTime,
+    duration: duration,
+  };
+  if (queues && queues.length > 0) {
+    params.queues = queues.join(",");
+  }
+  const resp = await axios({
+    method: "get",
+    url: `${getBaseUrl()}/metrics?${queryString.stringify(params)}`,
   });
   return resp.data;
 }

ui/src/components/ActiveTasksTable.tsx

@@ -1,55 +1,27 @@
-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";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import Alert from "@material-ui/lab/Alert";
-import AlertTitle from "@material-ui/lab/AlertTitle";
-import TableContainer from "@material-ui/core/TableContainer";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
-import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
 import Checkbox from "@material-ui/core/Checkbox";
 import IconButton from "@material-ui/core/IconButton";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Tooltip from "@material-ui/core/Tooltip";
 import CancelIcon from "@material-ui/icons/Cancel";
+import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import SyntaxHighlighter from "./SyntaxHighlighter";
+import React from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { useHistory } from "react-router-dom";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
 import {
-  listActiveTasksAsync,
-  cancelActiveTaskAsync,
   batchCancelActiveTasksAsync,
+  cancelActiveTaskAsync,
   cancelAllActiveTasksAsync,
+  listActiveTasksAsync,
 } from "../actions/tasksActions";
+import { taskDetailsPath } from "../paths";
 import { AppState } from "../store";
-import TablePaginationActions, {
-  rowsPerPageOptions,
-  defaultPageSize,
-} from "./TablePaginationActions";
-import TableActions from "./TableActions";
-import { usePolling } from "../hooks";
-import { ActiveTaskExtended } from "../reducers/tasksReducer";
-import { durationBefore, timeAgo, uuidPrefix } from "../utils";
 import { TableColumn } from "../types/table";
-
-const useStyles = makeStyles((theme) => ({
-  table: {
-    minWidth: 650,
-  },
-  stickyHeaderCell: {
-    background: theme.palette.background.paper,
-  },
-  alert: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-  pagination: {
-    border: "none",
-  },
-}));
+import { durationBefore, prettifyPayload, timeAgo, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
 
 function mapStateToProps(state: AppState) {
   return {
@@ -59,14 +31,16 @@ function mapStateToProps(state: AppState) {
     batchActionPending: state.tasks.activeTasks.batchActionPending,
     allActionPending: state.tasks.activeTasks.allActionPending,
     pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
   };
 }
 
 const mapDispatchToProps = {
-  listActiveTasksAsync,
-  cancelActiveTaskAsync,
-  batchCancelActiveTasksAsync,
-  cancelAllActiveTasksAsync,
+  listTasks: listActiveTasksAsync,
+  cancelTask: cancelActiveTaskAsync,
+  batchCancelTasks: batchCancelActiveTasksAsync,
+  cancelAllTasks: cancelAllActiveTasksAsync,
+  taskRowsPerPageChange,
 };
 
 const columns: TableColumn[] = [
@@ -85,201 +59,48 @@ type ReduxProps = ConnectedProps<typeof connector>;
 
 interface Props {
   queue: string; // name of the queue
-}
-
-function ActiveTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listActiveTasksAsync, queue } = props;
-  const classes = useStyles();
-  const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
-  const [selectedIds, setSelectedIds] = useState<string[]>([]);
-  const [activeTaskId, setActiveTaskId] = useState<string>("");
-
-  const handleChangePage = (
-    event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setPageSize(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.checked) {
-      const newSelected = props.tasks.map((t) => t.id);
-      setSelectedIds(newSelected);
-    } else {
-      setSelectedIds([]);
-    }
-  };
-
-  const handleCancelAllClick = () => {
-    props.cancelAllActiveTasksAsync(queue);
-  };
-
-  const handleBatchCancelClick = () => {
-    props
-      .batchCancelActiveTasksAsync(queue, selectedIds)
-      .then(() => setSelectedIds([]));
-  };
-
-  const fetchData = useCallback(() => {
-    const pageOpts = { page: page + 1, size: pageSize };
-    listActiveTasksAsync(queue, pageOpts);
-  }, [page, pageSize, queue, listActiveTasksAsync]);
-
-  usePolling(fetchData, pollInterval);
-
-  if (props.error.length > 0) {
-    return (
-      <Alert severity="error" className={classes.alert}>
-        <AlertTitle>Error</AlertTitle>
-        {props.error}
-      </Alert>
-    );
-  }
-
-  if (props.tasks.length === 0) {
-    return (
-      <Alert severity="info" className={classes.alert}>
-        <AlertTitle>Info</AlertTitle>
-        No active tasks at this time.
-      </Alert>
-    );
-  }
-
-  const rowCount = props.tasks.length;
-  const numSelected = selectedIds.length;
-  return (
-    <div>
-      <TableActions
-        showIconButtons={numSelected > 0}
-        iconButtonActions={[
-          {
-            tooltip: "Cancel",
-            icon: <CancelIcon />,
-            onClick: handleBatchCancelClick,
-            disabled: props.batchActionPending,
-          },
-        ]}
-        menuItemActions={[
-          {
-            label: "Cancel All",
-            onClick: handleCancelAllClick,
-            disabled: props.allActionPending,
-          },
-        ]}
-      />
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader={true}
-          className={classes.table}
-          aria-label="active tasks table"
-          size="small"
-        >
-          <TableHead>
-            <TableRow>
-              <TableCell
-                padding="checkbox"
-                classes={{ stickyHeader: classes.stickyHeaderCell }}
-              >
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
-              </TableCell>
-              {columns.map((col) => (
-                <TableCell
-                  key={col.key}
-                  align={col.align}
-                  classes={{ stickyHeader: classes.stickyHeaderCell }}
-                >
-                  {col.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {/* TODO: loading and empty state */}
-            {props.tasks.map((task) => (
-              <Row
-                key={task.id}
-                task={task}
-                isSelected={selectedIds.includes(task.id)}
-                onSelectChange={(checked: boolean) => {
-                  if (checked) {
-                    setSelectedIds(selectedIds.concat(task.id));
-                  } else {
-                    setSelectedIds(selectedIds.filter((id) => id !== task.id));
-                  }
-                }}
-                onCancelClick={() => {
-                  props.cancelActiveTaskAsync(queue, task.id);
-                }}
-                onActionCellEnter={() => setActiveTaskId(task.id)}
-                onActionCellLeave={() => setActiveTaskId("")}
-                showActions={activeTaskId === task.id}
-              />
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={rowsPerPageOptions}
-                colSpan={columns.length + 1}
-                count={props.tasks.length}
-                rowsPerPage={pageSize}
-                page={page}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePage}
-                onChangeRowsPerPage={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-                className={classes.pagination}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </div>
-  );
-}
-
-interface RowProps {
-  task: ActiveTaskExtended;
-  isSelected: boolean;
-  onSelectChange: (checked: boolean) => void;
-  onCancelClick: () => void;
-  showActions: boolean;
-  onActionCellEnter: () => void;
-  onActionCellLeave: () => void;
+  totalTaskCount: number; // total number of active tasks
 }
 
 function Row(props: RowProps) {
   const { task } = props;
+  const classes = useRowStyles();
+  const history = useHistory();
   return (
-    <TableRow key={task.id} selected={props.isSelected}>
-      <TableCell padding="checkbox">
-        <Checkbox
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            props.onSelectChange(event.target.checked)
-          }
-          checked={props.isSelected}
-        />
-      </TableCell>
-      <TableCell component="th" scope="row">
-        {uuidPrefix(task.id)}
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      {!window.READ_ONLY && (
+        <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+          <IconButton>
+            <Checkbox
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                props.onSelectChange(event.target.checked)
+              }
+              checked={props.isSelected}
+            />
+          </IconButton>
+        </TableCell>
+      )}
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
+          {uuidPrefix(task.id)}
+          <Tooltip title="Copy full ID to clipboard">
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(task.id);
+              }}
+              size="small"
+              className={classes.copyButton}
+            >
+              <FileCopyOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>
@@ -287,41 +108,67 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {JSON.stringify(task.payload)}
+          {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
-      <TableCell>{task.canceling ? "Canceling" : "Running"}</TableCell>
       <TableCell>
-        {task.start_time === "-" ? "just now" : timeAgo(task.start_time)}
+        {task.canceling
+          ? "Canceling"
+          : task.is_orphaned
+          ? "Orphaned"
+          : "Running"}
+      </TableCell>
+      <TableCell>
+        {task.is_orphaned
+          ? "-"
+          : task.start_time === "-"
+          ? "just now"
+          : timeAgo(task.start_time)}
       </TableCell>
       <TableCell>
         {task.deadline === "-" ? "-" : durationBefore(task.deadline)}
       </TableCell>
-      <TableCell
-        align="center"
-        onMouseEnter={props.onActionCellEnter}
-        onMouseLeave={props.onActionCellLeave}
-      >
-        {props.showActions ? (
-          <React.Fragment>
-            <Tooltip title="Cancel">
-              <IconButton
-                onClick={props.onCancelClick}
-                disabled={task.requestPending || task.canceling}
-                size="small"
-              >
-                <CancelIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          </React.Fragment>
-        ) : (
-          <IconButton size="small" onClick={props.onActionCellEnter}>
-            <MoreHorizIcon fontSize="small" />
-          </IconButton>
-        )}
-      </TableCell>
+      {!window.READ_ONLY && (
+        <TableCell
+          align="center"
+          onMouseEnter={props.onActionCellEnter}
+          onMouseLeave={props.onActionCellLeave}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {props.showActions ? (
+            <React.Fragment>
+              <Tooltip title="Cancel">
+                <IconButton
+                  onClick={props.onCancelClick}
+                  disabled={
+                    task.requestPending || task.canceling || task.is_orphaned
+                  }
+                  size="small"
+                >
+                  <CancelIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </React.Fragment>
+          ) : (
+            <IconButton size="small" onClick={props.onActionCellEnter}>
+              <MoreHorizIcon fontSize="small" />
+            </IconButton>
+          )}
+        </TableCell>
+      )}
     </TableRow>
   );
 }
 
+function ActiveTasksTable(props: Props & ReduxProps) {
+  return (
+    <TasksTable
+      taskState="active"
+      columns={columns}
+      renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
+      {...props}
+    />
+  );
+}
+
 export default connector(ActiveTasksTable);

ui/src/components/AggregatingTasksTable.tsx

@@ -0,0 +1,247 @@
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Tooltip from "@material-ui/core/Tooltip";
+import ArchiveIcon from "@material-ui/icons/Archive";
+import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
+import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
+import React from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { useHistory } from "react-router-dom";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
+import {
+  archiveAggregatingTaskAsync,
+  archiveAllAggregatingTasksAsync,
+  batchArchiveAggregatingTasksAsync,
+  batchDeleteAggregatingTasksAsync,
+  batchRunAggregatingTasksAsync,
+  deleteAggregatingTaskAsync,
+  deleteAllAggregatingTasksAsync,
+  listAggregatingTasksAsync,
+  runAggregatingTaskAsync,
+  runAllAggregatingTasksAsync,
+} from "../actions/tasksActions";
+import { PaginationOptions } from "../api";
+import { taskDetailsPath } from "../paths";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import { prettifyPayload, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
+
+function mapStateToProps(state: AppState) {
+  return {
+    groups: state.groups.data,
+    groupsError: state.groups.error,
+    loading: state.tasks.aggregatingTasks.loading,
+    allActionPending: state.tasks.aggregatingTasks.allActionPending,
+    batchActionPending: state.tasks.aggregatingTasks.batchActionPending,
+    error: state.tasks.aggregatingTasks.error,
+    group: state.tasks.aggregatingTasks.group,
+    tasks: state.tasks.aggregatingTasks.data,
+    pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
+  };
+}
+
+const mapDispatchToProps = {
+  listAggregatingTasksAsync,
+  deleteAllAggregatingTasksAsync,
+  archiveAllAggregatingTasksAsync,
+  runAllAggregatingTasksAsync,
+  batchDeleteAggregatingTasksAsync,
+  batchRunAggregatingTasksAsync,
+  batchArchiveAggregatingTasksAsync,
+  deleteAggregatingTaskAsync,
+  runAggregatingTaskAsync,
+  archiveAggregatingTaskAsync,
+  taskRowsPerPageChange,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+type ReduxProps = ConnectedProps<typeof connector>;
+
+interface Props {
+  queue: string;
+  selectedGroup: string;
+  totalTaskCount: number; // total number of tasks in the group
+}
+
+const columns: TableColumn[] = [
+  { key: "id", label: "ID", align: "left" },
+  { key: "type", label: "Type", align: "left" },
+  { key: "paylod", label: "Payload", align: "left" },
+  { key: "group", label: "Group", align: "left" },
+  { key: "actions", label: "Actions", align: "center" },
+];
+
+function Row(props: RowProps) {
+  const { task } = props;
+  const classes = useRowStyles();
+  const history = useHistory();
+  return (
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      {!window.READ_ONLY && (
+        <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+          <IconButton>
+            <Checkbox
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                props.onSelectChange(event.target.checked)
+              }
+              checked={props.isSelected}
+            />
+          </IconButton>
+        </TableCell>
+      )}
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
+          {uuidPrefix(task.id)}
+          <Tooltip title="Copy full ID to clipboard">
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(task.id);
+              }}
+              size="small"
+              className={classes.copyButton}
+            >
+              <FileCopyOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </TableCell>
+      <TableCell>{task.type}</TableCell>
+      <TableCell>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
+        >
+          {prettifyPayload(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
+      <TableCell>{task.group}</TableCell>
+      {!window.READ_ONLY && (
+        <TableCell
+          align="center"
+          className={classes.actionCell}
+          onMouseEnter={props.onActionCellEnter}
+          onMouseLeave={props.onActionCellLeave}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {props.showActions ? (
+            <React.Fragment>
+              <Tooltip title="Delete">
+                <IconButton
+                  onClick={props.onDeleteClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                  className={classes.actionButton}
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Archive">
+                <IconButton
+                  onClick={props.onArchiveClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                  className={classes.actionButton}
+                >
+                  <ArchiveIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Run">
+                <IconButton
+                  onClick={props.onRunClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                  className={classes.actionButton}
+                >
+                  <PlayArrowIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </React.Fragment>
+          ) : (
+            <IconButton size="small" onClick={props.onActionCellEnter}>
+              <MoreHorizIcon fontSize="small" />
+            </IconButton>
+          )}
+        </TableCell>
+      )}
+    </TableRow>
+  );
+}
+
+function AggregatingTasksTable(props: Props & ReduxProps) {
+  const listTasks = (qname: string, pgn?: PaginationOptions) =>
+    props.listAggregatingTasksAsync(qname, props.selectedGroup, pgn);
+
+  const deleteAllTasks = (qname: string) =>
+    props.deleteAllAggregatingTasksAsync(qname, props.selectedGroup);
+
+  const archiveAllTasks = (qname: string) =>
+    props.archiveAllAggregatingTasksAsync(qname, props.selectedGroup);
+
+  const runAllTasks = (qname: string) =>
+    props.runAllAggregatingTasksAsync(qname, props.selectedGroup);
+
+  const batchDeleteTasks = (qname: string, taskIds: string[]) =>
+    props.batchDeleteAggregatingTasksAsync(qname, props.selectedGroup, taskIds);
+
+  const batchArchiveTasks = (qname: string, taskIds: string[]) =>
+    props.batchArchiveAggregatingTasksAsync(
+      qname,
+      props.selectedGroup,
+      taskIds
+    );
+
+  const batchRunTasks = (qname: string, taskIds: string[]) =>
+    props.batchRunAggregatingTasksAsync(qname, props.selectedGroup, taskIds);
+
+  const deleteTask = (qname: string, taskId: string) =>
+    props.deleteAggregatingTaskAsync(qname, props.selectedGroup, taskId);
+
+  const archiveTask = (qname: string, taskId: string) =>
+    props.archiveAggregatingTaskAsync(qname, props.selectedGroup, taskId);
+
+  const runTask = (qname: string, taskId: string) =>
+    props.runAggregatingTaskAsync(qname, props.selectedGroup, taskId);
+
+  return (
+    <TasksTable
+      queue={props.queue}
+      totalTaskCount={props.totalTaskCount}
+      taskState="aggregating"
+      loading={props.loading}
+      error={props.error}
+      tasks={props.tasks}
+      batchActionPending={props.batchActionPending}
+      allActionPending={props.allActionPending}
+      pollInterval={props.pollInterval}
+      pageSize={props.pageSize}
+      listTasks={listTasks}
+      deleteAllTasks={deleteAllTasks}
+      archiveAllTasks={archiveAllTasks}
+      runAllTasks={runAllTasks}
+      batchDeleteTasks={batchDeleteTasks}
+      batchArchiveTasks={batchArchiveTasks}
+      batchRunTasks={batchRunTasks}
+      deleteTask={deleteTask}
+      archiveTask={archiveTask}
+      runTask={runTask}
+      taskRowsPerPageChange={props.taskRowsPerPageChange}
+      columns={columns}
+      renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
+    />
+  );
+}
+
+export default connector(AggregatingTasksTable);

ui/src/components/AggregatingTasksTableContainer.tsx

@@ -0,0 +1,100 @@
+import { makeStyles } from "@material-ui/core/styles";
+import Alert from "@material-ui/lab/Alert";
+import AlertTitle from "@material-ui/lab/AlertTitle";
+import React, { useCallback, useState } from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { listGroupsAsync } from "../actions/groupsActions";
+import { GroupInfo } from "../api";
+import { usePolling } from "../hooks";
+import { AppState } from "../store";
+import AggregatingTasksTable from "./AggregatingTasksTable";
+import GroupSelect from "./GroupSelect";
+
+const useStyles = makeStyles((theme) => ({
+  groupSelector: {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+  alert: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
+}));
+
+function mapStateToProps(state: AppState) {
+  return {
+    groups: state.groups.data,
+    groupsError: state.groups.error,
+    pollInterval: state.settings.pollInterval,
+  };
+}
+
+const mapDispatchToProps = {
+  listGroupsAsync,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+interface Props {
+  queue: string;
+}
+
+function AggregatingTasksTableContainer(
+  props: Props & ConnectedProps<typeof connector>
+) {
+  const [selectedGroup, setSelectedGroup] = useState<GroupInfo | null>(null);
+  const { pollInterval, listGroupsAsync, queue } = props;
+  const classes = useStyles();
+
+  const fetchGroups = useCallback(() => {
+    listGroupsAsync(queue);
+  }, [listGroupsAsync, queue]);
+
+  usePolling(fetchGroups, pollInterval);
+
+  if (props.groupsError.length > 0) {
+    return (
+      <Alert severity="error" className={classes.alert}>
+        <AlertTitle>Error</AlertTitle>
+        {props.groupsError}
+      </Alert>
+    );
+  }
+  if (props.groups.length === 0) {
+    return (
+      <Alert severity="info" className={classes.alert}>
+        <AlertTitle>Info</AlertTitle>
+        No aggregating tasks at this time.
+      </Alert>
+    );
+  }
+
+  return (
+    <div>
+      <div className={classes.groupSelector}>
+        <GroupSelect
+          selected={selectedGroup}
+          onSelect={setSelectedGroup}
+          groups={props.groups}
+          error={props.groupsError}
+        />
+      </div>
+      {selectedGroup !== null ? (
+        <AggregatingTasksTable
+          queue={props.queue}
+          totalTaskCount={selectedGroup.size}
+          selectedGroup={selectedGroup.group}
+        />
+      ) : (
+        <Alert severity="info" className={classes.alert}>
+          <AlertTitle>Info</AlertTitle>
+          <div>Please select group</div>
+        </Alert>
+      )}
+    </div>
+  );
+}
+
+export default connector(AggregatingTasksTableContainer);

ui/src/components/ArchivedTasksTable.tsx

@@ -1,60 +1,31 @@
-import React, { useCallback, useState } from "react";
-import clsx from "clsx";
-import { connect, ConnectedProps } from "react-redux";
-import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
 import Checkbox from "@material-ui/core/Checkbox";
-import TableContainer from "@material-ui/core/TableContainer";
-import TableHead from "@material-ui/core/TableHead";
+import IconButton from "@material-ui/core/IconButton";
+import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
-import IconButton from "@material-ui/core/IconButton";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
 import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
-import Alert from "@material-ui/lab/Alert";
-import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "./SyntaxHighlighter";
-import { AppState } from "../store";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
+import React from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { useHistory } from "react-router-dom";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
 import {
   batchDeleteArchivedTasksAsync,
   batchRunArchivedTasksAsync,
-  deleteArchivedTaskAsync,
   deleteAllArchivedTasksAsync,
+  deleteArchivedTaskAsync,
   listArchivedTasksAsync,
-  runArchivedTaskAsync,
   runAllArchivedTasksAsync,
+  runArchivedTaskAsync,
 } from "../actions/tasksActions";
-import TablePaginationActions, {
-  defaultPageSize,
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
-import TableActions from "./TableActions";
-import { timeAgo, uuidPrefix } from "../utils";
-import { usePolling } from "../hooks";
-import { ArchivedTaskExtended } from "../reducers/tasksReducer";
+import { taskDetailsPath } from "../paths";
+import { AppState } from "../store";
 import { TableColumn } from "../types/table";
-
-const useStyles = makeStyles((theme) => ({
-  table: {
-    minWidth: 650,
-  },
-  stickyHeaderCell: {
-    background: theme.palette.background.paper,
-  },
-  alert: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-  pagination: {
-    border: "none",
-  },
-}));
+import { prettifyPayload, timeAgo, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
 
 function mapStateToProps(state: AppState) {
   return {
@@ -64,17 +35,19 @@ function mapStateToProps(state: AppState) {
     batchActionPending: state.tasks.archivedTasks.batchActionPending,
     allActionPending: state.tasks.archivedTasks.allActionPending,
     pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
   };
 }
 
 const mapDispatchToProps = {
-  listArchivedTasksAsync,
-  runArchivedTaskAsync,
-  runAllArchivedTasksAsync,
-  deleteArchivedTaskAsync,
-  deleteAllArchivedTasksAsync,
-  batchRunArchivedTasksAsync,
-  batchDeleteArchivedTasksAsync,
+  listTasks: listArchivedTasksAsync,
+  runTask: runArchivedTaskAsync,
+  runAllTasks: runAllArchivedTasksAsync,
+  deleteTask: deleteArchivedTaskAsync,
+  deleteAllTasks: deleteAllArchivedTasksAsync,
+  batchRunTasks: batchRunArchivedTasksAsync,
+  batchDeleteTasks: batchDeleteArchivedTasksAsync,
+  taskRowsPerPageChange,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -86,246 +59,54 @@ interface Props {
   totalTaskCount: number; // totoal number of archived tasks.
 }
 
-function ArchivedTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listArchivedTasksAsync, queue } = props;
-  const classes = useStyles();
-  const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
-  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-  const [activeTaskId, setActiveTaskId] = useState<string>("");
-
-  const handleChangePage = (
-    event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setPageSize(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.checked) {
-      const newSelected = props.tasks.map((t) => t.key);
-      setSelectedKeys(newSelected);
-    } else {
-      setSelectedKeys([]);
-    }
-  };
-
-  const handleRunAllClick = () => {
-    props.runAllArchivedTasksAsync(queue);
-  };
-
-  const handleDeleteAllClick = () => {
-    props.deleteAllArchivedTasksAsync(queue);
-  };
-
-  const handleBatchRunClick = () => {
-    props
-      .batchRunArchivedTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const handleBatchDeleteClick = () => {
-    props
-      .batchDeleteArchivedTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const fetchData = useCallback(() => {
-    const pageOpts = { page: page + 1, size: pageSize };
-    listArchivedTasksAsync(queue, pageOpts);
-  }, [page, pageSize, queue, listArchivedTasksAsync]);
-
-  usePolling(fetchData, pollInterval);
-
-  if (props.error.length > 0) {
-    return (
-      <Alert severity="error" className={classes.alert}>
-        <AlertTitle>Error</AlertTitle>
-        {props.error}
-      </Alert>
-    );
-  }
-  if (props.tasks.length === 0) {
-    return (
-      <Alert severity="info" className={classes.alert}>
-        <AlertTitle>Info</AlertTitle>
-        No archived tasks at this time.
-      </Alert>
-    );
-  }
-
-  const columns: TableColumn[] = [
-    { key: "id", label: "ID", align: "left" },
-    { key: "type", label: "Type", align: "left" },
-    { key: "payload", label: "Payload", align: "left" },
-    { key: "last_failed", label: "Last Failed", align: "left" },
-    { key: "last_error", label: "Last Error", align: "left" },
-    { key: "actions", label: "Actions", align: "center" },
-  ];
-
-  const rowCount = props.tasks.length;
-  const numSelected = selectedKeys.length;
-  return (
-    <div>
-      <TableActions
-        showIconButtons={numSelected > 0}
-        iconButtonActions={[
-          {
-            tooltip: "Delete",
-            icon: <DeleteIcon />,
-            onClick: handleBatchDeleteClick,
-            disabled: props.batchActionPending,
-          },
-          {
-            tooltip: "Run",
-            icon: <PlayArrowIcon />,
-            onClick: handleBatchRunClick,
-            disabled: props.batchActionPending,
-          },
-        ]}
-        menuItemActions={[
-          {
-            label: "Delete All",
-            onClick: handleDeleteAllClick,
-            disabled: props.allActionPending,
-          },
-          {
-            label: "Run All",
-            onClick: handleRunAllClick,
-            disabled: props.allActionPending,
-          },
-        ]}
-      />
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader={true}
-          className={classes.table}
-          aria-label="archived tasks table"
-          size="small"
-        >
-          <TableHead>
-            <TableRow>
-              <TableCell
-                padding="checkbox"
-                classes={{ stickyHeader: classes.stickyHeaderCell }}
-              >
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
-              </TableCell>
-              {columns.map((col) => (
-                <TableCell
-                  key={col.key}
-                  align={col.align}
-                  classes={{ stickyHeader: classes.stickyHeaderCell }}
-                >
-                  {col.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.tasks.map((task) => (
-              <Row
-                key={task.key}
-                task={task}
-                isSelected={selectedKeys.includes(task.key)}
-                onSelectChange={(checked: boolean) => {
-                  if (checked) {
-                    setSelectedKeys(selectedKeys.concat(task.key));
-                  } else {
-                    setSelectedKeys(
-                      selectedKeys.filter((key) => key !== task.key)
-                    );
-                  }
-                }}
-                onRunClick={() => {
-                  props.runArchivedTaskAsync(queue, task.key);
-                }}
-                onDeleteClick={() => {
-                  props.deleteArchivedTaskAsync(queue, task.key);
-                }}
-                allActionPending={props.allActionPending}
-                onActionCellEnter={() => setActiveTaskId(task.id)}
-                onActionCellLeave={() => setActiveTaskId("")}
-                showActions={activeTaskId === task.id}
-              />
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={rowsPerPageOptions}
-                colSpan={columns.length + 1}
-                count={props.totalTaskCount}
-                rowsPerPage={pageSize}
-                page={page}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePage}
-                onChangeRowsPerPage={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-                className={classes.pagination}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </div>
-  );
-}
-
-const useRowStyles = makeStyles({
-  actionCell: {
-    width: "96px",
-  },
-  activeActionCell: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
-});
-
-interface RowProps {
-  task: ArchivedTaskExtended;
-  isSelected: boolean;
-  onSelectChange: (checked: boolean) => void;
-  onRunClick: () => void;
-  onDeleteClick: () => void;
-  allActionPending: boolean;
-  showActions: boolean;
-  onActionCellEnter: () => void;
-  onActionCellLeave: () => void;
-}
+const columns: TableColumn[] = [
+  { key: "id", label: "ID", align: "left" },
+  { key: "type", label: "Type", align: "left" },
+  { key: "payload", label: "Payload", align: "left" },
+  { key: "last_failed", label: "Last Failed", align: "left" },
+  { key: "last_error", label: "Last Error", align: "left" },
+  { key: "actions", label: "Actions", align: "center" },
+];
 
 function Row(props: RowProps) {
   const { task } = props;
   const classes = useRowStyles();
+  const history = useHistory();
   return (
-    <TableRow key={task.id} selected={props.isSelected}>
-      <TableCell padding="checkbox">
-        <Checkbox
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            props.onSelectChange(event.target.checked)
-          }
-          checked={props.isSelected}
-        />
-      </TableCell>
-      <TableCell component="th" scope="row">
-        {uuidPrefix(task.id)}
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      {!window.READ_ONLY && (
+        <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+          <IconButton>
+            <Checkbox
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                props.onSelectChange(event.target.checked)
+              }
+              checked={props.isSelected}
+            />
+          </IconButton>
+        </TableCell>
+      )}
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
+          {uuidPrefix(task.id)}
+          <Tooltip title="Copy full ID to clipboard">
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(task.id);
+              }}
+              size="small"
+              className={classes.copyButton}
+            >
+              <FileCopyOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>
@@ -333,49 +114,62 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {JSON.stringify(task.payload)}
+          {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{timeAgo(task.last_failed_at)}</TableCell>
       <TableCell>{task.error_message}</TableCell>
-      <TableCell
-        align="center"
-        className={clsx(
-          classes.actionCell,
-          props.showActions && classes.activeActionCell
-        )}
-        onMouseEnter={props.onActionCellEnter}
-        onMouseLeave={props.onActionCellLeave}
-      >
-        {props.showActions ? (
-          <React.Fragment>
-            <Tooltip title="Delete">
-              <IconButton
-                onClick={props.onDeleteClick}
-                disabled={task.requestPending || props.allActionPending}
-                size="small"
-              >
-                <DeleteIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Run">
-              <IconButton
-                onClick={props.onRunClick}
-                disabled={task.requestPending || props.allActionPending}
-                size="small"
-              >
-                <PlayArrowIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          </React.Fragment>
-        ) : (
-          <IconButton size="small" onClick={props.onActionCellEnter}>
-            <MoreHorizIcon fontSize="small" />
-          </IconButton>
-        )}
-      </TableCell>
+      {!window.READ_ONLY && (
+        <TableCell
+          align="center"
+          className={classes.actionCell}
+          onMouseEnter={props.onActionCellEnter}
+          onMouseLeave={props.onActionCellLeave}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {props.showActions ? (
+            <React.Fragment>
+              <Tooltip title="Delete">
+                <IconButton
+                  className={classes.actionButton}
+                  onClick={props.onDeleteClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Run">
+                <IconButton
+                  className={classes.actionButton}
+                  onClick={props.onRunClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                >
+                  <PlayArrowIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </React.Fragment>
+          ) : (
+            <IconButton size="small" onClick={props.onActionCellEnter}>
+              <MoreHorizIcon fontSize="small" />
+            </IconButton>
+          )}
+        </TableCell>
+      )}
     </TableRow>
   );
 }
 
+function ArchivedTasksTable(props: Props & ReduxProps) {
+  return (
+    <TasksTable
+      taskState="archived"
+      columns={columns}
+      renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
+      {...props}
+    />
+  );
+}
+
 export default connector(ArchivedTasksTable);

ui/src/components/CompletedTasksTable.tsx

@@ -0,0 +1,176 @@
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Tooltip from "@material-ui/core/Tooltip";
+import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
+import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
+import React from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { useHistory } from "react-router-dom";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
+import {
+  batchDeleteCompletedTasksAsync,
+  deleteAllCompletedTasksAsync,
+  deleteCompletedTaskAsync,
+  listCompletedTasksAsync,
+} from "../actions/tasksActions";
+import { taskDetailsPath } from "../paths";
+import { AppState } from "../store";
+import { TableColumn } from "../types/table";
+import {
+  durationFromSeconds,
+  prettifyPayload,
+  stringifyDuration,
+  timeAgo,
+  uuidPrefix,
+} from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
+
+function mapStateToProps(state: AppState) {
+  return {
+    loading: state.tasks.completedTasks.loading,
+    error: state.tasks.completedTasks.error,
+    tasks: state.tasks.completedTasks.data,
+    batchActionPending: state.tasks.completedTasks.batchActionPending,
+    allActionPending: state.tasks.completedTasks.allActionPending,
+    pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
+  };
+}
+
+const mapDispatchToProps = {
+  listTasks: listCompletedTasksAsync,
+  deleteTask: deleteCompletedTaskAsync,
+  deleteAllTasks: deleteAllCompletedTasksAsync,
+  batchDeleteTasks: batchDeleteCompletedTasksAsync,
+  taskRowsPerPageChange,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type ReduxProps = ConnectedProps<typeof connector>;
+
+interface Props {
+  queue: string; // name of the queue.
+  totalTaskCount: number; // totoal number of completed tasks.
+}
+
+const columns: TableColumn[] = [
+  { key: "id", label: "ID", align: "left" },
+  { key: "type", label: "Type", align: "left" },
+  { key: "payload", label: "Payload", align: "left" },
+  { key: "completed_at", label: "Completed", align: "left" },
+  { key: "result", label: "Result", align: "left" },
+  { key: "ttl", label: "TTL", align: "left" },
+  { key: "actions", label: "Actions", align: "center" },
+];
+
+function Row(props: RowProps) {
+  const { task } = props;
+  const classes = useRowStyles();
+  const history = useHistory();
+  return (
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      {!window.READ_ONLY && (
+        <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+          <IconButton>
+            <Checkbox
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                props.onSelectChange(event.target.checked)
+              }
+              checked={props.isSelected}
+            />
+          </IconButton>
+        </TableCell>
+      )}
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
+          {uuidPrefix(task.id)}
+          <Tooltip title="Copy full ID to clipboard">
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(task.id);
+              }}
+              size="small"
+              className={classes.copyButton}
+            >
+              <FileCopyOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        </div>
+      </TableCell>
+      <TableCell>{task.type}</TableCell>
+      <TableCell>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
+        >
+          {prettifyPayload(task.payload)}
+        </SyntaxHighlighter>
+      </TableCell>
+      <TableCell>{timeAgo(task.completed_at)}</TableCell>
+      <TableCell>
+        <SyntaxHighlighter
+          language="json"
+          customStyle={{ margin: 0, maxWidth: 400 }}
+        >
+          {prettifyPayload(task.result)}
+        </SyntaxHighlighter>
+      </TableCell>
+      <TableCell>
+        {task.ttl_seconds > 0
+          ? `${stringifyDuration(durationFromSeconds(task.ttl_seconds))} left`
+          : `expired`}
+      </TableCell>
+      {!window.READ_ONLY && (
+        <TableCell
+          align="center"
+          className={classes.actionCell}
+          onMouseEnter={props.onActionCellEnter}
+          onMouseLeave={props.onActionCellLeave}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {props.showActions ? (
+            <React.Fragment>
+              <Tooltip title="Delete">
+                <IconButton
+                  className={classes.actionButton}
+                  onClick={props.onDeleteClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </React.Fragment>
+          ) : (
+            <IconButton size="small" onClick={props.onActionCellEnter}>
+              <MoreHorizIcon fontSize="small" />
+            </IconButton>
+          )}
+        </TableCell>
+      )}
+    </TableRow>
+  );
+}
+
+function CompletedTasksTable(props: Props & ReduxProps) {
+  return (
+    <TasksTable
+      taskState="completed"
+      columns={columns}
+      renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
+      {...props}
+    />
+  );
+}
+export default connector(CompletedTasksTable);

ui/src/components/DailyStatsChart.tsx

@@ -30,8 +30,12 @@ export default function DailyStatsChart(props: Props) {
     <ResponsiveContainer>
       <LineChart data={data}>
         <CartesianGrid strokeDasharray="3 3" />
-        <XAxis dataKey="date" minTickGap={10} />
-        <YAxis />
+        <XAxis
+          dataKey="date"
+          minTickGap={10}
+          stroke={theme.palette.text.secondary}
+        />
+        <YAxis stroke={theme.palette.text.secondary} />
         <Tooltip />
         <Legend />
         <Line

ui/src/components/DeadTasksTable.tsx

@@ -1,388 +0,0 @@
-import React, { useCallback, useState } from "react";
-import clsx from "clsx";
-import { connect, ConnectedProps } from "react-redux";
-import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import Checkbox from "@material-ui/core/Checkbox";
-import TableContainer from "@material-ui/core/TableContainer";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
-import Box from "@material-ui/core/Box";
-import Collapse from "@material-ui/core/Collapse";
-import IconButton from "@material-ui/core/IconButton";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
-import DeleteIcon from "@material-ui/icons/Delete";
-import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
-import Typography from "@material-ui/core/Typography";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
-import Alert from "@material-ui/lab/Alert";
-import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "./SyntaxHighlighter";
-import { AppState } from "../store";
-import {
-  batchDeleteArchivedTasksAsync,
-  batchRunArchivedTasksAsync,
-  deleteArchivedTaskAsync,
-  deleteAllArchivedTasksAsync,
-  listArchivedTasksAsync,
-  runArchivedTaskAsync,
-  runAllArchivedTasksAsync,
-} from "../actions/tasksActions";
-import TablePaginationActions, {
-  defaultPageSize,
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
-import TableActions from "./TableActions";
-import { timeAgo, uuidPrefix } from "../utils";
-import { usePolling } from "../hooks";
-import { ArchivedTaskExtended } from "../reducers/tasksReducer";
-import { TableColumn } from "../types/table";
-
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-});
-
-const useRowStyles = makeStyles({
-  root: {
-    "& > *": {
-      borderBottom: "unset",
-    },
-  },
-  actionCell: {
-    width: "96px",
-  },
-  activeActionCell: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
-});
-
-function mapStateToProps(state: AppState) {
-  return {
-    loading: state.tasks.archivedTasks.loading,
-    tasks: state.tasks.archivedTasks.data,
-    batchActionPending: state.tasks.archivedTasks.batchActionPending,
-    allActionPending: state.tasks.archivedTasks.allActionPending,
-    pollInterval: state.settings.pollInterval,
-  };
-}
-
-const mapDispatchToProps = {
-  listArchivedTasksAsync,
-  runArchivedTaskAsync,
-  runAllArchivedTasksAsync,
-  deleteArchivedTaskAsync,
-  deleteAllArchivedTasksAsync,
-  batchRunArchivedTasksAsync,
-  batchDeleteArchivedTasksAsync,
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-type ReduxProps = ConnectedProps<typeof connector>;
-
-interface Props {
-  queue: string; // name of the queue.
-  totalTaskCount: number; // totoal number of archived tasks.
-}
-
-function ArchivedTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listArchivedTasksAsync, queue } = props;
-  const classes = useStyles();
-  const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
-  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-  const [activeTaskId, setActiveTaskId] = useState<string>("");
-
-  const handleChangePage = (
-    event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setPageSize(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.checked) {
-      const newSelected = props.tasks.map((t) => t.key);
-      setSelectedKeys(newSelected);
-    } else {
-      setSelectedKeys([]);
-    }
-  };
-
-  const handleRunAllClick = () => {
-    props.runAllArchivedTasksAsync(queue);
-  };
-
-  const handleDeleteAllClick = () => {
-    props.deleteAllArchivedTasksAsync(queue);
-  };
-
-  const handleBatchRunClick = () => {
-    props
-      .batchRunArchivedTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const handleBatchDeleteClick = () => {
-    props
-      .batchDeleteArchivedTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const fetchData = useCallback(() => {
-    const pageOpts = { page: page + 1, size: pageSize };
-    listArchivedTasksAsync(queue, pageOpts);
-  }, [page, pageSize, queue, listArchivedTasksAsync]);
-
-  usePolling(fetchData, pollInterval);
-
-  if (props.tasks.length === 0) {
-    return (
-      <Alert severity="info">
-        <AlertTitle>Info</AlertTitle>
-        No archived tasks at this time.
-      </Alert>
-    );
-  }
-
-  const columns: TableColumn[] = [
-    { key: "icon", label: "", align: "left" },
-    { key: "id", label: "ID", align: "left" },
-    { key: "type", label: "Type", align: "left" },
-    { key: "last_failed", label: "Last Failed", align: "left" },
-    { key: "last_error", label: "Last Error", align: "left" },
-    { key: "actions", label: "Actions", align: "center" },
-  ];
-
-  const rowCount = props.tasks.length;
-  const numSelected = selectedKeys.length;
-  return (
-    <div>
-      <TableActions
-        showIconButtons={numSelected > 0}
-        iconButtonActions={[
-          {
-            tooltip: "Delete",
-            icon: <DeleteIcon />,
-            onClick: handleBatchDeleteClick,
-            disabled: props.batchActionPending,
-          },
-          {
-            tooltip: "Run",
-            icon: <PlayArrowIcon />,
-            onClick: handleBatchRunClick,
-            disabled: props.batchActionPending,
-          },
-        ]}
-        menuItemActions={[
-          {
-            label: "Delete All",
-            onClick: handleDeleteAllClick,
-            disabled: props.allActionPending,
-          },
-          {
-            label: "Run All",
-            onClick: handleRunAllClick,
-            disabled: props.allActionPending,
-          },
-        ]}
-      />
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader={true}
-          className={classes.table}
-          aria-label="archived tasks table"
-          size="small"
-        >
-          <TableHead>
-            <TableRow>
-              <TableCell padding="checkbox">
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
-              </TableCell>
-              {columns.map((col) => (
-                <TableCell key={col.key} align={col.align}>
-                  {col.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.tasks.map((task) => (
-              <Row
-                key={task.key}
-                task={task}
-                isSelected={selectedKeys.includes(task.key)}
-                onSelectChange={(checked: boolean) => {
-                  if (checked) {
-                    setSelectedKeys(selectedKeys.concat(task.key));
-                  } else {
-                    setSelectedKeys(
-                      selectedKeys.filter((key) => key !== task.key)
-                    );
-                  }
-                }}
-                onRunClick={() => {
-                  props.runArchivedTaskAsync(queue, task.key);
-                }}
-                onDeleteClick={() => {
-                  props.deleteArchivedTaskAsync(queue, task.key);
-                }}
-                allActionPending={props.allActionPending}
-                onActionCellEnter={() => setActiveTaskId(task.id)}
-                onActionCellLeave={() => setActiveTaskId("")}
-                showActions={activeTaskId === task.id}
-              />
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={rowsPerPageOptions}
-                colSpan={columns.length + 1 /* checkbox col */}
-                count={props.totalTaskCount}
-                rowsPerPage={pageSize}
-                page={page}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePage}
-                onChangeRowsPerPage={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </div>
-  );
-}
-
-interface RowProps {
-  task: ArchivedTaskExtended;
-  isSelected: boolean;
-  onSelectChange: (checked: boolean) => void;
-  onRunClick: () => void;
-  onDeleteClick: () => void;
-  allActionPending: boolean;
-  showActions: boolean;
-  onActionCellEnter: () => void;
-  onActionCellLeave: () => void;
-}
-
-function Row(props: RowProps) {
-  const { task } = props;
-  const [open, setOpen] = useState(false);
-  const classes = useRowStyles();
-  return (
-    <React.Fragment>
-      <TableRow
-        key={task.id}
-        className={classes.root}
-        selected={props.isSelected}
-      >
-        <TableCell padding="checkbox">
-          <Checkbox
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              props.onSelectChange(event.target.checked)
-            }
-            checked={props.isSelected}
-          />
-        </TableCell>
-        <TableCell>
-          <Tooltip title={open ? "Hide Details" : "Show Details"}>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-            </IconButton>
-          </Tooltip>
-        </TableCell>
-        <TableCell component="th" scope="row">
-          {uuidPrefix(task.id)}
-        </TableCell>
-        <TableCell>{task.type}</TableCell>
-        <TableCell>{timeAgo(task.last_failed_at)}</TableCell>
-        <TableCell>{task.error_message}</TableCell>
-        <TableCell
-          align="center"
-          className={clsx(
-            classes.actionCell,
-            props.showActions && classes.activeActionCell
-          )}
-          onMouseEnter={props.onActionCellEnter}
-          onMouseLeave={props.onActionCellLeave}
-        >
-          {props.showActions ? (
-            <React.Fragment>
-              <Tooltip title="Delete">
-                <IconButton
-                  onClick={props.onDeleteClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <DeleteIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title="Run">
-                <IconButton
-                  onClick={props.onRunClick}
-                  disabled={task.requestPending || props.allActionPending}
-                  size="small"
-                >
-                  <PlayArrowIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            </React.Fragment>
-          ) : (
-            <IconButton size="small" onClick={props.onActionCellEnter}>
-              <MoreHorizIcon fontSize="small" />
-            </IconButton>
-          )}
-        </TableCell>
-      </TableRow>
-      <TableRow selected={props.isSelected}>
-        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={7}>
-          <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box margin={1}>
-              <Typography variant="h6" gutterBottom component="div">
-                Payload
-              </Typography>
-              <SyntaxHighlighter language="json">
-                {JSON.stringify(task.payload, null, 2)}
-              </SyntaxHighlighter>
-            </Box>
-          </Collapse>
-        </TableCell>
-      </TableRow>
-    </React.Fragment>
-  );
-}
-
-export default connector(ArchivedTasksTable);

ui/src/components/GroupSelect.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import ListSubheader from "@material-ui/core/ListSubheader";
+import { VariableSizeList, ListChildComponentProps } from "react-window";
+import { GroupInfo } from "../api";
+import { isDarkTheme } from "../theme";
+
+const useStyles = makeStyles((theme) => ({
+  groupSelectOption: {
+    display: "flex",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  groupSize: {
+    fontSize: "12px",
+    color: theme.palette.text.secondary,
+    background: isDarkTheme(theme)
+      ? "#303030"
+      : theme.palette.background.default,
+    textAlign: "center",
+    padding: "3px 6px",
+    borderRadius: "10px",
+    marginRight: "2px",
+  },
+  inputRoot: {
+    borderRadius: 20,
+    paddingLeft: "12px !important",
+  },
+}));
+
+interface Props {
+  selected: GroupInfo | null;
+  onSelect: (newVal: GroupInfo | null) => void;
+  groups: GroupInfo[];
+  error: string;
+}
+
+export default function GroupSelect(props: Props) {
+  const classes = useStyles();
+  const [inputValue, setInputValue] = React.useState("");
+
+  return (
+    <Autocomplete
+      id="task-group-selector"
+      value={props.selected}
+      onChange={(event: any, newValue: GroupInfo | null) => {
+        props.onSelect(newValue);
+      }}
+      inputValue={inputValue}
+      onInputChange={(event, newInputValue) => {
+        setInputValue(newInputValue);
+      }}
+      disableListWrap
+      ListboxComponent={
+        ListboxComponent as React.ComponentType<
+          React.HTMLAttributes<HTMLElement>
+        >
+      }
+      options={props.groups}
+      getOptionLabel={(option: GroupInfo) => option.group}
+      style={{ width: 300 }}
+      renderOption={(option: GroupInfo) => (
+        <div className={classes.groupSelectOption}>
+          <span>{option.group}</span>
+          <span className={classes.groupSize}>{option.size}</span>
+        </div>
+      )}
+      renderInput={(params) => (
+        <TextField {...params} label="Select group" variant="outlined" />
+      )}
+      classes={{
+        inputRoot: classes.inputRoot,
+      }}
+      size="small"
+    />
+  );
+}
+
+// Virtualized list.
+// Reference: https://v4.mui.com/components/autocomplete/#virtualization
+
+const LISTBOX_PADDING = 8; // px
+
+function renderRow(props: ListChildComponentProps) {
+  const { data, index, style } = props;
+  return React.cloneElement(data[index], {
+    style: {
+      ...style,
+      top: (style.top as number) + LISTBOX_PADDING,
+    },
+  });
+}
+
+const OuterElementContext = React.createContext({});
+
+const OuterElementType = React.forwardRef<HTMLDivElement>((props, ref) => {
+  const outerProps = React.useContext(OuterElementContext);
+  return <div ref={ref} {...props} {...outerProps} />;
+});
+
+function useResetCache(data: any) {
+  const ref = React.useRef<VariableSizeList>(null);
+  React.useEffect(() => {
+    if (ref.current != null) {
+      ref.current.resetAfterIndex(0, true);
+    }
+  }, [data]);
+  return ref;
+}
+
+// Adapter for react-window
+const ListboxComponent = React.forwardRef<HTMLDivElement>(
+  function ListboxComponent(props, ref) {
+    const { children, ...other } = props;
+    const itemData = React.Children.toArray(children);
+    const theme = useTheme();
+    const smUp = useMediaQuery(theme.breakpoints.up("sm"), { noSsr: true });
+    const itemCount = itemData.length;
+    const itemSize = smUp ? 36 : 48;
+
+    const getChildSize = (child: React.ReactNode) => {
+      if (React.isValidElement(child) && child.type === ListSubheader) {
+        return 48;
+      }
+      return itemSize;
+    };
+
+    const getHeight = () => {
+      if (itemCount > 8) {
+        return 8 * itemSize;
+      }
+      return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
+    };
+
+    const gridRef = useResetCache(itemCount);
+
+    return (
+      <div ref={ref}>
+        <OuterElementContext.Provider value={other}>
+          <VariableSizeList
+            itemData={itemData}
+            height={getHeight() + 2 * LISTBOX_PADDING}
+            width="100%"
+            ref={gridRef}
+            outerElementType={OuterElementType}
+            innerElementType="ul"
+            itemSize={(index) => getChildSize(itemData[index])}
+            overscanCount={5}
+            itemCount={itemCount}
+          >
+            {renderRow}
+          </VariableSizeList>
+        </OuterElementContext.Provider>
+      </div>
+    );
+  }
+);

ui/src/components/ListItemLink.tsx

@@ -10,6 +10,7 @@ import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
 } from "react-router-dom";
+import { isDarkTheme } from "../theme";
 
 const useStyles = makeStyles((theme) => ({
   listItem: {
@@ -17,23 +18,20 @@ const useStyles = makeStyles((theme) => ({
     borderBottomRightRadius: "24px",
   },
   selected: {
-    backgroundColor:
-      theme.palette.type === "dark"
-        ? `${theme.palette.secondary.main}30`
-        : `${theme.palette.primary.main}30`,
+    backgroundColor: isDarkTheme(theme)
+      ? `${theme.palette.secondary.main}30`
+      : `${theme.palette.primary.main}30`,
   },
   selectedText: {
     fontWeight: 600,
-    color:
-      theme.palette.type === "dark"
-        ? theme.palette.secondary.main
-        : theme.palette.primary.main,
+    color: isDarkTheme(theme)
+      ? theme.palette.secondary.main
+      : theme.palette.primary.main,
   },
   selectedIcon: {
-    color:
-      theme.palette.type === "dark"
-        ? theme.palette.secondary.main
-        : theme.palette.primary.main,
+    color: isDarkTheme(theme)
+      ? theme.palette.secondary.main
+      : theme.palette.primary.main,
   },
 }));
 

ui/src/components/MetricsFetchControls.tsx

@@ -0,0 +1,736 @@
+import React from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { makeStyles, Theme } from "@material-ui/core/styles";
+import Button, { ButtonProps } from "@material-ui/core/Button";
+import ButtonGroup from "@material-ui/core/ButtonGroup";
+import IconButton from "@material-ui/core/IconButton";
+import Popover from "@material-ui/core/Popover";
+import Radio from "@material-ui/core/Radio";
+import RadioGroup from "@material-ui/core/RadioGroup";
+import Checkbox from "@material-ui/core/Checkbox";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormControl from "@material-ui/core/FormControl";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormLabel from "@material-ui/core/FormLabel";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import ArrowLeftIcon from "@material-ui/icons/ArrowLeft";
+import ArrowRightIcon from "@material-ui/icons/ArrowRight";
+import FilterListIcon from "@material-ui/icons/FilterList";
+import dayjs from "dayjs";
+import { currentUnixtime, parseDuration } from "../utils";
+import { AppState } from "../store";
+import { isDarkTheme } from "../theme";
+
+function mapStateToProps(state: AppState) {
+  return { pollInterval: state.settings.pollInterval };
+}
+
+const connector = connect(mapStateToProps);
+type ReduxProps = ConnectedProps<typeof connector>;
+
+interface Props extends ReduxProps {
+  // Specifies the endtime in Unix time seconds.
+  endTimeSec: number;
+  onEndTimeChange: (t: number, isEndTimeFixed: boolean) => void;
+
+  // Specifies the duration in seconds.
+  durationSec: number;
+  onDurationChange: (d: number, isEndTimeFixed: boolean) => void;
+
+  // All available queues.
+  queues: string[];
+  // Selected queues.
+  selectedQueues: string[];
+  addQueue: (qname: string) => void;
+  removeQueue: (qname: string) => void;
+}
+
+interface State {
+  endTimeOption: EndTimeOption;
+  durationOption: DurationOption;
+  customEndTime: string; // text shown in input field
+  customDuration: string; // text shown in input field
+  customEndTimeError: string;
+  customDurationError: string;
+}
+
+type EndTimeOption = "real_time" | "freeze_at_now" | "custom";
+type DurationOption = "1h" | "6h" | "1d" | "8d" | "30d" | "custom";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    alignItems: "center",
+  },
+  endTimeCaption: {
+    marginRight: theme.spacing(1),
+  },
+  shiftButtons: {
+    marginLeft: theme.spacing(1),
+  },
+  buttonGroupRoot: {
+    height: 29,
+    position: "relative",
+    top: 1,
+  },
+  endTimeShiftControls: {
+    padding: theme.spacing(1),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderBottomColor: theme.palette.divider,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+  },
+  leftShiftButtons: {
+    display: "flex",
+    alignItems: "center",
+    marginRight: theme.spacing(2),
+  },
+  rightShiftButtons: {
+    display: "flex",
+    alignItems: "center",
+    marginLeft: theme.spacing(2),
+  },
+  controlsContainer: {
+    display: "flex",
+    justifyContent: "flex-end",
+  },
+  controlSelectorBox: {
+    display: "flex",
+    minWidth: 490,
+    padding: theme.spacing(2),
+  },
+  controlEndTimeSelector: {
+    width: "50%",
+  },
+  controlDurationSelector: {
+    width: "50%",
+  },
+  radioButtonRoot: {
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+  },
+  formControlLabel: {
+    fontSize: 14,
+  },
+  buttonLabel: {
+    textTransform: "none",
+    fontSize: 12,
+  },
+  formControlRoot: {
+    width: "100%",
+    margin: 0,
+  },
+  formLabel: {
+    fontSize: 14,
+    fontWeight: 500,
+    marginBottom: theme.spacing(1),
+  },
+  customInputField: {
+    marginTop: theme.spacing(1),
+  },
+  filterButton: {
+    marginLeft: theme.spacing(1),
+  },
+  queueFilters: {
+    padding: theme.spacing(2),
+    maxHeight: 400,
+  },
+  checkbox: {
+    padding: 6,
+  },
+}));
+
+// minute, hour, day in seconds
+const minute = 60;
+const hour = 60 * minute;
+const day = 24 * hour;
+
+function getInitialState(endTimeSec: number, durationSec: number): State {
+  let endTimeOption: EndTimeOption = "real_time";
+  let customEndTime = "";
+  let durationOption: DurationOption = "1h";
+  let customDuration = "";
+
+  const now = currentUnixtime();
+  // Account for 1s difference, may just happen to elapse 1s
+  // between the parent component's render and this component's render.
+  if (now <= endTimeSec && endTimeSec <= now + 1) {
+    endTimeOption = "real_time";
+  } else {
+    endTimeOption = "custom";
+    customEndTime = new Date(endTimeSec * 1000).toISOString();
+  }
+
+  switch (durationSec) {
+    case 1 * hour:
+      durationOption = "1h";
+      break;
+    case 6 * hour:
+      durationOption = "6h";
+      break;
+    case 1 * day:
+      durationOption = "1d";
+      break;
+    case 8 * day:
+      durationOption = "8d";
+      break;
+    case 30 * day:
+      durationOption = "30d";
+      break;
+    default:
+      durationOption = "custom";
+      customDuration = durationSec + "s";
+  }
+
+  return {
+    endTimeOption,
+    customEndTime,
+    customEndTimeError: "",
+    durationOption,
+    customDuration,
+    customDurationError: "",
+  };
+}
+
+function MetricsFetchControls(props: Props) {
+  const classes = useStyles();
+
+  const [state, setState] = React.useState<State>(
+    getInitialState(props.endTimeSec, props.durationSec)
+  );
+  const [timePopoverAnchorElem, setTimePopoverAnchorElem] =
+    React.useState<HTMLButtonElement | null>(null);
+
+  const [queuePopoverAnchorElem, setQueuePopoverAnchorElem] =
+    React.useState<HTMLButtonElement | null>(null);
+
+  const handleEndTimeOptionChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const selectedOpt = (event.target as HTMLInputElement)
+      .value as EndTimeOption;
+    setState((prevState) => ({
+      ...prevState,
+      endTimeOption: selectedOpt,
+      customEndTime: "",
+      customEndTimeError: "",
+    }));
+    switch (selectedOpt) {
+      case "real_time":
+        props.onEndTimeChange(currentUnixtime(), /*isEndTimeFixed=*/ false);
+        break;
+      case "freeze_at_now":
+        props.onEndTimeChange(currentUnixtime(), /*isEndTimeFixed=*/ true);
+        break;
+      case "custom":
+      // No-op
+    }
+  };
+
+  const handleDurationOptionChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const selectedOpt = (event.target as HTMLInputElement)
+      .value as DurationOption;
+    setState((prevState) => ({
+      ...prevState,
+      durationOption: selectedOpt,
+      customDuration: "",
+      customDurationError: "",
+    }));
+    const isEndTimeFixed = state.endTimeOption !== "real_time";
+    switch (selectedOpt) {
+      case "1h":
+        props.onDurationChange(1 * hour, isEndTimeFixed);
+        break;
+      case "6h":
+        props.onDurationChange(6 * hour, isEndTimeFixed);
+        break;
+      case "1d":
+        props.onDurationChange(1 * day, isEndTimeFixed);
+        break;
+      case "8d":
+        props.onDurationChange(8 * day, isEndTimeFixed);
+        break;
+      case "30d":
+        props.onDurationChange(30 * day, isEndTimeFixed);
+        break;
+      case "custom":
+      // No-op
+    }
+  };
+
+  const handleCustomDurationChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    event.persist(); // https://reactjs.org/docs/legacy-event-pooling.html
+    setState((prevState) => ({
+      ...prevState,
+      customDuration: event.target.value,
+    }));
+  };
+
+  const handleCustomEndTimeChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    event.persist(); // https://reactjs.org/docs/legacy-event-pooling.html
+    setState((prevState) => ({
+      ...prevState,
+      customEndTime: event.target.value,
+    }));
+  };
+
+  const handleCustomDurationKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    if (event.key === "Enter") {
+      try {
+        const d = parseDuration(state.customDuration);
+        setState((prevState) => ({
+          ...prevState,
+          durationOption: "custom",
+          customDurationError: "",
+        }));
+        props.onDurationChange(d, state.endTimeOption !== "real_time");
+      } catch (error) {
+        setState((prevState) => ({
+          ...prevState,
+          customDurationError: "Duration invalid",
+        }));
+      }
+    }
+  };
+
+  const handleCustomEndTimeKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    if (event.key === "Enter") {
+      const timeUsecOrNaN = Date.parse(state.customEndTime);
+      if (isNaN(timeUsecOrNaN)) {
+        setState((prevState) => ({
+          ...prevState,
+          customEndTimeError: "End time invalid",
+        }));
+        return;
+      }
+      setState((prevState) => ({
+        ...prevState,
+        endTimeOption: "custom",
+        customEndTimeError: "",
+      }));
+      props.onEndTimeChange(
+        Math.floor(timeUsecOrNaN / 1000),
+        /* isEndTimeFixed= */ true
+      );
+    }
+  };
+
+  const handleOpenTimePopover = (
+    event: React.MouseEvent<HTMLButtonElement>
+  ) => {
+    setTimePopoverAnchorElem(event.currentTarget);
+  };
+
+  const handleCloseTimePopover = () => {
+    setTimePopoverAnchorElem(null);
+  };
+
+  const handleOpenQueuePopover = (
+    event: React.MouseEvent<HTMLButtonElement>
+  ) => {
+    setQueuePopoverAnchorElem(event.currentTarget);
+  };
+
+  const handleCloseQueuePopover = () => {
+    setQueuePopoverAnchorElem(null);
+  };
+
+  const isTimePopoverOpen = Boolean(timePopoverAnchorElem);
+  const isQueuePopoverOpen = Boolean(queuePopoverAnchorElem);
+
+  React.useEffect(() => {
+    if (state.endTimeOption === "real_time") {
+      const id = setInterval(() => {
+        props.onEndTimeChange(currentUnixtime(), /*isEndTimeFixed=*/ false);
+      }, props.pollInterval * 1000);
+      return () => clearInterval(id);
+    }
+  });
+
+  const shiftBy = (deltaSec: number) => {
+    return () => {
+      const now = currentUnixtime();
+      const endTime = props.endTimeSec + deltaSec;
+      if (now <= endTime) {
+        setState((prevState) => ({
+          ...prevState,
+          customEndTime: "",
+          endTimeOption: "real_time",
+        }));
+        props.onEndTimeChange(now, /*isEndTimeFixed=*/ false);
+        return;
+      }
+      setState((prevState) => ({
+        ...prevState,
+        endTimeOption: "custom",
+        customEndTime: new Date(endTime * 1000).toISOString(),
+      }));
+      props.onEndTimeChange(endTime, /*isEndTimeFixed=*/ true);
+    };
+  };
+
+  return (
+    <div className={classes.root}>
+      <Typography
+        variant="caption"
+        color="textPrimary"
+        className={classes.endTimeCaption}
+      >
+        {formatTime(props.endTimeSec)}
+      </Typography>
+      <div>
+        <Button
+          aria-describedby={isTimePopoverOpen ? "time-popover" : undefined}
+          variant="outlined"
+          color="primary"
+          onClick={handleOpenTimePopover}
+          size="small"
+          classes={{
+            label: classes.buttonLabel,
+          }}
+        >
+          {state.endTimeOption === "real_time" ? "Realtime" : "Historical"}:{" "}
+          {state.durationOption === "custom"
+            ? state.customDuration
+            : state.durationOption}
+        </Button>
+        <Popover
+          id={isTimePopoverOpen ? "time-popover" : undefined}
+          open={isTimePopoverOpen}
+          anchorEl={timePopoverAnchorElem}
+          onClose={handleCloseTimePopover}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "center",
+          }}
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "center",
+          }}
+        >
+          <div className={classes.endTimeShiftControls}>
+            <div className={classes.leftShiftButtons}>
+              <ShiftButton
+                direction="left"
+                text="2h"
+                onClick={shiftBy(-2 * hour)}
+                dense={true}
+              />
+              <ShiftButton
+                direction="left"
+                text="1h"
+                onClick={shiftBy(-1 * hour)}
+                dense={true}
+              />
+              <ShiftButton
+                direction="left"
+                text="30m"
+                onClick={shiftBy(-30 * minute)}
+                dense={true}
+              />
+              <ShiftButton
+                direction="left"
+                text="15m"
+                onClick={shiftBy(-15 * minute)}
+                dense={true}
+              />
+              <ShiftButton
+                direction="left"
+                text="5m"
+                onClick={shiftBy(-5 * minute)}
+                dense={true}
+              />
+            </div>
+            <div className={classes.rightShiftButtons}>
+              <ShiftButton
+                direction="right"
+                text="5m"
+                onClick={shiftBy(5 * minute)}
+                dense={true}
+              />
+              <ShiftButton
+                direction="right"
+                text="15m"
+                onClick={shiftBy(15 * minute)}
+                dense={true}
+              />
+              <ShiftButton
+                direction="right"
+                text="30m"
+                onClick={shiftBy(30 * minute)}
+                dense={true}
+              />
+              <ShiftButton
+                direction="right"
+                text="1h"
+                onClick={shiftBy(1 * hour)}
+                dense={true}
+              />
+              <ShiftButton
+                direction="right"
+                text="2h"
+                onClick={shiftBy(2 * hour)}
+                dense={true}
+              />
+            </div>
+          </div>
+          <div className={classes.controlSelectorBox}>
+            <div className={classes.controlEndTimeSelector}>
+              <FormControl
+                component="fieldset"
+                margin="dense"
+                classes={{ root: classes.formControlRoot }}
+              >
+                <FormLabel className={classes.formLabel} component="legend">
+                  End Time
+                </FormLabel>
+                <RadioGroup
+                  aria-label="end_time"
+                  name="end_time"
+                  value={state.endTimeOption}
+                  onChange={handleEndTimeOptionChange}
+                >
+                  <RadioInput value="real_time" label="Real Time" />
+                  <RadioInput value="freeze_at_now" label="Freeze at now" />
+                  <RadioInput value="custom" label="Custom End Time" />
+                </RadioGroup>
+                <div className={classes.customInputField}>
+                  <TextField
+                    id="custom-endtime"
+                    label="yyyy-mm-dd hh:mm:ssz"
+                    variant="outlined"
+                    size="small"
+                    onChange={handleCustomEndTimeChange}
+                    value={state.customEndTime}
+                    onKeyDown={handleCustomEndTimeKeyDown}
+                    error={state.customEndTimeError !== ""}
+                    helperText={state.customEndTimeError}
+                  />
+                </div>
+              </FormControl>
+            </div>
+            <div className={classes.controlDurationSelector}>
+              <FormControl
+                component="fieldset"
+                margin="dense"
+                classes={{ root: classes.formControlRoot }}
+              >
+                <FormLabel className={classes.formLabel} component="legend">
+                  Duration
+                </FormLabel>
+                <RadioGroup
+                  aria-label="duration"
+                  name="duration"
+                  value={state.durationOption}
+                  onChange={handleDurationOptionChange}
+                >
+                  <RadioInput value="1h" label="1h" />
+                  <RadioInput value="6h" label="6h" />
+                  <RadioInput value="1d" label="1 day" />
+                  <RadioInput value="8d" label="8 days" />
+                  <RadioInput value="30d" label="30 days" />
+                  <RadioInput value="custom" label="Custom Duration" />
+                </RadioGroup>
+                <div className={classes.customInputField}>
+                  <TextField
+                    id="custom-duration"
+                    label="duration"
+                    variant="outlined"
+                    size="small"
+                    onChange={handleCustomDurationChange}
+                    value={state.customDuration}
+                    onKeyDown={handleCustomDurationKeyDown}
+                    error={state.customDurationError !== ""}
+                    helperText={state.customDurationError}
+                  />
+                </div>
+              </FormControl>
+            </div>
+          </div>
+        </Popover>
+      </div>
+      <div className={classes.shiftButtons}>
+        <ButtonGroup
+          classes={{ root: classes.buttonGroupRoot }}
+          size="small"
+          color="primary"
+          aria-label="shift buttons"
+        >
+          <ShiftButton
+            direction="left"
+            text={
+              state.durationOption === "custom" ? "1h" : state.durationOption
+            }
+            color="primary"
+            onClick={
+              state.durationOption === "custom"
+                ? shiftBy(-1 * hour)
+                : shiftBy(-props.durationSec)
+            }
+          />
+          <ShiftButton
+            direction="right"
+            text={
+              state.durationOption === "custom" ? "1h" : state.durationOption
+            }
+            color="primary"
+            onClick={
+              state.durationOption === "custom"
+                ? shiftBy(1 * hour)
+                : shiftBy(props.durationSec)
+            }
+          />
+        </ButtonGroup>
+      </div>
+      <div className={classes.filterButton}>
+        <IconButton
+          aria-label="filter"
+          size="small"
+          onClick={handleOpenQueuePopover}
+        >
+          <FilterListIcon />
+        </IconButton>
+        <Popover
+          id={isQueuePopoverOpen ? "queue-popover" : undefined}
+          open={isQueuePopoverOpen}
+          anchorEl={queuePopoverAnchorElem}
+          onClose={handleCloseQueuePopover}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "center",
+          }}
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "center",
+          }}
+        >
+          <FormControl className={classes.queueFilters}>
+            <FormLabel className={classes.formLabel} component="legend">
+              Queues
+            </FormLabel>
+            <FormGroup>
+              {props.queues.map((qname) => (
+                <FormControlLabel
+                  key={qname}
+                  control={
+                    <Checkbox
+                      size="small"
+                      checked={props.selectedQueues.includes(qname)}
+                      onChange={() => {
+                        if (props.selectedQueues.includes(qname)) {
+                          props.removeQueue(qname);
+                        } else {
+                          props.addQueue(qname);
+                        }
+                      }}
+                      name={qname}
+                      className={classes.checkbox}
+                    />
+                  }
+                  label={qname}
+                  classes={{ label: classes.formControlLabel }}
+                />
+              ))}
+            </FormGroup>
+          </FormControl>
+        </Popover>
+      </div>
+    </div>
+  );
+}
+
+/****************** Helper functions/components *******************/
+
+function formatTime(unixtime: number): string {
+  const tz = new Date(unixtime * 1000)
+    .toLocaleTimeString("en-us", { timeZoneName: "short" })
+    .split(" ")[2];
+  return dayjs.unix(unixtime).format("ddd, DD MMM YYYY HH:mm:ss ") + tz;
+}
+
+interface RadioInputProps {
+  value: string;
+  label: string;
+}
+
+function RadioInput(props: RadioInputProps) {
+  const classes = useStyles();
+  return (
+    <FormControlLabel
+      classes={{ label: classes.formControlLabel }}
+      value={props.value}
+      control={
+        <Radio size="small" classes={{ root: classes.radioButtonRoot }} />
+      }
+      label={props.label}
+    />
+  );
+}
+
+interface ShiftButtonProps extends ButtonProps {
+  text: string;
+  onClick: () => void;
+  direction: "left" | "right";
+  dense?: boolean;
+}
+
+const useShiftButtonStyles = makeStyles((theme: Theme) => ({
+  root: {
+    minWidth: 40,
+    fontWeight: (props: ShiftButtonProps) => (props.dense ? 400 : 500),
+  },
+  label: { fontSize: 12, textTransform: "none" },
+  iconRoot: {
+    marginRight: (props: ShiftButtonProps) =>
+      props.direction === "left" ? (props.dense ? -8 : -4) : 0,
+    marginLeft: (props: ShiftButtonProps) =>
+      props.direction === "right" ? (props.dense ? -8 : -4) : 0,
+    color: (props: ShiftButtonProps) =>
+      props.color
+        ? props.color
+        : theme.palette.grey[isDarkTheme(theme) ? 200 : 700],
+  },
+}));
+
+function ShiftButton(props: ShiftButtonProps) {
+  const classes = useShiftButtonStyles(props);
+  return (
+    <Button
+      {...props}
+      classes={{
+        root: classes.root,
+        label: classes.label,
+      }}
+      size="small"
+    >
+      {props.direction === "left" && (
+        <ArrowLeftIcon classes={{ root: classes.iconRoot }} />
+      )}
+      {props.text}
+      {props.direction === "right" && (
+        <ArrowRightIcon classes={{ root: classes.iconRoot }} />
+      )}
+    </Button>
+  );
+}
+
+ShiftButton.defaultProps = {
+  dense: false,
+};
+
+export default connect(mapStateToProps)(MetricsFetchControls);

ui/src/components/PendingTasksTable.tsx

@@ -1,60 +1,31 @@
-import React, { useCallback, useState } from "react";
-import clsx from "clsx";
-import { connect, ConnectedProps } from "react-redux";
-import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import Alert from "@material-ui/lab/Alert";
-import AlertTitle from "@material-ui/lab/AlertTitle";
-import TableContainer from "@material-ui/core/TableContainer";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import Tooltip from "@material-ui/core/Tooltip";
-import Paper from "@material-ui/core/Paper";
 import Checkbox from "@material-ui/core/Checkbox";
 import IconButton from "@material-ui/core/IconButton";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
-import DeleteIcon from "@material-ui/icons/Delete";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Tooltip from "@material-ui/core/Tooltip";
 import ArchiveIcon from "@material-ui/icons/Archive";
+import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import SyntaxHighlighter from "./SyntaxHighlighter";
-import TablePaginationActions, {
-  defaultPageSize,
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
-import TableActions from "./TableActions";
+import React from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { useHistory } from "react-router-dom";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
 import {
-  listPendingTasksAsync,
-  deletePendingTaskAsync,
-  batchDeletePendingTasksAsync,
-  deleteAllPendingTasksAsync,
+  archiveAllPendingTasksAsync,
   archivePendingTaskAsync,
   batchArchivePendingTasksAsync,
-  archiveAllPendingTasksAsync,
+  batchDeletePendingTasksAsync,
+  deleteAllPendingTasksAsync,
+  deletePendingTaskAsync,
+  listPendingTasksAsync,
 } from "../actions/tasksActions";
+import { taskDetailsPath } from "../paths";
 import { AppState } from "../store";
-import { usePolling } from "../hooks";
-import { uuidPrefix } from "../utils";
 import { TableColumn } from "../types/table";
-import { PendingTaskExtended } from "../reducers/tasksReducer";
-
-const useStyles = makeStyles((theme) => ({
-  table: {
-    minWidth: 650,
-  },
-  stickyHeaderCell: {
-    background: theme.palette.background.paper,
-  },
-  alert: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-  pagination: {
-    border: "none",
-  },
-}));
+import { prettifyPayload, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
 
 function mapStateToProps(state: AppState) {
   return {
@@ -64,17 +35,19 @@ function mapStateToProps(state: AppState) {
     batchActionPending: state.tasks.pendingTasks.batchActionPending,
     allActionPending: state.tasks.pendingTasks.allActionPending,
     pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
   };
 }
 
 const mapDispatchToProps = {
-  listPendingTasksAsync,
-  deletePendingTaskAsync,
-  batchDeletePendingTasksAsync,
-  deleteAllPendingTasksAsync,
-  archivePendingTaskAsync,
-  batchArchivePendingTasksAsync,
-  archiveAllPendingTasksAsync,
+  listTasks: listPendingTasksAsync,
+  deleteTask: deletePendingTaskAsync,
+  batchDeleteTasks: batchDeletePendingTasksAsync,
+  deleteAllTasks: deleteAllPendingTasksAsync,
+  archiveTask: archivePendingTaskAsync,
+  batchArchiveTasks: batchArchivePendingTasksAsync,
+  archiveAllTasks: archiveAllPendingTasksAsync,
+  taskRowsPerPageChange,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -86,248 +59,54 @@ interface Props {
   totalTaskCount: number; // total number of pending tasks
 }
 
-function PendingTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listPendingTasksAsync, queue } = props;
-  const classes = useStyles();
-  const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
-  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-  const [activeTaskId, setActiveTaskId] = useState<string>("");
-
-  const handleChangePage = (
-    event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setPageSize(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.checked) {
-      const newSelected = props.tasks.map((t) => t.key);
-      setSelectedKeys(newSelected);
-    } else {
-      setSelectedKeys([]);
-    }
-  };
-
-  const handleDeleteAllClick = () => {
-    props.deleteAllPendingTasksAsync(queue);
-  };
-
-  const handleArchiveAllClick = () => {
-    props.archiveAllPendingTasksAsync(queue);
-  };
-
-  const handleBatchDeleteClick = () => {
-    props
-      .batchDeletePendingTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const handleBatchArchiveClick = () => {
-    props
-      .batchArchivePendingTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const fetchData = useCallback(() => {
-    const pageOpts = { page: page + 1, size: pageSize };
-    listPendingTasksAsync(queue, pageOpts);
-  }, [page, pageSize, queue, listPendingTasksAsync]);
-
-  usePolling(fetchData, pollInterval);
-
-  if (props.error.length > 0) {
-    return (
-      <Alert severity="error" className={classes.alert}>
-        <AlertTitle>Error</AlertTitle>
-        {props.error}
-      </Alert>
-    );
-  }
-  if (props.tasks.length === 0) {
-    return (
-      <Alert severity="info" className={classes.alert}>
-        <AlertTitle>Info</AlertTitle>
-        No pending tasks at this time.
-      </Alert>
-    );
-  }
-
-  const columns: TableColumn[] = [
-    { key: "id", label: "ID", align: "left" },
-    { key: "type", label: "Type", align: "left" },
-    { key: "paylod", label: "Payload", align: "left" },
-    { key: "retried", label: "Retried", align: "right" },
-    { key: "max_retry", label: "Max Retry", align: "right" },
-    { key: "actions", label: "Actions", align: "center" },
-  ];
-
-  const rowCount = props.tasks.length;
-  const numSelected = selectedKeys.length;
-  return (
-    <div>
-      <TableActions
-        showIconButtons={numSelected > 0}
-        iconButtonActions={[
-          {
-            tooltip: "Delete",
-            icon: <DeleteIcon />,
-            onClick: handleBatchDeleteClick,
-            disabled: props.batchActionPending,
-          },
-          {
-            tooltip: "Archive",
-            icon: <ArchiveIcon />,
-            onClick: handleBatchArchiveClick,
-            disabled: props.batchActionPending,
-          },
-        ]}
-        menuItemActions={[
-          {
-            label: "Delete All",
-            onClick: handleDeleteAllClick,
-            disabled: props.allActionPending,
-          },
-          {
-            label: "Archive All",
-            onClick: handleArchiveAllClick,
-            disabled: props.allActionPending,
-          },
-        ]}
-      />
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader={true}
-          className={classes.table}
-          aria-label="pending tasks table"
-          size="small"
-        >
-          <TableHead>
-            <TableRow>
-              <TableCell
-                padding="checkbox"
-                classes={{ stickyHeader: classes.stickyHeaderCell }}
-              >
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
-              </TableCell>
-              {columns.map((col) => (
-                <TableCell
-                  key={col.key}
-                  align={col.align}
-                  classes={{
-                    stickyHeader: classes.stickyHeaderCell,
-                  }}
-                >
-                  {col.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.tasks.map((task) => (
-              <Row
-                key={task.id}
-                task={task}
-                isSelected={selectedKeys.includes(task.key)}
-                onSelectChange={(checked: boolean) => {
-                  if (checked) {
-                    setSelectedKeys(selectedKeys.concat(task.key));
-                  } else {
-                    setSelectedKeys(
-                      selectedKeys.filter((key) => key !== task.key)
-                    );
-                  }
-                }}
-                allActionPending={props.allActionPending}
-                onDeleteClick={() =>
-                  props.deletePendingTaskAsync(queue, task.key)
-                }
-                onArchiveClick={() => {
-                  props.archivePendingTaskAsync(queue, task.key);
-                }}
-                onActionCellEnter={() => setActiveTaskId(task.id)}
-                onActionCellLeave={() => setActiveTaskId("")}
-                showActions={activeTaskId === task.id}
-              />
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={rowsPerPageOptions}
-                colSpan={columns.length + 1}
-                count={props.totalTaskCount}
-                rowsPerPage={pageSize}
-                page={page}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePage}
-                onChangeRowsPerPage={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-                className={classes.pagination}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </div>
-  );
-}
-
-const useRowStyles = makeStyles({
-  actionCell: {
-    width: "96px",
-  },
-  activeActionCell: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
-});
-
-interface RowProps {
-  task: PendingTaskExtended;
-  isSelected: boolean;
-  onSelectChange: (checked: boolean) => void;
-  onDeleteClick: () => void;
-  onArchiveClick: () => void;
-  allActionPending: boolean;
-  showActions: boolean;
-  onActionCellEnter: () => void;
-  onActionCellLeave: () => void;
-}
+const columns: TableColumn[] = [
+  { key: "id", label: "ID", align: "left" },
+  { key: "type", label: "Type", align: "left" },
+  { key: "paylod", label: "Payload", align: "left" },
+  { key: "retried", label: "Retried", align: "right" },
+  { key: "max_retry", label: "Max Retry", align: "right" },
+  { key: "actions", label: "Actions", align: "center" },
+];
 
 function Row(props: RowProps) {
   const { task } = props;
   const classes = useRowStyles();
+  const history = useHistory();
   return (
-    <TableRow key={task.id} selected={props.isSelected}>
-      <TableCell padding="checkbox">
-        <Checkbox
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            props.onSelectChange(event.target.checked)
-          }
-          checked={props.isSelected}
-        />
-      </TableCell>
-      <TableCell component="th" scope="row">
-        {uuidPrefix(task.id)}
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      {!window.READ_ONLY && (
+        <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+          <IconButton>
+            <Checkbox
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                props.onSelectChange(event.target.checked)
+              }
+              checked={props.isSelected}
+            />
+          </IconButton>
+        </TableCell>
+      )}
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
+          {uuidPrefix(task.id)}
+          <Tooltip title="Copy full ID to clipboard">
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(task.id);
+              }}
+              size="small"
+              className={classes.copyButton}
+            >
+              <FileCopyOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>
@@ -335,49 +114,62 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {JSON.stringify(task.payload)}
+          {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell align="right">{task.retried}</TableCell>
       <TableCell align="right">{task.max_retry}</TableCell>
-      <TableCell
-        align="center"
-        className={clsx(
-          classes.actionCell,
-          props.showActions && classes.activeActionCell
-        )}
-        onMouseEnter={props.onActionCellEnter}
-        onMouseLeave={props.onActionCellLeave}
-      >
-        {props.showActions ? (
-          <React.Fragment>
-            <Tooltip title="Delete">
-              <IconButton
-                onClick={props.onDeleteClick}
-                disabled={task.requestPending || props.allActionPending}
-                size="small"
-              >
-                <DeleteIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Archive">
-              <IconButton
-                onClick={props.onArchiveClick}
-                disabled={task.requestPending || props.allActionPending}
-                size="small"
-              >
-                <ArchiveIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          </React.Fragment>
-        ) : (
-          <IconButton size="small" onClick={props.onActionCellEnter}>
-            <MoreHorizIcon fontSize="small" />
-          </IconButton>
-        )}
-      </TableCell>
+      {!window.READ_ONLY && (
+        <TableCell
+          align="center"
+          className={classes.actionCell}
+          onMouseEnter={props.onActionCellEnter}
+          onMouseLeave={props.onActionCellLeave}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {props.showActions ? (
+            <React.Fragment>
+              <Tooltip title="Delete">
+                <IconButton
+                  onClick={props.onDeleteClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                  className={classes.actionButton}
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Archive">
+                <IconButton
+                  onClick={props.onArchiveClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                  className={classes.actionButton}
+                >
+                  <ArchiveIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </React.Fragment>
+          ) : (
+            <IconButton size="small" onClick={props.onActionCellEnter}>
+              <MoreHorizIcon fontSize="small" />
+            </IconButton>
+          )}
+        </TableCell>
+      )}
     </TableRow>
   );
 }
 
+function PendingTasksTable(props: Props & ReduxProps) {
+  return (
+    <TasksTable
+      taskState="pending"
+      columns={columns}
+      renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
+      {...props}
+    />
+  );
+}
+
 export default connector(PendingTasksTable);

ui/src/components/ProcessedTasksChart.tsx

@@ -27,8 +27,8 @@ function ProcessedTasksChart(props: Props) {
     <ResponsiveContainer>
       <BarChart data={props.data} maxBarSize={120}>
         <CartesianGrid strokeDasharray="3 3" />
-        <XAxis dataKey="queue" />
-        <YAxis />
+        <XAxis dataKey="queue" stroke={theme.palette.text.secondary} />
+        <YAxis stroke={theme.palette.text.secondary} />
         <Tooltip />
         <Legend />
         <Bar

ui/src/components/QueueBreadcrumb.tsx

@@ -6,17 +6,17 @@ import Chip from "@material-ui/core/Chip";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import { paths, queueDetailsPath } from "../paths";
+import { paths as getPaths, queueDetailsPath } from "../paths";
+import { isDarkTheme } from "../theme";
 
 const StyledBreadcrumb = withStyles((theme: Theme) => ({
   root: {
-    backgroundColor:
-      theme.palette.type === "dark"
-        ? "#303030"
-        : theme.palette.background.default,
+    backgroundColor: isDarkTheme(theme)
+      ? "#303030"
+      : theme.palette.background.default,
     height: theme.spacing(3),
     color: theme.palette.text.secondary,
-    fontWeight: theme.typography.fontWeightRegular,
+    fontWeight: 400,
     "&:hover, &:focus": {
       backgroundColor: theme.palette.action.hover,
     },
@@ -31,12 +31,15 @@ interface Props {
   // All queue names.
   queues: string[];
   // Name of the queue currently selected.
-  selectedQueue: string;
+  queueName: string;
+  // ID of the task currently selected (optional).
+  taskId?: string;
 }
 
 export default function QueueBreadcrumbs(props: Props) {
   const history = useHistory();
   const [anchorEl, setAnchorEl] = useState<null | Element>(null);
+  const paths = getPaths();
 
   const handleClick = (event: React.MouseEvent<Element, MouseEvent>) => {
     event.preventDefault();
@@ -57,11 +60,12 @@ export default function QueueBreadcrumbs(props: Props) {
           onClick={() => history.push(paths.HOME)}
         />
         <StyledBreadcrumb
-          label={props.selectedQueue}
+          label={props.queueName}
           deleteIcon={<ExpandMoreIcon />}
           onClick={handleClick}
           onDelete={handleClick}
         />
+        {props.taskId && <StyledBreadcrumb label={`task:${props.taskId}`} />}
       </Breadcrumbs>
       <Menu
         id="queue-breadcrumb-menu"

ui/src/components/QueueInfoBanner.tsx

@@ -65,6 +65,15 @@ function QueueInfoBanner(props: Props & ReduxProps) {
         </Typography>
       </div>
 
+      <div className={classes.bannerItem}>
+        <Typography variant="subtitle2" color="textPrimary" gutterBottom>
+          Task groups
+        </Typography>
+        <Typography color="textSecondary">
+          {queue ? queue.groups : "-"}
+        </Typography>
+      </div>
+
       <div className={classes.bannerItem}>
         <Typography variant="subtitle2" color="textPrimary" gutterBottom>
           Memory usage
@@ -74,6 +83,15 @@ function QueueInfoBanner(props: Props & ReduxProps) {
         </Typography>
       </div>
 
+      <div className={classes.bannerItem}>
+        <Typography variant="subtitle2" color="textPrimary" gutterBottom>
+          Latency
+        </Typography>
+        <Typography color="textSecondary">
+          {queue ? queue.display_latency : "-"}
+        </Typography>
+      </div>
+
       <div className={classes.bannerItem}>
         <Typography variant="subtitle2" color="textPrimary" gutterBottom>
           Processed

ui/src/components/QueueLocationTable.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import { QueueLocation } from "../api";
+
+const useStyles = makeStyles((theme) => ({
+  table: {
+    minWidth: 650,
+  },
+}));
+
+interface Props {
+  queueLocations: QueueLocation[];
+}
+
+export default function QueueLocationTable(props: Props) {
+  const classes = useStyles();
+
+  return (
+    <TableContainer>
+      <Table className={classes.table} aria-label="queue location table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Queue</TableCell>
+            <TableCell>KeySlot</TableCell>
+            <TableCell>Node Addresses</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {props.queueLocations.map((loc) => (
+            <TableRow key={loc.queue}>
+              <TableCell component="th" scope="row">
+                {loc.queue}
+              </TableCell>
+              <TableCell>{loc.keyslot}</TableCell>
+              <TableCell>{loc.nodes.join(", ")}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

ui/src/components/QueueMetricsChart.tsx

@@ -0,0 +1,108 @@
+import { useTheme } from "@material-ui/core/styles";
+import React from "react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+import { Metrics } from "../api";
+
+interface Props {
+  data: Metrics[];
+
+  // both startTime and endTime are in unix time (seconds)
+  startTime: number;
+  endTime: number;
+
+  // (optional): Tick formatter function for YAxis
+  yAxisTickFormatter?: (val: number) => string;
+}
+
+// interface that rechart understands.
+interface ChartData {
+  timestamp: number;
+  [qname: string]: number;
+}
+
+function toChartData(metrics: Metrics[]): ChartData[] {
+  if (metrics.length === 0) {
+    return [];
+  }
+  let byTimestamp: { [key: number]: ChartData } = {};
+  for (let x of metrics) {
+    for (let [ts, val] of x.values) {
+      if (!byTimestamp[ts]) {
+        byTimestamp[ts] = { timestamp: ts };
+      }
+      const qname = x.metric.queue;
+      if (qname) {
+        byTimestamp[ts][qname] = parseFloat(val);
+      }
+    }
+  }
+  return Object.values(byTimestamp);
+}
+
+const lineColors = [
+  "#2085ec",
+  "#72b4eb",
+  "#0a417a",
+  "#8464a0",
+  "#cea9bc",
+  "#323232",
+];
+
+function QueueMetricsChart(props: Props) {
+  const theme = useTheme();
+
+  const data = toChartData(props.data);
+  const keys = props.data.map((x) => x.metric.queue);
+  return (
+    <ResponsiveContainer height={260}>
+      <LineChart data={data}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          minTickGap={10}
+          dataKey="timestamp"
+          domain={[props.startTime, props.endTime]}
+          tickFormatter={(timestamp: number) =>
+            new Date(timestamp * 1000).toLocaleTimeString()
+          }
+          type="number"
+          scale="time"
+          stroke={theme.palette.text.secondary}
+        />
+        <YAxis
+          tickFormatter={props.yAxisTickFormatter}
+          stroke={theme.palette.text.secondary}
+        />
+        <Tooltip
+          labelFormatter={(timestamp: number) => {
+            return new Date(timestamp * 1000).toLocaleTimeString();
+          }}
+        />
+        <Legend />
+        {keys.map((key, idx) => (
+          <Line
+            key={key}
+            type="monotone"
+            dataKey={key}
+            stroke={lineColors[idx % lineColors.length]}
+            dot={false}
+          />
+        ))}
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
+
+QueueMetricsChart.defaultProps = {
+  yAxisTickFormatter: (val: number) => val.toString(),
+};
+
+export default QueueMetricsChart;

ui/src/components/QueueSizeChart.tsx

@@ -9,6 +9,9 @@ import {
   Legend,
   ResponsiveContainer,
 } from "recharts";
+import { useHistory } from "react-router-dom";
+import { useTheme } from "@material-ui/core/styles";
+import { queueDetailsPath } from "../paths";
 
 interface Props {
   data: TaskBreakdown[];
@@ -18,25 +21,46 @@ interface TaskBreakdown {
   queue: string; // name of the queue.
   active: number; // number of active tasks in the queue.
   pending: number; // number of pending tasks in the queue.
+  aggregating: number; // number of aggregating tasks in the queue.
   scheduled: number; // number of scheduled tasks in the queue.
   retry: number; // number of retry tasks in the queue.
   archived: number; // number of archived tasks in the queue.
+  completed: number; // number of completed tasks in the queue.
 }
 
 function QueueSizeChart(props: Props) {
+  const theme = useTheme();
+  const handleClick = (params: { activeLabel?: string } | null) => {
+    const allQueues = props.data.map((b) => b.queue);
+    if (
+      params &&
+      params.activeLabel &&
+      allQueues.includes(params.activeLabel)
+    ) {
+      history.push(queueDetailsPath(params.activeLabel));
+    }
+  };
+  const history = useHistory();
   return (
     <ResponsiveContainer>
-      <BarChart data={props.data} maxBarSize={120}>
+      <BarChart
+        data={props.data}
+        maxBarSize={120}
+        onClick={handleClick}
+        style={{ cursor: "pointer" }}
+      >
         <CartesianGrid strokeDasharray="3 3" />
-        <XAxis dataKey="queue" />
-        <YAxis />
+        <XAxis dataKey="queue" stroke={theme.palette.text.secondary} />
+        <YAxis stroke={theme.palette.text.secondary} />
         <Tooltip />
         <Legend />
         <Bar dataKey="active" stackId="a" fill="#1967d2" />
         <Bar dataKey="pending" stackId="a" fill="#669df6" />
+        <Bar dataKey="aggregating" stackId="a" fill="#e69138" />
         <Bar dataKey="scheduled" stackId="a" fill="#fdd663" />
         <Bar dataKey="retry" stackId="a" fill="#f666a9" />
         <Bar dataKey="archived" stackId="a" fill="#ac4776" />
+        <Bar dataKey="completed" stackId="a" fill="#4bb543" />
       </BarChart>
     </ResponsiveContainer>
   );

ui/src/components/QueuesOverviewTable.tsx

@@ -50,6 +50,7 @@ enum SortBy {
   State,
   Size,
   MemoryUsage,
+  Latency,
   Processed,
   Failed,
   ErrorRate,
@@ -72,6 +73,12 @@ const colConfigs: SortableTableColumn<SortBy>[] = [
     sortBy: SortBy.MemoryUsage,
     align: "right",
   },
+  {
+    label: "Latency",
+    key: "latency",
+    sortBy: SortBy.Latency,
+    align: "right",
+  },
   {
     label: "Processed",
     key: "processed",
@@ -137,6 +144,10 @@ export default function QueuesOverviewTable(props: Props) {
         if (q1.memory_usage_bytes === q2.memory_usage_bytes) return 0;
         isQ1Smaller = q1.memory_usage_bytes < q2.memory_usage_bytes;
         break;
+      case SortBy.Latency:
+        if (q1.latency_msec === q2.latency_msec) return 0;
+        isQ1Smaller = q1.latency_msec < q2.latency_msec;
+        break;
       case SortBy.Processed:
         if (q1.processed === q2.processed) return 0;
         isQ1Smaller = q1.processed < q2.processed;
@@ -172,30 +183,36 @@ export default function QueuesOverviewTable(props: Props) {
         <Table className={classes.table} aria-label="queues overview table">
           <TableHead>
             <TableRow>
-              {colConfigs.map((cfg, i) => (
-                <TableCell
-                  key={cfg.key}
-                  align={cfg.align}
-                  className={clsx(i === 0 && classes.fixedCell)}
-                >
-                  {cfg.sortBy !== SortBy.None ? (
-                    <TableSortLabel
-                      active={sortBy === cfg.sortBy}
-                      direction={sortDir}
-                      onClick={createSortClickHandler(cfg.sortBy)}
-                    >
-                      {cfg.label}
-                    </TableSortLabel>
-                  ) : (
-                    <div>{cfg.label}</div>
-                  )}
-                </TableCell>
-              ))}
+              {colConfigs
+                .filter((cfg) => {
+                  // Filter out actions column in readonly mode.
+                  return !window.READ_ONLY || cfg.key !== "actions";
+                })
+                .map((cfg, i) => (
+                  <TableCell
+                    key={cfg.key}
+                    align={cfg.align}
+                    className={clsx(i === 0 && classes.fixedCell)}
+                  >
+                    {cfg.sortBy !== SortBy.None ? (
+                      <TableSortLabel
+                        active={sortBy === cfg.sortBy}
+                        direction={sortDir}
+                        onClick={createSortClickHandler(cfg.sortBy)}
+                      >
+                        {cfg.label}
+                      </TableSortLabel>
+                    ) : (
+                      <div>{cfg.label}</div>
+                    )}
+                  </TableCell>
+                ))}
             </TableRow>
           </TableHead>
           <TableBody>
             {sortQueues(props.queues, cmpFunc).map((q) => (
               <Row
+                key={q.queue}
                 queue={q}
                 onPauseClick={() => props.onPauseClick(q.queue)}
                 onResumeClick={() => props.onResumeClick(q.queue)}
@@ -282,53 +299,56 @@ function Row(props: RowProps) {
       </TableCell>
       <TableCell align="right">{q.size}</TableCell>
       <TableCell align="right">{prettyBytes(q.memory_usage_bytes)}</TableCell>
+      <TableCell align="right">{q.display_latency}</TableCell>
       <TableCell align="right">{q.processed}</TableCell>
       <TableCell align="right">{q.failed}</TableCell>
       <TableCell align="right">{percentage(q.failed, q.processed)}</TableCell>
-      <TableCell
-        align="center"
-        onMouseEnter={() => setShowIcons(true)}
-        onMouseLeave={() => setShowIcons(false)}
-      >
-        <div className={classes.actionIconsContainer}>
-          {showIcons ? (
-            <React.Fragment>
-              {q.paused ? (
-                <Tooltip title="Resume">
-                  <IconButton
-                    color="secondary"
-                    onClick={props.onResumeClick}
-                    disabled={q.requestPending}
-                    size="small"
-                  >
-                    <PlayCircleFilledIcon fontSize="small" />
+      {!window.READ_ONLY && (
+        <TableCell
+          align="center"
+          onMouseEnter={() => setShowIcons(true)}
+          onMouseLeave={() => setShowIcons(false)}
+        >
+          <div className={classes.actionIconsContainer}>
+            {showIcons ? (
+              <React.Fragment>
+                {q.paused ? (
+                  <Tooltip title="Resume">
+                    <IconButton
+                      color="secondary"
+                      onClick={props.onResumeClick}
+                      disabled={q.requestPending}
+                      size="small"
+                    >
+                      <PlayCircleFilledIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                ) : (
+                  <Tooltip title="Pause">
+                    <IconButton
+                      color="primary"
+                      onClick={props.onPauseClick}
+                      disabled={q.requestPending}
+                      size="small"
+                    >
+                      <PauseCircleFilledIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                )}
+                <Tooltip title="Delete">
+                  <IconButton onClick={props.onDeleteClick} size="small">
+                    <DeleteIcon fontSize="small" />
                   </IconButton>
                 </Tooltip>
-              ) : (
-                <Tooltip title="Pause">
-                  <IconButton
-                    color="primary"
-                    onClick={props.onPauseClick}
-                    disabled={q.requestPending}
-                    size="small"
-                  >
-                    <PauseCircleFilledIcon fontSize="small" />
-                  </IconButton>
-                </Tooltip>
-              )}
-              <Tooltip title="Delete">
-                <IconButton onClick={props.onDeleteClick} size="small">
-                  <DeleteIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            </React.Fragment>
-          ) : (
-            <IconButton size="small">
-              <MoreHorizIcon fontSize="small" />
-            </IconButton>
-          )}
-        </div>
-      </TableCell>
+              </React.Fragment>
+            ) : (
+              <IconButton size="small">
+                <MoreHorizIcon fontSize="small" />
+              </IconButton>
+            )}
+          </div>
+        </TableCell>
+      )}
     </TableRow>
   );
 }

ui/src/components/RetryTasksTable.tsx

@@ -1,64 +1,35 @@
-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";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableContainer from "@material-ui/core/TableContainer";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
-import Paper from "@material-ui/core/Paper";
-import Tooltip from "@material-ui/core/Tooltip";
 import Checkbox from "@material-ui/core/Checkbox";
 import IconButton from "@material-ui/core/IconButton";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
-import DeleteIcon from "@material-ui/icons/Delete";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import Tooltip from "@material-ui/core/Tooltip";
 import ArchiveIcon from "@material-ui/icons/Archive";
+import DeleteIcon from "@material-ui/icons/Delete";
+import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import Alert from "@material-ui/lab/Alert";
-import AlertTitle from "@material-ui/lab/AlertTitle";
-import SyntaxHighlighter from "./SyntaxHighlighter";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
+import React from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { useHistory } from "react-router-dom";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
 import {
+  archiveAllRetryTasksAsync,
+  archiveRetryTaskAsync,
+  batchArchiveRetryTasksAsync,
   batchDeleteRetryTasksAsync,
   batchRunRetryTasksAsync,
-  batchArchiveRetryTasksAsync,
   deleteAllRetryTasksAsync,
-  runAllRetryTasksAsync,
-  archiveAllRetryTasksAsync,
-  listRetryTasksAsync,
   deleteRetryTaskAsync,
+  listRetryTasksAsync,
+  runAllRetryTasksAsync,
   runRetryTaskAsync,
-  archiveRetryTaskAsync,
 } from "../actions/tasksActions";
+import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
+import { taskDetailsPath } from "../paths";
 import { AppState } from "../store";
-import TablePaginationActions, {
-  defaultPageSize,
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
-import TableActions from "./TableActions";
-import { durationBefore, uuidPrefix } from "../utils";
-import { usePolling } from "../hooks";
-import { RetryTaskExtended } from "../reducers/tasksReducer";
-import clsx from "clsx";
 import { TableColumn } from "../types/table";
-
-const useStyles = makeStyles((theme) => ({
-  table: {
-    minWidth: 650,
-  },
-  stickyHeaderCell: {
-    background: theme.palette.background.paper,
-  },
-  alert: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-  pagination: {
-    border: "none",
-  },
-}));
+import { durationBefore, prettifyPayload, uuidPrefix } from "../utils";
+import SyntaxHighlighter from "./SyntaxHighlighter";
 
 function mapStateToProps(state: AppState) {
   return {
@@ -68,20 +39,22 @@ function mapStateToProps(state: AppState) {
     batchActionPending: state.tasks.retryTasks.batchActionPending,
     allActionPending: state.tasks.retryTasks.allActionPending,
     pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
   };
 }
 
 const mapDispatchToProps = {
-  batchDeleteRetryTasksAsync,
-  batchRunRetryTasksAsync,
-  batchArchiveRetryTasksAsync,
-  deleteAllRetryTasksAsync,
-  runAllRetryTasksAsync,
-  archiveAllRetryTasksAsync,
-  listRetryTasksAsync,
-  deleteRetryTaskAsync,
-  runRetryTaskAsync,
-  archiveRetryTaskAsync,
+  batchDeleteTasks: batchDeleteRetryTasksAsync,
+  batchRunTasks: batchRunRetryTasksAsync,
+  batchArchiveTasks: batchArchiveRetryTasksAsync,
+  deleteAllTasks: deleteAllRetryTasksAsync,
+  runAllTasks: runAllRetryTasksAsync,
+  archiveAllTasks: archiveAllRetryTasksAsync,
+  listTasks: listRetryTasksAsync,
+  deleteTask: deleteRetryTaskAsync,
+  runTask: runRetryTaskAsync,
+  archiveTask: archiveRetryTaskAsync,
+  taskRowsPerPageChange,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -93,273 +66,57 @@ interface Props {
   totalTaskCount: number; // totoal number of scheduled tasks.
 }
 
-function RetryTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listRetryTasksAsync, queue } = props;
-  const classes = useStyles();
-  const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
-  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-  const [activeTaskId, setActiveTaskId] = useState<string>("");
-
-  const handleChangePage = (
-    event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setPageSize(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.checked) {
-      const newSelected = props.tasks.map((t) => t.key);
-      setSelectedKeys(newSelected);
-    } else {
-      setSelectedKeys([]);
-    }
-  };
-
-  const handleRunAllClick = () => {
-    props.runAllRetryTasksAsync(queue);
-  };
-
-  const handleDeleteAllClick = () => {
-    props.deleteAllRetryTasksAsync(queue);
-  };
-
-  const handleArchiveAllClick = () => {
-    props.archiveAllRetryTasksAsync(queue);
-  };
-
-  const handleBatchRunClick = () => {
-    props
-      .batchRunRetryTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const handleBatchDeleteClick = () => {
-    props
-      .batchDeleteRetryTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const handleBatchArchiveClick = () => {
-    props
-      .batchArchiveRetryTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const fetchData = useCallback(() => {
-    const pageOpts = { page: page + 1, size: pageSize };
-    listRetryTasksAsync(queue, pageOpts);
-  }, [page, pageSize, queue, listRetryTasksAsync]);
-
-  usePolling(fetchData, pollInterval);
-
-  if (props.error.length > 0) {
-    return (
-      <Alert severity="error" className={classes.alert}>
-        <AlertTitle>Error</AlertTitle>
-        {props.error}
-      </Alert>
-    );
-  }
-  if (props.tasks.length === 0) {
-    return (
-      <Alert severity="info" className={classes.alert}>
-        <AlertTitle>Info</AlertTitle>
-        No retry tasks at this time.
-      </Alert>
-    );
-  }
-
-  const columns: TableColumn[] = [
-    { key: "id", label: "ID", align: "left" },
-    { key: "type", label: "Type", align: "left" },
-    { key: "payload", label: "Payload", align: "left" },
-    { key: "retry_in", label: "Retry In", align: "left" },
-    { key: "last_error", label: "Last Error", align: "left" },
-    { key: "retried", label: "Retried", align: "right" },
-    { key: "max_retry", label: "Max Retry", align: "right" },
-    { key: "actions", label: "Actions", align: "center" },
-  ];
-
-  const rowCount = props.tasks.length;
-  const numSelected = selectedKeys.length;
-  return (
-    <div>
-      <TableActions
-        showIconButtons={numSelected > 0}
-        iconButtonActions={[
-          {
-            tooltip: "Delete",
-            icon: <DeleteIcon />,
-            onClick: handleBatchDeleteClick,
-            disabled: props.batchActionPending,
-          },
-          {
-            tooltip: "Archive",
-            icon: <ArchiveIcon />,
-            onClick: handleBatchArchiveClick,
-            disabled: props.batchActionPending,
-          },
-          {
-            tooltip: "Run",
-            icon: <PlayArrowIcon />,
-            onClick: handleBatchRunClick,
-            disabled: props.batchActionPending,
-          },
-        ]}
-        menuItemActions={[
-          {
-            label: "Delete All",
-            onClick: handleDeleteAllClick,
-            disabled: props.allActionPending,
-          },
-          {
-            label: "Archive All",
-            onClick: handleArchiveAllClick,
-            disabled: props.allActionPending,
-          },
-          {
-            label: "Run All",
-            onClick: handleRunAllClick,
-            disabled: props.allActionPending,
-          },
-        ]}
-      />
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader={true}
-          className={classes.table}
-          aria-label="retry tasks table"
-          size="small"
-        >
-          <TableHead>
-            <TableRow>
-              <TableCell
-                padding="checkbox"
-                classes={{ stickyHeader: classes.stickyHeaderCell }}
-              >
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
-              </TableCell>
-              {columns.map((col) => (
-                <TableCell
-                  key={col.label}
-                  align={col.align}
-                  classes={{ stickyHeader: classes.stickyHeaderCell }}
-                >
-                  {col.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.tasks.map((task) => (
-              <Row
-                key={task.id}
-                task={task}
-                allActionPending={props.allActionPending}
-                isSelected={selectedKeys.includes(task.key)}
-                onSelectChange={(checked: boolean) => {
-                  if (checked) {
-                    setSelectedKeys(selectedKeys.concat(task.key));
-                  } else {
-                    setSelectedKeys(
-                      selectedKeys.filter((key) => key !== task.key)
-                    );
-                  }
-                }}
-                onRunClick={() => {
-                  props.runRetryTaskAsync(task.queue, task.key);
-                }}
-                onDeleteClick={() => {
-                  props.deleteRetryTaskAsync(task.queue, task.key);
-                }}
-                onArchiveClick={() => {
-                  props.archiveRetryTaskAsync(task.queue, task.key);
-                }}
-                onActionCellEnter={() => setActiveTaskId(task.id)}
-                onActionCellLeave={() => setActiveTaskId("")}
-                showActions={activeTaskId === task.id}
-              />
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={rowsPerPageOptions}
-                colSpan={columns.length + 1}
-                count={props.totalTaskCount}
-                rowsPerPage={pageSize}
-                page={page}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePage}
-                onChangeRowsPerPage={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-                className={classes.pagination}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </div>
-  );
-}
-
-const useRowStyles = makeStyles({
-  actionCell: {
-    width: "140px",
-  },
-  activeActionCell: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
-});
-
-interface RowProps {
-  task: RetryTaskExtended;
-  isSelected: boolean;
-  onSelectChange: (checked: boolean) => void;
-  onDeleteClick: () => void;
-  onRunClick: () => void;
-  onArchiveClick: () => void;
-  allActionPending: boolean;
-  showActions: boolean;
-  onActionCellEnter: () => void;
-  onActionCellLeave: () => void;
-}
+const columns: TableColumn[] = [
+  { key: "id", label: "ID", align: "left" },
+  { key: "type", label: "Type", align: "left" },
+  { key: "payload", label: "Payload", align: "left" },
+  { key: "retry_in", label: "Retry In", align: "left" },
+  { key: "last_error", label: "Last Error", align: "left" },
+  { key: "retried", label: "Retried", align: "right" },
+  { key: "max_retry", label: "Max Retry", align: "right" },
+  { key: "actions", label: "Actions", align: "center" },
+];
 
 function Row(props: RowProps) {
   const { task } = props;
   const classes = useRowStyles();
+  const history = useHistory();
+
   return (
-    <TableRow key={task.id} selected={props.isSelected}>
-      <TableCell padding="checkbox">
-        <Checkbox
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            props.onSelectChange(event.target.checked)
-          }
-          checked={props.isSelected}
-        />
-      </TableCell>
-      <TableCell component="th" scope="row">
-        {uuidPrefix(task.id)}
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      {!window.READ_ONLY && (
+        <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+          <IconButton>
+            <Checkbox
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                props.onSelectChange(event.target.checked)
+              }
+              checked={props.isSelected}
+            />
+          </IconButton>
+        </TableCell>
+      )}
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
+          {uuidPrefix(task.id)}
+          <Tooltip title="Copy full ID to clipboard">
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(task.id);
+              }}
+              size="small"
+              className={classes.copyButton}
+            >
+              <FileCopyOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>
@@ -367,60 +124,74 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {JSON.stringify(task.payload)}
+          {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{durationBefore(task.next_process_at)}</TableCell>
       <TableCell>{task.error_message}</TableCell>
       <TableCell align="right">{task.retried}</TableCell>
       <TableCell align="right">{task.max_retry}</TableCell>
-      <TableCell
-        align="center"
-        className={clsx(
-          classes.actionCell,
-          props.showActions && classes.activeActionCell
-        )}
-        onMouseEnter={props.onActionCellEnter}
-        onMouseLeave={props.onActionCellLeave}
-      >
-        {props.showActions ? (
-          <React.Fragment>
-            <Tooltip title="Delete">
-              <IconButton
-                onClick={props.onDeleteClick}
-                disabled={task.requestPending || props.allActionPending}
-                size="small"
-              >
-                <DeleteIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Archive">
-              <IconButton
-                onClick={props.onArchiveClick}
-                disabled={task.requestPending || props.allActionPending}
-                size="small"
-              >
-                <ArchiveIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Run">
-              <IconButton
-                onClick={props.onRunClick}
-                disabled={task.requestPending || props.allActionPending}
-                size="small"
-              >
-                <PlayArrowIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          </React.Fragment>
-        ) : (
-          <IconButton size="small" onClick={props.onActionCellEnter}>
-            <MoreHorizIcon fontSize="small" />
-          </IconButton>
-        )}
-      </TableCell>
+      {!window.READ_ONLY && (
+        <TableCell
+          align="center"
+          className={classes.actionCell}
+          onMouseEnter={props.onActionCellEnter}
+          onMouseLeave={props.onActionCellLeave}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {props.showActions ? (
+            <React.Fragment>
+              <Tooltip title="Delete">
+                <IconButton
+                  onClick={props.onDeleteClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                  className={classes.actionButton}
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Archive">
+                <IconButton
+                  onClick={props.onArchiveClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                  className={classes.actionButton}
+                >
+                  <ArchiveIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Run">
+                <IconButton
+                  onClick={props.onRunClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                  className={classes.actionButton}
+                >
+                  <PlayArrowIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </React.Fragment>
+          ) : (
+            <IconButton size="small" onClick={props.onActionCellEnter}>
+              <MoreHorizIcon fontSize="small" />
+            </IconButton>
+          )}
+        </TableCell>
+      )}
     </TableRow>
   );
 }
 
+function RetryTasksTable(props: Props & ReduxProps) {
+  return (
+    <TasksTable
+      taskState="retry"
+      columns={columns}
+      renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
+      {...props}
+    />
+  );
+}
+
 export default connector(RetryTasksTable);

ui/src/components/ScheduledTasksTable.tsx

@@ -1,26 +1,18 @@
-import React, { useState, useCallback } from "react";
-import clsx from "clsx";
+import React from "react";
 import { connect, ConnectedProps } from "react-redux";
-import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableContainer from "@material-ui/core/TableContainer";
-import TableHead from "@material-ui/core/TableHead";
+import { useHistory } from "react-router-dom";
 import TableRow from "@material-ui/core/TableRow";
-import TableFooter from "@material-ui/core/TableFooter";
-import TablePagination from "@material-ui/core/TablePagination";
-import Paper from "@material-ui/core/Paper";
-import Tooltip from "@material-ui/core/Tooltip";
+import TableCell from "@material-ui/core/TableCell";
 import Checkbox from "@material-ui/core/Checkbox";
 import IconButton from "@material-ui/core/IconButton";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
+import Tooltip from "@material-ui/core/Tooltip";
+import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import DeleteIcon from "@material-ui/icons/Delete";
 import ArchiveIcon from "@material-ui/icons/Archive";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
-import Alert from "@material-ui/lab/Alert";
-import AlertTitle from "@material-ui/lab/AlertTitle";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
 import SyntaxHighlighter from "./SyntaxHighlighter";
+import TasksTable, { RowProps, useRowStyles } from "./TasksTable";
 import {
   batchDeleteScheduledTasksAsync,
   batchRunScheduledTasksAsync,
@@ -33,32 +25,11 @@ import {
   runScheduledTaskAsync,
   archiveScheduledTaskAsync,
 } from "../actions/tasksActions";
+import { taskRowsPerPageChange } from "../actions/settingsActions";
 import { AppState } from "../store";
-import TablePaginationActions, {
-  defaultPageSize,
-  rowsPerPageOptions,
-} from "./TablePaginationActions";
-import TableActions from "./TableActions";
-import { durationBefore, uuidPrefix } from "../utils";
-import { usePolling } from "../hooks";
-import { ScheduledTaskExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";
-
-const useStyles = makeStyles((theme) => ({
-  table: {
-    minWidth: 650,
-  },
-  stickyHeaderCell: {
-    background: theme.palette.background.paper,
-  },
-  alert: {
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-  pagination: {
-    border: "none",
-  },
-}));
+import { durationBefore, prettifyPayload, uuidPrefix } from "../utils";
+import { taskDetailsPath } from "../paths";
 
 function mapStateToProps(state: AppState) {
   return {
@@ -68,20 +39,22 @@ function mapStateToProps(state: AppState) {
     batchActionPending: state.tasks.scheduledTasks.batchActionPending,
     allActionPending: state.tasks.scheduledTasks.allActionPending,
     pollInterval: state.settings.pollInterval,
+    pageSize: state.settings.taskRowsPerPage,
   };
 }
 
 const mapDispatchToProps = {
-  listScheduledTasksAsync,
-  batchDeleteScheduledTasksAsync,
-  batchRunScheduledTasksAsync,
-  batchArchiveScheduledTasksAsync,
-  deleteAllScheduledTasksAsync,
-  runAllScheduledTasksAsync,
-  archiveAllScheduledTasksAsync,
-  deleteScheduledTaskAsync,
-  runScheduledTaskAsync,
-  archiveScheduledTaskAsync,
+  listTasks: listScheduledTasksAsync,
+  batchDeleteTasks: batchDeleteScheduledTasksAsync,
+  batchRunTasks: batchRunScheduledTasksAsync,
+  batchArchiveTasks: batchArchiveScheduledTasksAsync,
+  deleteAllTasks: deleteAllScheduledTasksAsync,
+  runAllTasks: runAllScheduledTasksAsync,
+  archiveAllTasks: archiveAllScheduledTasksAsync,
+  deleteTask: deleteScheduledTaskAsync,
+  runTask: runScheduledTaskAsync,
+  archiveTask: archiveScheduledTaskAsync,
+  taskRowsPerPageChange,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -93,270 +66,53 @@ interface Props {
   totalTaskCount: number; // totoal number of scheduled tasks.
 }
 
-function ScheduledTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listScheduledTasksAsync, queue } = props;
-  const classes = useStyles();
-  const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(defaultPageSize);
-  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-  const [activeTaskId, setActiveTaskId] = useState<string>("");
-
-  const handleChangePage = (
-    event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setPageSize(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.checked) {
-      const newSelected = props.tasks.map((t) => t.key);
-      setSelectedKeys(newSelected);
-    } else {
-      setSelectedKeys([]);
-    }
-  };
-
-  const handleRunAllClick = () => {
-    props.runAllScheduledTasksAsync(queue);
-  };
-
-  const handleDeleteAllClick = () => {
-    props.deleteAllScheduledTasksAsync(queue);
-  };
-
-  const handleArchiveAllClick = () => {
-    props.archiveAllScheduledTasksAsync(queue);
-  };
-
-  const handleBatchRunClick = () => {
-    props
-      .batchRunScheduledTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const handleBatchDeleteClick = () => {
-    props
-      .batchDeleteScheduledTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const handleBatchArchiveClick = () => {
-    props
-      .batchArchiveScheduledTasksAsync(queue, selectedKeys)
-      .then(() => setSelectedKeys([]));
-  };
-
-  const fetchData = useCallback(() => {
-    const pageOpts = { page: page + 1, size: pageSize };
-    listScheduledTasksAsync(queue, pageOpts);
-  }, [page, pageSize, queue, listScheduledTasksAsync]);
-
-  usePolling(fetchData, pollInterval);
-
-  if (props.error.length > 0) {
-    return (
-      <Alert severity="error" className={classes.alert}>
-        <AlertTitle>Error</AlertTitle>
-        {props.error}
-      </Alert>
-    );
-  }
-  if (props.tasks.length === 0) {
-    return (
-      <Alert severity="info" className={classes.alert}>
-        <AlertTitle>Info</AlertTitle>
-        No scheduled tasks at this time.
-      </Alert>
-    );
-  }
-
-  const columns: TableColumn[] = [
-    { key: "id", label: "ID", align: "left" },
-    { key: "type", label: "Type", align: "left" },
-    { key: "payload", label: "Payload", align: "left" },
-    { key: "process_in", label: "Process In", align: "left" },
-    { key: "actions", label: "Actions", align: "center" },
-  ];
-
-  const rowCount = props.tasks.length;
-  const numSelected = selectedKeys.length;
-  return (
-    <div>
-      <TableActions
-        showIconButtons={numSelected > 0}
-        iconButtonActions={[
-          {
-            tooltip: "Delete",
-            icon: <DeleteIcon />,
-            onClick: handleBatchDeleteClick,
-            disabled: props.batchActionPending,
-          },
-          {
-            tooltip: "Archive",
-            icon: <ArchiveIcon />,
-            onClick: handleBatchArchiveClick,
-            disabled: props.batchActionPending,
-          },
-          {
-            tooltip: "Run",
-            icon: <PlayArrowIcon />,
-            onClick: handleBatchRunClick,
-            disabled: props.batchActionPending,
-          },
-        ]}
-        menuItemActions={[
-          {
-            label: "Delete All",
-            onClick: handleDeleteAllClick,
-            disabled: props.allActionPending,
-          },
-          {
-            label: "Archive All",
-            onClick: handleArchiveAllClick,
-            disabled: props.allActionPending,
-          },
-          {
-            label: "Run All",
-            onClick: handleRunAllClick,
-            disabled: props.allActionPending,
-          },
-        ]}
-      />
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader={true}
-          className={classes.table}
-          aria-label="scheduled tasks table"
-          size="small"
-        >
-          <TableHead>
-            <TableRow>
-              <TableCell
-                padding="checkbox"
-                classes={{ stickyHeader: classes.stickyHeaderCell }}
-              >
-                <Checkbox
-                  indeterminate={numSelected > 0 && numSelected < rowCount}
-                  checked={rowCount > 0 && numSelected === rowCount}
-                  onChange={handleSelectAllClick}
-                  inputProps={{
-                    "aria-label": "select all tasks shown in the table",
-                  }}
-                />
-              </TableCell>
-              {columns.map((col) => (
-                <TableCell
-                  key={col.label}
-                  align={col.align}
-                  classes={{ stickyHeader: classes.stickyHeaderCell }}
-                >
-                  {col.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {props.tasks.map((task) => (
-              <Row
-                key={task.id}
-                task={task}
-                allActionPending={props.allActionPending}
-                isSelected={selectedKeys.includes(task.key)}
-                onSelectChange={(checked: boolean) => {
-                  if (checked) {
-                    setSelectedKeys(selectedKeys.concat(task.key));
-                  } else {
-                    setSelectedKeys(
-                      selectedKeys.filter((key) => key !== task.key)
-                    );
-                  }
-                }}
-                onRunClick={() => {
-                  props.runScheduledTaskAsync(queue, task.key);
-                }}
-                onDeleteClick={() => {
-                  props.deleteScheduledTaskAsync(queue, task.key);
-                }}
-                onArchiveClick={() => {
-                  props.archiveScheduledTaskAsync(queue, task.key);
-                }}
-                onActionCellEnter={() => setActiveTaskId(task.id)}
-                onActionCellLeave={() => setActiveTaskId("")}
-                showActions={activeTaskId === task.id}
-              />
-            ))}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={rowsPerPageOptions}
-                colSpan={columns.length + 1}
-                count={props.totalTaskCount}
-                rowsPerPage={pageSize}
-                page={page}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onChangePage={handleChangePage}
-                onChangeRowsPerPage={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-                className={classes.pagination}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </div>
-  );
-}
-
-const useRowStyles = makeStyles({
-  actionCell: {
-    width: "140px",
-  },
-  activeActionCell: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
-});
-
-interface RowProps {
-  task: ScheduledTaskExtended;
-  isSelected: boolean;
-  onSelectChange: (checked: boolean) => void;
-  onRunClick: () => void;
-  onDeleteClick: () => void;
-  onArchiveClick: () => void;
-  allActionPending: boolean;
-  showActions: boolean;
-  onActionCellEnter: () => void;
-  onActionCellLeave: () => void;
-}
+const columns: TableColumn[] = [
+  { key: "id", label: "ID", align: "left" },
+  { key: "type", label: "Type", align: "left" },
+  { key: "payload", label: "Payload", align: "left" },
+  { key: "process_in", label: "Process In", align: "left" },
+  { key: "actions", label: "Actions", align: "center" },
+];
 
 function Row(props: RowProps) {
   const { task } = props;
   const classes = useRowStyles();
+  const history = useHistory();
   return (
-    <TableRow key={task.id} selected={props.isSelected}>
-      <TableCell padding="checkbox">
-        <Checkbox
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-            props.onSelectChange(event.target.checked)
-          }
-          checked={props.isSelected}
-        />
-      </TableCell>
-      <TableCell component="th" scope="row">
-        {uuidPrefix(task.id)}
+    <TableRow
+      key={task.id}
+      className={classes.root}
+      selected={props.isSelected}
+      onClick={() => history.push(taskDetailsPath(task.queue, task.id))}
+    >
+      {!window.READ_ONLY && (
+        <TableCell padding="checkbox" onClick={(e) => e.stopPropagation()}>
+          <IconButton>
+            <Checkbox
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                props.onSelectChange(event.target.checked)
+              }
+              checked={props.isSelected}
+            />
+          </IconButton>
+        </TableCell>
+      )}
+      <TableCell component="th" scope="row" className={classes.idCell}>
+        <div className={classes.IdGroup}>
+          {uuidPrefix(task.id)}
+          <Tooltip title="Copy full ID to clipboard">
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(task.id);
+              }}
+              size="small"
+              className={classes.copyButton}
+            >
+              <FileCopyOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        </div>
       </TableCell>
       <TableCell>{task.type}</TableCell>
       <TableCell>
@@ -364,56 +120,71 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {JSON.stringify(task.payload)}
+          {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{durationBefore(task.next_process_at)}</TableCell>
-      <TableCell
-        align="center"
-        className={clsx(
-          classes.actionCell,
-          props.showActions && classes.activeActionCell
-        )}
-        onMouseEnter={props.onActionCellEnter}
-        onMouseLeave={props.onActionCellLeave}
-      >
-        {props.showActions ? (
-          <React.Fragment>
-            <Tooltip title="Delete">
-              <IconButton
-                onClick={props.onDeleteClick}
-                disabled={task.requestPending || props.allActionPending}
-                size="small"
-              >
-                <DeleteIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Archive">
-              <IconButton
-                onClick={props.onArchiveClick}
-                disabled={task.requestPending || props.allActionPending}
-                size="small"
-              >
-                <ArchiveIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Run">
-              <IconButton
-                onClick={props.onRunClick}
-                disabled={task.requestPending || props.allActionPending}
-                size="small"
-              >
-                <PlayArrowIcon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          </React.Fragment>
-        ) : (
-          <IconButton size="small" onClick={props.onActionCellEnter}>
-            <MoreHorizIcon fontSize="small" />
-          </IconButton>
-        )}
-      </TableCell>
+      {!window.READ_ONLY && (
+        <TableCell
+          align="center"
+          className={classes.actionCell}
+          onMouseEnter={props.onActionCellEnter}
+          onMouseLeave={props.onActionCellLeave}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {props.showActions ? (
+            <React.Fragment>
+              <Tooltip title="Delete">
+                <IconButton
+                  onClick={props.onDeleteClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                  className={classes.actionButton}
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Archive">
+                <IconButton
+                  onClick={props.onArchiveClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                  className={classes.actionButton}
+                >
+                  <ArchiveIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Run">
+                <IconButton
+                  onClick={props.onRunClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                  className={classes.actionButton}
+                >
+                  <PlayArrowIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </React.Fragment>
+          ) : (
+            <IconButton size="small" onClick={props.onActionCellEnter}>
+              <MoreHorizIcon fontSize="small" />
+            </IconButton>
+          )}
+        </TableCell>
+      )}
     </TableRow>
   );
 }
+
+function ScheduledTasksTable(props: Props & ReduxProps) {
+  return (
+    <TasksTable
+      taskState="scheduled"
+      columns={columns}
+      renderRow={(rowProps: RowProps) => <Row {...rowProps} />}
+      {...props}
+    />
+  );
+}
+
 export default connector(ScheduledTasksTable);

ui/src/components/SchedulerEntriesTable.tsx

@@ -18,7 +18,7 @@ import { SortDirection, SortableTableColumn } from "../types/table";
 import TableSortLabel from "@material-ui/core/TableSortLabel";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { SchedulerEntry } from "../api";
-import { timeAgo, durationBefore } from "../utils";
+import { timeAgo, durationBefore, prettifyPayload } from "../utils";
 import SchedulerEnqueueEventsTable from "./SchedulerEnqueueEventsTable";
 
 const useStyles = makeStyles((theme) => ({
@@ -288,7 +288,7 @@ function Row(props: RowProps) {
       </TableCell>
       <TableCell className={clsx(isLastRow && classes.noBorder)}>
         <SyntaxHighlighter language="json">
-          {JSON.stringify(entry.task_payload)}
+          {prettifyPayload(entry.task_payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell className={clsx(isLastRow && classes.noBorder)}>

ui/src/components/ServersTable.tsx

@@ -21,7 +21,7 @@ import AlertTitle from "@material-ui/lab/AlertTitle";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { ServerInfo } from "../api";
 import { SortDirection, SortableTableColumn } from "../types/table";
-import { timeAgo, uuidPrefix } from "../utils";
+import { timeAgo, uuidPrefix, prettifyPayload } from "../utils";
 import { queueDetailsPath } from "../paths";
 import Typography from "@material-ui/core/Typography";
 
@@ -273,19 +273,19 @@ function Row(props: RowProps) {
                   </TableHead>
                   <TableBody>
                     {server.active_workers.map((worker) => (
-                      <TableRow key={worker.task.id}>
+                      <TableRow key={worker.task_id}>
                         <TableCell component="th" scope="row">
-                          {uuidPrefix(worker.task.id)}
+                          {uuidPrefix(worker.task_id)}
                         </TableCell>
                         <TableCell>
                           <SyntaxHighlighter
                             language="json"
                             customStyle={{ margin: 0 }}
                           >
-                            {JSON.stringify(worker.task.payload)}
+                            {prettifyPayload(worker.task_payload)}
                           </SyntaxHighlighter>
                         </TableCell>
-                        <TableCell>{worker.task.queue}</TableCell>
+                        <TableCell>{worker.queue}</TableCell>
                         <TableCell>{timeAgo(worker.start_time)}</TableCell>
                       </TableRow>
                     ))}

ui/src/components/SplitButton.tsx

@@ -9,6 +9,7 @@ import Paper from "@material-ui/core/Paper";
 import Popper from "@material-ui/core/Popper";
 import MenuItem from "@material-ui/core/MenuItem";
 import MenuList from "@material-ui/core/MenuList";
+import { isDarkTheme } from "../theme";
 
 interface Option {
   label: string;
@@ -26,10 +27,9 @@ const useStyles = makeStyles((theme) => ({
     zIndex: 2,
   },
   buttonContained: {
-    backgroundColor:
-      theme.palette.type === "dark"
-        ? "#303030"
-        : theme.palette.background.default,
+    backgroundColor: isDarkTheme(theme)
+      ? "#303030"
+      : theme.palette.background.default,
     color: theme.palette.text.primary,
     "&:hover": {
       backgroundColor: theme.palette.action.hover,

ui/src/components/SyntaxHighlighter.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import { useTheme, Theme } from "@material-ui/core/styles";
-import ReactSyntaxHighlighter from "react-syntax-highlighter";
+import { Light as ReactSyntaxHighlighter } from "react-syntax-highlighter";
+import json from "react-syntax-highlighter/dist/esm/languages/hljs/json";
 import styleDark from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark";
 import styleLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light";
+import { isDarkTheme } from "../theme";
 
 interface Props {
   language: string;
@@ -10,10 +12,12 @@ interface Props {
   customStyle?: object;
 }
 
+ReactSyntaxHighlighter.registerLanguage("json", json);
+
 // Theme aware syntax-highlighter component.
 export default function SyntaxHighlighter(props: Props) {
   const theme = useTheme<Theme>();
-  const style = theme.palette.type === "dark" ? styleDark : styleLight;
+  const style = isDarkTheme(theme) ? styleDark : styleLight;
   return (
     <ReactSyntaxHighlighter
       language={props.language}

ui/src/components/TablePaginationActions.tsx

@@ -24,7 +24,7 @@ interface TablePaginationActionsProps {
   count: number;
   page: number;
   rowsPerPage: number;
-  onChangePage: (
+  onPageChange: (
     event: React.MouseEvent<HTMLButtonElement>,
     newPage: number
   ) => void;
@@ -33,30 +33,30 @@ interface TablePaginationActionsProps {
 function TablePaginationActions(props: TablePaginationActionsProps) {
   const classes = useStyles();
   const theme = useTheme();
-  const { count, page, rowsPerPage, onChangePage } = props;
+  const { count, page, rowsPerPage, onPageChange } = props;
 
   const handleFirstPageButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>
   ) => {
-    onChangePage(event, 0);
+    onPageChange(event, 0);
   };
 
   const handleBackButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>
   ) => {
-    onChangePage(event, page - 1);
+    onPageChange(event, page - 1);
   };
 
   const handleNextButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>
   ) => {
-    onChangePage(event, page + 1);
+    onPageChange(event, page + 1);
   };
 
   const handleLastPageButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>
   ) => {
-    onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
 
   return (

ui/src/components/TasksTable.tsx

@@ -1,172 +1,378 @@
-import React from "react";
-import { connect, ConnectedProps } from "react-redux";
+import React, { useState, useCallback } from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import TableFooter from "@material-ui/core/TableFooter";
+import TablePagination from "@material-ui/core/TablePagination";
 import Paper from "@material-ui/core/Paper";
-import Chip from "@material-ui/core/Chip";
-import ActiveTasksTable from "./ActiveTasksTable";
-import PendingTasksTable from "./PendingTasksTable";
-import ScheduledTasksTable from "./ScheduledTasksTable";
-import RetryTasksTable from "./RetryTasksTable";
-import ArchivedTasksTable from "./ArchivedTasksTable";
-import { useHistory } from "react-router-dom";
-import { queueDetailsPath } from "../paths";
-import { QueueInfo } from "../reducers/queuesReducer";
-import { AppState } from "../store";
+import Checkbox from "@material-ui/core/Checkbox";
+import IconButton from "@material-ui/core/IconButton";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
+import DeleteIcon from "@material-ui/icons/Delete";
+import ArchiveIcon from "@material-ui/icons/Archive";
+import CancelIcon from "@material-ui/icons/Cancel";
+import Alert from "@material-ui/lab/Alert";
+import AlertTitle from "@material-ui/lab/AlertTitle";
+import TablePaginationActions, {
+  rowsPerPageOptions,
+} from "./TablePaginationActions";
+import TableActions from "./TableActions";
+import { usePolling } from "../hooks";
+import { TaskInfoExtended } from "../reducers/tasksReducer";
+import { TableColumn } from "../types/table";
+import { PaginationOptions } from "../api";
+import { TaskState } from "../types/taskState";
 
-interface TabPanelProps {
-  children?: React.ReactNode;
-  selected: string; // currently selected value
-  value: string; // tab panel will be shown if selected value equals to the value
+const useStyles = makeStyles((theme) => ({
+  table: {
+    minWidth: 650,
+  },
+  stickyHeaderCell: {
+    background: theme.palette.background.paper,
+  },
+  alert: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
+  pagination: {
+    border: "none",
+  },
+}));
+
+interface Props {
+  queue: string; // name of the queue.
+  totalTaskCount: number; // totoal number of tasks in the given state.
+  taskState: TaskState;
+  loading: boolean;
+  error: string;
+  tasks: TaskInfoExtended[];
+  batchActionPending: boolean;
+  allActionPending: boolean;
+  pollInterval: number;
+  pageSize: number;
+  columns: TableColumn[];
+
+  // actions
+  listTasks: (qname: string, pgn: PaginationOptions) => void;
+  batchDeleteTasks?: (qname: string, taskIds: string[]) => Promise<void>;
+  batchRunTasks?: (qname: string, taskIds: string[]) => Promise<void>;
+  batchArchiveTasks?: (qname: string, taskIds: string[]) => Promise<void>;
+  batchCancelTasks?: (qname: string, taskIds: string[]) => Promise<void>;
+  deleteAllTasks?: (qname: string) => Promise<void>;
+  runAllTasks?: (qname: string) => Promise<void>;
+  archiveAllTasks?: (qname: string) => Promise<void>;
+  cancelAllTasks?: (qname: string) => Promise<void>;
+  deleteTask?: (qname: string, taskId: string) => Promise<void>;
+  runTask?: (qname: string, taskId: string) => Promise<void>;
+  archiveTask?: (qname: string, taskId: string) => Promise<void>;
+  cancelTask?: (qname: string, taskId: string) => Promise<void>;
+  taskRowsPerPageChange: (n: number) => void;
+
+  renderRow: (rowProps: RowProps) => JSX.Element;
 }
 
-function TabPanel(props: TabPanelProps) {
-  const { children, value, selected, ...other } = props;
+export default function TasksTable(props: Props) {
+  const { pollInterval, listTasks, queue, pageSize } = props;
+  const classes = useStyles();
+  const [page, setPage] = useState(0);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [activeTaskId, setActiveTaskId] = useState<string>("");
 
+  const handlePageChange = (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setPage(newPage);
+  };
+
+  const handleRowsPerPageChange = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    props.taskRowsPerPageChange(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      const newSelected = props.tasks.map((t) => t.id);
+      setSelectedIds(newSelected);
+    } else {
+      setSelectedIds([]);
+    }
+  };
+
+  function createAllActionHandler(action: (qname: string) => Promise<void>) {
+    return () => action(queue);
+  }
+
+  function createBatchActionHandler(
+    action: (qname: string, taskIds: string[]) => Promise<void>
+  ) {
+    return () => action(queue, selectedIds).then(() => setSelectedIds([]));
+  }
+
+  function createSingleActionHandler(
+    action: (qname: string, taskId: string) => Promise<void>,
+    taskId: string
+  ) {
+    return () => action(queue, taskId);
+  }
+
+  let allActions = [];
+  if (props.deleteAllTasks) {
+    allActions.push({
+      label: "Delete All",
+      onClick: createAllActionHandler(props.deleteAllTasks),
+      disabled: props.allActionPending,
+    });
+  }
+  if (props.archiveAllTasks) {
+    allActions.push({
+      label: "Archive All",
+      onClick: createAllActionHandler(props.archiveAllTasks),
+      disabled: props.allActionPending,
+    });
+  }
+  if (props.runAllTasks) {
+    allActions.push({
+      label: "Run All",
+      onClick: createAllActionHandler(props.runAllTasks),
+      disabled: props.allActionPending,
+    });
+  }
+  if (props.cancelAllTasks) {
+    allActions.push({
+      label: "Cancel All",
+      onClick: createAllActionHandler(props.cancelAllTasks),
+      disabled: props.allActionPending,
+    });
+  }
+
+  let batchActions = [];
+  if (props.batchDeleteTasks) {
+    batchActions.push({
+      tooltip: "Delete",
+      icon: <DeleteIcon />,
+      disabled: props.batchActionPending,
+      onClick: createBatchActionHandler(props.batchDeleteTasks),
+    });
+  }
+  if (props.batchArchiveTasks) {
+    batchActions.push({
+      tooltip: "Archive",
+      icon: <ArchiveIcon />,
+      disabled: props.batchActionPending,
+      onClick: createBatchActionHandler(props.batchArchiveTasks),
+    });
+  }
+  if (props.batchRunTasks) {
+    batchActions.push({
+      tooltip: "Run",
+      icon: <PlayArrowIcon />,
+      disabled: props.batchActionPending,
+      onClick: createBatchActionHandler(props.batchRunTasks),
+    });
+  }
+  if (props.batchCancelTasks) {
+    batchActions.push({
+      tooltip: "Cancel",
+      icon: <CancelIcon />,
+      disabled: props.batchActionPending,
+      onClick: createBatchActionHandler(props.batchCancelTasks),
+    });
+  }
+
+  const fetchData = useCallback(() => {
+    const pageOpts = { page: page + 1, size: pageSize };
+    listTasks(queue, pageOpts);
+  }, [page, pageSize, queue, listTasks]);
+
+  usePolling(fetchData, pollInterval);
+
+  if (props.error.length > 0) {
+    return (
+      <Alert severity="error" className={classes.alert}>
+        <AlertTitle>Error</AlertTitle>
+        {props.error}
+      </Alert>
+    );
+  }
+  if (props.tasks.length === 0) {
+    return (
+      <Alert severity="info" className={classes.alert}>
+        <AlertTitle>Info</AlertTitle>
+        {props.taskState === "aggregating" ? (
+          <div>Selected group is empty.</div>
+        ) : (
+          <div>No {props.taskState} tasks at this time.</div>
+        )}
+      </Alert>
+    );
+  }
+
+  const rowCount = props.tasks.length;
+  const numSelected = selectedIds.length;
   return (
-    <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}
+    <div>
+      {!window.READ_ONLY && (
+        <TableActions
+          showIconButtons={numSelected > 0}
+          iconButtonActions={batchActions}
+          menuItemActions={allActions}
+        />
+      )}
+      <TableContainer component={Paper}>
+        <Table
+          stickyHeader={true}
+          className={classes.table}
+          aria-label={`${props.taskState} tasks table`}
+          size="small"
+        >
+          <TableHead>
+            <TableRow>
+              {!window.READ_ONLY && (
+                <TableCell
+                  padding="checkbox"
+                  classes={{ stickyHeader: classes.stickyHeaderCell }}
+                >
+                  <IconButton>
+                    <Checkbox
+                      indeterminate={numSelected > 0 && numSelected < rowCount}
+                      checked={rowCount > 0 && numSelected === rowCount}
+                      onChange={handleSelectAllClick}
+                      inputProps={{
+                        "aria-label": "select all tasks shown in the table",
+                      }}
+                    />
+                  </IconButton>
+                </TableCell>
+              )}
+              {props.columns
+                .filter((col) => {
+                  // Filter out actions column in readonly mode.
+                  return !window.READ_ONLY || col.key !== "actions";
+                })
+                .map((col) => (
+                  <TableCell
+                    key={col.label}
+                    align={col.align}
+                    classes={{ stickyHeader: classes.stickyHeaderCell }}
+                  >
+                    {col.label}
+                  </TableCell>
+                ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {props.tasks.map((task) => {
+              return props.renderRow({
+                key: task.id,
+                task: task,
+                allActionPending: props.allActionPending,
+                isSelected: selectedIds.includes(task.id),
+                onSelectChange: (checked: boolean) => {
+                  if (checked) {
+                    setSelectedIds(selectedIds.concat(task.id));
+                  } else {
+                    setSelectedIds(selectedIds.filter((id) => id !== task.id));
+                  }
+                },
+                onRunClick: props.runTask
+                  ? createSingleActionHandler(props.runTask, task.id)
+                  : undefined,
+                onDeleteClick: props.deleteTask
+                  ? createSingleActionHandler(props.deleteTask, task.id)
+                  : undefined,
+                onArchiveClick: props.archiveTask
+                  ? createSingleActionHandler(props.archiveTask, task.id)
+                  : undefined,
+                onCancelClick: props.cancelTask
+                  ? createSingleActionHandler(props.cancelTask, task.id)
+                  : undefined,
+                onActionCellEnter: () => setActiveTaskId(task.id),
+                onActionCellLeave: () => setActiveTaskId(""),
+                showActions: activeTaskId === task.id,
+              });
+            })}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                rowsPerPageOptions={rowsPerPageOptions}
+                colSpan={props.columns.length + 1}
+                count={props.totalTaskCount}
+                rowsPerPage={pageSize}
+                page={page}
+                SelectProps={{
+                  inputProps: { "aria-label": "rows per page" },
+                  native: true,
+                }}
+                onPageChange={handlePageChange}
+                onRowsPerPageChange={handleRowsPerPageChange}
+                ActionsComponent={TablePaginationActions}
+                className={classes.pagination}
+              />
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </TableContainer>
     </div>
   );
 }
 
-function mapStatetoProps(state: AppState, ownProps: Props) {
-  // TODO: Add loading state for each queue.
-  const queueInfo = state.queues.data.find(
-    (q: QueueInfo) => q.name === ownProps.queue
-  );
-  const currentStats = queueInfo
-    ? queueInfo.currentStats
-    : {
-        queue: ownProps.queue,
-        paused: false,
-        size: 0,
-        active: 0,
-        pending: 0,
-        scheduled: 0,
-        retry: 0,
-        archived: 0,
-        processed: 0,
-        failed: 0,
-        timestamp: "n/a",
-      };
-  return { currentStats };
-}
-
-const connector = connect(mapStatetoProps);
-
-type ReduxProps = ConnectedProps<typeof connector>;
-
-interface Props {
-  queue: string;
-  selected: string;
-}
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    width: "100%",
-    height: "100%",
-    background: theme.palette.background.paper,
+export const useRowStyles = makeStyles((theme) => ({
+  root: {
+    cursor: "pointer",
+    "& #copy-button": {
+      display: "none",
+    },
+    "&:hover": {
+      boxShadow: theme.shadows[2],
+      "& #copy-button": {
+        display: "inline-block",
+      },
+    },
+    "&:hover $copyButton": {
+      display: "inline-block",
+    },
+    "&:hover .MuiTableCell-root": {
+      borderBottomColor: theme.palette.background.paper,
+    },
   },
-  header: {
+  actionCell: {
+    width: "140px",
+  },
+  actionButton: {
+    marginLeft: 3,
+    marginRight: 3,
+  },
+  idCell: {
+    width: "200px",
+  },
+  copyButton: {
+    display: "none",
+  },
+  IdGroup: {
     display: "flex",
     alignItems: "center",
-    paddingTop: theme.spacing(1),
-  },
-  heading: {
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-  },
-  chip: {
-    marginLeft: theme.spacing(1),
-  },
-  taskcount: {
-    fontSize: "12px",
-    color: theme.palette.text.secondary,
-    background:
-      theme.palette.type === "dark"
-        ? "#303030"
-        : theme.palette.background.default,
-    textAlign: "center",
-    padding: "3px 6px",
-    borderRadius: "10px",
-    marginLeft: "2px",
   },
 }));
 
-function TasksTable(props: Props & ReduxProps) {
-  const { currentStats } = props;
-  const classes = useStyles();
-  const history = useHistory();
-  const chips = [
-    { key: "active", label: "Active", count: currentStats.active },
-    { key: "pending", label: "Pending", count: currentStats.pending },
-    { key: "scheduled", label: "Scheduled", count: currentStats.scheduled },
-    { key: "retry", label: "Retry", count: currentStats.retry },
-    { key: "archived", label: "Archived", count: currentStats.archived },
-  ];
-
-  return (
-    <Paper variant="outlined" className={classes.container}>
-      <div className={classes.header}>
-        <Typography color="textPrimary" className={classes.heading}>
-          Tasks
-        </Typography>
-        <div>
-          {chips.map((c) => (
-            <Chip
-              key={c.key}
-              className={classes.chip}
-              label={
-                <div>
-                  {c.label} <span className={classes.taskcount}>{c.count}</span>
-                </div>
-              }
-              variant="outlined"
-              color={props.selected === c.key ? "primary" : "default"}
-              onClick={() => history.push(queueDetailsPath(props.queue, c.key))}
-            />
-          ))}
-        </div>
-      </div>
-      <TabPanel value="active" selected={props.selected}>
-        <ActiveTasksTable queue={props.queue} />
-      </TabPanel>
-      <TabPanel value="pending" selected={props.selected}>
-        <PendingTasksTable
-          queue={props.queue}
-          totalTaskCount={currentStats.pending}
-        />
-      </TabPanel>
-      <TabPanel value="scheduled" selected={props.selected}>
-        <ScheduledTasksTable
-          queue={props.queue}
-          totalTaskCount={currentStats.scheduled}
-        />
-      </TabPanel>
-      <TabPanel value="retry" selected={props.selected}>
-        <RetryTasksTable
-          queue={props.queue}
-          totalTaskCount={currentStats.retry}
-        />
-      </TabPanel>
-      <TabPanel value="archived" selected={props.selected}>
-        <ArchivedTasksTable
-          queue={props.queue}
-          totalTaskCount={currentStats.archived}
-        />
-      </TabPanel>
-    </Paper>
-  );
+export interface RowProps {
+  key: string;
+  task: TaskInfoExtended;
+  isSelected: boolean;
+  onSelectChange: (checked: boolean) => void;
+  onRunClick?: () => void;
+  onDeleteClick?: () => void;
+  onArchiveClick?: () => void;
+  onCancelClick?: () => void;
+  allActionPending: boolean;
+  showActions: boolean;
+  onActionCellEnter: () => void;
+  onActionCellLeave: () => void;
 }
-
-export default connector(TasksTable);

ui/src/components/TasksTableContainer.tsx

@@ -0,0 +1,262 @@
+import React, { useState } from "react";
+import { connect, ConnectedProps } from "react-redux";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import Paper from "@material-ui/core/Paper";
+import Chip from "@material-ui/core/Chip";
+import InputBase from "@material-ui/core/InputBase";
+import SearchIcon from "@material-ui/icons/Search";
+import ActiveTasksTable from "./ActiveTasksTable";
+import PendingTasksTable from "./PendingTasksTable";
+import ScheduledTasksTable from "./ScheduledTasksTable";
+import RetryTasksTable from "./RetryTasksTable";
+import ArchivedTasksTable from "./ArchivedTasksTable";
+import CompletedTasksTable from "./CompletedTasksTable";
+import AggregatingTasksTableContainer from "./AggregatingTasksTableContainer";
+import { useHistory } from "react-router-dom";
+import { queueDetailsPath, taskDetailsPath } from "../paths";
+import { QueueInfo } from "../reducers/queuesReducer";
+import { AppState } from "../store";
+import { isDarkTheme } from "../theme";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  selected: string; // currently selected value
+  value: string; // tab panel will be shown if selected value equals to the value
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, selected, ...other } = props;
+
+  return (
+    <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}
+    </div>
+  );
+}
+
+function mapStatetoProps(state: AppState, ownProps: Props) {
+  // TODO: Add loading state for each queue.
+  const queueInfo = state.queues.data.find(
+    (q: QueueInfo) => q.name === ownProps.queue
+  );
+  const currentStats = queueInfo
+    ? queueInfo.currentStats
+    : {
+        queue: ownProps.queue,
+        paused: false,
+        size: 0,
+        groups: 0,
+        active: 0,
+        pending: 0,
+        aggregating: 0,
+        scheduled: 0,
+        retry: 0,
+        archived: 0,
+        completed: 0,
+        processed: 0,
+        failed: 0,
+        timestamp: "n/a",
+      };
+  return { currentStats };
+}
+
+const connector = connect(mapStatetoProps);
+
+type ReduxProps = ConnectedProps<typeof connector>;
+
+interface Props {
+  queue: string;
+  selected: string;
+}
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    width: "100%",
+    height: "100%",
+    background: theme.palette.background.paper,
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    paddingTop: theme.spacing(1),
+  },
+  heading: {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+  chip: {
+    marginLeft: theme.spacing(1),
+  },
+  taskcount: {
+    fontSize: "12px",
+    color: theme.palette.text.secondary,
+    background: isDarkTheme(theme)
+      ? "#303030"
+      : theme.palette.background.default,
+    textAlign: "center",
+    padding: "3px 6px",
+    borderRadius: "10px",
+    marginLeft: "2px",
+  },
+  searchbar: {
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    flex: 1,
+  },
+  search: {
+    position: "relative",
+    maxWidth: 400,
+    borderRadius: "18px",
+    backgroundColor: isDarkTheme(theme) ? "#303030" : theme.palette.grey[100],
+    "&:hover, &:focus": {
+      backgroundColor: isDarkTheme(theme) ? "#303030" : theme.palette.grey[200],
+    },
+  },
+  searchIcon: {
+    padding: theme.spacing(0, 2),
+    height: "100%",
+    position: "absolute",
+    pointerEvents: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  inputRoot: {
+    color: "inherit",
+    width: "100%",
+  },
+  inputInput: {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+    width: "100%",
+    fontSize: "0.85rem",
+  },
+}));
+
+function TasksTableContainer(props: Props & ReduxProps) {
+  const { currentStats } = props;
+  const classes = useStyles();
+  const history = useHistory();
+  const chips = [
+    { key: "active", label: "Active", count: currentStats.active },
+    { key: "pending", label: "Pending", count: currentStats.pending },
+    {
+      key: "aggregating",
+      label: "Aggregating",
+      count: currentStats.aggregating,
+    },
+    { key: "scheduled", label: "Scheduled", count: currentStats.scheduled },
+    { key: "retry", label: "Retry", count: currentStats.retry },
+    { key: "archived", label: "Archived", count: currentStats.archived },
+    { key: "completed", label: "Completed", count: currentStats.completed },
+  ];
+
+  const [searchQuery, setSearchQuery] = useState<string>("");
+
+  return (
+    <Paper variant="outlined" className={classes.container}>
+      <div className={classes.header}>
+        <Typography color="textPrimary" className={classes.heading}>
+          Tasks
+        </Typography>
+        <div>
+          {chips.map((c) => (
+            <Chip
+              key={c.key}
+              className={classes.chip}
+              label={
+                <div>
+                  {c.label} <span className={classes.taskcount}>{c.count}</span>
+                </div>
+              }
+              variant="outlined"
+              color={props.selected === c.key ? "primary" : "default"}
+              onClick={() => history.push(queueDetailsPath(props.queue, c.key))}
+            />
+          ))}
+        </div>
+        <div className={classes.searchbar}>
+          <div className={classes.search}>
+            <div className={classes.searchIcon}>
+              <SearchIcon />
+            </div>
+            <InputBase
+              placeholder="Search by ID"
+              classes={{
+                root: classes.inputRoot,
+                input: classes.inputInput,
+              }}
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+              }}
+              inputProps={{
+                "aria-label": "search",
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    history.push(
+                      taskDetailsPath(props.queue, searchQuery.trim())
+                    );
+                  }
+                },
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <TabPanel value="active" selected={props.selected}>
+        <ActiveTasksTable
+          queue={props.queue}
+          totalTaskCount={currentStats.active}
+        />
+      </TabPanel>
+      <TabPanel value="pending" selected={props.selected}>
+        <PendingTasksTable
+          queue={props.queue}
+          totalTaskCount={currentStats.pending}
+        />
+      </TabPanel>
+      <TabPanel value="aggregating" selected={props.selected}>
+        <AggregatingTasksTableContainer queue={props.queue} />
+      </TabPanel>
+      <TabPanel value="scheduled" selected={props.selected}>
+        <ScheduledTasksTable
+          queue={props.queue}
+          totalTaskCount={currentStats.scheduled}
+        />
+      </TabPanel>
+      <TabPanel value="retry" selected={props.selected}>
+        <RetryTasksTable
+          queue={props.queue}
+          totalTaskCount={currentStats.retry}
+        />
+      </TabPanel>
+      <TabPanel value="archived" selected={props.selected}>
+        <ArchivedTasksTable
+          queue={props.queue}
+          totalTaskCount={currentStats.archived}
+        />
+      </TabPanel>
+      <TabPanel value="completed" selected={props.selected}>
+        <CompletedTasksTable
+          queue={props.queue}
+          totalTaskCount={currentStats.completed}
+        />
+      </TabPanel>
+    </Paper>
+  );
+}
+
+export default connector(TasksTableContainer);

ui/src/global.d.ts

@@ -0,0 +1,18 @@
+interface Window {
+  // FLAG values are assigned by server under the window object.
+  // parseFlagsUnderWindow function parses these values and assigns the interpretted value under the window.
+  FLAG_ROOT_PATH: string;
+  FLAG_PROMETHEUS_SERVER_ADDRESS: string;
+  FLAG_READ_ONLY: string;
+
+  // Root URL path for asynqmon app.
+  // ROOT_PATH should not have the tailing slash.
+  ROOT_PATH: string;
+
+  // Prometheus server address to query time series data.
+  // This field is set to empty string by default. Use this field only if it's set.
+  PROMETHEUS_SERVER_ADDRESS: string;
+
+  // If true, app hides buttons/links to make non-GET requests to the API server.
+  READ_ONLY: boolean;
+}

ui/src/hooks/index.tsx

@@ -1,4 +1,5 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
+import { useLocation } from "react-router-dom";
 
 // usePolling repeatedly calls doFn with a fix time delay specified
 // by interval (in millisecond).
@@ -9,3 +10,9 @@ export function usePolling(doFn: () => void, interval: number) {
     return () => clearInterval(id);
   }, [interval, doFn]);
 }
+
+// useQuery gets the URL search params from the current URL.
+export function useQuery(): URLSearchParams {
+  const { search } = useLocation();
+  return useMemo(() => new URLSearchParams(search), [search]);
+}

ui/src/index.tsx

@@ -4,10 +4,13 @@ import CssBaseline from "@material-ui/core/CssBaseline";
 import { Provider } from "react-redux";
 import App from "./App";
 import store from "./store";
+import parseFlagsUnderWindow from "./parseFlags";
 import * as serviceWorker from "./serviceWorker";
 import { saveState } from "./localStorage";
 import { SettingsState } from "./reducers/settingsReducer";
 
+parseFlagsUnderWindow();
+
 let currentSettings: SettingsState | undefined = undefined;
 store.subscribe(() => {
   const prevSettings = currentSettings;

ui/src/localStorage.ts

@@ -1,16 +1,24 @@
+import { initialState as settingsInitialState } from "./reducers/settingsReducer"
 import { AppState } from "./store";
 
 const LOCAL_STORAGE_KEY = "asynqmon:state";
 
-export function loadState(): AppState | undefined {
+export function loadState(): Partial<AppState> {
   try {
     const serializedState = localStorage.getItem(LOCAL_STORAGE_KEY);
     if (serializedState === null) {
-      return undefined;
+      return {};
+    }
+    const savedState = JSON.parse(serializedState);
+    return {
+      settings: {
+        ...settingsInitialState,
+        ...(savedState.settings || {}),
+      }
     }
-    return JSON.parse(serializedState);
   } catch (err) {
-    return undefined;
+    console.log("loadState: could not load state ", err)
+    return {};
   }
 }
 

ui/src/parseFlags.ts

@@ -0,0 +1,43 @@
+// Prefix used for go template
+const goTmplActionPrefix = "/[[";
+
+// paseses flags (string values) assigned under the window objects by server.
+export default function parseFlagsUnderWindow() {
+  // ROOT_PATH
+  if (window.FLAG_ROOT_PATH === undefined) {
+    console.log("ROOT_PATH is not defined. Falling back to emtpy string");
+    window.ROOT_PATH = "";
+  } else {
+    window.ROOT_PATH = window.FLAG_ROOT_PATH;
+  }
+
+  // PROMETHEUS_SERVER_ADDRESS
+  if (window.FLAG_PROMETHEUS_SERVER_ADDRESS === undefined) {
+    console.log(
+      "PROMETHEUS_SERVER_ADDRESS is not defined. Falling back to emtpy string"
+    );
+    window.PROMETHEUS_SERVER_ADDRESS = "";
+  } else if (
+    window.FLAG_PROMETHEUS_SERVER_ADDRESS.startsWith(goTmplActionPrefix)
+  ) {
+    console.log(
+      "PROMETHEUS_SERVER_ADDRESS was not evaluated by the server. Falling back to empty string"
+    );
+    window.PROMETHEUS_SERVER_ADDRESS = "";
+  } else {
+      window.PROMETHEUS_SERVER_ADDRESS = window.FLAG_PROMETHEUS_SERVER_ADDRESS;
+  }
+
+  // READ_ONLY
+  if (window.FLAG_READ_ONLY === undefined) {
+    console.log("READ_ONLY is not defined. Falling back to false");
+    window.READ_ONLY = false;
+  } else if (window.FLAG_READ_ONLY.startsWith(goTmplActionPrefix)) {
+    console.log(
+      "READ_ONLY was not evaluated by the server. Falling back to false"
+    );
+    window.READ_ONLY = false;
+  } else {
+    window.READ_ONLY = window.FLAG_READ_ONLY === "true";
+  }
+}

ui/src/paths.ts

@@ -1,16 +1,41 @@
-export const paths = {
-  HOME: "/",
-  SETTINGS: "/settings",
-  SERVERS: "/servers",
-  SCHEDULERS: "/schedulers",
-  QUEUE_DETAILS: "/queues/:qname",
-  REDIS: "/redis",
-};
+export const paths = () => ({
+  HOME: `${window.ROOT_PATH}/`,
+  SETTINGS: `${window.ROOT_PATH}/settings`,
+  SERVERS: `${window.ROOT_PATH}/servers`,
+  SCHEDULERS: `${window.ROOT_PATH}/schedulers`,
+  QUEUE_DETAILS: `${window.ROOT_PATH}/queues/:qname`,
+  REDIS: `${window.ROOT_PATH}/redis`,
+  TASK_DETAILS: `${window.ROOT_PATH}/queues/:qname/tasks/:taskId`,
+  QUEUE_METRICS: `${window.ROOT_PATH}/q/metrics`,
+});
+
+/**************************************************************
+                        Path Helper functions
+ **************************************************************/
 
 export function queueDetailsPath(qname: string, taskStatus?: string): string {
-  const path = paths.QUEUE_DETAILS.replace(":qname", qname);
+  const path = paths().QUEUE_DETAILS.replace(":qname", qname);
   if (taskStatus) {
     return `${path}?status=${taskStatus}`;
   }
   return path;
 }
+
+export function taskDetailsPath(qname: string, taskId: string): string {
+  return paths()
+    .TASK_DETAILS.replace(":qname", qname)
+    .replace(":taskId", taskId);
+}
+
+/**************************************************************
+                        URL Params
+ **************************************************************/
+
+export interface QueueDetailsRouteParams {
+  qname: string;
+}
+
+export interface TaskDetailsRouteParams {
+  qname: string;
+  taskId: string;
+}

ui/src/reducers/groupsReducer.ts

@@ -0,0 +1,55 @@
+import {
+  GroupsActionTypes,
+  LIST_GROUPS_BEGIN,
+  LIST_GROUPS_ERROR,
+  LIST_GROUPS_SUCCESS,
+} from "../actions/groupsActions";
+import {
+  LIST_AGGREGATING_TASKS_SUCCESS,
+  TasksActionTypes,
+} from "../actions/tasksActions";
+import { GroupInfo } from "../api";
+
+interface GroupsState {
+  loading: boolean;
+  data: GroupInfo[];
+  error: string;
+}
+
+const initialState: GroupsState = {
+  data: [],
+  loading: false,
+  error: "",
+};
+
+function groupsReducer(
+  state = initialState,
+  action: GroupsActionTypes | TasksActionTypes
+): GroupsState {
+  switch (action.type) {
+    case LIST_GROUPS_BEGIN:
+      return { ...state, loading: true };
+
+    case LIST_GROUPS_ERROR:
+      return { ...state, loading: false, error: action.error };
+
+    case LIST_GROUPS_SUCCESS:
+      return {
+        ...state,
+        loading: false,
+        error: "",
+        data: action.payload.groups,
+      };
+
+    case LIST_AGGREGATING_TASKS_SUCCESS:
+      return {
+        ...state,
+        data: action.payload.groups,
+      };
+
+    default:
+      return state;
+  }
+}
+
+export default groupsReducer;

ui/src/reducers/metricsReducer.ts

@@ -0,0 +1,49 @@
+import {
+  GET_METRICS_BEGIN,
+  GET_METRICS_ERROR,
+  GET_METRICS_SUCCESS,
+  MetricsActionTypes,
+} from "../actions/metricsActions";
+import { MetricsResponse } from "../api";
+
+interface MetricsState {
+  loading: boolean;
+  error: string;
+  data: MetricsResponse | null;
+}
+
+const initialState: MetricsState = {
+  loading: false,
+  error: "",
+  data: null,
+};
+
+export default function metricsReducer(
+  state = initialState,
+  action: MetricsActionTypes
+): MetricsState {
+  switch (action.type) {
+    case GET_METRICS_BEGIN:
+      return {
+        ...state,
+        loading: true,
+      };
+
+    case GET_METRICS_ERROR:
+      return {
+        ...state,
+        loading: false,
+        error: action.error,
+      };
+
+    case GET_METRICS_SUCCESS:
+      return {
+        loading: false,
+        error: "",
+        data: action.payload,
+      };
+
+    default:
+      return state;
+  }
+}