NLVMUG– 16 maart 2017

Bouw je eigen dashboard met Dashing / Smashing

Bouke Groenescheij – Jume BV

Bouke Groenescheij• Eigenaar / Consultant / Trainer

• Jume BV

• vSphere / VRO / PowerCLI / API / DevOPS

• W: www.jume.nl

• E: bouke@jume.nl

• T: @boukeg

• F: 06-21873858

Dashing / Smashing

• Wat is Dashing / Smashing?• Smashing, the spiritual successor to Dashing, is a Sinatra based framework

that lets you build excellent dashboards. It looks especially great on TVs.

• Waarom Dashing / Smashing• Goed zichtbaar op grote afstand

• Vrijheid om eigen widgets te bouwen / volledig aanpasbaar

• Prima community / open source

• Push / Pull mogelijkheid

• Ontwikkeld door:• Daniel Beauchamp

Agenda

• Techniek

• Installatie

• Bestaande widgets

• File structuur

• Eigen widgets (vSphere)

• Voorbeelden

• Vragen

Wat heb je nodig

• Wat HTML / CSS / JavaScript kennis

• Een VM / Raspberry PI / ChromeCast

• Doorzettingsvermogen / tijd

Voorbeeld (wat kan je bouwen?)

Techniek

• Ruby Sinatra• http://www.sinatrarb.com/documentation.html

• Rufus scheduler• https://github.com/jmettraux/rufus-scheduler

• Batman.js• http://batmanjs.org/

• Gridster• http://dsmorse.github.io/gridster.js/

• Thin webserver• http://code.macournoyer.com/thin/

• Server-sent events• https://en.wikipedia.org/wiki/Server-sent_events

• Font Awesome• http://fontawesome.io/

Techniek

APIServer-sent events

Push / Pull

Installatie

• Op Ubuntu:• sudo apt-get update && sudo apt-get -y upgrade• sudo apt-get -y install curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-

dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties libffi-dev nodejs unzip make libmysqlclient-dev

• wget https://cache.ruby-lang.org/pub/ruby/2.4/ruby-2.4.0.tar.gz• tar -zxvf ruby-2.4.0.tar.gz• cd ruby-2.4.0/• ./configure• sudo make install• cd ..• sudo rm ruby-2.4.0* -Rf• sudo gem install bundler roo mysql2 bundle htmlentities rdf-rdfxml xml-simple simple-

rss tiny_tds httparty json nokogiri google-api-client puma passenger• sudo gem install smashing

Commando’s

• smashing new <name>

• cd <name>

• bundle

• dashing start

• smashing generate dashboard <name>

• smashing generate widget <name>

• smashing genetate job <name>

• smashing install GIST_ID

• Running in background:• sudo smashing start -d -p 80

• https://github.com/Smashing/smashing/wiki/Additional-Widgets

Andere Widgets

Folder Structuur

• Na ‘smashing new’:

Folder Structuur

• Na ‘smashing generate dashboard <name>’

Inhoud dashboard.erb

view vs. id vs. bind

• data-view = widget

• data-id = unique id voor widget te vullen

• data-<value> = initiele waarde in het widget

• bind = data in widget

Folder Structuur

• Na ‘smashing generate widget <name>’

Widget .html, .coffee, .scss

• Data-bind=“<name>”

• Class = .css

• .coffee = acties op het widget (formatting bij inkomende data)

• .scss = formatting van widget

Folder Structuur

• Na ‘smashing generate job <name>’

Dashboard: vmugnl.erb

<div class="gridster">

<ul>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">

<div data-id="my_widget" data-view="Text"></div>

</li>

</ul>

</div>

Widget: text

<h1 class="title" data-bind="title"></h1>

<h3 data-bind="text"></h3>

<p class="more-info" data-bind="moreinfo"></p>

<p class="updated-at" data-bind="updatedAtMessage"></p>

Voorbeeld PowerShell

$url = "http://da"

$widget = "my_widget"

$body = "" | Select-Object "auth_token","text"

$body.auth_token = "YOUR_AUTH_TOKEN"

$body.text = "Hello NLVMUG!!!"

$json = $body | ConvertTo-Json -Compress

Invoke-WebRequest -UseBasicParsing -Uri"$($url)/widgets/$($widget)" -Method:Post -Body $json

Resultaat

vSphere stats List widget

<h1 class="title" data-bind="title"></h1>

<ol>

<li data-foreach-item="items">

<span class="label" data-bind="item.label"></span>

<span class="value" data-bind="item.value"></span>

</li>

</ol>

<ul class="list-nostyle">

<li data-foreach-item="items">

<span class="label" data-bind="item.label"></span>

<span class="value" data-bind="item.value"></span>

</li>

</ul>

<p class="more-info" data-bind="moreinfo"></p>

<p class="updated-at" data-bind="updatedAtMessage"></p>

Toevoegen aan vmugnl.erb dashboard

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">

<div data-id="vspherestats" data-view="List"></div>

</li>

vSphere Stats

$url = "http://da"

$widget = "vspherestats"

$body = "" | Select-Object "auth_token","title","items"

$body.auth_token = "YOUR_AUTH_TOKEN"

$body.title = "vSphere Stats"

$items = @()

$row = "" | Select-Object "label","value"

$row.label = "vCenters"

$row.value = 2

$items += $row

$row = "" | Select-Object "label","value"

$row.label = "Hosts"

$row.value = 3

$items += $row

$row = "" | Select-Object "label","value"

$row.label = "VMs"

$row.value = 1000

$items += $row

$body.items = $items

$json = $body | ConvertTo-Json -Compress

Invoke-WebRequest -UseBasicParsing -Uri "$($url)/widgets/$($widget)" -Method:Post -Body $json

Resultaat

Voorbeelden

Voorbeelden

En nu???

• Ga naar Smashing: https://github.com/Smashing

• Installeer Smashing...

• Probeer de workshop: https://github.com/Smashing/smashing/wiki/Dashing-Workshop

• Check presentatie van ontwikkelaar: https://vimeo.com/95307499

• Download benodigde widgets: https://github.com/Smashing/smashing/wiki/Additional-Widgets

• Chat mee op gitter: https://gitter.im/Smashing

Vragen