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/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'));
}
}