UI Implementation - chuckablack/quokka GitHub Wiki
Overview
The quokka UI is written using the React-JS framework, and as such, it is written as a combination of HTML and JavaScript.
The following image shows a high-level overview of the the components at play in the quokka UI:
Two sources: web pages and data
As can be seen in the diagram above, the quokka UI gets information from two sources:
- The UI page side on the right of the diagram, where a component called 'nodejs' runs, and serves up the web pages of HTML and JavaScript code.
- The quokka data side on the left, where quokka is running, and is providing a REST API by which the quokka UI gets the data to fill the tables, charts, etc. that are part of the UI.
The "UI pages" side of things provides the framework for the UI, meaning this 'react' portion (originally contributed as open source from facebook), plus components to create the UI look and feel from 'material-ui' (originally contributed as open source from google), plus my JavaScript code, in the form of react components that are part HTML/CSS, and part JavaScript.
The "quokka REST API" side of things provides "endpoints" (URLs) that generally return data that will be used to fill the pages mentioned above.
How it works
Basically, when you start quokka in your browser, you are pointing at the quokka-ui server (on the right in the image above), running nodejs, and which causes the quokka home page to load (currently this is the devices screen). In addition to loading the 'skeleton' of the devices page, nodejs causes the quokka JavaScript code for this page (Devices.js) to load as well.
As part of rendering this page, the quokka JavaScript code makes a request to the quokka server (on the left in the image above), using one of the REST APIs that is part of our Flask application. In this case, it is the 'devices' endpoint. The GET request is made asynchronously (that's how these types of UIs work), such that the web page is loaded and 'alive', while this 'devices' request is made in the background.
Eventually, the devices data is retrieved by the quokka server from the DB, and the devices REST request is returned to the UI, with all the devices data. When this happens, the JavaScript code receives the data, updates its copy of the data for that page, and this triggers the React code to update the page with the data that has been retrieved.
The main thing to be aware of here is that the UI pages and data are coming from two different sources - this is how modern UIs are being built. The main Python part of all this is of course the quokka server's REST APIs, and everything else that happens in accordance with the requests that are received.
Asynchronicity (asynchronousness?) in JavaScript
The asynchronous capabilities and nature of JavaScript is well-suited to user interfaces, where blocking (i.e. waiting) for long periods of time while an action completes, is not desirable. So, when you examine the code in the quokka UI, you will see this behavior in action.
In general what this means is that in React, the page will get initially rendered, and then quokka-ui will fire off a request to the quokka server, asking for data. The UI is rendered completely - text, tables, buttons, etc - but with no data (e.g. list of devices, hosts, services, or status data). When the REST call to the quokka server is complete and the data returns, it gets rendered into the web page.