src/app/modules/shared/components/telemetry-error-modal/telemetry-error-modal.component.ts
This is to show the telemetry events generated Trigger the below command from broser console to enable/show the telemetry button
document.dispatchEvent(new CustomEvent('TelemetryEvent:show', {detail: {show: true}}));
OnInit
| selector | app-telemetry-error-modal |
| styleUrls | ./telemetry-error-modal.component.scss |
| templateUrl | ./telemetry-error-modal.component.html |
Properties |
Methods |
constructor(telemetryService: TelemetryService)
|
||||||
|
Parameters :
|
| closeModal |
closeModal()
|
|
This is to close the modal window
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| openModal |
openModal()
|
|
This is to close the modal window
Returns :
void
|
| showTelemetryEventsModal |
Default value : false
|
| telemetryEventsArr |
Type : []
|
Default value : []
|
import { Component, OnInit } from '@angular/core';
import { TelemetryService } from '@sunbird/telemetry';
/**
* This is to show the telemetry events generated
* Trigger the below command from broser console to enable/show the telemetry button
*
* document.dispatchEvent(new CustomEvent('TelemetryEvent:show', {detail: {show: true}}));
*/
@Component({
selector: 'app-telemetry-error-modal',
templateUrl: './telemetry-error-modal.component.html',
styleUrls: ['./telemetry-error-modal.component.scss']
})
export class TelemetryErrorModalComponent implements OnInit {
constructor( private telemetryService: TelemetryService) { }
// Array of telemetry errors events
telemetryEventsArr = [];
columns = [
{ name: 'eid', isSortable: true, prop: 'eid' },
{ name: 'ets', isSortable: true, prop: 'ets' },
{ name: 'edata.traceid', isSortable: false, prop: 'edata.traceid', placeholder: 'Filter error code' },
{ name: 'edata.err', isSortable: false, prop: 'edata.err', placeholder: 'Filter error code' },
{ name: 'edata.errType', isSortable: false, prop: 'edata.errType', placeholder: 'Filter by type' },
{ name: 'edata.stacktrace', isSortable: false, prop: 'edata.stacktrace', placeholder: 'Filter by string' }
];
// To show/hide the telemetry events modal
showTelemetryEventsModal = false;
ngOnInit() {
this.telemetryEventsArr = this.telemetryService.telemetryEvents;
}
/**
* This is to close the modal window
*/
openModal() {
this.showTelemetryEventsModal = true;
}
/**
* This is to close the modal window
*/
closeModal() {
// this.close.emit();
this.showTelemetryEventsModal = false;
}
}
<!-- <div class="telemetry-cont" telemetryEventsButton>
<button id="telemetry-btn" class="sb-btn sb-btn-normal sb-btn-outline-primary mr-8 ng-star-inserted" type="button" (click)="openModal()">
<i _ngcontent-mrt-c56="" class="blue share alternate icon"></i> Errors
</button>
</div> -->
<div class="telemetry-cont" telemetryEventsButton>
<div id="telemetry-btn" class="telemetry-float-icon float-icon" (click)="openModal()">
<img class="chat-icon" src="../../../../../assets/images/telemetry.svg" alt="telemetry events">
<span class="telemetry-btn-label">Telemetry!</span>
</div>
</div>
<app-modal-wrapper *ngIf="showTelemetryEventsModal" [config]="{disableClose: true, size: 'large'}" (dismiss)="closeModal()">
<ng-template sbModalContent>
<div class="sb-modal sb-modal-addsummary">
<div class="transition ui dimmer page modals active visible">
<div class="ui modal transition active visible large">
<div mat-dialog-title class="mb-0">
<button aria-label="close dialog" mat-dialog-close class="mat-close-btn">
<span>×</span>
</button>
</div>
<mat-dialog-content class="mat-dialog-content">
<div class="sb-modal-header">
{{input?.title}}
</div>
<div class="sb-modal-content o-x-hide">
<sb-datatable [name]="'Telemetry events'" [message]="" [data]="telemetryEventsArr" [columns]="columns"
[downloadCSV]="true" (downloadLink)="onDownloadLinkFail($event)"></sb-datatable>
</div>
</mat-dialog-content>
</div>
</div>
</div>
</ng-template>
</app-modal-wrapper>
./telemetry-error-modal.component.scss
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.telemetry-cont {
display: block;
position: fixed;
right: 0;
bottom: 16%;
z-index: 999;
}
.telemetry-float-icon {
background: var(--primary-100);
letter-spacing: calculateRem(3px);
padding: calculateRem(4px);
width: calculateRem(200px);
position: fixed;
right: calculateRem(-128px);
z-index: 1000;
transition: all 0.25s ease;
border-radius: calculateRem(24px) 0px 0px calculateRem(24px);
box-shadow: var(--sbt-box-shadow-6px);
cursor: pointer;
border: var(--primary-color) solid calculateRem(4px);
border-right-width: 0px;
cursor:pointer;
}
.telemetry-btn-label {
color: var(--sb-linkmenu-text);
font-weight: bold;
}
.telemetry-btn-label {
color: var(--sb-linkmenu-text);
font-weight: bold;
}
.telemetry-float-icon:hover {
right: 0;
}
.telemetry-float-icon a {
color: var(--white) !important;
text-decoration: none;
text-align: center;
}
.float-icon {
bottom:16%;
}
.chat-icon {
font-size: calculateRem(20px);
color: var(--white);
padding: calculateRem(10px) 0;
width: calculateRem(40px);
margin: 0 calculateRem(8px);
}