Dynatrace Dashboard Powerups

This extension powers-up Dynatrace dashboards to enable cool new experimental features live, such as:

• Color changing tiles based on thresholds
• Color changing icons based on thresholds
• Tooltips on charts
• USQL values on world maps

Please note: this is a community developed demonstration application. It is provided without any representations, warranties, or support from Dynatrace. If you have questions about this app, please post on our forum or create an issue on Github

Installation

1. Install the extension from the Chrome Store

2. Click the puzzle icon and pin Powerups

3. The icon will change from gray to blue when active

4. When a new update is released, repeat the above. Auto-update is currently in the backlog.

Configure extension

5. Click blue powerup icon

6. Modify preferences

7. Click save. Note: you may need to refresh your page for changes to take effect.

Powerup Howto

Currently for the powerups you need to add additional markup text in your dashboard tile titles. Soon, you will be able to add thresholds etc directly in the BizOpsConfigurator when you're deploying dashboards.

Tooltips

Nothing required, just enable the extension as per above and refresh your browser on a dashboard.

Example:

Colorize

For Single Value Tiles, either custom chart or USQL, you can add color coding by adding markup to the title: !PU(color):base=high;warn=90;crit=80

Explanation:

• !PU(color): this starts the markup
• base=high this is the base case for your metric, ie is it good to be low or high?
• warn=90 this is the warning threshold, once breached color coding will be yellow
• crit=80 this is the critical threshold, once breached color coding will be red So in the example of availability, high is better. Greater than 90 would be green, 90 to 80 yellow, and 80 or less red.

Example:

Icon indicators

This powerup renders icons in place of Markdown tiles. These icons change color to give a quick visual indication of environment / business health. For example, if payment processing was beyond a threshold hold, you might have a creditcard icon turn red. Here's how that might look:

[Extension Needed](https://github.com/LucasHocker/DynatraceDashboardPowerups)
!PU(svg):icon=creditcard;link=val3;base=high;warn=90;crit=85

Explanation:

• Link to extension: this lets users without the extension know to download it
• !PU(svg): this starts the markup
• icon= this refers to an SVG file in the 3rdParty/node_modules/@dynatrace/barista-icons folder
• link= this is used to link to a Single Value Tile to get the comparison value
• warn= this is the warning threshold, once breached color coding will be yellow
• crit= this is the critical threshold, once breached color coding will be red Just be sure to include the !PU(link): with a matching string in the desired Single Value Tile

Example:

World maps

This powerup reloads the data in world maps with that from a USQL table. This allows you to map arbitrary things like revenue. It also enables click or scrollwheel to zoom. Click in an ocean to reset zoom. Add markup to your USQL table's title like this: Revenue !PU(map):color=green;link=Apdex

Explanation:

• Revenue: title for your USQL table and Worldmap
• !PU(map): indicates this is a map powerup
• color= what color scale to use, e.g. "green" or "#E9422F"
• link= refers to the standard metric picked for the chart in the OOTB tile configuration. This allows you to have multiple worldmaps driven by multiple USQL tables

Example:

Banner

If you have multiple environment with dashboards up on screens and need an easy way of telling which is say Production and which one is say QA, you can color code the top of the dashboard. Use a dashboard tag like this: !PU(banner):color=purple

Explanation:

• !PU(banner): indicates this dashboard tag is a banner powerup
• color= what color background to make the banner, e.g. "purple" or "#B6E5F8"

Example:

Line chart threshold

If you would like a chart that shows as one color above a threshold but a different color below, this powerup enables that. Add markup to to the chart title like so: !PU(line):thld=4000;hcol=green;lcol=red

Explanation:

• !PU(line): indicates this linechart should have a threshold
• thld=4000; the threshold (Note: does not currently support units)
• hcol=green; the color above the threshold
• lcol=red the color below

Example:

USQL Stacked Bar chart

This powerup switches to a stacked bar chart for a USQL result instead of stacked xaxis labels. Change the title like this: !PU(usqlstack):colors=green,blue,#aabbcc

Explanation:

• !PU(usqlstack): - indicates the powerup
• colors=green,blue,#aabbcc - assigns colors to each series

Example:

Heatmap

Currently this powerup can display a heatmap based on a bar chart. Eventually, it will be more generic.

Apdex (by app) !PU(heatmap):vals=.5,.7,.85,.94;names=Unacceptable,Poor,Fair,Good,Excellent;colors=#dc172a,#ef651f,#ffe11c,#6bcb8b,#2ab06f

Apdex (by app) !PU(heatmap):min=1;max=1000;minColor=#ffffff;maxColor=red

Explanation:

• !PU(heatmap): - denotes the heatmap powerup, anything prior to this is treated as the title
• txtColor= - (optional) what color text to use for data labels, defaults to white

   Option 1 - Color classes:

• vals= - thresholds, should be N-1 of them
• names= - names for each area on the color axis, should be N of them
• colors= - CSS colors, should be N of them

   Option 2 - Color gradient:

• min= & max= - (optional) min and max values for color axis, defaults to extreme values in the dataset
• minColor & maxColor - (optional) min and max colors, colors will be interpolated between these, defaults to white and blue

Examples:

UserAction Sankey chart

This powerup shows UserActions for your application, where they start, end, how many, do users circle in loops, etc. Create a USQL query, like this:

select useraction.name, useraction.matchingConversionGoals, useraction.apdexCategory, useraction.isEntryAction, useraction.isExitAction, useraction.stringProperties, useraction.doubleProperties, useraction.longProperties, useraction.dateProperties, useraction.duration, useraction.errorCount, userExperienceScore FROM usersession WHERE useraction.application="www.angular.easytravel.com" 

encoded with a title like this:

Angular Easy Travel UserJourneys !PU(sankey):link=sankey1;kpi=revenue;kpicurr=EUR

and Markdown tile to get swapped out like this:

[Extension Needed](https://github.com/LucasHocker/DynatraceDashboardPowerups)
!PU(link):sankey1

Explanation:

• !PU(sankey): - denotes the powerup source
• link= - points to markdown tile via the link powerup
• kpi= - the name of a User Action Property to be displayed in the main tooltip, usually something like revenue
• kpicurr= - (optional) how to format the KPI if its a currency, e.g. USD, EUR, CNY. If omitted, will format with max 2 fractional digits

Example:

Notes:

• To increase/decrease the amount of clutter, use the plus and minus buttons. These slice the data in the USQL query.
• To get even more data from the USQL query, edit the dashboard JSON and add to the USQL tile (default 50, max 5000, more can result in slower load): "limit": 500
• Be sure to click on useraction "nodes" in the graph for additional details and drilldowns into user sessions

Vertical Funnel

This powerup changes the Dynatrace horizontal funnel into a vertical funnel. To utilize encode your title like so: Angular UserJourney !PU(funnel):mode=height;small=5;big=20;links=funnelinks

Explanation:

• mode=height - which type of funnel visualization, options are height, slope, bar
• small= - minimum percentage to treat as a small positive or negative change, ie gray below this and light green/red above
• big= - minimum percentage to treat as a big positive or negative change, ie bold green/red above this
• links= - link to markdown tile with drilldown urls

Example:

Math

This powerup allows you to do complex math based on other values on the dashboard. See math-expression-evaluator for help with math expressions. Syntax: !PU(math):exp=(x1+x2+x3+x4)/4;scope=x1,x2,x3,x4:link4;color=blue

Explanation:

• !PU(math): - denotes a math powerup
• exp= - a math expression
• scope= - list of any variables used in your expression. Optionally, you may have seperate variable names from link name, e.g. x4:link4, otherwise assume var and link are the same string e.g. x1
• color= - (optional) a valid CSS color, defaults to white
• size= - (optional) a valid CSS font-size, defaults to 36px

Example:

Date

This powerup allows you to use Dynatrace date format strings and format in Markdown tiles. Syntax: !PU(date):res=now-7d/d;fmt=YYYY-MM-DD;color=green

Explanation:

• !PU(date): - denotes the date powerup
• res= - resolve this date string, click on global time selector for help with syntax
• fmt= - display format, see date-fns
• color= - a valid CSS color

Example:

Gauge

This powerup converts a Single Value Tile into a solid gauge. Syntax: Memory !PU(gauge):stops=.5,.75,.9;colors=green,yellow,red;min=0;max=100

Explanation:

• !PU(gauge): - denotes the gauge powerup
• stops= - color stops as a percentage of the max, valid values rante 0 through 1
• colors= - colors for color stops
• min= - left end of the gauge, defaults to 0
• max= - right end of the gauage, defaults to 100

Example: