| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>{{ queue_name }} Charts</title> |
| <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" /> |
| <link type="text/css" rel="stylesheet" href="/stylesheets/charts.css" /> |
| <script type="text/javascript" src="https://www.google.com/jsapi"></script> |
| <script type="text/javascript"> |
| google.load('visualization', '1.0', {'packages':['corechart']}); |
| google.setOnLoadCallback(function () { |
| |
| function secondsToString(seconds) { |
| var oneSecond = 1; |
| var oneMinute = 60; |
| var oneHour = oneMinute * 60; |
| var oneDay = oneHour * 24; |
| var oneYear = oneDay * 365.25; |
| var unitArray = [ |
| [oneYear, "year"], |
| [oneDay, "day"], |
| [oneHour, "hour"], |
| [oneMinute, "minute"], |
| [oneSecond, "second"], |
| ]; |
| var result = ""; |
| for (var i = 0; i < unitArray.length; i++) { |
| var unit = unitArray[i][0]; |
| if (seconds >= unit) { |
| if (result !== "") { |
| result += " "; |
| } |
| var name = unitArray[i][1]; |
| var number = Math.floor(seconds/unit); |
| result += number + " " + name + (number > 1 ? "s" : ""); |
| seconds %= unit; |
| } |
| } |
| if (result === "") { |
| return "0 seconds"; |
| } |
| return result; |
| } |
| |
| var data, chart, options; |
| |
| var timeString = new Date({{ timestamp }} * 1000).toString(); |
| var timestampDiv = document.getElementById("timestamp"); |
| timestampDiv.innerHTML = "Viewing from " + timeString; |
| |
| options = { |
| legend: {position: "top"}, |
| hAxis: { |
| title: "{{ time_unit_name|capfirst }} Ago", |
| direction: -1, |
| viewWindow: { |
| min: {{ seconds_ago_min }} / {{ time_unit }}, |
| max: {{ seconds_ago_max }} / {{ time_unit }}, |
| }, |
| gridlines: { |
| count: 9, |
| }, |
| }, |
| vAxis: { |
| viewWindow: {min: 0 }, |
| }, |
| lineWidth: 3, |
| }; |
| |
| // CHART 1 |
| options.colors = ["green", "red", "orange"]; |
| data = new google.visualization.DataTable(); |
| data.addColumn("number", "<time>"); |
| data.addColumn("number", "Patches Completed"); |
| data.addColumn({type: "string", role: "tooltip"}); |
| data.addColumn("number", "Patches Waiting"); |
| data.addColumn({type: "string", role: "tooltip"}); |
| data.addColumn("number", "Bots (visible to server)"); |
| data.addColumn({type: "string", role: "tooltip"}); |
| data.addRows([ |
| {% for queue_datum in queue_data %} |
| [ |
| {{ queue_datum.seconds_ago }} / {{ time_unit }}, |
| {{ queue_datum.patches_completed }}, |
| "Patches Completed: " + {{ queue_datum.patches_completed }} + "\n" + secondsToString({{ queue_datum.seconds_ago }}) + " ago", |
| {{ queue_datum.patches_waiting }}, |
| "Patches Waiting: " + {{ queue_datum.patches_waiting }} + "\n" + secondsToString({{ queue_datum.seconds_ago }}) + " ago", |
| {{ queue_datum.bots_seen }}, |
| "Bots (visible to server): " + {{ queue_datum.bots_seen }} + "\n" + secondsToString({{ queue_datum.seconds_ago }}) + " ago", |
| ], |
| {% endfor %} |
| ]); |
| chart = new google.visualization.LineChart(document.getElementById('chart1')); |
| chart.draw(data, options); |
| |
| // CHART 2 |
| options.colors = ["blue", "purple"]; |
| data = new google.visualization.DataTable(); |
| data.addColumn("number", "<time>"); |
| data.addColumn("number", "Status Updates"); |
| data.addColumn({type: "string", role: "tooltip"}); |
| data.addColumn("number", "Patch Retries"); |
| data.addColumn({type: "string", role: "tooltip"}); |
| data.addRows([ |
| {% for queue_datum in queue_data %} |
| [ |
| {{ queue_datum.seconds_ago }} / {{ time_unit }}, |
| {{ queue_datum.status_update_count }}, |
| "Status Updates: " + {{ queue_datum.status_update_count }} + "\n" + secondsToString({{ queue_datum.seconds_ago }}) + " ago", |
| {{ queue_datum.patch_retry_count }}, |
| "Patch Retries: " + {{ queue_datum.patch_retry_count }} + "\n" + secondsToString({{ queue_datum.seconds_ago }}) + " ago", |
| ], |
| {% endfor %} |
| ]); |
| chart = new google.visualization.LineChart(document.getElementById('chart2')); |
| chart.draw(data, options); |
| |
| // CHART 3 |
| options.colors = ["brown"]; |
| options.vAxis.title = "Minutes"; |
| data = new google.visualization.DataTable(); |
| data.addColumn("number", "<time>"); |
| data.addColumn("number", "Patch Processing Times"); |
| data.addColumn({type: "string", role: "tooltip"}); |
| data.addColumn({type: "number", role: "interval"}); |
| data.addColumn({type: "number", role: "interval"}); |
| data.addRows([ |
| {% for queue_datum in queue_data %} |
| [ |
| {{ queue_datum.seconds_ago }} / {{ time_unit }}, |
| {{ queue_datum.patch_processing_med }} / 60, |
| "Patch Processing Times\nMax: " + secondsToString({{ queue_datum.patch_processing_max }}) + "\nMedian: " + secondsToString({{ queue_datum.patch_processing_med }}) + "\nMin: " + secondsToString({{ queue_datum.patch_processing_min }}) + "\n" + secondsToString({{ queue_datum.seconds_ago }}) + " ago", |
| {{ queue_datum.patch_processing_min }} / 60, |
| {{ queue_datum.patch_processing_max }} / 60, |
| ], |
| {% endfor %} |
| ]); |
| chart = new google.visualization.LineChart(document.getElementById('chart3')); |
| chart.draw(data, options); |
| |
| // CHART 4 |
| options.colors = ["red"]; |
| data = new google.visualization.DataTable(); |
| data.addColumn("number", "<time>"); |
| data.addColumn("number", "Patch Waiting Times"); |
| data.addColumn({type: "string", role: "tooltip"}); |
| data.addColumn({type: "number", role: "interval"}); |
| data.addColumn({type: "number", role: "interval"}); |
| data.addRows([ |
| {% for queue_datum in queue_data %} |
| [ |
| {{ queue_datum.seconds_ago }} / {{ time_unit }}, |
| {{ queue_datum.patch_waiting_med }} / 60, |
| "Patch Waiting Times\nMax: " + secondsToString({{ queue_datum.patch_waiting_max }}) + "\nMedian: " + secondsToString({{ queue_datum.patch_waiting_med }}) + "\nMin: " + secondsToString({{ queue_datum.patch_waiting_min }}) + "\n" + secondsToString({{ queue_datum.seconds_ago }}) + " ago", |
| {{ queue_datum.patch_waiting_min }} / 60, |
| {{ queue_datum.patch_waiting_max }} / 60, |
| ], |
| {% endfor %} |
| ]); |
| chart = new google.visualization.LineChart(document.getElementById('chart4')); |
| chart.draw(data, options); |
| |
| function postPatchLink (selection) { |
| if (selection.length > 0 && selection[0].row !== undefined) { |
| var attachmentIdArray = [{% for patch_datum in patch_data %}{{ patch_datum.attachment_id }}, {% endfor %}]; |
| var attachmentId = attachmentIdArray[selection[0].row]; |
| var aTag = document.getElementById("selectedPatch"); |
| aTag.innerHTML = aTag.href = "//" + window.location.host + "/patch/" + attachmentId; |
| } |
| } |
| |
| // CHART 5 |
| options.colors = ["brown", "red"]; |
| options.hAxis.title = "{{ time_unit_name|capfirst }} Ago"; |
| options.hAxis.viewWindow.min = {{ seconds_ago_min }} / {{ time_unit }}; |
| options.hAxis.viewWindow.max = {{ seconds_ago_max }} / {{ time_unit }}; |
| delete options.lineWidth; |
| data = new google.visualization.DataTable(); |
| data.addColumn("number", "<time>"); |
| data.addColumn("number", "Process Duration"); |
| data.addColumn({type: "string", role: "tooltip"}); |
| data.addColumn("number", "Wait Duration"); |
| data.addColumn({type: "string", role: "tooltip"}); |
| data.addRows([ |
| {% for patch_datum in patch_data %} |
| [ |
| {{ patch_datum.seconds_ago }} / {{ time_unit }}, |
| {{ patch_datum.process_duration }}, |
| "Patch {{ patch_datum.attachment_id }}\n" + secondsToString({{ patch_datum.seconds_ago }}) + " ago", |
| {{ patch_datum.wait_duration }}, |
| "Patch {{ patch_datum.attachment_id }}\n" + secondsToString({{ patch_datum.seconds_ago }}) + " ago", |
| ], |
| {% endfor %} |
| ]); |
| chart = new google.visualization.ScatterChart(document.getElementById('chart5')); |
| var chart5 = chart; |
| google.visualization.events.addListener(chart, "select", function () {postPatchLink(chart5.getSelection());}); |
| chart.draw(data, options); |
| |
| // CHART 6 |
| options.colors = ["blue", "purple"]; |
| delete options.vAxis.title; |
| data = new google.visualization.DataTable(); |
| data.addColumn("number", "<time>"); |
| data.addColumn("number", "Status Updates"); |
| data.addColumn({type: "string", role: "tooltip"}); |
| data.addColumn("number", "Retries"); |
| data.addColumn({type: "string", role: "tooltip"}); |
| data.addRows([ |
| {% for patch_datum in patch_data %} |
| [ |
| {{ patch_datum.seconds_ago }} / {{ time_unit }}, |
| {{ patch_datum.status_update_count }}, |
| "Patch {{ patch_datum.attachment_id }}\n" + secondsToString({{ patch_datum.seconds_ago }}) + " ago", |
| {{ patch_datum.retry_count }}, |
| "Patch {{ patch_datum.attachment_id }}\n" + secondsToString({{ patch_datum.seconds_ago }}) + " ago", |
| ], |
| {% endfor %} |
| ]); |
| chart = new google.visualization.ScatterChart(document.getElementById('chart6')); |
| var chart6 = chart; |
| google.visualization.events.addListener(chart, "select", function () {postPatchLink(chart6.getSelection());}); |
| chart.draw(data, options); |
| }); |
| |
| function setURLParameter (parameterName, newValue) { |
| var split; |
| split = window.location.href.split("?"); |
| var url, parameterArray; |
| url = split[0]; |
| if (split.length > 1) { |
| parameterArray = split[1].split("&"); |
| } else { |
| parameterArray = []; |
| } |
| var setParameter = false; |
| for (var i = 0; i < parameterArray.length; i++) { |
| var currentParameterName = decodeURIComponent(parameterArray[i].split("=")[0]); |
| if (currentParameterName === parameterName) { |
| parameterArray[i] = encodeURIComponent(parameterName) + "=" + encodeURIComponent(newValue); |
| setParameter = true; |
| break; |
| } |
| } |
| if (!setParameter) { |
| parameterArray.push(encodeURIComponent(parameterName) + "=" + encodeURIComponent(newValue)); |
| }console.log(parameterArray); |
| window.location.href = url + "?" + parameterArray.join("&"); |
| } |
| </script> |
| </head> |
| |
| <body> |
| <div class="choices"> |
| {% for single_queue_name in all_queue_names %} |
| {% if single_queue_name == queue_name %} |
| {{ queue_name }} |
| {% else %} |
| {{ single_queue_name|force_escape|queue_charts_link:single_queue_name|safe }} |
| {% endif %} |
| {% if not forloop.last %} | {% endif %} |
| {% endfor %} |
| </div> |
| <h1>{{ queue_name }} Charts</h1> |
| <div>[{{ queue_name|force_escape|queue_status_link:"status"|safe }}]</div> |
| <div id="timestamp"></div> |
| <div class="choices">Viewing range: |
| {% for view_range_choice in view_range_choices %} |
| {% if view_range_choice.view_range == view_range %} |
| {{ view_range_choice.name }} |
| {% else %} |
| <a href="javascript:setURLParameter('view_range', {{ view_range_choice.view_range }})">{{ view_range_choice.name }}</a> |
| {% endif %} |
| {% if not forloop.last %} | {% endif %} |
| {% endfor %} |
| </div> |
| <div class="chart" id="chart1"></div> |
| <div class="chart" id="chart2"></div> |
| <div class="chart" id="chart3"></div> |
| <div class="chart" id="chart4"></div> |
| <div class="chart" id="chart5"></div> |
| <div class="chart" id="chart6"></div> |
| Selected patch: <a id="selectedPatch">(None)</div> |
| </body> |
| </html> |
