Build and edit beta glass tables in ITSI

Don't 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.

Create a glass table in the beta editor to test out the new editing experience and provide feedback for future versions. Glass tables help you visualize and monitor the interrelationships and dependencies across your IT and business services. You can add metrics like KPIs, ad hoc searches, and service health scores that update in real time against a background that you design.

You can also install the Content Pack for Example Glass Tables to get preconfigured beta glass tables directly into your ITSI environment. For more information, see About the Content Pack for Example Glass Tables.

Customize your glass table canvas

The canvas is the graphical grid area where you build out your glass table visualization. The canvas is different than the glass table background. Only parts of your glass table that are within the canvas (grid area) are displayed to users. You can preview your glass table without saving or losing your changes by clicking View.

Customize your glass table canvas in the following ways:

Change the canvas size

The beta glass table canvas has default dimensions of 1920 x 1080 pixels. This is conceptually different than the current glass table editor, which has an infinite canvas.

(Optional) In the Configuration panel, change the Display Mode.
- Select Actual Size to display the actual size in pixels.
- Select Fit to Width so the canvas takes up the entire window and applies to both edit mode and view mode. The canvas fits horizontally but might still require vertical scroll.
Manually change the dimensions of the canvas, in pixels, using the Canvas Width and Canvas Height fields.
Click saveto save your changes.

Below are some popular examples of standard canvas sizes:

Monitors. 16:9 aspect ratio resolutions such as: 1280 x 720 (HD), 1920 x 1080 (FHD), 2560 x 1440 (4K)
U.S. letter. 4:3 aspect ratio resolutions such as: 640 x 480, 900 x 600
Some mobile phones. 18:9 aspect ratio resolutions such as: 2880 x 1440

Change the background color

Click the glass table canvas grid.
In the Configuration panel, choose a background color. Either enter the hex code for a color, such as #ffff00, or choose a color from the palette.
The background color is applied to the bottom canvas layer while background images are placed one layer above. If you've added a background image to your glass table, only portions of the canvas that are not covered by the image are visible in the designated color.
Click savewhen you're finished.

Upload a background image

You can upload a background image to further customize your glass table. Supported image types are PNG, JPG/JPEG, and GIF.

By default, uploaded background images are positioned at (0,0) on your glass table canvas. This means that the top left corner of the uploaded image is at the top left corner of the canvas. Increasing the y-axis values moves the image down, while increasing the x-axis values moves the image to the right.

In the Background Image section of the Configuration panel, drop your image file or click browse... to select it. You can also specify a URL for web-based images. If you use web-based images, the image is updated each time you refresh your glass table.
Configure the sizing options to fit your individual needs:
- Select Contain (default) to fit the entire image to the canvas width. The canvas height might not be completely covered.
- Select Cover to cover the entire canvas. The entire background image might not be displayed if the height to width ratio of the image is different than the height to width ratio of the canvas.
- Select Custom to position the image on the x-axis and y-axis and to change the width and height, in pixels.
- Select Original Size to display the image with its original dimensions.
Click View to see the image as it will appear in the glass table.
Click savewhen you're finished.

Add and edit a custom icon

You can add custom icons to the icon gallery as long as they are in SVG format.

In the editing toolbar, click the icon button .
Drop your image or click browse... to add it to the icon gallery.
Click the the icon to add it to your glass table.
(Optional) Provide a title and description for the icon. These fields show up in both Edit and View mode.
Change the icon color and opacity on the Configuration panel.

If you upload a multi-colored icon, the original colors are retained in the gallery but you cannot recolor in multi-color. For example, if you upload a red and black icon, you cannot change red to blue and black to green. If you want to change the color, you must choose a single color.

Uploaded icons remain in the KV store so you can use them again later. To delete an icon from the icon gallery, click the X that appears when you hover over it.

Add and edit text

You can add custom text to your glass table.

While in edit mode, click the text button in the editing toolbar.
In the Font Settings section of the Configuration panel, choose a font, size, and color.
Click saveto save your changes.

Create and customize shapes

Use the glass table toolbar to add shapes to your glass table. You can add ellipses, lines, and rectangles. Use the Styling tab in the editing panel tab to format your shapes.

On the editing toolbar, click the shapes button
Select a shape to add it to the glass table.
(Optional) Provide a title and description for the shape. These fields show up in both Edit and View mode.

Connect a shape to a data source

You can connect a shape to a specific data source, such as a KPI or service health score, so that the shape's color changes based on the status of that metric. Because thresholding for shapes is currently unavailable in the UI, you need to first add the metric as a single value visualization and then change it to a shape in the source editor.

You cannot currently connect lines to data sources. Only ellipses and rectangles are supported.

Create a single value visualization for the data source you want to use. For instructions, see Add a KPI visualization and Add an ad hoc search visualization.
If you're using an ad hoc search, configure thresholds as needed. For instructions, see Configure thresholds.
Click Source to open the glass table JSON source code editor.
Locate the visualization you just added and change viz.singlevalue to viz.rectangle (for rectangles) or viz.ellipse (for circles).
Click Back to return to the glass table canvas and ensure that the shape's color matches the current severity of the metric.

For more information about using the source editor, see Edit your beta glass table using the source editor.

Clone, layer, and delete objects

When you select a visualization or shape, a panel appears on the object.

Perform the following actions on an object:

Layer the object.
Clone the object. If you clone an object that is connected to a data source, you must connect the clone manually.
Delete the object.

Add a KPI visualization

Add a KPI visualization to display the associated search values. The KPIs continuously update in real-time according to the search schedule that you define when you create the search. By default, KPIs are represented by single value visualizations with a sparkline.

Click the data iconto display the services available in your IT environment. Only services you have permission to read are listed.
Expand a service to view its KPIs.
Select a KPI to add it as a visualization.
Use the Configuration panel to customize the visualization:
- Change the visualization type to single value or gauge.
- Enable Show Trending Value to display a trending arrow comparing the current value to the previous one.
- For Trend Display as, specify whether the trend value is displayed as an absolute count or a percentage of how much the last value changed in comparison with the current one.
- Enable Show Sparkline to show the single value sparkline that displays time-based trends.
- Under Number Formatting, change the Data Precision to specify the number of decimal places to display. For example, to display 3 decimal places, use a value of 3. The maximum value is 20.
- Under Number Formatting, add a Unit to specify the label text to show next to the single value. Specify whether the unit label should appear before or after the single value.
Click savewhen you're finished.

Add an ad hoc search visualization

Create a custom visualization to display search results based on an ad hoc search. Your custom search must include the timechart command or stats by _time to use thresholding.

The results of your ad hoc search must include the field alert_value. Otherwise, ITSI picks the first column instead and you'll see values like #FF7492 rather than your actual search results.

Click the data iconto display the services available in your IT environment. Only services you have permission to read are listed.
Click Create Ad hoc Search.
Provide a data source name and enter a search. For example, index=_internal | timechart count.
Select the time range for the search.
Click Run & Save. The search is added to the list of ad hoc searches.
Click the ad hoc search to add it to the glass table.
Use the Configuration panel to customize the visualization:
- Change the visualization type if desired.
- Enable Show Trending Value to display a trending arrow comparing the current value to the previous one.
- For Trend Display as, specify whether the trend value is displayed as an absolute count or a percentage of how much the last value changed in comparison with the current one.
- Enable Show Sparkline to show the single value sparkline that displays time-based trends.
- Threshold Settings are currently unsupported for ad hoc search visualizations.
- Under Number Formatting, change the Data Precision to specify the number of decimal places to display. For example, to display 3 decimal places, use a value of 3. The maximum value is 20.
- Under Number Formatting, add a Unit to specify the label text to show next to the single value. Specify whether the unit label should appear before or after the single value.
Click savewhen you're finished.

Add a chart or table visualization

Add a chart visualization to show one or more data dimensions in a results set. Add a table to visualize patterns for one or more metrics across a data set.

Click the chart iconand select a chart type.
(Optional) Provide a title and description for the visualization. These fields show up in both Edit and View mode.
Provide a data source name and a search query to generate results in the correct format for the visualization you're building. For information and examples, see Data structure requirements for visualizations in the Dashboards and Visualizations manual.
Click Source and use the source editor to further configure your visualization. While you can add some visualizations from the glass table editor, all configuration options must be set in the source editor. For information, see Edit your beta glass table using the source editor.
Click savewhen you're finished.

See also:

Configure drilldowns

You can drill down from a KPI visualization or a shape to a custom URL.

Select the object you want to drill down from.
In the Configuration panel, click Add Drilldown.
For On Click, choose Link to custom URL.
Provide a relative or absolute URL.
If you don't provide an http:// address, the generated URL is considered internal to ITSI and uses a localhost URL, for example localhost:8000//. If you provide an http:// prefix (for example, http://splunk.com), the drilldown directs to that external URL.
(Optional) Select Open in new tab so the drilldown link opens in a new tab.
Click Save.
Click View to enter view mode and test the link. If drilling down from a KPI visualization, you must click the actual value in the visualization, not just anywhere on the visualization, in order to go to the link.

Configure thresholds

Configure thresholds on a single-value or single-value radial visualization to determine its color, which indicates the current status of the metric. Assign a color to numerical ranges of metric values.

You can only configure thresholds for ad-hoc search visualizations. KPI and service health score visualizations reflect the thresholds configured in the service definition. You cannot modify these thresholds in the glass table editor. For more information, see Set aggregate threshold values in the Administer Splunk IT Service Intelligence manual.

In edit mode, select the ad-hoc visualization for which you want to configure thresholds.
In the Configuration panel, expand Threshold Settings.
Toggle Threshold to enable thresholding for the visualization.
Configure the colors you want the visualization to be when the metric value reaches certain limits. The color is meant to indicate the current status of the metric.

Set different time ranges for visualizations

By default, the global time range picker on a beta glass table sets the time for all visualizations. However, you can add additional inputs to set different time ranges for multiple visualizations. For example, you might leverage this functionality if you want to view one KPI for the past hour, and compare those results to a different KPI over the past day.

Add your visualizations to the glass table. For instructions, see Add a KPI visualization and Add an ad hoc search visualization.
Click savebefore entering source mode to make sure you don't lose any work.
Click Source to edit the XML source code directly.
To add a new time picker, copy the JSON blob for the global picker that already exists under inputs and give it a different name and token.
Add the name of the new new time range picker under globalInputs in the layout section.
Update one of the visualizations to use the token of the time range picker you just added.
Click Back to return to the glass table editor. Verify that updating the time range for one of the time pickers only updates the corresponding visualization and not all visualizations.

For more information about using the source editor, see Edit your beta glass table using the source editor.

Example

The following code sample shows how to add an additional time picker to a glass table. The new time picker is called otherTime and its token is otherT:

{
	"visualizations": {
		"viz_mYyk8UA5": {
			"options": {},
			"dataSources": {
				"primary": "ds_UXEaDW7w"
			},
			"title": "Viz 1",
			"type": "viz.singlevalue"
		},
		"viz_jbiEWOGc": {
			"options": {},
			"dataSources": {
				"primary": "ds_VKYi2Qrj"
			},
			"title": "Viz 2",
			"type": "viz.singlevalueradial"
		}
	},
	"inputs": {
		"otherTime": {
			"options": {
				"defaultValue": "-60m, now",
				"token": "otherT"
			},
			"type": "input.timerange"
		},
		"globalTime": {
			"options": {
				"defaultValue": "-60m, now",
				"token": "TimeRange"
			},
			"type": "input.timerange"
		}
	},
	"description": "",
	"dataSources": {
		"ds_UXEaDW7w": {
			"options": {
				"queryParameters": {
					"earliest": "$TimeRange.earliest$",
					"latest": "$TimeRange.latest$"
				},
				"refreshType": "delay",
				"query": "<your_SPL_search_>",
				"refresh": 60
			},
			"meta": {
				"serviceID": "95c99846-404f-4c92-9923-2a8c8594bff1",
				"kpiID": "SHKPI-95c99846-404f-4c92-9923-2a8c8594bff1"
			},
			"name": "Buttercup Store - ServiceHealthScore",
			"type": "ds.search"
		},
		"ds_VKYi2Qrj": {
			"options": {
				"queryParameters": {
					"earliest": "$otherT.earliest$",
					"latest": "$otherT.latest$"
				},
				"refreshType": "delay",
				"query": "<your_SPL_search_>",
				"refresh": 60
			},
			"meta": {
				"serviceID": "97646b7f-9c38-4d8d-839a-f32fd1c7443a",
				"kpiID": "SHKPI-97646b7f-9c38-4d8d-839a-f32fd1c7443a"
			},
			"name": "Application Performance - ServiceHealthScore",
			"type": "ds.search"
		}
	},
	"title": "<Glass table title>",
	"layout": {
		"options": {
			"height": 1080,
			"width": 1920,
			"backgroundColor": "#FFFFFF"
		},
		"globalInputs": [
			"globalTime",
			"otherTime"
		],
		"structure": [
			{
				"position": {
					"h": 210,
					"y": 150,
					"w": 300,
					"x": 100
				},
				"item": "viz_mYyk8UA5",
				"type": "block"
			},
			{
				"position": {
					"h": 220,
					"y": 160,
					"w": 290,
					"x": 570
				},
				"item": "viz_jbiEWOGc",
				"type": "block"
			}
		],
		"type": "absolute"
	}
}

User Manual

Build and edit beta glass tables in ITSI

Customize your glass table canvas

Change the canvas size

Change the background color

Upload a background image

Add and edit a custom icon

Add and edit text

Create and customize shapes

Connect a shape to a data source

Clone, layer, and delete objects

Add a KPI visualization

Add an ad hoc search visualization

Add a chart or table visualization

Configure drilldowns

Configure thresholds

Set different time ranges for visualizations

Example

Comments

Build and edit beta glass tables in ITSI