Compare commits

..

No commits in common. "f1b59439eb5e4e13b85f1688f4edb803dee54216" and "148c9cd0db6b16e9322c6921915d195d0885f6e0" have entirely different histories.

67 changed files with 231 additions and 657 deletions

View File

@ -1,4 +1,4 @@
Full disclosure: I am an employee of Linode/Akamai, however this project is being developed independently in my own free time and is not associated in any way with Linode, LLC or Akamai Technologies, Inc. Only publicly-available documentation and information is being used in the development of this project.
Full disclosure: I am an employee of Linode, however this project is being developed independently in my own free time and is not associated in any way with Linode, LLC. Only publicly-available documentation and information is being used in the development of this project.
# Linode Manager Classic
LMC is a modern recreation of Linode's original manager interface that many people know and love. It is implemented as a client-side browser app using just vanilla HTML5, CSS3, and JavaScript (no 3rd-party libraries or other external dependencies). It uses Linode's OAuth provider for authentication and interfaces with APIv4.
@ -12,14 +12,14 @@ This project is currently a work in progress. The following list provides a high
- [x] OAuth Authentication/Login/Logout
- [x] Gravatar
- [x] Linodes
- [x] Linodes (including the dashboard and all related subpages, but not including graphs)
- [x] Block Storage (Volumes)
- [x] Images
- [x] DNS
- [x] Account Details (excluding PayPal support)
- [x] User Profile Settings
- [x] Graphs
- [ ] PayPal payments
- [ ] Graphs
- [ ] StackScripts
- [ ] NodeBalancers
- [ ] Longview
@ -34,4 +34,4 @@ Before reporting an issue, please search the issue tracker to see if the issue h
The best way to contribute is by opening issues on the issue tracker. For simple fixes or adjustments I might accept a PR, but for the time being I would prefer to maintain this project as a solo effort. I may change my mind in the future.
## Self-hosting
In order to self-host this application, you must first create your own OAuth client using your existing Linode account. When creating the OAuth client, use the URL where you will be hosting the app as the Callback URL. Then you can clone this repository into your webroot and copy the [clientID.js.example](clientID.js.example) file to `clientID.js` and fill in the empty string with your Client ID. You must ensure that Server Side Includes (SSI) is enabled in your web server. Optionally, you can configure your web server to use the [404.html](404.html) file as a custom error document.
In order to self-host this application, you must first create your own OAuth client using your existing Linode account (instructions for doing this in Linode's new manager can be found [here](https://github.com/linode/manager/blob/develop/CREATE_CLIENT.md)). When creating the OAuth client, use the URL where you will be hosting the app as the Callback URL. Then you can clone this repository into your webroot and copy the `clientID.js.example` file to `clientID.js` and fill in the empty string with your Client ID. You must ensure that Server Side Includes (SSI) is enabled in your web server. Optionally, you can configure your web server to use the `404.html` file as a custom error document.

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#backups-enable-all {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
h2 {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <a href="/account/settings">Settings</a> » <span class="top-links-title">Backup Enrollment</span></div>
<div id="backups-enable-all">
<h2>Backup Enrollment</h2>
<p>This will enable the Linode Backup Service for <strong><span class="linode-count"></span></strong> Linodes, for a total additional cost of <strong>$<span id="cost"></span></strong>/month.</p>

View File

@ -26,7 +26,7 @@
}
#billing-history {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
#current {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <span class="top-links-title">Billing History</span></div>
<div id="billing-history">
<table class="lmc-table">
<thead>

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#cancel {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
#cancel-note {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <span class="top-links-title">Cancel Account</span></div>
<div id="cancel">
<table class="lmc-table">
<thead>

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#contact {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
tbody tr td:first-of-type {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <span class="top-links-title">Contact Info</span></div>
<div id="contact">
<table class="lmc-table">
<thead>

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#creditcard {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
tbody:not(.lmc-tbody-head) tr td:first-of-type {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <span class="top-links-title">Update Credit Card</span></div>
<div id="creditcard">
<table class="lmc-table">
<thead>

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <a href="/account/billing_history">Billing History</a> » <span class="top-links-title">Invoice</span></div>
<div id="invoice">
<table id="invoice-table" class="lmc-table">
<thead>

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#invoice {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
#invoice-table td:nth-of-type(4) {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <span class="top-links-title">Make a Payment</span></div>
<div id="make-a-payment">
<table class="lmc-table">
<thead>

View File

@ -34,7 +34,7 @@ input[type="number"] {
}
#make-a-payment {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
tbody:not(.lmc-tbody-head) tr td:first-of-type {

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#app {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
tbody:not(.lmc-tbody-head) tr td:first-of-type {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <a href="/account/oauth_apps">OAuth Apps</a> » <span class="top-links-title">Add/Edit OAuth App</span></div>
<div id="app">
<table class="lmc-table">
<thead>

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <span class="top-links-title">OAuth Apps</span></div>
<div id="oauth_apps">
<table class="lmc-table">
<thead>

View File

@ -24,7 +24,7 @@
}
#oauth_apps {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
td:nth-of-type(6) {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <a href="/account/billing_history">Billing History</a> » <span class="top-links-title">Payment</span></div>
<div id="paymentreceipt">
<table class="lmc-table">
<thead>

View File

@ -22,7 +22,7 @@
}
#paymentreceipt {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
#paymentreceipt p {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <a href="/account/billing_history">Billing History</a> » <span class="top-links-title">Yearly Payments</span></div>
<div id="paymentreceiptyear">
<table class="lmc-table">
<thead>

View File

@ -26,7 +26,7 @@
}
#paymentreceiptyear {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
#paymentreceiptyear p {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <span class="top-links-title">Settings</span></div>
<div id="settings">
<p id="saved">Settings saved!</p>
<table class="lmc-table">

View File

@ -26,7 +26,7 @@
}
#settings {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
tbody:not(.lmc-tbody-head) tr td:first-of-type {

View File

@ -77,24 +77,6 @@ header {
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 {
background-color: #CECECE;
width: 100%;

View File

@ -52,19 +52,7 @@ var regionNames = {
"ap-southeast": "Sydney, NSW, AU",
"philadelphia": "Philadelphia, PA, USA",
"absecon": "Absecon, NJ, USA",
"us-iad": "Washington DC, USA",
"us-ord": "Chicago, IL, USA",
"fr-par": "Paris, FR",
"in-maa": "Chennai, IN",
"us-sea": "Seattle, WA, USA",
"br-gru": "San Paulo, BR",
"nl-ams": "Amsterdam, NL",
"se-sto": "Stockholm, SE",
"jp-osa": "Osaka, JP",
"it-mil": "Milan, IT",
"id-cgk": "Jakarta, ID",
"us-lax": "Los Angeles, CA, USA",
"us-mia": "Miami, FL, USA"
"us-iad": "Washington DC, USA"
};
// Human-readable event titles
@ -464,63 +452,6 @@ function displayUser(response)
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
function md5(str, binary)
{
@ -862,4 +793,4 @@ function translateKernel(slug, element)
apiGet("/linode/kernels/" + slug, callback, null);
}
export { settings, elements, regionNames, apiDelete, apiGet, apiPost, apiPut, drawSeries, md5, migrateETA, oauthPost, oauthScopes, objPut, parseParams, setupHeader, eventTitles, timeString, translateKernel };
export { settings, elements, regionNames, apiDelete, apiGet, apiPost, apiPut, md5, migrateETA, oauthPost, oauthScopes, objPut, parseParams, setupHeader, eventTitles, timeString, translateKernel };

View File

@ -6,6 +6,7 @@
<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/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/settings?lid=0">Settings</a>
</nav>

View File

@ -57,7 +57,7 @@ h3 {
margin: 10px;
padding: 10px;
text-align: center;
width: 145px;
width: 135px;
}
.instance-type h3 {

View File

@ -49,7 +49,7 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
</div>
<div class="instance-category">
<h3>High Memory Instances</h3>
<p>High Memory instances favor RAM over other resources, and can be good for memory hungry use cases like caching and in-memory databases. All High Memory plans use dedicated CPU cores.</p>
<p>High Memory instances favor RAM over other resources, and can be good for memory hungry use cases like caching and in-memory databases.</p>
<div id="highmem"></div>
</div>
<div class="instance-category">
@ -57,11 +57,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<p>Linodes with dedicated GPUs accelerate highly specialized applications such as machine learning, AI, and video transcoding.</p>
<div id="gpu"></div>
</div>
<div class="instance-category">
<h3>Premium Instances</h3>
<p>Premium CPU instances guarantee a minimum processor generation of AMD EPYC™ Milan or newer to ensure consistent high performance for more demanding workloads.</p>
<div id="premium"></div>
</div>
</div>
<div id="location">
<h2>Location</h2>

View File

@ -25,18 +25,10 @@
margin-top: 5px;
}
canvas {
height: 250px;
}
#config-table tr:last-of-type {
border-bottom: 1px solid #E8E8E8;
}
#cpu-color {
background-color: #03C;
}
.disk-icon {
height: 24px;
width: 26px;
@ -50,51 +42,12 @@ canvas {
display: none;
}
#graph-range {
font-size: 18px;
}
h3 {
border-bottom: 1px solid #E8E8E8;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: lighter;
}
#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;
margin-bottom: 50px;
}
.job-failed {
@ -249,10 +202,6 @@ h3 {
float: right;
}
#swap-rate-color {
background-color: #FA373E;
}
#upgrade {
background-color: #F0F0F0;
display: none;

View File

@ -15,7 +15,7 @@
* along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
*/
import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles, parseParams, setupHeader, timeString, translateKernel } from "/global.js";
import { settings, elements, apiDelete, apiGet, apiPost, eventTitles, parseParams, setupHeader, timeString, translateKernel } from "/global.js";
(function()
{
@ -26,10 +26,6 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
elements.configRadioName = "config-radio";
elements.configRemovePrefix = "config-remove-";
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.diskIconImg = "/img/disk.gif";
elements.diskRemovePrefix = "disk-remove-";
@ -38,44 +34,7 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
elements.eventRowPrefix = "event-row-";
elements.eventTable = "event-table";
elements.extraEvent = "extra-event";
elements.graphRange = "graph-range";
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.jobInfo = "job-info";
elements.jobNotice = "job-notice";
@ -105,9 +64,6 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
elements.storageFree = "storage-free";
elements.storageTotal = "storage-total";
elements.storageUsed = "storage-used";
elements.swapRateAvg = "swap-rate-avg";
elements.swapRateLast = "swap-rate-last";
elements.swapRateMax = "swap-rate-max";
elements.transferMonthly = "transfer-monthly";
elements.transferOverage = "transfer-overage";
elements.transferUsed = "transfer-used";
@ -124,7 +80,6 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
data.linodeTransfer = {};
data.notifications = [];
data.plan = {};
data.stats = {};
data.volumes = [];
// Static references to UI elements
@ -132,50 +87,9 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
ui.backups = {};
ui.boot = {};
ui.configTable = {};
ui.cpuAvg = {};
ui.cpuGraph = {};
ui.cpuLast = {};
ui.cpuMax = {};
ui.diskTable = {};
ui.diskUsage = {};
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.jobProgressRow = {};
ui.lastBackup = {};
@ -196,9 +110,6 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
ui.storageFree = {};
ui.storageTotal = {};
ui.storageUsed = {};
ui.swapRateAvg = {};
ui.swapRateLast = {};
ui.swapRateMax = {};
ui.transferMonthly = {};
ui.transferOverage = {};
ui.transferUsed = {};
@ -209,7 +120,6 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
var state = {};
state.diskRefresh = false;
state.eventsComplete = 0;
state.haveRanges = false;
state.linodeRefresh = false;
state.showExtraEvents = false;
@ -233,8 +143,8 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
apiPost("/linode/instances/" + data.params.lid + "/boot", request, callback);
};
// Convert an unqualified count into a string with an SI prefix (i.e. bytes to MB/GB/etc)
var countSI = function(count)
// Convert a byte count into a "friendly" byte string (KB, MB, GB, etc)
var byteString = function(count)
{
var prefix = "KMGTPEZY";
var unit = "";
@ -248,7 +158,7 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
}
}
return count.toFixed(2) + " " + unit;
return count.toFixed(2) + " " + unit + "B";
};
// Generate a config profile table row
@ -615,33 +525,6 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
if (data.linode.type && !data.plan.id)
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;
};
@ -779,159 +662,6 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
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
var displayStorage = function()
{
@ -956,7 +686,7 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
// Display network transfer info
ui.transferMonthly.innerHTML = data.linodeTransfer.quota + " GB";
ui.transferUsed.innerHTML = countSI(data.linodeTransfer.used) + "B";
ui.transferUsed.innerHTML = byteString(data.linodeTransfer.used);
ui.transferOverage.innerHTML = data.linodeTransfer.billable + " GB";
ui.netUsage.value = ((data.linodeTransfer.used / 1024 / 1024 / 1024) / data.linodeTransfer.quota * 100).toFixed(0);
ui.netUsage.innerHTML = ui.netUsage.value + "%";
@ -1056,25 +786,43 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
anchors[i].href = anchors[i].href.replace("lid=0", "lid=" + data.params.lid);
// Get element references
for (var i in ui)
ui[i] = document.getElementById(elements[i]);
ui.backups = document.getElementById(elements.backups);
ui.boot = document.getElementById(elements.boot);
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
ui.boot.addEventListener("click", bootLinode);
ui.moreJobs.addEventListener("click", toggleEvents);
ui.reboot.addEventListener("click", rebootLinode);
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
apiGet("/linode/instances/" + data.params.lid, displayDetails, null);
@ -1088,7 +836,6 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
};
apiGet("/account/events", displayEvents, filter);
apiGet("/account/notifications", displayNotifications, null);
apiGet("/linode/instances/" + data.params.lid + "/stats", displayStats, null);
};
// Button handler for shutdown button
@ -1161,16 +908,6 @@ import { settings, elements, apiDelete, apiGet, apiPost, drawSeries, eventTitles
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
window.addEventListener("load", setup);
})();

View File

@ -109,145 +109,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
</tbody>
</table>
<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 id="linode-sidebar">
<div class="sidebar-box">

22
linodes/graphs/graphs.css Normal file
View File

@ -0,0 +1,22 @@
/*
* 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;
}

82
linodes/graphs/graphs.js Normal file
View File

@ -0,0 +1,82 @@
/*
* 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);
})();

View File

@ -0,0 +1,35 @@
<!--
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>

View File

@ -44,6 +44,24 @@ import { settings, elements, apiGet, parseParams, setupHeader } from "/global.js
data.linode = {};
data.netInfo = {};
// LISH uses different DC names than the API uses, so we need to translate them
data.lishDCs = {
"us-central": "dallas",
"us-west": "fremont",
"us-southeast": "atlanta",
"us-east": "newark",
"us-east-1b": "cjj2",
"eu-west": "london",
"ap-south": "singapore",
"eu-central": "frankfurt",
"ap-northeast": "shg1",
"ap-northeast-1a": "shg1",
"ca-central": "tor1",
"ap-west": "mum1",
"ap-southeast": "syd1",
"philadelphia": "phl1"
};
// Static references to UI elements
var ui = {};
ui.ipFailover = {};
@ -95,8 +113,8 @@ import { settings, elements, apiGet, parseParams, setupHeader } from "/global.js
apiGet("/regions/" + data.linode.region, displayResolvers, null);
// Update the LISH link
ui.lishLink.href = ui.lishLink.href.replace("lish-", "lish-" + data.linode.region);
ui.lishLink.innerHTML = ui.lishLink.innerHTML.replace("lish-", "lish-" + data.linode.region);
ui.lishLink.href = ui.lishLink.href.replace("lish-", "lish-" + data.lishDCs[data.linode.region]);
ui.lishLink.innerHTML = ui.lishLink.innerHTML.replace("lish-", "lish-" + data.lishDCs[data.linode.region]);
ui.lishLink.innerHTML += " " + data.linode.label;
};

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#add {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
.lmc-table>tbody:not(.lmc-tbody-head)>tr>td:first-of-type {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/profile_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/profile">My Profile</a> » <a href="/profile/api">API Keys</a> » <span class="top-links-title">Add</span></div>
<div id="add">
<table class="lmc-table">
<thead>

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#api {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
.app-img {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/profile_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/profile">My Profile</a> » <span class="top-links-title">API Keys</span></div>
<div id="api">
<table class="lmc-table">
<thead>

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#auth {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
tbody:not(.lmc-tbody-head) tr td:first-of-type {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/profile_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/profile">My Profile</a> » <span class="top-links-title">Password & Authentication</span></div>
<div id="auth">
<table class="lmc-table">
<thead>

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/profile_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/profile">My Profile</a> » <span class="top-links-title">Lish Settings</span></div>
<div id="lish">
<p id="settings-saved">Settings saved.</p>
<table class="lmc-table">

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#lish {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
#keys {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/profile_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/profile">My Profile</a> » <span class="top-links-title">Referrals</span></div>
<div id="referrals">
<table class="lmc-table">
<thead>

View File

@ -22,7 +22,7 @@
}
#referrals {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
tbody:not(.lmc-tbody-head) tr td:first-of-type {

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#add {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
tbody:not(.lmc-tbody-head) tr td:first-of-type {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/profile_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/profile">My Profile</a> » <a href="/profile/ssh">SSH Keys</a> » <span class="top-links-title">Add</span></div>
<div id="add">
<table class="lmc-table">
<thead>

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/profile_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/profile">My Profile</a> » <span class="top-links-title">SSH Keys</span></div>
<div id="ssh">
<table class="lmc-table">
<thead>

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/profile_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/profile">My Profile</a> » <a href="/profile/ssh">SSH Keys</a> » <span class="top-links-title">Remove</span></div>
<div id="remove">
<p>Are you sure you want to delete the key <strong id="label"></strong>?</p>
<button disabled id="remove-button" type="button">Yes, delete this sucker</button>

View File

@ -18,5 +18,5 @@
@import url('/global.css');
#remove {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}

View File

@ -23,7 +23,7 @@
}
#ssh {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
td:nth-of-type(4) {

View File

@ -48,5 +48,5 @@
}
#twofactor {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#add {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
tbody:not(.lmc-tbody-head) tr td:first-of-type {

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <a href="/user">Users</a> » <span class="top-links-title">Add</span></div>
<div id="add">
<table class="lmc-table">
<thead>

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#edit {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
tbody:not(.lmc-tbody-head) tr td:first-of-type {

View File

@ -25,7 +25,6 @@ import { settings, elements, apiGet, apiPut, md5, parseParams, setupHeader } fro
elements.restrictedNo = "restricted-no";
elements.restrictedYes = "restricted-yes";
elements.saveButton = "save-button";
elements.topUserLabel = "top-user-label";
elements.user = "user";
elements.userLabel = "user-label";
@ -39,7 +38,6 @@ import { settings, elements, apiGet, apiPut, md5, parseParams, setupHeader } fro
ui.restrictedNo = {};
ui.restrictedYes = {};
ui.saveButton = {};
ui.topUserLabel = {};
ui.user = {};
ui.userLabel = {};
@ -100,12 +98,10 @@ import { settings, elements, apiGet, apiPut, md5, parseParams, setupHeader } fro
ui.restrictedNo = document.getElementById(elements.restrictedNo);
ui.restrictedYes = document.getElementById(elements.restrictedYes);
ui.saveButton = document.getElementById(elements.saveButton);
ui.topUserLabel = document.getElementById(elements.topUserLabel);
ui.user = document.getElementById(elements.user);
ui.userLabel = document.getElementById(elements.userLabel);
// Populate username where we need it
ui.topUserLabel.innerHTML = data.params.user;
ui.userLabel.innerHTML = data.params.user;
ui.pwReset.href += data.params.user;
document.title += " - " + data.params.user;

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <a href="/user">Users</a> » <span id="top-user-label" class="top-links-title"></span></div>
<div id="edit">
<table class="lmc-table">
<thead>

View File

@ -18,7 +18,7 @@
@import url('/global.css');
#grants {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}
h2 {

View File

@ -40,7 +40,6 @@ import { settings, elements, apiGet, apiPut, parseParams, setupHeader } from "/g
elements.grantTables.stackscript = "ss-grants";
elements.grantTables.volume = "volume-grants";
elements.modifyLV = "modify-lv";
elements.topUserLink = "top-user-link";
elements.updateButton = "update-button";
// Data received from API calls
@ -67,7 +66,6 @@ import { settings, elements, apiGet, apiPut, parseParams, setupHeader } from "/g
ui.grantTables.stackscript = {};
ui.grantTables.volume = {};
ui.modifyLV = {};
ui.topUserLink = {};
ui.updateButton = {};
// Creates a row for a grant table
@ -256,13 +254,10 @@ import { settings, elements, apiGet, apiPut, parseParams, setupHeader } from "/g
for (var i in ui.grantTables)
ui.grantTables[i] = document.getElementById(elements.grantTables[i]);
ui.modifyLV = document.getElementById(elements.modifyLV);
ui.topUserLink = document.getElementById(elements.topUserLink);
ui.updateButton = document.getElementById(elements.updateButton);
// Populate username where we need it
document.title += " - " + data.params.user;
ui.topUserLink.href = "/user/edit?user=" + data.params.user;
ui.topUserLink.innerHTML = data.params.user;
// Attach event handlers
ui.updateButton.addEventListener("click", handleUpdate);

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <a href="/user">Users</a> » <a id="top-user-link"></a> » <span class="top-links-title">Grants</span></div>
<div id="grants">
<h2>Global Grants</h2>
<input id="create-linode" type="checkbox" /> <label for="create-linode">Can add Linodes to this account ($)</label><br />

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <span class="top-links-title">Users</span></div>
<div id="user">
<table class="lmc-table">
<thead>

View File

@ -27,7 +27,6 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<!--#include virtual="/include/header.html"-->
<!--#include virtual="/include/account_subnav.html"-->
<div id="main-content" class="wrapper">
<div id="top-links"><a href="/account">Account</a> » <a href="/user">Users</a> » <a id="top-user-link" href=""></a> » <span class="top-links-title">Remove</span></div>
<div id="remove">
<p>Are you sure you want to delete the user '<span id="user-label"></span>'?</p>
<button id="delete-button" type="button">Yes, Delete!</button> <button id="cancel-button" type="button">Cancel</button>

View File

@ -18,5 +18,5 @@
@import url('/global.css');
#remove {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}

View File

@ -22,7 +22,6 @@ import { settings, elements, apiDelete, parseParams, setupHeader } from "/global
// Element names specific to this page
elements.cancelButton = "cancel-button";
elements.deleteButton = "delete-button";
elements.topUserLink = "top-user-link";
elements.userLabel = "user-label";
// Data received from API calls
@ -32,7 +31,6 @@ import { settings, elements, apiDelete, parseParams, setupHeader } from "/global
var ui = {};
ui.cancelButton = {};
ui.deleteButton = {};
ui.topUserLink = {};
ui.userLabel = {};
// Click handler for delete button
@ -68,12 +66,9 @@ import { settings, elements, apiDelete, parseParams, setupHeader } from "/global
// Get element references
ui.cancelButton = document.getElementById(elements.cancelButton);
ui.deleteButton = document.getElementById(elements.deleteButton);
ui.topUserLink = document.getElementById(elements.topUserLink);
ui.userLabel = document.getElementById(elements.userLabel);
// Populate username where we need it
ui.topUserLink.href = "/user/edit?user=" + data.params.user;
ui.topUserLink.innerHTML = data.params.user;
ui.userLabel.innerHTML = data.params.user;
// Attach event handlers

View File

@ -28,5 +28,5 @@ td:nth-of-type(4) {
}
#user {
padding: 0 15px 15px;
padding: 15px 15px 15px;
}