lxd-dashboard/admin/instance.html
matthewalanpenning 6734caf945 v1.1.0
2020-10-14 12:17:51 -04:00

1192 lines
No EOL
50 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="theme/images/cube.png">
<title>LXDWARE</title>
<!-- Custom fonts for this template-->
<link href="theme/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="theme/css/sb-admin-2.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-dark sidebar sidebar-dark accordion" id="accordionSidebar">
<div id="sidebarLinks"></div>
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown no-arrow" id="remoteListNav">
</li>
<li class="nav-item dropdown no-arrow" id="projectListNav">
</li>
<li>
<div class="nav-item spinner-grow text-primary m-3" role="status" style="display:none;" id="spinner">
<span class="nav-item sr-only">Loading...</span>
</div>
</li>
<li class="nav-item dropdown no-arrow" id="notificationArea" style="display: none;">
<div class="nav-link dropdown-toggle">
<span id="notification" class="mr-2 d-none d-lg-inline text-gray-600 small">Notification</span>
</div>
</li>
<div class="topbar-divider d-none d-sm-block"></div>
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Admin</span>
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="index.html">
<i class="fas fa-server fa-sm fa-fw mr-2 text-gray-400"></i>
Hosts
</a>
<a class="dropdown-item" href="#" onclick="logout()">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- BreadCrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" id="remoteBreadCrumb"></a></li>
<li class="breadcrumb-item"><a href="#" id="instancesBreadCrumb"></a></li>
<li class="breadcrumb-item active" aria-current="page" id="instanceBreadCrumb"></li>
</ol>
</nav>
<div class="row">
<div class="col-12">
<!-- Instance Details -->
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Details</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" role="button" id="startLink" onclick="startInstance()" style="display: none;">
<i class="fas fa-play fa-sm fa-fw"></i> Start
</a>
<a class="dropdown-toggle" href="#" role="button" id="stopLink" onclick="stopInstance()" style="display: none;">
<i class="fas fa-stop fa-sm fa-fw"></i> Stop
</a>
<a class="dropdown-toggle" href="#" role="button" id="unfreezeLink" onclick="unfreezeInstance()" style="display: none;">
<i class="fas fa-pause fa-sm fa-fw"></i> Unfreeze
</a>
<span>&nbsp; | &nbsp;</span>
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-cog fa-sm fa-fw"></i> Actions
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
<!--<div class="dropdown-header">Options:</div>-->
<a class="dropdown-item" href="#" onclick="restartInstance()" id="restartInstanceOption">Restart</a>
<a class="dropdown-item" href="#" onclick="forceStopInstance()" id="forceStopInstanceOption">Kill</a>
<a class="dropdown-item" href="#" onclick="freezeInstance()" id="freezeInstanceOption">Freeze</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#renameInstanceModal" id="renameInstanceOption">Rename</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#copyInstanceModal" id="copyInstanceOption">Copy</a>
<a class="dropdown-item" href="#" onclick="initializeCreateBackup()" id="backupInstanceOption">Backup</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#publishInstanceModal" id="publishInstanceOption">Publish</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#deleteInstanceModal" id="deleteInstanceOption">Delete</a>
</div>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<div id="instanceInfo"></div>
</div>
</div>
<!-- End Instance Details -->
</div>
<div class="col-12">
<a id="snapshots"></a>
<!-- Snapshot List -->
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Snapshots</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" data-toggle="modal" data-target="#snapshotInstanceModal">
<i class="fas fa-plus fa-sm fa-fw"></i>
New Snapshot
</a>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="table-responsive">
<table class="table" id="snapshotTableList" width="100%" cellspacing="0">
</table>
</div>
</div>
</div>
<!-- End Snapshot List -->
</div>
<div class="col-12">
<a id="profiles"></a>
<!-- Profile List -->
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Profiles</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" data-toggle="modal" data-target="#attachProfileModal">
<i class="fas fa-plus fa-sm fa-fw"></i>
Attach Profile
</a>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="table-responsive">
<table class="table" id="profileTableList" width="100%" cellspacing="0">
</table>
</div>
</div>
</div>
<!-- End Profile List -->
</div>
<div class="col-12">
<a id="networkDevices"></a>
<!-- Network Devices List -->
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Network Devices</h6>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="table-responsive">
<table class="table" id="networkDeviceTableList" width="100%" cellspacing="0">
</table>
</div>
</div>
</div>
<!-- End Network Devices ist -->
</div>
<div class="col-12">
<a id="diskDevices"></a>
<!-- Disk Device List -->
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Disk Devices</h6>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="table-responsive">
<table class="table" id="diskDeviceTableList" width="100%" cellspacing="0">
</table>
</div>
</div>
</div>
<!-- End Disk Device ist -->
</div>
<div class="col-12">
<a id="proxyDevices"></a>
<!-- Proxy Device List -->
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Proxy Devices</h6>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="table-responsive">
<table class="table" id="proxyDeviceTableList" width="100%" cellspacing="0">
</table>
</div>
</div>
</div>
<!-- End Proxy Device ist -->
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright &copy; lxdware.com 2020</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- New Snapshot Modal-->
<div class="modal fade" id="snapshotInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create Snapshot</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="col-4 col-form-label text-right">Name: </label>
<div class="col-8">
<div class="form-group">
<input type="text" id="snapshotName" class="form-control" placeholder="Snapshot Name" name="snapshot">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#" onclick="snapshotInstance()" data-dismiss="modal">Ok</a>
</div>
</div>
</div>
</div>
<!-- Rename Instance Modal-->
<div class="modal fade" id="renameInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Rename Instance</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="col-4 col-form-label text-right">Name:</label>
<div class="col-8">
<div class="form-group">
<input type="text" id="newInstanceName" class="form-control" placeholder="Instance name">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#" onclick="renameInstance()" data-dismiss="modal">Ok</a>
</div>
</div>
</div>
</div>
<!-- Migrate Instance Modal-->
<div class="modal fade" id="migrateInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Migrate Instance</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="col-4 col-form-label text-right">Destination:</label>
<div class="col-8">
<div class="form-group">
<input type="text" id="migrateDestination" class="form-control" placeholder="Destination Host">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#" onclick="migrateInstance()" data-dismiss="modal">Ok</a>
</div>
</div>
</div>
</div>
<!-- Copy Instance Modal-->
<div class="modal fade" id="copyInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Copy Instance</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="col-3 col-form-label text-right">Name:</label>
<div class="col-9">
<div class="form-group">
<input type="text" id="copyName" class="form-control" placeholder="Instance name" name="copy">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#" onclick="copyInstance()" data-dismiss="modal">Ok</a>
</div>
</div>
</div>
</div>
<!-- Backup Instance Modal-->
<div class="modal fade" id="backupInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Backup Instance</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="col-3 col-form-label text-right">Name:</label>
<div class="col-9">
<div class="form-group">
<input type="text" id="backupName" class="form-control" placeholder="Backup name" name="copy">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#" onclick="createBackup()" data-dismiss="modal">Ok</a>
</div>
</div>
</div>
</div>
<!-- Delete Instance Modal-->
<div class="modal fade" id="deleteInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Instance</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Are you sure you want to delete this instance?</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#" onclick="deleteInstance()" data-dismiss="modal">Yes</a>
</div>
</div>
</div>
</div>
<!-- Attach Profile Modal-->
<div class="modal fade" id="attachProfileModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Attach Profile</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="col-2 col-form-label text-right">Profile:</label>
<div class="col-9">
<div class="form-group">
<select id="selectProfileInput" class="form-control" name="profile">
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#" onclick="attachProfile()" data-dismiss="modal">Ok</a>
</div>
</div>
</div>
</div>
<!-- Publish Instance Modal-->
<div class="modal fade" id="publishInstanceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Publish Instance</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="col-3 col-form-label text-right">Description: </label>
<div class="col-9">
<div class="form-group">
<input type="text" id="publishInstanceDescriptionInput" class="form-control" placeholder="Enter Description" name="description">
</div>
</div>
</div>
<div class="row">
<label class="col-3 col-form-label text-right">Public:</label>
<div class="col-9">
<div class="form-group">
<select id="publishInstancePublicInput" class="form-control" name="public">
<option value="false" selected>false</option>
<option value="true">true</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="#" onclick="publishInstance()" data-dismiss="modal">Ok</a>
</div>
</div>
</div>
</div>
<!-- Load Log Modal-->
<div class="modal fade" id="loadLogModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Log Contents</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="col-12 col-form-label" id="logNameInput"></label>
<div class="col-12">
<div class="form-group text-right">
<pre>
<textarea name="log_data" class="form-control" id="logDataInput" rows="16" ></textarea>
</pre>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Load Backup Modal-->
<div class="modal fade" id="loadBackupModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Backup Contents</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="col-12 col-form-label" id="backupNameInput"></label>
<div class="col-12">
<div class="form-group text-right">
<pre>
<textarea name="backup_data" class="form-control" id="backupDataInput" rows="16" ></textarea>
</pre>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-warning" onclick="deleteBackup()" type="button" data-dismiss="modal">Delete</button>
<button class="btn btn-primary" onclick="downloadBackup()" type="button" data-dismiss="modal">Download</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="theme/vendor/jquery/jquery.min.js"></script>
<script src="theme/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="theme/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="theme/js/sb-admin-2.min.js"></script>
</body>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const remoteName = urlParams.get('remote');
const instanceName = urlParams.get('instance');
const projectName = urlParams.get('project');
var operationNumbers = [];
var instanceDetails = "";
var snapshotDetails = "";
var networkDeviceDetails = "";
var diskDeviceDetails = "";
var proxyDeviceDetails = "";
var profileDetails = "";
var redirectURL = "";
function logout(){
var http = new XMLHttpRequest();
http.open("get", "../admin", false, "null", "null");
http.send("");
window.location.replace("../index.html");
}
function displayMenuOptions(data){
jsonData = JSON.parse(data);
switch (jsonData.metadata.status){
case "Stopped":
$('#startLink').show();
$('#stopLink').hide();
$('#restartInstanceOption').hide();
$('#forceStopInstanceOption').hide();
$('#freezeInstanceOption').hide();
$('#unfreezeLink').hide();
$('#renameInstanceOption').show();
$('#copyInstanceOption').show();
$('#publishInstanceOption').show();
$('#deleteInstanceOption').show();
break;
case "Frozen":
$('#startLink').hide();
$('#stopLink').hide();
$('#restartInstanceOption').hide();
$('#forceStopInstanceOption').hide();
$('#freezeInstanceOption').hide();
$('#unfreezeLink').show();
$('#renameInstanceOption').hide();
$('#copyInstanceOption').show();
$('#publishInstanceOption').hide();
$('#deleteInstanceOption').hide();
break;
default:
$('#startLink').hide();
$('#stopLink').show();
$('#restartInstanceOption').show();
$('#forceStopInstanceOption').show();
$('#freezeInstanceOption').show();
$('#unfreezeLink').hide();
$('#renameInstanceOption').hide();
$('#copyInstanceOption').hide();
$('#publishInstanceOption').hide();
$('#deleteInstanceOption').hide();
}
}
function operationStatusCheck(){
operationNumbers = operationNumbers.filter(function(e){return e});
var numberOfOperations = operationNumbers.length;
if (numberOfOperations > 0){
$('#spinner').show();
for (i = 0; i < numberOfOperations; i++){
var elementNumber = i;
$.get("./php/lxd/operation-status.php?remote=" + encodeURI(remoteName) + "&id=" + encodeURI(operationNumbers[elementNumber]) , function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.error_code == 404) {
operationNumbers[elementNumber] = undefined;
if (redirectURL != ""){
window.location.replace(redirectURL);
}
reloadPageContent();
}
if (operationData.status_code == 200) {
if (operationData.metadata.status_code == 103){
$('#notificationArea').show();
$('#notification').text(operationData.metadata.description);
}
if (operationData.metadata.status_code == 200){
operationNumbers[elementNumber] = undefined;
if (redirectURL != ""){
window.location.replace(redirectURL);
}
reloadPageContent();
}
if (operationData.metadata.status_code >= 400){
operationNumbers[elementNumber] = undefined;
alert(operationData.metadata.err);
reloadPageContent();
}
}
});
}
setTimeout(() => { operationStatusCheck(); }, 4000);
}
else {
$('#spinner').hide();
$('#notificationArea').hide();
$('#notification').text("");
}
}
function loadPageContent(){
//Check Authorization
$.get("./php/auth/auth-check.php", function (data) {
if(data != "true"){
window.location.replace("../index.html");
}
});
//Display instance menu options based on state
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&action=status", displayMenuOptions)
//Load the basic info for the instance card if changed
$.get("./php/lxd/instance-single.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (instanceDetails != data){
$("#instanceInfo").html(data);
instanceDetails = data;
}
});
//Load the snapshot info for the snapshot card if changed
$.get("./php/lxd/instance-single-snapshot-list.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (snapshotDetails != data){
$("#snapshotTableList").html(data);
snapshotDetails = data;
}
});
//Load the network info for the network interfaces card if changed
$.get("./php/lxd/instance-single-network-list.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (networkDeviceDetails != data){
$("#networkDeviceTableList").html(data);
networkDeviceDetails = data;
}
});
//Load the disk info for the disk devices card if changed
$.get("./php/lxd/instance-single-disk-list.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (diskDeviceDetails != data){
$("#diskDeviceTableList").html(data);
diskDeviceDetails = data;
}
});
//Load the proxy info for the proxy devices card if changed
$.get("./php/lxd/instance-single-proxy-list.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (proxyDeviceDetails != data){
$("#proxyDeviceTableList").html(data);
proxyDeviceDetails = data;
}
});
//Load the profile info for the profile card if changed
$.get("./php/lxd/instance-single-profile-list.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (profileDetails != data){
$("#profileTableList").html(data);
profileDetails = data;
}
});
}
function reloadPageContent(){
//Display instance menu options based on state
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&action=status", displayMenuOptions)
//Load the basic info for the instance card if changed
$.get("./php/lxd/instance-single.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (instanceDetails != data){
$("#instanceInfo").html(data);
instanceDetails = data;
}
});
//Load the snapshot info for the snapshot card if changed
$.get("./php/lxd/instance-single-snapshot-list.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (snapshotDetails != data){
$("#snapshotTableList").html(data);
snapshotDetails = data;
}
});
//Load the network info for the network interfaces card if changed
$.get("./php/lxd/instance-single-network-list.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (networkDeviceDetails != data){
$("#networkDeviceTableList").html(data);
networkDeviceDetails = data;
}
});
//Load the disk info for the disk devices card if changed
$.get("./php/lxd/instance-single-disk-list.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (diskDeviceDetails != data){
$("#diskDeviceTableList").html(data);
diskDeviceDetails = data;
}
});
//Load the proxy info for the proxy devices card if changed
$.get("./php/lxd/instance-single-proxy-list.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (proxyDeviceDetails != data){
$("#proxyDeviceTableList").html(data);
proxyDeviceDetails = data;
}
});
//Load the profile info for the profile card if changed
$.get("./php/lxd/instance-single-profile-list.php?instance=" + encodeURI(instanceName) + "&remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName), function (data) {
if (profileDetails != data){
$("#profileTableList").html(data);
profileDetails = data;
}
});
}
function startInstance(){
console.log("Info: starting instance " + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&action=startInstance", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function stopInstance(){
console.log("Info: stoping instance" + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&action=stopInstance", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function forceStopInstance(){
console.log("Info: forcefully stoping instance" + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&action=forceStopInstance", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function restartInstance(){
console.log("Info: restarting instance" + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&action=restartInstance", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
});
}
function freezeInstance(){
console.log("Info: freezing instance" + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&action=freezeInstance", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function unfreezeInstance(){
console.log("Info: unfreezing instance" + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&action=unfreezeInstance", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function snapshotInstance(){
var snapshotName = $("#snapshotName").val();
console.log("Info: creating snapshot " + snapshotName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&name=" + encodeURI(snapshotName) + "&action=snapshotInstance", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function renameInstance(){
var newInstanceName = $("#newInstanceName").val();
console.log("Info: renaming instance " + instanceName + " to " + newInstanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&name=" + encodeURI(newInstanceName) + "&action=renameInstance", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
redirectURL = "instance.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(newInstanceName);
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function copyInstance(){
var copyName = $("#copyName").val();
console.log("Info: copying instance " + instanceName + " to " + copyName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&name=" + encodeURI(copyName) + "&action=copyInstance", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function deleteInstance(){
console.log("Info: deleting instance " + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&action=deleteInstance", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
redirectURL = "instances.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName)
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err)
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function attachProfile(){
var profileName = $("#selectProfileInput").val();
console.log("Info: attaching profile " + profileName + " to instance " + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&name=" + encodeURI(profileName) + "&action=attachProfile", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.error_code >= 400){
alert(operationData.error);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function detachProfile(profileName){
console.log("Info: detaching profile " + profileName + " from instance " + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&name=" + encodeURI(profileName) + "&action=detachProfile", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.error_code >= 400){
alert(operationData.error);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function restoreSnapshot(snapshotName){
console.log("Info: restoring snapshot " + snapshotName + " to instance " + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&name=" + encodeURI(snapshotName) + "&action=restoreSnapshot", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.error_code >= 400){
alert(operationData.error);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function deleteSnapshot(snapshotName){
console.log("Info: deleting snapshot " + snapshotName + " from instance " + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&name=" + encodeURI(snapshotName) + "&action=deleteSnapshot", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.error_code >= 400){
alert(operationData.error);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function publishInstance(){
var description = $("#publishInstanceDescriptionInput").val();
var publicDownload = $("#publishInstancePublicInput").val();
console.log("Info: publishing instance " + instanceName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&description=" + encodeURI(description) + "&public=" + encodeURI(publicDownload) + "&action=publishInstance", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function loadLog(logPath){
console.log("Info: loading log " + logPath);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&path=" + encodeURI(logPath) + "&action=loadLog", function (data) {
//var operationData = JSON.parse(data);
//console.log(operationData);
//if (operationData.error_code >= 400){
//alert(operationData.error);
//}
$("#logNameInput").text(logPath);
$("#logDataInput").val(data);
$("#loadLogModal").modal('show');
});
}
function initializeCreateBackup(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
if (month < 10)
month = '0' + month;
if (day < 10)
day = '0' + day;
if (hour < 10)
hour = '0' + hour;
if (min < 10)
min = '0' + min;
if (sec < 10)
sec = '0' + sec;
var backupName = instanceName + "-" + year + month + day + hour + min + sec;
$("#backupName").val(backupName);
$("#backupInstanceModal").modal('show');
}
function createBackup(){
var backupName = $("#backupName").val();
console.log("Info: backing up instance " + instanceName + " to " + backupName);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&instance=" + encodeURI(instanceName) + "&name=" + encodeURI(backupName) + "&action=createBackup", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function downloadBackup(){
backupPath = $("#backupNameInput").text();
console.log("Info: downloading backup " + backupPath);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&path=" + encodeURI(backupPath) + "&action=downloadBackup", function (data) {
//var operationData = JSON.parse(data);
console.log(data);
window.location.href = data;
});
}
function deleteBackup(){
backupPath = $("#backupNameInput").text();
console.log("Info: deleting backup " + backupPath);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&path=" + encodeURI(backupPath) + "&action=deleteBackup", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
if (operationData.status_code == 100 && operationData.metadata.status_code < 400){
operationNumbers.push(operationData.metadata.id);
operationStatusCheck();
}
if (operationData.metadata.status_code >= 400){
alert(operationData.metadata.err);
}
setTimeout(() => { operationStatusCheck(); }, 4000);
});
}
function loadBackup(backupPath){
console.log("Info: loading backup " + backupPath);
$.get("./php/lxd/instances.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName) + "&path=" + encodeURI(backupPath) + "&action=loadBackup", function (data) {
var operationData = JSON.parse(data);
console.log(operationData);
//if (operationData.error_code >= 400){
//alert(operationData.error);
//}
$("#backupNameInput").text(backupPath);
$("#backupDataInput").val(JSON.stringify(operationData.metadata, null, 2));
$("#loadBackupModal").modal('show');
});
}
$(document).ready(function(){
//Load in the sidebar
$("#sidebarLinks").load("./sidebar.html");
//Setup Page Breadcrumb Links/Information
$('#remoteBreadCrumb').load("./php/lxd/remote-breadcrumb.php?remote=" + encodeURI(remoteName));
$('#remoteBreadCrumb').attr("href", "host.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
$('#instancesBreadCrumb').text("instances");
$('#instancesBreadCrumb').attr("href", "instances.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
$('#instanceBreadCrumb').text(instanceName);
//Load the card contents
loadPageContent();
//Populate the select options fields used in modals
//$("#selectRemoteInput").load("./php/lxd/remote-list-select.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
$("#selectProfileInput").load("./php/lxd/profile-list-select.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
//Set page reload every 15 seconds
setInterval(function(){reloadPageContent()}, 15000);
$("#remoteListNav").load("./php/lxd/remote-list-nav.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
$("#projectListNav").load("./php/lxd/project-list-nav.php?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
});
</script>
</html>