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. You can choose which row perspective is used and create your own row perspective.
- The custom configuration uses a JSON editor to edit the visible columns using 'cell tile' definitions described below.
For wall monitor displays a large high-impact display mode is available.
Walkthrough: Configuring a Matrix tile
Reference: Cell tile definitions
Why can't I sort the Matrix tile columns?
Walkthrough: Configuring a Matrix tile
-
Create a new dashboard or edit an existing one and add a new tile. Select the Resources and then the Matrix tile from the tile selection list.
-
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
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.
-
The columns section allows you to change from dynamic columns mode to custom columns mode. In dynamic mode you can choose which row perspective is used under the perspective heading. You can also save your own configuration as a named row perspective.
-
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.
-
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)" }, - Right-click and select cut.
-
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" }, -
Click Apply Changes to see the result.
- Click next.
- The display section allows you to change to large display, for a wall monitor. Leave this as default for now.
- Click done.
You can also save your configuration as a named row perspective.
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.
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.
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.
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.
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.
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.
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
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:
FAQs
Why can't I sort the Matrix tile columns?
The Matrix tile isn't really a table in the traditional sense. It is a grid or "matrix" of cell tiles - each cell tile is a separately rendered entity and the data is retrieved for each column of tiles independently from other columns. This means that the data for each column can and will load at different times. When sorting a traditional table, either a single query or a single joined dataset is being used to sort, process and display the entire table structure. This is not the case with the Matrix tile due to the independently queried columns and asynchronously rendered matrix of cell tiles.