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