lmc/volumes/volumes.js

/*
 * 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, regionNames, apiGet, parseParams, setupHeader } from "/global.js";

(function()
{
	// Element names specific to this page
	elements.lmcRow = "lmc-tr1";
	elements.lmcRowAlt = "lmc-tr2";
	elements.loading = "loading";
	elements.volumeBody = "volume-body";

	// Data recieved from API calls
	var data = {};
	data.linodes = {};
	data.regions = [];
	data.volumes = [];

	// Static references to UI elements
	var ui = {};
	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)
	{
		var row = document.createElement("tr");
		if (alt)
			row.className = elements.lmcRowAlt;
		else
			row.className = elements.lmcRow;

		var labelCell = document.createElement("td");
		var label = document.createElement("a");
		label.href = "/volumes/settings?vid=" + volume.id;
		label.innerHTML = volume.label;
		labelCell.appendChild(label);
		row.appendChild(labelCell);

		var status = document.createElement("td");
		status.innerHTML = volume.status;
		row.appendChild(status);

		var size = document.createElement("td");
		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 (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;
		row.appendChild(region);

		var attachment = document.createElement("td");
		if (volume.linode_id) {
			var linode = document.createElement("a");
			linode.href = "/linodes/dashboard?lid=" + volume.linode_id;
			linode.innerHTML = "linode" + volume.linode_id;
			translateLinode(volume.linode_id, linode);
			attachment.appendChild(linode);
		}
		row.appendChild(attachment);

		var options = document.createElement("td");
		var attach = document.createElement("a");
		if (volume.linode_id) {
			attach.href = "/volumes/detach?vid=" + volume.id;
			attach.innerHTML = "Detach";
		} else {
			attach.href = "/volumes/attach?vid=" + volume.id;
			attach.innerHTML = "Attach";
		}
		var separator = document.createElement("span");
		separator.innerHTML = " | ";
		var clone = document.createElement("a");
		clone.href = "/volumes/clone?vid=" + volume.id;
		clone.innerHTML = "Clone";
		var settings = document.createElement("a");
		settings.href = "/volumes/settings?vid=" + volume.id;
		settings.innerHTML = "Settings";
		var remove = document.createElement("a");
		remove.href = "/volumes/remove?vid=" + volume.id;
		remove.innerHTML = "Remove";
		options.appendChild(attach);
		options.appendChild(separator);
		options.appendChild(clone);
		options.appendChild(separator.cloneNode(true));
		options.appendChild(settings);
		options.appendChild(separator.cloneNode(true));
		options.appendChild(remove);
		row.appendChild(options);

		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)
	{
		// Add volumes to array
		data.volumes = data.volumes.concat(response.data);

		// Request the next page if there are more pages
		if (response.page != response.pages) {
			var progress = (response.page / response.pages) * 100;
			progress = progress.toFixed(0);
			ui.loading.innerHTML = "Loading " + progress + "%...";
			apiGet("/volumes?page=" + (response.page + 1), displayVolumes, null);
			return;
		}

		// Redirect to add page if there are no volumes
		if (data.volumes.length == 0)
			location.href = "/volumes/add";

		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
	var setup = function()
	{
		// Parse URL parameters
		data.params = parseParams();

		setupHeader();

		// Get element references
		ui.loading = document.getElementById(elements.loading);
		ui.volumeBody = document.getElementById(elements.volumeBody);

		// 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
	var translateLinode = function(id, cell)
	{
		if (data.linodes[id.toString()]) {
			cell.innerHTML = data.linodes[id.toString()].label;
			return;
		}

		var callback = function(response)
		{
			data.linodes[response.id.toString()] = response;
			cell.innerHTML = response.label;
		};

		apiGet("/linode/instances/" + id, callback, null);
	};

	// Attach onload handler
	window.addEventListener("load", setup);
})();