|
| 1 | +<script lang="ts"> |
| 2 | + import { m } from '$paraglide/messages'; |
| 3 | + import { safeTranslate } from '$lib/utils/i18n'; |
| 4 | +
|
| 5 | + type AttackPath = { |
| 6 | + id: string; |
| 7 | + name?: string; |
| 8 | + risk_origin?: string; |
| 9 | + target_objective?: string; |
| 10 | + stakeholders?: Array<{ |
| 11 | + id: string; |
| 12 | + str: string; |
| 13 | + entity?: { |
| 14 | + id: string; |
| 15 | + name: string; |
| 16 | + }; |
| 17 | + }>; |
| 18 | + }; |
| 19 | +
|
| 20 | + type FearedEvent = { |
| 21 | + id: string; |
| 22 | + name: string; |
| 23 | + }; |
| 24 | +
|
| 25 | + type FearedEventWithAssets = { |
| 26 | + id: string; |
| 27 | + name: string; |
| 28 | + assets: Array<{ |
| 29 | + id: string; |
| 30 | + str: string; |
| 31 | + }>; |
| 32 | + }; |
| 33 | +
|
| 34 | + interface Props { |
| 35 | + attackPaths: AttackPath[]; |
| 36 | + fearedEvents: FearedEvent[]; |
| 37 | + fearedEventsWithAssets: FearedEventWithAssets[]; |
| 38 | + } |
| 39 | +
|
| 40 | + let { attackPaths, fearedEvents, fearedEventsWithAssets }: Props = $props(); |
| 41 | +</script> |
| 42 | + |
| 43 | +<!-- Text-based attack path flows --> |
| 44 | +<div class="mb-4 space-y-3 bg-white p-4 rounded-lg border border-gray-200"> |
| 45 | + {#each attackPaths as path} |
| 46 | + <div class="text-sm border-l-4 border-primary-500 pl-3 py-2"> |
| 47 | + {#if path.name} |
| 48 | + <div class="font-semibold text-gray-700 mb-2">{path.name}</div> |
| 49 | + {/if} |
| 50 | + <div class="flex flex-wrap items-center gap-2 font-mono text-xs"> |
| 51 | + <span class="px-2 py-1 bg-red-100 text-red-800 rounded font-semibold"> |
| 52 | + {safeTranslate(path.risk_origin) || 'Unknown RO'} |
| 53 | + </span> |
| 54 | + <i class="fa-solid fa-arrow-right text-gray-400"></i> |
| 55 | + |
| 56 | + <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded font-semibold"> |
| 57 | + {path.target_objective || 'Unknown TO'} |
| 58 | + </span> |
| 59 | + <i class="fa-solid fa-arrow-right text-gray-400"></i> |
| 60 | + |
| 61 | + {#if path.stakeholders && path.stakeholders.length > 0} |
| 62 | + <div class="flex flex-wrap items-center gap-2"> |
| 63 | + {#each path.stakeholders as stakeholder} |
| 64 | + <span class="px-2 py-1 bg-amber-100 text-amber-800 rounded"> |
| 65 | + {stakeholder.str} |
| 66 | + {#if stakeholder.entity} |
| 67 | + <span class="text-amber-600 font-semibold"> |
| 68 | + ({stakeholder.entity.name}) |
| 69 | + </span> |
| 70 | + {/if} |
| 71 | + </span> |
| 72 | + {#if stakeholder !== path.stakeholders[path.stakeholders.length - 1]} |
| 73 | + <span class="text-gray-300">|</span> |
| 74 | + {/if} |
| 75 | + {/each} |
| 76 | + </div> |
| 77 | + <i class="fa-solid fa-arrow-right text-gray-400"></i> |
| 78 | + {/if} |
| 79 | + |
| 80 | + {#if fearedEvents && fearedEvents.length > 0} |
| 81 | + <div class="flex flex-wrap items-center gap-2"> |
| 82 | + {#each fearedEvents as fe} |
| 83 | + <span class="px-2 py-1 bg-orange-100 text-orange-800 rounded"> |
| 84 | + {fe.name} |
| 85 | + </span> |
| 86 | + {#if fe !== fearedEvents[fearedEvents.length - 1]} |
| 87 | + <span class="text-gray-300">|</span> |
| 88 | + {/if} |
| 89 | + {/each} |
| 90 | + </div> |
| 91 | + <i class="fa-solid fa-arrow-right text-gray-400"></i> |
| 92 | + {/if} |
| 93 | + |
| 94 | + {#if fearedEventsWithAssets && fearedEventsWithAssets.length > 0} |
| 95 | + <div class="flex flex-wrap items-center gap-2"> |
| 96 | + {#each fearedEventsWithAssets as fe} |
| 97 | + {#each fe.assets as asset} |
| 98 | + <span class="px-2 py-1 bg-cyan-100 text-cyan-800 rounded text-xs"> |
| 99 | + {asset.str} |
| 100 | + </span> |
| 101 | + {/each} |
| 102 | + {/each} |
| 103 | + </div> |
| 104 | + {/if} |
| 105 | + </div> |
| 106 | + </div> |
| 107 | + {/each} |
| 108 | +</div> |
| 109 | + |
| 110 | +<!-- Legend --> |
| 111 | +<div class="mb-6 bg-white p-3 rounded-lg border border-gray-200"> |
| 112 | + <h4 class="text-xs font-semibold text-gray-600 mb-2">{m.legend()}:</h4> |
| 113 | + <div class="flex flex-wrap gap-3 text-xs"> |
| 114 | + <span class="px-2 py-1 bg-red-100 text-red-800 rounded font-semibold">{m.riskOrigin()}</span> |
| 115 | + <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded font-semibold" |
| 116 | + >{m.targetObjective()}</span |
| 117 | + > |
| 118 | + <span class="px-2 py-1 bg-amber-100 text-amber-800 rounded">{m.stakeholder()}</span> |
| 119 | + <span class="px-2 py-1 bg-orange-100 text-orange-800 rounded">{m.fearedEvent()}</span> |
| 120 | + <span class="px-2 py-1 bg-cyan-100 text-cyan-800 rounded">{m.asset()}</span> |
| 121 | + </div> |
| 122 | +</div> |
0 commit comments