Include screenshots in annotations (#2144)
This commit is contained in:
Peter Hedenskog
GitHub
parent
b2d2e47afd
commit
dddaf3ba73
|
|
@ -444,6 +444,13 @@ module.exports.parseCommandLine = function parseCommandLine() {
|
|||
'Add an extra message that will be attached to the annotation sent for a run. The message is attached after the default message and can contain HTML.',
|
||||
group: 'Graphite'
|
||||
})
|
||||
.option('graphite.annotationScreenshot', {
|
||||
default: false,
|
||||
type: 'boolean',
|
||||
describe:
|
||||
'Include screenshot (from Browsertime) in the annotation. You need to specify a --resultBaseURL for this to work.',
|
||||
group: 'Graphite'
|
||||
})
|
||||
.option('graphite.statsd', {
|
||||
default: graphiteConfig.statsd,
|
||||
type: 'boolean',
|
||||
|
|
@ -581,6 +588,13 @@ module.exports.parseCommandLine = function parseCommandLine() {
|
|||
'Choose which character that will seperate a group/domain. Default is underscore, set it to a dot if you wanna keep the original domain name.',
|
||||
group: 'InfluxDB'
|
||||
})
|
||||
.option('influxdb.annotationScreenshot', {
|
||||
default: false,
|
||||
type: 'boolean',
|
||||
describe:
|
||||
'Include screenshot (from Browsertime) in the annotation. You need to specify a --resultBaseURL for this to work.',
|
||||
group: 'InfluxDB'
|
||||
})
|
||||
.option('metrics.list', {
|
||||
describe: 'List all possible metrics in the data folder (metrics.txt).',
|
||||
type: 'boolean',
|
||||
|
|
|
|||
|
|
@ -47,6 +47,11 @@ module.exports = {
|
|||
// First catch if we are running Browsertime and/or WebPageTest
|
||||
if (message.type === 'browsertime.setup') {
|
||||
this.annotationType = 'browsertime.pageSummary';
|
||||
} else if (message.type === 'browsertime.config') {
|
||||
if (message.data.screenshot) {
|
||||
this.useScreenshots = message.data.screenshot;
|
||||
this.screenshotType = message.data.screenshotType;
|
||||
}
|
||||
}
|
||||
|
||||
const filterRegistry = this.filterRegistry;
|
||||
|
|
@ -89,11 +94,24 @@ module.exports = {
|
|||
const resultPageUrl = this.resultUrls.absoluteSummaryPageUrl(
|
||||
message.url
|
||||
);
|
||||
let screenshotPath;
|
||||
if (this.useScreenshots) {
|
||||
screenshotPath =
|
||||
resultPageUrl + 'data/screenshots/1.' + this.screenshotType;
|
||||
}
|
||||
|
||||
const harPath =
|
||||
resultPageUrl +
|
||||
'data/browsertime.har' +
|
||||
(this.options.gzipHAR ? '.gz' : '');
|
||||
|
||||
return sendAnnotations.send(
|
||||
this.options,
|
||||
message.group,
|
||||
message.url,
|
||||
resultPageUrl,
|
||||
resultPageUrl + 'index.html',
|
||||
screenshotPath,
|
||||
harPath,
|
||||
this.timestamp
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const graphiteUtil = require('../../support/tsdbUtil');
|
|||
const util = require('../../support/util');
|
||||
|
||||
module.exports = {
|
||||
send(options, group, url, resultPageUrl, time) {
|
||||
send(options, group, url, resultPageUrl, screenshotPath, harPath, time) {
|
||||
// The tags make it possible for the dashboard to use the
|
||||
// templates to choose which annotations that will be showed.
|
||||
// That's why we need to send tags that matches the template
|
||||
|
|
@ -41,15 +41,25 @@ module.exports = {
|
|||
tagsArray = tagsArray.substring(0, tagsArray.length - 1);
|
||||
tagsString += '"';
|
||||
tagsArray += ']';
|
||||
let message = `<a href='${resultPageUrl}' target='_blank'>Result ${
|
||||
options.browsertime.iterations
|
||||
} run(s)</a>`;
|
||||
|
||||
const s = options.browsertime.iterations > 1 ? 's' : '';
|
||||
const screenshotSize = options.mobile ? 'height=200px' : 'width=100%';
|
||||
let message =
|
||||
screenshotPath &&
|
||||
options.graphite &&
|
||||
options.graphite.annotationScreenshot
|
||||
? `<a href='${resultPageUrl}' target='_blank'><img src='${screenshotPath}' ${screenshotSize}></a><p><a href='${resultPageUrl}'>Result</a> - <a href='${harPath}'>Download HAR</a></p>`
|
||||
: `<a href='${resultPageUrl}' target='_blank'>Result ${
|
||||
options.browsertime.iterations
|
||||
} run${s}</a>`;
|
||||
if (options.graphite.annotationMessage) {
|
||||
message += options.graphite.annotationMessage;
|
||||
}
|
||||
const timestamp = Math.round(time.valueOf() / 1000);
|
||||
const theTags = options.graphite.arrayTags ? tagsArray : tagsString;
|
||||
const postData = `{"what": "Sitespeed.io", "tags": ${theTags}, "data": "${message}", "when": ${timestamp}}`;
|
||||
const postData = `{"what": "${
|
||||
options.browsertime.iterations
|
||||
} run${s}", "tags": ${theTags}, "data": "${message}", "when": ${timestamp}}`;
|
||||
const postOptions = {
|
||||
hostname: options.graphite.webHost || options.graphite.host,
|
||||
port: options.graphite.httpPort || 8080,
|
||||
|
|
|
|||
|
|
@ -39,6 +39,11 @@ module.exports = {
|
|||
// First catch if we are running Browsertime and/or WebPageTest
|
||||
if (message.type === 'browsertime.setup') {
|
||||
this.annotationType = 'browsertime.pageSummary';
|
||||
} else if (message.type === 'browsertime.config') {
|
||||
if (message.data.screenshot) {
|
||||
this.useScreenshots = message.data.screenshot;
|
||||
this.screenshotType = message.data.screenshotType;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
|
|
@ -81,11 +86,23 @@ module.exports = {
|
|||
const resultPageUrl = this.resultUrls.absoluteSummaryPageUrl(
|
||||
message.url
|
||||
);
|
||||
let screenshotPath;
|
||||
if (this.useScreenshots) {
|
||||
screenshotPath =
|
||||
resultPageUrl + 'data/screenshots/1.' + this.screenshotType;
|
||||
}
|
||||
const harPath =
|
||||
resultPageUrl +
|
||||
'data/browsertime.har' +
|
||||
(this.options.gzipHAR ? '.gz' : '');
|
||||
|
||||
return sendAnnotations.send(
|
||||
this.options,
|
||||
message.group,
|
||||
message.url,
|
||||
resultPageUrl
|
||||
resultPageUrl + 'index.html',
|
||||
screenshotPath,
|
||||
harPath
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const tsdbUtil = require('../../support/tsdbUtil');
|
|||
const moment = require('moment');
|
||||
|
||||
module.exports = {
|
||||
send(options, group, url, resultPageUrl) {
|
||||
send(options, group, url, resultPageUrl, screenshotPath, harPath) {
|
||||
// The tags make it possible for the dashboard to use the
|
||||
// templates to choose which annotations that will be showed.
|
||||
// That's why we need to send tags that matches the template
|
||||
|
|
@ -19,9 +19,14 @@ module.exports = {
|
|||
.getURLAndGroup(options, group, url, options.influxdb.includeQueryParams)
|
||||
.split('.');
|
||||
let tags = `${connectivity},${browser},${urlAndGroup.join(',')}`;
|
||||
const message = `<a href='${resultPageUrl}' target='_blank'>Result ${
|
||||
options.browsertime.iterations
|
||||
} run(s)</a>`;
|
||||
let message =
|
||||
screenshotPath &&
|
||||
options.influxdb &&
|
||||
options.influxdb.annotationScreenshot
|
||||
? `<a href='${resultPageUrl}' target='_blank'><img src='${screenshotPath}' width=100%></a><a href='${resultPageUrl}'>Result</a> - <a href='${harPath}'>Download HAR</a>`
|
||||
: `<a href='${resultPageUrl}' target='_blank'>Result ${
|
||||
options.browsertime.iterations
|
||||
} run(s)</a>`;
|
||||
const timestamp = Math.round(moment() / 1000);
|
||||
// if we have a category, let us send that category too
|
||||
if (options.influxdb.tags) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue