add download sets and regroup access granting parts

html/ui/Cluster-bd053ffb62d5a804.js

@@ -0,0 +1,22 @@
+const Cluster = {
+    components: { ClusterAccess, ClusterCAs, Downloads, GetCopy },
+    props: [ 'cluster', 'token', 'state' ],
+    template: `
+  <ClusterAccess :cluster="cluster" :token="token" :state="state" />
+
+  <h3>Tokens</h3>
+  <section class="links">
+    <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
+  </section>
+
+  <h3>Passwords</h3>
+  <section class="links">
+    <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
+  </section>
+
+  <h3>Downloads</h3>
+  <Downloads :token="token" :state="state" kind="cluster" :name="cluster.Name" />
+
+  <ClusterCAs :cluster="cluster" :token="token" />
+`
+}

html/ui/ClusterAccess-fede0ff535b7cf.js

@@ -1,8 +1,8 @@
-const Cluster = {
+const ClusterAccess = {
-    components: { Downloads, GetCopy },
     props: [ 'cluster', 'token', 'state' ],
     data() {
         return {
+            accessType: "ssh",
             signReqValidity: "1d",
             sshSignReq: {
                 PubKey: "",
@@ -16,8 +16,35 @@ const Cluster = {
             },
             kubeUserCert: null,
             downloadSet: null,
+            selectedAssets: {},
         };
     },
+    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();
@@ -49,6 +76,28 @@ const Cluster = {
               })
               .catch((e) => { alert('failed to sign: '+e); })
         },
+        generateDownloadSet() {
+            event.preventDefault()
+
+            const hosts = this.hostCount ? (this.state.Hosts||[]).filter(h => h.Cluster == this.cluster.Name) : []
+            const items = hosts.map(h => ({
+                Kind: "host",
+                Name: h.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 })
+                } else {
+                    resp.json().then((resp) => alert('failed to generate: '+resp.message))
+                }
+            }).catch((e) => { alert('failed to generate: '+e) })
+        },
         readFile(e, onload) {
             const file = e.target.files[0];
             if (!file) { return; }
@@ -67,97 +116,63 @@ const Cluster = {
                 this.kubeSignReq.CSR = v;
             });
         },
-        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>Access</h3>
 
-  <p>Allow cluster access from a public key</p>
+  <p>Grant access to:
-
+     <label class="radio"><input type="radio" v-model="accessType" value="ssh" /> SSH</label>
-  <h4>Grant SSH access</h4>
+     <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>
+
+  <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 @click="sshCASign">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>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
     <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 @click="kubeCASign">Sign Kubernetes API access</button>
       <template v-if="kubeUserCert">
         =&gt; <a :href="kubeUserCert" download="kube-cert.pub">Get certificate</a>
       </template>
     </p>
+  </div>
 
-  <h3>Tokens</h3>
+  <div v-if="accessType == 'download-set'">
-  <section class="links">
+    <h4>Grant download access</h4>
-    <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
+    <p>Generates a signed download set granting access to the selected assets for all {{ hostCount }} hosts in this cluster.</p>
-  </section>
+    <h4>Available assets</h4>
-
+    <p class="downloads">
-  <h3>Passwords</h3>
+      <template v-for="asset in availableAssets">
-  <section class="links">
+        <label :class="{selected: selectedAssets[asset]}"><input type="checkbox" v-model="selectedAssets[asset]" />&nbsp;{{ asset }}</label>
-    <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
+        {{" "}}
-  </section>
+      </template>
-
+    </p>
-  <h3>Downloads</h3>
+    <p><button :disabled="selectedAssetList.length==0" @click="generateDownloadSet">Generate download set</button></p>
-  <Downloads :token="token" :state="state" kind="cluster" :name="cluster.Name" />
-
-  <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>
-
+  </div>
-  <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>
-    <td><GetCopy :token="token" name="cert" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/certificate'" /></td>
-    <td><template v-for="signed in ca.Signed">
-      {{" "}}
-      <GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
-    </template></td>
-  </tr></table>
-
 `
 }

html/ui/ClusterCAs-d6eba07c367b6306.js

@@ -0,0 +1,16 @@
+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>
+    <td><GetCopy :token="token" name="cert" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/certificate'" /></td>
+    <td><template v-for="signed in ca.Signed">
+      {{" "}}
+      <GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
+    </template></td>
+  </tr></table>
+`
+}

html/ui/index.html

@@ -13,7 +13,9 @@
 <script src="/ui/app-e7fb26679b9aa0f2.js" defer integrity="sha384-4oRQalb7IIBcqQzfDkeCj53qYOP6dLsTwqcjnm3EiBa92oNDD3chUw38W2gEC+3p" type="module"></script>
 <script src="/ui/Downloads-29497c61f1fe9bf0.js" integrity="sha384-xwn49JflUBaZlQCHCn55Q9qSGqsw01Job+TXk53HLhvNhKAALN18+gNCdF0bUJW0"></script>
 <script src="/ui/GetCopy-7e3c9678f9647d40.js" integrity="sha384-LzxUXylxE/t25HyTch8y2qvKcehvP2nqCo37swIBGEKZZUzHVJVQrS5UJDWNskTA"></script>
-<script src="/ui/Cluster-ddf1029883a9a21d.js" integrity="sha384-369vhOXJjTUPEtaedTqqk4D092uKIbU6r7cHj7HQMwkhlBCxuYH2uHMyRzKes6HS"></script>
+<script src="/ui/ClusterAccess-fede0ff535b7cf.js" integrity="sha384-Np8ntVwZ/f0nRYPByzkvya8zF+PQHEDtThOGTtlwyWybtxn6RqYsw6R++bSlv37I"></script>
+<script src="/ui/ClusterCAs-d6eba07c367b6306.js" integrity="sha384-2zV1VzNHw7hUS6SNIqDzIczma3Ixp3G9u6BJI4MtGHK4rNYWeCOOu9kttsZzkPYC"></script>
+<script src="/ui/Cluster-bd053ffb62d5a804.js" integrity="sha384-K9E9LLPBm9Vxs7e5yxN3mUHSb7jhMdeZDblOKHjssUvXtTFzp+B5C0NfmQ/zB/mP"></script>
 <script src="/ui/Host-61916516a854adff.js" integrity="sha384-/wh3KrC0sb4MT7ekO2U84rswxI42WSH/0jB4dbDaaGaGhX60xTEZHFsdQAf7UgTG"></script>
 <body>
 

html/ui/style.css

@@ -195,3 +195,19 @@ header .utils > * {
 }
 
 .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;
+}

ui/index.html

@@ -13,6 +13,8 @@
 <script data-trunk src="js/app.js" type="module" defer></script>
 <script data-trunk src="js/Downloads.js"></script>
 <script data-trunk src="js/GetCopy.js"></script>
+<script data-trunk src="js/ClusterAccess.js"></script>
+<script data-trunk src="js/ClusterCAs.js"></script>
 <script data-trunk src="js/Cluster.js"></script>
 <script data-trunk src="js/Host.js"></script>
 <body>

ui/js/Cluster.js

@@ -1,130 +1,8 @@
 const Cluster = {
-    components: { Downloads, GetCopy },
+    components: { ClusterAccess, ClusterCAs, Downloads, GetCopy },
     props: [ 'cluster', 'token', 'state' ],
-    data() {
-        return {
-            signReqValidity: "1d",
-            sshSignReq: {
-                PubKey: "",
-                Principal: "root",
-            },
-            sshUserCert: null,
-            kubeSignReq: {
-                CSR: "",
-                User:   "",
-                Group:  "system:masters",
-            },
-            kubeUserCert: null,
-            downloadSet: null,
-        };
-    },
-    methods: {
-        sshCASign() {
-            event.preventDefault();
-            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) })
-                } else {
-                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
-                }
-              })
-              .catch((e) => { alert('failed to sign: '+e); })
-        },
-        kubeCASign() {
-            event.preventDefault();
-            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) })
-                } else {
-                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
-                }
-              })
-              .catch((e) => { alert('failed to sign: '+e); })
-        },
-        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.readAsText(file);
-        },
-        loadPubKey(e) {
-            this.readFile(e, (v) => {
-                this.sshSignReq.PubKey = v;
-            });
-        },
-        loadCSR(e) {
-            this.readFile(e, (v) => {
-                this.kubeSignReq.CSR = v;
-            });
-        },
-        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>Access</h3>
+  <ClusterAccess :cluster="cluster" :token="token" :state="state" />
-
-  <p>Allow cluster access from a public key</p>
-
-  <h4>Grant SSH access</h4>
-
-  <p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
-  <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 @click="sshCASign">Sign SSH access</button>
-    <template v-if="sshUserCert">
-    =&gt; <a :href="sshUserCert" download="ssh-cert.pub">Get certificate</a>
-    </template>
-  </p>
-
-  <h4>Grant Kubernetes API access</h4>
-
-  <p>Validity: <input type="text" v-model="signReqValidity"/> <small>time range, ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</small></p>
-  <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 @click="kubeCASign">Sign Kubernetes API access</button>
-    <template v-if="kubeUserCert">
-      =&gt; <a :href="kubeUserCert" download="kube-cert.pub">Get certificate</a>
-    </template>
-  </p>
 
   <h3>Tokens</h3>
   <section class="links">
@@ -139,25 +17,6 @@ const Cluster = {
   <h3>Downloads</h3>
   <Downloads :token="token" :state="state" kind="cluster" :name="cluster.Name" />
 
-  <h3>Download set</h3>
+  <ClusterCAs :cluster="cluster" :token="token" />
-  <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>
-
-  <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>
-    <td><GetCopy :token="token" name="cert" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/certificate'" /></td>
-    <td><template v-for="signed in ca.Signed">
-      {{" "}}
-      <GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
-    </template></td>
-  </tr></table>
-
 `
 }

ui/js/ClusterAccess.js

@@ -0,0 +1,178 @@
+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: {},
+        };
+    },
+    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();
+            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) })
+                } else {
+                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
+                }
+              })
+              .catch((e) => { alert('failed to sign: '+e); })
+        },
+        kubeCASign() {
+            event.preventDefault();
+            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) })
+                } else {
+                    resp.json().then((resp) => alert('failed to sign: '+resp.message))
+                }
+              })
+              .catch((e) => { alert('failed to sign: '+e); })
+        },
+        generateDownloadSet() {
+            event.preventDefault()
+
+            const hosts = this.hostCount ? (this.state.Hosts||[]).filter(h => h.Cluster == this.cluster.Name) : []
+            const items = hosts.map(h => ({
+                Kind: "host",
+                Name: h.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 })
+                } else {
+                    resp.json().then((resp) => alert('failed to generate: '+resp.message))
+                }
+            }).catch((e) => { alert('failed to generate: '+e) })
+        },
+        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.readAsText(file);
+        },
+        loadPubKey(e) {
+            this.readFile(e, (v) => {
+                this.sshSignReq.PubKey = v;
+            });
+        },
+        loadCSR(e) {
+            this.readFile(e, (v) => {
+                this.kubeSignReq.CSR = v;
+            });
+        },
+    },
+    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>
+     <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>
+
+  <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 @click="sshCASign">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 @click="kubeCASign">Sign Kubernetes API access</button>
+      <template v-if="kubeUserCert">
+        =&gt; <a :href="kubeUserCert" download="kube-cert.pub">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="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>
+      <br/>
+      <button @click="navigator.clipboard.writeText(window.location.origin+'/public/download-set?set='+downloadSet)">Copy URL</button>
+    </p>
+  </div>
+`
+}

ui/js/ClusterCAs.js

@@ -0,0 +1,16 @@
+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>
+    <td><GetCopy :token="token" name="cert" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/certificate'" /></td>
+    <td><template v-for="signed in ca.Signed">
+      {{" "}}
+      <GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
+    </template></td>
+  </tr></table>
+`
+}

ui/js/ClusterDownloadSet.js

@@ -0,0 +1,43 @@
+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/style.css

@@ -195,3 +195,19 @@ header .utils > * {
 }
 
 .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;
+}