ui rework
This commit is contained in:
Mikaël Cluseau
+34
-21
@@ -17,6 +17,8 @@ const ClusterAccess = {
|
||||
kubeUserCert: null,
|
||||
downloadSet: null,
|
||||
selectedAssets: {},
|
||||
loading: false,
|
||||
msg: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -44,40 +46,43 @@ const ClusterAccess = {
|
||||
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) })
|
||||
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">×</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">
|
||||
=> <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">
|
||||
=> <a :href="kubeUserCert" download="kube-cert.pub">Get certificate</a>
|
||||
=> <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>
|
||||
`
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user