Alert Correlation and Inhibition - 24Cevent
*
margin: 0; padding: 0; box-sizing: border-box;
body
background: transparent;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
.stage
display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem 1.5rem; gap: 0;
.cols
display: flex; align-items: center; justify-content: center; width: 100%; max-width: 720px; gap: 0;
.col
display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0;
.col-label
font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #90a4b0; margin-bottom: 4px; text-align: center; white-space: nowrap;
.pill
display: flex; align-items: center; gap: 6px;
padding: 6px 11px; border-radius: 20px;
border: 1px solid transparent;
font-size: 12px; font-weight: 500;
white-space: nowrap;
opacity: 0; transform: translateX(-8px);
transition: opacity 0.35s ease, transform 0.35s ease;
.pill.show
opacity: 1; transform: translateX(0);
.pill.dim
opacity: 0.22; transform: scale(0.93);
.pill .dot
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
.red-pill
background: #fff0f0; border-color: #ffcdd2; color: #b71c1c;
.red-pill .dot
background: #e53935;
.orange-pill
background: #fff8e1; border-color: #ffe082; color: #e65100;
.orange-pill .dot
background: #ff9800;
.blue-pill
background: #e3f2fd; border-color: #90caf9; color: #0d47a1;
.blue-pill .dot
background: #2196f3;
.group-box
border-radius: 10px; padding: 12px 14px;
display: flex; flex-direction: column; gap: 2px; align-items: center;
border: 1px solid transparent;
opacity: 0; transform: scale(0.94);
transition: opacity 0.4s ease, transform 0.4s ease;
width: 140px;
.group-box.show
opacity: 1; transform: scale(1);
.group-box.dim
opacity: 0.22; transform: scale(0.93);
.gb-red
background: #fff5f5; border-color: #ffcdd2;
.gb-orange
background: #fffde7; border-color: #ffe082;
.gb-blue
background: #e8f4fd; border-color: #90caf9;
.gb-label
font-size: 11px; font-weight: 600; color: #607080; text-align: center; line-height: 1.3;
.gb-count
font-size: 22px; font-weight: 700; color: #1a2332; line-height: 1.1;
.root-box
background: #1a2332; border-radius: 12px; padding: 14px 20px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
opacity: 0; transform: scale(0.9);
transition: opacity 0.45s ease, transform 0.45s ease;
min-width: 140px;
.root-box.show
opacity: 1; transform: scale(1);
.root-icon
font-size: 20px; margin-bottom: 2px;
.root-label
font-size: 12px; font-weight: 700; color: #fff; text-align: center; line-height: 1.3;
.root-sub
font-size: 10px; color: #90a4b0; text-align: center;
.action-pill
display: flex; align-items: center; gap: 8px;
background: linear-gradient(135deg, #1565c0, #2196f3);
color: white; border-radius: 24px;
padding: 10px 20px; font-size: 13px; font-weight: 600;
opacity: 0; transform: translateX(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
white-space: nowrap; box-shadow: 0 3px 14px rgba(33,150,243,0.3);
.action-pill.show
opacity: 1; transform: translateX(0);
.action-pill .adot
width: 8px; height: 8px; border-radius: 50%; background: #a5d6a7; flex-shrink: 0;
.connector-wrap
flex-shrink: 0;
.noise-badge
font-size: 11px; font-weight: 600; color: #e53935;
background: #ffebee; border: 1px solid #ffcdd2;
border-radius: 10px; padding: 2px 8px; margin-top: 4px;
opacity: 0; transition: opacity 0.3s;
.noise-badge.show
opacity: 1;
.reduced-badge
font-size: 11px; font-weight: 600; color: #2e7d32;
background: #e8f5e9; border: 1px solid #a5d6a7;
border-radius: 10px; padding: 2px 8px; margin-top: 6px;
opacity: 0; transition: opacity 0.3s;
.reduced-badge.show
opacity: 1;
.progress-wrap
width: 100%; max-width: 500px; margin-top: 24px;
.progress-track
height: 3px; background: #dde6ee; border-radius: 4px; overflow: hidden;
.progress-fill
height: 100%; border-radius: 4px; background: #2196f3; transition: width 0.5s cubic-bezier(.4,0,.2,1); width: 0%;
.status-line
margin-top: 12px; font-size: 13px; color: #607080; text-align: center; min-height: 20px;
.status-line span
font-weight: 600; color: #1a2332;
@media (max-width: 520px) {
.col-label
font-size: 10px;
.pill
font-size: 11px; padding: 5px 8px;
.group-box
width: 110px;
.connector-wrap svg
width: 36px;
}
Detected events
CPU at 100%
Memory depleted
Timeout DB
Slow Query
Pool connections
API error 503
High latency
Health check
8 simultaneous alerts
Root cause
🎯
Main server saturation
1 cause - 8 inhibited symptoms
-87% operating noise
Focused action
1 relevant alert
Getting started...
function svgFade(id, val, delay) {
setTimeout(() =>
const e = document.getElementById(id); if (e) e.setAttribute('opacity', val); , delay);
}
function add(id, cls, delay) {
setTimeout(() =>
const e = document.getElementById(id); if (e) e.classList.add(cls); , delay);
}
function rem(id, cls, delay) {
setTimeout(() =>
const e = document.getElementById(id); if (e) e.classList.remove(cls); , delay);
}
function status(txt, pct, delay) {
setTimeout(() =>
document.getElementById('statusLine').innerHTML = txt;
document.getElementById('pFill').style.width = pct + '%';
, delay);
}
function reset() {
['p0','p1','p2','p3','p4','p5','p6','p7'].forEach(id =>
const e = document.getElementById(id); e.classList.remove('show','dim');
);
['g0','g1','g2'].forEach(id =>
const e = document.getElementById(id); e.classList.remove('show','dim');
);
['rootBox','actionPill','noiseBadge','reducedBadge'].forEach(id =>
document.getElementById(id).classList.remove('show');
);
['arr1a','arr1b','arr1c','arr2a','arr2b','arr2c','arr3','arr3h'].forEach(id => svgFade(id,'0',0));
document.getElementById('pFill').style.width = '0%';
document.getElementById('statusLine').innerHTML = 'Iniciando…';
}
function run() {
reset();
status('El sistema recibe
múltiples alertas simultáneas…', 10, 300);
[0,1,2,3,4,5,6,7].forEach(i => add('p'+i, 'show', 400 + i*180));
add('noiseBadge', 'show', 400 + 8*180);
status('24Cevent
correlaciona y agrupa por causa común…', 38, 2200);
svgFade('arr1a','1',2300); svgFade('arr1b','1',2500); svgFade('arr1c','1',2700);
add('g0','show',2600); add('g1','show',2900); add('g2','show',3200);
status('Se
inhiben los síntomas redundantes e identifica la causa…', 62, 3700);
[0,1,2,3,4,5,6,7].forEach(i => add('p'+i,'dim',3700+i*60));
['g0','g1','g2'].forEach((id,i) =>
rem(id,'show',3800+i*100); add(id,'dim',3800+i*100); );
svgFade('arr2a','1',3900); svgFade('arr2b','1',4100); svgFade('arr2c','1',4300);
add('rootBox','show',4500);
add('reducedBadge','show',5000);
status('Sale
1 sola alerta relevante hacia el equipo correcto ✓', 100, 5400);
svgFade('arr3','1',5500); svgFade('arr3h','1',5500);
add('actionPill','show',5700);
setTimeout(run, 8500);
}
run();
