<!DOCTYPE html>
<html>
<head>
<title>Security Analysis Report</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
}
.header {
background: #f8f9fa;
padding: 20px;
border-bottom: 2px solid #dee2e6;
margin-bottom: 30px;
}
.section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #dee2e6;
border-radius: 4px;
}
.critical {
color: #dc3545;
}
.warning {
color: #ffc107;
}
.info {
color: #17a2b8;
}
.metric {
display: flex;
justify-content: space-between;
padding: 10px;
background: #f8f9fa;
margin: 5px 0;
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
</style>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="header">
<h1>Security Analysis Report</h1>
<p>Generated at: {{timestamp}}</p>
</div>
<div class="section">
<h2>Executive Summary</h2>
<div class="metric">
<span>Risk Level:</span>
<span class="{{risk_level_class}}"
>{{security_analysis.risk_level}}</span
>
</div>
<div class="metric">
<span>Total Events:</span>
<span>{{summary.total_events}}</span>
</div>
<div class="metric">
<span>Analysis Duration:</span>
<span>{{summary.analysis_duration}}</span>
</div>
</div>
<div class="section">
<h2>Security Findings</h2>
<div id="findingsChart" class="chart"></div>
<ul>
{{#each security_analysis.findings}}
<li class="{{severity}}">
<strong>{{finding_type}}</strong>: {{description}}
<br />
<small>Affected: {{affected_resources}}</small>
</li>
{{/each}}
</ul>
</div>
<div class="section">
<h2>Pattern Analysis</h2>
<div id="patternsChart" class="chart"></div>
<ul>
{{#each pattern_analysis.patterns}}
<li>
<strong>{{pattern_type}}</strong>
<br />
Confidence: {{confidence}}
<br />
Frequency: {{frequency}}
</li>
{{/each}}
</ul>
</div>
<div class="section">
<h2>Time Series Analysis</h2>
<div id="timeSeriesChart" class="chart"></div>
<h3>Seasonality</h3>
<ul>
<li>
Daily Pattern: {{time_series_analysis.seasonality.has_daily_pattern}}
</li>
<li>
Weekly Pattern:
{{time_series_analysis.seasonality.has_weekly_pattern}}
</li>
<li>
Peak Hours: {{time_series_analysis.seasonality.daily_peak_hours}}
</li>
</ul>
</div>
<div class="section">
<h2>Recommendations</h2>
<ul>
{{#each security_analysis.recommendations}}
<li>{{this}}</li>
{{/each}}
</ul>
</div>
<script>
const findingsData = {
values: JSON.parse("{{security_analysis.findings_distribution}}"),
labels: JSON.parse("{{security_analysis.findings_labels}}"),
type: "pie",
};
Plotly.newPlot("findingsChart", [findingsData], {
title: "Findings Distribution",
});
const patternsData = {
x: JSON.parse("{{pattern_analysis.pattern_times}}"),
y: JSON.parse("{{pattern_analysis.pattern_values}}"),
type: "scatter",
};
Plotly.newPlot("patternsChart", [patternsData], {
title: "Pattern Distribution Over Time",
});
const timeSeriesData = {
x: JSON.parse("{{time_series_analysis.timestamps}}"),
y: JSON.parse("{{time_series_analysis.values}}"),
type: "scatter",
};
Plotly.newPlot("timeSeriesChart", [timeSeriesData], {
title: "Time Series Analysis",
});
</script>
</body>
</html>