Skip to content

5. User interface

Jump to bottom
carmelocassisi edited this page Jan 16, 2024 · 20 revisions

All URLs reported below assume the TSDSystem service running in localhost.

Welcome page

image

In the image above, a snapshot of the welcome page when accessing the web interface at http:\\localhost\tsdws.

Public links

The following links are always available in the welcome page (even for unregistered users):

Links section:

Swagger UI section:

  • TSDSystem: link to the Swagger UI for the documentation of the TSDSystem REST API
  • FDSN Station XML: link to the Swagger UI for the documentation of the FDSN StationXML REST API (a standard for the description of the seismic stations), available for stations stored into the TSDSystem.

Login procedure

On welcome page the "Sign in" link allows user to authenticate into the system, by input the email and password used during registration, in the login form (see figure below - on the left).

Otherwise, the "Sign up here" link on the bottom of the login form can be used. On click, the registration form will be shown (see figure below - on the right ).

image

Registered user can reset the forgotten password using "Forgot password?" link in the login form.

Enabled links

After login the welcome page will enable other links to interact with the TSDSystem (listen below):

Web GUI section:

  • Timeseries request: a link to the main form to request timeseries and visualize them into charts
  • PNet web app: a link to the management page of the sensors networks
  • Resources edit forms: (only for admin users) a link to the management page for all TSDSystem resources

Admin Tools section (only for admin users and in full installations versions):

  • Grafana: link to the included Grafana service page (need credentials set in .grafana_admin_password file on installation phase)
  • PGAdmin: link to the included PGAdmin service page (need credentials set in environment variables on installation phase).

image

Swagger UI

For the REST API documentation the Swagger UI tool is used.

The following sections describe the two pages generated using Swagger UI for TSDSystem REST API and FDSN StationXML web service, respectively.

TSDSystem

image

FDSN StationXML

image

Web GUI

Timeseries request

To request values of timeseries stored into TSDSystem, users can use the link Timeseries request under the Web GUI section of the welcome page.

The Timeseries request form is shown below. It consists of three main sections:

  1. Global period settings: used to set a same period (defined by Start and End datetimes for all subsequent requests.
  2. Action buttons:
    • Add request: add a new tab containing a request form into the Request container.
    • Remove all: remove all tabs from Request container.
    • Send: Send all requests in Request container to the server. The timeseries will be shown into charts in a new browser window.
  3. Request container: organizes request into tabs. Each Single request tab contains a form consisting of several input, according to parameters handled by the TSDSystem REST API. The selected inputs are shown in JSON format in the right side of the Single request tab, under the "JSON request preview" label.

hpctsd-docker_tsdws_form_

For each new request a request_id is assigned by the interface. For the new request contained into the Single request tab the user can type:

  • Request title (it will be shown in the tab label and used for the chart title).
  • Timeseries, that can be selected by
    • by name (in this case press ON in the Search timeseries by row and type the name into the text edit box or filter by combobox)
    • from station network (in this case the selection pass from the Net->Station->Configuration->Channel ordered sequence of choices)
  • Column (of the selected timeseries, it can be have more than one column)
  • Start period (default the Start datetime selected in the above Global period settings section)
  • End period (default the End datetime selected in the above Global period settings section)
  • Group by: defined by a time range X <seconds|minutes|hours|days|months|years>, used to aggregate samples by means of one of the following functions: AVG|MEDIAN|COUNT|SUM|MIN|MAX

A request can be resetted or removed using the buttons positioned in the bottom of the Single request tab.

When all requests will be set, the user can send them using the Send button placed into the Action buttons section. The result will be shown in a new browser window as shown in the figure below:

hpctsd-docker_tsdws_form_plot-response_

The result page contains a chart for each timeseries request sent to the web service. The timeseries are plotted into the Chart area. Plotly JavaScript Open Source Graphing Library is used to make charts. In fact, in the top right of the Chart area a set of Action buttons are shown on mouse over. A custom showSettings button was added to default buttons to allow users to customize the chart. By click on showSettings button a Chart settings panel is shown on the top of the chart.

PNet web app

PNet web app is a user-friendly interface for consulting and managing sensor network data, by means of the underlyng TSDSystem REST API.

The web page consists of five main sections, where two of these are always visible, and other two are hidden by default:

  1. Stations map (always visible),
  2. Top menu panel (always visible),
  3. Left menu panel,
  4. Right menu panel (hidden by default),
  5. Messages (hidden by default).

hpctsd-docker_tsdws_pnet_

Station map

The main section (in size) of the page, it covers the entire page and contains a geographical map to visualize the location of Stations (colored according to the Nets of belonging to) and Sites.

Top menu panel

The Top menu panel is used to show the authenticated user info, and to access editing of global settings.

In the right of this panel a set of buttons allow to show/hide the following panels:

Left menu panel

The Left menu panel, is a panel overlaying the Station map. It is divided into three subsections, where two of these are collapsable:

  1. Stations,
  2. Instrument management (collapsable),
  3. Filters (collapsable).

Stations

The Stations subsection lists all registered stations in a tree view mode. Each root node represents a station and branches in this order (according to the database model):

  • for each Station, lists the relative Configurations over time, distinguishing expired (in red) from the actual one, basing on their start and end times;
  • for each Configuration lists the registered Channels;
  • for each Channel lists the mapped Timeseries.

The tree items show, on mouse over, several pop-up buttons for detailed visualization (e.g. for the stations: the genereated StationXML, the geographical localization on the Station map) or for editing of the relative information.

image

Concerning the editing buttons, the click on some of these will make it appear the hidden Right menu panel containing the "Edit/Add new form" for the selected resource. In the figure below, an example of form to add a new Station configuration.

hhpctsd-docker_tsdws_pnet_ (1)

All edit forms are defined by JSON schemas and generated using the JSON Editor javascript library.

Instrument management

The Instrument management subsection can be used for the registration and editing of Sensors and Digitizers.

When no item is selected an "Add new button" (green rectangle in the figure below) is shown on the right of the relative combobox, while on selection, an "Edit button" (blue rectangle in the figure below) is shown. By clicking on one of these last, the hidden Right menu panel containing the "Edit/Add new form" for the selected resource will appear.

hpctsd-docker_tsdws_pnet_ (3)

Also in this case, all editing forms are defined by JSON schemas and generated using the JSON Editor javascript library.

Filters

The Filters subsection allows to filter the Stations list by Nets and/or Sites (beyond for the registration and editing), to show/hide dismissed channels or Sites on Station map.

Right menu panel

The Right menu panel is a hidden panel. It is shown when necessary (i.e. to show forms for global settings - see the red button highlighted in the Top menu panel of the figure below - or for editing resources). This panel overlays the Station map when shown.

hpctsd-docker_tsdws_pnet_ (2)

Messages

The Messages panel is hidden by default. This panel can be toggled using the button Messages on the right side of the Top menu panel. The label of this button indicates also the number of unread messages written by the interface. Also this panel overlays the Station map when opened and shows a list of the calls requested to the TSDSystem REST API together with its outcome.

hpctsd-docker_tsdws_pnet_ (2)

Resources edit forms

Users who have been granted administrative privileges can handle all the resources of the TSDSystem accessing the Resources edit forms link under the Web GUI section of the welcome page.

The page contains several links, organized by type of resources (timeseries, network, users), pointing to forms for the editing or for adding new instances of the TSDSystem resources.

hpctsd-docker_tsdws_pnet_ (2)

In the figure below, an example of Timeseries edit form is shown. All edit forms are defined by JSON schemas and generated using the JSON Editor javascript library.

example-of-form

Admin Tools

The Admin Tools links section of the Welcome page is enabled only for full installations versions, and consists of two links to installed local instances of Grafana and PGAdmin.

Grafana

Grafana is an open source analytics & monitoring solution for accessing a wide range of database types. It can be used also to visualize time series data stored into the TSDSystem database.

Accessing to the local instance of Grafana (es. http://localhost/grafana) needs credentials set in .grafana_admin_password file on installation phase.

NOTE: The password contained into .grafana_admin_password file is intended for the default user admin.

After the admin user logs into the interface, he can (among the main actions):

  • register the datasources from which read data,
  • build dashboards (and eventually make them public),
  • define users that can access to the interface,
  • set alert rules about specific timeseries to monitor, the communication channels and relative recipients.

NOTE: To add the TSDSystem data as Datasource in Grafana, select a PostgreSQL datasource and in the PostgreSQL Connection section let input as Host the value of the variable DB_HOST indicated in .env file in the installation phase (default string is db), or the name of the server machine followed by the port (es. <hostname>:5432).

For any other detail about the utilization, please refer to the official documentation page of Grafana.

PGAdmin

PGAdmin is the most popular and feature rich Open Source administration and development platform for PostgreSQL, the most advanced Open Source database in the world.

The installation of a full version, enable the server to build up this service responding at the URL http://localhost/pgadmin4 with a web interface allowing the administrator to connect to and manage the internal PostgreSQL RDBMS of the TSDSystem, instead of installing a local client.

The access to the web interface need credentials set in environment variables on installation phase.

For any other detail about the utilization, please refer to the official documentation page of PGAdmin.

Clone this wiki locally