Cisco Observability Platform

This documentation and the Cisco Observability Platform functionalities it describes are subject to change. Data saved on the platform may disappear and APIs may change without notice.

DashUI Building Blocks

authz

Description

The authz building block renders elements using the Identity and Access Management (IAM) permissions.

Properties

Name Description Required
permissions These are the permissions identified by the given IDs in order to view the elements. These are used in a string. Yes
elements These are the elements to render if at least one of the permissions are granted to the user. These are used in TemplateElements. Yes
deniedElements The elements to render if none of the permissions exist for the user. These are used in TemplateElements. Yes

Example

json
Copy{
    "instanceOf": "authz",
    "permissions": "entitymetadata:updateFavoritesRule",
    "elements": {
        "instanceOf": "text",
        "content": "rendering template"
    },
  "deniedElements": {
        "instanceOf": "text",
        "content": "No permission"
    }
}

buttonScroll

Description

The buttonScroll building block wraps an array of elements and allows you to scroll through elements using arrow buttons.

Properties

Name Description Required
elements An array of child element objects. No

Example

json
Copy{
  "instanceOf": "buttonScroll",
  "elements": [
    {
      "instanceOf": "text",
      "content": "Hello "
    },
    {
      "instanceOf": "text",
      "content": "World!"
    },
    "..."
  ]
}

card

Description

The card building block wraps several types of children elements and places them into a container.

Properties

Name Description Required
elements Primary children displayed in the main content area. Example: template. Yes
more Children displayed when a user clicks a show more button. No
left Children displayed in the upper left in place of the title. This is used in template. No
right Children displayed in the upper-right in place of the menu items. This is used in template. No
props Configuration for the header of the card, which includes: actions, edit, icon, title, and subtitle. This is used in object. No

Example

json
Copy{
  "instanceOf": "card",
  "key": "tableEndPoints",
  "name": "tableEndPointsBackground",
  "props": {
    "style": {
      "width": "100%",
      "height": "230px"
    },
    "title": "Endpoints"
  },
  "more": [
   "..."
  ],
  "left": [
   "..."
  ],
  "right": [
   "..."
  ],
  "elements": [
   "..."
  ]
}

cardinality

Description

The cardinality building block renders a subtemplate based on cardinality of rows in response from UQE. If the count of the data does not match an element, then a defaultTemplate is rendered.

Properties

Name Description Required
elements An array of JSON objects. This includes count, a number and count of data that is matched for the subtemplate and template, which is a JSON object and template that is rendered when the count matches. No
defaultTemplate This is a JSON object. This is also a subtemplate that is rendered when count does not match an element. If a template is not provided, then it is treated as undefined. No

Example

json
Copy{
    "instanceOf": "cardinality",
    "elements": [
        {
        "count": 0,
        "template":
            {
                "instanceOf": "text",
                "content": "0"
            }
        },
        {
        "count": 1,
        "template":
            {
                "instanceOf": "string",
                "path": "attributes(name)"
            }
        }
    ],
    "defaultTemplate": {
        "instanceOf": "count",
        "type": "dataMode"
    }
}

cartesian

This element renders a chart in a cartesian coordinate system, the x-axis and y-axis. The UI component is Highchart.

Properties

Name Description Required
props The properties passed to the cartesian component. This is used an object. No
colors An array string of colors (CSS) to cycle through for children. No
title The title of the chart in a string. No
xAxis These include:
• max: number
• min: number
• type: category, datetime, linear, logarithmic, treegrid, timeFormat.		 No
yAxis These include:
• max: number
• min:number
• title: string
• syncId: string
• pointWidth: number
• maxPointWidth: number		 No
syncId An ID used to align the chart with other charts that have the same syncId. No
pointWidth The width of a given point in a column chart. No
maxpointWidth The maximum width of a given point in a column chart. No
children The elements that draw into the chart. These includes: type, name, namePath, lineStyle, spline, stack, and metric. No

Example

json
Copy{
  "instanceOf": "cartesian",
  "children": [
    {
      "type": "line",
      "name": "Calls Per Minute",
      "lineStyle": "solid",
      "metric": { "name": "apm:calls_min", "source": "sys:derived" }
    }
  ]
},
{
    "instanceOf": "cartesian",
    "children": [{
        "type": "areaRange",
        "name": "Metric abc min-max",
        "metric": {
            "name": "apm:metric0",
            "source": "sys:derived",
            "y0": {
              "field": "min",
              "scale": 0.000001,
            },
            "y1": {
              "field": "max",
              "scale": 0.000001,
            },
        }
    }]
}

clickable

Description

The clickable building block allows you to explore data by using navigation capabilities to template elements. trigger is the child element that is rendered. A clickable element can define these three actions: onClick, onSingleClick, and onDoubleClick.

These actions have a type that define how they are used. Common action types include: navigate.entity, navigate.entity.detail, navigate.filtered.list, and navigate.list.tab.

Properties

Name Description Required
appearance This provides default styles of the given type, which can be used in none, plain, button, and link. No
buttonType This determines the type of button, which provides default styles associated with a given type: primary, secondary, and menuItem. No
buttonBorder This determines the type of border style. This can be used in round, leftRounded, rightRounded, and squared. No
icon This specifies an icon to show in the button. This can be used in string. No
trigger This is the element that the clickeevents are limited by. This is used in TemplateElements. No
style These are additional styles that you can apply to the trigger element container. This is used in css.Styles. No
onClick This appears when you click on the trigger element. This also dispatches an event of the given action type and payload specified in the TemplateActions object. No
onClick This appears when you click on the trigger element. This also dispatches an event of the given action type and payload specified in the TemplateActions object. No
type This specifies the type of an action dispatched. This is used in string. No
payload This is the data passed on the event to the receiveing handler. This is used in Record<string, unknown>. No
paths This is the UQE path that you fetch the data from. This is used in string. No
expression This is the JSONata expression to transform the values fetched from the path. This takes the place of the payload, creating a dynamic payload from the data, and static payload if provided. This is used in string. No
onSingleClick This is similar to onClick, except this appears only on a single click on a trigger element. This is used in TemplateActions. No
onDoubleClick This is similar to onClick, except this appears only on a double click on a trigger element.This is used in TemplateActions. No

Example

json
Copy{
  "instanceOf": "clickable",
  "onClick": {
    "type": "navigate.entity.detail",
    "paths": ["id"],
    "expression": "$ ~> |$|{"
  },
  "trigger": {
    "instanceOf": "string",
    "path": ["attributes(service.name)", "id"],
  },

coalesce

Description

The coalesce building block renders the first element that has data from a list of elements. Data is determined either from the optional path property or from the elements render result. If there is no data for an element, then expect the return to be undefined.

Properties

Name Description Required
elements This is an array of element objects. Each element has the properties: path (optional), which is an optional, and template. No
defaultTemplate This is a template that is rendered if there is no data for elements. No

Example

json
Copy{
  "instanceOf": "coalesce",
  "elements": [
    {
      "path": "attributes(service.name)",
      "template": {
       "..."
      }
    },
    {
      "temlpate": {
        "instanceOf": "string",
        "path": "in..."
      }
    }
  ],
  "defaultTemplate": {
    "instanceOf": "text",
    "content": "-"
  }
}

collapsible

Description

The collapsible building block renders visible content. Visibility is determine by whether the selection keys have a matching value.

Properties

Name Description Required
selectionKeys This is used to determine whether you need to render the content, or the placeholder. If it matches a value in the values prop, then it will be visible. The default is set to default and is used in string. No
values This is used to match with the selectionKey to determine content visibility. This is used in SelectionValue and is a string. No
content These are elements that are rendered when visible. This is used in TemplateElements. No
placeholder These are elements that are rendered when content is not visible. This is used in TemplateElements. No

Example

json
Copy{
  "instanceOf": "collapsible",
  "selectionKeys": "biqTemplateKey",
  "values": ["expanded"],
  "content": {
    "instanceOf": "clickable",
    "appearance": "button",
    "buttonType": "primary",
    "style": {
      "marginRight": "4px"
    },
    "onClick": {
      "type": "update.selection",
      "payload": { "selectionKey": "biqTemplateKey", "value": null }
    },
    "trigger": {
      "instanceOf": "html",
      "style": {
        "display": "flex",
        "alignItems": "center",
        "gap": "8px"
      },
      "elements": [
        {
          "instanceOf": "icon",
          "fallbackIconName": "Action.TreeView",
          "tooltip": ""
        },
        {
          "instanceOf": "text",
          "content": "Hide Segments"
        }
      ]
    }
  }
}

container

Description

The container building block adds a style container around the children elements.

Properties

Name Description Required
elements These are children that are displayed in the container. These are used in TemplateElements. No
style This applies to custom styles and is used in css.Styles. No

Example

json
Copy{
  "instanceOf": "container",
  "elements": {}
}

count

Description

The count element displays the total count of data rows, or aggregated data that is retreieved from UQE. The mode parameter determines which counting strategy to use. Currently, there are two modes request and path. request shows the count based on path and UQE response. While data shows the count based on the number of rows returned in the UQE response.

Properties

Name Description Required
mode This is the property that determines which counting strategy to use. This is used in request and data. No
path This is an UQE association path that fetches aggregated data. This is used is string. No

Examples

Example 1

json
Copy{
  "instanceOf": "count",
  "mode": "request",
  "aggregatePath": "out(common:aggregates_of).to(apm:service_instance)"
}

Example 2

json
Copy{
  "instanceOf": "count",
  "mode": "data"
}

currency

Description

The currency building block renders monitary values. value and currency can be static, or data driven. This also supports JSONata expressions to calculate the value based on data. currency defaults to USD.

Properties

Name Description Required
value This is the string of a static value. No
valuePath This is a string that has as either a single UQE string, or a list of UQE strings. In the case that a list of paths has no valueExpression defined, then the first value will be used. No
valueExpression This is a string with a JSONata expression to calculate the value. The fetched data from the valuePath is available using the $data array. The original value either from value, or the first value from valuePath is available as value. No
currency This is a string of a static currency value. No
currencyPath This is a string of an UQE string that fetches the currency. No
emptyContent This is a string that shows the resulting value, null. This defaults to \u2013. No

Examples

Example 1

json
Copy{
  "instanceOf": "currency",
  "value": "5",
  "currency": "USD"
}

Example 2

json
Copy{
  "instanceOf": "currency",
  "valuePath": ["metrics(...).value", "metrics(...).value"],
  "valueExpression": "$data[0] and $data[1] ? $data[0] + $data[1] : null",
  "currency": "USD"
}

dataset

Description

The dataset building block renders child templates based on the dataset count result from the parent UQE query.

Properties

Name Description Required
elements This is an array of JSON objects. This property determines the count and subtemplate to render. This property includes: count, template, and operator. If none of these are set, then they render an empty building block. No
defaultTemplate This is a JSON object and is also a list of UQE subtemplates that is rendered when the scopeEntity is empty. If a template is not provided, then it is treated as undefined. No

Example

json
Copy{
    instanceOf: 'dataset',
    elements: [
        {
            count: 1000,
            operator: '>',
            template: {
                instanceOf: 'text',
                content: 'Query returned more than 1000 elements'
            }
        },
        {
            count: 500,
            operator: '<',
            template: {
                instanceOf: 'text',
                content: 'Query returned less than 500 elements'
            }
        }
    ],
    defaultTemplate: {
        instanceOf: 'text',
        content: 'Default template'
    }
}

dateTime

Description

The dateTime building block renders epochs. Accepts epochs, a numeric value and iso, in string format.

Properties

Name Description Required
path This is the path of the attribute containing the epochs. Yes
emptyContent This is string to shows the attribute as null. The default is set to -. No

Example

json
Copy{
  "kind": "dateTime",
  "path": "attributes(container.created_at)",
  "emptyContent": "Data Not Available"
}

dialog

Description

The dialog building block renders child templates based on the dataset count result from the parent UQE query.

Properties

Name Description Required
elements This is an array of JSON objects and is used to determine the count and subtemplate that is rendered. elements consists of: count, template, and operator. If none of these are set, then an empty building block is rendered. No
defaultTemplate This is a subtemplate that is rendered when the scopeEntity is not set. If the count of the data does not match an element, then a defaultTemplate is rendered. No

Example

json
Copy{
    instanceOf: 'dataset',
    elements: [
        {
            count: 1000,
            operator: '>',
            template: {
                instanceOf: 'text',
                content: 'Query returned more than 1000 elements'
            }
        },
        {
            count: 500,
            operator: '<',
            template: {
                instanceOf: 'text',
                content: 'Query returned less than 500 elements'
            }
        }
    ],
    defaultTemplate: {
        instanceOf: 'text',
        content: 'Default template'
    }
}

duration

Description

The duration bulding block renders epochs, which is a numeric value and renders iso.

Properties

Name Description Required
path This is the path of the attribute that contains the milliseconds or iso duration. Example values include 18600000 for milliseconds, or PT18604S for iso, which is the duration format. Yes
emptyContent This is a string that appears when the attribute is null. This defaults to -. No
options This is an object that is the optional date and time format for the duration. No

Example

json
Copy{
  "kind": "duration",
  "path": "attributes(container.uptime)",
  "emptyContent": "Data Not Available"
}

ecpList

Description

The ecpList building block renders an ECP layout for a set of entities. This set includes a main area in the center, two vertical panels at the left and right side, and interaction elements for filtering and grouping. In addition to these panels, the filter and group by controls can be customized by overriding the respective default templates.

Properties

Name Description Required
aboveFilter This is used in TemplateElements and renders the given template elements above filterInput. No
filterInput This is used in TemplateElements and renders the given template elements above the elements to the left of groupByInput. The default is {instanceOf: 'scopeFilter', hiddenSubjects: ['raw']}. No
groupByInput This is used in TemplateElements and renders the given template elements above the elements to the right of the filterInput. The default is {instanceOf: 'scopeGroupBy'}. No
left This is used in TemplateElements and renders the given template elements to the left of the elements. The default is {instanceOf: 'template', templateName: 'dashui:ecpListRelationshipMap'}. No
right This is used in TemplateElements and renders the given template elements to the right of the elements. The default is {instanceOf: 'template', templateName: 'dashui:ecpListInspector'}. No
elements This is used in TemplateElements and renders the given template elements below the title and focused entity. No

Example

json
Copy{
  "instanceOf": "ecpList",
  "name": "dashui:ecpGroupByList",
  "view": "default",
  "target": "infra:host",
  "aboveFilter": { "instanceOf": { "name": "hostListTabs" } },
  "elements": [{ "instanceOf": { "name": "dashui:groupByGridTableBackground" } }]
}

ecpSingle

Description

The ecpSingle building block renders an ECP layout for single entities. This consists of a main area in the center and two vertical panels at the left and right side.

Properties

Name Description Required
nameAttribute This is a string used to get the title from TemplateElements and renders the template elements above filterInput. No
left This is used in TemplateElements and it renders the template elements to the left of the elements. The default is {instanceOf: 'template', templateName: 'dashui:ecpDetailsRelationshipMap'}. No
right This is used in TemplateElements and it renders the template elements to the right of the elements. The default is {instanceOf: 'template', templateName: 'dashui:ecpDetailsInspector'}. No
elements This is used in TemplateElements and it renders the template elements below the title and focused entity. No

Example

json
Copy{
    "instanceOf": "ocpSingle",
    "name": "dashui:ecpDetails",
    "view": "default",
    "target": "azure:vm",
    "elements": [
      { "instanceOf": { "name": "dataSourcesDropdownAzure" } },
      { "instanceOf": { "name": "healthrule:healthViolationsWidget", "isolate": true } },
      { "key": "cardLogs", "instanceOf": { "name": "logsWidget" } },
      {
        "instanceOf": "headline",
        "grade": "h2",
        "elements": { "instanceOf": "text", "content": "Metrics" }
      },
      {
        "instanceOf": "html",
        "style": {
          "marginTop": 12
        },
        "elements": [{ "instanceOf": { "name": "hostDetailK8sEvents" } }]
      },
      {
        "instanceOf": "html",
        "style": {
          "display": "flex",
          "flexDirection": "column",
          "gap": 12,
          "marginTop": 12
        },
        "elements": [

          { "instanceOf": { "name": "hostDetailInfraCPUUtilization" } },
          { "instanceOf": { "name": "hostDetailAzureCPUUtilization" } },
          { "instanceOf": { "name": "hostDetailInfraCpuPercent" } },
          { "instanceOf": { "name": "hostDetailAzureCpuCredits" } },
          { "instanceOf": { "name": "hostDetailInfraCpuLoad" } },


          { "instanceOf": { "name": "hostDetailNodePressureMetrics" } }
        ]
      }
    ],
    "nameAttribute": "host.id"
  }

elements

Description

The elements building block renders a list of elements. This is useful in places where only a single element is expected, or to group elements without changing the HTML structure.

Properties

Name Description Required
elements This is an array of child element objects. No

Example

json
Copy{
  "instanceOf": "elements",
  "elements": [
    {
      "instanceOf": "text",
      "content": "Hello "
    },
    {
      "instanceOf": "text",
      "content": "World!"
    }
  ]
}

empty

Description

The empty building block does not render content.

Properties

There are no properties for empty.

Example

json
Copy{
  "instanceOf": "empty"
}

entities

Description

The entities building block allows you to set a topology context for the child elements. You can do this by defining absolute entity references refs, or filter predicates. All of these set entities and predicates onto a template.

Properties

Name Description Required
refs These are string entities for a template. No
predicates This is a list of predicates that are applied to the refs or, if no refs are specified, then they are applied to the parent topology context. No
inheritParentPredicate If the template inherits the predicate set for the scope, the default is false. Yes
elements This is an array of child template elements that are rendered with the specified topology context. This is used in TemplateElements. No

Example

json
Copy{
  "instanceOf": "set",
  "refs": [ "apm:service" ],
  "inheritParentPredicate": false,
  "predicates": [ "[attributes(service.name) in [\"OrderProcessor4ServiceVodka\"]].out.to(apm:service_instance)" ] , [ "[attributes(service.instance.id) in [\"febe3ffa-7e20-4238-abe2-5ffd94b9b997\"]]" ],
  "elements": [
    {
      "instanceOf": "number",
      "path": "metrics(apm:errors_min,\"sys:derived\").sum"
    }
  ]
}

entityType

Description

The entityType building block renders the display name of the entity type of the topology context.

Properties

Name Description Required
path This is an UQE string to fetch the type. The default is type. No

Example

json
Copy{
    "instanceOf": "entityType"
},

focusedEntities

Description

The focusedEntities building block sets the topology context of its child elements to a set of entities that is put into focus by user interaction. For example, that can be clicking on a node in a graph.

Properties

Name Description Required
elements These are the template elements to filter by key and render. This is used is TemplateElements. Yes
focusKey This is a string used to determine if there is a focussed entity or not. This can also be used when there are multiple entities. The default is default. No
mode This specifies the intended cardinality of the topology context. If set to single, then the element only renders if there is exactly one focused element. No
placeholderElements Elements to be rendered if the focus condition is not satisfied. Note that this is rendered as part of the same render lifecycle unlike the elements which are rendered as part of a separate lifecycle. This means that the placeholder elements are always calculated (even if they are not shown). This is used in TemplateElements. No

Example

json
Copy{
  "key": "name",
  "instanceOf": "focusedEntities",
  "mode": "SINGLE",
  "elements": [
    {
      "instanceOf": "template",
      "templateName": "inspectorName"
    },
    {
      "key": "relatedTracesButton",
      "instanceOf": "focusedEntities",
      "mode": "SINGLE",
      "element": {
        "instanceOf": "template",
        "templateName": "relatedTracesButton"
      }
    },
    {
      "instanceOf": "template",
      "templateName": "inspectorMetrics"
    }
  ]
}

grid

Description

The grid building block is a table control that contains arbitrary templates in its cells. This building block also displays multiple sets of different entity types in one table, as long as they have the same number of columns.

Properties

Name Description Required
sortable If columns are sortable by default, then they can be over-ridden in each column. This is used as a is boolean and the default is set to false. No
style These are additional styles you can apply to the grid container. This is CSS used in JSON. No
mode In client mode, all rows are fetched, then sorted on the client. In server mode rows are fetched incrementally and sorting is done on the server. This is only supported if there is exactly one row set. No
rowsets A grid can contain multiple row sets, each providing multiple rows. The record key is used to identify the row set in column definition. The default is set to { default: {} }. rowsets includes path and keyPath. No
columns An array of column definitions. If there are no columns defined, then the grid is omitted. The default is set to []. columns includes label, sort, sortable, sortKeys, width see AG Grid Documentation, flex see AG Grid Documentation, cell, cellStyle, header, and headerStyle. No

Examples

Example 1: Default Row Set

json
Copy{
  "instanceOf": "grid",
  "columns": [
    {
      "label": "ID",
      "cell": {
        "default": {
          "instanceOf": "string",
          "path": "id"
        }
      }
    },
    {
      "label": "Name",
      "cell": {
        "default": {
          "instanceOf": "string",
          "path": "attributes(name)"
        }
      }
    }
  ]
}

Example 2: Explicit Row Set

json
Copy{
  "instanceOf": "grid",
  "rowSets": {
    "foo": {
      "path": "out.to(foo:foo)"
    }
  },
  "columns": [
    {
      "label": "First column",
      "cell": {
        "foo": {
          "instanceOf": "string",
          "path": "id"
        }
      }
    }
  ]
}

Example 3: Multiple Row Sets and Row Deduplication

json
Copy{
  "instanceOf": "grid",
  "rowSets": {
    "foo": {
      // "path": ".", // default
      "keyPath": "id"
    },
    "relatedFoo": {
      "path": "out.to(foo:foo)",
      "keyPath": "id"
    },
    "bar": {
      "path": "out.to(bar:bar)"
    }
  },
  "columns": [
    {
      "label": "First column",
      "cell": {
        "foo": {
          "instanceOf": "string",
          "path": "id"
        },
        "relatedFoo": {
          "instanceOf": "string",
          "path": "id"
        },
        "bar": {
          "instanceOf": "string",
          "path": "attributes(name)"
        }
      }
    }
  ]
}

heading

The heading building block applies default header styles to children.

Properties

Name Description Required
elements These are children in TemplateElements that heading styles are applied to. No
size This determines the size of the heading. The default is SECTION. No
style This applies to custom styles for css.Styles. No

Example

json
Copy{
  "instanceOf": "heading",
  "elements": {}
}

headline

The headline building block renders the child elements in a headline.

Properties

Name Description Required
elements The content of the headline. This is used in TemplateElements. Yes
grade The grade of the headline. The default is h1, but grades also include: h1, h2, h3, h4, grid, panel, section, and subtitle. Yes

Example

json
Copy{
  "instanceOf": "headline",
  "grade": "h2",
  "elements": { "instanceOf": "text", "content": "Foo" }
}

healthBar

Description

The healthBar building block is a horizontal bar that has segments, which represent customizable health statuses.

Properties

Name Description Required
segments A list of horizontal segments that the healthBar is split into. segments include: value, path, status. Yes. Only value and path are optional.
markers A list of horizontal segments that the healthBar is split into. segments include: value, path, status. markers includes position and label. No
showPercentSign This is a boolean and shows a percent sign next to the displayed values. No
decimalPlaces This is a number and defines the maximum decimal places shown in the displayed values. Yes

Example

json
Copy{
  "instanceOf": "healthBar",
  "segments": [
    {
        "status": "NORMAL",
        "path": "metrics(\"eum:largest_contentful_paint_percentile\", \"sys:derived\").pRange(2500) * 100"
    },
    {
        "status": "WARNING",
        "path": "(metrics(\"eum:largest_contentful_paint_percentile\", \"sys:derived\").pRange(4000) - metrics(\"eum:largest_contentful_paint_percentile\", \"sys:derived\").pRange(2500))* 100"
    },
    {
        "status": "CRITICAL",
        "path": "(1 - metrics(\"eum:largest_contentful_paint_percentile\", \"sys:derived\").pRange(4000)) * 100"
    }
  ],
  "markers": {
    "position": 75,
    "label": {
        "instanceOf": "text",
        "content": "75th Percentile"
    }
  }
}

html

Description

The html building block renders HTML tags. By default, this uses a div which is set to any other HTML tag. It also supports static styles and data driven styles.

Properties

Name Description Required
elements This is an array of child element objects. No
tag This is a string with the HTML tag that defaults to div. No
style This is an object with CSS styles that you can apply. No
skeletonStyle This is an object with CSS styles. This defaults to the style value. No
dataStyle This is an array or object with the fields paths and expression. Yes

Example

json
Copy{
  "instanceOf": "html",
  "tag": "span",
  "style": {
    "color": "#ffffff"
  },
  "dataStyle": [
    {
      "paths": ["metrics(...).value"],
      "expression": "$data[0] < 100 ? {} : {'color': '#ED5A5F'}"
    }
  ],
  "elements": [
    {
      "instanceOf": "number",
      "path": "metrics(...).value"
    }
  ]
}

icon

Description

The icon building block renders a variable icon depending on the value of an attribute.

Properties

Name Description Required
path The path of the attribute to evaluate Yes
contentMapping A map of attribute values to the icon names. Yes
width This is a number that relates to the width of the icon. Yes
height This is a number that relates to the height of the icon. Yes
style This is in CSS as a JSON value. No
fill This is a style that relates to the color of the icon. No

Example

json
Copy{
  "key": "Icon",
  "path": "type",
  "instanceOf": "icon",
  "contentMapping": {
    "apm:service": "Location.TierAndNode",
    "apm:service_instance": "Object.Node",
    "apm:backend": "Location.RemoteServices",
    "apm:http_backend": "Location.RemoteServices",
    "apm:database_backend": "Location.RemoteServices",
    "apm:messaging_backend": "Location.RemoteServices",
    "apm:custom_backend": "Location.RemoteServices"
  },
  "width": "24px",
  "height": "30px"
}

inputSelect

Description

The inputSelect and selectFilter building blocks allow conditional rendering of elements. The inputSelect building block renders a dropdown based on the input options and stores the selected value under the specified selectionKey.

Properties

Name Description Required
options These are the options containing labels and values displayed in the dropdown. No
selectionKey The string selection state tha stores the selected value. No
label The string label of the select field No
style This is shown in css.Styles. No
showClear This is a boolean and is set to true by default. This can either show or hide the clear button. No
showOptional This is a boolean and is set to true by default. This can either show or hide optional text. No

Example

json
Copy{
  "instanceOf": "inputSelect",
  "name": "dataSourcesDropdownAzure",
  "options": [
    { "label": "All Sources", "value": null },
    { "label": "AppDynamics", "value": "infra-agent" },
    { "label": "Azure", "value": "azure-monitor" }
  ],
  "selectionKey": "dataSources",
  "label": "Data Sources",
  "style": { "display": "flex", "flexDirection": "row-reverse" }
}

join

Description

The join building block joins attributes from related entities into the same record.

Properties

Name Description Required
path An UQE string that joins the elements. This corresponds to an additional line in the FROM clause. Yes
optional A boolean that joins the request. No
elements An array of template elements joined in TemplateElements. No

Example

json
Copy{
  "key": "destination",
  "instanceOf": "join",
  "path": "out(common:interaction_to).to(apm:service, apm:backend)",
  "element": {
    "instanceOf": "elements",
    "elements": [
      {
        "key": "Service",
        "path": "attributes(service.name)",
        "emptyContent": "",
        "instanceOf": "label"
      },
      {
        "key": "Backend",
        "path": "attributes(backend.name)",
        "emptyContent": "",
        "instanceOf": "label"
      }
    ]
  }
}

leftbar

Description

The leftBar building block renders a panel with elements that show counts for provided elements. These can be used to navigate to the Details page.

Properties

Name Description Required
label A string that represents the text display in the title above the content. Yes
defaultFilter A string that filters for the elements. No
elements This includes: key, path, entityAttribute, iconName, and targetFilter. These are all in a string. No

Example

json
Copy{
  "instanceOf": "leftbar",
  "name": "dashui:ecpDetailsRelationshipMap",
  "view": "default",
  "target": "kafka:broker",
  "label": "Relationships",
  "config": {
    "style": {
      "maxWidth": "112px"
    }
  },
  "elements": [
    {
      "key": "cluster",
      "path": "in.from(kafka:cluster)",
      "entityAttribute": "kafka.cluster.name",
      "iconName": "Object.MessageProcessor"
    },
    {
      "key": "broker",
      "path": ".",
      "entityAttribute": "k8s.pod.name",
      "iconName": "Object.MessageProcessor"
    }
  ]
}

lifecycle

Description

The lifecycle building block allows you to run the onMountaction and onUnMount actions.

Properties

Name Description Required
onMount An action or array of actions to use when the subtree of elements is mounted. This can used on template actions. No
onUnMount An action or array of actions to use when the subtree of elements is unmounted. This can used on template actions. No
elements An UQL string to fetch entities related to the requested elements. This can used on template actions. Yes

Template Actions

Name Description Required
type A string used as an action type. Yes
payload An object used as an action payload, which depends on the type. No
paths A data request array that creates dynamic payloads and takes static payload and [params + data]. No
expression A string JSONata expression that creates the payload that can access the data requested by the paths in a $data array. No

Example

json
Copy{
  "instanceOf": "lifecycle",
  "onUnmount": {
    "type": "update.selection",
    "payload": {
      "selectionKey": "cpuUtilizationByInstance1",
      "value": null
    }
  },
  "elements": {
    "instanceOf": "collapsible",
    "selectionKeys": "cpuUtilizationByInstance1",
    ...
  }
}

listing

Description

The listing building block iterates the records of an UQE result and creates one instance of the specified child element per record.

Properties

Name Description Required
elements This is used in a template and is created by a data record. Yes
orderBy This specifies what observation fields are used to order the resulting rows. Example, {path: string; direction: 'asc' 'desc'}. No
limit A sample size of the request. No

Example

json
Copy{
    "kind": "template",
    "name": "abc:chartIterator",
    "view": "default",
    "target": "abc:entity",
    "element": {
      "instanceOf": "listing",
      "orderBy": [{
        "path": "attributes(abc.entity.name)",
        "direction": "asc"
      }],
      "limit": 100,
      "elements": {
        "instanceOf": "html",
        "tag": "div",
        "elements": [
          {
            "instanceOf": "html",
            "tag": "span",
            "element": {
              "instanceOf": "string",
              "path": "attributes(status)"
            }
          },
          {
            "instanceOf": "html",
            "tag": "span",
            "element": {
              "instanceOf": "string",
              "path": "attributes(abc.entity.name)"
            }
          }
        ],
        "style": {
          "display": "flex",
          "flexDirection": "row",
          "gap": 12,
          "padding": 10
        }
      }
    }
  },

menu

Description

The menu building block is associated with a trigger template element. You can use the items array of MenuItems or Submenu which are defined in the model.ts file.

Properties

Name Description Required
trigger This is used in TemplateElement and is an element that uses clickeevents. No
onClick This is used in TemplateAction and appears when you click the trigger element. This also sends an event of the given action type and payload specified in the TemplateAction object. No
options This allows the clickable items to render in the overlay. options for onClick include: type, payload, paths, and expression. Another option you can use is trigger. No

Types

json
Copytype Option = {
  type?: 'option';
  onClick?: TemplateAction;
  trigger?: TemplateElement;
};

interface Menu {
  trigger?: TemplateElement;
  options: (Option | SubMenu)[];
}

interface SubMenu extends Menu {
  type: 'subMenu';
}

Example

json
Copy{
  instanceOf: 'menu',
  props: {
    align: 'END',
  },
  trigger: {
    instanceOf: 'icon',
    fallbackIconName: 'Navigation.MoreVertical',
    tooltip: '',
    style: {
      cursor: 'pointer',
      float: 'right',
    },
  },
  options: [
    {
      onClick: {
        type: 'navigate.configure.biqMetric',
        payload: {
          ops: 'edit',
          templateName: '', // this will get replaced with $props.templateIdentifier
        },
        paths: ['id', 'attributes(bt.name)'],
        expression: '$ ~> |$|{id: $data[0],btName: $data[1]}|',
      },
      trigger: {
        instanceOf: 'text',
        content: 'Configure Metric',
      },
    },
    {
      onClick: {
        type: 'confirm.delete.biqMetric',
        payload: {
          metricName: '', // this will get replaced with $props.metricName
          templateName: '', // this will get replaced with $props.templateIdentifier
        },
        paths: ['id'],
        expression: '$ ~> |$|{id: $data[0]}|',
      },
      trigger: {
        instanceOf: 'text',
        content: 'Delete Metric',
      },
    },
    {
      type: 'subMenu',
      trigger: {
        instanceOf: 'text',
        content: 'SubMenu Trigger',
      },
      options: [
        {
          type: 'option',
          onClick: {
            type: 'confirm.delete.biqMetric',
            payload: {
              metricName: '',
              templateName: '',
            },
            paths: ['id'],
            expression: '$ ~> |$|{"id": $data[0]}|',
          },
          trigger: {
            instanceOf: 'text',
            content: 'Delete Metric',
          },
        },
        {
          type: 'option',
          onClick: {
            type: 'confirm.delete.biqMetric',
            payload: {
              metricName: '',
              templateName: '',
            },
            paths: ['id'],
            expression: '$ ~> |$|{"id": $data[0]}|',
          },
          trigger: {
            instanceOf: 'text',
            content: 'Clear Metric',
          },
        },
      ],
    },
  ],
},

number

Description

The number building block renders numeric values.

Properties

Name Description Required
path An UQE string that fetches the numeric value. No
expression A JSONata expression that transforms the value fetched from the path. No
maximumFractionDigits A number that serves as the maximum number of digits. No
minimumFractionDigits A number that serves as the minimum number of digits. No
unitSymbol This is used with the prefix to format the value, either binary or decimal. No
prefix This is used with unitSymbol to format the value, either binary or decimal. No
scale This applies to the value, which defaults to 1. No
type This controls the format of the number. The default is short. short uses compact form with abbreviations. long renders in decimal or scientific notation. percent renders as a percentage. No
emptyContent The defaults is \u2013. No

Example

json
Copy{
  "instanceOf": "number",
  "path": "metrics(apm:response_time, \"sys:derived\").value / 1000000",
  "minimumFractionDigits": 2
}

pieChart

Description

The pieChart building block renders pie and donut charts for a set of entities. Currently, only the number count of entities in each group is used.

Properties

Name Description Required
groupBy This is a string and is the name of the attribute that the entities are grouped in. Yes
dataName This is a string and is the name that is displayed with the number when you hover over a segment. Yes
centerText This is a string and is the text in the center of the donut chart. If not specified, the total count is displayed. No
centerFontSize This is a number and is the font size in pixels for the center text. The default value is 32. No
innerSize This is a number and is the size of the donut chart in percent (%) of the diameter. The default value is 75. No
labelSize This is a number and is the size of the segment label in pixels. The default value is 12. No

Example

json
Copy{
  "instanceOf": "pieChart",
  "groupBy": "attributes(cloud.region)",
  "dataName": "instances",
  "width": 544,
  "height": 244,
  "centerFontSize": 36,
  "innerSize": 82,
  "labelSize": 13
}

propertyList

Description

The propertyList building block render tags and attributes and their values.

Properties

Name Description Required
path The path to fetch the keys and values for the list. Yes
expression The JSONata expression to transform the list fetched from the path. No

Examples

To view all tags:

json
Copy{
  "instanceOf": "propertyList",
  "path": "tags"
}

To view all attributes with annotation:

json
Copy{
  "instanceOf": "propertyList",
  "path": "attributes",
  "expression": "[[$.{\"name\": name, \"value\": value}][$contains(name, /^annotation_/)][].{\"name\": $replace(name, \"annotation_\", \"\"), \"value\": value}]"
}

related

Description

The related building block sets topology context to the set of the entities associated with a single entity of the parent's topology context. That is where the path property specifies the association path.

This is typically used inside parent elements that iterate over a set of entities, such as grid. Whereas, the relatedSet building block uses the topology context of its children to set entities associated with the parent topology context entities.

Properties

Name Description Required
path The UQE string to add a related node. Yes
element An array of template elements in TemplateElements. Yes

Example

json
Copy{
  "instanceOf": "related",
  "path": "out.to(infra:network_interface)",
  "element": {
    "key": "hostNetworkPacketsDroppedOutByInterface",
    "instanceOf": "cartesian",
    "props": {
      "legend": true,
      "xAxis": { "format": { "twentyFourHour": true } }
    },
    "children": [
      {
        "namePath": "attributes(network_interface.name)",
        "metric": {
          "name": "infra:system.network.device.transmit.dropped_sec",
          "source": "infra-agent"
        },
        "type": "LINE"
      }
    ]
  }
}

relatedSet

Description

The relatedSet building block sets the topology context of the children elements to the set of all entities related to any topology context's entities using the specified path. If you want to separate the related entity set, then use requestRelated.

Properties

Name Description Required
path The UQE string to fetch entities related to the requested entities. Yes
element An array of template elements in TemplateElements. Yes

Example

json
Copy{
  "instanceOf": "relatedSet",
  "path": "in.from(k8s:node)",
  "element": {
    "instanceOf": "cardinality",
    "elements": [{ "count": 0, "template": { "instanceOf": "empty" } }],
    "defaultTemplate": {
      "instanceOf": "relatedSet",
      "path": "out.to(infra:host)",
      "element": {
        "instanceOf": "card",
        "props": { "title": "Kubernetes Events" },
        "right": { "instanceOf": { "name": "eventsWidget_showAllEvents" } },
        "elements": [
          {
            "instanceOf": "relatedSet",
            "path": "in.from(k8s:node)",
            "element": { "instanceOf": "eventsWidget" }
          }
        ]
      }
    }
  }
}

select

Description

The select building block renders the first branch, whose values match the values stored in the path.

Properties

Name Description Required
path The string field to fetch for branch selection. No
branches The branches you can select. This is an object[]. The branches include value and elements. No
defaultElements The elements rendered if no path is specified, or if no branch matches in TemplateElements. No

Example

json
Copy{
  "instanceOf": "select",
  "path": "attributes(health)",
  "branches": [
    { "value": 1, "elements": { "instanceOf": "text", "content": "Ok" } },
    { "value": 2, "elements": { "instanceOf": "text", "content": "Not Ok" } }
  ],
  "defaultElements": { "instanceOf": "text", "content": "–" }
}

selectionFilter

Description

The selectionFilter building block is used in combination with inputSelect to render children conditionally based on a selection made.

Properties

Name Description Required
selectionKey This is a string and the deafult is default. No
values This is used to render the children elements in combination with the selectionKey in SelecitonValue[]. No
elements An array of template elements to render conditionally in TemplateElement[]. No

Example

json
Copy{
  "name": "hostDetailAwsCPUUtilization",
  "instanceOf": "selectionFilter",
  "selectionKey": "dataSources",
  "values": [null, "aws-cloudwatch"],
  "elements": [
    {
      "instanceOf": "card",
      "props": {
        "style": {
          "height": 264
        },
        "title": "CPU Utilization (%)"
      },
      "right": [
        {
          "instanceOf": {
            "name": "dataSourceIcon"
          },
          "source": "aws-cloudwatch"
        }
      ],
      "elements": [
        {
          "instanceOf": {
            "name": "hostCpuUtilizationChart"
          },
          "source": "aws-cloudwatch"
        }
      ]
    }
  ]
}

sparkGraph

Description

The sparkGraph building block renders simplified cartesian graphs.

Properties

Name Description Required
path An UQE string to fetch the cartesian data that is used to render the graph. Yes
source The string data source for the UQE value request. No
style The additional css.Styles to apply to the sparkGraph container. No
x The response field mapped to x of each point. The default is timestamp. No
y The response field mapped to y of each point. Alternatively, an object with the response field and a scale factor to multiply with the y-value of each point. No
baseline The value to render as a line for comparison. No
type This determines whether the data is rendered as an AREA or COLUMN chart. No

Example

json
Copy{
  "key": "Average Response Time Graph",
  "instanceOf": "sparkGraph",
  "path": "apm:response_time",
  "source": "APM",
  "style": {
    "height": 80,
    "width": 250
  },
  "y": {
    "maximumFractionDigits": 3,
    "scale": 0.000001
  }
}

string

Description

The string building block renders values based on data from UQE.

Properties

Name Description Required
path A string either a single UQE string, or a list of UQE strings. For a list of paths, the first non-null result is used. Yes
emptyContent A string with the content to show in case path does not provide results. The defaults is \u2013. No

Example

json
Copy{
  "instanceOf": "string",
  "path": ["service.name", "id"]
}

tab

Description

The tab building block renderds tabs with conditional content.

Properties

Name Description Required
elements An array of TemplateElements you can render. Yes
disabled This disables the user interaction with a given tab by its index in the element's array. No
initialSelected This controls which tab is initially selected. The default is 0. No
label The prefix label. No
kind This controls the appearance of the list of tabs and only works when type = tabList. No
type This controls whether the tabs are displayed using a list of labels, or a toggle group. No
align This controls whether the tabs are displayed on the right or left align. This defaults to right align. No
style These are additional styles for the tab. Example, css.Styles. No

Example

json
Copy{
  instanceOf: 'tab',
  name: 'ecpListVisualizationTab',
  view: 'default',
  target: 'apm:backend',
  label: 'Visualize As:',
  type: 'toggle',
  align: 'left'
  elements: [
    { key: 'Flow', iconName: 'Location.Apm', instanceOf: 'template', templateName: 'customBackendGraph' },
    { key: 'List', iconName: 'Action.GridView', instanceOf: 'template', templateName: 'backendGridTable' },
  ],
},

text

Description

The text element renders static text.

Properties

Name Description Required
context A string containing the static text path to fetch the keys and values for the list. Yes

Example

json
Copy{
  "instanceOf": "text",
  "content": "Services"
}

theming

Description

The theming building block handles the switching from light to dark. Any magnetic token will be automatically switched without needing the instantiator. However, custom tokens will need to get added with the theming instantiator.

Properties

Name Description Required
theming An object that takes light and dark variables. Example, {dark: object; light: object}. Yes
elements This is used in TemplateElements. No

Example

json
Copy{
  "instanceOf": "theming",
  "theme": {
    "dark": { "my-custom-token": "#123456" },
    "light": { "my-custom-token": "#abcdef" }
  },
  "elements": {
    "instanceOf": "icon",
    "fallbackIconName": "Action.FavoriteOff",
    "tooltip": "Error showing favorites. Please try refreshing the page.",
    "fill": "var(--my-custom-token)"
  }
}

tooltip

Description

The toolTip building block renders tooltip help for an element.

Properties

Name Description Required
trigger This renders a TemplateElement as the trigger which opens and closes the overlay TemplateElement. If content is not given, then it renders with a text overlay. Yes
align This is the preferred alignment relative to the child. This includes: start, center, end. Yes
centerTrigger The tooltip building block wraps the trigger with a div styled with these properties: display: 'flex', justifyContent: 'center', alignItems: 'center'. If set to false, the default, then the tooltip building block wraps the trigger with a span. No
content This renders a TemplateElement in the overlay. No
position This is the preferred position relative to the child. This includes: bottom, left, right, top. No
truncate This determines if the tooltip text content is truncated on overflow. No

Example

json
Copy{
  "instanceOf": "tooltip",
  "truncate": true,
  "trigger": {
    "instanceOf": "number",
    "path": "metrics(apm:response_time, \"APM\").value / 1000000",
    "minimumFractionDigits": 2
  }
}

union

Description

The union building block sets the topology context of its children to a union of the entity set of the parent topology context. This is also one or more sets of related entities.

Properties

Name Description Required
paths These are UQE strings to fetch. Yes
elements These are elements rendered with multiple paths used in TemplateElement. Yes

Example

json
Copy{
  "name": "customBackendGraph",
  "target": "apm:backend",
  "instanceOf": "union",
  "paths": [
    "in(common:interaction_to).from(apm:request)[attributes(\"interaction.context.id\") = ''].out(common:interaction_from).to(apm:service)"
  ],
  "element": {
    "instanceOf": "graph",
    "edgePath": "in(common:interaction_to).from(apm:request)[attributes(\"interaction.context.id\") = '']",
    "fromPath": "out(common:interaction_from).to(apm:service)",
    "layout": "constellation",
    "node": {
      "healthBy": "status",
      "element": {
        "instanceOf": "template",
        "templateName": "backendGraphNode",
        "templateView": "bubble"
      },
      "boundary": {
        "type": "rect",
        "width": 50,
        "height": 50,
        "cornerRadius": 25
      }
    },
    "edge": {
      "healthBy": "health",
      "focusNodeEdgesOnly": true
    },
    "style": {
      "height": 578
    },
    "events": {
      "onNodeDoubleClick": {
        "type": "navigate.entity.detail",
        "expression": "$params"
      },
      "onNodeClick": {
        "type": "common.focusEntity",
        "expression": "$params"
      },
      "onEdgeSingleClick": {
        "type": "common.focusEntity",
        "expression": "$params"
      }
    }
  }
}
Next