/
The User Interface

The User Interface

Owned by Philip Colmer
Last updated: Jan 15, 2025
2 min read

The Hub user interface is written in TypeScript, using Node.JS and components from Cloudscape Design. The latter gives the Hub a consistent use across the different solutions and engineers thinking about how users might interact with their solution may want to take some time looking at the demos, patterns and components to get some ideas of what is possible … but the Web Development team is more than happy to talk with you to brainstorm some UI concepts.

The Hub consists of:

  • A front-end page that users see if they are not signed in. The content and design of this page is owned by Marketing.

  • Once a user is signed in, they have their own customisable dashboard. The dashboard consists of a number of widgets (see below for more details), and the user is able to resize, move, remove and add widgets to the dashboard.

  • The Library. This is a collection of documentation built from git reposiories. The current implementation builds from Read The Docs reStructured Text files. Markdown will be supported in the future.

  • Support. Each solution gets its own Service Desk project on https://linaro-servicedesk.atlassian.net. This alllows each solution to provide the appropriate people for dealing with support tickets. A Service Desk project consists of request types, which are the different types of tickets that can be created, and specify what information can be provided when a ticket is created, and which fields must be provided at the time of creating the ticket. An additional feature of incorporating support into the Hub is that the user interface can, if required, provide some of the data for the ticket automatically at the time of creating the ticket.

plus the user interface for each solution. This last piece is the part of the Hub that is specific to each solution and one where engineers will need to engage with the Web Development team. Each solution must present REST APIs that use SPIRE-generated authorization tokens so control access to those APIs.

Widgets

There are three types of widgets:

  1. System-provided. These are generally intended to present information that may be useful to all users. For example, the Blogs, White Papers, and Videos and Webinars widgets.

  2. Subscription-provided. Once a user has a subscription to a solution, they are given access to one or more widgets for that subscription. ONELab, for example, only has one widget at the time of writing, but a solution might have different widgets to present different high level summaries. Typically, clicking on the widget, or an element in the widget, will take the user to a more detailed page for that solution.

  3. Solution-provided. One of the key points of the Hub is to “promote” solutions that the user doesn’t currently have a subscription for. These widgets are the same as those used on the non-signed-in front-end page and can be used to allow the user to see some further information or, perhaps, a limited interface to allow them to discover more about the solution.

A widget can essentially display anything that can be displayed on a web page. It can use TypeScript code to pull dynamic information from the solution’s APIs.