context-dashboard/context-dashboard.component.ts
The context dashboard is a dashboard which resolves it data from the current context (device or group) it is displayed on. It usually uses the route.data for it, but you can pass a different managedObject to the [mo] input parameter to change that behavior.
OnInit
OnDestroy
CanDeactivateComponent
| host | { |
| selector | c8y-context-dashboard |
| templateUrl | ./context-dashboard.component.html |
Properties |
|
Methods |
|
Inputs |
HostBindings |
HostListeners |
Accessors |
constructor(route: ActivatedRoute, router: Router, contextDashboardService: ContextDashboardService, alert: AlertService, renderer: Renderer2, moduleConfig: ContextDashboardConfig, widgetService: WidgetService, bsModal: BsModalService, gainsightService: GainsightService, actionBarService: ActionBarService, translateService: TranslateService, modal: ModalService, editModeService: DashboardEditModeService)
|
||||||||||||||||||||||||||||||||||||||||||
|
Parameters :
|
| breadcrumbSettings |
Type : BreadcrumbItem
|
| canCopy |
Type : boolean
|
Default value : true
|
| canDelete |
Type : boolean
|
Default value : true
|
| childrenClasses |
Type : string
|
Default value : ''
|
| context |
Type : any
|
| defaultWidgets |
Type : Widget[]
|
Default value : []
|
| hideAvailability |
Type : boolean
|
Default value : false
|
|
Hides dashboard availability selection. |
| isLoading |
Type : boolean
|
Default value : true
|
| name |
Type : string
|
| setTitle |
Type : boolean
|
Default value : false
|
| showContextHelpButton |
Type : boolean
|
Default value : true
|
| translateWidgetTitle |
Type : boolean
|
|
Whether to translate widget titles. However, dashboard's own setting takes precedence. It does not override dashboard's setting |
| class |
Type : string
|
Default value : ''
|
| window:beforeunload |
Arguments : '$event'
|
window:beforeunload($event: BeforeUnloadEvent)
|
| addDashboardClassToBody |
addDashboardClassToBody()
|
|
This is a workaround to ensure that the dragged-element (which is attached to the body) has the right styling.
Returns :
void
|
| Async addWidget | ||||||||
addWidget(selected?: DynamicComponentDefinition)
|
||||||||
|
Adds a widget to the dashboard.
Parameters :
Returns :
any
|
| applyDeviceTarget | ||||||
applyDeviceTarget(widget)
|
||||||
|
Applies the current context to the widget
Parameters :
Returns :
void
|
| Async beforeUnloadHandler | ||||||
beforeUnloadHandler($event: BeforeUnloadEvent)
|
||||||
Decorators :
@HostListener('window:beforeunload', ['$event'])
|
||||||
|
Parameters :
Returns :
any
|
| Async cancelEditMode | ||||||
cancelEditMode(onDeactivate)
|
||||||
|
Parameters :
Returns :
Promise<void>
|
| Async copyDashboard |
copyDashboard()
|
|
Copies the dashboard and current context to a clipboard.
Returns :
any
|
| Async dashboardPreview | ||||||
dashboardPreview(layoutChanges: ContextDashboard)
|
||||||
|
Parameters :
Returns :
any
|
| Async deleteDashboard |
deleteDashboard()
|
|
Remove the complete dashboard and navigate away.
Returns :
any
|
| Async deleteWidget | ||||||||
deleteWidget(change: WidgetChange)
|
||||||||
|
Removes a widget and rearranges the remaining ones if necessary.
Parameters :
Returns :
any
|
| Async editWidget | ||||||||
editWidget(change: WidgetChange)
|
||||||||
|
Edits a widget on the dashboard.
Parameters :
Returns :
any
|
| ngOnDestroy |
ngOnDestroy()
|
|
Removes the route listener.
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Async onLoad | ||||||
onLoad(trackExperience?: boolean)
|
||||||
|
Parameters :
Returns :
any
|
| positionOrWidgetDimensionChange | ||||||||
positionOrWidgetDimensionChange(child: DashboardChildChange | DashboardChange)
|
||||||||
|
Method called on every widgets dimensions or position change but also for adding new widget (because adding widget causes layout changes). It recognizes what type of change has been done and updates current widgets state accordingly.
Parameters :
Returns :
void
|
| Async reloadDashboard | ||||||
reloadDashboard(dashboardMo: ContextDashboardManagedObject)
|
||||||
|
Parameters :
Returns :
any
|
| removeDashboardClassFromBody |
removeDashboardClassFromBody()
|
|
This is a workaround to ensure that the dragged-element (which is attached to the body) has the right styling.
Returns :
void
|
| Async restore |
restore()
|
|
Restores the dashboard widgets to the default widgets.
Returns :
any
|
| Async revertChange | ||||||
revertChange(revertType: RevertChangeType)
|
||||||
|
Parameters :
Returns :
Promise<void>
|
| Async saveWidgetsToDashboard |
saveWidgetsToDashboard()
|
|
Returns :
any
|
| updateDashboardChildren | ||||||||||||||||||||
updateDashboardChildren(child: DashboardChildChange | DashboardChange, changeName, descriptionProp, widgetsChanged: Widget[])
|
||||||||||||||||||||
|
Updates all dashboards children's. Useful for position changes on the dashboard.
Parameters :
Returns :
void
|
| Async updateWidget | ||||||
updateWidget(widget)
|
||||||
|
Updates a widget or adds a new one if it doesn't exist on the dashboard.
Parameters :
Returns :
any
|
| class |
Type : string
|
Default value : ''
|
Decorators :
@HostBinding('class')
|
| dashboard |
Type : ContextDashboard
|
| dashboardDetails |
Type : DashboardDetailComponent
|
Decorators :
@ViewChild(DashboardDetailComponent, {static: true})
|
| Readonly dashboardTypeLabel |
Default value : gettext('Dashboard for "{{ dashboardType }}"')
|
| Readonly dashboardTypePopover |
Default value : gettext(`
The layout and configuration of this dashboard is used by all other assets of model type
<strong>{{ dashboardType }}</strong>. Any changes made to this dashboard instance will be applied to all
other instances.`)
|
| Public editModeService |
Type : DashboardEditModeService
|
| isCopyDisabled |
Type : DashboardCopyPermission
|
| isReport |
Type : boolean
|
| mo |
Type : ContextDashboardManagedObject
|
| Public moduleConfig |
Type : ContextDashboardConfig
|
Decorators :
@Inject(CONTEXT_DASHBOARD_CONFIG)
|
| title |
Type : string
|
| widgets |
Type : Widget[]
|
Default value : []
|
| widgetsDashboard |
Type : WidgetsDashboardComponent
|
Decorators :
@ViewChild(WidgetsDashboardComponent, {static: true})
|
| disabled |
getdisabled()
|
| isDeviceTypeDashboard |
getisDeviceTypeDashboard()
|
<c8y-title *ngIf="title">
{{ title }}
</c8y-title>
<c8y-action-bar-item
[placement]="'right'"
[priority]="10000"
*ngIf="dashboard?.deviceType && dashboard.deviceTypeValue"
>
<button
class="btn-clean btn-link"
popoverTitle="{{ 'Dashboard template' | translate }}"
[attr.aria-label]="'Help' | translate"
[popover]="dashboardTypePopoverRef"
placement="bottom"
triggers="focus"
container="body"
type="button"
>
<span class="tag tag--info text-12">
<span class="dashboard-template-marker"></span>
{{ dashboardTypeLabel | translate: { dashboardType: dashboard.deviceTypeValue } }}
</span>
</button>
<ng-template #dashboardTypePopoverRef>
<div
[innerHTML]="dashboardTypePopover | translate: { dashboardType: dashboard.deviceTypeValue }"
></div>
</ng-template>
</c8y-action-bar-item>
<c8y-action-bar-item
[placement]="'right'"
[priority]="-1"
*ngIf="defaultWidgets.length > 0"
>
<button
class="btn btn-link"
title="{{ 'Reset widgets' | translate }}"
type="button"
px-event="Reset dashboard"
(click)="restore()"
[disabled]="disabled || (widgetsDashboard?.editMode$ | async)"
data-cy="context-dashboard--button-reset-dashboard"
>
<i
class="m-r-4"
c8yIcon="reset"
></i>
<span class="visible-xs-inline hidden-sm visible-md-inline visible-lg-inline">
{{ 'Reset widgets' | translate }}
</span>
</button>
</c8y-action-bar-item>
<c8y-help
src="/docs/cockpit/working-with-dashboards/#working-with-dashboards"
*ngIf="showContextHelpButton"
></c8y-help>
<c8y-dashboard-detail
class="d-contents"
[isReport]="isReport"
[dashboard]="dashboard"
[mo]="mo"
[context]="context"
[deviceType]="context?.type"
[hideAvailability]="hideAvailability"
(dashboardSaved)="reloadDashboard($event)"
(previewChanged)="dashboardPreview($event)"
></c8y-dashboard-detail>
<c8y-widgets-dashboard
[context]="context"
[contextDashboard]="dashboard"
[widgets]="widgets"
[isCopyDisabled]="isCopyDisabled"
[settings]="{
isLoading: isLoading,
isDisabled: disabled,
canDelete: canDelete && !!dashboard,
translateWidgetTitle: dashboard?.translateWidgetTitle ?? translateWidgetTitle,
allowFullscreen: moduleConfig.allowFullscreen,
title: setTitle ? dashboard?.name || title : undefined,
widgetMargin: dashboard?.widgetMargin,
canCopy: canCopy && !!dashboard,
defaultWidth: dashboard?.columns >= 24 ? 8 : 4,
columns: dashboard?.columns || 12
}"
[breadcrumb]="breadcrumbSettings"
[editModeButtons]="{
undoButtonDisabled: editModeService.undoButtonDisabled,
changeToUndoName: editModeService.changeToUndoName,
redoButtonDisabled: !editModeService.redoStackLastItem,
changeToRedoName: editModeService.redoStackLastItem?.name
}"
(onChangeDashboard)="positionOrWidgetDimensionChange($event)"
(onAddWidget)="addWidget()"
(onEditWidget)="editWidget($event)"
(onDeleteWidget)="deleteWidget($event)"
(onSaveDashboard)="saveWidgetsToDashboard()"
(onCancelDashboard)="cancelEditMode()"
(revertChange)="revertChange($event)"
(onChangeStart)="addDashboardClassToBody()"
(onChangeEnd)="removeDashboardClassFromBody()"
(onEditDashboard)="dashboardDetails.show(true)"
(onCopyDashboard)="copyDashboard()"
(onDeleteDashboard)="deleteDashboard()"
></c8y-widgets-dashboard>