I neglected my blog so much that I feel deeply ashamed returning to it after so long. I even forgot how WordPress administration console works and what customisations I’ve added year ago ;). However – like they say – it is never too late to do the right thing. Therefore, I’m going to push myself into creating two or more blog posts this month. Especially that I’ve received very positive feedback after my session delivered at the start of POUG Workshop 2020 – for which I’d like to thank you all. And such good feedback oblige me to elaborate in more details about my session.
First of all my presence at POUG comes from the fact that I work at Advatech and we – as a company – are one of the main sponsors of POUG conferences and we do this from the very beginning. That should tells you that I’m not regular speaker; I’m not “IT celebrity” as I used to call brilliant specialists combining technical expertise with presentation skills. I’m just engineer who only sometimes (very rarely) takes part in events like this as a speaker. But POUG is an exception and I already presented there 3 times (plus once on Meetup edition). BTW: POUG stands for Pint With Oracle User Group and is very active community of Oracle administrators, engineers, fans in Poland – started and maintained by Database Whisperers (known also as ORA600) with theirs energetic leader Kamil Stawiarski (Oracle ACE & OCM).
Secondly, POUG Workshop has been postponed due to COVID-9 situation and its formula has changed from typical conference to online event. That caused that my stress rose higher as – you know – it is much harder to keep audience attention using typical slides approach (also, you can’t use your hands in case when your English vocabulary is not sufficient to express your thoughts). It is also very pity (yet necessary) that we could not meet face to face – hence this conference is not only technical, but also very much about networking and is known from its relaxed atmosphere and a lot of beer flowing around.
Reveal.js
Having that in mind I felt that I need to prepare my session in a manner which will hold people attention and not be a typical static slides. I decided to use Reveal.js project, which is open source JavaScript library created by Hakim El Hattab and contributors. The library allows you to write your presentation in HTML and use some built-in features which generally make it visually more attractive. You can for example use two-dimensional navigation layout, use Markdown, gifs, links, animate piece of code and a lot of interesting things.
But that was not enough. I don’t cover technical staff in this blog entry, especially I don’t want to repeat what I did during the session – but because that suppose to be workshop type of conference – I came up with the idea (internally in mind – which unfortunately is the most motivating kind) that I should connect my presentation with the lab environment used during my session. Also I asked myself a question: would it be possible to do everything I needed to show from within a browser – so only browser content could be shared over Zoom webinar session.
xTerm.js
To achieve that I’ve investigated if I can connect to remote system – using terminal connection – just from a browser, i.e. without switching focus to dedicated SSH client application. I found some solutions (shellinabox, Bastillion, xTerm.js) – but they were not so easy to use. Usually they assumed that either you will use entire page as a terminal, required additional processes to be run on client or – as xTerm.js – did not have SSH part implemented. Finally I’ve decided to use xTerm.js anyway and to make it work I’ve created NodeJS server application which I started on every cluster node. This small application effectively spawned local bash/screen process and connected its input/output streams with xTerm.JS running in the browser. The communication channel is using WebSocket which is technology available in most modern browsers. This part was inspired on this https://github.com/mikechernev/xterm-revealjs-presentation-sekeleton project. However I’ve created regular RevealJS plugin to integrate this with presentation framework I used. I also implemented communication differently to allow inter-system communication – which effectively end up with creating my own CA (Certificate Authority) and use SSL for all communication.
SVG with JavaScript
Another thing I wanted was to have at least one diagram covering Oracle Clusterware daemons and their startup sequence. This is complicated part of my session and I wanted to create diagram which allows user to interact with it – showing information while user moves mouse over the diagram. This might be achieve by using various methods – and SVG is one of the easiest. You just create your diagram in vector graphic program (I used Inkscape) – and then you can edit it (this is just text) and put some interactivity in it (using JavaScript) . You can also add interactivity later on in the web page code – but in this case I wanted it to be independent – so I can publish it on any web page, like here (move your mouse over levels and then over revealed parts of diagram):
eCharts and Interactivity
The last thing I wanted to have – was ability to depict cluster resources in my presentation automatically and dynamically. For example – I create new resource in a cluster and after few seconds this magically appears in my presentation. If I relocate a resource to other server – I want it to be reflected automatically in the browser. When I click on resource – there is tooltip shown with most important resource attributes. Initially this looked difficult, considering my JavaScript experience is limited (only wrote few scripts for Oracle ZFS Storage Appliance) and honestly JavaScript is not easy language (kind of asynchronous, UI oriented, etc.). But I succeeded but for client part I used library called eCharts. Initially I wanted to use PlotlyJS – which I knew already – but it did not had graph diagrams, which I needed.
More on that interactivity in next blog entry 😉