From 09815d5b7a7bb7af3cc1d1b002a54a93d296c43d Mon Sep 17 00:00:00 2001 From: Steven Fountain Date: Wed, 26 Jul 2023 14:47:16 +0100 Subject: [PATCH] PP-13510: add option to remove non-success events --- browser/src/dashboard/Dashboard.tsx | 73 +++++++++++++++++++++--- browser/src/dashboard/EventCard.tsx | 9 ++- browser/src/dashboard/EventListPanel.tsx | 5 +- browser/src/dashboard/events.ts | 7 +++ 4 files changed, 82 insertions(+), 12 deletions(-) diff --git a/browser/src/dashboard/Dashboard.tsx b/browser/src/dashboard/Dashboard.tsx index f71a59a54..ff1ac22b7 100644 --- a/browser/src/dashboard/Dashboard.tsx +++ b/browser/src/dashboard/Dashboard.tsx @@ -55,7 +55,8 @@ interface DashboardState { fetchedServices: boolean, // move to sync: status property similar to connection rather than top level - sync?: AggregateSyncStatus + sync?: AggregateSyncStatus, + showAllEvents: boolean } export interface AggregateSyncStatus { @@ -120,7 +121,8 @@ export class Dashboard extends React.Component { }, lastSystemTick: Date.now(), lastConnectionTick: Date.now(), - fetchedServices: false + fetchedServices: false, + showAllEvents: false } this.setWatchObserver = this.setWatchObserver.bind(this) this.init() @@ -375,6 +377,7 @@ export class Dashboard extends React.Component { processQueuedEvents(cursor: number) { const filtered: Event[] = [] const staging: Event[] = [] + const ignored: Event[] = [] const stagingAggregateCompletedVolumes = { ...this.state.aggregateCompletedVolumes } const stagingAggregateAllVolumes = { ...this.state.aggregateAllVolumes } @@ -407,7 +410,14 @@ export class Dashboard extends React.Component { if (eventsErrored.includes(event.event_type)) { updateStagingGraphNode(stagingTransactionVolumesByHour, event, 0) } - staging.push(event) + + // this line here actually lines up the event to be shown -- if the configuration option is not set to verbose it could only do this for successful events + // once we've processed the event we should make sure it doesn't go into the "filtered" list as it shouldn't be picked back up + if (this.state.showAllEvents || eventsActiveSuccess.includes(event.event_type)) { + staging.push(event) + } else { + ignored.push(event) + } } else { filtered.push(event) } @@ -416,7 +426,7 @@ export class Dashboard extends React.Component { } }) - if (staging.length) { + if (staging.length || ignored.length) { this.setState({ queuedEvents: filtered, activeEvents: [ @@ -441,15 +451,21 @@ export class Dashboard extends React.Component { resizeObserver.observe(element) } + setDisplayOptionEventTicker(e: React.FormEvent) { + this.setState({ + showAllEvents: e.currentTarget.value === "true" + }) + } + render() { const headerStatusColourMap: { [key in ConnectionStatus]?: string } = { [ConnectionStatus.CONNECTED]: '#1d70b8', [ConnectionStatus.DISCONNECTED]: '#b1b4b6', [ConnectionStatus.FAILED]: '#d4351c' } + return (
-
@@ -484,7 +500,7 @@ export class Dashboard extends React.Component { {/* @TODO(sfount) bottom shadow (without factoring in column padding) is needed for parity */} {/* Non-zero min-height to maintain width without content (a loading or syncing icon should be used) */}
- +
{ />
-
+
{ />
+
+
+
+ + + Display options + + +
+
+
+ +

+ Live payment events feed +

+ +
+
+ + +
+ Show a card in the events feed when a payment has been successfully processed. +
+
+
+ + +
+ Show cards for all payments events including when payments are created, when card details are provided and when a payment has been successfully processed. +
+ +
+
+
+
+
+
+
+
) } diff --git a/browser/src/dashboard/EventCard.tsx b/browser/src/dashboard/EventCard.tsx index 5166a7313..f4175715c 100644 --- a/browser/src/dashboard/EventCard.tsx +++ b/browser/src/dashboard/EventCard.tsx @@ -71,18 +71,21 @@ const profileMap: { [key: string]: CardProfile } = { } interface EventCardProps { - event: Event + event: Event, + showAllEvents: boolean } export class EventCard extends React.Component { render() { - const profile = profileMap[this.props.event.event_type] || DefaultProfile + const profile = this.props.showAllEvents ? (profileMap[this.props.event.event_type] || DefaultProfile) : DefaultProfile const paymentTypeIcon = paymentTypeMap[this.props.event.card_brand] || UnknownIcon const paymentProviderIcon = providerLogoMap[this.props.event.payment_provider] let statusIcon: string - if (this.props.event.event_type === 'PAYMENT_DETAILS_ENTERED') { + if (!this.props.showAllEvents) { + statusIcon = paymentTypeIcon + } else if (this.props.event.event_type === 'PAYMENT_DETAILS_ENTERED') { statusIcon = paymentTypeIcon } else if (eventsActiveSuccess.includes(this.props.event.event_type)) { statusIcon = StatusSuccessIcon diff --git a/browser/src/dashboard/EventListPanel.tsx b/browser/src/dashboard/EventListPanel.tsx index bdf5809d6..fc5830672 100644 --- a/browser/src/dashboard/EventListPanel.tsx +++ b/browser/src/dashboard/EventListPanel.tsx @@ -10,7 +10,8 @@ interface EventListPanelProps { numberOfAggregateSyncs: number, events: Event[], fetchedServices: boolean, - isFetching: boolean + isFetching: boolean, + showAllEvents: boolean } function LoadingCard(props: any): JSX.Element { @@ -23,7 +24,7 @@ function LoadingCard(props: any): JSX.Element { export class EventListPanel extends React.Component { render() { let syncStatus - const events = this.props.events.map((event, index) => ) + const events = this.props.events.map((event, index) => ) if(this.props.sync && this.props.sync.pending && this.props.numberOfAggregateSyncs <= 1) { syncStatus = Sync diff --git a/browser/src/dashboard/events.ts b/browser/src/dashboard/events.ts index 8829cad64..93f1520b2 100644 --- a/browser/src/dashboard/events.ts +++ b/browser/src/dashboard/events.ts @@ -7,6 +7,13 @@ const eventsSuccess = [ // only include the first salient successful event - this will mitigate background processes capturing old payments from // impacting optimistic numbers + +// notes: ideally user approved for capture await service approval would show up on the events feed and "service approved for capture" would change the stats +// there's an existing behaviour + +// (note notes) if we've increased the aggregate amounts for the "awaiting service approval" event we _shouldn't_ then update it for the service approved for capture, if we haven't then we should but shouldn't show it(?) + +// this should probably be done as a separate PR, we have similar mechanisms to avoid double counting it can just updated for this scenario export const eventsActiveSuccess = [ 'USER_APPROVED_FOR_CAPTURE_AWAITING_SERVICE_APPROVAL', 'USER_APPROVED_FOR_CAPTURE',