Delete websites/Servers directory
This commit is contained in:
Arlo Filley
GitHub
parent
860bd085e3
commit
786eb5bb0f
@ -1,170 +0,0 @@
|
||||
:root {
|
||||
--navbar: #333333;
|
||||
|
||||
/* Navbar Button Properties */
|
||||
--navbar-button: #058ED9;
|
||||
--navbar-button-hover: #283F3B;
|
||||
--navbar-button-border: #058ED9;
|
||||
|
||||
/* */
|
||||
--background: #1f1f1f;
|
||||
|
||||
/* Table Properties*/
|
||||
--table: #FFD07B;
|
||||
--table-top:#FDB833;
|
||||
|
||||
/* Title Properties */
|
||||
--title-background: #333333;
|
||||
--title-text: #ffffff;
|
||||
|
||||
/* General Properties */
|
||||
--text: #000000;
|
||||
--border: #000000;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--title-text);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
#navbar {
|
||||
padding: 20px 0 0 10px;
|
||||
height: 96%;
|
||||
width: 15%;
|
||||
position: fixed;
|
||||
|
||||
display: block;
|
||||
|
||||
background: var(--navbar);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
#navbar h2 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#systems {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#navbar #option-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#navbar #option-buttons button {
|
||||
background-color: #32DE8A;
|
||||
border-color: #32DE8A;
|
||||
}
|
||||
|
||||
#navbar button {
|
||||
transition-duration: 0.2s;
|
||||
border-radius: 8px;
|
||||
background-color: var(--navbar-button);
|
||||
margin-bottom: 8px;
|
||||
color: var(--text);
|
||||
border: none;
|
||||
padding: 10px;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
#navbar button:hover, #navbar #option-buttons button:hover {
|
||||
box-shadow:
|
||||
0 12px 16px 0 rgba(0,0,0,0.24),
|
||||
0 17px 50px 0 rgba(0,0,0,0.19);
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
#navbar #allSystemsButton {
|
||||
background-color: #4d23a8;
|
||||
width: 97%;
|
||||
padding: 36px;
|
||||
color: #FFE3E3;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
#navbar #allSystemsButton:hover, #navbar #allSystemsButton:focus {
|
||||
background-color: #3E1C87;
|
||||
}
|
||||
|
||||
#navbar #option-buttons button:hover, #navbar #option-buttons button:focus {
|
||||
background-color: #1DAF68;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#navbar button:hover {
|
||||
background-color: #04699F;
|
||||
}
|
||||
|
||||
#SystemName {
|
||||
background: var(--title-background);
|
||||
width: 100%;
|
||||
font-family:
|
||||
system-ui, -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 50px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
width: 84%;
|
||||
margin-left: 16%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
#tables {
|
||||
display: block;
|
||||
width: 84%;
|
||||
margin-left: 15%;
|
||||
padding: 10px 0 0 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border-spacing: 0px;
|
||||
border: 2px var(--border) solid;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
table tr:nth-child(n) {
|
||||
background: var(--table);
|
||||
}
|
||||
|
||||
table tr:nth-child(1) {
|
||||
background: var(--table-top);
|
||||
}
|
||||
|
||||
tr {
|
||||
border: 1px black dotted;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-size: larger;
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
<!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.0">
|
||||
<title id="title">Leaderboard</title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<script src="index.js" defer="true"></script>
|
||||
<script src="cpu.js" defer="true"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar">
|
||||
<div id="allButton">
|
||||
<button id="allSystemsButton">All Systems</button>
|
||||
</div>
|
||||
|
||||
<h2>Options</h2>
|
||||
<div id="option-buttons">
|
||||
<button id="systeminfo">System</button>
|
||||
<button id="Disks Header">Disks</button>
|
||||
<button id="Processes Header">Processes</button>
|
||||
<button id="CPU Header">CPU</button>
|
||||
</div>
|
||||
|
||||
<h2>Systems</h2>
|
||||
<div id="systems"></div>
|
||||
</div>
|
||||
|
||||
<div id="SystemName">
|
||||
<h1 id="system">
|
||||
Loading...
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tables">
|
||||
<div id="allSystemInfo" align="center"></div>
|
||||
<div id="systemInfo" align="center"></div>
|
||||
<div id="disks" align="center"></div>
|
||||
<div id="processes" align="center"></div>
|
||||
<div id="CPU" align="center"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,277 +0,0 @@
|
||||
|
||||
get();
|
||||
let disks = false;
|
||||
let processes = false;
|
||||
let sysinfo = true;
|
||||
let allSysInfo = false;
|
||||
let cpu = false;
|
||||
let json;
|
||||
let server = 0;
|
||||
|
||||
setInterval(get, 5000);
|
||||
function get() {
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'https://arlofilley.com/api/server_info');
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.responseType = 'json';
|
||||
xhr.send();
|
||||
xhr.onload = () => {
|
||||
json = xhr.response
|
||||
createElements(json);
|
||||
createButtons(json);
|
||||
};
|
||||
};
|
||||
|
||||
function reset_tables() {
|
||||
disks = false;
|
||||
processes = false;
|
||||
sysinfo = false;
|
||||
allSysInfo = false;
|
||||
cpu = false;
|
||||
}
|
||||
|
||||
function createElements(pJson) {
|
||||
let title = document.getElementById(`system`);
|
||||
title.textContent = pJson[server].host_name;
|
||||
document.title = pJson[server].host_name;
|
||||
|
||||
createAllSystemInfo(pJson);
|
||||
createProcesses(pJson[server]);
|
||||
createDisks(pJson[server]);
|
||||
createSystemInfo(pJson[server]);
|
||||
create_cpu_table(pJson[server], cpu);
|
||||
};
|
||||
|
||||
function createAllSystemInfo(systems) {
|
||||
let div = document.getElementById(`allSystemInfo`)
|
||||
|
||||
|
||||
while (div.firstChild) {
|
||||
div.removeChild(div.firstChild)
|
||||
}
|
||||
|
||||
if (!allSysInfo) return;
|
||||
|
||||
document.title = "All Systems"
|
||||
let title = document.getElementById('system');
|
||||
title.textContent = "All Systems"
|
||||
|
||||
let table = document.createElement(`table`);
|
||||
let tableBody = document.createElement(`tbody`);
|
||||
table.appendChild(tableBody);
|
||||
let tr = document.createElement(`tr`);
|
||||
tableBody.appendChild(tr)
|
||||
|
||||
create_table_element(
|
||||
tr,
|
||||
"",
|
||||
["Name", "OS", "Uptime", "Total Ram", "Used Ram",
|
||||
"Available Ram", "Ram Usage", "Total Swap", "Used Swap",
|
||||
"Available Swap", "Swap Usage"]
|
||||
);
|
||||
|
||||
tableBody.appendChild(tr);
|
||||
tr = document.createElement(`tr`);
|
||||
|
||||
for (let i = 0; i < systems.length; i++) {
|
||||
let system = systems[i];
|
||||
create_table_element(
|
||||
tr,
|
||||
"",
|
||||
[`${system.host_name}`, `${system.os}`, `${system.uptime}`, `${system.total_ram}`,
|
||||
`${system.used_ram}`, `${system.available_ram}`, `${system.ram_usage}%`, `${system.total_swap}`,
|
||||
`${system.used_swap}`, `${system.available_swap}`, `${system.swap_usage}%`]
|
||||
)
|
||||
tableBody.appendChild(tr);
|
||||
tr = document.createElement(`tr`);
|
||||
}
|
||||
div.appendChild(table);
|
||||
}
|
||||
|
||||
|
||||
function createSystemInfo(pJson) {
|
||||
let div = document.getElementById(`systemInfo`);
|
||||
|
||||
while (div.firstChild) {
|
||||
div.removeChild(div.firstChild)
|
||||
}
|
||||
|
||||
if (!sysinfo) return;
|
||||
|
||||
let table = document.createElement(`table`);
|
||||
|
||||
let tableBody = document.createElement('tbody');
|
||||
table.appendChild(tableBody);
|
||||
let tr = document.createElement('tr');
|
||||
tableBody.appendChild(tr);
|
||||
|
||||
create_table_element(
|
||||
tr,
|
||||
"",
|
||||
["Name", "OS", "Uptime", "Total Ram", "Used Ram",
|
||||
"Available Ram", "Ram Usage", "Total Swap", "Used Swap",
|
||||
"Available Swap", "Swap Usage"]
|
||||
);
|
||||
tableBody.appendChild(tr);
|
||||
tr = document.createElement('tr');
|
||||
|
||||
create_table_element(
|
||||
tr,
|
||||
"",
|
||||
[`${pJson.host_name}`, `${pJson.os}`, `${pJson.uptime}`, `${pJson.total_ram}`,
|
||||
`${pJson.used_ram}`, `${pJson.available_ram}`, `${pJson.ram_usage}%`, `${pJson.total_swap}`,
|
||||
`${pJson.used_swap}`, `${pJson.available_swap}`, `${pJson.swap_usage}%`]
|
||||
);
|
||||
tableBody.appendChild(tr);
|
||||
tr = document.createElement('tr');
|
||||
|
||||
div.appendChild(table);
|
||||
};
|
||||
|
||||
function createProcesses(pJson) {
|
||||
let div = document.getElementById(`processes`);
|
||||
|
||||
while (div.firstChild) {
|
||||
div.removeChild(div.firstChild)
|
||||
}
|
||||
|
||||
if (!processes) return;
|
||||
|
||||
let table = document.createElement(`table`);
|
||||
|
||||
let tableBody = document.createElement('tbody');
|
||||
table.appendChild(tableBody);
|
||||
let tr = document.createElement('tr');
|
||||
tableBody.appendChild(tr);
|
||||
|
||||
create_table_element(
|
||||
tr,
|
||||
"",
|
||||
["Name", "Memory", "Run Time", "Process ID",
|
||||
"User ID", "Virtual Memory"]
|
||||
);
|
||||
|
||||
tableBody.appendChild(tr);
|
||||
tr = document.createElement('tr');
|
||||
|
||||
for (let i = 0; i < pJson.processes.length; i++) {
|
||||
let process = pJson.processes[i];
|
||||
create_table_element(
|
||||
tr,
|
||||
"",
|
||||
[`${process.name}`, `${process.memory}`, `${process.run_time}`, `${process.id}`,
|
||||
`${process.user_id}`, `${process.virtual_memory}`]
|
||||
)
|
||||
|
||||
tableBody.appendChild(tr);
|
||||
tr = document.createElement('tr');
|
||||
}
|
||||
div.appendChild(table);
|
||||
};
|
||||
|
||||
function createDisks(pJson) {
|
||||
let div = document.getElementById(`disks`);
|
||||
|
||||
while (div.firstChild) {
|
||||
div.removeChild(div.firstChild)
|
||||
}
|
||||
|
||||
if (!disks) return;
|
||||
|
||||
let table = document.createElement(`table`);
|
||||
|
||||
let tableBody = document.createElement('tbody');
|
||||
table.appendChild(tableBody);
|
||||
let tr = document.createElement('tr');
|
||||
tableBody.appendChild(tr);
|
||||
|
||||
|
||||
create_table_element(
|
||||
tr,
|
||||
"",
|
||||
["Name", "Type", "Total Space", "Available Space",
|
||||
"Usage","File System"]
|
||||
);
|
||||
|
||||
tableBody.appendChild(tr);
|
||||
tr = document.createElement('tr');
|
||||
|
||||
for (let i = 0; i < pJson.disks.length; i++) {
|
||||
let disk = pJson.disks[i];
|
||||
create_table_element(
|
||||
tr,
|
||||
"",
|
||||
[`${disk.name}`, `${disk.disk_type}`, `${disk.total_space}`,
|
||||
`${disk.available_space}`, `${disk.usage}%`, `${disk.file_system}`]
|
||||
)
|
||||
tableBody.appendChild(tr);
|
||||
tr = document.createElement('tr');
|
||||
}
|
||||
div.appendChild(table);
|
||||
};
|
||||
|
||||
function create_table_element(tr, string, elements) {
|
||||
if (elements.length > 0) {
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let td = document.createElement('td');
|
||||
td.appendChild(document.createTextNode(elements[i]));
|
||||
tr.appendChild(td);
|
||||
}
|
||||
} else {
|
||||
let td = document.createElement('td');
|
||||
td.appendChild(document.createTextNode(string));
|
||||
tr.appendChild(td);
|
||||
}
|
||||
}
|
||||
|
||||
b = document.getElementById("Processes Header");
|
||||
b.addEventListener("click", () => {
|
||||
reset_tables();
|
||||
processes = true;
|
||||
createElements(json);
|
||||
});
|
||||
|
||||
c = document.getElementById("systeminfo");
|
||||
c.addEventListener("click", () => {
|
||||
reset_tables();
|
||||
sysinfo = true;
|
||||
createElements(json);
|
||||
});
|
||||
let button = document.getElementById
|
||||
|
||||
e = document.getElementById("Disks Header");
|
||||
e.addEventListener("click", () => {
|
||||
reset_tables();
|
||||
disks = true;
|
||||
createElements(json);
|
||||
});
|
||||
|
||||
f = document.getElementById("allSystemsButton");
|
||||
f.addEventListener("click", () => {
|
||||
reset_tables();
|
||||
allSysInfo = true;
|
||||
createElements(json);
|
||||
})
|
||||
|
||||
function createButtons(pJson) {
|
||||
let div = document.getElementById("systems");
|
||||
|
||||
while (div.firstChild) {
|
||||
div.removeChild(div.firstChild)
|
||||
}
|
||||
|
||||
for (let i = 0; i < pJson.length; i++) {
|
||||
let system = pJson[i];
|
||||
|
||||
let button = document.createElement("button");
|
||||
button.textContent = system.host_name;
|
||||
button.id = i;
|
||||
button.addEventListener("click", () => {
|
||||
reset_tables();
|
||||
sysinfo = true;
|
||||
server = button.id
|
||||
createElements(json);
|
||||
});
|
||||
div.appendChild(button);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user