Discovery Explorer

Discovery Explorer is a utility server which provides a GUI for browsing server side Discovery dashboards.

It could be a side companion of WarpFleetSynchronizer.

Run

docker run --rm -d -p9090:3000 \
  -v /opt/dashboard-macros:/data  \
  --name=discovery-explorer \
  warp10io/discovery-explorer:latest

Or, in case of custom conf:

docker run --rm -d -p9090:3000 \
  -v /opt/dashboard-macros:/data  \
  -v /home/me/custom-conf.json:/opt/discovery-dashboard/conf.json \
  --name=discovery-explorer \
  warp10io/discovery-explorer:latest

Settings

In your dashboard, you have to set the Warp 10 endpoint:

// @endpoint https://warp.senx.io/api/v0/exec
{
    'title' 'My dashboard'
    'cellHeight' 120
    'tiles' [ ... ]
}

Optionally, you can use a builtin theme (light / dark / dark-blue / chalk / fresh / green / vintage / default, more to come) :

// @endpoint https://warp.senx.io/api/v0/exec
// @theme light
{
    'title' 'My dashboard'
    'cellHeight' 120
    'tiles' [ ... ]
}

Or your own by adding a css file against your mc2 with the same file name.

CSS sample:

.dashboard-panel {
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap');
  --wc-split-gutter-color: #404040;
  --warp-view-pagination-bg-color: #343a40 !important;
  --warp-view-pagination-border-color: #6c757d;
  --warp-view-datagrid-odd-bg-color: rgba(255, 255, 255, .05);
  --warp-view-datagrid-odd-color: #FFFFFF;
  --warp-view-datagrid-even-bg-color: #212529;
  --warp-view-datagrid-even-color: #FFFFFF;
  --warp-view-font-color: #FFFFFF;
  --warp-view-chart-label-color: #FFFFFF;
  --gts-stack-font-color: #FFFFFF;
  --warp-view-resize-handle-color: #111111;
  --warp-view-chart-legend-bg: #000;
  --gts-labelvalue-font-color: #ccc;
  --gts-separator-font-color: #FFFFFF;
  --gts-labelname-font-color: rgb(105, 223, 184);
  --gts-classname-font-color: rgb(126, 189, 245);
  --warp-view-chart-legend-color: #FFFFFF;
  --wc-tab-header-color: #FFFFFF;
  --wc-tab-header-selected-color: #404040;
  --warp-view-tile-background: #40404066;

  font-family: 'Kanit', sans-serif;
  font-size: 12px;
  line-height: 1.52;
  color: #1b1b1b;
  background: #FAFBFF linear-gradient(40deg, #3BBC7D, #1D434C) fixed;
  padding: 1rem;
  height: calc(100vh - 2rem);
}


discovery-dashboard {
  color: transparent;
}

Use query string to pass WarpScript variables

You can pass WarpScript variables to the dashboard by adding a query string to the URL.

http://localhost:9090/%2Fsenx%2Fdemo%2Fufo.mc2?myVar=45

Usage in the dashboard definition:

{
  'title' 'Test Page'
  'vars' {
    // myVar is a WarpScript variable and will be overridden by the value of the query string
    'myVar' 63
  }
  'tiles' [
    {
      // text input to allow you to change the value of this variable 
      'type' 'input:text' 'x' 0 'y' 0 'w' 3 'h' 1
      'title' 'Input'
      'macro' <% { 'events' [ { 'tags' 'input' 'type' 'variable' 'selector' 'myVar' } ] 'data' $myVar } %>
    }
    {
      // Tile used to display the value of the variable
      'type' 'display' 'x' 3 'y' 0 'w' 2 'h' 1
      'title' 'My Var'
      'options' { 'eventHandler' 'type=variable,tag=input' }
      'macro' <% { 'data' $myVar } %>
    }
  ]
}

Behind a reverse proxy and a path

docker run --rm -d -p9090:3000 -v /opt/dashboard-macros:/data -e BASE_HREF=/dashboards/ --name=discovery-explorer warp10io/discovery-explorer:latest

NginX configuration sample:

  location ~ ^/dashboards$ {
     set $myargs $args;
     return 303 $scheme://$server_name/dashboards/$is_args$myargs;
  }

  location /dashboards/ {
    proxy_pass http://127.0.0.1:9090;
    rewrite /dashboards/api/(.*) /api/$1  break;
    proxy_redirect off;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host       $host;
    proxy_set_header Upgrade    $http_upgrade;
    proxy_set_header Connection $http_connection;
  }

Remote dashboards

Since version 1.0.50, you can now declare remote dashboards.

There are two ways (not incompatible) to do it:

Declare each dashboard as an HTTP url
Declare an endpoint that provides a collection of dashboard urls.

Discovery setup for single dashboards URL

You can declare a set of remote individual dashboards. They must be served by an HTTP server.

In conf.json:

{
  "dashRoot": "/data",
  "remoteCollections": [],
  "remotes": [
    "http://your-http-server/monitoring/prod/worker01.mc2",
    "http://your-http-server/monitoring/prod/worker02.mc2",
    "http://your-http-server/monitoring/prod/worker03.mc2"
  ],
  "plugins": []
}

In this sample, mc2 files are served by an HTTP server and remotes stands for a collection of dashboard urls.

Discovery setup for a collection of dashboards URLs

You can also declare a set of endpoint which must return a list of individual dashboards URLs. It could be served by a REST API.

You can also use Warp 10's HTTP Plugin to expose a collection of urls. Here is a sample of a mc2 file used by the HTTP Plugin:

{
  'path' '/dashboard' // root path
  'prefix' true // allow to get path info
  'parsePayload' true // parse payload of a POST url encoded
  'macro' <%    
    'request' STORE
    // list dashboards
    [
      'http://your-http-server/monitoring/preprod/preprod1.mc2'
      'http://your-http-server/monitoring/preprod/preprod2.mc2'
      'http://your-http-server/monitoring/prod/load-balancer.mc2'
    ] 'dashboards' STORE
    {
      'status' 200  
      'body' $dashboards ->JSON
      'headers' { 'Content-Type' 'application/json' }
    }
  %>
}

You can declare this endpoint as follows:

{
  "dashRoot": "/data",
  "remoteCollections": [
    "https://your-warp10:8082/dashboard/"
  ],
    "remotes": [
      ...
    ],
  "plugins": [ ]
}

remoteCollections stands for a list of urls returning a list of dashboard urls.

KeyCloak handling

It works with regular expression, like said earlier.

[...]
 "routing": [
      {
        "path": "/.*",
        "groups": [ ".*" ],
        "private": true
      },
      {
        "path": "http://your-http-server/monitoring/.*",
        "groups": [
          "/Remotes"
        ],
        "private": true
      },
      {
        "path": "/senx/.*",
        "groups": [
          "/SenX"
        ],
        "private": true
      },
[...]

Useful resources

Found an issue on this page or something missing?
Tell us onThe Lounge, the Warp 10 Community Slack.