File

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

Implements

OnInit OnDestroy

Metadata

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
Async deleteBaseVersion
deleteBaseVersion(baseVersion: IManagedObject)
Parameters :
Name Type Optional
baseVersion IManagedObject No
Returns : any
getBinaryName$
getBinaryName$(binaryUrl)
Decorators :
@memoize()
Parameters :
Name Optional
binaryUrl No
Returns : any
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onSelectSoftwareType
onSelectSoftwareType(software)
Parameters :
Name Optional
software No
Returns : void

Properties

baseVersions$
Type : Observable<IResultList<IManagedObject>>
Default value : merge( this.software$.pipe(distinctUntilKeyChanged('id')), this.baseVersionsUpdated$, this.reload$ ).pipe( switchMap(() => this.software$), switchMap(software => this.repositoryService.listBaseVersions(software)), shareReplay(1) )
baseVersionsUpdated$
Type : Subject<void>
Default value : new Subject()
destroy$
Type : Subject<boolean>
Default value : new Subject<boolean>()
isLegacy$
Type : Observable<boolean>
Default value : this.software$.pipe( map(software => this.repositoryService.isLegacyEntry(software)), shareReplay(1) )
isSoftwareTypeChanged
Default value : false
reload$
Type : Subject<void>
Default value : new Subject()
reloading$
Type : BehaviorSubject<boolean>
Default value : new BehaviorSubject(false)
software$
Type : Observable<IManagedObject>
Default value : merge( this.activatedRoute.params.pipe( map(params => params.id), switchMap(id => from(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 => from(this.inventoryService.detail(id).then(result => result.data))), tap(() => this.reloading$.next(false)) ), this.softwareUpdated$ ).pipe(shareReplay(1))
softwareType
Type : SoftwareTypeComponent
Decorators :
@ViewChild(SoftwareTypeComponent, {static: true})
softwareTypeObject
Type : IManagedObject
softwareUpdated$
Type : Subject<IManagedObject>
Default value : new Subject()
updateSoftware$
Type : Subject<Partial<IManagedObject>>
Default value : new Subject()
<c8y-title>
  {{ (software$ | async)?.name }}
</c8y-title>

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

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    type="button"
    title="{{ 'Add software' | translate }}"
    (click)="addBaseVersion()"
    *ngIf="!(isLegacy$ | async)"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add software' | 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 overflow-visible">
        <div class="content-flex-70">
          <div class="text-center">
            <i class="c8y-icon-duocolor icon-48 c8y-icon c8y-icon-tools"></i>
            <p>
              <small class="label label-info">Software</small>
            </p>
          </div>
          <div class="flex-grow col-10">
            <div class="row">
              <div class="col-sm-6">
                <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]="(software$ | async)?.name"
                      #nameModel="ngModel"
                      placeholder="{{ 'e.g. My software' | translate }}"
                      [ngStyle]="{ 'width.ch': (software$ | async)?.name?.length + 2 || 31 }"
                      required
                    />
                    <span></span>
                    <div class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        type="button"
                        title="{{ 'Save' | translate }}"
                        (click)="updateSoftware$.next({ name: nameInput.value }); nameModel.reset()"
                        [disabled]="nameInput.value.length === 0"
                      >
                        {{ 'Save' | translate }}
                      </button>
                    </div>
                  </div>
                </c8y-form-group>
              </div>
              <div class="col-sm-6">
                <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]="(software$ | async)?.description"
                      #descriptionModel="ngModel"
                      placeholder="{{ 'e.g. Cloud connectivity software' | translate }}"
                      [ngStyle]="{ 'width.ch': (software$ | async)?.description?.length + 2 || 31 }"
                    />
                    <span></span>
                    <div class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        type="button"
                        title="{{ 'Save' | translate }}"
                        (click)="
                          updateSoftware$.next({ description: descriptionInput.value });
                          descriptionModel.reset()
                        "
                      >
                        {{ 'Save' | translate }}
                      </button>
                    </div>
                  </div>
                </c8y-form-group>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Device type' | translate }}
                    <button
                      class="btn-help"
                      type="button"
                      [attr.aria-label]="'Help' | translate"
                      popover="{{
                        'If the filter is set, the software will show up for installation only for devices of that type. If no filter is set, it will be available for all devices.'
                          | translate
                      }}"
                      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]="(software$ | async)?.c8y_Filter?.type"
                      #deviceTypeModel="ngModel"
                      placeholder="{{ 'e.g.' | translate }} c8y_Linux"
                      [ngStyle]="{ 'width.ch': (software$ | async)?.type?.length + 2 || 31 }"
                    />
                    <span></span>
                    <div class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        type="button"
                        title="{{ 'Save' | translate }}"
                        (click)="
                          updateSoftware$.next({ c8y_Filter: { type: deviceTypeInput.value } });
                          deviceTypeModel.reset()
                        "
                      >
                        {{ 'Save' | translate }}
                      </button>
                    </div>
                  </div>
                </c8y-form-group>
              </div>
              <div class="col-sm-6">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Software type' | translate }}
                  </label>
                  <div class="input-group input-group-editable">
                    <c8y-software-type
                      [softwareTypeMO]="softwareTypeObject"
                      [style]="{ 'width.ch': softwareTypeObject?.softwareType?.length + 2 || 31 }"
                      (onSelectSoftware)="onSelectSoftwareType($event)"
                    ></c8y-software-type>
                    <div class="input-group-btn">
                      <button
                        class="btn btn-primary"
                        type="button"
                        title="{{ 'Save' | translate }}"
                        [ngClass]="isSoftwareTypeChanged ? '' : 'hidden'"
                        [disabled]="softwareTypeObject?.softwareType === ''"
                        (click)="
                          updateSoftware$.next({ softwareType: softwareTypeObject.softwareType });
                          softwareType.resetInput();
                          isSoftwareTypeChanged = false
                        "
                      >
                        {{ 'Save' | translate }}
                      </button>
                    </div>
                  </div>
                </c8y-form-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="inner-scroll">
        <div class="card-header separator-top-bottom sticky-top bg-component">
          <div
            class="card-title"
            translate
          >
            Versions
          </div>
        </div>

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

          <c8y-list-group *ngIf="(baseVersions$ | async)?.data.length > 0">
            <c8y-li
              *c8yFor="let baseVersion of baseVersions$ | async; let i = index; loadMore: 'auto'"
            >
              <c8y-li-icon>
                <i c8yIcon="c8y-tools"></i>
              </c8y-li-icon>

              <c8y-li-body class="content-flex-50">
                <div class="col-4">
                  <p
                    class="text-truncate-wrap"
                    title="{{ baseVersion.c8y_Software.version }}"
                  >
                    {{ baseVersion.c8y_Software.version }}
                  </p>
                </div>
                <div class="col-5">
                  <p class="text-truncate-wrap">
                    <span
                      class="text-label-small m-r-8"
                      translate
                    >
                      File
                    </span>
                    <span title=" {{ getBinaryName$(baseVersion.c8y_Software.url) | async }}">
                      <c8y-file-download
                        url="{{ baseVersion.c8y_Software.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>

                  <div
                    class="fit-h-20"
                    *ngIf="!(isLegacy$ | async)"
                  >
                    <button
                      class="btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8"
                      type="button"
                      title="{{ 'Delete' | translate }}"
                      (click)="deleteBaseVersion(baseVersion)"
                    >
                      <i c8yIcon="delete"></i>
                      {{ 'Delete' | translate }}
                    </button>
                  </div>
                </div>
                <div
                  *ngIf="!(isLegacy$ | async)"
                  class="m-l-auto fit-h-20 hidden-xs"
                >
                  <button
                    class="btn btn-dot text-danger showOnHover"
                    type="button"
                    data-cy="software-details-component--Delete-button"
                    [attr.aria-label]="'Delete' | translate"
                    tooltip="{{ 'Delete' | translate }}"
                    [delay]="500"
                    (click)="deleteBaseVersion(baseVersion)"
                  >
                    <i c8yIcon="delete"></i>
                  </button>
                </div>
              </c8y-li-body>
            </c8y-li>
          </c8y-list-group>
        </div>
      </div>
    </div>
  </div>
</div>

results matching ""

    No results matching ""