Download request stats as excel (#236)

package.json

@@ -32,6 +32,7 @@
     "chart.js": "^2.9.3",
     "core-js": "^2.5.4",
     "deepmerge": "^4.2.2",
+    "file-saver": "^2.0.5",
     "highcharts": "^9.2.2",
     "highcharts-angular": "^2.10.0",
     "html2canvas": "^1.4.1",
@@ -42,6 +43,7 @@
     "node-sass": "^4.14.1",
     "rxjs": "^6.0.0",
     "tslib": "^2.0.0",
+    "xlsx": "^0.18.2",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

src/app/_services/excel.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from "@angular/core";
+import * as FileSaver from "file-saver";
+import * as XLSX from "xlsx";
+
+const EXCEL_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
+const EXCEL_EXTENSION = ".xlsx";
+
+@Injectable()
+export class ExcelService {
+
+
+  public exportAsExcelFile(json: unknown[], excelFileName: string): void {
+
+    const myworksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
+    const myworkbook: XLSX.WorkBook = { Sheets: { "data": myworksheet }, SheetNames: ["data"] };
+    const excelBuffer: BlobPart = XLSX.write(myworkbook, { bookType: "xlsx", type: "array" });
+    this.saveAsExcelFile(excelBuffer, excelFileName);
+  }
+
+  private saveAsExcelFile(buffer: BlobPart, fileName: string): void {
+    const data: Blob = new Blob([buffer], {
+      type: EXCEL_TYPE
+    });
+    FileSaver.saveAs(data, fileName + EXCEL_EXTENSION);
+  }
+
+}

src/app/item-detail/item-detail.module.ts

@@ -24,6 +24,7 @@ import { CreateNewShareLinkComponent } from "./share/create-new-share-link/creat
 import { MonitoringStatsComponent } from "./monitoring-stats/monitoring-stats.component";
 import { DataTableModule } from "@pascalhonegger/ng-datatable";
 import { RoleModule } from "../_directives/role.module";
+import { ExcelService } from "../_services/excel.service";
 
 
 const routes: Routes = [  {
@@ -41,6 +42,7 @@ const routes: Routes = [  {
     CommonModule, NgbModule, RouterModule.forRoot(routes), DataTableModule, SharedItemModule, SharedModule, HighchartsChartModule,
     ReactiveFormsModule, FormsModule, RoleModule
   ],
-  exports: []
+  exports: [],
+  providers: [ExcelService]
 })
 export class ItemDetailModule { }

src/app/item-detail/request-stats/request-stats-compare.component.html

@@ -22,12 +22,15 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
           <button class="btn btn-sm jtl-no-glow jtl-control-menu hamburger-menu" ngbDropdownToggle><i
               class="fas fa-bars"></i></button>
           <div class="dropdown-menu jtl-dropdown-control-menu" ngbDropdownMenu>
-            <button class="quick-base-comparison btn btn-sm btn-outline-dark"
+            <button class="btn btn-sm"
               *ngIf="(itemData.baseId && itemData.baseId !== params.id)" (click)="quickBaseComparison(itemData.baseId)"
-              ngbDropdownItem><span class="compare-desc-btn">
-                Compare to base run</span></button>
+              ngbDropdownItem>
+                Compare to base run</button>
             <app-stats-compare (itemDetailToCompare)="itemToCompare($event)"></app-stats-compare>
-            <button class="quick-base-comparison btn btn-sm" (click)="downloadAsPng()" ngbDropdownItem>Download as png</button>
+
+            <button class="btn btn-sm" (click)="downloadAsPng()" ngbDropdownItem>Download as PNG</button>
+            <button class="btn btn-sm" (click)="downloadAsXLXS()" ngbDropdownItem>Download as XLXS</button>
+
           </div>
         </div>
       </div>

src/app/item-detail/request-stats/request-stats-compare.component.spec.ts

@@ -5,6 +5,7 @@ import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { DataTableModule } from "@pascalhonegger/ng-datatable";
 import { HighchartsChartModule } from "highcharts-angular";
 import { ToastrModule } from "ngx-toastr";
+import { ExcelService } from "src/app/_services/excel.service";
 import { LabelTrendComponent } from "../label-trend/label-trend.component";
 import { StatsCompareComponent } from "../stats-compare/stats-compare.component";
 import { LabelHealthComponent } from "./label-health/label-health.component";
@@ -30,8 +31,8 @@ describe("RequestStatsCompareComponent", () => {
         HighchartsChartModule,
         HttpClientModule,
         RouterTestingModule,
-
-      ]
+      ],
+      providers: [ExcelService]
     })
       .compileComponents();
   }));

src/app/item-detail/request-stats/request-stats-compare.component.ts

@@ -6,6 +6,7 @@ import { ItemsApiService } from "src/app/items-api.service";
 import { ToastrService } from "ngx-toastr";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import html2canvas from "html2canvas";
+import { ExcelService } from "src/app/_services/excel.service";
 
 
 
@@ -38,6 +39,7 @@ export class RequestStatsCompareComponent implements OnInit, OnDestroy {
     private toastr: ToastrService,
     private analyzeChartService: AnalyzeChartService,
     private modalService: NgbModal,
+    private excelService: ExcelService,
   ) {
   }
 
@@ -272,4 +274,11 @@ export class RequestStatsCompareComponent implements OnInit, OnDestroy {
       this.downloadLink.nativeElement.click();
     });
   }
+
+  downloadAsXLXS() {
+    const dataToBeSaved = this.labelsData.map(({ 
+      n0: p90, n5: p95, n9: p99, label: label, statusCodes: statusCodes, responseMessageFailures, ...rest }) => 
+      ({ label, p90, p95, p99, ...rest }))
+    this.excelService.exportAsExcelFile(dataToBeSaved, `request-stats-${this.params.id}`)
+  }
 }

src/app/item-detail/stats-compare/stats-compare.component.css

@@ -21,8 +21,3 @@ thead {
   white-space: nowrap;
   overflow: hidden;
 }
-
-.compare-desc {
-  font-size: 13px;
-  font-weight: 400;
-}

src/app/item-detail/stats-compare/stats-compare.component.html

@@ -100,4 +100,4 @@ <h5 class="modal-title" id="modal-basic-title">Choose test run to compare</h5>
 </ng-template>
 
 
-<button class="btn btn-sm btn-outline-primary" (click)="open(content)" ngbDropdownItem><span class="compare-desc">Compare</span></button>
+<button class="btn btn-sm" (click)="open(content)" ngbDropdownItem><span class="compare-desc">Compare</span></button>