v1.27.0-a #10

Closed
jonathanface wants to merge 473 commits from v1.27.0-a into master
15 changed files with 509 additions and 308 deletions
Showing only changes of commit 1a789d3acb - Show all commits

View File

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

View File

@ -384,7 +384,7 @@ func (a *app) sectorInfo(w http.ResponseWriter, r *http.Request) {
a.executePageTemplate(w, "sector_info", "Sector Info", mi) 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{}) { func (a *app) executeTemplate(w http.ResponseWriter, name string, data interface{}) {
if templateDev { if templateDev {

View File

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

View File

@ -3,12 +3,14 @@
<head> <head>
<title>{{.PageTitle}}</title> <title>{{.PageTitle}}</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.js"></script> <script type="module" src="chain-connectivity.mjs"></script>
<link rel="stylesheet" href="/main.css"> <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='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"> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
<script type="module" src="/ux/curio-ux.mjs"></script>
</head> </head>
<body> <body>
<curio-ux>
<div class="app-head"> <div class="app-head">
<div class="head-left"> <div class="head-left">
<h1>{{.PageTitle}}</h1> <h1>{{.PageTitle}}</h1>
@ -18,6 +20,7 @@
<div class="page"> <div class="page">
{{.Content}} {{.Content}}
</div> </div>
</curio-ux>
</body> </body>
</html> </html>
{{end}} {{end}}

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}}

View File

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

View File

@ -22,19 +22,6 @@ window.customElements.define('chain-connectivity', class MyElement extends LitEl
:host { :host {
box-sizing: border-box; /* Don't forgert this to include padding/border inside width calculation */ 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 { .success {
color: green; color: green;
} }
@ -47,7 +34,9 @@ window.customElements.define('chain-connectivity', class MyElement extends LitEl
`]; `];
} }
render = () => html` 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> <thead>
<tr> <tr>
<th>RPC Address</th> <th>RPC Address</th>
@ -60,8 +49,8 @@ window.customElements.define('chain-connectivity', class MyElement extends LitEl
${this.data.map(item => html` ${this.data.map(item => html`
<tr> <tr>
<td>${item.Address}</td> <td>${item.Address}</td>
<td>${item.Reachable ? html`<span class="success">ok</span>` : html`<span class="error">FAIL</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="success">ok</span>` : html`<span class="warning">${item.SyncState}</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> <td>${item.Version}</td>
</tr> </tr>
`)} `)}

View File

@ -2,13 +2,13 @@
<html> <html>
<head> <head>
<title>JSON Schema Editor</title> <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://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> <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/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"> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/ui-darkness/theme.min.css" rel="stylesheet">
</head> </head>
<body> <body style="visibility: hidden;">
<style> <style>
#saveButton { #saveButton {
display: block; display: block;
@ -61,8 +61,18 @@
.show { .show {
display: block; 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"> <section class="section container-fluid implementations">
<div class="row justify-content-center content"> <div class="row justify-content-center content">
<div class="col-md-8"> <div class="col-md-8">
@ -145,6 +155,6 @@
</script> </script>
</div> </div>
</div> </div>
</section> </section></curio-ux>
</body> </body>
</html> </html>

View File

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

View File

@ -1,10 +1,12 @@
<html> <!doctype html>
<html lang="en" style="background:rgb(11, 22, 34)">
<head> <head>
<title>Curio Cluster Overview</title> <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> <script type="module" src="chain-connectivity.mjs"></script>
<link rel="stylesheet" href="main.css"> <script type="module" src="/ux/curio-ux.mjs"></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'>
<style> <style>
.deadline-box { .deadline-box {
display: grid; display: grid;
@ -28,39 +30,51 @@
.deadline-proven { .deadline-proven {
background-color: green; background-color: green;
} }
.deadline-partially-faulty { .deadline-partially-faulty {
background-color: yellow; background-color: yellow;
} }
.deadline-faulty { .deadline-faulty {
background-color: red; background-color: red;
} }
.logo { .logo {
display: inline-block; display: inline-block;
} }
.dash-tile {
display: flex;
flex-direction: column;
padding: 0.75rem;
background: #3f3f3f;
& b {
padding-bottom: 0.5rem;
color: deeppink;
}
}
</style> </style>
</head> </head>
<body> <body style="visibility:hidden">
<div class="app-head"> <curio-ux>
<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="page">
<div class="row">
<div class="col-md-auto" style="width: 50%">
<div class="info-block"> <div class="info-block">
<h2>Chain Connectivity</h2> <h2>Chain Connectivity</h2>
<chain-connectivity></chain-connectivity> <chain-connectivity></chain-connectivity>
</div> </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"> <div class="info-block">
<h2>Cluster Machines</h2> <h2>Cluster Machines</h2>
<table> <table class="table table-dark">
<thead> <thead>
<tr> <tr>
<th>Host</th> <th>Host</th>
@ -73,10 +87,16 @@
</tbody> </tbody>
</table> </table>
</div> </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"> <div class="info-block">
<h2><a href="/pipeline_porep.html">PoRep Pipeline</a></h2> <h2><a href="/pipeline_porep.html">PoRep Pipeline</a></h2>
<table> <table class="table table-dark">
<thead> <thead>
<tr> <tr>
<th>Address</th> <th>Address</th>
@ -94,10 +114,16 @@
</tbody> </tbody>
</table> </table>
</div> </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"> <div class="info-block">
<h2>Actor Summary</h2> <h2>Actor Summary</h2>
<table> <table class="table table-dark">
<thead> <thead>
<tr> <tr>
<th>Address</th> <th>Address</th>
@ -114,10 +140,17 @@
</tbody> </tbody>
</table> </table>
</div> </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"> <div class="info-block">
<h2>Recently Finished Tasks</h2> <h2>Recently Finished Tasks</h2>
<table> <table class="table table-dark">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -135,10 +168,16 @@
</tbody> </tbody>
</table> </table>
</div> </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"> <div class="info-block">
<h2>Cluster Tasks</h2> <h2>Cluster Tasks</h2>
<table> <table class="table table-dark">
<thead> <thead>
<tr> <tr>
<th style="min-width: 128px">Task</th> <th style="min-width: 128px">Task</th>
@ -152,5 +191,11 @@
</table> </table>
</div> </div>
</div> </div>
<div class="col-md-auto">
</div>
</div>
</div>
</curio-ux>
</body> </body>
</html> </html>

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;
}

View File

@ -2,11 +2,71 @@
<head> <head>
<title>Lotus Provider PoRep Pipeline</title> <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 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="/ux/curio-ux.mjs"></script>
<link rel="stylesheet" href="main.css"> <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'> <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> </head>
<body> <body style="visibility: hidden">
<curio-ux>
<div class="app-head"> <div class="app-head">
<div class="head-left"> <div class="head-left">
<h1>Lotus Provider PoRep Pipeline</h1> <h1>Lotus Provider PoRep Pipeline</h1>
@ -14,9 +74,11 @@
</div> </div>
<hr/> <hr/>
<div class="page"> <div class="page">
<div class="row">
<div class="row-md-auto" style="width: 50%">
<div class="info-block"> <div class="info-block">
<h2>Sectors</h2> <h2>Sectors</h2>
<table class="porep-pipeline-table"> <table class="table table-dark porep-pipeline-table">
<thead> <thead>
<tr> <tr>
<th>Sector ID</th> <th>Sector ID</th>
@ -29,5 +91,8 @@
</table> </table>
</div> </div>
</div> </div>
<div class="row-md-auto"></div>
</div>
</div></curio-ux>
</body> </body>
</html> </html>

View File

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

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 {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 { class CurioUX extends LitElement {
static styles = css` static styles = css`
.curio-slot { \ .curio-slot {
} }
:host {
display: block;
margin: 2px 3px;
}
`; `;
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
const links = [ //"https://unpkg.com/@cds/core/global.min.css",
"https://unpkg.com/@cds/core/global.min.css", //"https://unpkg.com/@cds/city/css/bundles/default.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/@cds/core/styles/theme.dark.min.css", //"https://unpkg.com/@clr/ui/clr-ui.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"
];
const head = document.head; document.head.innerHTML += `
links.forEach(link => { <meta charset="utf-8">
const linkNode = document.createElement('link'); <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
linkNode.rel = 'stylesheet'; <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
linkNode.href = link; integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
head.appendChild(linkNode); <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'); document.documentElement.lang = 'en';
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';
// how Bootstrap & DataTables expect dark mode declared. // how Bootstrap & DataTables expect dark mode declared.
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
@ -42,9 +39,42 @@ class CurioUX extends LitElement {
render() { render() {
return html` return html`
<!-- wrap the slot -->
<div> <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> <slot class="curio-slot"></slot>
</div> </div>

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;
}