dashboard.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. import { Readable } from 'stream';
  2. import { Permission, Container, User } from '../database/models.js';
  3. import { docker } from '../server.js';
  4. import { dockerContainerStats } from 'systeminformation';
  5. import { readFileSync } from 'fs';
  6. import { currentLoad, mem, networkStats, fsSize } from 'systeminformation';
  7. let hidden = '';
  8. // The page
  9. export const Dashboard = (req, res) => {
  10. let name = req.session.user;
  11. let role = req.session.role;
  12. res.render("dashboard", {
  13. name: name,
  14. avatar: name.charAt(0).toUpperCase(),
  15. role: role,
  16. alert: ''
  17. });
  18. }
  19. // The page actions
  20. export const DashboardAction = async (req, res) => {
  21. let name = req.header('hx-trigger-name');
  22. let value = req.header('hx-trigger');
  23. let action = req.params.action;
  24. let modal = '';
  25. switch (action) {
  26. case 'permissions':
  27. let title = name.charAt(0).toUpperCase() + name.slice(1);
  28. let permissions_list = '';
  29. let permissions_modal = readFileSync('./views/modals/permissions.html', 'utf8');
  30. permissions_modal = permissions_modal.replace(/PermissionsTitle/g, title);
  31. let users = await User.findAll({ attributes: ['username', 'UUID']});
  32. for (let i = 0; i < users.length; i++) {
  33. let user_permissions = readFileSync('./views/partials/user_permissions.html', 'utf8');
  34. let exists = await Permission.findOne({ where: {containerName: name, user: users[i].username}});
  35. if (!exists) {
  36. const newPermission = await Permission.create({ containerName: name, user: users[i].username, userID: users[i].UUID});
  37. }
  38. let permissions = await Permission.findOne({ where: {containerName: name, user: users[i].username}});
  39. if (permissions.uninstall == true) { user_permissions = user_permissions.replace(/data-UninstallCheck/g, 'checked'); }
  40. if (permissions.edit == true) { user_permissions = user_permissions.replace(/data-EditCheck/g, 'checked'); }
  41. if (permissions.upgrade == true) { user_permissions = user_permissions.replace(/data-UpgradeCheck/g, 'checked'); }
  42. if (permissions.start == true) { user_permissions = user_permissions.replace(/data-StartCheck/g, 'checked'); }
  43. if (permissions.stop == true) { user_permissions = user_permissions.replace(/data-StopCheck/g, 'checked'); }
  44. if (permissions.pause == true) { user_permissions = user_permissions.replace(/data-PauseCheck/g, 'checked'); }
  45. if (permissions.restart == true) { user_permissions = user_permissions.replace(/data-RestartCheck/g, 'checked'); }
  46. if (permissions.logs == true) { user_permissions = user_permissions.replace(/data-LogsCheck/g, 'checked'); }
  47. user_permissions = user_permissions.replace(/EntryNumber/g, i);
  48. user_permissions = user_permissions.replace(/EntryNumber/g, i);
  49. user_permissions = user_permissions.replace(/EntryNumber/g, i);
  50. user_permissions = user_permissions.replace(/PermissionsUsername/g, users[i].username);
  51. user_permissions = user_permissions.replace(/PermissionsUsername/g, users[i].username);
  52. user_permissions = user_permissions.replace(/PermissionsUsername/g, users[i].username);
  53. user_permissions = user_permissions.replace(/PermissionsContainer/g, name);
  54. user_permissions = user_permissions.replace(/PermissionsContainer/g, name);
  55. user_permissions = user_permissions.replace(/PermissionsContainer/g, name);
  56. permissions_list += user_permissions;
  57. }
  58. permissions_modal = permissions_modal.replace(/PermissionsList/g, permissions_list);
  59. res.send(permissions_modal);
  60. return;
  61. case 'uninstall':
  62. modal = readFileSync('./views/modals/uninstall.html', 'utf8');
  63. modal = modal.replace(/AppName/g, name);
  64. // let containerPermissions = await Permission.findAll({ where: {containerName: name}});
  65. res.send(modal);
  66. return;
  67. case 'details':
  68. modal = readFileSync('./views/modals/details.html', 'utf8');
  69. let details = await containerInfo(name);
  70. modal = modal.replace(/AppName/g, details.name);
  71. modal = modal.replace(/AppImage/g, details.image);
  72. res.send(modal);
  73. return;
  74. case 'containers':
  75. res.send(cardList);
  76. return;
  77. case 'updates':
  78. res.send(newCards);
  79. newCards = '';
  80. return;
  81. case 'card':
  82. if (hidden.includes(name) || !containersArray.find(c => c.container === name)) {
  83. res.send('');
  84. return;
  85. } else {
  86. let details = await containerInfo(name);
  87. let card = await createCard(details);
  88. res.send(card);
  89. return;
  90. }
  91. case 'logs':
  92. let logString = '';
  93. let options = { follow: true, stdout: true, stderr: false, timestamps: false };
  94. docker.getContainer(name).logs(options, function (err, stream) {
  95. if (err) { console.log(err); return; }
  96. const readableStream = Readable.from(stream);
  97. readableStream.on('data', function (chunk) {
  98. logString += chunk.toString('utf8');
  99. });
  100. readableStream.on('end', function () {
  101. res.send(`<pre>${logString}</pre> `);
  102. });
  103. });
  104. return;
  105. case 'hide':
  106. let exists = await Container.findOne({ where: {name: name}});
  107. if (!exists) {
  108. const newContainer = await Container.create({ name: name, visibility: false, });
  109. } else {
  110. exists.update({ visibility: false });
  111. }
  112. hidden = await Container.findAll({ where: {visibility:false}});
  113. hidden = hidden.map((container) => container.name);
  114. res.send("ok");
  115. return;
  116. case 'reset':
  117. await Container.update({ visibility: true }, { where: {} });
  118. hidden = await Container.findAll({ where: {visibility:false}});
  119. hidden = hidden.map((container) => container.name);
  120. res.send("ok");
  121. return;
  122. }
  123. function status (state) {
  124. let status = `<span class="text-yellow align-items-center lh-1">
  125. <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler icon-tabler-point-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor"></path></svg>
  126. ${state}
  127. </span>`;
  128. return status;
  129. }
  130. // Start
  131. if ((action == 'start') && (value == 'stopped')) {
  132. docker.getContainer(name).start();
  133. res.send(status('starting'));
  134. } else if ((action == 'start') && (value == 'paused')) {
  135. docker.getContainer(name).unpause();
  136. res.send(status('starting'));
  137. // Stop
  138. } else if ((action == 'stop') && (value != 'stopped')) {
  139. docker.getContainer(name).stop();
  140. res.send(status('stopping'));
  141. // Pause
  142. } else if ((action == 'pause') && (value == 'paused')) {
  143. docker.getContainer(name).unpause();
  144. res.send(status('starting'));
  145. } else if ((action == 'pause') && (value == 'running')) {
  146. docker.getContainer(name).pause();
  147. res.send(status('pausing'));
  148. // Restart
  149. } else if (action == 'restart') {
  150. docker.getContainer(name).restart();
  151. res.send(status('restarting'));
  152. }
  153. }
  154. // Server metrics (CPU, RAM, TX, RX, DISK)
  155. export const Stats = async (req, res) => {
  156. let name = req.header('hx-trigger-name');
  157. let color = req.header('hx-trigger');
  158. let value = 0;
  159. switch (name) {
  160. case 'CPU':
  161. await currentLoad().then(data => {
  162. value = Math.round(data.currentLoad);
  163. });
  164. break;
  165. case 'RAM':
  166. await mem().then(data => {
  167. value = Math.round((data.active / data.total) * 100);
  168. });
  169. break;
  170. case 'NET':
  171. let down = 0;
  172. let up = 0;
  173. let percent = 0;
  174. await networkStats().then(data => {
  175. down = Math.round(data[0].rx_bytes / (1024 * 1024));
  176. up = Math.round(data[0].tx_bytes / (1024 * 1024));
  177. // percent of download vs max download if max download was 1GB
  178. percent = Math.round((down / 1000) * 100);
  179. });
  180. let net = `<div class="font-weight-medium">
  181. <label class="cpu-text mb-1">Down:${down}MB Up:${up}MB</label>
  182. </div>
  183. <div class="cpu-bar meter animate ${color}">
  184. <span style="width:20%"><span></span></span>
  185. </div>`;
  186. res.send(net);
  187. return;
  188. case 'DISK':
  189. await fsSize().then(data => {
  190. value = data[0].use;
  191. });
  192. break;
  193. }
  194. let info = `<div class="font-weight-medium">
  195. <label class="cpu-text mb-1">${name} ${value}%</label>
  196. </div>
  197. <div class="cpu-bar meter animate ${color}">
  198. <span style="width:${value}%"><span></span></span>
  199. </div>`;
  200. res.send(info);
  201. }
  202. async function containerInfo (containerName) {
  203. let container = docker.getContainer(containerName);
  204. let info = await container.inspect();
  205. let image = info.Config.Image.split('/');
  206. let ports_list = [];
  207. try {
  208. for (const [key, value] of Object.entries(info.HostConfig.PortBindings)) {
  209. let ports = {
  210. check: 'checked',
  211. external: value[0].HostPort,
  212. internal: key.split('/')[0],
  213. protocol: key.split('/')[1]
  214. }
  215. ports_list.push(ports);
  216. }
  217. } catch {
  218. // no exposed ports
  219. }
  220. let external = 0;
  221. let internal = 0;
  222. try {
  223. external = ports_list[0].external;
  224. internal = ports_list[0].internal;
  225. } catch {
  226. // no exposed ports
  227. }
  228. let details = {
  229. name: containerName,
  230. image: image,
  231. service: image[image.length - 1].split(':')[0],
  232. state: info.State.Status,
  233. external_port: external,
  234. internal_port: internal,
  235. ports: ports_list,
  236. link: 'localhost',
  237. }
  238. return details;
  239. }
  240. async function createCard (details) {
  241. if (hidden.includes(details.name)) { return;}
  242. let shortname = details.name.slice(0, 10) + '...';
  243. let trigger = 'data-hx-trigger="load, every 3s"';
  244. let state = details.state;
  245. let state_color = '';
  246. switch (state) {
  247. case 'running':
  248. state_color = 'green';
  249. break;
  250. case 'exited':
  251. state = 'stopped';
  252. state_color = 'red';
  253. trigger = 'data-hx-trigger="load"';
  254. break;
  255. case 'paused':
  256. state_color = 'orange';
  257. trigger = 'data-hx-trigger="load"';
  258. break;
  259. case 'installing':
  260. state_color = 'blue';
  261. trigger = 'data-hx-trigger="load"';
  262. break;
  263. }
  264. // if (name.startsWith('dweebui')) { disable = 'disabled=""'; }
  265. let card = readFileSync('./views/partials/containerFull.html', 'utf8');
  266. card = card.replace(/AppName/g, details.name);
  267. card = card.replace(/AppShortName/g, shortname);
  268. card = card.replace(/AppIcon/g, details.service);
  269. card = card.replace(/AppState/g, state);
  270. card = card.replace(/StateColor/g, state_color);
  271. card = card.replace(/ExternalPort/g, details.external_port);
  272. card = card.replace(/InternalPort/g, details.internal_port);
  273. card = card.replace(/ChartName/g, details.name.replace(/-/g, ''));
  274. card = card.replace(/AppNameState/g, `${details.name}State`);
  275. card = card.replace(/data-trigger=""/, trigger);
  276. return card;
  277. }
  278. let [ cardList, newCards, containersArray, sentArray, updatesArray ] = [ '', '', [], [], [] ];
  279. // HTMX server-side events
  280. export const SSE = async (req, res) => {
  281. res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' });
  282. let eventCheck = setInterval(async () => {
  283. // builds array of containers and their states
  284. containersArray = [];
  285. await docker.listContainers({ all: true }).then(containers => {
  286. containers.forEach(container => {
  287. let name = container.Names[0].replace('/', '');
  288. if (!hidden.includes(name)) { // if not hidden
  289. containersArray.push({ container: name, state: container.State });
  290. }
  291. });
  292. });
  293. if ((JSON.stringify(containersArray) !== JSON.stringify(sentArray))) {
  294. cardList = '';
  295. newCards = '';
  296. containersArray.forEach(container => {
  297. const { container: containerName, state } = container;
  298. const existingContainer = sentArray.find(c => c.container === containerName);
  299. if (!existingContainer) {
  300. containerInfo(containerName).then(details => {
  301. createCard(details).then(card => {
  302. newCards += card;
  303. });
  304. });
  305. res.write(`event: update\n`);
  306. res.write(`data: 'update cards'\n\n`);
  307. } else if (existingContainer.state !== state) {
  308. updatesArray.push(containerName);
  309. }
  310. containerInfo(containerName).then(details => {
  311. createCard(details).then(card => {
  312. cardList += card;
  313. });
  314. });
  315. });
  316. sentArray.forEach(container => {
  317. const { container: containerName } = container;
  318. const existingContainer = containersArray.find(c => c.container === containerName);
  319. if (!existingContainer) {
  320. updatesArray.push(containerName);
  321. }
  322. });
  323. for (let i = 0; i < updatesArray.length; i++) {
  324. res.write(`event: ${updatesArray[i]}\n`);
  325. res.write(`data: 'update cards'\n\n`);
  326. }
  327. updatesArray = [];
  328. sentArray = containersArray.slice();
  329. }
  330. }, 500);
  331. req.on('close', () => {
  332. clearInterval(eventCheck);
  333. });
  334. };
  335. let stats = {};
  336. // Container charts
  337. export const Chart = async (req, res) => {
  338. let name = req.header('hx-trigger-name');
  339. if (!stats[name]) {
  340. stats[name] = { cpuArray: Array(15).fill(0), ramArray: Array(15).fill(0) };
  341. }
  342. const info = await dockerContainerStats(name);
  343. stats[name].cpuArray.push(Math.round(info[0].cpuPercent));
  344. stats[name].ramArray.push(Math.round(info[0].memPercent));
  345. stats[name].cpuArray = stats[name].cpuArray.slice(-15);
  346. stats[name].ramArray = stats[name].ramArray.slice(-15);
  347. let chart = `
  348. <script>
  349. ${name}chart.updateSeries([{
  350. data: [${stats[name].cpuArray}]
  351. }, {
  352. data: [${stats[name].ramArray}]
  353. }])
  354. </script>`
  355. res.send(chart);
  356. }
  357. export const UpdatePermissions = async (req, res) => {
  358. let { user, container } = req.body;
  359. let id = req.header('hx-trigger');
  360. await Permission.update({ uninstall: false, edit: false, upgrade: false, start: false, stop: false, pause: false, restart: false, logs: false }, { where: { containerName: container, user: user } });
  361. Object.keys(req.body).forEach(async function(key) {
  362. if (key != 'user' && key != 'container') {
  363. let permissions = req.body[key];
  364. if (permissions.includes('uninstall')) {
  365. await Permission.update({ uninstall: true }, { where: {containerName: container, user: user}});
  366. }
  367. if (permissions.includes('edit')) {
  368. await Permission.update({ edit: true }, { where: {containerName: container, user: user}});
  369. }
  370. if (permissions.includes('upgrade')) {
  371. await Permission.update({ upgrade: true }, { where: {containerName: container, user: user}});
  372. }
  373. if (permissions.includes('start')) {
  374. await Permission.update({ start: true }, { where: {containerName: container, user: user}});
  375. }
  376. if (permissions.includes('stop')) {
  377. await Permission.update({ stop: true }, { where: {containerName: container, user: user}});
  378. }
  379. if (permissions.includes('pause')) {
  380. await Permission.update({ pause: true }, { where: {containerName: container, user: user}});
  381. }
  382. if (permissions.includes('restart')) {
  383. await Permission.update({ restart: true }, { where: {containerName: container, user: user}});
  384. }
  385. if (permissions.includes('logs')) {
  386. await Permission.update({ logs: true }, { where: {containerName: container, user: user}});
  387. }
  388. }
  389. });
  390. let submit = '';
  391. if (id == 'submit') {
  392. submit = `<button class="btn" type="button" id="confirmed" hx-post="/updatePermissions" hx-swap="outerHTML" hx-trigger="load delay:2s">Update ✔️</button>`;
  393. res.send(submit);
  394. return;
  395. } else if (id == 'confirmed') {
  396. submit = `<button class="btn" type="button" id="submit" hx-post="/updatePermissions" hx-vals="#updatePermissions" hx-swap="outerHTML">Update </button>`;
  397. res.send(submit);
  398. return;
  399. }
  400. }
  401. // Gets imported by install.js
  402. export async function addCard (name, state) {
  403. console.log(`Adding card for ${name}: ${state}`);
  404. let details = {
  405. name: name,
  406. image: name,
  407. service: name,
  408. state: 'installing',
  409. external_port: 0,
  410. internal_port: 0,
  411. ports: [],
  412. link: 'localhost',
  413. }
  414. createCard(details).then(card => {
  415. cardList += card;
  416. });
  417. }