Add inputs and tokens to glass tables in ITSI

Inputs in the IT Service Intelligence (ITSI) glass table editor let you add dropdown, multiselect, and text 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. 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 currently only implement inputs using the source editor.

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.

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.

Where to specify inputs

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": {
	"globalInputs": [
		"globalTime",
		"globalRefreshRate",
		"input1",
		"input2"
	],
"options": {
                "submitButton": 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 using input.dropdown. For example, you might add a dropdown menu to change the color of the text or other areas of a visualization. The following options are available for the dropdown input:

• token
• defaultValue
• items

items are key-value pairs that define the dropdown menu options. Each key is the name of the option and the associated value is the action that's performed on the visualization. If a user doesn't choose an option, the defaultValue is none and no overlay is added.

Other options can include a default value and a token for the values being selected. These tokens call the value in the appropriate visualization component. The vizOverlay token passes 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 an 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.

The following options are available for the multiselect input:

• token
• defaultValue
• items

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.

The following options are available for text inputs:

• token
• defaultValue

The following example uses both text and dropdown inputs. The dropdown input changes the color of the axis values of the second area chart, while the text input lets a user change the title of the first area chart.

Expand this window to copy the dashboard definition.

{
	"title": "Area Chart",
	"visualizations": {
		"viz1": {
			"type": "viz.area",
			"title": "$vizDesc$",
			"options": {},
			"encoding": {
				"x": "primary.foo",
				"y": "primary.bar"
			},
			"dataSources": {
				"primary": "search1"
			},
			"description": "Description: $vizDesc$"
		},
		"viz2": {
			"type": "viz.area",
			"title": "Area Chart",
			"options": {
				"fontColor": "$vizColor$",
				"areaFillOpacity": 0.5,
				"chart.showLines": false
			},
			"encoding": {
				"x": "primary.sourcetype",
				"y": "primary.count",
				"y2": "primary.percent"
			},
			"dataSources": {
				"primary": "search2"
			},
			"description": "Show Lines: false, Fill Opacity: 0.5"
		},
		"viz3": {
			"type": "viz.markdown",
			"options": {
				"markdown": "Update Value in Text Input to change Area Chart Description below"
			}
		}
	},
	"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": {}
			}
		}
	},
	"description": "",
	"inputs": {
		"globalTime": {
			"options": {
				"defaultValue": "-60m, now",
				"token": "TimeRange"
			},
			"type": "input.timerange"
		},
		"globalRefreshRate": {
			"title": "Refresh Rate",
			"options": {
				"items": [
					{
						"label": "1 Minute",
						"value": "60s"
					},
					{
						"label": "5 Minutes",
						"value": "300s"
					},
					{
						"label": "30 Minutes",
						"value": "1800s"
					},
					{
						"label": "1 Hour",
						"value": "3600s"
					},
					{
						"label": "24 Hours",
						"value": "86400s"
					}
				],
				"defaultValue": "60s",
				"token": "RefreshRate"
			},
			"type": "input.dropdown"
		},
		"input1": {
			"type": "input.text",
			"title": "Text Input",
			"options": {
				"token": "vizDesc",
				"defaultValue": "Area Chart"
			}
		},
		"input2": {
			"type": "input.dropdown",
			"title": "Dropdown Input",
			"options": {
				"items": [
					{
						"label": "Blue",
						"value": "#0000FF"
					},
					{
						"label": "Red",
						"value": "#FF0000"
					},
					{
						"label": "Green",
						"value": "#008000"
					},
					{
						"label": "Yellow",
						"value": "#FFFF00"
					}
				],
				"token": "vizColor",
				"defaultValue": "#0000FF"
			}
		}
	},
	"layout": {
		"globalInputs": [
			"globalTime",
			"globalRefreshRate",
			"input1",
			"input2"
		],
		"structure": [
			{
				"item": "viz1",
				"position": {
					"h": 370,
					"w": 400,
					"x": 20,
					"y": 100
				}
			},
			{
				"item": "viz2",
				"position": {
					"h": 450,
					"w": 460,
					"x": 460,
					"y": 20
				}
			},
			{
				"item": "viz3",
				"position": {
					"h": 60,
					"w": 400,
					"x": 20,
					"y": 20
				}
			}
		],
		"options": {
			"width": 900,
			"height": 600,
			"display": "auto-scale",
			"submitButton": true
		},
		"type": "absolute"
	}
}

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 specified 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": "$TimeRange.latest$",
		"earliest": "$TimeRange.earliest$"
        },
        "refresh": "$RefreshRate$",
	"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$:

…
"viz1": {
            "type": "viz.line",
           "options": {},
            "dataSources": {
                "primary": "search1",
            },
           "title": "$vizTitle$",
        },
           …
     …
    "inputs": {
        "input1": {
            "type": "input.dropdown",
            "options": {
                "items": [
                    {
                        "label": "simple",
                        "value": "Line Chart"
                    },
                    {
                        "label": "utf",
                        "value": "这是一个",
                    },
                    {
                        "label": "special",
                        "value": "#$&%@^"
                    }
                ],
                "defaultValue": "Line Chart",
                "token": "vizTitle"
            },
            "title": "Dropdown Input"
        }
    },
…