cerc-io/lotus
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 27 Wiki Activity

feat: curioweb: Improve UX, add top menu (#11901)

Browse Source 
* cfg edit 1

* jsonschema deps

* feat: lp mig - first few steps

* lp mig: default tasks

* code comments

* docs

* lp-mig-progress

* shared

* comments and todos

* fix: curio: rename lotus-provider to curio (#11645)

* rename provider to curio

* install gotext

* fix lint errors, mod tidy

* fix typo

* fix API_INFO and add gotext to circleCI

* add back gotext

* add gotext after remerge

* lp: channels doc

* finish easy-migration TODOs

* out generate

* merging and more renames

* avoid make-all

* minor doc stuff

* cu: make gen

* make gen fix

* make gen

* tryfix

* go mod tidy

* minor ez migration fixes

* ez setup - ui cleanups

* better error message

* guided setup colors

* better path to saveconfigtolayer

* loadconfigwithupgrades fix

* readMiner oops

* guided - homedir

* err if miner is running

* prompt error should exit

* process already running, miner_id sectors in migration

* dont prompt for language a second time

* check miner stopped

* unlock repo

* render and sql oops

* curio easyMig - some fixes

* easyMigration runs successfully

* lint

* part 2 of last

* message

* merge addtl

* fixing guided setup for myself

* warn-on-no-post

* EditorLoads

* cleanups and styles

* create info

* fix tests

* make gen

* sector early bird

* sectors v2

* sector termination v1

* terminate2

* mjs

* minor things

* flag bad sectors

* fix errors

* add dealweight and deals

* change column width

* ui looking better

* cleanups

* fix pipeline page

* comments

* curioweb: Add missing sector info file

* curioweb: fix hapi root template

---------

Co-authored-by: LexLuthr <88259624+LexLuthr@users.noreply.github.com>
Co-authored-by: LexLuthr <lexluthr@protocol.ai>
Co-authored-by: LexLuthr <lexluthr@curiostorage.org>
Co-authored-by: Łukasz Magiera <magik6k@gmail.com>
This commit is contained in:
Andrew Jackson (Ajax) 2024-04-19 10:08:21 -05:00 committed by GitHub
parent 445f1d4b33
commit 1a789d3acb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 509 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
curiosrc/web/api/sector/sector.go
View File

@ -88,6 +88,7 @@ func (c *cfg) getSectors(w http.ResponseWriter, r *http.Request) {
//ExpectedDayReward abi.TokenAmount
//SealProof abi.RegisteredSealProof
}
type piece struct {
Size int64 `db:"piece_size"`
DealID uint64 `db:"f05_deal_id"`
@ -151,6 +152,7 @@ func (c *cfg) getSectors(w http.ResponseWriter, r *http.Request) {
if st.Expiration < head.Height() {
sectors[i].Flag = true // Flag expired sectors
}
dw, vp := .0, .0
f05, ddo := 0, 0
var pi []piece
@ -186,6 +188,7 @@ func (c *cfg) getSectors(w http.ResponseWriter, r *http.Request) {
dw = float64(big.Div(rdw, big.NewInt(int64(st.Expiration-st.Activation))).Uint64())
vp = float64(big.Div(big.Mul(st.VerifiedDealWeight, big.NewInt(verifiedPowerGainMul)), big.NewInt(int64(st.Expiration-st.Activation))).Uint64())
for _, deal := range st.DealIDs {
if deal > 0 {
f05++
}

2
curiosrc/web/hapi/simpleinfo.go
View File

@ -384,7 +384,7 @@ func (a *app) sectorInfo(w http.ResponseWriter, r *http.Request) {
a.executePageTemplate(w, "sector_info", "Sector Info", mi)
}
var templateDev = os.Getenv("LOTUS_WEB_DEV") == "1"
var templateDev = os.Getenv("CURIO_WEB_DEV") == "1"
func (a *app) executeTemplate(w http.ResponseWriter, name string, data interface{}) {
if templateDev {

58
curiosrc/web/hapi/web/pipeline_porep_sectors.gohtml
View File

@ -1,4 +1,62 @@
{{define "sector_porep_state"}}
<style>
/* 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>
<table class="porep-state">
<tbody>
<tr>

5
curiosrc/web/hapi/web/root.gohtml
View File

@ -3,12 +3,14 @@
<head>
<title>{{.PageTitle}}</title>
<script src="https://unpkg.com/htmx.org@1.9.5" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
<script type="module" src="chain-connectivity.js"></script>
<script type="module" src="chain-connectivity.mjs"></script>
<link rel="stylesheet" href="/main.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<script type="module" src="/ux/curio-ux.mjs"></script>
</head>
<body>
<curio-ux>
<div class="app-head">
<div class="head-left">
<h1>{{.PageTitle}}</h1>
@ -18,6 +20,7 @@
<div class="page">
{{.Content}}
</div>
</curio-ux>
</body>
</html>
{{end}}

57
curiosrc/web/hapi/web/sector_info.gohtml Normal file
View File

@ -0,0 +1,57 @@
{{define "sector_info"}}
<h2>Sector {{.SectorNumber}}</h2>
<div>
<h3>PoRep Pipeline</h3>
{{template "sector_porep_state" .PipelinePoRep}}
</div>
<div>
<h3>Storage</h3>
<table class="porep-state">
<tr>
<th>Path Type</th>
<th>File Type</th>
<th>Path ID</th>
<th>Host</th>
</tr>
{{range .Locations}}
<tr>
{{if .PathType}}
<td rowspan="{{.PathTypeRowSpan}}">{{.PathType}}</td>
{{end}}
{{if .FileType}}
<td rowspan="{{.FileTypeRowSpan}}">{{.FileType}}</td>
{{end}}
<td>{{(index .Locations 0).StorageID}}</td>
<td>{{range (index .Locations 0).Urls}}<p>{{.}}</p>{{end}}</td>
</tr>
{{range $i, $loc := .Locations}}
{{if gt $i 0}}
<tr>
<td>{{$loc.StorageID}}</td>
<td>{{range $loc.Urls}}<p>{{.}}</p>{{end}}</td>
</tr>
{{end}}
{{end}}
{{end}}
</table>
</div>
<div>
<h3>Tasks</h3>
<table class="porep-state">
<tr>
<th>Task Type</th>
<th>Task ID</th>
<th>Posted</th>
<th>Worker</th>
</tr>
{{range .Tasks}}
<tr>
<td>{{.Name}}</td>
<td>{{.ID}}</td>
<td>{{.SincePosted}}</td>
<td>{{if ne nil .OwnerID}}<a href="/hapi/node/{{.OwnerID}}">{{.Owner}}</a>{{end}}</td>
</tr>
{{end}}
</table>
</div>
{{end}}

2
curiosrc/web/srv.go
View File

@ -29,7 +29,7 @@ var basePath = "/static/"
// An dev mode hack for no-restart changes to static and templates.
// You still need to recomplie the binary for changes to go code.
var webDev = os.Getenv("LOTUS_WEB_DEV") == "1"
var webDev = os.Getenv("CURIO_WEB_DEV") == "1"
func GetSrv(ctx context.Context, deps *deps.Deps) (*http.Server, error) {
mx := mux.NewRouter()

21
curiosrc/web/static/chain-connectivity.mjs
View File

@ -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;
}
@ -47,7 +34,9 @@ window.customElements.define('chain-connectivity', class MyElement extends LitEl
`];
}
render = () => html`
<table>
<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="/ux/main.css">
<table class="table table-dark">
<thead>
<tr>
<th>RPC Address</th>
@ -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>
`)}

18
curiosrc/web/static/config/edit.html
View File

@ -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/bootstrap@5.3.3/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;
@ -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">
@ -145,6 +155,6 @@
</script>
</div>
</div>
</section>
</section></curio-ux>
</body>
</html>

16
curiosrc/web/static/config/index.html
View File

@ -38,7 +38,7 @@
<table>
${this.layers.map((layer, index) => html`
<tr>
<td><a href="/config/edit.html?layer=${layer}"><button>${layer}</button></a></td>
<td style="width: 50%"><a href="/config/edit.html?layer=${layer}"><button>${layer}</button></a></td>
<td>
Used By: ${(f=> f.length?f.map(topo => html`${topo.Server}`):'-')(
this.topo.filter(topo => topo.LayersCSV.split(",").includes(layer)))}
@ -80,9 +80,17 @@
});
</script>
<curio-ux>
<h1>Configuration Editor</h1>
<h3>Click on a layer to edit its configuration</h3>
<config-list></config-list>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3" style="width: 70%">
<h1 style="text-wrap: none">Configuration Editor</h1>
<h3 style="text-wrap: none">Click on a layer to edit its configuration</h3>
<config-list></config-list>
</div>
<div class="col-md-3">
</div>
</div>
</curio-ux>
</body>

279
curiosrc/web/static/index.html
View File

@ -1,10 +1,12 @@
<html>
<!doctype html>
<html lang="en" style="background:rgb(11, 22, 34)">
<head>
<title>Curio Cluster Overview</title>
<script src="https://unpkg.com/htmx.org@1.9.5" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org@1.9.5"
integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO"
crossorigin="anonymous"></script>
<script type="module" src="chain-connectivity.mjs"></script>
<link rel="stylesheet" href="main.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'>
<script type="module" src="/ux/curio-ux.mjs"></script>
<style>
.deadline-box {
display: grid;
@ -28,129 +30,172 @@
.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;
}
}
</style>
</head>
<body>
<div class="app-head">
<div class="logo">
<img src="favicon.svg" alt="Curio Logo" style="height: 64px; margin: 8px;">
</div>
<div class="head-left">
<h1>Curio Cluster</h1>
</div>
<div class="head-right">
version [todo]
</div>
</div>
<hr/>
<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>
<body style="visibility:hidden">
<curio-ux>
<div class="page">
<div class="row">
<div class="col-md-auto" style="width: 50%">
<div class="info-block">
<h2>Chain Connectivity</h2>
<chain-connectivity></chain-connectivity>
</div>
</div>
<div class="col-md-auto">
</div>
</div>
<div class="row">
<div class="col-md-auto" style="width: 50%">
<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>
<div class="col-md-auto">
</div>
</div>
<div class="row">
<div class="col-md-auto" style="width: 50%">
<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>
<div class="col-md-auto">
</div>
</div>
<div class="row">
<div class="col-md-auto" style="width: 50%">
<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>
<div class="col-md-auto">
</div>
</div>
<div class="row">
<div class="col-md-auto" style="width: 50%">
<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>
<div class="col-md-auto">
</div>
</div>
<div class="row">
<div class="col-md-auto" style="width: 50%">
<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>
<div class="col-md-auto">
</div>
</div>
</div>
</curio-ux>
</body>
</html>

120
curiosrc/web/static/main.css
View File

@ -1,120 +0,0 @@
html, body {
background: #0f0f0f;
color: #ffffff;
padding: 0;
margin: 0;
font-family: 'Hack', monospace;
}
table td, table th {
font-size: 13px;
}
.app-head {
width: 100%;
}
.head-left {
display: inline-block;
}
.head-right {
display: inline-block;
float: right;
}
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;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #adf7ad;
}
a:hover {
color: #88cc60;
}
.success {
color: greenyellow;
}
.warning {
color: yellow;
}
.error {
color: red;
}
.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;
}

99
curiosrc/web/static/pipeline_porep.html
View File

@ -2,11 +2,71 @@
<head>
<title>Lotus Provider PoRep Pipeline</title>
<script src="https://unpkg.com/htmx.org@1.9.5" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
<script type="module" src="chain-connectivity.js"></script>
<link rel="stylesheet" href="main.css">
<script type="module" src="/ux/curio-ux.mjs"></script>
<script type="module" src="/chain-connectivity.mjs"></script>
<link rel="stylesheet" href="/ux/main.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'>
<style>
/* 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>
<body style="visibility: hidden">
<curio-ux>
<div class="app-head">
<div class="head-left">
<h1>Lotus Provider PoRep Pipeline</h1>
@ -14,20 +74,25 @@
</div>
<hr/>
<div class="page">
<div class="info-block">
<h2>Sectors</h2>
<table class="porep-pipeline-table">
<thead>
<tr>
<th>Sector ID</th>
<th>Create Time</th>
<th>State</th>
</tr>
</thead>
<tbody hx-get="/hapi/pipeline-porep/sectors" hx-trigger="load,every 3s">
</tbody>
</table>
<div class="row">
<div class="row-md-auto" style="width: 50%">
<div class="info-block">
<h2>Sectors</h2>
<table class="table table-dark porep-pipeline-table">
<thead>
<tr>
<th>Sector ID</th>
<th>Create Time</th>
<th>State</th>
</tr>
</thead>
<tbody hx-get="/hapi/pipeline-porep/sectors" hx-trigger="load,every 3s">
</tbody>
</table>
</div>
</div>
<div class="row-md-auto"></div>
</div>
</div>
</div></curio-ux>
</body>
</html>

2
curiosrc/web/static/sector/index.html
View File

@ -119,7 +119,7 @@
rows: '%d rows selected',
headerCheckbox: true,
},
scrollY: window.innerHeight - 150,
scrollY: window.innerHeight - 250,
deferRender: true,
scroller: true,
});

82
curiosrc/web/static/ux/curio-ux.mjs
View File

@ -1,38 +1,35 @@
import {LitElement, css, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
//import 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.esm.js';
class CurioUX extends LitElement {
static styles = css`
.curio-slot {
\ .curio-slot {
}
:host {
display: block;
margin: 2px 3px;
}
`;
connectedCallback() {
super.connectedCallback();
const links = [
"https://unpkg.com/@cds/core/global.min.css",
"https://unpkg.com/@cds/city/css/bundles/default.min.css",
"https://unpkg.com/@cds/core/styles/theme.dark.min.css",
"https://unpkg.com/@clr/ui/clr-ui.min.css",
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
];
//"https://unpkg.com/@cds/core/global.min.css",
//"https://unpkg.com/@cds/city/css/bundles/default.min.css",
//"https://unpkg.com/@cds/core/styles/theme.dark.min.css",
//"https://unpkg.com/@clr/ui/clr-ui.min.css",
const head = document.head;
links.forEach(link => {
const linkNode = document.createElement('link');
linkNode.rel = 'stylesheet';
linkNode.href = link;
head.appendChild(linkNode);
});
document.head.innerHTML += `
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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="/ux/main.css" onload="document.body.style.visibility = 'initial'">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
`
var theme = document.createAttribute('cds-theme');
theme.value = localStorage.getItem('theme') || 'dark';
document.body.attributes.setNamedItem(theme);
var cdsText = document.createAttribute('cds-text');
cdsText.value = 'body';
document.body.attributes.setNamedItem(cdsText);
document.body.style.visibility = 'initial';
document.documentElement.lang = 'en';
// how Bootstrap & DataTables expect dark mode declared.
document.documentElement.classList.add('dark');
@ -42,9 +39,42 @@ class CurioUX extends LitElement {
render() {
return html`
<!-- wrap the slot -->
<div>
${this.message? html`<div>${this.message}</div>`: html``}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/favicon.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Curio Cluster <span class="alert alert-warning">Beta</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/config/">Configurations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sector/">Sectors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/pipeline_porep.html">PoRep</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li class="nav-item">
<a class="nav-link" href="https://lotus.filecoin.io/storage-providers/curio/overview/" target="_blank">Documentation</a>
</li>
</ul>
</div>
</div>
</nav>
${this.message? html`<div class="alert alert-primary" role="alert">${this.message}</div>`: html``}
<slot class="curio-slot"></slot>
</div>

53
curiosrc/web/static/ux/main.css Normal file
View File

@ -0,0 +1,53 @@
@import url('https://fonts.cdnfonts.com/css/metropolis-2');
html {
min-height: 100vh;
background: rgb(11, 22, 34);
padding: 0;
}
body {
margin: 0;
padding: 3px 4px;
background: rgb(11, 22, 34);
}
curio-ux {
/* To resemble Clarity Design */
color: rgb(227, 234, 237);
font-family: Metropolis, monospace;
font-weight: 400;
background: rgb(11, 22, 34);
}
.app-head {
width: 100%;
}
.head-left {
display: inline-block;
}
.head-right {
display: inline-block;
float: right;
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #adf7ad;
}
a:hover {
color: #88cc60;
}
.success {
color: greenyellow;
}
.warning {
color: yellow;
}
.error {
color: red;
}