Mirrors/marcredhat-siem-toolkit-patched
1
0
Fork 0
mirror of https://github.com/marcredhat/SIEM-toolkit-patched synced 2026-06-08 12:33:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Collapse MITRE tactic cards by default — click to expand

Browse Source 
Each card shows tactic name, technique count, and rule badge in the header.
Clicking the header toggles the technique chips with an animated chevron.
The existing '+N more' expander still works within the expanded card.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mick
2026-05-22 11:31:23 -04:00
parent 1a2b289f32
commit bb2c00f2fa
1 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+30 -8
View File
@@ -1949,6 +1949,9 @@ async function loadMitre() {
const borderColor = t.rule_count >= 20 ? 'border-l-purple-500' : t.rule_count >= 5 ? 'border-l-blue-500' : 'border-l-slate-600'
const badgeColor = t.rule_count >= 20 ? 'bg-purple-900/60 text-purple-300 border-purple-700' : t.rule_count >= 5 ? 'bg-blue-900/60 text-blue-300 border-blue-700' : 'bg-slate-800/60 text-slate-400 border-slate-700'
const bodyId = 'mitre-body-' + t.tactic.replace(/[^a-z0-9]/gi, '_')
const chevId = 'mitre-chev-' + t.tactic.replace(/[^a-z0-9]/gi, '_')
const MAX_SHOWN = 12
const chips = t.techniques.slice(0, MAX_SHOWN).map(tech =>
`<span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs bg-slate-800/80 ring-1 ring-white/5 text-slate-400 font-mono" title="${esc(tech.name)}">${esc(tech.id || tech.name)}</span>`
@@ -1963,14 +1966,25 @@ async function loadMitre() {
<button onclick="mitreToggleMore('${expandId}', this)"
class="mt-1.5 text-xs text-purple-500 hover:text-purple-400 transition-colors">+${t.techniques.length - MAX_SHOWN} more</button>` : ''
return `<div class="bg-gradient-to-b from-gray-900 to-gray-950 ring-1 ring-white/5 rounded-xl p-4 border-l-4 ${borderColor} shadow-sm">
<div class="flex items-center justify-between mb-3">
<span class="font-semibold text-white text-sm">${esc(t.tactic)}</span>
<span class="px-2 py-0.5 rounded-full text-xs font-medium border ${badgeColor}">${t.rule_count} rule${t.rule_count !== 1 ? 's' : ''}</span>
</div>
${t.techniques.length > 0 ? `
<div class="flex flex-wrap gap-1">${chips}</div>
${moreSection}` : `<p class="text-xs text-slate-600">No technique IDs mapped</p>`}
const techCount = t.techniques.length
const bodyContent = techCount > 0
? `<div class="flex flex-wrap gap-1">${chips}</div>${moreSection}`
: `<p class="text-xs text-slate-600">No technique IDs mapped</p>`
return `<div class="bg-gradient-to-b from-gray-900 to-gray-950 ring-1 ring-white/5 rounded-xl border-l-4 ${borderColor} shadow-sm overflow-hidden">
<button onclick="mitreToggleTactic('${bodyId}','${chevId}')" class="w-full flex items-center justify-between px-4 py-3 hover:bg-white/[0.03] transition-colors text-left">
<div class="flex items-center gap-2.5">
<span class="font-semibold text-white text-sm">${esc(t.tactic)}</span>
${techCount > 0 ? `<span class="text-xs text-slate-500">${techCount} technique${techCount !== 1 ? 's' : ''}</span>` : ''}
</div>
<div class="flex items-center gap-2 shrink-0">
<span class="px-2 py-0.5 rounded-full text-xs font-medium border ${badgeColor}">${t.rule_count} rule${t.rule_count !== 1 ? 's' : ''}</span>
<svg id="${chevId}" class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</div>
</button>
<div id="${bodyId}" class="hidden px-4 pb-3 pt-1 border-t border-white/5">${bodyContent}</div>
</div>`
}).join('')
} catch(e) {
@@ -1978,6 +1992,14 @@ async function loadMitre() {
}
}
function mitreToggleTactic(bodyId, chevId) {
const body = document.getElementById(bodyId)
const chev = document.getElementById(chevId)
if (!body) return
const hidden = body.classList.toggle('hidden')
if (chev) chev.style.transform = hidden ? '' : 'rotate(180deg)'
}
function mitreToggleMore(id, btn) {
const el = document.getElementById(id)
if (!el) return