#19 reset HEAD

2024-12-18 21:16:11 +03:00
parent 3d8504bf80
commit 8e633fe83f
156 changed files with 159196 additions and 42 deletions
--- a/ui/.browserslistrc
+++ b/ui/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
--- a/ui/.dockerignore
+++ b/ui/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+*/node_modules
+**/node_modules
--- a/ui/.editorconfig
+++ b/ui/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
--- a/ui/README.md
+++ b/ui/README.md
@@ -0,0 +1,27 @@
+# Ui
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
--- a/ui/angular.json
+++ b/ui/angular.json
@@ -0,0 +1,115 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ui": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/ui",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "ui:build:production"
+            },
+            "development": {
+              "browserTarget": "ui:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ui:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
--- a/ui/karma.conf.js
+++ b/ui/karma.conf.js
@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/ui'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
--- a/ui/package.json
+++ b/ui/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "ui",
+  "version": "0.0.1",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "devbuild": "ng build --configuration development",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^14.3.0",
+    "@angular/cdk": "^13.0.0",
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0",
+    "@angular/forms": "^14.3.0",
+    "@angular/material": "^13.0.0",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/router": "^14.3.0",
+    "ng-openapi-gen": "^0.25.1",
+    "rxjs": "~7.4.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.2.12",
+    "@angular/cli": "^14.2.12",
+    "@angular/compiler-cli": "^14.3.0",
+    "@types/jasmine": "~3.10.0",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~3.10.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.1.0",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "typescript": "~4.8.4"
+  }
+}
--- a/ui/src/app/api/api-configuration.ts
+++ b/ui/src/app/api/api-configuration.ts
@@ -0,0 +1,20 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Injectable } from '@angular/core';
+
+/**
+ * Global configuration
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class ApiConfiguration {
+  rootUrl: string = '';
+}
+
+/**
+ * Parameters for `ApiModule.forRoot()`
+ */
+export interface ApiConfigurationParams {
+  rootUrl?: string;
+}
--- a/ui/src/app/api/api.module.ts
+++ b/ui/src/app/api/api.module.ts
@@ -0,0 +1,46 @@
+/* tslint:disable */
+/* eslint-disable */
+import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { ApiConfiguration, ApiConfigurationParams } from './api-configuration';
+
+import { PkgdashService } from './services/pkgdash.service';
+
+/**
+ * Module that provides all services and configuration.
+ */
+@NgModule({
+  imports: [],
+  exports: [],
+  declarations: [],
+  providers: [
+    PkgdashService,
+    ApiConfiguration
+  ],
+})
+export class ApiModule {
+  static forRoot(params: ApiConfigurationParams): ModuleWithProviders<ApiModule> {
+    return {
+      ngModule: ApiModule,
+      providers: [
+        {
+          provide: ApiConfiguration,
+          useValue: params
+        }
+      ]
+    }
+  }
+
+  constructor( 
+    @Optional() @SkipSelf() parentModule: ApiModule,
+    @Optional() http: HttpClient
+  ) {
+    if (parentModule) {
+      throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+    }
+    if (!http) {
+      throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+      'See also https://github.com/angular/angular/issues/20575');
+    }
+  }
+}
--- a/ui/src/app/api/base-service.ts
+++ b/ui/src/app/api/base-service.ts
@@ -0,0 +1,34 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { ApiConfiguration } from './api-configuration';
+
+/**
+ * Base class for services
+ */
+@Injectable()
+export class BaseService {
+  constructor(
+    protected config: ApiConfiguration,
+    protected http: HttpClient
+  ) {
+  }
+
+  private _rootUrl: string = '';
+
+  /**
+   * Returns the root url for all operations in this service. If not set directly in this
+   * service, will fallback to `ApiConfiguration.rootUrl`.
+   */
+  get rootUrl(): string {
+    return this._rootUrl || this.config.rootUrl;
+  }
+
+  /**
+   * Sets the root URL for API operations in this service.
+   */
+  set rootUrl(rootUrl: string) {
+    this._rootUrl = rootUrl;
+  }
+}
--- a/ui/src/app/api/models.ts
+++ b/ui/src/app/api/models.ts
@@ -0,0 +1,22 @@
+/* tslint:disable */
+/* eslint-disable */
+export { Comment } from './models/comment';
+export { CommentCreateReq } from './models/comment-create-req';
+export { CommentCreateRsp } from './models/comment-create-rsp';
+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';
+export { PackageCreateReq } from './models/package-create-req';
+export { PackageCreateRsp } from './models/package-create-rsp';
+export { PackageDeleteRsp } from './models/package-delete-rsp';
+export { PackageListRsp } from './models/package-list-rsp';
+export { PackageLookupRsp } from './models/package-lookup-rsp';
+export { PackageModulesRsp } from './models/package-modules-rsp';
+export { PackageUpdateReq } from './models/package-update-req';
+export { PackageUpdateRsp } from './models/package-update-rsp';
--- a/ui/src/app/api/models/comment-create-req.ts
+++ b/ui/src/app/api/models/comment-create-req.ts
@@ -0,0 +1,6 @@
+/* tslint:disable */
+/* eslint-disable */
+export interface CommentCreateReq {
+  comment?: string;
+  package_id?: number;
+}
--- a/ui/src/app/api/models/comment-create-rsp.ts
+++ b/ui/src/app/api/models/comment-create-rsp.ts
@@ -0,0 +1,6 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Comment } from './comment';
+export interface CommentCreateRsp {
+  comment?: Comment;
+}
--- a/ui/src/app/api/models/comment-delete-rsp.ts
+++ b/ui/src/app/api/models/comment-delete-rsp.ts
@@ -0,0 +1,4 @@
+/* tslint:disable */
+/* eslint-disable */
+export interface CommentDeleteRsp {
+}
--- a/ui/src/app/api/models/comment-list-rsp.ts
+++ b/ui/src/app/api/models/comment-list-rsp.ts
@@ -0,0 +1,6 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Comment } from './comment';
+export interface CommentListRsp {
+  comments?: Array<Comment>;
+}
--- a/ui/src/app/api/models/comment-lookup-rsp.ts
+++ b/ui/src/app/api/models/comment-lookup-rsp.ts
@@ -0,0 +1,6 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Comment } from './comment';
+export interface CommentLookupRsp {
+  comment?: Comment;
+}
--- a/ui/src/app/api/models/comment.ts
+++ b/ui/src/app/api/models/comment.ts
@@ -0,0 +1,9 @@
+/* tslint:disable */
+/* eslint-disable */
+export interface Comment {
+  comment?: string;
+  created?: string;
+  id?: number;
+  package?: number;
+  updated?: string;
+}
--- a/ui/src/app/api/models/error-rsp.ts
+++ b/ui/src/app/api/models/error-rsp.ts
@@ -0,0 +1,8 @@
+/* tslint:disable */
+/* eslint-disable */
+export interface ErrorRsp {
+  code?: string;
+  details?: string;
+  title?: string;
+  uuid?: string;
+}
--- a/ui/src/app/api/models/handler-list-rsp.ts
+++ b/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>;
+}
--- a/ui/src/app/api/models/handler.ts
+++ b/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;
+}
--- a/ui/src/app/api/models/module-list-rsp.ts
+++ b/ui/src/app/api/models/module-list-rsp.ts
@@ -0,0 +1,6 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Module } from './module';
+export interface ModuleListRsp {
+  modules?: Array<Module>;
+}
--- a/ui/src/app/api/models/module.ts
+++ b/ui/src/app/api/models/module.ts
@@ -0,0 +1,8 @@
+/* tslint:disable */
+/* eslint-disable */
+export interface Module {
+  id?: number;
+  last_check?: string;
+  name?: string;
+  version?: string;
+}
--- a/ui/src/app/api/models/package-create-req.ts
+++ b/ui/src/app/api/models/package-create-req.ts
@@ -0,0 +1,7 @@
+/* tslint:disable */
+/* eslint-disable */
+export interface PackageCreateReq {
+  description?: string;
+  name?: string;
+  url?: string;
+}
--- a/ui/src/app/api/models/package-create-rsp.ts
+++ b/ui/src/app/api/models/package-create-rsp.ts
@@ -0,0 +1,6 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Package } from './package';
+export interface PackageCreateRsp {
+  package?: Package;
+}
--- a/ui/src/app/api/models/package-delete-rsp.ts
+++ b/ui/src/app/api/models/package-delete-rsp.ts
@@ -0,0 +1,4 @@
+/* tslint:disable */
+/* eslint-disable */
+export interface PackageDeleteRsp {
+}
--- a/ui/src/app/api/models/package-list-rsp.ts
+++ b/ui/src/app/api/models/package-list-rsp.ts
@@ -0,0 +1,6 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Package } from './package';
+export interface PackageListRsp {
+  packages?: Array<Package>;
+}
--- a/ui/src/app/api/models/package-lookup-rsp.ts
+++ b/ui/src/app/api/models/package-lookup-rsp.ts
@@ -0,0 +1,6 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Package } from './package';
+export interface PackageLookupRsp {
+  package?: Package;
+}
--- a/ui/src/app/api/models/package-modules-rsp.ts
+++ b/ui/src/app/api/models/package-modules-rsp.ts
@@ -0,0 +1,6 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Module } from './module';
+export interface PackageModulesRsp {
+  modules?: Array<Module>;
+}
--- a/ui/src/app/api/models/package-update-req.ts
+++ b/ui/src/app/api/models/package-update-req.ts
@@ -0,0 +1,10 @@
+/* tslint:disable */
+/* eslint-disable */
+export interface PackageUpdateReq {
+  coverprofile?: string;
+  id?: number;
+  issues?: Array<number>;
+  modules?: Array<number>;
+  name?: string;
+  url?: string;
+}
--- a/ui/src/app/api/models/package-update-rsp.ts
+++ b/ui/src/app/api/models/package-update-rsp.ts
@@ -0,0 +1,6 @@
+/* tslint:disable */
+/* eslint-disable */
+import { Package } from './package';
+export interface PackageUpdateRsp {
+  package?: Package;
+}
--- a/ui/src/app/api/models/package.ts
+++ b/ui/src/app/api/models/package.ts
@@ -0,0 +1,17 @@
+/* tslint:disable */
+/* 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;
+}
--- a/ui/src/app/api/request-builder.ts
+++ b/ui/src/app/api/request-builder.ts
@@ -0,0 +1,368 @@
+/* tslint:disable */
+/* eslint-disable */
+import { HttpRequest, HttpParameterCodec, HttpParams, HttpHeaders, HttpContext } from '@angular/common/http';
+
+/**
+ * Custom parameter codec to correctly handle the plus sign in parameter
+ * values. See https://github.com/angular/angular/issues/18261
+ */
+class ParameterCodec implements HttpParameterCodec {
+  encodeKey(key: string): string {
+    return encodeURIComponent(key);
+  }
+
+  encodeValue(value: string): string {
+    return encodeURIComponent(value);
+  }
+
+  decodeKey(key: string): string {
+    return decodeURIComponent(key);
+  }
+
+  decodeValue(value: string): string {
+    return decodeURIComponent(value);
+  }
+}
+const ParameterCodecInstance = new ParameterCodec();
+
+/**
+ * Defines the options for appending a parameter
+ */
+interface ParameterOptions {
+  style?: string;
+  explode?: boolean;
+}
+
+/**
+ * Base class for a parameter
+ */
+abstract class Parameter {
+  constructor(public name: string, public value: any, public options: ParameterOptions, defaultStyle: string, defaultExplode: boolean) {
+    this.options = options || {};
+    if (this.options.style === null || this.options.style === undefined) {
+      this.options.style = defaultStyle;
+    }
+    if (this.options.explode === null || this.options.explode === undefined) {
+      this.options.explode = defaultExplode;
+    }
+  }
+
+  serializeValue(value: any, separator = ','): string {
+    if (value === null || value === undefined) {
+      return '';
+    } else if (value instanceof Array) {
+      return value.map(v => this.serializeValue(v).split(separator).join(encodeURIComponent(separator))).join(separator);
+    } else if (typeof value === 'object') {
+      const array: string[] = [];
+      for (const key of Object.keys(value)) {
+        let propVal = value[key];
+        if (propVal !== null && propVal !== undefined) {
+          propVal = this.serializeValue(propVal).split(separator).join(encodeURIComponent(separator));
+          if (this.options.explode) {
+            array.push(`${key}=${propVal}`);
+          } else {
+            array.push(key);
+            array.push(propVal);
+          }
+        }
+      }
+      return array.join(separator);
+    } else {
+      return String(value);
+    }
+  }
+}
+
+/**
+ * A parameter in the operation path
+ */
+class PathParameter extends Parameter {
+  constructor(name: string, value: any, options: ParameterOptions) {
+    super(name, value, options, 'simple', false);
+  }
+
+  append(path: string): string {
+    let value = this.value;
+    if (value === null || value === undefined) {
+      value = '';
+    }
+    let prefix = this.options.style === 'label' ? '.' : '';
+    let separator = this.options.explode ? prefix === '' ? ',' : prefix : ',';
+    let alreadySerialized = false;
+    if (this.options.style === 'matrix') {
+      // The parameter name is just used as prefix, except in some cases...
+      prefix = `;${this.name}=`;
+      if (this.options.explode && typeof value === 'object') {
+        prefix = ';';
+        if (value instanceof Array) {
+          // For arrays we have to repeat the name for each element
+          value = value.map(v => `${this.name}=${this.serializeValue(v, ';')}`);
+          value = value.join(';');
+          alreadySerialized = true;
+        } else {
+          // For objects we have to put each the key / value pairs
+          value = this.serializeValue(value, ';');
+          alreadySerialized = true
+        }
+      }
+    }
+    value = prefix + (alreadySerialized ? value : this.serializeValue(value, separator));
+    // Replace both the plain variable and the corresponding variant taking in the prefix and explode into account
+    path = path.replace(`{${this.name}}`, value);
+    path = path.replace(`{${prefix}${this.name}${this.options.explode ? '*' : ''}}`, value);
+    return path;
+  }
+
+  // @ts-ignore
+  serializeValue(value: any, separator = ','): string {
+    var result = typeof value === 'string' ? encodeURIComponent(value) : super.serializeValue(value, separator);
+    result = result.replace(/%3D/g, '=');
+    result = result.replace(/%3B/g, ';');
+    result = result.replace(/%2C/g, ',');
+    return result;
+  }
+}
+
+/**
+ * A parameter in the query
+ */
+class QueryParameter extends Parameter {
+  constructor(name: string, value: any, options: ParameterOptions) {
+    super(name, value, options, 'form', true);
+  }
+
+  append(params: HttpParams): HttpParams {
+    if (this.value instanceof Array) {
+      // Array serialization
+      if (this.options.explode) {
+        for (const v of this.value) {
+          params = params.append(this.name, this.serializeValue(v));
+        }
+      } else {
+        const separator = this.options.style === 'spaceDelimited'
+          ? ' ' : this.options.style === 'pipeDelimited'
+            ? '|' : ',';
+        return params.append(this.name, this.serializeValue(this.value, separator));
+      }
+    } else if (this.value !== null && typeof this.value === 'object') {
+      // Object serialization
+      if (this.options.style === 'deepObject') {
+        // Append a parameter for each key, in the form `name[key]`
+        for (const key of Object.keys(this.value)) {
+          const propVal = this.value[key];
+          if (propVal !== null && propVal !== undefined) {
+            params = params.append(`${this.name}[${key}]`, this.serializeValue(propVal));
+          }
+        }
+      } else if (this.options.explode) {
+        // Append a parameter for each key without using the parameter name
+        for (const key of Object.keys(this.value)) {
+          const propVal = this.value[key];
+          if (propVal !== null && propVal !== undefined) {
+            params = params.append(key, this.serializeValue(propVal));
+          }
+        }
+      } else {
+        // Append a single parameter whose values are a comma-separated list of key,value,key,value...
+        const array: any[] = [];
+        for (const key of Object.keys(this.value)) {
+          const propVal = this.value[key];
+          if (propVal !== null && propVal !== undefined) {
+            array.push(key);
+            array.push(propVal);
+          }
+        }
+        params = params.append(this.name, this.serializeValue(array));
+      }
+    } else if (this.value !== null && this.value !== undefined) {
+      // Plain value
+      params = params.append(this.name, this.serializeValue(this.value));
+    }
+    return params;
+  }
+}
+
+/**
+ * A parameter in the HTTP request header
+ */
+class HeaderParameter extends Parameter {
+  constructor(name: string, value: any, options: ParameterOptions) {
+    super(name, value, options, 'simple', false);
+  }
+
+  append(headers: HttpHeaders): HttpHeaders {
+    if (this.value !== null && this.value !== undefined) {
+      if (this.value instanceof Array) {
+        for (const v of this.value) {
+          headers = headers.append(this.name, this.serializeValue(v));
+        }
+      } else {
+        headers = headers.append(this.name, this.serializeValue(this.value));
+      }
+    }
+    return headers;
+  }
+}
+
+/**
+ * Helper to build http requests from parameters
+ */
+export class RequestBuilder {
+
+  private _path = new Map<string, PathParameter>();
+  private _query = new Map<string, QueryParameter>();
+  private _header = new Map<string, HeaderParameter>();
+  _bodyContent: any | null;
+  _bodyContentType?: string;
+
+  constructor(
+    public rootUrl: string,
+    public operationPath: string,
+    public method: string) {
+  }
+
+  /**
+   * Sets a path parameter
+   */
+  path(name: string, value: any, options?: ParameterOptions): void {
+    this._path.set(name, new PathParameter(name, value, options || {}));
+  }
+
+  /**
+   * Sets a query parameter
+   */
+  query(name: string, value: any, options?: ParameterOptions): void {
+    this._query.set(name, new QueryParameter(name, value, options || {}));
+  }
+
+  /**
+   * Sets a header parameter
+   */
+  header(name: string, value: any, options?: ParameterOptions): void {
+    this._header.set(name, new HeaderParameter(name, value, options || {}));
+  }
+
+  /**
+   * Sets the body content, along with the content type
+   */
+  body(value: any, contentType = 'application/json'): void {
+    if (value instanceof Blob) {
+      this._bodyContentType = value.type;
+    } else {
+      this._bodyContentType = contentType;
+    }
+    if (this._bodyContentType === 'application/x-www-form-urlencoded' && value !== null && typeof value === 'object') {
+      // Handle URL-encoded data
+      const pairs: Array<[string, string]> = [];
+      for (const key of Object.keys(value)) {
+        let val = value[key];
+        if (!(val instanceof Array)) {
+          val = [val];
+        }
+        for (const v of val) {
+          const formValue = this.formDataValue(v);
+          if (formValue !== null) {
+            pairs.push([key, formValue]);
+          }
+        }
+      }
+      this._bodyContent = pairs.map(p => `${encodeURIComponent(p[0])}=${encodeURIComponent(p[1])}`).join('&');
+    } else if (this._bodyContentType === 'multipart/form-data') {
+      // Handle multipart form data
+      const formData = new FormData();
+      if (value !== null && value !== undefined) {
+        for (const key of Object.keys(value)) {
+          const val = value[key];
+          if (val instanceof Array) {
+            for (const v of val) {
+              const toAppend = this.formDataValue(v);
+              if (toAppend !== null) {
+                formData.append(key, toAppend);
+              }
+            }
+          } else {
+            const toAppend = this.formDataValue(val);
+            if (toAppend !== null) {
+              formData.set(key, toAppend);
+            }
+          }
+        }
+      }
+      this._bodyContent = formData;
+    } else {
+      // The body is the plain content
+      this._bodyContent = value;
+    }
+  }
+
+  private formDataValue(value: any): any {
+    if (value === null || value === undefined) {
+      return null;
+    }
+    if (value instanceof Blob) {
+      return value;
+    }
+    if (typeof value === 'object') {
+      return JSON.stringify(value);
+    }
+    return String(value);
+  }
+
+  /**
+   * Builds the request with the current set parameters
+   */
+  build<T = any>(options?: {
+    /** Which content types to accept */
+    accept?: string;
+
+    /** The expected response type */
+    responseType?: 'json' | 'text' | 'blob' | 'arraybuffer';
+
+    /** Whether to report progress on uploads / downloads */
+    reportProgress?: boolean;
+
+    /** Allow passing HttpContext for HttpClient */
+    context?: HttpContext;
+  }): HttpRequest<T> {
+
+    options = options || {};
+
+    // Path parameters
+    let path = this.operationPath;
+    for (const pathParam of this._path.values()) {
+      path = pathParam.append(path);
+    }
+    const url = this.rootUrl + path;
+
+    // Query parameters
+    let httpParams = new HttpParams({
+      encoder: ParameterCodecInstance
+    });
+    for (const queryParam of this._query.values()) {
+      httpParams = queryParam.append(httpParams);
+    }
+
+    // Header parameters
+    let httpHeaders = new HttpHeaders();
+    if (options.accept) {
+      httpHeaders = httpHeaders.append('Accept', options.accept);
+    }
+    for (const headerParam of this._header.values()) {
+      httpHeaders = headerParam.append(httpHeaders);
+    }
+
+    // Request content headers
+    if (this._bodyContentType && !(this._bodyContent instanceof FormData)) {
+      httpHeaders = httpHeaders.set('Content-Type', this._bodyContentType);
+    }
+
+    // Perform the request
+    return new HttpRequest<T>(this.method.toUpperCase(), url, this._bodyContent, {
+      params: httpParams,
+      headers: httpHeaders,
+      responseType: options.responseType,
+      reportProgress: options.reportProgress,
+      context: options.context
+    });
+  }
+}
--- a/ui/src/app/api/services.ts
+++ b/ui/src/app/api/services.ts
@@ -0,0 +1 @@
+export { PkgdashService } from './services/pkgdash.service';
--- a/ui/src/app/api/services/pkgdash.service.ts
+++ b/ui/src/app/api/services/pkgdash.service.ts
@@ -0,0 +1,608 @@
+/* tslint:disable */
+/* eslint-disable */
+import { HttpClient, HttpContext, HttpResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+
+import { BaseService } from '../base-service';
+import { ApiConfiguration } from '../api-configuration';
+import { StrictHttpResponse } from '../strict-http-response';
+import { RequestBuilder } from '../request-builder';
+
+import { CommentCreateReq } from '../models/comment-create-req';
+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';
+import { PackageDeleteRsp } from '../models/package-delete-rsp';
+import { PackageListRsp } from '../models/package-list-rsp';
+import { PackageLookupRsp } from '../models/package-lookup-rsp';
+import { PackageModulesRsp } from '../models/package-modules-rsp';
+import { PackageUpdateReq } from '../models/package-update-req';
+import { PackageUpdateRsp } from '../models/package-update-rsp';
+
+@Injectable({ providedIn: 'root' })
+export class PkgdashService extends BaseService {
+  constructor(config: ApiConfiguration, http: HttpClient) {
+    super(config, http);
+  }
+
+  /** Path part for operation `commentLookup()` */
+  static readonly CommentLookupPath = '/v1/comments/{id}';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `commentLookup()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  commentLookup$Response(
+    params: {
+      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', 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<CommentLookupRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `commentLookup$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  commentLookup(
+    params: {
+      id: number;
+      package?: number;
+    },
+    context?: HttpContext
+  ): Observable<CommentLookupRsp> {
+    return this.commentLookup$Response(params, context).pipe(
+      map((r: StrictHttpResponse<CommentLookupRsp>): CommentLookupRsp => r.body)
+    );
+  }
+
+  /** Path part for operation `moduleList()` */
+  static readonly ModuleListPath = '/v1/modules';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `moduleList()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  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(
+      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<ModuleListRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `moduleList$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  moduleList(
+    params?: {
+      package?: number;
+    },
+    context?: HttpContext
+  ): Observable<ModuleListRsp> {
+    return this.moduleList$Response(params, context).pipe(
+      map((r: StrictHttpResponse<ModuleListRsp>): ModuleListRsp => r.body)
+    );
+  }
+
+  /** Path part for operation `packageList()` */
+  static readonly PackageListPath = '/v1/packages';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `packageList()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  packageList$Response(
+    params?: {
+    },
+    context?: HttpContext
+  ): Observable<StrictHttpResponse<PackageListRsp>> {
+    const rb = new RequestBuilder(this.rootUrl, PkgdashService.PackageListPath, 'get');
+    if (params) {
+    }
+
+    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<PackageListRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `packageList$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  packageList(
+    params?: {
+    },
+    context?: HttpContext
+  ): Observable<PackageListRsp> {
+    return this.packageList$Response(params, context).pipe(
+      map((r: StrictHttpResponse<PackageListRsp>): PackageListRsp => r.body)
+    );
+  }
+
+  /** Path part for operation `packageCreate()` */
+  static readonly PackageCreatePath = '/v1/packages';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `packageCreate()` instead.
+   *
+   * This method sends `application/json` and handles request body of type `application/json`.
+   */
+  packageCreate$Response(
+    params: {
+      body: PackageCreateReq
+    },
+    context?: HttpContext
+  ): Observable<StrictHttpResponse<PackageCreateRsp>> {
+    const rb = new RequestBuilder(this.rootUrl, PkgdashService.PackageCreatePath, 'post');
+    if (params) {
+      rb.body(params.body, 'application/json');
+    }
+
+    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<PackageCreateRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `packageCreate$Response()` instead.
+   *
+   * This method sends `application/json` and handles request body of type `application/json`.
+   */
+  packageCreate(
+    params: {
+      body: PackageCreateReq
+    },
+    context?: HttpContext
+  ): Observable<PackageCreateRsp> {
+    return this.packageCreate$Response(params, context).pipe(
+      map((r: StrictHttpResponse<PackageCreateRsp>): PackageCreateRsp => r.body)
+    );
+  }
+
+  /** Path part for operation `packageLookup()` */
+  static readonly PackageLookupPath = '/v1/packages/{id}';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `packageLookup()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  packageLookup$Response(
+    params: {
+      id: number;
+    },
+    context?: HttpContext
+  ): Observable<StrictHttpResponse<PackageLookupRsp>> {
+    const rb = new RequestBuilder(this.rootUrl, PkgdashService.PackageLookupPath, 'get');
+    if (params) {
+      rb.path('id', params.id, {});
+    }
+
+    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<PackageLookupRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `packageLookup$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  packageLookup(
+    params: {
+      id: number;
+    },
+    context?: HttpContext
+  ): Observable<PackageLookupRsp> {
+    return this.packageLookup$Response(params, context).pipe(
+      map((r: StrictHttpResponse<PackageLookupRsp>): PackageLookupRsp => r.body)
+    );
+  }
+
+  /** Path part for operation `packageUpdate()` */
+  static readonly PackageUpdatePath = '/v1/packages/{id}';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `packageUpdate()` instead.
+   *
+   * This method sends `application/json` and handles request body of type `application/json`.
+   */
+  packageUpdate$Response(
+    params: {
+      id: number;
+      body: PackageUpdateReq
+    },
+    context?: HttpContext
+  ): Observable<StrictHttpResponse<PackageUpdateRsp>> {
+    const rb = new RequestBuilder(this.rootUrl, PkgdashService.PackageUpdatePath, 'put');
+    if (params) {
+      rb.path('id', params.id, {});
+      rb.body(params.body, 'application/json');
+    }
+
+    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<PackageUpdateRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `packageUpdate$Response()` instead.
+   *
+   * This method sends `application/json` and handles request body of type `application/json`.
+   */
+  packageUpdate(
+    params: {
+      id: number;
+      body: PackageUpdateReq
+    },
+    context?: HttpContext
+  ): Observable<PackageUpdateRsp> {
+    return this.packageUpdate$Response(params, context).pipe(
+      map((r: StrictHttpResponse<PackageUpdateRsp>): PackageUpdateRsp => r.body)
+    );
+  }
+
+  /** Path part for operation `packageDelete()` */
+  static readonly PackageDeletePath = '/v1/packages/{id}';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `packageDelete()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  packageDelete$Response(
+    params: {
+      id: number;
+    },
+    context?: HttpContext
+  ): Observable<StrictHttpResponse<PackageDeleteRsp>> {
+    const rb = new RequestBuilder(this.rootUrl, PkgdashService.PackageDeletePath, 'delete');
+    if (params) {
+      rb.path('id', params.id, {});
+    }
+
+    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<PackageDeleteRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `packageDelete$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  packageDelete(
+    params: {
+      id: number;
+    },
+    context?: HttpContext
+  ): Observable<PackageDeleteRsp> {
+    return this.packageDelete$Response(params, context).pipe(
+      map((r: StrictHttpResponse<PackageDeleteRsp>): PackageDeleteRsp => r.body)
+    );
+  }
+
+  /** Path part for operation `commentDelete()` */
+  static readonly CommentDeletePath = '/v1/packages/{package_id}/comments/{id}';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `commentDelete()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  commentDelete$Response(
+    params: {
+      package_id: number;
+      id: number;
+    },
+    context?: HttpContext
+  ): Observable<StrictHttpResponse<CommentDeleteRsp>> {
+    const rb = new RequestBuilder(this.rootUrl, PkgdashService.CommentDeletePath, 'delete');
+    if (params) {
+      rb.path('package_id', params.package_id, {});
+      rb.path('id', params.id, {});
+    }
+
+    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<CommentDeleteRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `commentDelete$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  commentDelete(
+    params: {
+      package_id: number;
+      id: number;
+    },
+    context?: HttpContext
+  ): Observable<CommentDeleteRsp> {
+    return this.commentDelete$Response(params, context).pipe(
+      map((r: StrictHttpResponse<CommentDeleteRsp>): CommentDeleteRsp => r.body)
+    );
+  }
+
+  /** Path part for operation `commentList()` */
+  static readonly CommentListPath = '/v1/packages/{package}/comments';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `commentList()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  commentList$Response(
+    params: {
+      package: number;
+    },
+    context?: HttpContext
+  ): Observable<StrictHttpResponse<CommentListRsp>> {
+    const rb = new RequestBuilder(this.rootUrl, PkgdashService.CommentListPath, '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<CommentListRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `commentList$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  commentList(
+    params: {
+      package: number;
+    },
+    context?: HttpContext
+  ): Observable<CommentListRsp> {
+    return this.commentList$Response(params, context).pipe(
+      map((r: StrictHttpResponse<CommentListRsp>): CommentListRsp => r.body)
+    );
+  }
+
+  /** Path part for operation `commentCreate()` */
+  static readonly CommentCreatePath = '/v1/packages/{package}/comments';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `commentCreate()` instead.
+   *
+   * This method sends `application/json` and handles request body of type `application/json`.
+   */
+  commentCreate$Response(
+    params: {
+      package: string;
+      body: CommentCreateReq
+    },
+    context?: HttpContext
+  ): Observable<StrictHttpResponse<CommentCreateRsp>> {
+    const rb = new RequestBuilder(this.rootUrl, PkgdashService.CommentCreatePath, 'post');
+    if (params) {
+      rb.path('package', params.package, {});
+      rb.body(params.body, 'application/json');
+    }
+
+    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<CommentCreateRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `commentCreate$Response()` instead.
+   *
+   * This method sends `application/json` and handles request body of type `application/json`.
+   */
+  commentCreate(
+    params: {
+      package: string;
+      body: CommentCreateReq
+    },
+    context?: HttpContext
+  ): Observable<CommentCreateRsp> {
+    return this.commentCreate$Response(params, context).pipe(
+      map((r: StrictHttpResponse<CommentCreateRsp>): CommentCreateRsp => r.body)
+    );
+  }
+
+  /** 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';
+
+  /**
+   * This method provides access to the full `HttpResponse`, allowing access to response headers.
+   * To access only the response body, use `packageModules()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  packageModules$Response(
+    params: {
+      package: number;
+    },
+    context?: HttpContext
+  ): Observable<StrictHttpResponse<PackageModulesRsp>> {
+    const rb = new RequestBuilder(this.rootUrl, PkgdashService.PackageModulesPath, '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<PackageModulesRsp>;
+      })
+    );
+  }
+
+  /**
+   * This method provides access only to the response body.
+   * To access the full response (for headers, for example), `packageModules$Response()` instead.
+   *
+   * This method doesn't expect any request body.
+   */
+  packageModules(
+    params: {
+      package: number;
+    },
+    context?: HttpContext
+  ): Observable<PackageModulesRsp> {
+    return this.packageModules$Response(params, context).pipe(
+      map((r: StrictHttpResponse<PackageModulesRsp>): PackageModulesRsp => r.body)
+    );
+  }
+
+}
--- a/ui/src/app/api/strict-http-response.ts
+++ b/ui/src/app/api/strict-http-response.ts
@@ -0,0 +1,10 @@
+/* tslint:disable */
+/* eslint-disable */
+import { HttpResponse } from '@angular/common/http';
+
+/**
+ * Constrains the http response to not have the body defined as `T | null`, but `T` only.
+ */
+export type StrictHttpResponse<T> = HttpResponse<T> & {
+  readonly body: T;
+}
--- a/ui/src/app/app-routing.module.ts
+++ b/ui/src/app/app-routing.module.ts
@@ -0,0 +1,34 @@
+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: 'packages',
+    component: PackageListComponent
+  },
+  {
+    path: 'packages/:id',
+    component: PackageComponent,
+    resolve: {
+      package: PackageResolver,
+    },
+  },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'packages',
+  },
+  {
+   path: '**',
+   redirectTo: 'packages',
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
--- a/ui/src/app/app.component.scss
+++ b/ui/src/app/app.component.scss
--- a/ui/src/app/app.component.spec.ts
+++ b/ui/src/app/app.component.spec.ts
@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ui'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('ui');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('ui app is running!');
+  });
+});
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'ui';
+}
--- a/ui/src/app/app.constants.ts
+++ b/ui/src/app/app.constants.ts
@@ -0,0 +1,68 @@
+export class AppConstants {
+
+  public static SNACKBAR_MSG_DURATION = 5000;
+  public static SNACKBAR_ERR_DURATION = 10000;
+
+  public static RETRY_ATTEMPTS = 3;
+  public static RETRY_DELAY = 500;
+  public static RETRY_HTTP_CODES = [408, 500];
+
+  public static AUTOCOMPLETE_DEBOUNCE = 1000;
+  public static AUTOCOMPLETE_LIMIT = 20;
+
+  public static SEARCH_DEBOUNCE = 1000;
+  
+  public static API = getAPI();
+}
+
+function getAPI(): string {
+  const baseHref = new URL(document.baseURI);
+ 
+  let path = baseHref.pathname.slice(0, baseHref.pathname.indexOf('/ui'))
+  let api = `${baseHref.protocol}//${baseHref.host}`+path;
+  
+  console.log(`API ${api}`);
+  return api;
+}
+
+/*
+
+export const OAuthConfig: AuthConfig = {
+
+  // Url of the Identity Provider
+  issuer: AppConstants.API,
+
+  // URL of the SPA to redirect the user to after login
+  redirectUri: AppConstants.API + '/ui/index.html',
+
+  // The SPA's id. The SPA is registerd with this id at the auth-server
+  clientId: 'authn',
+
+  dummyClientSecret: 'secret',
+
+  // set the scope for the permissions the client should request
+  // The first four are defined by OIDC.
+  // Important: Request offline_access to get a refresh token
+  // The api scope is a usecase specific one
+  scope: 'openid profile email offline_access api',
+
+  responseType: 'code',
+
+  // turn on validation that discovery document endpoints start with the issuer url defined above
+  strictDiscoveryDocumentValidation: true,
+
+  // show debug
+  showDebugInformation: true,
+
+  // Activate Session Checks:
+  sessionChecksEnabled: true,
+
+  // Disable requirement of https for tests
+  requireHttps: false,
+
+  // oidc: true, // ID_Token
+  //this.oauthService.setStorage(sessionStorage);
+
+  preserveRequestedRoute: true,
+};
+*/
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -0,0 +1,102 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatCardModule } from '@angular/material/card';
+import { MatRippleModule } from '@angular/material/core';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableModule } from "@angular/material/table"
+import { ApiModule } from './api/api.module';
+import { HttpClientModule } from '@angular/common/http';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatListModule } from '@angular/material/list';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatSortModule } from '@angular/material/sort';
+import { MatInputModule } from "@angular/material/input";
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialogModule } from "@angular/material/dialog";
+import { PackageDialogComponent } from './components/package-dialog/package-dialog.component';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
+import { MatSelectModule } from '@angular/material/select';
+import { MessageService } from './services/message/message.service';
+import { ConfirmService } from './services/confirm/confirm.service';
+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,
+    PackageListComponent,
+    PackageDialogComponent,
+    ConfirmDialogComponent,
+    PackageComponent,
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    MatCardModule,
+    MatRippleModule,
+    MatPaginatorModule,
+    MatProgressSpinnerModule,
+    MatTableModule,
+    MatListModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    BrowserAnimationsModule,
+    MatDialogModule,
+    MatIconModule,
+    HttpClientModule,
+    MatMenuModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSnackBarModule,
+    ApiModule.forRoot({
+      rootUrl: AppConstants.API,
+    })
+  ],
+  exports: [
+    MatSnackBarModule,
+    MatSelectModule,
+    MatRadioModule,
+    MatMenuModule,
+    MatDialogModule,
+    MatIconModule,
+    MatButtonModule,
+    MatInputModule,
+    MatPaginatorModule,
+    MatSortModule,
+    ReactiveFormsModule,
+    FormsModule,
+    MatCheckboxModule,
+    MatListModule,
+    MatProgressSpinnerModule,
+    MatCardModule,
+    MatRippleModule,
+    MatPaginatorModule,
+    MatTableModule,
+    HttpClientModule,
+    PackageDialogComponent,
+  ],
+  providers: [
+    PkgdashService,
+    PackagesService,
+    ConfirmService,
+    MessageService,
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
--- a/ui/src/app/components/confirm-dialog/confirm-dialog.component.html
+++ b/ui/src/app/components/confirm-dialog/confirm-dialog.component.html
@@ -0,0 +1,8 @@
+<h2 mat-dialog-title>{{data.title}}</h2>
+<mat-dialog-content class="mat-typography">
+  <p>{{data.message}}</p>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button type="submit" (click)="submit(true);">Submit</button>
+  <button mat-button [mat-dialog-close]="">Cancel</button>
+</mat-dialog-actions>
--- a/ui/src/app/components/confirm-dialog/confirm-dialog.component.scss
+++ b/ui/src/app/components/confirm-dialog/confirm-dialog.component.scss
--- a/ui/src/app/components/confirm-dialog/confirm-dialog.component.spec.ts
+++ b/ui/src/app/components/confirm-dialog/confirm-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmDialogComponent } from './confirm-dialog.component';
+
+describe('ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfirmDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/ui/src/app/components/confirm-dialog/confirm-dialog.component.ts
+++ b/ui/src/app/components/confirm-dialog/confirm-dialog.component.ts
@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, HostListener, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.scss']
+})
+
+export class ConfirmDialogComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: {
+    title: string,
+    message: string,
+  },
+    private mdDialogRef: MatDialogRef<ConfirmDialogComponent>,
+  ) { }
+
+  ngOnInit(): void { }
+
+
+  public cancel() {
+    this.mdDialogRef.close();
+  }
+
+  public submit(value: any) {
+    this.mdDialogRef.close(value);
+  }
+
+  @HostListener("keydown.esc")
+  public onEsc() {
+    this.cancel();
+  }
+}
--- a/ui/src/app/components/package-dialog/package-dialog.component.html
+++ b/ui/src/app/components/package-dialog/package-dialog.component.html
@@ -0,0 +1,35 @@
+<form [formGroup]="packageForm"  (ngSubmit)="submit(packageForm.value)" enctype="multipart/form-data">
+  <h2 mat-dialog-title>{{data.title}}</h2>
+  <mat-dialog-content class="mat-typography">
+<p>
+  <mat-form-field appearance="standard">
+    <mat-label>Name</mat-label>
+    <input matInput placeholder="example" formControlName="name" required>
+   <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>-->
+   <!-- <mat-hint>service name</mat-hint> -->
+  </mat-form-field>
+</p>
+<p>
+  <mat-form-field appearance="standard">
+    <mat-label>Description</mat-label>
+    <textarea matInput placeholder="example desc" formControlName="description" required></textarea>
+   <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>-->
+   <!-- <mat-hint>service name</mat-hint> -->
+  </mat-form-field>
+</p>
+<p>
+  <mat-form-field appearance="standard">
+    <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>
+</p>
+
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button type="submit" [disabled]="!packageForm.valid">Submit</button>
+  <button mat-button [mat-dialog-close]="">Cancel</button>
+</mat-dialog-actions>
+</form>
+
--- a/ui/src/app/components/package-dialog/package-dialog.component.scss
+++ b/ui/src/app/components/package-dialog/package-dialog.component.scss
--- a/ui/src/app/components/package-dialog/package-dialog.component.spec.ts
+++ b/ui/src/app/components/package-dialog/package-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackageDialogComponent } from './package-dialog.component';
+
+describe('PackageDialogComponent', () => {
+  let component: PackageDialogComponent;
+  let fixture: ComponentFixture<PackageDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PackageDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PackageDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/ui/src/app/components/package-dialog/package-dialog.component.ts
+++ b/ui/src/app/components/package-dialog/package-dialog.component.ts
@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, HostListener, Inject, Input, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Package } from 'src/app/api/models/package';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-package-dialog',
+  templateUrl: './package-dialog.component.html',
+  styleUrls: ['./package-dialog.component.scss']
+})
+export class PackageDialogComponent implements OnInit {
+
+  packageForm: UntypedFormGroup = new UntypedFormGroup({});
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: {
+    pkg: Package,
+    title: string,
+  },
+    private mdDialogRef: MatDialogRef<PackageDialogComponent>,
+    private formBuilder: UntypedFormBuilder,
+  ) {
+    if (!data.pkg) {
+      data.pkg = {
+        name: '',
+        url: '',
+      }
+    }
+  }
+
+  ngOnInit(): void {
+    this.packageForm = this.formBuilder.group({
+      name: [{ value: this.data.pkg.name, disabled: false },
+      Validators.required,
+      ],
+      url: [{ value: this.data.pkg.url, disabled: false },
+      Validators.compose([
+        Validators.required,
+        Validators.pattern("(^(http[s]?:\/\/(.*)$))?"),
+      ]),
+      ],
+      description: [{ value: this.data.pkg.description, disabled: false },
+      Validators.compose([
+        Validators.required,
+        Validators.minLength(4),
+      ]),
+      ],
+    });
+  }
+
+  public cancel() {
+    this.mdDialogRef.close();
+  }
+
+  public submit(value: any) {
+    this.mdDialogRef.close(value);
+  }
+
+  @HostListener("keydown.esc")
+  public onEsc() {
+    this.cancel();
+  }
+}
--- a/ui/src/app/components/package-list/package-list.component.html
+++ b/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>
--- a/ui/src/app/components/package-list/package-list.component.scss
+++ b/ui/src/app/components/package-list/package-list.component.scss
--- a/ui/src/app/components/package-list/package-list.component.spec.ts
+++ b/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();
+  });
+});
--- a/ui/src/app/components/package-list/package-list.component.ts
+++ b/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();
+  }
+}
--- a/ui/src/app/components/package/package.component.html
+++ b/ui/src/app/components/package/package.component.html
@@ -0,0 +1,58 @@
+<p>modules</p>
+
+<div>
+
+<table #handlersTable mat-table
+matSort [matSortActive]="sortField" [matSortDirection]="sortOrder"
+(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 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 handler">{{handler.coverage}}</td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let handler; columns: displayedColumns;" routerLink="/packages/{{package.id}}/handlers/{{handler.id}}"></tr>
+</table>
+
+<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>
--- a/ui/src/app/components/package/package.component.scss
+++ b/ui/src/app/components/package/package.component.scss
--- a/ui/src/app/components/package/package.component.spec.ts
+++ b/ui/src/app/components/package/package.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackageComponent } from './package.component';
+
+describe('PackageComponent', () => {
+  let component: PackageComponent;
+  let fixture: ComponentFixture<PackageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PackageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PackageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/ui/src/app/components/package/package.component.ts
+++ b/ui/src/app/components/package/package.component.ts
@@ -0,0 +1,92 @@
+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 { MatSort, Sort, SortDirection } from '@angular/material/sort';
+import { AppConstants } from 'src/app/app.constants';
+import { MessageService } from 'src/app/services/message/message.service';
+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-package',
+  templateUrl: './package.component.html',
+  styleUrls: ['./package.component.scss'],
+  providers: [PkgdashService],
+})
+
+export class PackageComponent implements OnInit, AfterViewInit {
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild('input') input!: ElementRef;
+
+  package!: Package;
+
+  public itemsCount = 10;
+  sortField = 'name';
+  sortOrder: SortDirection = 'asc';
+
+  displayedColumns: string[] = ['name', 'coverage'];
+
+  dataSource: HandlersDataSource;
+  selectedRowIndex: any;
+
+  constructor(
+    private route: ActivatedRoute,
+    //private location: Location,
+    private pkgdashService: PkgdashService,
+    private messageService: MessageService,
+  ) {
+    this.dataSource = new HandlersDataSource(this.pkgdashService);
+  }
+
+  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 sortHandlers(event: Sort): void {
+    this.loadHandlers()
+  }
+
+  private loadHandlers(): void {
+    this.dataSource.list(
+      this.package.id!,
+      '',
+      this.sort.active,
+      this.sort.direction,
+      this.paginator.pageIndex,
+      this.paginator.pageSize);
+  }
+
+
+  ngOnInit(): void {
+    this.package = this.route.snapshot.data['package'];
+    this.dataSource.list(this.package.id!, '', this.sortField, this.sortOrder, 0, this.itemsCount);
+    this.selectedRowIndex = 1;
+  }
+
+}
--- a/ui/src/app/datasources/handlers.ts
+++ b/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);
+    };
+  };
+}
--- a/ui/src/app/datasources/packages.ts
+++ b/ui/src/app/datasources/packages.ts
@@ -0,0 +1,52 @@
+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);
+
+  public loading$ = this.loadingSubject.asObservable();
+
+  constructor(
+    private pkgdashService: PkgdashService
+  ) {
+    super();
+  }
+
+  connect(): Observable<Package[]> {
+    return this.packageSubject.asObservable();
+  }
+
+  disconnect(): void {
+    this.packageSubject.complete();
+    this.loadingSubject.complete();
+  }
+
+  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));
+  }
+
+  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);
+    };
+  };
+}
--- a/ui/src/app/resolvers/package/package.resolver.spec.ts
+++ b/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();
+  });
+});
--- a/ui/src/app/resolvers/package/package.resolver.ts
+++ b/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!)
+    );
+  }
+}
--- a/ui/src/app/services/confirm/confirm.service.spec.ts
+++ b/ui/src/app/services/confirm/confirm.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ConfirmService } from './confirm.service';
+
+describe('ConfirmService', () => {
+  let service: ConfirmService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ConfirmService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/ui/src/app/services/confirm/confirm.service.ts
+++ b/ui/src/app/services/confirm/confirm.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { map, Observable, take } from 'rxjs';
+import { ConfirmDialogComponent } from '../../components/confirm-dialog/confirm-dialog.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfirmService {
+
+  dialogRef!: MatDialogRef<ConfirmDialogComponent>;
+
+  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;
+    }
+    ));
+  }
+}
--- a/ui/src/app/services/message/message.service.spec.ts
+++ b/ui/src/app/services/message/message.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+  let message: MessageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    message = TestBed.inject(MessageService);
+  });
+
+  it('should be created', () => {
+    expect(message).toBeTruthy();
+  });
+});
--- a/ui/src/app/services/message/message.service.ts
+++ b/ui/src/app/services/message/message.service.ts
@@ -0,0 +1,22 @@
+
+import { Injectable } from '@angular/core';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessageService {
+
+  constructor(
+    private snackbar: MatSnackBar,
+  ) {
+  }
+
+  showMessage(message: string, action?: string, config?: MatSnackBarConfig) {
+    let cfg = config
+    if (!cfg) {
+      cfg = { duration: 2000 }
+    }
+    this.snackbar.open(message, action, cfg);
+  }
+}
--- a/ui/src/app/services/packages/packages.service.spec.ts
+++ b/ui/src/app/services/packages/packages.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ServicesService } from './packages.service';
+
+describe('ServicesService', () => {
+  let service: ServicesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ServicesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/ui/src/app/services/packages/packages.service.ts
+++ b/ui/src/app/services/packages/packages.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { map, Observable, take } from 'rxjs';
+import { PackageDialogComponent } from '../../components/package-dialog/package-dialog.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PackagesService {
+
+  dialogRef!: MatDialogRef<PackageDialogComponent>;
+
+  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;
+    }
+    ));
+  }
+}
--- a/ui/src/assets/.gitkeep
+++ b/ui/src/assets/.gitkeep
--- a/ui/src/environments/environment.prod.ts
+++ b/ui/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
--- a/ui/src/environments/environment.ts
+++ b/ui/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * 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.
--- a/ui/src/favicon.ico
+++ b/ui/src/favicon.ico
--- a/ui/src/index.html
+++ b/ui/src/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>UI</title>
+  <base href="/ui/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body class="mat-typography">
+  <app-root></app-root>
+</body>
+</html>
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
--- a/ui/src/polyfills.ts
+++ b/ui/src/polyfills.ts
@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
--- a/ui/src/styles.scss
+++ b/ui/src/styles.scss
@@ -0,0 +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;
+}
--- a/ui/src/test.ts
+++ b/ui/src/test.ts
@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
--- a/ui/tsconfig.app.json
+++ b/ui/tsconfig.app.json
@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -0,0 +1,32 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2020",
+    "module": "es2020",
+    "lib": [
+      "es2020",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
--- a/ui/tsconfig.spec.json
+++ b/ui/tsconfig.spec.json
@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
				`@@ -0,0 +1 @@`
				`export { PkgdashService } from './services/pkgdash.service';`