Basic graph implementation
This commit is contained in:
parent
148c9cd0db
commit
99e0e497c2
18
global.css
18
global.css
@ -77,6 +77,24 @@ header {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lmc-graph canvas {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lmc-graph h4 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lmc-graph table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lmc-graph-color {
|
||||||
|
height: 15px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.lmc-table {
|
.lmc-table {
|
||||||
background-color: #CECECE;
|
background-color: #CECECE;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
59
global.js
59
global.js
@ -452,6 +452,63 @@ function displayUser(response)
|
|||||||
profilePic.style = "display: initial;";
|
profilePic.style = "display: initial;";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Draw timeseries data with the given canvas in the given color and fill
|
||||||
|
// series is an array of objects, with each object containing the color/fill settings and an array of data points
|
||||||
|
function drawSeries(series, canvas)
|
||||||
|
{
|
||||||
|
// Compute scale and totals
|
||||||
|
var xMin = series[0].points[0][0];
|
||||||
|
var xMax = series[0].points[series[0].points.length - 1][0];
|
||||||
|
var yMax = 0;
|
||||||
|
for (var i = 0; i < series.length; i++) {
|
||||||
|
xMin = Math.min(xMin, series[i].points[0][0]);
|
||||||
|
xMax = Math.max(xMax, series[i].points[series[i].points.length - 1][0]);
|
||||||
|
series[i].max = 0, series[i].avg = 0;
|
||||||
|
for (var j = 0; j < series[i].points.length; j++) {
|
||||||
|
series[i].max = Math.max(series[i].max, series[i].points[j][1]);
|
||||||
|
series[i].avg += series[i].points[j][1];
|
||||||
|
}
|
||||||
|
series[i].avg /= series[i].points.length;
|
||||||
|
yMax = Math.max(yMax, series[i].max);
|
||||||
|
}
|
||||||
|
xMax -= xMin;
|
||||||
|
|
||||||
|
// Setup drawing context
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
|
||||||
|
// Clear the canvas
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
for (var i = 0; i < series.length; i++) {
|
||||||
|
ctx.fillStyle = series[i].color;
|
||||||
|
ctx.strokeStyle = series[i].color;
|
||||||
|
|
||||||
|
// Draw data
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo((series[i].points[0][0] - xMin) / xMax * canvas.width, canvas.height - (series[i].points[0][1] / yMax * canvas.height));
|
||||||
|
for (var j = 1; j < series[i].points.length; j++)
|
||||||
|
ctx.lineTo((series[i].points[j][0] - xMin) / xMax * canvas.width, canvas.height - (series[i].points[j][1] / yMax * canvas.height));
|
||||||
|
if (series[i].fill) {
|
||||||
|
ctx.lineTo((series[i].points[series[i].points.length-1][0] - xMin) / xMax * canvas.width, canvas.height);
|
||||||
|
ctx.lineTo((series[i].points[0][0] - xMin) / xMax * canvas.width, canvas.height);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fill();
|
||||||
|
} else {
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw axis lines
|
||||||
|
ctx.strokeStyle = "black";
|
||||||
|
ctx.lineWidth = 2.5;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, 0);
|
||||||
|
ctx.lineTo(0, canvas.height);
|
||||||
|
ctx.lineTo(canvas.width, canvas.height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
// Return an MD5 hash of the given string
|
// Return an MD5 hash of the given string
|
||||||
function md5(str, binary)
|
function md5(str, binary)
|
||||||
{
|
{
|
||||||
@ -793,4 +850,4 @@ function translateKernel(slug, element)
|
|||||||
apiGet("/linode/kernels/" + slug, callback, null);
|
apiGet("/linode/kernels/" + slug, callback, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { settings, elements, regionNames, apiDelete, apiGet, apiPost, apiPut, md5, migrateETA, oauthPost, oauthScopes, objPut, parseParams, setupHeader, eventTitles, timeString, translateKernel };
|
export { settings, elements, regionNames, apiDelete, apiGet, apiPost, apiPut, drawSeries, md5, migrateETA, oauthPost, oauthScopes, objPut, parseParams, setupHeader, eventTitles, timeString, translateKernel };
|
||||||
|
|||||||
@ -6,7 +6,6 @@
|
|||||||
<a class="subnav-link" href="/linodes/rescue?lid=0">Rescue</a>
|
<a class="subnav-link" href="/linodes/rescue?lid=0">Rescue</a>
|
||||||
<a class="subnav-link" href="/linodes/resize?lid=0">Resize</a>
|
<a class="subnav-link" href="/linodes/resize?lid=0">Resize</a>
|
||||||
<a class="subnav-link" href="/linodes/clone?lid=0">Clone</a>
|
<a class="subnav-link" href="/linodes/clone?lid=0">Clone</a>
|
||||||
<a class="subnav-link" href="/linodes/graphs?lid=0">Graphs</a>
|
|
||||||
<a class="subnav-link" href="/linodes/backups?lid=0">Backups</a>
|
<a class="subnav-link" href="/linodes/backups?lid=0">Backups</a>
|
||||||
<a class="subnav-link" href="/linodes/settings?lid=0">Settings</a>
|
<a class="subnav-link" href="/linodes/settings?lid=0">Settings</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -25,10 +25,18 @@
|
|||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
#config-table tr:last-of-type {
|
#config-table tr:last-of-type {
|
||||||
border-bottom: 1px solid #E8E8E8;
|
border-bottom: 1px solid #E8E8E8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#cpu-color {
|
||||||
|
background-color: #03C;
|
||||||
|
}
|
||||||
|
|
||||||
.disk-icon {
|
.disk-icon {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 26px;
|
width: 26px;
|
||||||
@ -42,12 +50,51 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#graph-range {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
border-bottom: 1px solid #E8E8E8;
|
border-bottom: 1px solid #E8E8E8;
|
||||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
margin-bottom: 50px;
|
}
|
||||||
|
|
||||||
|
#io-rate-color {
|
||||||
|
background-color: #FFD04B;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ipv4-in-color {
|
||||||
|
background-color: #03C;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ipv4-out-color {
|
||||||
|
background-color: #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ipv4-privin-color {
|
||||||
|
background-color: #C09;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ipv4-privout-color {
|
||||||
|
background-color: #FF9;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ipv6-in-color {
|
||||||
|
background-color: #03C;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ipv6-out-color {
|
||||||
|
background-color: #32CD32;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ipv6-privin-color {
|
||||||
|
background-color: #C09;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ipv6-privout-color {
|
||||||
|
background-color: #FF9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.job-failed {
|
.job-failed {
|
||||||
@ -202,6 +249,10 @@ h3 {
|
|||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#swap-rate-color {
|
||||||
|
background-color: #FA373E;
|
||||||
|
}
|
||||||
|
|
||||||
#upgrade {
|
#upgrade {
|
||||||
background-color: #F0F0F0;
|
background-color: #F0F0F0;
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
* along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
* along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParams, setupHeader, timeString, translateKernel } from "/global.js";
|
import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles, parseParams, setupHeader, timeString, translateKernel } from "/global.js";
|
||||||
|
|
||||||
(function()
|
(function()
|
||||||
{
|
{
|
||||||
@ -26,6 +26,10 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
elements.configRadioName = "config-radio";
|
elements.configRadioName = "config-radio";
|
||||||
elements.configRemovePrefix = "config-remove-";
|
elements.configRemovePrefix = "config-remove-";
|
||||||
elements.configTable = "config-table";
|
elements.configTable = "config-table";
|
||||||
|
elements.cpuAvg = "cpu-avg";
|
||||||
|
elements.cpuGraph = "cpu-graph";
|
||||||
|
elements.cpuLast = "cpu-last";
|
||||||
|
elements.cpuMax = "cpu-max";
|
||||||
elements.diskIcon = "disk-icon";
|
elements.diskIcon = "disk-icon";
|
||||||
elements.diskIconImg = "/img/disk.gif";
|
elements.diskIconImg = "/img/disk.gif";
|
||||||
elements.diskRemovePrefix = "disk-remove-";
|
elements.diskRemovePrefix = "disk-remove-";
|
||||||
@ -34,7 +38,44 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
elements.eventRowPrefix = "event-row-";
|
elements.eventRowPrefix = "event-row-";
|
||||||
elements.eventTable = "event-table";
|
elements.eventTable = "event-table";
|
||||||
elements.extraEvent = "extra-event";
|
elements.extraEvent = "extra-event";
|
||||||
|
elements.graphRange = "graph-range";
|
||||||
elements.info = "info";
|
elements.info = "info";
|
||||||
|
elements.ioGraph = "io-graph";
|
||||||
|
elements.ioRateAvg = "io-rate-avg";
|
||||||
|
elements.ioRateLast = "io-rate-last";
|
||||||
|
elements.ioRateMax = "io-rate-max";
|
||||||
|
elements.ipv4Graph = "ipv4-graph";
|
||||||
|
elements.ipv4InAvg = "ipv4-in-avg";
|
||||||
|
elements.ipv4InLast = "ipv4-in-last";
|
||||||
|
elements.ipv4InMax = "ipv4-in-max";
|
||||||
|
elements.ipv4OutAvg = "ipv4-out-avg";
|
||||||
|
elements.ipv4OutLast = "ipv4-out-last";
|
||||||
|
elements.ipv4OutMax = "ipv4-out-max";
|
||||||
|
elements.ipv4PrivInAvg = "ipv4-privin-avg";
|
||||||
|
elements.ipv4PrivInLast = "ipv4-privin-last";
|
||||||
|
elements.ipv4PrivInMax = "ipv4-privin-max";
|
||||||
|
elements.ipv4PrivOutAvg = "ipv4-privout-avg";
|
||||||
|
elements.ipv4PrivOutLast = "ipv4-privout-last";
|
||||||
|
elements.ipv4PrivOutMax = "ipv4-privout-max";
|
||||||
|
elements.ipv4Total = "ipv4-total";
|
||||||
|
elements.ipv4TotalIn = "ipv4-total-in";
|
||||||
|
elements.ipv4TotalOut = "ipv4-total-out";
|
||||||
|
elements.ipv6Graph = "ipv6-graph";
|
||||||
|
elements.ipv6InAvg = "ipv6-in-avg";
|
||||||
|
elements.ipv6InLast = "ipv6-in-last";
|
||||||
|
elements.ipv6InMax = "ipv6-in-max";
|
||||||
|
elements.ipv6OutAvg = "ipv6-out-avg";
|
||||||
|
elements.ipv6OutLast = "ipv6-out-last";
|
||||||
|
elements.ipv6OutMax = "ipv6-out-max";
|
||||||
|
elements.ipv6PrivInAvg = "ipv6-privin-avg";
|
||||||
|
elements.ipv6PrivInLast = "ipv6-privin-last";
|
||||||
|
elements.ipv6PrivInMax = "ipv6-privin-max";
|
||||||
|
elements.ipv6PrivOutAvg = "ipv6-privout-avg";
|
||||||
|
elements.ipv6PrivOutLast = "ipv6-privout-last";
|
||||||
|
elements.ipv6PrivOutMax = "ipv6-privout-max";
|
||||||
|
elements.ipv6Total = "ipv6-total";
|
||||||
|
elements.ipv6TotalIn = "ipv6-total-in";
|
||||||
|
elements.ipv6TotalOut = "ipv6-total-out";
|
||||||
elements.jobFailed = "job-failed";
|
elements.jobFailed = "job-failed";
|
||||||
elements.jobInfo = "job-info";
|
elements.jobInfo = "job-info";
|
||||||
elements.jobNotice = "job-notice";
|
elements.jobNotice = "job-notice";
|
||||||
@ -64,6 +105,9 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
elements.storageFree = "storage-free";
|
elements.storageFree = "storage-free";
|
||||||
elements.storageTotal = "storage-total";
|
elements.storageTotal = "storage-total";
|
||||||
elements.storageUsed = "storage-used";
|
elements.storageUsed = "storage-used";
|
||||||
|
elements.swapRateAvg = "swap-rate-avg";
|
||||||
|
elements.swapRateLast = "swap-rate-last";
|
||||||
|
elements.swapRateMax = "swap-rate-max";
|
||||||
elements.transferMonthly = "transfer-monthly";
|
elements.transferMonthly = "transfer-monthly";
|
||||||
elements.transferOverage = "transfer-overage";
|
elements.transferOverage = "transfer-overage";
|
||||||
elements.transferUsed = "transfer-used";
|
elements.transferUsed = "transfer-used";
|
||||||
@ -80,6 +124,7 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
data.linodeTransfer = {};
|
data.linodeTransfer = {};
|
||||||
data.notifications = [];
|
data.notifications = [];
|
||||||
data.plan = {};
|
data.plan = {};
|
||||||
|
data.stats = {};
|
||||||
data.volumes = [];
|
data.volumes = [];
|
||||||
|
|
||||||
// Static references to UI elements
|
// Static references to UI elements
|
||||||
@ -87,9 +132,50 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
ui.backups = {};
|
ui.backups = {};
|
||||||
ui.boot = {};
|
ui.boot = {};
|
||||||
ui.configTable = {};
|
ui.configTable = {};
|
||||||
|
ui.cpuAvg = {};
|
||||||
|
ui.cpuGraph = {};
|
||||||
|
ui.cpuLast = {};
|
||||||
|
ui.cpuMax = {};
|
||||||
ui.diskTable = {};
|
ui.diskTable = {};
|
||||||
ui.diskUsage = {};
|
ui.diskUsage = {};
|
||||||
ui.eventTable = {};
|
ui.eventTable = {};
|
||||||
|
ui.graphRange = {};
|
||||||
|
ui.ioGraph = {};
|
||||||
|
ui.ioRateAvg = {};
|
||||||
|
ui.ioRateLast = {};
|
||||||
|
ui.ioRateMax = {};
|
||||||
|
ui.ipv4Graph = {};
|
||||||
|
ui.ipv4InAvg = {};
|
||||||
|
ui.ipv4InLast = {};
|
||||||
|
ui.ipv4InMax = {};
|
||||||
|
ui.ipv4OutAvg = {};
|
||||||
|
ui.ipv4OutLast = {};
|
||||||
|
ui.ipv4OutMax = {};
|
||||||
|
ui.ipv4PrivInAvg = {};
|
||||||
|
ui.ipv4PrivInLast = {};
|
||||||
|
ui.ipv4PrivInMax = {};
|
||||||
|
ui.ipv4PrivOutAvg = {};
|
||||||
|
ui.ipv4PrivOutLast = {};
|
||||||
|
ui.ipv4PrivOutMax = {};
|
||||||
|
ui.ipv4Total = {};
|
||||||
|
ui.ipv4TotalIn = {};
|
||||||
|
ui.ipv4TotalOut = {};
|
||||||
|
ui.ipv6Graph = {};
|
||||||
|
ui.ipv6InAvg = {};
|
||||||
|
ui.ipv6InLast = {};
|
||||||
|
ui.ipv6InMax = {};
|
||||||
|
ui.ipv6OutAvg = {};
|
||||||
|
ui.ipv6OutLast = {};
|
||||||
|
ui.ipv6OutMax = {};
|
||||||
|
ui.ipv6PrivInAvg = {};
|
||||||
|
ui.ipv6PrivInLast = {};
|
||||||
|
ui.ipv6PrivInMax = {};
|
||||||
|
ui.ipv6PrivOutAvg = {};
|
||||||
|
ui.ipv6PrivOutLast = {};
|
||||||
|
ui.ipv6PrivOutMax = {};
|
||||||
|
ui.ipv6Total = {};
|
||||||
|
ui.ipv6TotalIn = {};
|
||||||
|
ui.ipv6TotalOut = {};
|
||||||
ui.jobProgress = {};
|
ui.jobProgress = {};
|
||||||
ui.jobProgressRow = {};
|
ui.jobProgressRow = {};
|
||||||
ui.lastBackup = {};
|
ui.lastBackup = {};
|
||||||
@ -110,6 +196,9 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
ui.storageFree = {};
|
ui.storageFree = {};
|
||||||
ui.storageTotal = {};
|
ui.storageTotal = {};
|
||||||
ui.storageUsed = {};
|
ui.storageUsed = {};
|
||||||
|
ui.swapRateAvg = {};
|
||||||
|
ui.swapRateLast = {};
|
||||||
|
ui.swapRateMax = {};
|
||||||
ui.transferMonthly = {};
|
ui.transferMonthly = {};
|
||||||
ui.transferOverage = {};
|
ui.transferOverage = {};
|
||||||
ui.transferUsed = {};
|
ui.transferUsed = {};
|
||||||
@ -120,6 +209,7 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
var state = {};
|
var state = {};
|
||||||
state.diskRefresh = false;
|
state.diskRefresh = false;
|
||||||
state.eventsComplete = 0;
|
state.eventsComplete = 0;
|
||||||
|
state.haveRanges = false;
|
||||||
state.linodeRefresh = false;
|
state.linodeRefresh = false;
|
||||||
state.showExtraEvents = false;
|
state.showExtraEvents = false;
|
||||||
|
|
||||||
@ -143,8 +233,8 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
apiPost("/linode/instances/" + data.params.lid + "/boot", request, callback);
|
apiPost("/linode/instances/" + data.params.lid + "/boot", request, callback);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Convert a byte count into a "friendly" byte string (KB, MB, GB, etc)
|
// Convert an unqualified count into a string with an SI prefix (i.e. bytes to MB/GB/etc)
|
||||||
var byteString = function(count)
|
var countSI = function(count)
|
||||||
{
|
{
|
||||||
var prefix = "KMGTPEZY";
|
var prefix = "KMGTPEZY";
|
||||||
var unit = "";
|
var unit = "";
|
||||||
@ -158,7 +248,7 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return count.toFixed(2) + " " + unit + "B";
|
return count.toFixed(2) + " " + unit;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Generate a config profile table row
|
// Generate a config profile table row
|
||||||
@ -525,6 +615,33 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
if (data.linode.type && !data.plan.id)
|
if (data.linode.type && !data.plan.id)
|
||||||
apiGet("/linode/types/" + data.linode.type, displayPlan, null);
|
apiGet("/linode/types/" + data.linode.type, displayPlan, null);
|
||||||
|
|
||||||
|
// Populate graph range picker
|
||||||
|
if (!state.haveRanges) {
|
||||||
|
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||||
|
var created = new Date(data.linode.created + "Z");
|
||||||
|
var now = new Date();
|
||||||
|
var last30 = document.createElement("option");
|
||||||
|
last30.value = "/" + now.getFullYear() + "/" + (now.getMonth() + 1).toString().padStart(2, "0");
|
||||||
|
last30.innerHTML = "Last 30 Days";
|
||||||
|
ui.graphRange.appendChild(last30);
|
||||||
|
|
||||||
|
while (!(now.getFullYear() == created.getFullYear() && now.getMonth() == created.getMonth())) {
|
||||||
|
if (now.getMonth() == 0) {
|
||||||
|
now.setMonth(11);
|
||||||
|
now.setFullYear(now.getFullYear() - 1);
|
||||||
|
} else {
|
||||||
|
now.setMonth(now.getMonth() - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
var yearMonth = document.createElement("option");
|
||||||
|
yearMonth.value = "/" + now.getFullYear() + "/" + (now.getMonth() + 1).toString().padStart(2, "0");
|
||||||
|
yearMonth.innerHTML = months[now.getMonth()] + " " + now.getFullYear();
|
||||||
|
ui.graphRange.appendChild(yearMonth);
|
||||||
|
}
|
||||||
|
|
||||||
|
state.haveRanges = true;
|
||||||
|
}
|
||||||
|
|
||||||
state.linodeRefresh = false;
|
state.linodeRefresh = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -662,6 +779,159 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
ui.upgrade.style.display = "block";
|
ui.upgrade.style.display = "block";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Show stats graphs
|
||||||
|
var displayStats = function(response)
|
||||||
|
{
|
||||||
|
// Insert dummy points in case of blank data
|
||||||
|
if (!response.data.cpu.length)
|
||||||
|
response.data.cpu = [[0,0]];
|
||||||
|
if (!response.data.io.io.length)
|
||||||
|
response.data.io.io = [[0,0]];
|
||||||
|
if (!response.data.io.swap.length)
|
||||||
|
response.data.io.swap = [[0,0]];
|
||||||
|
if (!response.data.netv4.private_out.length)
|
||||||
|
response.data.netv4.private_out = [[0,0]];
|
||||||
|
if (!response.data.netv4.private_in.length)
|
||||||
|
response.data.netv4.private_in = [[0,0]];
|
||||||
|
if (!response.data.netv4.out.length)
|
||||||
|
response.data.netv4.out = [[0,0]];
|
||||||
|
if (!response.data.netv4.in.length)
|
||||||
|
response.data.netv4.in = [[0,0]];
|
||||||
|
if (!response.data.netv6.private_out.length)
|
||||||
|
response.data.netv6.private_out = [[0,0]];
|
||||||
|
if (!response.data.netv6.private_in.length)
|
||||||
|
response.data.netv6.private_in = [[0,0]];
|
||||||
|
if (!response.data.netv6.out.length)
|
||||||
|
response.data.netv6.out = [[0,0]];
|
||||||
|
if (!response.data.netv6.in.length)
|
||||||
|
response.data.netv6.in = [[0,0]];
|
||||||
|
|
||||||
|
data.stats.cpu = [{
|
||||||
|
"color": "#03C",
|
||||||
|
"fill": false,
|
||||||
|
"points": response.data.cpu
|
||||||
|
}];
|
||||||
|
data.stats.io = [
|
||||||
|
{
|
||||||
|
"color": "#FFD04B",
|
||||||
|
"fill": true,
|
||||||
|
"points": response.data.io.io
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "#FA373E",
|
||||||
|
"fill": false,
|
||||||
|
"points": response.data.io.swap
|
||||||
|
}
|
||||||
|
];
|
||||||
|
data.stats.netv4 = [
|
||||||
|
{
|
||||||
|
"color": "#FF9",
|
||||||
|
"fill": true,
|
||||||
|
"points": response.data.netv4.private_out
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "#C09",
|
||||||
|
"fill": false,
|
||||||
|
"points": response.data.netv4.private_in
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "#32CD32",
|
||||||
|
"fill": true,
|
||||||
|
"points": response.data.netv4.out
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "#03C",
|
||||||
|
"fill": false,
|
||||||
|
"points": response.data.netv4.in
|
||||||
|
}
|
||||||
|
];
|
||||||
|
data.stats.netv6 = [
|
||||||
|
{
|
||||||
|
"color": "#FF9",
|
||||||
|
"fill": true,
|
||||||
|
"points": response.data.netv6.private_out
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "#C09",
|
||||||
|
"fill": false,
|
||||||
|
"points": response.data.netv6.private_in
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "#32CD32",
|
||||||
|
"fill": true,
|
||||||
|
"points": response.data.netv6.out
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"color": "#03C",
|
||||||
|
"fill": false,
|
||||||
|
"points": response.data.netv6.in
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Draw graphs
|
||||||
|
drawSeries(data.stats.cpu, ui.cpuGraph);
|
||||||
|
drawSeries(data.stats.io, ui.ioGraph);
|
||||||
|
drawSeries(data.stats.netv4, ui.ipv4Graph);
|
||||||
|
drawSeries(data.stats.netv6, ui.ipv6Graph);
|
||||||
|
|
||||||
|
// Compute traffic totals
|
||||||
|
var ipv4Out = data.stats.netv4[0].avg * (data.stats.netv4[0].points[data.stats.netv4[0].points.length-1][0] - data.stats.netv4[0].points[0][0]) / 1000;
|
||||||
|
ipv4Out += data.stats.netv4[2].avg * (data.stats.netv4[2].points[data.stats.netv4[2].points.length-1][0] - data.stats.netv4[2].points[0][0]) / 1000;
|
||||||
|
ipv4Out /= 8;
|
||||||
|
var ipv4In = data.stats.netv4[1].avg * (data.stats.netv4[1].points[data.stats.netv4[1].points.length-1][0] - data.stats.netv4[1].points[0][0]) / 1000;
|
||||||
|
ipv4In += data.stats.netv4[3].avg * (data.stats.netv4[3].points[data.stats.netv4[3].points.length-1][0] - data.stats.netv4[3].points[0][0]) / 1000;
|
||||||
|
ipv4In /= 8;
|
||||||
|
var ipv6Out = data.stats.netv6[0].avg * (data.stats.netv6[0].points[data.stats.netv6[0].points.length-1][0] - data.stats.netv6[0].points[0][0]) / 1000;
|
||||||
|
ipv6Out += data.stats.netv6[2].avg * (data.stats.netv6[2].points[data.stats.netv6[2].points.length-1][0] - data.stats.netv6[2].points[0][0]) / 1000;
|
||||||
|
ipv6Out /= 8;
|
||||||
|
var ipv6In = data.stats.netv6[1].avg * (data.stats.netv6[1].points[data.stats.netv6[1].points.length-1][0] - data.stats.netv6[1].points[0][0]) / 1000;
|
||||||
|
ipv6In += data.stats.netv6[3].avg * (data.stats.netv6[3].points[data.stats.netv6[3].points.length-1][0] - data.stats.netv6[3].points[0][0]) / 1000;
|
||||||
|
ipv6In /= 8;
|
||||||
|
|
||||||
|
// Update tables
|
||||||
|
ui.cpuMax.innerHTML = data.stats.cpu[0].max + "%";
|
||||||
|
ui.cpuAvg.innerHTML = data.stats.cpu[0].avg.toFixed(2) + "%";
|
||||||
|
ui.cpuLast.innerHTML = data.stats.cpu[0].points[data.stats.cpu[0].points.length - 1][1] + "%";
|
||||||
|
ui.ioRateMax.innerHTML = data.stats.io[0].max;
|
||||||
|
ui.ioRateAvg.innerHTML = data.stats.io[0].avg.toFixed(2);
|
||||||
|
ui.ioRateLast.innerHTML = data.stats.io[0].points[data.stats.io[0].points.length - 1][1];
|
||||||
|
ui.swapRateMax.innerHTML = data.stats.io[1].max;
|
||||||
|
ui.swapRateAvg.innerHTML = data.stats.io[1].avg.toFixed(2);
|
||||||
|
ui.swapRateLast.innerHTML = data.stats.io[1].points[data.stats.io[1].points.length - 1][1];
|
||||||
|
ui.ipv4PrivOutMax.innerHTML = countSI(data.stats.netv4[0].max) + "b/s";
|
||||||
|
ui.ipv4PrivOutAvg.innerHTML = countSI(data.stats.netv4[0].avg) + "b/s";
|
||||||
|
ui.ipv4PrivOutLast.innerHTML = countSI(data.stats.netv4[0].points[data.stats.netv4[0].points.length - 1][1]) + "b/s";
|
||||||
|
ui.ipv4PrivInMax.innerHTML = countSI(data.stats.netv4[1].max) + "b/s";
|
||||||
|
ui.ipv4PrivInAvg.innerHTML = countSI(data.stats.netv4[1].avg) + "b/s";
|
||||||
|
ui.ipv4PrivInLast.innerHTML = countSI(data.stats.netv4[1].points[data.stats.netv4[1].points.length - 1][1]) + "b/s";
|
||||||
|
ui.ipv4OutMax.innerHTML = countSI(data.stats.netv4[2].max) + "b/s";
|
||||||
|
ui.ipv4OutAvg.innerHTML = countSI(data.stats.netv4[2].avg) + "b/s";
|
||||||
|
ui.ipv4OutLast.innerHTML = countSI(data.stats.netv4[2].points[data.stats.netv4[2].points.length - 1][1]) + "b/s";
|
||||||
|
ui.ipv4InMax.innerHTML = countSI(data.stats.netv4[3].max) + "b/s";
|
||||||
|
ui.ipv4InAvg.innerHTML = countSI(data.stats.netv4[3].avg) + "b/s";
|
||||||
|
ui.ipv4InLast.innerHTML = countSI(data.stats.netv4[3].points[data.stats.netv4[3].points.length - 1][1]) + "b/s";
|
||||||
|
ui.ipv4TotalIn.innerHTML = countSI(ipv4In) + "B";
|
||||||
|
ui.ipv4TotalOut.innerHTML = countSI(ipv4Out) + "B";
|
||||||
|
ui.ipv4Total.innerHTML = countSI(ipv4In + ipv4Out) + "B";
|
||||||
|
ui.ipv6PrivOutMax.innerHTML = countSI(data.stats.netv6[0].max) + "b/s";
|
||||||
|
ui.ipv6PrivOutAvg.innerHTML = countSI(data.stats.netv6[0].avg) + "b/s";
|
||||||
|
ui.ipv6PrivOutLast.innerHTML = countSI(data.stats.netv6[0].points[data.stats.netv6[0].points.length - 1][1]) + "b/s";
|
||||||
|
ui.ipv6PrivInMax.innerHTML = countSI(data.stats.netv6[1].max) + "b/s";
|
||||||
|
ui.ipv6PrivInAvg.innerHTML = countSI(data.stats.netv6[1].avg) + "b/s";
|
||||||
|
ui.ipv6PrivInLast.innerHTML = countSI(data.stats.netv6[1].points[data.stats.netv6[1].points.length - 1][1]) + "b/s";
|
||||||
|
ui.ipv6OutMax.innerHTML = countSI(data.stats.netv6[2].max) + "b/s";
|
||||||
|
ui.ipv6OutAvg.innerHTML = countSI(data.stats.netv6[2].avg) + "b/s";
|
||||||
|
ui.ipv6OutLast.innerHTML = countSI(data.stats.netv6[2].points[data.stats.netv6[2].points.length - 1][1]) + "b/s";
|
||||||
|
ui.ipv6InMax.innerHTML = countSI(data.stats.netv6[3].max) + "b/s";
|
||||||
|
ui.ipv6InAvg.innerHTML = countSI(data.stats.netv6[3].avg) + "b/s";
|
||||||
|
ui.ipv6InLast.innerHTML = countSI(data.stats.netv6[3].points[data.stats.netv6[3].points.length - 1][1]) + "b/s";
|
||||||
|
ui.ipv6TotalIn.innerHTML = countSI(ipv6In) + "B";
|
||||||
|
ui.ipv6TotalOut.innerHTML = countSI(ipv6Out) + "B";
|
||||||
|
ui.ipv6Total.innerHTML = countSI(ipv6In + ipv6Out) + "B";
|
||||||
|
|
||||||
|
ui.graphRange.disabled = false;
|
||||||
|
};
|
||||||
|
|
||||||
// Show storage totals
|
// Show storage totals
|
||||||
var displayStorage = function()
|
var displayStorage = function()
|
||||||
{
|
{
|
||||||
@ -686,7 +956,7 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
|
|
||||||
// Display network transfer info
|
// Display network transfer info
|
||||||
ui.transferMonthly.innerHTML = data.linodeTransfer.quota + " GB";
|
ui.transferMonthly.innerHTML = data.linodeTransfer.quota + " GB";
|
||||||
ui.transferUsed.innerHTML = byteString(data.linodeTransfer.used);
|
ui.transferUsed.innerHTML = countSI(data.linodeTransfer.used) + "B";
|
||||||
ui.transferOverage.innerHTML = data.linodeTransfer.billable + " GB";
|
ui.transferOverage.innerHTML = data.linodeTransfer.billable + " GB";
|
||||||
ui.netUsage.value = ((data.linodeTransfer.used / 1024 / 1024 / 1024) / data.linodeTransfer.quota * 100).toFixed(0);
|
ui.netUsage.value = ((data.linodeTransfer.used / 1024 / 1024 / 1024) / data.linodeTransfer.quota * 100).toFixed(0);
|
||||||
ui.netUsage.innerHTML = ui.netUsage.value + "%";
|
ui.netUsage.innerHTML = ui.netUsage.value + "%";
|
||||||
@ -786,43 +1056,25 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
anchors[i].href = anchors[i].href.replace("lid=0", "lid=" + data.params.lid);
|
anchors[i].href = anchors[i].href.replace("lid=0", "lid=" + data.params.lid);
|
||||||
|
|
||||||
// Get element references
|
// Get element references
|
||||||
ui.backups = document.getElementById(elements.backups);
|
for (var i in ui)
|
||||||
ui.boot = document.getElementById(elements.boot);
|
ui[i] = document.getElementById(elements[i]);
|
||||||
ui.configTable = document.getElementById(elements.configTable);
|
|
||||||
ui.diskTable = document.getElementById(elements.diskTable);
|
|
||||||
ui.diskUsage = document.getElementById(elements.diskUsage);
|
|
||||||
ui.eventTable = document.getElementById(elements.eventTable);
|
|
||||||
ui.jobProgress = document.getElementById(elements.jobProgress);
|
|
||||||
ui.jobProgressRow = document.getElementById(elements.jobProgressRow);
|
|
||||||
ui.lastBackup = document.getElementById(elements.lastBackup);
|
|
||||||
ui.lastBackupTime = document.getElementById(elements.lastBackupTime);
|
|
||||||
ui.linodeLabel = document.getElementById(elements.linodeLabel);
|
|
||||||
ui.linodeTag = document.getElementById(elements.linodeTag);
|
|
||||||
ui.linodeTagLink = document.getElementById(elements.linodeTagLink);
|
|
||||||
ui.loadingConfigs = document.getElementById(elements.loadingConfigs);
|
|
||||||
ui.loadingDisks = document.getElementById(elements.loadingDisks);
|
|
||||||
ui.loadingJobs = document.getElementById(elements.loadingJobs);
|
|
||||||
ui.loadingVolumes = document.getElementById(elements.loadingVolumes);
|
|
||||||
ui.moreJobs = document.getElementById(elements.moreJobs);
|
|
||||||
ui.netUsage = document.getElementById(elements.netUsage);
|
|
||||||
ui.notifications = document.getElementById(elements.notifications);
|
|
||||||
ui.reboot = document.getElementById(elements.reboot);
|
|
||||||
ui.serverStatus = document.getElementById(elements.serverStatus);
|
|
||||||
ui.shutDown = document.getElementById(elements.shutDown);
|
|
||||||
ui.storageFree = document.getElementById(elements.storageFree);
|
|
||||||
ui.storageTotal = document.getElementById(elements.storageTotal);
|
|
||||||
ui.storageUsed = document.getElementById(elements.storageUsed);
|
|
||||||
ui.transferMonthly = document.getElementById(elements.transferMonthly);
|
|
||||||
ui.transferOverage = document.getElementById(elements.transferOverage);
|
|
||||||
ui.transferUsed = document.getElementById(elements.transferUsed);
|
|
||||||
ui.upgrade = document.getElementById(elements.upgrade);
|
|
||||||
ui.volumeTable = document.getElementById(elements.volumeTable);
|
|
||||||
|
|
||||||
// Attach button handlers
|
// Attach button handlers
|
||||||
ui.boot.addEventListener("click", bootLinode);
|
ui.boot.addEventListener("click", bootLinode);
|
||||||
ui.moreJobs.addEventListener("click", toggleEvents);
|
ui.moreJobs.addEventListener("click", toggleEvents);
|
||||||
ui.reboot.addEventListener("click", rebootLinode);
|
ui.reboot.addEventListener("click", rebootLinode);
|
||||||
ui.shutDown.addEventListener("click", shutDownLinode);
|
ui.shutDown.addEventListener("click", shutDownLinode);
|
||||||
|
ui.graphRange.addEventListener("input", updateGraphs);
|
||||||
|
|
||||||
|
// Set graph resolutions
|
||||||
|
ui.cpuGraph.height = ui.cpuGraph.clientHeight;
|
||||||
|
ui.cpuGraph.width = ui.cpuGraph.clientWidth;
|
||||||
|
ui.ioGraph.height = ui.ioGraph.clientHeight;
|
||||||
|
ui.ioGraph.width = ui.ioGraph.clientWidth;
|
||||||
|
ui.ipv4Graph.height = ui.ipv4Graph.clientHeight;
|
||||||
|
ui.ipv4Graph.width = ui.ipv4Graph.clientWidth;
|
||||||
|
ui.ipv6Graph.height = ui.ipv6Graph.clientHeight;
|
||||||
|
ui.ipv6Graph.width = ui.ipv6Graph.clientWidth;
|
||||||
|
|
||||||
// Get data from the API
|
// Get data from the API
|
||||||
apiGet("/linode/instances/" + data.params.lid, displayDetails, null);
|
apiGet("/linode/instances/" + data.params.lid, displayDetails, null);
|
||||||
@ -836,6 +1088,7 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
};
|
};
|
||||||
apiGet("/account/events", displayEvents, filter);
|
apiGet("/account/events", displayEvents, filter);
|
||||||
apiGet("/account/notifications", displayNotifications, null);
|
apiGet("/account/notifications", displayNotifications, null);
|
||||||
|
apiGet("/linode/instances/" + data.params.lid + "/stats", displayStats, null);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Button handler for shutdown button
|
// Button handler for shutdown button
|
||||||
@ -908,6 +1161,16 @@ import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParam
|
|||||||
window.setTimeout(getEvent, settings.refreshRate, event.id);
|
window.setTimeout(getEvent, settings.refreshRate, event.id);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Re-populate graphs with selected range
|
||||||
|
var updateGraphs = function(event)
|
||||||
|
{
|
||||||
|
if (event.currentTarget.disabled)
|
||||||
|
return;
|
||||||
|
|
||||||
|
apiGet("/linode/instances/" + data.params.lid + "/stats" + ui.graphRange.value, displayStats, null);
|
||||||
|
ui.graphRange.disabled = true;
|
||||||
|
};
|
||||||
|
|
||||||
// Attach onload handler
|
// Attach onload handler
|
||||||
window.addEventListener("load", setup);
|
window.addEventListener("load", setup);
|
||||||
})();
|
})();
|
||||||
|
|||||||
@ -109,6 +109,145 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<h3>Graphs</h3>
|
<h3>Graphs</h3>
|
||||||
|
<select disabled id="graph-range">
|
||||||
|
<option selected value="">Last 24 Hours</option>
|
||||||
|
</select>
|
||||||
|
<div class="lmc-graph">
|
||||||
|
<h4>CPU (%)</h4>
|
||||||
|
<canvas id="cpu-graph"></canvas>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Max</td>
|
||||||
|
<td>Avg</td>
|
||||||
|
<td>Last</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><div id="cpu-color" class="lmc-graph-color"></div> CPU %</td>
|
||||||
|
<td id="cpu-max"></td>
|
||||||
|
<td id="cpu-avg"></td>
|
||||||
|
<td id="cpu-last"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h4>Disk I/O (blocks/s)</h4>
|
||||||
|
<canvas id="io-graph"></canvas>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Max</td>
|
||||||
|
<td>Avg</td>
|
||||||
|
<td>Last</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><div id="io-rate-color" class="lmc-graph-color"></div> I/O Rate</td>
|
||||||
|
<td id="io-rate-max"></td>
|
||||||
|
<td id="io-rate-avg"></td>
|
||||||
|
<td id="io-rate-last"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><div id="swap-rate-color" class="lmc-graph-color"></div> Swap Rate</td>
|
||||||
|
<td id="swap-rate-max"></td>
|
||||||
|
<td id="swap-rate-avg"></td>
|
||||||
|
<td id="swap-rate-last"></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h4>Network - IPv4 (bits/s)</h4>
|
||||||
|
<canvas id="ipv4-graph"></canvas>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Max</td>
|
||||||
|
<td>Avg</td>
|
||||||
|
<td>Last</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><div id="ipv4-privout-color" class="lmc-graph-color"></div> Private Out</td>
|
||||||
|
<td id="ipv4-privout-max"></td>
|
||||||
|
<td id="ipv4-privout-avg"></td>
|
||||||
|
<td id="ipv4-privout-last"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><div id="ipv4-privin-color" class="lmc-graph-color"></div> Private In</td>
|
||||||
|
<td id="ipv4-privin-max"></td>
|
||||||
|
<td id="ipv4-privin-avg"></td>
|
||||||
|
<td id="ipv4-privin-last"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><div id="ipv4-out-color" class="lmc-graph-color"></div> Public Out</td>
|
||||||
|
<td id="ipv4-out-max"></td>
|
||||||
|
<td id="ipv4-out-avg"</td>
|
||||||
|
<td id="ipv4-out-last"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><div id="ipv4-in-color" class="lmc-graph-color"></div> Public In</td>
|
||||||
|
<td id="ipv4-in-max"></td>
|
||||||
|
<td id="ipv4-in-avg"></td>
|
||||||
|
<td id="ipv4-in-last"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Total Traffic</td>
|
||||||
|
<td>In: <span id="ipv4-total-in"></span></td>
|
||||||
|
<td>Out: <span id="ipv4-total-out"></span></td>
|
||||||
|
<td>Combined: <span id="ipv4-total"></span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h4>Network - IPv6 (bits/s)</h4>
|
||||||
|
<canvas id="ipv6-graph"></canvas>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>Max</td>
|
||||||
|
<td>Avg</td>
|
||||||
|
<td>Last</td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><div id="ipv6-privout-color" class="lmc-graph-color"></div> Private Out</td>
|
||||||
|
<td id="ipv6-privout-max"></td>
|
||||||
|
<td id="ipv6-privout-avg"></td>
|
||||||
|
<td id="ipv6-privout-last"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><div id="ipv6-privin-color" class="lmc-graph-color"></div> Private In</td>
|
||||||
|
<td id="ipv6-privin-max"></td>
|
||||||
|
<td id="ipv6-privin-avg"></td>
|
||||||
|
<td id="ipv6-privin-last"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><div id="ipv6-out-color" class="lmc-graph-color"></div> Public Out</td>
|
||||||
|
<td id="ipv6-out-max"></td>
|
||||||
|
<td id="ipv6-out-avg"</td>
|
||||||
|
<td id="ipv6-out-last"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><div id="ipv6-in-color" class="lmc-graph-color"></div> Public In</td>
|
||||||
|
<td id="ipv6-in-max"></td>
|
||||||
|
<td id="ipv6-in-avg"></td>
|
||||||
|
<td id="ipv6-in-last"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Total Traffic</td>
|
||||||
|
<td>In: <span id="ipv6-total-in"></span></td>
|
||||||
|
<td>Out: <span id="ipv6-total-out"></span></td>
|
||||||
|
<td>Combined: <span id="ipv6-total"></span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="linode-sidebar">
|
<div id="linode-sidebar">
|
||||||
<div class="sidebar-box">
|
<div class="sidebar-box">
|
||||||
|
|||||||
@ -1,22 +0,0 @@
|
|||||||
/*
|
|
||||||
* This file is part of Linode Manager Classic.
|
|
||||||
*
|
|
||||||
* Linode Manager Classic is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU General Public License as published by
|
|
||||||
* the Free Software Foundation, either version 3 of the License, or
|
|
||||||
* (at your option) any later version.
|
|
||||||
*
|
|
||||||
* Linode Manager Classic is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU General Public License
|
|
||||||
* along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import url('/global.css');
|
|
||||||
|
|
||||||
#graphs {
|
|
||||||
padding: 0px 15px 15px;
|
|
||||||
}
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
/*
|
|
||||||
* This file is part of Linode Manager Classic.
|
|
||||||
*
|
|
||||||
* Linode Manager Classic is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU General Public License as published by
|
|
||||||
* the Free Software Foundation, either version 3 of the License, or
|
|
||||||
* (at your option) any later version.
|
|
||||||
*
|
|
||||||
* Linode Manager Classic is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU General Public License
|
|
||||||
* along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { settings, elements, apiGet, parseParams, setupHeader } from "/global.js";
|
|
||||||
|
|
||||||
(function()
|
|
||||||
{
|
|
||||||
// Element names specific to this page
|
|
||||||
elements.linodeLabel = "linode-label";
|
|
||||||
elements.linodeTag = "linode-tag";
|
|
||||||
elements.linodeTagLink = "linode-tag-link";
|
|
||||||
|
|
||||||
// Data recieved from API calls
|
|
||||||
var data = {};
|
|
||||||
data.linode = {};
|
|
||||||
|
|
||||||
// Static references to UI elements
|
|
||||||
var ui = {};
|
|
||||||
ui.linodeLabel = {};
|
|
||||||
ui.linodeTag = {};
|
|
||||||
ui.linodeTagLink = {};
|
|
||||||
|
|
||||||
// Callback for linode details API call
|
|
||||||
var displayDetails = function(response)
|
|
||||||
{
|
|
||||||
data.linode = response;
|
|
||||||
|
|
||||||
// Set page title and header stuff
|
|
||||||
document.title += " // " + data.linode.label;
|
|
||||||
ui.linodeLabel.innerHTML = data.linode.label;
|
|
||||||
if (data.linode.tags.length == 1) {
|
|
||||||
ui.linodeTagLink.href = "/linodes?tag=" + data.linode.tags[0];
|
|
||||||
ui.linodeTagLink.innerHTML = "(" + data.linode.tags[0] + ")";
|
|
||||||
ui.linodeTag.style.display = "inline";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initial setup
|
|
||||||
var setup = function()
|
|
||||||
{
|
|
||||||
// Parse URL parameters
|
|
||||||
data.params = parseParams();
|
|
||||||
|
|
||||||
// We need a Linode ID, so die if we don't have it
|
|
||||||
if (!data.params.lid) {
|
|
||||||
alert("No Linode ID supplied!");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setupHeader();
|
|
||||||
|
|
||||||
// Update links on page to include proper Linode ID
|
|
||||||
var anchors = document.getElementsByTagName("a");
|
|
||||||
for (var i = 0; i < anchors.length; i++)
|
|
||||||
anchors[i].href = anchors[i].href.replace("lid=0", "lid=" + data.params.lid);
|
|
||||||
|
|
||||||
// Get element references
|
|
||||||
ui.linodeLabel = document.getElementById(elements.linodeLabel);
|
|
||||||
ui.linodeTag = document.getElementById(elements.linodeTag);
|
|
||||||
ui.linodeTagLink = document.getElementById(elements.linodeTagLink);
|
|
||||||
|
|
||||||
// Get data from API
|
|
||||||
apiGet("/linode/instances/" + data.params.lid, displayDetails, null);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Attach onload handler
|
|
||||||
window.addEventListener("load", setup);
|
|
||||||
})();
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
<!--
|
|
||||||
This file is part of Linode Manager Classic.
|
|
||||||
|
|
||||||
Linode Manager Classic is free software: you can redistribute it and/or modify
|
|
||||||
it under the terms of the GNU General Public License as published by
|
|
||||||
the Free Software Foundation, either version 3 of the License, or
|
|
||||||
(at your option) any later version.
|
|
||||||
|
|
||||||
Linode Manager Classic is distributed in the hope that it will be useful,
|
|
||||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
GNU General Public License for more details.
|
|
||||||
|
|
||||||
You should have received a copy of the GNU General Public License
|
|
||||||
along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
|
||||||
-->
|
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<title>LMC - Graphs</title>
|
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="graphs.css" />
|
|
||||||
<script src="graphs.js" type="module"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!--#include virtual="/include/header.html"-->
|
|
||||||
<!--#include virtual="/include/linode_subnav.html"-->
|
|
||||||
<div id="main-content" class="wrapper">
|
|
||||||
<div id="top-links"><a href="/linodes">Linodes</a> » <span id="linode-tag"><a id="linode-tag-link" href=""></a> » </span><a id="linode-label" href="/linodes/dashboard?lid=0"></a> » <span class="top-links-title">Graphs</span></div>
|
|
||||||
<div id="graphs">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user