From 1a789d3acbed6a6c89ab6d92a454218b293acf0c Mon Sep 17 00:00:00 2001 From: "Andrew Jackson (Ajax)" Date: Fri, 19 Apr 2024 10:08:21 -0500 Subject: [PATCH] feat: curioweb: Improve UX, add top menu (#11901) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: LexLuthr Co-authored-by: Łukasz Magiera --- curiosrc/web/api/sector/sector.go | 3 + curiosrc/web/hapi/simpleinfo.go | 2 +- .../hapi/web/pipeline_porep_sectors.gohtml | 58 ++++ curiosrc/web/hapi/web/root.gohtml | 5 +- curiosrc/web/hapi/web/sector_info.gohtml | 57 ++++ curiosrc/web/srv.go | 2 +- curiosrc/web/static/chain-connectivity.mjs | 21 +- curiosrc/web/static/config/edit.html | 18 +- curiosrc/web/static/config/index.html | 16 +- curiosrc/web/static/index.html | 279 ++++++++++-------- curiosrc/web/static/main.css | 120 -------- curiosrc/web/static/pipeline_porep.html | 99 +++++-- curiosrc/web/static/sector/index.html | 2 +- curiosrc/web/static/ux/curio-ux.mjs | 82 +++-- curiosrc/web/static/ux/main.css | 53 ++++ 15 files changed, 509 insertions(+), 308 deletions(-) create mode 100644 curiosrc/web/hapi/web/sector_info.gohtml delete mode 100644 curiosrc/web/static/main.css create mode 100644 curiosrc/web/static/ux/main.css diff --git a/curiosrc/web/api/sector/sector.go b/curiosrc/web/api/sector/sector.go index ba71f0cbe..e3b4b3c15 100644 --- a/curiosrc/web/api/sector/sector.go +++ b/curiosrc/web/api/sector/sector.go @@ -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++ } diff --git a/curiosrc/web/hapi/simpleinfo.go b/curiosrc/web/hapi/simpleinfo.go index 3bab1c46c..287e11233 100644 --- a/curiosrc/web/hapi/simpleinfo.go +++ b/curiosrc/web/hapi/simpleinfo.go @@ -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 { diff --git a/curiosrc/web/hapi/web/pipeline_porep_sectors.gohtml b/curiosrc/web/hapi/web/pipeline_porep_sectors.gohtml index 3949de8e2..82f0ad196 100644 --- a/curiosrc/web/hapi/web/pipeline_porep_sectors.gohtml +++ b/curiosrc/web/hapi/web/pipeline_porep_sectors.gohtml @@ -1,4 +1,62 @@ {{define "sector_porep_state"}} + diff --git a/curiosrc/web/hapi/web/root.gohtml b/curiosrc/web/hapi/web/root.gohtml index 562bbc209..114db6462 100644 --- a/curiosrc/web/hapi/web/root.gohtml +++ b/curiosrc/web/hapi/web/root.gohtml @@ -3,12 +3,14 @@ {{.PageTitle}} - + + +

{{.PageTitle}}

@@ -18,6 +20,7 @@
{{.Content}}
+ {{end}} diff --git a/curiosrc/web/hapi/web/sector_info.gohtml b/curiosrc/web/hapi/web/sector_info.gohtml new file mode 100644 index 000000000..afa96a923 --- /dev/null +++ b/curiosrc/web/hapi/web/sector_info.gohtml @@ -0,0 +1,57 @@ +{{define "sector_info"}} +

Sector {{.SectorNumber}}

+
+

PoRep Pipeline

+ {{template "sector_porep_state" .PipelinePoRep}} +
+
+

Storage

+
+ + + + + + + {{range .Locations}} + + {{if .PathType}} + + {{end}} + {{if .FileType}} + + {{end}} + + + + {{range $i, $loc := .Locations}} + {{if gt $i 0}} + + + + + {{end}} + {{end}} + {{end}} +
Path TypeFile TypePath IDHost
{{.PathType}}{{.FileType}}{{(index .Locations 0).StorageID}}{{range (index .Locations 0).Urls}}

{{.}}

{{end}}
{{$loc.StorageID}}{{range $loc.Urls}}

{{.}}

{{end}}
+ +
+

Tasks

+ + + + + + + + {{range .Tasks}} + + + + + + + {{end}} +
Task TypeTask IDPostedWorker
{{.Name}}{{.ID}}{{.SincePosted}}{{if ne nil .OwnerID}}{{.Owner}}{{end}}
+
+{{end}} diff --git a/curiosrc/web/srv.go b/curiosrc/web/srv.go index b4992dc80..b16a9f9af 100644 --- a/curiosrc/web/srv.go +++ b/curiosrc/web/srv.go @@ -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() diff --git a/curiosrc/web/static/chain-connectivity.mjs b/curiosrc/web/static/chain-connectivity.mjs index 8dc15de5d..bf4c80f04 100644 --- a/curiosrc/web/static/chain-connectivity.mjs +++ b/curiosrc/web/static/chain-connectivity.mjs @@ -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` - + + +
@@ -60,8 +49,8 @@ window.customElements.define('chain-connectivity', class MyElement extends LitEl ${this.data.map(item => html` - - + + `)} diff --git a/curiosrc/web/static/config/edit.html b/curiosrc/web/static/config/edit.html index 37bc8f093..2802316a9 100644 --- a/curiosrc/web/static/config/edit.html +++ b/curiosrc/web/static/config/edit.html @@ -2,13 +2,13 @@ JSON Schema Editor + - - + + /* Fix for dark mode */ + .card.bg-light { + background-color: rgb(11, 22, 34) !important; + } + input.form-control { + background: #111; + color: white; + font-weight: bold; + } + +
@@ -145,6 +155,6 @@
-
+ diff --git a/curiosrc/web/static/config/index.html b/curiosrc/web/static/config/index.html index e93d0787c..769929e53 100644 --- a/curiosrc/web/static/config/index.html +++ b/curiosrc/web/static/config/index.html @@ -38,7 +38,7 @@
RPC Address
${item.Address}${item.Reachable ? html`ok` : html`FAIL`}${item.SyncState === "ok" ? html`ok` : html`${item.SyncState}`}${item.Reachable ? html`ok` : html`FAIL`}${item.SyncState === "ok" ? html`ok` : html`${item.SyncState}`} ${item.Version}
${this.layers.map((layer, index) => html` - +
Used By: ${(f=> f.length?f.map(topo => html`${topo.Server}`):'-')( this.topo.filter(topo => topo.LayersCSV.split(",").includes(layer)))} @@ -80,9 +80,17 @@ }); -

Configuration Editor

-

Click on a layer to edit its configuration

- +
+
+
+
+

Configuration Editor

+

Click on a layer to edit its configuration

+ +
+
+
+
diff --git a/curiosrc/web/static/index.html b/curiosrc/web/static/index.html index b86c48915..0d734d6b7 100644 --- a/curiosrc/web/static/index.html +++ b/curiosrc/web/static/index.html @@ -1,10 +1,12 @@ - + + Curio Cluster Overview - + - - + - -
- -
-

Curio Cluster

-
-
- version [todo] -
-
-
-
-
-

Chain Connectivity

- -
-
-
-

Cluster Machines

- - - - - - - - - - - -
HostIDLast ContactTasks (24h)
-
-
-
-

PoRep Pipeline

- - - - - - - - - - - - - - - - -
AddressSDRTreesPrecommit MsgWait SeedPoRepCommit MsgDoneFailed
-
-
-
-

Actor Summary

- - - - - - - - - - - - - - - -
AddressConfig Layers AvailableQaPDeadlinesBalanceAvailableWorkerWins
-
-
-
-

Recently Finished Tasks

- - - - - - - - - - - - - - - - -
NameIDExecutorPostedStartQueuedTookOutcomeMessage
-
-
-
-

Cluster Tasks

- - - - - - - - - - - -
TaskIDPostedOwner
-
-
+ + +
+
+
+
+

Chain Connectivity

+ +
+
+
+
+
+ +
+
+
+

Cluster Machines

+ + + + + + + + + + + +
HostIDLast ContactTasks (24h)
+
+
+
+
+
+ +
+
+
+

PoRep Pipeline

+ + + + + + + + + + + + + + + + +
AddressSDRTreesPrecommit MsgWait SeedPoRepCommit MsgDoneFailed
+
+
+
+
+
+ +
+
+
+

Actor Summary

+ + + + + + + + + + + + + + + +
AddressConfig Layers AvailableQaPDeadlinesBalanceAvailableWorkerWins
+
+
+
+
+
+ + +
+
+
+

Recently Finished Tasks

+ + + + + + + + + + + + + + + + +
NameIDExecutorPostedStartQueuedTookOutcomeMessage
+
+
+
+
+
+ +
+
+
+

Cluster Tasks

+ + + + + + + + + + + +
TaskIDPostedOwner
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/curiosrc/web/static/main.css b/curiosrc/web/static/main.css deleted file mode 100644 index 76b90d0b5..000000000 --- a/curiosrc/web/static/main.css +++ /dev/null @@ -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; -} diff --git a/curiosrc/web/static/pipeline_porep.html b/curiosrc/web/static/pipeline_porep.html index d596163b7..c609aea6f 100644 --- a/curiosrc/web/static/pipeline_porep.html +++ b/curiosrc/web/static/pipeline_porep.html @@ -2,11 +2,71 @@ Lotus Provider PoRep Pipeline - - + + + + - + +

Lotus Provider PoRep Pipeline

@@ -14,20 +74,25 @@
-
-

Sectors

- - - - - - - - - - -
Sector IDCreate TimeState
+
+
+
+

Sectors

+ + + + + + + + + + +
Sector IDCreate TimeState
+
+
+
-
+
\ No newline at end of file diff --git a/curiosrc/web/static/sector/index.html b/curiosrc/web/static/sector/index.html index e3abed9f4..9ac5559cd 100644 --- a/curiosrc/web/static/sector/index.html +++ b/curiosrc/web/static/sector/index.html @@ -119,7 +119,7 @@ rows: '%d rows selected', headerCheckbox: true, }, - scrollY: window.innerHeight - 150, + scrollY: window.innerHeight - 250, deferRender: true, scroller: true, }); diff --git a/curiosrc/web/static/ux/curio-ux.mjs b/curiosrc/web/static/ux/curio-ux.mjs index 6f8048a4e..0b883d1d7 100644 --- a/curiosrc/web/static/ux/curio-ux.mjs +++ b/curiosrc/web/static/ux/curio-ux.mjs @@ -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 += ` + + + + + +` - 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` -
- ${this.message? html`
${this.message}
`: html``} + + + ${this.message? html``: html``}
diff --git a/curiosrc/web/static/ux/main.css b/curiosrc/web/static/ux/main.css new file mode 100644 index 000000000..c73002ff6 --- /dev/null +++ b/curiosrc/web/static/ux/main.css @@ -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; +}