File
Methods
|
addRule
|
addRule(rule: literal type)
|
|
|
Parameters :
| Name |
Type |
Optional |
| rule |
literal type
|
No
|
|
import { AclDecision, AclRule, AclRuleState } from '@allianz/taly-acl';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { copyToClipboard } from '../../util/copy-clipboard';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'report-viewer',
templateUrl: './report-viewer.component.html',
styleUrls: ['./report-viewer.component.scss'],
standalone: false
})
export class ReportViewerComponent {
@Input() log: AclDecision[] = [];
@Output() ruleAdded = new EventEmitter<AclRule>();
clear() {
this.log.length = 0;
}
copyAclYml() {
const entries = this.log.map((decision) => {
const guessedLabel = decision.path.split('/').pop();
return `-
aclKey: ${decision.path}
aclType: display
label: ${guessedLabel}
`;
});
copyToClipboard('# acl.yml\n' + entries.join(''));
}
addRule(rule: { path: string; state: AclRuleState }) {
this.ruleAdded.emit({
active: true,
path: rule.path,
condition: '',
state: rule.state,
defaultRule: false
});
}
}
<div class="inspector-actions">
<button class="btn-text" (click)="clear()">clear</button>
<button class="btn-text" (click)="copyAclYml()">copy acl.yml to clipboard</button>
</div>
<table class="table padding-left-16">
<tr>
<th>Entry</th>
<th class="table-column--maxwidth">Resource</th>
<th>State</th>
<th>Decision</th>
<th>Time</th>
<th>Actions</th>
</tr>
<tr *ngFor="let item of log; let index = index">
<td>{{ index }}</td>
<td>{{ item.path }}</td>
<td>{{ item.state }}</td>
<td>{{ item.decision }}</td>
<td>{{ item.timestamp | date : 'H:mm:ss' }}</td>
<td class="inspector-actions">
<button class="btn-text btn-text--secondary" (click)="addRule(item)">inject</button>
</td>
</tr>
</table>
@use '../../inspector.shared' as *;
@use '../../inspector.colors' as *;
:host {
display: block;
}
.table {
display: block;
overflow-y: scroll;
border-collapse: collapse;
width: 100%;
max-height: 500px;
}
.table-column--maxwidth {
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
background-color: $debug-color-light;
}
thead,
tr {
border-bottom: 1px solid $debug-color-dark;
}
td.inspector-actions {
padding: 8px;
}
.btn-text {
font-weight: 500 !important;
border: none;
color: #fff;
}
Legend
Html element with directive