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

add copy id for the rest of tables

Browse Source
This commit is contained in:
Peizhi Zheng 2022-01-12 22:51:16 -08:00 committed by Ken Hibino
parent 747d10df97
commit 3d31c94258
6 changed files with 169 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,7 @@ import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@material-ui/core/Tooltip";
import CancelIcon from "@material-ui/icons/Cancel"; import CancelIcon from "@material-ui/icons/Cancel";
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz"; import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import Alert from "@material-ui/lab/Alert"; import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle"; import AlertTitle from "@material-ui/lab/AlertTitle";
@ -20,7 +20,12 @@ import React, { useCallback, useState } from "react";
import { connect, ConnectedProps } from "react-redux"; import { connect, ConnectedProps } from "react-redux";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { taskRowsPerPageChange } from "../actions/settingsActions"; import { taskRowsPerPageChange } from "../actions/settingsActions";
import { batchCancelActiveTasksAsync, cancelActiveTaskAsync, cancelAllActiveTasksAsync, listActiveTasksAsync } from "../actions/tasksActions"; import {
batchCancelActiveTasksAsync,
cancelActiveTaskAsync,
cancelAllActiveTasksAsync,
listActiveTasksAsync,
} from "../actions/tasksActions";
import { usePolling } from "../hooks"; import { usePolling } from "../hooks";
import { taskDetailsPath } from "../paths"; import { taskDetailsPath } from "../paths";
import { ActiveTaskExtended } from "../reducers/tasksReducer"; import { ActiveTaskExtended } from "../reducers/tasksReducer";
@ -29,7 +34,9 @@ import { TableColumn } from "../types/table";
import { durationBefore, prettifyPayload, timeAgo, uuidPrefix } from "../utils"; import { durationBefore, prettifyPayload, timeAgo, uuidPrefix } from "../utils";
import SyntaxHighlighter from "./SyntaxHighlighter"; import SyntaxHighlighter from "./SyntaxHighlighter";
import TableActions from "./TableActions"; import TableActions from "./TableActions";
import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions"; import TablePaginationActions, {
rowsPerPageOptions,
} from "./TablePaginationActions";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
table: { table: {
@ -258,11 +265,14 @@ function ActiveTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"& #copy-button": {
display: "none",
},
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
}, },
"&:hover $copyButton": { "&:hover $copyButton": {
display: "inline-block" display: "inline-block",
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
@ -272,12 +282,12 @@ const useRowStyles = makeStyles((theme) => ({
width: "200px", width: "200px",
}, },
copyButton: { copyButton: {
display: "none" display: "none",
}, },
IdGroup: { IdGroup: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
} },
})); }));
interface RowProps { interface RowProps {
@ -313,19 +323,19 @@ function Row(props: RowProps) {
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell}> <TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}> <div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy full ID to clipboard"> <Tooltip title="Copy full ID to clipboard">
<IconButton <IconButton
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation();
navigator.clipboard.writeText(task.id) navigator.clipboard.writeText(task.id);
}} }}
size="small" size="small"
className={classes.copyButton} className={classes.copyButton}
> >
<FileCopyOutlinedIcon fontSize="small" /> <FileCopyOutlinedIcon fontSize="small" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div> </div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>

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

@ -12,7 +12,7 @@ import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@material-ui/core/Tooltip";
import DeleteIcon from "@material-ui/icons/Delete"; import DeleteIcon from "@material-ui/icons/Delete";
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz"; import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import PlayArrowIcon from "@material-ui/icons/PlayArrow"; import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import Alert from "@material-ui/lab/Alert"; import Alert from "@material-ui/lab/Alert";
@ -21,7 +21,15 @@ import React, { useCallback, useState } from "react";
import { connect, ConnectedProps } from "react-redux"; import { connect, ConnectedProps } from "react-redux";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { taskRowsPerPageChange } from "../actions/settingsActions"; import { taskRowsPerPageChange } from "../actions/settingsActions";
import { batchDeleteArchivedTasksAsync, batchRunArchivedTasksAsync, deleteAllArchivedTasksAsync, deleteArchivedTaskAsync, listArchivedTasksAsync, runAllArchivedTasksAsync, runArchivedTaskAsync } from "../actions/tasksActions"; import {
batchDeleteArchivedTasksAsync,
batchRunArchivedTasksAsync,
deleteAllArchivedTasksAsync,
deleteArchivedTaskAsync,
listArchivedTasksAsync,
runAllArchivedTasksAsync,
runArchivedTaskAsync,
} from "../actions/tasksActions";
import { usePolling } from "../hooks"; import { usePolling } from "../hooks";
import { taskDetailsPath } from "../paths"; import { taskDetailsPath } from "../paths";
import { TaskInfoExtended } from "../reducers/tasksReducer"; import { TaskInfoExtended } from "../reducers/tasksReducer";
@ -30,7 +38,9 @@ import { TableColumn } from "../types/table";
import { prettifyPayload, timeAgo, uuidPrefix } from "../utils"; import { prettifyPayload, timeAgo, uuidPrefix } from "../utils";
import SyntaxHighlighter from "./SyntaxHighlighter"; import SyntaxHighlighter from "./SyntaxHighlighter";
import TableActions from "./TableActions"; import TableActions from "./TableActions";
import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions"; import TablePaginationActions, {
rowsPerPageOptions,
} from "./TablePaginationActions";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
table: { table: {
@ -48,7 +58,7 @@ const useStyles = makeStyles((theme) => ({
}, },
idCell: { idCell: {
width: "200px", width: "200px",
} },
})); }));
function mapStateToProps(state: AppState) { function mapStateToProps(state: AppState) {
@ -288,11 +298,14 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"& #copy-button": {
display: "none",
},
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
}, },
"&:hover $copyButton": { "&:hover $copyButton": {
display: "inline-block" display: "inline-block",
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
@ -306,15 +319,15 @@ const useRowStyles = makeStyles((theme) => ({
marginRight: 3, marginRight: 3,
}, },
idCell: { idCell: {
width:"200px" width: "200px",
}, },
copyButton: { copyButton: {
display: "none" display: "none",
}, },
IdGroup: { IdGroup: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
} },
})); }));
interface RowProps { interface RowProps {
@ -352,20 +365,19 @@ function Row(props: RowProps) {
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell}> <TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}> <div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy full ID to clipboard"> <Tooltip title="Copy full ID to clipboard">
<IconButton <IconButton
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation();
navigator.clipboard.writeText(task.id) navigator.clipboard.writeText(task.id);
} }}
} size="small"
size="small" className={classes.copyButton}
className={classes.copyButton} >
> <FileCopyOutlinedIcon fontSize="small" />
<FileCopyOutlinedIcon fontSize="small" /> </IconButton>
</IconButton> </Tooltip>
</Tooltip>
</div> </div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>

62
ui/src/components/CompletedTasksTable.tsx
View File

@ -12,7 +12,7 @@ import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@material-ui/core/Tooltip";
import DeleteIcon from "@material-ui/icons/Delete"; import DeleteIcon from "@material-ui/icons/Delete";
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz"; import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import Alert from "@material-ui/lab/Alert"; import Alert from "@material-ui/lab/Alert";
import AlertTitle from "@material-ui/lab/AlertTitle"; import AlertTitle from "@material-ui/lab/AlertTitle";
@ -20,16 +20,29 @@ import React, { useCallback, useState } from "react";
import { connect, ConnectedProps } from "react-redux"; import { connect, ConnectedProps } from "react-redux";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { taskRowsPerPageChange } from "../actions/settingsActions"; import { taskRowsPerPageChange } from "../actions/settingsActions";
import { batchDeleteCompletedTasksAsync, deleteAllCompletedTasksAsync, deleteCompletedTaskAsync, listCompletedTasksAsync } from "../actions/tasksActions"; import {
batchDeleteCompletedTasksAsync,
deleteAllCompletedTasksAsync,
deleteCompletedTaskAsync,
listCompletedTasksAsync,
} from "../actions/tasksActions";
import { usePolling } from "../hooks"; import { usePolling } from "../hooks";
import { taskDetailsPath } from "../paths"; import { taskDetailsPath } from "../paths";
import { TaskInfoExtended } from "../reducers/tasksReducer"; import { TaskInfoExtended } from "../reducers/tasksReducer";
import { AppState } from "../store"; import { AppState } from "../store";
import { TableColumn } from "../types/table"; import { TableColumn } from "../types/table";
import { durationFromSeconds, prettifyPayload, stringifyDuration, timeAgo, uuidPrefix } from "../utils"; import {
durationFromSeconds,
prettifyPayload,
stringifyDuration,
timeAgo,
uuidPrefix,
} from "../utils";
import SyntaxHighlighter from "./SyntaxHighlighter"; import SyntaxHighlighter from "./SyntaxHighlighter";
import TableActions from "./TableActions"; import TableActions from "./TableActions";
import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions"; import TablePaginationActions, {
rowsPerPageOptions,
} from "./TablePaginationActions";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
table: { table: {
@ -258,11 +271,17 @@ function CompletedTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"& #copy-button": {
display: "none",
},
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
"& #copy-button": {
display: "inline-block",
},
}, },
"&:hover $copyButton": { "&:hover $copyButton": {
display: "inline-block" display: "inline-block",
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
@ -279,12 +298,12 @@ const useRowStyles = makeStyles((theme) => ({
width: "200px", width: "200px",
}, },
copyButton: { copyButton: {
display: "none" display: "none",
}, },
IdGroup: { IdGroup: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
} },
})); }));
interface RowProps { interface RowProps {
@ -321,20 +340,19 @@ function Row(props: RowProps) {
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell}> <TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}> <div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy full ID to clipboard"> <Tooltip title="Copy full ID to clipboard">
<IconButton <IconButton
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation();
navigator.clipboard.writeText(task.id) navigator.clipboard.writeText(task.id);
} }}
} size="small"
size="small" className={classes.copyButton}
className={classes.copyButton} >
> <FileCopyOutlinedIcon fontSize="small" />
<FileCopyOutlinedIcon fontSize="small" /> </IconButton>
</IconButton> </Tooltip>
</Tooltip>
</div> </div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>

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

@ -13,7 +13,7 @@ import TableRow from "@material-ui/core/TableRow";
import Tooltip from "@material-ui/core/Tooltip"; import Tooltip from "@material-ui/core/Tooltip";
import ArchiveIcon from "@material-ui/icons/Archive"; import ArchiveIcon from "@material-ui/icons/Archive";
import DeleteIcon from "@material-ui/icons/Delete"; import DeleteIcon from "@material-ui/icons/Delete";
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz"; import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
import PlayArrowIcon from "@material-ui/icons/PlayArrow"; import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import Alert from "@material-ui/lab/Alert"; import Alert from "@material-ui/lab/Alert";
@ -22,7 +22,18 @@ import React, { useCallback, useState } from "react";
import { connect, ConnectedProps } from "react-redux"; import { connect, ConnectedProps } from "react-redux";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { taskRowsPerPageChange } from "../actions/settingsActions"; import { taskRowsPerPageChange } from "../actions/settingsActions";
import { archiveAllRetryTasksAsync, archiveRetryTaskAsync, batchArchiveRetryTasksAsync, batchDeleteRetryTasksAsync, batchRunRetryTasksAsync, deleteAllRetryTasksAsync, deleteRetryTaskAsync, listRetryTasksAsync, runAllRetryTasksAsync, runRetryTaskAsync } from "../actions/tasksActions"; import {
archiveAllRetryTasksAsync,
archiveRetryTaskAsync,
batchArchiveRetryTasksAsync,
batchDeleteRetryTasksAsync,
batchRunRetryTasksAsync,
deleteAllRetryTasksAsync,
deleteRetryTaskAsync,
listRetryTasksAsync,
runAllRetryTasksAsync,
runRetryTaskAsync,
} from "../actions/tasksActions";
import { usePolling } from "../hooks"; import { usePolling } from "../hooks";
import { taskDetailsPath } from "../paths"; import { taskDetailsPath } from "../paths";
import { TaskInfoExtended } from "../reducers/tasksReducer"; import { TaskInfoExtended } from "../reducers/tasksReducer";
@ -31,7 +42,9 @@ import { TableColumn } from "../types/table";
import { durationBefore, prettifyPayload, uuidPrefix } from "../utils"; import { durationBefore, prettifyPayload, uuidPrefix } from "../utils";
import SyntaxHighlighter from "./SyntaxHighlighter"; import SyntaxHighlighter from "./SyntaxHighlighter";
import TableActions from "./TableActions"; import TableActions from "./TableActions";
import TablePaginationActions, { rowsPerPageOptions } from "./TablePaginationActions"; import TablePaginationActions, {
rowsPerPageOptions,
} from "./TablePaginationActions";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
table: { table: {
@ -315,11 +328,17 @@ function RetryTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"& #copy-button": {
display: "none",
},
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
"& #copy-button": {
display: "inline-block",
},
}, },
"&:hover $copyButton": { "&:hover $copyButton": {
display: "inline-block" display: "inline-block",
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
@ -336,12 +355,12 @@ const useRowStyles = makeStyles((theme) => ({
width: "200px", width: "200px",
}, },
copyButton: { copyButton: {
display: "none" display: "none",
}, },
IdGroup: { IdGroup: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
} },
})); }));
interface RowProps { interface RowProps {
@ -381,19 +400,19 @@ function Row(props: RowProps) {
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell}> <TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}> <div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy full ID to clipboard"> <Tooltip title="Copy full ID to clipboard">
<IconButton <IconButton
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation();
navigator.clipboard.writeText(task.id) navigator.clipboard.writeText(task.id);
}} }}
size="small" size="small"
className={classes.copyButton} className={classes.copyButton}
> >
<FileCopyOutlinedIcon fontSize="small" /> <FileCopyOutlinedIcon fontSize="small" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div> </div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>

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

@ -44,7 +44,7 @@ import { usePolling } from "../hooks";
import { TaskInfoExtended } from "../reducers/tasksReducer"; import { TaskInfoExtended } from "../reducers/tasksReducer";
import { TableColumn } from "../types/table"; import { TableColumn } from "../types/table";
import { taskDetailsPath } from "../paths"; import { taskDetailsPath } from "../paths";
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined'; import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
table: { table: {
@ -325,11 +325,17 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"& #copy-button": {
display: "none",
},
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
"& #copy-button": {
display: "inline-block",
},
}, },
"&:hover $copyButton": { "&:hover $copyButton": {
display: "inline-block" display: "inline-block",
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
@ -346,12 +352,12 @@ const useRowStyles = makeStyles((theme) => ({
width: "200px", width: "200px",
}, },
copyButton: { copyButton: {
display: "none" display: "none",
}, },
IdGroup: { IdGroup: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
} },
})); }));
interface RowProps { interface RowProps {
@ -390,19 +396,19 @@ function Row(props: RowProps) {
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell}> <TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}> <div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy full ID to clipboard"> <Tooltip title="Copy full ID to clipboard">
<IconButton <IconButton
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation();
navigator.clipboard.writeText(task.id) navigator.clipboard.writeText(task.id);
}} }}
size="small" size="small"
className={classes.copyButton} className={classes.copyButton}
> >
<FileCopyOutlinedIcon fontSize="small" /> <FileCopyOutlinedIcon fontSize="small" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div> </div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>

2
ui/tsconfig.json
View File

@ -17,7 +17,7 @@
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"noEmit": true, "noEmit": true,
"jsx": "react", "jsx": "react-jsx",
"noFallthroughCasesInSwitch": true "noFallthroughCasesInSwitch": true
}, },
"include": [ "include": [