[Developer] #424 format VPD policy metadata

src/main/resources/static/css/app.css

@@ -469,6 +469,32 @@ body {
   padding: 0 0 .75rem !important;
 }
 
+.policy-detail-list {
+  display: grid;
+  grid-template-columns: minmax(120px, 34%) 1fr;
+  margin: 0;
+}
+
+.policy-detail-list dt,
+.policy-detail-list dd {
+  border-bottom: 1px solid var(--rw-border);
+  margin: 0;
+  min-width: 0;
+  padding: .6rem .75rem;
+}
+
+.policy-detail-list dt {
+  background: var(--rw-surface-muted);
+  color: var(--rw-muted);
+  font-size: .78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.policy-detail-list dd {
+  overflow-wrap: anywhere;
+}
+
 .ai-answer {
   background: var(--rw-primary-soft);
   border: 1px solid var(--rw-border);

src/main/resources/templates/fragments/vpd-policy-detail.html

@@ -6,16 +6,32 @@
   <div class="probe-exchange-grid" th:if="${detail}">
     <section class="probe-exchange">
       <h3>Policy Metadata</h3>
-      <pre th:text="${'Object: ' + detail.policy().objectDisplayName()
+      <dl class="policy-detail-list">
-        + '\nPolicy Group: ' + detail.policy().policyGroup()
+        <dt>Object</dt>
-        + '\nPolicy Name: ' + detail.policy().policyName()
+        <dd><code th:text="${detail.policy().objectDisplayName()}">ADMIN.TABLE</code></dd>
-        + '\nFunction: ' + detail.policy().functionDisplayName()
+        <dt>Policy Group</dt>
-        + '\nStatement Types: ' + detail.policy().statementTypes()
+        <dd th:text="${detail.policy().policyGroup()}">SYS_DEFAULT</dd>
-        + '\nEnabled: ' + detail.policy().enabled()
+        <dt>Policy Name</dt>
-        + '\nPolicy Type: ' + detail.policy().policyType()
+        <dd><code th:text="${detail.policy().policyName()}">POLICY</code></dd>
-        + '\nCheck Option: ' + detail.policy().checkOption()
+        <dt>Function</dt>
-        + '\nStatic Policy: ' + detail.policy().staticPolicy()
+        <dd><code th:text="${detail.policy().functionDisplayName()}">ADMIN.FUNC</code></dd>
-        + '\nLong Predicate: ' + detail.policy().longPredicate()}"></pre>
+        <dt>Statement Types</dt>
+        <dd th:text="${detail.policy().statementTypes()} ?: '-'">SELECT</dd>
+        <dt>Enabled</dt>
+        <dd>
+          <span class="badge"
+                th:classappend="${detail.policy().enabled() == 'YES'} ? ' text-bg-success' : ' text-bg-secondary'"
+                th:text="${detail.policy().enabled()}">YES</span>
+        </dd>
+        <dt>Policy Type</dt>
+        <dd th:text="${detail.policy().policyType()}">DYNAMIC</dd>
+        <dt>Check Option</dt>
+        <dd th:text="${detail.policy().checkOption()}">NO</dd>
+        <dt>Static Policy</dt>
+        <dd th:text="${detail.policy().staticPolicy()}">NO</dd>
+        <dt>Long Predicate</dt>
+        <dd th:text="${detail.policy().longPredicate()}">NO</dd>
+      </dl>
     </section>
     <section class="probe-exchange">
       <h3>DBMS_RLS.ADD_POLICY</h3>