@splunk/dashboard-context v27.0.0

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)
• Logger for error, warning and info level events (logger)
• (userMessage) callback to execute application logic for user messaging

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.

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 userMessageHandler = ({ level, message, sender, stackTrace }) => {
    /*
     * Example parameters supplied by Dashboard Framework:
     *  {
     *      level: 'error',
     *      message: 'Example message to deliver to user.',
     *      sender: 'GridLayout.jsx', // optional param.
     *      stackTrace: 'Example stack trace' // optional param.
     *  }
     *
     */

    /* example application defined behavior*/
    notifyUser(level, message, sender, stackTrace);
};

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