GUI New Feature => On add 2 or more QoE VMAF charts, add an additional chart with the average

Author: EduJGURJC

elastest-torm-gui/src/app/elastest-etm/etm-monitoring-view/etm-chart-group/etm-chart-group.component.ts

@@ -73,6 +73,9 @@ export class EtmChartGroupComponent implements OnInit, AfterViewInit, AfterViewC
   startDate: Date;
   endDate: Date;
 
+  qoeVmafAvgChartName: string = 'QoE VMAF Average';
+  qoeVmafMetrics: MetricsFieldModel[] = [];
+
   constructor(private monitoringService: MonitoringService, private elastestRabbitmqService: ElastestRabbitmqService) {}
 
   ngOnInit(): void {}
@@ -186,6 +189,8 @@ export class EtmChartGroupComponent implements OnInit, AfterViewInit, AfterViewC
       this.initAIO();
     }
 
+    this.qoeVmafMetrics = [];
+
     for (let metric of this.tJob.execDashboardConfigModel.allMetricsFields.fieldsList) {
       if (metric.activated) {
         let individualMetrics: ESRabComplexMetricsModel = this.initializeBasicAttrByMetric(metric);
@@ -238,14 +243,20 @@ export class EtmChartGroupComponent implements OnInit, AfterViewInit, AfterViewC
               );
           }
         }
+
+        this.storeMetricIfIsQoEVmafActivated(metric);
       }
     }
+
     this.createGroupedMetricList();
     this.firstTimeInitialized = true;
 
     if (this.tJob.execDashboardConfigModel.combineMetricsInPairs) {
       this.initMetricsPairs();
     }
+
+    // QoE Vmaf average chart
+    this.initQoEVmafAverage();
   }
 
   addChartToList(individualMetrics: ESRabComplexMetricsModel, isCombinedPair: boolean = false): number {
@@ -257,6 +268,7 @@ export class EtmChartGroupComponent implements OnInit, AfterViewInit, AfterViewC
       if (this.tJob.execDashboardConfigModel.combineMetricsInPairs) {
         this.initMetricsPairs();
       }
+
       return pos;
     }
   }
@@ -348,6 +360,62 @@ export class EtmChartGroupComponent implements OnInit, AfterViewInit, AfterViewC
     return individualMetrics;
   }
 
+  // If is qoe vmaf and is activated, add to list (for create average chart)
+  storeMetricIfIsQoEVmafActivated(metric: MetricsFieldModel): void {
+    if (metric.etType === 'vmaf' && metric.activated) {
+      this.qoeVmafMetrics.push(metric);
+    }
+  }
+
+  initQoEVmafAverage(): void {
+    if (!this.live) {
+      let posIfExist: number = this.returnPositionIfExist(this.qoeVmafAvgChartName);
+      if (posIfExist > -1) {
+        this.removeAndUnsubscribeByListAndPos(posIfExist);
+      }
+
+      if (this.qoeVmafMetrics && this.qoeVmafMetrics.length > 1) {
+        let ignoreComponent: string = this.getIgnoreComponent();
+        let chart: ESRabComplexMetricsModel = new ESRabComplexMetricsModel(this.monitoringService, ignoreComponent);
+        chart.startDate = this.startDate;
+        chart.endDate = this.endDate;
+        chart.name = this.qoeVmafAvgChartName;
+        chart.hidePrevBtn = !this.live;
+
+        let monitoringIndex: string = this.tJobExec.monitoringIndex;
+
+        // If Multi Parent
+        if (this.tJobExec instanceof TJobExecModel && this.tJobExec.isParent()) {
+          monitoringIndex = this.tJobExec.getChildsMonitoringIndices();
+        }
+
+        chart.monitoringIndex = monitoringIndex;
+
+        for (let chartLine of this.qoeVmafMetrics) {
+          chartLine.unit = chartLine.unit ? chartLine.unit : '%';
+          chart.setUnits(chartLine.unit);
+
+          chart.allMetricsFields.addMetricsFieldToList(
+            chartLine,
+            chartLine.component,
+            chart.stream,
+            chartLine.streamType,
+            chartLine.activated,
+          );
+        }
+        chart.getAllMetrics().subscribe(
+          (loaded: boolean) => {
+            chart.convertChartToUniqueAxisAverage(this.qoeVmafAvgChartName);
+
+            this.addChartToList(chart);
+            this.createGroupedMetricList();
+          },
+          (error: Error) => console.log(error),
+        );
+      }
+    }
+  }
+
   initMetricsPairs(): void {
     this.combinedPairChartsList = [];
     let metricsPairsList: MetricsFieldModel[][] = allArrayPairCombinations(this.getChartsListMetricFieldModels());
@@ -541,13 +609,20 @@ export class EtmChartGroupComponent implements OnInit, AfterViewInit, AfterViewC
     return component + ' ' + stream + ' ' + etType;
   }
 
-  alreadyExist(name: string): boolean {
+  returnPositionIfExist(name: string): number {
+    let currentPos: number = 0;
     for (let metric of this.chartsList) {
-      if (metric.name === name) {
-        return true;
+      if (metric.name.trim() === name.trim()) {
+        return currentPos;
       }
+      currentPos++;
     }
-    return false;
+
+    return -1;
+  }
+
+  alreadyExist(name: string): boolean {
+    return this.returnPositionIfExist(name) > -1;
   }
 
   createGroupedMetricList(): void {

elastest-torm-gui/src/app/elastest-etm/etm-monitoring-view/etm-monitoring-view.component.ts

@@ -66,7 +66,12 @@ export class EtmMonitoringViewComponent implements OnInit {
 
   ngOnInit(): void {}
 
-  initView(tJob: AbstractTJobModel, tJobExec: AbstractTJobExecModel, customStartDate?: Date, customEndDate?: Date): void {
+  initView(
+    tJob: AbstractTJobModel,
+    tJobExec: AbstractTJobExecModel,
+    customStartDate?: Date,
+    customEndDate?: Date,
+  ): void {
     this.tJob = tJob;
     this.tJobExec = tJobExec;
 
@@ -324,7 +329,11 @@ export class EtmMonitoringViewComponent implements OnInit {
       } else {
         // Disable from tjob object before save
         let logField: LogFieldModel = new LogFieldModel(log.component, log.stream);
-        this.tJob.execDashboardConfigModel.allLogsTypes.disableLogField(logField.name, logField.component, logField.stream);
+        this.tJob.execDashboardConfigModel.allLogsTypes.disableLogField(
+          logField.name,
+          logField.component,
+          logField.stream,
+        );
         // Remove
         this.removeLogCard(log);
       }
@@ -337,7 +346,12 @@ export class EtmMonitoringViewComponent implements OnInit {
     this.metricName = '';
     // Enable in tjob object before save
     let logField: LogFieldModel = new LogFieldModel(log.component, log.stream);
-    this.tJob.execDashboardConfigModel.allLogsTypes.addLogFieldToList(logField.name, logField.component, logField.stream, true);
+    this.tJob.execDashboardConfigModel.allLogsTypes.addLogFieldToList(
+      logField.name,
+      logField.component,
+      logField.stream,
+      true,
+    );
 
     this.addMore(showPopup, 'log');
   }
@@ -355,7 +369,11 @@ export class EtmMonitoringViewComponent implements OnInit {
       } else {
         // Disable from tjob object before save
         let logField: LogFieldModel = new LogFieldModel(log.component, log.stream);
-        this.tJob.execDashboardConfigModel.allLogsTypes.disableLogField(logField.name, logField.component, logField.stream);
+        this.tJob.execDashboardConfigModel.allLogsTypes.disableLogField(
+          logField.name,
+          logField.component,
+          logField.stream,
+        );
         // Remove
         this.removeLogComparisonTab(logField);
       }
@@ -369,9 +387,19 @@ export class EtmMonitoringViewComponent implements OnInit {
 
     // Enable in tjob object before save
     let logField: LogFieldModel = new LogFieldModel(log.component, log.stream);
-    this.tJob.execDashboardConfigModel.allLogsTypes.addLogFieldToList(logField.name, logField.component, logField.stream, true);
+    this.tJob.execDashboardConfigModel.allLogsTypes.addLogFieldToList(
+      logField.name,
+      logField.component,
+      logField.stream,
+      true,
+    );
 
-    let added: boolean = this.logsGroup.addMoreLogsComparisons(this.tJobExec, logField.name, this.stream, this.component);
+    let added: boolean = this.logsGroup.addMoreLogsComparisons(
+      this.tJobExec,
+      logField.name,
+      this.stream,
+      this.component,
+    );
 
     if (showPopup) {
       if (added) {
@@ -388,6 +416,7 @@ export class EtmMonitoringViewComponent implements OnInit {
 
   updateMetricsFromList(metricsList: any[]): void {
     this.activatedMetrics = [];
+    this.metricsGroup.qoeVmafMetrics = [];
 
     // First, remove all metrics pairs cards
     this.metricsGroup.removeAllMetricsPairs();
@@ -411,6 +440,8 @@ export class EtmMonitoringViewComponent implements OnInit {
         this.removeMetricCard(metric);
       }
     }
+
+    this.metricsGroup.initQoEVmafAverage();
   }
 
   updateMetric(metric: any, showPopup: boolean = false): void {
@@ -441,6 +472,9 @@ export class EtmMonitoringViewComponent implements OnInit {
     );
 
     this.addMore(showPopup, 'metric');
+
+    // If is qoe vmaf and is activated, add to list (for create average chart)
+    this.metricsGroup.storeMetricIfIsQoEVmafActivated(metricField);
   }
 
   removeMetricCard(metric: any): void {
@@ -481,7 +515,7 @@ export class EtmMonitoringViewComponent implements OnInit {
           }
         }
       })
-      .catch((e) => {
+      .catch(e => {
         this.waitForUnlock(functionsToExec, parentTJobExec);
       });
   }