зеркало из https://github.com/mozilla/usecounters.git
Add current dashboard code from georgf.github repo
This commit is contained in:
Georg Fritzsche
Родитель
bbe3a3b33c
Коммит
e84eeb898c
|
|
@ -0,0 +1,467 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
#content {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
width: 960px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#details {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.data {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 3px;
|
||||
}
|
||||
|
||||
tr:hover > td {
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: #F5F5F5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.percentCell {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.barCell {
|
||||
vertical-align: center;
|
||||
padding: 0px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.barCell > svg {
|
||||
width: 400px;
|
||||
height: 18px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#loading-overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #000;
|
||||
opacity: 0.7;
|
||||
filter: alpha(opacity=70);
|
||||
z-index: 14;
|
||||
}
|
||||
|
||||
#loading-anim {
|
||||
width: 220px;
|
||||
height: 19px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -9px 0 0 -110px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.infolink
|
||||
{
|
||||
display: inline-block;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
width: 1.5ex;
|
||||
height: 1.5ex;
|
||||
font-size: 1.0ex;
|
||||
border-radius: 1.4ex;
|
||||
margin-right: 0px;
|
||||
padding: 2px;
|
||||
color: black;
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.infolink:hover
|
||||
{
|
||||
color: white;
|
||||
background: black;
|
||||
border-color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="loading-overlay">
|
||||
<img id="loading-anim" src="loading.gif">
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<p id="selection">
|
||||
Show <a href="https://firefox-source-docs.mozilla.org/toolkit/components/telemetry/telemetry/collection/use-counters.html">use counters</a>
|
||||
for group
|
||||
<select class="groups"></select>
|
||||
relative to
|
||||
<select class="kind">
|
||||
<option value="page">page (toplevel)</option>
|
||||
<option value="document">document</option>
|
||||
</select>
|
||||
counts.
|
||||
</p>
|
||||
|
||||
<p id="details">
|
||||
<form>
|
||||
The data comes from Firefox
|
||||
<select id="select_version">...</select>
|
||||
<select id="select_channel">
|
||||
<option value="beta">beta</option>
|
||||
<option value="nightly">nightly</option>
|
||||
</select>.
|
||||
It was collected from <span id="page_count">...</span> top level page loads and <span id="document_count">...</span> individual document loads.
|
||||
</form>
|
||||
</p>
|
||||
|
||||
<div class="data"></div>
|
||||
</div>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="https://telemetry.mozilla.org/v2/telemetry.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// Use counters are only collected from prerelease channels.
|
||||
const gValidChannels = ["beta", "nightly"];
|
||||
|
||||
// Map() of (channel -> version).
|
||||
var gAvailableVersions = null;
|
||||
|
||||
// Caching already loaded data in-memory to subsequently avoid outgoing requests.
|
||||
var metricsCache = new Map();
|
||||
var histogramSumCache = new Map();
|
||||
|
||||
function getChannel() {
|
||||
return $("#select_channel").val();
|
||||
}
|
||||
|
||||
function getVersion() {
|
||||
if ($("#select_version option").length == 0) {
|
||||
return null;
|
||||
}
|
||||
return $("#select_version").val();
|
||||
}
|
||||
|
||||
async function getMetrics() {
|
||||
let cacheId = `${getChannel()}/${getVersion()}`;
|
||||
if (!metricsCache.get(cacheId)) {
|
||||
let filterOptions = await new Promise(r => {
|
||||
return Telemetry.getFilterOptions(getChannel(), getVersion(), r);
|
||||
});
|
||||
metricsCache.set(cacheId, filterOptions.metric);
|
||||
}
|
||||
|
||||
return metricsCache.get(cacheId).filter(m => m.startsWith("USE_COUNTER2_"));
|
||||
}
|
||||
|
||||
async function getHistogramSum(metric) {
|
||||
let cacheId = `${getChannel()}/${getVersion()}/${metric}`;
|
||||
|
||||
if (histogramSumCache.has(cacheId)) {
|
||||
return histogramSumCache.get(cacheId);
|
||||
}
|
||||
|
||||
let filters = {};
|
||||
let evo = await new Promise(r => Telemetry.getEvolution(getChannel(), getVersion(), metric, filters, false, r));
|
||||
let sum = 0;
|
||||
if ("" in evo) {
|
||||
sum = evo[""].histogram().sum;
|
||||
}
|
||||
|
||||
histogramSumCache.set(cacheId, sum);
|
||||
return sum;
|
||||
}
|
||||
|
||||
function strippedUseCounterName(uc) {
|
||||
let kind = $('.kind').val();
|
||||
let group = $('.groups').val();
|
||||
let regexPrefix = new RegExp('^USE_COUNTER2_' + group + '_');
|
||||
let regexSuffix = new RegExp('_' + kind.toUpperCase());
|
||||
return uc.replace(regexPrefix, '')
|
||||
.replace(regexSuffix, '');
|
||||
}
|
||||
|
||||
function linkForProbeDetails(id) {
|
||||
const base = `https://georgf.github.io/fx-data-explorer/`;
|
||||
const params = {
|
||||
searchtype: "in_any",
|
||||
optout: "false",
|
||||
constraint: "is_in",
|
||||
version: "any",
|
||||
detailView: `histogram/${id}`,
|
||||
channel: getChannel(),
|
||||
search: id,
|
||||
};
|
||||
|
||||
return "https://georgf.github.io/fx-data-explorer/?" +
|
||||
Object.entries(params)
|
||||
.map(p => p[0] + "=" + encodeURIComponent(p[1]))
|
||||
.join("&");
|
||||
}
|
||||
|
||||
function createTable(data) {
|
||||
let table = document.createElement('table');
|
||||
|
||||
for (let d of data) {
|
||||
let tr = document.createElement('tr');
|
||||
|
||||
// Add name.
|
||||
let td = document.createElement('td');
|
||||
td.appendChild(document.createTextNode(d.shortName + " "));
|
||||
let link = $('<a>', {
|
||||
text: "?",
|
||||
title: "More about this probe",
|
||||
href: linkForProbeDetails(d.metric),
|
||||
"class": "infolink",
|
||||
});
|
||||
link.appendTo(td);
|
||||
td.setAttribute('title', d.metric);
|
||||
tr.appendChild(td);
|
||||
|
||||
// Add percentage.
|
||||
td = document.createElement('td');
|
||||
td.appendChild(document.createTextNode(`${d.percentage.toFixed(3)}%`));
|
||||
td.className += 'percentCell';
|
||||
td.setAttribute('title', `${d.count.toLocaleString()} of total loads`);
|
||||
tr.appendChild(td);
|
||||
|
||||
// Create bar cell.
|
||||
|
||||
td = document.createElement('td');
|
||||
td.className += 'barCell';
|
||||
td.setAttribute('title', `${d.percentage.toFixed(3)}%`);
|
||||
|
||||
const svgNs = "http://www.w3.org/2000/svg";
|
||||
let svg = document.createElementNS(svgNs, "svg");
|
||||
|
||||
let usedRectWidth = Math.min(400, Math.round(4 * d.percentage));
|
||||
|
||||
let rect = document.createElementNS(svgNs, 'rect');
|
||||
rect.setAttribute('x', 0);
|
||||
rect.setAttribute('y', 0);
|
||||
rect.setAttribute('width', usedRectWidth);
|
||||
rect.setAttribute('height', 100);
|
||||
rect.setAttribute('fill', 'steelblue');
|
||||
svg.appendChild(rect);
|
||||
|
||||
if (usedRectWidth < 400) {
|
||||
let rect = document.createElementNS(svgNs, 'rect');
|
||||
rect.setAttribute('x', usedRectWidth);
|
||||
rect.setAttribute('y', 0);
|
||||
rect.setAttribute('width', 400 - usedRectWidth);
|
||||
rect.setAttribute('height', 100);
|
||||
rect.setAttribute('fill', '#F0F0F0');
|
||||
svg.appendChild(rect);
|
||||
}
|
||||
|
||||
td.appendChild(svg);
|
||||
tr.appendChild(td);
|
||||
|
||||
table.appendChild(tr);
|
||||
}
|
||||
|
||||
return table;
|
||||
}
|
||||
|
||||
function pct(fraction, total) {
|
||||
return 100 * (fraction / total);
|
||||
}
|
||||
|
||||
async function getTotalCount() {
|
||||
let totalMetric = ($('.kind').val() == "page") ?
|
||||
"TOP_LEVEL_CONTENT_DOCUMENTS_DESTROYED" :
|
||||
"CONTENT_DOCUMENTS_DESTROYED";
|
||||
return await getHistogramSum(totalMetric);
|
||||
}
|
||||
|
||||
async function addTable(metrics) {
|
||||
let totalCount = await getTotalCount();
|
||||
|
||||
let promises = [];
|
||||
let sums = [];
|
||||
for (let m of metrics) {
|
||||
let p = getHistogramSum(m).then(sum => sums.push({
|
||||
shortName: strippedUseCounterName(m),
|
||||
metric: m,
|
||||
percentage: pct(sum, totalCount),
|
||||
count: sum,
|
||||
}));
|
||||
promises.push(p);
|
||||
}
|
||||
|
||||
await Promise.all(promises);
|
||||
sums.sort((a, b) => a.shortName.localeCompare(b.shortName));
|
||||
|
||||
let table = createTable(sums);
|
||||
$('.data').append(table);
|
||||
}
|
||||
|
||||
function makeHash() {
|
||||
window.location.hash = `#kind=${encodeURIComponent($('.kind').val())}` +
|
||||
`&group=${encodeURIComponent($('.groups').val())}` +
|
||||
`&channel=${getChannel()}` +
|
||||
`&version=${getVersion()}`;
|
||||
}
|
||||
|
||||
async function updateMetrics() {
|
||||
$('.data').empty();
|
||||
let kind = $('.kind').val();
|
||||
let group = $('.groups').val();
|
||||
|
||||
let metrics = (await getMetrics())
|
||||
.filter(m => m.endsWith("_" + kind.toUpperCase()))
|
||||
.filter(m => m.startsWith("USE_COUNTER2_" + group + "_"));
|
||||
console.log("metrics:", metrics.join(', '));
|
||||
|
||||
await addTable(metrics);
|
||||
}
|
||||
|
||||
function parseQueryString() {
|
||||
let params = new Map;
|
||||
for (let pair of window.location.hash.substring(1).split('&')) {
|
||||
let [key, value] = pair.split('=');
|
||||
params.set(key, decodeURIComponent(value));
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
async function updateUI(params = null) {
|
||||
var last = array => array[array.length - 1];
|
||||
|
||||
if (params && params.has('channel')) {
|
||||
let channel = params.get('channel');
|
||||
if (gValidChannels.includes(channel)) {
|
||||
$('#select_channel').val(channel);
|
||||
}
|
||||
}
|
||||
|
||||
// Show only versions available for this channel.
|
||||
const validVersions = gAvailableVersions.get(getChannel());
|
||||
console.log("validVersions", validVersions);
|
||||
$("#select_version > option").each(function() {
|
||||
$(this).toggle(validVersions.includes(parseInt(this.value)));
|
||||
});
|
||||
|
||||
// Use the closest valid version if an unavailable one was selected.
|
||||
let version = (getVersion() != null) ? parseInt(getVersion()) : validVersions[0];
|
||||
if (params && params.has('version')) {
|
||||
version = parseInt(params.get('version'));
|
||||
}
|
||||
if (!validVersions.includes(version)) {
|
||||
version = Math.max(last(validVersions), Math.min(validVersions[0], version));
|
||||
}
|
||||
|
||||
$("#select_version").val(version);
|
||||
|
||||
// Update top level metrics.
|
||||
let topLevelCount = await getHistogramSum("TOP_LEVEL_CONTENT_DOCUMENTS_DESTROYED");
|
||||
let docCount = await getHistogramSum("CONTENT_DOCUMENTS_DESTROYED");
|
||||
$('#page_count').text(topLevelCount.toLocaleString());
|
||||
$('#document_count').text(docCount.toLocaleString());
|
||||
|
||||
// Add individual metrics.
|
||||
let metrics = await getMetrics();
|
||||
let groups = [...new Set(metrics.map(m => m.split('_')[2]))];
|
||||
groups = groups.sort((a, b) => a.localeCompare(b));
|
||||
|
||||
for (let g of groups) {
|
||||
$('.groups').append($('<option>', {
|
||||
value: g,
|
||||
text: g,
|
||||
}));
|
||||
}
|
||||
|
||||
if (params && params.has('kind')) {
|
||||
$('.kind').val(params.get('kind'));
|
||||
}
|
||||
|
||||
if (params && params.has('group')) {
|
||||
$('.groups').val(params.get('group'));
|
||||
}
|
||||
}
|
||||
|
||||
async function update(params = null) {
|
||||
document.getElementById("loading-overlay").classList.remove("hidden");
|
||||
|
||||
await updateUI(params);
|
||||
makeHash();
|
||||
await updateMetrics();
|
||||
|
||||
document.getElementById("loading-overlay").classList.add("hidden");
|
||||
}
|
||||
|
||||
function initUI() {
|
||||
// Build map of sorted valid versions per channel.
|
||||
let versions = Telemetry.getVersions()
|
||||
.map(v => v.split("/"))
|
||||
.filter(v => gValidChannels.includes(v[0]));
|
||||
gAvailableVersions = new Map();
|
||||
for (let channel of gValidChannels) {
|
||||
let vs = versions.filter(v => v[0] == channel)
|
||||
.map(v => parseInt(v[1]))
|
||||
.sort()
|
||||
.reverse();
|
||||
gAvailableVersions.set(channel, vs);
|
||||
}
|
||||
|
||||
// Sanitize beta version range.
|
||||
if (gAvailableVersions.get("beta")[0] == gAvailableVersions.get("nightly")[0]) {
|
||||
gAvailableVersions.get("beta").shift();
|
||||
}
|
||||
|
||||
// Fill version selector.
|
||||
let select = $("#select_version");
|
||||
let allVersions = [... (new Set(versions.map(v => parseInt(v[1])))).values()]
|
||||
.sort()
|
||||
.reverse();
|
||||
for (var version of allVersions) {
|
||||
select.append("<option value=\""+version+"\" >"+version+"</option>");
|
||||
}
|
||||
|
||||
// Set up event handlers.
|
||||
let handler = () => update();
|
||||
let selectors = [
|
||||
"#select_version",
|
||||
"#select_channel",
|
||||
".groups",
|
||||
".kind",
|
||||
];
|
||||
|
||||
for (let selector of selectors) {
|
||||
$(selector).change(handler);
|
||||
$(selector).keyup(handler);
|
||||
}
|
||||
}
|
||||
|
||||
async function start() {
|
||||
await new Promise(r => Telemetry.init(r));
|
||||
initUI();
|
||||
await update(parseQueryString())
|
||||
}
|
||||
|
||||
start();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 11 KiB |
Загрузка…
Ссылка в новой задаче