377 lines
19 KiB
HTML
377 lines
19 KiB
HTML
<!--
|
|
|
|
Copyright © 2016-2023 The Thingsboard Authors
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
|
|
-->
|
|
<mat-toolbar color="primary">
|
|
<h2 translate>{{ dialogTitle }}</h2>
|
|
<span fxFlex></span>
|
|
<!-- <div [tb-help]="'check-connectivity'"></div>-->
|
|
<button mat-icon-button
|
|
(click)="close()"
|
|
type="button">
|
|
<mat-icon class="material-icons">close</mat-icon>
|
|
</button>
|
|
</mat-toolbar>
|
|
<div mat-dialog-content>
|
|
<section *ngIf="loadedCommand; else loadingCommand" class="tb-form-panel no-padding no-border">
|
|
<tb-toggle-header #transportProtocol
|
|
value="{{ selectTransportType }}"
|
|
name="TransportProtocol"
|
|
useSelectOnMdLg="false"
|
|
appearance="fill"
|
|
[fxHide]="allowTransportType.size < 2">
|
|
<tb-toggle-option
|
|
*ngIf="allowTransportType.has(BasicTransportType.HTTP)"
|
|
[value]="BasicTransportType.HTTP">
|
|
{{ deviceTransportTypeTranslationMap.get(BasicTransportType.HTTP) | translate }}
|
|
</tb-toggle-option>
|
|
<tb-toggle-option
|
|
*ngIf="allowTransportType.has(DeviceTransportType.MQTT)"
|
|
[value]="DeviceTransportType.MQTT">
|
|
{{ deviceTransportTypeTranslationMap.get(DeviceTransportType.MQTT) | translate }}
|
|
</tb-toggle-option>
|
|
<tb-toggle-option
|
|
*ngIf="allowTransportType.has(DeviceTransportType.COAP)"
|
|
[value]="DeviceTransportType.COAP">
|
|
{{ deviceTransportTypeTranslationMap.get(DeviceTransportType.COAP) | translate }}
|
|
</tb-toggle-option>
|
|
<tb-toggle-option
|
|
*ngIf="allowTransportType.has(DeviceTransportType.SNMP)"
|
|
[value]="DeviceTransportType.SNMP">
|
|
{{ deviceTransportTypeTranslationMap.get(DeviceTransportType.SNMP) | translate }}
|
|
</tb-toggle-option>
|
|
<tb-toggle-option
|
|
*ngIf="allowTransportType.has(DeviceTransportType.LWM2M)"
|
|
[value]="DeviceTransportType.LWM2M">
|
|
{{ deviceTransportTypeTranslationMap.get(DeviceTransportType.LWM2M) | translate }}
|
|
</tb-toggle-option>
|
|
</tb-toggle-header>
|
|
<div class="tb-form-panel no-padding no-border" [fxHide]="!allowTransportType.size">
|
|
<ng-container [ngSwitch]="transportProtocol.value">
|
|
<ng-template [ngSwitchCase]="BasicTransportType.HTTP">
|
|
<div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
|
|
<mat-tab-group [(selectedIndex)]="httpTabIndex">
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tabs-icon" svgIcon="windows"></mat-icon>
|
|
Windows
|
|
</ng-template>
|
|
<ng-template matTabContent>
|
|
<div class="tb-form-panel no-padding no-border tb-tab-body">
|
|
<div class="tb-form-panel stroked">
|
|
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
|
|
<div class="tb-install-instruction-text" translate>device.connectivity.install-curl-windows</div>
|
|
</div>
|
|
<ng-container
|
|
*ngTemplateOutlet="executeCommand; context: {cmd: {
|
|
noSecLabel: 'HTTP', noSec: commands.http.http,
|
|
secLabel: 'HTTPs', sec: commands.http.https,
|
|
doc: {text: '', href: ''}}}">
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
</mat-tab>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tabs-icon" svgIcon="macos"></mat-icon>
|
|
MacOS
|
|
</ng-template>
|
|
<ng-template matTabContent>
|
|
<div class="tb-form-panel no-padding no-border tb-tab-body">
|
|
<div class="tb-form-panel stroked">
|
|
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
|
|
<div class="tb-install-instruction-text" translate>device.connectivity.install-curl-macos</div>
|
|
</div>
|
|
<ng-container
|
|
*ngTemplateOutlet="executeCommand; context: {cmd: {
|
|
noSecLabel: 'HTTP', noSec: commands.http.http,
|
|
secLabel: 'HTTPs', sec: commands.http.https,
|
|
doc: {text: '', href: ''}}}">
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
</mat-tab>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tabs-icon" svgIcon="linux"></mat-icon>
|
|
Linux
|
|
</ng-template>
|
|
<ng-template matTabContent>
|
|
<div class="tb-form-panel no-padding no-border tb-tab-body">
|
|
<div class="tb-form-panel stroked">
|
|
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
|
|
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
|
|
[data]='createMarkDownCommand("sudo apt-get install curl")'></tb-markdown>
|
|
</div>
|
|
<ng-container
|
|
*ngTemplateOutlet="executeCommand; context: {cmd: {
|
|
noSecLabel: 'HTTP', noSec: commands.http.http,
|
|
secLabel: 'HTTPs', sec: commands.http.https,
|
|
doc: {text: '', href: ''}}}">
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</ng-template>
|
|
<ng-template [ngSwitchCase]="DeviceTransportType.MQTT">
|
|
<div *ngIf="commands.mqtt.sparkplug; else mqttCommands" class="tb-form-panel stroked">
|
|
<ng-container
|
|
*ngTemplateOutlet="seeDocumentation; context:
|
|
{doc: {text: 'device.connectivity.sparkplug-command', href: 'https://thingsboard.io/docs/reference/mqtt-sparkplug-api/'}}">
|
|
</ng-container>
|
|
</div>
|
|
<ng-template #mqttCommands>
|
|
<div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
|
|
<mat-tab-group [(selectedIndex)]="mqttTabIndex">
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tabs-icon" svgIcon="windows"></mat-icon>
|
|
Windows
|
|
</ng-template>
|
|
<ng-template matTabContent>
|
|
<div class="tb-form-panel no-padding no-border tb-tab-body">
|
|
<div class="tb-form-panel stroked">
|
|
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
|
|
<div class="tb-install-instruction-text">
|
|
<ng-container *ngTemplateOutlet="seeDocumentation; context:
|
|
{doc: {text: 'device.connectivity.install-mqtt-windows',
|
|
href: 'https://thingsboard.io/docs/reference/mqtt-api/?connectdevice=mqtt-windows'}}">
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
<ng-container
|
|
*ngTemplateOutlet="executeCommand; context: {cmd: {
|
|
noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
|
|
secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
|
|
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
</mat-tab>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tabs-icon" svgIcon="macos"></mat-icon>
|
|
MacOS
|
|
</ng-template>
|
|
<ng-template matTabContent>
|
|
<div class="tb-form-panel no-padding no-border tb-tab-body">
|
|
<div class="tb-form-panel stroked">
|
|
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
|
|
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
|
|
[data]='createMarkDownCommand("brew install mosquitto")'></tb-markdown>
|
|
</div>
|
|
<ng-container
|
|
*ngTemplateOutlet="executeCommand; context: {cmd: {
|
|
noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
|
|
secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
|
|
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
</mat-tab>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tabs-icon" svgIcon="linux"></mat-icon>
|
|
Linux
|
|
</ng-template>
|
|
<ng-template matTabContent>
|
|
<div class="tb-form-panel no-padding no-border tb-tab-body">
|
|
<div class="tb-form-panel stroked">
|
|
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
|
|
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
|
|
[data]='createMarkDownCommand("sudo apt-get install curl mosquitto-clients")'></tb-markdown>
|
|
</div>
|
|
<ng-container
|
|
*ngTemplateOutlet="executeCommand; context: {cmd: {
|
|
noSecLabel: 'MQTT', noSec: commands.mqtt.mqtt,
|
|
secLabel: 'MQTTs', sec: commands.mqtt.mqtts,
|
|
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
</mat-tab>
|
|
<mat-tab *ngIf="!!commands.mqtt.docker">
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tabs-icon" svgIcon="docker"></mat-icon>
|
|
Docker
|
|
</ng-template>
|
|
<ng-template matTabContent>
|
|
<div class="tb-form-panel no-padding no-border tb-tab-body">
|
|
<ng-container
|
|
*ngTemplateOutlet="executeCommand; context: {cmd: {
|
|
noSecLabel: 'MQTT', noSec: commands.mqtt.docker.mqtt,
|
|
secLabel: 'MQTTs', sec: commands.mqtt.docker.mqtts,
|
|
doc: {text: 'device.connectivity.mqtts-x509-command', href: 'https://thingsboard.io/docs/user-guide/mqtt-over-ssl/'}}}">
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</ng-template>
|
|
</ng-template>
|
|
<ng-template [ngSwitchCase]="DeviceTransportType.COAP">
|
|
<div class="tb-no-data-text" translate>device.connectivity.use-following-instructions</div>
|
|
<mat-tab-group [(selectedIndex)]="coapTabIndex">
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tabs-icon" svgIcon="linux"></mat-icon>
|
|
Linux
|
|
</ng-template>
|
|
<ng-template matTabContent>
|
|
<div class="tb-form-panel no-padding no-border tb-tab-body">
|
|
<div class="tb-form-panel stroked" *ngIf="commands.coap.coaps !== 'Check documentation'">
|
|
<div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
|
|
<div class="tb-install-instruction-text">
|
|
<ng-container *ngTemplateOutlet="seeDocumentation; context:
|
|
{doc: {text: 'device.connectivity.install-coap-client',
|
|
href: 'https://thingsboard.io/docs/user-guide/ssl/coap-access-token/'}}">
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
<ng-container
|
|
*ngTemplateOutlet="executeCommand; context: {cmd: {
|
|
noSecLabel: 'CoAP', noSec: commands.coap.coap,
|
|
secLabel: 'CoAPs', sec: commands.coap.coaps,
|
|
doc: {text: 'device.connectivity.coaps-x509-command', href: 'https://thingsboard.io/docs/user-guide/ssl/coap-x509-certificates/'}}}">
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
</mat-tab>
|
|
<mat-tab *ngIf="!!commands.coap.docker">
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="tabs-icon" svgIcon="docker"></mat-icon>
|
|
Docker
|
|
</ng-template>
|
|
<ng-template matTabContent>
|
|
<div class="tb-form-panel no-padding no-border tb-tab-body">
|
|
<ng-container
|
|
*ngTemplateOutlet="executeCommand; context: {cmd: {
|
|
noSecLabel: 'CoAP', noSec: commands.coap.docker.coap,
|
|
secLabel: 'CoAPs', sec: commands.coap.docker.coaps,
|
|
doc: {text: 'device.connectivity.coaps-x509-command', href: 'https://thingsboard.io/docs/user-guide/ssl/coap-x509-certificates/'}}}">
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</ng-template>
|
|
<ng-template [ngSwitchCase]="DeviceTransportType.SNMP">
|
|
<div class="tb-form-panel stroked">
|
|
<ng-container
|
|
*ngTemplateOutlet="seeDocumentation; context:
|
|
{doc: {text: 'device.connectivity.snmp-command', href: 'https://thingsboard.io/docs/reference/snmp-api/'}}">
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template [ngSwitchCase]="DeviceTransportType.LWM2M">
|
|
<div class="tb-form-panel stroked">
|
|
<ng-container
|
|
*ngTemplateOutlet="seeDocumentation; context:
|
|
{doc: {text: 'device.connectivity.lwm2m-command', href: 'https://thingsboard.io/docs/reference/lwm2m-api/'}}">
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|
|
</div>
|
|
<div class="tb-form-panel stroked">
|
|
<div fxFlex fxLayout="row">
|
|
<div class="tb-form-panel-title" translate>device.state</div>
|
|
<div class="status" [ngClass]="{'inactive': !status, 'hide': status === undefined}">
|
|
{{ (status ? 'device.active' : 'device.inactive') | translate }}
|
|
</div>
|
|
</div>
|
|
<div class="tb-form-panel-hint tb-font-14" translate>attribute.latest-telemetry</div>
|
|
<div class="tb-form-table">
|
|
<div class="tb-form-table-header">
|
|
<div class="tb-form-table-header-cell" fxFlex translate>device.time</div>
|
|
<div class="tb-form-table-header-cell" fxFlex translate>attribute.key</div>
|
|
<div class="tb-form-table-header-cell" fxFlex translate>attribute.value</div>
|
|
</div>
|
|
<div *ngIf="latestTelemetry.length; else noData" class="tb-form-table-body">
|
|
<div class="tb-form-table-row" *ngFor="let telemetry of latestTelemetry">
|
|
<div class="tb-form-table-row-cell" fxFlex>{{ telemetry.lastUpdateTs | date: 'yyyy-MM-dd HH:mm:ss' }}</div>
|
|
<div class="tb-form-table-row-cell" fxFlex>{{ telemetry.key }}</div>
|
|
<div class="tb-form-table-row-cell" fxFlex>{{ telemetry.value }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div mat-dialog-actions class="tb-dialog-actions">
|
|
<mat-slide-toggle fxShow="{{ showDontShowAgain }}" [(ngModel)]="notShowAgain">{{ 'action.dont-show-again' | translate}}</mat-slide-toggle>
|
|
<span fxFlex></span>
|
|
<button mat-button
|
|
[disabled]="(isLoading$ | async)"
|
|
(click)="close()">{{ 'action.close' | translate }}</button>
|
|
</div>
|
|
<ng-template #loadingCommand>
|
|
<div class="tb-loader">
|
|
<mat-spinner color="accent" diameter="65" strokeWidth="4"></mat-spinner>
|
|
<span class="mat-subtitle-1 label">
|
|
{{ 'device.connectivity.loading-check-connectivity-command' | translate }}
|
|
</span>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #noData>
|
|
<div class="tb-no-data-available">
|
|
<div class="tb-no-data-bg"></div>
|
|
<div class="tb-no-data-text" translate>attribute.no-latest-telemetry</div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #executeCommand let-cmd="cmd">
|
|
<div class="tb-form-panel stroked">
|
|
<div fxLayout="row" fxLayoutAlign="space-between center" [fxHide]="!(cmd.noSec || cmd.sec !== 'Check documentation')">
|
|
<div class="tb-form-panel-title" translate>device.connectivity.execute-following-command</div>
|
|
<tb-toggle-header #protocolType value="{{ cmd.noSec ? 'noSec' : 'sec'}}" name="protocolType" useSelectOnMdLg="false"
|
|
[fxShow]="cmd.noSec && cmd.sec">
|
|
<tb-toggle-option value="noSec">{{ cmd.noSecLabel }}</tb-toggle-option>
|
|
<tb-toggle-option value="sec">{{ cmd.secLabel }}</tb-toggle-option>
|
|
</tb-toggle-header>
|
|
</div>
|
|
<ng-container [ngSwitch]="protocolType.value">
|
|
<ng-template [ngSwitchCase]="'noSec'">
|
|
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
|
|
[data]=createMarkDownCommand(cmd.noSec)></tb-markdown>
|
|
</ng-template>
|
|
<ng-template [ngSwitchCase]="'sec'">
|
|
<div *ngIf="cmd.sec !== 'Check documentation'; else checkDocumentation">
|
|
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
|
|
[data]=createMarkDownCommand(cmd.sec)></tb-markdown>
|
|
</div>
|
|
<ng-template #checkDocumentation>
|
|
<ng-container
|
|
*ngTemplateOutlet="seeDocumentation; context:
|
|
{doc: cmd.doc}">
|
|
</ng-container>
|
|
</ng-template>
|
|
</ng-template>
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #seeDocumentation let-doc="doc">
|
|
<div class="tb-form-row no-border no-padding space-between">
|
|
<div class="tb-font-14 tb-flex-1">{{ doc.text | translate }}</div>
|
|
<a mat-stroked-button color="primary" href="{{doc.href }}" target="_blank">
|
|
<mat-icon>description</mat-icon>
|
|
{{ 'common.documentation' | translate }}
|
|
</a>
|
|
</div>
|
|
</ng-template>
|