updates

Signed-off-by: Vasiliy Tolstov <v.tolstov@unistack.org>

ui/package.json

@@ -5,6 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "devbuild": "ng build --configuration development",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },

ui/src/app/api/models.ts

@@ -7,6 +7,8 @@ export { CommentDeleteRsp } from './models/comment-delete-rsp';
 export { CommentListRsp } from './models/comment-list-rsp';
 export { CommentLookupRsp } from './models/comment-lookup-rsp';
 export { ErrorRsp } from './models/error-rsp';
+export { Handler } from './models/handler';
+export { HandlerListRsp } from './models/handler-list-rsp';
 export { Module } from './models/module';
 export { ModuleListRsp } from './models/module-list-rsp';
 export { Package } from './models/package';

ui/src/app/api/models/handler-list-rsp.ts

@@ -0,0 +1,6 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Handler } from './handler';
+export interface HandlerListRsp {
+  handlers?: Array<Handler>;
+}

ui/src/app/api/models/handler.ts

@@ -0,0 +1,8 @@
+/* tslint:disable */
+/* eslint-disable */
+export interface Handler {
+  coverage?: number;
+  id?: number;
+  name?: string;
+  package?: number;
+}

ui/src/app/api/models/package-create-req.ts

@@ -1,7 +1,7 @@
 /* tslint:disable */
 /* eslint-disable */
 export interface PackageCreateReq {
-  modules?: Array<number>;
+  description?: string;
   name?: string;
   url?: string;
 }

ui/src/app/api/models/package-update-req.ts

@@ -1,6 +1,7 @@
 /* tslint:disable */
 /* eslint-disable */
 export interface PackageUpdateReq {
+  coverprofile?: string;
   id?: number;
   issues?: Array<number>;
   modules?: Array<number>;

ui/src/app/api/models/package.ts

@@ -2,13 +2,16 @@
 /* eslint-disable */
 export interface Package {
   comments?: number;
+  coverage?: number;
   created?: string;
   description?: string;
+  handlers?: number;
   id?: number;
   issues?: number;
   last_check?: string;
   modules?: number;
   name?: string;
+  type?: string;
   updated?: string;
   url?: string;
 }

ui/src/app/api/services/pkgdash.service.ts

@@ -15,6 +15,7 @@ import { CommentCreateRsp } from '../models/comment-create-rsp';
 import { CommentDeleteRsp } from '../models/comment-delete-rsp';
 import { CommentListRsp } from '../models/comment-list-rsp';
 import { CommentLookupRsp } from '../models/comment-lookup-rsp';
+import { HandlerListRsp } from '../models/handler-list-rsp';
 import { ModuleListRsp } from '../models/module-list-rsp';
 import { PackageCreateReq } from '../models/package-create-req';
 import { PackageCreateRsp } from '../models/package-create-rsp';
@@ -32,7 +33,7 @@ export class PkgdashService extends BaseService {
   }
 
   /** Path part for operation `commentLookup()` */
-  static readonly CommentLookupPath = '/v1/comments/{id}/comments';
+  static readonly CommentLookupPath = '/v1/comments/{id}';
 
   /**
    * This method provides access to the full `HttpResponse`, allowing access to response headers.
@@ -43,14 +44,14 @@ export class PkgdashService extends BaseService {
   commentLookup$Response(
     params: {
       id: number;
-      package_id?: number;
+      package?: number;
     },
     context?: HttpContext
   ): Observable<StrictHttpResponse<CommentLookupRsp>> {
     const rb = new RequestBuilder(this.rootUrl, PkgdashService.CommentLookupPath, 'get');
     if (params) {
       rb.path('id', params.id, {});
-      rb.query('package_id', params.package_id, {});
+      rb.query('package', params.package, {});
     }
 
     return this.http.request(
@@ -72,7 +73,7 @@ export class PkgdashService extends BaseService {
   commentLookup(
     params: {
       id: number;
-      package_id?: number;
+      package?: number;
     },
     context?: HttpContext
   ): Observable<CommentLookupRsp> {
@@ -92,11 +93,13 @@ export class PkgdashService extends BaseService {
    */
   moduleList$Response(
     params?: {
+      package?: number;
     },
     context?: HttpContext
   ): Observable<StrictHttpResponse<ModuleListRsp>> {
     const rb = new RequestBuilder(this.rootUrl, PkgdashService.ModuleListPath, 'get');
     if (params) {
+      rb.query('package', params.package, {});
     }
 
     return this.http.request(
@@ -117,6 +120,7 @@ export class PkgdashService extends BaseService {
    */
   moduleList(
     params?: {
+      package?: number;
     },
     context?: HttpContext
   ): Observable<ModuleListRsp> {
@@ -421,15 +425,13 @@ export class PkgdashService extends BaseService {
    */
   commentList$Response(
     params: {
-      package: string;
-      package_id?: number;
+      package: number;
     },
     context?: HttpContext
   ): Observable<StrictHttpResponse<CommentListRsp>> {
     const rb = new RequestBuilder(this.rootUrl, PkgdashService.CommentListPath, 'get');
     if (params) {
       rb.path('package', params.package, {});
-      rb.query('package_id', params.package_id, {});
     }
 
     return this.http.request(
@@ -450,8 +452,7 @@ export class PkgdashService extends BaseService {
    */
   commentList(
     params: {
-      package: string;
-      package_id?: number;
+      package: number;
     },
     context?: HttpContext
   ): Observable<CommentListRsp> {
@@ -510,6 +511,53 @@ export class PkgdashService extends BaseService {
     );
   }
 
+  /** Path part for operation `handlerList()` */
+  static readonly HandlerListPath = '/v1/packages/{package}/handlers';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `handlerList()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  handlerList$Response(
+    params: {
+      package: number;
+    },
+    context?: HttpContext
+  ): Observable<StrictHttpResponse<HandlerListRsp>> {
+    const rb = new RequestBuilder(this.rootUrl, PkgdashService.HandlerListPath, 'get');
+    if (params) {
+      rb.path('package', params.package, {});
+    }
+
+    return this.http.request(
+      rb.build({ responseType: 'json', accept: 'application/json', context })
+    ).pipe(
+      filter((r: any): r is HttpResponse<any> => r instanceof HttpResponse),
+      map((r: HttpResponse<any>) => {
+        return r as StrictHttpResponse<HandlerListRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `handlerList$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  handlerList(
+    params: {
+      package: number;
+    },
+    context?: HttpContext
+  ): Observable<HandlerListRsp> {
+    return this.handlerList$Response(params, context).pipe(
+      map((r: StrictHttpResponse<HandlerListRsp>): HandlerListRsp => r.body)
+    );
+  }
+
   /** Path part for operation `packageModules()` */
   static readonly PackageModulesPath = '/v1/packages/{package}/modules';
 

ui/src/app/app-routing.module.ts

@@ -1,10 +1,30 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { PackageListComponent } from './components/package-list/package-list.component';
 import { PackageComponent } from './components/package/package.component';
+import { PackageResolver } from './resolvers/package/package.resolver';
 
 const routes: Routes = [
-  { path: '', component: PackageComponent },
-  { path: '**', component: PackageComponent },
+  {
+    path: 'packages',
+    component: PackageListComponent
+  },
+  {
+    path: 'packages/:id',
+    component: PackageComponent,
+    resolve: {
+      package: PackageResolver,
+    },
+  },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'packages',
+  },
+  {
+   path: '**',
+   redirectTo: 'packages',
+  },
 ];
 
 @NgModule({

ui/src/app/app.module.ts

@@ -26,17 +26,19 @@ import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dial
 import { MatSelectModule } from '@angular/material/select';
 import { MessageService } from './services/message/message.service';
 import { ConfirmService } from './services/confirm/confirm.service';
-import { PackageComponent } from './components/package/package.component';
+import { PackageListComponent } from './components/package-list/package-list.component';
 import { PackagesService } from './services/packages/packages.service';
 import { PkgdashService } from './api/services';
 import { AppConstants } from './app.constants';
+import { PackageComponent } from './components/package/package.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    PackageComponent,
+    PackageListComponent,
     PackageDialogComponent,
     ConfirmDialogComponent,
+    PackageComponent,
   ],
   imports: [
     BrowserModule,

ui/src/app/components/confirm-dialog/confirm-dialog.component.ts

@@ -17,18 +17,18 @@ export class ConfirmDialogComponent implements OnInit {
     private mdDialogRef: MatDialogRef<ConfirmDialogComponent>,
   ) { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
+
 
-  
   public cancel() {
     this.mdDialogRef.close();
   }
-  
+
   public submit(value: any) {
     this.mdDialogRef.close(value);
   }
-  
-  @HostListener("keydown.esc") 
+
+  @HostListener("keydown.esc")
   public onEsc() {
     this.cancel();
   }

ui/src/app/components/package-dialog/package-dialog.component.html

@@ -19,8 +19,8 @@
 </p>
 <p>
   <mat-form-field appearance="standard">
-    <mat-label>Url</mat-label>
-    <input matInput placeholder="http://example:port" formControlName="endpoint" required>
+    <mat-label>URL</mat-label>
+    <input matInput placeholder="http://example:port" formControlName="url" required>
    <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>-->
    <!-- <mat-hint>service name</mat-hint> -->
   </mat-form-field>

ui/src/app/components/package-dialog/package-dialog.component.ts

@@ -10,7 +10,7 @@ import { Package } from 'src/app/api/models/package';
   styleUrls: ['./package-dialog.component.scss']
 })
 export class PackageDialogComponent implements OnInit {
-  
+
   packageForm: UntypedFormGroup = new UntypedFormGroup({});
 
   constructor(@Inject(MAT_DIALOG_DATA) public data: {
@@ -26,14 +26,14 @@ export class PackageDialogComponent implements OnInit {
         url: '',
       }
     }
-   }
+  }
 
   ngOnInit(): void {
     this.packageForm = this.formBuilder.group({
       name: [{ value: this.data.pkg.name, disabled: false },
-        Validators.required,
+      Validators.required,
       ],
-      url: [{ value:this.data.pkg.url, disabled: false },
+      url: [{ value: this.data.pkg.url, disabled: false },
       Validators.compose([
         Validators.required,
         Validators.pattern("(^(http[s]?:\/\/(.*)$))?"),
@@ -48,16 +48,15 @@ export class PackageDialogComponent implements OnInit {
     });
   }
 
-  
   public cancel() {
     this.mdDialogRef.close();
   }
-  
+
   public submit(value: any) {
     this.mdDialogRef.close(value);
   }
-  
-  @HostListener("keydown.esc") 
+
+  @HostListener("keydown.esc")
   public onEsc() {
     this.cancel();
   }

ui/src/app/components/package-list/package-list.component.html

@@ -0,0 +1,82 @@
+<button mat-fab color="primary" (click)="createPackageDialog()">
+  <mat-icon>create</mat-icon>
+</button>
+
+<div class="mat-elevation-z8 mat-app-background" [hidden]="dataSource.loading$ | async">
+
+<mat-form-field>
+  <input matInput type="search" placeholder="Search by name/path" #input>
+</mat-form-field>
+
+<div class="spinner-container" *ngIf="dataSource.loading$ | async">
+  <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+</div>
+
+<table #packagesTable mat-table
+matSort [matSortActive]="sortField" [matSortDirection]="sortOrder"
+(matSortChange)="sortPackages($event)" matSortDisableClear
+ [dataSource]="dataSource" class="mat-elevation-z8 packages-table">
+
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header="Name">Name</th>
+    <td mat-cell *matCellDef="let package">{{package.name}}<br/>{{package.description}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="url">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header="URL">URL</th>
+    <td mat-cell *matCellDef="let package">{{package.url}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="issues">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header="Issues">Issues</th>
+    <td mat-cell *matCellDef="let package">{{package.issues ? package.issues : 0}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="modules">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header="Modules">Modules</th>
+    <td mat-cell *matCellDef="let package">{{package.modules ? package.modules : 0}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="comments">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header="Comments">Comments</th>
+    <td mat-cell *matCellDef="let package">{{package.comments ? package.comments : 0}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="coverage">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header="Coverage">Coverage</th>
+    <td mat-cell *matCellDef="let package">{{package.coverage ? package.coverage : 0}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="handlers">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header="Handlers">Handlers</th>
+    <td mat-cell *matCellDef="let package">{{package.handlers ? package.handlers : 0}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef>Actions</th>
+    <td mat-cell *matCellDef="let package">
+      <button mat-icon-button [matMenuTriggerFor]="menu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="deletePackageDialog(package);">
+          <mat-icon>delete</mat-icon>
+          <span>Delete</span>
+        </button>
+        <button mat-menu-item (click)="updatePackageDialog(package)">
+          <mat-icon>edit</mat-icon>
+          <span>Edit</span>
+        </button>       
+      </mat-menu>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let package; columns: displayedColumns;" routerLink="/packages/{{package.id}}"></tr>
+</table>
+
+<mat-paginator #paginator [length]="10" [pageSize]="itemsCount" [pageSizeOptions]="[10, 20, 30, 50]" showFirstLastButtons>
+
+</mat-paginator>
+
+</div>

ui/src/app/components/package-list/package-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackageListComponent } from './package-list.component';
+
+describe('PackagesComponent', () => {
+  let component: PackageListComponent;
+  let fixture: ComponentFixture<PackageListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PackageListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PackageListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/src/app/components/package-list/package-list.component.ts

@@ -0,0 +1,194 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Package } from '../../api/models/package';
+import { PkgdashService } from '../../api/services/pkgdash.service';
+import { debounceTime, distinctUntilChanged, fromEvent, merge, Observable, of, tap } from 'rxjs';
+import { MatPaginator } from '@angular/material/paginator';
+import { PackagesService } from '../../services/packages/packages.service';
+import { PackagesDataSource } from '../../datasources/packages';
+import { MatSort, Sort, SortDirection } from '@angular/material/sort';
+import { Router } from '@angular/router';
+import { ConfirmService } from 'src/app/services/confirm/confirm.service';
+import { AppConstants } from 'src/app/app.constants';
+import { MessageService } from 'src/app/services/message/message.service';
+import { ErrorRsp, PackageCreateRsp, PackageDeleteRsp, PackageUpdateRsp } from 'src/app/api/models';
+
+
+@Component({
+  selector: 'app-packages',
+  templateUrl: './package-list.component.html',
+  styleUrls: ['./package-list.component.scss'],
+  providers: [PkgdashService, MessageService]
+})
+
+export class PackageListComponent implements OnInit, AfterViewInit {
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild('input') input!: ElementRef;
+
+  selectedPackage?: Package;
+
+  dataSource: PackagesDataSource;
+  selectedRowIndex: any;
+
+  packages$!: Observable<any>;
+
+  public itemsCount = 20;
+  sortField = 'name';
+  sortOrder: SortDirection = 'asc';
+
+  displayedColumns: string[] = ['name', 'modules', 'issues', 'comments', 'coverage', 'handlers', 'actions'];
+
+  constructor(
+    private router: Router,
+    private packageDialog: PackagesService,
+    private pkgdashService: PkgdashService,
+    private confirmDialog: ConfirmService,
+    private messageService: MessageService,
+  ) {
+    this.dataSource = new PackagesDataSource(this.pkgdashService);
+  }
+
+  createPackageDialog(): void {
+    this.packageDialog.open({
+      height: '400px',
+      width: '600px',
+      autoFocus: true,
+      disableClose: false,
+      backdropClass: "package-dialog",
+      data: {
+        title: 'Create package'
+      }
+    });
+
+    this.packageDialog.confirmed().subscribe((data: any) => {
+      if (data) {
+        this.pkgdashService.packageCreate(data)
+          .subscribe({
+            next: (rsp: PackageCreateRsp) => {
+              this.loadPackages();
+              this.reloadComponent();
+              this.messageService.showMessage("package " + rsp.package!.name + " created")
+            },
+            error: (err: ErrorRsp) => {
+              this.messageService.showMessage("package " + data.name + " not created, error " + err.details)
+            }
+          });
+      }
+    });
+  }
+
+  updatePackageDialog(pkg: Package): void {
+    this.packageDialog.open({
+      height: '400px',
+      width: '600px',
+      autoFocus: true,
+      disableClose: false,
+      backdropClass: "package-dialog",
+      data: {
+        pkg: pkg,
+        title: 'Update package ' + pkg.name,
+      }
+    });
+
+    this.packageDialog.confirmed().subscribe((data: any) => {
+      if (data) {
+        this.pkgdashService.packageUpdate({
+          id: pkg.id!,
+          body: data,
+        }).subscribe({
+          next: (rsp: PackageUpdateRsp) => {
+            this.loadPackages();
+            this.reloadComponent();
+            this.messageService.showMessage("package " + data.name + " updated")
+          },
+          error: (err: ErrorRsp) => {
+            this.messageService.showMessage("package " + data.name + " not updated, error " + err.details)
+          }
+        })
+      }
+    });
+  }
+
+  deletePackageDialog(pkg: Package): void {
+    this.confirmDialog.open({
+      height: '200px',
+      width: '300px',
+      autoFocus: true,
+      disableClose: false,
+      backdropClass: "package-dialog",
+      data: {
+        title: 'Delete package ' + pkg.name,
+        message: 'Are you sure?',
+      }
+    });
+
+    this.confirmDialog.confirmed().subscribe((data: any) => {
+      if (data) {
+        this.pkgdashService.packageDelete({
+          id: pkg.id!,
+        }).subscribe({
+          next: (rsp: PackageDeleteRsp) => {
+            this.loadPackages();
+            this.reloadComponent();
+            this.messageService.showMessage("package " + data.name + " deleted")
+          },
+          error: (err: ErrorRsp) => {
+            this.messageService.showMessage("package " + data.name + " not deleted, error " + err.details)
+          }
+        })
+      }
+    })
+  }
+
+  selectPackage(pkg: Package): void {
+    this.selectedPackage = pkg;
+  }
+
+  ngAfterViewInit() {
+
+    fromEvent(this.input.nativeElement, 'keyup')
+      .pipe(
+        debounceTime(AppConstants.SEARCH_DEBOUNCE),
+        distinctUntilChanged(),
+        tap(() => {
+          this.paginator.pageIndex = 0;
+          this.loadPackages();
+        })
+      )
+      .subscribe();
+
+    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
+
+    merge(this.sort.sortChange, this.paginator.page)
+      .pipe(
+        tap(() => this.loadPackages())
+      )
+      .subscribe();
+  }
+
+  public sortPackages(event: Sort): void {
+    this.loadPackages()
+    this.reloadComponent()
+  }
+
+  private reloadComponent(): void {
+    let currentUrl = this.router.url;
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this.router.onSameUrlNavigation = 'reload';
+    this.router.navigate([currentUrl]);
+  }
+
+  private loadPackages(): void {
+    this.dataSource.list(
+      this.input.nativeElement.value,
+      this.sort.active,
+      this.sort.direction,
+      this.paginator.pageIndex,
+      this.paginator.pageSize);
+  }
+
+  ngOnInit(): void {
+    this.dataSource.list('', this.sortField, this.sortOrder, 0, this.itemsCount);
+    this.packages$ = this.dataSource.connect();
+  }
+}

ui/src/app/components/package/package.component.html

@@ -1,53 +1,58 @@
-<button mat-fab color="primary" (click)="createPackageDialog()">
-  <mat-icon>create</mat-icon>
-</button>
+<p>modules</p>
 
-<div class="mat-elevation-z8 mat-app-background" [hidden]="dataSource.loading$ | async">
+<div>
 
-<mat-form-field>
-  <input matInput type="search" placeholder="Search by name/path" #input>
-</mat-form-field>
-
-<div class="spinner-container" *ngIf="dataSource.loading$ | async">
-  <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-</div>
-
-<table #packagesTable mat-table
+<table #handlersTable mat-table
 matSort [matSortActive]="sortField" [matSortDirection]="sortOrder"
-(matSortChange)="sortPackages($event)" matSortDisableClear
+(matSortChange)="sortHandlers($event)" matSortDisableClear
  [dataSource]="dataSource" class="mat-elevation-z8 packages-table">
 
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef mat-sort-header="Name">Name</th>
-    <td mat-cell *matCellDef="let package">{{package.name}}</td>
+    <td mat-cell *matCellDef="let handler">{{handler.name}}</td>
   </ng-container>
 
   <ng-container matColumnDef="coverage">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header="coverage">Coverage</th>
-    <td mat-cell *matCellDef="let package">{{package.coverage}}</td>
-  </ng-container>
-
-  <ng-container matColumnDef="actions">
-    <th mat-header-cell *matHeaderCellDef>Actions</th>
-    <td mat-cell *matCellDef="let operation">
-      <button mat-icon-button [matMenuTriggerFor]="menu">
-        <mat-icon>more_vert</mat-icon>
-      </button>
-      <mat-menu #menu="matMenu">
-        <button mat-menu-item (click)="deletePackageDialog(package);">
-          <mat-icon>delete</mat-icon>
-          <span>Delete</span>
-        </button>
-        <button mat-menu-item (click)="updatePackageDialog(package)">
-          <mat-icon>edit</mat-icon>
-          <span>Edit</span>
-        </button>       
-      </mat-menu>
-    </td>
+    <th mat-header-cell *matHeaderCellDef mat-sort-header="Coverage">Coverage</th>
+    <td mat-cell *matCellDef="let handler">{{handler.coverage}}</td>
   </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="highlight(row)" [ngClass]="{'highlightTableColor': selectedRowIndex == row.id}"></tr>
+  <tr mat-row *matRowDef="let handler; columns: displayedColumns;" routerLink="/packages/{{package.id}}/handlers/{{handler.id}}"></tr>
 </table>
 
-</div>
+<mat-paginator #paginator [length]="10" [pageSize]="itemsCount" [pageSizeOptions]="[10, 20, 30, 50]" showFirstLastButtons>
+
+</mat-paginator>
+
+</div>
+
+<p>modules</p>
+
+
+<div>
+
+  <table #modulesTable mat-table
+  matSort [matSortActive]="sortField" [matSortDirection]="sortOrder"
+  (matSortChange)="sortModules($event)" matSortDisableClear
+   [dataSource]="dataSource" class="mat-elevation-z8 packages-table">
+  
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header="Name">Name</th>
+      <td mat-cell *matCellDef="let handler">{{handler.name}}</td>
+    </ng-container>
+  
+    <ng-container matColumnDef="version">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header="Version">Version</th>
+      <td mat-cell *matCellDef="let module">{{module.version}}</td>
+    </ng-container>
+  
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let module; columns: displayedColumns;"></tr>
+  </table>
+  
+  <mat-paginator #paginator [length]="10" [pageSize]="itemsCount" [pageSizeOptions]="[10, 20, 30, 50]" showFirstLastButtons>
+  
+  </mat-paginator>
+  
+  </div>

ui/src/app/components/package/package.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { PackagesComponent } from './package.component';
+import { PackageComponent } from './package.component';
 
-describe('PackagesComponent', () => {
-  let component: PackagesComponent;
-  let fixture: ComponentFixture<PackagesComponent>;
+describe('PackageComponent', () => {
+  let component: PackageComponent;
+  let fixture: ComponentFixture<PackageComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ PackagesComponent ]
+      declarations: [ PackageComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(PackagesComponent);
+    fixture = TestBed.createComponent(PackageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

ui/src/app/components/package/package.component.ts

@@ -1,171 +1,92 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { Package } from '../../api/models/package';
-import { PkgdashService } from '../../api/services/pkgdash.service';
-import { debounceTime, distinctUntilChanged, fromEvent, merge, Observable, of, tap } from 'rxjs';
-import { MatDialogConfig } from '@angular/material/dialog';
-import { MatIcon } from '@angular/material/icon';
+import { Component, OnInit, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { tap, merge, debounceTime, distinctUntilChanged, fromEvent } from 'rxjs';
+//import { Location } from '@angular/common';
 import { MatPaginator } from '@angular/material/paginator';
-import { PackagesService } from '../../services/packages/packages.service';
-import { PackagesDataSource } from '../../datasources/packages';
 import { MatSort, Sort, SortDirection } from '@angular/material/sort';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ConfirmService } from 'src/app/services/confirm/confirm.service';
 import { AppConstants } from 'src/app/app.constants';
 import { MessageService } from 'src/app/services/message/message.service';
-import { ErrorRsp, PackagesCreateRsp, PackagesDeleteRsp, PackagesUpdateRsp } from 'src/app/api/models';
-
+import { ErrorRsp, Handler, Package } from 'src/app/api/models';
+import { PkgdashService } from 'src/app/api/services';
+import { HandlersDataSource } from 'src/app/datasources/handlers';
 
 @Component({
-  selector: 'app-packages',
+  selector: 'app-package',
   templateUrl: './package.component.html',
   styleUrls: ['./package.component.scss'],
-  providers: [PkgdashService, MessageService]
+  providers: [PkgdashService],
 })
 
-export class PackageComponent implements OnInit {
+export class PackageComponent implements OnInit, AfterViewInit {
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
   @ViewChild('input') input!: ElementRef;
 
-  selectedPackage?: Package;
-  
-  dataSource: PackagesDataSource;
+  package!: Package;
 
-  packages$!: Observable<any>;
-
-  public itemsCount = 20;
+  public itemsCount = 10;
   sortField = 'name';
   sortOrder: SortDirection = 'asc';
 
+  displayedColumns: string[] = ['name', 'coverage'];
+
+  dataSource: HandlersDataSource;
+  selectedRowIndex: any;
+
   constructor(
-    private router: Router,
-    private packageDialog: PackagesService,
+    private route: ActivatedRoute,
+    //private location: Location,
     private pkgdashService: PkgdashService,
-    private confirmDialog: ConfirmService,
     private messageService: MessageService,
-    ) {
-      this.dataSource = new PackagesDataSource(this.pkgdashService);
+  ) {
+    this.dataSource = new HandlersDataSource(this.pkgdashService);
   }
 
-
-  createPackageDialog(): void {
-    this.packageDialog.open({
-      height: '400px',
-      width: '600px',
-      autoFocus: true,
-      disableClose: false,
-      backdropClass: "package-dialog",
-      data: {
-        title: 'Create package'
-      }
-    });
-
-    this.packageDialog.confirmed().subscribe((data: any) => {
-      if (data) {
-        this.pkgdashService.packagesCreate(data)
-        .subscribe({
-          next: (rsp: PackagesCreateRsp) => {
-            this.loadPackages();
-            this.reloadComponent();
-            this.messageService.showMessage("package "+rsp.package!.name+" created")
-          },
-          error: (err: ErrorRsp) => {
-            this.messageService.showMessage("package "+data.name+" not created, error "+ err.details)
-          }
-        });
-      }
-   });
-  }
-
-  updatePackageDialog(pkg: Package): void {
-    this.packageDialog.open({
-      height: '400px',
-      width: '600px',
-      autoFocus: true,
-      disableClose: false,
-      backdropClass: "package-dialog",
-      data: {
-        service: pkg,
-        title: 'Update package '+pkg.name,
-      }
-    });
-
-    this.packageDialog.confirmed().subscribe((data: any) => {
-      if (data) {
-        this.pkgdashService.packagesUpdate({
-          id: pkg.id!,
-          body: data,
-        }).subscribe({
-          next: (rsp: PackagesUpdateRsp) => {
-            this.loadPackages();
-            this.reloadComponent();
-            this.messageService.showMessage("package "+rsp.package!.name+" updated")
-          },
-          error: (err: ErrorRsp) => {
-            this.messageService.showMessage("package "+data.name+" not updated, error "+ err.details)
-          }
-        })
-      }
-   });
-  }
-
-  deletePackageDialog(pkg: Package): void {
-    this.confirmDialog.open({
-      height: '200px',
-      width: '300px',
-      autoFocus: true,
-      disableClose: false,
-      backdropClass: "package-dialog",
-      data: {
-        title: 'Delete package '+pkg.name,
-        message: 'Are you sure?',
-      }
-    });
-
-    this.confirmDialog.confirmed().subscribe((data: any) => {
-      if (data) {
-        this.pkgdashService.packagesDelete({
-          id: pkg.id!,
-        }).subscribe({
-          next: (rsp: PackagesDeleteRsp) => {
-            this.loadPackages();
-            this.reloadComponent();
-            this.messageService.showMessage("package "+data.name+" deleted")
-          },
-          error: (err: ErrorRsp) => {
-            this.messageService.showMessage("package "+data.name+" not deleted, error "+ err.details)
-          }
-        })
-      }
-    })
-  }
-
-  selectPackage(pkg: Package): void {
-    this.selectedPackage = pkg;
+  highlight(row: Handler) {
+    this.selectedRowIndex = row.id;
   }
 
   ngAfterViewInit() {
 
+    fromEvent(this.input.nativeElement, 'keyup')
+      .pipe(
+        debounceTime(AppConstants.SEARCH_DEBOUNCE),
+        distinctUntilChanged(),
+        tap(() => {
+          this.paginator.pageIndex = 0;
+          this.loadHandlers();
+        })
+      )
+      .subscribe();
+
+    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
+
+    merge(this.sort.sortChange, this.paginator.page)
+      .pipe(
+        tap(() => this.loadHandlers())
+      )
+      .subscribe();
   }
 
-  public sortPackages(event: Sort): void {
-    this.loadPackages()
-    this.reloadComponent()
+  public sortHandlers(event: Sort): void {
+    this.loadHandlers()
   }
 
-  private reloadComponent(): void {
-    let currentUrl = this.router.url;
-    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-    this.router.onSameUrlNavigation = 'reload';
-    this.router.navigate([currentUrl]);
+  private loadHandlers(): void {
+    this.dataSource.list(
+      this.package.id!,
+      '',
+      this.sort.active,
+      this.sort.direction,
+      this.paginator.pageIndex,
+      this.paginator.pageSize);
   }
 
-  private loadPackages(): void {
-    this.dataSource.list();
-  }
 
   ngOnInit(): void {
-    this.dataSource.list('', this.sortField, this.sortOrder, 0, this.itemsCount);
-    this.packages$ = this.dataSource.connect();
+    this.package = this.route.snapshot.data['package'];
+    this.dataSource.list(this.package.id!, '', this.sortField, this.sortOrder, 0, this.itemsCount);
+    this.selectedRowIndex = 1;
   }
+
 }

ui/src/app/datasources/handlers.ts

@@ -0,0 +1,53 @@
+import { DataSource } from "@angular/cdk/collections";
+import { Handler } from "../api/models/handler"
+import { BehaviorSubject, Observable, retry, map, catchError, of, finalize } from "rxjs";
+import { PkgdashService } from "../api/services";
+
+export class HandlersDataSource extends DataSource<Handler> {
+
+  private handlerSubject = new BehaviorSubject<Handler[]>([]);
+  private loadingSubject = new BehaviorSubject<boolean>(false);
+
+  public loading$ = this.loadingSubject.asObservable();
+
+  constructor(
+    private pkgdashService: PkgdashService
+  ) {
+    super();
+  }
+
+  connect(): Observable<Handler[]> {
+    return this.handlerSubject.asObservable();
+  }
+
+  disconnect(): void {
+    this.handlerSubject.complete();
+    this.loadingSubject.complete();
+  }
+
+  list(id = 0, filter = '', sortField = 'name', sortOrder = 'asc', page = 0, limit = 20) {
+    this.loadingSubject.next(true);
+    this.pkgdashService.handlerList({package: id}).pipe(
+      retry(2),
+      map(rsp => rsp.handlers || []),
+      catchError(this.handleError('list', [])),
+      finalize(() => this.loadingSubject.next(false))
+    ).subscribe(handlers => this.handlerSubject.next(handlers));
+  }
+
+
+  lookup(id: number, filter: string,
+    sortDirection: string, pageIndex: number, pageSize: number) {
+  }
+
+  private handleError<T>(operation = '', result?: T) {
+    return (error: any): Observable<T> => {
+
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      // Let the app keep running by returning an empty result.
+      return of(result as T);
+    };
+  };
+}

ui/src/app/datasources/packages.ts

@@ -1,53 +1,52 @@
-import { CollectionViewer, DataSource } from "@angular/cdk/collections";
+import { DataSource } from "@angular/cdk/collections";
 import { Package } from "../api/models/package"
 import { BehaviorSubject, Observable, retry, map, catchError, of, finalize } from "rxjs";
 import { PkgdashService } from "../api/services";
 
 export class PackagesDataSource extends DataSource<Package> {
 
-    private packageSubject = new BehaviorSubject<Package[]>([]);
-    private loadingSubject = new BehaviorSubject<boolean>(false);
+  private packageSubject = new BehaviorSubject<Package[]>([]);
+  private loadingSubject = new BehaviorSubject<boolean>(false);
 
-    public loading$ = this.loadingSubject.asObservable();
+  public loading$ = this.loadingSubject.asObservable();
 
-    constructor(
-      private pkgdashService: PkgdashService
-    ) {
-      super();
-    }
+  constructor(
+    private pkgdashService: PkgdashService
+  ) {
+    super();
+  }
 
-    connect(): Observable<Package[]> {
-      return this.packageSubject.asObservable();
-    }
+  connect(): Observable<Package[]> {
+    return this.packageSubject.asObservable();
+  }
 
-    disconnect(): void {
-      this.packageSubject.complete();
-      this.loadingSubject.complete();
-    }
+  disconnect(): void {
+    this.packageSubject.complete();
+    this.loadingSubject.complete();
+  }
 
-    list(filter = '', sortField = 'name', sortOrder = 'asc', page = 0, limit = 20) {
-      this.loadingSubject.next(true);
-      this.pkgdashService.packagesList().pipe(
-        retry(2),
-        map(rsp => rsp.packages || []),
-        catchError(this.handleError('getPackages', [])),
-        finalize(() => this.loadingSubject.next(false))
-      ).subscribe(packages => this.packageSubject.next(packages));
-    }
-  
-    lookup(id: string, filter: string,
-                sortDirection: string, pageIndex: number, pageSize: number) {
-      
-    }  
+  list(filter = '', sortField = 'name', sortOrder = 'asc', page = 0, limit = 20) {
+    this.loadingSubject.next(true);
+    this.pkgdashService.packageList().pipe(
+      retry(2),
+      map(rsp => rsp.packages || []),
+      catchError(this.handleError('list', [])),
+      finalize(() => this.loadingSubject.next(false))
+    ).subscribe(packages => this.packageSubject.next(packages));
+  }
 
-    private handleError<T>(operation = 'operation', result?: T) {
-      return (error: any): Observable<T> => {
-  
-        // TODO: send the error to remote logging infrastructure
-        console.error(error); // log to console instead
-  
-        // Let the app keep running by returning an empty result.
-        return of(result as T);
-      };
+  lookup(id: number, filter: string,
+    sortDirection: string, pageIndex: number, pageSize: number) {
+  }
+
+  private handleError<T>(operation = '', result?: T) {
+    return (error: any): Observable<T> => {
+
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      // Let the app keep running by returning an empty result.
+      return of(result as T);
     };
+  };
 }

ui/src/app/resolvers/package/package.resolver.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PackageResolver } from './package.resolver';
+
+describe('PackageResolver', () => {
+  let resolver: PackageResolver;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    resolver = TestBed.inject(PackageResolver);
+  });
+
+  it('should be created', () => {
+    expect(resolver).toBeTruthy();
+  });
+});

ui/src/app/resolvers/package/package.resolver.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import {
+  Router, Resolve,
+  RouterStateSnapshot,
+  ActivatedRouteSnapshot
+} from '@angular/router';
+import { Package } from "../../api/models/package";
+import { map, Observable, of } from "rxjs";
+import { PkgdashService } from '../../api/services/pkgdash.service';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class PackageResolver implements Resolve<Package> {
+
+  constructor(private pkgdashService: PkgdashService) { }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Package> {
+    console.log("resolver with "+ route.paramMap.get('id'));
+    let id = Number(route.paramMap.get('id'));
+
+    return this.pkgdashService.packageLookup({ id: id }).pipe(
+      map(rsp => rsp.package!)
+    );
+  }
+}

ui/src/app/services/confirm/confirm.service.ts

@@ -13,16 +13,15 @@ export class ConfirmService {
   constructor(
     private dialog: MatDialog
   ) { }
-  
-  
+
   public open(options: MatDialogConfig) {
     this.dialogRef = this.dialog.open(ConfirmDialogComponent, options);
   }
-  
+
   public confirmed(): Observable<any> {
     return this.dialogRef.afterClosed().pipe(take(1), map(res => {
-        return res;
-      }
+      return res;
+    }
     ));
   }
 }

ui/src/app/services/message/message.service.ts

@@ -9,7 +9,7 @@ export class MessageService {
 
   constructor(
     private snackbar: MatSnackBar,
-    ) {
+  ) {
   }
 
   showMessage(message: string, action?: string, config?: MatSnackBarConfig) {

ui/src/app/services/packages/packages.service.ts

@@ -13,16 +13,15 @@ export class PackagesService {
   constructor(
     private dialog: MatDialog
   ) { }
-  
-  
+
   public open(options: MatDialogConfig) {
     this.dialogRef = this.dialog.open(PackageDialogComponent, options);
   }
-  
+
   public confirmed(): Observable<any> {
     return this.dialogRef.afterClosed().pipe(take(1), map(res => {
-        return res;
-      }
+      return res;
+    }
     ));
   }
 }

ui/src/environments/environment.ts

@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
+import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

ui/src/styles.scss

@@ -1,4 +1,40 @@
 /* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+.mat-table {
+  overflow-x: scroll;
+  display: table;
+  width: 100%;
+}
+.mat-cell,
+.mat-header-cell {
+  word-wrap: initial;
+  display: table-cell;
+  padding: 0px 4px 4px 4px;
+  line-break: unset;
+  width: auto; 
+  white-space: nowrap;
+  overflow: hidden;
+  vertical-align: middle;
+}
+.mat-row,
+.mat-header-row {
+  display: table-row;
+}
+
+.mat-mdc-row .mat-mdc-cell {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  cursor: pointer;
+}
+
+.mat-mdc-row:hover .mat-mdc-cell {
+  border-color: currentColor;
+}
+
+.demo-row-is-clicked {
+  font-weight: bold;
+}