The development of the user interface involves state-of-the-art technologies, and an architecture conception that enables the system to be highly scalable, customisable and to deal with large data without losing performance. In order to achieve this, the different technologies and tools used need to be compatible and the coding needs to be structured and independent. That is why, supported by the Laravel framework, the Model-View-Controller (MVC) pattern was chosen to develop an adequate user interface. Finally, an interface component is also developed to ensure the communication between the user interface and the other GUARD components.

The GUARD user interface is a dashboard developed to present the different functionalities and services of the GUARD system to the users, allowing them to benefit from functionalities and interact with the GUARD services and components. Therefore, a user interface is developed with state-of-the-art technologies that follows widely accepted programming patterns and architecture. Furthermore, in order to communicate flawlessly with the different GUARD components, the dashboard possesses an interface component that manages the entire communication and data exchange with the different GUARD components and the user interface.

Architecture

The GUARD user interface is created as a flexible and easy-to-scale web application that benefits from a modular development system. Thus, the several development components are independent and interchangeable and can be reused without any major code refactoring.

The development of such modules follows the Model-View-Controller (MVC) pattern. It focuses on the decoupling of the three components code (model, view, controller), which is why the code can be easily reused, and parallel development is also possible, making the system highly scalable, customisable and performance intensive.

While the model is responsible for managing and structuring the data that comes from the different data sources, the controller is the middle component that receives and passes on commands from the view to the model and vice versa. Finally, the view receives data from the controller and displays the retrieved data in a user-friendly manner to the end user.

Technologies and Tools

Several technologies and tools are used in the development of the dashboard. Some to visually improve the interface for the user, others to support the coding structure and to simplify the data retrieval and management process in the model and controller before it is displayed to the end user. In the following, only the main technologies and tools used in the development of the GUARD user interface are described:

• Laravel is an open-source PHP framework that creates the structure for the development of the user interface. Thus, it facilitates the development by supporting the developer with different out-of-the-box components such as authentication, routing, session, caching and easing common tasks used in web-based application projects.
• MySQL can be defined as the relational database management system of the GUARD user interface. It manages and stores data related to users, roles, permissions, and authentication. MySQL is fully designed as a transaction safe database that follows the four key database transaction properties, namely atomicity, consistency, isolation, and durability (ACID). Further, it provides full commit, rollback and crash recovery functionalities.
• Elasticsearch-Logstash-Kibana (ELK Stack) is an open-source technology that consists of three components. First, Elasticsearch is a search-based engine that works as a NoSQL database. It is used in the GUARD development for the storage and quick retrieval of large data information sent by the different GUARD components. As it is a NoSQL database, it can easily adapt and accept any data sent from the GUARD components that is sent in JavaScript Object Notation (JSON) format.

Second, the Logstash technology is a server-side data processing pipeline that is able to ingest data from different sources, transform the data and load it in a different destination. Logstash is simply stated an extract-transform-load (ETL) tool. In the user interface, Logstash is used to retrieve data sent by different GUARD components to the GUARD system central message bus, transform it, and store it in the Elasticsearch database.

Finally, Kibana is a visualisation tool used in the user interface to present the results and data gathered by the GUARD system to the user. The data is presented in form of data visualisation, such as charts, tables, and graphs. Kibana is also part of the ELK Stack and retrieves the data from the Elasticsearch engine.

• js is a JavaScript library that is able to visualise data in the format of network graphs. It also allows the data in the graph to be interactive so that the user is able to select the different data nodes and retrieve more detailed data information presented to the user.
• Docker is used by the GUARD user interface to easily develop and deploy the web application locally and also within the GUARD server. Docker is a container-based technology that enables the web application to be containerised and easily deployed in any environment without the need to install, configure or update the versions of the used technologies, tools and libraries. It serves project-wide within GUARD as the build and deployment technology and simplifies the overall integration of all components throughout the development cycle.

Dashboard interface to GUARD components

The user interface (dashboard) communicates with two different data sources, the first one being the internal dashboard MySQL database. The MySQL database is responsible for the data related to dashboard users, authentication, permission and roles of users inside the dashboard. This connection can be seen on the left side of the figure below.

The dashboard interface component, displayed as the representational state transfer (REST) interface in the figure above, is responsible for creating different REST requests to the centralised GUARD storage system. It receives the request from the controller and communicates with the storage system in order to retrieve the requested data. The interface component also handles the request status according to standardised Hyper Text Transfer Protocol Secure (HTTPS) status codes that are used to communicate the transfer status between the storage system and the dashboard interface. If the transfer doesn’t work properly, it communicates the issue with the controller that is then able to communicate it to the user.