diff --git a/lib/index.ts b/lib/index.ts index 8b8518f..f3f1c50 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -96,7 +96,7 @@ class PWMetrics { console.log(messages.getMessage('MEDIAN_RUN')); this.displayOutput(results.median); } else if (this.flags.submit) { - const sheets = new Sheets(this.sheets, this.clientSecret); + const sheets = new Sheets(this.sheets, this.clientSecret, this.configIsSubmitAndUpload); await sheets.appendResults(results.runs); } } @@ -205,6 +205,9 @@ class PWMetrics { if (this.flags.upload) { const driveResponse = await upload(data, this.clientSecret); + + preparedData.fileId = driveResponse.id; + this.view(driveResponse.id); } @@ -231,6 +234,14 @@ class PWMetrics { return data; } + configIsSubmitAndUpload = (data: MetricsResults) => { + if(this.flags.submit && this.flags.upload) { + data.viewerUrl = getTimelineViewerUrl(data.fileId); + } + + return data; + } + showChart(data: MetricsResults) { // reverse to preserve the order, because cli-chart. let timings = data.timings; diff --git a/lib/metrics.ts b/lib/metrics.ts index f4b4c2d..a4e9a25 100644 --- a/lib/metrics.ts +++ b/lib/metrics.ts @@ -89,11 +89,13 @@ function prepareData(res: LighthouseResults): MetricsResults { }); return { + fileId: '', timings, timestamps, generatedTime: res.generatedTime, lighthouseVersion: res.lighthouseVersion, initialUrl: res.initialUrl, - url: res.url + url: res.url, + viewerUrl: null }; } diff --git a/lib/sheets/index.ts b/lib/sheets/index.ts index 263779e..c2c9b28 100644 --- a/lib/sheets/index.ts +++ b/lib/sheets/index.ts @@ -15,7 +15,7 @@ const SHEET_TYPES = { }; class Sheets { - constructor(public config: SheetsConfig, public clientSecret: AuthorizeCredentials) { + constructor(public config: SheetsConfig, public clientSecret: AuthorizeCredentials, public configIsSubmitAndUpload: Function) { this.validateOptions(config, clientSecret); } @@ -50,6 +50,9 @@ class Sheets { results.forEach(data => { const getTiming = (key: string) => data.timings.find(t => t.id === key).timing; const dateObj = new Date(data.generatedTime); + + data = this.configIsSubmitAndUpload(data); + // order matters valuesToAppend.push([ data.lighthouseVersion, @@ -62,7 +65,8 @@ class Sheets { getTiming(metricsIds.VC100), getTiming(metricsIds.TTFI), getTiming(metricsIds.TTCI), - getTiming(metricsIds.VC85) + getTiming(metricsIds.VC85), + data.viewerUrl ]); }); diff --git a/readme.md b/readme.md index 151f62f..2d40524 100644 --- a/readme.md +++ b/readme.md @@ -268,6 +268,8 @@ Show Lighthouse traces in timeline-viewer. [timeline-viewer](https://chromedevtools.github.io/timeline-viewer/) - Shareable URLs for your Chrome DevTools Timeline traces. +If both upload and submit flags are set, a link to the viewer for each result trace will be added to the Notes column of the sheet. This is particularly useful when multiple runs have been stored, as otherwise it is dificult to view the trace for any given run. + ```sh # run pwmetrics with config in package.json diff --git a/types/types.ts b/types/types.ts index e3df0d5..73fdddb 100644 --- a/types/types.ts +++ b/types/types.ts @@ -31,17 +31,19 @@ interface FeatureFlags { expectations: Boolean; output: Boolean; chromeFlags: Array; - chromePath?: string + chromePath?: string; port?: number; } interface MetricsResults { + fileId: string, timestamps: Timestamp[]; timings: Timing[]; generatedTime: string; lighthouseVersion: string; url: string; initialUrl: string; + viewerUrl?: string; } interface PWMetricsResults {