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:latestOr, 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:latestSettings
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=45Usage 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:latestNginX 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 on
The Lounge, the Warp 10 Community Slack.