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

* 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 <[email protected]> Co-authored-by: LexLuthr <[email protected]> Co-authored-by: LexLuthr <[email protected]> Co-authored-by: Łukasz Magiera <[email protected]>
filecoin-project · Apr 19, 2024 · 1a789d3 · 1a789d3
1 parent 445f1d4
commit 1a789d3
Show file tree

Hide file tree

Showing 15 changed files with 509 additions and 308 deletions.
diff --git 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
@@ -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
@@ -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>

diff --git a/curiosrc/web/hapi/web/root.gohtml b/curiosrc/web/hapi/web/root.gohtml
@@ -3,12 +3,14 @@
 <head>
     <title>{{.PageTitle}}</title>
     <script src="https://unpkg.com/[email protected]" 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/[email protected]/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}}
diff --git a/curiosrc/web/hapi/web/sector_info.gohtml b/curiosrc/web/hapi/web/sector_info.gohtml
@@ -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}}
diff --git 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
@@ -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/[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>
@@ -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>
         `)}

diff --git a/curiosrc/web/static/config/edit.html b/curiosrc/web/static/config/edit.html
@@ -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;
@@ -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>
diff --git a/curiosrc/web/static/config/index.html b/curiosrc/web/static/config/index.html
@@ -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>