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

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;
  }