mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2025-11-02 11:26:28 +01:00
Initial commit for v2.4.3
This commit is contained in:
usmannasir
649
static/containerization/containerization.js
Normal file
649
static/containerization/containerization.js
Normal file
@@ -0,0 +1,649 @@
|
||||
app.controller('installContainer', function ($scope, $http, $timeout, $window) {
|
||||
$scope.installDockerStatus = true;
|
||||
$scope.installBoxGen = true;
|
||||
$scope.dockerInstallBTN = false;
|
||||
|
||||
$scope.submitContainerInstall = function () {
|
||||
|
||||
$scope.installDockerStatus = false;
|
||||
$scope.installBoxGen = true;
|
||||
$scope.dockerInstallBTN = true;
|
||||
|
||||
url = "/container/submitContainerInstall";
|
||||
|
||||
var data = {};
|
||||
var config = {
|
||||
headers: {
|
||||
'X-CSRFToken': getCookie('csrftoken')
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);
|
||||
|
||||
|
||||
function ListInitialDatas(response) {
|
||||
$scope.cyberPanelLoading = true;
|
||||
if (response.data.status === 1) {
|
||||
$scope.installBoxGen = false;
|
||||
getRequestStatus();
|
||||
}
|
||||
else {
|
||||
new PNotify({
|
||||
title: 'Operation Failed!',
|
||||
text: response.data.error_message,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function cantLoadInitialDatas(response) {
|
||||
$scope.cyberPanelLoading = true;
|
||||
new PNotify({
|
||||
title: 'Operation Failed!',
|
||||
text: 'Could not connect to server, please refresh this page',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
function getRequestStatus() {
|
||||
$scope.cyberPanelLoading = false;
|
||||
|
||||
url = "/serverstatus/switchTOLSWSStatus";
|
||||
|
||||
var data = {};
|
||||
|
||||
var config = {
|
||||
headers: {
|
||||
'X-CSRFToken': getCookie('csrftoken')
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);
|
||||
|
||||
|
||||
function ListInitialDatas(response) {
|
||||
if (response.data.abort === 0) {
|
||||
$scope.requestData = response.data.requestStatus;
|
||||
$timeout(getRequestStatus, 1000);
|
||||
}
|
||||
else {
|
||||
// Notifications
|
||||
$scope.cyberPanelLoading = true;
|
||||
$timeout.cancel();
|
||||
$scope.requestData = response.data.requestStatus;
|
||||
if (response.data.installed === 1) {
|
||||
$timeout(function () {
|
||||
$window.location.reload();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function cantLoadInitialDatas(response) {
|
||||
$scope.cyberPanelLoading = true;
|
||||
new PNotify({
|
||||
title: 'Operation Failed!',
|
||||
text: 'Could not connect to server, please refresh this page',
|
||||
type: 'error'
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
app.controller('websiteContainerLimit', function ($scope, $http, $timeout, $window) {
|
||||
|
||||
|
||||
// Get CPU Usage of User
|
||||
|
||||
var cpu = [];
|
||||
var dataset;
|
||||
var totalPoints = 100;
|
||||
var updateInterval = 1000;
|
||||
var now = new Date().getTime();
|
||||
|
||||
var options = {
|
||||
series: {
|
||||
lines: {
|
||||
lineWidth: 1.2
|
||||
},
|
||||
bars: {
|
||||
align: "center",
|
||||
fillColor: {colors: [{opacity: 1}, {opacity: 1}]},
|
||||
barWidth: 500,
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
tickSize: [5, "second"],
|
||||
tickFormatter: function (v, axis) {
|
||||
var date = new Date(v);
|
||||
|
||||
if (date.getSeconds() % 20 == 0) {
|
||||
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||||
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||||
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||||
|
||||
return hours + ":" + minutes + ":" + seconds;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
axisLabel: "Time",
|
||||
axisLabelUseCanvas: true,
|
||||
axisLabelFontSizePixels: 12,
|
||||
axisLabelFontFamily: 'Verdana, Arial',
|
||||
axisLabelPadding: 10
|
||||
},
|
||||
yaxes: [
|
||||
{
|
||||
min: 0,
|
||||
max: 100,
|
||||
tickSize: 5,
|
||||
tickFormatter: function (v, axis) {
|
||||
if (v % 10 == 0) {
|
||||
return v + "%";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
axisLabel: "CPU loading",
|
||||
axisLabelUseCanvas: true,
|
||||
axisLabelFontSizePixels: 12,
|
||||
axisLabelFontFamily: 'Verdana, Arial',
|
||||
axisLabelPadding: 6
|
||||
}, {
|
||||
max: 5120,
|
||||
position: "right",
|
||||
axisLabel: "Disk",
|
||||
axisLabelUseCanvas: true,
|
||||
axisLabelFontSizePixels: 12,
|
||||
axisLabelFontFamily: 'Verdana, Arial',
|
||||
axisLabelPadding: 6
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
noColumns: 0,
|
||||
position: "nw"
|
||||
},
|
||||
grid: {
|
||||
backgroundColor: {colors: ["#ffffff", "#EDF5FF"]}
|
||||
}
|
||||
};
|
||||
|
||||
function initData() {
|
||||
for (var i = 0; i < totalPoints; i++) {
|
||||
var temp = [now += updateInterval, 0];
|
||||
|
||||
cpu.push(temp);
|
||||
}
|
||||
}
|
||||
|
||||
function GetData() {
|
||||
|
||||
var data = {
|
||||
domain: $("#domain").text()
|
||||
};
|
||||
$.ajaxSetup({cache: false});
|
||||
|
||||
$.ajax({
|
||||
url: "/container/getUsageData",
|
||||
dataType: 'json',
|
||||
success: update,
|
||||
type: "POST",
|
||||
headers: { 'X-CSRFToken': getCookie('csrftoken') },
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data), // Our valid JSON string
|
||||
error: function () {
|
||||
setTimeout(GetData, updateInterval);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var temp;
|
||||
|
||||
function update(_data) {
|
||||
cpu.shift();
|
||||
|
||||
now += updateInterval;
|
||||
|
||||
temp = [now, _data.cpu];
|
||||
cpu.push(temp);
|
||||
|
||||
|
||||
dataset = [
|
||||
{label: "CPU:" + _data.cpu + "%", data: cpu, lines: {fill: true, lineWidth: 1.2}, color: "#00FF00"}
|
||||
];
|
||||
|
||||
$.plot($("#flot-placeholder1"), dataset, options);
|
||||
setTimeout(GetData, updateInterval);
|
||||
}
|
||||
|
||||
// Memory Usage of User
|
||||
|
||||
var memory = [];
|
||||
var datasetMemory;
|
||||
var totalPointsMemory = 100;
|
||||
var updateIntervalMemory = 1000;
|
||||
var nowMemory = new Date().getTime();
|
||||
|
||||
var optionsMemory = {
|
||||
series: {
|
||||
lines: {
|
||||
lineWidth: 1.2
|
||||
},
|
||||
bars: {
|
||||
align: "center",
|
||||
fillColor: {colors: [{opacity: 1}, {opacity: 1}]},
|
||||
barWidth: 500,
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
tickSize: [5, "second"],
|
||||
tickFormatter: function (v, axis) {
|
||||
var date = new Date(v);
|
||||
|
||||
if (date.getSeconds() % 20 == 0) {
|
||||
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||||
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||||
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||||
|
||||
return hours + ":" + minutes + ":" + seconds;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
axisLabel: "Time",
|
||||
axisLabelUseCanvas: true,
|
||||
axisLabelFontSizePixels: 12,
|
||||
axisLabelFontFamily: 'Verdana, Arial',
|
||||
axisLabelPadding: 10
|
||||
},
|
||||
yaxes: [
|
||||
{
|
||||
min: 0,
|
||||
max: $scope.memory,
|
||||
tickSize: 5,
|
||||
tickFormatter: function (v, axis) {
|
||||
if (v % 10 == 0) {
|
||||
return v + "MB";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
axisLabel: "CPU loading",
|
||||
axisLabelUseCanvas: true,
|
||||
axisLabelFontSizePixels: 12,
|
||||
axisLabelFontFamily: 'Verdana, Arial',
|
||||
axisLabelPadding: 6
|
||||
}, {
|
||||
max: 5120,
|
||||
position: "right",
|
||||
axisLabel: "Disk",
|
||||
axisLabelUseCanvas: true,
|
||||
axisLabelFontSizePixels: 12,
|
||||
axisLabelFontFamily: 'Verdana, Arial',
|
||||
axisLabelPadding: 6
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
noColumns: 0,
|
||||
position: "nw"
|
||||
},
|
||||
grid: {
|
||||
backgroundColor: {colors: ["#ffffff", "#EDF5FF"]}
|
||||
}
|
||||
};
|
||||
|
||||
function initDataMemory() {
|
||||
for (var i = 0; i < totalPointsMemory; i++) {
|
||||
var temp = [nowMemory += updateIntervalMemory, 0];
|
||||
|
||||
memory.push(temp);
|
||||
}
|
||||
}
|
||||
|
||||
function GetDataMemory() {
|
||||
|
||||
var data = {
|
||||
domain: $("#domain").text(),
|
||||
type: 'memory'
|
||||
};
|
||||
$.ajaxSetup({cache: false});
|
||||
|
||||
$.ajax({
|
||||
url: "/container/getUsageData",
|
||||
dataType: 'json',
|
||||
headers: { 'X-CSRFToken': getCookie('csrftoken') },
|
||||
success: updateMemory,
|
||||
type: "POST",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data), // Our valid JSON string
|
||||
error: function () {
|
||||
setTimeout(GetDataMemory, updateIntervalMemory);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var tempMemory;
|
||||
|
||||
function updateMemory(_data) {
|
||||
memory.shift();
|
||||
|
||||
nowMemory += updateIntervalMemory;
|
||||
|
||||
tempMemory = [nowMemory, _data.memory];
|
||||
memory.push(tempMemory);
|
||||
|
||||
|
||||
datasetMemory = [
|
||||
{
|
||||
label: "Memory:" + _data.memory + "MB",
|
||||
data: memory,
|
||||
lines: {fill: true, lineWidth: 1.2},
|
||||
color: "#00FF00"
|
||||
}
|
||||
];
|
||||
|
||||
$.plot($("#memoryUsage"), datasetMemory, optionsMemory);
|
||||
setTimeout(GetDataMemory, updateIntervalMemory);
|
||||
}
|
||||
|
||||
// Disk Usage
|
||||
|
||||
var readRate = [], writeRate = [];
|
||||
var datasetDisk;
|
||||
var totalPointsDisk = 100;
|
||||
var updateIntervalDisk = 5000;
|
||||
var now = new Date().getTime();
|
||||
|
||||
var optionsDisk = {
|
||||
series: {
|
||||
lines: {
|
||||
lineWidth: 1.2
|
||||
},
|
||||
bars: {
|
||||
align: "center",
|
||||
fillColor: {colors: [{opacity: 1}, {opacity: 1}]},
|
||||
barWidth: 500,
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
tickSize: [30, "second"],
|
||||
tickFormatter: function (v, axis) {
|
||||
var date = new Date(v);
|
||||
|
||||
if (date.getSeconds() % 20 == 0) {
|
||||
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||||
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||||
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||||
|
||||
return hours + ":" + minutes + ":" + seconds;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
axisLabel: "Time",
|
||||
axisLabelUseCanvas: true,
|
||||
axisLabelFontSizePixels: 12,
|
||||
axisLabelFontFamily: 'Verdana, Arial',
|
||||
axisLabelPadding: 10
|
||||
},
|
||||
yaxes: [
|
||||
{
|
||||
min: 0,
|
||||
max: $scope.networkSpeed,
|
||||
tickSize: 5,
|
||||
tickFormatter: function (v, axis) {
|
||||
if (v % 10 == 0) {
|
||||
return v + "mb/sec";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
axisLabel: "CPU loading",
|
||||
axisLabelUseCanvas: true,
|
||||
axisLabelFontSizePixels: 12,
|
||||
axisLabelFontFamily: 'Verdana, Arial',
|
||||
axisLabelPadding: 6
|
||||
}, {
|
||||
max: 5120,
|
||||
position: "right",
|
||||
axisLabel: "Disk",
|
||||
axisLabelUseCanvas: true,
|
||||
axisLabelFontSizePixels: 12,
|
||||
axisLabelFontFamily: 'Verdana, Arial',
|
||||
axisLabelPadding: 6
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
noColumns: 0,
|
||||
position: "nw"
|
||||
},
|
||||
grid: {
|
||||
backgroundColor: {colors: ["#ffffff", "#EDF5FF"]}
|
||||
}
|
||||
};
|
||||
|
||||
function initDataDisk() {
|
||||
for (var i = 0; i < totalPointsDisk; i++) {
|
||||
var temp = [now += updateIntervalDisk, 0];
|
||||
|
||||
readRate.push(temp);
|
||||
writeRate.push(temp);
|
||||
}
|
||||
}
|
||||
|
||||
function GetDataDisk() {
|
||||
|
||||
var data = {
|
||||
domain: $("#domain").text(),
|
||||
type: 'io'
|
||||
};
|
||||
|
||||
$.ajaxSetup({cache: false});
|
||||
|
||||
$.ajax({
|
||||
url: "/container/getUsageData",
|
||||
dataType: 'json',
|
||||
headers: { 'X-CSRFToken': getCookie('csrftoken') },
|
||||
success: updateDisk,
|
||||
type: "POST",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data), // Our valid JSON string
|
||||
error: function () {
|
||||
setTimeout(GetDataMemory, updateIntervalMemory);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var tempDisk;
|
||||
|
||||
function updateDisk(_data) {
|
||||
readRate.shift();
|
||||
writeRate.shift();
|
||||
|
||||
now += updateIntervalDisk;
|
||||
|
||||
tempDisk = [now, _data.readRate];
|
||||
readRate.push(tempDisk);
|
||||
|
||||
tempDisk = [now, _data.readRate];
|
||||
writeRate.push(tempDisk);
|
||||
|
||||
datasetDisk = [
|
||||
{label: "Read IO/s " + _data.readRate + " mb/s ", data: readRate, lines: {fill: true, lineWidth: 1.2}, color: "#00FF00"},
|
||||
{label: "Write IO/s " + _data.writeRate + " mb/s ", data: writeRate, lines: {lineWidth: 1.2}, color: "#FF0000"}
|
||||
];
|
||||
|
||||
$.plot($("#diskUsage"), datasetDisk, optionsDisk);
|
||||
setTimeout(GetDataDisk, updateIntervalDisk);
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
initDataDisk();
|
||||
|
||||
datasetDisk = [
|
||||
{label: "Read IO/s: ", data: readRate, lines: {fill: true, lineWidth: 1.2}, color: "#00FF00"},
|
||||
{label: "Write IO/s: ", data: writeRate, color: "#0044FF", bars: {show: true}, yaxis: 2}
|
||||
];
|
||||
|
||||
$.plot($("#diskUsage"), datasetDisk, optionsDisk);
|
||||
setTimeout(GetDataDisk, updateIntervalDisk);
|
||||
});
|
||||
|
||||
////
|
||||
|
||||
$scope.cyberPanelLoading = true;
|
||||
$scope.limitsInfoBox = true;
|
||||
|
||||
$scope.fetchWebsiteLimits = function () {
|
||||
|
||||
$scope.cyberPanelLoading = false;
|
||||
|
||||
url = "/container/fetchWebsiteLimits";
|
||||
|
||||
var data = {
|
||||
'domain': $("#domain").text()
|
||||
};
|
||||
var config = {
|
||||
headers: {
|
||||
'X-CSRFToken': getCookie('csrftoken')
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);
|
||||
|
||||
|
||||
function ListInitialDatas(response) {
|
||||
$scope.cyberPanelLoading = true;
|
||||
if (response.data.status === 1) {
|
||||
$scope.cpuPers = response.data.cpuPers;
|
||||
$scope.IO = response.data.IO;
|
||||
$scope.IOPS = response.data.IOPS;
|
||||
$scope.memory = response.data.memory;
|
||||
$scope.networkSpeed = response.data.networkSpeed;
|
||||
|
||||
if (response.data.enforce === 0) {
|
||||
$scope.limitsInfoBox = false;
|
||||
} else {
|
||||
$scope.limitsInfoBox = true;
|
||||
}
|
||||
|
||||
|
||||
// Report Memory Usage
|
||||
|
||||
initDataMemory();
|
||||
|
||||
datasetMemory = [
|
||||
{label: "Memory", data: memory, lines: {fill: true, lineWidth: 1.2}, color: "#00FF00"}
|
||||
];
|
||||
|
||||
$.plot($("#memoryUsage"), datasetMemory, optionsMemory);
|
||||
setTimeout(GetDataMemory, updateIntervalMemory);
|
||||
|
||||
// Report CPU Usage
|
||||
|
||||
initData();
|
||||
|
||||
dataset = [
|
||||
{label: "CPU", data: cpu, lines: {fill: true, lineWidth: 1.2}, color: "#00FF00"}
|
||||
];
|
||||
|
||||
$.plot($("#flot-placeholder1"), dataset, options);
|
||||
setTimeout(GetData, updateInterval);
|
||||
}
|
||||
else {
|
||||
new PNotify({
|
||||
title: 'Operation Failed!',
|
||||
text: response.data.error_message,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function cantLoadInitialDatas(response) {
|
||||
$scope.cyberPanelLoading = true;
|
||||
new PNotify({
|
||||
title: 'Operation Failed!',
|
||||
text: 'Could not connect to server, please refresh this page',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
$scope.fetchWebsiteLimits();
|
||||
|
||||
$scope.saveWebsiteLimits = function () {
|
||||
|
||||
$scope.cyberPanelLoading = false;
|
||||
|
||||
url = "/container/saveWebsiteLimits";
|
||||
|
||||
var data = {
|
||||
'domain': $("#domain").text(),
|
||||
'cpuPers': $scope.cpuPers,
|
||||
'IO': $scope.IO,
|
||||
'IOPS': $scope.IOPS,
|
||||
'memory': $scope.memory,
|
||||
'networkSpeed': $scope.networkSpeedBox,
|
||||
'networkHandle': $scope.networkHandle,
|
||||
'enforce': $scope.enforce
|
||||
};
|
||||
var config = {
|
||||
headers: {
|
||||
'X-CSRFToken': getCookie('csrftoken')
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);
|
||||
|
||||
|
||||
function ListInitialDatas(response) {
|
||||
$scope.cyberPanelLoading = true;
|
||||
if (response.data.status === 1) {
|
||||
new PNotify({
|
||||
title: 'Success',
|
||||
text: 'Changes successfully applied.',
|
||||
type: 'success'
|
||||
});
|
||||
$scope.fetchWebsiteLimits();
|
||||
}
|
||||
else {
|
||||
new PNotify({
|
||||
title: 'Operation Failed!',
|
||||
text: response.data.error_message,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function cantLoadInitialDatas(response) {
|
||||
$scope.cyberPanelLoading = true;
|
||||
new PNotify({
|
||||
title: 'Operation Failed!',
|
||||
text: 'Could not connect to server, please refresh this page',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user