Connection

This component provides the templates you can use to display the connection information for the connected products.

The templates below can be used to display the status and quality of the connection, even aggregated on location or customer, helping the various users of the DPS to understand if there is any connectivity problem. To do this, in addition to the Connection Status metric, it is necessary to configure the Connection Index insight.

Technical templates require also to define additional thing properties to save the connection type (Wi-Fi o Cellular), and a metric to register the signal level. For each template, you can find the list of required data.

Customer Details

Displays aggregate connection analysis across multiple machines.
This template displays:

  • the average connection index over the selected period;

  • the trend of the Connection Index over the selected period;

  • the number of machines grouped by quality of Connection Index.

Template Name: connection_customer_details
Type: General
Where can be used: page content.
Designed for: Operation Manager, Service Manager


<div class="d-flex flex-wrap components-row">
   <composite-widget [title]="'Connection Index'" class="w-100">
        <div class="d-flex flex-wrap components-row justify-content-end">
            <period-field-v2></period-field-v2>
      </div>
        <div class="d-flex flex-wrap components-row justify-content-center">
         <value-widget [title]="'Index'" class="card-border flex-fill">
            <statistic resource="thing" aggregation="AVG" property="properties.connection_index_LAST_30_DAYS" filter="integerFormat" unit="%"></statistic>
         </value-widget>
         <time-series-chart-widget [title]="'Trend'" class="card-border flex-fill" [config]="{exportEnabled: false, scrollbarEnabled: false, filterEnabled: false, legendPosition: 'none', height: '300px'}" [inputs]="{period: 'period'}">
            <metric name="thing.connection_index" unit="%" aggregation="AVG_DAYS_1" filter="integerFormat" [chartOptions]="{rendering: 'COLLAPSED', valueGrouping: 'AVG'}"></metric>
         </time-series-chart-widget>
         <composite-widget [title]="'Machines'" class="card-border flex-fill">
                <div class="d-flex flex-wrap components-row">
                    <value-widget [showTitle]="false" valueMode="VALUE" [showColors]="false" [showDetailsBar]="false" class="w-100">
                     <statistic resource="thing"></statistic>
                 </value-widget>
                    <bar-chart-widget-v2 layout="BARS" class="w-100" [config]="{rotate: true, mode: 'MICRO', height: '96px'}"  [inputs]="{period: 'period'}">
                        <statistic resource="THING" aggregation="COUNT" sortDirection="DESC" [groupBy]="['properties.connection_index_LAST_30_DAYS']"  unit="%"></statistic>
                    </bar-chart-widget-v2>
                </div>
         </composite-widget>
      </div>
   </composite-widget>
</div>

<div class="d-flex flex-wrap components-row">
   <location-list-widget-v2 [title]="'Locations'" accordionTemplate="connection_thing_grid" class="w-100">
      <property name="name" label="Location"></property>
      <property name="properties.connection_index_LAST_30_DAYS" label="Connection Index" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':true}"></property>
   </location-list-widget-v2>
</div>

Customers Overview

Visualization of connection analysis among multiple customers.
This template displays:

  • the number of customers grouped by connection index level;

  • the number of machines grouped by connection index level;

  • the list of customers sorted by customer connection index.

Template Name: connection_customers_overview
Type: General
Where can be used: page content.
Designed for: Sales Manager, Service Manager


<div class="d-flex components-row flex-fill">
   <composite-widget [title]="'Customers Distribution over Connection Index Thresholds - Last 30 Days'" class="flex-fill">
      <div class="d-flex flex-wrap components-row">
         <value-widget [showTitle]="false" valueMode="VALUE" [showColors]="false" [showDetailsBar]="false" class="w-100">
            <statistic resource="customer" aggregation="COUNT"></statistic>
         </value-widget>
         <bar-chart-widget-v2 class="w-100" [config]="{rotate: true, mode: 'MICRO', height: '150px'}" [inputs]="{period: 'period'}">
            <statistic resource="CUSTOMER" aggregation="COUNT" [groupBy]="['properties.connection_index_LAST_30_DAYS']" sortDirection="DESC"></statistic>
         </bar-chart-widget-v2>
      </div>
   </composite-widget>
   <composite-widget [title]="'Machine Distribution over Connection Index Thresholds - Last 30 Days'" class="flex-fill">
      <div class="d-flex flex-wrap components-row">
         <value-widget [showTitle]="false" valueMode="VALUE" [showColors]="false" [showDetailsBar]="false" class="w-100">
            <statistic resource="thing" aggregation="COUNT"></statistic>
         </value-widget>
         <bar-chart-widget-v2 class="w-100" [config]="{rotate: true, mode: 'MICRO', height: '150px'}" [inputs]="{period: 'period'}">
            <statistic resource="THING" aggregation="COUNT" sortDirection="DESC" [groupBy]="['properties.connection_index_LAST_30_DAYS']"></statistic>
         </bar-chart-widget-v2>
      </div>
   </composite-widget>
</div>

<div class="d-flex flex-wrap components-row">
   <composite-widget [title]="'Customers list - Last 30 Days'" class="w-100">
      <div class="d-flex flex-wrap components-row">
         <search-field id="query" searchTarget="CUSTOMERS" class="w-100">
            <search-input type="PROPERTY" property="properties.connection_index_LAST_30_DAYS"></search-input>
            <search-input type="KEY"></search-input>
         </search-field>
      </div>
      <div class="d-flex flex-column components-column flex-fill">
         <customer-list-widget-v2 detailsPath="connection" queryFieldRef="query" [pageSize]="10" [enableActions]="false" [controlsEnabled]="false" class="w-100">
            <property name="name" label="Customer"></property>
            <property name="properties.connection_index_LAST_30_DAYS" label="Connection Index" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':true}"></property>
            <property name="properties.thingCount" label="Total Machines"></property>
         </customer-list-widget-v2>
      </div>
   </composite-widget>
</div>

Thing Card Detailed

Displays machine connection information in a card, including:

  • the connection index of the last day;

  • the percentage of time spent in online status;

  • the number of disconnections;

  • the total disconnection time.

Template Name: connection_thing_card_detailed
Type: Thing Definition
Where can be used: page fragment (Include Template).
Designed for: Operation Manager, Service Manager


<div class="d-flex flex-wrap components-row">
   <thing-details-widget [title]="getThing()?.name" class="card-border flex-fill">
      <metric name="connection_index" label="Connection Index" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':false}"></metric>
      <metric name="connection_index_online_time_perc" label="Online Percentage" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':false}"></metric>
      <metric name="connection_index_disc_count" label="Disconnections" filter="integerFormat"></metric>
      <metric name="connection_index_offline_time" label="Disconnected Time" filter="millisToPeriod"></metric>
   </thing-details-widget>
</div>

<include-template name="connection_thing_card_detailed"></include-template>

Thing Card Index

Displays the machine connection index over the last 30 days into a card.
The value is highlighted according to the connection index thresholds. In this way at a quick glance it will be possible to see if everything is okay.

Template Name: connection_thing_card_index
Type: Thing Definition
Where can be used: page fragment (Include Template).


<value-widget [title]="'Connection Index'" class="flex-fill">
    <property name="properties.connection_index_LAST_30_DAYS" filter="integerFormat"></property>
</value-widget>

<include-template name="connection_thing_card_index"></include-template>

Thing Details

Provides the operations manager with a detailed view of the connection index of a single machine.
This template displays:

  • the average value and trend of the connection index over the past 30 days, highlighted by threshold.

  • the percentage of time spent in online status;

  • the number of disconnections;

  • the total time disconnected;

  • the detail over the last 7 days of the connection status.

Template Name: connection_thing_details
Type: Thing Definition
Where can be used: thing details page.
Designed for: Operation Manager


<div class="d-flex flex-wrap components-row">
   <value-widget [title]="'Connection Index - Last 30 Days'" class="flex-fill">
      <property name="properties.connection_index_LAST_30_DAYS" filter="integerFormat"></property>
   </value-widget>
   <micro-chart-widget [title]="'Trend'" class="flex-fill" height="121px" defaultPeriodValue="LAST_30_DAYS">
      <metric name="connection_index" filter="integerFormat"></metric>
   </micro-chart-widget>
</div>

<div class="d-flex flex-wrap components-row">
   <value-widget [title]="'Online percentage'" [showColors]="false" [showDetailsBar]="false" class="flex-fill">
      <metric name="connection_index_online_time_perc" filter="integerFormat"></metric>
   </value-widget>
   <value-widget [title]="'Disconnections'" [showColors]="false" [showDetailsBar]="false" class="flex-fill">
      <metric name="connection_index_disc_count" filter="integerFormat"></metric>
   </value-widget>
   <value-widget [title]="'Disconnected time'" [showColors]="false" [showDetailsBar]="false" class="flex-fill">
      <metric name="connection_index_offline_time" filter="millisToPeriod"></metric>
   </value-widget>
</div>
<div class="d-flex flex-wrap components-row">
   <metric-state-diagram-widget metricName="Connection Status" predicate="lt" value="1" stateBarColor="#DF2316" [title]="'Disconnections - Last 7 Days'" detailsLabel="Disconnections" totalLabel="Total disconnected time" class="w-100">
      <metric name="connection_index" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':'false'}"></metric>
   </metric-state-diagram-widget>
</div>

Thing Details Technical

Provides technical users with useful information about the connection of a single machine.
This template displays:

  • the type of connection and signal level;

  • the connection index for the past 30 days;

  • the detail of the connection status for the past 7 days;

  • the connection index benchmark of the past 30 days compared with similar products;

  • the Wi-Fi and signal level;

  • the firmware version history.

Template Name: connection_thing_details_technical
Type: Thing Definition
Where can be used: thing details page.
Designed for: Internal Maintenance Technician, R&D Manager, Service Technician

<div class="d-flex flex-wrap components-row justify-content-center">
   <value-widget [title]="'Connection Index'" class="flex-fill">
      <metric name="connection_index" unit="%" filter="singleDecimalFormat"></metric>
   </value-widget>
   <micro-chart-widget [title]="'Trend'" height="121px" class="flex-fill">
      <metric name="connection_index" unit="%" filter="singleDecimalFormat"></metric>
   </micro-chart-widget>
</div>

<div class="d-flex flex-wrap components-row">
   <metric-state-diagram-widget metricName="Connection Status" predicate="lt" value="1" stateBarColor="#DF2316" [title]="'Disconnections - Last 7 Days'" detailsLabel="Disconnections" totalLabel="Total disconnected time" class="w-100">
      <metric name="connection_index" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':'false'}"></metric>
      <metric name="signalLevel" aggregation="AVG"></metric>
   </metric-state-diagram-widget>
</div>

<div class="d-flex flex-wrap components-row">
   <benchmark-widget [title]="'Connection Index Benchmark - Last 30 days'" target="THING" valueProperty="properties.connection_index_LAST_30_DAYS" valueFilter="integerFormat" valueLabel="Connection Index (Last 30 days)" unit="%" [minValue]="0" [maxValue]="100" [maxBarNumber]="10" [clusterProperties]="['thingDefinition.name']" class="flex-fill" height="300px"></benchmark-widget>
</div>

<div class="d-flex flex-wrap components-row justify-content-center">
   <div class="d-flex flex-column components-column  align-self-start flex-fill">
      <value-widget [title]="'Connection Type'" class="flex-fill">
         <property name="properties.connectionType"></property>
      </value-widget>
      <thing-details-widget [title]="'SIM'" *ngIf="getThing().simDetails?.simIccid">
         <property name="simDetails.simIccid" label="ICCID"></property>
         <property name="simDetails.simStatus" label="Status"></property>
         <property name="simDetails.sessionStatus" label="Session Status"></property>
      </thing-details-widget>
         <value-widget [title]="'Signal Level (Last 7 days)'" class="flex-fill" period="LAST_7_DAYS">
         <metric name="signalLevel" aggregation="AVG"></metric>
      </value-widget>
      <micro-chart-widget [title]="'Signal Level'" defaultPeriodValue="LAST_7_DAYS" height="118px" class="flex-fill">
         <metric name="signalLevel"></metric>
      </micro-chart-widget>
   </div>
   <div class="d-flex flex-column components-column w-50 flex-fill">
      <multi-metric-list-widget [title]="'Historical Firmware Updates'" [filterEnabled]="false" defaultPeriodValue="LAST_30_DAYS" class="flex-fill">
         <metric name="Firmware"></metric>
      </multi-metric-list-widget>
   </div>
</div>

Thing Grid

Displays the connection insight of multiple machine through a thing grid widget.

Template Name: connection_thing_grid
Type: General
Where can be used: page content.
Designed for: Operation Manager, Service Manager

<div class="d-flex flex-wrap components-row">
   <thing-grid-widget template="connection_thing_card_detailed" class="w-100"></thing-grid-widget>
</div>

Configuration

Here are some tips for integrating the Connection Index within your DPS, supporting the various users who need to know how products are connected to the cloud.

The templates provided by this component can be used inside main pages, tabs or embedded into cards.

Connection Page

For the Service Manager and Sales Manager, you can add a main page called Connection, which provides to these users a connection index overview on the customers.

To add the Connection page, you should:

  1. Enter the Interfaces / Views page.

  2. Select the General tab and then the View you want to modify (e.g Service Manager).

  3. Press the Add Page button and provide the required information.
    As the icon for the menu item, you can use one of the images in the Resources paragraph below.


  4. Press the Add Sub Page button and provide the required information.


  5. Select the connection_index_customers_overview template.

  6. Confirm and save the page.

For the Service Manager view, you have also to configure an additional page:

  1. Enter the Service Manager view.

  2. Select the Customer details page.

  3. Add a sub-page named Connection, set the navigation as Tab and the path as connection.

    Select the template named connection_customer_details.

Resources

You can use the following icons in case the page is visible into a menu.

Dark

Light

connectivity_dark.png

connectivity_light.png

For more icons you can refer to this page.