ABOUT ME
• Python Dev / sqreen.io
• DevOps
• lothiraldan
Slide 3
Slide 3 text
WHY A WEB GUI?
Slide 4
Slide 4 text
❤ SALTSTACK
Slide 5
Slide 5 text
SALT -V ‘*’ PKG.INSTALL
OPENSSL —REFRESH=TRUE
Slide 6
Slide 6 text
SALT -V ‘*’
TEST.VERSION
Slide 7
Slide 7 text
SALT-CLOUD -M MAPFILE
Slide 8
Slide 8 text
DISLIKE SALTSTACK
Slide 9
Slide 9 text
ONE OR MORE REQUISITE ERROR ?
Slide 10
Slide 10 text
WHERE IS IT ?
Slide 11
Slide 11 text
HO IT’S HERE
Slide 12
Slide 12 text
DEV&OPS FRIENDLY
• CLI is efficient, but…
• Not QA / Frontend Dev / Backend dev friendly
Slide 13
Slide 13 text
OBJECTIVES
• Improve the UX
• Decrease the time needed
Slide 14
Slide 14 text
HIGHSTATE OUTPUT
Slide 15
Slide 15 text
DO WE NEED TO DISPLAY ALL
OUTPUT?
Slide 16
Slide 16 text
SUCCESS
ID: working_file
Function: file.managed
Name: /etc/working_file
Result: True
Comment: File /etc/working_file is in the correct state
Started: 11:12:00.785722
Duration: 3.396 ms
Changes:
Slide 17
Slide 17 text
SUCCESS
ID: working_file
Function: file.managed
Name: /etc/working_file
Result: True
Comment: File /etc/working_file is in the correct state
Started: 11:12:00.785722
Duration: 3.396 ms
Changes:
NOISE ✖
CHANGES
ID: changing_file
Function: file.managed
Name: /etc/changing_file
Result: True
Comment: File /etc/changing_file updated
Started: 11:12:00.789479
Duration: 3.244 ms
Changes:
----------
diff:
SMALL SIGNAL ✔
Slide 20
Slide 20 text
ERRORS
ID: bad_file
Function: file.managed
Name: /etc/badfile
Result: False
Comment: User inexistant is not available
Started: 11:12:00.802779
Duration: 1.809 ms
Changes:
Slide 21
Slide 21 text
ERRORS
ID: bad_file
Function: file.managed
Name: /etc/badfile
Result: False
Comment: User inexistant is not available
Started: 11:12:00.802779
Duration: 1.809 ms
Changes:
HUGE SIGNAL ✔
Slide 22
Slide 22 text
REQUISITE ERROR
ID: dependency_file
Function: file.managed
Name: /etc/dependency_file
Result: False
Comment: One or more requisite failed: sample.bad_file
Started:
Duration:
Changes:
Slide 23
Slide 23 text
REQUISITE ERROR
ID: dependency_file
Function: file.managed
Name: /etc/dependency_file
Result: False
Comment: One or more requisite failed: sample.bad_file
Started:
Duration:
Changes:
NOISE ✖
Slide 24
Slide 24 text
SALTPAD V1
Slide 25
Slide 25 text
SALTPAD V1
Slide 26
Slide 26 text
SALTPAD V1
• Classic web interface
• Python / Flask which request salt-api and render
html
Slide 27
Slide 27 text
ARCHITECTURE
Slide 28
Slide 28 text
FEEDBACK
• Used every day by at least one company
• Small but nice feedback from community
• ~60 issues
Slide 29
Slide 29 text
USAGE
• ~ 60 minions
• Deployment every day
• ~ 10 000 jobs
IT’S PYTHON !
• Compatibility asked with python 2.6
• What about python 3
• Windows compatibility
• Bug with six module
• Bug with werkzeug
Slide 33
Slide 33 text
IT’S WSGI!
• Difficult to configure.
• Requires to configure gunicorn + nginx or apache
+ ssl.
• Not easy when it’s your job, so when it’s not your
job…
Slide 34
Slide 34 text
NO DB!
• Use directly the salt-api
• No DB to configure
• Stored templates in salt-master configuration
Slide 35
Slide 35 text
REQUEST / RESPONSE BASED
• Lack of responsiveness due to the traditional request /
response design.
• Community asked for better UX
• Launch a job and stay on the launch page
• Have the jobs update their result in near real-time
• Requires more JS
Slide 36
Slide 36 text
IT’S SLOW
• Some (most) pages end up in timeout because of
salt-api requests
• Ends up with « working » pages and « not
working » pages.
Slide 37
Slide 37 text
A BETTER WAY
Slide 38
Slide 38 text
SALT DIRTY LITTLE SECRET
Slide 39
Slide 39 text
IT’S EVENT BASED!
Slide 40
Slide 40 text
SALT EVENTS
• Each event is shared through an event-bus
• You can plug reactors (code to respond to events)
• See the real-time events across the infrastructure
(salt-run state.event pretty=True)
• Exposed via salt-api
Slide 41
Slide 41 text
SALTPAD V2
• Use events forwarded by web socket endpoint!
Slide 42
Slide 42 text
NEW ARCHITECTURE
Slide 43
Slide 43 text
NEW ARCHITECTURE
• Developed as a Single App Page with React.
• Listen to the event endpoint and update the view.
Slide 44
Slide 44 text
SALTPAD V2
Slide 45
Slide 45 text
REACT FTW
• React architecture make it easy to create a real-
time application.
• Receive an event through the event endpoint.
• Parse the event and update the global state.
• Re-render all the view!
Slide 46
Slide 46 text
EASIER INSTALL
• Drop the archive
• Create the settings file
• Configure your web server
Slide 47
Slide 47 text
BETTER UX
• See the status of your last jobs while checking
something else
• Mark jobs to retrieve them later
Slide 48
Slide 48 text
PROBLEMS
• Not compatible yet with 2015.8.3 :(
• People don’t read README
• Still ALPHA!
Slide 49
Slide 49 text
JOB MASTER CACHE
• Salt store job output on disk by default
• Easy to saturate, df -h / df -i
• Use alternate job master cache like Postgresql
Slide 50
Slide 50 text
FEATURES
Slide 51
Slide 51 text
DEMO
Slide 52
Slide 52 text
CULTURAL IMPACT
Slide 53
Slide 53 text
ONE CLICK DEPLOYMENT
Slide 54
Slide 54 text
CLEAN OUTPUT
Slide 55
Slide 55 text
HTTPS://SALT/JOB_RESULT/
20160127081900219150
Job result URL