Splunk® IT Service Intelligence

Use Splunk IT Service Intelligence

Download manual as PDF

This documentation does not apply to the most recent version of ITSI. Click here for the latest version.
Download topic as PDF

Edit your beta glass table using the source editor

If you've used Simple XML dashboards in Splunk Enterprise, you're probably familiar with the option to edit the XML source code directly, instead of using the UI editor. This same capability is available to you in the beta glass table source editor, allowing you to add and edit visualizations.

Do not confuse the beta glass table editor with the classic glass tables you've already built. Beta glass tables say "beta" in the version column. If you're editing an original glass table, see Create a glass table in ITSI.

While the glass table editor is useful for adding visualizations and text, it is easier to use the source editor to add and modify visualizations, modify data sources for sample data, and add inputs.

Edit your beta glass table in the source editor

  1. From the glass tables lister page, open the glass table that you want to edit.
  2. Select Edit to open the editor.
  3. Click Source to open the glass table JSON source code editor. This is your glass table definition.
  4. Edit the glass table definition source code.
  5. Click Back to leave source mode and view the glass table. Note that your changes are not yet saved.
  6. Click saveSave icon.to save your changes.

The editor does not yet display validation warnings or error messages, but you cannot click Back if you've made a formatting error. Consider using a JSON validator if you're unable to save your changes.

Using the glass table definition

The glass table definition is the JSON source code that creates your glass tables. There are five pieces of the glass table definition:

visualizations

In the visualization section, you list all of the visualizations on the canvas, including their type, options, associated data sources, and any inputs and tokens .
All visualizations are objects that are positioned on your canvas according to the options you specify when you list them in the layout section. The following visualization types are available to configure using the source editor:

Visualization type Syntax
Area chart viz.area
Bar chart viz.bar
Bubble chart viz.bubble
Column chart viz.column
Ellipse viz.ellipse
Image viz.img
Line chart viz.line
Pie chart viz.pie
Rectangle viz.rectangle
Scatter chart viz.scatter
Single-value widget viz.singlevalue
Single-value radial widget viz.singlevalueradial
Table viz.table
Text box viz.text

This glass table shows some of the visualizations currently supported by the beta glass tables editor. While you can add some visualizations from the glass table editor itself, all configuration options must be set in the source editor.

The image shows a large glass table with several line charts, bar graphs, and scatter plots.

Sample visualizations glass table definition

The following glass table definition shows how the visualizations above were configured using the source editor.

{
	"visualizations": {
		"viz_OlDu8cpr": {
			"dataSources": {
				"primary": "search3"
			},
			"type": "viz.line",
			"options": {
				"lineDashStyle": "shortDashDotDot",
				"seriesColors": "[#377D5E,#09D0AC,#F6CF47,#CF5656,#EB3844, #DB5566, #3C6DC7, #619FDD]",
				"lineWidth": "2",
				"backgroundColor": "#ffffff",
				"foregroundColor": "transparent",
				"fontColor": "#0000000"
			}
		},
		"viz_oW1DFpN4": {
			"options": {
				"unit": "$",
				"sparklinePosition": "after",
				"showSparklineTooltip": "true",
				"rangeColors": [
					"#FFFFFF",
					"#1E3765",
					"#3C6DC7",
					"#7755F6",
					"#EB3844",
					"#F3A846",
					"#F6CF47",
					"#09D0AC"
				],
				"sparklineHighlightSegments": 6,
				"rangeValues": [
					100,
					200,
					300,
					400,
					500,
					600,
					700,
					1000
				],
				"showTrendIndicator": true,
				"sparklineHighlightDots": 7,
				"sparklineStrokeColor": "#ffffff",
				"colorMode": "block",
				"unitPosition": "before",
				"useThousandSeparators": true,
				"showSparkline": true,
				"trendDisplayMode": "percent"
			},
			"type": "viz.singlevalue",
			"dataSources": {
				"primary": "search1"
			}
		},
		"viz_VadW0za4": {
			"options": {
				"src": "http://www.splunk.com/content/dam/splunk2/images/social/splunk-logo.jpg",
				"preserveAspectRatio": true
			},
			"type": "viz.img"
		},
		"viz_Fx3n0Ryb": {
			"options": {
				"count": 10,
				"unit": "$",
				"dataOverlayMode": "heatmap",
				"unitPosition": "before",
				"rowNumbers": true,
				"useThousandSeparators": true,
				"precision": 2
			},
			"type": "viz.table",
			"dataSources": {
				"primary": "search2"
			}
		},
		"viz_sn0IH59g": {
			"options": {
				"content": "Sample Viz Snippets - Customization Only Supported through Source ",
				"fontSize": 65,
				"color": "#ffffff",
				"backgroundColor": "transparent"
			},
			"type": "viz.text"
		},
		"viz_wDKJuhbX": {
			"dataSources": {
				"primary": "search4"
			},
			"type": "viz.pie",
			"options": {
				"seriesColors": "[#377D5E,#09D0AC,#F6CF47,#CF5656,#EB3844, #DB5566, #3C6DC7, #619FDD,#C2D48D]",
				"backgroundColor": "transparent",
				"fontColor": "#ffffff"
			}
		},
		"viz_wGpdheSr": {
			"type": "viz.bubble",
			"options": {
				"seriesColors": "[#9EC9A3,#09D0AC,#F6CF47,#CF5656,#EB3844, #DB5566, #3C6DC7, #619FDD]"
			},
			"dataSources": {
				"primary": "search6"
			}
		},
		"viz_iU0C02xJ": {
			"title": "This is a Scatter Chart",
			"description": "This is a scatter chart description",
			"type": "viz.scatter",
			"options": {
				"seriesColors": "[#377D5E,#09D0AC,#F6CF47,#CF5656,#EB3844, #DB5566, #3C6DC7, #619FDD]",
				"fieldColors": "{foo: #3C6DC7, bar: #619FDD}",
				"backgroundColor": "#ffffff",
				"fontColor": "#616161"
			},
			"dataSources": {
				"primary": "search2"
			}
		}
	},
	"dataSources": {
		"search4": {
			"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": {}
			},
			"name": "search4"
		},
		"search6": {
			"options": {
				"data": {
					"columns": [
						[
							"2017-08-20T00:00:00.000-07:00",
							"2017-08-20T00:30:00.000-07:00",
							"2017-08-20T01:00:00.000-07:00",
							"2017-08-20T01:30:00.000-07:00",
							"2017-08-20T02:00:00.000-07:00",
							"2017-08-20T02:30:00.000-07:00",
							"2017-08-20T03:00:00.000-07:00",
							"2017-08-20T03:30:00.000-07:00",
							"2017-08-20T04:00:00.000-07:00",
							"2017-08-20T04:30:00.000-07:00"
						],
						[
							"100",
							"200",
							"170",
							"100",
							"22",
							"301",
							"430",
							"104",
							"221",
							"42"
						],
						[
							"220",
							"302",
							"332",
							"112",
							"460",
							"154",
							"121",
							"36",
							"576",
							"165"
						],
						[
							"320",
							"3202",
							"1332",
							"2112",
							"2460",
							"2614",
							"1121",
							"316",
							"276",
							"465"
						],
						[
							"430",
							"302",
							"332",
							"312",
							"460",
							"354",
							"321",
							"336",
							"376",
							"365"
						],
						[
							"520",
							"502",
							"532",
							"112",
							"860",
							"754",
							"121",
							"36",
							"576",
							"265"
						],
						[
							"620",
							"902",
							"32",
							"512",
							"860",
							"184",
							"181",
							"76",
							"576",
							"465"
						],
						[
							"1800",
							"1800",
							"1800",
							"1800",
							"1800",
							"1800",
							"1800",
							"1800",
							"1800",
							"1800"
						]
					],
					"fields": [
						{
							"name": "_time"
						},
						{
							"data_source": "sum(date_hour)",
							"splitby_field": "clientip",
							"splitby_value": "10.1.1.000",
							"name": "10.1.1.000"
						},
						{
							"data_source": "sum(date_hour)",
							"splitby_field": "clientip",
							"splitby_value": "10.1.1.002",
							"name": "10.1.1.002"
						},
						{
							"data_source": "sum(date_hour)",
							"splitby_field": "clientip",
							"splitby_value": "10.1.1.003",
							"name": "10.1.1.003"
						},
						{
							"data_source": "sum(date_hour)",
							"splitby_field": "clientip",
							"splitby_value": "10.1.1.004",
							"name": "10.1.1.004"
						},
						{
							"data_source": "sum(date_hour)",
							"splitby_field": "clientip",
							"splitby_value": "10.1.1.005",
							"name": "10.1.1.005"
						},
						{
							"data_source": "sum(date_hour)",
							"splitby_field": "clientip",
							"splitby_value": "10.1.1.006",
							"name": "10.1.1.006"
						},
						{
							"name": "_span"
						}
					]
				},
				"meta": {}
			},
			"type": "ds.test"
		},
		"search3": {
			"options": {
				"data": {
					"columns": [
						[
							"2017-08-20T00:00:00.000-07:00",
							"2017-08-20T00:30:00.000-07:00",
							"2017-08-20T01:00:00.000-07:00",
							"2017-08-20T01:30:00.000-07:00",
							"2017-08-20T02:00:00.000-07:00",
							"2017-08-20T02:30:00.000-07:00",
							"2017-08-20T03:00:00.000-07:00",
							"2017-08-20T03:30:00.000-07:00",
							"2017-08-20T04:00:00.000-07:00",
							"2017-08-20T04:30:00.000-07:00"
						],
						[
							"000",
							"200",
							"170",
							"100",
							"22",
							"301",
							"430",
							"104",
							"221",
							"42"
						],
						[
							"20",
							"302",
							"332",
							"112",
							"460",
							"154",
							"121",
							"36",
							"576",
							"165"
						],
						[
							"1800",
							"1800",
							"1800",
							"1800",
							"1800",
							"1800",
							"1800",
							"1800",
							"1800",
							"1800"
						]
					],
					"fields": [
						{
							"name": "_time"
						},
						{
							"data_source": "sum(date_hour)",
							"splitby_field": "clientip",
							"splitby_value": "10.1.1.000",
							"name": "10.1.1.000"
						},
						{
							"data_source": "sum(date_hour)",
							"splitby_field": "clientip",
							"splitby_value": "10.1.1.002",
							"name": "10.1.1.002"
						},
						{
							"name": "_span"
						}
					]
				},
				"meta": {}
			},
			"type": "ds.test"
		},
		"search2": {
			"options": {
				"data": {
					"columns": [
						[
							"100000.8765",
							"200000.88998",
							"300000.5675",
							"4300000.8765",
							"340000.8765",
							"60000.4566",
							"70000.333",
							"8500000.8765",
							"900000.22233",
							"70000.333",
							"8500000.8765",
							"900000.22233"
						],
						[
							"1",
							"2",
							"3",
							"4",
							"5",
							"6",
							"7",
							"8",
							"9",
							"10",
							"11",
							"12"
						]
					],
					"fields": [
						{
							"name": "foo"
						},
						{
							"name": "bar"
						}
					]
				},
				"meta": {}
			},
			"type": "ds.test",
			"name": "search2"
		},
		"search1": {
			"options": {
				"data": {
					"columns": [
						[
							"100",
							"200",
							"300",
							"430",
							"340",
							"600",
							"700",
							"850",
							"900"
						],
						[
							"1",
							"2",
							"3",
							"4",
							"5",
							"6",
							"7",
							"8"
						]
					],
					"fields": [
						{
							"name": "foo"
						},
						{
							"name": "bar"
						}
					]
				},
				"meta": {}
			},
			"type": "ds.test",
			"name": "search1"
		}
	},
	"inputs": {},
	"layout": {
		"type": "absolute",
		"options": {
			"display": "auto-scale",
			"width": 2000,
			"backgroundColor": "#708794",
			"height": 1600
		},
		"structure": [
			{
				"type": "block",
				"item": "viz_oW1DFpN4",
				"position": {
					"w": 610,
					"y": 170,
					"x": 40,
					"h": 380
				}
			},
			{
				"type": "block",
				"item": "viz_Fx3n0Ryb",
				"position": {
					"w": 610,
					"y": 570,
					"x": 40,
					"h": 480
				}
			},
			{
				"type": "block",
				"item": "viz_VadW0za4",
				"position": {
					"w": 610,
					"y": 170,
					"x": 1340,
					"h": 380
				}
			},
			{
				"type": "block",
				"item": "viz_sn0IH59g",
				"position": {
					"w": 1970,
					"y": 40,
					"x": 14,
					"h": 100
				}
			},
			{
				"type": "block",
				"item": "viz_OlDu8cpr",
				"position": {
					"w": 640,
					"y": 170,
					"x": 680,
					"h": 380
				}
			},
			{
				"item": "viz_wDKJuhbX",
				"type": "block",
				"position": {
					"x": 510,
					"y": 440,
					"w": 1020,
					"h": 790
				}
			},
			{
				"item": "viz_wGpdheSr",
				"type": "block",
				"position": {
					"x": 1350,
					"y": 570,
					"w": 600,
					"h": 470
				}
			},
			{
				"item": "viz_iU0C02xJ",
				"type": "block",
				"position": {
					"x": 40,
					"y": 1060,
					"w": 1910,
					"h": 510
				}
			}
		]
	},
	"description": "",
	"title": "Sample Viz"
}

dataSources

The dataSources section defines the data that powers each visualization. There are two presets: ds.test and ds.search.

ds.test

The ds.test data source is used for sample data and is structured by calling the dataSources module, followed by the name you provide for the search, the data source type, options, data, and column values and fields (the order of the column and field options is unimportant). ds.test is structured in the following way:

ds.test structure

The following code sample features the structure of ds.test.

"dataSources": {
    "<search_name>": {
        "type": "ds.test",
        "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": {}
            }
        },

ds.test example

The following code sample features an example of ds.test.

For example:
<div class="samplecode">
<pre>
"dataSources": {
       "test_search": {
          "type": "ds.test",
          "options": {
		"data": {
			"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"
				]
                                     ],
                                 "fields": [
				{
				  "name": "sourcetype"
						},
						{
						  "name": "count",
						  "type_special": "count"
						},
						{
						   "name": "percent",
						   "type_special": "percent"
						}
				        ]
				},
				"meta": {}
			},

ds.search

The ds.search section is used for ad hoc searches. The ds.search datasource is structured by calling the dataSources module followed by the name you provide for the search, the datasource type, and any options you want to make available. The only option that is required to return events is the query option, which is an SPL search.

"dataSources": {
       "<search_name>": { 
              "type": "ds.search",
              "options": {
              "query": "<your_SPL_search_>"
            }
      }
},

For example:

"dataSources":{
       "BCsearch": {
               "type": "ds.search",
               "options": {
                      "query": "index=buttercupgo_events | head 500",
                      "queryParameters": {
                              "earliest": "0",
                              "latest": "now"
                  }
         }
},

layout

The layout section determines the layout of your glass table. The order of the objects listed in the layout section determines the stacking order of the visualizations on the canvas. There are two preset layouts: absolute and grid.

grid

The grid layout divides the canvas width into columns and lets you specify position by grid unit. The grid layout is responsive. If you resize the container, all visualizations within the container automatically resize to the container scale.

The grid layout looks similar to the following:

"layout": {
        "type": "grid",
        "options": {
            "columns": 12,
            "submitButton": true
        },
        "structure": [
        {

            "item": "viz2",
            "position": {
                "x": 8,
                "y": 2,
                "w": 5,
                "h": 4
            }
        }
    ],
}

absolute

The absolute layout positions visualizations on absolute coordinates that start from the top left corner. This means the center of the grid, (0,0) corresponds with the upper left corner of your canvas. This is the default starting position for the top left corner of any background image you may use.
You must specify both height and width, in pixels, when using the absolute layout.

By default, absolute layout is not responsive; resizing the container does not resize the glass table. However, you can specify auto-scale for the display option to make absolute layout glass table responsive.

The following example uses the absolute layout with a specified width and height, in pixels, and with the auto-scale display option mentioned earlier.

You can use the submitButton option to add a button to your glass table that will refresh the screen when a user clicks it after making a change in the glass table using inputs. If the submitButton option is not listed, or if it is set to false, changes a user makes happen automatically.

The absolute layout looks similar to the following:

"layout": {
    "type": "absolute",
    "options": {
        "width": 900,
        "height": 600,
        "display": "auto-scale",
        "submitButton": true
    },
    "structure": [
        {
            "position": {
                "x": 20,
                "y": 20,
                "w": 400,
                "h": 60
            },
            "item": "viz3"
        }
    ],
  "globalInputs": [
       "input1" 
     ] 
}

inputs

inputs let you perform actions on the canvas and on visualizations using dropdown menus, text input, and multi-select options. 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 value 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.

Each input can have a number of different options depending on the input type. The following input types are available.

input.dropdown

The dropdown input lets you choose options from a dropdown menu. The following options are available for the dropdown input:

  1. defaultValue
  2. token
  3. items

The following example shows how each input can have a number of options, such as items, which are key-value pairs. Each key is the name of the option in the dropdown menu, while the associated value is the action that is performed on the visualization.

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 selects from the menu and the value is the overlay added to the visualization.

If a user does not choose an option, the defaultValue is none, and no overlay is used.

The vizOverlay token passes the user's choice to the connected visualization.

Other "options" can include a default value and a token for the values being selected. These tokens are used to call the value in the appropriate visualization component.

    "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"
        }
    },

Dropdown and multiselect inputs can be populated by either static content or the results of a search. The following is an example of an input that's populated by search results:

    "inputs": {
        "input1": {
            "type": "input.dropdown",
            "options": {
                "items": [
                    {
                        "label": "All",
                        "value": "*"
                    },
                ]
                "token": "metricName",
                "defaultValue": "*"
                },
            "encoding": {
                "label": "primary[0]",
                "value": "primary[0]"
            },
            "dataSources": {
                "primary": "search1"
            }
        }
    },

search1 is passed to input1 to determine what appears in the dropdown. The selection of the input informs a token called "component". You can then use that token in a viz option, another query parameter, or anywhere else you use tokens.

input.text

The text input lets you enter text that affects visualizations. The following options are available for the text input:

  1. defaultValue
  2. token

input.multiselct

The multiselect input lets you select more than one option in a dropdown menu. The following options are available for the multiselect input:

  1. defaultValue
  2. token
  3. items

The following is an example of the multiselect input. In this case, a user can choose any or all of the options for the description of the visualization. These 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",
				"tokenNamespace": "Mine",
				"defaultValue": "super,dashboard"
			}
		}
    ...

How inputs connect to visualizations

Inputs affect visualizations when they generate tokens that are then specified in the visualization. For example, the table visualization below 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$"
            },

How to specify inputs

In the "layout" section of the glass table definition, you must specify the layout option globalInputs, and list the inputs used. In this example, input1 is the only input.

You can also specify the submitButton layout option. When set to true, a user must click Submit in order for the selection to take effect. If set to false, or if not specified at all, the glass table immediately refreshes when a user makes a selection.

javascript
"layout": {
    "type": "absolute",
    "options": {
        "width": 1400,
        "height": 1000,
        "submitButton": true
    },
    "structure": [
        {
            "position": {
                "x": 20,
                "y": 190,
                "w": 370,
                "h": 410
            },
            "item": "viz_table"
        },
    ],
    "globalInputs": [
        "input1"
    ]

tokens

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 is no key specified, you can specify a default. For example, the following object describes a "title" token with a value set to "my title":

{

    "title": "my title",

}

Tokens can be used in multiple ways in the glass table definition. The following two examples are two of the ways that tokens can be used.

Search queries

In the following example, the value of the limit token is passed into the search string once it is set:

{
    "type": "ds.search",
    "options": {
        "query": "index=_internal | head $limit$"
    }
}

In this case, the token can be set explicitly, such as "limit": 50, or it can be assigned from a user input.

Tutorial: Change a visualization using the source editor

To learn how to easily switch between visualizations using the source editor, try the following exercise.

  1. Open an existing beta glass table.
  2. Click Chart and select the single value visualization to add it to your glass table.

    It is important that you add a single-value visualization using the glass table editor, rather than cutting and pasting visualization code directly into the source. When you use the editor to add it, a unique name is created, and it is automatically formatted correctly in the layout.

  3. Click Setup DataSource and connect the visualization to a KPI, service health score, or ad hoc search.
  4. Change the background color of the visualization so that you can more easily use your browser's Find option to find it in the source editor as shown here:
    A single-value widget with the value 70 and a gray bar below it.
  5. Click Source. The visualization section of the glass table definition looks similar to this:
    "visualizations": {
    		"viz_ooIQKxAx": {
    			"type": "viz.singlevalue",
    			"options": {
    				"backgroundColor": "transparent"
    			},
    			"dataSources": {
    				"primary": "ds_CLgoYxGa"
    			}
    		}
    	},
    
  6. Change the type property to viz.table.
  7. Click Back. You might have to wait a few seconds to see the changes take effect. If you chose a data source with displayable data, you see a table visualization similar to the following image:
    A table displays three columns: time, alert value, and span.

Changing visualizations is as simple as changing the visualization type. You can only define these visualizations in the source editor, not through the editor UI.

PREVIOUS
Building and editing beta glass tables in ITSI
  NEXT
Tutorial: Build a beta glass table to monitor request and volume flow

This documentation applies to the following versions of Splunk® IT Service Intelligence: 4.3.0, 4.3.1


Was this documentation topic helpful?

Enter your email address, and someone from the documentation team will respond to you:

Please provide your comments here. Ask a question or make a suggestion.

You must be logged into splunk.com in order to post comments. Log in now.

Please try to keep this discussion focused on the content covered in this documentation topic. If you have a more general question about Splunk functionality or are experiencing a difficulty with Splunk, consider posting a question to Splunkbase Answers.

0 out of 1000 Characters