nlvmug 16 maart 2017 · commando’s •smashing new •cd •bundle •dashing start •smashing...
Post on 27-Jul-2020
8 Views
Preview:
TRANSCRIPT
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
top related