This article describes the design and current development progress of the three main components of the User Interface: Toolbox, Workbench, and Run-time Simulation & Monitoring Console.

The front-end user interface was designed considering the three main concepts in which SmartCLIDE’s functionalities can be grouped:

  • Workflows – result from combining services using Business Process Model and Notation (BPMN) diagrams.
  • Services – resources available through an URL that can be integrated to create complex scenarios.
  • Deployments – instances of services or workflows that run on specific environments (e.g., Amazon Web Services).


The actual design of the workflow requires a BPMN editor. The elements are dragged onto the drawing area and the fields from the “Properties” and “Functionality” tabs of each node/task must be completed. Throughout this process, the Smart Assistant aids the developer by suggesting nodes as the workflow is being designed.

BPMN Editor
Eclipse Theia code editor

At any time, the user can change to the “Code Editor” tab, inspect, and manually edit the code being generated by SmartCLIDE using an instance of the Theia code editor

A task can be easily implemented using an existing service. For that, SmartCLIDE provides the Service Discovery tool which receives details of new registries, analyses them, and suggests services that match the meta-data provided by the developer. The default usages include deployable versions, services connected to the web or services in source code.

Security analysis page
Vulnerability assessment page

When the workflow is completed, the developer can test it.

SmartCLIDE allows the user to run in the background a security analysis on the workflow, as well as assessing its vulnerability, namely identifying potential security breaches.


As in the case of the workflows, in the Services page, the user can filter the services by developer (“My Services”, “Shared with Me” or “Public Services”) or any keyword (i.e., name, URL, description, or license) or value (update date) written in the search bar. Finally, this page is the starting point for creating, editing, or removing services as well.

The main page of the services
Code auto-completion

SmartCLIDE also provides an Eclipse Theia instance, as a source code editor. For the services’ implementation, the Smart Assistant helps the developer with code auto-completion, …/…

…/… live template recommendations, …/…

Live template recommendation
Comments generation

…/… comments generation (and service testing automation (using JUnit).


On the Deployments page, the user can monitor his own deployments and deployments shared with him. In addition, through this page, the user can create new and edit or remove past deployments.

Main page of the deployments
Main page of the cost comparison service

Before deploying the workflow/service, the user can see a cost comparison that assists in choosing the best cloud provider and then, go back to the deployment configuration page. It is worth mentioning that the cost simulation service will only be able to provide accurate values at the component level.

The user can choose the metrics to be automatically monitored during runtime in the deployment configuration page. From the main page of deployments, the user monitors the selected metrics. The data of the metrics are collected by the Runtime Monitoring & Verification and the Context Handling components.

Runtime metrics monitoring and visualization page

In a coming video, we will demo the whole process from the workflow creation to the deployment and its monitoring, including the service creation.

If you wish to learn more about this aspect of the SmartCLIDE project, we invite you to read the public deliverable entitled “D3.1 – Early SmartCLIDE Cloud IDE Design“.


No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Tweets
Share via
Copy link
Powered by Social Snap