Add inputs and tokens to glass tables in ITSI
Inputs in the IT Service Intelligence (ITSI) glass table editor let you add dropdown, multiselect, text, numbers and time range for input menus. Your users can then leverage these menus to perform actions on the canvas and on visualizations, such as filtering a query or changing a visualization property. You can implement inputs using the glass table UI editor, or the source editor.
If using the source editor, specify each input you plan to use under the globalInputs layout option in the glass table definition. Define each individual input in the inputs section.
You can configure some inputs to associate values with tokens. Tokens act as variables that change when you select an input option. You can also use tokens as variables in searches and inputs, or as titles and descriptions in the glass table definition. For more information, see Add tokens to create dynamic glass tables.
Input types
The following input types are available in ITSI glass tables:
| Setting | Description |
|---|---|
input.dropdown
|
Add dropdown menus to your glass table. Can be backed by static values or the results of a search. |
input.multiselect
|
Add dropdown menus where users can select one or more options. Can be backed by static values or the results of a search. |
input.text
|
Let users choose titles, descriptions, and other forms of text entries. |
input.number
|
Let users enter numbers and control number values using step controls. |
input.timerange
|
Add time range menus to your glass table. Can be used in the particular data source. |
Options
Each input type supports one or more of the following options:
| Setting | Description |
|---|---|
token
|
Assign tokens to values or options selected by a user or created by a search. |
defaultValue
|
Sets a default value if a user fails to make a selection. |
items
|
Adds label-value pairs to inputs like dropdown and multiselect menus. |
Add an input
- Click the inputs icon
to display the input options.
- Select one of the input options:
- Dropdown
- Multi-select
- Text
- Number
- Time range
- Configure the following input options in the Configuration panel:
Input Option Description Title Specify a title for the input. Token Name Tokens are values made up of key/value pairs. The key is the name of the token and the value is the variable associated with the token name. - Configure additional settings depending on the selected input option.
Input Description Dropdown See Add a dropdown menu. Multi-select See Add a multiselect dropdown menu. Text See Add a text input menu. Number See Add a number input menu. Time range See Add a time range input menu.
Configure inputs in the source editor
You can also add inputs using the source editor. Add each input in the inputs section of the glass table definition. You must also list each input you're using under globalInputs in the layout section.
You can optionally include the submitButton option to add a submit button for the inputs. When set to true, a user must click Submit for the selection to take effect. If set to false or a blank value, the glass table immediately refreshes when a user makes a selection.
In the following example, two inputs have been added in addition to the default time picker and refresh rate:
"layout": {
"type": "absolute",
"globalInputs": [
"input_global_trp",
"input_global_refresh_rate",
"input1",
"input2"
],
"options": {
"showTitleAndDescription": true,
"width": 900,
"height": 600,
"display": "auto-scale",
},
}
Add a dropdown menu
While ITSI glass tables have default dropdown menus for time range and refresh rate, you can also add additional dropdown menus to your glass table.
- Click the inputs icon
and select Dropdown.
- Specify the dropdown input items in the Static Menu Configuration panel:
Option Description Label Specify a name for each of the dropdown options that a user can select. The dropdown options are represented by the key/value pairs label and value. Value Specify the variable associated with the label. The associated value is the action performed on the visualization. - Configure the following options for the dropdown items in the Configuration panel or the source editor:
Option Description tokenSpecify a token for the values selected. These tokens call the value in the appropriate visualization component. defaultValueSpecify a defaultValue for the input using the source editor. For example, you might add a dropdown menu to change the color of the text or other areas of a visualization. If a user doesn't choose an option, the defaultValue is noneand no overlay is added.
In this example, a user can select a chart overlay option, or item, from a dropdown menu. The dropdown options are represented by the key/value pairs label and value. The label is what the user chooses from the menu and the value is the overlay performed on the visualization. If a user does not choose an option, the defaultValue is none, and no overlay is used. The token vizOverlay is used to pass the user's choice to the connected visualization.
"inputs": {
"input1": {
"type": "input.dropdown",
"options": {
"items": [
{
"label": "None",
"value": "none"
},
{
"label": "Heat Map",
"value": "heatmap"
},
{
"label": "High Low",
"value": "highlow"
}
],
"defaultValue": "none",
"token": "vizOverlay"
},
"title": "Dropdown Input"
},
Add a multiselect dropdown menu
The multiselect input lets your users select more than one option in a dropdown menu. For example, you might have a chart visualization and a dropdown menu containing the options Server 001, Server 002, and Server 003. After changing the dropdown selection to one or two of those values, the visualization only displays information about the selected servers.
- Click the inputs icon
and select Multiselect.
- Specify the dropdown input items in the Static Menu Configuration panel:
Option Description Label Specify a name for each of the multiselect options that a user can select. The multiselect options are represented by the key/value pairs label and value. Value Specify the variable associated with the label. The associated value is the action performed on the visualization. - Configure the following options for the dropdown items in the Configuration panel or the source editor:
Option Description tokenSpecify a token for the values selected. These tokens call the value in the appropriate visualization component. defaultValueSpecify a defaultValue using the source editor. The defaultValue specifies the options that are selected by default in the multiselect menu.
In the following example, a user can choose any or all of the options for a visualization's description. The values are then assigned to the token vizDesc which can be called in the description section of the glass table definition.
"inputs": {
"input1": {
"type": "input.multiselect",
"title": "Multiselect Input",
"options": {
"items": [
{
"label": "Super",
"value": "super"
},
{
"label": "Special",
"value": "special"
},
{
"label": "Dashboard",
"value": "dashboard"
}
],
"token": "vizDesc",
"defaultValue": "super,dashboard"
}
}
...
Search-based inputs
You can populate dropdown and multiselect inputs by either static content or the results of a search. In the following example, search1 is passed to input1 to determine what appears in the dropdown. The selection of the input informs a token called component. You can use that token in a viz option, another query parameter, or anywhere else you use tokens.
{
"dataSources": {
"search1": {
"type": "ds.search",
"options": {
"query": " index=_internal | stats count by sourcetype",
"queryParameters": {
"latest": "",
"earliest": "0"
}
}
}
},
"inputs": {
"input1": {
"type": "input.dropdown",
"options": {
"items": [
{
"label": "All",
"value": "*"
}
],
"token": "metricName",
"defaultValue": "*"
},
"encoding": {
"label": "primary[0]",
"value": "primary[0]"
},
"dataSources": {
"primary": "search1"
}
}
},
"layout": {
"type": "absolute",
"globalInputs": [
"input1"
]
},
"title": "Input",
"description": "",
"visualizations": {}
}
Add a text input menu
Use input.text to add input menus where your users can change titles, descriptions, and other forms of text entries within a glass table. For example, you might add a text input that optionally shows the earliest and latest time in a visualization's description so that it's obvious what the time range is if you take a screenshot.
- Click the inputs icon
and select Text.
- Configure the input options in the Configuration panel:
Option Description Title Specify a name for the title. Token Name Specify a token that passes a value within and between visualizations. Default Value This value automatically populates the field if you don't input text.
The following example uses both text and dropdown inputs. The text input lets a user change the title of the first area chart. while the dropdown input changes the colors of the axis values for the second area chart.
Expand this window to copy the dashboard definition.
{
"title": "Area Chart",
"description": "",
"defaults": {
"dataSources": {
"global": {
"options": {
"queryParameters": {
"earliest": "$global_time.earliest$",
"latest": "$global_time.latest$"
},
"refreshType": "delay",
"refresh": "$global_refresh_rate$"
}
}
}
},
"layout": {
"type": "absolute",
"options": {
"width": 1920,
"height": 1080,
"backgroundColor": "#FFFFFF",
"showTitleAndDescription": true
},
"globalInputs": [
"input_global_trp",
"input_global_refresh_rate",
"input1"
],
"structure": [
{
"item": "viz1",
"type": "block",
"position": {
"x": 0,
"y": 0,
"w": 300,
"h": 300
}
},
{
"item": "viz_Z6ARIYzI",
"type": "block",
"position": {
"x": 300,
"y": 0,
"w": 300,
"h": 300
}
},
{
"item": "viz_fXKHeymJ",
"type": "block",
"position": {
"x": 600,
"y": 0,
"w": 300,
"h": 300
}
}
]
},
"dataSources": {
"search1": {
"type": "ds.test",
"options": {
"data": {
"fields": [
{
"name": "foo"
},
{
"name": "bar"
}
],
"columns": [
[
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8"
],
[
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8"
]
]
},
"meta": {}
}
},
"search2": {
"type": "ds.test",
"options": {
"data": {
"fields": [
{
"name": "sourcetype"
},
{
"name": "count",
"type_special": "count"
},
{
"name": "percent",
"type_special": "percent"
}
],
"columns": [
[
"splunkd",
"splunkd_ui_access",
"splunkd_access",
"splunk_web_access",
"scheduler",
"splunk_web_service"
],
[
"600",
"525",
"295",
"213",
"122",
"19"
],
[
"87.966380",
"50.381304",
"60.023780",
"121.183272",
"70.250513",
"90.194752"
]
]
},
"meta": {}
}
}
},
"visualizations": {
"viz1": {
"type": "splunk.area",
"title": "$test_text$",
"options": {},
"dataSources": {
"primary": "search1"
}
},
"viz_Z6ARIYzI": {
"type": "splunk.area",
"options": {
"xAxisTitleText": "testX",
"yAxisTitleText": "testY",
"areaOpacity": 0.5
},
"dataSources": {
"primary": "search2"
}
},
"viz_fXKHeymJ": {
"type": "splunk.markdown",
"options": {
"markdown": "Update Value in Text Input to change Area Chart Description below"
}
}
},
"inputs": {
"input_global_trp": {
"options": {
"defaultValue": "-60m@m, now",
"token": "global_time"
},
"type": "input.timerange",
"title": "Global Time Range"
},
"input_global_refresh_rate": {
"options": {
"items": [
{
"value": "60s",
"label": "1 Minute"
},
{
"value": "300s",
"label": "5 Minutes"
},
{
"value": "1800s",
"label": "30 Minutes"
},
{
"value": "3600s",
"label": "1 Hour"
},
{
"value": "86400s",
"label": "24 Hours"
}
],
"defaultValue": "60s",
"token": "global_refresh_rate"
},
"type": "input.dropdown",
"title": "Global Refresh Rate"
},
"input1": {
"options": {
"defaultValue": "Default Text",
"token": "test_text"
},
"title": "Text Input Title",
"type": "input.text"
}
}
}
Add a number input menu
Use input.number to add input menus where your users can enter a number and control its value using provided step controls for increasing and decreasing the number value.
- Click the inputs icon
and select Number.
- Configure the input options in the Configuration panel:
Option Description Min Specify a minimum number value. This field sets a limit for the new input and prevents you from incrementing past the minimum value. Max Specify a maximum number value. This field sets a limit for the new input and prevents you from incrementing past the maximum value. Step Specify a step control for increasing and decreasing the number value. The default step value when controlling the input is 1. Default Value This value automatically populates the field if you don't input a number value.
The following example defines a Number input that sets the value of the token "maxResults" which could be used in search queries such as ... | head $maxResults$.
"inputs": {
"input1": {
"type": "input.number",
"options": {
"defaultValue": 0,
"token": "maxResults",
"min": 0,
"max": 1000,
"step": 5
},
"title": "Number Input"
}
},
Add a time range input menu
Use input.timerange to add additional time range menus where your users can select a custom time range for a particular data source.
- Click the inputs icon
and select Time Range.
- Configure the input options in the Configuration panel:
Option Description Title Specify a name for the time range title. Token Name Specify a token that passes a value within and between data sources. Default Value Specify a defaultValueusing the source editor. ThedefaultValuespecifies the options that are selected by default in the multi-select menu.
The following example defines a time range input that sets the value of the token "custom_time" which could be used in data source as $custom_time.earliest$ and $custom_time.latest$.
"input_custom_trp": {
"options": {
"defaultValue": "-24h@h,now",
"token": "custom_time"
},
"title": "Custom Time Range",
"type": "input.timerange"
}
How inputs connect to visualizations
Inputs affect visualizations when they generate tokens that are then specified in the visualization. For example, the following table visualization uses the token from an input to generate an overlay based on the user's selection.
{
"visualizations": {
"viz_table": {
"type": "viz.table",
"options": {
"dataOverlayMode": "$vizOverlay$"
}
}
}
}
Add tokens to create dynamic glass tables
Tokens are variables that pass a value within and between visualizations. They're usually made up of key/value pairs. The key is the name of the token and the value is the variable associated with the token name. If there's no key specified, you can specify a default.
You can use tokens in multiple ways within the glass table definition. For example, they can be used in search queries, inputs, and specifically stated within the dashboard definition.
Tokens in search queries
In the following example, the value of the limit token is passed into the search string. You can set the token explicitly, such as "limit": 50, or it can be assigned from a user input.
{
"type": "ds.search",
"options": {
"query": "index=_internal | head $limit$",
"queryParameters": {
"latest": "$global_time.latest$",
"earliest": "$global_time.earliest$"
},
"refresh": "$global_refresh_rate$",
"refreshType": "delay"
}
}
Tokens in visualizations
The following example gives the user a choice for a chart title using a dropdown menu and the resulting token, $viz.Title$:
...
"viz_4lswmxKy": {
"type": "splunk.line",
"options": {},
"dataSources": {
"primary": "search1"
},
"title": "$dropdownTitle$"
},
...
...
},
"inputs": {
"input_dropdown": {
"options": {
"items": [
{
"label": "All",
"value": "*"
},
{
"label": "Item 1",
"value": "item001"
},
{
"label": "Item 2",
"value": "item002"
}
],
"defaultValue": "*",
"token": "dropdownTitle"
},
"title": "Dropdown Input Title",
"type": "input.dropdown"
},
...
}