Web SDK documentation
  1. Components
  2. ConfigurationControlsComponent

File

global-context/features/configuration/configuration-controls/configuration-controls.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector c8y-configuration-controls
standalone true
imports TooltipModule CollapseModule TabsOutletComponent ReactiveFormsModule FormsModule PopoverModule HistoryModeConfigurationControlsComponent LiveModeConfigurationControlsComponent C8yTranslatePipe IconDirective
template 
<div class="p-relative fit-h">
  <div [attr.class]="containerClass()">
    <c8y-tabs-outlet
      [orientation]="controlsDisplayMode()"
      [outletName]="resolvedOutletName()"
      [attr.outletname]="resolvedOutletName()"
      [openFirstTab]="false"
      [tabs]="inlineTabs()"
    ></c8y-tabs-outlet>

    @if (selectedMode() === REFRESH_OPTION.LIVE) {
      <div class="p-l-24 p-r-24 fit-w min-width-0">
        <c8y-live-mode-configuration-controls
          [settings]="settings()"
          [context]="liveContext()"
          (contextChange)="handleLiveChanges($event)"
        ></c8y-live-mode-configuration-controls>
      </div>
    }

    @if (selectedMode() === REFRESH_OPTION.HISTORY) {
      <div class="p-l-24 p-r-24 fit-w min-width-0">
        <c8y-history-mode-configuration-controls
          [settings]="settings()"
          [context]="historyContext()"
          (contextChange)="handleHistoryChanges($event)"
          (validationStatus)="handleValidationStatus($event)"
        ></c8y-history-mode-configuration-controls>
      </div>
    }
  </div>

  <ng-template #LiveTab>
    <i [c8yIcon]="'process'"></i>
    <div>
      <p class="text-bold">{{ MODE_LABELS.LIVE | translate }}</p>
      <p class="tab-description text-12 l-h-tight">
        {{ MODE_DESCRIPTIONS.LIVE | translate }}
      </p>
    </div>
  </ng-template>
  <ng-template #HistoryTab>
    <i [c8yIcon]="'schedule1'"></i>
    <div>
      <p class="text-bold">{{ MODE_LABELS.HISTORY | translate }}</p>
      <p class="tab-description text-12  l-h-tight">
        {{ MODE_DESCRIPTIONS.HISTORY | translate }}
      </p>
    </div>
  </ng-template>
</div>

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor()

Inputs

activeMode
Type : RefreshOption
Default value : REFRESH_OPTION.LIVE
controlsDisplayMode
Type : "horizontal" | "vertical"
Default value : 'vertical'
historyContext
Type : GlobalContextState | null
Default value : null
liveContext
Type : GlobalContextState | null
Default value : null
settings
Type : Partial<GlobalContextSettings>
Default value : { showAutoRefresh: true, showTimeContext: true, showAggregation: true }
supportedModes
Type : RefreshOption[]
Default value : [REFRESH_OPTION.LIVE, REFRESH_OPTION.HISTORY]
tabsOutletName
Type : string | null
Default value : null

Outputs

contextChange
Type : Partial<GlobalContextState>
refreshOptionChange
Type : RefreshOption
validationStatus
Type : boolean

Methods

handleHistoryChanges
handleHistoryChanges(changes: Partial)
Parameters :
Name Type Optional
changes Partial<GlobalContextState> No
Returns : void
handleLiveChanges
handleLiveChanges(changes: Partial)
Parameters :
Name Type Optional
changes Partial<GlobalContextState> No
Returns : void
handleTabSelect
handleTabSelect(mode: RefreshOption)
Parameters :
Name Type Optional
mode RefreshOption No
Returns : void
handleValidationStatus
handleValidationStatus(isValid: boolean)
Parameters :
Name Type Optional
isValid boolean No
Returns : void

Properties

Readonly containerClass
Type : unknown
Default value : computed(() => this.controlsDisplayMode() === 'horizontal' ? 'horizontal d-col' : 'd-flex' )
Readonly historyTabTemplate
Type : unknown
Default value : viewChild<TemplateRef<any>>('HistoryTab')
Readonly inlineTabs
Type : unknown
Default value : computed(() => { const liveTemp = this.liveTabTemplate(); const historyTemp = this.historyTabTemplate(); if (!liveTemp || !historyTemp) { return []; } const modes = this.supportedModes(); const allTabs: InlineTab[] = [ { title: this.MODE_LABELS.LIVE, template: liveTemp, showAlways: true, tabsOutlet: this.resolvedOutletName(), onSelect: this.liveTabSelect, isActive: this.selectedMode() === REFRESH_OPTION.LIVE }, { title: this.MODE_LABELS.HISTORY, template: historyTemp, showAlways: true, tabsOutlet: this.resolvedOutletName(), onSelect: this.historyTabSelect, isActive: this.selectedMode() === REFRESH_OPTION.HISTORY } ]; return allTabs.filter((tab, index) => { const mode = index === 0 ? REFRESH_OPTION.LIVE : REFRESH_OPTION.HISTORY; return modes.includes(mode); }); })
Readonly liveTabTemplate
Type : unknown
Default value : viewChild<TemplateRef<any>>('LiveTab')
Readonly MODE_DESCRIPTIONS
Type : unknown
Default value : { LIVE: gettext('Dynamic time window that moves with current time to show recent data.'), HISTORY: gettext('Fixed time period for analyzing historical data.') } as const
Readonly MODE_LABELS
Type : unknown
Default value : { LIVE: gettext('Live'), HISTORY: gettext('History') } as const
Readonly REFRESH_OPTION
Type : unknown
Default value : REFRESH_OPTION
Readonly resolvedOutletName
Type : unknown
Default value : computed( () => this.tabsOutletName() ?? 'verticalTabOutletForConfigurationModes' )
Readonly selectedMode
Type : unknown
Default value : computed(() => this.activeMode())

results matching ""

    No results matching ""