Using the Logging data client

The LoggingDataClient is a service that offers a convenient way to retrieve historical data in UI Components. It provides a simplified interface compared to the historical data API and automatic updates.

You can create a client instance using the createLoggingDataClient() method on the component context.

const client = context.createLoggingDataClient();

To start listening for some logging data you can use the query() method to set up a listener. The example below sends a query for 500 data values from the selected metric within the set time range, using the selected aggregation function. Whenever the time range changes – for example because of auto-reload or because the user selected a different period – new results are fetched in the background and the listener will automatically get called again with the new metrics.

const client = context.createLoggingDataClient();

client.query({
  selector: context.inputs.metric.selector,
  postAggr: context.inputs.metric.aggregator,
  limit: 500
}, metrics => {
  console.log(metrics);
  // result: [LoggingDataMetric, LoggingDataMetric, ...]
});

{
  "main": "my-component.js",
  "version": "1",
  "sheetSettings": {
    "minHeight": 100
  },
  "inputs": [
    {
      "key": "metric",
      "label": "Metric",
      "type": "AggregatedMetric"
    }
  ]
}

The query listener will receive results as instances of the LoggingDataMetric class, which consist of a timestamp, a value and a query reference.

All possible combinations and restrictions from the historical data API apply. You can use e.g. step: 3600 to get data points exactly 1 hour apart, or extendedBoundary: true to get two additional data points just outside the time range for example for drawing a line all the way to the end of the time range.

If a different time range than the one that is selected for the page is needed, for example to zoom in on some detail, or to align the time range to some fixed boundaries, the from and to options are available. These should contain a date in ISO 8601 format. The following query will produce 24 (step size 3600 seconds; hourly) aggregated data points from the metric between midnight and midnight GMT. Note that both from and to are inclusive and include the full second they specify.

const queries = {
  selector: context.inputs.metric.selector,
  postAggr: context.inputs.metric.aggregator,
  step: 3600,
  from: '2021-02-03T00:00:00+00:00',
  to: '2021-02-03T23:59:59+00:00'
};