Web dashboard, task release, logs api

web/angular/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

web/angular/.gitignore

@@ -0,0 +1,44 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

web/angular/README.md

@@ -0,0 +1,27 @@
+# Angular
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.2.
+
+## 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. Use the `--prod` flag for a production build.
+
+## 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 [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

web/angular/angular.json

@@ -0,0 +1,135 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "angular": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application",
+            "prefix": "app",
+            "schematics": {},
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/angular",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.app.json",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.css"
+                        ],
+                        "scripts": []
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "5mb"
+                                }
+                            ]
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "angular:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "angular:build:production"
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "angular:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "karmaConfig": "src/karma.conf.js",
+                        "styles": [
+                            "src/styles.css"
+                        ],
+                        "scripts": [],
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ]
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "src/tsconfig.app.json",
+                            "src/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        },
+        "angular-e2e": {
+            "root": "e2e/",
+            "projectType": "application",
+            "prefix": "",
+            "architect": {
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "angular:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "angular:serve:production"
+                        }
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": "e2e/tsconfig.e2e.json",
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "angular"
+}

web/angular/e2e/protractor.conf.js

@@ -0,0 +1,29 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const {SpecReporter} = require('jasmine-spec-reporter');
+
+exports.config = {
+    allScriptsTimeout: 11000,
+    specs: [
+        './src/**/*.e2e-spec.ts'
+    ],
+    capabilities: {
+        'browserName': 'chrome'
+    },
+    directConnect: true,
+    baseUrl: 'http://localhost:4200/',
+    framework: 'jasmine',
+    jasmineNodeOpts: {
+        showColors: true,
+        defaultTimeoutInterval: 30000,
+        print: function () {
+        }
+    },
+    onPrepare() {
+        require('ts-node').register({
+            project: require('path').join(__dirname, './tsconfig.e2e.json')
+        });
+        jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
+    }
+};

web/angular/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,23 @@
+import {AppPage} from './app.po';
+import {browser, logging} from 'protractor';
+
+describe('workspace-project App', () => {
+    let page: AppPage;
+
+    beforeEach(() => {
+        page = new AppPage();
+    });
+
+    it('should display welcome message', () => {
+        page.navigateTo();
+        expect(page.getTitleText()).toEqual('Welcome to angular!');
+    });
+
+    afterEach(async () => {
+        // Assert that there are no errors emitted from the browser
+        const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+        expect(logs).not.toContain(jasmine.objectContaining({
+            level: logging.Level.SEVERE,
+        }));
+    });
+});

web/angular/e2e/src/app.po.ts

@@ -0,0 +1,11 @@
+import {browser, by, element} from 'protractor';
+
+export class AppPage {
+    navigateTo() {
+        return browser.get('/');
+    }
+
+    getTitleText() {
+        return element(by.css('app-root h1')).getText();
+    }
+}

web/angular/e2e/tsconfig.e2e.json

@@ -0,0 +1,13 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/app",
+        "module": "commonjs",
+        "target": "es5",
+        "types": [
+            "jasmine",
+            "jasminewd2",
+            "node"
+        ]
+    }
+}

web/angular/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "angular",
+    "version": "0.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "^7.2.1",
+        "@angular/cdk": "^7.2.1",
+        "@angular/common": "~7.2.0",
+        "@angular/compiler": "~7.2.0",
+        "@angular/core": "~7.2.0",
+        "@angular/forms": "~7.2.0",
+        "@angular/material": "^7.2.1",
+        "@angular/platform-browser": "~7.2.0",
+        "@angular/platform-browser-dynamic": "~7.2.0",
+        "@angular/router": "~7.2.0",
+        "core-js": "^2.5.4",
+        "d3": "^5.7.0",
+        "lodash": "^4.17.11",
+        "moment": "^2.23.0",
+        "rxjs": "~6.3.3",
+        "tslib": "^1.9.0",
+        "zone.js": "~0.8.26"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~0.12.0",
+        "@angular/cli": "~7.2.2",
+        "@angular/compiler-cli": "~7.2.0",
+        "@angular/language-service": "~7.2.0",
+        "@types/node": "~8.9.4",
+        "@types/jasmine": "~2.8.8",
+        "@types/jasminewd2": "~2.0.3",
+        "codelyzer": "~4.5.0",
+        "jasmine-core": "~2.99.1",
+        "jasmine-spec-reporter": "~4.2.1",
+        "karma": "~3.1.1",
+        "karma-chrome-launcher": "~2.2.0",
+        "karma-coverage-istanbul-reporter": "~2.0.1",
+        "karma-jasmine": "~1.1.2",
+        "karma-jasmine-html-reporter": "^0.2.2",
+        "protractor": "~5.4.0",
+        "ts-node": "~7.0.0",
+        "tslint": "~5.11.0",
+        "typescript": "~3.2.2"
+    }
+}

web/angular/src/app/api.service.ts

@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+
+@Injectable()
+export class ApiService {
+
+    private url: string = "http://localhost:42901";
+
+    constructor(
+        private http: HttpClient,
+    ) {
+    }
+
+    getLogs() {
+        return this.http.get(this.url + "/logs");
+    }
+
+    getProjectStats(id: number) {
+        return this.http.get(this.url + "/project/stats/" + id)
+    }
+}

web/angular/src/app/app-routing.module.ts

@@ -0,0 +1,16 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {LogsComponent} from "./logs/logs.component";
+import {ProjectDashboardComponent} from "./project-dashboard/project-dashboard.component";
+
+const routes: Routes = [
+    {path: "log", component: LogsComponent},
+    {path: "project", component: ProjectDashboardComponent}
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
+})
+export class AppRoutingModule {
+}

web/angular/src/app/app.component.html

@@ -0,0 +1,8 @@
+<mat-toolbar>
+    <a [routerLink]="''">Index</a>
+    <a [routerLink]="'log'">Logs</a>
+    <a [routerLink]="'project'">Project</a>
+</mat-toolbar>
+
+
+<router-outlet></router-outlet>

web/angular/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.css']
+})
+export class AppComponent {
+    title = 'angular';
+}

web/angular/src/app/app.module.ts

@@ -0,0 +1,56 @@
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {LogsComponent} from './logs/logs.component';
+
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {
+    MatCardModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+    MatToolbarModule,
+    MatTreeModule
+} from "@angular/material";
+import {ApiService} from "./api.service";
+import {HttpClientModule} from "@angular/common/http";
+import {ProjectDashboardComponent} from './project-dashboard/project-dashboard.component';
+
+@NgModule({
+    declarations: [
+        AppComponent,
+        LogsComponent,
+        ProjectDashboardComponent
+    ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        MatMenuModule,
+        MatIconModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatToolbarModule,
+        MatCardModule,
+        MatExpansionModule,
+        MatTreeModule,
+        BrowserAnimationsModule,
+        HttpClientModule,
+    ],
+    exports: [],
+    providers: [
+        ApiService,
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}

web/angular/src/app/logs/logentry.ts

@@ -0,0 +1,6 @@
+interface LogEntry {
+    level: string,
+    message: string,
+    data: any,
+    timestamp: string,
+}

web/angular/src/app/logs/logs.component.css

@@ -0,0 +1,12 @@
+.table-container {
+    height: 600px;
+}
+
+.mat-table {
+    height: 100%;
+    overflow: scroll;
+}
+
+.mat-cell {
+    text-align: left;
+}

web/angular/src/app/logs/logs.component.html

@@ -0,0 +1,32 @@
+<div class="table-container">
+    <mat-form-field>
+        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+    </mat-form-field>
+    <mat-table [dataSource]="data" class="mat-elevation-z8" matSort matSortActive="timestamp" matSortDirection="desc">
+
+        <ng-container matColumnDef="level">
+            <mat-header-cell style="flex: 0 0 6em" mat-sort-header *matHeaderCellDef>Level</mat-header-cell>
+            <mat-cell style="flex: 0 0 6em" *matCellDef="let entry"> {{entry.level}} </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="timestamp">
+            <mat-header-cell style="flex: 0 0 21em" mat-sort-header *matHeaderCellDef>Time</mat-header-cell>
+            <mat-cell style="flex: 0 0 17em" *matCellDef="let entry"> {{entry.timestamp}} </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="message">
+            <mat-header-cell mat-sort-header *matHeaderCellDef>Message</mat-header-cell>
+            <mat-cell style="flex: 0 0 30em" *matCellDef="let entry"> {{entry.message}} </mat-cell>
+        </ng-container>
+        <ng-container matColumnDef="data">
+            <mat-header-cell mat-sort-header *matHeaderCellDef>Data</mat-header-cell>
+            <mat-cell *matCellDef="let entry">
+                <pre>{{entry.data}}</pre>
+            </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="logsCols"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: logsCols;"></mat-row>
+    </mat-table>
+
+    <mat-paginator [length]="logs.length" [pageSizeOptions]="[5,10,25,100]" [pageSize]="5"></mat-paginator>
+</div>
+

web/angular/src/app/logs/logs.component.spec.ts

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

web/angular/src/app/logs/logs.component.ts

@@ -0,0 +1,55 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {ApiService} from "../api.service";
+
+import _ from "lodash"
+import * as moment from "moment";
+import {MatPaginator, MatSort, MatTableDataSource} from "@angular/material";
+
+@Component({
+    selector: 'app-logs',
+    templateUrl: './logs.component.html',
+    styleUrls: ['./logs.component.css']
+})
+export class LogsComponent implements OnInit {
+
+    private logs: LogEntry[] = [];
+    private data: MatTableDataSource<LogEntry>;
+    private logsCols: string[] = ["level", "timestamp", "message", "data"];
+
+    @ViewChild(MatPaginator) paginator: MatPaginator;
+    @ViewChild(MatSort) sort: MatSort;
+
+    constructor(private apiService: ApiService) {
+        this.data = new MatTableDataSource<LogEntry>(this.logs)
+    }
+
+    ngOnInit() {
+        this.getLogs();
+
+        this.data.paginator = this.paginator;
+        this.data.sort = this.sort;
+        // interval(5000).subscribe(() => {
+        //     this.getLogs();
+        // })
+    }
+
+    applyFilter(filter: string) {
+        this.data.filter = filter.trim().toLowerCase();
+    }
+
+    private getLogs() {
+        this.apiService.getLogs().subscribe(
+            data => {
+                this.data.data = _.map(data, (entry) => {
+                    return <LogEntry>{
+                        message: entry.message,
+                        timestamp: moment.unix(entry.timestamp).toISOString(),
+                        data: JSON.stringify(JSON.parse(entry.data), null, 2),
+                        level: entry.level.toUpperCase()
+                    }
+                });
+            }
+        )
+    }
+}
+

web/angular/src/app/project-dashboard/project-dashboard.component.css

@@ -0,0 +1,44 @@
+#status {
+    height: 360px;
+    position: relative;
+    width: 360px;
+    margin: 1em;
+}
+
+#assignees {
+    height: 360px;
+    position: relative;
+    width: 360px;
+    margin: 1em;
+}
+
+.pie-label {
+    left: 130px;
+    padding: 10px;
+    position: absolute;
+    text-align: center;
+    top: 150px;
+    width: 80px;
+    z-index: 10;
+    font-family: Roboto, "Helvetica Neue", sans-serif;
+    font-weight: bold;
+}
+
+.tooltip {
+    background: #eee;
+    box-shadow: 0 0 5px #999999;
+    color: #333;
+    display: none;
+    font-size: 12px;
+    left: 130px;
+    padding: 10px;
+    position: absolute;
+    text-align: center;
+    top: 95px;
+    width: 80px;
+    z-index: 10;
+}
+
+/*---------*/
+
+

web/angular/src/app/project-dashboard/project-dashboard.component.html

@@ -0,0 +1,42 @@
+<div>
+    <mat-card>
+        <mat-card-title *ngIf="projectStats">Stats for project "{{projectStats["project"]["name"]}}"</mat-card-title>
+        <mat-card-content style="padding: 2em 0 1em">
+
+            <p *ngIf="projectStats">Git repository: <a target="_blank"
+                                                       [href]="projectStats['project']['clone_url']">{{projectStats["project"]["git_repo"]}}</a>
+            </p>
+            <p>Message of the day: </p>
+            <pre *ngIf="projectStats">{{projectStats["project"]["motd"]}}</pre>
+
+            <div style="display: flex; align-items: center; justify-content: center">
+                <div id="line"></div>
+
+                <div id="status">
+                    <div class="tooltip" id="stooltip">
+                        <div class="label"></div>
+                        <div class="count"></div>
+                        <div class="percent"></div>
+                    </div>
+                    <div class="pie-label">Task Status</div>
+                </div>
+                <div id="assignees">
+                    <div class="tooltip" id="atooltip">
+                        <div class="label"></div>
+                        <div class="count"></div>
+                        <div class="percent"></div>
+                    </div>
+                    <div class="pie-label">Assignees</div>
+                </div>
+            </div>
+
+            <mat-expansion-panel *ngIf="projectStats" style="margin-top: 1em">
+                <mat-expansion-panel-header>
+                    <mat-panel-title>Project metadata</mat-panel-title>
+                </mat-expansion-panel-header>
+                <pre>{{projectStats | json}}</pre>
+            </mat-expansion-panel>
+
+        </mat-card-content>
+    </mat-card>
+</div>

web/angular/src/app/project-dashboard/project-dashboard.component.ts

@@ -0,0 +1,267 @@
+import {Component, OnInit} from '@angular/core';
+
+import * as d3 from "d3"
+import * as _ from "lodash"
+import {interval} from "rxjs";
+import {ApiService} from "../api.service";
+
+@Component({
+    selector: 'app-project-dashboard',
+    templateUrl: './project-dashboard.component.html',
+    styleUrls: ['./project-dashboard.component.css']
+})
+export class ProjectDashboardComponent implements OnInit {
+
+    projectStats;
+    private pieWidth = 360;
+    private pieHeight = 360;
+    private pieRadius = Math.min(this.pieWidth, this.pieHeight) / 2;
+    private pieArc = d3.arc()
+        .innerRadius(this.pieRadius / 2)
+        .outerRadius(this.pieRadius);
+
+    private pieFun = d3.pie().value((d) => d.count);
+    private statusColor = d3.scaleOrdinal().range(['#31a6a2', '#8c2627', '#62f24b']);
+    private assigneesColor = d3.scaleOrdinal().range(["", "#AAAAAA"].concat(d3.schemePaired));
+
+    private statusData: any[];
+    private assigneesData: any[];
+
+    private newTaskCounts: any[] = [];
+    private failedTaskCounts: any[] = [];
+    private closedTaskCounts: any[] = [];
+
+    private newTaskPath: any;
+    private failedTaskPath: any;
+    private closedTaskPath: any;
+
+    private maxY: number = 10;
+    private yAxis: any;
+    private yScale: any;
+    private xScale: any;
+    private range: number;
+    private line: any;
+
+    private statusPath: any;
+    private statusSvg: any;
+    private assigneesPath: any;
+    private assigneesSvg: any;
+
+    constructor(private apiService: ApiService) {
+    }
+
+    setupStatusPieChart() {
+        let tooltip = d3.select("#stooltip");
+
+        this.statusSvg = d3.select('#status')
+            .append('svg')
+            .attr('width', this.pieWidth)
+            .attr('height', this.pieHeight)
+            .append("g")
+            .attr("transform", "translate(" + this.pieRadius + "," + this.pieRadius + ")");
+
+        this.statusPath = this.statusSvg.selectAll("path")
+            .data(this.pieFun(this.statusData))
+            .enter()
+            .append('path')
+            .attr('d', this.pieArc)
+            .attr('fill', (d) => this.statusColor(d.data.label));
+
+        this.setupToolTip(this.statusPath, tooltip)
+    }
+
+    setupAssigneesPieChart() {
+        let tooltip = d3.select("#atooltip");
+
+        this.assigneesSvg = d3.select('#assignees')
+            .append('svg')
+            .attr('width', this.pieWidth)
+            .attr('height', this.pieHeight)
+            .append("g")
+            .attr("transform", "translate(" + this.pieRadius + "," + this.pieRadius + ")");
+
+        this.assigneesPath = this.assigneesSvg.selectAll("path")
+            .data(this.pieFun(this.assigneesData))
+            .enter()
+            .append('path')
+            .attr('d', this.pieArc)
+            .attr('fill', (d) => this.assigneesColor(d.data.label));
+
+        this.setupToolTip(this.assigneesPath, tooltip)
+    }
+
+    setupToolTip(x, tooltip) {
+        x.on('mouseover', (d) => {
+            let total = d3.sum(this.assigneesData.map((d) => d.count));
+            let percent = Math.round(1000 * d.data.count / total) / 10;
+            tooltip.select('.label').html(d.data.label);
+            tooltip.select('.count').html(d.data.count);
+            tooltip.select('.percent').html(percent + '%');
+            tooltip.style('display', 'block');
+        });
+        x.on('mouseout', function () {
+            tooltip.style('display', 'none');
+        })
+    }
+
+    setupLine() {
+        let margin = {top: 50, right: 50, bottom: 50, left: 50};
+        this.range = 600;
+        let width = 750;
+        let height = 250;
+
+        this.xScale = d3.scaleLinear()
+            .domain([this.range, 0])
+            .range([width, 0]);
+
+        this.yScale = d3.scaleLinear()
+            .domain([0, this.maxY])
+            .range([height, 0]);
+
+        this.line = d3.line()
+            .x((d, i) => this.xScale(i))
+            .y((d) => this.yScale(d.y))
+            .curve(d3.curveMonotoneX);
+
+        let svg = d3.select("#line").append("svg")
+            .attr("width", width + margin.left + margin.right)
+            .attr("height", height + margin.top + margin.bottom)
+            .append("g")
+            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+        svg.append("defs").append("clipPath")
+            .attr("id", "clip")
+            .append("rect")
+            .attr("width", width)
+            .attr("height", height);
+
+        this.newTaskPath = svg
+            .append("path")
+            .attr("clip-path", "url(#clip)")
+            .datum(this.newTaskCounts)
+            .attr("class", "line-new")
+            .attr("d", this.line);
+        this.failedTaskPath = svg
+            .append("path")
+            .attr("clip-path", "url(#clip)")
+            .datum(this.failedTaskCounts)
+            .attr("class", "line-failed")
+            .attr("d", this.line);
+        this.closedTaskPath = svg
+            .append("path")
+            .attr("clip-path", "url(#clip)")
+            .datum(this.closedTaskCounts)
+            .attr("class", "line-closed")
+            .attr("d", this.line);
+
+        let xAxis = svg.append("g")
+            .attr("class", "x-axis")
+            .attr("transform", "translate(0," + height + ")");
+        xAxis.call(d3.axisBottom(this.xScale).tickFormat((d) => (d - 600) + "s"));
+
+        this.yAxis = svg.append("g")
+            .attr("class", "y-axis");
+        this.yAxis.call(d3.axisLeft(this.yScale));
+    }
+
+    getStats() {
+        this.apiService.getProjectStats(2).subscribe((data) => {
+
+            this.projectStats = data["stats"];
+
+            this.updateLine();
+            this.updatePie();
+        });
+    }
+
+    private updateLine() {
+
+        let newVal = {"y": this.projectStats["new_task_count"]};
+        let failedVal = {"y": this.projectStats["failed_task_count"]};
+        let closedVal = {"y": this.projectStats["closed_task_count"]};
+
+        //Adjust y axis
+        this.maxY = Math.max(newVal["y"], this.maxY);
+        this.yScale.domain([0, this.maxY]);
+        this.yAxis.call(d3.axisLeft(this.yScale));
+
+        this.newTaskPath
+            .attr("d", this.line)
+            .attr("transform", null);
+        this.failedTaskPath
+            .attr("d", this.line)
+            .attr("transform", null);
+        this.closedTaskPath
+            .attr("d", this.line)
+            .attr("transform", null);
+
+        //remove fist element
+        if (this.newTaskCounts.length >= this.range) {
+            this.newTaskCounts.shift();
+            this.newTaskPath
+                .transition()
+                .attr("transform", "translate(" + this.xScale(-1) + ")");
+        }
+        if (this.failedTaskCounts.length >= this.range) {
+            this.failedTaskCounts.shift();
+            this.failedTaskPath
+                .transition()
+                .attr("transform", "translate(" + this.xScale(-1) + ")");
+        }
+        if (this.closedTaskCounts.length >= this.range) {
+            this.closedTaskCounts.shift();
+            this.closedTaskPath
+                .transition()
+                .attr("transform", "translate(" + this.xScale(-1) + ")");
+        }
+
+        this.newTaskCounts.push(newVal);
+        this.failedTaskCounts.push(failedVal);
+        this.closedTaskCounts.push(closedVal);
+    }
+
+    private updatePie() {
+        this.statusData = [
+            {label: "New", count: this.projectStats["new_task_count"]},
+            {label: "Failed", count: this.projectStats["failed_task_count"]},
+            {label: "Closed", count: this.projectStats["closed_task_count"]},
+        ];
+        this.assigneesData = _.map(this.projectStats["assignees"], (assignedTasks) => {
+            return {
+                label: assignedTasks["assignee"] == "00000000-0000-0000-0000-000000000000" ? "unassigned" : assignedTasks["assignee"],
+                count: assignedTasks["task_count"]
+            }
+        });
+
+        this.statusSvg.selectAll("path")
+            .data(this.pieFun(this.statusData));
+        this.statusPath
+            .attr('d', this.pieArc)
+            .attr('fill', (d) => this.statusColor(d.data.label));
+        this.assigneesSvg.selectAll("path")
+            .data(this.pieFun(this.assigneesData));
+        this.assigneesPath
+            .attr('d', this.pieArc)
+            .attr('fill', (d) => this.assigneesColor(d.data.label));
+    }
+
+    ngOnInit() {
+        this.statusData = [
+            {label: 'new', count: 0},
+            {label: 'failed', count: 0},
+            {label: 'closed', count: 0},
+        ];
+        this.assigneesData = [
+            {label: 'null', count: 0},
+        ];
+
+        this.setupStatusPieChart();
+        this.setupAssigneesPieChart();
+        this.setupLine();
+
+        this.getStats();
+        interval(1000).subscribe(() => {
+            this.getStats()
+        })
+    }
+}

web/angular/src/app/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es5",
+        "sourceMap": true
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

web/angular/src/browserslist

@@ -0,0 +1,11 @@
+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11

web/angular/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+    production: true
+};

web/angular/src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` 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/dist/zone-error';  // Included with Angular CLI.

web/angular/src/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Angular</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <base href="/">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+<app-root></app-root>
+</body>
+</html>

web/angular/src/karma.conf.js

@@ -0,0 +1,31 @@
+// 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-istanbul-reporter'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client: {
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        coverageIstanbulReporter: {
+            dir: require('path').join(__dirname, '../coverage'),
+            reports: ['html', 'lcovonly', 'text-summary'],
+            fixWebpackSourcePaths: true
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false
+    });
+};

web/angular/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));

web/angular/src/polyfills.ts

@@ -0,0 +1,85 @@
+/**
+ * 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 Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
+ *  This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
+ */
+
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * 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.ts';
+ *
+ * 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__BLACK_LISTED_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/dist/zone'; // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

web/angular/src/styles.css

@@ -0,0 +1,36 @@
+/* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+.line-new {
+    fill: none;
+    stroke: #31a6a2;
+    stroke-width: 3;
+}
+
+.line-failed {
+    fill: none;
+    stroke: #8c2627;
+    stroke-width: 3;
+}
+
+.line-closed {
+    fill: none;
+    stroke: #62f24b;
+    stroke-width: 3;
+}
+
+.overlay {
+    fill: none;
+    pointer-events: all;
+}
+
+/* Style the dots by assigning a fill and stroke */
+.dot {
+    fill: #ffab00;
+    stroke: #fff;
+}
+
+.focus circle {
+    fill: none;
+    stroke: steelblue;
+}

web/angular/src/test.ts

@@ -0,0 +1,17 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import {getTestBed} from '@angular/core/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// 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);

web/angular/src/tsconfig.app.json

@@ -0,0 +1,11 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/app",
+        "types": []
+    },
+    "exclude": [
+        "test.ts",
+        "**/*.spec.ts"
+    ]
+}

web/angular/src/tsconfig.spec.json

@@ -0,0 +1,18 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/spec",
+        "types": [
+            "jasmine",
+            "node"
+        ]
+    },
+    "files": [
+        "test.ts",
+        "polyfills.ts"
+    ],
+    "include": [
+        "**/*.spec.ts",
+        "**/*.d.ts"
+    ]
+}

web/angular/src/tslint.json

@@ -0,0 +1,17 @@
+{
+    "extends": "../tslint.json",
+    "rules": {
+        "directive-selector": [
+            true,
+            "attribute",
+            "app",
+            "camelCase"
+        ],
+        "component-selector": [
+            true,
+            "element",
+            "app",
+            "kebab-case"
+        ]
+    }
+}

web/angular/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+        "baseUrl": "./",
+        "outDir": "./dist/out-tsc",
+        "sourceMap": true,
+        "declaration": false,
+        "module": "es2015",
+        "moduleResolution": "node",
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "importHelpers": true,
+        "target": "es5",
+        "typeRoots": [
+            "node_modules/@types"
+        ],
+        "lib": [
+            "es2018",
+            "dom"
+        ]
+    }
+}

web/angular/tslint.json

@@ -0,0 +1,131 @@
+{
+    "rulesDirectory": [
+        "codelyzer"
+    ],
+    "rules": {
+        "arrow-return-shorthand": true,
+        "callable-types": true,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "deprecation": {
+            "severity": "warn"
+        },
+        "eofline": true,
+        "forin": true,
+        "import-blacklist": [
+            true,
+            "rxjs/Rx"
+        ],
+        "import-spacing": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-over-type-literal": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            140
+        ],
+        "member-access": false,
+        "member-ordering": [
+            true,
+            {
+                "order": [
+                    "static-field",
+                    "instance-field",
+                    "static-method",
+                    "instance-method"
+                ]
+            }
+        ],
+        "no-arg": true,
+        "no-bitwise": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-debugger": true,
+        "no-duplicate-super": true,
+        "no-empty": false,
+        "no-empty-interface": true,
+        "no-eval": true,
+        "no-inferrable-types": [
+            true,
+            "ignore-params"
+        ],
+        "no-misused-new": true,
+        "no-non-null-assertion": true,
+        "no-redundant-jsdoc": true,
+        "no-shadowed-variable": true,
+        "no-string-literal": false,
+        "no-string-throw": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unnecessary-initializer": true,
+        "no-unused-expression": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "prefer-const": true,
+        "quotemark": [
+            true,
+            "single"
+        ],
+        "radix": true,
+        "semicolon": [
+            true,
+            "always"
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "unified-signatures": true,
+        "variable-name": false,
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-decl",
+            "check-operator",
+            "check-separator",
+            "check-type"
+        ],
+        "no-output-on-prefix": true,
+        "use-input-property-decorator": true,
+        "use-output-property-decorator": true,
+        "use-host-property-decorator": true,
+        "no-input-rename": true,
+        "no-output-rename": true,
+        "use-life-cycle-interface": true,
+        "use-pipe-transform-interface": true,
+        "component-class-suffix": true,
+        "directive-class-suffix": true
+    }
+}