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-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>
			<table class="table table-sm mb-0">
				<thead><tr><th>Name</th><th>Created</th><th>Last used</th><th>Expires</th><th></th></tr></thead>
				<tbody id="api-tokens"></tbody>
			</table>
		</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>');
		});
	}
	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)) || '';
			$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></tr>');
		});
	}
	function tokenRows(tokens){
		var $b = $('#api-tokens').empty();
		if(!tokens || !tokens.length){ $b.append('<tr><td colspan="5" class="text-muted">No API tokens.</td></tr>'); return; }
		tokens.forEach(function(t){
			var expires = t.expires_at ? app.jump.fmtTime(t.expires_at) : 'Never';
			var lastUsed = t.last_used_on ? app.jump.fmtTime(t.last_used_on) : 'Never';
			$b.append(
				'<tr>'
				+ '<td>' + app.jump.esc(t.name) + '</td>'
				+ '<td class="text-muted small">' + app.jump.fmtTime(t.created_on) + '</td>'
				+ '<td class="text-muted small">' + lastUsed + '</td>'
				+ '<td class="text-muted small">' + expires + '</td>'
				+ '<td class="text-end">'
				+   '<button class="btn btn-sm btn-outline-secondary" onclick="rotateApiToken(\'' + t.id + '\', this)" title="Rotate"><i class="fa-solid fa-rotate"></i></button> '
				+   '<button class="btn btn-sm btn-outline-danger" onclick="revokeApiToken(\'' + t.id + '\', this)" title="Revoke"><i class="fa-solid fa-trash"></i></button>'
				+ '</td>'
				+ '</tr>'
			);
		});
	}

	function loadApiTokens(){
		app.apiToken.list(function(error, data){
			if(error) return tokenRows([]);
			tokenRows(data && data.results);
		});
	}

	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" readonly value="' + app.jump.esc(token) + '"></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">Expires in (days, blank = never)</label>'
			+   '<input type="number" class="form-control" id="new-token-days" min="1">'
			+ '</div>'
			+ '<button class="btn btn-primary" onclick="submitApiToken()"><i class="fa-solid fa-check"></i> Create</button>'
		});
		$body.find('#new-token-name').focus();
	}

	function submitApiToken(){
		var name = $('#new-token-name').val().trim();
		var $card = $('#api-tokens').closest('.card');
		if(!name) return app.messages.action('Name is required', $card, 'danger');
		app.apiToken.add({
			name: name,
			expires_in_days: $('#new-token-days').val(),
		}, function(error, data){
			if(error) return app.messages.action((data && data.message) || 'Failed to create token', $card, 'danger');
			showToken('API Token Created', data.token);
			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');
		app.jump.hosts(function(error, data){
			if(error) return hostRows('#my-hosts', []);
			hostRows('#my-hosts', data && data.results);
		});
		loadApiTokens();
	});
</script>
<%- include('bottom') %>