@splunk/dashboard-context

Splunk DashboardContext

Defines a context object to pass context consumers. This context object contains the following:

• A pubsub event listener used for handling keyboard events (keyboardListener)
• A static map for feature flags
• Datasources' connection configuration (dataSourceContext),
• Registry providers for images, icons, and geojson (imageRegistry, iconRegistry, geoRegistry)
• Telemetry and logging providers (telemetryChannel).

Icon, Image, GeoJson Registries

The Icon, Image, and Geo Registries are used to provide an interface to upload, list, retrieve, and remove artifacts from one or more providers. DashboardContext provides a localStorage-based reference provider, but applications are expected to implement their own interface to their storage mechanism of choice. More information about Registries and Providers can be found in @splunk/visualization-context.

Example:

import IconRegistry from '@splunk/dashboard-context/IconRegistry';
import LocalIconProvider from '@splunk/dashboard-context/LocalIconProvider';

const iconRegistry = IconRegistry.create();
iconRegistry.addDefaultProvider(new LocalIconProvider());

DataSource Context

This defines the common data needed by your dataSource implementation(s) in order to make queries.

Telemetry Channel

This is an object that implements the telemetry interface in @splunk/dashboard-telemetry.

Install

npm install @splunk/dashboard-context

    --or--

yarn add @splunk/dashboard-context

Usage

import DashboardContext, { DashboardContextProvider } from '@splunk/dashboard-context';
import EventListener from 'react-event-listener';

const Parent = () => <Child />;

class Child extends Component {
    static contextType = DashboardContext;

    componentDidMount() {
        // Add or overwrite keymap configurations
        this.context.keyboardListener.updateKeyMap({ showRespect: ['f'] });
        // Subscribe to events
        this.myEventUnsub = this.context.keyboardListener.subscribe('myEvent', this.myEventHandler);
        this.respectUnsub = this.context.keyboardListener.subscribe('showRespect', this.myEventHandler);
    }

    componentWillUnmount() {
        // Unsubscribe from events
        this.myEventUnsub();
        this.showRespectUnsub();
    }

    // Handle an event
    myEventHandler = (...data) => {
        console.log(...data);
    };

    // Publish an event on button click. This could happen in any component that is a DashboardContext consumer.
    // EventListener will fire event for key presses. This will cause keyboardListener to fire 'showRespect' when 'f' is pressed.
    render() {
        return (
            <>
                <EventListener target="window" onKeyDown={this.context.keyboardListener.handleKeyDown} />
                <span>Hello {this.context.hello}</span>
                <button onClick={() => this.context.keyboardListener.publish('myEvent', 'click!')} />
                {this.context.featureFlags.myFeatureFlag && <span>Feature is on</span>}
            </>
        );
    }
}

const GrandParent = () => {
    <DashboardContextProvider
        dataSourceContext={dsContext}
        telemetryChannel={telemetryProvider}
        imageRegistry={imageRegistry}
        iconRegistry={iconRegistry}
        geoRegistry={iconRegistry}
        featureFlags={{ myFeatureFlag: false }}
    >
        <Parent />
    </DashboardContextProvider>;
};