123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 |
- <!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>
|