Files
local-server/html/ui/ClusterAccess-8b4165435ba4fcac.js
T
Mikaël Cluseau 38ad620759 ui rework
2026-06-18 08:38:18 +02:00

191 lines
7.7 KiB
JavaScript

const ClusterAccess = {
props: [ 'cluster', 'token', 'state' ],
data() {
return {
accessType: "ssh",
signReqValidity: "1d",
sshSignReq: {
PubKey: "",
Principal: "root",
},
sshUserCert: null,
kubeSignReq: {
CSR: "",
User: "",
Group: "system:masters",
},
kubeUserCert: null,
downloadSet: null,
selectedAssets: {},
loading: false,
msg: null,
};
},
computed: {
availableAssets() {
return [
"kernel",
"initrd",
"uki",
"bootstrap.tar",
"boot.img.gz",
"boot.img",
"boot.qcow2",
"boot.vmdk",
"boot.iso",
"boot.tar",
"bootstrap-config",
"config",
"config.json",
"ipxe",
]
},
selectedAssetList() {
return this.availableAssets.filter(a => this.selectedAssets[a])
},
hostCount() {
return (this.state.Hosts||[]).filter(h => h.Cluster == this.cluster.Name).length
},
},
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); this.loading = false })
} else {
resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
}
})
.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); this.loading = false })
} else {
resp.json().then((resp) => { this.msg = 'failed to sign: '+resp.message; this.loading = false })
}
})
.catch((e) => { this.msg = 'failed to sign: '+e; this.loading = false })
},
generateDownloadSet() {
event.preventDefault()
this.loading = true; this.msg = null;
const items = [{
Kind: "host",
Name: "c=" + this.cluster.Name,
Assets: this.selectedAssetList,
}]
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; this.loading = false })
} else {
resp.json().then((resp) => { this.msg = 'failed to generate: '+resp.message; this.loading = false })
}
}).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 = () => { this.msg = "error reading file" };
reader.readAsText(file);
},
loadPubKey(e) {
this.readFile(e, (v) => {
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;
});
},
},
template: `
<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>
<label class="radio"><input type="radio" v-model="accessType" value="download-set" /> Download set</label>
</p>
<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>
<p>Public key (OpenSSH format):<br/>
<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 :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>
</p>
</div>
<div v-if="accessType == 'kube'">
<h4>Grant Kubernetes API access</h4>
<p>User: <input type="text" v-model="kubeSignReq.User"/> (by default, from the CSR)</p>
<p>Group: <input type="text" v-model="kubeSignReq.Group"/></p>
<p>Certificate signing request (PEM format):<br/>
<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 :disabled="loading" @click="kubeCASign">{{ loading ? 'signing...' : 'Sign Kubernetes API access' }}</button>
<template v-if="kubeUserCert">
=&gt; <a :href="kubeUserCert" download="tls.crt">Get certificate</a>
</template>
</p>
</div>
<div v-if="accessType == 'download-set'">
<h4>Grant download access</h4>
<p>Generates a signed download set granting access to the selected assets for all {{ hostCount }} hosts in this cluster.</p>
<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>
<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="copyDownloadSetUrl">Copy URL</button>
</div>
</div>
`
}