dashboard.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523
  1. import { Readable } from 'stream';
  2. import { Permission, User, ServerSettings } from '../database/models.js';
  3. import { docker } from '../server.js';
  4. import { readFileSync } from 'fs';
  5. import { currentLoad, mem, networkStats, fsSize, dockerContainerStats } from 'systeminformation';
  6. import { Op } from 'sequelize';
  7. import Docker from 'dockerode';
  8. let [ hidden, alert, newCards, stats ] = [ '', '', '', {} ];
  9. let logString = '';
  10. async function hostInfo(host) {
  11. let info = await ServerSettings.findOne({ where: {key: host}});
  12. try {
  13. if (info.value != 'off' && info.value != '') {
  14. let values = info.value.split(',');
  15. return { tag: values[0], ip: values[1], port: values[2] };
  16. }
  17. } catch {
  18. console.log(`${host}: No Value Set`);
  19. }
  20. }
  21. // The page
  22. export const Dashboard = async (req, res) => {
  23. let name = req.session.user ;
  24. let role = req.session.role;
  25. alert = req.session.alert;
  26. let link1 = '';
  27. let link2 = '';
  28. let link3 = '';
  29. let link4 = '';
  30. let host2 = await hostInfo('host2');
  31. if (host2) {
  32. link2 = `<button class="btn text-yellow" name="host2" hx-post="/dashboard/checkhost" hx-trigger="load delay:2s " hx-swap="outerHTML">
  33. ${host2.tag}
  34. </button>`;
  35. }
  36. let host3 = await hostInfo('host3');
  37. if (host3) {
  38. link3 = `<button class="btn text-yellow" name="host3" hx-post="/dashboard/checkhost" hx-trigger="load delay:2s " hx-swap="outerHTML">
  39. ${host3.tag}
  40. </button>`;
  41. }
  42. let host4 = await hostInfo('host4');
  43. if (host4) {
  44. link4 = `<button class="btn text-yellow" name="host4" hx-post="/dashboard/checkhost" hx-trigger="load delay:2s " hx-swap="outerHTML">
  45. ${host4.tag}
  46. </button>`;
  47. }
  48. if (host2 || host3 || host4) {
  49. link1 = `<a href="#" class="btn text-green">
  50. Host 1
  51. </a>`;
  52. }
  53. res.render("dashboard", {
  54. name: name,
  55. avatar: name.charAt(0).toUpperCase(),
  56. role: role,
  57. alert: alert,
  58. link1: link1,
  59. link2: link2,
  60. link3: link3,
  61. link4: link4,
  62. link5: '',
  63. link6: '',
  64. link7: '',
  65. link8: '',
  66. link9: '',
  67. });
  68. }
  69. // The page actions
  70. export const DashboardAction = async (req, res) => {
  71. let name = req.header('hx-trigger-name');
  72. let value = req.header('hx-trigger');
  73. let action = req.params.action;
  74. let modal = '';
  75. console.log(`Action: ${action} Name: ${name} Value: ${value}`);
  76. if (req.body.search) {
  77. console.log(req.body.search);
  78. res.send('search');
  79. return;
  80. }
  81. switch (action) {
  82. case 'checkhost':
  83. let link = '';
  84. console.log(`checking host`);
  85. let host_info = await hostInfo(name);
  86. try {
  87. var docker2 = new Docker({ protocol: 'http', host: host_info.ip, port: host_info.port });
  88. let containers = await docker2.listContainers({ all: true });
  89. console.log(containers);
  90. link = `<button class="btn text-green" name="host2">
  91. ${host_info.tag}
  92. </button>`;
  93. } catch {
  94. console.log(`Error connecting to ${name}`);
  95. link = `<button class="btn text-red" name="host2">
  96. ${host_info.tag}
  97. </button>`;
  98. }
  99. res.send(link);
  100. return;
  101. case 'permissions':
  102. let title = name.charAt(0).toUpperCase() + name.slice(1);
  103. let permissions_list = '';
  104. let permissions_modal = readFileSync('./views/modals/permissions.html', 'utf8');
  105. permissions_modal = permissions_modal.replace(/PermissionsTitle/g, title);
  106. permissions_modal = permissions_modal.replace(/PermissionsContainer/g, name);
  107. let users = await User.findAll({ attributes: ['username', 'UUID']});
  108. for (let i = 0; i < users.length; i++) {
  109. let user_permissions = readFileSync('./views/partials/user_permissions.html', 'utf8');
  110. let exists = await Permission.findOne({ where: {containerName: name, user: users[i].username}});
  111. if (!exists) { const newPermission = await Permission.create({ containerName: name, user: users[i].username, userID: users[i].UUID}); }
  112. let permissions = await Permission.findOne({ where: {containerName: name, user: users[i].username}});
  113. if (permissions.uninstall == true) { user_permissions = user_permissions.replace(/data-UninstallCheck/g, 'checked'); }
  114. if (permissions.edit == true) { user_permissions = user_permissions.replace(/data-EditCheck/g, 'checked'); }
  115. if (permissions.upgrade == true) { user_permissions = user_permissions.replace(/data-UpgradeCheck/g, 'checked'); }
  116. if (permissions.start == true) { user_permissions = user_permissions.replace(/data-StartCheck/g, 'checked'); }
  117. if (permissions.stop == true) { user_permissions = user_permissions.replace(/data-StopCheck/g, 'checked'); }
  118. if (permissions.pause == true) { user_permissions = user_permissions.replace(/data-PauseCheck/g, 'checked'); }
  119. if (permissions.restart == true) { user_permissions = user_permissions.replace(/data-RestartCheck/g, 'checked'); }
  120. if (permissions.logs == true) { user_permissions = user_permissions.replace(/data-LogsCheck/g, 'checked'); }
  121. if (permissions.view == true) { user_permissions = user_permissions.replace(/data-ViewCheck/g, 'checked'); }
  122. user_permissions = user_permissions.replace(/EntryNumber/g, i);
  123. user_permissions = user_permissions.replace(/EntryNumber/g, i);
  124. user_permissions = user_permissions.replace(/EntryNumber/g, i);
  125. user_permissions = user_permissions.replace(/PermissionsUsername/g, users[i].username);
  126. user_permissions = user_permissions.replace(/PermissionsUsername/g, users[i].username);
  127. user_permissions = user_permissions.replace(/PermissionsUsername/g, users[i].username);
  128. user_permissions = user_permissions.replace(/PermissionsContainer/g, name);
  129. user_permissions = user_permissions.replace(/PermissionsContainer/g, name);
  130. user_permissions = user_permissions.replace(/PermissionsContainer/g, name);
  131. permissions_list += user_permissions;
  132. }
  133. permissions_modal = permissions_modal.replace(/PermissionsList/g, permissions_list);
  134. res.send(permissions_modal);
  135. return;
  136. case 'uninstall':
  137. modal = readFileSync('./views/modals/uninstall.html', 'utf8');
  138. modal = modal.replace(/AppName/g, name);
  139. res.send(modal);
  140. return;
  141. case 'details':
  142. modal = readFileSync('./views/modals/details.html', 'utf8');
  143. let details = await containerInfo(name);
  144. modal = modal.replace(/AppName/g, details.name);
  145. modal = modal.replace(/AppImage/g, details.image);
  146. for (let i = 0; i <= 6; i++) {
  147. modal = modal.replaceAll(`Port${i}Check`, details.ports[i]?.check || '');
  148. modal = modal.replaceAll(`Port${i}External`, details.ports[i]?.external || '');
  149. modal = modal.replaceAll(`Port${i}Internal`, details.ports[i]?.internal || '');
  150. modal = modal.replaceAll(`Port${i}Protocol`, details.ports[i]?.protocol || '');
  151. }
  152. for (let i = 0; i <= 6; i++) {
  153. modal = modal.replaceAll(`Vol${i}Source`, details.volumes[i]?.Source || '');
  154. modal = modal.replaceAll(`Vol${i}Destination`, details.volumes[i]?.Destination || '');
  155. modal = modal.replaceAll(`Vol${i}RW`, details.volumes[i]?.RW || '');
  156. }
  157. for (let i = 0; i <= 19; i++) {
  158. modal = modal.replaceAll(`Label${i}Key`, Object.keys(details.labels)[i] || '');
  159. modal = modal.replaceAll(`Label${i}Value`, Object.values(details.labels)[i] || '');
  160. }
  161. // console.log(details.env);
  162. for (let i = 0; i <= 19; i++) {
  163. modal = modal.replaceAll(`Env${i}Key`, details.env[i]?.split('=')[0] || '');
  164. modal = modal.replaceAll(`Env${i}Value`, details.env[i]?.split('=')[1] || '');
  165. }
  166. res.send(modal);
  167. return;
  168. case 'updates':
  169. res.send(newCards);
  170. newCards = '';
  171. return;
  172. case 'card':
  173. await userCards(req.session);
  174. if (!req.session.container_list.find(c => c.container === name)) {
  175. res.send('');
  176. return;
  177. } else {
  178. let details = await containerInfo(name);
  179. let card = await createCard(details);
  180. res.send(card);
  181. return;
  182. }
  183. case 'logs':
  184. logString = '';
  185. let options = { follow: false, stdout: true, stderr: false, timestamps: true };
  186. console.log(`Getting logs for ${name}`);
  187. docker.getContainer(name).logs(options, function (err, stream) {
  188. if (err) { console.log(`some error getting logs`); return; }
  189. const readableStream = Readable.from(stream);
  190. readableStream.on('data', function (chunk) {
  191. logString += chunk.toString('utf8');
  192. });
  193. readableStream.on('end', function () {
  194. res.send(`<pre>${logString}</pre>`);
  195. });
  196. });
  197. return;
  198. case 'hide':
  199. let user = req.session.user;
  200. let exists = await Permission.findOne({ where: {containerName: name, user: user}});
  201. if (!exists) { const newPermission = await Permission.create({ containerName: name, user: user, hide: true, userID: req.session.UUID}); }
  202. else { exists.update({ hide: true }); }
  203. hidden = await Permission.findAll({ where: {user: user, hide: true}}, { attributes: ['containerName'] });
  204. hidden = hidden.map((container) => container.containerName);
  205. res.send("ok");
  206. return;
  207. case 'reset':
  208. await Permission.update({ hide: false }, { where: { user: req.session.user } });
  209. res.send("ok");
  210. return;
  211. case 'alert':
  212. req.session.alert = '';
  213. res.send('');
  214. return;
  215. }
  216. function status (state) {
  217. return(`<span class="text-yellow align-items-center lh-1"><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>
  218. ${state}
  219. </span>`);
  220. }
  221. // Container actions
  222. if ((action == 'start') && (value == 'stopped')) {
  223. docker.getContainer(name).start();
  224. res.send(status('starting'));
  225. } else if ((action == 'start') && (value == 'paused')) {
  226. docker.getContainer(name).unpause();
  227. res.send(status('starting'));
  228. } else if ((action == 'stop') && (value != 'stopped')) {
  229. docker.getContainer(name).stop();
  230. res.send(status('stopping'));
  231. } else if ((action == 'pause') && (value == 'paused')) {
  232. docker.getContainer(name).unpause();
  233. res.send(status('starting'));
  234. } else if ((action == 'pause') && (value == 'running')) {
  235. docker.getContainer(name).pause();
  236. res.send(status('pausing'));
  237. } else if (action == 'restart') {
  238. docker.getContainer(name).restart();
  239. res.send(status('restarting'));
  240. }
  241. }
  242. async function containerInfo (containerName) {
  243. // get the container info
  244. let container = docker.getContainer(containerName);
  245. let info = await container.inspect();
  246. let image = info.Config.Image;
  247. // grab the service name from the end of the image name
  248. let service = image.split('/').pop();
  249. // remove the tag from the service name if it exists
  250. try { service = service.split(':')[0]; } catch {}
  251. let ports_list = [];
  252. let external = 0;
  253. let internal = 0;
  254. try {
  255. for (const [key, value] of Object.entries(info.HostConfig.PortBindings)) {
  256. let ports = {
  257. check: 'checked',
  258. external: value[0].HostPort,
  259. internal: key.split('/')[0],
  260. protocol: key.split('/')[1]
  261. }
  262. ports_list.push(ports);
  263. }
  264. } catch {}
  265. try {
  266. external = ports_list[0].external;
  267. internal = ports_list[0].internal;
  268. } catch {}
  269. let details = {
  270. name: containerName,
  271. image: image,
  272. service: service,
  273. state: info.State.Status,
  274. external_port: external,
  275. internal_port: internal,
  276. ports: ports_list,
  277. volumes: info.Mounts,
  278. env: info.Config.Env,
  279. labels: info.Config.Labels,
  280. link: 'localhost',
  281. }
  282. return details;
  283. }
  284. async function createCard (details) {
  285. let shortname = details.name.slice(0, 10) + '...';
  286. let trigger = 'data-hx-trigger="load, every 3s"';
  287. let state = details.state;
  288. let card = readFileSync('./views/partials/containerFull.html', 'utf8');
  289. let app_icon = (details.labels['com.docker.compose.service']);
  290. let links = await ServerSettings.findOne({ where: {key: 'links'}});
  291. if (!links) { links = { value: 'localhost' }; }
  292. let state_color = '';
  293. switch (state) {
  294. case 'running':
  295. state_color = 'green';
  296. break;
  297. case 'exited':
  298. state = 'stopped';
  299. state_color = 'red';
  300. trigger = 'data-hx-trigger="load"';
  301. break;
  302. case 'paused':
  303. state_color = 'orange';
  304. trigger = 'data-hx-trigger="load"';
  305. break;
  306. case 'installing':
  307. state_color = 'blue';
  308. trigger = 'data-hx-trigger="load"';
  309. break;
  310. }
  311. // if (name.startsWith('dweebui')) { disable = 'disabled=""'; }
  312. card = card.replace(/AppName/g, details.name);
  313. card = card.replace(/AppShortName/g, shortname);
  314. card = card.replace(/AppIcon/g, app_icon);
  315. card = card.replace(/AppState/g, state);
  316. card = card.replace(/StateColor/g, state_color);
  317. card = card.replace(/AppLink/g, links.value);
  318. card = card.replace(/ExternalPort/g, details.external_port);
  319. card = card.replace(/InternalPort/g, details.internal_port);
  320. card = card.replace(/ChartName/g, details.name.replace(/-/g, ''));
  321. card = card.replace(/AppNameState/g, `${details.name}State`);
  322. card = card.replace(/data-trigger=""/, trigger);
  323. return card;
  324. }
  325. async function userCards (session) {
  326. session.container_list = [];
  327. // check what containers the user wants hidden
  328. let hidden = await Permission.findAll({ where: {user: session.user, hide: true}}, { attributes: ['containerName'] });
  329. hidden = hidden.map((container) => container.containerName);
  330. // check what containers the user has permission to view
  331. let visable = await Permission.findAll({ where: { user: session.user, [Op.or]: [{ uninstall: true }, { edit: true }, { upgrade: true }, { start: true }, { stop: true }, { pause: true }, { restart: true }, { logs: true }, { view: true }] } });
  332. visable = visable.map((container) => container.containerName);
  333. // get all containers
  334. let containers = await docker.listContainers({ all: true });
  335. // loop through containers
  336. for (let i = 0; i < containers.length; i++) {
  337. let container_name = containers[i].Names[0].replace('/', '');
  338. // skip hidden containers
  339. if (hidden.includes(container_name)) { continue; }
  340. // admin can see all containers that they don't have hidden
  341. if (session.role == 'admin') { session.container_list.push({ container: container_name, state: containers[i].State }); }
  342. // user can see any containers that they have any permissions for
  343. else if (visable.includes(container_name)){ session.container_list.push({ container: container_name, state: containers[i].State }); }
  344. }
  345. // create a sent list if it doesn't exist
  346. if (!session.sent_list) { session.sent_list = []; }
  347. if (!session.update_list) { session.update_list = []; }
  348. if (!session.new_cards) { session.new_cards = []; }
  349. }
  350. async function updateDashboard (session) {
  351. let container_list = session.container_list;
  352. let sent_list = session.sent_list;
  353. session.new_cards = [];
  354. session.update_list = [];
  355. // loop through the containers list
  356. container_list.forEach(info => {
  357. let { container, state } = info;
  358. let sent = sent_list.find(c => c.container === container);
  359. if (!sent) { session.new_cards.push(container);}
  360. else if (sent.state !== state) { session.update_list.push(container); }
  361. });
  362. // loop through the sent list to see if any containers have been removed
  363. sent_list.forEach(info => {
  364. let { container } = info;
  365. let exists = container_list.find(c => c.container === container);
  366. if (!exists) { session.update_list.push(container); }
  367. });
  368. }
  369. // HTMX server-side events
  370. export const SSE = async (req, res) => {
  371. // set the headers for server-sent events
  372. res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' });
  373. // check for container changes every 500ms
  374. let eventCheck = setInterval(async () => {
  375. await userCards(req.session);
  376. // check if the cards displayed are the same as what's in the session
  377. if ((JSON.stringify(req.session.container_list) === JSON.stringify(req.session.sent_list))) { return; }
  378. await updateDashboard(req.session);
  379. for (let i = 0; i < req.session.new_cards.length; i++) {
  380. let details = await containerInfo(req.session.new_cards[i]);
  381. let card = await createCard(details);
  382. newCards += card;
  383. req.session.alert = '';
  384. }
  385. for (let i = 0; i < req.session.update_list.length; i++) {
  386. res.write(`event: ${req.session.update_list[i]}\n`);
  387. res.write(`data: 'update cards'\n\n`);
  388. }
  389. res.write(`event: update\n`);
  390. res.write(`data: 'update cards'\n\n`);
  391. req.session.sent_list = req.session.container_list.slice();
  392. }, 500);
  393. req.on('close', () => {
  394. clearInterval(eventCheck);
  395. });
  396. };
  397. // Server metrics (CPU, RAM, TX, RX, DISK)
  398. export const Stats = async (req, res) => {
  399. let name = req.header('hx-trigger-name');
  400. let color = req.header('hx-trigger');
  401. let value = 0;
  402. switch (name) {
  403. case 'CPU':
  404. await currentLoad().then(data => { value = Math.round(data.currentLoad); });
  405. break;
  406. case 'RAM':
  407. await mem().then(data => { value = Math.round((data.active / data.total) * 100); });
  408. break;
  409. case 'NET':
  410. let [down, up, percent] = [0, 0, 0];
  411. await networkStats().then(data => { down = Math.round(data[0].rx_bytes / (1024 * 1024)); up = Math.round(data[0].tx_bytes / (1024 * 1024)); percent = Math.round((down / 1000) * 100); });
  412. let net = `<div class="font-weight-medium"><label class="cpu-text mb-1">Down:${down}MB Up:${up}MB</label></div>
  413. <div class="cpu-bar meter animate ${color}"><span style="width:20%"><span></span></span></div>`;
  414. res.send(net);
  415. return;
  416. case 'DISK':
  417. await fsSize().then(data => { value = data[0].use; });
  418. break;
  419. }
  420. let info = `<div class="font-weight-medium"> <label class="cpu-text mb-1">${name} ${value}%</label></div>
  421. <div class="cpu-bar meter animate ${color}"><span style="width:${value}%"><span></span></span></div>`;
  422. res.send(info);
  423. }
  424. // Imported by utils/install.js
  425. export async function addAlert (session, type, message) {
  426. session.alert = `<div class="alert alert-${type} alert-dismissible py-2 mb-0" role="alert" id="alert">
  427. <div class="d-flex">
  428. <div class="spinner-border text-info nav-link">
  429. <span class="visually-hidden">Loading...</span>
  430. </div>
  431. <div>
  432.   ${message}
  433. </div>
  434. </div>
  435. <button class="btn-close" data-hx-post="/dashboard/alert" data-hx-trigger="click" data-hx-target="#alert" data-hx-swap="outerHTML" style="padding-top: 0.5rem;"></button>
  436. </div>`;
  437. }
  438. export const UpdatePermissions = async (req, res) => {
  439. let { user, container, reset_permissions } = req.body;
  440. let id = req.header('hx-trigger');
  441. if (reset_permissions) {
  442. await Permission.update({ uninstall: false, edit: false, upgrade: false, start: false, stop: false, pause: false, restart: false, logs: false, view: false }, { where: { containerName: container} });
  443. return;
  444. }
  445. await Permission.update({ uninstall: false, edit: false, upgrade: false, start: false, stop: false, pause: false, restart: false, logs: false, view: false}, { where: { containerName: container, user: user } });
  446. Object.keys(req.body).forEach(async function(key) {
  447. if (key != 'user' && key != 'container') {
  448. let permissions = req.body[key];
  449. if (permissions.includes('uninstall')) { await Permission.update({ uninstall: true }, { where: {containerName: container, user: user}}); }
  450. if (permissions.includes('edit')) { await Permission.update({ edit: true }, { where: {containerName: container, user: user}}); }
  451. if (permissions.includes('upgrade')) { await Permission.update({ upgrade: true }, { where: {containerName: container, user: user}}); }
  452. if (permissions.includes('start')) { await Permission.update({ start: true }, { where: {containerName: container, user: user}}); }
  453. if (permissions.includes('stop')) { await Permission.update({ stop: true }, { where: {containerName: container, user: user}}); }
  454. if (permissions.includes('pause')) { await Permission.update({ pause: true }, { where: {containerName: container, user: user}}); }
  455. if (permissions.includes('restart')) { await Permission.update({ restart: true }, { where: {containerName: container, user: user}}); }
  456. if (permissions.includes('logs')) { await Permission.update({ logs: true }, { where: {containerName: container, user: user}}); }
  457. if (permissions.includes('view')) { await Permission.update({ view: true }, { where: {containerName: container, user: user}}); }
  458. }
  459. });
  460. if (id == 'submit') {
  461. res.send('<button class="btn" type="button" id="confirmed" hx-post="/updatePermissions" hx-swap="outerHTML" hx-trigger="load delay:2s">Update ✔️</button>');
  462. return;
  463. } else if (id == 'confirmed') {
  464. res.send('<button class="btn" type="button" id="submit" hx-post="/updatePermissions" hx-vals="#updatePermissions" hx-swap="outerHTML">Update </button>');
  465. return;
  466. }
  467. }
  468. // Container charts
  469. export const Chart = async (req, res) => {
  470. let name = req.header('hx-trigger-name');
  471. if (!stats[name]) { stats[name] = { cpuArray: Array(15).fill(0), ramArray: Array(15).fill(0) }; }
  472. const info = await dockerContainerStats(name);
  473. stats[name].cpuArray.push(Math.round(info[0].cpuPercent));
  474. stats[name].ramArray.push(Math.round(info[0].memPercent));
  475. stats[name].cpuArray = stats[name].cpuArray.slice(-15);
  476. stats[name].ramArray = stats[name].ramArray.slice(-15);
  477. let chart = `
  478. <script>
  479. ${name}chart.updateSeries([{data: [${stats[name].cpuArray}]}, {data: [${stats[name].ramArray}]}])
  480. </script>`
  481. res.send(chart);
  482. }