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
- From the glass tables lister page, open the glass table that you want to edit.
- Select Edit to open the editor.
- Click Source to open the glass table JSON source code editor. This is your glass table definition.
- Edit the glass table definition source code.
- Click Back to leave source mode and view the glass table. Note that your changes are not yet saved.
- Click save
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.
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": {
"latest": "now",
"earliest": "o"
}
}
},
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:
- defaultValue
- token
- 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's 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 doesn't 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 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:
- defaultValue
- 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:
- defaultValue
- token
- 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$"
"queryParameters": {
"latest": "$TimeRange.latest$",
"earliest": "$TimeRange.earliest$"
}
}
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.
- Open an existing beta glass table.
- Click the chart icon
and select the single value visualization to add it to your glass table.
It's important to use the editor for this step rather than cutting and pasting visualization code directly into the source. When you use the editor to add it, ITSI creates a unique name for the visualization and formats it correctly in the layout.
- Click Setup Primary Data Source and connect the visualization to a KPI, service health score, or ad hoc search.
- Change the background color of the visualization so you can more easily use your browser's Find option to find it in the source editor as shown here:
- 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" } } }, - Change the
typeproperty toviz.table. - 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:
|
PREVIOUS Beta glass table keyboard shortcuts 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.4.0, 4.4.1, 4.4.2, 4.4.3, 4.4.4, 4.4.5
Feedback submitted, thanks!