wip

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());
     }
 }

src/app/components/har-entry/har-entry.component.html

@@ -5,7 +5,7 @@
 
     <ng-container *appExpansionPanelContent>
         <div class="common-params">
-            <app-har-entry-line label="Status" [value]="statusText()"></app-har-entry-line>
+            <app-har-entry-line label="Status" [value]="entry().response.status | httpStatus"></app-har-entry-line>
 
             @if (entry().fromDiskCache) {
                 <app-har-entry-line label="Cache" value="Disk"></app-har-entry-line>

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<HAREntry>();
 
     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(' ');
-    }
 }

src/app/components/har-request-data/har-request-data.component.html

@@ -4,7 +4,7 @@
     <app-expansion-panel showArrow>
         <div class="title">Headers</div>
         <ng-container *appExpansionPanelContent>
-            @for (header of headers | sortByKey; track $index) {
+            @for (header of headers | sortByName; track $index) {
                 <div class="headers">
                     <span>{{ header.name }}: {{ header.value }}</span>
                 </div>
@@ -17,7 +17,7 @@
     <app-expansion-panel showArrow initialOpened>
         <div class="title">Query string</div>
         <ng-container *appExpansionPanelContent>
-            @for (query of queryData | sortByKey; track $index) {
+            @for (query of queryData | sortByName; track $index) {
                 <div class="query">
                     <span>{{ query.name }}: {{ query.value }}</span>
                 </div>

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 })

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<number, string>([
+    [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'],
+]);

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'];
 

src/app/pipes/sort-by-key.pipe.ts → 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[]>): IHAREntryKeyValue[] {
         return value?.slice().sort((a, b) => a.name.localeCompare(b.name)) ?? [];
     }

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<T>(
-    injector: Injector,
-    data: T | Observable<T> = EMPTY,
-): OperatorFunction<T | null, T | null> {
+export function catchAndLogError<T>(data: T | Observable<T> = EMPTY): OperatorFunction<T | null, T | null> {
     return catchError((err: unknown) => {
         console.error(err);
         alert('Ошибка');