347 lines
No EOL
12 KiB
HTML
347 lines
No EOL
12 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>DNS Records Viewer</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.nav {
|
|
margin: 20px 0;
|
|
}
|
|
.nav-link {
|
|
display: inline-block;
|
|
padding: 8px 16px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
}
|
|
.nav-link:hover {
|
|
opacity: 0.9;
|
|
}
|
|
.filter-section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
background-color: #f9f9f9;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.filter-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.filter-group label {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
font-size: 0.9em;
|
|
}
|
|
.filter-group select, .filter-group input {
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
min-width: 150px;
|
|
}
|
|
.filter-buttons {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 10px;
|
|
}
|
|
button {
|
|
padding: 8px 16px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
button.reset {
|
|
background-color: #f44336;
|
|
}
|
|
button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
table-layout: fixed;
|
|
}
|
|
th, td {
|
|
padding: 12px 15px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
word-break: break-word;
|
|
}
|
|
th {
|
|
background-color: #f2f2f2;
|
|
font-weight: bold;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
tr:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
/* History elements removed */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 3px 7px;
|
|
border-radius: 4px;
|
|
font-size: 0.9em;
|
|
font-weight: normal;
|
|
}
|
|
.record-type-badge {
|
|
background-color: #e0e0e0;
|
|
color: #333;
|
|
}
|
|
.domain-badge {
|
|
background-color: #d1e7dd;
|
|
color: #0f5132;
|
|
}
|
|
.service-badge {
|
|
background-color: #fff3cd;
|
|
color: #664d03;
|
|
}
|
|
.api-section {
|
|
margin-top: 30px;
|
|
padding: 15px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 5px;
|
|
}
|
|
code {
|
|
background: #f0f0f0;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-family: monospace;
|
|
}
|
|
.count-badge {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
background-color: #6c757d;
|
|
color: white;
|
|
border-radius: 10px;
|
|
font-size: 0.8em;
|
|
margin-left: 10px;
|
|
font-weight: normal;
|
|
}
|
|
.dedup-note {
|
|
display: block;
|
|
font-size: 0.7em;
|
|
color: #666;
|
|
font-weight: normal;
|
|
margin-top: 5px;
|
|
}
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.tooltip .tooltiptext {
|
|
visibility: hidden;
|
|
width: 200px;
|
|
background-color: #555;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 5px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 125%;
|
|
left: 50%;
|
|
margin-left: -100px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.tooltip:hover .tooltiptext {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.filter-section {
|
|
flex-direction: column;
|
|
}
|
|
.filter-group {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.table-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 15px;
|
|
}
|
|
.table-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.btn-export {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 8px 15px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
font-size: 0.9em;
|
|
}
|
|
.btn-export:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.icon {
|
|
font-size: 1.2em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>DNS Records Viewer {% if deduplicate %}(Deduplicated){% else %}(All Records){% endif %}</h1>
|
|
|
|
<div class="nav">
|
|
<a href="/" class="nav-link">Domains</a>
|
|
<a href="/dns-records" class="nav-link">DNS Records</a>
|
|
</div>
|
|
|
|
<form class="filter-section" method="get" action="/dns-records">
|
|
<div class="filter-group">
|
|
<label for="upload-filter">Upload:</label>
|
|
<select id="upload-filter" name="upload_id">
|
|
<option value="">All Uploads</option>
|
|
{% for upload in uploads %}
|
|
<option value="{{ upload.id }}" {% if request.query_params.get('upload_id') == upload.id %}selected{% endif %}>
|
|
{{ upload.filename }} - {{ upload.timestamp.replace('T', ' ').split('.')[0] }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="record-type">Record Type:</label>
|
|
<select id="record-type" name="record_type">
|
|
<option value="">All Types</option>
|
|
{% for type in unique_values.record_type %}
|
|
<option value="{{ type }}" {% if request.query_params.get('record_type') == type %}selected{% endif %}>{{ type }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="record-class">Record Class:</label>
|
|
<select id="record-class" name="record_class">
|
|
<option value="">All Classes</option>
|
|
{% for class in unique_values.record_class %}
|
|
<option value="{{ class }}" {% if request.query_params.get('record_class') == class %}selected{% endif %}>{{ class }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="domain-search">Domain Search:</label>
|
|
<input type="text" id="domain-search" name="domain" placeholder="Enter domain name..." value="{{ request.query_params.get('domain', '') }}">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="deduplicate">Deduplicate Records:</label>
|
|
<select id="deduplicate" name="deduplicate" class="filter-select">
|
|
<option value="true" {% if request.query_params.get('deduplicate', 'true') == 'true' %}selected{% endif %}>Yes (Deduplicate Identical Records)</option>
|
|
<option value="false" {% if request.query_params.get('deduplicate') == 'false' %}selected{% endif %}>No (Show All)</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-buttons">
|
|
<button type="submit">Apply Filters</button>
|
|
<a href="/dns-records" class="reset-button" style="padding: 8px 16px; background-color: #f44336; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; display: inline-block;">Reset</a>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="table-header">
|
|
<h2>DNS Records <span class="count-badge">{{ entries|length }}</span>
|
|
{% if deduplicate %}
|
|
<small class="dedup-note">(Showing most recent entries for each Domain+Class+Type+TTL+Data combination)</small>
|
|
{% endif %}
|
|
</h2>
|
|
{% if entries %}
|
|
<div class="table-actions">
|
|
<a href="/export-dns-csv?{% if request.query_params.get('upload_id') %}upload_id={{ request.query_params.get('upload_id') }}{% endif %}{% if request.query_params.get('record_type') %}&record_type={{ request.query_params.get('record_type') }}{% endif %}{% if request.query_params.get('record_class') %}&record_class={{ request.query_params.get('record_class') }}{% endif %}{% if request.query_params.get('domain') %}&domain={{ request.query_params.get('domain') }}{% endif %}{% if request.query_params.get('deduplicate') == 'false' %}&deduplicate=false{% endif %}" class="btn-export" title="Export to CSV">
|
|
<span class="icon">📥</span> Export CSV
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if entries %}
|
|
<table id="dns-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 20%;">Domain</th>
|
|
<th style="width: 8%;">TTL</th>
|
|
<th style="width: 7%;">Class</th>
|
|
<th style="width: 8%;">Type</th>
|
|
<th style="width: 40%;">Data</th>
|
|
<th style="width: 17%;">Last Updated</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for entry in entries %}
|
|
<tr>
|
|
<td>
|
|
{% if entry.get('service') %}
|
|
<span class="badge service-badge">{{ entry.service }}</span>
|
|
{% endif %}
|
|
<span class="badge domain-badge">{{ entry.domain }}</span>
|
|
</td>
|
|
<td>{{ entry.ttl }}</td>
|
|
<td>{{ entry.record_class }}</td>
|
|
<td><span class="badge record-type-badge">{{ entry.record_type }}</span></td>
|
|
<td class="tooltip">
|
|
{{ entry.record_data }}
|
|
{% if entry.record_type == "SOA" or entry.record_data|length > 50 %}
|
|
<span class="tooltiptext">{{ entry.record_data }}</span>
|
|
{% endif %}
|
|
|
|
<!-- History elements removed -->
|
|
</td>
|
|
<td>
|
|
{{ entry.timestamp.replace('T', ' ').split('.')[0] }}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<p>No DNS entries found. Please upload a CSV file to get started.</p>
|
|
{% endif %}
|
|
|
|
<div class="api-section">
|
|
<h2>API Endpoints</h2>
|
|
<p>Get all DNS entries: <code>/api/dns</code></p>
|
|
<p>Get filtered DNS entries: <code>/api/dns?record_type=A&domain=example.com</code></p>
|
|
<p>Filter by upload: <code>/api/dns?upload_id={upload_id}</code></p>
|
|
<p>Show all records (no deduplication): <code>/api/dns?deduplicate=false</code></p>
|
|
<p>Get unique filter values: <code>/api/dns/types</code></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- All JavaScript removed, using server-side FastAPI for filtering -->
|
|
<script>
|
|
// No JavaScript needed - all filtering handled by FastAPI
|
|
</script>
|
|
</body>
|
|
</html> |