mirror of
https://github.com/dstotijn/hetty.git
synced 2025-07-01 18:47:29 -04:00
Clear all HTTP request logs (#49)
* Create mutation to clear request logs * Add UI for clearing all HTTP request logs * Use consistent naming * Explicitly delete only from http_requests * Check if datebase is open * Add confirmation dialog
This commit is contained in:
Michał Załęcki
53
admin/src/components/reqlog/ConfirmationDialog.tsx
Normal file
53
admin/src/components/reqlog/ConfirmationDialog.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React, { useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import Dialog from "@material-ui/core/Dialog";
|
||||
import DialogActions from "@material-ui/core/DialogActions";
|
||||
import DialogContent from "@material-ui/core/DialogContent";
|
||||
import DialogContentText from "@material-ui/core/DialogContentText";
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
|
||||
export function useConfirmationDialog() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const close = () => setIsOpen(false);
|
||||
const open = () => setIsOpen(true);
|
||||
|
||||
return { open, close, isOpen };
|
||||
}
|
||||
|
||||
interface ConfirmationDialog {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function ConfirmationDialog(props: ConfirmationDialog) {
|
||||
const { onClose, onConfirm, isOpen, children } = props;
|
||||
|
||||
function confirm() {
|
||||
onConfirm();
|
||||
onClose();
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onClose={onClose}
|
||||
aria-labelledby="alert-dialog-title"
|
||||
aria-describedby="alert-dialog-description"
|
||||
>
|
||||
<DialogTitle id="alert-dialog-title">Are you sure?</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText id="alert-dialog-description">
|
||||
{children}
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose}>Abort</Button>
|
||||
<Button onClick={confirm} autoFocus>
|
||||
Confirm
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@ -1,41 +1,24 @@
|
||||
import { useRouter } from "next/router";
|
||||
import { gql, useQuery } from "@apollo/client";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
CircularProgress,
|
||||
Link as MaterialLink,
|
||||
Typography,
|
||||
} from "@material-ui/core";
|
||||
import Alert from "@material-ui/lab/Alert";
|
||||
|
||||
import RequestList from "./RequestList";
|
||||
import LogDetail from "./LogDetail";
|
||||
import CenteredPaper from "../CenteredPaper";
|
||||
|
||||
const HTTP_REQUEST_LOGS = gql`
|
||||
query HttpRequestLogs {
|
||||
httpRequestLogs {
|
||||
id
|
||||
method
|
||||
url
|
||||
timestamp
|
||||
response {
|
||||
statusCode
|
||||
statusReason
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
import { useHttpRequestLogs } from "./hooks/useHttpRequestLogs";
|
||||
|
||||
function LogsOverview(): JSX.Element {
|
||||
const router = useRouter();
|
||||
const detailReqLogId =
|
||||
router.query.id && parseInt(router.query.id as string, 10);
|
||||
|
||||
const { loading, error, data } = useQuery(HTTP_REQUEST_LOGS, {
|
||||
pollInterval: 1000,
|
||||
});
|
||||
const { loading, error, data } = useHttpRequestLogs();
|
||||
|
||||
const handleLogClick = (reqId: number) => {
|
||||
router.push("/proxy/logs?id=" + reqId, undefined, {
|
||||
|
||||
@ -16,10 +16,16 @@ import {
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import SearchIcon from "@material-ui/icons/Search";
|
||||
import FilterListIcon from "@material-ui/icons/FilterList";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { gql, useApolloClient, useMutation, useQuery } from "@apollo/client";
|
||||
import { gql, useMutation, useQuery } from "@apollo/client";
|
||||
import { withoutTypename } from "../../lib/omitTypename";
|
||||
import { Alert } from "@material-ui/lab";
|
||||
import { useClearHTTPRequestLog } from "./hooks/useClearHTTPRequestLog";
|
||||
import {
|
||||
ConfirmationDialog,
|
||||
useConfirmationDialog,
|
||||
} from "./ConfirmationDialog";
|
||||
|
||||
const FILTER = gql`
|
||||
query HttpRequestLogFilter {
|
||||
@ -79,15 +85,14 @@ function Search(): JSX.Element {
|
||||
FILTER
|
||||
);
|
||||
|
||||
const client = useApolloClient();
|
||||
const [
|
||||
setFilterMutate,
|
||||
{ error: setFilterErr, loading: setFilterLoading },
|
||||
] = useMutation<{
|
||||
setHttpRequestLogFilter: SearchFilter | null;
|
||||
}>(SET_FILTER, {
|
||||
update(_, { data: { setHttpRequestLogFilter } }) {
|
||||
client.writeQuery({
|
||||
update(cache, { data: { setHttpRequestLogFilter } }) {
|
||||
cache.writeQuery({
|
||||
query: FILTER,
|
||||
data: {
|
||||
httpRequestLogFilter: setHttpRequestLogFilter,
|
||||
@ -96,6 +101,12 @@ function Search(): JSX.Element {
|
||||
},
|
||||
});
|
||||
|
||||
const [
|
||||
clearHTTPRequestLog,
|
||||
clearHTTPRequestLogResult,
|
||||
] = useClearHTTPRequestLog();
|
||||
const clearHTTPConfirmationDialog = useConfirmationDialog();
|
||||
|
||||
const filterRef = useRef<HTMLElement | null>();
|
||||
const [filterOpen, setFilterOpen] = useState(false);
|
||||
|
||||
@ -111,90 +122,112 @@ function Search(): JSX.Element {
|
||||
};
|
||||
|
||||
return (
|
||||
<ClickAwayListener onClickAway={handleClickAway}>
|
||||
<Box style={{ display: "inline-block" }}>
|
||||
{filterErr && (
|
||||
<Box mb={4}>
|
||||
<Alert severity="error">
|
||||
Error fetching filter: {filterErr.message}
|
||||
</Alert>
|
||||
</Box>
|
||||
)}
|
||||
{setFilterErr && (
|
||||
<Box mb={4}>
|
||||
<Alert severity="error">
|
||||
Error setting filter: {setFilterErr.message}
|
||||
</Alert>
|
||||
</Box>
|
||||
)}
|
||||
<Paper
|
||||
component="form"
|
||||
onSubmit={handleSubmit}
|
||||
ref={filterRef}
|
||||
className={classes.root}
|
||||
>
|
||||
<Tooltip title="Toggle filter options">
|
||||
<IconButton
|
||||
className={classes.iconButton}
|
||||
onClick={() => setFilterOpen(!filterOpen)}
|
||||
style={{
|
||||
color:
|
||||
filter?.httpRequestLogFilter !== null
|
||||
? theme.palette.secondary.main
|
||||
: "inherit",
|
||||
}}
|
||||
>
|
||||
{filterLoading || setFilterLoading ? (
|
||||
<CircularProgress className={classes.filterLoading} size={23} />
|
||||
) : (
|
||||
<FilterListIcon />
|
||||
)}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<InputBase
|
||||
className={classes.input}
|
||||
placeholder="Search proxy logs…"
|
||||
onFocus={() => setFilterOpen(true)}
|
||||
/>
|
||||
<Tooltip title="Search">
|
||||
<IconButton type="submit" className={classes.iconButton}>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Paper>
|
||||
|
||||
<Popper
|
||||
className={classes.filterPopper}
|
||||
open={filterOpen}
|
||||
anchorEl={filterRef.current}
|
||||
placement="bottom-start"
|
||||
>
|
||||
<Paper className={classes.filterOptions}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={
|
||||
filter?.httpRequestLogFilter?.onlyInScope ? true : false
|
||||
}
|
||||
disabled={filterLoading || setFilterLoading}
|
||||
onChange={(e) =>
|
||||
setFilterMutate({
|
||||
variables: {
|
||||
filter: {
|
||||
...withoutTypename(filter?.httpRequestLogFilter),
|
||||
onlyInScope: e.target.checked,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
}
|
||||
label="Only show in-scope requests"
|
||||
<Box>
|
||||
<Error prefix="Error fetching filter" error={filterErr} />
|
||||
<Error prefix="Error setting filter" error={setFilterErr} />
|
||||
<Error
|
||||
prefix="Error clearing all HTTP logs"
|
||||
error={clearHTTPRequestLogResult.error}
|
||||
/>
|
||||
<Box style={{ display: "flex", flex: 1 }}>
|
||||
<ClickAwayListener onClickAway={handleClickAway}>
|
||||
<Paper
|
||||
component="form"
|
||||
onSubmit={handleSubmit}
|
||||
ref={filterRef}
|
||||
className={classes.root}
|
||||
>
|
||||
<Tooltip title="Toggle filter options">
|
||||
<IconButton
|
||||
className={classes.iconButton}
|
||||
onClick={() => setFilterOpen(!filterOpen)}
|
||||
style={{
|
||||
color:
|
||||
filter?.httpRequestLogFilter !== null
|
||||
? theme.palette.secondary.main
|
||||
: "inherit",
|
||||
}}
|
||||
>
|
||||
{filterLoading || setFilterLoading ? (
|
||||
<CircularProgress
|
||||
className={classes.filterLoading}
|
||||
size={23}
|
||||
/>
|
||||
) : (
|
||||
<FilterListIcon />
|
||||
)}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<InputBase
|
||||
className={classes.input}
|
||||
placeholder="Search proxy logs…"
|
||||
onFocus={() => setFilterOpen(true)}
|
||||
/>
|
||||
<Tooltip title="Search">
|
||||
<IconButton type="submit" className={classes.iconButton}>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Popper
|
||||
className={classes.filterPopper}
|
||||
open={filterOpen}
|
||||
anchorEl={filterRef.current}
|
||||
placement="bottom-start"
|
||||
>
|
||||
<Paper className={classes.filterOptions}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={
|
||||
filter?.httpRequestLogFilter?.onlyInScope ? true : false
|
||||
}
|
||||
disabled={filterLoading || setFilterLoading}
|
||||
onChange={(e) =>
|
||||
setFilterMutate({
|
||||
variables: {
|
||||
filter: {
|
||||
...withoutTypename(filter?.httpRequestLogFilter),
|
||||
onlyInScope: e.target.checked,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
}
|
||||
label="Only show in-scope requests"
|
||||
/>
|
||||
</Paper>
|
||||
</Popper>
|
||||
</Paper>
|
||||
</Popper>
|
||||
</ClickAwayListener>
|
||||
<Box style={{ marginLeft: "auto" }}>
|
||||
<Tooltip title="Clear all">
|
||||
<IconButton onClick={clearHTTPConfirmationDialog.open}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
</ClickAwayListener>
|
||||
<ConfirmationDialog
|
||||
isOpen={clearHTTPConfirmationDialog.isOpen}
|
||||
onClose={clearHTTPConfirmationDialog.close}
|
||||
onConfirm={clearHTTPRequestLog}
|
||||
>
|
||||
All proxy logs are going to be removed. This action cannot be undone.
|
||||
</ConfirmationDialog>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function Error(props: { prefix: string; error?: Error }) {
|
||||
if (!props.error) return null;
|
||||
|
||||
return (
|
||||
<Box mb={4}>
|
||||
<Alert severity="error">
|
||||
{props.prefix}: {props.error.message}
|
||||
</Alert>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
16
admin/src/components/reqlog/hooks/useClearHTTPRequestLog.ts
Normal file
16
admin/src/components/reqlog/hooks/useClearHTTPRequestLog.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { gql, useMutation } from "@apollo/client";
|
||||
import { HTTP_REQUEST_LOGS } from "./useHttpRequestLogs";
|
||||
|
||||
const CLEAR_HTTP_REQUEST_LOG = gql`
|
||||
mutation ClearHTTPRequestLog {
|
||||
clearHTTPRequestLog {
|
||||
success
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export function useClearHTTPRequestLog() {
|
||||
return useMutation(CLEAR_HTTP_REQUEST_LOG, {
|
||||
refetchQueries: [{ query: HTTP_REQUEST_LOGS }],
|
||||
});
|
||||
}
|
||||
22
admin/src/components/reqlog/hooks/useHttpRequestLogs.ts
Normal file
22
admin/src/components/reqlog/hooks/useHttpRequestLogs.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { gql, useQuery } from "@apollo/client";
|
||||
|
||||
export const HTTP_REQUEST_LOGS = gql`
|
||||
query HttpRequestLogs {
|
||||
httpRequestLogs {
|
||||
id
|
||||
method
|
||||
url
|
||||
timestamp
|
||||
response {
|
||||
statusCode
|
||||
statusReason
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export function useHttpRequestLogs() {
|
||||
return useQuery(HTTP_REQUEST_LOGS, {
|
||||
pollInterval: 1000,
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user