Skip to content

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

fix state-viz

parent d005e41a
Hide 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 @@ ...@@ -6,7 +6,17 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.css" /> <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> </head>
<body> <body>
......
op-node/cmd/stateviz/assets/main.js
View file @ b16513aa
...@@ -20,6 +20,22 @@ async function fetchLogs() { ...@@ -20,6 +20,22 @@ async function fetchLogs() {
return await response.json(); 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() { async function pageTable() {
const logs = await fetchLogs(); const logs = await fetchLogs();
if (logs.length === 0) { if (logs.length === 0) {
...@@ -37,7 +53,7 @@ async function pageTable() { ...@@ -37,7 +53,7 @@ async function pageTable() {
$("#logs").append(paginationEl) $("#logs").append(paginationEl)
paginationEl.pagination({ paginationEl.pagination({
dataSource: logs, dataSource: logs,
pageSize: 20, pageSize: 40,
showGoInput: true, showGoInput: true,
showGoButton: true, showGoButton: true,
callback: (data, pagination) => { callback: (data, pagination) => {
...@@ -51,10 +67,10 @@ async function pageTable() { ...@@ -51,10 +67,10 @@ async function pageTable() {
<tr> <tr>
<th scope="col">Timestamp</th> <th scope="col">Timestamp</th>
<th scope="col">L1Head</th> <th scope="col">L1Head</th>
<th scope="col">L1Current</th>
<th scope="col">L2Head</th> <th scope="col">L2Head</th>
<th scope="col">L2SafeHead</th> <th scope="col">L2SafeHead</th>
<th scope="col">L2FinalizedHead</th> <th scope="col">L2FinalizedHead</th>
<th scope="col">L1WindowBuf</th>
</tr> </tr>
</thead> </thead>
`; `;
...@@ -67,31 +83,29 @@ async function pageTable() { ...@@ -67,31 +83,29 @@ async function pageTable() {
// this column has reached its end // this column has reached its end
break break
} }
// outer stringify in title attribute escapes the content and adds the quotes for the html to be valid
let windowBufEl = `<ul style="list-style-type:none">` // inner stringify in
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>"
// TODO: click to copy full hash // TODO: click to copy full hash
html += `<tr> html += `<tr>
<td title="${e.event}" data-toggle="tooltip"> <td title="${e.event}" data-toggle="tooltip">
${e.t} ${e.t}
</td> </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)} ${prettyHex(e.l1Head.hash)}
</td> </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)} ${prettyHex(e.l2Head.hash)}
</td> </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)} ${prettyHex(e.l2SafeHead.hash)}
</td> </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)} ${prettyHex(e.l2FinalizedHead.hash)}
</td> </td>
<td>${windowBufEl}</td>
</tr>`; </tr>`;
} }
html += "</tbody>"; html += "</tbody>";
......
op-node/cmd/stateviz/main.go
View file @ b16513aa
...@@ -56,7 +56,6 @@ func (e *SnapshotState) UnmarshalJSON(data []byte) error { ...@@ -56,7 +56,6 @@ func (e *SnapshotState) UnmarshalJSON(data []byte) error {
L2Head json.RawMessage `json:"l2Head"` L2Head json.RawMessage `json:"l2Head"`
L2SafeHead json.RawMessage `json:"l2SafeHead"` L2SafeHead json.RawMessage `json:"l2SafeHead"`
L2FinalizedHead json.RawMessage `json:"l2FinalizedHead"` L2FinalizedHead json.RawMessage `json:"l2FinalizedHead"`
L1WindowBuf json.RawMessage `json:"l1WindowBuf"`
}{} }{}
if err := json.Unmarshal(data, &t); err != nil { if err := json.Unmarshal(data, &t); err != nil {
return err 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