jump-host/nodejs/views/dashboard.ejs

<%- include('top') %>
<script type="text/javascript">app.auth.forceLogin();</script>

<div class="row g-3 mb-4">
	<div class="col-6 col-md-3">
		<div class="card shadow-sm text-center"><div class="card-body">
			<div class="display-6" id="stat-active">–</div>
			<div class="text-muted small text-uppercase">Active sessions</div>
		</div></div>
	</div>
	<div class="col-6 col-md-3">
		<div class="card shadow-sm text-center"><div class="card-body">
			<div class="display-6" id="stat-total">–</div>
			<div class="text-muted small text-uppercase">Total connections</div>
		</div></div>
	</div>
	<div class="col-6 col-md-3">
		<div class="card shadow-sm text-center"><div class="card-body">
			<div class="display-6 text-danger" id="stat-fail">–</div>
			<div class="text-muted small text-uppercase">Failed</div>
		</div></div>
	</div>
	<div class="col-6 col-md-3">
		<div class="card shadow-sm text-center"><div class="card-body">
			<div class="display-6" id="stat-users">–</div>
			<div class="text-muted small text-uppercase">Users seen</div>
		</div></div>
	</div>
</div>

<div class="row g-3 mb-4">
	<div class="col-12">
		<div class="card shadow-sm">
			<div class="card-header"><i class="fa-solid fa-terminal me-1"></i> Quick Jump</div>
			<div class="card-body">
				<p class="text-muted small mb-2">
					Skip the picker: <code>ssh &lt;your-username&gt;_-_&lt;host-slug&gt;@&lt;this-jump-host&gt;</code>
					connects straight to a host. Or just <code>ssh &lt;your-username&gt;@&lt;this-jump-host&gt;</code>
					for the interactive picker.
				</p>
				<div class="input-group">
					<input type="text" class="form-control font-monospace" id="quick-jump-cmd" readonly>
					<button class="btn btn-outline-secondary" onclick="copyFieldValue('#quick-jump-cmd')" title="Copy">
						<i class="fa-solid fa-copy"></i>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row g-3 mb-4">
	<div class="col-12">
		<div class="card shadow-sm">
			<div class="card-header"><i class="fa-solid fa-network-wired me-1"></i> <span id="my-hosts-title">Hosts you can reach</span></div>
			<table class="table table-sm mb-0"><tbody id="my-hosts"></tbody></table>
		</div>
	</div>
</div>

<div class="row g-3 mb-4">
	<div class="col-md-6">
		<div class="card shadow-sm"><div class="card-header"><i class="fa-solid fa-server me-1"></i> Top hosts</div>
			<table class="table table-sm mb-0"><tbody id="top-hosts"></tbody></table>
		</div>
	</div>
	<div class="col-md-6">
		<div class="card shadow-sm"><div class="card-header"><i class="fa-solid fa-user me-1"></i> Top users</div>
			<table class="table table-sm mb-0"><tbody id="top-users"></tbody></table>
		</div>
	</div>
</div>

<div class="row g-3">
	<div class="col-12">
		<div class="card shadow-sm">
			<div class="card-header d-flex justify-content-between align-items-center">
				<span><i class="fa-solid fa-key me-1"></i> API Tokens</span>
				<button class="btn btn-sm btn-primary" onclick="createApiToken()"><i class="fa-solid fa-plus"></i> New token</button>
			</div>
			<div class="card-header actionMessage" style="display:none"></div>
			<p class="text-muted small px-3 pt-3 mb-0">
				Personal access tokens authenticate as you against this jump host's own API
				(e.g. <code>GET /api/user/hosts</code>) — not for SSH login. A token carries
				no group claims, so it can't reach admin-only endpoints.
			</p>
			<div class="card-body">
				<p id="api-tokens-empty" class="text-muted mb-0" style="display:none">No API tokens.</p>
				<div id="api-tokens">
					<div jq-repeat="apiTokenCard" jq-index-key="id" id="apitoken-card-{{id}}" class="card shadow-sm mb-3">
						<div class="card-header">
							<h6 class="mb-0"><i class="fa-solid fa-key"></i> {{name}}</h6>
							<small class="text-muted font-monospace">{{id_short}}</small>
						</div>
						<div class="card-header actionMessage" style="display:none"></div>
						<div class="card-body">
							{{#description}}<p>{{description}}</p>{{/description}}
							<dl class="row mb-0 small">
								<dt class="col-sm-3">Token ID</dt>
								<dd class="col-sm-9"><code>{{id_short}}</code></dd>
								<dt class="col-sm-3">Created</dt>
								<dd class="col-sm-9">{{{created_display}}}</dd>
								<dt class="col-sm-3">Last used</dt>
								<dd class="col-sm-9">{{{last_used_display}}}</dd>
								<dt class="col-sm-3">Expires</dt>
								<dd class="col-sm-9">{{{expires_display}}}</dd>
							</dl>
						</div>
						<div class="card-footer">
							<button type="button" onclick="editToken('{{id}}')" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen-to-square"></i> Edit</button>
							<button type="button" onclick="rotateApiToken('{{id}}', this)" class="btn btn-warning btn-sm"><i class="fa-solid fa-arrows-rotate"></i> Rotate</button>
							<button type="button" onclick="revokeApiToken('{{id}}', this)" class="btn btn-danger btn-sm float-end"><i class="fa-solid fa-trash"></i> Revoke</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	function rows(sel, list){
		var $b = $(sel).empty();
		if(!list || !list.length){ $b.append('<tr><td class="text-muted">No data.</td></tr>'); return; }
		list.forEach(function(x){
			$b.append('<tr><td>' + app.jump.esc(x.name) + '</td><td class="text-end">' + x.count + '</td></tr>');
		});
	}
	// The web UI and the SSH front door share a hostname, just not a port.
	var SSH_PORT = <%- JSON.stringify(sshPort) %>;
	function sshCommand(target){
		var uid = app.auth.user && app.auth.user.username;
		if(!uid) return '';
		var portFlag = SSH_PORT === 22 ? '' : ' -p ' + SSH_PORT;
		return 'ssh ' + uid + (target ? '_-_' + target : '') + '@' + location.hostname + portFlag;
	}
	function copyFieldValue(sel){
		var $el = $(sel);
		var text = $el.val();
		if(!text) return;
		navigator.clipboard.writeText(text).then(function(){
			app.messages.toast('Copied to clipboard', 'success');
		}, function(){
			app.messages.toast('Could not copy — select and copy manually', 'danger');
		});
	}

	function hostRows(sel, hosts){
		var $b = $(sel).empty();
		if(!hosts || !hosts.length){ $b.append('<tr><td class="text-muted">No hosts reachable.</td></tr>'); return; }
		hosts.forEach(function(h){
			var addr = (h.metadata && (h.metadata.ip || h.metadata.address)) || '';
			var rowId = 'host-cmd-' + h.slug.replace(/[^a-zA-Z0-9_-]/g, '');
			$b.append('<tr><td>' + app.jump.esc(h.displayName || h.name || h.slug) + '</td>'
				+ '<td class="text-muted small">' + app.jump.esc(h.slug) + '</td>'
				+ '<td class="text-end text-muted small">' + app.jump.esc(addr) + '</td>'
				+ '<td class="text-end">'
				+   '<input type="hidden" id="' + rowId + '" value="' + app.jump.esc(sshCommand(h.slug)) + '">'
				+   '<button class="btn btn-sm btn-outline-secondary" onclick="copyFieldValue(\'#' + rowId + '\')" title="Copy quick-jump command"><i class="fa-solid fa-copy"></i></button>'
				+ '</td></tr>');
		});
	}
	// expires_at/created_on/last_used_on come back as redis-hash strings for
	// some fields and real numbers for others depending on the model's field
	// type -- fmtTime already handles both via moment(ms, 'x').
	function fmtExpiry(token){
		var exp = Number(token.expires_at);
		if(!exp) return '<span class="badge text-bg-secondary">never</span>';
		if(Date.now() > exp) return '<span class="badge text-bg-danger">expired</span>';
		return '<span class="badge text-bg-warning">' + moment(exp).fromNow() + '</span>';
	}

	var tokensById = {};
	function processToken(token){
		tokensById[token.id] = token;
		token.id_short = token.id.slice(0, 12) + '…';
		token.expires_display = fmtExpiry(token);
		token.created_display = app.jump.fmtTime(token.created_on);
		token.last_used_display = token.last_used_on ? app.jump.fmtTime(token.last_used_on) : 'Never';
		return token;
	}

	function loadApiTokens(){
		app.apiToken.list(function(error, data){
			var tokens = (!error && data && data.results) || [];
			$.scope.apiTokenCard.empty();
			tokens.forEach(function(t){ $.scope.apiTokenCard.push(processToken(t)); });
			$('#api-tokens-empty').toggle(tokens.length === 0);
		});
	}

	// Shared "reveal secret once" display -- also used by proxy/sso-manager-node.
	function showToken(title, token){
		app.modal.open({title: title, bodyHtml:
			'<p class="text-danger"><i class="fa-solid fa-triangle-exclamation"></i> Save this token now — it will <strong>not</strong> be shown again.</p>'
			+ '<div class="input-group"><input type="text" class="form-control font-monospace" id="revealed-token" readonly value="' + app.jump.esc(token) + '">'
			// Reuses the same copy-to-clipboard helper as the Quick Jump card
			// above (toast feedback -- FontAwesome replaces <i> icons with
			// inline <svg>, so a checkmark-flash-the-icon approach silently
			// no-ops; the toast doesn't have that problem).
			+   '<button class="btn btn-outline-secondary" onclick="copyFieldValue(\'#revealed-token\')" title="Copy"><i class="fa-solid fa-copy"></i></button></div>'
			+ '<p class="mt-3 mb-0 text-muted small">Use it as a bearer token:<br><code>Authorization: Bearer ' + app.jump.esc(token) + '</code></p>'
		});
	}

	function createApiToken(){
		var $body = app.modal.open({title: 'New API Token', bodyHtml:
			'<div class="mb-3">'
			+   '<label class="form-label">Name</label>'
			+   '<input type="text" class="form-control" id="new-token-name" placeholder="e.g. laptop-cron">'
			+ '</div>'
			+ '<div class="mb-3">'
			+   '<label class="form-label">Description</label>'
			+   '<input type="text" class="form-control" id="new-token-description" placeholder="optional">'
			+ '</div>'
			+ '<div class="mb-3">'
			+   '<label class="form-label">Expires in (days, blank = never)</label>'
			+   '<input type="number" class="form-control" id="new-token-days" min="1">'
			+ '</div>',
			footer: {buttonsHtml: app.modal.footerButtons({onSave: 'submitApiToken()', saveLabel: 'Create'})},
		});
		$body.find('#new-token-name').focus();
	}

	function submitApiToken(){
		var name = $('#new-token-name').val().trim();
		if(!name) return app.messages.action('Name is required', app.modal.body(), 'danger');
		app.apiToken.add({
			name: name,
			description: $('#new-token-description').val(),
			expires_in_days: $('#new-token-days').val(),
		}, function(error, data){
			if(error) return app.messages.action((data && data.message) || 'Failed to create token', app.modal.body(), 'danger');
			// Deliberately no app.modal.close() here -- app.modal is a
			// singleton, and close() immediately followed by open() (inside
			// showToken) in the same tick collides with Bootstrap's
			// hide-transition guard, so the reveal modal silently never
			// shows. open() alone already overwrites the (already-visible)
			// modal's content in place.
			showToken('API Token Created', data.token);
			loadApiTokens();
		});
	}

	function editToken(id){
		var t = tokensById[id]; if(!t) return;
		app.modal.open({
			title: 'Edit Token',
			bodyHtml:
				'<input type="hidden" id="edit-token-id" value="' + app.jump.esc(id) + '">'
				+ '<div class="mb-3">'
				+   '<label class="form-label">Name</label>'
				+   '<input type="text" class="form-control" id="edit-token-name" value="' + app.jump.esc(t.name || '') + '">'
				+ '</div>'
				+ '<div class="mb-3">'
				+   '<label class="form-label">Description</label>'
				+   '<input type="text" class="form-control" id="edit-token-description" value="' + app.jump.esc(t.description || '') + '">'
				+ '</div>'
				+ '<div class="mb-3">'
				+   '<label class="form-label">Expires in (days, blank = keep as-is, 0 = never)</label>'
				+   '<input type="number" class="form-control" id="edit-token-days" min="0">'
				+ '</div>',
			footer: {
				metaHtml: 'Created by ' + app.jump.esc(t.created_by || '—') + ' on ' + app.jump.fmtTime(t.created_on),
				buttonsHtml: app.modal.footerButtons({onSave: 'saveEditToken()', saveLabel: 'Save'}),
			},
		});
	}

	function saveEditToken(){
		var payload = {
			id: $('#edit-token-id').val(),
			name: $('#edit-token-name').val(),
			description: $('#edit-token-description').val(),
			expires_in_days: $('#edit-token-days').val(),
		};
		app.apiToken.update(payload, function(error, data){
			if(error) return app.messages.action((data && data.message) || 'Failed to update token', app.modal.body(), 'danger');
			app.modal.close();
			loadApiTokens();
		});
	}

	async function revokeApiToken(id, btn){
		var $card = $(btn).closest('.card');
		var ok = await app.messages.confirm('Revoke this API token? It stops working immediately.', $card, 'danger');
		if(!ok) return;
		app.apiToken.remove(id, function(error, data){
			if(error) return app.messages.action((data && data.message) || 'Failed to revoke token', $card, 'danger');
			loadApiTokens();
		});
	}
	async function rotateApiToken(id, btn){
		var $card = $(btn).closest('.card');
		var ok = await app.messages.confirm('Rotate this API token? The old token stops working immediately.', $card, 'warning');
		if(!ok) return;
		app.apiToken.rotate(id, function(error, data){
			if(error) return app.messages.action((data && data.message) || 'Failed to rotate token', $card, 'danger');
			showToken('API Token Rotated', data.token);
			loadApiTokens();
		});
	}

	$(document).ready(async function(){
		app.jump.metrics(function(error, data){
			if(error || !data) return;
			$('#stat-active').text(data.active);
			$('#stat-total').text(data.total);
			$('#stat-fail').text(data.fail);
			$('#stat-users').text((data.topUsers || []).length);
			rows('#top-hosts', data.topHosts);
			rows('#top-users', data.topUsers);
		});
		await app.auth.loadUser();
		if(app.auth.isAdmin()) $('#my-hosts-title').text('All hosts');
		$('#quick-jump-cmd').val(sshCommand());
		app.jump.hosts(function(error, data){
			if(error) return hostRows('#my-hosts', []);
			hostRows('#my-hosts', data && data.results);
		});
		loadApiTokens();
	});
</script>
<%- include('bottom') %>