diff --git a/Home/Views/monitoring.ejs b/Home/Views/monitoring.ejs index 3995541eab..36cfc89e90 100644 --- a/Home/Views/monitoring.ejs +++ b/Home/Views/monitoring.ejs @@ -801,65 +801,149 @@
+ +
+ -
+
-
+
-
-
-
-
+
+
+
+
-
- # - incidents +
+
+ + + + incidents + + + +
+
+
+ S
-
+
-
-
- O -
-
-
- OneUptime - APP - 12:34 PM +
+
+
+ + +
- -
-

Incident Created

-

API Server is not responding

-
- Monitor: API Health Check - Severity: High +
+
+ OneUptime + APP + 12:34 PM +
+ + +
+
+
+
+
+
+ + + Critical + +
+

API Server is not responding

+

Response time exceeded 30s threshold

+
+
+
+
+ + + + API Health Check +
+
+ + + + Started 2m ago +
+
+
+
+ + +
+ + + +
+ + +
+
+ 👀 + 3 +
+
+ + +
+ + +
- -
- - - -
+
+
+
- -
+ +
+
+ + + + Message #incidents +
+ + + + + +
-
@@ -868,30 +952,66 @@ let ackClicked = false; let onCallClicked = false; let resolveClicked = false; + let replyCount = 0; + const avatars = []; + + function updateThreadIndicator() { + const indicator = document.getElementById('thread-indicator'); + const countEl = document.getElementById('thread-count'); + const avatarsEl = document.getElementById('thread-avatars'); + + if (replyCount > 0) { + indicator.classList.remove('hidden'); + indicator.classList.add('flex'); + countEl.textContent = replyCount + (replyCount === 1 ? ' reply' : ' replies'); + avatarsEl.innerHTML = avatars.slice(-3).map(a => + `
+ ${a.initial} +
` + ).join(''); + } + } + + function addReaction(emoji) { + const reactions = document.getElementById('slack-reactions'); + const newReaction = document.createElement('div'); + newReaction.className = 'inline-flex items-center gap-1 px-2 py-1 bg-blue-500/20 rounded-full text-xs border border-blue-500/50 cursor-pointer transition-colors animate-bounce-in'; + newReaction.innerHTML = `${emoji}1`; + newReaction.style.animation = 'bounceIn 0.3s ease-out'; + reactions.appendChild(newReaction); + } function addThreadReply(avatar, name, time, message, isBot) { const thread = document.getElementById('slack-thread'); const reply = document.createElement('div'); - reply.className = 'flex items-start gap-2 animate-fade-in'; + reply.className = 'flex items-start gap-2.5 pl-3 border-l-2 border-blue-500/30'; reply.style.animation = 'fadeSlideIn 0.3s ease-out'; - const avatarHtml = isBot - ? `
O
` - : `
${name.charAt(0)}
`; + const avatarClass = isBot ? 'from-green-400 to-green-600' : avatar; + const initial = isBot ? '⚡' : name.charAt(0); + + if (!isBot) { + avatars.push({ bg: `bg-gradient-to-br ${avatar}`, initial: name.charAt(0) }); + } else { + avatars.push({ bg: 'bg-gradient-to-br from-green-400 to-green-600', initial: 'O' }); + } + replyCount++; + updateThreadIndicator(); reply.innerHTML = ` - ${avatarHtml} -
+
+ ${initial} +
+
- ${name} - ${isBot ? 'APP' : ''} - ${time} + ${name} + ${isBot ? 'APP' : ''} + ${time}
-

${message}

+

${message}

`; thread.appendChild(reply); - thread.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } window.slackAcknowledge = function() { @@ -899,20 +1019,22 @@ ackClicked = true; const btn = document.getElementById('btn-ack'); - btn.classList.add('opacity-50', 'cursor-not-allowed'); - btn.innerHTML = ' Acknowledging...'; + btn.disabled = true; + btn.classList.add('opacity-70'); + btn.innerHTML = 'Acknowledging...'; setTimeout(() => { - btn.innerHTML = ' Acknowledged'; - btn.classList.remove('bg-[#2e3136]', 'border-gray-600'); - btn.classList.add('bg-green-900/30', 'border-green-700/50', 'text-green-400'); + btn.innerHTML = 'Acknowledged'; + btn.classList.remove('bg-[#007a5a]', 'hover:bg-[#148567]', 'shadow-green-900/20'); + btn.classList.add('bg-[#2e3136]', 'border', 'border-green-500/50', 'text-green-400'); - addThreadReply('from-blue-400 to-blue-600', 'Sarah Chen', '12:35 PM', 'Acknowledged this incident. Looking into it now.', false); + addReaction('👍'); + addThreadReply('from-blue-400 to-blue-600', 'Sarah Chen', '12:35 PM', 'Acknowledged! Looking into this now. Checking the API gateway logs.', false); setTimeout(() => { - addThreadReply('', 'OneUptime', '12:35 PM', 'Incident acknowledged by Sarah Chen', true); - }, 800); - }, 600); + addThreadReply('from-green-400 to-green-600', 'OneUptime', '12:35 PM', '✅ Incident acknowledged by Sarah Chen', true); + }, 1000); + }, 800); }; window.slackExecuteOnCall = function() { @@ -920,16 +1042,18 @@ onCallClicked = true; const btn = document.getElementById('btn-oncall'); - btn.classList.add('opacity-50', 'cursor-not-allowed'); - btn.innerHTML = ' Executing...'; + btn.disabled = true; + btn.classList.add('opacity-70'); + btn.innerHTML = 'Paging...'; setTimeout(() => { - btn.innerHTML = ' On-Call Executed'; - btn.classList.remove('bg-[#2e3136]', 'border-gray-600'); - btn.classList.add('bg-blue-900/30', 'border-blue-700/50', 'text-blue-400'); + btn.innerHTML = 'Team Paged'; + btn.classList.remove('bg-[#1264a3]', 'hover:bg-[#1d74b8]', 'shadow-blue-900/20'); + btn.classList.add('bg-[#2e3136]', 'border', 'border-blue-500/50', 'text-blue-400'); - addThreadReply('', 'OneUptime', '12:36 PM', 'On-call policy "Engineering Team" executed. Notifying: Mike Johnson, Sarah Chen', true); - }, 600); + addReaction('🚨'); + addThreadReply('from-green-400 to-green-600', 'OneUptime', '12:36 PM', '📟 On-call policy "Engineering Team" executed
→ Notifying: Mike Johnson (primary), Sarah Chen (secondary)', true); + }, 800); }; window.slackResolve = function() { @@ -937,29 +1061,36 @@ resolveClicked = true; const btn = document.getElementById('btn-resolve'); - btn.classList.add('opacity-50', 'cursor-not-allowed'); - btn.innerHTML = ' Resolving...'; + btn.disabled = true; + btn.classList.add('opacity-70'); + btn.innerHTML = 'Resolving...'; setTimeout(() => { - btn.innerHTML = ' Resolved'; - btn.classList.remove('bg-[#2e3136]', 'border-gray-600'); - btn.classList.add('bg-green-900/30', 'border-green-700/50', 'text-green-400'); + btn.innerHTML = 'Resolved'; + btn.classList.remove('bg-[#2e3136]', 'border-gray-600', 'hover:bg-[#3a3d42]'); + btn.classList.add('bg-green-600/20', 'border', 'border-green-500/50', 'text-green-400'); - addThreadReply('from-purple-400 to-purple-600', 'Mike Johnson', '12:41 PM', 'Fixed the connection pool issue. Deploying hotfix now.', false); + addReaction('🎉'); + addThreadReply('from-purple-400 to-purple-600', 'Mike Johnson', '12:41 PM', 'Found it! Connection pool was exhausted due to a leaked connection in the auth service. Deployed hotfix v2.3.1 🚀', false); setTimeout(() => { - addThreadReply('', 'OneUptime', '12:42 PM', 'Incident resolved by Mike Johnson. Total downtime: 8 minutes.', true); - }, 800); - }, 600); + addThreadReply('from-green-400 to-green-600', 'OneUptime', '12:42 PM', '🎉 Incident resolved by Mike Johnson
Total downtime: 8 minutes • MTTR: 8m', true); + }, 1000); + }, 800); }; })();