Events Search Component

UI Component

Changed on:

3 June 2024

Overview

The Events Search is a plugin component for events:

filtering,
displaying,
exporting.

The component fetches events using the REST Event API based on the selected search criteria.

Plugin Name	OMS

Admin components for managing a Fluent Commerce account.

2023-08-15

v1.0.0

OMS UI. Does not require to download.

Alias

fc.events.search

Detailed technical description

Structure

The Events Search consists of the following sections:

Events Search Form

The Search Form contains:

Filter input fields;
SEARCH button;
EXPORT button;
CLEAR FILTERS button (hidden when no filters are applied).

Events Search Results

The list of events matching the filters criteria selected is presented in a table view.

Event Details Drawer

The drawer displays a detailed information about a specific event selected from the list of Events Search Results.

Note

For more details, check the Event Details Drawer Component.

Capabilities

Search events

The Events Search Form enables a user to search for events based on the following filters:

With a free text input:
- Root entity id;
- Root entity ref;
- Entity id;
- Entity ref;
- Event name.

With a dropdown input supporting multi-select:

Root entity type and Entity type:

`ORDER`

`FULFILMENT_CHOICE`

`FULFILMENT`

`ARTICLE`

`CONSIGNMENT`

`LOCATION`

`WAVE`

`FULFILMENT_OPTIONS`

`FULFILMENT_PLAN`

`PRODUCT_CATALOGUE`

`CATEGORY`

`PRODUCT`

`INVENTORY_CATALOGUE`

`INVENTORY_POSITION`

`INVENTORY_QUANTITY`

`VIRTUAL_CATALOGUE`

`VIRTUAL_POSITION`

`CONTROL_GROUP`

`RETURN_ORDER`

`RETURN_FULFILMENT`

`BILLING_ACCOUNT`

`CREDIT_MEMO`

`BATCH`

`WORKFLOW`

;

Event type:

`ORCHESTRATION`

`ORCHESTRATION_AUDIT`

`GENERAL`

`API`

`INTEGRATION`

`SECURITY`

;

Event status:
```
`PENDING`
```
,
```
`COMPLETE`
```
,
```
`FAILED`
```
,
```
`NO_MATCH`
```
;
Retailer: the list of Retailer Refs;

Category:

`BATCH`

`snapshot`

`ruleSet`

`rule`

`action`

`exception`

`error`

`ORDER WORKFLOW`

Date/time from and to with an input that is powered with the Date Range Field Component.

Warning

The Event Database applies the following limitations on the Date Range inputs for the Events Search Form:

from and to should be within twelve weeks into the past.
Time range (between from and to) cannot be longer than thirty days.

Pre-filtering

The Events Search Form is enabled to take inputs from the URL parameters in accordance with the following mapping:

Filter	URL parameter	Input format
*Root entity type*	`context.rootEntityType`	string[]
*Entity type*	`context.entityType`	string[]
*Event type*	`eventType`	string[]
*Root entity id*	`context.rootEntityId`	string
*Entity id*	`context.entityId`	string
*Event name*	`name`	string
*Root entity ref*	`context.rootEntityRef`	string
*Entity ref*	`context.entityRef`	string
*Event status*	`eventStatus`	string[]
*Retailer*	`retailerId`	string[]
*Category*	`category`	string[]
*Date/time from and to*	`from`	Date \| null Note: date converted to UTC Example: `from=2024-02-12T21%3A00%3A00.000Z`
	`to`	Date \| null Note: date converted to UTC Example: `to=2024-03-13T20%3A59%3A59.000Z`

Tip

Use the Events page URL link to quickly share your filtered Events Search Results to other users or support.
The link could be embedded to other UI Components, for example:

Total Failures card (powered with the Tile Metric Component) contains the link that redirects to the Events page pre-filtered to display Inventory-related

`FAILED`

and

`NO_MATCH`

events:

`"link": "events?eventStatus=FAILED&eventStatus=NO_MATCH&context.rootEntityType=INVENTORY_CATALOGUE&context.rootEntityType=VIRTUAL_CATALOGUE",`

Display search results

The Events Search Results are powered with the List Component.

The component displays information in the following columns by default:

Date
Displayed in the format that is based on the user's browser language.
For more details, check the
```
`dateFormatByLocale`
```
template described in the Template Strings section of the UX Configuration Common Concepts article.
Event
Event ID and Event Name values are displayed as a link opening the Event Details Drawer.
Status
Category
Entity type
Entity id
Entity ref
Retailer

Tip

Use the Events Search Configuration example below to customize the default columns setup by Overriding the default manifest.

Export events

Events export capability allows customers and partners to share event logs with support:

A JSON file containing an array of the events' bodies is generated on EXPORT button click.
The EXPORT button is disabled when the Events Search Results are empty.

Info

The following Export Scenarios are supported:

One or more selected events on the page;
All the search results displayed on the page when no events have been selected.

Properties

Name

Type

Required

Default

Description

width

`quarter`

`third`

`half`

`two-thirds`

`full`

`number (1-12)`

❌

`full`

Define the width of this component on a 12-column grid. The named widths (for readability) or numbers could be used.

On mobile devices, all widths will be changed automatically to 12 for the best responsive experience.

The default is "full", which will take up the entire width of the containing component.

list

❌

`fc.list`

Component properties are supported.

Configuration example

1{
2  "component": "fc.events.search",
3  "props": {
4    "width": "full",
5    "list": {
6      "responsiveness": "card",
7      "rowsPerPageOptions": [10, 25, 50, 100],
8      "actions": true,
9      "action": {},
10      "noRecordKey": "i18n:fc.events.searchEvents.noEventsFound",
11      "attributes": [
12        {
13          "label": "i18n:fc.events.searchEvents.label.date",
14          "template": "{{dateFormatByLocale node.generatedOn}}, {{dateFormat node.generatedOn 'HH:mm:ss.SSS'}}"
15        },
16        {
17          "label": "i18n:fc.events.searchEvents.label.event",
18          "type": "component",
19          "options": {
20            "component": "fc.drawer.button",
21            "props": {
22              "label": "{{node.id}} {{firstDefinedValue node.name node.source}}",
23              "color": "primary",
24              "title": "i18n:fc.event.detail.eventDetails",
25              "descendants": [
26                {
27                  "component": "fc.event.detail",
28                  "dataSource": "node"
29                }
30              ]
31            }
32          }
33        },
34        {
35          "label": "i18n:fc.events.searchEvents.label.status",
36          "template": "{{node.eventStatus}}"
37        },
38        {
39          "label": "i18n:fc.events.searchEvents.label.category",
40          "template": "{{node.category}}"
41        },
42        {
43          "label": "i18n:fc.events.searchEvents.label.entityType",
44          "template": "{{node.context.entityType}}"
45        },
46        {
47          "label": "i18n:fc.events.searchEvents.label.entityIdRef",
48          "template": "{{node.context.entityRef}}"
49        },
50        {
51          "label": "i18n:fc.events.searchEvents.label.retailer",
52          "template": "{{node.retailer}}"
53        }
54      ]
55    }
56  }
57}

Language: json

Version History

2024-06-03

v24.6.3

Additional filters added to the Search Form;
Dropdown inputs extended for the Search Form filters;
Dropdown with multi-select enabled for the Search Form filters;
Date Range input updated;
Events Search Results default columns configuration updated;
List Component supporting custom columns configuration used.

Recommended Placement

Insights module - Events page

Events Search Component

Overview

v1.0.0

Alias

Detailed technical description

Structure

Capabilities

Search events

Pre-filtering

Display search results

Export events

Properties

Configuration example

Version History

v24.6.3

Recommended Placement

Related content

UX Configuration - Common Concepts

Insights

Events

Building Blocks

By Type

Helpful Resources

Quick Links