File

ecosystem/packages/package-details/package-details.component.ts

Implements

OnInit

Metadata

Index

Properties
Methods

Constructor

constructor(activatedRoute: ActivatedRoute, wizardModalService: WizardModalService, ecosystemService: EcosystemService, contextRouteService: ContextRouteService, pluginsService: PluginsService, packageAvailabilityService: PackageAvailabilityService, ui: AppStateService, gainsightService: GainsightService)
Parameters :
Name Type Optional
activatedRoute ActivatedRoute No
wizardModalService WizardModalService No
ecosystemService EcosystemService No
contextRouteService ContextRouteService No
pluginsService PluginsService No
packageAvailabilityService PackageAvailabilityService No
ui AppStateService No
gainsightService GainsightService No

Methods

closeOverview
closeOverview()
Returns : void
deploy
deploy()
Returns : void
Async ngOnInit
ngOnInit()
Returns : any
Async showPluginOverview
showPluginOverview(plugin: ApplicationPlugin)
Parameters :
Name Type Optional
plugin ApplicationPlugin No
Returns : any
Async togglePackageAvailability
togglePackageAvailability(pckg: IApplication, newAvailability: ApplicationAvailability)
Parameters :
Name Type Optional
pckg IApplication No
newAvailability ApplicationAvailability No
Returns : any

Properties

appState
Type : ApplicationState
baseUrl
Type : string
description
Type : string
exportedPlugins$
Type : BehaviorSubject<ApplicationPlugin[]>
Default value : new BehaviorSubject([])
isAllowedToCreateSubtenants
Default value : false
isChangingAvailability
Default value : false
isOwnedByCurrentTenant
Default value : false
isPackageBlueprint
Type : boolean
markdown
Type : string
name
Type : string
package
Type : IApplication
Default value : {}
Readonly PACKAGE_TYPE
Default value : PackageType
packageAvailability
Type : ApplicationAvailability
packageContentState
Type : ApplicationState
Readonly packageProperties
Type : PropertiesListItem[]
Default value : packageProperties
packageType
Type : PackageType
Readonly packageTypeLabels
Default value : PACKAGE_TYPE_LABELS
pluginBaseUrl
Type : string
pluginMarkdown
Type : string
selectedPlugin
Type : ApplicationPlugin
<c8y-title>{{ name | humanizeAppName | async }}</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'c8y-atom'"
    [label]="'Ecosystem' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'big-parcel'"
    [label]="'Extensions' | translate"
    [path]="'ecosystem/extension/extensions'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="name | humanizeAppName | async"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="'Extension package' | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item
  placement="right"
  itemClass="navbar-form"
  *ngIf="isOwnedByCurrentTenant && isAllowedToCreateSubtenants"
>
  <div class="d-flex a-i-center">
    <label
      class="m-b-0 m-r-8"
      for="availability"
      translate
    >
      Availability`of package based on app state`
    </label>
    <div class="c8y-select-wrapper">
      <select
        class="form-control"
        id="availability"
        [(ngModel)]="packageAvailability"
        [disabled]="isChangingAvailability"
        (ngModelChange)="togglePackageAvailability(package, $event)"
      >
        <option
          *ngFor="let availability of packageAvailabilityService.availabilities"
          [ngValue]="availability.value"
        >
          {{ availability.label | translate }}
        </option>
      </select>
    </div>
  </div>
</c8y-action-bar-item>

<div
  class="card content-fullpage d-grid grid__row--fit-auto"
  [ngClass]="{ 'grid__col--8-4-0': !selectedPlugin, 'grid__col--0-4-8': !!selectedPlugin }"
>
  <div class="bg-level-1 grid__col--fullspan separator-bottom">
    <div class="card-block p-t-24 p-b-24 large-padding">
      <button
        class="card__ribbon btn-clean"
        [attr.aria-label]="
          (package.label || package.manifest.label | translatePackageLabel) +
          ': ' +
          (packageTypeLabels[packageType].tooltip | translate)
        "
        tooltip="{{ packageTypeLabels[packageType].tooltip | translate }}"
        placement="bottom"
        type="button"
        *ngIf="packageType !== PACKAGE_TYPE.CUSTOM"
        [delay]="500"
      >
        <span
          [ngClass]="{
            'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,
            'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL,
            'bg-warning': packageType === PACKAGE_TYPE.ARCHIVED
          }"
        >
          {{ package.label || package.manifest.label | translatePackageLabel }}
        </span>
      </button>
      <div class="content-flex-70">
        <div class="text-center">
          <i
            class="c8y-icon-duocolor icon-48"
            c8yIcon="big-parcel"
          ></i>
          <button
            class="btn-clean"
            [attr.aria-label]="
              (appState?.label | translate) + ': ' + (appState?.tooltip | translate)
            "
            [tooltip]="appState?.tooltip | translate"
            placement="top"
            type="button"
            [delay]="500"
          >
            <span
              class="label"
              [ngClass]="appState?.class"
            >
              {{ appState?.label | translate }}
            </span>
          </button>
          <button
            class="btn-clean"
            [attr.aria-label]="
              (packageContentState?.label | translate) +
              ': ' +
              (packageContentState?.tooltip | translate)
            "
            [tooltip]="packageContentState?.tooltip | translate"
            placement="bottom"
            type="button"
            [delay]="500"
          >
            <span
              class="label"
              [ngClass]="packageContentState?.class"
            >
              {{ packageContentState?.label | translate }}
            </span>
          </button>
        </div>

        <div class="flex-grow col-10">
          <div class="content-flex-80">
            <div class="col-8">
              <div class="card-title h4 m-b-8">{{ name | humanizeAppName | async }}</div>
              <p *ngIf="description">{{ description }}</p>
              <p
                class="text-muted"
                *ngIf="!description"
              >
                <em>{{ 'No description available.' | translate }}</em>
              </p>
            </div>
            <div
              class="col-3 text-right-md p-r-md-40"
              *ngIf="isPackageBlueprint"
            >
              <button
                class="btn btn-primary btn-sm"
                (click)="deploy()"
                data-cy="c8y-package-details--deploy-application-button"
              >
                <i
                  class="m-r-4"
                  c8yIcon="output"
                ></i>
                {{ 'Deploy application' | translate }}
              </button>
            </div>
            <div class="flex-grow">
              <c8y-properties-list
                [data]="package.manifest"
                [properties]="packageProperties"
              ></c8y-properties-list>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="inner-scroll">
    <div class="card-header separator sticky-top">
      <div class="card-title">{{ 'Extension package overview' | translate }}</div>
    </div>
    <div class="card-block p-l-16 p-r-16">
      <div
        class="alert alert-warning m-b-16"
        style="margin: auto"
        *ngIf="packageType === PACKAGE_TYPE.ARCHIVED"
        translate
      >
        The package was archived by the owner marking it as out of maintenance. It is not
        recommended to install the package.
      </div>
      <c8y-ui-empty-state
        [icon]="'user-manual'"
        [title]="'No README.md found' | translate"
        [subtitle]="
          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the package.'
            | translate
        "
        *ngIf="!markdown"
        [horizontal]="true"
      ></c8y-ui-empty-state>
      <div
        class="markdown-content"
        [innerHTML]="markdown | markdownToHtml: { baseUrl } | async"
      ></div>
    </div>
    <div class="separator-bottom visible-sm visible-xs"></div>
  </div>

  <div
    class="inner-scroll d-flex d-col bg-level-1 split-view__list"
    [ngClass]="{ 'border-right': !!selectedPlugin }"
  >
    <div class="card-header separator sticky-top">
      <div class="card-title">{{ 'Package plugins' | translate }}</div>
    </div>
    <div class="border-left flex-grow">
      <!-- empty state -->
      <div
        class="p-16"
        *ngIf="(exportedPlugins$ | async).length === 0"
      >
        <c8y-ui-empty-state
          [icon]="'plugin'"
          [title]="'No plugins to display.' | translate"
          [subtitle]="'This package doesn\'t contain plugins.' | translate"
          [horizontal]="true"
        ></c8y-ui-empty-state>
      </div>
      <c8y-plugin-list
        [plugins$]="exportedPlugins$"
        [selectable]="false"
        [installable]="true"
        [package]="package"
        [selectedPlugin]="selectedPlugin"
        (showOverview)="showPluginOverview($event)"
      ></c8y-plugin-list>
    </div>
  </div>

  <div class="inner-scroll split-view__detail"
    [ngClass]="{ 'split-view__detail--selected': selectedPlugin }">
    <div
      class="card-header separator sticky-top"
      *ngIf="selectedPlugin"
    >
      <button
        class="btn-clean"
        (click)="closeOverview()"
      >
        <i c8yIcon="caret-back"></i>
        {{ 'Back to package overview ' | translate }}
      </button>
    </div>
    <div
      class="card-block p-l-16 p-r-16 overflow-visible"
      *ngIf="selectedPlugin"
    >
      <div
        class="markdown-content"
        *ngIf="pluginMarkdown"
        [innerHTML]="pluginMarkdown | markdownToHtml: { baseUrl: pluginBaseUrl } | async"
      ></div>
      <c8y-ui-empty-state
        [icon]="'user-manual'"
        [title]="'No README.md found for plugin' | translate"
        [subtitle]="
          'To view the contents of &quot;README&quot;, add the file &quot;README.md&quot; to the plugin.'
            | translate
        "
        *ngIf="!pluginMarkdown"
        [horizontal]="true"
      ></c8y-ui-empty-state>
    </div>
  </div>
</div>

results matching ""

    No results matching ""