#2147 - Implemented the Data Export Option for Lighthouse SPA (#1573)

* #2147 - Implemented the Data Export Option for Lighthouse SPA * Updated the upsubscription method Co-authored-by: Rigin Oommen <[email protected]>
1-Platform · Jul 25, 2022 · db0b9d9 · db0b9d9
1 parent 4267f10
commit db0b9d9
Show file tree

Hide file tree

Showing 9 changed files with 406 additions and 25,452 deletions.
diff --git a/packages/lighthouse-spa/package-lock.json b/packages/lighthouse-spa/package-lock.json
diff --git a/packages/lighthouse-spa/package.json b/packages/lighthouse-spa/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lighthouse-spa",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "scripts": {
     "ng": "ng",
     "start": "npm run config -- --environment=dev && ng serve",

diff --git a/packages/lighthouse-spa/src/app/dashboard/dashboard.gql.ts b/packages/lighthouse-spa/src/app/dashboard/dashboard.gql.ts
@@ -98,3 +98,17 @@ export const ListLHLeaderboard = gql`
     }
   }
 `;
+
+export const ExportLHReportByProject = gql`
+  query ExportLHReportByProject($projectId: String!, $branch: String!) {
+    exportLHReportByProject(projectId: $projectId, branch: $branch) {
+      name
+      branch
+      buildId
+      category
+      value
+      url
+      createdAt
+    }
+  }
+`;
diff --git a/packages/lighthouse-spa/src/app/dashboard/dashboard.service.ts b/packages/lighthouse-spa/src/app/dashboard/dashboard.service.ts
@@ -2,12 +2,14 @@ import { Injectable } from '@angular/core';
 import { Apollo } from 'apollo-angular';
 import { GraphQLModule } from 'app/graphql.module';
 import { LeaderboardCategory } from 'app/leaderboard/enum';
+import { map } from 'rxjs/operators';
 
 import {
   ListLHProjects,
   ListLHProjectBranches,
   ListLHProjectScores,
   ListLHLeaderboard,
+  ExportLHReportByProject,
 } from './dashboard.gql';
 
 @Injectable({
@@ -70,4 +72,16 @@ export class DashboardService extends GraphQLModule {
       },
     });
   }
+
+  exportLHReportByProject(projectId: string, branch: string) {
+    return this.apollo
+      .query<{ exportLHReportByProject: ExportLHReport[] }>({
+        query: ExportLHReportByProject,
+        variables: {
+          projectId,
+          branch,
+        },
+      })
+      .pipe(map((result: any) => result.data.exportLHReportByProject));
+  }
 }
diff --git a/packages/lighthouse-spa/src/app/dashboard/pages/analysis/analysis.component.html b/packages/lighthouse-spa/src/app/dashboard/pages/analysis/analysis.component.html
@@ -70,6 +70,7 @@
               </button>
             </a>
           </div>
+          <button class="pf-c-button export--btn" type="button" (click)="exportLHReportByProject()">Export</button>
         </div>
 
         <!-- score list -->

diff --git a/packages/lighthouse-spa/src/app/dashboard/pages/analysis/analysis.component.scss b/packages/lighthouse-spa/src/app/dashboard/pages/analysis/analysis.component.scss
@@ -25,3 +25,11 @@
   overflow: hidden;
   padding: 2rem 0;
 }
+
+.export--btn {
+  background-color: var(--pf-global--primary-color--100);
+  color: var(--pf-c-button--m-primary--Color);
+  :hover {
+    background-color: var(--pf-global--primary-color--200);
+  }
+}
diff --git a/packages/lighthouse-spa/src/app/dashboard/pages/analysis/analysis.component.ts b/packages/lighthouse-spa/src/app/dashboard/pages/analysis/analysis.component.ts
@@ -10,6 +10,7 @@ import {
 import { Subject } from 'rxjs';
 import { environment } from 'environments/environment';
 import { takeUntil } from 'rxjs/operators';
+import { csvExport } from 'app/utils/csvExport';
 
 @Component({
   selector: 'app-analysis',
@@ -255,4 +256,13 @@ export class AnalysisComponent implements OnInit {
     );
     this.fetchLHLeaderboard();
   }
+
+  exportLHReportByProject () {
+    this.dashboardService
+      .exportLHReportByProject(this.projectId, this.selectedBranch)
+      .pipe(takeUntil(this.destroySub))
+      .subscribe((data) => {
+        csvExport(data, this.selectedBranch);
+      });
+  }
 }
diff --git a/packages/lighthouse-spa/src/app/dashboard/types.d.ts b/packages/lighthouse-spa/src/app/dashboard/types.d.ts
@@ -54,3 +54,13 @@ type CardScore = {
   label: string;
   score: number;
 };
+
+type ExportLHReport = {
+  name: string;
+  branch: string;
+  buildId: string;
+  category: string;
+  value: number;
+  url: string;
+  createdAt: string;
+};
diff --git a/packages/lighthouse-spa/src/app/utils/csvExport.ts b/packages/lighthouse-spa/src/app/utils/csvExport.ts
@@ -0,0 +1,18 @@
+export const csvExport = (data, branch) => {
+  const replacer = (key, value) => (value === null ? '' : value);
+  const header = Object.keys(data[0]);
+  const csv = [
+    header.join(','),
+    ...data.map((row) =>
+      header
+        .map((fieldName) => JSON.stringify(row[fieldName], replacer))
+        .join(',')
+    ),
+  ].join('\r\n');
+  const blobUrl = window.document.createElement('a');
+  blobUrl.href = window.URL.createObjectURL(new Blob( [ csv ], { type: 'text/csv' } ));
+  blobUrl.download = `${branch}_lh_report.csv`;
+  document.body.appendChild(blobUrl);
+  blobUrl.click();
+  document.body.removeChild(blobUrl);
+};