bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: localize usage page

Browse Source
This commit is contained in:
a.tolmachev
2026-04-02 23:15:02 +03:00
parent 5e20b58766
commit 2f79eb8f48
3 changed files with 159 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui/html/usage.html
+24 -24
View File
@@ -34,12 +34,12 @@
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown-label">Your workspaces</div>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
<button class="ws-dropdown-create" onclick="window.location.href='/workspace-setup?mode=create'">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M8 3v10M3 8h10"/></svg>
Create workspace
<span data-i18n="nav.create_workspace">Create workspace</span>
</button>
</div>
</div>
@@ -58,7 +58,7 @@
<svg width="12" height="12"><use href="icons/general/grid.svg#icon"/></svg>
<span>⌘K</span>
</div>
<button class="nav-icon-btn" title="Notifications">
<button class="nav-icon-btn" data-i18n-title="nav.notifications" title="Notifications">
<svg width="15" height="15"><use href="icons/general/bell.svg#icon"/></svg>
</button>
<div class="nav-divider"></div>
@@ -96,18 +96,18 @@
<div class="page-header">
<div class="page-header-text">
<h1 class="page-title" data-i18n="usage.title">Usage</h1>
<p class="page-subtitle">Invocation metrics for all operations in your workspace.</p>
<p class="page-subtitle" data-i18n="usage.subtitle">Invocation metrics for all operations in your workspace.</p>
</div>
<div class="page-header-actions">
<select class="period-select" id="period">
<option value="7d" selected>Last 7 days</option>
<option value="30d">Last 30 days</option>
<option value="90d">Last 90 days</option>
<option value="this_month">This month</option>
<option value="7d" selected data-i18n="usage.period.7d">Last 7 days</option>
<option value="30d" data-i18n="usage.period.30d">Last 30 days</option>
<option value="90d" data-i18n="usage.period.90d">Last 90 days</option>
<option value="this_month" data-i18n="usage.period.this_month">This month</option>
</select>
<button class="btn-secondary" type="button">
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M7.47 1.72a.75.75 0 011.06 0l4.5 4.5a.75.75 0 01-1.06 1.06L8.75 4.06v8.94a.75.75 0 01-1.5 0V4.06L4.53 7.28a.75.75 0 01-1.06-1.06l4.5-4.5zM1.5 13.75a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H2.25a.75.75 0 01-.75-.75z"/></svg>
Export CSV
<span data-i18n="usage.export">Export CSV</span>
</button>
</div>
</div>
@@ -115,7 +115,7 @@
<!-- Stat cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-label">Total invocations</div>
<div class="stat-label" data-i18n="usage.stats.total">Total invocations</div>
<div class="stat-value">28,341</div>
<div class="stat-delta up">
<svg width="11" height="11" viewBox="0 0 12 12" fill="currentColor"><path d="M6 2l4 4H7v4H5V6H2l4-4z"/></svg>
@@ -123,7 +123,7 @@
</div>
</div>
<div class="stat-card">
<div class="stat-label">Success rate</div>
<div class="stat-label" data-i18n="usage.stats.success">Success rate</div>
<div class="stat-value">98.6%</div>
<div class="stat-delta up">
<svg width="11" height="11" viewBox="0 0 12 12" fill="currentColor"><path d="M6 2l4 4H7v4H5V6H2l4-4z"/></svg>
@@ -131,7 +131,7 @@
</div>
</div>
<div class="stat-card">
<div class="stat-label">Median latency (p50)</div>
<div class="stat-label" data-i18n="usage.stats.p50">Median latency (p50)</div>
<div class="stat-value">124ms</div>
<div class="stat-delta up">
<svg width="11" height="11" viewBox="0 0 12 12" fill="currentColor"><path d="M6 2l4 4H7v4H5V6H2l4-4z"/></svg>
@@ -139,7 +139,7 @@
</div>
</div>
<div class="stat-card">
<div class="stat-label">p99 latency</div>
<div class="stat-label" data-i18n="usage.stats.p99">p99 latency</div>
<div class="stat-value">2.1s</div>
<div class="stat-delta down">
<svg width="11" height="11" viewBox="0 0 12 12" fill="currentColor"><path d="M6 10L2 6h3V2h2v4h3l-4 4z"/></svg>
@@ -151,10 +151,10 @@
<!-- Invocations chart -->
<div class="section-card" style="margin-bottom:20px;">
<div class="section-card-header">
<div class="section-card-title">Invocations over time</div>
<div class="section-card-title" data-i18n="usage.chart.title">Invocations over time</div>
<div style="display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-muted);">
<span style="display:flex;align-items:center;gap:5px;"><span style="width:10px;height:10px;border-radius:2px;background:var(--accent);display:inline-block;"></span>Success</span>
<span style="display:flex;align-items:center;gap:5px;"><span style="width:10px;height:10px;border-radius:2px;background:var(--red);display:inline-block;"></span>Error</span>
<span style="display:flex;align-items:center;gap:5px;"><span style="width:10px;height:10px;border-radius:2px;background:var(--accent);display:inline-block;"></span><span data-i18n="usage.chart.success">Success</span></span>
<span style="display:flex;align-items:center;gap:5px;"><span style="width:10px;height:10px;border-radius:2px;background:var(--red);display:inline-block;"></span><span data-i18n="usage.chart.error">Error</span></span>
</div>
</div>
<div class="section-card-body" style="padding-bottom:28px;">
@@ -166,20 +166,20 @@
<div class="section-card">
<div class="section-card-header">
<div>
<div class="section-card-title">By operation</div>
<div class="section-card-title" data-i18n="usage.table.title">By operation</div>
<div class="section-card-subtitle">Breakdown for last 7 days</div>
</div>
</div>
<table class="data-table">
<thead>
<tr>
<th>Operation</th>
<th>Protocol</th>
<th style="text-align:right;">Calls</th>
<th style="text-align:right;">Errors</th>
<th style="text-align:right;">Error rate</th>
<th>Latency (p50 / p95 / p99)</th>
<th style="text-align:right;">Traffic share</th>
<th data-i18n="usage.table.th.operation">Operation</th>
<th data-i18n="usage.table.th.protocol">Protocol</th>
<th style="text-align:right;" data-i18n="usage.table.th.calls">Calls</th>
<th style="text-align:right;" data-i18n="usage.table.th.errors">Errors</th>
<th style="text-align:right;" data-i18n="usage.table.th.error_rate">Error rate</th>
<th data-i18n="usage.table.th.latency">Latency (p50 / p95 / p99)</th>
<th style="text-align:right;" data-i18n="usage.table.th.share">Traffic share</th>
</tr>
</thead>
<tbody id="usage-tbody">
apps/ui/js/i18n.js
+98 -2
View File
@@ -193,7 +193,55 @@ var TRANSLATIONS = {
// Usage page
'usage.title': 'Usage',
'usage.subtitle': 'Request volume and performance metrics',
'usage.subtitle': 'Invocation metrics for all operations in your workspace.',
'usage.export': 'Export CSV',
'usage.period.7d': 'Last 7 days',
'usage.period.30d': 'Last 30 days',
'usage.period.90d': 'Last 90 days',
'usage.period.this_month': 'This month',
'usage.period.label.7d': 'last 7 days',
'usage.period.label.30d': 'last 30 days',
'usage.period.label.90d': 'last 90 days',
'usage.period.label.this_month': 'this month',
'usage.stats.total': 'Total invocations',
'usage.stats.success': 'Success rate',
'usage.stats.p50': 'Median latency (p50)',
'usage.stats.p99': 'p99 latency',
'usage.stats.across': 'Across {period}',
'usage.stats.success_calls': '{count} successful calls',
'usage.stats.median': 'Median latency for selected period',
'usage.stats.error_calls': '{count} error calls',
'usage.chart.title': 'Invocations over time',
'usage.chart.success': 'Success',
'usage.chart.error': 'Error',
'usage.chart.empty.title': 'No usage data yet',
'usage.chart.empty.sub': 'Invocation metrics will appear here after tests or published tool calls in the selected period.',
'usage.table.title': 'By operation',
'usage.table.subtitle': 'Breakdown for {period}',
'usage.table.th.operation': 'Operation',
'usage.table.th.protocol': 'Protocol',
'usage.table.th.calls': 'Calls',
'usage.table.th.errors': 'Errors',
'usage.table.th.error_rate': 'Error rate',
'usage.table.th.latency': 'Latency (p50 / p95 / p99)',
'usage.table.th.share': 'Traffic share',
'usage.table.empty.title': 'No operation breakdown yet',
'usage.table.empty.sub': 'The selected period has no invocation samples to break down by operation.',
'usage.table.share': '{value}% of workspace traffic',
'usage.loading.title': 'Loading usage…',
'usage.loading.sub': 'Aggregating invocation metrics for the selected workspace.',
'usage.error.title': 'Unable to load usage',
'usage.error.api': 'Admin API is not available',
'usage.error.workspace': 'Workspace is not selected',
'usage.error.load': 'Failed to load usage',
'usage.export.empty.title': 'No usage data loaded',
'usage.export.empty.body': 'Load usage data before exporting the CSV snapshot.',
'usage.export.done.title': 'Usage exported',
'usage.export.done.body': 'The current usage snapshot was exported as CSV.',
'usage.chart.ok': '{count} ok',
'usage.chart.errors': '{count} errors',
'usage.chart.week': 'Wk {index}',
'usage.csv.header': 'Operation,Protocol,Calls,Errors,Error Rate (%),p50 (ms),p95 (ms),p99 (ms)',
// Settings sidebar
'settings.title': 'Settings',
@@ -512,7 +560,55 @@ var TRANSLATIONS = {
// Usage page
'usage.title': 'Использование',
'usage.subtitle': 'Объём запросов и метрики производительности',
'usage.subtitle': 'Метрики вызовов по всем операциям этого воркспейса.',
'usage.export': 'Экспорт CSV',
'usage.period.7d': 'Последние 7 дней',
'usage.period.30d': 'Последние 30 дней',
'usage.period.90d': 'Последние 90 дней',
'usage.period.this_month': 'Этот месяц',
'usage.period.label.7d': 'последние 7 дней',
'usage.period.label.30d': 'последние 30 дней',
'usage.period.label.90d': 'последние 90 дней',
'usage.period.label.this_month': 'этот месяц',
'usage.stats.total': 'Всего вызовов',
'usage.stats.success': 'Доля успешных',
'usage.stats.p50': 'Медианная задержка (p50)',
'usage.stats.p99': 'Задержка p99',
'usage.stats.across': 'За период: {period}',
'usage.stats.success_calls': 'Успешных вызовов: {count}',
'usage.stats.median': 'Медианная задержка за выбранный период',
'usage.stats.error_calls': 'Ошибочных вызовов: {count}',
'usage.chart.title': 'Вызовы во времени',
'usage.chart.success': 'Успех',
'usage.chart.error': 'Ошибка',
'usage.chart.empty.title': 'Данных по использованию пока нет',
'usage.chart.empty.sub': 'Метрики появятся здесь после тестов или вызовов опубликованных инструментов за выбранный период.',
'usage.table.title': 'По операциям',
'usage.table.subtitle': 'Разбивка за период: {period}',
'usage.table.th.operation': 'Операция',
'usage.table.th.protocol': 'Протокол',
'usage.table.th.calls': 'Вызовы',
'usage.table.th.errors': 'Ошибки',
'usage.table.th.error_rate': 'Доля ошибок',
'usage.table.th.latency': 'Задержка (p50 / p95 / p99)',
'usage.table.th.share': 'Доля трафика',
'usage.table.empty.title': 'Разбивки по операциям пока нет',
'usage.table.empty.sub': 'За выбранный период нет вызовов, которые можно разложить по операциям.',
'usage.table.share': '{value}% трафика воркспейса',
'usage.loading.title': 'Загрузка использования…',
'usage.loading.sub': 'Собираем метрики вызовов для выбранного воркспейса.',
'usage.error.title': 'Не удалось загрузить использование',
'usage.error.api': 'Admin API недоступен',
'usage.error.workspace': 'Воркспейс не выбран',
'usage.error.load': 'Не удалось загрузить метрики использования',
'usage.export.empty.title': 'Данные по использованию не загружены',
'usage.export.empty.body': 'Сначала загрузите данные использования, а потом экспортируйте снимок CSV.',
'usage.export.done.title': 'Использование экспортировано',
'usage.export.done.body': 'Текущий снимок использования экспортирован в CSV.',
'usage.chart.ok': 'Успешных: {count}',
'usage.chart.errors': 'Ошибок: {count}',
'usage.chart.week': 'Нед. {index}',
'usage.csv.header': 'Операция,Протокол,Вызовы,Ошибки,Доля ошибок (%),p50 (мс),p95 (мс),p99 (мс)',
// Settings sidebar
'settings.title': 'Настройки',
apps/ui/js/usage.js
+37 -31
View File
@@ -16,13 +16,25 @@ document.addEventListener('DOMContentLoaded', function () {
var subtitle = document.querySelector('.section-card-subtitle');
var statCards = document.querySelectorAll('.stats-grid .stat-card');
function tKey(key) {
return window.t ? t(key) : key;
}
function tfKey(key, vars) {
return window.tf ? tf(key, vars) : tKey(key);
}
function currentLocale() {
return localStorage.getItem('crank_lang') === 'ru' ? 'ru-RU' : 'en-US';
}
function currentWorkspaceId() {
var workspace = window.getCurrentWorkspace ? window.getCurrentWorkspace() : null;
return workspace ? workspace.id : null;
}
function formatCount(value) {
return Number(value || 0).toLocaleString();
return Number(value || 0).toLocaleString(currentLocale());
}
function formatMs(value) {
@@ -36,13 +48,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
function periodLabel(period) {
var labels = {
'7d': 'last 7 days',
'30d': 'last 30 days',
'90d': 'last 90 days',
'this_month': 'this month',
};
return labels[period] || period;
return tKey('usage.period.label.' + period);
}
function protocolColor(protocol) {
@@ -68,12 +74,12 @@ document.addEventListener('DOMContentLoaded', function () {
function chartBucketLabel(timestamp, period, index) {
var date = new Date(timestamp);
if (period === '7d') {
return date.toLocaleDateString('en-US', { weekday: 'short' });
return date.toLocaleDateString(currentLocale(), { weekday: 'short' });
}
if (period === '90d') {
return date.toLocaleDateString('en-US', { month: 'short' });
return date.toLocaleDateString(currentLocale(), { month: 'short' });
}
return 'Wk ' + (index + 1);
return tfKey('usage.chart.week', { index: index + 1 });
}
function toUtcBucketStart(date, period) {
@@ -186,19 +192,19 @@ document.addEventListener('DOMContentLoaded', function () {
var cards = [
{
value: formatCount(summary ? summary.rollup.calls_total : 0),
text: 'Across ' + periodLabel(state.period),
text: tfKey('usage.stats.across', { period: periodLabel(state.period) }),
},
{
value: ((summary ? summary.success_rate : 0) || 0).toFixed(1) + '%',
text: formatCount(summary ? summary.rollup.calls_ok : 0) + ' successful calls',
text: tfKey('usage.stats.success_calls', { count: formatCount(summary ? summary.rollup.calls_ok : 0) }),
},
{
value: formatMs(summary ? summary.rollup.p50_ms : 0),
text: 'Median latency for selected period',
text: tKey('usage.stats.median'),
},
{
value: formatMs(summary ? summary.rollup.p99_ms : 0),
text: formatCount(summary ? summary.rollup.calls_error : 0) + ' error calls',
text: tfKey('usage.stats.error_calls', { count: formatCount(summary ? summary.rollup.calls_error : 0) }),
}
];
@@ -221,8 +227,8 @@ document.addEventListener('DOMContentLoaded', function () {
if (!timeline.length) {
chartWrap.innerHTML =
'<div class="empty-state" style="width:100%;">' +
'<div class="empty-state-title">No usage data yet</div>' +
'<div class="empty-state-text">Invocation metrics will appear here after tests or published tool calls in the selected period.</div>' +
'<div class="empty-state-title">' + tKey('usage.chart.empty.title') + '</div>' +
'<div class="empty-state-text">' + tKey('usage.chart.empty.sub') + '</div>' +
'</div>';
return;
}
@@ -242,9 +248,9 @@ document.addEventListener('DOMContentLoaded', function () {
errorHeight = Math.max(errorHeight, 6);
}
node.querySelector('.chart-bar.success').style.height = okHeight + 'px';
node.querySelector('.chart-bar.success').dataset.tip = formatCount(point.calls_ok) + ' ok';
node.querySelector('.chart-bar.success').dataset.tip = tfKey('usage.chart.ok', { count: formatCount(point.calls_ok) });
node.querySelector('.chart-bar.error').style.height = errorHeight + 'px';
node.querySelector('.chart-bar.error').dataset.tip = formatCount(point.calls_error) + ' errors';
node.querySelector('.chart-bar.error').dataset.tip = tfKey('usage.chart.errors', { count: formatCount(point.calls_error) });
node.querySelector('.chart-col-label').textContent = chartBucketLabel(point.bucket_start, state.period, index);
chartWrap.appendChild(node);
});
@@ -258,8 +264,8 @@ document.addEventListener('DOMContentLoaded', function () {
tableBody.innerHTML =
'<tr><td colspan="7" style="padding:24px;">' +
'<div class="empty-state" style="padding:0;">' +
'<div class="empty-state-title">No operation breakdown yet</div>' +
'<div class="empty-state-text">The selected period has no invocation samples to break down by operation.</div>' +
'<div class="empty-state-title">' + tKey('usage.table.empty.title') + '</div>' +
'<div class="empty-state-text">' + tKey('usage.table.empty.sub') + '</div>' +
'</div>' +
'</td></tr>';
return;
@@ -301,7 +307,7 @@ document.addEventListener('DOMContentLoaded', function () {
node.querySelector('.latency-p95').style.width = Math.max(4, Math.round(((operation.p95_ms - operation.p50_ms) / base) * 64)) + 'px';
node.querySelector('.latency-p99').style.width = Math.max(4, Math.round(((operation.p99_ms - operation.p95_ms) / base) * 64)) + 'px';
node.querySelector('.col-quota-label').textContent = share.toFixed(1) + '% of workspace traffic';
node.querySelector('.col-quota-label').textContent = tfKey('usage.table.share', { value: share.toFixed(1) });
node.querySelector('.col-quota-fill').style.width = share.toFixed(1) + '%';
tableBody.appendChild(node);
@@ -310,12 +316,12 @@ document.addEventListener('DOMContentLoaded', function () {
function renderUsage() {
if (state.loading && !state.usage) {
renderEmpty('Loading usage…', 'Aggregating invocation metrics for the selected workspace.');
renderEmpty(tKey('usage.loading.title'), tKey('usage.loading.sub'));
return;
}
if (state.loadError) {
renderEmpty('Unable to load usage', state.loadError);
renderEmpty(tKey('usage.error.title'), state.loadError);
return;
}
@@ -323,20 +329,20 @@ document.addEventListener('DOMContentLoaded', function () {
renderChart();
renderTable();
if (subtitle) {
subtitle.textContent = 'Breakdown for ' + periodLabel(state.period);
subtitle.textContent = tfKey('usage.table.subtitle', { period: periodLabel(state.period) });
}
}
async function loadUsage() {
if (!window.CrankApi) {
state.loadError = 'Admin API is not available';
state.loadError = tKey('usage.error.api');
renderUsage();
return;
}
state.workspaceId = currentWorkspaceId();
if (!state.workspaceId) {
state.loadError = 'Workspace is not selected';
state.loadError = tKey('usage.error.workspace');
renderUsage();
return;
}
@@ -348,7 +354,7 @@ document.addEventListener('DOMContentLoaded', function () {
try {
state.usage = await window.CrankApi.getUsageOverview(state.workspaceId, { period: state.period });
} catch (error) {
state.loadError = error.message || 'Failed to load usage';
state.loadError = error.message || tKey('usage.error.load');
} finally {
state.loading = false;
renderUsage();
@@ -358,12 +364,12 @@ document.addEventListener('DOMContentLoaded', function () {
function exportCsv() {
if (!state.usage) {
if (window.CrankUi) {
window.CrankUi.info('Load usage data before exporting the CSV snapshot.', 'No usage data loaded');
window.CrankUi.info(tKey('usage.export.empty.body'), tKey('usage.export.empty.title'));
}
return;
}
var rows = ['Operation,Protocol,Calls,Errors,Error Rate (%),p50 (ms),p95 (ms),p99 (ms)'];
var rows = [tKey('usage.csv.header')];
state.usage.operations.forEach(function (operation) {
var errorRate = operation.calls_total === 0
? 0
@@ -388,7 +394,7 @@ document.addEventListener('DOMContentLoaded', function () {
link.click();
URL.revokeObjectURL(url);
if (window.CrankUi) {
window.CrankUi.success('The current usage snapshot was exported as CSV.', 'Usage exported');
window.CrankUi.success(tKey('usage.export.done.body'), tKey('usage.export.done.title'));
}
}