diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 944889d..09082f1 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, inject, Injector, Signal, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject, Signal, signal } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { BehaviorSubject, Observable, of, switchMap } from 'rxjs'; import { FileUploaderComponent } from './components/file-uploader/file-uploader.component'; @@ -25,7 +25,6 @@ export class AppComponent { protected readonly harLog = this.createHARSignal(); protected readonly harReader = inject(HarReaderService); - protected readonly injector = inject(Injector); protected loadHAR(file: File): void { this.harFile$.next(file); @@ -41,6 +40,6 @@ export class AppComponent { return of(null); } - return this.harReader.readHAR(file).pipe(catchAndLogError(this.injector)); + return this.harReader.readHAR(file).pipe(catchAndLogError()); } } diff --git a/src/app/components/har-entry/har-entry.component.html b/src/app/components/har-entry/har-entry.component.html index d07013d..9892cc0 100644 --- a/src/app/components/har-entry/har-entry.component.html +++ b/src/app/components/har-entry/har-entry.component.html @@ -5,7 +5,7 @@
- + @if (entry().fromDiskCache) { diff --git a/src/app/components/har-entry/har-entry.component.ts b/src/app/components/har-entry/har-entry.component.ts index 87c4294..174aa44 100644 --- a/src/app/components/har-entry/har-entry.component.ts +++ b/src/app/components/har-entry/har-entry.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; -import { HTTP_CODES } from '../../contstants/http-codes'; import { HAREntry } from '../../models/har-entry'; +import { HttpStatusPipe } from '../../pipes/http-status.pipe'; import { ExpansionPanelContentDirective } from '../expansion-panel/expansion-panel-content.directive'; import { ExpansionPanelComponent } from '../expansion-panel/expansion-panel.component'; import { HarEntryLineComponent } from '../har-entry-line/har-entry-line.component'; @@ -19,22 +19,15 @@ import { TagColor, TagComponent } from '../tag/tag.component'; HarRequestDataComponent, ExpansionPanelContentDirective, HarEntryLineComponent, + HttpStatusPipe, ], }) export class HarEntryComponent { public entry = input.required(); protected readonly statusColor = computed(() => this.getStatusColor()); - protected readonly statusText = computed(() => this.getStatusText()); private getStatusColor(): TagColor { return this.entry().response.status >= 400 ? 'red' : 'blue'; } - - private getStatusText(): string { - const status = `${this.entry().response.status}`; - const text = HTTP_CODES.has(status) ? `(${HTTP_CODES.get(status)})` : ''; - - return [status, text].filter(Boolean).join(' '); - } } diff --git a/src/app/components/har-request-data/har-request-data.component.html b/src/app/components/har-request-data/har-request-data.component.html index 1dd4906..4172fac 100644 --- a/src/app/components/har-request-data/har-request-data.component.html +++ b/src/app/components/har-request-data/har-request-data.component.html @@ -4,7 +4,7 @@
Headers
- @for (header of headers | sortByKey; track $index) { + @for (header of headers | sortByName; track $index) {
{{ header.name }}: {{ header.value }}
@@ -17,7 +17,7 @@
Query string
- @for (query of queryData | sortByKey; track $index) { + @for (query of queryData | sortByName; track $index) {
{{ query.name }}: {{ query.value }}
diff --git a/src/app/components/har-request-data/har-request-data.component.ts b/src/app/components/har-request-data/har-request-data.component.ts index 59cc4b7..1fbfc30 100644 --- a/src/app/components/har-request-data/har-request-data.component.ts +++ b/src/app/components/har-request-data/har-request-data.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { SizePipe } from '../../pipes/size.pipe'; -import { SortByKeyPipe } from '../../pipes/sort-by-key.pipe'; +import { SortByNamePipe } from '../../pipes/sort-by-name.pipe'; import { IHAREntryKeyValue } from '../../types/har-log'; import { ExpansionPanelContentDirective } from '../expansion-panel/expansion-panel-content.directive'; import { ExpansionPanelComponent } from '../expansion-panel/expansion-panel.component'; @@ -12,7 +12,7 @@ import { HarContentComponent } from '../har-content/har-content.component'; templateUrl: './har-request-data.component.html', styleUrl: './har-request-data.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, - imports: [SizePipe, ExpansionPanelComponent, SortByKeyPipe, HarContentComponent, ExpansionPanelContentDirective], + imports: [SizePipe, ExpansionPanelComponent, SortByNamePipe, HarContentComponent, ExpansionPanelContentDirective], }) export class HarRequestDataComponent { @Input({ required: true }) diff --git a/src/app/contstants/http-codes.ts b/src/app/contstants/http-codes.ts deleted file mode 100644 index a4c9ce9..0000000 --- a/src/app/contstants/http-codes.ts +++ /dev/null @@ -1,16 +0,0 @@ -export const HTTP_CODES = new Map([ - ['0', 'Cancelled'], - ['200', 'OK'], - ['204', 'No Content'], - ['304', 'Not Modified'], - ['400', 'Bad Request'], - ['401', 'Unauthorized'], - ['403', 'Forbidden'], - ['404', 'Not Found'], - ['405', 'Method Not Allowed'], - ['418', "I'm a teapot"], - ['500', 'Internal Server Error'], - ['502', 'Bad Gateway'], - ['503', 'Service Unavailable'], - ['504', 'Gateway Timeout'], -]); diff --git a/src/app/pipes/http-status.pipe.ts b/src/app/pipes/http-status.pipe.ts new file mode 100644 index 0000000..ae0c44e --- /dev/null +++ b/src/app/pipes/http-status.pipe.ts @@ -0,0 +1,28 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'httpStatus', + standalone: true, +}) +export class HttpStatusPipe implements PipeTransform { + public transform(value: number): string { + return HTTP_CODES.has(value) ? `${value} (${HTTP_CODES.get(value)})` : `${value}`; + } +} + +const HTTP_CODES = new Map([ + [0, 'Cancelled'], + [200, 'OK'], + [204, 'No Content'], + [304, 'Not Modified'], + [400, 'Bad Request'], + [401, 'Unauthorized'], + [403, 'Forbidden'], + [404, 'Not Found'], + [405, 'Method Not Allowed'], + [418, "I'm a teapot"], + [500, 'Internal Server Error'], + [502, 'Bad Gateway'], + [503, 'Service Unavailable'], + [504, 'Gateway Timeout'], +]); diff --git a/src/app/pipes/size.pipe.ts b/src/app/pipes/size.pipe.ts index 8f6e664..bd1d6ef 100644 --- a/src/app/pipes/size.pipe.ts +++ b/src/app/pipes/size.pipe.ts @@ -3,6 +3,8 @@ import { Unsafe } from '../types/unsafe'; /** * https://en.wikipedia.org/wiki/Kilobyte + * + * Хром показывает в настоящий килобайтах, и я буду */ const UNITS = ['B', 'kB', 'MB', 'GB']; diff --git a/src/app/pipes/sort-by-key.pipe.ts b/src/app/pipes/sort-by-name.pipe.ts similarity index 81% rename from src/app/pipes/sort-by-key.pipe.ts rename to src/app/pipes/sort-by-name.pipe.ts index 1433b30..ab5bde1 100644 --- a/src/app/pipes/sort-by-key.pipe.ts +++ b/src/app/pipes/sort-by-name.pipe.ts @@ -3,10 +3,10 @@ import { IHAREntryKeyValue } from '../types/har-log'; import { Unsafe } from '../types/unsafe'; @Pipe({ - name: 'sortByKey', + name: 'sortByName', standalone: true, }) -export class SortByKeyPipe implements PipeTransform { +export class SortByNamePipe implements PipeTransform { public transform(value: Unsafe): IHAREntryKeyValue[] { return value?.slice().sort((a, b) => a.name.localeCompare(b.name)) ?? []; } diff --git a/src/app/utils/catch-and-log-error.ts b/src/app/utils/catch-and-log-error.ts index d615b8b..09947b6 100644 --- a/src/app/utils/catch-and-log-error.ts +++ b/src/app/utils/catch-and-log-error.ts @@ -1,10 +1,6 @@ -import { Injector } from '@angular/core'; import { catchError, EMPTY, isObservable, Observable, of, OperatorFunction } from 'rxjs'; -export function catchAndLogError( - injector: Injector, - data: T | Observable = EMPTY, -): OperatorFunction { +export function catchAndLogError(data: T | Observable = EMPTY): OperatorFunction { return catchError((err: unknown) => { console.error(err); alert('Ошибка');