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