6 minute readApplies to: v4

How to use the Matrix tile

Introduction

The Matrix tile shows detailed health state, performance metrics and other information for a list of resources.

The Matrix tile can be configured to show dynamic or custom columns.

  • In dynamic mode the columns are automatically populated by predefined perspectives.
  • The custom configuration uses a JSON editor to edit the visible columns using 'cell tile' definitions described below.

Matrix tile example

For wall monitor displays a large high-impact display mode is available.

High-impact display mode

Walkthrough: Configuring a Matrix tile

  1. Create a new dashboard or edit an existing one and add a new tile. Select the Matrix tile from the tile selection list.

    Matrix tile

  2. Provide a scope to show a list of the resources you want to see in your table. For more information about using scope in SquaredUp for Azure How to scope tiles

    Scope

    By default dynamic mode is selected, so a table of dynamically generated column configuration will be displayed for your selection based on the resources shown.

    Dynamic Mode

  3. The columns section allows you to change from dynamic columns mode to custom columns mode. Under perspective you will see a list of the perspective rows which are available.

    Columns

  4. Select custom mode to switch to the JSON editor. As nothing has been edited yet, the columns from the last selected perspective will be provided as the default column configuration. This makes simple edits, such as removing a column, easy.

    Custom

  5. Select the JSON for a column to remove, such as the Cost JSON shown below, (remembering to include the final comma):

    {
    	"_type": "celltile/azure-cost",
    	"config": {
    		"source": {
    			"timeframe": {
    				"range": "last30days",
    				"type": "fixed"
    			}
    		}
    	},
    	"title": "Cost (30 Days)"
    },
  6. Right-click and select cut.
  7. Paste the JSON in elsewhere to re-order the columns, for example before the Resource Group & Location JSON:

    {
    	"_type": "celltile/azure-cost",
    	"config": {
    		"source": {
    			"timeframe": {
    				"range": "last30days",
    				"type": "fixed"
    			}
    		}
    	},
    	"title": "Cost (30 Days)"
    },
    {
    	"_type": "celltile/text",
    	"config": {
    		"display": {
    			"contentTemplate": "{{resourceGroup}} | {{location}}"
    		}
    	},
    	"title": "Resource Group & Location"
    },
  8. Click Apply Changes to see the result.

    Moved columns

  9. Click next.
  10. The display section allows you to change to large display, for a wall monitor. Leave this as default for now.
  11. Click done.

Reference: Cell tile definitions

There are several cell tile definitions which can be used in the Matrix column custom configuration, which are described below.

Status

Displays the health state of a resource and its display name.

Status Cell tile

Configuration

Example:

{
	"title": "State",
	"_type": "celltile/azure-status",
	"config": {
		"display": {
			"showStatusIcon": false
		}
	}
}

Type: "celltile/azure-status"

Display Properties:

"showStatusIcon": true will show the status icon indicator. false will hide the icon. The default value is true.

"labelTemplate" a mustache template to render as custom label.

Source Properties: None

Status Block

Displays the health state of a resource as simple coloured block, with the colour indicating the health state.

Block Cell tile

Configuration Example:

{
	"title": "Status",
	"_type": "celltile/azure-status-block",
	"config": {
		"display": {
			"fullWidth": true
		}
	}
}

Type: celltile/azure-status-block

Display Properties:

"fullWidth": true the block will fill the available column width, false will use a fixed width. The default value is false.

"labelTemplate" a mustache template to render as custom label.

Source Properties: None

Custom Text

Renders a custom mustache template and displays the result in the cell.

Custom Text Template Cell tile

Configuration Example:

{
	"title": "Resource Group & Location",
	"_type": "celltile/text",
	"config": {
		"display": {
			"contentTemplate": "{{resourceGroup}} | {{location}}"
		}
	}
}

Type: celltile/text

Display Properties:

"contentTemplate" a mustache template to render. Can contain any valid template, the context resource for the current row will be provided as the template context.

Source Properties: None

Example content templates:

  • Display the Resource group and Location: "{{resourceGroup}} | {{location}}"
  • Display the SKU for a virtual machine: "{{properties.hardwareProfile.vmSize}}"
  • Display the Template "{{#if properties.storageProfile.imageReference}}{{properties.storageProfile.imageReference.offer}} {{properties.storageProfile.imageReference.sku}}{{else}}{{properties.storageProfile.osDisk.osType}}{{/if}}"

Source Properties: None

Cost

Shows the cost of the resource based on the timeframe selected.

Cost Template Cell tile

Configuration Example:

{
      	"title": "Cost (30 Days)",
		"_type": "celltile/azure-cost",
		"config": {
			"source": {
				"timeframe": {
					"range": "last30days",
					"type": "fixed"
				}
			}
		}
	}

Type: celltile/azure-cost

Display Properties: None

Source Properties:

"timeframe" Timeframe consists of two properties one for the range and the other for the type. Acceptable range values are: "last7days", "last30days", "last3months", "last6months", "last12months".

Bar

Displays a bar graph that visualises both a number and the resulting bar width based on the number value.

Bar Cell tile

Configuration Example:

{
    "title": "Network In (KB)",
	"_type": "celltile/azure-bar",
	"config": {
		"display": {
			"valueTemplate": "{{value ? (value/1024).toFixed(2) : '0'}}"
		},
		"source": {
			"metric": "Network In"
		}
	}
}

Type: celltile/azure-bar

Display Properties:

"valueTemplate" mustache template to execute that processes the "value" to be rendered as the bar graph label. By default this template is "{{value ? Math.min(value, 100) : ''}}"

"height" in pixels of the bar visualisation.

Source Properties:

The "metric" properties should be set to the appropriate metric to be retrieved by that data-source.

Example showing network out usage with the value keeping only two decimals formatted in valueTemplate:

{
    "title": "Network Out (KB)",
	"_type": "celltile/azure-bar",
	"config": {
		"display": {
			"valueTemplate": "{{value ? (value/1024).toFixed(2) : '0'}}"
		},
		"source": {
			"metric": "Network Out"
		}
	}
}

Performance as Sparkline

Displays a sparkline graph visualisation of Azure Monitor metrics data over time for a given resource.

Performance as Sparkline Cell tile

Configuration Example:

{
    "title": "CPU",
	"_type": "celltile/azure-sparkline",
	"config": {
		"source": {
			"metric": "Percentage CPU"
		}
	}
}

Type: celltile/azure-sparkline

Display Properties:

"height" in pixels of the graph.

"width" in pixels of the graph.

"verticalMargin" the margin above and below the graph.

"labelTemplate" a mustache template to render as the label, context is latest performance value as a number value.

"fill" if set to true it will fill the area under the sparkline to display in a line-graph style.

Source Properties:

The "metric" properties should be set to the appropriate metric to be retrieved by that data-source.

Example metrics:

`"metric": "Disk Read Operations/sec" - display the disc read operation speed.

`"metric": "Percentage CPU" - Shows the CPU usage of the resource.

Display

Display mode

Large high-impact display mode for wall monitors

Large wall display mode is switched on in the display section of the tile configuration by changing the size option from default to large, for example:

Large wall display mode

As well as provided per cell-tile resource linking, where each column type will provide an appropriate drill-down when clicked, the Matrix tile can automatically link the entire row to the resource drill-down for the row context resource. To use this, check the always link to row object option.

How to use custom labelling

How to scope tiles

Squared Up Ltd. (c) 2020Report an issue with this article