150 lines
6.3 KiB
JavaScript
150 lines
6.3 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require poll';
|
|
'require rpc';
|
|
|
|
var callBandwidthSavings = rpc.declare({
|
|
object: 'luci.cdn-cache',
|
|
method: 'bandwidth_savings',
|
|
params: ['period'],
|
|
expect: { data: [] }
|
|
});
|
|
|
|
var callHitRatio = rpc.declare({
|
|
object: 'luci.cdn-cache',
|
|
method: 'hit_ratio',
|
|
params: ['period'],
|
|
expect: { data: [] }
|
|
});
|
|
|
|
var callStats = rpc.declare({
|
|
object: 'luci.cdn-cache',
|
|
method: 'stats',
|
|
expect: { }
|
|
});
|
|
|
|
return view.extend({
|
|
load: function() {
|
|
return Promise.all([
|
|
callStats(),
|
|
callBandwidthSavings('24h'),
|
|
callHitRatio('24h')
|
|
]);
|
|
},
|
|
|
|
render: function(data) {
|
|
var stats = data[0] || {};
|
|
var bandwidth = data[1].data || [];
|
|
var hitRatio = data[2].data || [];
|
|
|
|
return E('div', { 'class': 'cbi-map cdn-stats' }, [
|
|
E('style', {}, `
|
|
.cdn-stats { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
|
.cdn-page-header { background: linear-gradient(135deg, #0891b2, #06b6d4); color: white; padding: 24px; border-radius: 12px; margin-bottom: 24px; }
|
|
.cdn-page-title { font-size: 24px; font-weight: 700; margin: 0; }
|
|
.cdn-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
|
.cdn-stat-card { background: #1e293b; border-radius: 12px; padding: 20px; border: 1px solid #334155; text-align: center; }
|
|
.cdn-stat-value { font-size: 32px; font-weight: 700; color: #06b6d4; font-family: 'JetBrains Mono', monospace; }
|
|
.cdn-stat-label { font-size: 13px; color: #94a3b8; margin-top: 4px; }
|
|
.cdn-section { background: #1e293b; border-radius: 12px; padding: 24px; border: 1px solid #334155; margin-bottom: 24px; }
|
|
.cdn-section-title { font-size: 16px; font-weight: 600; color: #f1f5f9; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
|
|
.cdn-chart { height: 200px; display: flex; align-items: flex-end; gap: 4px; padding: 20px 0; }
|
|
.cdn-chart-bar { flex: 1; background: linear-gradient(180deg, #06b6d4, #0891b2); border-radius: 4px 4px 0 0; min-height: 4px; transition: height 0.3s; position: relative; }
|
|
.cdn-chart-bar:hover { background: linear-gradient(180deg, #22d3ee, #06b6d4); }
|
|
.cdn-chart-bar:hover::after { content: attr(data-value); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #1e293b; color: #f1f5f9; padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; }
|
|
.cdn-chart-labels { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid #334155; }
|
|
.cdn-chart-label { font-size: 11px; color: #64748b; }
|
|
.cdn-period-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
|
|
.cdn-period-tab { padding: 8px 16px; background: #0f172a; border: 1px solid #334155; border-radius: 8px; color: #94a3b8; cursor: pointer; font-size: 13px; }
|
|
.cdn-period-tab.active { background: #06b6d4; border-color: #06b6d4; color: white; }
|
|
.cdn-legend { display: flex; gap: 24px; justify-content: center; margin-top: 16px; }
|
|
.cdn-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #94a3b8; }
|
|
.cdn-legend-color { width: 12px; height: 12px; border-radius: 3px; }
|
|
`),
|
|
|
|
E('div', { 'class': 'cdn-page-header' }, [
|
|
E('h2', { 'class': 'cdn-page-title' }, '📊 Statistiques')
|
|
]),
|
|
|
|
E('div', { 'class': 'cdn-stats-grid' }, [
|
|
E('div', { 'class': 'cdn-stat-card' }, [
|
|
E('div', { 'class': 'cdn-stat-value' }, stats.requests ? stats.requests.toLocaleString() : '0'),
|
|
E('div', { 'class': 'cdn-stat-label' }, 'Requêtes totales')
|
|
]),
|
|
E('div', { 'class': 'cdn-stat-card' }, [
|
|
E('div', { 'class': 'cdn-stat-value' }, (stats.hit_ratio || 0) + '%'),
|
|
E('div', { 'class': 'cdn-stat-label' }, 'Hit Ratio')
|
|
]),
|
|
E('div', { 'class': 'cdn-stat-card' }, [
|
|
E('div', { 'class': 'cdn-stat-value', 'style': 'color: #22c55e;' }, (stats.saved_mb || 0) + ' MB'),
|
|
E('div', { 'class': 'cdn-stat-label' }, 'Bande passante économisée')
|
|
]),
|
|
E('div', { 'class': 'cdn-stat-card' }, [
|
|
E('div', { 'class': 'cdn-stat-value' }, (stats.served_mb || 0) + ' MB'),
|
|
E('div', { 'class': 'cdn-stat-label' }, 'Données servies')
|
|
])
|
|
]),
|
|
|
|
E('div', { 'class': 'cdn-section' }, [
|
|
E('div', { 'class': 'cdn-section-title' }, ['📈 ', 'Économies de Bande Passante']),
|
|
E('div', { 'class': 'cdn-period-tabs' }, [
|
|
E('span', { 'class': 'cdn-period-tab active' }, '24h'),
|
|
E('span', { 'class': 'cdn-period-tab' }, '7 jours'),
|
|
E('span', { 'class': 'cdn-period-tab' }, '30 jours')
|
|
]),
|
|
E('div', { 'class': 'cdn-chart' },
|
|
bandwidth.slice(-24).map(function(d, i) {
|
|
var maxSaved = Math.max.apply(null, bandwidth.map(function(x) { return x.saved_mb; })) || 1;
|
|
var height = (d.saved_mb / maxSaved) * 160;
|
|
return E('div', {
|
|
'class': 'cdn-chart-bar',
|
|
'style': 'height: ' + Math.max(height, 4) + 'px;',
|
|
'data-value': d.saved_mb + ' MB économisés'
|
|
});
|
|
})
|
|
),
|
|
E('div', { 'class': 'cdn-chart-labels' }, [
|
|
E('span', { 'class': 'cdn-chart-label' }, '-24h'),
|
|
E('span', { 'class': 'cdn-chart-label' }, '-12h'),
|
|
E('span', { 'class': 'cdn-chart-label' }, 'Maintenant')
|
|
]),
|
|
E('div', { 'class': 'cdn-legend' }, [
|
|
E('div', { 'class': 'cdn-legend-item' }, [
|
|
E('div', { 'class': 'cdn-legend-color', 'style': 'background: #06b6d4;' }),
|
|
E('span', {}, 'Données économisées')
|
|
])
|
|
])
|
|
]),
|
|
|
|
E('div', { 'class': 'cdn-section' }, [
|
|
E('div', { 'class': 'cdn-section-title' }, ['🎯 ', 'Hit Ratio dans le Temps']),
|
|
E('div', { 'class': 'cdn-chart' },
|
|
hitRatio.slice(-24).map(function(d, i) {
|
|
var height = (d.ratio / 100) * 160;
|
|
return E('div', {
|
|
'class': 'cdn-chart-bar',
|
|
'style': 'height: ' + Math.max(height, 4) + 'px; background: linear-gradient(180deg, #22c55e, #16a34a);',
|
|
'data-value': d.ratio + '% hit ratio'
|
|
});
|
|
})
|
|
),
|
|
E('div', { 'class': 'cdn-chart-labels' }, [
|
|
E('span', { 'class': 'cdn-chart-label' }, '-24h'),
|
|
E('span', { 'class': 'cdn-chart-label' }, '-12h'),
|
|
E('span', { 'class': 'cdn-chart-label' }, 'Maintenant')
|
|
]),
|
|
E('div', { 'class': 'cdn-legend' }, [
|
|
E('div', { 'class': 'cdn-legend-item' }, [
|
|
E('div', { 'class': 'cdn-legend-color', 'style': 'background: #22c55e;' }),
|
|
E('span', {}, 'Hit Ratio (%)')
|
|
])
|
|
])
|
|
])
|
|
]);
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|