").attr('id', 'row-' + container.ID);
88 | tr.append($("").html(' ").attr('id', 'name-' + container.ID));
90 | tr.append($(" ").attr('id', 'id-' + container.ID));
91 | tr.append($(" ").attr('id', 'state-' + container.ID));
92 | tr.append($(" ").attr('id', 'status-' + container.ID));
93 | tr.append($(" ").attr('id', 'image-' + container.ID));
94 | tr.append($(" ").attr('id', 'port-' + container.ID));
95 | tr.append($(" ").html('${container.State} `);
120 | break;
121 | case 'Status':
122 | $(`#status-${container.ID}`).html(`${container.Status} `);
123 | break;
124 | case 'Image':
125 | $(`#image-${container.ID}`).text(container.Image);
126 | break;
127 | case 'Ports':
128 | $(`#port-${container.ID}`).html(getPortBindings(container.Ports));
129 | break;
130 | }
131 | }
132 | });
133 |
134 | // Store the current state of the container for the next update
135 | previousStateContainers[container.ID] = container;
136 | });
137 | if (firstLoadContainerList) {
138 | firstLoadContainerList = false;
139 | }
140 |
141 | $("#containers-loading").hide();
142 | };
143 | }
144 | }
145 | initContainerListES();
146 |
147 | var messagesSource = null;
148 | function initMessageES() {
149 | if (messagesSource == null || messagesSource.readyState == 2) {
150 | messagesSource = new EventSource(`${websiteUrl}/api/streams/servermessages`);
151 | messagesSource.onerror = function (event) {
152 | if (messagesSource.readyState == 2) {
153 | // retry connection to ES
154 | setTimeout(initMessageES, 5000);
155 | }
156 | }
157 | }
158 | messagesSource.onmessage = function (event) {
159 | var data = JSON.parse(event.data);
160 | let icon;
161 | let toastHeaderBgColor;
162 | const uniqueId = 'toast' + Date.now();
163 | const timeSent = new Date(data.timeSent * 1000);
164 | const now = new Date();
165 | const diffInMilliseconds = now - timeSent;
166 | const diffInMinutes = Math.floor(diffInMilliseconds / 1000 / 60);
167 | // if data.category is success use success, error uses danger
168 | switch (data.category.toLowerCase()) {
169 | case 'success':
170 | toastHeaderBgColor = 'success';
171 | icon = `
180 |
188 |
189 | ${data.text}
190 |
191 |
").attr('id', 'stats-row-' + container.ID);
335 | tr.append($("").attr('id', 'stats-name-' + container.ID));
336 | tr.append($(" ").attr('id', 'stats-cpu-percent-' + container.ID));
337 | tr.append($(" ").attr('id', 'stats-memory-usage-' + container.ID));
338 | tr.append($(" ").attr('id', 'stats-memory-limit-' + container.ID));
339 | tr.append($(" ").attr('id', 'stats-memory-percent-' + container.ID));
340 | // first load, all rows are new so append in order the data was sent
341 | // if its the first load, append everything
342 | // if its a newly created container, will have to prepend
343 | if (firstLoadStatsList) {
344 | statsTbody.append(tr);
345 | } else {
346 | statsTbody.prepend(tr);
347 | }
348 | }
349 | // Define the attributes to be updated
350 | const attributes = ['Name', 'CpuPercent', 'MemoryUsage', 'MemoryLimit', 'MemoryPercent'];
351 | attributes.forEach(attr => {
352 | // If the attribute has changed
353 | if (previousStateStats[container.ID]?.[attr] !== container[attr]) {
354 | switch (attr) {
355 | case 'Name':
356 | $(`#stats-name-${container.ID}`).text(container[attr]);
357 | break;
358 | case 'CpuPercent':
359 | let fixedCpuPercent = container[attr].toFixed(3);
360 | $(`#stats-cpu-percent-${container.ID}`).html(`${fixedCpuPercent} % `);
361 | break;
362 | case 'MemoryUsage':
363 | // const sizeBytes = container[attr];
364 | let displaySize = convertBytes(container[attr]);
365 | $(`#stats-memory-usage-${container.ID}`).text(displaySize);
366 | break;
367 | case 'MemoryLimit':
368 | let memLimit = convertBytes(container[attr]);
369 | $(`#stats-memory-limit-${container.ID}`).text(memLimit);
370 | break;
371 | case 'MemoryPercent':
372 | let fixedMemPercent = container[attr].toFixed(3);
373 | $(`#stats-memory-percent-${container.ID}`).html(`${fixedMemPercent} % `);
374 | break;
375 | }
376 | }
377 | });
378 | // Store the current state of the container for the next update
379 | previousStateStats[container.ID] = container;
380 |
381 | if (firstLoadStatsList) {
382 | firstLoadStatsList = false;
383 | }
384 | $("#stats-loading").hide();
385 | };
386 | }
387 | initContainerStatsES()
388 |
389 |
390 |
391 |
392 | // handle file uploading
393 | $('#upload-compose-btn').click(function (e) {
394 | // get projectName
395 | const projectName = $('#projectName').val();
396 | // get yaml contents
397 | const yamlContents = $('#yamlContents').val();
398 |
399 | // alert if fields aren't filled in
400 | if (!projectName || !yamlContents) {
401 | alert('Please fill out required fields.');
402 | return;
403 | }
404 |
405 | // disable button and show spinner
406 | $(this).addClass('disabled');
407 | $(this).find('.spinner-border').toggleClass('d-none');
408 |
409 | $.ajax({
410 | url: `${websiteUrl}/api/compose/upload`,
411 | type: 'POST',
412 | data: JSON.stringify({
413 | "projectName": projectName,
414 | "yamlContents": yamlContents,
415 | }),
416 | processData: false, // tell jQuery not to process the data
417 | contentType: false, // tell jQuery not to set contentType
418 | success: function (data) {
419 | $('#upload-compose-btn').removeClass('disabled');
420 | $('#upload-compose-btn').find('.spinner-border').toggleClass('d-none');
421 | // clear projectName input and textarea
422 | $('#projectName').val('');
423 | $('#yamlContents').val('');
424 | // hide modal
425 | $('#composeModal').modal('hide');
426 | }
427 | });
428 | });
429 |
430 | // retrieve composefiles eventsource
431 | var composeFilesSource = null;
432 | let composeFilesState = new Set();
433 | function initComposeFilesSource() {
434 | if (composeFilesSource == null || composeFilesSource.readyState == 2) {
435 | composeFilesSource = new EventSource(`${websiteUrl}/api/streams/composefiles`);
436 | composeFilesSource.onerror = function (event) {
437 | if (composeFilesSource.readyState == 2) {
438 | // retry connection to ES
439 | setTimeout(composeFilesSource, 5000);
440 | }
441 | }
442 | }
443 | composeFilesSource.onmessage = function (event) {
444 | // event.data.files -> list of file names within /composefiles directory
445 | if (event.data.trim() === "") {
446 | // data hasnt changed, recieved heartbeat from server so return
447 | return;
448 | }
449 | // if event.data['files'] doesnt have what is on the screen, remove it
450 | const data = JSON.parse(event.data);
451 | data.files.forEach(fileName => {
452 | if (!composeFilesState.has(fileName)) {
453 | composeFilesState.add(fileName);
454 | const newCard = `
455 |
456 |
459 |
460 |
461 | Loading...
463 | Up
464 |
465 |
466 | Loading...
468 | Down
469 |
470 |
471 | Loading...
473 |
475 |
476 |
29 | 
30 | 
34 | 
35 | 
36 | 
46 | 
47 | 
28 |