Events & Callbacks

Coming soon

The events and callbacks API is planned for a future SDK release. This page documents the intended API design. The current SDK renders data automatically without exposing lifecycle hooks.

Planned API

The SDK will dispatch custom DOM events that you can listen for to react to discovery results, handle errors, or trigger custom rendering.

lightpane:loaded

Fired when all service requests have completed and tables are rendered.

document.addEventListener('lightpane:loaded', function(event) {
    console.log('All services loaded', event.detail.services);
});

Event detail:

Field	Type	Description
services	array	List of service identifiers that were loaded
duration	number	Total time in milliseconds from first request to last response

lightpane:service-loaded

Fired when a single service request completes.

document.addEventListener('lightpane:service-loaded', function(event) {
    console.log(event.detail.service, 'returned', event.detail.rowCount, 'rows');
});

Event detail:

Field	Type	Description
service	string	Service identifier (e.g., ec2)
provider	string	Cloud provider
rowCount	number	Number of rows returned
data	array	Raw row data from the API

lightpane:error

Fired when a service request fails.

document.addEventListener('lightpane:error', function(event) {
    console.error('Discovery failed:', event.detail.service, event.detail.message);
});

Event detail:

Field	Type	Description
service	string	Service identifier that failed
message	string	Error message from the API
status	number	HTTP status code

lightpane:before-render

Fired before a service table is rendered, allowing you to transform the data.

document.addEventListener('lightpane:before-render', function(event) {
    // Filter to running instances only
    if (event.detail.service === 'ec2') {
        event.detail.data = event.detail.data.filter(
            row => row.state === 'running'
        );
    }
});

Planned callback configuration

As an alternative to events, callbacks can be set directly in serviceDiscoveryConfig:

var serviceDiscoveryConfig = {
    accessKey: 'csl_em_YOUR_KEY_HERE',
    onLoaded: function(results) {
        console.log('All done', results);
    },
    onError: function(service, error) {
        console.error(service, error);
    }
};

Current workaround

Until the events API is released, you can use a MutationObserver to detect when the SDK injects content into target divs:

var target = document.querySelector('[data-sd-service="ec2"]');
var observer = new MutationObserver(function(mutations) {
    console.log('EC2 table rendered');
    observer.disconnect();
});
observer.observe(target, { childList: true });