Skip to content

Commit

Permalink
Issue(#654): Incluso la visualizzazione degli headers e del payload n…
Browse files Browse the repository at this point in the history
…el dettaglio del messaggi (#656)

Co-authored-by: Alfonso Tatarelli <a.tatarelli@gmail.com>
  • Loading branch information
pintorig and atatarelli committed Nov 23, 2023
1 parent 55b9cec commit cdbd1d4
Show file tree
Hide file tree
Showing 14 changed files with 249 additions and 4 deletions.
5 changes: 5 additions & 0 deletions wars/web-console/src/main/angular/console/npm-shrinkwrap.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions wars/web-console/src/main/angular/console/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"rxjs": "^5.5.2",
"survey-angular": "^1.9.23",
"surveyjs-widgets": "^1.9.23",
"vkbeautify": "^0.99.3",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.14"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ import { ProfiloUtenteViewComponent } from './elements/detail-view/views/dialog-
import { ScrollerContainerComponent } from './elements/list-view/scroller-container/scroller-container.component';
import { SslConfigComponent } from './elements/detail-view/views/ssl-config/ssl-config.component';
import { SurveyComponent } from './elements/survey/survey.component';
import { PayloadViewComponent } from './elements/payload-view/payload-view.component';
import { TableViewComponent } from './elements/table-view/table-view.component';

import { XmlPipe } from './pipes/xml.pipe';

import { httpInterceptorProviders } from './services/http-interceptors';

Expand Down Expand Up @@ -117,7 +121,10 @@ import { httpInterceptorProviders } from './services/http-interceptors';
IamLoginCardComponent,
SslConfigComponent,
SurveyComponent,
OAuth2LoginCardComponent
OAuth2LoginCardComponent,
PayloadViewComponent,
TableViewComponent,
XmlPipe
],
imports: [
BrowserModule,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,68 @@
</div>
</div>
</mat-card>

<mat-card class="shadow no-border-radius mb-4" *ngIf="dettaglioRichiesta.length > 0">
<p class="d-block matcard-title pb-3 color-gray regular-24">Messaggio di richiesta</p>
<div class="d-block" *ngIf="dettaglioRichiesta.length != 0">
<link-key-value-view class="d-block link-key-value-fill-mat-card" *ngFor="let item of dettaglioRichiesta" [info]="item"></link-key-value-view>
</div>

<ng-container *ngIf="_json.parametriRichiesta">
<div class="container p-0" *ngIf="_json.parametriRichiesta.headers">
<div class="row lh-130 regular-16 mt-2 mb-2 break-all">
<div class="col-12 col-sm-4 color-gray lh-130 mb-2 mb-sm-0">Header:</div>
<div class="col-12 col-sm-8">
<link-table-view [data]="_json.parametriRichiesta.headers" [attributes]="_tableAttributes"></link-table-view>
</div>
</div>
</div>

<div class="container p-0" *ngIf="_json.parametriRichiesta.payload">
<div class="row lh-130 regular-16 mb-2 break-all">
<div class="col-12 col-sm-4 color-gray lh-130 mb-2 mb-sm-0">Payload:</div>
<div class="col-12 col-sm-8">
<link-payload-view
[data]="_json"
[attribute]="'parametriRichiesta'"
[showCopy]="true"
(copied)="onCopied($event)">
</link-payload-view>
</div>
</div>
</div>
</ng-container>
</mat-card>

<mat-card class="shadow no-border-radius mb-4" *ngIf="dettaglioRisposta.length > 0">
<p class="d-block matcard-title pb-3 color-gray regular-24">Messaggio di risposta</p>
<div class="d-block" *ngIf="dettaglioRisposta.length != 0">
<link-key-value-view class="d-block link-key-value-fill-mat-card" *ngFor="let item of dettaglioRisposta" [info]="item"></link-key-value-view>
</div>

<ng-container *ngIf="_json.parametriRisposta">
<div class="container p-0" *ngIf="_json.parametriRichiesta.headers">
<div class="row lh-130 regular-16 mt-2 mb-2 break-all">
<div class="col-12 col-sm-4 color-gray lh-130 mb-2 mb-sm-0">Header:</div>
<div class="col-12 col-sm-8">
<link-table-view [data]="_json.parametriRisposta.headers" [attributes]="_tableAttributes"></link-table-view>
</div>
</div>
</div>

<div class="container p-0" *ngIf="_json.parametriRisposta.payload">
<div class="row lh-130 regular-16 mb-2 break-all">
<div class="col-12 col-sm-4 color-gray lh-130 mb-2 mb-sm-0">Payload:</div>
<div class="col-12 col-sm-8">
<link-payload-view
[data]="_json"
[attribute]="'parametriRisposta'"
[showCopy]="true"
(copied)="onCopied($event)">
</link-payload-view>
</div>
</div>
</div>
</ng-container>
</mat-card>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Dato } from '../../../../classes/view/dato';
import { IModalDialog } from '../../../../classes/interfaces/IModalDialog';
import { ModalBehavior } from '../../../../classes/modal-behavior';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { GovpayService } from '../../../../services/govpay.service';
import { UtilService } from '../../../../services/util.service';
import { Voce } from '../../../../services/voce.service';
import { IExport } from '../../../../classes/interfaces/IExport';
Expand All @@ -24,10 +25,22 @@ export class GiornaleEventiViewComponent implements IModalDialog, OnInit, IExpor
protected _voce = Voce;
protected infoPACompletaUrl: string = '';

constructor(protected us: UtilService) { }
_json: any;
dettaglioRichiesta = [];
dettaglioRisposta = [];

_tableAttributes: any[] = [
{ label: 'Nome', attribute: 'nome', col: 'col-4'},
{ label: 'Valore', attribute: 'valore', col: 'col-8'}
];

_arrXML = ['API_PAGOPA', 'API_MAGGIOLI'];

constructor(public gps: GovpayService, protected us: UtilService) { }

ngOnInit() {
this.dettaglioEvento();
this._loadDetails();
}

protected dettaglioEvento() {
Expand Down Expand Up @@ -59,11 +72,46 @@ export class GiornaleEventiViewComponent implements IModalDialog, OnInit, IExpor
_dettaglioPA.push(new Dato({label: Voce.ID_INTERMEDIARIO, value: UtilService.defaultDisplay({ value: this.json.datiPagoPA.idIntermediario })}));
_dettaglioPA.push(new Dato({label: Voce.ID_STAZIONE, value: UtilService.defaultDisplay({ value: this.json.datiPagoPA.idStazione })}));
}
this.infoPACompletaUrl = UtilService.RootByTOA() + UtilService.URL_GIORNALE_EVENTI + '/' + this.json.id;
this.infoPACompletaUrl = ''; // UtilService.RootByTOA() + UtilService.URL_GIORNALE_EVENTI + '/' + this.json.id;
this.informazioni = _dettaglio.slice(0);
this.informazioniPA = _dettaglioPA.slice(0);
}

protected _loadDetails() {
let _url = UtilService.URL_GIORNALE_EVENTI+'/'+this.json.id;
this.gps.getDataService(_url).subscribe(
function (_response) {
this._json = _response.body;

let _date = this._json.dataEvento?moment(this._json.dataEvento).format('DD/MM/YYYY [-] HH:mm:ss.SSS'):Voce.NON_PRESENTE;
let _dettaglioRichiesta = [];
if (this._json.parametriRichiesta) {
if (this._json.parametriRichiesta.principal) {
_dettaglioRichiesta.push(new Dato({ label: Voce.PRINCIPAL, value: this._json.parametriRichiesta.principal }));
}
_dettaglioRichiesta.push(new Dato({ label: Voce.UTENTE, value: this._json.parametriRichiesta.utente }));
_date = this._json.parametriRichiesta.dataOraRichiesta?moment(this._json.parametriRichiesta.dataOraRichiesta).format('DD/MM/YYYY [-] HH:mm:ss.SSS'):Voce.NON_PRESENTE;
_dettaglioRichiesta.push(new Dato({ label: Voce.DATA_RICHIESTA, value: _date }));
_dettaglioRichiesta.push(new Dato({ label: Voce.URL, value: `${this._json.parametriRichiesta.method} ${this._json.parametriRichiesta.url}` }));
}
this.dettaglioRichiesta = _dettaglioRichiesta.slice(0);

let _dettaglioRisposta = [];
if (this._json.parametriRisposta) {
_dettaglioRisposta.push(new Dato({ label: Voce.STATO, value: this._json.parametriRisposta.status }));
_date = this._json.parametriRisposta.dataOraRisposta?moment(this._json.parametriRisposta.dataOraRisposta).format('DD/MM/YYYY [-] HH:mm:ss.SSS'):Voce.NON_PRESENTE;
_dettaglioRisposta.push(new Dato({ label: Voce.DATA_RISPOSTA, value: _date }));
}
this.dettaglioRisposta = _dettaglioRisposta.slice(0);

this.gps.updateSpinner(false);
}.bind(this),
(error) => {
this.gps.updateSpinner(false);
this.us.onError(error);
});
}

refresh(mb: ModalBehavior) {}
save(responseService: BehaviorSubject<any>, mb: ModalBehavior) {}
exportData() {}
Expand All @@ -75,4 +123,9 @@ export class GiornaleEventiViewComponent implements IModalDialog, OnInit, IExpor
title(): string {
return UtilService.defaultDisplay({ value: this.json?this.json.tipoEvento:null });
}

onCopied(event: boolean) {
const message = event ? 'Payload copiato!' : 'Errore: Payload non copiato!';
this.us.alert(message);
}
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="container">
<div class="row lh-130 regular-16 mb-2 break-all">
<div class="row lh-130 regular-16 mb-2 break-all text-break">
<div class="col-12 col-sm-4 color-gray lh-130 mb-2 mb-sm-0">{{info.label?info.label + ':':info.label}}</div>
<div class="col-12 col-sm-8">{{info.value}}</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<div *ngIf="!attribute">{{ 'Nessun dato da visualizzare' }}</div>
<div class="border p-2" style="height: 240px;overflow: auto;" *ngIf="attribute">
<!-- <div>{{ type }}</div> -->
<pre *ngIf="type === MimeEnum.JSON">{{ payload | json }}</pre>
<pre *ngIf="type === MimeEnum.XML">{{ payload | xml }}</pre>
</div>
<div class="float-right" *ngIf="showCopy">
<button mat-icon-button type="button" (click)="copyPayload()" [matTooltip]="'Copia negli appunti'"><mat-icon>content_copy</mat-icon></button>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

enum MimeEnum {
JSON = 'application/json',
XML = 'text/xml',
}

@Component({
selector: 'link-payload-view',
templateUrl: './payload-view.component.html',
styleUrls: ['./payload-view.component.scss']
})
export class PayloadViewComponent implements OnInit {

@Input() data: any = null;
@Input() attribute: string = '';
@Input() showCopy: boolean = true;

@Output() copied: EventEmitter<boolean> = new EventEmitter();

payload = null;
payloadString = null;
type= null;
header = null;

_arrXML = ['API_PAGOPA', 'API_MAGGIOLI'];

readonly MimeEnum = MimeEnum;

constructor() { }

ngOnInit() {
if (this.data[this.attribute]) {
this.header = this.data[this.attribute].headers;
const _contentTypeRichiesta = this.header.find((item: any) => (item.nome.toLowerCase() === 'content-type'));
if (_contentTypeRichiesta) {
this.type = _contentTypeRichiesta.valore.split(';')[0] || null;
}
if (!this.type) {
this.type = this._arrXML.includes(this.data.componente) ? MimeEnum.XML : MimeEnum.JSON;
}
this.payload = this._decodeB64ToJson(this.data[this.attribute].payload);
}
}

protected _decodeB64ToJson(_base: string): any {
const _jsonDecode = decodeURIComponent(atob(_base).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
this.payloadString = _jsonDecode;
if (this.type === MimeEnum.JSON) {
return JSON.parse(_jsonDecode);
} else {
return _jsonDecode;
}
}

copyPayload() {
window.navigator['clipboard'].writeText(this.payloadString)
.then( r => this.copied.emit(true) )
.catch( e => { this.copied.emit(false); console.log(e) });
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div *ngIf="attributes.length === 0">{{ 'Nessun dato da visualizzare' }}</div>
<table class="table table-bordered table-sm" *ngIf="attributes.length > 0">
<thead>
<tr>
<th class="{{ item.col }}" scope="col" *ngFor="let item of attributes">{{ item.label }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let elem of data">
<td class="text-break text-wrap" *ngFor="let item of attributes">{{ elem[item.attribute] }}</td>
</tr>
</tbody>
</table>
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
selector: 'link-table-view',
templateUrl: './table-view.component.html',
styleUrls: ['./table-view.component.scss']
})
export class TableViewComponent implements OnInit {

@Input() data: any[] = null;
@Input() attributes: any[] = [];

constructor() { }

ngOnInit() {}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { Pipe, PipeTransform } from "@angular/core";

import * as vkbeautify from 'vkbeautify';

@Pipe({
name: 'xml'
})
export class XmlPipe implements PipeTransform {
transform(value: string): string {
return vkbeautify.xml(value);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ export class Voce {
public static HEADER_NAME: string = 'Nome Header';
public static HEADER_VALUE: string = 'Valore';
public static HTTP_HEADER: string = 'HTTP Header';
public static PAYLOAD: string = 'Payload';

public static IBAN_ACCREDITO: string = 'Iban accredito';
public static IBAN_POSTALE: string = 'Iban postale';
Expand Down Expand Up @@ -311,6 +312,7 @@ export class Voce {
public static URL: string = 'URL';
public static URL_BACKEND_IO: string = 'URL backend IO';
public static USERNAME: string = 'Username';
public static UTENTE: string = 'Utente';

public static VALIDAZIONE: string = 'Validazione';
public static VALIDAZIONE_DATI: string = 'Validazione inserimento dati';
Expand Down

0 comments on commit cdbd1d4

Please sign in to comment.