cockpit-config/cockpit-configuration.component.ts
OnInit
| selector | c8y-cockpit-configuration |
| templateUrl | ./cockpit-configuration.component.html |
Properties |
Methods |
|
constructor(cockpitConfigService: CockpitConfigService, alertService: AlertService, appState: AppStateService)
|
||||||||||||
|
Parameters :
|
| Async save |
save()
|
|
Stores the configuration and shows a success message.
Returns :
any
|
| updateFeatures |
updateFeatures()
|
|
Updates the features to directly reflect the results of the change.
Returns :
void
|
| Async updateRootNodes |
updateRootNodes()
|
|
Updates the root nodes to directly reflect the results of the change.
Returns :
any
|
| config |
Type : CockpitConfig
|
Default value : DEFAULT_CONFIG
|
|
The currently used configuration. |
| rootNodeDisabled |
Default value : false
|
<c8y-title>{{ 'Application configuration' | translate }}</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item
[icon]="'c8y-tools'"
[label]="'Configuration' | translate"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
[icon]="'c8y-tools'"
[label]="'Application configuration' | translate"
></c8y-breadcrumb-item>
</c8y-breadcrumb>
<div class="row">
<div class="col-lg-12 col-lg-max">
<form #configForm="ngForm">
<div class="card card--fullpage">
<div class="card-header separator">
<div class="card-title">
{{ config.appTitle || ('Cockpit' | translate) }} {{ 'configuration' | translate }}
</div>
</div>
<div class="inner-scroll">
<div class="card-block p-t-0 p-b-0">
<fieldset class="row separator-bottom p-t-24 p-b-24">
<div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
<div
class="h4 text-medium d-inline-block m-r-4"
translate
>
Title, icon, and navigator collapse
</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-8 p-l-16">
<div class="d-flex a-i-start gap-16">
<div class="form-group d-inline-block">
<label>{{ 'Icon' | translate }}</label>
<c8y-icon-selector-wrapper
[selectedIcon]="config?.icon?.class || 'c8y-cockpit'"
[iconSize]="24"
(onSelect)="iconSelectionChange($event)"
></c8y-icon-selector-wrapper>
</div>
<div class="form-group flex-grow">
<label
for="confAppTitle"
translate
>
Change application title
</label>
<input
class="form-control"
id="confAppTitle"
placeholder="{{ 'e.g. Cockpit' | translate }} "
type="text"
maxlength="254"
[(ngModel)]="config.appTitle"
[ngModelOptions]="{ standalone: true }"
/>
</div>
</div>
<c8y-misc-config [config]="config"></c8y-misc-config>
</div>
</fieldset>
<fieldset class="row separator-bottom p-t-24 p-b-24">
<div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
<div class="d-inline-flex m-b-16">
<div
class="h4 text-medium m-r-4"
translate
>
Features
</div>
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{
'Define which are the enabled features in the current application.'
| translate
}}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-8">
<c8y-feature-config
[config]="config"
(onUpdate)="updateFeatures()"
></c8y-feature-config>
</div>
</fieldset>
<fieldset class="row separator-bottom p-t-24 p-b-24">
<div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
<div class="d-inline-flex m-b-16">
<div
class="h4 text-medium m-r-8"
translate
>
Top level nodes
</div>
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{
'Select which nodes to display in the top level of the navigator menu. By default, only Groups is shown.'
| translate
}}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</div>
</div>
<div class="col-xs-12 col-sm-10 col-md-10">
<div class="row">
<c8y-root-node-config
[config]="config"
(onUpdate)="updateRootNodes()"
[disabled]="rootNodeDisabled"
></c8y-root-node-config>
</div>
</div>
</fieldset>
<fieldset class="row p-t-24 p-b-24">
<div class="col-xs-12 col-sm-3 col-md-2 text-left-xs text-right-sm">
<div class="d-inline-flex m-b-16">
<div
class="h4 text-medium m-r-8"
translate
>
Home dashboard
</div>
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{
'The homepage of this application. By default, it is a customizable dashboard displaying the most important alarms and shortcuts to frequently used features.'
| translate
}}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-8">
<c8y-home-dashboard-config [config]="config"></c8y-home-dashboard-config>
</div>
</fieldset>
</div>
</div>
<div class="card-footer separator">
<button
class="btn btn-primary"
title="{{ 'Save' | translate }}"
type="submit"
[disabled]="!configForm.form.valid"
(click)="save()"
[actionName]="'cockpitConfigurationSaved'"
[actionData]="{ config: config }"
c8yProductExperience
>
{{ 'Save' | translate }}
</button>
</div>
</div>
</form>
</div>
</div>