VMware tile

An EAM-X edition license is required for this feature. To upgrade please contact [email protected]

About VMware tiles

VMware tiles show you key metrics and states from your vSphere environment.

How to configure a VMware tile

If you don't already have a VMware vSphere provider in SquaredUp, you need to create one before you can configure a VMware tile (How to add a VMware vSphere provider).

  1. Add a new tile to a dashboard and click on Integrations > VMware.
  2. Select the visualization for your VMware tile and click Next.

    A VMware Scalar shows the count of the scope as one value, for example, "VM Count".

    A table of data, for example data about your VMs.

    Tip: You can turn the individual rows into links in the settings. For example, you can link the rows to the SCOM object using the object properties see Using object properties in the SquaredUp DS URL.

    Did you know? Users can search the grid, and temporarily change the column size and sorting of the grid (by clicking on the column headers) without having to access the settings. They can also expand a row by clicking on the three dots at the end of each row if cells are too small to show their entire content.

    Shows time-series data over time, in a graph with an x-axis (time) and a y-axis. You can show several objects, such as VMs, in one graph.

    Visualizes time-series data as vertical columns.

    Shows data over time (like line graphs), but each item gets its own graph instead of showing all lines in one graph.

    Visualizes both a number and the resulting bar width based on the number value.

    Shows the results in a donut shape.

    Shows the state of items as icons with different colors. You can display just the icons or together with a description. You can also use a background image and drag the icons into position on the image.

    Shows the state of items as blocks with different colors.

    This shows a grid of details of the alarms.

    If no scope is set then the tile will show all alarms.

  3. Provider:
    Select your VMware provider from the select provider drop-down and click Next.

    You can only use providers of the same type as the tile. Providers of other types won't be shown in the select provider drop-down.

  4. Scope
    Select the Scope for your tile (optional).

    VMware tiles are scoping against VMware objects, and not SCOM objects. So VMware tiles on a perspective will need their scope to be defined in the VMware tile.


    Select an Object Type first, and then populate the Objects, Folders or Resource Pools fields. Click in the Object Type box and press the down arrow on the keyboard to show you the list available.
    • Objects - allows you to enter a list of objects. Click in the Objects box and press the down arrow on the keyboard to show the list available.
    • Folders - allows you to enter a list of VMware Folders. Click in the Folders box and press the down arrow on the keyboard to show the list available. (Folders are organisational units in VMware that allow objects like VMs to be grouped and assigned the same set of permissions. There are default folders for various VMware object types that contain all instances of these types e.g vm, datastore, network and host.)
    • Resource Groups - allows you to enter a list of VMware Resource Groups. Click in the Resource Groups box and press the down arrow on the keyboard to show the list available. (VMware Resource Groups are similar to folders, but they allow admins to define what proportion of host resources the contents of the resource group will be allowed to use. There is a default Resources resource pool that is the top-level resource pool in the system).
  5. Settings for the visualization:
    Configure the settings for the visualization you chose.

    VMware Scalar tiles can only show a count of the scope.

    Scalar

    Font size

    Allows you to set the font size of the value in the tile.

    Alignment
    Select the scalar text alignment. Choose from left, center or right.
    Unit

    Allows you to add a unit to the value displayed in the Scalar tile. For example, if your value shows a time in milliseconds, you can enter "ms" or if your value shows pageviews, you can enter "pageviews".

    Value Formatter

    Allows you to format the value, using the mustache picker, and the modified values will be shown on the axis and hover values. For example, you can round the value up or down or convert it.

    Color

    Conditional formatting:

    You can display the data in different colors based on values you define here. For example, you can display the data in green when the value is below 100 and in red when it is above 100.

    1. Click on add to configure a condition.
    2. Click on select color.... to open the color picker. Select the color for this condition.
    3. Enter your condition in the field next to the color. You can use the value property and manipulate it with JavaScript String and Regex APIs. When you click on the mustache picker, you'll get some examples:
      • Value is greater than something, less than something, etc.
        For example: {{value < 10}} (The color you pick will be used if the value is less than 10)
      • Value is present in the result (scalar tiles only)
        For example: value.IndexOf('error') != -1 (The color you pick will be used if the string value "error" is present in the results)
      • Value matches one of the regular expressions you defined (scalar tiles only)
        For example: value.match(/healthy|good|up/) (The color you picked will be used if the string values are healthy, good, or up)

    Display:

    Here you decide how the color is used:

    Tile background
    Highlight the tile in the color you defined.
    Text foreground
    Display the text in the color you defined.

    Link options

    Allows you to turn the graph item(s) into links. You can either enter plain text to create a fixed link (URL always stays the same) or use dynamic properties to create a dynamic link.

    Dynamic links make use of dynamic properties which are inserted as part of the URL. This creates a template URL that will be resolved to an actual URL based on the items properties.

    For example, if you want to link to tickets in your ticket system and the format of the URL for tickets in your system is https://www.my-system/ticket-123, where 123 is the ticket ID, you can use the dynamic property that contains the ticket ID and enter the dynamic URL https://www.my-system/ticket-{{ticketID}}.

    • For scalars, you can only use the dynamic property value in dynamic links, which means the link changes when the value of the scalar changes. Since a scalar is just one item, it would also make sense to use a fixed link, for example the link to the website of which you are displaying the response time.
    • For status icon or bars and the rows of a grid, you usually want to use a dynamic link since you get multiple items or rows that represent different things. You can use any of the dynamic properties the mustache picker offers you.

    Dynamic mustache properties and values you need to change according to your instance are highlighted in bold.

    ServiceNow incidents:https://<your-instance>.service-now.com/nav_to.do?uri=%2Fincident.do%3Fsys_id%3D{{sys_id}}

    PagerDuty incidents:{{incident.html_url}}

    Azure DevOps projects:https://dev.azure.com/<your-instance>/{{name}}

    Azure DevOps builds:https://dev.azure.com/<your-instance>/_build/results?buildId={{id}}

    Zendesk tickets:https://<your-instance>.zendesk.com/agent/tickets/{{id}}

    Azure Application Insightshttps://portal.azure.com/#@squaredup.net/resource/{{ResourceId}}

    Grid columns

    Grid columns opens the grid designer, where you can show or hide columns, change the order of columns, edit column names or add custom columns.

    How to use the Grid Designer

    Property names that contain hyphens (for example properties.name-with-hyphens) can't be processed due to a JavaScript limitation. If you want to use a property that contains a hyphen, you have two options:

    1. If you have access to the data source and can change the name of the property, change the name of the property to a name without hyphens.
      For example, if your Elasticsearch query uses a property (an aggregation, a grouping or any other property you want to use) with a name that contains a hyphen, you can either access your Elasticsearch instance and change the name there or you can overwrite the name in the query dsl field.
    2. If you can't change the name of the property, you need to enter the property name in the following format:
      Original property name:
      {{properties.name-with-hyphens.value}}
      New format:
      {{properties['name-with-hyphens'].value}}

    Grid options

    Row link

    Allows you to turn the graph item(s) into links. You can either enter plain text to create a fixed link (URL always stays the same) or use dynamic properties to create a dynamic link.

    Dynamic links make use of dynamic properties which are inserted as part of the URL. This creates a template URL that will be resolved to an actual URL based on the items properties.

    For example, if you want to link to tickets in your ticket system and the format of the URL for tickets in your system is https://www.my-system/ticket-123, where 123 is the ticket ID, you can use the dynamic property that contains the ticket ID and enter the dynamic URL https://www.my-system/ticket-{{ticketID}}.

    • For scalars, you can only use the dynamic property value in dynamic links, which means the link changes when the value of the scalar changes. Since a scalar is just one item, it would also make sense to use a fixed link, for example the link to the website of which you are displaying the response time.
    • For status icon or bars and the rows of a grid, you usually want to use a dynamic link since you get multiple items or rows that represent different things. You can use any of the dynamic properties the mustache picker offers you.

    Dynamic mustache properties and values you need to change according to your instance are highlighted in bold.

    ServiceNow incidents:https://<your-instance>.service-now.com/nav_to.do?uri=%2Fincident.do%3Fsys_id%3D{{sys_id}}

    PagerDuty incidents:{{incident.html_url}}

    Azure DevOps projects:https://dev.azure.com/<your-instance>/{{name}}

    Azure DevOps builds:https://dev.azure.com/<your-instance>/_build/results?buildId={{id}}

    Zendesk tickets:https://<your-instance>.zendesk.com/agent/tickets/{{id}}

    Azure Application Insightshttps://portal.azure.com/#@squaredup.net/resource/{{ResourceId}}

    Property names that contain hyphens (for example properties.name-with-hyphens) can't be processed due to a JavaScript limitation. If you want to use a property that contains a hyphen, you have two options:

    1. If you have access to the data source and can change the name of the property, change the name of the property to a name without hyphens.
      For example, if your Elasticsearch query uses a property (an aggregation, a grouping or any other property you want to use) with a name that contains a hyphen, you can either access your Elasticsearch instance and change the name there or you can overwrite the name in the query dsl field.
    2. If you can't change the name of the property, you need to enter the property name in the following format:
      Original property name:
      {{properties.name-with-hyphens.value}}
      New format:
      {{properties['name-with-hyphens'].value}}

    Show column headers

    You can choose between showing or hiding the header for all columns.

    Expand rows automatically

    Activate this checkbox if you want the row height to expand automatically based on the row content, for example if your grid uses increased text size, images, emojis etc.

    Limit number of results displayed
    You can set a limit of the initial number of results displayed in the grid. If you have set a limit and there are more results to display, users will see a "show all" button below the grid.
    Font size

    Use the slider to adjust the font size.

    Tip for column sizing: You can change the column width directly in the grid by clicking on the divider lines between columns and dragging them to the width you want. You need to show column headers (by activating the show column headers check box) to be able to change the column width.
    Resizing columns while in edit mode affects how the grid looks by default when users open the dashboard. Users can temporarily change the column sizes by dragging them, but those changes only last until they leave the page.

    Metric Level
    Select a Metric Level. In VMware Metrics are called Statistics. Level 1 metrics are enabled by default, but VMware admins can modify vCenter to collect higher level metrics if needed.
    Choose Metric
    Click in the box to show the list available.
    Metric Label
    This allows you to specify the metric label, which is then displayed on the y-axis and hover value.


    You should select the label that matches how the the data is being returned, or use the Other option to specify a custom metric label, such as MHz or ms.

    The Timeframe section allows you to determine the timeframe for the data. You can choose either to use:

    Use Page Timeframe

    The Page Timeframe is the timeframe setting a dashboard or perspective is currently using. These timeframes are all relative to the current time, for example 7 days ago until now. When a user changes the page timeframe, all tiles that have Use Page Timeframe set will adapt to the new timeframe. (Tiles that do not have Use Page Timeframe set (i.e. are set to Specific Timeframe or Custom Timeframe) are not affected and won't change.)

    The Custom option can be used to set timeframes using ISO 8601 format

    SquaredUp DS does not support the week notation.

    Specific Timeframe

    Choosing a Specific Timeframe allow you to set a fixed timeframe such as Last 1 hour or Last 7 days. You can use the available timeframes button to list the timeframes you can pick.


    These timeframes are all relative to the current time, for example 7 days ago until now. Using this setting means that any change the user makes to the page timeframe is ignored.

    The Custom option can be used to set timeframes using ISO 8601 format

    SquaredUp DS does not support the week notation.

    Custom Timeframe

    This allows you to set a fixed timeframe window from the time and calendar picker. This sets a completely customizable timeframe window, not relative to now.

    Top N

    Here you can define a limit for the number of results you want to see. Activate the limit number of results displayed checkbox to enter a limit for results. You can choose if this limit should be applied from the top ranking results down (ascending, default option) or from the bottom ranking results up (descending).

    Threshold

    You can choose to apply a threshold line at a specified value, and whether you wish to fill above or below this value, or just show the line. For example, for free disk space you might want to fill below the line to highlight when space goes below a particular threshold. For processor information you might want to fill above the line to highlight when processor percentage goes above that threshold. The threshold is also shown on the drilldown view.

    Max, min, avg

    When drilled-down to view a graph, you can select the min, max and avgoptions for each object (displayed to the right of the graph), which displays a line cutting horizontally across the graph a each of the selected value points.

    Data range

    The Data Range option allows you to choose the range of data the graph will display. For line graphs, this means the data on the y-axis.

    percentage
    Shows 0 to 100
    fit to data
    Shows the data minimum to data maximum
    fit to data (from zero)
    Shows from 0 to the data maximum
    custom
    Allows you to specify the min and max
    custom fit
    Allows you to specify the min and max limits, so that data outside your settings will not be shown. If all the data falls within your specified ranges then the y-axis range will fit to the data rather than your caps.

    Display

    Height:

    Allows you to set the height of the tile with a slider.

    Show hover details:

    Shows the value for all lines at any point you hover. There may not be a value exactly where you hover so the value is interpolated from the values either side.

    Show points:

    Shows where the data points are on the line. Useful to identify missing points, or detail for changing data.

    Show trend

    Enable the Show Trend Linestoggle to display a trend line for the line graph data. Disable the toggle to hide the trend line.

    Custom colors:

    You can display the data in different colors based on labels. For example, you can display data in green for a specific user.

    1. Click on select color.... to open the color picker. Select the color for this condition.
    2. Enter your condition in the field next to the color. You can use the label property and manipulate it with JavaScript String and Regex APIs. When you click on the mustache picker, you'll get some examples:
      • Condition is true if the label contains something
        For example: {{label.indexOf('SQL') != -1}} (The color you pick will be used if the label contains 'SQL')
      • Condition is true if the label contains multiple things
        For example: {{label.match(/C:|D:|E:/) != null}} (The color you pick will be used if the label contains 'C:', 'D:' or 'E:')
      • Condition is true if the label contains multiple things with multiple variations
        For example: {{label.match(/^[Ss]erver[0-9]+$/) != null}} (The color you pick will be used if the label is 'Server' or 'server' with a number after it)

    Label

    Allows you to change the label of the results.

    Options

    Show legend

    Allows you to show or hide the legend of the graph.

    Sort legend

    Allows you to sort the legend entries is ascending or descending order.

    Label:

    auto

    Choose this option if you want to use the default label that has been created automatically.

    custom

    Here you can change the label to a custom label. You can use static text and dynamic properties. Use the mustache picker

    to select dynamic properties from the response data to use them as labels.

    For more information see How to use Custom Labels

    Value Formatter

    Allows you to format the value, using the mustache picker, and the modified values will be shown on the axis and hover values. For example, you can round the value up or down or convert it.

    Metric Level
    Select a Metric Level. In VMware Metrics are called Statistics. Level 1 metrics are enabled by default, but VMware admins can modify vCenter to collect higher level metrics if needed.
    Choose Metric
    Click in the box to show the list available.
    Metric Label
    This allows you to specify the metric label, which is then displayed on the y-axis and hover value.


    You should select the label that matches how the the data is being returned, or use the Other option to specify a custom metric label, such as MHz or ms.

    The Timeframe section allows you to determine the timeframe for the data. You can choose either to use:

    Use Page Timeframe

    The Page Timeframe is the timeframe setting a dashboard or perspective is currently using. These timeframes are all relative to the current time, for example 7 days ago until now. When a user changes the page timeframe, all tiles that have Use Page Timeframe set will adapt to the new timeframe. (Tiles that do not have Use Page Timeframe set (i.e. are set to Specific Timeframe or Custom Timeframe) are not affected and won't change.)

    The Custom option can be used to set timeframes using ISO 8601 format

    SquaredUp DS does not support the week notation.

    Specific Timeframe

    Choosing a Specific Timeframe allow you to set a fixed timeframe such as Last 1 hour or Last 7 days. You can use the available timeframes button to list the timeframes you can pick.


    These timeframes are all relative to the current time, for example 7 days ago until now. Using this setting means that any change the user makes to the page timeframe is ignored.

    The Custom option can be used to set timeframes using ISO 8601 format

    SquaredUp DS does not support the week notation.

    Custom Timeframe

    This allows you to set a fixed timeframe window from the time and calendar picker. This sets a completely customizable timeframe window, not relative to now.

    Threshold

    You can choose to apply a threshold line at a specified value, and whether you wish to fill above or below this value, or just show the line. For example, for free disk space you might want to fill below the line to highlight when space goes below a particular threshold. For processor information you might want to fill above the line to highlight when processor percentage goes above that threshold. The threshold is also shown on the drilldown view.

    Data range

    The Data Range option allows you to choose the range of data the graph will display. For line graphs, this means the data on the y-axis.

    percentage
    Shows 0 to 100
    fit to data
    Shows the data minimum to data maximum
    fit to data (from zero)
    Shows from 0 to the data maximum
    custom
    Allows you to specify the min and max
    custom fit
    Allows you to specify the min and max limits, so that data outside your settings will not be shown. If all the data falls within your specified ranges then the y-axis range will fit to the data rather than your caps.

    Display

    Height:

    Allows you to set the height of the tile with a slider.

    Show hover details:

    Shows the value for all lines at any point you hover. There may not be a value exactly where you hover so the value is interpolated from the values either side.

    Solid bars:

    Show the bars as solid color or translucent.

    Custom colors:

    You can display the data in different colors based on labels. For example, you can display data in green for a specific user.

    1. Click on select color.... to open the color picker. Select the color for this condition.
    2. Enter your condition in the field next to the color. You can use the label property and manipulate it with JavaScript String and Regex APIs. When you click on the mustache picker, you'll get some examples:
      • Condition is true if the label contains something
        For example: {{label.indexOf('SQL') != -1}} (The color you pick will be used if the label contains 'SQL')
      • Condition is true if the label contains multiple things
        For example: {{label.match(/C:|D:|E:/) != null}} (The color you pick will be used if the label contains 'C:', 'D:' or 'E:')
      • Condition is true if the label contains multiple things with multiple variations
        For example: {{label.match(/^[Ss]erver[0-9]+$/) != null}} (The color you pick will be used if the label is 'Server' or 'server' with a number after it)

    Label

    Allows you to change the label of the results.

    Options

    Show legend

    Allows you to show or hide the legend of the graph.

    Sort legend

    Allows you to sort the legend entries is ascending or descending order.

    Label:

    auto

    Choose this option if you want to use the default label that has been created automatically.

    custom

    Here you can change the label to a custom label. You can use static text and dynamic properties. Use the mustache picker

    to select dynamic properties from the response data to use them as labels.

    For more information see How to use Custom Labels

    Value Formatter

    Allows you to format the value, using the mustache picker, and the modified values will be shown on the axis and hover values. For example, you can round the value up or down or convert it.

    Metric Level
    Select a Metric Level. In VMware Metrics are called Statistics. Level 1 metrics are enabled by default, but VMware admins can modify vCenter to collect higher level metrics if needed.
    Choose Metric
    Click in the box to show the list available.
    Metric Label
    This allows you to specify the metric label, which is then displayed on the y-axis and hover value.


    You should select the label that matches how the the data is being returned, or use the Other option to specify a custom metric label, such as MHz or ms.

    The Timeframe section allows you to determine the timeframe for the data. You can choose either to use:

    Use Page Timeframe

    The Page Timeframe is the timeframe setting a dashboard or perspective is currently using. These timeframes are all relative to the current time, for example 7 days ago until now. When a user changes the page timeframe, all tiles that have Use Page Timeframe set will adapt to the new timeframe. (Tiles that do not have Use Page Timeframe set (i.e. are set to Specific Timeframe or Custom Timeframe) are not affected and won't change.)

    The Custom option can be used to set timeframes using ISO 8601 format

    SquaredUp DS does not support the week notation.

    Specific Timeframe

    Choosing a Specific Timeframe allow you to set a fixed timeframe such as Last 1 hour or Last 7 days. You can use the available timeframes button to list the timeframes you can pick.


    These timeframes are all relative to the current time, for example 7 days ago until now. Using this setting means that any change the user makes to the page timeframe is ignored.

    The Custom option can be used to set timeframes using ISO 8601 format

    SquaredUp DS does not support the week notation.

    Custom Timeframe

    This allows you to set a fixed timeframe window from the time and calendar picker. This sets a completely customizable timeframe window, not relative to now.

    Data Range

    The Data Range option allows you to choose the range of data the graph will display. For line graphs, this means the data on the y-axis.

    percentage
    Shows 0 to 100
    fit to data
    Shows the data minimum to data maximum
    fit to data (from zero)
    Shows from 0 to the data maximum
    custom
    Allows you to specify the min and max
    custom fit
    Allows you to specify the min and max limits, so that data outside your settings will not be shown. If all the data falls within your specified ranges then the y-axis range will fit to the data rather than your caps.

    Sort

    Sort allows you to change the order of the results displayed. You can sort by value (ascending or descending) or label (alphabetically ascending or descending).

    Value

    Value Formatter

    Allows you to format the value, using the mustache picker, and the modified values will be shown on the axis and hover values. For example, you can round the value up or down or convert it.

    Label

    Allows you to change the label of the results.

    auto

    Choose this option if you want to use the default label that has been created automatically.

    custom

    Here you can change the label to a custom label. You can use static text and dynamic properties. Use the mustache picker

    to select dynamic properties from the response data to use them as labels.

    For more information see How to use Custom Labels

    Color

    multiple colors
    Here you can enable or disable graph color matching.

    If you turn color matching on, one item (a specific resource, object, site, anything you are displaying in your graphs) is shown in the same color in different graphs on one dashboard or one perspective. You can use either color matching or custom colors (colors based on values), they cannot both be used at the same time.

    custom colors

    Setting colors based on values

    You can display the data in different colors based on values you define here. For example, you can display the data in green when the value is below 100 and in red when it is above 100.

    1. Click on add to configure a condition.
    2. Click on select color.... to open the color picker. Select the color for this condition.
    3. Enter your condition in the field next to the color. You can use the value property and manipulate it with JavaScript String and Regex APIs. When you click on the mustache picker, you'll get some examples:
      • Value is greater than something, less than something, etc.
        For example: {{value < 10}} (The color you pick will be used if the value is less than 10)
      • Value is present in the result (scalar tiles only)
        For example: value.IndexOf('error') != -1 (The color you pick will be used if the string value "error" is present in the results)
      • Value matches one of the regular expressions you defined (scalar tiles only)
        For example: value.match(/healthy|good|up/) (The color you picked will be used if the string values are healthy, good, or up)

    You are able to combine value matching with label matching.

    Setting colors based on labels

    You can display the data in different colors based on labels. For example, you can display data in green for a specific user.

    1. Click on select color.... to open the color picker. Select the color for this condition.
    2. Enter your condition in the field next to the color. You can use the label property and manipulate it with JavaScript String and Regex APIs. When you click on the mustache picker, you'll get some examples:
      • Condition is true if the label contains something
        For example: {{label.indexOf('SQL') != -1}} (The color you pick will be used if the label contains 'SQL')
      • Condition is true if the label contains multiple things
        For example: {{label.match(/C:|D:|E:/) != null}} (The color you pick will be used if the label contains 'C:', 'D:' or 'E:')
      • Condition is true if the label contains multiple things with multiple variations
        For example: {{label.match(/^[Ss]erver[0-9]+$/) != null}} (The color you pick will be used if the label is 'Server' or 'server' with a number after it)

    You are able to combine label matching with value matching.

    Metric Level
    Select a Metric Level. In VMware Metrics are called Statistics. Level 1 metrics are enabled by default, but VMware admins can modify vCenter to collect higher level metrics if needed.
    Choose Metric
    Click in the box to show the list available.
    Metric Label
    This allows you to specify the metric label, which is then displayed on the y-axis and hover value.


    You should select the label that matches how the the data is being returned, or use the Other option to specify a custom metric label, such as MHz or ms.

    Data Range

    The Data Range option allows you to choose the range of data the graph will display. For line graphs, this means the data on the y-axis.

    percentage
    Shows 0 to 100
    fit to data
    Shows the data minimum to data maximum
    fit to data (from zero)
    Shows from 0 to the data maximum
    custom
    Allows you to specify the min and max
    custom fit
    Allows you to specify the min and max limits, so that data outside your settings will not be shown. If all the data falls within your specified ranges then the y-axis range will fit to the data rather than your caps.

    Sort

    Sort allows you to change the order of the results displayed. You can sort by value (ascending or descending) or label (alphabetically ascending or descending).

    Value

    Value formatter

    Allows you to format the value, using the mustache picker, and the modified values will be shown on the axis and hover values. For example, you can round the value up or down or convert it.

    Label

    Allows you to change the label of the results.

    auto

    Choose this option if you want to use the default label that has been created automatically.

    custom

    Here you can change the label to a custom label. You can use static text and dynamic properties. Use the mustache picker

    to select dynamic properties from the response data to use them as labels.

    For more information see How to use Custom Labels

    Display

    Vertical:

    Tick this option to show vertical bars, otherwise horizontal bars are shown.

    Bar width:

    Allows you to set the width of the bars with a slider.

    Color

    multiple colors
    Here you can enable or disable graph color matching.

    If you turn color matching on, one item (a specific resource, object, site, anything you are displaying in your graphs) is shown in the same color in different graphs on one dashboard or one perspective. You can use either color matching or custom colors (colors based on values), they cannot both be used at the same time.

    custom colors

    Setting colors based on values

    You can display the data in different colors based on values you define here. For example, you can display the data in green when the value is below 100 and in red when it is above 100.

    1. Click on add to configure a condition.
    2. Click on select color.... to open the color picker. Select the color for this condition.
    3. Enter your condition in the field next to the color. You can use the value property and manipulate it with JavaScript String and Regex APIs. When you click on the mustache picker, you'll get some examples:
      • Value is greater than something, less than something, etc.
        For example: {{value < 10}} (The color you pick will be used if the value is less than 10)
      • Value is present in the result (scalar tiles only)
        For example: value.IndexOf('error') != -1 (The color you pick will be used if the string value "error" is present in the results)
      • Value matches one of the regular expressions you defined (scalar tiles only)
        For example: value.match(/healthy|good|up/) (The color you picked will be used if the string values are healthy, good, or up)

    You are able to combine value matching with label matching.

    Setting colors based on labels

    You can display the data in different colors based on labels. For example, you can display data in green for a specific user.

    1. Click on select color.... to open the color picker. Select the color for this condition.
    2. Enter your condition in the field next to the color. You can use the label property and manipulate it with JavaScript String and Regex APIs. When you click on the mustache picker, you'll get some examples:
      • Condition is true if the label contains something
        For example: {{label.indexOf('SQL') != -1}} (The color you pick will be used if the label contains 'SQL')
      • Condition is true if the label contains multiple things
        For example: {{label.match(/C:|D:|E:/) != null}} (The color you pick will be used if the label contains 'C:', 'D:' or 'E:')
      • Condition is true if the label contains multiple things with multiple variations
        For example: {{label.match(/^[Ss]erver[0-9]+$/) != null}} (The color you pick will be used if the label is 'Server' or 'server' with a number after it)

    You are able to combine label matching with value matching.

    The VMware Donut tiles default to showing Health State, but can be configured as a general purpose donut using VMware object properties. For example, it’s possible to show VM health status in one donut and a count of VMs by OS type in another. This is achieved via the Data Mapping panel in this donut, along with some default custom colors for health states.

    Data mapping

    Property names that contain hyphens (for example properties.name-with-hyphens) can't be processed due to a JavaScript limitation. If you want to use a property that contains a hyphen, you have two options:

    1. If you have access to the data source and can change the name of the property, change the name of the property to a name without hyphens.
      For example, if your Elasticsearch query uses a property (an aggregation, a grouping or any other property you want to use) with a name that contains a hyphen, you can either access your Elasticsearch instance and change the name there or you can overwrite the name in the query dsl field.
    2. If you can't change the name of the property, you need to enter the property name in the following format:
      Original property name:
      {{properties.name-with-hyphens.value}}
      New format:
      {{properties['name-with-hyphens'].value}}

    Data Aggregation

    Here you can aggregate the results of the return data.

    None: No aggregation, use raw data (for example, when the data provided has already been aggregated in some way).

    Count: Count how many results are returned (for example, when you return a list of unavailable servers, you can count the results to show how many servers are unavailable).

    Sum: Show the sum of all results (for example, your return data is a list of objects in various states and you want to know how many objects there are in total). For sum, you need numeric values. If your return data contains strings, you need to convert them into a numeric value.

    Grouping

    Here you can define a group to take a closer look at the graph's value(s). Each item in the group will create its own series (a line in a line graph, a bar in a bar graph etc.). For example, if you group the value response time by servers on a line graph, you'll see one line per server, each line showing you the response time for this one server over time.

    To enter your grouping, you have to find the property that contains it. You can use the mustache picker to see every property returned from the response data. Pick the property that contains the grouping you want your graph to show.

    Note: If you type in the property, make sure you add the mustache {{}} to the property name. Otherwise, you'll either get an error message or the property will be interpreted as a static value and be the same for every result.

    Note: If your grouping needs more than one property, you can combine multiple properties. For example, if you want to see the disk space on the c: drive of different computers, your grouping needs to be c: drive and computer. You can combine them in one mustache {{PropertyForComputer + PropertyForC:Drive}} or keep them in separate mustaches {{PropertyForComputer} {PropertyForC:Drive}}.

    Metrics

    Here you define which value the graph will show. For example, if you want to see the response time of different servers, your metric value would be response time. If you want to see the number of tickets, your metric value would be number (of tickets).

    To enter your metric value, you have to find the property that contains that value. You can use the mustache picker to see every property returned from the response data. Pick the property that contains the value you want your graph to show

    Note: If you type in the property, make sure you add the mustache {{}} to the property name. Otherwise, you'll either get an error message or the property will be interpreted as a static value and be the same for every result.

    Note: The metric value must be a numeric object. If an API returns values as strings, you can convert them from a string to a numeric object with the parseFloat() function.

    Info: You can manipulate the value by adding operators to add, substract, divide or multiply. You can pick additonal properties from the response data or insert plain text for those functions. For example, if you want to multiply two properties you can do that by entering {{PropertyForMetricValue*PropertyForOtherMetricValue2}} . If you want to change Kb in Gb you can divide the value by 1024: {{PropertyForMetricValue/1024}}. You can also use more elaborate functions according to JavaScript syntax.

    Extract multiple metrics:

    For some tiles, if you want to see more than one value, you can tick the "Extract multiple metrics". You can manipulate those metrics exactly like the first metric you chose. The metrics won't affect each other, they are all treated as separate metrics. Each value will get its own series (a line in a line graph, a bar in a bar graph etc.).

    Sort

    Sort allows you to change the order of the results displayed. You can sort by Label, Value (ascending or descending) or Health State (ascending from healthy to critical or descending from critical to healthy)

    Value formatter

    Allows you to format the value, using the mustache picker, and the modified values will be shown on the axis and hover values. For example, you can round the value up or down or convert it.

    Display

    Size mode:

    Default
    Displays the donut scaled to the height of the tile.
    Fill
    Enlarges the donut to use the whole width of the tile. If you chose the fill option and show the legend, you can define the size of the legend with a slider.

    Show legend:

    Options

    Show legend

    Allows you to show or hide the legend of the graph.

    Table or Inline:

    Show the legend as a separate table or as labels pointing to the segments. When using Inline you can also hide the segment values, and use the slider to change the size of the labels.

    Show zero values in legend:

    Will show legend items for values of zero which are otherwise missing from the donut.

    Fixed height scrollable legend:

    Sets the legend to a fixed height where you can scroll through the items. This means that the tile doesn't become too large if there are many items.

    Display mode:

    Allows you to switch between displaying absolute values or percentages.

    Color palette:

    Here you can choose between different color palettes.

    Note: If there are more items than colors, the colors repeat from the beginning.

    Tip for displaying priorities or health states: If you want to display priorities or health states from a data source that doesn't enrich the data with information about priority or health (like the SQL tile or external APIs), use the custom color option and map the results to the correct color. This way, you can make sure that healthy or low priority results are displayed in green, unhealthy or high priority results are displayed in red, etc. If you use the color palettes Priorities, Health1, or Health2 the colors get assigned depending on how the results are sorted, which doesn't guarantee that the colors make sense for the priority or state they represent.

    General
    10 different colors without specific meaning
    Priorities
    5 different colors representing 5 different priority states
    Health1
    3 different colors representing 3 different health states
    (red=unhealthy, green=healthy, gray=unknown)
    Health2
    4 different colors representing 4 different health states
    (red=critical, orange=unhealthy, green=healthy, gray=unknown)
    Pastel
    10 different pastel colors without specific meaning
    Blue
    4 different shades of blue from dark to light
    Orange
    4 different shades of orange from dark to light
    Green
    4 different shades of green from dark to light
    Pink
    4 different shades of pink from dark to light
    Custom

    Setting colors based on values

    You can display the data in different colors based on values you define here. For example, you can display the data in green when the value is below 100 and in red when it is above 100.

    1. Click on add to configure a condition.
    2. Click on select color.... to open the color picker. Select the color for this condition.
    3. Enter your condition in the field next to the color. You can use the value property and manipulate it with JavaScript String and Regex APIs. When you click on the mustache picker, you'll get some examples:
      • Value is greater than something, less than something, etc.
        For example: {{value < 10}} (The color you pick will be used if the value is less than 10)
      • Value is present in the result (scalar tiles only)
        For example: value.IndexOf('error') != -1 (The color you pick will be used if the string value "error" is present in the results)
      • Value matches one of the regular expressions you defined (scalar tiles only)
        For example: value.match(/healthy|good|up/) (The color you picked will be used if the string values are healthy, good, or up)

    You are able to combine value matching with label matching.

    Setting colors based on labels

    You can display the data in different colors based on labels. For example, you can display data in green for a specific user.

    1. Click on select color.... to open the color picker. Select the color for this condition.
    2. Enter your condition in the field next to the color. You can use the label property and manipulate it with JavaScript String and Regex APIs. When you click on the mustache picker, you'll get some examples:
      • Condition is true if the label contains something
        For example: {{label.indexOf('SQL') != -1}} (The color you pick will be used if the label contains 'SQL')
      • Condition is true if the label contains multiple things
        For example: {{label.match(/C:|D:|E:/) != null}} (The color you pick will be used if the label contains 'C:', 'D:' or 'E:')
      • Condition is true if the label contains multiple things with multiple variations
        For example: {{label.match(/^[Ss]erver[0-9]+$/) != null}} (The color you pick will be used if the label is 'Server' or 'server' with a number after it)

    You are able to combine label matching with value matching.

    Link options

    item link:

    Allows you to turn the graph item(s) into links. You can either enter plain text to create a fixed link (URL always stays the same) or use dynamic properties to create a dynamic link.

    Dynamic links make use of dynamic properties which are inserted as part of the URL. This creates a template URL that will be resolved to an actual URL based on the items properties.

    For example, if you want to link to tickets in your ticket system and the format of the URL for tickets in your system is https://www.my-system/ticket-123, where 123 is the ticket ID, you can use the dynamic property that contains the ticket ID and enter the dynamic URL https://www.my-system/ticket-{{ticketID}}.

    • For scalars, you can only use the dynamic property value in dynamic links, which means the link changes when the value of the scalar changes. Since a scalar is just one item, it would also make sense to use a fixed link, for example the link to the website of which you are displaying the response time.
    • For status icon or bars and the rows of a grid, you usually want to use a dynamic link since you get multiple items or rows that represent different things. You can use any of the dynamic properties the mustache picker offers you.

    Dynamic mustache properties and values you need to change according to your instance are highlighted in bold.

    ServiceNow incidents:https://<your-instance>.service-now.com/nav_to.do?uri=%2Fincident.do%3Fsys_id%3D{{sys_id}}

    PagerDuty incidents:{{incident.html_url}}

    Azure DevOps projects:https://dev.azure.com/<your-instance>/{{name}}

    Azure DevOps builds:https://dev.azure.com/<your-instance>/_build/results?buildId={{id}}

    Zendesk tickets:https://<your-instance>.zendesk.com/agent/tickets/{{id}}

    Azure Application Insightshttps://portal.azure.com/#@squaredup.net/resource/{{ResourceId}}

    Property names that contain hyphens (for example properties.name-with-hyphens) can't be processed due to a JavaScript limitation. If you want to use a property that contains a hyphen, you have two options:

    1. If you have access to the data source and can change the name of the property, change the name of the property to a name without hyphens.
      For example, if your Elasticsearch query uses a property (an aggregation, a grouping or any other property you want to use) with a name that contains a hyphen, you can either access your Elasticsearch instance and change the name there or you can overwrite the name in the query dsl field.
    2. If you can't change the name of the property, you need to enter the property name in the following format:
      Original property name:
      {{properties.name-with-hyphens.value}}
      New format:
      {{properties['name-with-hyphens'].value}}

    Label

    Allows you to change the label of the results.

    name

    Choose this option if you want to use the default label that has been created automatically.

    custom

    Here you can change the label to a custom label. You can use static text and dynamic properties. Use the mustache picker

    to select dynamic properties from the response data to use them as labels.

    For more information see How to use Custom Labels

    Sublabel

    Allows you to add a sublabel of the results.

    custom

    Here you can change the label to a custom label. You can use static text and dynamic properties. Use the mustache picker

    to select dynamic properties from the response data to use them as labels.

    For more information see How to use Custom Labels

    none
    By default, no sublabels are shown.

    Sort

    Sort allows you to change the order of the results displayed. You can also group them by their characteristics.

    default
    By default, the sorting of objects depends on the data source. This can be alphabetical sorting or the order in which data comes back from an API request.
    sort by
    Sort by label, health state, or health state + availability where objects are sorted by availability (offline or maintenance mode) as well as health state.
    Ascending or descending
    group by
    Group by label, health state, or health state + availability where objects are Grouped by availability (offline or maintenance mode) as well as health state, for example Error (Available) and Error (Unavailable).
    Ascending or descending

    Limit:

    Allows you to define a maximum number of objects that will be shown. When 'group by' is used the limit applies to each group individually, for example to show 10 objects in each health state.

    Image

    Here you can choose one of the provided images or upload your own.
    Tip: If you want a different selection of maps, you can download more at https://freevectormaps.com/

    Supported image formats: png, jpg, jpeg, gif, tif, tiff. svg, bmp
    Tip: SVG images resize best since they are vector images.

    File size limit: 10MB

    Image size: Images fill the size of the tile, which means you can resize the image by adjusting the tile's size. The size of the tile also depends on the screen the dashboard is being viewed on.

    Icons

    Here you can customize the icons on the image:

    • You can change the size of the icons with the slider
    • You can change the shape of the icons (square or circle)
    • You can drag the icons on the image into position

    Display styles for Status icons

    This setting is not done in a panel, you can change the display style even after you finished configuring the tile.

    You can use toggle zoom button at the top right of the tile to change between the different ways Status icons can be displayed.

    One long list
    Column list
    Icons only

    Link options

    item link:

    Allows you to turn the graph item(s) into links. You can either enter plain text to create a fixed link (URL always stays the same) or use dynamic properties to create a dynamic link.

    Dynamic links make use of dynamic properties which are inserted as part of the URL. This creates a template URL that will be resolved to an actual URL based on the items properties.

    For example, if you want to link to tickets in your ticket system and the format of the URL for tickets in your system is https://www.my-system/ticket-123, where 123 is the ticket ID, you can use the dynamic property that contains the ticket ID and enter the dynamic URL https://www.my-system/ticket-{{ticketID}}.

    • For scalars, you can only use the dynamic property value in dynamic links, which means the link changes when the value of the scalar changes. Since a scalar is just one item, it would also make sense to use a fixed link, for example the link to the website of which you are displaying the response time.
    • For status icon or bars and the rows of a grid, you usually want to use a dynamic link since you get multiple items or rows that represent different things. You can use any of the dynamic properties the mustache picker offers you.

    Dynamic mustache properties and values you need to change according to your instance are highlighted in bold.

    ServiceNow incidents:https://<your-instance>.service-now.com/nav_to.do?uri=%2Fincident.do%3Fsys_id%3D{{sys_id}}

    PagerDuty incidents:{{incident.html_url}}

    Azure DevOps projects:https://dev.azure.com/<your-instance>/{{name}}

    Azure DevOps builds:https://dev.azure.com/<your-instance>/_build/results?buildId={{id}}

    Zendesk tickets:https://<your-instance>.zendesk.com/agent/tickets/{{id}}

    Azure Application Insightshttps://portal.azure.com/#@squaredup.net/resource/{{ResourceId}}

    Property names that contain hyphens (for example properties.name-with-hyphens) can't be processed due to a JavaScript limitation. If you want to use a property that contains a hyphen, you have two options:

    1. If you have access to the data source and can change the name of the property, change the name of the property to a name without hyphens.
      For example, if your Elasticsearch query uses a property (an aggregation, a grouping or any other property you want to use) with a name that contains a hyphen, you can either access your Elasticsearch instance and change the name there or you can overwrite the name in the query dsl field.
    2. If you can't change the name of the property, you need to enter the property name in the following format:
      Original property name:
      {{properties.name-with-hyphens.value}}
      New format:
      {{properties['name-with-hyphens'].value}}

    Label

    Allows you to change the label of the results.

    name

    Choose this option if you want to use the default label that has been created automatically.

    custom

    Here you can change the label to a custom label. You can use static text and dynamic properties. Use the mustache picker

    to select dynamic properties from the response data to use them as labels.

    For more information see How to use Custom Labels

    Sublabel

    Allows you to add a sublabel of the results.

    custom

    Here you can change the label to a custom label. You can use static text and dynamic properties. Use the mustache picker

    to select dynamic properties from the response data to use them as labels.

    For more information see How to use Custom Labels

    none
    By default, no sublabels are shown.

    Sort

    Sort allows you to change the order of the results displayed. You can also group them by their characteristics.

    default
    By default, the sorting of objects depends on the data source. This can be alphabetical sorting or the order in which data comes back from an API request.
    sort by
    Sort by label, health state, or health state + availability where objects are sorted by availability (offline or maintenance mode) as well as health state.
    Ascending or descending
    group by
    Group by label, health state, or health state + availability where objects are Grouped by availability (offline or maintenance mode) as well as health state, for example Error (Available) and Error (Unavailable).
    Ascending or descending

    Limit:

    Allows you to define a maximum number of objects that will be shown. When 'group by' is used the limit applies to each group individually, for example to show 10 objects in each health state.

    Blocks

    Here you can set the number of columns for the blocks, their height and the font size within the blocks.

    If no scope is set then the tile will show all alarms.

    Grid columns

    Grid columns opens the grid designer, where you can show or hide columns, change the order of columns, edit column names or add custom columns.

    How to use the Grid Designer

    Property names that contain hyphens (for example properties.name-with-hyphens) can't be processed due to a JavaScript limitation. If you want to use a property that contains a hyphen, you have two options:

    1. If you have access to the data source and can change the name of the property, change the name of the property to a name without hyphens.
      For example, if your Elasticsearch query uses a property (an aggregation, a grouping or any other property you want to use) with a name that contains a hyphen, you can either access your Elasticsearch instance and change the name there or you can overwrite the name in the query dsl field.
    2. If you can't change the name of the property, you need to enter the property name in the following format:
      Original property name:
      {{properties.name-with-hyphens.value}}
      New format:
      {{properties['name-with-hyphens'].value}}

    Grid options

    Row link

    Allows you to turn the graph item(s) into links. You can either enter plain text to create a fixed link (URL always stays the same) or use dynamic properties to create a dynamic link.

    Dynamic links make use of dynamic properties which are inserted as part of the URL. This creates a template URL that will be resolved to an actual URL based on the items properties.

    For example, if you want to link to tickets in your ticket system and the format of the URL for tickets in your system is https://www.my-system/ticket-123, where 123 is the ticket ID, you can use the dynamic property that contains the ticket ID and enter the dynamic URL https://www.my-system/ticket-{{ticketID}}.

    • For scalars, you can only use the dynamic property value in dynamic links, which means the link changes when the value of the scalar changes. Since a scalar is just one item, it would also make sense to use a fixed link, for example the link to the website of which you are displaying the response time.
    • For status icon or bars and the rows of a grid, you usually want to use a dynamic link since you get multiple items or rows that represent different things. You can use any of the dynamic properties the mustache picker offers you.

    Dynamic mustache properties and values you need to change according to your instance are highlighted in bold.

    ServiceNow incidents:https://<your-instance>.service-now.com/nav_to.do?uri=%2Fincident.do%3Fsys_id%3D{{sys_id}}

    PagerDuty incidents:{{incident.html_url}}

    Azure DevOps projects:https://dev.azure.com/<your-instance>/{{name}}

    Azure DevOps builds:https://dev.azure.com/<your-instance>/_build/results?buildId={{id}}

    Zendesk tickets:https://<your-instance>.zendesk.com/agent/tickets/{{id}}

    Azure Application Insightshttps://portal.azure.com/#@squaredup.net/resource/{{ResourceId}}

    Property names that contain hyphens (for example properties.name-with-hyphens) can't be processed due to a JavaScript limitation. If you want to use a property that contains a hyphen, you have two options:

    1. If you have access to the data source and can change the name of the property, change the name of the property to a name without hyphens.
      For example, if your Elasticsearch query uses a property (an aggregation, a grouping or any other property you want to use) with a name that contains a hyphen, you can either access your Elasticsearch instance and change the name there or you can overwrite the name in the query dsl field.
    2. If you can't change the name of the property, you need to enter the property name in the following format:
      Original property name:
      {{properties.name-with-hyphens.value}}
      New format:
      {{properties['name-with-hyphens'].value}}

    Show column headers

    You can choose between showing or hiding the header for all columns.

    Expand rows automatically

    Activate this checkbox if you want the row height to expand automatically based on the row content, for example if your grid uses increased text size, images, emojis etc.

    Limit number of results displayed
    You can set a limit of the initial number of results displayed in the grid. If you have set a limit and there are more results to display, users will see a "show all" button below the grid.
    Font size

    Use the slider to adjust the font size.

    Tip for column sizing: You can change the column width directly in the grid by clicking on the divider lines between columns and dragging them to the width you want. You need to show column headers (by activating the show column headers check box) to be able to change the column width.
    Resizing columns while in edit mode affects how the grid looks by default when users open the dashboard. Users can temporarily change the column sizes by dragging them, but those changes only last until they leave the page.

  6. Click done to save the tile.

    The tile now shows data according to your settings.

Configuring some example VMware tiles

VMware Donut to show VMware tools versions

Tile: VMware Donut

Scope:

Data Mapping:

{{properties.vmTools.length > 0 ? properties.vmTools : 'Not Installed'}}

VMware Donut to show host memory usage by OS

Tile: VMware Donut

Scope:

Data Mapping:

VMware Donut to show consumed overhead memory

Tile: VMware Donut

Scope:

Data Mapping:

VMware Donut to show VM count by host

Tile: VMware Donut

Scope:

Data Mapping:

Was this article helpful?

Have more questions or facing an issue?
Submit a ticket