SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add monitoring features and alert configurations

Browse Source 
- Introduced new system metrics tracking with the ability to save and retrieve metrics such as CPU usage, memory usage, and network latency.
- Added alert configuration functionality, allowing users to set thresholds for metrics and receive notifications via email or chat.
- Updated the sidebar component to include a new "Monitorar SGSE" card for real-time system monitoring.
- Enhanced the package dependencies with `papaparse` and `svelte-chartjs` for improved data handling and charting capabilities.
- Updated the schema to support new tables for system metrics and alert configurations.
This commit is contained in:
deyvisonwanderley
2025-10-30 13:36:29 -03:00
parent fd445e8246
commit 23bdaa184a
20 changed files with 4383 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
apps/web/src/lib/components/ti/charts/AreaChart.svelte Normal file
View File

@@ -0,0 +1,125 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
type Props = {
data: any;
title?: string;
height?: number;
};
let { data, title = '', height = 300 }: Props = $props();
let canvas: HTMLCanvasElement;
let chart: Chart | null = null;
onMount(() => {
if (canvas) {
const ctx = canvas.getContext('2d');
if (ctx) {
chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
},
plugins: {
legend: {
display: true,
position: 'top',
labels: {
color: '#a6adbb',
font: {
size: 12,
family: "'Inter', sans-serif",
},
usePointStyle: true,
padding: 15,
}
},
title: {
display: !!title,
text: title,
color: '#e5e7eb',
font: {
size: 16,
weight: 'bold',
family: "'Inter', sans-serif",
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#fff',
bodyColor: '#fff',
borderColor: '#570df8',
borderWidth: 1,
padding: 12,
}
},
scales: {
x: {
grid: {
color: 'rgba(255, 255, 255, 0.05)',
},
ticks: {
color: '#a6adbb',
font: {
size: 11,
}
}
},
y: {
beginAtZero: true,
stacked: true,
grid: {
color: 'rgba(255, 255, 255, 0.05)',
},
ticks: {
color: '#a6adbb',
font: {
size: 11,
}
}
}
},
elements: {
line: {
tension: 0.4,
fill: true
}
},
animation: {
duration: 750,
easing: 'easeInOutQuart'
}
}
});
}
}
});
$effect(() => {
if (chart && data) {
chart.data = data;
chart.update('none');
}
});
onDestroy(() => {
if (chart) {
chart.destroy();
}
});
</script>
<div style="height: {height}px;">
<canvas bind:this={canvas}></canvas>
</div>

115
apps/web/src/lib/components/ti/charts/BarChart.svelte Normal file
View File

@@ -0,0 +1,115 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
type Props = {
data: any;
title?: string;
height?: number;
horizontal?: boolean;
};
let { data, title = '', height = 300, horizontal = false }: Props = $props();
let canvas: HTMLCanvasElement;
let chart: Chart | null = null;
onMount(() => {
if (canvas) {
const ctx = canvas.getContext('2d');
if (ctx) {
chart = new Chart(ctx, {
type: horizontal ? 'bar' : 'bar',
data: data,
options: {
indexAxis: horizontal ? 'y' : 'x',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'top',
labels: {
color: '#a6adbb',
font: {
size: 12,
family: "'Inter', sans-serif",
},
usePointStyle: true,
padding: 15,
}
},
title: {
display: !!title,
text: title,
color: '#e5e7eb',
font: {
size: 16,
weight: 'bold',
family: "'Inter', sans-serif",
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#fff',
bodyColor: '#fff',
borderColor: '#570df8',
borderWidth: 1,
padding: 12,
}
},
scales: {
x: {
grid: {
color: 'rgba(255, 255, 255, 0.05)',
},
ticks: {
color: '#a6adbb',
font: {
size: 11,
}
}
},
y: {
beginAtZero: true,
grid: {
color: 'rgba(255, 255, 255, 0.05)',
},
ticks: {
color: '#a6adbb',
font: {
size: 11,
}
}
}
},
animation: {
duration: 750,
easing: 'easeInOutQuart'
}
}
});
}
}
});
$effect(() => {
if (chart && data) {
chart.data = data;
chart.update('none');
}
});
onDestroy(() => {
if (chart) {
chart.destroy();
}
});
</script>
<div style="height: {height}px;">
<canvas bind:this={canvas}></canvas>
</div>

102
apps/web/src/lib/components/ti/charts/DoughnutChart.svelte Normal file
View File

@@ -0,0 +1,102 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
type Props = {
data: any;
title?: string;
height?: number;
};
let { data, title = '', height = 300 }: Props = $props();
let canvas: HTMLCanvasElement;
let chart: Chart | null = null;
onMount(() => {
if (canvas) {
const ctx = canvas.getContext('2d');
if (ctx) {
chart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'bottom',
labels: {
color: '#a6adbb',
font: {
size: 12,
family: "'Inter', sans-serif",
},
usePointStyle: true,
padding: 15,
generateLabels: (chart) => {
const datasets = chart.data.datasets;
return chart.data.labels!.map((label, i) => ({
text: `${label}: ${datasets[0].data[i]}${typeof datasets[0].data[i] === 'number' ? '%' : ''}`,
fillStyle: datasets[0].backgroundColor![i] as string,
hidden: false,
index: i
}));
}
}
},
title: {
display: !!title,
text: title,
color: '#e5e7eb',
font: {
size: 16,
weight: 'bold',
family: "'Inter', sans-serif",
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#fff',
bodyColor: '#fff',
borderColor: '#570df8',
borderWidth: 1,
padding: 12,
callbacks: {
label: function(context: any) {
return `${context.label}: ${context.parsed}%`;
}
}
}
},
animation: {
duration: 1000,
easing: 'easeInOutQuart'
}
}
});
}
}
});
$effect(() => {
if (chart && data) {
chart.data = data;
chart.update('none');
}
});
onDestroy(() => {
if (chart) {
chart.destroy();
}
});
</script>
<div style="height: {height}px;" class="flex items-center justify-center">
<canvas bind:this={canvas}></canvas>
</div>

129
apps/web/src/lib/components/ti/charts/LineChart.svelte Normal file
View File

@@ -0,0 +1,129 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
type Props = {
data: any;
title?: string;
height?: number;
};
let { data, title = '', height = 300 }: Props = $props();
let canvas: HTMLCanvasElement;
let chart: Chart | null = null;
onMount(() => {
if (canvas) {
const ctx = canvas.getContext('2d');
if (ctx) {
chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
legend: {
display: true,
position: 'top',
labels: {
color: '#a6adbb',
font: {
size: 12,
family: "'Inter', sans-serif",
},
usePointStyle: true,
padding: 15,
}
},
title: {
display: !!title,
text: title,
color: '#e5e7eb',
font: {
size: 16,
weight: 'bold',
family: "'Inter', sans-serif",
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#fff',
bodyColor: '#fff',
borderColor: '#570df8',
borderWidth: 1,
padding: 12,
displayColors: true,
callbacks: {
label: function(context: any) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
label += context.parsed.y.toFixed(2);
return label;
}
}
}
},
scales: {
x: {
grid: {
color: 'rgba(255, 255, 255, 0.05)',
},
ticks: {
color: '#a6adbb',
font: {
size: 11,
}
}
},
y: {
beginAtZero: true,
grid: {
color: 'rgba(255, 255, 255, 0.05)',
},
ticks: {
color: '#a6adbb',
font: {
size: 11,
}
}
}
},
animation: {
duration: 750,
easing: 'easeInOutQuart'
}
}
});
}
}
});
// Atualizar gráfico quando os dados mudarem
$effect(() => {
if (chart && data) {
chart.data = data;
chart.update('none'); // Update sem animação para performance
}
});
onDestroy(() => {
if (chart) {
chart.destroy();
}
});
</script>
<div style="height: {height}px;">
<canvas bind:this={canvas}></canvas>
</div>