Methods
|
handleContextChanged
|
handleContextChanged(value: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| value |
string
|
No
|
|
|
aclHintCheckboxControl
|
Type : unknown
|
Default value : new UntypedFormControl(false)
|
|
|
|
selectedTab
|
Type : unknown
|
Default value : signal(this.tabs[0])
|
|
|
|
tabs
|
Type : []
|
Default value : ['Rules', 'Reports', 'Settings', 'Environment', 'Help']
|
|
|
Accessors
|
aclDecisionLog
|
getaclDecisionLog()
|
|
|
|
aclService
|
getaclService()
|
|
|
import { AclDecision, AclRule } from '@allianz/taly-acl';
import { AclService } from '@allianz/taly-acl/angular';
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
import { NxHeadlineComponent } from '@allianz/ng-aquila/headline';
import { AclInspectorService } from '@allianz/taly-acl/angular';
import { AclEnvironmentModule } from '../../lib/inspector/acl-environment/acl-environment.module';
import { ReportViewerModule } from '../../lib/inspector/report-viewer/report-viewer.module';
import { PolicyEditorModule } from '../../lib/policy-editor/policy-editor.module';
import { ACL_PERSIST_POLICY_URL } from '../../tokens/acl-persist-policy-url.token';
@Component({
selector: 'acl-inspector-view',
templateUrl: './acl-inspector-view.component.html',
styleUrls: ['./acl-inspector-view.component.scss'],
imports: [
CommonModule,
ReactiveFormsModule,
NxHeadlineComponent,
PolicyEditorModule,
ReportViewerModule,
AclEnvironmentModule
],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AclInspectorViewComponent {
aclHintCheckboxControl = new UntypedFormControl(false);
tabs = ['Rules', 'Reports', 'Settings', 'Environment', 'Help'];
selectedTab = signal(this.tabs[0]);
protected persistPolicyUrl = inject(ACL_PERSIST_POLICY_URL, { optional: true }) ?? '';
private inspectorService = inject(AclInspectorService);
private destroyRef = inject(DestroyRef);
constructor() {
this.aclHintCheckboxControl.valueChanges
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((showHints) => {
this.inspectorService.showAclHints$.next(showHints);
});
this.inspectorService.showAclHints$
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((showHints) => {
if (this.aclHintCheckboxControl.value !== showHints) {
this.aclHintCheckboxControl.setValue(showHints, { emitEvent: false });
}
});
}
handleContextChanged(value: string) {
this.aclService.setEnvironmentValue('context', value);
}
updateRules(rules: AclRule[]) {
this.aclService._setGlobalRules(rules);
}
get aclDecisionLog(): AclDecision[] {
return this.inspectorService.aclDecisionLog;
}
get aclService(): AclService {
return this.inspectorService.aclService;
}
}
<h4 class="acl-inspector-view_headline" nxHeadline="subsection-xsmall">ACL Inspector</h4>
<div class="tab-group-nav">
@for (tab of tabs; track tab) {
<button
class="tab-btn"
[ngClass]="{ 'tab-btn--active': selectedTab() === tab }"
(click)="selectedTab.set(tab)"
>
{{ tab }}
</button>
}
</div>
<div class="tab-group">
@if (selectedTab() === 'Rules') {
<div class="tab">
<acl-policy-editor
class="editor"
(changed)="updateRules($event)"
[policy]="(aclService.currentPolicy$ | async)!"
[persistPolicyUrl]="persistPolicyUrl"
>
</acl-policy-editor>
</div>
} @if (selectedTab() === 'Reports') {
<div class="tab">
<report-viewer
(ruleAdded)="aclService._addGlobalRule($event)"
[log]="aclDecisionLog"
></report-viewer>
</div>
} @if (selectedTab() === 'Settings') {
<div class="tab tab-content tab-content-padding">
<label>
<input type="checkbox" [formControl]="aclHintCheckboxControl" />
Show Acl Hints
</label>
</div>
} @if (selectedTab() === 'Environment') {
<div class="tab tab-content tab-content-padding">
<acl-environment context="creation" (contextChanged)="handleContextChanged($event)">
</acl-environment>
</div>
} @if (selectedTab() === 'Help') {
<div class="tab tab-content tab-content-padding">
<p>
Rules are evaluated with the <strong>"first-applicable"</strong> strategy.<br />
This means a given resource is checked from top to bottom against all policy rules.<br />
The first one matching determines the state of the resource. If no rule is matching, a
resource by default is visible and neither disabled nor readonly.<br />
<br />
- Try to double click to edit a rule part
<br />
- Rearrange rules with the handle on the left to test the order against the algorithm
</p>
</div>
}
</div>
@use '../../lib/inspector.shared' as *;
@use '../../lib/inspector.colors' as *;
:host {
display: flex !important;
flex-direction: column;
height: 100%;
color: $debug-color-text;
font-size: 13px;
line-height: 16px;
}
.acl-inspector-view_headline {
border-bottom: 1px solid var(--ui-03, #ececec);
padding-bottom: 8px;
margin-bottom: 0 !important;
}
.tab-group-nav {
background-color: $debug-color-dark;
padding-top: 8px;
}
.tab-btn {
@include base-button-styles;
display: inline-block;
padding: 8px 16px;
font-size: 16px;
line-height: 18px;
font-weight: 700;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
margin-right: 1px;
color: $debug-color-text;
&:hover,
&--active {
background-color: $debug-color-light;
}
}
.tab-group {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
background-color: $debug-color-light;
}
.tab-content {
font-size: 14px;
}
.tab-content-padding {
padding: 16px;
}
.editor {
display: block;
}
Legend
Html element with directive