Tables Frontend

packages/frontend/stalker-app/src/app/api/domains/domains.service.ts

@@ -2,15 +2,16 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { DateRange } from '@angular/material/datepicker';
 import { firstValueFrom, Observable } from 'rxjs';
+import { environment } from '../../../environments/environment';
+import { ResourceService } from '../../services/resources/resource.service';
 import { Domain } from '../../shared/types/domain/domain.interface';
 import { Page } from '../../shared/types/page.type';
-import { environment } from '../../../environments/environment';
 import { filtersToParams } from '../../utils/filters-to-params';
 
 @Injectable({
   providedIn: 'root',
 })
-export class DomainsService {
+export class DomainsService implements ResourceService<Domain> {
   constructor(private http: HttpClient) {}
 
   public getPage(

packages/frontend/stalker-app/src/app/api/hosts/hosts.service.ts

@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { DateRange } from '@angular/material/datepicker';
 import { Observable, firstValueFrom } from 'rxjs';
 import { environment } from '../../../environments/environment';
+import { ResourceService } from '../../services/resources/resource.service';
 import { Host } from '../../shared/types/host/host.interface';
 import { Page } from '../../shared/types/page.type';
 import { Port } from '../../shared/types/ports/port.interface';
@@ -11,7 +12,7 @@ import { filtersToParams } from '../../utils/filters-to-params';
 @Injectable({
   providedIn: 'root',
 })
-export class HostsService {
+export class HostsService implements ResourceService<Host> {
   constructor(private http: HttpClient) {}
 
   public get(hostId: string): Observable<Host> {

packages/frontend/stalker-app/src/app/api/ports/ports.service.ts

@@ -3,14 +3,15 @@ import { Injectable } from '@angular/core';
 import { DateRange } from '@angular/material/datepicker';
 import { Observable, firstValueFrom } from 'rxjs';
 import { environment } from '../../../environments/environment';
+import { ResourceService } from '../../services/resources/resource.service';
 import { Page } from '../../shared/types/page.type';
 import { ExtendedPort, Port, PortNumber } from '../../shared/types/ports/port.interface';
 import { filtersToParams } from '../../utils/filters-to-params';
 
 @Injectable({
   providedIn: 'root',
 })
-export class PortsService {
+export class PortsService implements ResourceService<Port | PortNumber | ExtendedPort> {
   constructor(private http: HttpClient) {}
 
   public getPage<T extends Port | PortNumber | ExtendedPort>(

packages/frontend/stalker-app/src/app/api/tables/tables.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { ViewSummary as TableSummary } from '../../shared/types/tables/table-summary.type';
+import { Table } from '../../shared/types/tables/table.type';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TablesService {
+  public getTables(): Observable<TableSummary[]> {
+    return of([]);
+  }
+
+  public getTable(id: string): Observable<Table> {
+    return of();
+  }
+}

packages/frontend/stalker-app/src/app/api/websites/websites.service.ts

@@ -3,14 +3,15 @@ import { Injectable } from '@angular/core';
 import { DateRange } from '@angular/material/datepicker';
 import { Observable, firstValueFrom, map } from 'rxjs';
 import { environment } from '../../../environments/environment';
+import { ResourceService } from '../../services/resources/resource.service';
 import { Page } from '../../shared/types/page.type';
 import { Website } from '../../shared/types/websites/website.type';
 import { filtersToParams } from '../../utils/filters-to-params';
 
 @Injectable({
   providedIn: 'root',
 })
-export class WebsitesService {
+export class WebsitesService implements ResourceService<Website> {
   constructor(private http: HttpClient) {}
 
   public getPage(

packages/frontend/stalker-app/src/app/app-routing.module.ts

@@ -40,6 +40,11 @@ const routes: Routes = [
         canActivate: [authenticationGuard],
         component: EditProjectsComponent,
       },
+      {
+        path: 'tables/:id',
+        canActivate: [authenticationGuard],
+        loadComponent: () => import('./modules/tables/table.component').then((c) => c.TableComponent),
+      },
       {
         path: 'domains',
         canActivate: [authenticationGuard],

packages/frontend/stalker-app/src/app/modules/domains/list-domains/list-domains.component.ts

@@ -37,6 +37,7 @@ import {
 import { TableFormatComponent } from '../../../shared/widget/filtered-paginated-table/table-format/table-format.component';
 import { BlockedPillTagComponent } from '../../../shared/widget/pill-tag/blocked-pill-tag.component';
 import { defaultNewTimeMs } from '../../../shared/widget/pill-tag/new-pill-tag.component';
+import { PillTagComponent } from '../../../shared/widget/pill-tag/pill-tag.component';
 import {
   getGlobalProjectFilter,
   globalProjectFilter$,
@@ -64,6 +65,7 @@ import { DomainsInteractionsService } from '../domains-interactions.service';
     RouterModule,
     BlockedPillTagComponent,
     TableFormatComponent,
+    PillTagComponent,
   ],
   selector: 'app-list-domains',
   templateUrl: './list-domains.component.html',

packages/frontend/stalker-app/src/app/modules/domains/view-domain/view-domain.component.ts

@@ -21,20 +21,21 @@ import {
   tap,
 } from 'rxjs';
 import { DomainsService } from '../../../api/domains/domains.service';
+import { PortsService } from '../../../api/ports/ports.service';
 import { ProjectsService } from '../../../api/projects/projects.service';
 import { TagsService } from '../../../api/tags/tags.service';
-import { ProjectSummary } from '../../../shared/types/project/project.summary';
-import { Tag } from '../../../shared/types/tag.type';
-import { BlockedPillTagComponent } from '../../../shared/widget/pill-tag/blocked-pill-tag.component';
-import { TextMenuComponent } from '../../../shared/widget/text-menu/text-menu.component';
-import { PortsService } from '../../../api/ports/ports.service';
 import { AppHeaderComponent } from '../../../shared/components/page-header/page-header.component';
 import { PanelSectionModule } from '../../../shared/components/panel-section/panel-section.module';
 import { SharedModule } from '../../../shared/shared.module';
 import { Domain } from '../../../shared/types/domain/domain.interface';
 import { Page } from '../../../shared/types/page.type';
 import { PortNumber } from '../../../shared/types/ports/port.interface';
+import { ProjectSummary } from '../../../shared/types/project/project.summary';
+import { Tag } from '../../../shared/types/tag.type';
+import { BlockedPillTagComponent } from '../../../shared/widget/pill-tag/blocked-pill-tag.component';
 import { NewPillTagComponent } from '../../../shared/widget/pill-tag/new-pill-tag.component';
+import { PillTagComponent } from '../../../shared/widget/pill-tag/pill-tag.component';
+import { TextMenuComponent } from '../../../shared/widget/text-menu/text-menu.component';
 import { SelectItem } from '../../../shared/widget/text-select-menu/text-select-menu.component';
 import { FindingsModule } from '../../findings/findings.module';
 import { DomainsInteractionsService } from '../domains-interactions.service';
@@ -55,6 +56,7 @@ import { DomainsInteractionsService } from '../domains-interactions.service';
     MatMenuModule,
     TextMenuComponent,
     BlockedPillTagComponent,
+    PillTagComponent,
   ],
   selector: 'app-view-domain',
   templateUrl: './view-domain.component.html',

packages/frontend/stalker-app/src/app/modules/findings/finding/finding.component.html

@@ -1,4 +1,13 @@
-<h3>{{ finding?.name }}</h3>
+<h3 class="tw-flex">
+  <span class="tw-flex-1">{{ finding?.name }}</span
+  ><button mat-icon-button (click)="copyJsonToClipboard()">
+    <mat-icon
+      i18n-matTooltip="Copy raw finding to clipboard|Copy raw finding to clipboard"
+      matTooltip="Copy raw finding to clipboard"
+      >content_copy</mat-icon
+    >
+  </button>
+</h3>
 
 <div>
   @for (field of finding?.fields; track field) {

packages/frontend/stalker-app/src/app/modules/findings/finding/finding.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
 import { CustomFinding } from '../../../shared/types/finding/finding.type';
 
 @Component({
@@ -8,4 +9,13 @@ import { CustomFinding } from '../../../shared/types/finding/finding.type';
 })
 export class FindingComponent {
   @Input() finding: CustomFinding | null = null;
+
+  constructor(private toastr: ToastrService) {}
+
+  public copyJsonToClipboard() {
+    navigator.clipboard.writeText(JSON.stringify(this.finding));
+    this.toastr.success(
+      $localize`:Finding copied to clipboard|Finding copied to clipboard:Finding copied to clipboard`
+    );
+  }
 }

packages/frontend/stalker-app/src/app/modules/findings/findings.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SharedModule } from '../../shared/shared.module';
@@ -19,6 +20,7 @@ import { TextFindingFieldComponent } from './text-finding-field/text-finding-fie
     MatProgressSpinnerModule,
     MatButtonModule,
     MatTooltipModule,
+    MatIconModule,
     SharedModule,
   ],
   declarations: [FindingsListComponent, FindingComponent, ImageFindingFieldComponent, TextFindingFieldComponent],

packages/frontend/stalker-app/src/app/modules/hosts/list-hosts/list-hosts.component.ts

@@ -37,6 +37,7 @@ import {
 import { TableFormatComponent } from '../../../shared/widget/filtered-paginated-table/table-format/table-format.component';
 import { BlockedPillTagComponent } from '../../../shared/widget/pill-tag/blocked-pill-tag.component';
 import { defaultNewTimeMs } from '../../../shared/widget/pill-tag/new-pill-tag.component';
+import { PillTagComponent } from '../../../shared/widget/pill-tag/pill-tag.component';
 import {
   getGlobalProjectFilter,
   globalProjectFilter$,
@@ -64,6 +65,7 @@ import { HostsInteractionsService } from '../hosts-interactions.service';
     BlockedPillTagComponent,
     RouterModule,
     TableFormatComponent,
+    PillTagComponent,
   ],
   selector: 'app-list-hosts',
   templateUrl: './list-hosts.component.html',

packages/frontend/stalker-app/src/app/modules/hosts/view-host/view-host.component.ts

@@ -32,22 +32,23 @@ import {
   tap,
 } from 'rxjs';
 import { HostsService } from '../../../api/hosts/hosts.service';
+import { PortsService } from '../../../api/ports/ports.service';
 import { ProjectsService } from '../../../api/projects/projects.service';
 import { TagsService } from '../../../api/tags/tags.service';
+import { AppHeaderComponent } from '../../../shared/components/page-header/page-header.component';
+import { PanelSectionModule } from '../../../shared/components/panel-section/panel-section.module';
+import { SharedModule } from '../../../shared/shared.module';
 import { Domain } from '../../../shared/types/domain/domain.interface';
 import { DomainSummary } from '../../../shared/types/domain/domain.summary';
+import { Host } from '../../../shared/types/host/host.interface';
+import { Page } from '../../../shared/types/page.type';
 import { Port, PortNumber } from '../../../shared/types/ports/port.interface';
 import { ProjectSummary } from '../../../shared/types/project/project.summary';
 import { Tag } from '../../../shared/types/tag.type';
 import { BlockedPillTagComponent } from '../../../shared/widget/pill-tag/blocked-pill-tag.component';
-import { TextMenuComponent } from '../../../shared/widget/text-menu/text-menu.component';
-import { PortsService } from '../../../api/ports/ports.service';
-import { AppHeaderComponent } from '../../../shared/components/page-header/page-header.component';
-import { PanelSectionModule } from '../../../shared/components/panel-section/panel-section.module';
-import { SharedModule } from '../../../shared/shared.module';
-import { Host } from '../../../shared/types/host/host.interface';
-import { Page } from '../../../shared/types/page.type';
 import { NewPillTagComponent } from '../../../shared/widget/pill-tag/new-pill-tag.component';
+import { PillTagComponent } from '../../../shared/widget/pill-tag/pill-tag.component';
+import { TextMenuComponent } from '../../../shared/widget/text-menu/text-menu.component';
 import { SelectItem } from '../../../shared/widget/text-select-menu/text-select-menu.component';
 import { FindingsModule } from '../../findings/findings.module';
 import { HostsInteractionsService } from '../hosts-interactions.service';
@@ -76,6 +77,7 @@ import { HostsInteractionsService } from '../hosts-interactions.service';
     MatTooltipModule,
     BlockedPillTagComponent,
     TextMenuComponent,
+    PillTagComponent,
   ],
   selector: 'app-view-host',
   templateUrl: './view-host.component.html',

packages/frontend/stalker-app/src/app/modules/ports/list-ports/list-ports.component.ts

@@ -36,6 +36,7 @@ import {
 import { TableFormatComponent } from '../../../shared/widget/filtered-paginated-table/table-format/table-format.component';
 import { BlockedPillTagComponent } from '../../../shared/widget/pill-tag/blocked-pill-tag.component';
 import { defaultNewTimeMs } from '../../../shared/widget/pill-tag/new-pill-tag.component';
+import { PillTagComponent } from '../../../shared/widget/pill-tag/pill-tag.component';
 import {
   getGlobalProjectFilter,
   globalProjectFilter$,
@@ -63,6 +64,7 @@ import { PortsInteractionsService } from '../ports-interactions.service';
     RouterModule,
     BlockedPillTagComponent,
     TableFormatComponent,
+    PillTagComponent,
   ],
   selector: 'app-list-ports',
   templateUrl: './list-ports.component.html',

packages/frontend/stalker-app/src/app/modules/ports/view-port/view-port.component.ts

@@ -32,21 +32,22 @@ import {
   tap,
 } from 'rxjs';
 import { HostsService } from '../../../api/hosts/hosts.service';
+import { PortsService } from '../../../api/ports/ports.service';
 import { ProjectsService } from '../../../api/projects/projects.service';
 import { TagsService } from '../../../api/tags/tags.service';
+import { AppHeaderComponent } from '../../../shared/components/page-header/page-header.component';
+import { PanelSectionModule } from '../../../shared/components/panel-section/panel-section.module';
+import { SharedModule } from '../../../shared/shared.module';
 import { Domain } from '../../../shared/types/domain/domain.interface';
 import { DomainSummary } from '../../../shared/types/domain/domain.summary';
+import { Page } from '../../../shared/types/page.type';
 import { Port, PortNumber } from '../../../shared/types/ports/port.interface';
 import { ProjectSummary } from '../../../shared/types/project/project.summary';
 import { Tag } from '../../../shared/types/tag.type';
 import { BlockedPillTagComponent } from '../../../shared/widget/pill-tag/blocked-pill-tag.component';
-import { TextMenuComponent } from '../../../shared/widget/text-menu/text-menu.component';
-import { PortsService } from '../../../api/ports/ports.service';
-import { AppHeaderComponent } from '../../../shared/components/page-header/page-header.component';
-import { PanelSectionModule } from '../../../shared/components/panel-section/panel-section.module';
-import { SharedModule } from '../../../shared/shared.module';
-import { Page } from '../../../shared/types/page.type';
 import { NewPillTagComponent } from '../../../shared/widget/pill-tag/new-pill-tag.component';
+import { PillTagComponent } from '../../../shared/widget/pill-tag/pill-tag.component';
+import { TextMenuComponent } from '../../../shared/widget/text-menu/text-menu.component';
 import { SelectItem } from '../../../shared/widget/text-select-menu/text-select-menu.component';
 import { FindingsModule } from '../../findings/findings.module';
 import { PortsInteractionsService } from '../ports-interactions.service';
@@ -75,6 +76,7 @@ import { PortsInteractionsService } from '../ports-interactions.service';
     MatTooltipModule,
     TextMenuComponent,
     BlockedPillTagComponent,
+    PillTagComponent,
   ],
   selector: 'app-view-port',
   templateUrl: './view-port.component.html',

packages/frontend/stalker-app/src/app/modules/tables/cells/table-cell-boolean.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { CustomFindingField } from '../../../shared/types/finding/finding.type';
+import { TableField } from '../../../shared/types/tables/table.type';
+
+@Component({
+  standalone: true,
+  imports: [MatIconModule],
+  selector: 'rk-table-cell-boolean',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div class="tw-max-w-[50px]">
+    @if (isTrue === true) {
+      <mat-icon>check</mat-icon>
+    } @else if (isTrue === false) {
+      <mat-icon>close</mat-icon>
+    }
+  </div>`,
+})
+export class TableCellBooleanComponent {
+  @Input() tableFixeld: TableField | undefined = undefined;
+  @Input() findingFields: CustomFindingField[] | undefined = undefined;
+
+  get isTrue() {
+    if (!this.findingFields) return undefined;
+
+    return this.findingFields.every((x) => x.data?.toLowerCase() === 'true');
+  }
+}

packages/frontend/stalker-app/src/app/modules/tables/cells/table-cell-reputation.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { CustomFindingField } from '../../../shared/types/finding/finding.type';
+import { TableField } from '../../../shared/types/tables/table.type';
+import { PillTagComponent } from '../../../shared/widget/pill-tag/pill-tag.component';
+
+@Component({
+  standalone: true,
+  imports: [MatIconModule, PillTagComponent],
+  selector: 'rk-table-cell-reputation',
+  template: `<div class="tw-max-w-[50px]">
+    @if (findingFields?.[0]?.data === 'High risk') {
+      <app-pill-tag [color]="'#A52330'">{{ findingFields?.[0]?.data }}</app-pill-tag>
+    } @else if (findingFields?.[0]?.data === 'Low risk') {
+      <app-pill-tag [color]="'#9CA523'">{{ findingFields?.[0]?.data }}</app-pill-tag>
+    } @else if (findingFields?.[0]?.data === 'Safe') {
+      <app-pill-tag [color]="'#55A523'">{{ findingFields?.[0]?.data }}</app-pill-tag>
+    }
+  </div>`,
+})
+export class TableCellReputationComponent {
+  @Input() tableFixeld: TableField | undefined = undefined;
+  @Input() findingFields: CustomFindingField[] | undefined = undefined;
+}