rework ui

2025-06-29 00:12:12 +02:00
parent af41df6ab4
commit 85b9a45856
9 changed files with 247 additions and 99 deletions
--- a/html/ui/app.css
+++ b/html/ui/app.css
@ -1,23 +1,37 @@

+.view-links > span {
+    margin-right: 1ex;
+    padding: 0.5ex;
+    border: 1pt solid;
+    border-radius: 1ex;
+    cursor: pointer;
+}
+
 .downloads {
-    display: flex;
-    align-content: stretch;
-}
-
-.downloads > * {
-    margin-left: 6pt;
-}
-.downloads > *:first-child {
+  & > * {
+    display: inline-block;
+    margin-left: 1ex;
+    margin-bottom: 1ex;
+    padding: 0.5ex;
+    border: 1px solid;
+    border-radius: 1ex;
+    cursor: pointer;
+  }
+  & > *:first-child {
    margin-left: 0;
+  }
+  & > .selected {
+    color: blue;
+  }
 }

-.downloads > div {
-    display: flex;
-    flex-flow: column;
-    max-height: 100pt;
-    overflow: auto;
+.download-links a {
+  margin-right: 1ex;
 }

-.cluster {
-    max-width: 50%;
+@media (prefers-color-scheme: dark) {
+  .downloads > .selected,
+  .view-links > .selected {
+    color: #31b0fa;
+  }
 }
--- a/html/ui/index.html
+++ b/html/ui/index.html
@ -38,6 +38,7 @@
 <template v-if="!publicState">
    <p>Not connected.</p>
 </template>
+
 <template v-else-if="publicState.Store.New">
    <p>Store is new.</p>
    <p>Option 1: initialize a new store</p>
@ -53,6 +54,7 @@
        <input type="submit" value="upload" />
    </form>
 </template>
+
 <template v-else-if="!publicState.Store.Open">
    <p>Store is not open.</p>
    <form @submit="unlockStore">
@ -60,6 +62,7 @@
        <input type="submit" value="unlock" :disabled="!forms.store.pass1" />
    </form>
 </template>
+
 <template v-else-if="!state">
    <p v-if="!session.token">Not logged in.</p>
    <p v-else>Invalid token</p>
@ -69,25 +72,22 @@
        <input type="submit" value="log in"/>
    </form>
 </template>
+
 <template v-else>
-  <div v-if="state.Clusters" id="clusters">
-    <h2>Clusters</h2>
+  <div style="float:right;"><input type="text" 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>

-    <div class="sheets">
-        <Cluster v-for="c in state.Clusters" :cluster="c" :token="session.token" :state="state" />
-    </div>
+  <h2 v-if="view">{{view.title}}</h2>
+
+  <div v-if="view.type == 'cluster'" id="clusters">
+    <Cluster :cluster="viewObj" :token="session.token" :state="state" />
  </div>

-  <div v-if="state.Hosts" id="hosts">
-    <h2>Hosts</h2>
-
-    <div class="sheets">
-        <Host v-for="h in state.Hosts" :host="h" :token="session.token" :state="state" />
-    </div>
+  <div v-if="view.type == 'host'" id="hosts">
+    <Host :host="viewObj" :token="session.token" :state="state" />
  </div>

-  <h2>Admin actions</h2>
-
+  <div v-if="view.type == 'actions' && view.name == 'admin'">
  <h3>Config</h3>
  <form @submit="uploadConfig">
      <input type="file" ref="configUpload" required />
@ -131,7 +131,7 @@
      <input type="submit" value="delete instance" :disabled="!forms.hostFromTemplateDel" />
  </form>
 </template>
-
+  </div>
 </template>
 </div>

--- a/html/ui/js/Cluster.js
+++ b/html/ui/js/Cluster.js
@ -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>
 `
 }
--- a/html/ui/js/Downloads.js
+++ b/html/ui/js/Downloads.js
@ -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>`
 }
--- a/html/ui/js/Host.js
+++ b/html/ui/js/Host.js
@ -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" />
 `
 }
--- a/html/ui/js/app.js
+++ b/html/ui/js/app.js
@ -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)
        },