ui rework

2026-06-17 22:40:44 +02:00
parent f6b301c9a0
commit 38ad620759
20 changed files with 1016 additions and 553 deletions
@@ -2,18 +2,26 @@ const Cluster = {
    components: { ClusterAccess, ClusterCAs, GetCopy },
    props: [ 'cluster', 'token', 'state' ],
    template: `
-  <ClusterAccess :cluster="cluster" :token="token" :state="state" />
+  <details open>
+    <summary>Access</summary>
+    <ClusterAccess :cluster="cluster" :token="token" :state="state" />
+  </details>

-  <ClusterCAs :cluster="cluster" :token="token" />
+  <details open>
+    <summary>CAs</summary>
+    <ClusterCAs :cluster="cluster" :token="token" />
+  </details>

-  <h3>Secrets</h3>
-  <h4>Tokens</h4>
-  <section class="links">
-    <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
-  </section>
-  <h4>Passwords</h4>
-  <section class="links">
-    <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
-  </section>
+  <details open>
+    <summary>Secrets</summary>
+    <h4>Tokens</h4>
+    <section class="links">
+      <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
+    </section>
+    <h4>Passwords</h4>
+    <section class="links">
+      <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
+    </section>
+  </details>
 `
 }
@@ -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">&times;</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">
      =&gt; <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">
-        =&gt; <a :href="kubeUserCert" download="kube-cert.pub">Get certificate</a>
+        =&gt; <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>
 `
 }
@@ -2,7 +2,6 @@ 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>
@@ -1,43 +0,0 @@
-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>
-`
-}
@@ -1,7 +1,7 @@
 const Downloads = {
    props: [ 'kind', 'name', 'token', 'state' ],
    data() {
-        return { createDisabled: false, selectedAssets: {} }
+        return { createDisabled: false, selectedAssets: {}, msg: null }
    },
    computed: {
        availableAssets() {
@@ -50,11 +50,12 @@ const Downloads = {
                headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
            }).then((resp) => resp.json())
              .then((token) => { this.selectedAssets = {}; this.createDisabled = false })
-              .catch((e) => { alert('failed to create link'); this.createDisabled = false })
+              .catch((e) => { this.msg = 'failed to create link'; this.createDisabled = false })
        },
    },
    template: `
  <h4>Available assets</h4>
+  <p class="error" v-if="msg">{{ msg }} <button class="btn-close" @click="msg=null">&times;</button></p>
  <p class="downloads">
    <template v-for="asset in availableAssets">
      <label :class="{selected: selectedAssets[asset]}"><input type="checkbox" v-model="selectedAssets[asset]" />&nbsp;{{ asset }}</label>
@@ -1,7 +1,7 @@
 const GetCopy = {
    props: [ 'name', 'href', 'token' ],
    data() { return {showCopied: false} },
-    template: `<span class="notif"><div v-if="showCopied">copied!</div><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
+    template: `<span><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
    methods: {
        fetch() {
            event.preventDefault()
@@ -12,7 +12,7 @@ const GetCopy = {
        },
        handleFetchError(e) {
            console.log("failed to get value:", e)
-            alert('failed to get value')
+            this.$root.toast('failed to get value', 'error')
        },
        fetchAndSave() {
            this.fetch().then(resp => resp.blob()).then((value) => {
@@ -23,9 +23,12 @@ const GetCopy = {
            this.fetch()
            .then((resp) => resp.headers.get("content-type") == "application/json" ? resp.json() : resp.text())
            .then((value) => {
-                window.navigator.clipboard.writeText(value)
-                this.showCopied = true
-                setTimeout(() => { this.showCopied = false }, 1000)
+                try {
+                    window.navigator.clipboard.writeText(value)
+                    this.$root.toast('copied!', 'info')
+                } catch (e) {
+                    this.$root.toast('copy failed', 'error')
+                }
            }).catch(this.handleFetchError)
        },
    },
@@ -21,11 +21,17 @@ createApp({
            uiHash: null,
            watchingState: false,
            state: null,
+            toasts: [],
+            toastId: 0,
        }
    },
    mounted() {
        this.session = JSON.parse(sessionStorage.state || "{}")
        this.watchPublicState()
+        document.addEventListener('keydown', (e) => this.onKeydown(e))
+    },
+    unmounted() {
+        document.removeEventListener('keydown', (e) => this.onKeydown(e))
    },
    watch: {
        session: {
@@ -56,13 +62,16 @@ 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}`}));
-
-            return views.filter((v) => v.type != "host" || v.name.includes(this.viewFilter));
+        adminViews() {
+            return [{type: "actions", name: "admin", title: "Admin actions"}];
+        },
+        clusterViews() {
+            return (this.state.Clusters||[]).map((c) => ({type: "cluster", name: c.Name, title: c.Name}));
+        },
+        hostViews() {
+            return (this.state.Hosts||[])
+              .filter((h) => h.Name.includes(this.viewFilter))
+              .map((h) => ({type: "host", name: h.Name, title: h.Name}));
        },
        viewObj() {
            if (this.view) {
@@ -84,9 +93,32 @@ createApp({
        any(array) {
            return array && array.length != 0;
        },
+        isActive(v) {
+            return this.view && this.view.type == v.type && this.view.name == v.name
+        },
+        onKeydown(e) {
+            if ((e.ctrlKey || e.metaKey) && e.key == 'k') {
+                e.preventDefault()
+                this.$nextTick(() => {
+                    const el = document.querySelector('.sidebar input[type="search"]')
+                    if (el) el.focus()
+                })
+                return
+            }
+
+            if (e.key == 'Escape') {
+                this.viewFilter = ''
+                return
+            }
+        },
        copyText(text) {
            event.preventDefault()
-            window.navigator.clipboard.writeText(text)
+            try {
+                window.navigator.clipboard.writeText(text)
+                this.toast('copied!', 'info')
+            } catch (e) {
+                this.toast('copy failed: ' + e, 'error')
+            }
        },
        setToken() {
            event.preventDefault()
@@ -177,16 +209,12 @@ createApp({
            var xhr = new XMLHttpRequest()

            xhr.responseType = 'json'
-            // TODO spinner, pending action notification, or something
-            xhr.onerror = () => {
-                // this.actionResults.splice(idx, 1, {...item, done: true, failed: true })
-            }
+            xhr.onerror = () => {}
            xhr.onload = (r) => {
                if (xhr.status != 200) {
-                    this.error = xhr.response
+                    this.toast((xhr.response && xhr.response.message) || 'request failed', 'error')
                    return
                }
-                // this.actionResults.splice(idx, 1, {...item, done: true, resp: xhr.responseText})
                this.error = null
                if (onload) {
                    onload(xhr.response)
@@ -235,6 +263,14 @@ createApp({
            // TODO once-shot download link
            return url + '?token=' + this.session.token
        },
+        toast(message, kind) {
+            const id = ++this.toastId
+            this.toasts.push({id, message, kind: kind || 'info'})
+            setTimeout(() => this.dismissToast(id), 4000)
+        },
+        dismissToast(id) {
+            this.toasts = this.toasts.filter(t => t.id != id)
+        },
        watchPublicState() {
            this.watchStream('publicState', '/public-state')
        },