From 585b1fafbacc9d2c0e77561e0c5813581d83ebb3 Mon Sep 17 00:00:00 2001 From: pusztaienike Date: Tue, 8 Jun 2021 15:19:18 +0200 Subject: [PATCH 1/4] init webhook log --- .../components/content-list/content-list.tsx | 15 +++++ .../components/dialogs/dialog-provider.tsx | 2 + .../src/components/dialogs/dialogs.tsx | 3 + apps/sensenet/src/components/dialogs/index.ts | 1 + .../src/components/dialogs/webhook-log.tsx | 37 ++++++++++++ .../src/DefaultContentTypes.ts | 24 ++++++++ .../sn-default-content-types/src/Enums.ts | 7 +++ .../CellTemplates/VirtualDefaultCell.tsx | 56 ++++++++++++------- 8 files changed, 124 insertions(+), 21 deletions(-) create mode 100644 apps/sensenet/src/components/dialogs/webhook-log.tsx diff --git a/apps/sensenet/src/components/content-list/content-list.tsx b/apps/sensenet/src/components/content-list/content-list.tsx index 71afbbe45..3a6549a42 100644 --- a/apps/sensenet/src/components/content-list/content-list.tsx +++ b/apps/sensenet/src/components/content-list/content-list.tsx @@ -421,6 +421,21 @@ export const ContentList = (props: Co ) } return null + case 'SuccessfulCalls': + return ( + openContext(ev, fieldOptions.rowData)}> + { + openDialog({ + name: 'webhook-log', + props: { content: fieldOptions.rowData }, + }) + }} + cellData={fieldOptions.cellData} + textForLink=" (Click for details)" + /> + + ) default: break } diff --git a/apps/sensenet/src/components/dialogs/dialog-provider.tsx b/apps/sensenet/src/components/dialogs/dialog-provider.tsx index 201618912..a42379853 100644 --- a/apps/sensenet/src/components/dialogs/dialog-provider.tsx +++ b/apps/sensenet/src/components/dialogs/dialog-provider.tsx @@ -17,6 +17,7 @@ import { RestoreProps, SaveQueryProps, UploadDialogProps, + WebhookLogDialogProps, } from '.' export type DialogWithProps = ( @@ -39,6 +40,7 @@ export type DialogWithProps = ( | { name: 'feedback' } | { name: 'change-password' } | { name: 'date-range-picker'; props: DateRangePickerProps } + | { name: 'webhook-log'; props: WebhookLogDialogProps } ) & { dialogProps?: Partial } type Action = { type: 'PUSH_DIALOG'; dialog: DialogWithProps } | { type: 'POP_DIALOG' } | { type: 'CLOSE_ALL_DIALOGS' } diff --git a/apps/sensenet/src/components/dialogs/dialogs.tsx b/apps/sensenet/src/components/dialogs/dialogs.tsx index 92a1b5c40..660bfba51 100644 --- a/apps/sensenet/src/components/dialogs/dialogs.tsx +++ b/apps/sensenet/src/components/dialogs/dialogs.tsx @@ -22,6 +22,7 @@ const ContentPicker = lazy(() => import('./content-picker')) const Feedback = lazy(() => import('./feedback')) const ChangePasswordDialog = lazy(() => import('./change-password')) const DateRangePicker = lazy(() => import('./date-range-picker')) +const WebhookLog = lazy(() => import('./webhook-log')) function dialogRenderer(dialog: DialogWithProps) { switch (dialog.name) { @@ -63,6 +64,8 @@ function dialogRenderer(dialog: DialogWithProps) { return case 'date-range-picker': return + case 'webhook-log': + return default: return null } diff --git a/apps/sensenet/src/components/dialogs/index.ts b/apps/sensenet/src/components/dialogs/index.ts index fd1b9bae9..a16873271 100644 --- a/apps/sensenet/src/components/dialogs/index.ts +++ b/apps/sensenet/src/components/dialogs/index.ts @@ -17,3 +17,4 @@ export * from './permission-editor-dialog' export * from './reference-content-list' export * from './restore' export * from './save-query' +export * from './webhook-log' diff --git a/apps/sensenet/src/components/dialogs/webhook-log.tsx b/apps/sensenet/src/components/dialogs/webhook-log.tsx new file mode 100644 index 000000000..f68cf482a --- /dev/null +++ b/apps/sensenet/src/components/dialogs/webhook-log.tsx @@ -0,0 +1,37 @@ +import { WebhookSubscription } from '@sensenet/default-content-types' +import { Button, DialogActions, DialogContent, DialogContentText } from '@material-ui/core' +import React from 'react' +import { useGlobalStyles } from '../../globalStyles' +import { DialogTitle, useDialog } from '.' + +export type WebhookLogDialogProps = { + content: WebhookSubscription +} + +export const WebhookLogDialog: React.FunctionComponent = (props) => { + const { closeLastDialog } = useDialog() + const globalClasses = useGlobalStyles() + + return ( + <> + +
{props.content.WebHookUrl}
+ + <> + + asd + + + + + + + + ) +} + +export default WebhookLogDialog diff --git a/packages/sn-default-content-types/src/DefaultContentTypes.ts b/packages/sn-default-content-types/src/DefaultContentTypes.ts index b24ca0abc..b9c867fb0 100644 --- a/packages/sn-default-content-types/src/DefaultContentTypes.ts +++ b/packages/sn-default-content-types/src/DefaultContentTypes.ts @@ -758,3 +758,27 @@ export type Link = ListItem & { * Content list type for grouping external links */ export type LinkList = ContentList + +/** + * Defines an event and a 3rd party service that should be called when the event is fired. + */ +export type WebhookSubscription = GenericContent & { + /* Http method */ + WebHookHttpMethod: Enums.HttpMethod[] + /* Url */ + WebHookUrl: string + /* Triggers */ + WebHookFilter: string + /* HTTP headers */ + WebHookHeaders: string + /* Status */ + Enabled: boolean + + IsValid: boolean + + InvalidFields: string + /* % of successful calls */ + SuccessfulCalls: number + /* Custom payload */ + WebHookPayload: string +} diff --git a/packages/sn-default-content-types/src/Enums.ts b/packages/sn-default-content-types/src/Enums.ts index cfcca4aec..f86757498 100644 --- a/packages/sn-default-content-types/src/Enums.ts +++ b/packages/sn-default-content-types/src/Enums.ts @@ -102,3 +102,10 @@ export enum EventType { Meeting = 'Meeting', Demo = 'Demo', } +export enum HttpMethod { + GET = 'GET', + POST = 'POST', + PATCH = 'PATCH', + PUT = 'PUT', + DELETE = 'DELETE', +} diff --git a/packages/sn-list-controls-react/src/ContentList/CellTemplates/VirtualDefaultCell.tsx b/packages/sn-list-controls-react/src/ContentList/CellTemplates/VirtualDefaultCell.tsx index 0b7ee9cd0..4542ce282 100644 --- a/packages/sn-list-controls-react/src/ContentList/CellTemplates/VirtualDefaultCell.tsx +++ b/packages/sn-list-controls-react/src/ContentList/CellTemplates/VirtualDefaultCell.tsx @@ -1,27 +1,41 @@ import { GenericContent } from '@sensenet/default-content-types' -import { TableCell, Tooltip } from '@material-ui/core' -import React from 'react' +import { TableCell, Tooltip, useTheme } from '@material-ui/core' +import React, { MouseEventHandler } from 'react' export interface VirtualDefaultCellProps { cellData: T + onTextClick?: MouseEventHandler + textForLink?: string } -export const VirtualDefaultCell = (props: VirtualDefaultCellProps) => ( - - -
- {props.cellData?.toString()} -
- - -) +export const VirtualDefaultCell = (props: VirtualDefaultCellProps) => { + const theme = useTheme() + + return ( + + +
+ {props.cellData?.toString()} + {props.textForLink} +
+ + + ) +} From 6685ee03db300bec4d3c9c782c04b8c1b742d757 Mon Sep 17 00:00:00 2001 From: pusztaienike Date: Thu, 10 Jun 2021 14:24:35 +0200 Subject: [PATCH 2/4] create table --- .../src/components/dialogs/dialogs.tsx | 2 +- .../src/components/dialogs/webhook-log.tsx | 37 ------ .../webhook-log/collapsible-table-row.tsx | 116 ++++++++++++++++++ .../dialogs/webhook-log/collapsible-table.tsx | 19 +++ .../components/dialogs/webhook-log/index.ts | 4 + .../components/dialogs/webhook-log/types.ts | 12 ++ .../dialogs/webhook-log/webhook-log.tsx | 91 ++++++++++++++ apps/sensenet/src/localization/default.ts | 12 ++ apps/sensenet/src/localization/hungarian.ts | 12 ++ 9 files changed, 267 insertions(+), 38 deletions(-) delete mode 100644 apps/sensenet/src/components/dialogs/webhook-log.tsx create mode 100644 apps/sensenet/src/components/dialogs/webhook-log/collapsible-table-row.tsx create mode 100644 apps/sensenet/src/components/dialogs/webhook-log/collapsible-table.tsx create mode 100644 apps/sensenet/src/components/dialogs/webhook-log/index.ts create mode 100644 apps/sensenet/src/components/dialogs/webhook-log/types.ts create mode 100644 apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx diff --git a/apps/sensenet/src/components/dialogs/dialogs.tsx b/apps/sensenet/src/components/dialogs/dialogs.tsx index 660bfba51..86f2b0bb4 100644 --- a/apps/sensenet/src/components/dialogs/dialogs.tsx +++ b/apps/sensenet/src/components/dialogs/dialogs.tsx @@ -22,7 +22,7 @@ const ContentPicker = lazy(() => import('./content-picker')) const Feedback = lazy(() => import('./feedback')) const ChangePasswordDialog = lazy(() => import('./change-password')) const DateRangePicker = lazy(() => import('./date-range-picker')) -const WebhookLog = lazy(() => import('./webhook-log')) +const WebhookLog = lazy(() => import('./webhook-log/webhook-log')) function dialogRenderer(dialog: DialogWithProps) { switch (dialog.name) { diff --git a/apps/sensenet/src/components/dialogs/webhook-log.tsx b/apps/sensenet/src/components/dialogs/webhook-log.tsx deleted file mode 100644 index f68cf482a..000000000 --- a/apps/sensenet/src/components/dialogs/webhook-log.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { WebhookSubscription } from '@sensenet/default-content-types' -import { Button, DialogActions, DialogContent, DialogContentText } from '@material-ui/core' -import React from 'react' -import { useGlobalStyles } from '../../globalStyles' -import { DialogTitle, useDialog } from '.' - -export type WebhookLogDialogProps = { - content: WebhookSubscription -} - -export const WebhookLogDialog: React.FunctionComponent = (props) => { - const { closeLastDialog } = useDialog() - const globalClasses = useGlobalStyles() - - return ( - <> - -
{props.content.WebHookUrl}
- - <> - - asd - - - - - - - - ) -} - -export default WebhookLogDialog diff --git a/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table-row.tsx b/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table-row.tsx new file mode 100644 index 000000000..2c252ac4a --- /dev/null +++ b/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table-row.tsx @@ -0,0 +1,116 @@ +import { Box, Collapse, createStyles, makeStyles, TableCell, TableRow, Theme, useTheme } from '@material-ui/core' +import { FiberManualRecord } from '@material-ui/icons' +import React, { useState } from 'react' +import { useLocalization } from '../../../hooks' +import { useDateUtils } from '../../../hooks/use-date-utils' +import { WebhookStatInput } from './types' + +const useStyles = makeStyles((theme: Theme) => { + return createStyles({ + row: { + '& > *': { + borderBottom: 'unset', + }, + }, + icon: { + height: '20px', + width: '20px', + marginRight: '16px', + }, + cell: { + display: 'flex', + alignItems: 'center', + }, + actionCell: { + color: theme.palette.primary.main, + cursor: 'pointer', + textDecoration: 'underline', + }, + box: { + display: 'flex', + }, + title: { + color: theme.palette.primary.main, + paddingRight: '16px', + }, + }) +}) + +export function CollapsibleTableRow(props: { row: WebhookStatInput }) { + const classes = useStyles() + const theme = useTheme() + const localization = useLocalization().webhookLogDialog + const dateUtils = useDateUtils() + const [open, setOpen] = useState(false) + + return ( + + + + {dateUtils.formatDate(new Date(props.row.RequestTime), 'yyyy-MM-dd HH:mm aaa')} + + + + HTTP {props.row.ResponseStatusCode} + + setOpen(!open)}> + {localization.details} + + + + + + +
+
+ {localization.requestTime} + {dateUtils.formatDate(new Date(props.row.RequestTime), 'yyyy-MM-dd HH:mm aaa')} +
+
+ {localization.requestLength} + {props.row.RequestLength} +
+
+ {localization.webhookId} + {props.row.WebhookId} +
+
+ {localization.eventName} + {props.row.EventName} +
+
+
+
+ {localization.responseTime} + {dateUtils.formatDate(new Date(props.row.ResponseTime), 'yyyy-MM-dd HH:mm aaa')} +
+
+ {localization.requestLength} + {props.row.RequestLength} +
+
+ {localization.contentId} + {props.row.ContentId} +
+
+ {localization.errorMessage} + {props.row.ErrorMessage} +
+
+ + + + + + ) +} diff --git a/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table.tsx b/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table.tsx new file mode 100644 index 000000000..b48b0338d --- /dev/null +++ b/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table.tsx @@ -0,0 +1,19 @@ +import { Table, TableBody } from '@material-ui/core' +import React from 'react' +import { CollapsibleTableRow, WebhookStatInput } from '.' + +export interface CollapsibleTableProps { + webhooks: WebhookStatInput[] +} + +export function CollapsibleTable({ webhooks }: CollapsibleTableProps) { + return ( + + + {webhooks.map((webhookItem) => ( + + ))} + +
+ ) +} diff --git a/apps/sensenet/src/components/dialogs/webhook-log/index.ts b/apps/sensenet/src/components/dialogs/webhook-log/index.ts new file mode 100644 index 000000000..14401ef87 --- /dev/null +++ b/apps/sensenet/src/components/dialogs/webhook-log/index.ts @@ -0,0 +1,4 @@ +export * from './collapsible-table-row' +export * from './collapsible-table' +export * from './types' +export * from './webhook-log' diff --git a/apps/sensenet/src/components/dialogs/webhook-log/types.ts b/apps/sensenet/src/components/dialogs/webhook-log/types.ts new file mode 100644 index 000000000..edea8c4fb --- /dev/null +++ b/apps/sensenet/src/components/dialogs/webhook-log/types.ts @@ -0,0 +1,12 @@ +export type WebhookStatInput = { + Url: string + RequestTime: string + ResponseTime: string + RequestLength: number + ResponseLength: number + ResponseStatusCode: number + WebhookId: number | string + ContentId: number | string + EventName: string + ErrorMessage: string | null +} diff --git a/apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx b/apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx new file mode 100644 index 000000000..ad0701f7e --- /dev/null +++ b/apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx @@ -0,0 +1,91 @@ +import { WebhookSubscription } from '@sensenet/default-content-types' +import { Button, DialogActions, DialogContent } from '@material-ui/core' +import React from 'react' +import { useGlobalStyles } from '../../../globalStyles' +import { useLocalization } from '../../../hooks' +import { useDialog } from '../dialog-provider' +import { DialogTitle } from '../dialog-title' +import { CollapsibleTable } from './collapsible-table' + +const exampleData = { + data: [ + { + Url: 'https://test.com', + RequestTime: '2021-06-07T12:00:00Z', + ResponseTime: '2021-06-07T12:02:00Z', + RequestLength: 300, + ResponseLength: 340, + ResponseStatusCode: 200, + WebhookId: 1, + ContentId: 2033, + EventName: 'test', + ErrorMessage: null, + }, + { + Url: 'https://test.com', + RequestTime: '2021-06-08T12:00:00Z', + ResponseTime: '2021-06-08T12:02:00Z', + RequestLength: 200, + ResponseLength: 212, + ResponseStatusCode: 200, + WebhookId: 1, + ContentId: 2033, + EventName: 'test', + ErrorMessage: null, + }, + { + Url: 'https://test.com', + RequestTime: '2021-06-09T14:00:00Z', + ResponseTime: '2021-06-09T14:02:00Z', + RequestLength: 300, + ResponseLength: 312, + ResponseStatusCode: 400, + WebhookId: 1, + ContentId: 2033, + EventName: 'test', + ErrorMessage: 'Bad request', + }, + { + Url: 'https://test.com', + RequestTime: '2021-06-02T14:00:00Z', + ResponseTime: '2021-06-02T14:02:00Z', + RequestLength: 330, + ResponseLength: 222, + ResponseStatusCode: 304, + WebhookId: 1, + ContentId: 2033, + EventName: 'test', + ErrorMessage: 'Not modified', + }, + ], +} + +export type WebhookLogDialogProps = { + content: WebhookSubscription +} + +export const WebhookLogDialog: React.FunctionComponent = (props) => { + const { closeLastDialog } = useDialog() + const globalClasses = useGlobalStyles() + const localization = useLocalization() + + return ( + <> + +
{props.content.WebHookUrl}
+ + <> + + + + + + + + + ) +} + +export default WebhookLogDialog diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts index b9fc3a61e..7a5149ae9 100644 --- a/apps/sensenet/src/localization/default.ts +++ b/apps/sensenet/src/localization/default.ts @@ -631,6 +631,18 @@ const values = { example: 'Example:', defaultPayload: 'Default payload', }, + webhookLogDialog: { + log: 'Log', + details: 'Details', + requestTime: 'Request time:', + responseTime: 'Response time:', + requestLength: 'Request length:', + responseLength: 'Response length', + webhookId: 'Webhook id:', + contentId: 'Content id:', + eventName: 'Event name:', + errorMessage: 'Error message:', + }, } export default values diff --git a/apps/sensenet/src/localization/hungarian.ts b/apps/sensenet/src/localization/hungarian.ts index dc3ebfdd7..d0c8f2873 100644 --- a/apps/sensenet/src/localization/hungarian.ts +++ b/apps/sensenet/src/localization/hungarian.ts @@ -306,6 +306,18 @@ const values: DeepPartial = { 'Saját payload bármilyen valid JSON lehet. Ha az alapértelmezett payload-ot szeretné használni, hagyja üresen ezt a mezőt.', example: 'Példa:', }, + webhookLogDialog: { + log: 'Napló', + details: 'Részletek', + requestTime: 'Kérés időpontja:', + responseTime: 'Válasz időpontja:', + requestLength: 'Kérés mérete:', + responseLength: 'Válasz mérete:', + webhookId: 'Webhook azonosító:', + contentId: 'Kontent azonosító:', + eventName: 'Esemény neve:', + errorMessage: 'Hibaüzenet:', + }, } export default values From a0b33d2d180319175fda2cb3845eb3acdbed0812 Mon Sep 17 00:00:00 2001 From: pusztaienike Date: Mon, 14 Jun 2021 11:14:39 +0200 Subject: [PATCH 3/4] fix types --- .../webhook-log/collapsible-table-row.tsx | 14 +- .../dialogs/webhook-log/collapsible-table.tsx | 2 +- .../components/dialogs/webhook-log/types.ts | 6 +- .../dialogs/webhook-log/webhook-log.tsx | 142 +++++++++++++----- apps/sensenet/src/localization/default.ts | 2 +- apps/sensenet/src/localization/hungarian.ts | 2 +- 6 files changed, 120 insertions(+), 48 deletions(-) diff --git a/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table-row.tsx b/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table-row.tsx index 2c252ac4a..0734fceed 100644 --- a/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table-row.tsx +++ b/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table-row.tsx @@ -47,7 +47,7 @@ export function CollapsibleTableRow(props: { row: WebhookStatInput }) { - {dateUtils.formatDate(new Date(props.row.RequestTime), 'yyyy-MM-dd HH:mm aaa')} + {dateUtils.formatDate(new Date(props.row.CreationTime), 'yyyy-MM-dd HH:mm aaa')}
{localization.requestTime} - {dateUtils.formatDate(new Date(props.row.RequestTime), 'yyyy-MM-dd HH:mm aaa')} + {dateUtils.formatDate(new Date(props.row.CreationTime), 'yyyy-MM-dd HH:mm aaa')}
{localization.requestLength} @@ -82,7 +82,7 @@ export function CollapsibleTableRow(props: { row: WebhookStatInput }) {
{localization.webhookId} - {props.row.WebhookId} + {props.row.WebHookId}
{localization.eventName} @@ -91,12 +91,12 @@ export function CollapsibleTableRow(props: { row: WebhookStatInput }) {
- {localization.responseTime} - {dateUtils.formatDate(new Date(props.row.ResponseTime), 'yyyy-MM-dd HH:mm aaa')} + {localization.duration} + {props.row.Duration}
- {localization.requestLength} - {props.row.RequestLength} + {localization.responseLength} + {props.row.ResponseLength}
{localization.contentId} diff --git a/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table.tsx b/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table.tsx index b48b0338d..91c380896 100644 --- a/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table.tsx +++ b/apps/sensenet/src/components/dialogs/webhook-log/collapsible-table.tsx @@ -11,7 +11,7 @@ export function CollapsibleTable({ webhooks }: CollapsibleTableProps) { {webhooks.map((webhookItem) => ( - + ))}
diff --git a/apps/sensenet/src/components/dialogs/webhook-log/types.ts b/apps/sensenet/src/components/dialogs/webhook-log/types.ts index edea8c4fb..e147c6329 100644 --- a/apps/sensenet/src/components/dialogs/webhook-log/types.ts +++ b/apps/sensenet/src/components/dialogs/webhook-log/types.ts @@ -1,11 +1,11 @@ export type WebhookStatInput = { Url: string - RequestTime: string - ResponseTime: string + CreationTime: string + Duration: string RequestLength: number ResponseLength: number ResponseStatusCode: number - WebhookId: number | string + WebHookId: number | string ContentId: number | string EventName: string ErrorMessage: string | null diff --git a/apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx b/apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx index ad0701f7e..6756fab7a 100644 --- a/apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx +++ b/apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx @@ -10,52 +10,124 @@ import { CollapsibleTable } from './collapsible-table' const exampleData = { data: [ { - Url: 'https://test.com', - RequestTime: '2021-06-07T12:00:00Z', - ResponseTime: '2021-06-07T12:02:00Z', - RequestLength: 300, - ResponseLength: 340, + CreationTime: '2021-06-13T18:31:08.7658781Z', + Duration: '00:00:00.9000000', + RequestLength: 101, + ResponseLength: 1010, ResponseStatusCode: 200, - WebhookId: 1, - ContentId: 2033, - EventName: 'test', + Url: 'POST https://example.com/hook/2', + WebHookId: 1242, + ContentId: 10001, + EventName: 'Event2', ErrorMessage: null, }, { - Url: 'https://test.com', - RequestTime: '2021-06-08T12:00:00Z', - ResponseTime: '2021-06-08T12:02:00Z', - RequestLength: 200, - ResponseLength: 212, + CreationTime: '2021-06-13T12:31:08.7658771Z', + Duration: '00:00:00.9000000', + RequestLength: 101, + ResponseLength: 1020, ResponseStatusCode: 200, - WebhookId: 1, - ContentId: 2033, - EventName: 'test', + Url: 'POST https://example.com/hook/3', + WebHookId: 1242, + ContentId: 10002, + EventName: 'Event3', ErrorMessage: null, }, { - Url: 'https://test.com', - RequestTime: '2021-06-09T14:00:00Z', - ResponseTime: '2021-06-09T14:02:00Z', - RequestLength: 300, - ResponseLength: 312, + CreationTime: '2021-06-13T06:31:08.7658762Z', + Duration: '00:00:00.9000000', + RequestLength: 101, + ResponseLength: 1030, + ResponseStatusCode: 200, + Url: 'POST https://example.com/hook/4', + WebHookId: 1242, + ContentId: 10003, + EventName: 'Event4', + ErrorMessage: null, + }, + { + CreationTime: '2021-06-13T00:31:08.7658751Z', + Duration: '00:00:00.9000000', + RequestLength: 101, + ResponseLength: 1040, ResponseStatusCode: 400, - WebhookId: 1, - ContentId: 2033, - EventName: 'test', - ErrorMessage: 'Bad request', + Url: 'POST https://example.com/hook/5', + WebHookId: 1242, + ContentId: 10004, + EventName: 'Event1', + ErrorMessage: 'Warning message', + }, + { + CreationTime: '2021-06-12T18:31:08.7658742Z', + Duration: '00:00:00.9000000', + RequestLength: 101, + ResponseLength: 1050, + ResponseStatusCode: 200, + Url: 'POST https://example.com/hook/1', + WebHookId: 1242, + ContentId: 10005, + EventName: 'Event2', + ErrorMessage: null, + }, + { + CreationTime: '2021-06-12T12:31:08.7658732Z', + Duration: '00:00:00.9000000', + RequestLength: 101, + ResponseLength: 1060, + ResponseStatusCode: 500, + Url: 'POST https://example.com/hook/2', + WebHookId: 1242, + ContentId: 10006, + EventName: 'Event3', + ErrorMessage: 'Error message', }, { - Url: 'https://test.com', - RequestTime: '2021-06-02T14:00:00Z', - ResponseTime: '2021-06-02T14:02:00Z', - RequestLength: 330, - ResponseLength: 222, - ResponseStatusCode: 304, - WebhookId: 1, - ContentId: 2033, - EventName: 'test', - ErrorMessage: 'Not modified', + CreationTime: '2021-06-12T06:31:08.7658722Z', + Duration: '00:00:00.9000000', + RequestLength: 101, + ResponseLength: 1070, + ResponseStatusCode: 200, + Url: 'POST https://example.com/hook/3', + WebHookId: 1242, + ContentId: 10007, + EventName: 'Event4', + ErrorMessage: null, + }, + { + CreationTime: '2021-06-12T00:31:08.7658713Z', + Duration: '00:00:00.9000000', + RequestLength: 101, + ResponseLength: 1080, + ResponseStatusCode: 200, + Url: 'POST https://example.com/hook/4', + WebHookId: 1242, + ContentId: 10008, + EventName: 'Event1', + ErrorMessage: null, + }, + { + CreationTime: '2021-06-11T18:31:08.7658703Z', + Duration: '00:00:00.9000000', + RequestLength: 101, + ResponseLength: 1090, + ResponseStatusCode: 400, + Url: 'POST https://example.com/hook/5', + WebHookId: 1242, + ContentId: 10009, + EventName: 'Event2', + ErrorMessage: 'Warning message', + }, + { + CreationTime: '2021-06-11T12:31:08.7658685Z', + Duration: '00:00:00.9000000', + RequestLength: 101, + ResponseLength: 1100, + ResponseStatusCode: 200, + Url: 'POST https://example.com/hook/1', + WebHookId: 1242, + ContentId: 10010, + EventName: 'Event3', + ErrorMessage: null, }, ], } diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts index 7a5149ae9..254b3df80 100644 --- a/apps/sensenet/src/localization/default.ts +++ b/apps/sensenet/src/localization/default.ts @@ -635,7 +635,7 @@ const values = { log: 'Log', details: 'Details', requestTime: 'Request time:', - responseTime: 'Response time:', + duration: 'Duration:', requestLength: 'Request length:', responseLength: 'Response length', webhookId: 'Webhook id:', diff --git a/apps/sensenet/src/localization/hungarian.ts b/apps/sensenet/src/localization/hungarian.ts index d0c8f2873..abf11e20b 100644 --- a/apps/sensenet/src/localization/hungarian.ts +++ b/apps/sensenet/src/localization/hungarian.ts @@ -310,7 +310,7 @@ const values: DeepPartial = { log: 'Napló', details: 'Részletek', requestTime: 'Kérés időpontja:', - responseTime: 'Válasz időpontja:', + duration: 'Válasz időtartama:', requestLength: 'Kérés mérete:', responseLength: 'Válasz mérete:', webhookId: 'Webhook azonosító:', From faad6693845bcc471bf73be7cdc37c71f9c0356b Mon Sep 17 00:00:00 2001 From: pusztaie Date: Tue, 6 Jul 2021 16:00:07 +0200 Subject: [PATCH 4/4] add connection to backend --- .../dialogs/webhook-log/webhook-log.tsx | 160 ++++-------------- 1 file changed, 32 insertions(+), 128 deletions(-) diff --git a/apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx b/apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx index 6756fab7a..be018fd0a 100644 --- a/apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx +++ b/apps/sensenet/src/components/dialogs/webhook-log/webhook-log.tsx @@ -1,136 +1,13 @@ import { WebhookSubscription } from '@sensenet/default-content-types' +import { useLogger, useRepository } from '@sensenet/hooks-react' import { Button, DialogActions, DialogContent } from '@material-ui/core' -import React from 'react' +import React, { useEffect, useState } from 'react' import { useGlobalStyles } from '../../../globalStyles' import { useLocalization } from '../../../hooks' import { useDialog } from '../dialog-provider' import { DialogTitle } from '../dialog-title' import { CollapsibleTable } from './collapsible-table' - -const exampleData = { - data: [ - { - CreationTime: '2021-06-13T18:31:08.7658781Z', - Duration: '00:00:00.9000000', - RequestLength: 101, - ResponseLength: 1010, - ResponseStatusCode: 200, - Url: 'POST https://example.com/hook/2', - WebHookId: 1242, - ContentId: 10001, - EventName: 'Event2', - ErrorMessage: null, - }, - { - CreationTime: '2021-06-13T12:31:08.7658771Z', - Duration: '00:00:00.9000000', - RequestLength: 101, - ResponseLength: 1020, - ResponseStatusCode: 200, - Url: 'POST https://example.com/hook/3', - WebHookId: 1242, - ContentId: 10002, - EventName: 'Event3', - ErrorMessage: null, - }, - { - CreationTime: '2021-06-13T06:31:08.7658762Z', - Duration: '00:00:00.9000000', - RequestLength: 101, - ResponseLength: 1030, - ResponseStatusCode: 200, - Url: 'POST https://example.com/hook/4', - WebHookId: 1242, - ContentId: 10003, - EventName: 'Event4', - ErrorMessage: null, - }, - { - CreationTime: '2021-06-13T00:31:08.7658751Z', - Duration: '00:00:00.9000000', - RequestLength: 101, - ResponseLength: 1040, - ResponseStatusCode: 400, - Url: 'POST https://example.com/hook/5', - WebHookId: 1242, - ContentId: 10004, - EventName: 'Event1', - ErrorMessage: 'Warning message', - }, - { - CreationTime: '2021-06-12T18:31:08.7658742Z', - Duration: '00:00:00.9000000', - RequestLength: 101, - ResponseLength: 1050, - ResponseStatusCode: 200, - Url: 'POST https://example.com/hook/1', - WebHookId: 1242, - ContentId: 10005, - EventName: 'Event2', - ErrorMessage: null, - }, - { - CreationTime: '2021-06-12T12:31:08.7658732Z', - Duration: '00:00:00.9000000', - RequestLength: 101, - ResponseLength: 1060, - ResponseStatusCode: 500, - Url: 'POST https://example.com/hook/2', - WebHookId: 1242, - ContentId: 10006, - EventName: 'Event3', - ErrorMessage: 'Error message', - }, - { - CreationTime: '2021-06-12T06:31:08.7658722Z', - Duration: '00:00:00.9000000', - RequestLength: 101, - ResponseLength: 1070, - ResponseStatusCode: 200, - Url: 'POST https://example.com/hook/3', - WebHookId: 1242, - ContentId: 10007, - EventName: 'Event4', - ErrorMessage: null, - }, - { - CreationTime: '2021-06-12T00:31:08.7658713Z', - Duration: '00:00:00.9000000', - RequestLength: 101, - ResponseLength: 1080, - ResponseStatusCode: 200, - Url: 'POST https://example.com/hook/4', - WebHookId: 1242, - ContentId: 10008, - EventName: 'Event1', - ErrorMessage: null, - }, - { - CreationTime: '2021-06-11T18:31:08.7658703Z', - Duration: '00:00:00.9000000', - RequestLength: 101, - ResponseLength: 1090, - ResponseStatusCode: 400, - Url: 'POST https://example.com/hook/5', - WebHookId: 1242, - ContentId: 10009, - EventName: 'Event2', - ErrorMessage: 'Warning message', - }, - { - CreationTime: '2021-06-11T12:31:08.7658685Z', - Duration: '00:00:00.9000000', - RequestLength: 101, - ResponseLength: 1100, - ResponseStatusCode: 200, - Url: 'POST https://example.com/hook/1', - WebHookId: 1242, - ContentId: 10010, - EventName: 'Event3', - ErrorMessage: null, - }, - ], -} +import { WebhookStatInput } from '.' export type WebhookLogDialogProps = { content: WebhookSubscription @@ -140,6 +17,30 @@ export const WebhookLogDialog: React.FunctionComponent = const { closeLastDialog } = useDialog() const globalClasses = useGlobalStyles() const localization = useLocalization() + const logger = useLogger('WebhookLog') + const repo = useRepository() + const [data, setData] = useState([]) + + useEffect(() => { + const getData = async () => { + try { + const response = await repo.executeAction({ + idOrPath: props.content.Path, + name: `GetWebHookUsageList`, + method: 'POST', + body: {}, + }) + console.log(response) + setData(response) + } catch (error) { + logger.error({ + message: error.message, + }) + } + } + + getData() + }, [logger, props.content.Path, repo]) return ( <> @@ -148,10 +49,13 @@ export const WebhookLogDialog: React.FunctionComponent = <> - + -