Splunk UI

https://splunkui.splunk.com
Admin
The Splunk UI Design System provides reusable components, design tokens, icons, and blueprints for...
Tokens:869,657
Snippets:6,870
Trust Score:10
Update:2 days ago
Show doc for...
Tokens:
Raw
### Run setup script for dashboard-framework

Source: https://splunkui.splunk.com/Packages/visualizations/HowtoContribute

Runs the setup script from within the dashboard-framework folder to install dependencies and prepare the environment.

```bash
yarn setup
```

--------------------------------

### Install dependencies and start dev server

Source: https://splunkui.splunk.com/Packages/create/StandaloneApp

After scaffolding, install dependencies with yarn and start the Vite development server. The app will be available at http://localhost:5173/ with hot-reload.

```bash
$ yarn install
$ yarn dev
```

--------------------------------

### Basic Dashboard Component Setup

Source: https://splunkui.splunk.com/Packages/dashboard-docs/Quickstart

Example of a basic dashboard component using @splunk/dashboard and related packages. It defines an initial dashboard definition with data sources, visualizations, and layout, and sets up toolbar and action menus for view and edit modes.

```jsx
import React, { useCallback, useState, useMemo } from 'react';
import { Dashboard } from '@splunk/dashboard';
import {
    DashboardContextProvider,
    IconRegistry,
    LocalIconProvider,
} from '@splunk/dashboard-context';
import { StandardIconProvider } from '@splunk/dashboard-ui';
// item groups
import {
    VisualizationGroup,
    ControlGroup,
    HistoryGroup,
    ModeSwitch,
} from '@splunk/dashboard-toolbar';
import {
    CloneButton,
    DeleteButton,
    LayerButton,
    MoveButton,
} from '@splunk/dashboard-action-buttons';
import EnterprisePreset from '@splunk/dashboard-presets/EnterprisePreset';
 
const initialDefinition = {
    dataSources: {
        search1: {
            options: {
                data: {
                    columns: [
                        ['1', '2', '3', '4', '5', '6', '7', '8'],
                        ['1', '2', '3', '4', '5', '6', '7', '8'],
                    ],
                    fields: [
                        {
                            name: 'foo',
                        },
                        {
                            name: 'bar',
                        },
                    ],
                },
                meta: {},
            },
            type: 'ds.test',
        },
    },
    visualizations: {
        table: {
            title: 'Table',
            type: 'splunk.table',
            options: {},
            dataSources: {
                primary: 'search1',
            },
        },
        bar: {
            title: 'Bar Chart',
            type: 'splunk.bar',
            options: {},
            dataSources: {
                primary: 'search1',
            },
        },
    },
    layout: {
        tabs: {
            items: [{ layoutId: 'layout_1', label: 'New tab' }],
        },
        layoutDefinitions: {
            layout_1: {
                type: 'absolute',
                options: {
                    display: 'auto',
                },
                structure: [
                    {
                        item: 'bar',
                        position: {
                            x: 0,
                            y: 0,
                            w: 1200,
                            h: 400,
                        },
                    },
                    {
                        item: 'table',
                        position: {
                            x: 0,
                            y: 400,
                            w: 1200,
                            h: 400,
                        },
                    },
                ],
            },
        },
    },
};
 
const featureFlags = {
    trackActiveTabInUrl: false,
};
 
const Basic = () => {
    const [mode, setMode] = useState('view');
 
    const handleModeChange = useCallback((newMode) => {
        setMode(newMode);
    }, []);
 
    const handleDefinitionChange = useCallback((definition) => {
        // new dashboard definition
    }, []);
 
    const iconRegistry = useMemo(() => {
        const ir = IconRegistry.create();
        ir.addDefaultProvider(new LocalIconProvider());
        ir.addProvider(new StandardIconProvider());
        return ir;
    }, []);
 
    const toolbarMenus = useMemo(
        () => ({
            view: [
                <ControlGroup key="control" />,
                <ModeSwitch key="mode" align="right" />,
            ],
            edit: [
                <HistoryGroup key="history" />,
                <VisualizationGroup key="visualization" />,
                <ModeSwitch key="mode" align="right" />,
            ],
        }),
        []
    );
 
    const actionMenus = useMemo(
        () => ({
            view: [],
            edit: [
                <MoveButton key="move" />,
                <LayerButton key="layer" />,
                <CloneButton key="clone" />,
                <DeleteButton key="delete" />,
            ],
        }),
        []
    );
 
    return (
        <DashboardContextProvider
            featureFlags={featureFlags}
            iconRegistry={iconRegistry}
            preset={EnterprisePreset}
            initialMode={mode}
            onModeChange={handleModeChange}
            onDefinitionChange={handleDefinitionChange}
            initialDefinition={initialDefinition}
        >
            <Dashboard
                width="100%"
                height={400}
                toolbarItems={toolbarMenus[mode]}
                actionMenus={actionMenus[mode]}
            />
        </DashboardContextProvider>
    );
};
 
export default Basic;
```

--------------------------------

### Install @splunk/react-search with npm

Source: https://splunkui.splunk.com/Packages/react-search/Overview

Install the package using npm. This is the standard installation method.

```javascript
npm install @splunk/react-search
```

--------------------------------

### Install with yarn add @splunk/dashboard-studio-extension

Source: https://splunkui.splunk.com/Packages/dashboard-studio-extension/Overview

Install the package using yarn. This is the base installation command.

```bash
yarn add @splunk/dashboard-studio-extension
```

--------------------------------

### createURL examples for app paths

Source: https://splunkui.splunk.com/Packages/splunk-utils/URL

Demonstrates createURL with various path formats and query parameters, showing the generated URLs with root path and locale.

```javascript
createURL('app/search/job'); // "/splunk/en-US/app/search/job"
createURL('/app/search/job'); // "/splunk/en-US/app/search/job"
createURL('app/search/job', {id:3, user:'me' }); // "/splunk/en-US/app/search/job?id=3&user=me"
```

--------------------------------

### Run local React demo

Source: https://splunkui.splunk.com/Packages/create/Overview

Starts a local development environment for the React page. Navigate to http://localhost:8080/ to see the page. Page files are in packages/my-page/src and changes update in the demo.

```bash
# navigate to the page directory
$ cd packages/my-page
 
# start the local development demo
$ yarn run start:demo
```

--------------------------------

### keywordLocations return value example

Source: https://splunkui.splunk.com/Packages/ui-utils/Filter

Example of the array of location objects returned by keywordLocations, with start and end indices for matched text ranges.

```javascript
[
    {
        start: 0,
        end: 8,
    },
    {
        start: 12,
        end: 17,
    },
]
```

--------------------------------

### Run documentation locally with yarn docs:start

Source: https://splunkui.splunk.com/Packages/visualizations/HowtoContribute

Command to run from the visualizations folder to compile and open the documentation locally.

```bash
yarn docs:start
```

--------------------------------

### ColumnLayout alignItems example with stretch, start, end, center

Source: https://splunkui.splunk.com/Packages/react-ui/ColumnLayout

This example shows how to use the alignItems property on ColumnLayout.Row to control vertical alignment of columns. It includes four rows with values 'stretch', 'start', 'end', and 'center'. The columns use a custom border style from the Splunk theme.

```jsx
import React from 'react';
 
import ColumnLayout from '@splunk/react-ui/ColumnLayout';
import { useSplunkTheme } from '@splunk/themes';
 
function AlignItems() {
    const { syntaxBlue } = useSplunkTheme();
    const colStyle = { border: `1px solid ${syntaxBlue}`, padding: 10 };
 
    return (
        <ColumnLayout>
            <ColumnLayout.Row alignItems="stretch">
                <ColumnLayout.Column span={4} style={colStyle}>
                    A short column can stretch to fill the space.
                </ColumnLayout.Column>
                <ColumnLayout.Column span={4} style={colStyle}>
                    A tall
                    <br />
                    column defines
                    <br />
                    the height
                    <br />
                    of the row.
                </ColumnLayout.Column>
                <ColumnLayout.Column span={4} style={colStyle}>
                    Another
                    <br />
                    column.
                </ColumnLayout.Column>
            </ColumnLayout.Row>
            <ColumnLayout.Row alignItems="start">
                <ColumnLayout.Column span={4} style={colStyle}>
                    A short column can align to the start (top) of the row.
                </ColumnLayout.Column>
                <ColumnLayout.Column span={4} style={colStyle}>
                    A tall
                    <br />
                    column defines
                    <br />
                    the height
                    <br />
                    of the row.
                </ColumnLayout.Column>
                <ColumnLayout.Column span={4} style={colStyle}>
                    Another
                    <br />
                    column.
                </ColumnLayout.Column>
            </ColumnLayout.Row>
            <ColumnLayout.Row alignItems="end">
                <ColumnLayout.Column span={4} style={colStyle}>
                    A short column can align to the end (bottom) of the row.
                </ColumnLayout.Column>
                <ColumnLayout.Column span={4} style={colStyle}>
                    A tall
                    <br />
                    column defines
                    <br />
                    the height
                    <br />
                    of the row.
                </ColumnLayout.Column>
                <ColumnLayout.Column span={4} style={colStyle}>
                    Another
                    <br />
                    column.
                </ColumnLayout.Column>
            </ColumnLayout.Row>
            <ColumnLayout.Row alignItems="center">
                <ColumnLayout.Column span={4} style={colStyle}>
                    A short column can align to the center (middle) of the row.
                </ColumnLayout.Column>
                <ColumnLayout.Column span={4} style={colStyle}>
                    A tall
                    <br />
                    column defines
                    <br />
                    the height
                    <br />
                    of the row.
                </ColumnLayout.Column>
                <ColumnLayout.Column span={4} style={colStyle}>
                    Another
                    <br />
                    column.
                </ColumnLayout.Column>
            </ColumnLayout.Row>
        </ColumnLayout>
    );
}
 
export default AlignItems;
```

--------------------------------

### Menu.Item matchRanges example

Source: https://splunkui.splunk.com/Packages/react-ui/Menu

Renders a Menu with items that highlight character ranges using the `matchRanges` prop. Each item specifies an array of ranges with start and end indices to highlight.

```jsx
import React from 'react';
 
import Menu from '@splunk/react-ui/Menu';
 
function MatchRanges() {
    return (
        <Menu style={{ width: 300 }}>
            <Menu.Item matchRanges={[{ start: 5, end: 10 }]}>Line Chart</Menu.Item>
            <Menu.Item matchRanges={[{ start: 5, end: 10 }]}>Area Chart</Menu.Item>
            <Menu.Item
                matchRanges={[
                    { start: 2, end: 5 },
                    { start: 7, end: 12 },
                ]}
            >
                Column Chart
            </Menu.Item>
            <Menu.Item matchRanges={[{ start: 4, end: 9 }]}>Bar Chart</Menu.Item>
            <Menu.Item matchRanges={[{ start: 4, end: 9 }]}>Pie Chart</Menu.Item>
            <Menu.Item matchRanges={[{ start: 8, end: 13 }]}>Scatter Chart</Menu.Item>
            <Menu.Item matchRanges={[{ start: 7, end: 12 }]}>Bubble Chart</Menu.Item>
        </Menu>
    );
}
 
export default MatchRanges;
```

--------------------------------

### Basic Drawer Example

Source: https://splunkui.splunk.com/Packages/react-ui/Drawer?section=examples

Shows how to render a Drawer with a header and body, controlled by open state and a toggle button. The returnFocus prop returns focus to the toggle button when closed.

```jsx
import React, { useRef, useState } from 'react';
 
import Button from '@splunk/react-ui/Button';
import Drawer from '@splunk/react-ui/Drawer';
 
function Basic() {
    const [open, setOpen] = useState(false);
    const drawerToggle = useRef(null);
 
    const handleRequestOpen = () => {
        setOpen(true);
    };
 
    const handleRequestClose = () => {
        setOpen(false);
    };
 
    return (
        <>
            <Button onClick={handleRequestOpen} elementRef={drawerToggle} label="Click me" />
            <Drawer returnFocus={drawerToggle} onRequestClose={handleRequestClose} open={open}>
                <Drawer.Header title="Basic Drawer" />
                <Drawer.Body>
                    Drawers are great for supplemental content, like forms or additional
                    information.
                </Drawer.Body>
            </Drawer>
        </>
    );
}
 
export default Basic;
```

--------------------------------

### React example using DashboardContextProvider with timezone

Source: https://splunkui.splunk.com/Packages/dashboard-docs/DashboardContext

Shows how to pass a timezone to `DashboardContextProvider` in a React component. Optionally imports `serverTimezoneInfo` from `@splunk/splunk-utils/config` to get the serialized timezone for Splunk Enterprise.

```jsx
import React from 'react';
import { DashboardCore } from '@splunk/dashboard-core';
import { DashboardContextProvider } from '@splunk/dashboard-context';
// Optionally get timezone info for Splunk Enterprise via window.$C.SERVER_ZONEINFO
import { serverTimezoneInfo } from '@splunk/splunk-utils/config';
 
// serverTimezoneInfo is a serialized timezone that @splunk/moment can consume
const timezone = { serializedTimezone: serverTimezoneInfo };
 
export const MyApp = () => {
    return (
        <DashboardContextProvider timezone={timezone}>
            <DashboardCore />
        </DashboardContextProvider>
    );
};
```

--------------------------------

### Customized icons with start and end adornments

Source: https://splunkui.splunk.com/Packages/react-ui/Text?section=examples

Demonstrates customizing the Text control with startAdornment and endAdornment props. Includes examples with a dollar sign, a portrait icon, and a set of action buttons with icons.

```jsx
import React from 'react';
 
import styled from 'styled-components';
 
import LinesThree from '@splunk/react-icons/LinesThree';
import Magnifier from '@splunk/react-icons/Magnifier';
import PaperFolded from '@splunk/react-icons/PaperFolded';
import Portrait from '@splunk/react-icons/Portrait';
import Button from '@splunk/react-ui/Button';
import Text from '@splunk/react-ui/Text';
 
const StyledButton = styled(Button)`
    min-width: 24px;
    min-height: 24px;
    margin: 4px;
`;
 
const CustomizedIcon = () => (
    <>
        <Text defaultValue="" inline startAdornment={<div>$</div>} endAdornment={<div>.00</div>} />
        <br />
        <br />
        <Text
            defaultValue=""
            startAdornment={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Portrait variant="filled" />
                </div>
            }
            inline
        />
 
        <br />
        <br />
        <Text
            defaultValue=""
            endAdornment={
                <>
                    <StyledButton appearance="secondary" icon={<Magnifier />} />
                    <span>|</span>
                    <StyledButton appearance="secondary" icon={<PaperFolded />} />
                </>
            }
            inline
            startAdornment={<StyledButton appearance="secondary" icon={<LinesThree />} />}
        />
    </>
);
 
export default CustomizedIcon;
```

--------------------------------

### Example folder/file structure for a visualization component

Source: https://splunkui.splunk.com/Packages/visualizations/HowtoContribute

Example structure for a visualization component after following the previous steps, located in packages/visualizations/src/.

```javascript
Histogram
|____PureHistogram
| |____PureHistogram.tsx
| |____PureHistogram.test.tsx
| |____PureHistogram.stories.tsx
| |____HistogramBin.tsx
| |____HistogramAxis.tsx
|____docs
| |____examples
| | |____Categorical.tsx
| | |____BackgroundColor.tsx
| | |____Basic.tsx
| | |____BarColor.tsx
| |____index.tsx
|____config.ts
|____Histogram.tsx
|____Histogram.stories.tsx
|____Histogram.test.tsx
|____package.json
```

--------------------------------

### Add a page with @splunk/create

Source: https://splunkui.splunk.com/Packages/create/DevTools

Run @splunk/create to add a new page to your Splunk app. Follow the prompts to name the page and select 'Add a Basic Page'. Then install dependencies, restart Splunk, and start the demo.

```bash
# navigate to project root
$ cd /my-project
 
# run @splunk/create
$ npx @splunk/create
 
# follow prompts
#? What do you want to name your new page?: MySecondPage
#? What type of page would you like to create?: Add a Basic Page
 
# install the new pages package dependencies
$ yarn && yarn build
 
# restart Splunk to see new page in Splunk instance
$ splunk restart
 
# start Splunk demo
$ yarn start
```

--------------------------------

### createAppDocsURL example

Source: https://splunkui.splunk.com/Packages/splunk-utils/URL

Shows createAppDocsURL generating a help URL with app name and version prefix.

```javascript
createAppDocsURL('learnmore.timerange.picker', { appName: 'splunk_app_aws', appVersion: '5.0.3'}); // "/en-US/help?location=learnmore.timerange.picker"
```

--------------------------------

### Clone and run dashboard-enterprise

Source: https://splunkui.splunk.com/Packages/visualizations/HowtoContribute

Commands to clone the dashboard-enterprise repo, switch to Node 18, run setup, start Docker, and launch the dev server. After running, navigate to http://localhost:8000 and log in with admin:changeme.

```bash
git clone git@cd.splunkdev.com:devplat/dashboard-enterprise.git
 
nvm use node 18 # Install node 18 if not already installed
 
yarn setup
 
yarn docker:up:studio
 
yarn dev
 
Navigate to http://localhost:8000 and log in with credentials admin:changeme
```

--------------------------------

### Install @splunk/react-search with yarn

Source: https://splunkui.splunk.com/Packages/react-search/Overview

Alternative installation method using yarn.

```javascript
yarn add @splunk/react-search
```

--------------------------------

### Retrieve DashboardCore API reference with dashboardCoreApiRef

Source: https://splunkui.splunk.com/Packages/dashboard-docs/DashboardCoreAPI

Use the dashboardCoreApiRef prop to get a reference to the API for a mounted DashboardCore component. The example stores the API in a React ref via a callback. Wrap DashboardCore in DashboardContextProvider.

```tsx
import * as React from 'react';
import { DashboardCore } from '@splunk/dashboard-core';
import { DashboardContextProvider } from '@splunk/dashboard-context';
import type { DashboardCoreApi } from '@splunk/dashboard-types';
 
export default function MyDashboard() {
    const dashboardCoreApi = React.useRef<DashboardCoreApi>();
    const setDashboardCoreApi = React.useCallback((api: DashboardCoreApi) => {
        dashboardCoreApi.current = api;
    }, []);
    
    return (
        <DashboardContextProvider>
            <DashboardCore dashboardCoreApiRef={setDashboardCoreApi} />
        </DashboardContextProvider>
    );
}
```

--------------------------------

### Start local preview server with yarn preview

Source: https://splunkui.splunk.com/Packages/create/DashboardStudioExtension

Run this command to start the local preview server (Storybook) at http://localhost:6006. The preview renders your visualization inside a sandboxed iframe with a mock DashboardExtensionAPI that behaves like the real one in Dashboard Studio.

```bash
$ yarn preview
```

--------------------------------

### Install with npm

Source: https://splunkui.splunk.com/Packages/react-field-summary/Overview

Install the @splunk/react-field-summary package using npm.

```javascript
npm install @splunk/react-field-summary
```

--------------------------------

### Single File Example

Source: https://splunkui.splunk.com/Packages/react-ui/File?section=examples

Selecting a new file replaces the existing file. Uses FileReader to read the file as a data URL and aborts any in-progress read before starting a new one. The filename is stored in state and displayed via File.Item.

```jsx
import React, { Component } from 'react';
 
import File from '@splunk/react-ui/File';
 
class Single extends Component {
    constructor(props) {
        super(props);
 
        this.state = {};
 
        this.fileReader = new FileReader();
    }
 
    handleAddFiles = (files) => {
        if (files.length > 0) {
            const file = files[0];
 
            if (this.fileReader.readyState === 1) {
                this.fileReader.abort();
            }
 
            this.fileReader.onload = () => {
                // can access this.fileReader.result
                this.setState({ filename: file.name });
            };
 
            this.fileReader.readAsDataURL(file);
        }
    };
 
    handleRemoveFile = () => {
        if (this.fileReader.readyState === 1) {
            this.fileReader.abort();
        }
 
        this.setState({ filename: undefined });
    };
 
    render() {
        return (
            <div style={{ maxWidth: 300 }}>
                <File onRequestAdd={this.handleAddFiles} onRequestRemove={this.handleRemoveFile}>
                    {this.state.filename && <File.Item name={this.state.filename} />}
                </File>
            </div>
        );
    }
}
 
export default Single;
```

--------------------------------

### Basic Example with SplunkThemeProvider

Source: https://splunkui.splunk.com/Packages/themes/SplunkThemeProvider

Shows how to wrap components with SplunkThemeProvider to apply different themes. Typically added once at the root, but can be nested for variations.

```jsx
import React from 'react';
 
import Button from '@splunk/react-ui/Button';
import SplunkThemeProvider from '@splunk/themes/SplunkThemeProvider';
 
function Themed() {
    return (
        <div>
            <SplunkThemeProvider family="prisma" colorScheme="dark" density="comfortable">
                <Button appearance="primary" label="A Prisma Dark Button" />
            </SplunkThemeProvider>
            <SplunkThemeProvider family="enterprise" colorScheme="light" density="comfortable">
                <Button appearance="primary" label="An Enterprise Light Button" />
            </SplunkThemeProvider>
        </div>
    );
}
 
export default Themed;
```

--------------------------------

### Basic Switch Example

Source: https://splunkui.splunk.com/Packages/react-ui/Switch?section=examples

Shows how to create a basic Switch component with the 'toggle' appearance, using useState to manage the selected state. Two switches are rendered for 'Enable bluetooth' and 'Enable wifi'.

```jsx
import React, { useState } from 'react';
 
import Switch from '@splunk/react-ui/Switch';
 
const Basic = () => {
    const [enableBluetooth, setEnableBluetooth] = useState(true);
    const [enableWifi, setEnableWifi] = useState(false);
 
    return (
        <>
            <Switch
                appearance="toggle"
                selected={enableBluetooth}
                onClick={() => setEnableBluetooth(!enableBluetooth)}
            >
                Enable bluetooth
            </Switch>
            <Switch
                appearance="toggle"
                selected={enableWifi}
                onClick={() => setEnableWifi(!enableWifi)}
            >
                Enable wifi
            </Switch>
        </>
    );
};
 
export default Basic;
```

--------------------------------

### Interactive Card Layout Example

Source: https://splunkui.splunk.com/Packages/react-ui/CardLayout

This example demonstrates the default CardLayout behavior, which scales cards equally and wraps them. It includes controls for number of cards, gutter size, alignment, min/max width, wrapping, and width-only mode. Best practice: pass a minWidth style to each Card to prevent overly narrow width when resizing; maxWidth can be used to prevent cards from getting too wide. The minWidth is initially set to 200.

```jsx
import React, { Component } from 'react';
 
import styled from 'styled-components';
 
import Card from '@splunk/react-ui/Card';
import CardLayout from '@splunk/react-ui/CardLayout';
import ControlGroup from '@splunk/react-ui/ControlGroup';
import Number from '@splunk/react-ui/Number';
import Select from '@splunk/react-ui/Select';
import Switch from '@splunk/react-ui/Switch';
import { variables } from '@splunk/themes';
 
const StyledWrapper = styled.div`
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    column-gap: ${variables.spacingXLarge};

    /* 5th child is the first checkbox, which we want to start on a new row */
    & > :nth-child(5) {
        grid-column: 1;
    }
`;
 
const StyledCardContent = styled.div`
    height: 200px;
    background: ${variables.neutral200};
`;
 
class Interactive extends Component {
    constructor(props) {
        super(props);
 
        this.state = {
            value: 5,
            minWidth: 200,
            maxWidth: 600,
            gutterSize: 10,
            wrapCards: true,
            alignCards: 'left',
            setAsWidth: false,
            hasMaxWidth: false,
        };
    }
 
    handleChangeAmount = (e, { value }) => {
        this.setState({ value });
    };
 
    handleChangeMinWidth = (e, { value }) => {
        this.setState({ minWidth: value });
        if (this.state.setAsWidth) {
            this.setState({ maxWidth: value });
        }
    };
 
    handleChangeMaxWidth = (e, { value }) => {
        this.setState({ maxWidth: value });
    };
 
    handleChangeGutter = (e, { value }) => {
        this.setState({ gutterSize: value });
    };
 
    handleChangeWrap = (e, { value }) => {
        this.setState({ wrapCards: !value });
    };
 
 
    handleChangeAlign = (e, { value }) => {
        this.setState({ alignCards: value });
    };
 
    handleSetAsWidth = (e, { value }) => {
        this.setState({ setAsWidth: !value });
    };
 
    handleHasMaxWidth = (e, { value }) => {
        this.setState({ hasMaxWidth: !value });
    };
 
    render() {
        const cards = [];
        for (let i = 0; i < (this.state.value ?? 0); i += 1) {
            cards.push(
                <Card key={i}>
                    <Card.Header title={`Card ${i + 1}`} />
                    <Card.Body>
                        <StyledCardContent />
                    </Card.Body>
                </Card>
            );
        }
        return (
            <article>
                <StyledWrapper>
                    <ControlGroup label="Number of cards">
                        <Number
                            value={this.state.value}
                            onChange={this.handleChangeAmount}
                            min={1}
                            max={100}
                        />
                    </ControlGroup>
                    <ControlGroup label="Gutter size">
                        <Number
                            value={this.state.gutterSize}
                            onChange={this.handleChangeGutter}
                            min={0}
                            max={50}
                            step={5}
                        />
                    </ControlGroup>
                    <ControlGroup label="Align cards">
                        <Select value={this.state.alignCards} onChange={this.handleChangeAlign}>
                            <Select.Option label="Left" value="left" />
                            <Select.Option label="Center" value="center" />
                            <Select.Option label="Right" value="right" />
                        </Select>
                    </ControlGroup>
                    <ControlGroup
                        label={
                            this.state.setAsWidth ||
                            (!this.state.setAsWidth && this.state.hasMaxWidth)
                                ? 'Card width'
                                : 'Card min width'
                        }
                    >
                        <Number
                            value={this.state.minWidth}
                            onChange={this.handleChangeMinWidth}
                            min={0}
                            max={1000}
                            step={10}
                        />
                    </ControlGroup>
                    <ControlGroup label="Wrap cards">
                        <Switch
                            value={this.state.wrapCards}
                            onChange={this.handleChangeWrap}
                        />
                    </ControlGroup>
                    <ControlGroup label="Width only">
                        <Switch
                            value={this.state.setAsWidth}
                            onChange={this.handleSetAsWidth}
                        />
                    </ControlGroup>
                    <ControlGroup label="Show max width">
                        <Switch
                            value={this.state.hasMaxWidth}
                            onChange={this.handleHasMaxWidth}
                        />
                    </ControlGroup>
                </StyledWrapper>
                <CardLayout
                    gutterSize={this.state.gutterSize}
                    wrapCards={this.state.wrapCards}
                    alignCards={this.state.alignCards}
                    minWidth={this.state.minWidth}
                    maxWidth={this.state.hasMaxWidth ? this.state.maxWidth : undefined}
                    setAsWidth={this.state.setAsWidth}
                >
                    {cards}
                </CardLayout>
            </article>
        );
    }
}

export default Interactive;
```

--------------------------------

### ColumnLayout with Columns and Spans

Source: https://splunkui.splunk.com/Packages/react-ui/ColumnLayout

Shows how to use ColumnLayout.Row and ColumnLayout.Column with the span property to vary column widths. The spans must add up to 12. The example uses useSplunkTheme to get a color for column borders and renders multiple rows with different span configurations.

```jsx
import React from 'react';
 
import ColumnLayout from '@splunk/react-ui/ColumnLayout';
import { useSplunkTheme } from '@splunk/themes';
 
function Basic() {
    const { syntaxBlue } = useSplunkTheme();
    const colStyle = {
        border: `1px solid ${syntaxBlue}`,
        padding: 10,
        minHeight: 80,
    };
 
    return (
        <ColumnLayout>
            <ColumnLayout.Row>
                <ColumnLayout.Column style={colStyle}>1</ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle}>2</ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle}>3</ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle}>4</ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle}>5</ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle}>6</ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle}>7</ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle}>8</ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle}>9</ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle}>10</ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle}>11</ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle}>12</ColumnLayout.Column>
            </ColumnLayout.Row>
            <ColumnLayout.Row>
                <ColumnLayout.Column style={colStyle} span={4}>
                    Span 4
                </ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle} span={8}>
                    Span 8
                </ColumnLayout.Column>
            </ColumnLayout.Row>
            <ColumnLayout.Row>
                <ColumnLayout.Column style={colStyle} span={2}>
                    Span 2
                </ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle} span={5}>
                    Span 5
                </ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle} span={5}>
                    Span 5
                </ColumnLayout.Column>
            </ColumnLayout.Row>
            <ColumnLayout.Row>
                <ColumnLayout.Column style={colStyle} span={6}>
                    Span 6
                </ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle} span={3}>
                    Span 3
                </ColumnLayout.Column>
                <ColumnLayout.Column style={colStyle} span={3}>
                    Span 3
                </ColumnLayout.Column>
            </ColumnLayout.Row>
        </ColumnLayout>
    );
}
 
export default Basic;
```

--------------------------------

### Install with npm

Source: https://splunkui.splunk.com/Packages/dashboard-docs/splunkdashboarddatasourcepanel

Use npm to install the package. This is typically for advanced customization or lower-level integration work.

```javascript
npm install @splunk/dashboard-datasource-panel
```

--------------------------------

### Configure drilldown.setTimeRange event handler

Source: https://splunkui.splunk.com/Packages/dashboard-docs/Settimerange

Example configuration for the drilldown.setTimeRange event handler. It sets the events array to ["range.select"] and specifies the token as "global_time". This will set the tokens $global_time.earliest$ and $global_time.latest$ to the starting and ending _time values of the selected chart region.

```json
"eventHandlers": [
    {
        "type": "drilldown.setTimeRange",
        "options": {
            "events": ["range.select"],
            "token": "global_time"
        }
    }
],
```

--------------------------------

### Glass components example with Card, Drawer, and Modal

Source: https://splunkui.splunk.com/DesignSystem/DesignLevers

Use this example to implement glass components in a React application. It imports Card, Drawer, Modal, and other components from @splunk/react-ui, and uses the material="glass" prop on Card, Drawer, and Modal. The example includes a Card with a header, body, and footer, a Modal for confirming deployment, and a Drawer for viewing signal details.

```jsx
import React, { useCallback, useState } from 'react';
import styled from 'styled-components';
 
import Button from '@splunk/react-ui/Button';
import Card from '@splunk/react-ui/Card';
import Drawer from '@splunk/react-ui/Drawer';
import Layout from '@splunk/react-ui/Layout';
import Modal from '@splunk/react-ui/Modal';
import SpotLight from '@splunk/react-ui/SpotLight';
import { mixins, variables } from '@splunk/themes';
 
const Page = styled.div`
    ${mixins.reset('flex')};
    align-items: flex-start;
    background: ${variables.backgroundColorPage};
    justify-content: center;
    padding: ${variables.spacingXXXLarge};
    overflow: hidden;
    position: relative;
`;
 
const GlassComponents = () => {
    const [modalOpen, setModalOpen] = useState(false);
    const [drawerOpen, setDrawerOpen] = useState(false);
 
    const handleModalOpen = useCallback(() => setModalOpen(true), []);
    const handleModalClose = useCallback(() => setModalOpen(false), []);
    const handleDrawerOpen = useCallback(() => setDrawerOpen(true), []);
    const handleDrawerClose = useCallback(() => setDrawerOpen(false), []);
 
    return (
        <Page>
            <SpotLight variant="page-top" intensity='low' />
            <Card material="glass">
                <Card.Header title="Telemetry overview" />
                <Card.Body>
                    Review the latest signal data before confirming deployment.
                </Card.Body>
                <Card.Footer>
                    <Layout>
                        <Button label="View details" onClick={handleDrawerOpen} />
                        <Button appearance="primary" label="Deploy" onClick={handleModalOpen} />
                    </Layout>
                </Card.Footer>
            </Card>
            <Modal open={modalOpen} onRequestClose={handleModalClose} material="glass">
                <Modal.Header title="Confirm deployment" onRequestClose={handleModalClose} />
                <Modal.Body>
                    This action will push the current configuration to production.
                </Modal.Body>
                <Modal.Footer>
                    <Button appearance="secondary" label="Cancel" onClick={handleModalClose} />
                    <Button appearance="primary" label="Deploy" onClick={handleModalClose} />
                </Modal.Footer>
            </Modal>
            <Drawer open={drawerOpen} onRequestClose={handleDrawerClose} material="glass">
                <Drawer.Header title="Signal details" onRequestClose={handleDrawerClose} />
                <Drawer.Body>
                    Detailed telemetry and signal data for the current deployment window.
                </Drawer.Body>
                <Drawer.Footer>
                    <Button appearance="secondary" label="Close" onClick={handleDrawerClose} />
                </Drawer.Footer>
            </Drawer>
        </Page>
    );
};
 
export default GlassComponents;
```
Tokens:
Raw