Skip to main content

ALP-CONNEX Management UI — User Handbook

Introduction​

The ALP-CONNEX Management UI is a web-based application for managing your connector infrastructure. It provides a central interface to create and manage MQTT and IEC 104 connectors, define data mappings, visualize data flows, monitor system activity, and manage your software license.

This handbook describes each area of the application and how to use it.

Getting Started​

Login​

The application uses your organization's Microsoft Entra ID (Azure AD) account for authentication. When you open the application, you will be automatically redirected to the Microsoft login page if you are not already signed in.

After successful login, you are redirected to the Dashboard.

If the login fails, you will see a "Login Failed" page with the option to retry or return to the home page.

The main navigation is located in the sidebar on the left side of the screen. It displays icon-based links to all areas of the application. Hover over an icon to see a tooltip with the section name.

IconSectionDescription
🏠DashboardOverview and key metrics
🔌ConnectorsMQTT and IEC 104 connector management
🔄MappingsData point mappings
🔀WorkflowData flow visualization (Experimental)
�Process UpdatesReal-time connector activity
�📄Audit LogsActivity history
🔑LicensingLicense management

At the bottom of the sidebar you will find:

  • Profile — View your account details and change the theme
  • Logout — Sign out of the application

On mobile devices, the sidebar is hidden behind a hamburger menu. On desktop, it is always visible.

The header bar at the top shows your display name, email address, and your Microsoft profile photo (fetched from Microsoft Graph). If no photo is available, your initials are shown instead.

Dashboard​

The Dashboard provides a quick overview of your system's current state. It is the first page you see after logging in.

Key Metrics​

Four summary cards at the top show:

  • Total Connectors — The number of connectors (MQTT + IEC 104) in the system.
  • Active Connectors — How many connectors are currently active.
  • Total Mappings — The total number of data point mappings.
  • License Status — Whether your license is active or inactive, shown as a colored badge.

Mappings by Type​

A pie chart visualizes how your mappings are distributed across the supported IEC 104 data types:

TypeDescription
Type 1 — Single PointBoolean values (on/off, open/closed)
Type 13 — Measured NormalizedNormalized measured values (-1.0 to +1.0)
Type 30 — Single Point with TimeBoolean values with timestamp
Type 36 — Measured Float with TimeFloating-point measured values with timestamp (e.g., temperature, voltage)

Recent Activities​

A list of the latest actions performed in the system. Each entry shows:

  • A colored action tag (Create, Update, Delete, or Configure)
  • The name of the affected item
  • The user who performed the action
  • When it occurred

License Usage​

Two progress bars showing:

  • Used Connectors — How many connectors you are using relative to your license limit.
  • Used Mappings — How many mappings you are using relative to your license limit.

When a limit is unlimited, an infinity symbol is shown.

Live Statistics​

The Dashboard displays real-time statistics via WebSocket streaming, providing instant visibility into your system's activity:

MetricDescription
Messages/secCurrent message throughput across all connectors
Total MessagesCumulative message count since last reset
ThroughputData transfer rate (bytes/sec)
LatencyAverage processing time for messages

The statistics update automatically without requiring a page refresh. A timeline chart shows message activity over time, helping you identify patterns and peak usage periods.

Connectors​

Connectors represent protocol-specific adapter instances. The system supports two connector types:

  • MQTT — Connects to an MQTT broker to ingest IoT sensor data.
  • IEC 104 — Serves data to SCADA/control systems via IEC 60870-5-104.

Connector List​

The connector list displays all connectors in a sortable, filterable table.

Available columns:

ColumnDescription
Display NameThe connector name
DescriptionOptional description text
Log LevelLogging verbosity (Trace, Debug, Info, Warning, Error, Critical, Off) — shown as a colored tag
ActiveWhether the connector is currently active — shown as "Active" (green) or "Inactive" (red)
Type"Mqtt" (blue) or "Iec104" (purple) — shown as a colored tag
Created OnDate and time when the connector was created

Table features:

  • Search — Filter by display name or description.
  • Column filters — Click the filter icon in a column header for advanced filtering. Type and Active columns have dropdown filters.
  • Sorting — Click a column header to sort ascending or descending.
  • Column selection — Use the column picker to show or hide columns.
  • Pagination — Navigate between pages at the bottom of the table.
  • Export — Export the table data to an Excel file (.xlsx).

Creating a Connector​

  1. Click the + button in the table toolbar. You are taken to the Add Connector page.

  2. Fill in the required fields:

    • Type (required) — Select MQTT or IEC 104.
    • Display Name (required) — A descriptive name for the connector (max. 200 characters).
    • Log Level (required) — The logging verbosity. Defaults to "Info".
    • Host (required) — The address of the broker or target system (max. 500 characters).
    • Port (required) — The port number (1–65,535). Defaults to 1883 for MQTT or 2404 for IEC 104.
    • Active — Toggle switch to enable or disable the connector. New connectors are active by default.
    • Description (optional) — Additional notes (max. 1,000 characters).

  3. IEC 104 only — When "IEC 104" is selected as the type, additional protocol parameters are shown:

    FieldDescriptionDefault
    Max ConnectionsMaximum number of simultaneous client connections1
    T1 — Send/Test APDU TimeoutTimeout for send or test APDUs (seconds)15
    T2 — Acknowledge TimeoutTimeout for acknowledging received APDUs (seconds)10
    T3 — Test Frame TimeoutTimeout for sending test frames (seconds)20
    K — Max Unacknowledged APDUsMaximum number of unacknowledged I-format APDUs12
    W — Acknowledge After W APDUsSend S-format acknowledgement after this many APDUs8

  4. Click Save to create the connector, or Cancel to return to the list.

Editing a Connector​

  1. Click a row in the table. You are taken to the Edit Connector page.
  2. Modify the fields as needed. The Type and ID fields cannot be changed.
  3. Click Save to apply the changes, or Cancel to discard.

In edit mode, the connector ID is displayed at the top with a copy button for easy reference (e.g., for use in deployment configuration).

Linking Mappings to a Connector​

In edit mode, a Linked Mappings section appears below the form. This allows you to associate data point mappings with a connector.

To link mappings:

  1. Use the dropdown at the top of the section to search for and select mappings.
  2. Click Link to associate the selected mappings.

To unlink a mapping:

  1. Click the unlink button next to the mapping.
  2. Confirm in the dialog.

Each linked mapping is shown as a clickable row displaying its name, type tag, and active status. Clicking a mapping navigates to its detail page.

When more than 5 mappings are linked, a search field appears to filter the list.

Deleting Connectors​

Select one or more rows using the checkboxes, then click the delete button in the toolbar. Confirm in the dialog.

Mappings​

Mappings define how data from MQTT JSON messages is translated into IEC 104 data points. Each mapping extracts a value (and optionally a timestamp) from an MQTT payload and assigns it to a specific IEC 104 address.

Mapping List​

The mapping list displays all mappings in a sortable, filterable table.

Available columns:

ColumnDescription
NameThe mapping name
TopicThe MQTT topic this mapping listens to
CASDUCommon Address of ASDU — the station address, shown as two bytes
IOAInformation Object Address — the data point address, shown as three bytes
TypeThe IEC 104 data type — shown as a colored tag
Created OnDate and time when the mapping was created

Table features: Same as the Connector list (search, filters, sorting, column selection, pagination, export).

Creating a Mapping​

  1. Click the + button in the table toolbar. You are taken to the Add Mapping page.

  2. Fill in the required fields:

    General:

    • Mapping Type (required) — Currently only "MQTT".
    • Name (required) — A descriptive name for the mapping (max. 200 characters).
    • Topic (required) — The MQTT topic to subscribe to (max. 500 characters), e.g., sensors/temperature.

    IEC 104 Addressing:

    • CASDU Byte 1 and Byte 2 (required) — The station address, entered as two individual bytes (0–255 each).
    • IOA Byte 1, Byte 2, and Byte 3 (required) — The data point address, entered as three individual bytes (0–255 each).
    • Type (required) — The IEC 104 data type (Type 1, Type 13, Type 30, or Type 36).

    Value Data Point:

    • Path (required) — JSON path expression pointing to the value in the MQTT payload (e.g., $.data.value, max. 500 characters).
    • Type (required) — The data type of the extracted value (Bool, Int, UInt, Float, Double, FixedPointInt, FixedPointUInt).
    • Point Position — Only shown when the value type is FixedPointInt or FixedPointUInt.

    Timestamp Data Point (only for Type 30 and Type 36):

    • Path — JSON path to a timestamp in the MQTT payload (e.g., $.timestamp).
    • Type — The timestamp format (IsoTimeStamp or UnixTimeStamp).
    • Duration Unit — Only shown when the timestamp type is UnixTimeStamp (e.g., ms).

  3. Click Save to create the mapping, or Cancel to return to the list.

Editing a Mapping​

  1. Click a row in the table. You are taken to the Edit Mapping page.
  2. Modify the fields as needed. The Mapping Type and ID fields cannot be changed.
  3. Click Save to apply the changes, or Cancel to discard.

In edit mode, the mapping ID is displayed at the top with a copy button.

Linking Connectors to a Mapping​

In edit mode, a Linked Connectors section appears below the form. This works the same way as linking mappings to a connector (see above), but in reverse — you associate connectors with a mapping.

Each linked connector shows its name, type tag (MQTT/IEC 104), and active/inactive status. Clicking a connector navigates to its detail page.

Deleting Mappings​

Select one or more rows using the checkboxes, then click the delete button in the toolbar. Confirm in the dialog.

Understanding Value Paths​

The Path field uses JSON path expressions to extract values from MQTT messages. For example, given the following MQTT payload:

{
  "data": {
    "value": 23.5,
    "unit": "°C"
  },
  "timestamp": "2026-01-15T10:30:00Z"
}
  • Value Path $.data.value → extracts 23.5
  • Timestamp Path $.timestamp → extracts "2026-01-15T10:30:00Z"

Workflow​

Experimental — This feature is marked as experimental and may change in future releases.

The Workflow page provides an interactive, animated visualization of the data flow through your system. It shows how MQTT connectors feed data through mappings into IEC 104 connectors.

Layout​

The visualization is arranged in three columns:

ColumnContent
MQTT Input (left)One card per MQTT connector
Mappings (center)A container showing all mappings as compact rows
IEC 104 Output (right)One card per IEC 104 connector

Animated curved lines connect the columns to visualize the data flow.

Visual Elements​

  • Connector Cards — Each connector is shown as a card with a status indicator (green pulsing dot = active, red dot = inactive), the connector name, and an "IN" or "OUT" badge.
  • Mapping Rows — Each mapping is shown as a compact row inside the central container, with colored dots indicating which MQTT connectors are linked to it.
  • Connection Lines — Animated SVG paths with gradient coloring show the data flow between connectors and mappings. Simulated statistics (messages/sec, throughput, latency) are displayed as overlay badges.
  • Legend — A legend at the top lists all connectors and their assigned colors, plus indicators for active/inactive status.

Interactions​

  • Hover over an MQTT connector to highlight its linked mappings.
  • Click any connector or mapping card to navigate to its detail page.
  • Refresh button to reload all data.

If no connectors or mappings exist, an empty state message prompts you to create them.

Process Updates​

The Process Updates page provides a real-time view of all data flowing through your connectors. It shows every value change as it happens, giving you complete visibility into your system's activity.

Available Information​

ColumnDescription
TimestampWhen the update occurred
ConnectorWhich connector processed the update
CASDUThe station address (IEC 104)
IOAThe data point address (IEC 104)
ValueThe actual value that was processed
QualityQuality flags associated with the value

Filtering​

Use the column filters to narrow down the view:

  • Filter by connector to see activity from a specific adapter
  • Filter by CASDU/IOA to track a specific data point
  • Filter by time range to analyze historical activity

Export​

Process update data can be exported to an Excel file (.xlsx) for external analysis or reporting.

Real-Time Updates​

The page uses WebSocket streaming to deliver updates in real time. New entries appear automatically at the top of the list without requiring a page refresh.

Audit Logs​

The Audit Logs section provides a complete history of all changes made in the system. This is a read-only view — entries cannot be modified or deleted.

Available Information​

ColumnDescription
TimestampWhen the action occurred
User NameWho performed the action
User EmailEmail address of the user (hidden by default, can be enabled via column picker)
ActionWhat was done — Create, Update, Delete, or Configure
Entity TypeWhat was affected (e.g., Connector, Mapping)
Entity NameThe name of the affected item

Actions are displayed as colored tags:

  • Create — Green
  • Update — Orange
  • Delete — Red
  • Configure — Blue

Filtering and Searching​

Use the search bar to filter by user name, email, entity type, or entity name. Column-level filters are also available for more precise filtering. The Action column has a dropdown filter.

Export​

Audit log data can be exported to an Excel file (.xlsx) for external reporting or compliance purposes.

Licensing​

The Licensing section shows your current license status and allows you to update your license key.

License Information​

The license card displays:

FieldDescription
StatusWhether the license is Valid (green) or Invalid (red)
LicenseeThe organization or person the license is issued to
Expiration DateWhen the license expires, including days remaining
Max ConnectorsMaximum number of connectors allowed (∞ = unlimited)
Max MappingsMaximum number of mappings allowed (∞ = unlimited)

The expiration date is color-coded:

  • Green — More than 30 days remaining
  • Orange — 30 days or fewer remaining
  • Red — 7 days or fewer remaining

Updating Your License Key​

  1. Enter your new license key in the License Key field.
  2. Click Update Key.
  3. The license information will refresh automatically.

Contact your administrator or support if you need a new license key.

Profile​

The Profile page shows your account information as provided by your organization's Microsoft Entra ID directory.

Displayed Information​

  • Profile Photo — Your Microsoft account photo (or initials if no photo is available)
  • Display Name — Your full name
  • Email — Your email address
  • Roles — Any application roles assigned to you, shown as colored badges

Theme​

The Profile page includes a theme selector with three options:

OptionDescription
LightLight background with dark text
SystemAutomatically follows your operating system's preference
DarkDark background with light text

Your theme preference is saved and persists across sessions.

Logout​

Click the Logout button to sign out of the application. You can also use the logout icon at the bottom of the sidebar.

Table Features (All List Views)​

All list views (Connectors, Mappings, Audit Logs) share common table functionality:

Type in the search bar to filter across multiple columns simultaneously. The search updates in real time.

Column Filters​

Click the filter icon (≡) in any column header to open advanced filter options:

  • Text columns: Contains, Equals, Starts with, Ends with
  • Numeric columns: Equals, Greater than, Less than
  • Date columns: Date is, Date before, Date after
  • Enum columns: Dropdown with predefined values

Sorting​

Click a column header to sort by that column. Click again to reverse the sort order.

Column Selection​

Use the column picker dropdown to choose which columns are visible.

Pagination​

Use the page controls at the bottom of the table to navigate through results. Select the number of rows per page (10, 25, 50, or 100).

Row Selection​

Click the checkbox in the leftmost column to select rows for batch operations (e.g., bulk delete).

Export​

Click the export button in the toolbar to download the current table data as an Excel file (.xlsx).

Responsive View​

On smaller screens (tablets, mobile), the table automatically switches to a card-based layout where each row is displayed as a compact card.

Error Notifications​

The application shows toast notifications in the top-right corner of the screen for important events:

TypeColorExamples
SuccessGreenConnector saved, mapping created, license updated
ErrorRedServer not reachable, validation failed, permission denied

Success notifications disappear automatically after a few seconds. Error notifications are also shown automatically when a server request fails (e.g., network error or server-side validation error).

For technical details about the ALP-CONNEX platform, see the ALP-CONNEX Overview.