direktil/local-server
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ui rework

Browse Source
This commit is contained in:
Mikaël Cluseau
2026-06-17 22:40:44 +02:00
parent f6b301c9a0
commit 38ad620759
20 changed files with 1016 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/ui/Cluster-34a012ee0910827c.js
+27
View File
@@ -0,0 +1,27 @@
const Cluster = {
components: { ClusterAccess, ClusterCAs, GetCopy },
props: [ 'cluster', 'token', 'state' ],
template: `
<details open>
<summary>Access</summary>
<ClusterAccess :cluster="cluster" :token="token" :state="state" />
</details>
<details open>
<summary>CAs</summary>
<ClusterCAs :cluster="cluster" :token="token" />
</details>
<details open>
<summary>Secrets</summary>
<h4>Tokens</h4>
<section class="links">
<GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
</section>
<h4>Passwords</h4>
<section class="links">
<GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
</section>
</details>
`
}
html/ui/Cluster-361bc6b76a062d88.js
-19
View File
@@ -1,19 +0,0 @@
const Cluster = {
components: { ClusterAccess, ClusterCAs, GetCopy },
props: [ 'cluster', 'token', 'state' ],
template: `
<ClusterAccess :cluster="cluster" :token="token" :state="state" />
<ClusterCAs :cluster="cluster" :token="token" />
<h3>Secrets</h3>
<h4>Tokens</h4>
<section class="links">
<GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
</section>
<h4>Passwords</h4>
<section class="links">
<GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
</section>
`
}
html/ui/ClusterAccess-e67af72c976d642c.js → html/ui/ClusterAccess-8b4165435ba4fcac.js
+33 -20
View File
@@ -17,6 +17,8 @@ const ClusterAccess = {
kubeUserCert: null,
downloadSet: null,
selectedAssets: {},
loading: false,
msg: null,
};
},
computed: {
@@ -48,36 +50,39 @@ const ClusterAccess = {
methods: {
sshCASign() {
event.preventDefault();
this.loading = true; this.msg = null;
fetch(`/clusters/${this.cluster.Name}/ssh/user-ca/sign`, {
method: 'POST',
body: JSON.stringify({ ...this.sshSignReq, Validity: this.signReqValidity }),
headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
}).then((resp) => {
if (resp.ok) {
resp.blob().then((cert) => { this.sshUserCert = URL.createObjectURL(cert) })
resp.blob().then((cert) => { this.sshUserCert = URL.createObjectURL(cert); this.loading = false })
} else {
resp.json().then((resp) => alert('failed to sign: '+resp.message))
resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
}
})
.catch((e) => { alert('failed to sign: '+e); })
.catch((e) => { this.msg = 'failed to sign: '+e; this.loading = false })
},
kubeCASign() {
event.preventDefault();
this.loading = true; this.msg = null;
fetch(`/clusters/${this.cluster.Name}/kube/sign`, {
method: 'POST',
body: JSON.stringify({ ...this.kubeSignReq, Validity: this.signReqValidity }),
headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
}).then((resp) => {
if (resp.ok) {
resp.blob().then((cert) => { this.kubeUserCert = URL.createObjectURL(cert) })
resp.blob().then((cert) => { this.kubeUserCert = URL.createObjectURL(cert); this.loading = false })
} else {
resp.json().then((resp) => alert('failed to sign: '+resp.message))
resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
}
})
.catch((e) => { alert('failed to sign: '+e); })
.catch((e) => { this.msg = 'failed to sign: '+e; this.loading = false })
},
generateDownloadSet() {
event.preventDefault()
this.loading = true; this.msg = null;
const items = [{
Kind: "host",
@@ -91,18 +96,18 @@ const ClusterAccess = {
headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
}).then((resp) => {
if (resp.ok) {
resp.json().then((set) => { this.downloadSet = set })
resp.json().then((set) => { this.downloadSet = set; this.loading = false })
} else {
resp.json().then((resp) => alert('failed to generate: '+resp.message))
resp.json().then((resp) => { this.msg = 'failed to generate: '+resp.message; this.loading = false })
}
}).catch((e) => { alert('failed to generate: '+e) })
}).catch((e) => { this.msg = 'failed to generate: '+e; this.loading = false })
},
readFile(e, onload) {
const file = e.target.files[0];
if (!file) { return; }
const reader = new FileReader();
reader.onload = () => { onload(reader.result) };
reader.onerror = () => { alert("error reading file"); };
reader.onerror = () => { this.msg = "error reading file" };
reader.readAsText(file);
},
loadPubKey(e) {
@@ -110,6 +115,14 @@ const ClusterAccess = {
this.sshSignReq.PubKey = v;
});
},
copyDownloadSetUrl() {
try {
navigator.clipboard.writeText(window.location.origin+'/public/download-set?set='+this.downloadSet)
this.$root.toast('copied!', 'info')
} catch (e) {
this.$root.toast('copy failed', 'error')
}
},
loadCSR(e) {
this.readFile(e, (v) => {
this.kubeSignReq.CSR = v;
@@ -117,8 +130,6 @@ const ClusterAccess = {
},
},
template: `
<h3>Access</h3>
<p>Grant access to:
<label class="radio"><input type="radio" v-model="accessType" value="ssh" /> SSH</label>
<label class="radio"><input type="radio" v-model="accessType" value="kube" /> Kubernetes</label>
@@ -127,6 +138,8 @@ const ClusterAccess = {
<p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
<p class="error" v-if="msg">{{ msg }} <button class="btn-close" @click="msg=null">&times;</button></p>
<div v-if="accessType == 'ssh'">
<h4>Grant SSH access</h4>
<p>User: <input type="text" v-model="sshSignReq.Principal"/></p>
@@ -134,7 +147,7 @@ const ClusterAccess = {
<span class="text-and-file"><textarea v-model="sshSignReq.PubKey" style="height:3lh"></textarea>
<input type="file" accept=".pub" @change="loadPubKey" /></span>
</p>
<p><button @click="sshCASign">Sign SSH access</button>
<p><button :disabled="loading" @click="sshCASign">{{ loading ? 'signing...' : 'Sign SSH access' }}</button>
<template v-if="sshUserCert">
=&gt; <a :href="sshUserCert" download="ssh-cert.pub">Get certificate</a>
</template>
@@ -149,9 +162,9 @@ const ClusterAccess = {
<span class="text-and-file"><textarea v-model="kubeSignReq.CSR" style="height:7lh;"></textarea>
<input type="file" accept=".csr" @change="loadCSR" /></span>
</p>
<p><button @click="kubeCASign">Sign Kubernetes API access</button>
<p><button :disabled="loading" @click="kubeCASign">{{ loading ? 'signing...' : 'Sign Kubernetes API access' }}</button>
<template v-if="kubeUserCert">
=&gt; <a :href="kubeUserCert" download="kube-cert.pub">Get certificate</a>
=&gt; <a :href="kubeUserCert" download="tls.crt">Get certificate</a>
</template>
</p>
</div>
@@ -166,12 +179,12 @@ const ClusterAccess = {
{{" "}}
</template>
</p>
<p><button :disabled="selectedAssetList.length==0" @click="generateDownloadSet">Generate download set</button></p>
<p v-if="downloadSet" style="word-break:break-all">
<a :href="'/public/download-set?set='+downloadSet" target="_blank">Open download set page</a>
<p><button :disabled="loading || selectedAssetList.length==0" @click="generateDownloadSet">{{ loading ? 'generating...' : 'Generate download set' }}</button></p>
<div v-if="downloadSet" class="term">
<a :href="'/public/download-set?set='+downloadSet" target="_blank">/public/download-set?set={{ downloadSet }}</a>
<br/>
<button @click="navigator.clipboard.writeText(window.location.origin+'/public/download-set?set='+downloadSet)">Copy URL</button>
</p>
<button @click="copyDownloadSetUrl">Copy URL</button>
</div>
</div>
`
}
html/ui/ClusterCAs-d6eba07c367b6306.js → html/ui/ClusterCAs-4f0a381bfb0c1b88.js
-1
View File
@@ -2,7 +2,6 @@ const ClusterCAs = {
components: { GetCopy },
props: [ 'cluster', 'token' ],
template: `
<h3>CAs</h3>
<table><tr><th>Name</th><th>Certificate</th><th>Signed certificates</th></tr>
<tr v-for="ca in cluster.CAs">
<td>{{ ca.Name }}</td>
html/ui/Downloads-25b2e1f4aeaaff61.js → html/ui/Downloads-3c8cba0572aebfae.js
+3 -2
View File
@@ -1,7 +1,7 @@
const Downloads = {
props: [ 'kind', 'name', 'token', 'state' ],
data() {
return { createDisabled: false, selectedAssets: {} }
return { createDisabled: false, selectedAssets: {}, msg: null }
},
computed: {
availableAssets() {
@@ -50,11 +50,12 @@ const Downloads = {
headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
}).then((resp) => resp.json())
.then((token) => { this.selectedAssets = {}; this.createDisabled = false })
.catch((e) => { alert('failed to create link'); this.createDisabled = false })
.catch((e) => { this.msg = 'failed to create link'; this.createDisabled = false })
},
},
template: `
<h4>Available assets</h4>
<p class="error" v-if="msg">{{ msg }} <button class="btn-close" @click="msg=null">&times;</button></p>
<p class="downloads">
<template v-for="asset in availableAssets">
<label :class="{selected: selectedAssets[asset]}"><input type="checkbox" v-model="selectedAssets[asset]" />&nbsp;{{ asset }}</label>
html/ui/GetCopy-7e3c9678f9647d40.js → html/ui/GetCopy-2e04b7b63750e25a.js
+7 -4
View File
@@ -1,7 +1,7 @@
const GetCopy = {
props: [ 'name', 'href', 'token' ],
data() { return {showCopied: false} },
template: `<span class="notif"><div v-if="showCopied">copied!</div><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
template: `<span><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
methods: {
fetch() {
event.preventDefault()
@@ -12,7 +12,7 @@ const GetCopy = {
},
handleFetchError(e) {
console.log("failed to get value:", e)
alert('failed to get value')
this.$root.toast('failed to get value', 'error')
},
fetchAndSave() {
this.fetch().then(resp => resp.blob()).then((value) => {
@@ -23,9 +23,12 @@ const GetCopy = {
this.fetch()
.then((resp) => resp.headers.get("content-type") == "application/json" ? resp.json() : resp.text())
.then((value) => {
try {
window.navigator.clipboard.writeText(value)
this.showCopied = true
setTimeout(() => { this.showCopied = false }, 1000)
this.$root.toast('copied!', 'info')
} catch (e) {
this.$root.toast('copy failed', 'error')
}
}).catch(this.handleFetchError)
},
},
html/ui/app-e7fb26679b9aa0f2.js → html/ui/app-4f0c6935250753e9.js
+49 -13
View File
@@ -21,11 +21,17 @@ createApp({
uiHash: null,
watchingState: false,
state: null,
toasts: [],
toastId: 0,
}
},
mounted() {
this.session = JSON.parse(sessionStorage.state || "{}")
this.watchPublicState()
document.addEventListener('keydown', (e) => this.onKeydown(e))
},
unmounted() {
document.removeEventListener('keydown', (e) => this.onKeydown(e))
},
watch: {
session: {
@@ -56,13 +62,16 @@ createApp({
},
computed: {
views() {
var views = [{type: "actions", name: "admin", title: "Admin actions"}];
(this.state.Clusters||[]).forEach((c) => views.push({type: "cluster", name: c.Name, title: `Cluster ${c.Name}`}));
(this.state.Hosts ||[]).forEach((c) => views.push({type: "host", name: c.Name, title: `Host ${c.Name}`}));
return views.filter((v) => v.type != "host" || v.name.includes(this.viewFilter));
adminViews() {
return [{type: "actions", name: "admin", title: "Admin actions"}];
},
clusterViews() {
return (this.state.Clusters||[]).map((c) => ({type: "cluster", name: c.Name, title: c.Name}));
},
hostViews() {
return (this.state.Hosts||[])
.filter((h) => h.Name.includes(this.viewFilter))
.map((h) => ({type: "host", name: h.Name, title: h.Name}));
},
viewObj() {
if (this.view) {
@@ -84,9 +93,32 @@ createApp({
any(array) {
return array && array.length != 0;
},
isActive(v) {
return this.view && this.view.type == v.type && this.view.name == v.name
},
onKeydown(e) {
if ((e.ctrlKey || e.metaKey) && e.key == 'k') {
e.preventDefault()
this.$nextTick(() => {
const el = document.querySelector('.sidebar input[type="search"]')
if (el) el.focus()
})
return
}
if (e.key == 'Escape') {
this.viewFilter = ''
return
}
},
copyText(text) {
event.preventDefault()
try {
window.navigator.clipboard.writeText(text)
this.toast('copied!', 'info')
} catch (e) {
this.toast('copy failed: ' + e, 'error')
}
},
setToken() {
event.preventDefault()
@@ -177,16 +209,12 @@ createApp({
var xhr = new XMLHttpRequest()
xhr.responseType = 'json'
// TODO spinner, pending action notification, or something
xhr.onerror = () => {
// this.actionResults.splice(idx, 1, {...item, done: true, failed: true })
}
xhr.onerror = () => {}
xhr.onload = (r) => {
if (xhr.status != 200) {
this.error = xhr.response
this.toast((xhr.response && xhr.response.message) || 'request failed', 'error')
return
}
// this.actionResults.splice(idx, 1, {...item, done: true, resp: xhr.responseText})
this.error = null
if (onload) {
onload(xhr.response)
@@ -235,6 +263,14 @@ createApp({
// TODO once-shot download link
return url + '?token=' + this.session.token
},
toast(message, kind) {
const id = ++this.toastId
this.toasts.push({id, message, kind: kind || 'info'})
setTimeout(() => this.dismissToast(id), 4000)
},
dismissToast(id) {
this.toasts = this.toasts.filter(t => t.id != id)
},
watchPublicState() {
this.watchStream('publicState', '/public-state')
},
html/ui/app.css
+2 -10
View File
@@ -1,12 +1,7 @@
.view-links > span {
display: inline-block;
display: block;
white-space: nowrap;
margin-right: 1ex;
margin-bottom: 1ex;
padding: 0.5ex;
border: 1pt solid;
border-radius: 1ex;
cursor: pointer;
}
@@ -15,9 +10,6 @@
display: inline-block;
margin-right: 1ex;
margin-bottom: 1ex;
padding: 0.5ex;
border: 1px solid !important;
border-radius: 1ex;
cursor: pointer;
}
}
@@ -37,7 +29,7 @@
position:relative;
textarea {
width: 64em;
width: 100%;
}
input[type="file"] {
html/ui/index.html
+32 -27
View File
@@ -10,32 +10,27 @@
<style>@import url('/ui/style.css');@import url('/ui/app.css');</style>
<script src="/ui/jsonpatch.min-942279a1c4209cc2.js" integrity="sha384-GcPrkRS12jtrElEkbJcrZ8asvvb9s3mc+CUq9UW/8bL4L0bpkmh9M+oFnWN6qLq2"></script>
<script src="/ui/app-e7fb26679b9aa0f2.js" defer integrity="sha384-4oRQalb7IIBcqQzfDkeCj53qYOP6dLsTwqcjnm3EiBa92oNDD3chUw38W2gEC+3p" type="module"></script>
<script src="/ui/Downloads-25b2e1f4aeaaff61.js" integrity="sha384-MP2lefUuPRss5MQ11H5SzGp8Gmy+hPAdeEC79h4c/SDAp4qFGUjhxBtQL8rnP38U"></script>
<script src="/ui/GetCopy-7e3c9678f9647d40.js" integrity="sha384-LzxUXylxE/t25HyTch8y2qvKcehvP2nqCo37swIBGEKZZUzHVJVQrS5UJDWNskTA"></script>
<script src="/ui/ClusterAccess-e67af72c976d642c.js" integrity="sha384-QU0xM0hvd7tVSJ42IVfmL0u0uJbzyZBrxn1vVbOh/15Xa80JK9j9VieoACGYFjx2"></script>
<script src="/ui/ClusterCAs-d6eba07c367b6306.js" integrity="sha384-2zV1VzNHw7hUS6SNIqDzIczma3Ixp3G9u6BJI4MtGHK4rNYWeCOOu9kttsZzkPYC"></script>
<script src="/ui/Cluster-361bc6b76a062d88.js" integrity="sha384-msh65M8IktAuqPyO5c7GFLkRYTtN2wh5KN23SDNuC5m1gwPpuiEeY4qkr9g1bCi1"></script>
<script src="/ui/app-4f0c6935250753e9.js" defer integrity="sha384-SrAfGs5pnGcgL5E78t2MszNYmdkGME9yPgtPsDg61Rljw+dfiP+rabjPnrMkWDUH" type="module"></script>
<script src="/ui/Downloads-3c8cba0572aebfae.js" integrity="sha384-Pof/sPwhdqKGp7NUmYkDc0pSSyACabwLjkRRylZKHxRmiHBV3SGomPUMAWG9y7Ix"></script>
<script src="/ui/GetCopy-2e04b7b63750e25a.js" integrity="sha384-sNvTYXhjog3BkYL20RzrUWIG9VGyHNO8oEiP5oxL5f2WKmLj/03fdR79FgHfzlj+"></script>
<script src="/ui/ClusterAccess-8b4165435ba4fcac.js" integrity="sha384-C1mVnhsaxmn3Dpp1vtcBuctxxXI1Rlh+qmxicCIpNv7ukyTbB524pg0ZwhvAnfH7"></script>
<script src="/ui/ClusterCAs-4f0a381bfb0c1b88.js" integrity="sha384-QcSHKzEHNSCqyjFELXfYFAdfmIZZwJHDzPqI2prH47jHrkeomJD60rcEMLkVAO3o"></script>
<script src="/ui/Cluster-34a012ee0910827c.js" integrity="sha384-Q0sXP0WFJu4gHOI/8NMOGwpJvvFDNBR3T/vDCYxCWL2szAu4+sQuwHm81Jcad/ve"></script>
<script src="/ui/Host-61916516a854adff.js" integrity="sha384-/wh3KrC0sb4MT7ekO2U84rswxI42WSH/0jB4dbDaaGaGhX60xTEZHFsdQAf7UgTG"></script>
<body>
<div id="app">
<header>
<div id="logo">
<img src="favicon.ico" />
<span>Direktil Local Server</span>
</div>
<div class="utils">
<span id="logo"><img src="favicon.ico" /> Direktil Local Server</span>
<span class="utils">
<span id="login-hdr" v-if="session.token">
Logged in
<button class="link" @click="copyText(session.token)">&#x1F5D0;</button>
</span>
<span>server <code>{{ serverVersion || '-----' }}</code></span>
<span>ui <code>{{ uiHash || '-----' }}</code></span>
<span :class="publicState ? 'green' : 'red'">&#x1F5F2;</span>
</div>
</span>
</header>
<div class="error" v-if="error">
@@ -44,11 +39,13 @@
<div class="message">{{ error.message }}</div>
</div>
<template v-if="!publicState">
<p>Not connected.</p>
</template>
<div class="toasts"><div v-for="t in toasts" :class="'toast '+t.kind" @click="dismissToast(t.id)">{{ t.message }}</div></div>
<template v-else-if="publicState.Store.New">
<main class="content" v-if="!publicState">
<p>Not connected.</p>
</main>
<main class="content" v-else-if="publicState.Store.New">
<p>Store is new.</p>
<p>Option 1: initialize a new store</p>
<form @submit="unlockStore">
@@ -62,17 +59,17 @@
<input type="file" ref="storeUpload" />
<input type="submit" value="upload" />
</form>
</template>
</main>
<template v-else-if="!publicState.Store.Open">
<main class="content" v-else-if="!publicState.Store.Open">
<p>Store is not open.</p>
<form @submit="unlockStore">
<input type="password" name="passphrase" v-model="forms.store.pass1" required placeholder="Passphrase" />
<input type="submit" value="unlock" :disabled="!forms.store.pass1" />
</form>
</template>
</main>
<template v-else-if="!state">
<main class="content" v-else-if="!state">
<p v-if="!session.token">Not logged in.</p>
<p v-else>Invalid token</p>
@@ -80,13 +77,20 @@
<input type="password" v-model="forms.store.pass1" required placeholder="Passphrase" />
<input type="submit" value="log in"/>
</form>
</template>
</main>
<template v-else>
<div style="float:right;"><input type="search" placeholder="Filter" v-model="viewFilter"/></div>
<p class="view-links"><span v-for="v in views" @click="view = v" :class="{selected: view.type==v.type && view.name==v.name}">{{v.title}}</span></p>
<h2 v-if="view">{{view.title}}</h2>
<nav class="sidebar">
<input type="search" placeholder="Filter" v-model="viewFilter"/>
<p class="nav-section">Admin</p>
<p class="view-links"><button type="button" v-for="v in adminViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
<p class="nav-section" v-if="clusterViews.length">Clusters</p>
<p class="view-links" v-if="clusterViews.length"><button type="button" v-for="v in clusterViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
<p class="nav-section" v-if="hostViews.length">Hosts</p>
<p class="view-links" v-if="hostViews.length"><button type="button" v-for="v in hostViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
</nav>
<main class="content">
<h2 v-if="view">{{ view.type == 'cluster' ? 'Cluster ' : view.type == 'host' ? 'Host ' : '' }}{{view.title}}</h2>
<div v-if="view.type == 'cluster'" id="clusters">
<Cluster :cluster="viewObj" :token="session.token" :state="state" />
@@ -147,6 +151,7 @@
</form>
</template>
</div>
</main>
</template>
</div>
</body>
html/ui/style.css
+358 -162
View File
@@ -1,35 +1,231 @@
:root {
--bg: #eee;
--color: black;
--bevel-dark: darkgray;
--bevel-light: lightgray;
--link: blue;
--input-bg: #ddd;
--input-text: white;
--btn-bg: #eee;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: black;
--color: orange;
--bevel-dark: #402900;
--bevel-light: #805300;
--bg: #000;
--color: #ddd;
--accent: #d4a017;
--dim: #555;
--link: #31b0fa;
--input-bg: #111;
--input-text: #ddd;
--btn-bg: #222;
}
--input-bg: #1a1a1a;
--border: #333;
--hover: #222;
}
body {
background: var(--bg);
color: var(--color);
font-family: "Courier New", Courier, monospace;
font-size: 14px;
line-height: 1.5;
margin: 0;
padding: 0;
}
button[disabled] {
opacity: 0.5;
/* Layout */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#app {
display: grid;
height: 100vh;
grid-template: auto 1fr / 18em 1fr;
grid-template-areas: "h h" "s m";
}
header {
grid-area: h;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 1em;
border-bottom: 1px solid var(--border);
}
#logo > img {
vertical-align: middle;
margin-right: 0.5em;
}
header .utils > * {
margin-left: 1em;
}
.sidebar {
grid-area: s;
border-right: 1px solid var(--border);
padding: 0.5em;
overflow-y: auto;
}
.sidebar input[type="search"] {
width: 100%;
box-sizing: border-box;
margin-bottom: 0.5em;
background: var(--input-bg);
color: var(--color);
border: 1px solid var(--border);
padding: 0.3em 0.5em;
font-family: inherit;
}
.content {
grid-area: m;
padding: 1em;
overflow-y: auto;
}
/* Sidebar nav sections */
.nav-section {
margin: 0.5em 0 0.2em;
padding: 0.2em 0.5em;
color: var(--dim);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.85em;
border-bottom: 1px solid var(--border);
}
/* Sidebar nav items */
.view-links {
margin: 0;
padding: 0;
}
.sidebar:focus-within .view-links > button {
color: var(--color);
}
.view-links > button {
display: block;
width: 100%;
padding: 0.2em 0.5em;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--dim);
border: none;
border-bottom: 1px solid var(--border);
background: none;
font: inherit;
text-align: left;
border-radius: 0;
}
.view-links > button:last-child {
border-bottom: none;
}
.view-links > button:hover {
background: var(--hover);
color: var(--color);
}
.view-links > button.selected {
color: var(--accent) !important;
border-bottom-color: var(--accent);
}
/* Headings */
h2 {
color: var(--accent);
border-bottom: 1px solid var(--border);
padding-bottom: 0.3em;
margin-top: 0;
}
h3 {
color: var(--accent);
margin: 1em 0 0.5em;
}
h3::before {
content: "── ";
}
h3::after {
content: " ──";
}
h4 {
color: var(--color);
margin: 0.5em 0 0.3em;
font-weight: bold;
}
/* Details / summary (collapsible sections) */
details {
margin: 0.5em 0;
border: 1px solid var(--border);
}
details[open] {
border-color: var(--accent);
}
summary {
cursor: pointer;
padding: 0.3em 0.5em;
background: var(--hover);
color: var(--accent);
user-select: none;
}
summary:hover {
background: #2a2a2a;
}
details[open] summary {
border-bottom: 1px solid var(--border);
}
/* Tables */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid var(--border);
padding: 0.3em 0.5em;
text-align: left;
}
th {
color: var(--accent);
font-weight: bold;
}
/* Form elements */
textarea, select, input {
background: var(--input-bg);
color: var(--color);
border: 1px solid var(--border);
padding: 0.3em 0.5em;
font-family: inherit;
font-size: inherit;
box-sizing: border-box;
}
textarea:focus, select:focus, input:focus {
outline: none;
border-color: var(--accent);
}
button, input[type=button], input[type=submit], ::file-selector-button {
background: var(--input-bg);
color: var(--color);
border: 1px solid var(--border);
padding: 0.3em 0.7em;
cursor: pointer;
font-family: inherit;
font-size: inherit;
}
button:hover, input[type=button]:hover, input[type=submit]:hover {
border-color: var(--accent);
color: var(--accent);
}
button:active, input[type=button]:active, input[type=submit]:active {
background: var(--accent);
color: var(--bg);
}
button[disabled] {
opacity: 0.4;
cursor: default;
}
button[disabled]:hover {
border-color: var(--border);
color: var(--color);
}
/* Links */
a[href], a[href]:visited, button.link {
border: none;
@@ -37,140 +233,153 @@ a[href], a[href]:visited, button.link {
background: none;
cursor: pointer;
text-decoration: none;
font-family: inherit;
font-size: inherit;
}
a[href]:hover {
text-decoration: underline;
}
table {
border-collapse: collapse;
/* Radio pills */
label.radio {
display: inline-block;
margin-right: 0.5em;
margin-bottom: 0.5em;
padding: 0.3em 0.7em;
border: 1px solid var(--border);
cursor: pointer;
user-select: none;
}
th, td {
border-left: dotted 1pt;
border-right: dotted 1pt;
border-bottom: dotted 1pt;
padding: 2pt 4pt;
label.radio:has(input:checked) {
color: var(--accent);
border-color: var(--accent);
}
tr:first-child {
th, td {
border-top: dotted 1pt;
label.radio input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
label.radio:focus-within {
color: var(--accent);
border-color: var(--accent);
}
th, tr:last-child > td {
border-bottom: solid 1pt;
/* Asset checkboxes → [x] / [ ] style */
.downloads label {
display: inline-block;
margin-right: 0.5em;
margin-bottom: 0.5em;
padding: 0.2em 0;
cursor: pointer;
user-select: none;
font-family: inherit;
border-bottom: 1px solid transparent;
}
.downloads label.selected {
color: var(--accent);
border-bottom-color: var(--accent);
}
.downloads label input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.downloads label:focus-within {
color: var(--accent);
border-bottom-color: var(--accent);
}
.downloads label::before {
content: "[ ] ";
color: var(--dim);
}
.downloads label.selected::before {
content: "[x] ";
color: var(--accent);
}
/* Toast notifications */
.toasts {
position: fixed;
bottom: 1em;
right: 1em;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 0.3em;
}
.toast {
background: #1a1a1a;
border: 1px solid var(--border);
padding: 0.5em 1em;
max-width: 30em;
animation: fadein 0.2s;
font-family: inherit;
opacity: 1;
}
.toast.info {
border-color: var(--accent);
color: var(--accent);
}
.toast.error {
background: #100;
border-color: #c00;
color: #c00;
}
@keyframes fadein {
from { opacity: 0; transform: translateY(0.5em); }
to { opacity: 1; transform: translateY(0); }
}
/* Terminal output block */
.term {
background: #000;
border: 1px solid var(--border);
padding: 0.5em;
word-break: break-all;
font-family: inherit;
white-space: pre-wrap;
}
.term a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--link);
}
/* Misc */
.green { color: #0a0; }
.red { color: #c00; }
.copy { font-size: small; }
.links > * { margin-left: 1ex; }
.links > *:first-child { margin-left: 0; }
.flat > * { margin-left: 1ex; }
.flat > *:first-child { margin-left: 0; }
.green { color: green; }
.red { color: red; }
@media (prefers-color-scheme: dark) {
.red { color: #c00; }
}
textarea, select, input {
background: var(--input-bg);
color: var(--input-text);
border: solid 1pt;
border-color: var(--bevel-light);
border-top-color: var(--bevel-dark);
border-left-color: var(--bevel-dark);
margin: 1pt;
&:focus {
outline: solid 1pt var(--color);
}
}
button, input[type=button], input[type=submit], ::file-selector-button {
background: var(--btn-bg);
color: var(--color);
border: solid 2pt;
border-color: var(--bevel-dark);
border-top-color: var(--bevel-light);
border-left-color: var(--bevel-light);
&:hover {
background: var(--bevel-dark);
}
&:active {
background: var(--bevel-dark);
border-color: var(--bevel-light);
}
}
header {
display: flex;
align-items: center;
border-bottom: 2pt solid;
margin: 0 0 1em 0;
padding: 1ex;
justify-content: space-between;
}
#logo > img {
vertical-align: middle;
}
header .utils > * {
margin-left: 1ex;
}
.error {
display: flex;
position: relative;
background: rgba(255,0,0,0.2);
border: 1pt solid red;
background: rgba(200,0,0,0.15);
border: 1px solid #c00;
padding: 0.5em;
margin: 0.5em 0;
justify-content: space-between;
align-items: center;
}
.error .btn-close,
.error .code {
.error .btn-close {
background: #600;
color: white;
font-weight: bold;
border: none;
align-self: stretch;
padding: 1ex 1em;
}
.error .code {
order: 1;
display: flex;
align-items: center;
text-align: center;
}
.error .message {
order: 2;
padding: 1ex 2em;
}
.error .btn-close {
order: 3;
}
.sheets {
display: flex;
align-items: stretch;
}
.sheets > div {
margin: 0 1ex;
border: 1pt solid;
border-radius: 6pt;
}
.sheets .title {
text-align: center;
font-weight: bold;
font-size: large;
padding: 2pt 6pt;
background: rgba(127,127,127,0.5);
}
.sheets .section {
padding: 2pt 6pt 2pt 6pt;
font-weight: bold;
border-top: 1px dotted;
}
.sheets section {
margin: 2pt 6pt 6pt 6pt;
}
.sheets > *:last-child > table:last-child > tr:last-child > td {
border-bottom: none;
padding: 0.3em 0.7em;
cursor: pointer;
}
.notif {
@@ -180,34 +389,21 @@ header .utils > * {
.notif > div:first-child {
position: absolute;
min-width: 100%; height: 100%;
background: white;
opacity: 75%;
background: var(--bg);
opacity: 85%;
text-align: center;
}
.links > * { margin-left: 1ex; }
.links > *:first-child { margin-left: 0; }
@media (prefers-color-scheme: dark) {
.notif > div:first-child {
background: black;
.text-and-file {
position: relative;
display: block;
}
.text-and-file textarea {
width: 100%;
box-sizing: border-box;
}
.copy { font-size: small; }
label.radio {
display: inline-block;
margin-right: 1ex;
margin-bottom: 1ex;
padding: 0.5ex;
border: 1pt solid;
border-radius: 1ex;
cursor: pointer;
}
label.radio:has(input:checked) {
color: var(--link);
}
label.radio input {
display: none;
.text-and-file input[type="file"] {
position: absolute;
bottom: 0;
right: 0;
}
ui/app.css
+2 -10
View File
@@ -1,12 +1,7 @@
.view-links > span {
display: inline-block;
display: block;
white-space: nowrap;
margin-right: 1ex;
margin-bottom: 1ex;
padding: 0.5ex;
border: 1pt solid;
border-radius: 1ex;
cursor: pointer;
}
@@ -15,9 +10,6 @@
display: inline-block;
margin-right: 1ex;
margin-bottom: 1ex;
padding: 0.5ex;
border: 1px solid !important;
border-radius: 1ex;
cursor: pointer;
}
}
@@ -37,7 +29,7 @@
position:relative;
textarea {
width: 64em;
width: 100%;
}
input[type="file"] {
ui/index.html
+26 -21
View File
@@ -21,21 +21,16 @@
<div id="app">
<header>
<div id="logo">
<img src="favicon.ico" />
<span>Direktil Local Server</span>
</div>
<div class="utils">
<span id="logo"><img src="favicon.ico" /> Direktil Local Server</span>
<span class="utils">
<span id="login-hdr" v-if="session.token">
Logged in
<button class="link" @click="copyText(session.token)">&#x1F5D0;</button>
</span>
<span>server <code>{{ serverVersion || '-----' }}</code></span>
<span>ui <code>{{ uiHash || '-----' }}</code></span>
<span :class="publicState ? 'green' : 'red'">&#x1F5F2;</span>
</div>
</span>
</header>
<div class="error" v-if="error">
@@ -44,11 +39,13 @@
<div class="message">{{ error.message }}</div>
</div>
<template v-if="!publicState">
<p>Not connected.</p>
</template>
<div class="toasts"><div v-for="t in toasts" :class="'toast '+t.kind" @click="dismissToast(t.id)">{{ t.message }}</div></div>
<template v-else-if="publicState.Store.New">
<main class="content" v-if="!publicState">
<p>Not connected.</p>
</main>
<main class="content" v-else-if="publicState.Store.New">
<p>Store is new.</p>
<p>Option 1: initialize a new store</p>
<form @submit="unlockStore">
@@ -62,17 +59,17 @@
<input type="file" ref="storeUpload" />
<input type="submit" value="upload" />
</form>
</template>
</main>
<template v-else-if="!publicState.Store.Open">
<main class="content" v-else-if="!publicState.Store.Open">
<p>Store is not open.</p>
<form @submit="unlockStore">
<input type="password" name="passphrase" v-model="forms.store.pass1" required placeholder="Passphrase" />
<input type="submit" value="unlock" :disabled="!forms.store.pass1" />
</form>
</template>
</main>
<template v-else-if="!state">
<main class="content" v-else-if="!state">
<p v-if="!session.token">Not logged in.</p>
<p v-else>Invalid token</p>
@@ -80,13 +77,20 @@
<input type="password" v-model="forms.store.pass1" required placeholder="Passphrase" />
<input type="submit" value="log in"/>
</form>
</template>
</main>
<template v-else>
<div style="float:right;"><input type="search" placeholder="Filter" v-model="viewFilter"/></div>
<p class="view-links"><span v-for="v in views" @click="view = v" :class="{selected: view.type==v.type && view.name==v.name}">{{v.title}}</span></p>
<h2 v-if="view">{{view.title}}</h2>
<nav class="sidebar">
<input type="search" placeholder="Filter" v-model="viewFilter"/>
<p class="nav-section">Admin</p>
<p class="view-links"><button type="button" v-for="v in adminViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
<p class="nav-section" v-if="clusterViews.length">Clusters</p>
<p class="view-links" v-if="clusterViews.length"><button type="button" v-for="v in clusterViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
<p class="nav-section" v-if="hostViews.length">Hosts</p>
<p class="view-links" v-if="hostViews.length"><button type="button" v-for="v in hostViews" @click="view = v" :class="{selected: isActive(v)}">{{v.title}}</button></p>
</nav>
<main class="content">
<h2 v-if="view">{{ view.type == 'cluster' ? 'Cluster ' : view.type == 'host' ? 'Host ' : '' }}{{view.title}}</h2>
<div v-if="view.type == 'cluster'" id="clusters">
<Cluster :cluster="viewObj" :token="session.token" :state="state" />
@@ -147,6 +151,7 @@
</form>
</template>
</div>
</main>
</template>
</div>
</body>
ui/js/Cluster.js
+9 -1
View File
@@ -2,11 +2,18 @@ const Cluster = {
components: { ClusterAccess, ClusterCAs, GetCopy },
props: [ 'cluster', 'token', 'state' ],
template: `
<details open>
<summary>Access</summary>
<ClusterAccess :cluster="cluster" :token="token" :state="state" />
</details>
<details open>
<summary>CAs</summary>
<ClusterCAs :cluster="cluster" :token="token" />
</details>
<h3>Secrets</h3>
<details open>
<summary>Secrets</summary>
<h4>Tokens</h4>
<section class="links">
<GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
@@ -15,5 +22,6 @@ const Cluster = {
<section class="links">
<GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
</section>
</details>
`
}
ui/js/ClusterAccess.js
+33 -20
View File
@@ -17,6 +17,8 @@ const ClusterAccess = {
kubeUserCert: null,
downloadSet: null,
selectedAssets: {},
loading: false,
msg: null,
};
},
computed: {
@@ -48,36 +50,39 @@ const ClusterAccess = {
methods: {
sshCASign() {
event.preventDefault();
this.loading = true; this.msg = null;
fetch(`/clusters/${this.cluster.Name}/ssh/user-ca/sign`, {
method: 'POST',
body: JSON.stringify({ ...this.sshSignReq, Validity: this.signReqValidity }),
headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
}).then((resp) => {
if (resp.ok) {
resp.blob().then((cert) => { this.sshUserCert = URL.createObjectURL(cert) })
resp.blob().then((cert) => { this.sshUserCert = URL.createObjectURL(cert); this.loading = false })
} else {
resp.json().then((resp) => alert('failed to sign: '+resp.message))
resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
}
})
.catch((e) => { alert('failed to sign: '+e); })
.catch((e) => { this.msg = 'failed to sign: '+e; this.loading = false })
},
kubeCASign() {
event.preventDefault();
this.loading = true; this.msg = null;
fetch(`/clusters/${this.cluster.Name}/kube/sign`, {
method: 'POST',
body: JSON.stringify({ ...this.kubeSignReq, Validity: this.signReqValidity }),
headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
}).then((resp) => {
if (resp.ok) {
resp.blob().then((cert) => { this.kubeUserCert = URL.createObjectURL(cert) })
resp.blob().then((cert) => { this.kubeUserCert = URL.createObjectURL(cert); this.loading = false })
} else {
resp.json().then((resp) => alert('failed to sign: '+resp.message))
resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
}
})
.catch((e) => { alert('failed to sign: '+e); })
.catch((e) => { this.msg = 'failed to sign: '+e; this.loading = false })
},
generateDownloadSet() {
event.preventDefault()
this.loading = true; this.msg = null;
const items = [{
Kind: "host",
@@ -91,18 +96,18 @@ const ClusterAccess = {
headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
}).then((resp) => {
if (resp.ok) {
resp.json().then((set) => { this.downloadSet = set })
resp.json().then((set) => { this.downloadSet = set; this.loading = false })
} else {
resp.json().then((resp) => alert('failed to generate: '+resp.message))
resp.json().then((resp) => { this.msg = 'failed to generate: '+resp.message; this.loading = false })
}
}).catch((e) => { alert('failed to generate: '+e) })
}).catch((e) => { this.msg = 'failed to generate: '+e; this.loading = false })
},
readFile(e, onload) {
const file = e.target.files[0];
if (!file) { return; }
const reader = new FileReader();
reader.onload = () => { onload(reader.result) };
reader.onerror = () => { alert("error reading file"); };
reader.onerror = () => { this.msg = "error reading file" };
reader.readAsText(file);
},
loadPubKey(e) {
@@ -110,6 +115,14 @@ const ClusterAccess = {
this.sshSignReq.PubKey = v;
});
},
copyDownloadSetUrl() {
try {
navigator.clipboard.writeText(window.location.origin+'/public/download-set?set='+this.downloadSet)
this.$root.toast('copied!', 'info')
} catch (e) {
this.$root.toast('copy failed', 'error')
}
},
loadCSR(e) {
this.readFile(e, (v) => {
this.kubeSignReq.CSR = v;
@@ -117,8 +130,6 @@ const ClusterAccess = {
},
},
template: `
<h3>Access</h3>
<p>Grant access to:
<label class="radio"><input type="radio" v-model="accessType" value="ssh" /> SSH</label>
<label class="radio"><input type="radio" v-model="accessType" value="kube" /> Kubernetes</label>
@@ -127,6 +138,8 @@ const ClusterAccess = {
<p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
<p class="error" v-if="msg">{{ msg }} <button class="btn-close" @click="msg=null">&times;</button></p>
<div v-if="accessType == 'ssh'">
<h4>Grant SSH access</h4>
<p>User: <input type="text" v-model="sshSignReq.Principal"/></p>
@@ -134,7 +147,7 @@ const ClusterAccess = {
<span class="text-and-file"><textarea v-model="sshSignReq.PubKey" style="height:3lh"></textarea>
<input type="file" accept=".pub" @change="loadPubKey" /></span>
</p>
<p><button @click="sshCASign">Sign SSH access</button>
<p><button :disabled="loading" @click="sshCASign">{{ loading ? 'signing...' : 'Sign SSH access' }}</button>
<template v-if="sshUserCert">
=&gt; <a :href="sshUserCert" download="ssh-cert.pub">Get certificate</a>
</template>
@@ -149,9 +162,9 @@ const ClusterAccess = {
<span class="text-and-file"><textarea v-model="kubeSignReq.CSR" style="height:7lh;"></textarea>
<input type="file" accept=".csr" @change="loadCSR" /></span>
</p>
<p><button @click="kubeCASign">Sign Kubernetes API access</button>
<p><button :disabled="loading" @click="kubeCASign">{{ loading ? 'signing...' : 'Sign Kubernetes API access' }}</button>
<template v-if="kubeUserCert">
=&gt; <a :href="kubeUserCert" download="kube-cert.pub">Get certificate</a>
=&gt; <a :href="kubeUserCert" download="tls.crt">Get certificate</a>
</template>
</p>
</div>
@@ -166,12 +179,12 @@ const ClusterAccess = {
{{" "}}
</template>
</p>
<p><button :disabled="selectedAssetList.length==0" @click="generateDownloadSet">Generate download set</button></p>
<p v-if="downloadSet" style="word-break:break-all">
<a :href="'/public/download-set?set='+downloadSet" target="_blank">Open download set page</a>
<p><button :disabled="loading || selectedAssetList.length==0" @click="generateDownloadSet">{{ loading ? 'generating...' : 'Generate download set' }}</button></p>
<div v-if="downloadSet" class="term">
<a :href="'/public/download-set?set='+downloadSet" target="_blank">/public/download-set?set={{ downloadSet }}</a>
<br/>
<button @click="navigator.clipboard.writeText(window.location.origin+'/public/download-set?set='+downloadSet)">Copy URL</button>
</p>
<button @click="copyDownloadSetUrl">Copy URL</button>
</div>
</div>
`
}
ui/js/ClusterCAs.js
-1
View File
@@ -2,7 +2,6 @@ const ClusterCAs = {
components: { GetCopy },
props: [ 'cluster', 'token' ],
template: `
<h3>CAs</h3>
<table><tr><th>Name</th><th>Certificate</th><th>Signed certificates</th></tr>
<tr v-for="ca in cluster.CAs">
<td>{{ ca.Name }}</td>
ui/js/ClusterDownloadSet.js
-43
View File
@@ -1,43 +0,0 @@
const ClusterDownloadSet = {
props: [ 'cluster', 'token', 'state' ],
data() {
return {
signReqValidity: "1d",
downloadSet: null,
};
},
methods: {
generateDownloadSet() {
event.preventDefault()
const hosts = (this.state.Hosts||[]).filter(h => h.Cluster == this.cluster.Name)
const items = hosts.map(h => ({
Kind: "host",
Name: h.Name,
Assets: ["kernel", "initrd", "uki", "bootstrap.tar", "boot.img.gz", "boot.img", "boot.qcow2", "boot.iso", "boot.tar", "bootstrap-config", "config", "config.json", "ipxe"],
}))
fetch('/sign-download-set', {
method: 'POST',
body: JSON.stringify({Expiry: this.signReqValidity, Items: items}),
headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
}).then((resp) => {
if (resp.ok) {
resp.json().then((set) => { this.downloadSet = set })
} else {
resp.json().then((resp) => alert('failed to generate: '+resp.message))
}
}).catch((e) => { alert('failed to generate: '+e) })
},
},
template: `
<h3>Download set</h3>
<p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
<p><button @click="generateDownloadSet">Generate download set ({{ (state.Hosts||[]).filter(h => h.Cluster == cluster.Name).length }} hosts)</button></p>
<p v-if="downloadSet" style="word-break:break-all">
<a :href="'/public/download-set?set='+downloadSet" target="_blank">Open download set page</a>
<br/>
<button @click="navigator.clipboard.writeText(window.location.origin+'/public/download-set?set='+downloadSet)">Copy URL</button>
</p>
`
}
ui/js/Downloads.js
+3 -2
View File
@@ -1,7 +1,7 @@
const Downloads = {
props: [ 'kind', 'name', 'token', 'state' ],
data() {
return { createDisabled: false, selectedAssets: {} }
return { createDisabled: false, selectedAssets: {}, msg: null }
},
computed: {
availableAssets() {
@@ -50,11 +50,12 @@ const Downloads = {
headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
}).then((resp) => resp.json())
.then((token) => { this.selectedAssets = {}; this.createDisabled = false })
.catch((e) => { alert('failed to create link'); this.createDisabled = false })
.catch((e) => { this.msg = 'failed to create link'; this.createDisabled = false })
},
},
template: `
<h4>Available assets</h4>
<p class="error" v-if="msg">{{ msg }} <button class="btn-close" @click="msg=null">&times;</button></p>
<p class="downloads">
<template v-for="asset in availableAssets">
<label :class="{selected: selectedAssets[asset]}"><input type="checkbox" v-model="selectedAssets[asset]" />&nbsp;{{ asset }}</label>
ui/js/GetCopy.js
+7 -4
View File
@@ -1,7 +1,7 @@
const GetCopy = {
props: [ 'name', 'href', 'token' ],
data() { return {showCopied: false} },
template: `<span class="notif"><div v-if="showCopied">copied!</div><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
template: `<span><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
methods: {
fetch() {
event.preventDefault()
@@ -12,7 +12,7 @@ const GetCopy = {
},
handleFetchError(e) {
console.log("failed to get value:", e)
alert('failed to get value')
this.$root.toast('failed to get value', 'error')
},
fetchAndSave() {
this.fetch().then(resp => resp.blob()).then((value) => {
@@ -23,9 +23,12 @@ const GetCopy = {
this.fetch()
.then((resp) => resp.headers.get("content-type") == "application/json" ? resp.json() : resp.text())
.then((value) => {
try {
window.navigator.clipboard.writeText(value)
this.showCopied = true
setTimeout(() => { this.showCopied = false }, 1000)
this.$root.toast('copied!', 'info')
} catch (e) {
this.$root.toast('copy failed', 'error')
}
}).catch(this.handleFetchError)
},
},
ui/js/app.js
+49 -13
View File
@@ -21,11 +21,17 @@ createApp({
uiHash: null,
watchingState: false,
state: null,
toasts: [],
toastId: 0,
}
},
mounted() {
this.session = JSON.parse(sessionStorage.state || "{}")
this.watchPublicState()
document.addEventListener('keydown', (e) => this.onKeydown(e))
},
unmounted() {
document.removeEventListener('keydown', (e) => this.onKeydown(e))
},
watch: {
session: {
@@ -56,13 +62,16 @@ createApp({
},
computed: {
views() {
var views = [{type: "actions", name: "admin", title: "Admin actions"}];
(this.state.Clusters||[]).forEach((c) => views.push({type: "cluster", name: c.Name, title: `Cluster ${c.Name}`}));
(this.state.Hosts ||[]).forEach((c) => views.push({type: "host", name: c.Name, title: `Host ${c.Name}`}));
return views.filter((v) => v.type != "host" || v.name.includes(this.viewFilter));
adminViews() {
return [{type: "actions", name: "admin", title: "Admin actions"}];
},
clusterViews() {
return (this.state.Clusters||[]).map((c) => ({type: "cluster", name: c.Name, title: c.Name}));
},
hostViews() {
return (this.state.Hosts||[])
.filter((h) => h.Name.includes(this.viewFilter))
.map((h) => ({type: "host", name: h.Name, title: h.Name}));
},
viewObj() {
if (this.view) {
@@ -84,9 +93,32 @@ createApp({
any(array) {
return array && array.length != 0;
},
isActive(v) {
return this.view && this.view.type == v.type && this.view.name == v.name
},
onKeydown(e) {
if ((e.ctrlKey || e.metaKey) && e.key == 'k') {
e.preventDefault()
this.$nextTick(() => {
const el = document.querySelector('.sidebar input[type="search"]')
if (el) el.focus()
})
return
}
if (e.key == 'Escape') {
this.viewFilter = ''
return
}
},
copyText(text) {
event.preventDefault()
try {
window.navigator.clipboard.writeText(text)
this.toast('copied!', 'info')
} catch (e) {
this.toast('copy failed: ' + e, 'error')
}
},
setToken() {
event.preventDefault()
@@ -177,16 +209,12 @@ createApp({
var xhr = new XMLHttpRequest()
xhr.responseType = 'json'
// TODO spinner, pending action notification, or something
xhr.onerror = () => {
// this.actionResults.splice(idx, 1, {...item, done: true, failed: true })
}
xhr.onerror = () => {}
xhr.onload = (r) => {
if (xhr.status != 200) {
this.error = xhr.response
this.toast((xhr.response && xhr.response.message) || 'request failed', 'error')
return
}
// this.actionResults.splice(idx, 1, {...item, done: true, resp: xhr.responseText})
this.error = null
if (onload) {
onload(xhr.response)
@@ -235,6 +263,14 @@ createApp({
// TODO once-shot download link
return url + '?token=' + this.session.token
},
toast(message, kind) {
const id = ++this.toastId
this.toasts.push({id, message, kind: kind || 'info'})
setTimeout(() => this.dismissToast(id), 4000)
},
dismissToast(id) {
this.toasts = this.toasts.filter(t => t.id != id)
},
watchPublicState() {
this.watchStream('publicState', '/public-state')
},
ui/style.css
+358 -162
View File
@@ -1,35 +1,231 @@
:root {
--bg: #eee;
--color: black;
--bevel-dark: darkgray;
--bevel-light: lightgray;
--link: blue;
--input-bg: #ddd;
--input-text: white;
--btn-bg: #eee;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: black;
--color: orange;
--bevel-dark: #402900;
--bevel-light: #805300;
--bg: #000;
--color: #ddd;
--accent: #d4a017;
--dim: #555;
--link: #31b0fa;
--input-bg: #111;
--input-text: #ddd;
--btn-bg: #222;
}
--input-bg: #1a1a1a;
--border: #333;
--hover: #222;
}
body {
background: var(--bg);
color: var(--color);
font-family: "Courier New", Courier, monospace;
font-size: 14px;
line-height: 1.5;
margin: 0;
padding: 0;
}
button[disabled] {
opacity: 0.5;
/* Layout */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#app {
display: grid;
height: 100vh;
grid-template: auto 1fr / 18em 1fr;
grid-template-areas: "h h" "s m";
}
header {
grid-area: h;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em 1em;
border-bottom: 1px solid var(--border);
}
#logo > img {
vertical-align: middle;
margin-right: 0.5em;
}
header .utils > * {
margin-left: 1em;
}
.sidebar {
grid-area: s;
border-right: 1px solid var(--border);
padding: 0.5em;
overflow-y: auto;
}
.sidebar input[type="search"] {
width: 100%;
box-sizing: border-box;
margin-bottom: 0.5em;
background: var(--input-bg);
color: var(--color);
border: 1px solid var(--border);
padding: 0.3em 0.5em;
font-family: inherit;
}
.content {
grid-area: m;
padding: 1em;
overflow-y: auto;
}
/* Sidebar nav sections */
.nav-section {
margin: 0.5em 0 0.2em;
padding: 0.2em 0.5em;
color: var(--dim);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.85em;
border-bottom: 1px solid var(--border);
}
/* Sidebar nav items */
.view-links {
margin: 0;
padding: 0;
}
.sidebar:focus-within .view-links > button {
color: var(--color);
}
.view-links > button {
display: block;
width: 100%;
padding: 0.2em 0.5em;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--dim);
border: none;
border-bottom: 1px solid var(--border);
background: none;
font: inherit;
text-align: left;
border-radius: 0;
}
.view-links > button:last-child {
border-bottom: none;
}
.view-links > button:hover {
background: var(--hover);
color: var(--color);
}
.view-links > button.selected {
color: var(--accent) !important;
border-bottom-color: var(--accent);
}
/* Headings */
h2 {
color: var(--accent);
border-bottom: 1px solid var(--border);
padding-bottom: 0.3em;
margin-top: 0;
}
h3 {
color: var(--accent);
margin: 1em 0 0.5em;
}
h3::before {
content: "── ";
}
h3::after {
content: " ──";
}
h4 {
color: var(--color);
margin: 0.5em 0 0.3em;
font-weight: bold;
}
/* Details / summary (collapsible sections) */
details {
margin: 0.5em 0;
border: 1px solid var(--border);
}
details[open] {
border-color: var(--accent);
}
summary {
cursor: pointer;
padding: 0.3em 0.5em;
background: var(--hover);
color: var(--accent);
user-select: none;
}
summary:hover {
background: #2a2a2a;
}
details[open] summary {
border-bottom: 1px solid var(--border);
}
/* Tables */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid var(--border);
padding: 0.3em 0.5em;
text-align: left;
}
th {
color: var(--accent);
font-weight: bold;
}
/* Form elements */
textarea, select, input {
background: var(--input-bg);
color: var(--color);
border: 1px solid var(--border);
padding: 0.3em 0.5em;
font-family: inherit;
font-size: inherit;
box-sizing: border-box;
}
textarea:focus, select:focus, input:focus {
outline: none;
border-color: var(--accent);
}
button, input[type=button], input[type=submit], ::file-selector-button {
background: var(--input-bg);
color: var(--color);
border: 1px solid var(--border);
padding: 0.3em 0.7em;
cursor: pointer;
font-family: inherit;
font-size: inherit;
}
button:hover, input[type=button]:hover, input[type=submit]:hover {
border-color: var(--accent);
color: var(--accent);
}
button:active, input[type=button]:active, input[type=submit]:active {
background: var(--accent);
color: var(--bg);
}
button[disabled] {
opacity: 0.4;
cursor: default;
}
button[disabled]:hover {
border-color: var(--border);
color: var(--color);
}
/* Links */
a[href], a[href]:visited, button.link {
border: none;
@@ -37,140 +233,153 @@ a[href], a[href]:visited, button.link {
background: none;
cursor: pointer;
text-decoration: none;
font-family: inherit;
font-size: inherit;
}
a[href]:hover {
text-decoration: underline;
}
table {
border-collapse: collapse;
/* Radio pills */
label.radio {
display: inline-block;
margin-right: 0.5em;
margin-bottom: 0.5em;
padding: 0.3em 0.7em;
border: 1px solid var(--border);
cursor: pointer;
user-select: none;
}
th, td {
border-left: dotted 1pt;
border-right: dotted 1pt;
border-bottom: dotted 1pt;
padding: 2pt 4pt;
label.radio:has(input:checked) {
color: var(--accent);
border-color: var(--accent);
}
tr:first-child {
th, td {
border-top: dotted 1pt;
label.radio input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
label.radio:focus-within {
color: var(--accent);
border-color: var(--accent);
}
th, tr:last-child > td {
border-bottom: solid 1pt;
/* Asset checkboxes → [x] / [ ] style */
.downloads label {
display: inline-block;
margin-right: 0.5em;
margin-bottom: 0.5em;
padding: 0.2em 0;
cursor: pointer;
user-select: none;
font-family: inherit;
border-bottom: 1px solid transparent;
}
.downloads label.selected {
color: var(--accent);
border-bottom-color: var(--accent);
}
.downloads label input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.downloads label:focus-within {
color: var(--accent);
border-bottom-color: var(--accent);
}
.downloads label::before {
content: "[ ] ";
color: var(--dim);
}
.downloads label.selected::before {
content: "[x] ";
color: var(--accent);
}
/* Toast notifications */
.toasts {
position: fixed;
bottom: 1em;
right: 1em;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 0.3em;
}
.toast {
background: #1a1a1a;
border: 1px solid var(--border);
padding: 0.5em 1em;
max-width: 30em;
animation: fadein 0.2s;
font-family: inherit;
opacity: 1;
}
.toast.info {
border-color: var(--accent);
color: var(--accent);
}
.toast.error {
background: #100;
border-color: #c00;
color: #c00;
}
@keyframes fadein {
from { opacity: 0; transform: translateY(0.5em); }
to { opacity: 1; transform: translateY(0); }
}
/* Terminal output block */
.term {
background: #000;
border: 1px solid var(--border);
padding: 0.5em;
word-break: break-all;
font-family: inherit;
white-space: pre-wrap;
}
.term a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--link);
}
/* Misc */
.green { color: #0a0; }
.red { color: #c00; }
.copy { font-size: small; }
.links > * { margin-left: 1ex; }
.links > *:first-child { margin-left: 0; }
.flat > * { margin-left: 1ex; }
.flat > *:first-child { margin-left: 0; }
.green { color: green; }
.red { color: red; }
@media (prefers-color-scheme: dark) {
.red { color: #c00; }
}
textarea, select, input {
background: var(--input-bg);
color: var(--input-text);
border: solid 1pt;
border-color: var(--bevel-light);
border-top-color: var(--bevel-dark);
border-left-color: var(--bevel-dark);
margin: 1pt;
&:focus {
outline: solid 1pt var(--color);
}
}
button, input[type=button], input[type=submit], ::file-selector-button {
background: var(--btn-bg);
color: var(--color);
border: solid 2pt;
border-color: var(--bevel-dark);
border-top-color: var(--bevel-light);
border-left-color: var(--bevel-light);
&:hover {
background: var(--bevel-dark);
}
&:active {
background: var(--bevel-dark);
border-color: var(--bevel-light);
}
}
header {
display: flex;
align-items: center;
border-bottom: 2pt solid;
margin: 0 0 1em 0;
padding: 1ex;
justify-content: space-between;
}
#logo > img {
vertical-align: middle;
}
header .utils > * {
margin-left: 1ex;
}
.error {
display: flex;
position: relative;
background: rgba(255,0,0,0.2);
border: 1pt solid red;
background: rgba(200,0,0,0.15);
border: 1px solid #c00;
padding: 0.5em;
margin: 0.5em 0;
justify-content: space-between;
align-items: center;
}
.error .btn-close,
.error .code {
.error .btn-close {
background: #600;
color: white;
font-weight: bold;
border: none;
align-self: stretch;
padding: 1ex 1em;
}
.error .code {
order: 1;
display: flex;
align-items: center;
text-align: center;
}
.error .message {
order: 2;
padding: 1ex 2em;
}
.error .btn-close {
order: 3;
}
.sheets {
display: flex;
align-items: stretch;
}
.sheets > div {
margin: 0 1ex;
border: 1pt solid;
border-radius: 6pt;
}
.sheets .title {
text-align: center;
font-weight: bold;
font-size: large;
padding: 2pt 6pt;
background: rgba(127,127,127,0.5);
}
.sheets .section {
padding: 2pt 6pt 2pt 6pt;
font-weight: bold;
border-top: 1px dotted;
}
.sheets section {
margin: 2pt 6pt 6pt 6pt;
}
.sheets > *:last-child > table:last-child > tr:last-child > td {
border-bottom: none;
padding: 0.3em 0.7em;
cursor: pointer;
}
.notif {
@@ -180,34 +389,21 @@ header .utils > * {
.notif > div:first-child {
position: absolute;
min-width: 100%; height: 100%;
background: white;
opacity: 75%;
background: var(--bg);
opacity: 85%;
text-align: center;
}
.links > * { margin-left: 1ex; }
.links > *:first-child { margin-left: 0; }
@media (prefers-color-scheme: dark) {
.notif > div:first-child {
background: black;
.text-and-file {
position: relative;
display: block;
}
.text-and-file textarea {
width: 100%;
box-sizing: border-box;
}
.copy { font-size: small; }
label.radio {
display: inline-block;
margin-right: 1ex;
margin-bottom: 1ex;
padding: 0.5ex;
border: 1pt solid;
border-radius: 1ex;
cursor: pointer;
}
label.radio:has(input:checked) {
color: var(--link);
}
label.radio input {
display: none;
.text-and-file input[type="file"] {
position: absolute;
bottom: 0;
right: 0;
}