feat: add fix dialog

views/partial/bpset_actions.ejs

@@ -1,7 +1,7 @@
 <td>
   <div class="btn-group">
-    <button type="button" class="btn btn-primary">Fix</button>
-    <button type="button" class="btn btn-secondary">Recheck</button>
+    <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>
   </div>

views/partial/bpset_fixdialog.ejs

@@ -0,0 +1,48 @@
+<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>
+    <% }) %>
+
+    <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>
+      <% }) %>
+      <br>
+      
+      <% if (metadata.isFixFunctionUsesDestructiveCommand) { %>
+        <div class="alert alert-danger" role="alert">
+          This Fix Function Has DESTRUCTIVE Command! please review pending operations carefully!
+        </div>
+      <% } %>
+
+      <div class="alert alert-warning" role="alert">
+        <%= metadata.adviseBeforeFixFunction %>
+      </div>
+
+      <br>
+
+      <button class="btn btn-primary" type="submit">Fix!</button>
+    </form>
+  </div>
+</div>

views/partial/bpset_item.ejs

@@ -17,3 +17,5 @@
   <%- include('./bpset_progress.ejs', { metadata }) %>
   <%- include('./bpset_actions.ejs', { metadata }) %>
 </tr>
+
+<%- include('./bpset_fixdialog.ejs', { metadata }) %>

views/partial/page_header.ejs

@@ -1,23 +1,42 @@
+<%
+  const metadatas =
+    bpStatus
+      .map(({ metadatas }) => metadatas)
+      .flat()
+      .filter((v) => v.status === 'FINISHED')
+
+  const passCount = metadatas.filter((v) => v.nonCompliantResources.length < 1).length
+  const failCount = metadatas.filter((v) => v.nonCompliantResources.length > 0).length
+  const errorCount = metadatas.filter((v) => v.status === 'ERROR').length
+%>
+
 <div class="d-flex justify-content-between align-items-end">
   <div>
     <h1 class="fw-bold">BPSets (<%= bpLength %>)</h1>
     <p>Created by Minhyeok Park</p>
   </div>
 
-  <div class="d-flex">
+  <div class="d-flex status gap-3 text-center">
     <div>
-      <p>Pass</p>
-      <p><%=  %></p>
+      <p class="m-0">Pass</p>
+      <p class="fs-3"><%= passCount %></p>
     </div>
     <div>
-      <p>Fail</p>
+      <p class="m-0">Fail</p>
+      <p class="fs-3"><%= failCount %></p>
     </div>
     <div>
-      <p>Error</p>
+      <p class="m-0">Error</p>
+      <p class="fs-3"><%= errorCount %></p>
     </div>
   </div>
 
   <div class="btn-group">
-    <a href="/check_all" type="button" class="btn btn-primary">Check All</a>
+    <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>
 </div>