Skip to content

Commit

Permalink
cleanups
Browse files Browse the repository at this point in the history
  • Loading branch information
@snadrus
snadrus committed Apr 18, 2024
1 parent a11725b commit ab89469
Show file tree
Hide file tree
Showing 7 changed files with 234 additions and 220 deletions.
21 changes: 5 additions & 16 deletions curiosrc/web/static/chain-connectivity.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,6 @@ window.customElements.define('chain-connectivity', class MyElement extends LitEl
:host {
box-sizing: border-box; /* Don't forgert this to include padding/border inside width calculation */
}
table {
border-collapse: collapse;
}
table td, table th {
border-left: 1px solid #f0f0f0;
padding: 1px 5px;
}
table tr td:first-child, table tr th:first-child {
border-left: none;
}
.success {
color: green;
}
Expand All @@ -47,7 +34,9 @@ window.customElements.define('chain-connectivity', class MyElement extends LitEl
`];
}
render = () => html`
<table>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="/ux/main.css">
<table class="table table-dark">
<thead>
<tr>
<th>RPC Address</th>
Expand All @@ -60,8 +49,8 @@ window.customElements.define('chain-connectivity', class MyElement extends LitEl
${this.data.map(item => html`
<tr>
<td>${item.Address}</td>
<td>${item.Reachable ? html`<span class="success">ok</span>` : html`<span class="error">FAIL</span>`}</td>
<td>${item.SyncState === "ok" ? html`<span class="success">ok</span>` : html`<span class="warning">${item.SyncState}</span>`}</td>
<td>${item.Reachable ? html`<span class="alert alert-success">ok</span>` : html`<span class="alert altert-danger">FAIL</span>`}</td>
<td>${item.SyncState === "ok" ? html`<span class="alert alert-success">ok</span>` : html`<span class="alert alert-warning">${item.SyncState}</span>`}</td>
<td>${item.Version}</td>
</tr>
`)}
Expand Down
18 changes: 14 additions & 4 deletions curiosrc/web/static/config/edit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
<html>
<head>
<title>JSON Schema Editor</title>
<script type="module" src="/ux/curio-ux.mjs"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/ui-darkness/theme.min.css" rel="stylesheet">
</head>
<body>
<body style="visibility: hidden;">
<style>
#saveButton {
display: block;
Expand Down Expand Up @@ -61,8 +61,18 @@
.show {
display: block;
}
</style>

/* Fix for dark mode */
.card.bg-light {
background-color: rgb(11, 22, 34) !important;
}
input.form-control {
background: #111;
color: white;
font-weight: bold;
}
</style>
<curio-ux>
<section class="section container-fluid implementations">
<div class="row justify-content-center content">
<div class="col-md-8">
Expand Down Expand Up @@ -145,6 +155,6 @@
</script>
</div>
</div>
</section>
</section></curio-ux>
</body>
</html>
286 changes: 180 additions & 106 deletions curiosrc/web/static/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<!doctype html>
<html lang="en">
<html lang="en" style="background:rgb(11, 22, 34)">
<head>
<title>Curio Cluster Overview</title>
<script src="https://unpkg.com/[email protected]" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]"
integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO"
crossorigin="anonymous"></script>
<script type="module" src="chain-connectivity.mjs"></script>
<script type="module" src="/ux/curio-ux.mjs"></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/build/web/hack-subset.css'>
<style>
.deadline-box {
display: grid;
Expand All @@ -29,119 +30,192 @@
.deadline-proven {
background-color: green;
}

.deadline-partially-faulty {
background-color: yellow;
}

.deadline-faulty {
background-color: red;
}

.logo {
display: inline-block;
}

.dash-tile {
display: flex;
flex-direction: column;
padding: 0.75rem;
background: #3f3f3f;

& b {
padding-bottom: 0.5rem;
color: deeppink;
}
}

/* Path: curiosrc/web/hapi/web/pipeline_porep_sectors.gohtml */
.porep-pipeline-table,
.porep-state {
color: #d0d0d0;
}

.porep-pipeline-table td,
.porep-pipeline-table th {
border-left: none;
border-collapse: collapse;
}

.porep-pipeline-table tr:nth-child(odd) {
border-top: 6px solid #999999;

}

.porep-pipeline-table tr:first-child,
.porep-pipeline-table tr:first-child {
border-top: none;
}

.porep-state {
border-collapse: collapse;
}

.porep-state td,
.porep-state th {
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;

padding: 1px 5px;

text-align: center;
font-size: 0.7em;
}

.porep-state tr {
border-top: 1px solid #f0f0f0;
}

.porep-state tr:first-child {
border-top: none;
}

.pipeline-active {
background-color: #303060;
}

.pipeline-success {
background-color: #306030;
}

.pipeline-failed {
background-color: #603030;
}
</style>
</head>
<body style="visibility:hidden; shown-by: curio-ux">
<curio-ux>
<div class="page">
<div class="info-block">
<h2>Chain Connectivity</h2>
<chain-connectivity></chain-connectivity>
</div>
<hr>
<div class="info-block">
<h2>Cluster Machines</h2>
<table>
<thead>
<tr>
<th>Host</th>
<th>ID</th>
<th>Last Contact</th>
<th>Tasks (24h)</th>
</tr>
</thead>
<tbody hx-get="/hapi/simpleinfo/machines" hx-trigger="load,every 5s">
</tbody>
</table>
</div>
<hr>
<div class="info-block">
<h2><a href="/pipeline_porep.html">PoRep Pipeline</a></h2>
<table>
<thead>
<tr>
<th>Address</th>
<th>SDR</th>
<th>Trees</th>
<th>Precommit Msg</th>
<th>Wait Seed</th>
<th>PoRep</th>
<th>Commit Msg</th>
<th>Done</th>
<th>Failed</th>
</tr>
</thead>
<tbody hx-get="/hapi/simpleinfo/pipeline-porep" hx-trigger="load,every 5s">
</tbody>
</table>
</div>
<hr>
<div class="info-block">
<h2>Actor Summary</h2>
<table>
<thead>
<tr>
<th>Address</th>
<th>Config Layers Available</th>
<th>QaP</th>
<th>Deadlines</th>
<th>Balance</th>
<th>Available</th>
<th>Worker</th>
<th>Wins</th>
</tr>
</thead>
<tbody hx-get="/hapi/simpleinfo/actorsummary" hx-trigger="load,every 5s">
</tbody>
</table>
</div>
<hr>
<div class="info-block">
<h2>Recently Finished Tasks</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Executor</th>
<th>Posted</th>
<th>Start</th>
<th>Queued</th>
<th>Took</th>
<th>Outcome</th>
<th>Message</th>
</tr>
</thead>
<tbody hx-get="/hapi/simpleinfo/taskhistory" hx-trigger="load, every 2s">
</tbody>
</table>
</div>
<hr>
<div class="info-block">
<h2>Cluster Tasks</h2>
<table>
<thead>
<tr>
<th style="min-width: 128px">Task</th>
<th>ID</th>
<th>Posted</th>
<th>Owner</th>
</tr>
</thead>
<tbody hx-get="/hapi/simpleinfo/tasks" hx-trigger="load,every 1s">
</tbody>
</table>
</div>
</div>
</curio-ux>
<body style="visibility:hidden">
<curio-ux>
<div class="page">
<div class="info-block">
<h2>Chain Connectivity</h2>
<chain-connectivity></chain-connectivity>
</div>
<div class="info-block">
<h2>Cluster Machines</h2>
<table class="table table-dark">
<thead>
<tr>
<th>Host</th>
<th>ID</th>
<th>Last Contact</th>
<th>Tasks (24h)</th>
</tr>
</thead>
<tbody hx-get="/hapi/simpleinfo/machines" hx-trigger="load,every 5s">
</tbody>
</table>
</div>
<div class="info-block">
<h2><a href="/pipeline_porep.html">PoRep Pipeline</a></h2>
<table class="table table-dark">
<thead>
<tr>
<th>Address</th>
<th>SDR</th>
<th>Trees</th>
<th>Precommit Msg</th>
<th>Wait Seed</th>
<th>PoRep</th>
<th>Commit Msg</th>
<th>Done</th>
<th>Failed</th>
</tr>
</thead>
<tbody hx-get="/hapi/simpleinfo/pipeline-porep" hx-trigger="load,every 5s">
</tbody>
</table>
</div>
<div class="info-block">
<h2>Actor Summary</h2>
<table class="table table-dark">
<thead>
<tr>
<th>Address</th>
<th>Config Layers Available</th>
<th>QaP</th>
<th>Deadlines</th>
<th>Balance</th>
<th>Available</th>
<th>Worker</th>
<th>Wins</th>
</tr>
</thead>
<tbody hx-get="/hapi/simpleinfo/actorsummary" hx-trigger="load,every 5s">
</tbody>
</table>
</div>
<div class="info-block">
<h2>Recently Finished Tasks</h2>
<table class="table table-dark">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Executor</th>
<th>Posted</th>
<th>Start</th>
<th>Queued</th>
<th>Took</th>
<th>Outcome</th>
<th>Message</th>
</tr>
</thead>
<tbody hx-get="/hapi/simpleinfo/taskhistory" hx-trigger="load, every 2s">
</tbody>
</table>
</div>
<div class="info-block">
<h2>Cluster Tasks</h2>
<table class="table table-dark">
<thead>
<tr>
<th style="min-width: 128px">Task</th>
<th>ID</th>
<th>Posted</th>
<th>Owner</th>
</tr>
</thead>
<tbody hx-get="/hapi/simpleinfo/tasks" hx-trigger="load,every 1s">
</tbody>
</table>
</div>
</div>
</curio-ux>
</body>

</html>
Loading

0 comments on commit ab89469

Please sign in to comment.