ecosystem/application-properties/application-properties.component.ts
| selector | c8y-application-properties |
| templateUrl | ./application-properties.component.html |
Properties |
Methods |
|
constructor(activatedRoute: ActivatedRoute, ecosystemService: EcosystemService, router: Router, formBuilder: FormBuilder, applicationService: ApplicationService, alertService: AlertService)
|
|||||||||||||||||||||
|
Parameters :
|
| cancel |
cancel()
|
|
Returns :
void
|
| Async delete |
delete()
|
|
Returns :
any
|
| getHref |
getHref()
|
|
Returns :
string
|
| Async loadApplication |
loadApplication()
|
|
Returns :
any
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onApplication | ||||||
onApplication(app: IApplication)
|
||||||
|
Parameters :
Returns :
void
|
| Async save | ||||||
save(app: IApplication)
|
||||||
|
Parameters :
Returns :
any
|
| Async subscribe |
subscribe()
|
|
Returns :
any
|
| Async unsubscribe |
unsubscribe()
|
|
Returns :
any
|
| application |
application:
|
Type : IApplication
|
| canDelete |
canDelete:
|
Type : boolean
|
| canOpenInBrowser |
canOpenInBrowser:
|
Type : boolean
|
| formGroup |
formGroup:
|
Type : FormGroup
|
| iconMap |
iconMap:
|
Type : object
|
Default value : {
HOSTED: 'cloud',
EXTERNAL: 'external-link-square',
MICROSERVICE: 'microchip'
}
|
| isOwner |
isOwner:
|
Type : boolean
|
| isSubscribed |
isSubscribed:
|
Type : boolean
|
| singleTenant |
singleTenant:
|
Type : boolean
|
Default value : false
|
| subscription |
subscription:
|
Type : boolean
|
Default value : false
|
<c8y-action-bar-item [placement]="'right'" [priority]="1000" *ngIf="canDelete">
<button class="btn btn-link" title="{{ 'Delete' | translate }}" (click)="delete()">
<i [c8yIcon]="'trash'"></i>
{{ 'Delete' | translate }}
</button>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'" [priority]="2000" *ngIf="canOpenInBrowser">
<a
class="btn btn-link"
title="{{ 'Open' | translate }}"
[href]="getHref()"
(click)="$event.stopPropagation()"
>
<i [c8yIcon]="'external-link'"></i>
{{ 'Open' | translate }}
</a>
</c8y-action-bar-item>
<c8y-action-bar-item
[placement]="'right'"
[priority]="3000"
*ngIf="isOwner && application.type === 'MICROSERVICE'"
>
<button
*ngIf="!isSubscribed"
class="btn btn-link"
title="{{ 'Subscribe' | translate }}"
(click)="subscribe()"
>
<i [c8yIcon]="'check-circle-o'"></i>
{{ 'Subscribe' | translate }}
</button>
</c8y-action-bar-item>
<c8y-action-bar-item
[placement]="'right'"
[priority]="3000"
*ngIf="isOwner && application.type === 'MICROSERVICE'"
>
<button
*ngIf="isSubscribed"
class="btn btn-link"
title="{{ 'Unsubscribe' | translate }}"
(click)="unsubscribe()"
>
<i [c8yIcon]="'minus-circle'"></i>
{{ 'Unsubscribe' | translate }}
</button>
</c8y-action-bar-item>
<form [formGroup]="formGroup" (ngSubmit)="formGroup.valid && save(formGroup.value)" novalidate>
<div class="row">
<div class="col-md-8 col-xs-12">
<div class="card card--fullpage">
<div class="card-header separator">
<h4 class="card-title">
{{ 'Properties' | translate }}
</h4>
</div>
<div class="inner-scroll" *ngIf="application">
<div class="card-block">
<div class="row">
<div class="col-sm-5">
<c8y-form-group>
<label>ID</label>
<input
name="id"
class="disabled form-control"
type="text"
autocomplete="off"
formControlName="id"
/>
</c8y-form-group>
</div>
<div class="col-sm-7">
<c8y-form-group>
<label>{{ 'Name' | translate }}</label>
<input
class="form-control"
type="text"
name="name"
placeholder="{{ 'e.g. My application' | translate }}"
[readonly]="!isOwner"
required
formControlName="name"
/>
<c8y-messages>
<c8y-message *ngIf="formGroup?.controls?.name?.errors?.required" translate>
This field is required.
</c8y-message>
</c8y-messages>
</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"
type="text"
name="key"
[readonly]="application.id || !isOwner"
placeholder="{{ 'e.g. my-application-key' | translate }}"
required
formControlName="key"
/>
<c8y-messages>
<c8y-message *ngIf="formGroup?.controls?.key?.errors?.required" translate>
This field is required.
</c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
<div class="col-sm-7">
<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"
type="text"
name="contextPath"
placeholder="{{ 'e.g. my-application' | translate }}"
required
[readOnly]="application.id || !isOwner"
formControlName="contextPath"
/>
</div>
<c8y-messages>
<c8y-message
*ngIf="formGroup?.controls?.contextPath?.errors?.required"
translate
>
This field is required.
</c8y-message>
</c8y-messages>
</c8y-form-group>
<c8y-form-group>
<label>
{{ 'Description' | translate }}
</label>
<input
class="form-control"
type="text"
name="description"
placeholder="{{ 'e.g. Application to manage devices' | translate }}"
[readOnly]="!isOwner"
formControlName="description"
/>
<c8y-messages>
<c8y-message
*ngIf="formGroup?.controls?.description?.errors?.required"
translate
>
This field is required.
</c8y-message>
</c8y-messages>
</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"
type="text"
name="contextPath"
placeholder="{{ 'e.g. my-microservice' | translate }}"
required
[readOnly]="application.id || !isOwner"
formControlName="contextPath"
/>
</div>
<c8y-messages>
<c8y-message
*ngIf="formGroup?.controls?.contextPath?.errors?.required"
translate
>
This field is required.
</c8y-message>
</c8y-messages>
</c8y-form-group>
<div class="row">
<div *ngIf="application.manifest.version" class="col-sm-4 m-b-16 flex-auto">
<label>{{ 'Version' | translate }}</label>
<p class="form-control-static">
{{ application.manifest.version }}
</p>
</div>
<div *ngIf="application.manifest.isolation" class="col-sm-4 m-b-16 flex-auto">
<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 h4" [c8yIcon]="'c8y-sub-tenants'"></i>
{{ 'Multi tenant' | translate }}
</span>
</p>
</div>
<div *ngIf="application.manifest.isolation" class="col-sm-4 m-b-16 flex-auto">
<label>{{ 'Billing mode' | translate }}</label>
<p class="form-control-static">
<span
*ngIf="subscription"
[tooltip]="'Resources usage assigned to: Owner' | translate"
>
{{ 'Subscription' | translate }}
</span>
<span
*ngIf="!subscription && singleTenant"
[tooltip]="'Resources usage assigned to: Subscriber | translate'"
>
{{ 'Resources' | translate }}
</span>
<span
*ngIf="!subscription && !singleTenant"
[tooltip]="'Resources usage assigned to: Owner' | translate"
>
{{ '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">
<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="'REPOSITORY'">
<c8y-form-group>
<label>{{ 'Path' | translate }}</label>
<div class="input-group">
<span class="input-group-addon"> /apps/ </span>
<input
class="form-control"
type="text"
name="contextPath"
placeholder="{{ 'e.g. my-application' | translate }}"
required
[readOnly]="application.id || !isOwner"
formControlName="contextPath"
/>
</div>
<c8y-messages>
<c8y-message
*ngIf="formGroup?.controls?.contextPath?.errors?.required"
translate
>
This field is required.
</c8y-message>
</c8y-messages>
</c8y-form-group>
<c8y-form-group>
<label>{{ 'Server URL' | translate }}</label>
<input
class="form-control"
type="url"
name="resourcesUrl"
placeholder="{{ 'e.g.' | translate }} /"
required
formControlName="resourcesUrl"
/>
<c8y-messages>
<c8y-message
*ngIf="formGroup?.controls?.resourcesUrl?.errors?.required"
translate
>
This field is required.
</c8y-message>
</c8y-messages>
</c8y-form-group>
<div class="form-group">
<label> {{ 'Username' | translate }}</label>
<input
type="text"
name="username"
class="form-control"
formControlName="username"
/>
</div>
<div class="form-group">
<label>{{ 'Password' | translate }}</label>
<input
type="text"
name="password"
class="form-control"
formControlName="password"
/>
</div>
</div>
<div *ngSwitchCase="'EXTERNAL'">
<c8y-form-group>
<label>{{ 'External URL' | translate }}</label>
<input
class="form-control"
name="externalUrl"
type="url"
[readOnly]="!isOwner"
[pattern]="'^(?!javascript:).+'"
placeholder="{{ 'e.g.' | translate }} http://www.example.com/"
required
formControlName="externalUrl"
/>
<c8y-messages>
<c8y-message
*ngIf="formGroup?.controls?.externalUrl?.errors?.required"
translate
>
This field is required.
</c8y-message>
<c8y-message
*ngIf="formGroup?.controls?.externalUrl?.errors?.pattern"
translate
>
Valid URL required.
</c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
</div>
</div>
</div>
<div class="card-footer separator" *ngIf="application && !!isOwner">
<button class="btn btn-default" title="{{ 'Cancel' | translate }}" (click)="cancel()">
{{ 'Cancel' | 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>
</div>
</div>
</form>