search

dynatrace-oss / DynatraceDashboardPowerups

Chrome Extension to boost DT dashboards
Apache License 2.0
39 stars 12 forks source link

readme

Dynatrace Dashboard PowerUps

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

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

*End of life notice: 2024.09.06 - This application will no longer be actively maintained, due to greater capabilities in new Dynatrace dashboards and new restrictions from Chrome. Bug and security fixes will continue as before until such point as this is no longer feasible for Chrome extensions.

Table of contents

Installation

  1. Install the extension from the Chrome Store

Chrome Store

  1. Click the puzzle icon and pin PowerUps

puzzle pin

  1. The icon will change from gray to blue when active (and purple when the extension has updated)

inactive active

  1. When a new update is released via Chrome Web Store it will automatically be updated. Google can take several days to approve an update to an Extension. If you wish to run the very latest version, change Library Location to GitHub in the Extension preferences.

Configure extension

  1. Click blue (or purple) powerup icon

active

  1. Modify preferences

popupMenu

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

Powerup Howto

To add PowerUps to your existing dashboards, you may add markup text in your dashboard tile titles. Alternatively, you may deploy dashboard packs with PowerUps already included via the BizOpsConfigurator.

Reports

As of 1.53, PowerUps now includes a Report Generator. For details, see: Reports.

Powerup List

Disclaimer

If you manually add markup, it is best practice to add a Powerup disclaimer tile so that users who do not yet have the Extension, will be directed to install it. To add the disclaimer, add the following to your dashboard JSON:

{
    "name": "Markdown",
    "tileType": "MARKDOWN",
    "configured": true,
    "bounds": {
        "top": 0,
        "left": 0,
        "width": 1254,
        "height": 76
    },
    "tileFilter": {},
    "markdown": "##\uD83D\uDC8E Powerup Enabled Dashboard \uD83D\uDC8E\n\n##  [Install Chrome Extension](https://chrome.google.com/webstore/detail/dynatrace-dashboard-power/dmpgdhbpdodhddciokonbahhbpaalmco)"
}

If you deploy dashboard packs from the BizOpsConfigurator, this tile is already added for you. Once the Extension loads this tile is hidden.

Tooltips

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

✔️ Deprecated Tooltips are now available in-product with Explorer tiles.

Example: Tooltips

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. Note: also see USQL colors PowerUp for simply changing colors for USQL and Explorer tiles.

✔️ Deprecated Please use Data Explorer.

For markdown and header tiles, use !PU(color):color=blue style syntax.

Explanation:

Alternative: Absolute value comparison

Example: Colors

Icons

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:

Example: Icons

Worldmaps

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:

Example: World Map

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 markdown tile like this: !PU(banner):color=purple

⚠️ DEPRECATION NOTICE: Using dashboard tags for the Banner PowerUp is deprecated and replaced by Markdown tiles. Please update your dashboards as of 1.49. Targeting 1.51 for removal.

Explanation:

Example: Banner

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

✔️ Deprecated Please use Data Explorer.

Explanation:

Example: Line chart threshold

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:

Example: USQL Stacked Bar Chart

USQL colors

This powerup switches the color palette for a USQL or Explorer chart. Change the title like this: !PU(usqlcolor):vals=satisfied,tolerating,frustrated;colors=green,yellow,red

Explanation:

Example: USQL Color

Heatmap

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

✔️ Deprecated Please use Data Explorer.

Apdex !PU(heatmap):vals=.5,.7,.85,.94;names=Unacceptable,Poor,Fair,Good,Excellent;colors=#dc172a,#ef651f,#ffe11c,#6bcb8b,#2ab06f
Request Count !PU(heatmap):minColor=yellow;maxColor=green;txtColor=black;ms=3600000;fmt=HH:mm

Explanation:

   Option 1 - Color classes:

   Option 2 - Color gradient:

Examples: Apdex heatmap

Gradient heatmap

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.*, usersession.* 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: