worker stats dashboard, fixed logs page, mobile support for navbar & project dashboard

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

@@ -17,8 +17,8 @@ export class ApiService {
     ) {
     }
 
-    getLogs() {
-        return this.http.post(this.url + "/logs", "{\"level\":4, \"since\":1}", this.options);
+    getLogs(level: number) {
+        return this.http.post(this.url + "/logs", {level: level, since: 1}, this.options);
     }
 
     getProjects() {
@@ -57,4 +57,8 @@ export class ApiService {
         return this.http.get(this.url + `/project/assignees/${project}`, this.options)
     }
 
+    getWorkerStats() {
+        return this.http.get(this.url + `/worker/stats`, this.options)
+    }
+
 }

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

@@ -10,6 +10,7 @@ import {filter} from "rxjs/operators";
 import {TranslateService} from "@ngx-translate/core";
 import {LoginComponent} from "./login/login.component";
 import {AccountDetailsComponent} from "./account-details/account-details.component";
+import {WorkerDashboardComponent} from "./worker-dashboard/worker-dashboard.component";
 
 const routes: Routes = [
     {path: "log", component: LogsComponent},
@@ -18,7 +19,8 @@ const routes: Routes = [
     {path: "projects", component: ProjectListComponent},
     {path: "project/:id", component: ProjectDashboardComponent},
     {path: "project/:id/update", component: UpdateProjectComponent},
-    {path: "new_project", component: CreateProjectComponent}
+    {path: "new_project", component: CreateProjectComponent},
+    {path: "workers", component: WorkerDashboardComponent}
 ];
 
 @NgModule({

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

@@ -8,3 +8,17 @@
 
 .nav-link {
 }
+
+.large-nav {
+    display: none;
+}
+
+@media (min-width: 768px) {
+    .large-nav {
+        display: initial;
+    }
+
+    .small-nav {
+        display: none;
+    }
+}

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

@@ -1,18 +1,47 @@
 <mat-toolbar color="primary">
-    <button mat-button [class.mat-accent]="router.url == '/'" class="nav-title" [routerLink]="''">{{"nav.title" | translate}}</button>
-    <button mat-button [class.mat-accent]="router.url == '/log'" class="nav-link" [routerLink]="'log'">{{"nav.logs" | translate}}</button>
-    <button mat-button [class.mat-accent]="router.url == '/projects'" class="nav-link" [routerLink]="'projects'">{{"nav.project_list" | translate}}</button>
-    <button mat-button [class.mat-accent]="router.url == '/new_project'" class="nav-link" [routerLink]="'new_project'">{{"nav.new_project" | translate}}</button>
+    <div class="large-nav">
+        <button mat-button [class.mat-accent]="router.url == '/'" class="nav-title"
+                [routerLink]="''">{{"nav.title" | translate}}</button>
+        <button mat-button [class.mat-accent]="router.url == '/log'" class="nav-link"
+                [routerLink]="'log'">{{"nav.logs" | translate}}</button>
+        <button mat-button [class.mat-accent]="router.url == '/projects'" class="nav-link"
+                [routerLink]="'projects'">{{"nav.project_list" | translate}}</button>
+        <button mat-button [class.mat-accent]="router.url == '/new_project'" class="nav-link"
+                [routerLink]="'new_project'">{{"nav.new_project" | translate}}</button>
+        <button mat-button [class.mat-accent]="router.url == '/workers'" class="nav-link"
+                [routerLink]="'workers'">{{"nav.worker_dashboard" | translate}}</button>
+    </div>
+    <div class="small-nav">
+        <button mat-button [matMenuTriggerFor]="smallNav">
+            <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #smallNav>
+            <button mat-menu-item [class.mat-accent]="router.url == '/'" class="nav-title"
+                    [routerLink]="''">{{"nav.title" | translate}}</button>
+            <button mat-menu-item [class.mat-accent]="router.url == '/log'" class="nav-link"
+                    [routerLink]="'log'">{{"nav.logs" | translate}}</button>
+            <button mat-menu-item [class.mat-accent]="router.url == '/projects'" class="nav-link"
+                    [routerLink]="'projects'">{{"nav.project_list" | translate}}</button>
+            <button mat-menu-item [class.mat-accent]="router.url == '/new_project'" class="nav-link"
+                    [routerLink]="'new_project'">{{"nav.new_project" | translate}}</button>
+            <button mat-menu-item [class.mat-accent]="router.url == '/workers'" class="nav-link"
+                    [routerLink]="'workers'">{{"nav.worker_dashboard" | translate}}</button>
+        </mat-menu>
+    </div>
     <span class="nav-spacer"></span>
     <button mat-button [class.mat-accent]="router.url == '/login'" class="nav-link"
             [routerLink]="'login'">{{"nav.login" | translate}}</button>
-    <mat-form-field [floatLabel]="'never'">
-        <mat-select [placeholder]="'nav.langSelect' | translate" (selectionChange)="langChange($event)">
-            <mat-option *ngFor="let lang of langList" [value]="lang.lang">
-                {{lang.display}}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
+
+    <button mat-button [matMenuTriggerFor]="langMenu">
+        {{"nav.lang_select" | translate}}
+        <mat-icon>arrow_drop_down</mat-icon>
+    </button>
+    <mat-menu #langMenu>
+        <button mat-menu-item *ngFor="let lang of langList" (click)="langChange(lang)">
+            {{lang.display}}
+        </button>
+    </mat-menu>
+
 
 </mat-toolbar>
 

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

@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {Router} from '@angular/router';
 import {TranslateService} from "@ngx-translate/core";
-import {MatSelectChange} from "@angular/material";
 
 @Component({
     selector: 'app-root',
@@ -10,8 +9,8 @@ import {MatSelectChange} from "@angular/material";
 })
 export class AppComponent {
 
-    langChange(event: MatSelectChange) {
-        this.translate.use(event.value)
+    langChange(lang: any) {
+        this.translate.use(lang.lang)
     }
 
     langList: any[] = [

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

@@ -9,6 +9,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {
     MatAutocompleteModule,
     MatButtonModule,
+    MatButtonToggleModule,
     MatCardModule,
     MatCheckboxModule,
     MatDividerModule,
@@ -45,6 +46,7 @@ import {TranslateHttpLoader} from "@ngx-translate/http-loader";
 import {TranslatedPaginator} from "./TranslatedPaginatorConfiguration";
 import {LoginComponent} from './login/login.component';
 import {AccountDetailsComponent} from './account-details/account-details.component';
+import {WorkerDashboardComponent} from './worker-dashboard/worker-dashboard.component';
 
 
 export function createTranslateLoader(http: HttpClient) {
@@ -63,6 +65,7 @@ export function createTranslateLoader(http: HttpClient) {
         SnackBarComponent,
         LoginComponent,
         AccountDetailsComponent,
+        WorkerDashboardComponent,
     ],
     imports: [
         BrowserModule,
@@ -100,7 +103,8 @@ export function createTranslateLoader(http: HttpClient) {
         MatSelectModule,
         MatProgressBarModule,
         MatTabsModule,
-        MatListModule
+        MatListModule,
+        MatButtonToggleModule
 
     ],
     exports: [],

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

@@ -11,7 +11,7 @@
     text-align: left;
 }
 
-.checkbox-wrapper mat-checkbox {
+mat-button-toggle-group {
     margin: 3px 5px;
     vertical-align: middle;
 }

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

@@ -1,16 +1,23 @@
 <div class="container">
     <div class="table-container">
-        <div class="checkbox-wrapper">
-            <mat-form-field style="margin-right: 10px">
-                <input matInput (keyup)="applyFilter($event.target.value)" [placeholder]="'logs.filter' | translate">
-            </mat-form-field>
-            <mat-checkbox>{{"logs.fatal" | translate}}</mat-checkbox>
-            <mat-checkbox>{{"logs.panic" | translate}}</mat-checkbox>
-            <mat-checkbox>{{"logs.error" | translate}}</mat-checkbox>
-            <mat-checkbox>{{"logs.warn" | translate}}</mat-checkbox>
-            <mat-checkbox>{{"logs.info" | translate}}</mat-checkbox>
-            <mat-checkbox>{{"logs.debug" | translate}}</mat-checkbox>
-        </div>
+        <mat-form-field style="margin-right: 10px">
+            <input matInput (keyup)="applyFilter($event.target.value)" [placeholder]="'logs.filter' | translate">
+        </mat-form-field>
+        <mat-button-toggle-group name="level" aria-label="Font Style" (change)="filterLevelChange($event)">
+            <mat-button-toggle value="1">{{"logs.fatal" | translate}}</mat-button-toggle>
+            <mat-button-toggle value="2">{{"logs.panic" | translate}}</mat-button-toggle>
+            <mat-button-toggle value="3">{{"logs.error" | translate}}</mat-button-toggle>
+            <mat-button-toggle value="4">{{"logs.warn" | translate}}</mat-button-toggle>
+            <mat-button-toggle value="5">{{"logs.info" | translate}}</mat-button-toggle>
+            <mat-button-toggle value="6">{{"logs.debug" | translate}}</mat-button-toggle>
+            <mat-button-toggle value="7">{{"logs.trace" | translate}}</mat-button-toggle>
+        </mat-button-toggle-group>
+
+        <button mat-raised-button style="float: right"
+                [title]="'dashboard.refresh' | translate"
+                (click)="refresh()">
+            <mat-icon>refresh</mat-icon>
+        </button>
         <div class="mat-elevation-z8">
 
             <mat-table [dataSource]="data" matSort matSortActive="timestamp"

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

@@ -4,7 +4,7 @@ import {getLogLevel, LogEntry} from "../models/logentry";
 
 import _ from "lodash"
 import * as moment from "moment";
-import {MatPaginator, MatSort, MatTableDataSource} from "@angular/material";
+import {MatButtonToggleChange, MatPaginator, MatSort, MatTableDataSource} from "@angular/material";
 
 @Component({
     selector: 'app-logs',
@@ -15,6 +15,7 @@ export class LogsComponent implements OnInit {
 
     logs: LogEntry[] = [];
     data: MatTableDataSource<LogEntry>;
+    filterLevel: number = 1;
     logsCols: string[] = ["level", "timestamp", "message", "data"];
 
     @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -25,21 +26,25 @@ export class LogsComponent implements OnInit {
     }
 
     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(
+    filterLevelChange(event: MatButtonToggleChange) {
+        this.filterLevel = Number(event.value);
+        this.getLogs(Number(event.value))
+    }
+
+    private refresh() {
+        this.getLogs(this.filterLevel)
+    }
+
+    private getLogs(level: number) {
+        this.apiService.getLogs(level).subscribe(
             data => {
                 this.data.data = _.map(data["logs"], (entry) => {
                     return <LogEntry>{

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

@@ -0,0 +1,18 @@
+<div class="container">
+    <mat-card class="mat-elevation-z8">
+        <mat-card-header style="float:left">
+            <mat-card-title>{{"workers.title" | translate}}</mat-card-title>
+            <mat-card-subtitle>{{"workers.subtitle" | translate}}</mat-card-subtitle>
+        </mat-card-header>
+
+        <button mat-raised-button style="float: right"
+                [title]="'dashboard.refresh' | translate"
+                (click)="refresh()"
+        >
+            <mat-icon>refresh</mat-icon>
+        </button>
+        <mat-card-content>
+            <canvas id="worker-stats"></canvas>
+        </mat-card-content>
+    </mat-card>
+</div>

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

@@ -0,0 +1,66 @@
+import {Component, OnInit} from '@angular/core';
+import {ApiService} from "../api.service";
+
+import {Chart} from "chart.js";
+
+@Component({
+    selector: 'app-worker-dashboard',
+    templateUrl: './worker-dashboard.component.html',
+    styleUrls: ['./worker-dashboard.component.css']
+})
+export class WorkerDashboardComponent implements OnInit {
+
+    private chart: Chart;
+
+    constructor(private apiService: ApiService) {
+    }
+
+    ngOnInit() {
+        this.setupChart();
+        this.refresh()
+    }
+
+    private refresh() {
+        this.apiService.getWorkerStats()
+            .subscribe((data: any) => {
+                    this.updateChart(data.stats)
+                }
+            )
+    }
+
+    private setupChart() {
+
+        let elem = document.getElementById("worker-stats") as any;
+        let ctx = elem.getContext("2d");
+
+        this.chart = new Chart(ctx, {
+            type: "bar",
+            data: {
+                labels: [],
+                datasets: [],
+            },
+            options: {
+                title: {
+                    display: false,
+                },
+                legend: {
+                    display: false
+                },
+                tooltips: {
+                    enabled: true,
+                },
+                responsive: true
+            }
+        })
+    }
+
+    private updateChart(data) {
+
+        this.chart.data.labels = data.map(w => w.alias);
+        this.chart.data.datasets = [{
+            data: data.map(w => w.closed_task_count),
+            backgroundColor: "#FF3D00"
+        }];
+        this.chart.update();
+    }
+}

web/angular/src/assets/i18n/en.json

@@ -1,11 +1,12 @@
 {
     "nav": {
         "title": "task_tracker",
-        "langSelect": "Language",
+        "lang_select": "Language",
         "logs": "Logs",
         "project_list": "Projects",
         "new_project": "New Project",
-        "login": "Login"
+        "login": "Login",
+        "worker_dashboard": "Workers"
     },
     "logs": {
         "filter": "Filter",
@@ -40,7 +41,8 @@
         "new_project": "New project",
         "login": "Login",
         "new_account": "Create account",
-        "account": "Account details"
+        "account": "Account details",
+        "workers": "Workers"
     },
     "project": {
         "name": "Project name",
@@ -67,8 +69,7 @@
         "login": "Login",
         "username": "Username",
         "password": "Password",
-        "repeat_password": "Repeat password",
-        "create_account": ""
+        "repeat_password": "Repeat password"
     },
     "create_account": {
         "title": "Register",
@@ -79,5 +80,9 @@
         "title": "Account details",
         "subtitle": "toto: subtitle",
         "username": "Username"
+    },
+    "workers": {
+        "title": "Completed tasks per worker",
+        "subtitle": "Real-time data for all projects"
     }
 }

web/angular/src/assets/i18n/fr.json

@@ -1,11 +1,12 @@
 {
     "nav": {
         "title": "task_tracker (fr)",
-        "langSelect": "Langue",
+        "lang_select": "Langue",
         "logs": "Journal",
         "project_list": "Projets",
         "new_project": "Nouveau projet",
-        "login": "Ouvrir un session"
+        "login": "Ouvrir un session",
+        "worker_dashboard": "Workers"
     },
     "logs": {
         "filter": "Filtrer",
@@ -41,7 +42,8 @@
         "update": "Modifier",
         "login": "Ouverture de session",
         "new_account": "Création de compte",
-        "account": "Compte"
+        "account": "Compte",
+        "workers": "Workers"
     },
     "project": {
         "name": "Nom du projet",
@@ -80,6 +82,10 @@
         "title": "Détails du compte",
         "subtitle": "toto: sous-titre",
         "username": "Nom d'utilisateur"
+    },
+    "workers": {
+        "title": "Tâches complétés par worker",
+        "subtitle": "Données en temps réél pour tous les projets"
     }
 }