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

rework ui

Browse Source
This commit is contained in:
Mikaël Cluseau
2025-06-29 00:12:12 +02:00
parent af41df6ab4
commit 85b9a45856
9 changed files with 247 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
html/ui/js/Cluster.js
View File

@ -5,22 +5,43 @@ import GetCopy from './GetCopy.js';
export default {
components: { Downloads, GetCopy },
props: [ 'cluster', 'token', 'state' ],
data() {
return {
sshSignReq: {
PubKey: "",
Principal: "root",
Validity: "+1d",
},
sshUserCert: null,
};
},
methods: {
sshCASign() {
event.preventDefault();
fetch(`/clusters/${this.cluster.Name}/ssh/user-ca/sign`, {
method: 'POST',
body: JSON.stringify(this.sshSignReq),
headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
}).then((resp) => resp.blob())
.then((cert) => { this.sshUserCert = URL.createObjectURL(cert) })
.catch((e) => { alert('failed to sign: '+e); })
},
},
template: `
<div class="cluster">
<div class="title">Cluster {{ cluster.Name }}</div>
<div class="section">Tokens</div>
<h3>Tokens</h3>
<section class="links">
<GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
</section>
<div class="section">Passwords</div>
<h3>Passwords</h3>
<section class="links">
<GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
</section>
<div class="section">Downloads</div>
<section class="downloads">
<Downloads :token="token" :state="state" kind="cluster" :name="cluster.Name" />
</section>
<div class="section">CAs</div>
<h3>Downloads</h3>
<Downloads :token="token" :state="state" kind="cluster" :name="cluster.Name" />
<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>
@ -30,6 +51,18 @@ export default {
<GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
</template></td>
</tr></table>
</div>
<h3>SSH</h3>
<form @submit="sshCASign()" action="">
<p>User public key (OpenSSH format):<br/>
<textarea v-model="sshSignReq.PubKey"></textarea>
</p>
<p>Principal: <input type="text" v-model="sshSignReq.Principal"/></p>
<p>Validity: <input type="text" v-model="sshSignReq.Validity"/></p>
<input type="submit" value="Sign key" />
</form>
<p v-if="sshUserCert">
<a :href="sshUserCert" download="ssh-cert.pub">Get user SSH certificate</a>
</p>
`
}

31
html/ui/js/Downloads.js
View File

@ -13,15 +13,15 @@ export default {
"initrd",
"bootstrap.tar",
"boot.img.lz4",
"boot.iso",
"config",
"bootstrap-config",
"boot.tar",
"boot-efi.tar",
"boot.img.gz",
"boot.img",
"boot.qcow2",
"boot.vmdk",
"boot.img",
"boot.iso",
"boot.tar",
"boot-efi.tar",
"config",
"bootstrap-config",
"ipxe",
],
}[this.kind]
@ -56,11 +56,18 @@ export default {
.catch((e) => { alert('failed to create link'); this.createDisabled = false })
},
},
template: `<div class="downloads">
<div class="options">
<span v-for="asset in availableAssets"><label><input type="checkbox" v-model="selectedAssets[asset]" />&nbsp;{{ asset }}</label></span>
</div>
<button :disabled="createDisabled || assets.length==0" @click="createToken">+</button>
<div><a v-for="d in downloads" target="_blank" :href="d.url">{{ d.name }}</a></div>
template: `
<h4>Available assets</h4>
<p class="downloads">
<template v-for="asset in availableAssets">
<label :class="{selected: selectedAssets[asset]}"><input type="checkbox" v-model="selectedAssets[asset]" />&nbsp;{{ asset }}</label>
{{" "}}
</template>
</p>
<button :disabled="createDisabled || assets.length==0" @click="createToken">Create links</button>
<template v-if="downloads.length">
<h4>Active links</h4>
<p class="download-links"><template v-for="d in downloads"><a :href="d.url" download>{{ d.name }}</a>{{" "}}</template></p>
</template>
</div>`
}

21
html/ui/js/Host.js
View File

@ -5,18 +5,13 @@ export default {
components: { Downloads },
props: [ 'host', 'token', 'state' ],
template: `
<div class="host">
<div class="title">Host {{ host.Name }}</div>
<section>
<div><small>Cluster: {{ host.Cluster }}<template v-if="host.Template"> ({{ host.Template }})</template></small></div>
<template v-for="ip in host.IPs">
<code>{{ ip }}</code>{{" "}}
</template>
</section>
<div class="section">Downloads</div>
<section>
<Downloads :token="token" :state="state" kind="host" :name="host.Name" />
</section>
</div>
<p>Cluster: {{ host.Cluster }}<template v-if="host.Template"> ({{ host.Template }})</template></p>
<p>IPs:
<code v-for="ip in host.IPs">
{{ ip }}{{" "}}
</code>
</p>
<h3>Downloads</h3>
<Downloads :token="token" :state="state" kind="host" :name="host.Name" />
`
}

23
html/ui/js/app.js
View File

@ -15,6 +15,8 @@ createApp({
hostFromTemplate: {},
hostFromTemplateDel: "",
},
view: "",
viewFilter: "",
session: {},
error: null,
publicState: null,
@ -57,6 +59,27 @@ 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}`}));
console.log("views:",views);
return views.filter((v) => v.name.includes(this.viewFilter));
},
viewObj() {
if (this.view) {
if (this.view.type == "cluster") {
return this.state.Clusters.find((c) => c.Name == this.view.name);
}
if (this.view.type == "host") {
return this.state.Hosts.find((h) => h.Name == this.view.name);
}
}
return undefined;
},
hostsFromTemplate() {
return (this.state.Hosts||[]).filter((h) => h.Template)
},