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
|
//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++
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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}}
|
||||||
|
|||||||
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.
|
// 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()
|
||||||
|
|||||||
@ -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>
|
||||||
`)}
|
`)}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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">
|
||||||
<config-list></config-list>
|
</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>
|
</curio-ux>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@ -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,129 +30,172 @@
|
|||||||
.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">
|
<div class="page">
|
||||||
<img src="favicon.svg" alt="Curio Logo" style="height: 64px; margin: 8px;">
|
<div class="row">
|
||||||
</div>
|
<div class="col-md-auto" style="width: 50%">
|
||||||
<div class="head-left">
|
<div class="info-block">
|
||||||
<h1>Curio Cluster</h1>
|
<h2>Chain Connectivity</h2>
|
||||||
</div>
|
<chain-connectivity></chain-connectivity>
|
||||||
<div class="head-right">
|
</div>
|
||||||
version [todo]
|
</div>
|
||||||
</div>
|
<div class="col-md-auto">
|
||||||
</div>
|
</div>
|
||||||
<hr/>
|
</div>
|
||||||
<div class="page">
|
|
||||||
<div class="info-block">
|
<div class="row">
|
||||||
<h2>Chain Connectivity</h2>
|
<div class="col-md-auto" style="width: 50%">
|
||||||
<chain-connectivity></chain-connectivity>
|
<div class="info-block">
|
||||||
</div>
|
<h2>Cluster Machines</h2>
|
||||||
<hr>
|
<table class="table table-dark">
|
||||||
<div class="info-block">
|
<thead>
|
||||||
<h2>Cluster Machines</h2>
|
<tr>
|
||||||
<table>
|
<th>Host</th>
|
||||||
<thead>
|
<th>ID</th>
|
||||||
<tr>
|
<th>Last Contact</th>
|
||||||
<th>Host</th>
|
<th>Tasks (24h)</th>
|
||||||
<th>ID</th>
|
</tr>
|
||||||
<th>Last Contact</th>
|
</thead>
|
||||||
<th>Tasks (24h)</th>
|
<tbody hx-get="/hapi/simpleinfo/machines" hx-trigger="load,every 5s">
|
||||||
</tr>
|
</tbody>
|
||||||
</thead>
|
</table>
|
||||||
<tbody hx-get="/hapi/simpleinfo/machines" hx-trigger="load,every 5s">
|
</div>
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
<div class="col-md-auto">
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
</div>
|
||||||
<div class="info-block">
|
|
||||||
<h2><a href="/pipeline_porep.html">PoRep Pipeline</a></h2>
|
<div class="row">
|
||||||
<table>
|
<div class="col-md-auto" style="width: 50%">
|
||||||
<thead>
|
<div class="info-block">
|
||||||
<tr>
|
<h2><a href="/pipeline_porep.html">PoRep Pipeline</a></h2>
|
||||||
<th>Address</th>
|
<table class="table table-dark">
|
||||||
<th>SDR</th>
|
<thead>
|
||||||
<th>Trees</th>
|
<tr>
|
||||||
<th>Precommit Msg</th>
|
<th>Address</th>
|
||||||
<th>Wait Seed</th>
|
<th>SDR</th>
|
||||||
<th>PoRep</th>
|
<th>Trees</th>
|
||||||
<th>Commit Msg</th>
|
<th>Precommit Msg</th>
|
||||||
<th>Done</th>
|
<th>Wait Seed</th>
|
||||||
<th>Failed</th>
|
<th>PoRep</th>
|
||||||
</tr>
|
<th>Commit Msg</th>
|
||||||
</thead>
|
<th>Done</th>
|
||||||
<tbody hx-get="/hapi/simpleinfo/pipeline-porep" hx-trigger="load,every 5s">
|
<th>Failed</th>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</thead>
|
||||||
</div>
|
<tbody hx-get="/hapi/simpleinfo/pipeline-porep" hx-trigger="load,every 5s">
|
||||||
<hr>
|
</tbody>
|
||||||
<div class="info-block">
|
</table>
|
||||||
<h2>Actor Summary</h2>
|
</div>
|
||||||
<table>
|
</div>
|
||||||
<thead>
|
<div class="col-md-auto">
|
||||||
<tr>
|
</div>
|
||||||
<th>Address</th>
|
</div>
|
||||||
<th>Config Layers Available</th>
|
|
||||||
<th>QaP</th>
|
<div class="row">
|
||||||
<th>Deadlines</th>
|
<div class="col-md-auto" style="width: 50%">
|
||||||
<th>Balance</th>
|
<div class="info-block">
|
||||||
<th>Available</th>
|
<h2>Actor Summary</h2>
|
||||||
<th>Worker</th>
|
<table class="table table-dark">
|
||||||
<th>Wins</th>
|
<thead>
|
||||||
</tr>
|
<tr>
|
||||||
</thead>
|
<th>Address</th>
|
||||||
<tbody hx-get="/hapi/simpleinfo/actorsummary" hx-trigger="load,every 5s">
|
<th>Config Layers Available</th>
|
||||||
</tbody>
|
<th>QaP</th>
|
||||||
</table>
|
<th>Deadlines</th>
|
||||||
</div>
|
<th>Balance</th>
|
||||||
<hr>
|
<th>Available</th>
|
||||||
<div class="info-block">
|
<th>Worker</th>
|
||||||
<h2>Recently Finished Tasks</h2>
|
<th>Wins</th>
|
||||||
<table>
|
</tr>
|
||||||
<thead>
|
</thead>
|
||||||
<tr>
|
<tbody hx-get="/hapi/simpleinfo/actorsummary" hx-trigger="load,every 5s">
|
||||||
<th>Name</th>
|
</tbody>
|
||||||
<th>ID</th>
|
</table>
|
||||||
<th>Executor</th>
|
</div>
|
||||||
<th>Posted</th>
|
</div>
|
||||||
<th>Start</th>
|
<div class="col-md-auto">
|
||||||
<th>Queued</th>
|
</div>
|
||||||
<th>Took</th>
|
</div>
|
||||||
<th>Outcome</th>
|
|
||||||
<th>Message</th>
|
|
||||||
</tr>
|
<div class="row">
|
||||||
</thead>
|
<div class="col-md-auto" style="width: 50%">
|
||||||
<tbody hx-get="/hapi/simpleinfo/taskhistory" hx-trigger="load, every 2s">
|
<div class="info-block">
|
||||||
</tbody>
|
<h2>Recently Finished Tasks</h2>
|
||||||
</table>
|
<table class="table table-dark">
|
||||||
</div>
|
<thead>
|
||||||
<hr>
|
<tr>
|
||||||
<div class="info-block">
|
<th>Name</th>
|
||||||
<h2>Cluster Tasks</h2>
|
<th>ID</th>
|
||||||
<table>
|
<th>Executor</th>
|
||||||
<thead>
|
<th>Posted</th>
|
||||||
<tr>
|
<th>Start</th>
|
||||||
<th style="min-width: 128px">Task</th>
|
<th>Queued</th>
|
||||||
<th>ID</th>
|
<th>Took</th>
|
||||||
<th>Posted</th>
|
<th>Outcome</th>
|
||||||
<th>Owner</th>
|
<th>Message</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody hx-get="/hapi/simpleinfo/tasks" hx-trigger="load,every 1s">
|
<tbody hx-get="/hapi/simpleinfo/taskhistory" hx-trigger="load, every 2s">
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</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>
|
<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,20 +74,25 @@
|
|||||||
</div>
|
</div>
|
||||||
<hr/>
|
<hr/>
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<div class="info-block">
|
<div class="row">
|
||||||
<h2>Sectors</h2>
|
<div class="row-md-auto" style="width: 50%">
|
||||||
<table class="porep-pipeline-table">
|
<div class="info-block">
|
||||||
<thead>
|
<h2>Sectors</h2>
|
||||||
<tr>
|
<table class="table table-dark porep-pipeline-table">
|
||||||
<th>Sector ID</th>
|
<thead>
|
||||||
<th>Create Time</th>
|
<tr>
|
||||||
<th>State</th>
|
<th>Sector ID</th>
|
||||||
</tr>
|
<th>Create Time</th>
|
||||||
</thead>
|
<th>State</th>
|
||||||
<tbody hx-get="/hapi/pipeline-porep/sectors" hx-trigger="load,every 3s">
|
</tr>
|
||||||
</tbody>
|
</thead>
|
||||||
</table>
|
<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>
|
</div></curio-ux>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -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,
|
||||||
});
|
});
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|||||||
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