mirror of
https://github.com/kasmtech/kasm-install-wizard.git
synced 2026-01-23 02:34:27 +00:00
299 lines
9.2 KiB
JavaScript
299 lines
9.2 KiB
JavaScript
// Variables
|
|
var EULA;
|
|
var images;
|
|
var term;
|
|
var installImages = [];
|
|
var installSettings = {};
|
|
var selected = false;
|
|
|
|
// Socket.io connection
|
|
var host = window.location.hostname;
|
|
var port = window.location.port;
|
|
var protocol = window.location.protocol;
|
|
var path = window.location.pathname;
|
|
var socket = io(protocol + '//' + host + ':' + port, { path: path + 'socket.io'});
|
|
|
|
//// Page Functions ////
|
|
|
|
// Render term data
|
|
function renderTerm(data) {
|
|
term.write(data);
|
|
}
|
|
|
|
// Execute install
|
|
async function install() {
|
|
showTerminal()
|
|
titleChange('Installing');
|
|
// Create new object based on image selection
|
|
let selectedImages = {images: {}};
|
|
if (installImages.length == 0) {
|
|
socket.emit('install', [installSettings, false]);
|
|
} else {
|
|
for await (let image of installImages) {
|
|
if (images.images[image].hasOwnProperty('enabled')) {
|
|
images.images[image].enabled = true;
|
|
}
|
|
Object.assign(selectedImages.images, {[image]: images.images[image]});
|
|
}
|
|
socket.emit('install', [installSettings, selectedImages]);
|
|
}
|
|
}
|
|
|
|
// Show page container
|
|
function showContainer() {
|
|
$('#terminal').empty();
|
|
$('#terminal').css('display', 'none');
|
|
term = null;
|
|
$('#container').empty();
|
|
$('#container').css('display', 'block');
|
|
}
|
|
|
|
// Show terminal
|
|
function showTerminal() {
|
|
$('#container').empty();
|
|
$('#container').css('display', 'none');
|
|
$('#terminal').empty();
|
|
$('#terminal').css('display', 'block');
|
|
term = new Terminal();
|
|
fitaddon = new FitAddon.FitAddon();
|
|
term.loadAddon(fitaddon);
|
|
term.open($('#terminal')[0]);
|
|
fitaddon.fit();
|
|
}
|
|
|
|
// Change nav title
|
|
function titleChange(value) {
|
|
$('#title').empty();
|
|
$('#title').text(value);
|
|
}
|
|
|
|
// Render landing as installer page
|
|
function renderInstall(data) {
|
|
showContainer();
|
|
titleChange('EULA');
|
|
EULA = data[0];
|
|
images = data[1];
|
|
let EULADiv = $('<div>', {id: 'EULA'}).text(EULA);
|
|
$('#container').append(EULADiv);
|
|
let EULAButton = $('<button>', {id: 'EULAButton', onclick: 'pickSettings()', class: 'btn btn-default btn-ghost'}).text('Accept and continue');
|
|
$('#container').append(EULAButton);
|
|
}
|
|
|
|
// Render Dashboard
|
|
async function renderDash(info) {
|
|
showContainer();
|
|
titleChange('Dashboard');
|
|
// Kasm docker containers
|
|
containersTable = $('<tbody>');
|
|
containersTable.append(
|
|
$('<tr>').append([
|
|
$('<th>').text('Web URL'),
|
|
$('<td>').append($('<a>', {href: 'https://' + host + ':' + info.port, target: '_blank'}).text('https://' + host + ':' + info.port))
|
|
])
|
|
);
|
|
for await (let container of info.containers) {
|
|
containersTable.append(
|
|
$('<tr>').append([
|
|
$('<th>').text(container.Names[0]),
|
|
$('<td>').text(container.State + ' ' + container.Status)
|
|
])
|
|
);
|
|
}
|
|
dockerCard = $('<div>', {id: 'dockerinfo', class: 'terminal-card'}).append([
|
|
$('<header>').text('Kasm Docker containers'),
|
|
$('<table>').append(containersTable)
|
|
]);
|
|
// System Information
|
|
let usedmem = (info.mem.active/info.mem.total)*100;
|
|
let totalmem = parseFloat(info.mem.total/1000000000).toFixed(2);
|
|
let diskbuffer = parseFloat(info.mem.buffcache/1000000000).toFixed(2);
|
|
sysinfoTable = $('<tbody>').append([
|
|
$('<tr>').append([
|
|
$('<th>').text('CPU'),
|
|
$('<td>').text(info.cpu.vendor + ' ' + info.cpu.brand)
|
|
]),
|
|
$('<tr>').append([
|
|
$('<th>').text('CPU Cores'),
|
|
$('<td>').text(info.cpu.cores)
|
|
]),
|
|
$('<tr>').append([
|
|
$('<th>').text('CPU Usage'),
|
|
$('<td>').append(
|
|
$('<div>', {class: 'progress-bar progress-bar-no-arrow'}).append(
|
|
$('<div>', {
|
|
class: 'progress-bar-filled',
|
|
style: 'width: ' + info.cpuPercent.currentLoad + '%'
|
|
})
|
|
)
|
|
)
|
|
]),
|
|
$('<tr>').append([
|
|
$('<th>').text('Total Memory'),
|
|
$('<td>').text(totalmem + 'G')
|
|
]),
|
|
$('<tr>').append([
|
|
$('<th>').text('Disk Buffer'),
|
|
$('<td>').text(diskbuffer + 'G')
|
|
]),
|
|
$('<tr>').append([
|
|
$('<th>').text('Memory Usage'),
|
|
$('<td>').append(
|
|
$('<div>', {class: 'progress-bar progress-bar-no-arrow'}).append(
|
|
$('<div>', {
|
|
class: 'progress-bar-filled',
|
|
style: 'width: ' + usedmem + '%'
|
|
})
|
|
)
|
|
)
|
|
])
|
|
]);
|
|
systemCard = $('<div>', {id: 'systeminfo', class: 'terminal-card'}).append([
|
|
$('<header>').text('System Information'),
|
|
$('<table>').append(sysinfoTable)
|
|
]);
|
|
$('#container').append([systemCard, dockerCard]);
|
|
}
|
|
|
|
// Render primary form
|
|
async function pickSettings() {
|
|
showContainer();
|
|
titleChange('Install Settings');
|
|
let form = $('<form>', {id: 'settingsform'});
|
|
let fieldset = $('<fieldset>').append($('<legend>').text('Kasm Install Settings'));
|
|
let adminPass = $('<div>', {class: 'form-group'}).append([
|
|
$('<label>', {for: 'adminPass'}).text('admin@kasm.local Password: '),
|
|
$('<input>', {name: 'adminPass', id: 'adminPass', type: 'password', required: true, placeholder: 'required'})
|
|
]);
|
|
let userPass = $('<div>', {class: 'form-group'}).append([
|
|
$('<label>', {for: 'userPass'}).text('user@kasm.local Password: '),
|
|
$('<input>', {name: 'userPass', id: 'userPass', type: 'password', placeholder: 'required'}).prop('required',true)
|
|
]);
|
|
let useRolling = $('<div>', {class: 'form-group'}).append([
|
|
$('<label>', {for: 'useRolling'}).text('Use Rolling Images: '),
|
|
$('<input>', {name: 'useRolling', id: 'useRolling', type: 'checkbox'})
|
|
]);
|
|
let noDownload = $('<div>', {class: 'form-group'}).append([
|
|
$('<label>', {for: 'noDownload'}).text('Skip Image Download: '),
|
|
$('<input>', {name: 'noDownload', id: 'noDownload', type: 'checkbox'})
|
|
]);
|
|
let submit = $('<div>', {class: 'form-group'}).append([
|
|
$('<input>', {name: 'submit', type: 'submit', value: 'Next', class: 'btn btn-default btn-ghost'})
|
|
]);
|
|
fieldset.append([
|
|
adminPass,
|
|
userPass,
|
|
useRolling,
|
|
noDownload,
|
|
submit
|
|
]);
|
|
form.append(fieldset);
|
|
$('#container').append(form);
|
|
// Grab data and move to image selection
|
|
form.on('submit', function (e) {
|
|
e.preventDefault();
|
|
installSettings.adminPass = $('#adminPass').val();
|
|
installSettings.userPass = $('#userPass').val();
|
|
installSettings.useRolling = $('#useRolling').is(":checked");
|
|
installSettings.noDownload = $('#noDownload').is(":checked");
|
|
pickImages();
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// Render image selection
|
|
async function pickImages() {
|
|
showContainer();
|
|
titleChange('Image Selection');
|
|
let imagesDiv = $('<div>', {class: 'cardcontainer', id: 'images'});
|
|
$('#container').append(imagesDiv);
|
|
for await (let image of Object.keys(images.images)) {
|
|
let imageName = $('<p>').text(image);
|
|
let imageDiv = $('<div>', {
|
|
class: 'card',
|
|
id: image.replace(new RegExp(' ', 'g'), '_'),
|
|
title: images.images[image].description,
|
|
onclick: 'selectImage(\'' + image.replace(new RegExp(' ', 'g'), '_') + '\')'
|
|
}).append(imageName).css('filter', 'grayscale(100%)')
|
|
let thumb = $('<img>', {class: 'thumb', src: 'public/' + images.images[image].image_src});
|
|
imageDiv.append(thumb);
|
|
$('#images').append(imageDiv);
|
|
}
|
|
let allButton = $('<button>', {class: 'btn btn-default btn-ghost center', onclick: 'selectAll()'}).text('Select All');
|
|
let installButton = $('<button>', {class: 'btn btn-default btn-ghost center', onclick: 'install()'}).text('Install');
|
|
$('#container').append([
|
|
allButton,
|
|
installButton
|
|
]);
|
|
}
|
|
|
|
// Select an individual image
|
|
function selectImage(image) {
|
|
let imageKey = image.replace(new RegExp('_', 'g'), ' ');
|
|
if (installImages.includes(imageKey)) {
|
|
installImages = installImages.filter(e => e !== imageKey)
|
|
$('#' + image).css({
|
|
filter: 'grayscale(100%)',
|
|
background: ''
|
|
});
|
|
} else {
|
|
installImages.push(imageKey);
|
|
$('#' + image).css({
|
|
filter: '',
|
|
background: '#89cff0'
|
|
});
|
|
}
|
|
}
|
|
|
|
// Select all images
|
|
function selectAll() {
|
|
installImages = [];
|
|
if (selected) {
|
|
selected = false;
|
|
for (let image of Object.keys(images.images)) {
|
|
let imageElem = image.replace(new RegExp(' ', 'g'), '_');
|
|
$('#' + imageElem).css({
|
|
filter: 'grayscale(100%)',
|
|
background: ''
|
|
});
|
|
}
|
|
} else {
|
|
selected = true;
|
|
for (let image of Object.keys(images.images)) {
|
|
let imageElem = image.replace(new RegExp(' ', 'g'), '_');
|
|
installImages.push(image);
|
|
$('#' + imageElem).css({
|
|
filter: '',
|
|
background: '#89cff0'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Show finished page
|
|
function done(port) {
|
|
showContainer();
|
|
titleChange('Complete');
|
|
let titleBar = $('<div>');
|
|
titleBar.append($('<h2>', {class: 'center'}).text('Installation Complete'));
|
|
titleBar.append($('<h3>', {class: 'center'}).text('This page will reload in 5 seconds'));
|
|
titleBar.append($('<h3>', {class: 'center'}).text('Your installation is available on port ' + port));
|
|
$('#container').append(titleBar);
|
|
setTimeout(function(){
|
|
location.reload(true);
|
|
}, 5000);
|
|
}
|
|
|
|
//// Socket events ////
|
|
socket.on('renderinstall', renderInstall);
|
|
socket.on('renderdash', renderDash);
|
|
socket.on('term', renderTerm);
|
|
socket.on('done', done);
|
|
|
|
// Render landing on page load
|
|
window.onload = function() {
|
|
showContainer();
|
|
titleChange('Loading');
|
|
$('#container').append($('<div>').append($('<h2>', {class: 'center'}).text('Docker still loading, please refresh for installer')))
|
|
socket.emit('renderlanding');
|
|
}
|