| Index: appengine_apps/chromium_status/static/js/status_viewer/peak_hours_view.js
|
| diff --git a/appengine_apps/chromium_status/static/js/status_viewer/peak_hours_view.js b/appengine_apps/chromium_status/static/js/status_viewer/peak_hours_view.js
|
| deleted file mode 100644
|
| index 937866207809c13f2ecc24cad7f7d5dbc578d66a..0000000000000000000000000000000000000000
|
| --- a/appengine_apps/chromium_status/static/js/status_viewer/peak_hours_view.js
|
| +++ /dev/null
|
| @@ -1,256 +0,0 @@
|
| -// Copyright (c) 2009 The Chromium Authors. All rights reserved.
|
| -// Use of this source code is governed by a BSD-style license that can be
|
| -// found in the LICENSE file.
|
| -
|
| -/**
|
| - * Factory function to create a View for "peak hours".
|
| - *
|
| - * This display of the data shows tree closure/open totals during peak hours in
|
| - * various time zones.
|
| - */
|
| -var CreatePeakHoursView;
|
| -
|
| -// -----------------------------------------------------------------------------
|
| -// Private implementation
|
| -// -----------------------------------------------------------------------------
|
| -
|
| -(function() {
|
| -
|
| -CreatePeakHoursView = function(timeRange, entries) {
|
| - return new PeakHoursView(timeRange, entries);
|
| -}
|
| -
|
| -function PeakHoursView(timeRange, entries) {
|
| - Draw(entries, timeRange);
|
| -}
|
| -
|
| -PeakHoursView.prototype.Show = function(visible) {
|
| - gViewerApp.ShowViewContentAndTabArea("peak", visible);
|
| -}
|
| -
|
| -/**
|
| - * Draws the peak hours chart for all days in |timeRange|.
|
| - * @param {array<Entry>} entries
|
| - * @param {TimeRange} timeRange
|
| - */
|
| -function Draw(entries, timeRange) {
|
| - var utcOffsetsMillis = {
|
| - // Please keep this ordered by UTC offset.
|
| - // If you extend this list, you need to adjust column widths in
|
| - // AddPeakColumn() and on the status_viewer.html page.
|
| - MTV: -7 * DateUtil.MILLIS_PER_HOUR, // UTC-7 -- Mountain View
|
| - NYC: -4 * DateUtil.MILLIS_PER_HOUR, // UTC-4 -- New York
|
| - CET: 1 * DateUtil.MILLIS_PER_HOUR, // UTC+1 -- Denmark
|
| - TOK: 9 * DateUtil.MILLIS_PER_HOUR // UTC+9 -- Tokyo
|
| - };
|
| - var graphCSV = [];
|
| -
|
| - // Find which is the minimum and maximum.
|
| - var minUTCOffsetMillis = utcOffsetsMillis.MTV;
|
| - var maxUTCOffsetMillis = utcOffsetsMillis.MTV;
|
| -
|
| - for (var timezone in utcOffsetsMillis) {
|
| - var offset = utcOffsetsMillis[timezone];
|
| - minUTCOffsetMillis = Math.min(minUTCOffsetMillis, offset);
|
| - maxUTCOffsetMillis = Math.max(maxUTCOffsetMillis, offset);
|
| - }
|
| -
|
| - // Set the graph csv header: "Date,MTV,NYC,CET,TOK\n".
|
| - graphCSV.push("Date");
|
| - for (var timezone in utcOffsetsMillis) {
|
| - graphCSV.push(",");
|
| - graphCSV.push(timezone);
|
| - }
|
| - graphCSV.push("\n");
|
| -
|
| - // Figure out what days we touch.
|
| - //
|
| - // Note that we have to extend the time range by the max and
|
| - // minimum offsets, since those timezones may be on the next/previous
|
| - // day!
|
| - var days = DateUtil.GetUTCDaysInRange(
|
| - new TimeRange(timeRange.startTime + maxUTCOffsetMillis,
|
| - timeRange.endTime + minUTCOffsetMillis));
|
| -
|
| - var tbody = document.getElementById("peak_tbody");
|
| - // Clear anything already present in the output table.
|
| - tbody.innerHTML = "";
|
| -
|
| - // Draw the rows for each day worth of data.
|
| - for (var i = 0; i < days.length; ++i) {
|
| - var day = days[i];
|
| - DrawDay(tbody, entries, day, utcOffsetsMillis, graphCSV);
|
| - }
|
| -
|
| - // Draw a graph with the csv data across all dates.
|
| - // Dygraph docs at http://danvk.org/dygraphs/
|
| - var peakGraph =
|
| - new Dygraph(document.getElementById("peak_dygraph"),
|
| - graphCSV.join(""),
|
| - {
|
| - rollPeriod: 1,
|
| - showRoller: true,
|
| - axisLabelFontSize: 11,
|
| - includeZero: true,
|
| - colors: ["red", "orange", "blue", "LightSkyBlue"],
|
| - strokeWidth: 3,
|
| - labelsDiv: document.getElementById("peak_dygraph_legend"),
|
| - labelsSeparateLines: true,
|
| - });
|
| -}
|
| -
|
| -/**
|
| - * Draws a specific day's row in the peak hours chart.
|
| - * @parm {DOMNode} tbody
|
| - * @param {array<Entry>} entries
|
| - * @param {TimeRange} day
|
| - * @param {dict} utcOffsetsMillis
|
| - * @param {array} graphCSV
|
| - */
|
| -function DrawDay(tbody, entries, utcDay, utcOffsetsMillis, graphCSV) {
|
| - var tr = DomUtil.AddNode(tbody, "tr");
|
| -
|
| -
|
| - var tdForDayName = DomUtil.AddNode(tr, "td");
|
| -
|
| - DrawUTCDayNameColumn(utcDay, tdForDayName);
|
| - // Start each graphCSV row with a date like "2010/08/01".
|
| - graphCSV.push(tdForDayName.innerText);
|
| -
|
| - var tableTd = DomUtil.AddNode(tr, "td");
|
| -
|
| - tableTd.width = "100%";
|
| -
|
| - var table = DomUtil.AddNode(tableTd, "table");
|
| - table.cellSpacing = 0;
|
| - table.cellPadding = 0;
|
| - table.width = "100%";
|
| -
|
| - var tr = DomUtil.AddNode(table, "tr");
|
| -
|
| - for (var timezone in utcOffsetsMillis) {
|
| - AddPeakColumn(tr,
|
| - entries,
|
| - utcDay,
|
| - utcOffsetsMillis[timezone],
|
| - graphCSV);
|
| - }
|
| - graphCSV.push("\n");
|
| -}
|
| -
|
| -/**
|
| - * @returns {StatusTotals}
|
| - */
|
| -function GetStateCountsInRange(runs, timeRange) {
|
| - var statusTotalsSeconds = new StatusTotals();
|
| -
|
| - var y1 = timeRange.startTime;
|
| - var y2 = timeRange.endTime;
|
| -
|
| - for (var i = 0; i < runs.length; ++i) {
|
| - var run = runs[i];
|
| -
|
| - // Basically we have two boxes (x and y), and need to find the overlap.
|
| - var x1 = run.startTime;
|
| - var x2 = run.startTime - run.duration;
|
| -
|
| - if (x1 > y2 && x2 < y1) {
|
| - var leftEdge = Math.min(x1, y1);
|
| - var rightEdge = Math.max(y2, x2);
|
| -
|
| - var dt = leftEdge - rightEdge;
|
| -
|
| - statusTotalsSeconds.Increment(run.entry.GetTreeState(),
|
| - DateUtil.MillisToSeconds(dt));
|
| - }
|
| - }
|
| -
|
| - return statusTotalsSeconds;
|
| -}
|
| -
|
| -function AddPeakColumn(tr, entries, utcDay, utcOffsetMillis, graphCSV) {
|
| - var td = DomUtil.AddNode(tr, "td");
|
| -
|
| - // Width is (100/[items in utcMillisOffsets])%.
|
| - td.width = "25%";
|
| - td.align = "center";
|
| -
|
| - // Get a day range for the timezone.
|
| - var day = new TimeRange(utcDay.startTime - utcOffsetMillis,
|
| - utcDay.endTime - utcOffsetMillis);
|
| -
|
| - // Extract the data from |entries| that apply to |day|, and break it
|
| - // into (start,duration) runs.
|
| - var runs = MakeRuns(entries, day);
|
| -
|
| - // 9 - 5 in the local timezone.
|
| - var localPeakHours = new TimeRange(
|
| - day.endTime + 17 * DateUtil.MILLIS_PER_HOUR,
|
| - day.endTime + 9 * DateUtil.MILLIS_PER_HOUR);
|
| -
|
| - var statusTotalsSeconds = GetStateCountsInRange(runs, localPeakHours);
|
| -
|
| - var total = statusTotalsSeconds.GetTotalKnown();
|
| -
|
| - var percentOpenText = "";
|
| - var color = "";
|
| - var className = "";
|
| -
|
| - var percentOpenNumber = "0.0";
|
| - if (total == 0) {
|
| - // This can happen if the day is in the future (edge day of slow timezone).
|
| - percentOpenText = "N/A";
|
| - } else {
|
| - var fraction = statusTotalsSeconds.GetOpen() / total;
|
| - percentOpenNumber = (100 * fraction).toFixed(2);
|
| - percentOpenText = percentOpenNumber + "%";
|
| -
|
| - // If we didn't fetch all the data necessary, our percentage won't be
|
| - // accurate as it is missing zones.
|
| - if (total != DateUtil.MillisToSeconds(
|
| - localPeakHours.startTime - localPeakHours.endTime)) {
|
| - percentOpenText += " [incomplete]";
|
| - }
|
| -
|
| - // Choose a style based on how bad things are.
|
| - var badnessBuckets = [0.50, 0.75, 1.1];
|
| - for (var i = 0; i < badnessBuckets.length; ++i) {
|
| - if (fraction < badnessBuckets[i]) {
|
| - className = "open_badness" + i;
|
| - break;
|
| - }
|
| - }
|
| - }
|
| - graphCSV.push("," + percentOpenNumber);
|
| -
|
| - var span = DomUtil.AddNode(td, "span");
|
| - span.className = className;
|
| - DomUtil.AddText(span, percentOpenText);
|
| -}
|
| -
|
| -/**
|
| - * Draws a specific day's name column in the peak hours charts.
|
| - * @param {TimeRange} utcDay
|
| - * @param {DOMNode} td The column to print name into.
|
| - */
|
| -function DrawUTCDayNameColumn(utcDay, td) {
|
| - var d = new Date();
|
| - d.setTime(utcDay.endTime);
|
| -
|
| - // Display the day as for example "2009/8/38".
|
| - var dateText =
|
| - d.getUTCFullYear() + "/" +
|
| - PadWithZero(d.getUTCMonth() + 1, 2) + "/" +
|
| - PadWithZero(d.getUTCDate(), 2);
|
| -
|
| - // Color saturday and sunday differently.
|
| - if (d.getUTCDay() == 0) {
|
| - td.className = "sundayName";
|
| - } else if (d.getUTCDay() == 6) {
|
| - td.className = "saturdayName";
|
| - }
|
| -
|
| - td.innerHTML = dateText;
|
| -}
|
| -
|
| -})(); // Private implementation.
|
|
|