Add Statistics to Event tabs (#210)

hobbyfarm · May 6, 2024 · 2da812e · 2da812e
1 parent 1768841
commit 2da812e
Show file tree

Hide file tree

Showing 5 changed files with 213 additions and 55 deletions.
diff --git a/src/app/dashboards/dashboard-details/dashboard-details.component.html b/src/app/dashboards/dashboard-details/dashboard-details.component.html
@@ -5,6 +5,9 @@ <h3 *ngIf="sessionDashboardActive && rbacSuccessSessions">
   <h3 *ngIf="vmDashboardActive && rbacSuccessVms">
     VMs for {{ selectedEvent?.event_name }}
   </h3>
+  <h3 *ngIf="statisticsDashboardActive && rbacSuccessSessions">
+    Statistics for {{ selectedEvent?.event_name }}
+  </h3>
   <span class="additional-info">
     <ng-container *rbac="['accesscodes.get']">
       AC:
@@ -46,5 +49,16 @@ <h3 *ngIf="vmDashboardActive && rbacSuccessVms">
         </ng-template>
       </clr-tab>
     </ng-container>
+    <ng-container *ngIf="rbacSuccessSessions">
+      <clr-tab>
+        <button clrTabLink>Statistics</button>
+        <ng-template [(clrIfActive)]="statisticsDashboardActive">
+          <clr-tab-content *clrIfActive>
+            <app-session-statistics [scheduledEvent]="selectedEvent">
+            </app-session-statistics>
+          </clr-tab-content>
+        </ng-template>
+      </clr-tab>
+    </ng-container>
   </clr-tabs>
 </div>
diff --git a/src/app/dashboards/dashboard-details/dashboard-details.component.ts b/src/app/dashboards/dashboard-details/dashboard-details.component.ts
@@ -1,8 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { DashboardScheduledEvent } from '../../data/scheduledevent';
-import {
-  ScheduledeventService,
-} from '../../data/scheduledevent.service';
+import { ScheduledeventService } from '../../data/scheduledevent.service';
 import { RbacService } from '../../data/rbac.service';
 import { Resource, Verb } from '../../data/rbac';
 import { ActivatedRoute, Params } from '@angular/router';
@@ -16,6 +14,8 @@ import { Subscription, switchMap, tap } from 'rxjs';
 export class DashboardDetailsComponent implements OnInit, OnDestroy {
   public sessionDashboardActive: boolean = true;
   public vmDashboardActive: boolean = false;
+  public statisticsDashboardActive: boolean = false;
+
   public selectedEvent: DashboardScheduledEvent;
   public loggedInAdminEmail: string;
 
@@ -35,17 +35,19 @@ export class DashboardDetailsComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.eventSubscription = this.route.params.pipe(
-      tap((params: Params) => {
-        this.eventId = params['id'] ?? '';
-      }),
-      switchMap(() => this.scheduledeventService.getDashboardCache()),
-    ).subscribe((cache: Map<string, DashboardScheduledEvent>) => {
-      const currentEvent = cache.get(this.eventId);
-      if (currentEvent) {
-        this.selectedEvent = currentEvent;
-      }
-    });
+    this.eventSubscription = this.route.params
+      .pipe(
+        tap((params: Params) => {
+          this.eventId = params['id'] ?? '';
+        }),
+        switchMap(() => this.scheduledeventService.getDashboardCache())
+      )
+      .subscribe((cache: Map<string, DashboardScheduledEvent>) => {
+        const currentEvent = cache.get(this.eventId);
+        if (currentEvent) {
+          this.selectedEvent = currentEvent;
+        }
+      });
     // Do I need to check that?
     // verify rbac permissions before we display this page
     this.setRbacCheck(
@@ -87,4 +89,4 @@ export class DashboardDetailsComponent implements OnInit, OnDestroy {
     }
     return rbacCheck;
   }
-}
+}
diff --git a/src/app/data/progress.service.ts b/src/app/data/progress.service.ts
@@ -96,6 +96,15 @@ export class ProgressService {
         map(extractResponseContent),
         map((pList: Progress[]) => {
           return this.buildProgressList(pList);
+        }),
+        switchMap((progress: Progress[]) => {
+          return forkJoin([of(progress), this.scenarioService.list()]);
+        }),
+        map(([progress, scenarios]: [Progress[], Scenario[]]) => {
+          const scenarioMap = {};
+          scenarios.forEach((s) => (scenarioMap[s.id] = s.name));
+          progress.forEach((p) => (p.scenario_name = scenarioMap[p.scenario]));
+          return progress;
         })
       );
   }

diff --git a/src/app/session-statistics/session-statistics.component.html b/src/app/session-statistics/session-statistics.component.html
@@ -1,11 +1,14 @@
 <div class="main-container" *rbac="['progresses.list']">
-  <h3>Session Statistics For Active Events</h3>
-  <form [formGroup]="chartDetails" [class.clr-error]="chartDetails.errors?.endDateLowerThanStartDate">
+  <h3>Session Statistics</h3>
+  <form
+    [formGroup]="chartDetails"
+    [class.clr-error]="chartDetails.errors?.endDateLowerThanStartDate"
+  >
     <div class="clr-row">
       <div class="clr-col-lg-4 clr-col-md-4 clr-col-12">
         <clr-select-container>
           <label>Observation Period</label>
-          <select clrSelect formControlName="observationPeriod" >
+          <select clrSelect formControlName="observationPeriod">
             <option value="daily">Daily</option>
             <option value="weekly">Weekly</option>
             <option value="monthly">Monthly</option>
@@ -15,21 +18,38 @@ <h3>Session Statistics For Active Events</h3>
       <div class="clr-col-lg-4 clr-col-md-4 clr-col-12">
         <clr-combobox-container>
           <label>Scenarios</label>
-          <clr-combobox formControlName="scenarios" name="scenarios" clrMulti="true">
+          <clr-combobox
+            formControlName="scenarios"
+            name="scenarios"
+            clrMulti="true"
+          >
             <ng-container *clrOptionSelected="let scenarioSelected">
-                {{ scenarioSelected }}
+              {{ scenarioSelected }}
             </ng-container>
             <clr-options>
-                <clr-option *clrOptionItems="let scenario of scenariosWithSession" [clrValue]="scenario">
-                    <cds-icon shape="node-group"></cds-icon> {{ scenario }}
-                </clr-option>
+              <clr-option
+                *clrOptionItems="let scenario of scenariosWithSession"
+                [clrValue]="scenario"
+              >
+                <cds-icon shape="node-group"></cds-icon> {{ scenario }}
+              </clr-option>
             </clr-options>
           </clr-combobox>
           <clr-control-error>Scenarios are required.</clr-control-error>
           <clr-control-helper>
             <div class="scenario-actions">
-              <a class="scenario-action" href="javascript://" (click)="clearScenarios()">Clear Scenarios</a>
-              <a class="scenario-action" href="javascript://" (click)="addAllScenarios()">Add All Scenarios</a>
+              <a
+                class="scenario-action"
+                href="javascript://"
+                (click)="clearScenarios()"
+                >Clear Scenarios</a
+              >
+              <a
+                class="scenario-action"
+                href="javascript://"
+                (click)="addAllScenarios()"
+                >Add All Scenarios</a
+              >
             </div>
           </clr-control-helper>
         </clr-combobox-container>
@@ -55,9 +75,20 @@ <h3>Session Statistics For Active Events</h3>
           </clr-control-error>
         </clr-input-container>
         <clr-signpost class="signpost">
-          <button class="btn btn-sm btn-link" clrSignpostTrigger>Change Start Date</button>
-          <clr-signpost-content [clrPosition]="'right-middle'" *clrIfOpen #startDateSignpost>
-            <dl-date-time-picker (change)="setStartDate($event)" [startView]="startView" maxView="year" [minView]="minView">
+          <button class="btn btn-sm btn-link" clrSignpostTrigger>
+            Change Start Date
+          </button>
+          <clr-signpost-content
+            [clrPosition]="'right-middle'"
+            *clrIfOpen
+            #startDateSignpost
+          >
+            <dl-date-time-picker
+              (change)="setStartDate($event)"
+              [startView]="startView"
+              maxView="year"
+              [minView]="minView"
+            >
             </dl-date-time-picker>
           </clr-signpost-content>
         </clr-signpost>
@@ -78,42 +109,66 @@ <h3>Session Statistics For Active Events</h3>
           </clr-control-error>
         </clr-input-container>
         <clr-signpost class="signpost">
-          <button class="btn btn-link" clrSignpostTrigger>Change End Date</button>
-          <clr-signpost-content [clrPosition]="'right-middle'" *clrIfOpen #endDateSignpost>
-            <dl-date-time-picker (change)="setEndDate($event)" [startView]="startView" maxView="year" [minView]="minView">
+          <button class="btn btn-link" clrSignpostTrigger>
+            Change End Date
+          </button>
+          <clr-signpost-content
+            [clrPosition]="'right-middle'"
+            *clrIfOpen
+            #endDateSignpost
+          >
+            <dl-date-time-picker
+              (change)="setEndDate($event)"
+              [startView]="startView"
+              maxView="year"
+              [minView]="minView"
+            >
             </dl-date-time-picker>
           </clr-signpost-content>
         </clr-signpost>
-        <span class="clr-subtext" *ngIf="chartDetails.errors?.endDateLowerThanStartDate">
-          <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon> Start date must occur before end time!
+        <span
+          class="clr-subtext"
+          *ngIf="chartDetails.errors?.endDateLowerThanStartDate"
+        >
+          <cds-icon
+            class="clr-validate-icon"
+            shape="exclamation-circle"
+          ></cds-icon>
+          Start date must occur before end time!
         </span>
       </div>
     </div>
   </form>
   <div class="clr-row">
     <div class="clr-col-lg-8 clr-col-md-8 clr-col-12">
-      <h4>Started Sessions (Detailed)</h4>
+      <h4>Started Sessions (Chart)</h4>
       <div style="display: block">
-        <canvas baseChart
+        <canvas
+          baseChart
           [data]="barChartData"
           [options]="barChartOptions"
           [plugins]="barChartPlugins"
           [type]="barChartType"
           (chartHover)="chartHovered($event)"
-          (chartClick)="chartClicked($event)">
+          (chartClick)="chartClicked($event)"
+        >
         </canvas>
       </div>
     </div>
     <div class="clr-col-lg-4 clr-col-md-4 clr-col-12">
-      <h4>Started Sessions (Overview)</h4>
+      <h4>Started Sessions (List)</h4>
       <clr-datagrid>
         <clr-dg-column [clrDgField]="'key'">Scenario</clr-dg-column>
-        <clr-dg-column [clrDgSortBy]="'value'" [clrDgSortOrder]="descSort">Total Sessions</clr-dg-column>
-        <clr-dg-row *clrDgItems="let item of totalSessionsPerScenario | keyvalue">
-          <clr-dg-cell>{{item.key}}</clr-dg-cell>
-          <clr-dg-cell>{{item.value}}</clr-dg-cell>
+        <clr-dg-column [clrDgSortBy]="'value'" [clrDgSortOrder]="descSort"
+          >Total Sessions</clr-dg-column
+        >
+        <clr-dg-row
+          *clrDgItems="let item of totalSessionsPerScenario | keyvalue"
+        >
+          <clr-dg-cell>{{ item.key }}</clr-dg-cell>
+          <clr-dg-cell>{{ item.value }}</clr-dg-cell>
         </clr-dg-row>
       </clr-datagrid>
     </div>
   </div>
-</div>
+</div>