feat: add search and sort feature
All checks were successful
/ deploy_site (push) Successful in 2m18s
All checks were successful
/ deploy_site (push) Successful in 2m18s
This commit is contained in:
@ -1,8 +1,30 @@
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#fixdialog-<%= metadata.idx %>">Fix</button>
|
||||
<a href="/check?name=<%= metadata.name %>&hidePass=<% hidePass %>" type="button" class="btn btn-secondary">Recheck</a>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target="#detail-<%= metadata.idx %>">Details</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="collapse" data-bs-target="#logs-<%= metadata.idx %>">Logs</button>
|
||||
<td class="py-3 px-4">
|
||||
<div class="flex space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
class="bg-blue-500 text-white px-3 py-2 rounded shadow hover:bg-blue-600"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#fixdialog-<%= metadata.idx %>">
|
||||
Fix
|
||||
</button>
|
||||
<a
|
||||
href="/check?name=<%= metadata.name %>&hidePass=<%= hidePass %>"
|
||||
class="bg-gray-500 text-white px-3 py-2 rounded shadow hover:bg-gray-600">
|
||||
Recheck
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
class="bg-gray-500 text-white px-3 py-2 rounded shadow hover:bg-gray-600"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#detail-<%= metadata.idx %>">
|
||||
Details
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="bg-gray-500 text-white px-3 py-2 rounded shadow hover:bg-gray-600"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#logs-<%= metadata.idx %>">
|
||||
Logs
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@ -1,57 +1,51 @@
|
||||
<%
|
||||
const priorityLabel = ['CRITICAL', 'Required', 'Recommend'][metadata.priority-1] || 'Recommend'
|
||||
const priorityColor = ['danger', 'warning', 'secondary'][metadata.priority-1] || 'secondary'
|
||||
const priorityLabel = ['CRITICAL', 'Required', 'Recommend'][metadata.priority - 1] || 'Recommend';
|
||||
const priorityColor = ['red', 'yellow', 'gray'][metadata.priority - 1] || 'gray';
|
||||
%>
|
||||
|
||||
<tr>
|
||||
<td colspan="7" class="p-0">
|
||||
<div class="collapse" id="detail-<%= metadata.idx %>">
|
||||
<div class="bg-light p-3">
|
||||
<h3><%= metadata.name %></h3>
|
||||
<p><%= metadata.description %></p>
|
||||
<div class="overflow-hidden max-h-0 hidden" id="detail-<%= metadata.idx %>">
|
||||
<div class="bg-gray-100 p-4">
|
||||
<h3 class="text-xl font-semibold"><%= metadata.name %></h3>
|
||||
<p class="text-gray-700"><%= metadata.description %></p>
|
||||
|
||||
<p>
|
||||
Category:
|
||||
<span class="badge text-bg-secondary"><%= metadata.bestPracticeCategory %></span>
|
||||
<%= metadata.awsServiceCategory %> - <%= metadata.awsService %>
|
||||
<p class="mt-2">
|
||||
<span class="font-bold">Category:</span>
|
||||
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded"><%= metadata.bestPracticeCategory %></span>
|
||||
<span class="text-gray-500"><%= metadata.awsServiceCategory %> - <%= metadata.awsService %></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Priority:
|
||||
<span class="badge text-bg-<%= priorityColor %>">
|
||||
<p class="mt-2">
|
||||
<span class="font-bold">Priority:</span>
|
||||
<span class="bg-<%= priorityColor %>-200 text-<%= priorityColor %>-800 px-2 py-1 rounded">
|
||||
<%= metadata.priority %> - <%= priorityLabel %>
|
||||
</span>
|
||||
|
||||
<%= metadata.priorityReason %>
|
||||
<span class="text-gray-500"><%= metadata.priorityReason %></span>
|
||||
</p>
|
||||
|
||||
<h4>Operations used in check function</h4>
|
||||
<div class="row row-cols-3">
|
||||
<% metadata.commandUsedInCheckFunction.forEach(({ name, reason }) => { %>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<h5 class="card-header"><%= name %></h5>
|
||||
<div class="card-body">
|
||||
<%= reason %>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<h4 class="text-lg font-semibold">Operations used in check function</h4>
|
||||
<div class="grid grid-cols-3 gap-4 mt-2">
|
||||
<% metadata.commandUsedInCheckFunction.forEach(({ name, reason }) => { %>
|
||||
<div class="bg-white shadow rounded p-3">
|
||||
<h5 class="text-sm font-bold"><%= name %></h5>
|
||||
<p class="text-sm text-gray-600"><%= reason %></p>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<h4>Operations used in fix function</h4>
|
||||
<div class="row row-cols-3">
|
||||
<% metadata.commandUsedInFixFunction.forEach(({ name, reason }) => { %>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<h5 class="card-header"><%= name %></h5>
|
||||
<div class="card-body">
|
||||
<%= reason %>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h4 class="text-lg font-semibold">Operations used in fix function</h4>
|
||||
<div class="grid grid-cols-3 gap-4 mt-2">
|
||||
<% metadata.commandUsedInFixFunction.forEach(({ name, reason }) => { %>
|
||||
<div class="bg-white shadow rounded p-3">
|
||||
<h5 class="text-sm font-bold"><%= name %></h5>
|
||||
<p class="text-sm text-gray-600"><%= reason %></p>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
<% }) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,48 +1,57 @@
|
||||
<div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="fixdialog-<%= metadata.idx %>">
|
||||
<div class="offcanvas-header d-flex gap-3">
|
||||
<h3 class="offcanvas-title" style="word-break: break-all;">Fixing <%= metadata.name %></h3>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<h3 class="mb-3">Pending operations</h3>
|
||||
<% metadata.commandUsedInFixFunction.forEach(({ name, reason }) => { %>
|
||||
<div class="card mb-3">
|
||||
<h5 class="card-header"><%= name %></h5>
|
||||
<div class="card-body">
|
||||
<%= reason %>
|
||||
</div>
|
||||
</div>
|
||||
<% }) %>
|
||||
<div class="fixed inset-0 flex items-end justify-center sm:items-center bg-gray-800 bg-opacity-50 z-50 hidden opacity-0 transition-opacity duration-300" id="fixdialog-<%= metadata.idx %>">
|
||||
<div class="bg-white rounded-lg shadow-lg w-full max-w-md mx-auto overflow-y-auto transform translate-y-full transition-transform duration-300">
|
||||
<div class="p-4 border-b relative">
|
||||
<button data-close-offcanvas class="absolute top-4 right-4 text-gray-500">×</button>
|
||||
<h3 class="text-lg font-bold text-gray-700">Fixing <%= metadata.name %></h3>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<h3 class="mb-3">Required Parameters</h3>
|
||||
<form method="POST" action="/fix?name=<%= metadata.name %>&hidePass=<%= hidePass %>">
|
||||
<% metadata.requiredParametersForFix.forEach((input) => { %>
|
||||
<div class="mb-3">
|
||||
<label for="<%= `${metadata.name}-${input.name}` %>" class="form-label"><%= input.name %></label>
|
||||
<input type="text" class="form-control" name="<%= input.name %>" id="<%= `${metadata.name}-${input.name}` %>" value="<%= input.default %>" required>
|
||||
<div class="form-text">
|
||||
<%= input.description %><br />
|
||||
ex) <code><%= input.example %></code>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="text-md font-semibold mb-3">Pending operations</h4>
|
||||
<% metadata.commandUsedInFixFunction.forEach(({ name, reason }) => { %>
|
||||
<div class="bg-gray-100 p-3 rounded mb-3">
|
||||
<h5 class="font-semibold text-gray-700"><%= name %></h5>
|
||||
<p class="text-gray-600"><%= reason %></p>
|
||||
</div>
|
||||
<% }) %>
|
||||
<br>
|
||||
|
||||
<% if (metadata.isFixFunctionUsesDestructiveCommand) { %>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
This Fix Function Has DESTRUCTIVE Command! please review pending operations carefully!
|
||||
|
||||
<h4 class="text-md font-semibold mb-3">Required Parameters</h4>
|
||||
<form method="POST" action="/fix?name=<%= metadata.name %>&hidePass=<%= hidePass %>">
|
||||
<% metadata.requiredParametersForFix.forEach((input) => { %>
|
||||
<div class="mb-4">
|
||||
<label for="<%= `${metadata.name}-${input.name}` %>" class="block text-sm font-medium text-gray-700">
|
||||
<%= input.name %>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="outline-none mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
|
||||
name="<%= input.name %>"
|
||||
id="<%= `${metadata.name}-${input.name}` %>"
|
||||
value="<%= input.default %>"
|
||||
required
|
||||
/>
|
||||
<p class="mt-1 text-xs text-gray-500">
|
||||
<%= input.description %><br />
|
||||
<span class="font-mono"><%= input.example %></span>
|
||||
</p>
|
||||
</div>
|
||||
<% }) %>
|
||||
|
||||
<% if (metadata.isFixFunctionUsesDestructiveCommand) { %>
|
||||
<div class="p-3 bg-red-100 text-red-700 rounded mb-3">
|
||||
This Fix Function Has DESTRUCTIVE Commands! Please review pending operations carefully.
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<div class="p-3 bg-yellow-100 text-yellow-700 rounded mb-3">
|
||||
<%= metadata.adviseBeforeFixFunction %>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<%= metadata.adviseBeforeFixFunction %>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<button class="btn btn-primary" type="submit">Fix!</button>
|
||||
</form>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600">
|
||||
Fix!
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,27 +1,24 @@
|
||||
<%
|
||||
const priorityLabel = ['CRITICAL', 'Required', 'Recommend'][metadata.priority-1] || 'Recommend'
|
||||
const priorityColor = ['danger', 'warning', 'secondary'][metadata.priority-1] || 'secondary'
|
||||
const priorityColor = ['red', 'yellow', 'gray'][metadata.priority-1] || 'secondary'
|
||||
|
||||
const failResources = metadata.nonCompliantResources.length
|
||||
const isPass = failResources < 1
|
||||
%>
|
||||
|
||||
<tr>
|
||||
<td class="fw-bold">#<%= metadata.idx + 1 %></td>
|
||||
<td>
|
||||
<span
|
||||
class="m-0"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
data-bs-title="<%= metadata.description %>">
|
||||
<tr class="border-b" data-status="<%= isPass ? 'pass' : 'fail' %>" data-category-items="<%= category %>">
|
||||
<td class="font-semibold py-3 px-4">#<%= metadata.idx + 1 %></td>
|
||||
<td class="py-3 px-4">
|
||||
<span class="cursor-help" data-tooltip="<%= metadata.description %>">
|
||||
<%= metadata.name %>
|
||||
</span>
|
||||
</td>
|
||||
<td><%= metadata.bestPracticeCategory %></td>
|
||||
<td class="py-3 px-4"><%= metadata.bestPracticeCategory %></td>
|
||||
|
||||
<td>
|
||||
<td class="py-3 px-4">
|
||||
<span
|
||||
class="badge text-bg-<%= priorityColor %>"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
data-bs-title="<%= metadata.priorityReason %>">
|
||||
class="inline-block px-2 py-1 text-xs font-medium rounded-full bg-<%= priorityColor %>-200 text-<%= priorityColor %>-800 cursor-help"
|
||||
data-tooltip="<%= metadata.priorityReason %>">
|
||||
<%= metadata.priority %> - <%= priorityLabel %>
|
||||
</span>
|
||||
</td>
|
||||
@ -29,5 +26,3 @@
|
||||
<%- include('./bpset_progress.ejs', { metadata }) %>
|
||||
<%- include('./bpset_actions.ejs', { metadata }) %>
|
||||
</tr>
|
||||
|
||||
<%- include('./bpset_fixdialog.ejs', { metadata }) %>
|
||||
|
||||
@ -1,30 +1,27 @@
|
||||
<tr>
|
||||
<td colspan="7" class="p-0">
|
||||
<div class="collapse" id="logs-<%= metadata.idx %>">
|
||||
<div class="bg-light p-3">
|
||||
<h4>Non-Compliant Resources</h4>
|
||||
<ul>
|
||||
<div class="overflow-hidden max-h-0 hidden" id="logs-<%= metadata.idx %>">
|
||||
<div class="bg-gray-50 p-4">
|
||||
<h4 class="text-lg font-semibold">Non-Compliant Resources</h4>
|
||||
<ul class="list-disc list-inside">
|
||||
<% metadata.nonCompliantResources.forEach((id) => { %>
|
||||
<li><%= id %></li>
|
||||
<li class="text-gray-700"><%= id %></li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
|
||||
<br>
|
||||
|
||||
<h4>Compliant Resources</h4>
|
||||
<ul>
|
||||
<h4 class="text-lg font-semibold mt-4">Compliant Resources</h4>
|
||||
<ul class="list-disc list-inside">
|
||||
<% metadata.compliantResources.forEach((id) => { %>
|
||||
<li><%= id %></li>
|
||||
<li class="text-gray-700"><%= id %></li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
<br>
|
||||
|
||||
<h4>Error Logs</h4>
|
||||
<ul>
|
||||
<h4 class="text-lg font-semibold mt-4">Error Logs</h4>
|
||||
<ul class="list-disc list-inside">
|
||||
<% metadata.errorMessage.forEach((log) => { %>
|
||||
<li>
|
||||
<p><%= log.date %></p>
|
||||
<pre><%= log.message %></pre>
|
||||
<p class="font-semibold text-gray-700"><%= log.date %></p>
|
||||
<pre class="bg-gray-200 p-3 rounded"><%= log.message %></pre>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
|
||||
@ -12,46 +12,36 @@
|
||||
%>
|
||||
|
||||
<% if (metadata.status === 'FINISHED') { %>
|
||||
<td>
|
||||
<span class="badge text-bg-<%= isPass ? 'success' : 'danger' %>">
|
||||
<td class="py-3 px-4">
|
||||
<span
|
||||
class="inline-block px-2 py-1 text-xs font-medium rounded-full bg-<%= isPass ? 'green' : 'red' %>-200 text-<%= isPass ? 'green' : 'red' %>-800">
|
||||
<%= isPass ? 'Pass' : 'Fail' %>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="progress" role="progressbar">
|
||||
<div class="progress-bar" style="width: <%= passPercent %>%"></div>
|
||||
<td class="py-3 px-4">
|
||||
<div class="relative w-full bg-gray-200 h-4 rounded-md">
|
||||
<div class="absolute top-0 left-0 h-4 bg-green-500 rounded-md" style="width: <%= passPercent %>%"></div>
|
||||
</div>
|
||||
(<%= passResources %>/<%= totalResources %>)
|
||||
</td>
|
||||
<% } %>
|
||||
|
||||
<% 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>
|
||||
|
||||
<p class="m-0">Progressing</p>
|
||||
</td>
|
||||
<% } %>
|
||||
|
||||
<% 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>
|
||||
|
||||
<p class="m-0">Error</p>
|
||||
</td>
|
||||
<% } %>
|
||||
|
||||
<% if (metadata.status === 'LOADED') { %>
|
||||
<td colspan="2">
|
||||
<div class="progress" role="progressbar">
|
||||
<div class="progress-bar" style="width: 0%"></div>
|
||||
</div>
|
||||
|
||||
<p class="m-0">Ready</p>
|
||||
<span class="block mt-1 text-sm text-gray-600">
|
||||
(<%= passResources %>/<%= totalResources %>)
|
||||
</span>
|
||||
</td>
|
||||
<% } else if (metadata.status === 'CHECKING') { %>
|
||||
<td colspan="2" class="py-3 px-4">
|
||||
<div class="relative w-full bg-gray-200 h-4 rounded-md">
|
||||
<div class="absolute top-0 left-0 h-4 bg-gray-500 animate-pulse"></div>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-gray-600">Progressing</p>
|
||||
</td>
|
||||
<% } else if (metadata.status === 'ERROR') { %>
|
||||
<td colspan="2" class="py-3 px-4">
|
||||
<div class="relative w-full bg-red-200 h-4 rounded-md"></div>
|
||||
<p class="mt-1 text-sm text-red-500">Error</p>
|
||||
</td>
|
||||
<% } else if (metadata.status === 'LOADED') { %>
|
||||
<td colspan="2" class="py-3 px-4">
|
||||
<div class="relative w-full bg-gray-200 h-4 rounded-md"></div>
|
||||
<p class="mt-1 text-sm text-gray-600">Ready</p>
|
||||
</td>
|
||||
<% } %>
|
||||
|
||||
@ -10,33 +10,35 @@
|
||||
const errorCount = metadatas.filter((v) => v.status === 'ERROR').length
|
||||
%>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-end">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 class="fw-bold">BPSets (<%= bpLength %>)</h1>
|
||||
<p>Created by Minhyeok Park</p>
|
||||
<h1 class="text-2xl font-bold">BPSets (<%= bpLength %>)</h1>
|
||||
<p class="text-gray-500">Created by Minhyeok Park</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex status gap-3 text-center">
|
||||
<div class="flex space-x-6 text-center">
|
||||
<div>
|
||||
<p class="m-0">Pass</p>
|
||||
<p class="fs-3"><%= passCount %></p>
|
||||
<p class="text-sm text-gray-600">Pass</p>
|
||||
<p class="text-xl font-semibold text-green-500"><%= passCount %></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="m-0">Fail</p>
|
||||
<p class="fs-3"><%= failCount %></p>
|
||||
<p class="text-sm text-gray-600">Fail</p>
|
||||
<p class="text-xl font-semibold text-red-500"><%= failCount %></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="m-0">Error</p>
|
||||
<p class="fs-3"><%= errorCount %></p>
|
||||
<p class="text-sm text-gray-600">Error</p>
|
||||
<p class="text-xl font-semibold text-yellow-500"><%= errorCount %></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<a href="/check_all?hidePass=<% hidePass %>" type="button" class="btn btn-primary">Check All</a>
|
||||
<% if (hidePass) { %>
|
||||
<a href="/?hidePass=false" type="button" class="btn btn-secondary">Show Pass</a>
|
||||
<% } else { %>
|
||||
<a href="/?hidePass=true" type="button" class="btn btn-secondary">Hide Pass</a>
|
||||
<% } %>
|
||||
<div class="space-x-2">
|
||||
<a href="/check_all?hidePass=<%= hidePass %>" class="bg-blue-500 text-white px-4 py-2 rounded-md shadow hover:bg-blue-600 inline-block">
|
||||
Check All
|
||||
</a>
|
||||
<button
|
||||
id="toggleHidePass"
|
||||
class="bg-blue-500 text-white px-4 py-2 rounded-md shadow hover:bg-blue-600">
|
||||
Hide Pass
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user