go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-01-19 03:05:53 +08:00
Code Issues Projects Releases Wiki Activity

Create wrapper component for sytanx-highlighter component

Browse Source
This commit is contained in:
Ken Hibino 2021-01-15 12:50:54 -08:00
parent 3778dacca7
commit ad0185e96a
10 changed files with 44 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,8 +22,7 @@ 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 SyntaxHighlighter from "react-syntax-highlighter";
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
import SyntaxHighlighter from "./SyntaxHighlighter";
import {
listActiveTasksAsync,
cancelActiveTaskAsync,
@ -326,7 +325,7 @@ function Row(props: RowProps) {
<Typography variant="h6" gutterBottom component="div">
Payload
</Typography>
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
<SyntaxHighlighter language="json">
{JSON.stringify(task.payload, null, 2)}
</SyntaxHighlighter>
</Box>

5
ui/src/components/ArchivedTasksTable.tsx
View File

@ -24,8 +24,7 @@ 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 "react-syntax-highlighter";
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
import SyntaxHighlighter from "./SyntaxHighlighter";
import { AppState } from "../store";
import {
batchDeleteArchivedTasksAsync,
@ -385,7 +384,7 @@ function Row(props: RowProps) {
<Typography variant="h6" gutterBottom component="div">
Payload
</Typography>
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
<SyntaxHighlighter language="json">
{JSON.stringify(task.payload, null, 2)}
</SyntaxHighlighter>
</Box>

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

@ -24,8 +24,7 @@ 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 "react-syntax-highlighter";
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
import SyntaxHighlighter from "./SyntaxHighlighter";
import { AppState } from "../store";
import {
batchDeleteArchivedTasksAsync,
@ -375,7 +374,7 @@ function Row(props: RowProps) {
<Typography variant="h6" gutterBottom component="div">
Payload
</Typography>
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
<SyntaxHighlighter language="json">
{JSON.stringify(task.payload, null, 2)}
</SyntaxHighlighter>
</Box>

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

@ -20,7 +20,6 @@ import Typography from "@material-ui/core/Typography";
import TableFooter from "@material-ui/core/TableFooter";
import TablePagination from "@material-ui/core/TablePagination";
import SyntaxHighlighter from "react-syntax-highlighter";
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
import TablePaginationActions, {
defaultPageSize,
rowsPerPageOptions,
@ -189,7 +188,7 @@ function Row(props: { task: PendingTask }) {
<Typography variant="h6" gutterBottom component="div">
Payload
</Typography>
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
<SyntaxHighlighter language="json">
{JSON.stringify(task.payload, null, 2)}
</SyntaxHighlighter>
</Box>

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

@ -25,7 +25,6 @@ import Typography from "@material-ui/core/Typography";
import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import SyntaxHighlighter from "react-syntax-highlighter";
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
import {
batchDeleteRetryTasksAsync,
batchRunRetryTasksAsync,
@ -430,7 +429,7 @@ function Row(props: RowProps) {
<Typography variant="h6" gutterBottom component="div">
Payload
</Typography>
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
<SyntaxHighlighter language="json">
{JSON.stringify(task.payload, null, 2)}
</SyntaxHighlighter>
</Box>

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

@ -25,8 +25,7 @@ import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import Typography from "@material-ui/core/Typography";
import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import SyntaxHighlighter from "react-syntax-highlighter";
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
import SyntaxHighlighter from "./SyntaxHighlighter";
import {
batchDeleteScheduledTasksAsync,
batchRunScheduledTasksAsync,
@ -424,7 +423,7 @@ function Row(props: RowProps) {
<Typography variant="h6" gutterBottom component="div">
Payload
</Typography>
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
<SyntaxHighlighter language="json">
{JSON.stringify(task.payload, null, 2)}
</SyntaxHighlighter>
</Box>

7
ui/src/components/SchedulerEntriesTable.tsx
View File

@ -14,10 +14,9 @@ import Tooltip from "@material-ui/core/Tooltip";
import HistoryIcon from "@material-ui/icons/History";
import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import SyntaxHighlighter from "react-syntax-highlighter";
import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
import { 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 SchedulerEnqueueEventsTable from "./SchedulerEnqueueEventsTable";
@ -288,12 +287,12 @@ function Row(props: RowProps) {
{entry.task_type}
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
<SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
<SyntaxHighlighter language="json">
{JSON.stringify(entry.task_payload)}
</SyntaxHighlighter>
</TableCell>
<TableCell className={clsx(isLastRow && classes.noBorder)}>
<SyntaxHighlighter language="go" style={syntaxHighlightStyle}>
<SyntaxHighlighter language="go">
{entry.options.length > 0 ? entry.options.join(", ") : "No options"}
</SyntaxHighlighter>
</TableCell>

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

@ -1,7 +1,7 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import clsx from "clsx";
import { makeStyles, useTheme, Theme } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import Collapse from "@material-ui/core/Collapse";
@ -18,9 +18,7 @@ import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import SyntaxHighlighter from "react-syntax-highlighter";
import syntaxHighlightStyleDark from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark";
import syntaxHighlightStyleLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light";
import SyntaxHighlighter from "./SyntaxHighlighter";
import { ServerInfo } from "../api";
import { SortDirection, SortableTableColumn } from "../types/table";
import { timeAgo, uuidPrefix } from "../utils";
@ -216,8 +214,6 @@ const useRowStyles = makeStyles((theme) => ({
function Row(props: RowProps) {
const classes = useRowStyles();
const theme = useTheme<Theme>();
const isDarkTheme = theme.palette.type === "dark";
const { server } = props;
const [open, setOpen] = useState<boolean>(false);
const qnames = Object.keys(server.queue_priorities);
@ -284,11 +280,6 @@ function Row(props: RowProps) {
<TableCell>
<SyntaxHighlighter
language="json"
style={
isDarkTheme
? syntaxHighlightStyleDark
: syntaxHighlightStyleLight
}
customStyle={{ margin: 0 }}
>
{JSON.stringify(worker.task.payload)}

26
ui/src/components/SyntaxHighlighter.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import { useTheme, Theme } from "@material-ui/core/styles";
import ReactSyntaxHighlighter from "react-syntax-highlighter";
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";
interface Props {
language: string;
children: string;
customStyle?: object;
}
// Theme aware syntax-highlighter component.
export default function SyntaxHighlighter(props: Props) {
const theme = useTheme<Theme>();
const style = theme.palette.type === "dark" ? styleDark : styleLight;
return (
<ReactSyntaxHighlighter
language={props.language}
style={style}
customStyle={props.customStyle}
>
{props.children}
</ReactSyntaxHighlighter>
);
}

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

@ -1,16 +1,14 @@
import React from "react";
import { connect, ConnectedProps } from "react-redux";
import Container from "@material-ui/core/Container";
import { makeStyles, useTheme, Theme } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle";
import SyntaxHighlighter from "react-syntax-highlighter";
import syntaxHighlightStyleDark from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark";
import syntaxHighlightStyleLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light";
import SyntaxHighlighter from "../components/SyntaxHighlighter";
import { getRedisInfoAsync } from "../actions/redisInfoActions";
import { usePolling } from "../hooks";
import { AppState } from "../store";
@ -41,8 +39,6 @@ type Props = ConnectedProps<typeof connector>;
function RedisInfoView(props: Props) {
const classes = useStyles();
const { pollInterval, getRedisInfoAsync, redisInfo, redisInfoRaw } = props;
const theme = useTheme<Theme>();
const isDarkTheme = theme.palette.type === "dark";
usePolling(getRedisInfoAsync, pollInterval);
// Metrics to show
@ -156,14 +152,7 @@ function RedisInfoView(props: Props) {
<Typography variant="h6" color="textSecondary">
INFO Command Output
</Typography>
<SyntaxHighlighter
language="yaml"
style={
isDarkTheme
? syntaxHighlightStyleDark
: syntaxHighlightStyleLight
}
>
<SyntaxHighlighter language="yaml">
{redisInfoRaw}
</SyntaxHighlighter>
</Grid>