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 <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)
GitHub
parent
445f1d4b33
commit
1a789d3acb
@ -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++
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
57
curiosrc/web/hapi/web/sector_info.gohtml
Normal 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}}
|
||||
@ -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()
|
||||
|
||||
@ -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>
|
||||
`)}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
<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>
|
||||
|
||||
|
||||
@ -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,39 +30,51 @@
|
||||
.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">
|
||||
<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>
|
||||
<hr>
|
||||
</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>
|
||||
<table class="table table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Host</th>
|
||||
@ -73,10 +87,16 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<hr>
|
||||
</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>
|
||||
<table class="table table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Address</th>
|
||||
@ -94,10 +114,16 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<hr>
|
||||
</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>
|
||||
<table class="table table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Address</th>
|
||||
@ -114,10 +140,17 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<hr>
|
||||
</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>
|
||||
<table class="table table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -135,10 +168,16 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<hr>
|
||||
</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>
|
||||
<table class="table table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="min-width: 128px">Task</th>
|
||||
@ -151,6 +190,12 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-auto">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</curio-ux>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
@ -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,9 +74,11 @@
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="page">
|
||||
<div class="row">
|
||||
<div class="row-md-auto" style="width: 50%">
|
||||
<div class="info-block">
|
||||
<h2>Sectors</h2>
|
||||
<table class="porep-pipeline-table">
|
||||
<table class="table table-dark porep-pipeline-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Sector ID</th>
|
||||
@ -28,6 +90,9 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-md-auto"></div>
|
||||
</div>
|
||||
</div></curio-ux>
|
||||
</body>
|
||||
</html>
|
||||
@ -119,7 +119,7 @@
|
||||
rows: '%d rows selected',
|
||||
headerCheckbox: true,
|
||||
},
|
||||
scrollY: window.innerHeight - 150,
|
||||
scrollY: window.innerHeight - 250,
|
||||
deferRender: true,
|
||||
scroller: true,
|
||||
});
|
||||
|
||||
@ -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
53
curiosrc/web/static/ux/main.css
Normal 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user