feat: major enhancement — OS gallery, server rename, traffic chart, backups, VNC toggle, password reset, Redis caching, UX improvements
- Remove client IP removal capability (keep backend methods removed too) - Add copy-to-clipboard buttons for IP addresses with tooltip feedback - Replace OS dropdown with tile gallery (grouped, searchable, brand colors, EOL badges) in rebuild panel and checkout page - Add inline server rename with friendly name generator and RFC 1123 validation - Add traffic statistics canvas chart with responsive resize in resources panel - Add backup listing timeline in manage panel with show-all expansion - Add VNC enable/disable toggle with connection details and password copy - Add server root password reset with auto-clipboard copy (never displayed) - Add skeleton loading placeholders, action cooldowns (power 3s, rebuild 30s), progress indicator with elapsed timer - Sanitize all client-facing error messages (no raw API errors exposed) - Convert all state-mutating AJAX calls from GET to POST - Add explicit break after all output() calls in client.php - Add Redis-backed API response caching (Cache.php): OS templates 10min, traffic/backups 2min, currencies 30min, packages 10min - Add GitHub Actions workflow for weekly VirtFusion API change detection - Move cache busting step after semantic-release in publish workflow - Add endpoint doc generator script and OpenAPI baseline placeholder - Improve hostname generation entropy (bin2hex random_bytes) - Add .superpowers/ to .gitignore Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Prophet731
@@ -8,8 +8,38 @@
|
||||
* - Password reset
|
||||
* - Server rebuild
|
||||
* - OS template loading
|
||||
* - Traffic statistics
|
||||
* - Backup listing
|
||||
* - VNC management
|
||||
* - Server naming
|
||||
*/
|
||||
|
||||
// =========================================================================
|
||||
// Progress Indicator
|
||||
// =========================================================================
|
||||
|
||||
var _vfProgressTimer = null;
|
||||
|
||||
function vfShowProgress(label) {
|
||||
var startTime = Date.now();
|
||||
$("#vf-action-progress-text").text(label);
|
||||
$("#vf-action-progress-timer").text("0s");
|
||||
$("#vf-action-progress").show();
|
||||
|
||||
_vfProgressTimer = setInterval(function () {
|
||||
var elapsed = Math.floor((Date.now() - startTime) / 1000);
|
||||
$("#vf-action-progress-timer").text(elapsed + "s");
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function vfHideProgress() {
|
||||
if (_vfProgressTimer) {
|
||||
clearInterval(_vfProgressTimer);
|
||||
_vfProgressTimer = null;
|
||||
}
|
||||
$("#vf-action-progress").hide();
|
||||
}
|
||||
|
||||
function vfServerData(serviceId, systemUrl) {
|
||||
$("#vf-server-info-error").hide();
|
||||
$.ajax({
|
||||
@@ -18,7 +48,7 @@ function vfServerData(serviceId, systemUrl) {
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=serverData"
|
||||
}).done(function (response) {
|
||||
if (response.success) {
|
||||
$("#vf-data-server-name").text(response.data.name);
|
||||
$("#vf-rename-input").val(response.data.name);
|
||||
$("#vf-data-server-hostname").text(response.data.hostname);
|
||||
$("#vf-data-server-memory").text(response.data.memory);
|
||||
$("#vf-data-server-traffic").text(response.data.traffic);
|
||||
@@ -93,9 +123,7 @@ function vfServerData(serviceId, systemUrl) {
|
||||
$.each(ipv4Arr, function (i, ip) {
|
||||
var row = $('<div class="vf-ip-row"></div>');
|
||||
row.append('<span class="vf-ip-address">' + $('<span>').text(ip).html() + '</span>');
|
||||
if (i > 0) {
|
||||
row.append(' <button class="btn btn-sm btn-outline-danger vf-ip-remove" onclick="vfRemoveIP(\'' + serviceId + '\',\'' + systemUrl + '\',\'removeIPv4\',\'' + encodeURIComponent(ip) + '\')">Remove</button>');
|
||||
}
|
||||
row.append(vfCopyButton(ip));
|
||||
ipv4List.append(row);
|
||||
});
|
||||
} else {
|
||||
@@ -106,6 +134,7 @@ function vfServerData(serviceId, systemUrl) {
|
||||
$.each(ipv6Arr, function (i, subnet) {
|
||||
var row = $('<div class="vf-ip-row"></div>');
|
||||
row.append('<span class="vf-ip-address">' + $('<span>').text(subnet).html() + '</span>');
|
||||
row.append(vfCopyButton(subnet));
|
||||
ipv6List.append(row);
|
||||
});
|
||||
} else {
|
||||
@@ -148,7 +177,7 @@ function vfServerDataAdmin(serviceId, systemUrl) {
|
||||
$("#vf-server-info").show();
|
||||
} else {
|
||||
$("#vf-server-info-error").show();
|
||||
$("#vf-server-info-error-message").text(response.errors);
|
||||
$("#vf-server-info-error-message").text("Unable to retrieve server information.");
|
||||
$("#vf-server-info").hide();
|
||||
}
|
||||
}).fail(function () {
|
||||
@@ -163,7 +192,7 @@ function vfUserPasswordReset(serviceId, systemUrl) {
|
||||
$("#vf-password-reset-error").hide();
|
||||
$("#vf-password-reset-success").hide();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=resetPassword"
|
||||
}).done(function (response) {
|
||||
@@ -236,16 +265,17 @@ function vfPowerAction(serviceId, systemUrl, action) {
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=powerAction&powerAction=" + encodeURIComponent(action)
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=powerAction",
|
||||
data: { powerAction: action }
|
||||
}).done(function (response) {
|
||||
if (response.success) {
|
||||
alertDiv.removeClass("alert-danger").addClass("alert-success");
|
||||
alertDiv.text(response.data.message || (actionLabels[action] + " server..."));
|
||||
} else {
|
||||
alertDiv.removeClass("alert-success").addClass("alert-danger");
|
||||
alertDiv.text(response.errors || "Power action failed.");
|
||||
alertDiv.text("Power action failed. Please try again.");
|
||||
}
|
||||
alertDiv.show();
|
||||
}).fail(function () {
|
||||
@@ -254,30 +284,125 @@ function vfPowerAction(serviceId, systemUrl, action) {
|
||||
alertDiv.show();
|
||||
}).always(function () {
|
||||
spinner.hide();
|
||||
$(".vf-btn-power").prop("disabled", false);
|
||||
// Cooldown: keep buttons disabled for 3 seconds
|
||||
setTimeout(function () {
|
||||
$(".vf-btn-power").prop("disabled", false);
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
var vfOsBrandColors = {
|
||||
"ubuntu": "#E95420", "debian": "#A81D33", "rocky": "#10B981", "centos": "#932279",
|
||||
"almalinux": "#0F4266", "alma": "#0F4266", "windows": "#0078D4", "fedora": "#51A2DA",
|
||||
"arch": "#1793D1", "opensuse": "#73BA25", "suse": "#73BA25", "freebsd": "#AB2B28",
|
||||
"oracle": "#F80000", "rhel": "#EE0000", "red hat": "#EE0000", "cloudlinux": "#0095D9",
|
||||
"gentoo": "#54487A", "slackware": "#000", "nixos": "#7EBAE4", "alpine": "#0D597F"
|
||||
};
|
||||
|
||||
function vfGetBrandColor(name) {
|
||||
var lower = (name || "").toLowerCase();
|
||||
for (var key in vfOsBrandColors) {
|
||||
if (lower.indexOf(key) !== -1) return vfOsBrandColors[key];
|
||||
}
|
||||
return "#6c757d";
|
||||
}
|
||||
|
||||
function vfRenderOsGallery(container, data, hiddenInput) {
|
||||
var $container = $(container);
|
||||
$container.empty();
|
||||
|
||||
if (!data || !data.categories || data.categories.length === 0) {
|
||||
$container.append($('<p class="text-muted"></p>').text("No templates available"));
|
||||
$container.show();
|
||||
return;
|
||||
}
|
||||
|
||||
var baseUrl = data.baseUrl || "";
|
||||
|
||||
$.each(data.categories, function (ci, category) {
|
||||
var section = $('<div class="vf-os-category"></div>').attr("data-category", ci);
|
||||
var title = $('<h5 class="vf-os-category-title"></h5>').text(category.name);
|
||||
section.append(title);
|
||||
var grid = $('<div class="vf-os-grid"></div>');
|
||||
|
||||
$.each(category.templates, function (ti, tpl) {
|
||||
var label = tpl.name + (tpl.version ? " " + tpl.version : "") + (tpl.variant ? " " + tpl.variant : "");
|
||||
var brandColor = vfGetBrandColor(category.name || tpl.name);
|
||||
var card = $('<div class="vf-os-card"></div>')
|
||||
.attr("data-id", tpl.id)
|
||||
.attr("data-search", label.toLowerCase());
|
||||
if (tpl.eol) card.addClass("vf-os-card-eol");
|
||||
|
||||
var iconDiv = $('<div class="vf-os-icon"></div>').css("background", brandColor);
|
||||
if (tpl.icon && baseUrl) {
|
||||
var img = $('<img alt="">').attr("src", baseUrl + "/storage/os/" + encodeURIComponent(tpl.icon));
|
||||
img.on("error", function () {
|
||||
$(this).parent().empty().append($('<span></span>').text((tpl.name || "?")[0].toUpperCase()));
|
||||
});
|
||||
iconDiv.append(img);
|
||||
} else {
|
||||
iconDiv.append($('<span></span>').text((tpl.name || "?")[0].toUpperCase()));
|
||||
}
|
||||
|
||||
card.append(iconDiv);
|
||||
card.append($('<div class="vf-os-label"></div>').text(tpl.name));
|
||||
card.append($('<div class="vf-os-version"></div>').text((tpl.version || "") + (tpl.variant ? " " + tpl.variant : "")));
|
||||
if (tpl.eol) {
|
||||
card.append($('<span class="vf-os-eol-badge"></span>').text("EOL"));
|
||||
}
|
||||
|
||||
card.on("click", function () {
|
||||
$container.find(".vf-os-card").removeClass("vf-os-card-selected");
|
||||
$(this).addClass("vf-os-card-selected");
|
||||
$(hiddenInput).val(tpl.id);
|
||||
|
||||
var details = $("#vf-os-details");
|
||||
details.empty();
|
||||
details.append($('<strong></strong>').text(label));
|
||||
if (tpl.description) {
|
||||
details.append($('<p class="mb-0 mt-1 text-muted"></p>').text(tpl.description));
|
||||
}
|
||||
details.show();
|
||||
});
|
||||
|
||||
grid.append(card);
|
||||
});
|
||||
|
||||
section.append(grid);
|
||||
$container.append(section);
|
||||
});
|
||||
|
||||
$container.show();
|
||||
}
|
||||
|
||||
function vfLoadOsTemplates(serviceId, systemUrl) {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=osTemplates"
|
||||
}).done(function (response) {
|
||||
var select = $("#vf-rebuild-os");
|
||||
select.empty();
|
||||
if (response.success && response.data && response.data.length > 0) {
|
||||
select.append('<option value="">-- Select Operating System --</option>');
|
||||
$.each(response.data, function (i, template) {
|
||||
select.append('<option value="' + template.id + '">' + $('<span>').text(template.name).html() + '</option>');
|
||||
$("#vf-os-gallery-loader").hide();
|
||||
if (response.success && response.data) {
|
||||
vfRenderOsGallery("#vf-os-gallery", response.data, "#vf-rebuild-os");
|
||||
|
||||
// Bind search after gallery is rendered
|
||||
$("#vf-os-search").on("keyup", function () {
|
||||
var query = $(this).val().toLowerCase();
|
||||
$("#vf-os-gallery .vf-os-card").each(function () {
|
||||
var match = $(this).data("search").indexOf(query) !== -1;
|
||||
$(this).toggle(match);
|
||||
});
|
||||
$("#vf-os-gallery .vf-os-category").each(function () {
|
||||
var hasVisible = $(this).find(".vf-os-card:visible").length > 0;
|
||||
$(this).toggle(hasVisible);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
select.append('<option value="">No templates available</option>');
|
||||
$("#vf-os-gallery").append($('<p class="text-muted"></p>').text("No templates available")).show();
|
||||
}
|
||||
}).fail(function () {
|
||||
var select = $("#vf-rebuild-os");
|
||||
select.empty();
|
||||
select.append('<option value="">Error loading templates</option>');
|
||||
$("#vf-os-gallery-loader").hide();
|
||||
$("#vf-os-gallery").append($('<p class="text-danger"></p>').text("Error loading templates")).show();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -299,18 +424,20 @@ function vfRebuildServer(serviceId, systemUrl) {
|
||||
$("#vf-rebuild-button").prop("disabled", true);
|
||||
$("#vf-rebuild-spinner").show();
|
||||
alertDiv.hide();
|
||||
vfShowProgress("Rebuilding server...");
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=rebuild&osId=" + encodeURIComponent(osId)
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=rebuild",
|
||||
data: { osId: osId }
|
||||
}).done(function (response) {
|
||||
if (response.success) {
|
||||
alertDiv.removeClass("alert-danger").addClass("alert-success");
|
||||
alertDiv.text(response.data.message || "Server rebuild initiated. You will receive an email when the process is complete.");
|
||||
} else {
|
||||
alertDiv.removeClass("alert-success").addClass("alert-danger");
|
||||
alertDiv.text(response.errors || "Rebuild failed.");
|
||||
alertDiv.text("Rebuild failed. Please try again.");
|
||||
}
|
||||
alertDiv.show();
|
||||
}).fail(function () {
|
||||
@@ -318,8 +445,12 @@ function vfRebuildServer(serviceId, systemUrl) {
|
||||
alertDiv.text("An error occurred. Please try again.");
|
||||
alertDiv.show();
|
||||
}).always(function () {
|
||||
vfHideProgress();
|
||||
$("#vf-rebuild-spinner").hide();
|
||||
$("#vf-rebuild-button").prop("disabled", false);
|
||||
// Cooldown: keep button disabled for 30 seconds after rebuild
|
||||
setTimeout(function () {
|
||||
$("#vf-rebuild-button").prop("disabled", false);
|
||||
}, 30000);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -335,42 +466,6 @@ function impersonateServerOwner(serviceId, systemUrl) {
|
||||
});
|
||||
}
|
||||
|
||||
// =========================================================================
|
||||
// Network / IP Management
|
||||
// =========================================================================
|
||||
|
||||
function vfRemoveIP(serviceId, systemUrl, action, identifier) {
|
||||
if (!confirm("Are you sure you want to remove this IP address?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
var alertDiv = $("#vf-network-alert");
|
||||
alertDiv.hide();
|
||||
|
||||
var paramName = action === "removeIPv4" ? "ip" : "subnet";
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=" + encodeURIComponent(action) + "&" + paramName + "=" + identifier
|
||||
}).done(function (response) {
|
||||
if (response.success) {
|
||||
alertDiv.removeClass("alert-danger").addClass("alert-success");
|
||||
alertDiv.text(response.data.message || "IP address removed successfully.");
|
||||
alertDiv.show();
|
||||
vfServerData(serviceId, systemUrl);
|
||||
} else {
|
||||
alertDiv.removeClass("alert-success").addClass("alert-danger");
|
||||
alertDiv.text(response.errors || "Failed to remove IP address.");
|
||||
alertDiv.show();
|
||||
}
|
||||
}).fail(function () {
|
||||
alertDiv.removeClass("alert-success").addClass("alert-danger");
|
||||
alertDiv.text("An error occurred. Please try again.");
|
||||
alertDiv.show();
|
||||
});
|
||||
}
|
||||
|
||||
// =========================================================================
|
||||
// VNC Console
|
||||
// =========================================================================
|
||||
@@ -420,7 +515,7 @@ function vfOpenVnc(serviceId, systemUrl) {
|
||||
} else {
|
||||
vncWindow.close();
|
||||
alertDiv.removeClass("alert-success").addClass("alert-danger");
|
||||
alertDiv.text(response.errors || "VNC console is not available.");
|
||||
alertDiv.text("VNC console is not available.");
|
||||
alertDiv.show();
|
||||
}
|
||||
}).fail(function () {
|
||||
@@ -434,6 +529,61 @@ function vfOpenVnc(serviceId, systemUrl) {
|
||||
});
|
||||
}
|
||||
|
||||
function vfToggleVnc(serviceId, systemUrl, enabled) {
|
||||
var toggle = $("#vf-vnc-toggle");
|
||||
toggle.prop("disabled", true);
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=toggleVnc",
|
||||
data: { enabled: enabled ? "1" : "0" }
|
||||
}).done(function (response) {
|
||||
if (response.success) {
|
||||
if (enabled && response.data) {
|
||||
var data = response.data.data || response.data;
|
||||
if (data.ip || data.host) {
|
||||
$("#vf-vnc-ip").text(data.ip || data.host || "-");
|
||||
$("#vf-vnc-port").text(data.port || "-");
|
||||
$("#vf-vnc-details").show();
|
||||
}
|
||||
} else {
|
||||
$("#vf-vnc-details").hide();
|
||||
}
|
||||
} else {
|
||||
toggle.prop("checked", !enabled);
|
||||
}
|
||||
}).fail(function () {
|
||||
toggle.prop("checked", !enabled);
|
||||
}).always(function () {
|
||||
toggle.prop("disabled", false);
|
||||
});
|
||||
}
|
||||
|
||||
function vfCopyVncPassword(serviceId, systemUrl) {
|
||||
var confirmSpan = $("#vf-vnc-copy-confirm");
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=vnc"
|
||||
}).done(function (response) {
|
||||
if (response.success && response.data) {
|
||||
var data = response.data.data || response.data;
|
||||
var password = data.password || "";
|
||||
if (password) {
|
||||
navigator.clipboard.writeText(password).then(function () {
|
||||
confirmSpan.text("Copied!").show();
|
||||
setTimeout(function () { confirmSpan.hide(); }, 2000);
|
||||
}).catch(function () {
|
||||
confirmSpan.text("Copy failed").show();
|
||||
setTimeout(function () { confirmSpan.hide(); }, 2000);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// =========================================================================
|
||||
// Self Service — Credit & Usage
|
||||
// =========================================================================
|
||||
@@ -524,9 +674,10 @@ function vfAddCredit(serviceId, systemUrl) {
|
||||
alertDiv.hide();
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=selfServiceAddCredit&tokens=" + encodeURIComponent(amount)
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=selfServiceAddCredit",
|
||||
data: { tokens: amount }
|
||||
}).done(function (response) {
|
||||
if (response.success) {
|
||||
alertDiv.removeClass("alert-danger").addClass("alert-success");
|
||||
@@ -537,7 +688,7 @@ function vfAddCredit(serviceId, systemUrl) {
|
||||
vfLoadSelfServiceUsage(serviceId, systemUrl);
|
||||
} else {
|
||||
alertDiv.removeClass("alert-success").addClass("alert-danger");
|
||||
alertDiv.text(response.errors || "Failed to add credit.");
|
||||
alertDiv.text("Failed to add credit. Please try again.");
|
||||
alertDiv.show();
|
||||
}
|
||||
}).fail(function () {
|
||||
@@ -549,3 +700,331 @@ function vfAddCredit(serviceId, systemUrl) {
|
||||
btn.prop("disabled", false);
|
||||
});
|
||||
}
|
||||
|
||||
// =========================================================================
|
||||
// Server Password Reset
|
||||
// =========================================================================
|
||||
|
||||
function vfResetServerPassword(serviceId, systemUrl) {
|
||||
if (!confirm("Are you sure you want to reset the server root password? This will change the password immediately.")) {
|
||||
return;
|
||||
}
|
||||
|
||||
var btn = $("#vf-server-password-btn");
|
||||
var spinner = $("#vf-server-password-spinner");
|
||||
var alertDiv = $("#vf-server-password-alert");
|
||||
|
||||
btn.prop("disabled", true);
|
||||
spinner.show();
|
||||
alertDiv.hide();
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=resetServerPassword"
|
||||
}).done(function (response) {
|
||||
if (response.success && response.data) {
|
||||
var data = response.data.data || response.data;
|
||||
var password = data.password || data.newPassword || "";
|
||||
if (password) {
|
||||
navigator.clipboard.writeText(password).then(function () {
|
||||
alertDiv.removeClass("alert-danger").addClass("alert alert-success");
|
||||
alertDiv.text("New password copied to clipboard.");
|
||||
alertDiv.show();
|
||||
}).catch(function () {
|
||||
alertDiv.removeClass("alert-danger").addClass("alert alert-warning");
|
||||
alertDiv.text("Password reset successful. Unable to copy to clipboard automatically.");
|
||||
alertDiv.show();
|
||||
});
|
||||
} else {
|
||||
alertDiv.removeClass("alert-danger").addClass("alert alert-success");
|
||||
alertDiv.text("Password reset initiated. Check your email for the new credentials.");
|
||||
alertDiv.show();
|
||||
}
|
||||
} else {
|
||||
alertDiv.removeClass("alert-success").addClass("alert alert-danger");
|
||||
alertDiv.text("Password reset failed. Please try again.");
|
||||
alertDiv.show();
|
||||
}
|
||||
}).fail(function () {
|
||||
alertDiv.removeClass("alert-success").addClass("alert alert-danger");
|
||||
alertDiv.text("An error occurred. Please try again.");
|
||||
alertDiv.show();
|
||||
}).always(function () {
|
||||
spinner.hide();
|
||||
btn.prop("disabled", false);
|
||||
});
|
||||
}
|
||||
|
||||
// =========================================================================
|
||||
// Backup Listing
|
||||
// =========================================================================
|
||||
|
||||
function vfLoadBackups(serviceId, systemUrl) {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=backups"
|
||||
}).done(function (response) {
|
||||
if (response.success && response.data) {
|
||||
var backups = response.data.data || response.data;
|
||||
if (!Array.isArray(backups)) backups = [];
|
||||
|
||||
if (backups.length > 0) {
|
||||
var timeline = $("#vf-backups-timeline");
|
||||
timeline.empty();
|
||||
|
||||
$.each(backups, function (i, backup) {
|
||||
var rawDate = backup.created_at || backup.date || "";
|
||||
var date = rawDate;
|
||||
try { if (rawDate) date = new Date(rawDate).toLocaleString(); } catch (e) {}
|
||||
var size = backup.size ? (backup.size >= 1024 ? (backup.size / 1024).toFixed(2) + " GB" : backup.size + " MB") : "-";
|
||||
var status = backup.status || "completed";
|
||||
var dotClass = status === "completed" ? "vf-timeline-dot-success" : "vf-timeline-dot-pending";
|
||||
|
||||
var item = $('<div class="vf-timeline-item"></div>');
|
||||
if (i >= 10) item.addClass("vf-timeline-item-hidden").hide();
|
||||
item.append('<div class="vf-timeline-dot ' + dotClass + '"></div>');
|
||||
item.append($('<div class="vf-timeline-content"></div>')
|
||||
.append($('<div class="vf-bold"></div>').text(date))
|
||||
.append($('<div class="text-muted"></div>').text("Size: " + size + " | Status: " + status))
|
||||
);
|
||||
timeline.append(item);
|
||||
});
|
||||
|
||||
if (backups.length > 10) {
|
||||
$("#vf-backups-show-all").show();
|
||||
}
|
||||
|
||||
$("#vf-backups-section").show();
|
||||
}
|
||||
}
|
||||
}).always(function () {
|
||||
$("#vf-backups-loader").hide();
|
||||
});
|
||||
}
|
||||
|
||||
// =========================================================================
|
||||
// Traffic Statistics Chart
|
||||
// =========================================================================
|
||||
|
||||
function vfDrawTrafficChart(canvasId, entries) {
|
||||
var canvas = document.getElementById(canvasId);
|
||||
if (!canvas || !canvas.getContext) return;
|
||||
|
||||
var dpr = window.devicePixelRatio || 1;
|
||||
var rect = canvas.parentElement.getBoundingClientRect();
|
||||
canvas.width = rect.width * dpr;
|
||||
canvas.height = 200 * dpr;
|
||||
canvas.style.height = "200px";
|
||||
canvas.style.width = "100%";
|
||||
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.scale(dpr, dpr);
|
||||
var w = rect.width;
|
||||
var h = 200;
|
||||
|
||||
if (!entries || entries.length === 0) {
|
||||
ctx.fillStyle = "#888";
|
||||
ctx.font = "13px sans-serif";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText("No traffic data available", w / 2, h / 2);
|
||||
return;
|
||||
}
|
||||
|
||||
var maxVal = 0;
|
||||
entries.forEach(function (e) {
|
||||
var total = (e.inbound || 0) + (e.outbound || 0);
|
||||
if (total > maxVal) maxVal = total;
|
||||
});
|
||||
if (maxVal === 0) maxVal = 1;
|
||||
|
||||
var padding = { top: 10, right: 10, bottom: 30, left: 50 };
|
||||
var chartW = w - padding.left - padding.right;
|
||||
var chartH = h - padding.top - padding.bottom;
|
||||
var barGroupW = chartW / entries.length;
|
||||
var barW = Math.max(4, (barGroupW * 0.35));
|
||||
|
||||
// Y axis
|
||||
ctx.strokeStyle = "#dee2e6";
|
||||
ctx.lineWidth = 1;
|
||||
for (var i = 0; i <= 4; i++) {
|
||||
var y = padding.top + chartH - (chartH * i / 4);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding.left, y);
|
||||
ctx.lineTo(w - padding.right, y);
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = "#888";
|
||||
ctx.font = "10px sans-serif";
|
||||
ctx.textAlign = "right";
|
||||
var labelVal = (maxVal * i / 4);
|
||||
ctx.fillText(labelVal >= 1024 ? (labelVal / 1024).toFixed(1) + " TB" : labelVal.toFixed(0) + " GB", padding.left - 5, y + 3);
|
||||
}
|
||||
|
||||
entries.forEach(function (e, idx) {
|
||||
var inVal = e.inbound || 0;
|
||||
var outVal = e.outbound || 0;
|
||||
var inH = (inVal / maxVal) * chartH;
|
||||
var outH = (outVal / maxVal) * chartH;
|
||||
var x = padding.left + idx * barGroupW + (barGroupW - barW * 2 - 2) / 2;
|
||||
|
||||
ctx.fillStyle = "#337ab7";
|
||||
ctx.fillRect(x, padding.top + chartH - inH, barW, inH);
|
||||
|
||||
ctx.fillStyle = "#28a745";
|
||||
ctx.fillRect(x + barW + 2, padding.top + chartH - outH, barW, outH);
|
||||
|
||||
// X label
|
||||
ctx.fillStyle = "#888";
|
||||
ctx.font = "10px sans-serif";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(e.label || (idx + 1), padding.left + idx * barGroupW + barGroupW / 2, h - 8);
|
||||
});
|
||||
|
||||
// Legend
|
||||
ctx.fillStyle = "#337ab7";
|
||||
ctx.fillRect(padding.left, h - 15, 10, 10);
|
||||
ctx.fillStyle = "#888";
|
||||
ctx.font = "10px sans-serif";
|
||||
ctx.textAlign = "left";
|
||||
ctx.fillText("In", padding.left + 14, h - 6);
|
||||
ctx.fillStyle = "#28a745";
|
||||
ctx.fillRect(padding.left + 32, h - 15, 10, 10);
|
||||
ctx.fillStyle = "#888";
|
||||
ctx.fillText("Out", padding.left + 46, h - 6);
|
||||
}
|
||||
|
||||
function vfLoadTrafficStats(serviceId, systemUrl) {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=trafficStats"
|
||||
}).done(function (response) {
|
||||
if (response.success && response.data) {
|
||||
var data = response.data.data || response.data;
|
||||
var entries = data.entries || data.traffic || [];
|
||||
var used = data.used || data.totalUsed || 0;
|
||||
var limit = data.limit || data.allowance || 0;
|
||||
|
||||
if (entries.length > 0 || used > 0) {
|
||||
vfDrawTrafficChart("vf-traffic-chart", entries);
|
||||
$("#vf-traffic-used").text(used >= 1024 ? (used / 1024).toFixed(2) + " TB" : used + " GB");
|
||||
$("#vf-traffic-limit").text(limit > 0 ? (limit >= 1024 ? (limit / 1024).toFixed(2) + " TB" : limit + " GB") : "Unlimited");
|
||||
var remaining = limit > 0 ? Math.max(0, limit - used) : 0;
|
||||
$("#vf-traffic-remaining").text(limit > 0 ? (remaining >= 1024 ? (remaining / 1024).toFixed(2) + " TB" : remaining + " GB") : "-");
|
||||
$("#vf-traffic-chart-section").show();
|
||||
|
||||
// Debounced resize redraw
|
||||
var resizeTimer;
|
||||
$(window).on("resize.vfTraffic", function () {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(function () {
|
||||
vfDrawTrafficChart("vf-traffic-chart", entries);
|
||||
}, 250);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// =========================================================================
|
||||
// Server Naming
|
||||
// =========================================================================
|
||||
|
||||
function vfGenerateFriendlyName() {
|
||||
var adjectives = ["swift","bold","calm","keen","fair","brave","cool","sage","free","warm"];
|
||||
var nouns = ["cloud","node","core","link","bolt","wave","star","peak","edge","dock"];
|
||||
var adj = adjectives[Math.floor(Math.random() * adjectives.length)];
|
||||
var noun = nouns[Math.floor(Math.random() * nouns.length)];
|
||||
var num = String(Math.floor(Math.random() * 90) + 10);
|
||||
return adj + "-" + noun + "-" + num;
|
||||
}
|
||||
|
||||
function vfShowNameDropdown(serviceId, systemUrl) {
|
||||
var dropdown = $("#vf-name-dropdown");
|
||||
dropdown.empty();
|
||||
|
||||
for (var i = 0; i < 4; i++) {
|
||||
var name = vfGenerateFriendlyName();
|
||||
var opt = $('<div class="vf-name-option"></div>').text(name);
|
||||
(function (n) {
|
||||
opt.on("click", function () {
|
||||
$("#vf-rename-input").val(n);
|
||||
dropdown.hide();
|
||||
});
|
||||
})(name);
|
||||
dropdown.append(opt);
|
||||
}
|
||||
|
||||
var refreshBtn = $('<div class="vf-name-option text-muted" style="text-align:center;cursor:pointer;">↻ More options</div>');
|
||||
refreshBtn.on("click", function () {
|
||||
vfShowNameDropdown(serviceId, systemUrl);
|
||||
});
|
||||
dropdown.append(refreshBtn);
|
||||
dropdown.show();
|
||||
}
|
||||
|
||||
function vfRenameServer(serviceId, systemUrl) {
|
||||
var name = $("#vf-rename-input").val().trim().toLowerCase();
|
||||
var alertDiv = $("#vf-rename-alert");
|
||||
alertDiv.hide();
|
||||
|
||||
if (!name || !/^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/.test(name)) {
|
||||
alertDiv.removeClass("alert-success").addClass("alert alert-danger");
|
||||
alertDiv.text("Invalid name. Use lowercase letters, numbers, and hyphens (2-63 chars, must start/end with alphanumeric).");
|
||||
alertDiv.show();
|
||||
return;
|
||||
}
|
||||
|
||||
var btn = $("#vf-rename-save");
|
||||
btn.prop("disabled", true);
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
url: systemUrl + "modules/servers/VirtFusionDirect/client.php?serviceID=" + encodeURIComponent(serviceId) + "&action=rename",
|
||||
data: { name: name }
|
||||
}).done(function (response) {
|
||||
if (response.success) {
|
||||
alertDiv.removeClass("alert-danger").addClass("alert alert-success");
|
||||
alertDiv.text("Server renamed successfully.");
|
||||
} else {
|
||||
alertDiv.removeClass("alert-success").addClass("alert alert-danger");
|
||||
alertDiv.text("Rename failed. Please try again.");
|
||||
}
|
||||
alertDiv.show();
|
||||
}).fail(function () {
|
||||
alertDiv.removeClass("alert-success").addClass("alert alert-danger");
|
||||
alertDiv.text("An error occurred. Please try again.");
|
||||
alertDiv.show();
|
||||
}).always(function () {
|
||||
btn.prop("disabled", false);
|
||||
setTimeout(function () { alertDiv.fadeOut(); }, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
// =========================================================================
|
||||
// Utility — Copy to Clipboard
|
||||
// =========================================================================
|
||||
|
||||
function vfCopyButton(text) {
|
||||
var btn = $('<button type="button" class="btn btn-sm vf-ip-copy" title="Copy"></button>');
|
||||
btn.html('<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6z"/><path d="M2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2z"/></svg>');
|
||||
btn.on("click", function () {
|
||||
var $this = $(this);
|
||||
navigator.clipboard.writeText(text).then(function () {
|
||||
$this.html('<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M13.485 1.929a.75.75 0 0 1 .086 1.057l-7.5 9a.75.75 0 0 1-1.1.043l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.915 2.915 6.982-8.382a.75.75 0 0 1 1.057-.073z"/></svg>');
|
||||
var tooltip = $('<span class="vf-copy-tooltip">Copied!</span>');
|
||||
$this.parent().append(tooltip);
|
||||
setTimeout(function () {
|
||||
tooltip.remove();
|
||||
$this.html('<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M4 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6z"/><path d="M2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2z"/></svg>');
|
||||
}, 1500);
|
||||
}).catch(function () {
|
||||
var tooltip = $('<span class="vf-copy-tooltip" style="background:#dc3545;">Failed</span>');
|
||||
$this.parent().append(tooltip);
|
||||
setTimeout(function () { tooltip.remove(); }, 1500);
|
||||
});
|
||||
});
|
||||
return btn;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user