UI: Added firmware autocomplete component; Add firmware to device and device profile

@@ -74,6 +74,7 @@ import {
   StringOperation
   StringOperation
 } from '@shared/models/query/query.models';
 } from '@shared/models/query/query.models';
 import { alarmFields } from '@shared/models/alarm.models';
 import { alarmFields } from '@shared/models/alarm.models';
+import { FirmwareService } from '@core/http/firmware.service';
 
 
 @Injectable({
 @Injectable({
   providedIn: 'root'
   providedIn: 'root'
@@ -93,6 +94,7 @@ export class EntityService {
     private dashboardService: DashboardService,
     private dashboardService: DashboardService,
     private entityRelationService: EntityRelationService,
     private entityRelationService: EntityRelationService,
     private attributeService: AttributeService,
     private attributeService: AttributeService,
+    private firmwareService: FirmwareService,
     private utils: UtilsService
     private utils: UtilsService
   ) { }
   ) { }
 
 
@@ -128,6 +130,9 @@ export class EntityService {
       case EntityType.ALARM:
       case EntityType.ALARM:
         console.error('Get Alarm Entity is not implemented!');
         console.error('Get Alarm Entity is not implemented!');
         break;
         break;
+      case EntityType.FIRMWARE:
+        observable = this.firmwareService.getFirmwareInfo(entityId, config);
+        break;
     }
     }
     return observable;
     return observable;
   }
   }
@@ -326,6 +331,10 @@ export class EntityService {
       case EntityType.ALARM:
       case EntityType.ALARM:
         console.error('Get Alarm Entities is not implemented!');
         console.error('Get Alarm Entities is not implemented!');
         break;
         break;
+      case EntityType.FIRMWARE:
+        pageLink.sortOrder.property = 'title';
+        entitiesObservable = this.firmwareService.getFirmwares(pageLink, true, config);
+        break;
     }
     }
     return entitiesObservable;
     return entitiesObservable;
   }
   }

@@ -23,8 +23,6 @@ import { PageData } from '@shared/models/page/page-data';
 import { Firmware, FirmwareInfo } from '@shared/models/firmware.models';
 import { Firmware, FirmwareInfo } from '@shared/models/firmware.models';
 import { catchError, map, mergeMap } from 'rxjs/operators';
 import { catchError, map, mergeMap } from 'rxjs/operators';
 import { deepClone, isDefinedAndNotNull } from '@core/utils';
 import { deepClone, isDefinedAndNotNull } from '@core/utils';
-import { InterceptorHttpParams } from '@core/interceptors/interceptor-http-params';
-import { InterceptorConfig } from '@core/interceptors/interceptor-config';
 
 
 @Injectable({
 @Injectable({
   providedIn: 'root'
   providedIn: 'root'
@@ -37,10 +35,11 @@ export class FirmwareService {
   }
   }
 
 
   public getFirmwares(pageLink: PageLink, hasData?: boolean, config?: RequestConfig): Observable<PageData<FirmwareInfo>> {
   public getFirmwares(pageLink: PageLink, hasData?: boolean, config?: RequestConfig): Observable<PageData<FirmwareInfo>> {
-    let url = `/api/firmwares${pageLink.toQuery()}`;
+    let url = `/api/firmwares`;
     if (isDefinedAndNotNull(hasData)) {
     if (isDefinedAndNotNull(hasData)) {
-      url += `&hasData=${hasData}`;
+      url += `/${hasData}`;
     }
     }
+    url += `${pageLink.toQuery()}`;
     return this.http.get<PageData<FirmwareInfo>>(url, defaultHttpOptionsFromConfig(config));
     return this.http.get<PageData<FirmwareInfo>>(url, defaultHttpOptionsFromConfig(config));
   }
   }
 
 

+<!--
+
+    Copyright © 2016-2021 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-form-field [formGroup]="firmwareFormGroup" class="mat-block">
+  <input matInput type="text" placeholder="{{ placeholderText | translate }}"
+         #firmwareInput
+         formControlName="firmwareId"
+         (focusin)="onFocus()"
+         [required]="required"
+         [matAutocomplete]="firmwareAutocomplete">
+  <button *ngIf="firmwareFormGroup.get('firmwareId').value && !disabled"
+          type="button"
+          matSuffix mat-button mat-icon-button aria-label="Clear"
+          (click)="clear()">
+    <mat-icon class="material-icons">close</mat-icon>
+  </button>
+  <mat-autocomplete class="tb-autocomplete"
+                    #firmwareAutocomplete="matAutocomplete"
+                    [displayWith]="displayFirmwareFn">
+    <mat-option *ngFor="let firmware of filteredFirmwares | async" [value]="firmware">
+      <span [innerHTML]="this.firmwareTitleText(firmware) | highlight:searchText"></span>
+    </mat-option>
+    <mat-option *ngIf="!(filteredFirmwares | async)?.length" [value]="null" class="tb-not-found">
+      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
+          <span translate>firmware.no-firmware-text</span>
+        </div>
+        <ng-template #searchNotEmpty>
+          <span>
+              {{ translate.get('firmware.no-firmware-matching',
+            {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
+          </span>
+        </ng-template>
+      </div>
+    </mat-option>
+  </mat-autocomplete>
+  <mat-error *ngIf="firmwareFormGroup.get('firmwareId').hasError('required')">
+    {{ requiredErrorText | translate }}
+  </mat-error>
+</mat-form-field>

+///
+/// Copyright © 2016-2021 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.
+///
+
+import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, mergeMap, share, tap } from 'rxjs/operators';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { TranslateService } from '@ngx-translate/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { EntityId } from '@shared/models/id/entity-id';
+import { EntityType } from '@shared/models/entity-type.models';
+import { BaseData } from '@shared/models/base-data';
+import { EntityService } from '@core/http/entity.service';
+import { TruncatePipe } from '@shared/pipe/truncate.pipe';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { FirmwareInfo } from '@shared/models/firmware.models';
+import { FirmwareService } from '@core/http/firmware.service';
+import { PageLink } from '@shared/models/page/page-link';
+import { Direction } from '@shared/models/page/sort-order';
+
+@Component({
+  selector: 'tb-firmware-autocomplete',
+  templateUrl: './firmware-autocomplete.component.html',
+  styleUrls: [],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => FirmwareAutocompleteComponent),
+    multi: true
+  }]
+})
+export class FirmwareAutocompleteComponent implements ControlValueAccessor, OnInit {
+
+  firmwareFormGroup: FormGroup;
+
+  modelValue: string | null;
+
+  @Input()
+  labelText: string;
+
+  @Input()
+  requiredText: string;
+
+  @Input()
+  useFullEntityId = false;
+
+  private requiredValue: boolean;
+
+  get required(): boolean {
+    return this.requiredValue;
+  }
+
+  @Input()
+  set required(value: boolean) {
+    this.requiredValue = coerceBooleanProperty(value);
+  }
+
+  @Input()
+  disabled: boolean;
+
+  @ViewChild('firmwareInput', {static: true}) firmwareInput: ElementRef;
+  @ViewChild('firmwareInput', {read: MatAutocompleteTrigger}) firmwareAutocomplete: MatAutocompleteTrigger;
+
+  filteredFirmwares: Observable<Array<FirmwareInfo>>;
+
+  searchText = '';
+
+  private dirty = false;
+
+  private propagateChange = (v: any) => { };
+
+  constructor(private store: Store<AppState>,
+              public translate: TranslateService,
+              public truncate: TruncatePipe,
+              private entityService: EntityService,
+              private firmwareService: FirmwareService,
+              private fb: FormBuilder) {
+    this.firmwareFormGroup = this.fb.group({
+      firmwareId: [null]
+    });
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  ngOnInit() {
+    this.filteredFirmwares = this.firmwareFormGroup.get('firmwareId').valueChanges
+      .pipe(
+        tap(value => {
+          let modelValue;
+          if (typeof value === 'string' || !value) {
+            modelValue = null;
+          } else {
+            modelValue = this.useFullEntityId ? value.id : value.id.id;
+          }
+          this.updateView(modelValue);
+          if (value === null) {
+            this.clear();
+          }
+        }),
+        map(value => value ? (typeof value === 'string' ? value : value.title) : ''),
+        mergeMap(name => this.fetchFirmware(name)),
+        share()
+      );
+  }
+
+  ngAfterViewInit(): void {
+  }
+
+  getCurrentEntity(): BaseData<EntityId> | null {
+    const currentRuleChain = this.firmwareFormGroup.get('firmwareId').value;
+    if (currentRuleChain && typeof currentRuleChain !== 'string') {
+      return currentRuleChain as BaseData<EntityId>;
+    } else {
+      return null;
+    }
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    if (this.disabled) {
+      this.firmwareFormGroup.disable({emitEvent: false});
+    } else {
+      this.firmwareFormGroup.enable({emitEvent: false});
+    }
+  }
+
+  textIsNotEmpty(text: string): boolean {
+    return (text && text.length > 0);
+  }
+
+  writeValue(value: string | EntityId | null): void {
+    this.searchText = '';
+    if (value != null && value !== '') {
+      let firmwareId = '';
+      if (typeof value === 'string') {
+        firmwareId = value;
+      } else if (value.entityType && value.id) {
+        firmwareId = value.id;
+      }
+      if (firmwareId !== '') {
+        this.entityService.getEntity(EntityType.FIRMWARE, firmwareId, {ignoreLoading: true, ignoreErrors: true}).subscribe(
+          (entity) => {
+            this.modelValue = entity.id.id;
+            this.firmwareFormGroup.get('firmwareId').patchValue(entity, {emitEvent: false});
+          },
+          () => {
+            this.modelValue = null;
+            this.firmwareFormGroup.get('firmwareId').patchValue('', {emitEvent: false});
+            if (value !== null) {
+              this.propagateChange(this.modelValue);
+            }
+          }
+        );
+      } else {
+        this.modelValue = null;
+        this.firmwareFormGroup.get('firmwareId').patchValue('', {emitEvent: false});
+      }
+    } else {
+      this.modelValue = null;
+      this.firmwareFormGroup.get('firmwareId').patchValue('', {emitEvent: false});
+    }
+    this.dirty = true;
+  }
+
+  onFocus() {
+    if (this.dirty) {
+      this.firmwareFormGroup.get('firmwareId').updateValueAndValidity({onlySelf: true, emitEvent: true});
+      this.dirty = false;
+    }
+  }
+
+  reset() {
+    this.firmwareFormGroup.get('firmwareId').patchValue('', {emitEvent: false});
+  }
+
+  updateView(value: string | null) {
+    if (this.modelValue !== value) {
+      this.modelValue = value;
+      this.propagateChange(this.modelValue);
+    }
+  }
+
+  displayFirmwareFn(firmware?: FirmwareInfo): string | undefined {
+    return firmware ? `${firmware.title} (${firmware.version})` : undefined;
+  }
+
+  fetchFirmware(searchText?: string): Observable<Array<FirmwareInfo>> {
+    this.searchText = searchText;
+    const pageLink = new PageLink(50, 0, searchText, {
+      property: 'title',
+      direction: Direction.ASC
+    });
+    return this.firmwareService.getFirmwares(pageLink, true, {ignoreLoading: true}).pipe(
+      map((data) => data && data.data.length ? data.data : null)
+    );
+  }
+
+  clear() {
+    this.firmwareFormGroup.get('firmwareId').patchValue('', {emitEvent: true});
+    setTimeout(() => {
+      this.firmwareInput.nativeElement.blur();
+      this.firmwareInput.nativeElement.focus();
+    }, 0);
+  }
+
+  get placeholderText(): string {
+    return this.labelText || 'firmware.firmware';
+  }
+
+  get requiredErrorText(): string {
+    return this.requiredText || 'firmware.firmware-required';
+  }
+
+  firmwareTitleText(firmware: FirmwareInfo): string {
+    return `${firmware.title} (${firmware.version})`;
+  }
+}

@@ -134,6 +134,7 @@ import { DashboardStateDialogComponent } from '@home/components/dashboard-page/s
 import { EmbedDashboardDialogComponent } from '@home/components/widget/dialog/embed-dashboard-dialog.component';
 import { EmbedDashboardDialogComponent } from '@home/components/widget/dialog/embed-dashboard-dialog.component';
 import { EMBED_DASHBOARD_DIALOG_TOKEN } from '@home/components/widget/dialog/embed-dashboard-dialog-token';
 import { EMBED_DASHBOARD_DIALOG_TOKEN } from '@home/components/widget/dialog/embed-dashboard-dialog-token';
 import { DisplayWidgetTypesPanelComponent } from '@home/components/dashboard-page/widget-types-panel.component';
 import { DisplayWidgetTypesPanelComponent } from '@home/components/dashboard-page/widget-types-panel.component';
+import { FirmwareAutocompleteComponent } from '@home/components/firmware/firmware-autocomplete.component';
 
 
 @NgModule({
 @NgModule({
   declarations:
   declarations:
@@ -247,7 +248,8 @@ import { DisplayWidgetTypesPanelComponent } from '@home/components/dashboard-pag
       ManageDashboardStatesDialogComponent,
       ManageDashboardStatesDialogComponent,
       DashboardStateDialogComponent,
       DashboardStateDialogComponent,
       EmbedDashboardDialogComponent,
       EmbedDashboardDialogComponent,
-      DisplayWidgetTypesPanelComponent
+      DisplayWidgetTypesPanelComponent,
+      FirmwareAutocompleteComponent
     ],
     ],
   imports: [
   imports: [
     CommonModule,
     CommonModule,
@@ -351,7 +353,8 @@ import { DisplayWidgetTypesPanelComponent } from '@home/components/dashboard-pag
     ManageDashboardStatesDialogComponent,
     ManageDashboardStatesDialogComponent,
     DashboardStateDialogComponent,
     DashboardStateDialogComponent,
     EmbedDashboardDialogComponent,
     EmbedDashboardDialogComponent,
-    DisplayWidgetTypesPanelComponent
+    DisplayWidgetTypesPanelComponent,
+    FirmwareAutocompleteComponent
   ],
   ],
   providers: [
   providers: [
     WidgetComponentService,
     WidgetComponentService,

@@ -60,6 +60,10 @@
                 {{ 'device-profile.type-required' | translate }}
                 {{ 'device-profile.type-required' | translate }}
               </mat-error>
               </mat-error>
             </mat-form-field>
             </mat-form-field>
+            <tb-firmware-autocomplete
+              [useFullEntityId]="true"
+              formControlName="firmwareId">
+            </tb-firmware-autocomplete>
             <mat-form-field class="mat-block">
             <mat-form-field class="mat-block">
               <mat-label translate>device-profile.description</mat-label>
               <mat-label translate>device-profile.description</mat-label>
               <textarea matInput formControlName="description" rows="2"></textarea>
               <textarea matInput formControlName="description" rows="2"></textarea>

@@ -48,7 +48,7 @@ import { MatHorizontalStepper } from '@angular/material/stepper';
 import { RuleChainId } from '@shared/models/id/rule-chain-id';
 import { RuleChainId } from '@shared/models/id/rule-chain-id';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
 import { deepTrim } from '@core/utils';
 import { deepTrim } from '@core/utils';
-import {ServiceType} from "@shared/models/queue.models";
+import { ServiceType } from '@shared/models/queue.models';
 
 
 export interface AddDeviceProfileDialogData {
 export interface AddDeviceProfileDialogData {
   deviceProfileName: string;
   deviceProfileName: string;
@@ -72,13 +72,13 @@ export class AddDeviceProfileDialogComponent extends
 
 
   entityType = EntityType;
   entityType = EntityType;
 
 
-  deviceProfileTypes = Object.keys(DeviceProfileType);
+  deviceProfileTypes = Object.values(DeviceProfileType);
 
 
   deviceProfileTypeTranslations = deviceProfileTypeTranslationMap;
   deviceProfileTypeTranslations = deviceProfileTypeTranslationMap;
 
 
   deviceTransportTypeHints = deviceTransportTypeHintMap;
   deviceTransportTypeHints = deviceTransportTypeHintMap;
 
 
-  deviceTransportTypes = Object.keys(DeviceTransportType);
+  deviceTransportTypes = Object.values(DeviceTransportType);
 
 
   deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;
   deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;
 
 
@@ -108,6 +108,7 @@ export class AddDeviceProfileDialogComponent extends
         type: [DeviceProfileType.DEFAULT, [Validators.required]],
         type: [DeviceProfileType.DEFAULT, [Validators.required]],
         defaultRuleChainId: [null, []],
         defaultRuleChainId: [null, []],
         defaultQueueName: ['', []],
         defaultQueueName: ['', []],
+        firmwareId: [null],
         description: ['', []]
         description: ['', []]
       }
       }
     );
     );
@@ -186,6 +187,7 @@ export class AddDeviceProfileDialogComponent extends
         transportType: this.transportConfigFormGroup.get('transportType').value,
         transportType: this.transportConfigFormGroup.get('transportType').value,
         provisionType: deviceProvisionConfiguration.type,
         provisionType: deviceProvisionConfiguration.type,
         provisionDeviceKey,
         provisionDeviceKey,
+        firmwareId: this.deviceProfileDetailsFormGroup.get('firmwareId').value,
         description: this.deviceProfileDetailsFormGroup.get('description').value,
         description: this.deviceProfileDetailsFormGroup.get('description').value,
         profileData: {
         profileData: {
           configuration: createDeviceProfileConfiguration(DeviceProfileType.DEFAULT),
           configuration: createDeviceProfileConfiguration(DeviceProfileType.DEFAULT),

@@ -63,6 +63,10 @@
         [queueType]="serviceType"
         [queueType]="serviceType"
         formControlName="defaultQueueName">
         formControlName="defaultQueueName">
       </tb-queue-type-list>
       </tb-queue-type-list>
+      <tb-firmware-autocomplete
+        [useFullEntityId]="true"
+        formControlName="firmwareId">
+      </tb-firmware-autocomplete>
       <mat-form-field fxHide class="mat-block">
       <mat-form-field fxHide class="mat-block">
         <mat-label translate>device-profile.type</mat-label>
         <mat-label translate>device-profile.type</mat-label>
         <mat-select formControlName="type" required>
         <mat-select formControlName="type" required>

@@ -53,11 +53,11 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
 
 
   entityType = EntityType;
   entityType = EntityType;
 
 
-  deviceProfileTypes = Object.keys(DeviceProfileType);
+  deviceProfileTypes = Object.values(DeviceProfileType);
 
 
   deviceProfileTypeTranslations = deviceProfileTypeTranslationMap;
   deviceProfileTypeTranslations = deviceProfileTypeTranslationMap;
 
 
-  deviceTransportTypes = Object.keys(DeviceTransportType);
+  deviceTransportTypes = Object.values(DeviceTransportType);
 
 
   deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;
   deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;
 
 
@@ -109,6 +109,7 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
         }),
         }),
         defaultRuleChainId: [entity && entity.defaultRuleChainId ? entity.defaultRuleChainId.id : null, []],
         defaultRuleChainId: [entity && entity.defaultRuleChainId ? entity.defaultRuleChainId.id : null, []],
         defaultQueueName: [entity ? entity.defaultQueueName : '', []],
         defaultQueueName: [entity ? entity.defaultQueueName : '', []],
+        firmwareId: [entity ? entity.firmwareId : null],
         description: [entity ? entity.description : '', []],
         description: [entity ? entity.description : '', []],
       }
       }
     );
     );
@@ -184,6 +185,7 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> {
     }}, {emitEvent: false});
     }}, {emitEvent: false});
     this.entityForm.patchValue({defaultRuleChainId: entity.defaultRuleChainId ? entity.defaultRuleChainId.id : null}, {emitEvent: false});
     this.entityForm.patchValue({defaultRuleChainId: entity.defaultRuleChainId ? entity.defaultRuleChainId.id : null}, {emitEvent: false});
     this.entityForm.patchValue({defaultQueueName: entity.defaultQueueName}, {emitEvent: false});
     this.entityForm.patchValue({defaultQueueName: entity.defaultQueueName}, {emitEvent: false});
+    this.entityForm.patchValue({firmwareId: entity.firmwareId}, {emitEvent: false});
     this.entityForm.patchValue({description: entity.description}, {emitEvent: false});
     this.entityForm.patchValue({description: entity.description}, {emitEvent: false});
   }
   }
 
 

@@ -48,6 +48,10 @@
               <mat-label translate>device.label</mat-label>
               <mat-label translate>device.label</mat-label>
               <input matInput formControlName="label">
               <input matInput formControlName="label">
             </mat-form-field>
             </mat-form-field>
+            <tb-firmware-autocomplete
+              [useFullEntityId]="true"
+              formControlName="firmwareId">
+            </tb-firmware-autocomplete>
             <mat-form-field class="mat-block" style="padding-bottom: 14px;">
             <mat-form-field class="mat-block" style="padding-bottom: 14px;">
               <mat-label translate>device-profile.transport-type</mat-label>
               <mat-label translate>device-profile.transport-type</mat-label>
               <mat-select formControlName="transportType" required>
               <mat-select formControlName="transportType" required>

@@ -70,7 +70,7 @@ export class DeviceWizardDialogComponent extends
 
 
   entityType = EntityType;
   entityType = EntityType;
 
 
-  deviceTransportTypes = Object.keys(DeviceTransportType);
+  deviceTransportTypes = Object.values(DeviceTransportType);
 
 
   deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;
   deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;
 
 
@@ -107,6 +107,7 @@ export class DeviceWizardDialogComponent extends
     this.deviceWizardFormGroup = this.fb.group({
     this.deviceWizardFormGroup = this.fb.group({
         name: ['', Validators.required],
         name: ['', Validators.required],
         label: [''],
         label: [''],
+        firmwareId: [null],
         gateway: [false],
         gateway: [false],
         overwriteActivityTime: [false],
         overwriteActivityTime: [false],
         transportType: [DeviceTransportType.DEFAULT, Validators.required],
         transportType: [DeviceTransportType.DEFAULT, Validators.required],
@@ -312,6 +313,7 @@ export class DeviceWizardDialogComponent extends
     const device = {
     const device = {
       name: this.deviceWizardFormGroup.get('name').value,
       name: this.deviceWizardFormGroup.get('name').value,
       label: this.deviceWizardFormGroup.get('label').value,
       label: this.deviceWizardFormGroup.get('label').value,
+      firmwareId: this.deviceWizardFormGroup.get('firmwareId').value,
       deviceProfileId: profileId,
       deviceProfileId: profileId,
       additionalInfo: {
       additionalInfo: {
         gateway: this.deviceWizardFormGroup.get('gateway').value,
         gateway: this.deviceWizardFormGroup.get('gateway').value,

@@ -95,6 +95,10 @@
         <mat-label translate>device.label</mat-label>
         <mat-label translate>device.label</mat-label>
         <input matInput formControlName="label">
         <input matInput formControlName="label">
       </mat-form-field>
       </mat-form-field>
+      <tb-firmware-autocomplete
+        [useFullEntityId]="true"
+        formControlName="firmwareId">
+      </tb-firmware-autocomplete>
       <tb-device-data
       <tb-device-data
         formControlName="deviceData"
         formControlName="deviceData"
         required>
         required>

@@ -79,6 +79,7 @@ export class DeviceComponent extends EntityComponent<DeviceInfo> {
       {
       {
         name: [entity ? entity.name : '', [Validators.required]],
         name: [entity ? entity.name : '', [Validators.required]],
         deviceProfileId: [entity ? entity.deviceProfileId : null, [Validators.required]],
         deviceProfileId: [entity ? entity.deviceProfileId : null, [Validators.required]],
+        firmwareId: [entity ? entity.firmwareId : null],
         label: [entity ? entity.label : ''],
         label: [entity ? entity.label : ''],
         deviceData: [entity ? entity.deviceData : null, [Validators.required]],
         deviceData: [entity ? entity.deviceData : null, [Validators.required]],
         additionalInfo: this.fb.group(
         additionalInfo: this.fb.group(
@@ -95,6 +96,7 @@ export class DeviceComponent extends EntityComponent<DeviceInfo> {
   updateForm(entity: DeviceInfo) {
   updateForm(entity: DeviceInfo) {
     this.entityForm.patchValue({name: entity.name});
     this.entityForm.patchValue({name: entity.name});
     this.entityForm.patchValue({deviceProfileId: entity.deviceProfileId});
     this.entityForm.patchValue({deviceProfileId: entity.deviceProfileId});
+    this.entityForm.patchValue({firmwareId: entity.firmwareId});
     this.entityForm.patchValue({label: entity.label});
     this.entityForm.patchValue({label: entity.label});
     this.entityForm.patchValue({deviceData: entity.deviceData});
     this.entityForm.patchValue({deviceData: entity.deviceData});
     this.entityForm.patchValue({
     this.entityForm.patchValue({

@@ -28,6 +28,16 @@
           [fxShow]="!hideDelete() && !isEdit">
           [fxShow]="!hideDelete() && !isEdit">
     {{'resource.delete' | translate }}
     {{'resource.delete' | translate }}
   </button>
   </button>
+  <div fxLayout="row" fxLayout.xs="column">
+    <button mat-raised-button
+            ngxClipboard
+            (cbOnSuccess)="onFirmwareIdCopied($event)"
+            [cbContent]="entity?.id?.id"
+            [fxShow]="!isEdit">
+      <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+      <span translate>firmware.copyId</span>
+    </button>
+  </div>
 </div>
 </div>
 <div class="mat-padding" fxLayout="column">
 <div class="mat-padding" fxLayout="column">
   <form [formGroup]="entityForm">
   <form [formGroup]="entityForm">

@@ -24,6 +24,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { EntityComponent } from '@home/components/entity/entity.component';
 import { EntityComponent } from '@home/components/entity/entity.component';
 import { ChecksumAlgorithm, ChecksumAlgorithmTranslationMap, Firmware } from '@shared/models/firmware.models';
 import { ChecksumAlgorithm, ChecksumAlgorithmTranslationMap, Firmware } from '@shared/models/firmware.models';
 import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
 import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
 
 
 @Component({
 @Component({
   selector: 'tb-firmware',
   selector: 'tb-firmware',
@@ -109,4 +110,15 @@ export class FirmwaresComponent extends EntityComponent<Firmware> implements OnI
       }
       }
     });
     });
   }
   }
+
+  onFirmwareIdCopied($event) {
+    this.store.dispatch(new ActionNotificationShow(
+      {
+        message: this.translate.instant('firmware.idCopiedMessage'),
+        type: 'success',
+        duration: 750,
+        verticalPosition: 'bottom',
+        horizontalPosition: 'right'
+      }));
+  }
 }
 }

@@ -27,6 +27,7 @@ import { KeyFilter } from '@shared/models/query/query.models';
 import { TimeUnit } from '@shared/models/time/time.models';
 import { TimeUnit } from '@shared/models/time/time.models';
 import * as _moment from 'moment';
 import * as _moment from 'moment';
 import { AbstractControl, ValidationErrors } from '@angular/forms';
 import { AbstractControl, ValidationErrors } from '@angular/forms';
+import { FirmwareId } from '@shared/models/id/firmware-id';
 
 
 export enum DeviceProfileType {
 export enum DeviceProfileType {
   DEFAULT = 'DEFAULT'
   DEFAULT = 'DEFAULT'
@@ -445,6 +446,7 @@ export interface DeviceProfile extends BaseData<DeviceProfileId> {
   provisionDeviceKey?: string;
   provisionDeviceKey?: string;
   defaultRuleChainId?: RuleChainId;
   defaultRuleChainId?: RuleChainId;
   defaultQueueName?: string;
   defaultQueueName?: string;
+  firmwareId?: FirmwareId;
   profileData: DeviceProfileData;
   profileData: DeviceProfileData;
 }
 }
 
 
@@ -499,6 +501,7 @@ export interface Device extends BaseData<DeviceId> {
   name: string;
   name: string;
   type: string;
   type: string;
   label: string;
   label: string;
+  firmwareId?: FirmwareId;
   deviceProfileId?: DeviceProfileId;
   deviceProfileId?: DeviceProfileId;
   deviceData?: DeviceData;
   deviceData?: DeviceData;
   additionalInfo?: any;
   additionalInfo?: any;

@@ -1698,6 +1698,7 @@
         "checksum": "Checksum",
         "checksum": "Checksum",
         "checksum-required": "Checksum is required.",
         "checksum-required": "Checksum is required.",
         "checksum-algorithm": "Checksum algorithm",
         "checksum-algorithm": "Checksum algorithm",
+        "copyId": "Copy firmware Id",
         "description": "Description",
         "description": "Description",
         "delete": "Delete firmware",
         "delete": "Delete firmware",
         "delete-firmware-text": "Be careful, after the confirmation the firmware will become unrecoverable.",
         "delete-firmware-text": "Be careful, after the confirmation the firmware will become unrecoverable.",
@@ -1708,10 +1709,12 @@
         "drop-file": "Drop a firmware file or click to select a file to upload.",
         "drop-file": "Drop a firmware file or click to select a file to upload.",
         "empty": "Firmware is empty",
         "empty": "Firmware is empty",
         "export": "Export firmware",
         "export": "Export firmware",
-        "no-firmware-matching": "No firmware matching '{{firmware}}' were found.",
+        "idCopiedMessage": "Firmware Id has been copied to clipboard",
+        "no-firmware-matching": "No firmware matching '{{entity}}' were found.",
         "no-firmware-text": "No firmwares found",
         "no-firmware-text": "No firmwares found",
         "firmware": "Firmware",
         "firmware": "Firmware",
         "firmware-details": "Firmware details",
         "firmware-details": "Firmware details",
+        "firmware-required": "Firmware is required.",
         "search": "Search firmwares",
         "search": "Search firmwares",
         "selected-firmware": "{ count, plural, 1 {1 firmware} other {# firmwares} } selected",
         "selected-firmware": "{ count, plural, 1 {1 firmware} other {# firmwares} } selected",
         "title": "Title",
         "title": "Title",