Web SDK documentation
  1. Components
  2. FirmwareDetailsComponent

File

repository/firmware/list/firmware-details.component.ts

Implements

OnInit OnDestroy

Metadata

selector c8y-firmware-details
templateUrl ./firmware-details.component.html

Index

Properties
Methods

Constructor

constructor(activatedRoute: ActivatedRoute, inventoryService: InventoryService, repositoryService: RepositoryService, alertService: AlertService, translateService: TranslateService, modalService: ModalService, bsModalService: BsModalService, gainsightService: GainsightService, router: Router)
Parameters :
Name Type Optional
activatedRoute ActivatedRoute No
inventoryService InventoryService No
repositoryService RepositoryService No
alertService AlertService No
translateService TranslateService No
modalService ModalService No
bsModalService BsModalService No
gainsightService GainsightService No
router Router No

Methods

addBaseVersion
addBaseVersion()
Returns : void
addPatchVersion
addPatchVersion()
Returns : void
Async deleteBaseVersion
deleteBaseVersion(baseVersion: IManagedObject)
Parameters :
Name Type Optional
baseVersion IManagedObject No
Returns : any
Async deletePatchVersion
deletePatchVersion(patchVersion: IManagedObject)
Parameters :
Name Type Optional
patchVersion IManagedObject No
Returns : any
getBinaryName$
getBinaryName$(binaryUrl)
Decorators :
@memoize()
Parameters :
Name Optional
binaryUrl No
Returns : any
getPatchVersions$
getPatchVersions$(baseVersion)
Decorators :
@memoize(undefined)
Parameters :
Name Optional
baseVersion No
Returns : any
getPatchVersionsCount$
getPatchVersionsCount$(baseVersion: FirmwareBinary)
Decorators :
@memoize(undefined)
Parameters :
Name Type Optional
baseVersion FirmwareBinary No
Returns : any
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

baseVersions$
Type : Observable<IResultList<IManagedObject>>
Default value : merge( this.firmware$.pipe(distinctUntilKeyChanged('id')), this.baseVersionsUpdated$, this.patchVersionsUpdated$, this.reload$ ).pipe( switchMap(() => this.firmware$), switchMap(firmware => this.repositoryService.listBaseVersions(firmware)), shareReplay(1) )
baseVersionsUpdated$
Type : Subject<void>
Default value : new Subject()
canAddPatchVersions$
Type : Observable<boolean>
Default value : combineLatest( this.isLegacy$, this.baseVersions$.pipe(map(({ data }) => data.length > 0)) ).pipe(map(([isLegacy, hasBaseVersions]) => !isLegacy && hasBaseVersions))
destroy$
Type : Subject<boolean>
Default value : new Subject<boolean>()
expanded
Type : literal type
Default value : {}
firmware
Type : IManagedObject
firmware$
Type : Observable<IManagedObject>
Default value : merge( this.activatedRoute.params.pipe( map(params => params.id), switchMap(id => defer(() => this.inventoryService.detail(id).then(result => result.data))) ), this.reload$.pipe( tap(() => this.reloading$.next(true)), switchMap(() => this.activatedRoute.params), map(params => params.id), switchMap(id => defer(() => this.inventoryService.detail(id).then(result => result.data))), tap(() => this.reloading$.next(false)) ), this.firmwareUpdated$ ).pipe(shareReplay(1))
firmwareUpdated$
Type : Subject<IManagedObject>
Default value : new Subject()
isLegacy$
Type : Observable<boolean>
Default value : this.firmware$.pipe( map(firmware => this.repositoryService.isLegacyEntry(firmware)), shareReplay(1) )
patchVersionsUpdated$
Type : Subject<void>
Default value : new Subject()
reload$
Type : Subject<void>
Default value : new Subject()
reloading$
Type : BehaviorSubject<boolean>
Default value : new BehaviorSubject(false)
updateFirmware$
Type : Subject<Partial<IManagedObject>>
Default value : new Subject() 
<c8y-title>
  {{ (firmware$ | async)?.name }}
</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    label="{{ 'Management' | translate }}"
    icon="c8y-management"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    path="#/firmware"
    label="{{ 'Firmware repository' | translate }}"
    icon="c8y-firmware"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    label="{{ (firmware$ | async)?.name }}"
    icon="c8y-firmware"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item [placement]="'right'">
  <button
    *ngIf="!(isLegacy$ | async)"
    class="btn btn-link"
    type="button"
    title="{{ 'Add firmware' | translate }}"
    data-cy="firmware-details--add-firmware-btn"
    (click)="addBaseVersion()"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add firmware' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button
    *ngIf="canAddPatchVersions$ | async"
    class="btn btn-link"
    type="button"
    title="{{ 'Add firmware patch' | translate }}"
    data-cy="firmware-details--add-firmware-patch-btn"
    (click)="addPatchVersion()"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add firmware patch' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    type="button"
    title="{{ 'Reload' | translate }}"
    (click)="reload$.next()"
  >
    <i c8yIcon="refresh" [ngClass]="{ 'icon-spin': reloading$ | async }"></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-action-bar-item>

<div class="row">
  <div class="col-lg-12 col-lg-max">
    <div class="card card--fullpage">
      <div class="card-block bg-level-1 flex-no-shrink p-t-24 p-b-24">
        <div class="content-flex-70">
          <div class="text-center">
            <i class="c8y-icon-duocolor icon-48 c8y-icon c8y-icon-firmware"></i>
            <p>
              <small class="label label-info">Firmware</small>
            </p>
          </div>
          <div class="flex-grow col-10">
            <div class="row">
              <div class="col-md-4">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Name' | translate }}
                  </label>
                  <div class="input-group input-group-editable">
                    <input
                      #nameInput
                      type="text"
                      class="form-control"
                      [ngModel]="(firmware$ | async)?.name"
                      #nameModel="ngModel"
                      placeholder="{{ 'e.g. My firmware' | translate }}"
                      data-cy="firmware-details--name-input"
                      [ngStyle]="{ 'width.ch': (firmware$ | async)?.name?.length + 2 || 36 }"
                      required
                    />
                    <span></span>
                    <div class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        type="button"
                        title="{{ 'Save' | translate }}"
                        data-cy="firmware-details--name-save-btn"
                        (click)="updateFirmware$.next({ name: nameInput.value }); nameModel.reset()"
                        [disabled]="nameInput.value.length == 0"
                      >
                        {{ 'Save' | translate }}
                      </button>
                    </div>
                  </div>
                </c8y-form-group>
              </div>
              <div class="col-md-4">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Description' | translate }}
                  </label>
                  <div class="input-group input-group-editable">
                    <input
                      #descriptionInput
                      type="text"
                      class="form-control"
                      [ngModel]="(firmware$ | async)?.description"
                      #descriptionModel="ngModel"
                      placeholder="{{ 'e.g. Firmware for hardware revision B' | translate }}"
                      data-cy="firmware-details--description-input"
                      [ngStyle]="{ 'width.ch': (firmware$ | async)?.description?.length || 36 }"
                    />
                    <span></span>
                    <div class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        type="button"
                        title="{{ 'Save' | translate }}"
                        data-cy="firmware-details--description-save-btn"
                        (click)="
                          updateFirmware$.next({ description: descriptionInput.value });
                          descriptionModel.reset()
                        "
                      >
                        {{ 'Save' | translate }}
                      </button>
                    </div>
                  </div>
                </c8y-form-group>
              </div>
              <div class="col-md-4">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Device type filter' | translate }}

                    <button
                      class="btn-help"
                      type="button"
                      [attr.aria-label]="'Help' | translate"
                      popover="{{
                        'If the filter is set, the firmware will show up for installation only for devices of that type. If no filter is set, it will be available for all devices.'
                          | translate
                      }}"
                      placement="right"
                      triggers="focus"
                      container="body"
                    >
                      <i c8yIcon="question-circle-o"></i>
                    </button>
                  </label>
                  <div class="input-group input-group-editable">
                    <input
                      #deviceTypeInput
                      type="text"
                      class="form-control"
                      [ngModel]="(firmware$ | async)?.c8y_Filter?.type"
                      #deviceTypeModel="ngModel"
                      placeholder="{{ 'e.g.' | translate }} c8y_Linux"
                      data-cy="firmware-details--device-type-filter-input"
                      [ngStyle]="{ 'width.ch': (firmware$ | async)?.type?.length || 36 }"
                    />
                    <span></span>
                    <div class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        type="button"
                        title="{{ 'Save' | translate }}"
                        data-cy="firmware-details--device-type-filter-save-btn"
                        (click)="
                          updateFirmware$.next({ c8y_Filter: { type: deviceTypeInput.value } });
                          deviceTypeModel.reset()
                        "
                      >
                        {{ 'Save' | translate }}
                      </button>
                    </div>
                  </div>
                </c8y-form-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="inner-scroll">
        <div class="card-header separator-top-bottom bg-component sticky-top">
          <div class="card-title" translate>Versions and patches</div>
        </div>

        <div class="card-block p-t-0 p-b-24">
          <div *ngIf="(baseVersions$ | async)?.data.length === 0">
            <c8y-ui-empty-state
              [icon]="'c8y-firmware'"
              [title]="'No versions to display.' | translate"
              [subtitle]="'Add a new version by clicking below.' | translate"
              [horizontal]="true"
            >
              <button
                class="btn btn-sm btn-default m-t-8"
                type="button"
                title="{{ 'Add firmware' | translate }}"
                (click)="addBaseVersion()"
              >
                <i c8yIcon="plus-circle"></i>
                {{ 'Add firmware' | translate }}
              </button>
            </c8y-ui-empty-state>
          </div>

          <c8y-list-group *ngIf="(baseVersions$ | async)?.data.length > 0">
            <c8y-li
              *c8yFor="let baseVersion of baseVersions$ | async; let i = index; loadMore: 'auto'"
              [emptyActions]="!(getPatchVersions$(baseVersion) | async)?.data.length"
              [collapsed]="!expanded[baseVersion.id]"
              (collapsedChange)="expanded[baseVersion.id] = !$event"
            >
              <c8y-li-icon>
                <i c8yIcon="c8y-firmware"></i>
              </c8y-li-icon>

              <c8y-li-body class="content-flex-50">
                <div class="col-4">
                  <p class="text-truncate" title="{{ baseVersion.c8y_Firmware.version }}">
                    {{ baseVersion.c8y_Firmware.version }}
                  </p>
                </div>
                <div class="col-5">
                  <p class="text-truncate">
                    <span class="text-label-small m-r-8" translate>File</span>
                    <span title="{{ getBinaryName$(baseVersion.c8y_Firmware.url) | async }}">
                      <c8y-file-download
                        url="{{ baseVersion.c8y_Firmware.url }}"
                      ></c8y-file-download>
                    </span>
                  </p>
                </div>
                <div class="col-2 d-flex a-i-start">
                  <span *ngIf="isLegacy$ | async" class="label label-warning m-l-auto-sm">
                    {{ 'Legacy' | translate }}
                  </span>

                  <span *ngIf="!(isLegacy$ | async)">
                    <span *ngIf="(getPatchVersionsCount$(baseVersion) | async) === null">
                      <span class="label label-info">
                        <i c8yIcon="circle-o-notch" class="icon-spin"></i>
                      </span>
                    </span>
                    <span *ngIf="(getPatchVersionsCount$(baseVersion) | async) !== null">
                      <span [ngPlural]="getPatchVersionsCount$(baseVersion) | async">
                        <ng-template ngPluralCase="=0">
                          <span class="label label-default m-l-auto-sm">
                            <span translate>No patches</span>
                          </span>
                        </ng-template>
                        <ng-template ngPluralCase="=1">
                          <span class="label label-info">
                            <span translate>1 patch</span>
                          </span>
                        </ng-template>
                        <ng-template ngPluralCase="other">
                          <span class="label label-info">
                            <span
                              ngNonBindable
                              translate
                              [translateParams]="{
                                count: getPatchVersionsCount$(baseVersion) | async
                              }"
                            >
                              {{ count }} patches
                            </span>
                          </span>
                        </ng-template>
                      </span>
                    </span>
                  </span>
                </div>
                <div class="fit-h-20 visible-xs" *ngIf="!(isLegacy$ | async)">
                  <button
                    class="btn btn-default btn-sm m-t-8"
                    type="button"
                    title="{{ 'Delete' | translate }}"
                    (click)="deleteBaseVersion(baseVersion)"
                  >
                    <i c8yIcon="delete"></i>
                    {{ 'Delete' | translate }}
                  </button>
                </div>
                <div *ngIf="!(isLegacy$ | async)" class="m-l-auto fit-h-20 p-r-8 hidden-xs">
                  <button
                    class="btn btn-dot btn-dot--danger showOnHover"
                    type="button"
                    [attr.aria-label]="'Delete' | translate"
                    data-cy="firmware-details--delete-base-version"
                    tooltip="{{ 'Delete' | translate }}"
                    [delay]="500"
                    (click)="deleteBaseVersion(baseVersion)"
                  >
                    <i c8yIcon="delete"></i>
                  </button>
                </div>
              </c8y-li-body>
              <c8y-li-collapse *ngIf="(getPatchVersions$(baseVersion) | async)?.data.length">
                <c8y-list-group class="separator-top">
                  <c8y-li
                    *c8yFor="
                      let patchVersion of getPatchVersions$(baseVersion) | async;
                      let i = index;
                      loadMore: 'auto'
                    "
                  >
                    <c8y-li-icon>
                      <i c8yIcon="c8y-firmware"></i>
                    </c8y-li-icon>
                    <c8y-li-body class="content-flex-50">
                      <div class="col-4">
                        {{ patchVersion.c8y_Firmware.version }}
                      </div>
                      <div class="col-5">
                        <div class="text-truncate">
                          <span class="text-label-small m-r-8" translate>File</span>
                          <c8y-file-download
                            url="{{ patchVersion.c8y_Firmware.url }}"
                          ></c8y-file-download>
                        </div>
                      </div>
                      <div class="visible-xs m-t-8">
                        <button
                          class="btn btn-danger btn-xs"
                          type="button"
                          title="{{ 'Delete' | translate }}"
                          data-cy="firmware-details--delete-patch-version"
                          (click)="deletePatchVersion(patchVersion)"
                        >
                          <i c8yIcon="delete"></i>
                          {{ 'Delete' | translate }}
                        </button>
                      </div>
                      <div class="m-l-auto p-r-8 hidden-xs fit-h-20">
                        <button
                          class="btn btn-dot text-danger showOnHover"
                          type="button"
                          [attr.aria-label]="'Delete' | translate"
                          tooltip="{{ 'Delete' | translate }}"
                          placement="right"
                          [delay]="500"
                          (click)="deletePatchVersion(patchVersion)"
                        >
                          <i c8yIcon="delete" data-cy="firmware-details--Remove-icon"></i>
                        </button>
                      </div>
                    </c8y-li-body>
                  </c8y-li>
                </c8y-list-group>
              </c8y-li-collapse>
            </c8y-li>
          </c8y-list-group>
        </div>
      </div>
    </div>
  </div>
</div>

results matching ""

    No results matching ""