Add stability indicator

Author: VladislavKostyukevich

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 Features:
   - Move Administration to main Menu bar to make it more visible -> [View Issue](https://github.com/aquality-automation/aquality-tracking/issues/58)
+  - Test Run view: Add stability indicator -> [View Issue](https://github.com/aquality-automation/aquality-tracking/issues/60)
 
 Bugfixes:
 

src/app/app.component.ts

@@ -192,7 +192,9 @@ export class AppComponent {
           link: `/audit/${this.projectId}`,
           show: (await this.permissionsService.hasPermissions(undefined,
             [ELocalPermissions.admin, ELocalPermissions.engineer, ELocalPermissions.manager, ELocalPermissions.viewer]))
-            && this.projectId && this.globaldata.auditModule,
+            && this.projectId && this.globaldata.auditModule &&
+            !(await this.permissionsService.hasPermissions([EGlobalPermissions.manager, EGlobalPermissions.auditor,
+              EGlobalPermissions.audit_admin])),
           routerOptions: { exact: true }
         }, {
           name: 'Audits',

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule, } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpModule, BrowserXhr } from '@angular/http';
 import { HashLocationStrategy, LocationStrategy } from '@angular/common';
 import { CookieService, CookieOptions } from 'angular2-cookie/core';
@@ -33,6 +33,7 @@ import { GuardService } from './shared/guards/guard.service';
     AdministrationModule,
     BrowserModule,
     FormsModule,
+    ReactiveFormsModule,
     appRouting,
     HttpModule,
     ProjectModule,

src/app/derectives/mfTableSorter.derective.ts

@@ -2,13 +2,14 @@ import {
   Directive, ElementRef, AfterViewChecked,
   Input, Output, Renderer, EventEmitter
 } from '@angular/core';
+import { TFSorting, TFOrder } from '../elements/table/tfColumn';
 
 @Directive({
   selector: '[sorter]'
 })
 export class TableSorterDerective implements AfterViewChecked {
   @Input()
-  sorter: {order: string, property: string};
+  sorter: TFSorting;
   @Output()
   sorted = new EventEmitter();
 
@@ -46,15 +47,17 @@ export class TableSorterDerective implements AfterViewChecked {
     icon.classList.remove('glyphicon-triangle-top');
     icon.classList.remove('glyphicon');
 
-    if (this.sorter.order === 'asc') {
-      this.sorter = {order: 'desc', property: this.sorter.property};
-      icon.classList.add('glyphicon');
-      icon.classList.add('glyphicon-triangle-top');
-    } else if (this.sorter.order === 'desc') {
-      this.sorter = {order: 'asc', property: this.sorter.property};
-      icon.classList.add('glyphicon');
-      icon.classList.add('glyphicon-triangle-bottom');
+    switch (this.sorter.order) {
+      case TFOrder.asc:
+        this.sorter.order = TFOrder.desc;
+        break;
+      case TFOrder.desc:
+        this.sorter.order = TFOrder.asc;
+        break;
     }
+
+    icon.classList.add('glyphicon');
+    icon.classList.add('glyphicon-triangle-bottom');
     this.sorted.emit(this.sorter);
   }
 }

src/app/elements/color-dots/color-dots.component.css

@@ -0,0 +1,9 @@
+.label:empty {
+    display: inline;
+}
+
+.label {
+    margin: 1px;
+    padding: .2em .8em .3em;
+    border-radius: 1em;
+}

src/app/elements/color-dots/color-dots.component.html

@@ -0,0 +1,9 @@
+<div class="color-dots-container">
+  <span *ngFor="let color of numericColors" class="label" [ngClass]="{
+    'label-danger': color === 1,
+    'label-primary': color === 3,
+    'label-warning': color === 2,
+    'label-info': color === 4,
+    'label-success': color === 5
+  }"></span>
+</div>

src/app/elements/color-dots/color-dots.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-color-dots',
+  templateUrl: './color-dots.component.html',
+  styleUrls: ['./color-dots.component.css']
+})
+export class ColorDotsComponent implements OnInit {
+  @Input() numericColors: number[];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/elements/labeled-element/labeled-input/labeled-input.component.html

@@ -1,8 +1,9 @@
 <div class="container-element" [ngClass]="{'el-small': size === 'small'}">
     <div class="label-element pull-left">
-        <label for="identifier" [title]="label">{{label}}</label>
+        <label [for]="identifier" [title]="label">{{label}}</label>
     </div>
-    <div class="switch-element">
-        <input class="form-control" [(ngModel)]="value" [id]="identifier"/>
+    <div class="input-element">
+        <input class="form-control" [(ngModel)]="value" [type]="type" [min]="min" [max]="max" [id]="identifier"
+            [formControl]="rateControl" [name]="identifier" />
     </div>
 </div>

src/app/elements/labeled-element/labeled-input/labeled-input.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit} from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, OnInit, Input } from '@angular/core';
+import { NG_VALUE_ACCESSOR, FormControl, Validators, ValidatorFn } from '@angular/forms';
 import { LabeledBaseComponent } from '../labeled-base.component';
 let identifier = 0;
 
@@ -8,16 +8,29 @@ let identifier = 0;
   templateUrl: './labeled-input.component.html',
   styleUrls: ['./labeled-input.component.css'],
   providers: [
-    {provide: NG_VALUE_ACCESSOR, useExisting: LabeledInputComponent, multi: true}
+    { provide: NG_VALUE_ACCESSOR, useExisting: LabeledInputComponent, multi: true }
   ],
 })
 export class LabeledInputComponent extends LabeledBaseComponent<string> implements OnInit {
   public identifier = `labeled-input-${identifier++}`;
+  public rateControl = new FormControl();
+  @Input() public type: string;
+  @Input() public max: string;
+  @Input() public min: string;
 
   constructor() {
     super();
   }
 
   ngOnInit() {
+    const validators: ValidatorFn[] = []
+    if (this.min) {
+      validators.push(Validators.min(+this.min));
+    }
+    if (this.max) {
+      validators.push(Validators.max(+this.max));
+    }
+
+    this.rateControl.setValidators(validators);
   }
 }

src/app/elements/table/filter.helper.ts

@@ -9,6 +9,8 @@ export class Filter {
     to?: Date;
     options?: string;
     range?: string;
+    dots?: { name: string, only?: number[], contains?: number[] }
+    ft_select?: boolean | number;
 }
 
 export class FilterHelper {
@@ -35,9 +37,9 @@ export class FilterHelper {
 
     updateAppliedFilters = (appliedFilters: Filter[], filter: Filter) => {
         appliedFilters = appliedFilters.filter((x: Filter) => x.property !== filter.property &&
-            (x.from === undefined || filter.from === undefined ) ||
+            (x.from === undefined || filter.from === undefined) ||
             (x.to === undefined || filter.to === undefined));
-        if (filter.value || filter.state !== undefined || filter.options || filter.range || filter.from || filter.to) {
+        if (filter.value || filter.state !== undefined || filter.options || filter.range || filter.from || filter.to || filter.dots) {
             appliedFilters.push(filter);
         }
         return appliedFilters;
@@ -60,6 +62,11 @@ export class FilterHelper {
             queryParam[`f_${filter.property}_opt`] = filter.options;
         } else if (filter.range) {
             queryParam[`f_${filter.property}_rng`] = filter.range;
+        } else if (filter.dots) {
+            queryParam[`f_${filter.property}_dots`]
+                = `name_${filter.dots.name}_only_${
+                    filter.dots.only ? filter.dots.only.join(',') : ''}_contains_${
+                        filter.dots.contains ? filter.dots.contains.join(',') : ''}`;
         } else {
             this.route.queryParams.subscribe(params => {
                 const filterKeys = Object.keys(params);
@@ -96,6 +103,8 @@ export class FilterHelper {
                 return this.filterRange(data, filter);
             } else if (filter.hasOwnProperty('state')) {
                 return this.filterState(data, filter);
+            } else if (filter.hasOwnProperty('dots')) {
+                return this.filterDots(data, filter);
             } else {
                 return data;
             }
@@ -164,6 +173,23 @@ export class FilterHelper {
         return data;
     }
 
+    filterDots(filteredData: any[], filter: Filter) {
+        let data = filteredData;
+        if (filter.dots !== undefined) {
+            data = filteredData.filter(x => {
+                const value = x[filter.property] as number[];
+                if (filter.dots.only && filter.dots.only.length > 0) {
+                    return value.every(dot => filter.dots.only.includes(dot));
+                } else if (filter.dots.contains && filter.dots.contains.length > 0) {
+                    return value.some(dot => filter.dots.contains.includes(dot));
+                } else {
+                    return true;
+                }
+            });
+        }
+        return data;
+    }
+
     applyNewFilter = (data: any[], appliedFilters: Filter[], newFilter: Filter, queryParams: boolean): {
         filteredData: any[],
         newFilters: Filter[]
@@ -203,6 +229,8 @@ export class FilterHelper {
         const range = /f_(.*)_rng/;
         const state = /f_(.*)_st/;
         const value = /f_(.*)/;
+        const dots = /f_(.*)_dots/;
+        const dotsValue = /name_(.*)_only_(.*)_contains_(.*)/;
         const filter: Filter = new Filter();
 
         if (dateFrom.test(parameter)) {
@@ -220,6 +248,15 @@ export class FilterHelper {
         } else if (state.test(parameter)) {
             filter.property = parameter.match(state)[1];
             filter.state = parameters[parameter] === 'true' ? true : parameters[parameter] === 'false' ? false : undefined;
+        } else if (dots.test(parameter)) {
+            filter.property = parameter.match(dots)[1];
+            if (parameters[parameter]) {
+                filter.dots = {
+                    name: parameters[parameter].match(dotsValue)[1],
+                    only: JSON.parse(`[${parameters[parameter].match(dotsValue)[2]}]`) as number[],
+                    contains: JSON.parse(`[${parameters[parameter].match(dotsValue)[3]}]`) as number[]
+                };
+            }
         } else if (value.test(parameter)) {
             filter.property = parameter.match(value)[1];
             filter.value = parameters[parameter];