Web dashboard, task release, logs api

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"
+        ]
+    }
+}