api-debug.component.ts

import { HttpRequest, HttpResponseBase } from '@angular/common/http';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  EventEmitter,
  Output,
} from '@angular/core';

// TODO injecter
import { Configuration } from '../configuration';
import { DebugStateService } from '../debug-state.service';

import { ApiDebugInterceptor, DebugEvent } from './api-debug.interceptor';

interface RequestInfo {
  id: string;
  url: string;
  status: 'pending' | 'success' | 'error' | 'cancelled';
  method: string;
  response?: ResponseInfo;
}

interface ResponseInfo {
  status: number;
  statusText: string;
  token?: string;
  tokenLink?: string;
}

@Component({
  selector: 'dbg-api-debug',
  templateUrl: './api-debug.component.html',
  styleUrls: ['./api-debug.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ApiDebugComponent {
  private readonly requests = new Map<string, RequestInfo>();
  private readonly unseen = new Set<string>();
  private readonly ids: string[] = [];
  private readonly apiPrefix: string;

  @Output() public countChanged = new EventEmitter<number>();

  constructor(
    interceptor: ApiDebugInterceptor,
    public readonly debug: DebugStateService,
    private readonly cd: ChangeDetectorRef,
    conf: Configuration
  ) {
    this.apiPrefix = conf.apiBaseURL;

    interceptor.events$.subscribe(ev => {
      this.handle(ev);
    });
  }

  public get unseenCount(): number {
    return this.unseen.size;
  }

  public get totalCount(): number {
    return this.ids.length;
  }

  public get last(): RequestInfo | null {
    return this.ids.length ? this.requests.get(this.ids[0]) : null;
  }

  public get previous(): RequestInfo[] {