Insights Logs

Browse logs of messages that passed through flows.

Insights Logs

Configuration

Set up a new instance with config parameters and set/get methods:

const insightsLogs = appmixer.ui.InsightsLogs(config)

insightsLogs.set(key, value)
insightsLogs.get(key)

config.el ...

Learn about widget config here.

config.flowId

ID of a flow to filter the logs by.

config.options.showHistogram

Hides the histogram section of the UI when set to false.

// Initialize with histogram hidden
const insightsLogs = appmixer.ui.InsightsLogs({
  options: { showHistogram: false }
});

// Later: show histogram dynamically
insightsLogs.set('options', {
  ...insightsLogs.get('options'), // keep other options unchanged
  showHistogram: true
});

Instance

Learn about widget instance here.

State

insightsLogs.state(name, value)

loader

Type: Boolean | Default: null

Toggle a custom loading state.

error

Type: String | Default: null

Toggle a custom error message. filterLayout

Type: String | Default: 'expanded'

Controls whether the left filter panel is shown. Options: 'collapsed' or 'expanded'. Example: Set the initial state and toggle it programmatically at runtime.

const insightsLogs = appmixer.ui.InsightsLogs({
    state: { filterLayout: 'collapsed' }
});

insightsLogs.state('filterLayout', 'expanded');

query

Type: Object | Default: {}

The current query of the widget. Changing it reloads both the histogram data and the logs table. Example: Retrieving the current query from the widget's state.

Basic Usage

Set an initial query in the widget's state:

// Initial query: last 30 days
const insightsLogs = appmixer.ui.InsightsLogs({
  state: {
    query: {
      query: {
        range: {
          from: {
            endOf: null,
            startOf: 'day',
            subtract: [30, 'day']
          }
        }
      }
    }
  }
});

Reading and Updating the Query with Nested Filters

When modifying the query, always merge it with the current query object.

// Get the current query
const currentQuery = insightsLogs.state('query');

// Merge in new filter values
insightsLogs.state('query', {
  ...currentQuery,             // keep existing top-level query state
  query: {
    ...currentQuery.query,     // keep existing nested filters
    targets: {
      // Keys are Flow IDs
      // Values are optional arrays of component IDs
      // (empty array = all components in that flow)
      '8a47ab76-b90c...': ['component-1', 'component-2'],
      'f0e1d2c3-b90c...': []   // no component filter
    }
  }
});

Tracking Query Changes

Listen for changes triggered by UI interactions:

insightsLogs.on('change:query', queryAfterUserInput => {
  console.log(queryAfterUserInput);
});

Working with Nested Query Keys

You can directly read or set nested query properties using a /-separated path.

const currentFlowType = widget.state('query/flowType');

// flowType filter
widget.state('query/flowType', 'automation');      // single value
widget.state('query/flowType', [
  'integration-test',
  'integration-instance',
  'automation'
]);                                                 // multiple values

// userId filter
widget.state('query/userId', 'A');                  // single value
widget.state('query/userId', ['A', 'B']);           // multiple values

Example

const insightsLogs = appmixer.ui.InsightsLogs({
    el: '#insights-logs'
})

insightsLogs.open()