Compare commits
2 Commits
4c4db6a734
...
b1f190d65a
Author | SHA1 | Date | |
---|---|---|---|
b1f190d65a | |||
8ea657c757 |
62
global.js
62
global.js
@ -35,36 +35,38 @@ var elements = {
|
|||||||
"username": "username"
|
"username": "username"
|
||||||
};
|
};
|
||||||
|
|
||||||
// Regions (Linode doesn't provide "friendly" names via the API)
|
// Region names for legacy DCs no longer in the API
|
||||||
var regionNames = {
|
var regionNames = {
|
||||||
"us-central": "Dallas, TX, USA",
|
"us-east-1b": "Newark 2, NJ",
|
||||||
"us-west": "Fremont, CA, USA",
|
"philadelphia": "Philadelphia, PA",
|
||||||
"us-southeast": "Atlanta, GA, USA",
|
"absecon": "Absecon, NJ"
|
||||||
"us-east": "Newark, NJ, USA",
|
};
|
||||||
"us-east-1b": "Newark 2, NJ, USA",
|
|
||||||
"eu-west": "London, England, UK",
|
// Group contries into regions for easier selection
|
||||||
"ap-south": "Singapore, SG",
|
var countryContinents = {
|
||||||
"eu-central": "Frankfurt, DE",
|
"us": "na",
|
||||||
"ap-northeast": "Tokyo, JP",
|
"gb": "eu",
|
||||||
"ap-northeast-1a": "Tokyo 2, JP",
|
"jp": "ap",
|
||||||
"ca-central": "Toronto, ON, CA",
|
"sg": "ap",
|
||||||
"ap-west": "Mumbai, IN",
|
"de": "eu",
|
||||||
"ap-southeast": "Sydney, NSW, AU",
|
"in": "ap",
|
||||||
"philadelphia": "Philadelphia, PA, USA",
|
"ca": "na",
|
||||||
"absecon": "Absecon, NJ, USA",
|
"au": "ap",
|
||||||
"us-iad": "Washington DC, USA",
|
"fr": "eu",
|
||||||
"us-ord": "Chicago, IL, USA",
|
"br": "sa",
|
||||||
"fr-par": "Paris, FR",
|
"nl": "eu",
|
||||||
"in-maa": "Chennai, IN",
|
"se": "eu",
|
||||||
"us-sea": "Seattle, WA, USA",
|
"es": "eu",
|
||||||
"br-gru": "San Paulo, BR",
|
"it": "eu",
|
||||||
"nl-ams": "Amsterdam, NL",
|
"id": "ap",
|
||||||
"se-sto": "Stockholm, SE",
|
"nz": "ap",
|
||||||
"jp-osa": "Osaka, JP",
|
"pl": "eu",
|
||||||
"it-mil": "Milan, IT",
|
"za": "af",
|
||||||
"id-cgk": "Jakarta, ID",
|
"my": "ap",
|
||||||
"us-lax": "Los Angeles, CA, USA",
|
"hk": "ap",
|
||||||
"us-mia": "Miami, FL, USA"
|
"co": "sa",
|
||||||
|
"mx": "na",
|
||||||
|
"cl": "sa"
|
||||||
};
|
};
|
||||||
|
|
||||||
// Human-readable event titles
|
// Human-readable event titles
|
||||||
@ -862,4 +864,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, drawSeries, md5, migrateETA, oauthPost, oauthScopes, objPut, parseParams, setupHeader, eventTitles, timeString, translateKernel };
|
export { settings, elements, regionNames, countryContinents, apiDelete, apiGet, apiPost, apiPut, drawSeries, md5, migrateETA, oauthPost, oauthScopes, objPut, parseParams, setupHeader, eventTitles, timeString, translateKernel };
|
||||||
|
@ -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, regionNames, apiGet, apiPost, parseParams, setupHeader, timeString } from "/global.js";
|
import { settings, elements, apiGet, apiPost, parseParams, setupHeader, timeString } from "/global.js";
|
||||||
|
|
||||||
(function()
|
(function()
|
||||||
{
|
{
|
||||||
|
@ -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, regionNames, apiGet, apiDelete, parseParams, setupHeader, timeString } from "/global.js";
|
import { settings, elements, apiGet, apiDelete, parseParams, setupHeader, timeString } from "/global.js";
|
||||||
|
|
||||||
(function()
|
(function()
|
||||||
{
|
{
|
||||||
|
@ -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, regionNames, apiGet, apiPut, parseParams, setupHeader, timeString } from "/global.js";
|
import { settings, elements, apiGet, apiPut, parseParams, setupHeader, timeString } from "/global.js";
|
||||||
|
|
||||||
(function()
|
(function()
|
||||||
{
|
{
|
||||||
|
@ -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, regionNames, apiGet, parseParams, setupHeader, timeString } from "/global.js";
|
import { settings, elements, apiGet, parseParams, setupHeader, timeString } from "/global.js";
|
||||||
|
|
||||||
(function()
|
(function()
|
||||||
{
|
{
|
||||||
|
@ -46,7 +46,14 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
|||||||
</tr>
|
</tr>
|
||||||
<tr class="lmc-tr3">
|
<tr class="lmc-tr3">
|
||||||
<td>Region</td>
|
<td>Region</td>
|
||||||
<td><select id="region"></select></td>
|
<td><select id="region">
|
||||||
|
<optgroup id="na" label="North America"></optgroup>
|
||||||
|
<optgroup id="eu" label="Europe"></optgroup>
|
||||||
|
<optgroup id="ap" label="Asia/Pacific"></optgroup>
|
||||||
|
<optgroup id="sa" label="South America"></optgroup>
|
||||||
|
<optgroup id="af" label="Africa"></optgroup>
|
||||||
|
<optgroup id="dc-other" label="Other"></optgroup>
|
||||||
|
</select></td>
|
||||||
<td class="info">
|
<td class="info">
|
||||||
For fastest initial upload, select the region that is geographically closest to you.<br />
|
For fastest initial upload, select the region that is geographically closest to you.<br />
|
||||||
Once uploaded you will be able to deploy the image to other regions.
|
Once uploaded you will be able to deploy the image to other regions.
|
||||||
|
@ -17,6 +17,10 @@
|
|||||||
|
|
||||||
@import url('/global.css');
|
@import url('/global.css');
|
||||||
|
|
||||||
|
optgroup {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.step-2 {
|
.step-2 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -15,11 +15,12 @@
|
|||||||
* 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, regionNames, apiGet, apiPost, objPut, parseParams, setupHeader } from "/global.js";
|
import { settings, elements, regionNames, countryContinents, apiGet, apiPost, objPut, parseParams, setupHeader } from "/global.js";
|
||||||
|
|
||||||
(function()
|
(function()
|
||||||
{
|
{
|
||||||
// Element names specific to this page
|
// Element names specific to this page
|
||||||
|
elements.dcOther = "dc-other";
|
||||||
elements.description = "description";
|
elements.description = "description";
|
||||||
elements.imageFile = "image-file";
|
elements.imageFile = "image-file";
|
||||||
elements.label = "label";
|
elements.label = "label";
|
||||||
@ -35,6 +36,7 @@ import { settings, elements, regionNames, apiGet, apiPost, objPut, parseParams,
|
|||||||
|
|
||||||
// Static references to UI elements
|
// Static references to UI elements
|
||||||
var ui = {};
|
var ui = {};
|
||||||
|
ui.dcOther = {};
|
||||||
ui.description = {};
|
ui.description = {};
|
||||||
ui.imageFile = {};
|
ui.imageFile = {};
|
||||||
ui.label = {};
|
ui.label = {};
|
||||||
@ -49,11 +51,19 @@ import { settings, elements, regionNames, apiGet, apiPost, objPut, parseParams,
|
|||||||
for (var i = 0; i < response.data.length; i++) {
|
for (var i = 0; i < response.data.length; i++) {
|
||||||
var dc = document.createElement("option");
|
var dc = document.createElement("option");
|
||||||
dc.value = response.data[i].id;
|
dc.value = response.data[i].id;
|
||||||
if (regionNames[response.data[i].id])
|
if (response.data[i].label && response.data[i].label.length)
|
||||||
|
dc.innerHTML = response.data[i].label;
|
||||||
|
else if (regionNames[response.data[i].id])
|
||||||
dc.innerHTML = regionNames[response.data[i].id];
|
dc.innerHTML = regionNames[response.data[i].id];
|
||||||
else
|
else
|
||||||
dc.innerHTML = response.data[i].id;
|
dc.innerHTML = response.data[i].id;
|
||||||
ui.region.appendChild(dc);
|
var optgroup = null;
|
||||||
|
if (countryContinents[response.data[i].country])
|
||||||
|
optgroup = document.getElementById(countryContinents[response.data[i].country]);
|
||||||
|
if (!optgroup)
|
||||||
|
optgroup = ui.dcOther;
|
||||||
|
optgroup.style.display = "initial";
|
||||||
|
optgroup.appendChild(dc);
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.nextButton.disabled = false;
|
ui.nextButton.disabled = false;
|
||||||
@ -126,6 +136,7 @@ import { settings, elements, regionNames, apiGet, apiPost, objPut, parseParams,
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Get element references
|
// Get element references
|
||||||
|
ui.dcOther = document.getElementById(elements.dcOther);
|
||||||
ui.description = document.getElementById(elements.description);
|
ui.description = document.getElementById(elements.description);
|
||||||
ui.imageFile = document.getElementById(elements.imageFile);
|
ui.imageFile = document.getElementById(elements.imageFile);
|
||||||
ui.label = document.getElementById(elements.label);
|
ui.label = document.getElementById(elements.label);
|
||||||
|
@ -89,6 +89,10 @@ h3 {
|
|||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
optgroup {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#right-links {
|
#right-links {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
@ -15,13 +15,14 @@
|
|||||||
* 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, regionNames, apiGet, apiPost, parseParams, setupHeader } from "/global.js";
|
import { settings, elements, regionNames, countryContinents, apiGet, apiPost, parseParams, setupHeader } from "/global.js";
|
||||||
|
|
||||||
(function()
|
(function()
|
||||||
{
|
{
|
||||||
// Element names specific to this page
|
// Element names specific to this page
|
||||||
elements.addButton = "add-button";
|
elements.addButton = "add-button";
|
||||||
elements.datacenters = "datacenters";
|
elements.datacenters = "datacenters";
|
||||||
|
elements.dcOther = "dc-other";
|
||||||
elements.instanceType = "instance-type";
|
elements.instanceType = "instance-type";
|
||||||
elements.instanceTypeActive = "instance-type-active";
|
elements.instanceTypeActive = "instance-type-active";
|
||||||
|
|
||||||
@ -33,6 +34,7 @@ import { settings, elements, regionNames, apiGet, apiPost, parseParams, setupHea
|
|||||||
// Static references to UI elements
|
// Static references to UI elements
|
||||||
var ui = {};
|
var ui = {};
|
||||||
ui.datacenters = {};
|
ui.datacenters = {};
|
||||||
|
ui.dcOther = {};
|
||||||
|
|
||||||
var createLinodeTypeButton = function(type)
|
var createLinodeTypeButton = function(type)
|
||||||
{
|
{
|
||||||
@ -67,16 +69,26 @@ import { settings, elements, regionNames, apiGet, apiPost, parseParams, setupHea
|
|||||||
for (var i = 0; i < response.data.length; i++) {
|
for (var i = 0; i < response.data.length; i++) {
|
||||||
var dc = document.createElement("option");
|
var dc = document.createElement("option");
|
||||||
dc.value = response.data[i].id;
|
dc.value = response.data[i].id;
|
||||||
if (regionNames[response.data[i].id])
|
if (response.data[i].label && response.data[i].label.length)
|
||||||
|
dc.innerHTML = response.data[i].label;
|
||||||
|
else if (regionNames[response.data[i].id])
|
||||||
dc.innerHTML = regionNames[response.data[i].id];
|
dc.innerHTML = regionNames[response.data[i].id];
|
||||||
else
|
else
|
||||||
dc.innerHTML = response.data[i].id;
|
dc.innerHTML = response.data[i].id;
|
||||||
ui.datacenters.appendChild(dc);
|
var optgroup = null;
|
||||||
|
if (countryContinents[response.data[i].country])
|
||||||
|
optgroup = document.getElementById(countryContinents[response.data[i].country]);
|
||||||
|
if (!optgroup)
|
||||||
|
optgroup = ui.dcOther;
|
||||||
|
optgroup.style.display = "initial";
|
||||||
|
optgroup.appendChild(dc);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Request the next page if there are more pages
|
// Request the next page if there are more pages
|
||||||
if (response.page != response.pages)
|
if (response.page != response.pages) {
|
||||||
apiGet("/regions?page=" + (response.page + 1), displayRegions, null);
|
apiGet("/regions?page=" + (response.page + 1), displayRegions, null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var displayTypes = function(response)
|
var displayTypes = function(response)
|
||||||
@ -135,6 +147,7 @@ import { settings, elements, regionNames, apiGet, apiPost, parseParams, setupHea
|
|||||||
data.params = parseParams();
|
data.params = parseParams();
|
||||||
|
|
||||||
ui.datacenters = document.getElementById(elements.datacenters);
|
ui.datacenters = document.getElementById(elements.datacenters);
|
||||||
|
ui.dcOther = document.getElementById(elements.dcOther);
|
||||||
|
|
||||||
// Register add button handler
|
// Register add button handler
|
||||||
document.getElementById(elements.addButton).addEventListener("click", handleAddLinode);
|
document.getElementById(elements.addButton).addEventListener("click", handleAddLinode);
|
||||||
|
@ -65,7 +65,14 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
|||||||
</div>
|
</div>
|
||||||
<div id="location">
|
<div id="location">
|
||||||
<h2>Location</h2>
|
<h2>Location</h2>
|
||||||
<select id="datacenters"></select>
|
<select id="datacenters">
|
||||||
|
<optgroup id="na" label="North America"></optgroup>
|
||||||
|
<optgroup id="eu" label="Europe"></optgroup>
|
||||||
|
<optgroup id="ap" label="Asia/Pacific"></optgroup>
|
||||||
|
<optgroup id="sa" label="South America"></optgroup>
|
||||||
|
<optgroup id="af" label="Africa"></optgroup>
|
||||||
|
<optgroup id="dc-other" label="Other"></optgroup>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div id="submit">
|
<div id="submit">
|
||||||
<button id="add-button" type="button">Add this Linode!</button>
|
<button id="add-button" type="button">Add this Linode!</button>
|
||||||
|
@ -50,6 +50,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
data.backup = {};
|
data.backup = {};
|
||||||
data.linode = {};
|
data.linode = {};
|
||||||
data.linodes = [];
|
data.linodes = [];
|
||||||
|
data.region = {};
|
||||||
data.types = [];
|
data.types = [];
|
||||||
|
|
||||||
// Static references to UI elements
|
// Static references to UI elements
|
||||||
@ -89,6 +90,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
|
|
||||||
var plan = document.createElement("td");
|
var plan = document.createElement("td");
|
||||||
if (linode.type) {
|
if (linode.type) {
|
||||||
|
plan.innerHTML = linode.type;
|
||||||
for (var i = 0; i < data.types.length; i++) {
|
for (var i = 0; i < data.types.length; i++) {
|
||||||
if (data.types[i].id == linode.type) {
|
if (data.types[i].id == linode.type) {
|
||||||
plan.innerHTML = data.types[i].label;
|
plan.innerHTML = data.types[i].label;
|
||||||
@ -103,7 +105,9 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
row.appendChild(plan);
|
row.appendChild(plan);
|
||||||
|
|
||||||
var location = document.createElement("td");
|
var location = document.createElement("td");
|
||||||
if (regionNames[linode.region])
|
if (data.region.label && data.region.label.length)
|
||||||
|
location.innerHTML = data.region.label;
|
||||||
|
else if (regionNames[linode.region])
|
||||||
location.innerHTML = regionNames[linode.region];
|
location.innerHTML = regionNames[linode.region];
|
||||||
else
|
else
|
||||||
location.innerHTML = linode.region;
|
location.innerHTML = linode.region;
|
||||||
@ -136,6 +140,15 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
|
|
||||||
ui.backupType.innerHTML = data.backup.type;
|
ui.backupType.innerHTML = data.backup.type;
|
||||||
|
|
||||||
|
if (regionNames[data.backup.region]) {
|
||||||
|
ui.backupLocation.innerHTML = regionNames[data.backup.region];
|
||||||
|
ui.destLocation.innerHTML = regionNames[data.backup.region];
|
||||||
|
} else {
|
||||||
|
ui.backupLocation.innerHTML = data.backup.region;
|
||||||
|
ui.destLocation.innerHTML = data.backup.region;
|
||||||
|
}
|
||||||
|
apiGet("/regions/" + data.backup.region, displayRegion, null);
|
||||||
|
|
||||||
for (var i = 0; i < data.backup.configs.length; i++) {
|
for (var i = 0; i < data.backup.configs.length; i++) {
|
||||||
var li = document.createElement("li");
|
var li = document.createElement("li");
|
||||||
li.innerHTML = data.backup.configs[i];
|
li.innerHTML = data.backup.configs[i];
|
||||||
@ -152,7 +165,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
|
|
||||||
ui.backupSize.innerHTML = data.backup.totalSize + " MB";
|
ui.backupSize.innerHTML = data.backup.totalSize + " MB";
|
||||||
|
|
||||||
if (state.haveTypes && data.linode.id)
|
if (state.haveTypes)
|
||||||
insertTypes();
|
insertTypes();
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -169,18 +182,6 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
ui.linodeTagLink.innerHTML = "(" + data.linode.tags[0] + ")";
|
ui.linodeTagLink.innerHTML = "(" + data.linode.tags[0] + ")";
|
||||||
ui.linodeTag.style.display = "inline";
|
ui.linodeTag.style.display = "inline";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Display location
|
|
||||||
if (regionNames[data.linode.region]) {
|
|
||||||
ui.backupLocation.innerHTML = regionNames[data.linode.region];
|
|
||||||
ui.destLocation.innerHTML = regionNames[data.linode.region];
|
|
||||||
} else {
|
|
||||||
ui.backupLocation.innerHTML = data.linode.region;
|
|
||||||
ui.destLocation.innerHTML = data.linode.region;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.haveTypes && data.backup.id)
|
|
||||||
insertTypes();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Callback for linode disks API call
|
// Callback for linode disks API call
|
||||||
@ -238,7 +239,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
// Request the next page if there are more pages
|
// Request the next page if there are more pages
|
||||||
if (response.page != response.pages) {
|
if (response.page != response.pages) {
|
||||||
var filter = {
|
var filter = {
|
||||||
"region": data.linode.region
|
"region": data.backup.region
|
||||||
};
|
};
|
||||||
apiGet("/linode/instances?page=" + (response.page + 1), displayLinodes, filter);
|
apiGet("/linode/instances?page=" + (response.page + 1), displayLinodes, filter);
|
||||||
return;
|
return;
|
||||||
@ -254,6 +255,17 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Callback for region API call
|
||||||
|
var displayRegion = function(response)
|
||||||
|
{
|
||||||
|
data.region = response;
|
||||||
|
|
||||||
|
if (data.region.label && data.region.label.length) {
|
||||||
|
ui.backupLocation.innerHTML = response.label;
|
||||||
|
ui.destLocation.innerHTML = response.label;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Callback for linode types API call
|
// Callback for linode types API call
|
||||||
var displayTypes = function(response)
|
var displayTypes = function(response)
|
||||||
{
|
{
|
||||||
@ -267,7 +279,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
}
|
}
|
||||||
|
|
||||||
state.haveTypes = true;
|
state.haveTypes = true;
|
||||||
if (data.backup.id && data.linode.id)
|
if (data.backup.id)
|
||||||
insertTypes();
|
insertTypes();
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -295,7 +307,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
var req = {
|
var req = {
|
||||||
"label": ui.destLabel.value,
|
"label": ui.destLabel.value,
|
||||||
"type": ui.destPlan.value,
|
"type": ui.destPlan.value,
|
||||||
"region": data.linode.region,
|
"region": data.backup.region,
|
||||||
"backup_id": data.backup.id
|
"backup_id": data.backup.id
|
||||||
};
|
};
|
||||||
var callback = function(response)
|
var callback = function(response)
|
||||||
@ -348,11 +360,11 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
ui.destPlan.appendChild(option);
|
ui.destPlan.appendChild(option);
|
||||||
}
|
}
|
||||||
|
|
||||||
updatePrice(null);
|
updateSpace(null);
|
||||||
ui.newLinode.disabled = false;
|
ui.newLinode.disabled = false;
|
||||||
|
|
||||||
var filter = {
|
var filter = {
|
||||||
"region": data.linode.region
|
"region": data.backup.region
|
||||||
};
|
};
|
||||||
apiGet("/linode/instances", displayLinodes, filter);
|
apiGet("/linode/instances", displayLinodes, filter);
|
||||||
};
|
};
|
||||||
@ -410,7 +422,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
ui.newLinode = document.getElementById(elements.newLinode);
|
ui.newLinode = document.getElementById(elements.newLinode);
|
||||||
|
|
||||||
// Register event handlers
|
// Register event handlers
|
||||||
ui.destPlan.addEventListener("input", updatePrice);
|
ui.destPlan.addEventListener("input", updateSpace);
|
||||||
ui.newLinode.addEventListener("click", handleCreate);
|
ui.newLinode.addEventListener("click", handleCreate);
|
||||||
|
|
||||||
// Get data from API
|
// Get data from API
|
||||||
@ -431,7 +443,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Update the price display
|
// Update the price display
|
||||||
var updatePrice = function(event)
|
var updateSpace = function(event)
|
||||||
{
|
{
|
||||||
// Find the selected type
|
// Find the selected type
|
||||||
var type = null;
|
var type = null;
|
||||||
|
@ -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, apiGet, apiPost, migrateETA, parseParams, regionNames, setupHeader, translateKernel } from "/global.js";
|
import { settings, elements, apiGet, apiPost, countryContinents, migrateETA, parseParams, regionNames, setupHeader, translateKernel } from "/global.js";
|
||||||
|
|
||||||
(function()
|
(function()
|
||||||
{
|
{
|
||||||
@ -25,6 +25,7 @@ import { settings, elements, apiGet, apiPost, migrateETA, parseParams, regionNam
|
|||||||
elements.configDiskRow = "config-disk-row";
|
elements.configDiskRow = "config-disk-row";
|
||||||
elements.configsNone = "configs-none";
|
elements.configsNone = "configs-none";
|
||||||
elements.configTable = "config-table-body";
|
elements.configTable = "config-table-body";
|
||||||
|
elements.dcOther = "dc-other";
|
||||||
elements.destBackups = "dest-backups";
|
elements.destBackups = "dest-backups";
|
||||||
elements.destBackupsPrice = "dest-backups-price";
|
elements.destBackupsPrice = "dest-backups-price";
|
||||||
elements.destLabel = "dest-label";
|
elements.destLabel = "dest-label";
|
||||||
@ -54,6 +55,7 @@ import { settings, elements, apiGet, apiPost, migrateETA, parseParams, regionNam
|
|||||||
data.configs = [];
|
data.configs = [];
|
||||||
data.disks = [];
|
data.disks = [];
|
||||||
data.linode = {};
|
data.linode = {};
|
||||||
|
data.regions = [];
|
||||||
data.types = [];
|
data.types = [];
|
||||||
|
|
||||||
// Static references to UI elements
|
// Static references to UI elements
|
||||||
@ -62,6 +64,7 @@ import { settings, elements, apiGet, apiPost, migrateETA, parseParams, regionNam
|
|||||||
ui.configCloneTable = {};
|
ui.configCloneTable = {};
|
||||||
ui.configsNone = {};
|
ui.configsNone = {};
|
||||||
ui.configTable = {};
|
ui.configTable = {};
|
||||||
|
ui.dcOther = {};
|
||||||
ui.destBackups = {};
|
ui.destBackups = {};
|
||||||
ui.destBackupsPrice = {};
|
ui.destBackupsPrice = {};
|
||||||
ui.destLabel = {};
|
ui.destLabel = {};
|
||||||
@ -241,7 +244,17 @@ import { settings, elements, apiGet, apiPost, migrateETA, parseParams, regionNam
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Display the source location
|
// Display the source location
|
||||||
if (regionNames[data.linode.region])
|
var region = null;
|
||||||
|
for (var i = 0; i < data.regions.length; i++) {
|
||||||
|
if (data.regions[i].id == data.linode.region) {
|
||||||
|
region = data.regions[i];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (region && region.label && region.label.length)
|
||||||
|
ui.sourceLocation.innerHTML = region.label;
|
||||||
|
else if (regionNames[data.linode.region])
|
||||||
ui.sourceLocation.innerHTML = regionNames[data.linode.region];
|
ui.sourceLocation.innerHTML = regionNames[data.linode.region];
|
||||||
else
|
else
|
||||||
ui.sourceLocation.innerHTML = data.linode.region;
|
ui.sourceLocation.innerHTML = data.linode.region;
|
||||||
@ -290,25 +303,8 @@ import { settings, elements, apiGet, apiPost, migrateETA, parseParams, regionNam
|
|||||||
// Callback for regions API call
|
// Callback for regions API call
|
||||||
var displayRegions = function(response)
|
var displayRegions = function(response)
|
||||||
{
|
{
|
||||||
for (var i = 0; i < response.data.length; i++) {
|
// Add regions to array
|
||||||
// Add regions to selector
|
data.regions = data.regions.concat(response.data);
|
||||||
var dc = document.createElement("option");
|
|
||||||
dc.value = response.data[i].id;
|
|
||||||
if (regionNames[response.data[i].id])
|
|
||||||
dc.innerHTML = regionNames[response.data[i].id];
|
|
||||||
else
|
|
||||||
dc.innerHTML = response.data[i].id;
|
|
||||||
ui.destLocation.appendChild(dc);
|
|
||||||
|
|
||||||
// Add optgroups to linode selector
|
|
||||||
var optgroup = document.createElement("optgroup");
|
|
||||||
optgroup.id = response.data[i].id;
|
|
||||||
if (regionNames[response.data[i].id])
|
|
||||||
optgroup.label = regionNames[response.data[i].id];
|
|
||||||
else
|
|
||||||
optgroup.label = response.data[i].label;
|
|
||||||
ui.destLinode.appendChild(optgroup);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Request the next page if there are more pages
|
// Request the next page if there are more pages
|
||||||
if (response.page != response.pages) {
|
if (response.page != response.pages) {
|
||||||
@ -316,6 +312,37 @@ import { settings, elements, apiGet, apiPost, migrateETA, parseParams, regionNam
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < data.regions.length; i++) {
|
||||||
|
// Add regions to selector
|
||||||
|
var dc = document.createElement("option");
|
||||||
|
dc.value = data.regions[i].id;
|
||||||
|
if (data.regions[i].label && data.regions[i].label.length)
|
||||||
|
dc.innerHTML = data.regions[i].label;
|
||||||
|
else if (regionNames[data.regions[i].id])
|
||||||
|
dc.innerHTML = regionNames[data.regions[i].id];
|
||||||
|
else
|
||||||
|
dc.innerHTML = data.regions[i].id;
|
||||||
|
var group = null;
|
||||||
|
if (countryContinents[data.regions[i].country])
|
||||||
|
group = document.getElementById(countryContinents[data.regions[i].country]);
|
||||||
|
if (!group)
|
||||||
|
group = ui.dcOther;
|
||||||
|
group.style.display = "initial";
|
||||||
|
group.appendChild(dc);
|
||||||
|
|
||||||
|
// Add optgroups to linode selector
|
||||||
|
var optgroup = document.createElement("optgroup");
|
||||||
|
optgroup.id = data.regions[i].id;
|
||||||
|
if (data.regions[i].label && data.regions[i].label.length)
|
||||||
|
optgroup.label = data.regions[i].label;
|
||||||
|
else if (regionNames[data.regions[i].id])
|
||||||
|
optgroup.label = regionNames[data.regions[i].id];
|
||||||
|
else
|
||||||
|
optgroup.label = data.regions[i].label;
|
||||||
|
ui.destLinode.appendChild(optgroup);
|
||||||
|
}
|
||||||
|
|
||||||
|
apiGet("/linode/instances/" + data.params.lid, displayDetails, null);
|
||||||
apiGet("/linode/instances", displayLinodes, null);
|
apiGet("/linode/instances", displayLinodes, null);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -415,6 +442,7 @@ import { settings, elements, apiGet, apiPost, migrateETA, parseParams, regionNam
|
|||||||
ui.configCloneTable = document.getElementById(elements.configCloneTable);
|
ui.configCloneTable = document.getElementById(elements.configCloneTable);
|
||||||
ui.configsNone = document.getElementById(elements.configsNone);
|
ui.configsNone = document.getElementById(elements.configsNone);
|
||||||
ui.configTable = document.getElementById(elements.configTable);
|
ui.configTable = document.getElementById(elements.configTable);
|
||||||
|
ui.dcOther = document.getElementById(elements.dcOther);
|
||||||
ui.destBackups = document.getElementById(elements.destBackups);
|
ui.destBackups = document.getElementById(elements.destBackups);
|
||||||
ui.destBackupsPrice = document.getElementById(elements.destBackupsPrice);
|
ui.destBackupsPrice = document.getElementById(elements.destBackupsPrice);
|
||||||
ui.destLabel = document.getElementById(elements.destLabel);
|
ui.destLabel = document.getElementById(elements.destLabel);
|
||||||
@ -442,7 +470,6 @@ import { settings, elements, apiGet, apiPost, migrateETA, parseParams, regionNam
|
|||||||
ui.destPlan.addEventListener("input", updatePrices);
|
ui.destPlan.addEventListener("input", updatePrices);
|
||||||
|
|
||||||
// Get data from API
|
// Get data from API
|
||||||
apiGet("/linode/instances/" + data.params.lid, displayDetails, null);
|
|
||||||
apiGet("/linode/instances/" + data.params.lid + "/configs", displayConfigs, null);
|
apiGet("/linode/instances/" + data.params.lid + "/configs", displayConfigs, null);
|
||||||
apiGet("/linode/instances/" + data.params.lid + "/disks", displayDisks, null);
|
apiGet("/linode/instances/" + data.params.lid + "/disks", displayDisks, null);
|
||||||
apiGet("/linode/types", displayTypes, null);
|
apiGet("/linode/types", displayTypes, null);
|
||||||
|
@ -142,7 +142,14 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
|||||||
</tr>
|
</tr>
|
||||||
<tr class="lmc-tr3 new-linode">
|
<tr class="lmc-tr3 new-linode">
|
||||||
<td>Location</td>
|
<td>Location</td>
|
||||||
<td><select id="dest-location"></select></td>
|
<td><select id="dest-location">
|
||||||
|
<optgroup id="na" label="North America"></optgroup>
|
||||||
|
<optgroup id="eu" label="Europe"></optgroup>
|
||||||
|
<optgroup id="ap" label="Asia/Pacific"></optgroup>
|
||||||
|
<optgroup id="sa" label="South America"></optgroup>
|
||||||
|
<optgroup id="af" label="Africa"></optgroup>
|
||||||
|
<optgroup id="dc-other" label="Other"></optgroup>
|
||||||
|
</select></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="lmc-tr3 new-linode">
|
<tr class="lmc-tr3 new-linode">
|
||||||
<td>Plan</td>
|
<td>Plan</td>
|
||||||
|
@ -48,6 +48,7 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
data.noTag = false;
|
data.noTag = false;
|
||||||
data.notifications = [];
|
data.notifications = [];
|
||||||
data.plans = [];
|
data.plans = [];
|
||||||
|
data.regions = [];
|
||||||
|
|
||||||
// Static references to UI elements
|
// Static references to UI elements
|
||||||
var ui = {};
|
var ui = {};
|
||||||
@ -60,6 +61,8 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
var state = {};
|
var state = {};
|
||||||
state.haveLinodes = false;
|
state.haveLinodes = false;
|
||||||
state.haveNotifications = false;
|
state.haveNotifications = false;
|
||||||
|
state.haveRegions = false;
|
||||||
|
state.haveTypes = false;
|
||||||
|
|
||||||
var createLinodeRow = function(linode, alt)
|
var createLinodeRow = function(linode, alt)
|
||||||
{
|
{
|
||||||
@ -92,8 +95,10 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
plan.innerHTML = getPlanLabel(linode.type);
|
plan.innerHTML = getPlanLabel(linode.type);
|
||||||
else
|
else
|
||||||
plan.innerHTML = "Unknown";
|
plan.innerHTML = "Unknown";
|
||||||
if (plan.innerHTML == "")
|
if (plan.innerHTML == "") {
|
||||||
|
plan.innerHTML = linode.type;
|
||||||
translatePlan(linode.type, plan);
|
translatePlan(linode.type, plan);
|
||||||
|
}
|
||||||
var ip = document.createElement("td");
|
var ip = document.createElement("td");
|
||||||
ip.innerHTML = linode.ipv4[0];
|
ip.innerHTML = linode.ipv4[0];
|
||||||
var ipCount = 0;
|
var ipCount = 0;
|
||||||
@ -110,8 +115,17 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
plus.innerHTML = " (+" + ipCount + ")";
|
plus.innerHTML = " (+" + ipCount + ")";
|
||||||
ip.appendChild(plus);
|
ip.appendChild(plus);
|
||||||
}
|
}
|
||||||
|
var regionData = null;
|
||||||
|
for (var i = 0; i < data.regions.length; i++) {
|
||||||
|
if (data.regions[i].id == linode.region) {
|
||||||
|
regionData = data.regions[i];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
var region = document.createElement("td");
|
var region = document.createElement("td");
|
||||||
if (regionNames[linode.region])
|
if (regionData && regionData.label && regionData.label.length)
|
||||||
|
region.innerHTML = regionData.label;
|
||||||
|
else if (regionNames[linode.region])
|
||||||
region.innerHTML = regionNames[linode.region];
|
region.innerHTML = regionNames[linode.region];
|
||||||
else
|
else
|
||||||
region.innerHTML = linode.region;
|
region.innerHTML = linode.region;
|
||||||
@ -312,8 +326,19 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
body.innerHTML = data.notifications[i].message;
|
body.innerHTML = data.notifications[i].message;
|
||||||
}
|
}
|
||||||
// Replace "this facility" with actual location for outages
|
// Replace "this facility" with actual location for outages
|
||||||
if (data.notifications[i].type == "outage" && data.notifications[i].entity && data.notifications[i].entity.type == "region" && regionNames[data.notifications[i].entity.id])
|
if (data.notifications[i].type == "outage" && data.notifications[i].entity && data.notifications[i].entity.type == "region") {
|
||||||
|
var region = null;
|
||||||
|
for (var j = 0; j < data.regions.length; j++) {
|
||||||
|
if (data.regions[j].id == data.notifications[i].entity.id) {
|
||||||
|
region = data.regions[j];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (region && region.label && region.label.length)
|
||||||
|
header.innerHTML = header.innerHTML.replace("this facility", region.label);
|
||||||
|
else if (regionNames[data.notifications[i].entity.id])
|
||||||
header.innerHTML = header.innerHTML.replace("this facility", regionNames[data.notifications[i].entity.id]);
|
header.innerHTML = header.innerHTML.replace("this facility", regionNames[data.notifications[i].entity.id]);
|
||||||
|
}
|
||||||
notification.appendChild(header);
|
notification.appendChild(header);
|
||||||
notification.appendChild(body);
|
notification.appendChild(body);
|
||||||
ui.notifications.appendChild(notification);
|
ui.notifications.appendChild(notification);
|
||||||
@ -379,6 +404,8 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
state.haveTypes = true;
|
||||||
|
if (state.haveRegions) {
|
||||||
// Get linodes
|
// Get linodes
|
||||||
var filters = null;
|
var filters = null;
|
||||||
if (data.params.tag)
|
if (data.params.tag)
|
||||||
@ -386,6 +413,33 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
"tags": data.params.tag
|
"tags": data.params.tag
|
||||||
};
|
};
|
||||||
apiGet("/linode/instances", displayLinodes, filters);
|
apiGet("/linode/instances", displayLinodes, filters);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var getRegions = function(response)
|
||||||
|
{
|
||||||
|
// Add regions to array
|
||||||
|
data.regions = data.regions.concat(response.data);
|
||||||
|
|
||||||
|
// Request the next page if there are more pages
|
||||||
|
if (response.page != response.pages) {
|
||||||
|
apiGet("/regions?page=" + (response.page + 1), getRegions, null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
state.haveRegions = true;
|
||||||
|
if (state.haveTypes) {
|
||||||
|
// Get linodes
|
||||||
|
var filters = null;
|
||||||
|
if (data.params.tag)
|
||||||
|
filters = {
|
||||||
|
"tags": data.params.tag
|
||||||
|
};
|
||||||
|
apiGet("/linode/instances", displayLinodes, filters);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get notifications
|
||||||
|
apiGet("/account/notifications", displayNotifications, null);
|
||||||
};
|
};
|
||||||
|
|
||||||
var insertLinodes = function()
|
var insertLinodes = function()
|
||||||
@ -425,9 +479,9 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
setupHeader();
|
setupHeader();
|
||||||
|
|
||||||
// Get linode and transfer info
|
// Get linode and transfer info
|
||||||
|
apiGet("/regions", getRegions, null);
|
||||||
apiGet("/linode/types", getPlans, null);
|
apiGet("/linode/types", getPlans, null);
|
||||||
apiGet("/account/transfer", displayTransfer, null);
|
apiGet("/account/transfer", displayTransfer, null);
|
||||||
apiGet("/account/notifications", displayNotifications, null);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var translatePlan = function(name, cell)
|
var translatePlan = function(name, cell)
|
||||||
|
@ -21,6 +21,10 @@
|
|||||||
padding: 0px 15px 15px;
|
padding: 0px 15px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
optgroup {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
tbody tr td:first-of-type {
|
tbody tr td:first-of-type {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
@ -15,13 +15,14 @@
|
|||||||
* 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, apiGet, apiPost, parseParams, regionNames, setupHeader } from "/global.js";
|
import { settings, elements, apiGet, apiPost, countryContinents, parseParams, regionNames, setupHeader } from "/global.js";
|
||||||
|
|
||||||
(function()
|
(function()
|
||||||
{
|
{
|
||||||
// Element names specific to this page
|
// Element names specific to this page
|
||||||
elements.addButton = "add-button";
|
elements.addButton = "add-button";
|
||||||
elements.attachment = "attachment";
|
elements.attachment = "attachment";
|
||||||
|
elements.dcOther = "dc-other";
|
||||||
elements.label = "label";
|
elements.label = "label";
|
||||||
elements.location = "location";
|
elements.location = "location";
|
||||||
elements.size = "size";
|
elements.size = "size";
|
||||||
@ -35,6 +36,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
var ui = {};
|
var ui = {};
|
||||||
ui.addButton = {};
|
ui.addButton = {};
|
||||||
ui.attachment = {};
|
ui.attachment = {};
|
||||||
|
ui.dcOther = {};
|
||||||
ui.label = {};
|
ui.label = {};
|
||||||
ui.location = {};
|
ui.location = {};
|
||||||
ui.size = {};
|
ui.size = {};
|
||||||
@ -90,11 +92,19 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
for (var i = 0; i < data.regions.length; i++) {
|
for (var i = 0; i < data.regions.length; i++) {
|
||||||
var loc = document.createElement("option");
|
var loc = document.createElement("option");
|
||||||
loc.value = data.regions[i].id;
|
loc.value = data.regions[i].id;
|
||||||
if (regionNames[data.regions[i].id])
|
if (data.regions[i].label && data.regions[i].label.length)
|
||||||
|
loc.innerHTML = data.regions[i].label;
|
||||||
|
else if (regionNames[data.regions[i].id])
|
||||||
loc.innerHTML = regionNames[data.regions[i].id];
|
loc.innerHTML = regionNames[data.regions[i].id];
|
||||||
else
|
else
|
||||||
loc.innerHTML = data.regions[i].id;
|
loc.innerHTML = data.regions[i].id;
|
||||||
ui.location.appendChild(loc);
|
var optgroup = null;
|
||||||
|
if (countryContinents[data.regions[i].country])
|
||||||
|
optgroup = document.getElementById(countryContinents[data.regions[i].country]);
|
||||||
|
if (!optgroup)
|
||||||
|
optgroup = ui.dcOther;
|
||||||
|
optgroup.style.display = "initial";
|
||||||
|
optgroup.appendChild(loc);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Request linodes in all the supported regions
|
// Request linodes in all the supported regions
|
||||||
@ -180,6 +190,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
// Get element references
|
// Get element references
|
||||||
ui.addButton = document.getElementById(elements.addButton);
|
ui.addButton = document.getElementById(elements.addButton);
|
||||||
ui.attachment = document.getElementById(elements.attachment);
|
ui.attachment = document.getElementById(elements.attachment);
|
||||||
|
ui.dcOther = document.getElementById(elements.dcOther);
|
||||||
ui.label = document.getElementById(elements.label);
|
ui.label = document.getElementById(elements.label);
|
||||||
ui.location = document.getElementById(elements.location);
|
ui.location = document.getElementById(elements.location);
|
||||||
ui.size = document.getElementById(elements.size);
|
ui.size = document.getElementById(elements.size);
|
||||||
|
@ -50,6 +50,12 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
|
|||||||
<td>
|
<td>
|
||||||
<select id="location">
|
<select id="location">
|
||||||
<option selected disabled value="0">Choose A Location</option>
|
<option selected disabled value="0">Choose A Location</option>
|
||||||
|
<optgroup id="na" label="North America"></optgroup>
|
||||||
|
<optgroup id="eu" label="Europe"></optgroup>
|
||||||
|
<optgroup id="ap" label="Asia/Pacific"></optgroup>
|
||||||
|
<optgroup id="sa" label="South America"></optgroup>
|
||||||
|
<optgroup id="af" label="Africa"></optgroup>
|
||||||
|
<optgroup id="dc-other" label="Other"></optgroup>
|
||||||
</select>
|
</select>
|
||||||
</td>
|
</td>
|
||||||
<td class="info">The datacenter where the new volume should be created</td>
|
<td class="info">The datacenter where the new volume should be created</td>
|
||||||
|
@ -39,6 +39,13 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
ui.size = {};
|
ui.size = {};
|
||||||
ui.volumeLabel = {};
|
ui.volumeLabel = {};
|
||||||
|
|
||||||
|
// Callback for region API call
|
||||||
|
var displayRegion = function(response)
|
||||||
|
{
|
||||||
|
if (response.label && response.label.length)
|
||||||
|
ui.location.innerHTML = response.label;
|
||||||
|
};
|
||||||
|
|
||||||
// Callback for volume API call
|
// Callback for volume API call
|
||||||
var displayVolume = function(response)
|
var displayVolume = function(response)
|
||||||
{
|
{
|
||||||
@ -55,6 +62,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
|
|||||||
ui.location.innerHTML = response.region;
|
ui.location.innerHTML = response.region;
|
||||||
|
|
||||||
ui.cloneButton.disabled = false;
|
ui.cloneButton.disabled = false;
|
||||||
|
apiGet("/regions/" + response.region, displayRegion, null);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Click handler for clone button
|
// Click handler for clone button
|
||||||
|
@ -83,6 +83,13 @@ import { settings, elements, regionNames, apiGet, apiPost, apiPut, parseParams,
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Callback for region API call
|
||||||
|
var displayRegion = function(response)
|
||||||
|
{
|
||||||
|
if (response.label && response.label.length)
|
||||||
|
ui.location.innerHTML = response.label;
|
||||||
|
};
|
||||||
|
|
||||||
// Callback for volume API call
|
// Callback for volume API call
|
||||||
var displayVolume = function(response)
|
var displayVolume = function(response)
|
||||||
{
|
{
|
||||||
@ -117,6 +124,8 @@ import { settings, elements, regionNames, apiGet, apiPost, apiPut, parseParams,
|
|||||||
}
|
}
|
||||||
|
|
||||||
ui.saveButton.disabled = false;
|
ui.saveButton.disabled = false;
|
||||||
|
|
||||||
|
apiGet("/regions/" + data.volume.region, displayRegion, null);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Click handler for save button
|
// Click handler for save button
|
||||||
|
@ -28,6 +28,7 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
// Data recieved from API calls
|
// Data recieved from API calls
|
||||||
var data = {};
|
var data = {};
|
||||||
data.linodes = {};
|
data.linodes = {};
|
||||||
|
data.regions = [];
|
||||||
data.volumes = [];
|
data.volumes = [];
|
||||||
|
|
||||||
// Static references to UI elements
|
// Static references to UI elements
|
||||||
@ -35,6 +36,11 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
ui.loading = {};
|
ui.loading = {};
|
||||||
ui.volumeBody = {};
|
ui.volumeBody = {};
|
||||||
|
|
||||||
|
// Temporary state
|
||||||
|
var state = {};
|
||||||
|
state.haveRegions = false;
|
||||||
|
state.haveVolumes = false;
|
||||||
|
|
||||||
// Generates a table row for a volume
|
// Generates a table row for a volume
|
||||||
var createVolumeRow = function(volume, alt)
|
var createVolumeRow = function(volume, alt)
|
||||||
{
|
{
|
||||||
@ -59,8 +65,17 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
size.innerHTML = volume.size + " GiB";
|
size.innerHTML = volume.size + " GiB";
|
||||||
row.appendChild(size);
|
row.appendChild(size);
|
||||||
|
|
||||||
|
var regionData = null;
|
||||||
|
for (var i = 0; i < data.regions.length; i++) {
|
||||||
|
if (data.regions[i].id == volume.region) {
|
||||||
|
regionData = data.regions[i];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
var region = document.createElement("td");
|
var region = document.createElement("td");
|
||||||
if (regionNames[volume.region])
|
if (regionData && regionData.label && regionData.label.length)
|
||||||
|
region.innerHTML = regionData.label;
|
||||||
|
else if (regionNames[volume.region])
|
||||||
region.innerHTML = regionNames[volume.region];
|
region.innerHTML = regionNames[volume.region];
|
||||||
else
|
else
|
||||||
region.innerHTML = volume.region;
|
region.innerHTML = volume.region;
|
||||||
@ -108,6 +123,27 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
return row;
|
return row;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Callback for regions API call
|
||||||
|
var displayRegions = function(response)
|
||||||
|
{
|
||||||
|
// Add regions to array
|
||||||
|
data.regions = data.regions.concat(response.data);
|
||||||
|
|
||||||
|
// Request the next page if there are more pages
|
||||||
|
if (response.page != response.pages) {
|
||||||
|
apiGet("/regions?page=" + (response.page + 1), displayRegions, null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
state.haveRegions = true;
|
||||||
|
if (state.haveVolumes) {
|
||||||
|
// Insert volumes
|
||||||
|
ui.loading.remove();
|
||||||
|
for (var i = 0; i < data.volumes.length; i++)
|
||||||
|
ui.volumeBody.appendChild(createVolumeRow(data.volumes[i], i % 2));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Callback for volumes API call
|
// Callback for volumes API call
|
||||||
var displayVolumes = function(response)
|
var displayVolumes = function(response)
|
||||||
{
|
{
|
||||||
@ -127,10 +163,13 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
if (data.volumes.length == 0)
|
if (data.volumes.length == 0)
|
||||||
location.href = "/volumes/add";
|
location.href = "/volumes/add";
|
||||||
|
|
||||||
|
state.haveVolumes = true;
|
||||||
|
if (state.haveRegions) {
|
||||||
// Insert volumes
|
// Insert volumes
|
||||||
ui.loading.remove();
|
ui.loading.remove();
|
||||||
for (var i = 0; i < data.volumes.length; i++)
|
for (var i = 0; i < data.volumes.length; i++)
|
||||||
ui.volumeBody.appendChild(createVolumeRow(data.volumes[i], i % 2));
|
ui.volumeBody.appendChild(createVolumeRow(data.volumes[i], i % 2));
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Initial setup
|
// Initial setup
|
||||||
@ -147,6 +186,7 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
|
|||||||
|
|
||||||
// Get data from API
|
// Get data from API
|
||||||
apiGet("/volumes", displayVolumes, null);
|
apiGet("/volumes", displayVolumes, null);
|
||||||
|
apiGet("/regions", displayRegions, null);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Get the label of a given linode ID and update a cell's contents
|
// Get the label of a given linode ID and update a cell's contents
|
||||||
|
Loading…
Reference in New Issue
Block a user