Skip to content

N
nebula
Commit b16513aa authored by protolambda's avatar protolambda
Browse files
Options

fix state-viz

parent d005e41a
Show whitespace changes
Inline Side-by-side
Showing with 38 additions and 15 deletions
op-node/cmd/stateviz/assets/index.html
View file @ b16513aa
......@@ -6,7 +6,17 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.css" />
<style>
#snapshot-tables {
font-size: 0.6rem;
}
#snapshot-tables td {
padding: 0.2rem 0.2rem;
}
.tooltip div {
min-width: 40rem;
}
</style>
</head>
<body>
......
op-node/cmd/stateviz/assets/main.js
View file @ b16513aa
......@@ -20,6 +20,22 @@ async function fetchLogs() {
return await response.json();
}
function tooltipFormat(v) {
var out = ""
out += `<div>`
out += `<em>hash</em>: <code>${v["hash"]}</code><br/>`
out += `<em>num</em>: <code>${v["number"]}</code><br/>`
out += `<em>parent</em>: <code>${v["parentHash"]}</code><br/>`
out += `<em>time</em>: <code>${v["timestamp"]}</code><br/>`
if(v.hasOwnProperty("l1origin")) {
out += `<em>L1 hash</em>: <code>${v["l1origin"]["hash"]}</code><br/>`
out += `<em>L1 num</em>: <code>${v["l1origin"]["number"]}</code><br/>`
out += `<em>seq</em>: <code>${v["sequenceNumber"]}</code><br/>`
}
out += `</div>`
return out
}
async function pageTable() {
const logs = await fetchLogs();
if (logs.length === 0) {
......@@ -37,7 +53,7 @@ async function pageTable() {
$("#logs").append(paginationEl)
paginationEl.pagination({
dataSource: logs,
pageSize: 20,
pageSize: 40,
showGoInput: true,
showGoButton: true,
callback: (data, pagination) => {
......@@ -51,10 +67,10 @@ async function pageTable() {
<tr>
<th scope="col">Timestamp</th>
<th scope="col">L1Head</th>
<th scope="col">L1Current</th>
<th scope="col">L2Head</th>
<th scope="col">L2SafeHead</th>
<th scope="col">L2FinalizedHead</th>
<th scope="col">L1WindowBuf</th>
</tr>
</thead>
`;
......@@ -67,31 +83,29 @@ async function pageTable() {
// this column has reached its end
break
}
let windowBufEl = `<ul style="list-style-type:none">`
e.l1WindowBuf.forEach((x) => {
windowBufEl += `<li title=${JSON.stringify(x)} data-toggle="tooltip" style="background-color:${colorCode(x.hash)};">${prettyHex(x.hash)}</li>`
})
windowBufEl += "</ul>"
// outer stringify in title attribute escapes the content and adds the quotes for the html to be valid
// inner stringify in
// TODO: click to copy full hash
html += `<tr>
<td title="${e.event}" data-toggle="tooltip">
${e.t}
</td>
<td title=${JSON.stringify(e.l1Head)} data-toggle="tooltip" style="background-color:${colorCode(e.l1Head.hash)};">
<td title="${tooltipFormat(e.l1Head)}" data-bs-html="true" data-toggle="tooltip" style="background-color:${colorCode(e.l1Head.hash)};">
${prettyHex(e.l1Head.hash)}
</td>
<td title=${JSON.stringify(e.l2Head)} data-toggle="tooltip" style="background-color:${colorCode(e.l2Head.hash)};">
<td title="${tooltipFormat(e.l1Current)}" data-bs-html="true" data-toggle="tooltip" style="background-color:${colorCode(e.l1Current.hash)};">
${prettyHex(e.l1Current.hash)}
</td>
<td title="${tooltipFormat(e.l2Head)}" data-bs-html="true" data-toggle="tooltip" style="background-color:${colorCode(e.l2Head.hash)};">
${prettyHex(e.l2Head.hash)}
</td>
<td title=${JSON.stringify(e.l2SafeHead)} data-toggle="tooltip" style="background-color:${colorCode(e.l2SafeHead.hash)};">
<td title="${tooltipFormat(e.l2SafeHead)}" data-bs-html="true" data-toggle="tooltip" style="background-color:${colorCode(e.l2SafeHead.hash)};">
${prettyHex(e.l2SafeHead.hash)}
</td>
<td title=${JSON.stringify(e.l2FinalizedHead)} data-toggle="tooltip" style="background-color:${colorCode(e.l2FinalizedHead.hash)};">
<td title="${tooltipFormat(e.l2FinalizedHead)}" data-bs-html="true" data-toggle="tooltip" style="background-color:${colorCode(e.l2FinalizedHead.hash)};">
${prettyHex(e.l2FinalizedHead.hash)}
</td>
<td>${windowBufEl}</td>
</tr>`;
}
html += "</tbody>";
......
op-node/cmd/stateviz/main.go
View file @ b16513aa
......@@ -56,7 +56,6 @@ func (e *SnapshotState) UnmarshalJSON(data []byte) error {
L2Head json.RawMessage `json:"l2Head"`
L2SafeHead json.RawMessage `json:"l2SafeHead"`
L2FinalizedHead json.RawMessage `json:"l2FinalizedHead"`
L1WindowBuf json.RawMessage `json:"l1WindowBuf"`
}{}
if err := json.Unmarshal(data, &t); err != nil {
return err
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment