V4 (#185)

.github/workflows/docker-hub-v4.yml

@@ -0,0 +1,34 @@
+name: Publish Docker image on v4 push
+
+on:
+  push:
+    branches:
+      - 'v4'
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        with:
+          images: novyl/jtl-reporter-fe
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        with:
+          context: .
+          push: true
+          labels: novyl/jtl-reporter-fe:v4
+          tags: novyl/jtl-reporter-fe:v4

package.json

@@ -37,7 +37,7 @@
     "moment": "^2.24.0",
     "ngx-spinner": "^8.1.0",
     "ngx-toastr": "^10.0.2",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "rxjs": "^6.0.0",
     "time-ago-pipe": "^1.3.2",
     "zone.js": "~0.9.1"

src/app/_interceptors/error-interceptor.ts

@@ -1,16 +1,17 @@
-import { Injectable } from '@angular/core';
-import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
-import { Observable, throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { AuthenticationService } from '../_services/authentication.service';
+import {Injectable} from '@angular/core';
+import {HttpRequest, HttpHandler, HttpEvent, HttpInterceptor} from '@angular/common/http';
+import {Observable, throwError, of} from 'rxjs';
+import {catchError} from 'rxjs/operators';
+import {AuthenticationService} from '../_services/authentication.service';
 import {Router} from '@angular/router';
 
 
 @Injectable()
 export class ErrorInterceptor implements HttpInterceptor {
   constructor(
     private authenticationService: AuthenticationService,
-    private router: Router) { }
+    private router: Router) {
+  }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     return next.handle(request).pipe(catchError(err => {
@@ -20,6 +21,7 @@ export class ErrorInterceptor implements HttpInterceptor {
         this.router.navigate(['login']);
       }
 
+
       const error = err.error.message || err.statusText;
       return throwError(error);
     }));

src/app/_services/authentication.service.ts

@@ -2,7 +2,6 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map } from 'rxjs/operators';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { ApiKey } from './api-token.model';
 
 
 @Injectable({
@@ -36,6 +35,10 @@ export class AuthenticationService {
     return this.http.post<any>('auth/change-password', body, { observe: 'response'});
   }
 
+  initUser(body) {
+    return this.http.post('auth/initialize-user', body);
+  }
+
   setLogin (value) {
     this.loggedIn.next(value);
   }

src/app/_services/init.service.spec.ts

@@ -0,0 +1,15 @@
+import { HttpClientModule } from '@angular/common/http';
+import { TestBed } from '@angular/core/testing';
+
+import { InitService } from './init.service';
+
+describe('InitService', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [ HttpClientModule ]
+  }));
+
+  it('should be created', () => {
+    const service: InitService = TestBed.get(InitService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/_services/init.service.ts

@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InitService {
+
+  constructor(private http: HttpClient) { }
+
+  fetchInfo(): Observable<{ initialized: boolean }> {
+    return this.http.get<{ initialized: boolean }>('info');
+  }
+}

src/app/administration/projects/administration.component.html

@@ -47,8 +47,19 @@
                         <span>{{_.latestRun | timeAgo}}</span>
                       </td>
                       <td class="edit text-right">
-                        <app-edit-project [projectDataInput]="{ projectName: _.projectName }"></app-edit-project>
-                        <app-delete-project [projectData]="{ projectName: _.projectName }"></app-delete-project>
+                        <div class="btn-group mr-3">
+                          <div display="dynamic" container="body" [placement]="['bottom-right', 'bottom-left']" class="btn-group" ngbDropdown role="group"
+                               aria-label="Button group with nested dropdown">
+                            <button class="btn btn-sm jtl-no-glow jtl-control-menu hamburger-menu" ngbDropdownToggle><i class="fas fa-ellipsis-h"></i></button>
+                            <div class="dropdown-menu jtl-dropdown-control-menu" ngbDropdownMenu>
+                              <app-project-settings [projectName]="_.projectName"></app-project-settings>
+
+                              <app-delete-project [projectData]="{ projectName: _.projectName }"></app-delete-project>
+
+                            </div>
+
+                          </div>
+                        </div>
                       </td>
                     </tr>
                   </tbody>

src/app/administration/projects/delete-project/delete-project.component.html

@@ -27,6 +27,6 @@ <h5 class="modal-title" id="modal-basic-title">Delete project</h5>
 </ng-template>
 
 <span>
-  <button class="btn btn-link add-btn settings-icon" (click)="open(content)"><i class="fas fa-trash-alt"></i>
+  <button class="edit btn btn-sm btn-primary" (click)="open(content)" ngbDropdownItem>Delete
   </button>
 </span>

src/app/administration/projects/delete-project/delete-project.component.ts

@@ -10,7 +10,7 @@ import { ProjectService } from 'src/app/project.service';
 @Component({
   selector: 'app-delete-project',
   templateUrl: './delete-project.component.html',
-  styleUrls: ['./delete-project.component.css', '../../administration.css']
+  styleUrls: ['./delete-project.component.css']
 })
 export class DeleteProjectComponent implements OnInit {
 

src/app/app.module.ts

@@ -17,7 +17,6 @@ import { ProjectsAdministrationComponent } from './administration/projects/admin
 import { TimeAgoPipe } from 'time-ago-pipe';
 import { DataTableModule } from '@rushvora/ng-datatable';
 import { AddNewProjectComponent } from './administration/projects/add-project/add-project-modal.component';
-import { EditProjectComponent } from './administration/projects/edit-project/edit-project.component';
 import { DeleteProjectComponent } from './administration/projects/delete-project/delete-project.component';
 import { DeleteItemComponent } from './item-detail/delete-item/delete-item.component';
 import { ProjectComponent } from './project/project.component';
@@ -28,7 +27,6 @@ import { SettingsScenarioComponent } from './scenario/scenario-settings/scenario
 import { DeleteScenarioComponent } from './scenario/delete-scenario/delete-scenario.component';
 import { NgxSpinnerModule } from 'ngx-spinner';
 import { StatsCompareComponent } from './item-detail/stats-compare/stats-compare.component';
-import { AttachementsComponent } from './item-detail/attachements/attachements.component';
 import { ControlPanelComponent } from './control-panel/control-panel.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ToastrModule } from 'ngx-toastr';
@@ -64,7 +62,11 @@ import { LabelChartComponent } from './item-detail/label-chart/label-chart.compo
 import { AnalyzeChartsComponent } from './item-detail/analyze-charts/analyze-charts.component';
 import { AddMetricComponent } from './item-detail/analyze-charts/add-metric/add-metric.component';
 import { ScenarioTrendsComponent } from './scenario/scenario-trends/scenario-trends.component';
-import { RequestStatsCompareComponent } from './item-detail/request-stats-compare/request-stats-compare.component';
+import { ProjectSettingsComponent } from './project/project-settings/project-settings.component';
+import { RequestStatsCompareComponent } from './item-detail/request-stats/request-stats-compare.component';
+import { InitUserComponent } from './init-user/init-user.component';
+import { LabelHealthComponent } from './item-detail/request-stats/label-health/label-health.component';
+import { ZeroErrorToleranceWarningComponent } from './item-detail/zero-error-tolerance-warning/zero-error-tolerance-warning.component';
 
 const appRoutes: Routes = [
   { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
@@ -94,6 +96,7 @@ const appRoutes: Routes = [
     runGuardsAndResolvers: 'always', canActivate: [AuthGuard]
   },
   { path: 'login', component: LoginComponent },
+  { path: 'init', component: InitUserComponent }
 ];
 
 
@@ -112,7 +115,6 @@ const appRoutes: Routes = [
     EditItemComponent,
     ProjectsAdministrationComponent,
     TimeAgoPipe,
-    EditProjectComponent,
     DeleteProjectComponent,
     DeleteItemComponent,
     ProjectComponent,
@@ -121,7 +123,6 @@ const appRoutes: Routes = [
     SettingsScenarioComponent,
     DeleteScenarioComponent,
     StatsCompareComponent,
-    AttachementsComponent,
     ControlPanelComponent,
     BreadcrumbComponent,
     LabelTrendComponent,
@@ -149,7 +150,11 @@ const appRoutes: Routes = [
     AnalyzeChartsComponent,
     AddMetricComponent,
     ScenarioTrendsComponent,
+    ProjectSettingsComponent,
     RequestStatsCompareComponent,
+    InitUserComponent,
+    LabelHealthComponent,
+    ZeroErrorToleranceWarningComponent,
   ],
   imports: [
     RouterModule.forRoot(

src/app/graphs/monitoring.ts

@@ -2,8 +2,13 @@ export const monitoringGraphSettings: any = () => {
   return {
     chart: {
       type: 'line',
-      spacingRight: -7,
-      spacingLeft: -7
+    },
+    time: {
+      getTimezoneOffset: function (timestamp) {
+        const d = new Date();
+        const timezoneOffset = d.getTimezoneOffset();
+        return timezoneOffset;
+      }
     },
     title: {
       text: ''
@@ -42,7 +47,7 @@ export const monitoringGraphSettings: any = () => {
       lineWidth: 0,
       opposite: true,
       title: {
-        text: 'threads'
+        text: ''
       }
     }],
   };