Building and editing beta glass tables 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.

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.

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
• Upload a background image
• Change the background color

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.

1. Click any part of the canvas that does not contain a visualization to display the Styling panel.
2. (Optional) 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.
3. Manually change the dimensions of the canvas, in pixels, using the Canvas Width and Canvas Height fields.
4. 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

1. Click the glass table canvas grid.
2. In the Styling 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.

3. Click savewhen you are 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.

1. In the Background Image section of the Styling 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.
2. 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.
3. Click View to see the image as it will appear in the glass table.
4. Click savewhen you are finished.

Add and edit a custom icon

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

1. In the editing toolbar, click the icon button .
2. Drop your image or click browse... to add it to the icon gallery.
3. Click the the icon to add it to your glass table.
4. To position the icon, either move it manually or enter X and Y values in the Position section of the Styling tab. Increasing X values moves the icon to the right. Increasing Y values moves the icon down.
5. To resize your icon, enter values in the W width and the H height fields or manually drag the edges.
6. Change the icon color and opacity on the Styling tab.

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.

1. While in edit mode, click the text button in the editing toolbar to add a text box to your glass table.
2. In the configuration panel, select the Styling tab. Use the X and Y fields to position the editing frame, and the H and W fields to adjust the height and width of the editing frame. The o field rotates the text. Negative numbers rotate the text counter-clockwise and positive numbers rotate the text clockwise.
3. Expand the Font Settings section of the Styling tab to choose a font, text size, and text color.
4. Click savewhen you are finished.

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.

You can not turn a shape into a KPI visualization. This means you can not set up a data source or thresholding for a shape.

When an object, such as a shape, is placed at (0,0) on the canvas axis, the top left corner of the object is placed in the top left corner of the canvas. When you increase the X value, the object moves to the right. When you increase the Y value, the object moves down. The (0,0) location is the default for background images.

1. On the editing toolbar, click the shapes button
2. Select a shape to add it to the glass table. When a shape is selected in the canvas, you can customize it in the following ways using the Styling tab in the editing panel or you can use keyboard shortcuts:
   • Change the color and opacity or ellipses and rectangles
   • Format Lines
   • Clone, layer, and delete objects
   • Select multiple visualizations at once

Change the color or opacity of a shape

Expand the Fill section of the Styling tab.

• To change the fill color, enter a color hex code such as #ffff00. You can also choose a default color from the color palette.
• Adjust the opacity by specifying a percentage in the Opacity (%) field.

Change the border of a shape

You can customize the color, thickness, and dash style of ellipses and rectangles. You can also change the corners of rectangles to be rounded by changing the border radius.

Expand the Border section of the Styling tab.

• Change the border Color by entering a hex code such as #ffff00. You can also choose a color from the color palette.
• Adjust the border Opacity by specifying an opacity percentage.
• Adjust the border Thickness by specifying a number, in pixels.
• Adjust the Radius to change the corner curvature percentage of a rectangle. You can specify a number between 0 and 100, inclusive. All corners are affected by this setting.
• Adjust the border Dash style by specifying a number representing the length of the dashes, as well as the spaces between them, in pixels.

Format lines

Add a line using the shapes button. A blue dot appears on the ends of the line when it is selected.

In the Configuration panel, select the Styling tab.

• To change the color and opacity of the line, expand the Stroke section.
  To change the stroke color, enter a hex code such as #ffff00. You can also choose a color from the color palette.
• Change the opacity by specifying a percentage in the Opacity field.
• Change the line thickness by specifying a number, in pixels, in the Thickness field.
• Change the style of the line by specifying a number in the Line Dash Style field.
  The number you specify will be the length of the dashes, as well as the spaces between them, in pixels.
• Hide or show arrows at either end of the line by expanding the Arrows section of the Styling tab.
• To change the length of a line, select the line, click the blue circle, and drag the end to the position you want.
• Snap to arbitrary points or objects.
  When you hover over a line's blue circle, a 4-sided arrow appears. Use this arrow to snap the line to one of the "+" symbols placed in convenient areas on the canvas, or to an object, such as a visualization, shape, or icon.

Clone, layer, and delete objects

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

You can perform the following actions on an object:

• Layer the object. The number of available options depends on the current layer of the object. For example, if the object is on the top layer of the canvas, you have two options. If the object is in a middle layer, you have four options.
• Clone the object. If you clone an object that is connected to a datasource, the cloned object is not connected to any datasource. You must connect it manually.
• Delete the object.

Use keyboard shortcuts to edit your beta glass table

The following is a list of keyboard shortcuts that you can use in the editor.

Function	Keyboard shortcut
Select an object	Press Tab until the correct visualization is highlighted. Press Enter or Return to select it.
Select multiple objects	Hold Command and use arrow keys to highlight multiple visualizations. Press Enter or Return to select them.
Cancel object selection	Press Esc to cancel the selection of a visualization.
Change the size of an object	Select one or more visualizations and hold the Alt or Option key while using the arrow keys to change the size of the visualization(s).
Move an object 1 pixel	Select an object and hold down Shift while using the arrow keys to move it one pixel in the desired direction.
Move an object 10 pixels at once	Select an object and use the arrow keys to move it 10 pixels in the desired direction.
Copy an object	Select an object and press Command + C to copy it.
Paste an object	After copying an object, press Command + V to paste it.
Delete an object	Select an object and press Delete.

Add a KPI visualization

Add a KPI visualization to display the associated search values which 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.

1. Click Data in the top right corner to display the services available in your IT environment. Only services you have permission to read are listed.
2. Expand a service to view its KPIs.
3. Select a KPI to add it as a glass table visualization.
4. 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 Data Settings, 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 Data Settings, 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.
5. Click savewhen you are 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.

1. Click Data in the top right corner to display the services available in your IT environment. Only services you have permission to read are listed.
2. Click Create Ad hoc Search.
3. Provide a datasource name and enter a search. For example, index=_internal | timechart count.
4. Select the time range for the search.
5. Click Save. The search is added to the list of ad hoc searches.
6. Click the ad hoc search to add it to the glass table.
7. 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 Data Settings, 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 Data Settings, 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.
8. Click savewhen you are 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.

1. Click Chart and select a chart type to add it to your glass table.
2. Under DataSource - primary, click Setup DataSource.
3. Click Create Ad hoc Search and write 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.
4. 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.
5. Click savewhen you are finished.

See also:

• Chart overview
• Table visualization overview

Configure drilldowns

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

1. Select the object you want to drill down from.
2. In the Configuration panel, click +Add Drilldown.
3. For On Click, choose Link to custom URL.
4. Provide a relative or absolute URL.

   If you do not 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.

5. (Optional) Select Open in new tab so the drilldown link opens in a new tab.
6. Click Save. 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 thresholding

Configure thresholding 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 KPIs and service health scores.

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

1. In edit mode, select the ad-hoc visualization for which you want to configure thresholds.
2. In the Configuration panel, expand Threshold Settings.
3. Toggle Thresholds to enable thresholding for the visualization.
4. 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. For example:
   

Each number represents the upper limit for that threshold color. In the example above, 25 is the upper limit for green, and anything above it will be yellow or red. It's a best practice to add a high upper limit for what you expect your metric values to be (for example, 100 in the example above). If this upper limit is exceeded, the visualization turns black.

In the example above:

• If the KPI value is less than 0, the visualization is gray.
• If the KPI value is 0 - 25, the visualization is green.
• If the KPI value is 26 - 50, the visualization is yellow.
• If the KPI value is 51 - 100, the visualization is yellow.
• If the KPI value is 101 and above, the visualization is black.