ecosystem/application-properties/application-properties.component.ts
OnInit
| selector | c8y-application-properties |
| templateUrl | ./application-properties.component.html |
constructor(activatedRoute: ActivatedRoute, ecosystemService: EcosystemService, router: Router, formBuilder: FormBuilder, applicationService: ApplicationService, alertService: AlertService, inventoryService: InventoryService, permissions: Permissions, modalService: ModalService, translate: TranslateService, bsModalService: BsModalService, gainsightService: GainsightService)
|
|||||||||||||||||||||||||||||||||||||||
|
Parameters :
|
| cancel |
cancel()
|
|
Returns :
void
|
| Async delete |
delete()
|
|
Returns :
any
|
| getPackage | ||||||
getPackage(entityOrId: string | number | IApplication)
|
||||||
|
Parameters :
Returns :
any
|
| Async load |
load()
|
|
Returns :
any
|
| Async loadApplication |
loadApplication()
|
|
Returns :
any
|
| Async ngOnInit |
ngOnInit()
|
|
Returns :
any
|
| onApplication | ||||||
onApplication(app: IApplication)
|
||||||
|
Parameters :
Returns :
void
|
| onNewArchive |
onNewArchive()
|
|
Returns :
void
|
| openApp | ||||
openApp(app)
|
||||
|
Parameters :
Returns :
void
|
| Async refresh |
refresh()
|
|
Returns :
any
|
| Async save | ||||||
save(app: IApplication)
|
||||||
|
Parameters :
Returns :
any
|
| Async subscribe |
subscribe()
|
|
Returns :
any
|
| Async unsubscribe |
unsubscribe()
|
|
Returns :
any
|
| Async updateToLatestVersion |
updateToLatestVersion()
|
|
Returns :
any
|
| application |
Type : IApplication
|
| appState |
Type : ApplicationState
|
| binaryMo |
Type : IManagedObject
|
| breadcrumbConfig |
Type : literal type
|
| canDelete |
Type : boolean
|
| canOpenInBrowser |
Type : boolean
|
| CURRENT_LOCATION |
Default value : location.href
|
| disableOpenInBrowser |
Type : boolean
|
| formGroup |
Type : FormGroup
|
| hasAdminPermissions |
Default value : false
|
| iconMap |
Type : object
|
Default value : {
HOSTED: 'cloud',
EXTERNAL: 'external-link-square',
MICROSERVICE: 'microchip'
}
|
| isActivityLogSupported |
Type : boolean
|
| isCustomMicroservice |
Type : boolean
|
| isExternal |
Type : boolean
|
| isFeature |
Type : boolean
|
| isLoading |
Default value : true
|
| isMicroservice |
Type : boolean
|
| isOwner |
Type : boolean
|
| isPackage |
Type : boolean
|
| isSubscribed |
Type : boolean
|
| isUnpacked |
Type : boolean
|
| isUpdateAvailable |
Default value : false
|
| noDescriptionLabel |
Default value : gettext('No description available.')
|
| packageProperties |
Type : PropertiesListItem[]
|
Default value : [...packageProperties]
|
| singleTenant |
Default value : false
|
| sourcePackage |
Type : IApplication
|
| subscription |
Default value : false
|
<c8y-title>{{ application | humanizeAppName | async }}</c8y-title>
<c8y-breadcrumb *ngIf="!isMicroservice">
<c8y-breadcrumb-item
[icon]="'c8y-atom'"
[label]="'Ecosystem' | translate"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
[icon]="'c8y-modules'"
[label]="'Applications' | translate"
[path]="'ecosystem/application/applications'"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
[icon]="breadcrumbConfig?.icon"
*ngIf="isFeature"
[label]="breadcrumbConfig?.label"
[path]="breadcrumbConfig?.path"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item [label]="application | humanizeAppName | async"></c8y-breadcrumb-item>
<c8y-breadcrumb-item [label]="'Properties' | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>
<c8y-breadcrumb *ngIf="isMicroservice">
<c8y-breadcrumb-item
[icon]="'c8y-atom'"
[label]="'Ecosystem' | translate"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
[icon]="breadcrumbConfig?.icon"
[label]="breadcrumbConfig?.label"
[path]="breadcrumbConfig?.path"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item [label]="application | humanizeAppName | async"></c8y-breadcrumb-item>
<c8y-breadcrumb-item [label]="'Properties' | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>
<div class="row">
<div [ngClass]="{ 'col-md-8': !isActivityLogSupported, 'col-md-12': isActivityLogSupported }">
<div
class="card content-fullpage"
*ngIf="application"
[ngClass]="{ 'd-grid grid__col--7-5--md': isActivityLogSupported }"
>
<form
class="d-flex d-col content-fullpage"
(ngSubmit)="formGroup.valid && save(formGroup.value)"
[formGroup]="formGroup"
novalidate
>
<div
class="d-contents"
*ngIf="!isLoading"
>
<div class="card-block separator-bottom large-padding flex-no-shrink">
<div class="d-flex-md a-i-start text-center text-left-md">
<c8y-app-icon
class="icon-48"
*ngIf="!isPackage && !isFeature && !isMicroservice && !isExternal"
[app]="application"
[contextPath]="application.contextPath"
[name]="application.name"
></c8y-app-icon>
<i
class="icon-48"
c8yIcon="big-parcel"
*ngIf="isPackage"
></i>
<i
class="icon-48"
c8yIcon="tab"
*ngIf="isFeature"
></i>
<i
class="icon-48"
c8yIcon="microchip"
*ngIf="isMicroservice"
></i>
<i
class="icon-48"
c8yIcon="globe1"
*ngIf="isExternal"
></i>
<div class="p-t-md-16 p-l-md-16 p-r-md-32 flex-grow">
<p class="h4 text-medium m-b-8">{{ application | humanizeAppName | async }}</p>
<p *ngIf="!isOwner">
<em class="text-muted">
{{
formGroup?.controls?.description?.value || (noDescriptionLabel | translate)
}}
</em>
</p>
<div
class="form-group m-b-0"
*ngIf="isOwner"
>
<label
class="editable"
[ngClass]="{ updated: formGroup?.controls?.description?.dirty }"
>
<textarea
class="form-control no-resize"
placeholder="{{ noDescriptionLabel | translate }}"
name="description"
c8y-textarea-autoresize
formControlName="description"
></textarea>
</label>
</div>
</div>
<div class="text-right-md m-t-4">
<span
class="label"
[ngClass]="appState?.class"
>
{{ appState?.label | translate }}
</span>
<div
class="fit-w m-t-2"
*ngIf="application.manifest?.version"
data-cy="application-detail--version"
>
<label
class="text-label-small"
translate
>
Version:
</label>
<small class="p-l-4 text-bold">{{ application.manifest?.version }}</small>
</div>
<div
class="fit-w m-t-2"
*ngIf="!isUnpacked"
>
<label
class="text-label-small"
translate
>
Creation time:
</label>
<small class="p-l-4 text-bold">
{{ (binaryMo?.creationTime | c8yDate) || '---' }}
</small>
</div>
<div class="m-t-8">
<button
class="btn btn-default btn-sm"
[attr.aria-label]="
'There\'s a newer version available, click to update' | translate
"
tooltip="{{
'There\'s a newer version available, click to update' | translate
}}"
placement="top"
type="button"
*ngIf="isUpdateAvailable"
(click)="updateToLatestVersion()"
[delay]="300"
>
<i [c8yIcon]="'installing-updates'"></i>
{{ 'Update available' | translate }}
</button>
<button
class="btn btn-default btn-sm"
title="{{ 'Open' | translate }}"
type="button"
(click)="openApp(application)"
[disabled]="disableOpenInBrowser"
*ngIf="canOpenInBrowser"
>
<i [c8yIcon]="'external-link'"></i>
{{ 'Open' | translate }}
</button>
<div *ngIf="canOpenInBrowser && disableOpenInBrowser">
<small
class="text-muted"
translate
>
The application is overwritten by a custom application sharing the same path
</small>
</div>
<span *ngIf="isCustomMicroservice">
<button
class="btn btn-default btn-sm"
title="{{ 'Subscribe' | translate }}"
type="button"
(click)="subscribe()"
*ngIf="!isSubscribed"
>
<i [c8yIcon]="'check-circle-o'"></i>
{{ 'Subscribe' | translate }}
</button>
<button
class="btn btn-default btn-sm"
title="{{ 'Unsubscribe' | translate }}"
type="button"
(click)="unsubscribe()"
*ngIf="isSubscribed"
>
<i [c8yIcon]="'minus-circle'"></i>
{{ 'Unsubscribe' | translate }}
</button>
</span>
</div>
</div>
</div>
</div>
<div class="inner-scroll bg-level-0 flex-grow">
<div class="card-block large-padding">
<div
class="row p-16"
*ngIf="isPackage"
>
<c8y-properties-list
icon="info"
[title]="'Package details' | translate"
[data]="application.manifest"
[properties]="packageProperties"
[emptyLabel]="'---'"
></c8y-properties-list>
</div>
<div
class="row p-16"
*ngIf="sourcePackage"
>
<c8y-properties-list
icon="info"
[title]="'Source package information' | translate"
[data]="sourcePackage.manifest"
[properties]="packageProperties"
[emptyLabel]="'---'"
></c8y-properties-list>
</div>
<div class="row">
<div class="col-sm-5">
<c8y-form-group>
<label for="appId">ID</label>
<input
class="form-control"
id="appId"
name="id"
type="text"
autocomplete="off"
[readonly]="true"
formControlName="id"
/>
</c8y-form-group>
</div>
<div class="col-sm-7">
<c8y-form-group>
<label>{{ 'Name' | translate }}</label>
<input
class="form-control"
placeholder="{{ 'e.g. My application' | translate }}"
name="name"
type="text"
required
[readonly]="!isOwner"
formControlName="name"
/>
</c8y-form-group>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<c8y-form-group>
<label>{{ 'Application key' | translate }}</label>
<input
class="form-control"
placeholder="{{ 'e.g. my-application-key' | translate }}"
name="key"
type="text"
required
[readonly]="application.id || !isOwner"
formControlName="key"
/>
</c8y-form-group>
</div>
<div class="col-sm-7" data-cy="application-detail--type">
<c8y-form-group>
<label>{{ 'Type' | translate }}</label>
<div>
<div *ngIf="application.id">
<p class="form-control-static">
<i [c8yIcon]="iconMap[application.type]"></i>
<span>
{{ application.type | translate }}
</span>
</p>
</div>
</div>
</c8y-form-group>
</div>
</div>
<div [ngSwitch]="application.type">
<div *ngSwitchCase="'HOSTED'">
<c8y-form-group>
<label>{{ 'Path' | translate }}</label>
<div class="input-group">
<span class="input-group-addon">/apps/</span>
<input
class="form-control"
placeholder="{{ 'e.g. my-application`used in URL`' | translate }}"
name="contextPath"
type="text"
required
[readOnly]="application.id || !isOwner"
formControlName="contextPath"
/>
</div>
</c8y-form-group>
</div>
<div *ngSwitchCase="'MICROSERVICE'">
<c8y-form-group>
<label>{{ 'Path' | translate }}</label>
<div class="input-group">
<span class="input-group-addon">/service/</span>
<input
class="form-control"
placeholder="{{ 'e.g. my-microservice`used in URL`' | translate }}"
name="contextPath"
type="text"
required
[readOnly]="application.id || !isOwner"
formControlName="contextPath"
/>
</div>
</c8y-form-group>
<div class="row">
<div
class="col-sm-4 m-b-16 flex-auto"
*ngIf="application.manifest.version"
data-cy="application-detail--version"
>
<label>{{ 'Version' | translate }}</label>
<p class="form-control-static">
{{ application.manifest.version }}
</p>
</div>
<div
class="col-sm-4 m-b-16 flex-auto"
*ngIf="application.manifest.isolation"
data-cy="application-detail--isolation"
>
<label>{{ 'Isolation' | translate }}</label>
<p class="form-control-static">
<span *ngIf="singleTenant">
<i
class="c8y-icon-duocolor h4"
[c8yIcon]="'c8y-enterprise'"
></i>
{{ 'Single tenant' | translate }}
</span>
<span *ngIf="!singleTenant">
<i
class="c8y-icon-duocolor icon-32"
[c8yIcon]="'c8y-sub-tenants'"
></i>
{{ 'Multi tenant' | translate }}
</span>
</p>
</div>
<div
class="col-sm-4 m-b-16 flex-auto"
*ngIf="application.manifest.isolation"
data-cy="application-detail--billing-mode"
>
<label>{{ 'Billing mode' | translate }}</label>
<p class="form-control-static">
<span
[tooltip]="'Resources usage assigned to: Owner' | translate"
*ngIf="subscription"
>
{{ 'Subscription' | translate }}
</span>
<span
[tooltip]="'Resources usage assigned to: Subscriber | translate'"
*ngIf="!subscription && singleTenant"
>
{{ 'Resources' | translate }}
</span>
<span
[tooltip]="'Resources usage assigned to: Owner' | translate"
*ngIf="!subscription && !singleTenant"
>
{{ 'Resources' | translate }}
</span>
</p>
</div>
</div>
<div
class="legend form-block m-t-40"
*ngIf="application.manifest.provider"
>
{{ 'Provider' | translate }}
</div>
<div
class="list-inline"
*ngIf="application.manifest.provider"
data-cy="application-detail--provider"
>
<div *ngIf="application.manifest.provider.name">
<div class="col-sm-4 m-b-16">
<label>{{ 'Name' | translate }}</label>
<p class="form-control-static">
{{ application.manifest.provider.name }}
</p>
</div>
</div>
<div *ngIf="application.manifest.provider.domain">
<div class="col-sm-4 m-b-16">
<label>{{ 'Domain' | translate }}</label>
<p class="form-control-static">
{{ application.manifest.provider.domain }}
</p>
</div>
</div>
<div *ngIf="application.manifest.provider.support">
<div class="col-sm-4 m-b-16">
<label>{{ 'Support' | translate }}</label>
<p class="form-control-static">
{{ application.manifest.provider.support }}
</p>
</div>
</div>
</div>
</div>
<div *ngSwitchCase="'EXTERNAL'">
<c8y-form-group>
<label>{{ 'External URL' | translate }}</label>
<input
class="form-control"
placeholder="{{ 'e.g.' | translate }} http://www.example.com/"
name="externalUrl"
type="url"
required
[pattern]="'^(?!javascript:).+'"
[readOnly]="!isOwner"
formControlName="externalUrl"
/>
<c8y-messages>
<c8y-message
[name]="'pattern'"
[text]="'Valid URL required.' | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
<div *ngIf="isOwner && !isCustomMicroservice">
<label>{{ 'Select icon' | translate }}</label>
<c8y-icon-selector-wrapper
name="icon"
formControlName="icon"
></c8y-icon-selector-wrapper>
</div>
</div>
</div>
</div>
<ng-container *ngIf="isCustomMicroservice">
<div
class="d-contents"
*ngIf="!isLoading"
>
<c8y-upload-archive
[(application)]="application"
(refresh)="onNewArchive()"
></c8y-upload-archive>
</div>
</ng-container>
<div
class="card-footer separator"
*ngIf="application && !!isOwner && hasAdminPermissions"
>
<button
class="btn btn-default"
title="{{ 'Cancel' | translate }}"
type="button"
(click)="cancel()"
>
{{ 'Cancel' | translate }}
</button>
<button
class="btn btn-danger"
title="{{ 'Delete' | translate }}"
type="button"
(click)="delete()"
*ngIf="canDelete"
>
{{ 'Delete' | translate }}
</button>
<button
class="btn btn-primary btn-form"
title="{{ 'Save' | translate }}"
type="submit"
[disabled]="!application.type || formGroup.invalid || formGroup.pristine"
>
{{ 'Save' | translate }}
</button>
</div>
</div>
</form>
<div
class="content-fullpage d-flex d-col bg-level-1"
*ngIf="isActivityLogSupported"
>
<div class="card-header separator">
<div
class="card-title"
translate
>
Activity log
</div>
<div class="m-l-auto">
<button
class="btn btn-link btn-sm"
title="{{ 'Reload' | translate }}"
type="button"
(click)="load()"
>
<i
c8yIcon="refresh"
[ngClass]="{ 'icon-spin': isLoading }"
></i>
{{ 'Reload' | translate }}
</button>
</div>
</div>
<div
class="p-16 text-center"
*ngIf="isLoading"
>
<c8y-loading></c8y-loading>
</div>
<c8y-activity-log
class="d-contents"
*ngIf="!isLoading"
[hasAdminPermissions]="hasAdminPermissions"
[application]="application"
></c8y-activity-log>
</div>
</div>
</div>
</div>