102 lines
4.7 KiB
Plaintext
102 lines
4.7 KiB
Plaintext
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link rel="stylesheet" href="/style.css">
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<title>BPSets</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container p-3">
|
||
|
|
<h1 class="fw-bold">BPSets (<%= bpLength %>)</h1>
|
||
|
|
<p>Created by Minhyeok Park</p>
|
||
|
|
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>#</th>
|
||
|
|
<th>Name</th>
|
||
|
|
<th>B.P. Category</th>
|
||
|
|
<th>Priority</th>
|
||
|
|
<th>Fail/Pass</th>
|
||
|
|
<th>Pass Percent</th>
|
||
|
|
<th>Action</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<% bpStatus.forEach(({ category, metadatas }) => { %>
|
||
|
|
<tr>
|
||
|
|
<th colspan="7"><%= category %> (<%= metadatas.length %>)</th>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<% metadatas.forEach((metadata) => { %>
|
||
|
|
<tr>
|
||
|
|
<td class="fw-bold">#<%= metadata.idx + 1 %></td>
|
||
|
|
<td><%= metadata.name %></td>
|
||
|
|
<td><%= metadata.bestPracticeCategory %></td>
|
||
|
|
<td>
|
||
|
|
<span class="badge text-bg-<%= ['danger', 'warning', 'secondary'][metadata.priority-1] %>"><%= metadata.priority %> - <%= ['CRITICAL', 'Required', 'Recommend'][metadata.priority-1] %></span>
|
||
|
|
</td>
|
||
|
|
<% if (metadata.status === 'FINISHED') { %>
|
||
|
|
<% if (metadata.nonCompliantResources.length < 1) { %>
|
||
|
|
<td><span class="badge text-bg-success">Pass</span></td>
|
||
|
|
<% } else { %>
|
||
|
|
<td><span class="badge text-bg-danger">Fail</span></td>
|
||
|
|
<% } %>
|
||
|
|
<td>
|
||
|
|
<div class="progress" role="progressbar">
|
||
|
|
<div class="progress-bar" style="width: <%= metadata.compliantResources.length / metadata.nonCompliantResources.length + metadata.compliantResources.length %>%"></div>
|
||
|
|
</div>
|
||
|
|
(<%= metadata.compliantResources.length %>/<%= metadata.nonCompliantResources.length + metadata.compliantResources.length %>)
|
||
|
|
</td>
|
||
|
|
<% } else if (metadata.status === 'CHECKING') { %>
|
||
|
|
<td colspan="2">
|
||
|
|
<div class="progress" role="progressbar">
|
||
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" style="width: 100%"></div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<% } else if (metadata.status === 'ERROR') { %>
|
||
|
|
<td colspan="2">
|
||
|
|
<div class="progress" role="progressbar">
|
||
|
|
<div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<% } else if (metadata.status === 'LOADED') { %>
|
||
|
|
<td colspan="2">
|
||
|
|
<div class="progress" role="progressbar">
|
||
|
|
<div class="progress-bar" style="width: 0%"></div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<% } %>
|
||
|
|
<td>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button type="button" class="btn btn-primary">Recheck</button>
|
||
|
|
<button type="button" class="btn btn-secondary">Fix</button>
|
||
|
|
<button type="button" class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target="#detail-<%= metadata.idx %>">Details</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td colspan="7" class="p-0">
|
||
|
|
<div class="collapse" id="detail-<%= metadata.idx %>">
|
||
|
|
<div class="card card-body border-0 bg-light">
|
||
|
|
<h3><%= metadata.name %></h3>
|
||
|
|
<p><%= metadata.description %></p>
|
||
|
|
|
||
|
|
<p>Category: <span class="badge text-bg-secondary"><%= metadata.bestPracticeCategory %></span> <%= metadata.awsServiceCategory %> - <%= metadata.awsService %></p>
|
||
|
|
<p>Priority: <span class="badge text-bg-<%= ['danger', 'warning', 'secondary'][metadata.priority-1] %>"><%= metadata.priority %> - <%= ['CRITICAL', 'Required', 'Recommend'][metadata.priority-1] %></span> (<%= metadata.priorityReason %>)</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<% }) %>
|
||
|
|
<% }) %>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|