BetterDesk/web-nodejs/views/server-attestation.ejs

<%
    var saTier = (typeof lastResult !== 'undefined' && lastResult && lastResult.tier)
        ? String(lastResult.tier).toLowerCase() : '';
    var saTierLabel = saTier
        ? (_('server_attestation.tier_' + saTier) || saTier.toUpperCase())
        : (_('server_attestation.tier_none') || 'UNRATED');
    var saTierClass = saTier ? ('bd-attest-tier-' + saTier) : 'bd-attest-tier-none';
    var saMaxConn = (typeof lastResult !== 'undefined' && lastResult) ? lastResult.maxConnections : null;
    var saHasResult = typeof lastResult !== 'undefined' && lastResult;
    var saHeroBadge = ''
        + '<div class="bd-attest-badge bd-attest-badge--large ' + saTierClass + '" title="' + (_('server_attestation.badge_tooltip') || 'BetterDesk Server Attestation') + '">'
        + '<div class="bd-attest-brand">BetterDesk</div>'
        + '<div class="bd-attest-tier">' + saTierLabel + '</div>'
        + (saMaxConn ? ('<div class="bd-attest-conn">' + saMaxConn + ' ' + (_('server_attestation.connections_short') || 'conn.') + '</div>') : '')
        + '</div>';
%>
<%- include('layouts/main', {
    title: _('server_attestation.title'),
    pageStyles: ['server-attestation'],
    pageScripts: ['server-attestation'],
    currentPage: 'server-attestation',
    breadcrumb: [{ label: _('server_attestation.title') }],
    body: `
<div class="sa-page" id="sa-page">

    <div class="page-header sa-header">
        <div class="page-title">
            <h1>
                <span class="material-icons">verified</span>
                ${_('server_attestation.title')}
            </h1>
        </div>
        <p class="page-subtitle">${_('server_attestation.subtitle')}</p>
    </div>

    <div class="sa-notice">
        <span class="material-icons">warning</span>
        <div>
            <strong>${_('server_attestation.warning_title')}</strong>
            <p>${_('server_attestation.warning_body')}</p>
        </div>
    </div>

    <div class="sa-layout">
        <div class="sa-hero">
            ${saHeroBadge}
            <div class="sa-hero-meta" id="sa-hero-meta">
                ${saHasResult && lastResult.testedAt
                    ? '<span>' + _('server_attestation.last_test') + ': ' + new Date(lastResult.testedAt).toLocaleString()
                        + (lastResult.mode === 'estimated' ? ' · ' + _('server_attestation.mode_estimated') : '') + '</span>'
                    : '<span class="sa-muted">' + _('server_attestation.no_test_yet') + '</span>'}
            </div>
        </div>

        <div class="sa-controls">
            <button type="button" class="btn btn-primary" id="sa-run-btn">
                <span class="material-icons">speed</span>
                ${_('server_attestation.run_benchmark')}
            </button>
            <button type="button" class="btn btn-secondary hidden" id="sa-abort-btn">
                <span class="material-icons">stop</span>
                ${_('server_attestation.abort')}
            </button>
            <button type="button" class="btn btn-ghost" id="sa-download-btn" ${!saHasResult ? 'disabled' : ''}>
                <span class="material-icons">download</span>
                ${_('server_attestation.download_report')}
            </button>
        </div>

        <div class="sa-progress hidden" id="sa-progress">
            <div class="sa-progress-bar"><div class="sa-progress-fill" id="sa-progress-fill"></div></div>
            <p class="sa-progress-text" id="sa-progress-text"></p>
        </div>

        <div class="sa-grid">
            <div class="sa-card">
                <div class="sa-card-header">
                    <span class="material-icons">hub</span>
                    <h3>${_('server_attestation.max_connections')}</h3>
                </div>
                <div class="sa-stat-value" id="sa-max-conn">${saHasResult && lastResult.maxConnections ? lastResult.maxConnections : '—'}</div>
                <div class="sa-stat-detail" id="sa-conn-detail"></div>
            </div>

            <div class="sa-card">
                <div class="sa-card-header">
                    <span class="material-icons">memory</span>
                    <h3>${_('server_attestation.threshold_80')}</h3>
                </div>
                <table class="sa-threshold-table">
                    <tbody>
                        <tr><td>CPU</td><td id="sa-th-cpu">${saHasResult && lastResult.finalMetrics ? lastResult.finalMetrics.cpu + '%' : '—'}</td></tr>
                        <tr><td>RAM</td><td id="sa-th-mem">${saHasResult && lastResult.finalMetrics ? lastResult.finalMetrics.mem + '%' : '—'}</td></tr>
                        <tr><td>${_('server_attestation.disk')}</td><td id="sa-th-disk">${saHasResult && lastResult.finalMetrics ? lastResult.finalMetrics.disk + '%' : '—'}</td></tr>
                    </tbody>
                </table>
            </div>

            <div class="sa-card sa-card-wide">
                <div class="sa-card-header">
                    <span class="material-icons">info</span>
                    <h3>${_('server_attestation.tier_guide_title')}</h3>
                </div>
                <div class="sa-tier-guide">
                    <div class="sa-tier-row">
                        <div class="bd-attest-badge bd-attest-badge--sm bd-attest-tier-bronze"><div class="bd-attest-brand">BetterDesk</div><div class="bd-attest-tier">${_('server_attestation.tier_bronze')}</div></div>
                        <p>${_('server_attestation.tier_bronze_desc')}</p>
                    </div>
                    <div class="sa-tier-row">
                        <div class="bd-attest-badge bd-attest-badge--sm bd-attest-tier-iron"><div class="bd-attest-brand">BetterDesk</div><div class="bd-attest-tier">${_('server_attestation.tier_iron')}</div></div>
                        <p>${_('server_attestation.tier_iron_desc')}</p>
                    </div>
                    <div class="sa-tier-row">
                        <div class="bd-attest-badge bd-attest-badge--sm bd-attest-tier-platinum"><div class="bd-attest-brand">BetterDesk</div><div class="bd-attest-tier">${_('server_attestation.tier_platinum')}</div></div>
                        <p>${_('server_attestation.tier_platinum_desc')}</p>
                    </div>
                    <div class="sa-tier-row">
                        <div class="bd-attest-badge bd-attest-badge--sm bd-attest-tier-titanium"><div class="bd-attest-brand">BetterDesk</div><div class="bd-attest-tier">${_('server_attestation.tier_titanium')}</div></div>
                        <p>${_('server_attestation.tier_titanium_desc')}</p>
                    </div>
                    <div class="sa-tier-row">
                        <div class="bd-attest-badge bd-attest-badge--sm bd-attest-tier-obsidian"><div class="bd-attest-brand">BetterDesk</div><div class="bd-attest-tier">${_('server_attestation.tier_obsidian')}</div></div>
                        <p>${_('server_attestation.tier_obsidian_desc')}</p>
                    </div>
                </div>
                <p class="sa-docker-note">${_('server_attestation.docker_note')}</p>
            </div>
        </div>
    </div>
</div>
`
}) %>