67 lines
2.5 KiB
JavaScript
67 lines
2.5 KiB
JavaScript
import Echo from 'laravel-echo';
|
|
import Pusher from 'pusher-js';
|
|
|
|
window.Pusher = Pusher;
|
|
|
|
// Reverb (Pusher protocol). Host/port/scheme are env-driven (derived from APP_DOMAIN later).
|
|
window.Echo = new Echo({
|
|
broadcaster: 'reverb',
|
|
key: import.meta.env.VITE_REVERB_APP_KEY,
|
|
wsHost: import.meta.env.VITE_REVERB_HOST,
|
|
wsPort: Number(import.meta.env.VITE_REVERB_PORT ?? 80),
|
|
wssPort: Number(import.meta.env.VITE_REVERB_PORT ?? 443),
|
|
forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
|
|
enabledTransports: ['ws', 'wss'],
|
|
});
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
// Live dual-series chart (CPU + MEM). Seeds from server-rendered data, then
|
|
// appends each MetricsTicked broadcast and redraws (viewBox 0 0 300 100).
|
|
window.Alpine.data('dualChart', (cpuSeed = [], memSeed = [], max = 40) => ({
|
|
cpu: cpuSeed.slice(-max),
|
|
mem: memSeed.slice(-max),
|
|
max,
|
|
connected: false,
|
|
|
|
init() {
|
|
const conn = window.Echo?.connector?.pusher?.connection;
|
|
this.connected = conn?.state === 'connected';
|
|
this._onState = (s) => { this.connected = s.current === 'connected'; };
|
|
conn?.bind('state_change', this._onState);
|
|
this._channel = window.Echo?.channel('metrics');
|
|
this._channel?.listen('.tick', (e) => {
|
|
this.append(this.cpu, e.cpu);
|
|
this.append(this.mem, e.mem);
|
|
});
|
|
},
|
|
|
|
destroy() {
|
|
window.Echo?.leave('metrics');
|
|
window.Echo?.connector?.pusher?.connection?.unbind('state_change', this._onState);
|
|
},
|
|
|
|
append(arr, v) {
|
|
const n = Number(v);
|
|
if (! Number.isFinite(n)) return;
|
|
arr.push(n);
|
|
if (arr.length > this.max) arr.shift();
|
|
},
|
|
|
|
_coords(arr) {
|
|
const n = arr.length, w = 300, h = 100, pad = 6;
|
|
return arr
|
|
.map((v, i) => {
|
|
const x = n > 1 ? (i / (n - 1)) * w : 0;
|
|
const y = h - pad - (Math.max(0, Math.min(100, v)) / 100) * (h - 2 * pad);
|
|
return `${x.toFixed(1)},${y.toFixed(1)}`;
|
|
})
|
|
.join(' ');
|
|
},
|
|
|
|
get cpuLine() { return this._coords(this.cpu); },
|
|
get cpuArea() { return `0,100 ${this._coords(this.cpu)} 300,100`; },
|
|
get memLine() { return this._coords(this.mem); },
|
|
get memArea() { return `0,100 ${this._coords(this.mem)} 300,100`; },
|
|
}));
|
|
});
|