init: cobol-java migration verification platform v3 (42 tests, JCL module)

2026-05-27 08:42:41 +08:00
parent faeedbc77b
commit 7fcdb41a85
21 changed files with 870 additions and 148 deletions
@@ -1,27 +1,99 @@
 <!DOCTYPE html>
-<html><head><meta charset="utf-8"><title>Result - {{ task.id }}</title>
-<link rel="stylesheet" href="/static/style.css"></head><body>
+<html lang="en">
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Result — {{ task.id }}</title>
+<link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
 <div class="container">
-<h1>Verification Result</h1>
-{% if task.status == "done" and task.result %}
-<pre class="pass">Status: {{ task.result.status }}
-Program: {{ task.result.program }}
-Matched: {{ task.result.matched }} | Mismatched: {{ task.result.mismatched }}
-Runner: {{ task.result.runner }} | Duration: {{ task.result.duration }}s</pre>
-{% elif task.status == "error" %}
-<pre class="fail">{{ task.result }}</pre>
-{% else %}
-<div id="poll-status">Status: {{ task.status }} — polling...</div>
+
+  <header>
+    <div class="badge">Verification Result</div>
+    <h1>{{ task.id }}</h1>
+    <div class="tagline">Status: <span class="poll-status">loading...</span></div>
+  </header>
+
+  <section>
+    <h2>Summary</h2>
+    <div class="matrix">
+      <dt>Status</dt><dd>{{ task.result.status }}</dd>
+      <dt>Program</dt><dd>{{ task.result.program }}</dd>
+      <dt>Matched</dt><dd>{{ task.result.matched }}</dd>
+      <dt>Mismatched</dt><dd>{{ task.result.mismatched }}</dd>
+      <dt>Runner</dt><dd>{{ task.result.runner }}</dd>
+      <dt>Duration</dt><dd>{{ task.result.duration }}s</dd>
+    </div>
+  </section>
+
+  <section>
+    <h2>Field Results</h2>
+    <div id="fields-table"></div>
+  </section>
+
+  <section>
+    <h2>Pipeline Details</h2>
+    <div id="debug-section"></div>
+  </section>
+
+  <div class="divider"></div>
+  <a href="/" class="btn btn-secondary">← New Verification</a>
+
+  <footer>
+    <span>verify-cli v0.2.0</span>
+    <span><a href="#">Docs</a> &middot; <a href="#">Architecture</a></span>
+  </footer>
+
+</div>
 <script>
 const id = "{{ task.id }}";
 setInterval(async () => {
  const r = await fetch("/status/" + id);
  const d = await r.json();
-  document.getElementById("poll-status").textContent = "Status: " + d.status;
+  document.querySelector(".poll-status").textContent = d.status;
  if (d.status === "done" || d.status === "error") location.reload();
 }, 3000);
+
+// Load per-field results + debug
+(async () => {
+  const r = await fetch("/fields/" + id);
+  const d = await r.json();
+  if (d.fields && d.fields.length) {
+    const rows = d.fields.map(f => {
+      const cls = f.status === "PASS" ? "pass" : f.status === "TOLERATED" ? "tolerated" : "fail";
+      return `<tr class="${cls}"><td>${f.name}</td><td>${f.status}</td><td>${f.cobol||""}</td><td>${f.java||""}</td><td>${f.suggestion||""}</td></tr>`;
+    }).join("");
+    document.getElementById("fields-table").innerHTML =
+      `<table><tr><th>Field</th><th>Status</th><th>COBOL</th><th>Java</th><th>Suggestion</th></tr>${rows}</table>`;
+  }
+  // Render debug info
+  const dbg = d.debug || {};
+  let html = "";
+  if (dbg.field_tree) {
+    const treeRows = dbg.field_tree.map(f =>
+      `<tr><td>L${f.level}</td><td>${f.name}</td><td>${f.pic}</td><td>${f.usage}</td><td>${f.offset}</td><td>${f.length}</td></tr>`).join("");
+    html += `<h3 style="color:var(--dim);font-size:.75rem;letter-spacing:.05em;margin:1rem 0 .5rem">COPYBOOK FieldTree</h3>
+      <table><tr><th>Lv</th><th>Name</th><th>PIC</th><th>Usage</th><th>Off</th><th>Len</th></tr>${treeRows}</table>`;
+  }
+  if (dbg.test_cases) {
+    const tcList = dbg.test_cases.map(tc =>
+      `<tr><td>${tc.id}</td><td>${JSON.stringify(tc.fields)}</td><td>${(tc.targets||[]).join(", ")}</td></tr>`).join("");
+    html += `<h3 style="color:var(--dim);font-size:.75rem;letter-spacing:.05em;margin:1rem 0 .5rem">Test Data (${dbg.test_cases.length} cases)</h3>
+      <table><tr><th>ID</th><th>Fields</th><th>Coverage</th></tr>${tcList}</table>`;
+  }
+  if (dbg.spark_config) {
+    html += `<h3 style="color:var(--dim);font-size:.75rem;letter-spacing:.05em;margin:1rem 0 .5rem">Spark Config</h3>
+      <pre>${dbg.spark_config.records} records via key_varied replication</pre>`;
+  }
+  if (dbg.cobol_build) {
+    html += `<h3 style="color:var(--dim);font-size:.75rem;letter-spacing:.05em;margin:1rem 0 .5rem">COBOL Compile${dbg.cobol_build.ok?"":" (FAILED)"}</h3>
+      <pre>${dbg.cobol_build.log||"(no output)"}</pre>`;
+  }
+  if (dbg.java_build) {
+    html += `<h3 style="color:var(--dim);font-size:.75rem;letter-spacing:.05em;margin:1rem 0 .5rem">Java Build${dbg.java_build.ok?"":" (FAILED)"}</h3>
+      <pre>${dbg.java_build.log||"(no output)"}</pre>`;
+  }
+  if (html) document.getElementById("debug-section").innerHTML = html;
+})();
 </script>
-{% endif %}
-<a href="/">← New verification</a>
-</div>
-</body></html>
+</body>
+</html>
@@ -1,18 +1,43 @@
 <!DOCTYPE html>
-<html><head><meta charset="utf-8"><title>COBOL→Java Verify</title>
-<link rel="stylesheet" href="/static/style.css"></head><body>
+<html lang="en">
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>COBOL → Java Migration Verification</title>
+<link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
 <div class="container">
-<h1>COBOL→Java Migration Verification</h1>
-<form id="verify-form" enctype="multipart/form-data">
-<label>COPYBOOK:<input type="file" name="copybook" accept=".cpy,.cbl,.copy" required></label>
-<label>COBOL source:<input type="file" name="cobol_src" accept=".cbl" required></label>
-<label>Java source (dir with pom.xml):<input type="file" name="java_src" webkitdirectory required></label>
-<label>Mapping YAML:<input type="file" name="mapping" accept=".yaml,.yml" required></label>
-<label>Runner:<select name="runner"><option value="native">Native Java</option><option value="spark">Spark Java</option></select></label>
-<button type="submit">Verify</button>
-</form>
-<div id="status"></div>
-<div id="result"></div>
+
+  <header>
+    <div class="badge">Developer Tool</div>
+    <h1><span>verify</span> — COBOL to Java/Spark Migration</h1>
+    <div class="tagline">Automated field-level verification for COBOL→Java migration pipelines</div>
+  </header>
+
+  <section>
+    <h2>Upload Sources</h2>
+    <form id="verify-form" enctype="multipart/form-data">
+      <div class="form-grid">
+        <label><strong>COPYBOOK</strong>.cpy / .cbl / .copy<input type="file" name="copybook" accept=".cpy,.cbl,.copy" required></label>
+        <label><strong>COBOL Source</strong>.cbl<input type="file" name="cobol_src" accept=".cbl" required></label>
+        <label><strong>Mapping</strong>.yaml / .yml<input type="file" name="mapping" accept=".yaml,.yml" required></label>
+        <label><strong>Runner</strong><select name="runner"><option value="native">Native Java</option><option value="spark">Spark Java</option></select></label>
+        <label class="full"><strong>Java Source</strong>directory with pom.xml<input type="file" name="java_src" webkitdirectory required></label>
+      </div>
+      <div class="actions">
+        <button type="submit" class="btn btn-primary">$ verify</button>
+        <button type="reset" class="btn btn-secondary">Clear</button>
+      </div>
+    </form>
+  </section>
+
+  <div id="status-area"></div>
+
+  <footer>
+    <span>verify-cli v0.2.0</span>
+    <span><a href="#">Docs</a> &middot; <a href="#">Architecture</a></span>
+  </footer>
+
 </div>
 <script src="/static/script.js"></script>
-</body></html>
+</body>
+</html>