brad/lmc
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Get region names from API instead of hard-coding them

Browse Source
This commit is contained in:
L. Bradley LaBoon
2024-05-06 16:57:12 -04:00
parent 4c4db6a734
commit 8ea657c757
21 changed files with 333 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
volumes/add/add.css
View File

@ -21,6 +21,10 @@
padding: 0px 15px 15px;
}
optgroup {
display: none;
}
tbody tr td:first-of-type {
font-weight: bold;
text-align: right;

17
volumes/add/add.js
View File

@ -15,13 +15,14 @@
* 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()
{
// Element names specific to this page
elements.addButton = "add-button";
elements.attachment = "attachment";
elements.dcOther = "dc-other";
elements.label = "label";
elements.location = "location";
elements.size = "size";
@ -35,6 +36,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
var ui = {};
ui.addButton = {};
ui.attachment = {};
ui.dcOther = {};
ui.label = {};
ui.location = {};
ui.size = {};
@ -90,11 +92,19 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
for (var i = 0; i < data.regions.length; i++) {
var loc = document.createElement("option");
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];
else
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
@ -180,6 +190,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
// Get element references
ui.addButton = document.getElementById(elements.addButton);
ui.attachment = document.getElementById(elements.attachment);
ui.dcOther = document.getElementById(elements.dcOther);
ui.label = document.getElementById(elements.label);
ui.location = document.getElementById(elements.location);
ui.size = document.getElementById(elements.size);

6
volumes/add/index.shtml
View File

@ -50,6 +50,12 @@ along with Linode Manager Classic. If not, see <https://www.gnu.org/licenses/>.
<td>
<select id="location">
<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>
</td>
<td class="info">The datacenter where the new volume should be created</td>

8
volumes/clone/clone.js
View File

@ -39,6 +39,13 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
ui.size = {};
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
var displayVolume = function(response)
{
@ -55,6 +62,7 @@ import { settings, elements, apiGet, apiPost, parseParams, regionNames, setupHea
ui.location.innerHTML = response.region;
ui.cloneButton.disabled = false;
apiGet("/regions/" + response.region, displayRegion, null);
};
// Click handler for clone button

9
volumes/settings/settings.js
View File

@ -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
var displayVolume = function(response)
{
@ -117,6 +124,8 @@ import { settings, elements, regionNames, apiGet, apiPost, apiPut, parseParams,
}
ui.saveButton.disabled = false;
apiGet("/regions/" + data.volume.region, displayRegion, null);
};
// Click handler for save button

50
volumes/volumes.js
View File

@ -28,6 +28,7 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
// Data recieved from API calls
var data = {};
data.linodes = {};
data.regions = [];
data.volumes = [];
// Static references to UI elements
@ -35,6 +36,11 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
ui.loading = {};
ui.volumeBody = {};
// Temporary state
var state = {};
state.haveRegions = false;
state.haveVolumes = false;
// Generates a table row for a volume
var createVolumeRow = function(volume, alt)
{
@ -59,8 +65,17 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
size.innerHTML = volume.size + " GiB";
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");
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];
else
region.innerHTML = volume.region;
@ -108,6 +123,27 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
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
var displayVolumes = function(response)
{
@ -127,10 +163,13 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
if (data.volumes.length == 0)
location.href = "/volumes/add";
// Insert volumes
ui.loading.remove();
for (var i = 0; i < data.volumes.length; i++)
ui.volumeBody.appendChild(createVolumeRow(data.volumes[i], i % 2));
state.haveVolumes = true;
if (state.haveRegions) {
// Insert volumes
ui.loading.remove();
for (var i = 0; i < data.volumes.length; i++)
ui.volumeBody.appendChild(createVolumeRow(data.volumes[i], i % 2));
}
};
// Initial setup
@ -147,6 +186,7 @@ import { settings, elements, regionNames, apiGet, parseParams, setupHeader } fro
// Get data from API
apiGet("/volumes", displayVolumes, null);
apiGet("/regions", displayRegions, null);
};
// Get the label of a given linode ID and update a cell's contents