downloads API, UI

html/ui/js/Cluster.js

@@ -0,0 +1,16 @@
+
+import Downloads from './Downloads.js';
+
+export default {
+    components: { Downloads },
+    props: [ 'cluster', 'token', 'state' ],
+    template: `
+<div class="cluster">
+  <div class="title">Cluster {{ cluster.Name }}</div>
+  <div class="section">Downloads</div>
+  <section class="downloads">
+    <Downloads :token="token" :state="state" kind="cluster" :name="cluster.Name" />
+  </section>
+</div>
+`
+}

html/ui/js/Downloads.js

@@ -0,0 +1,66 @@
+
+export default {
+    props: [ 'kind', 'name', 'token', 'state' ],
+    data() {
+        return { createDisabled: false, selectedAssets: {} }
+    },
+    computed: {
+        availableAssets() {
+            return {
+                cluster: ['addons'],
+                host: [
+                    "kernel",
+                    "initrd-v2",
+                    "bootstrap.tar",
+                    "boot-v2.iso",
+                    "config",
+                    "boot.iso",
+                    "boot.tar",
+                    "boot-efi.tar",
+                    "boot.img",
+                    "boot.img.gz",
+                    "boot.img.lz4",
+                    "bootstrap-config",
+                    "initrd",
+                    "ipxe",
+                ],
+            }[this.kind]
+        },
+        downloads() {
+            let ret = []
+            Object.entries(this.state.Downloads)
+              .filter(e => { let d=e[1]; return d.Kind == this.kind && d.Name == this.name })
+              .forEach(e => {
+                let token= e[0], d = e[1]
+                d.Assets.forEach(asset => {
+                    ret.push({name: asset, url: '/public/downloads/'+token+'/'+asset})
+                })
+              })
+          return ret
+        },
+        assets() {
+            return this.availableAssets.filter(a => this.selectedAssets[a])
+        },
+    },
+    methods: {
+        createToken() {
+            event.preventDefault()
+            this.createDisabled = true
+
+            fetch('/authorize-download', {
+                method: 'POST',
+                body: JSON.stringify({Kind: this.kind, Name: this.name, Assets: this.assets}),
+                headers: { 'Authorization': 'Bearer ' + this.token },
+            }).then((resp) => resp.json())
+              .then((token) => { this.selectedAssets = {}; this.createDisabled = false })
+              .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>
+</div>`
+}

html/ui/js/Host.js

@@ -0,0 +1,21 @@
+
+import Downloads from './Downloads.js';
+
+export default {
+    components: { Downloads },
+    props: [ 'host', 'token', 'state' ],
+    template: `
+<div class="host">
+  <div class="title">Host {{ host.Name }}</div>
+  <section>
+    <template v-for="ip in host.IPs">
+        {{ ip }}
+    </template>
+  </section>
+  <div class="section">Downloads</div>
+  <section>
+    <Downloads :token="token" :state="state" kind="host" :name="host.Name" />
+  </section>
+</div>
+`
+}

html/ui/js/app.js

@@ -0,0 +1,162 @@
+
+import { createApp } from './vue.esm-browser.js';
+
+import Cluster from './Cluster.js';
+import Host    from './Host.js';
+
+createApp({
+    components: { Cluster, Host },
+    data() {
+        return {
+            forms: {
+                store: {  },
+            },
+            session: {},
+            error: null,
+            publicState: null,
+            uiHash: null,
+            watchingState: false,
+            state: null,
+        }
+    },
+    mounted() {
+        this.session = JSON.parse(sessionStorage.state || "{}")
+        this.watchPublicState()
+    },
+    watch: {
+        session: {
+            deep: true,
+            handler(v) {
+                sessionStorage.state = JSON.stringify(v)
+
+                if (v.token && !this.watchingState) {
+                    this.watchState()
+                    this.watchingState = true
+                }
+            }
+        },
+        publicState: {
+            deep: true,
+            handler(v) {
+                if (v) {
+                    if (this.uiHash && v.UIHash != this.uiHash) {
+                        console.log("reloading")
+                        location.reload()
+                    } else {
+                        this.uiHash = v.UIHash
+                    }
+                }
+            },
+        }
+    },
+
+    methods: {
+        copyText(text) {
+            event.preventDefault()
+            window.navigator.clipboard.writeText(text)
+        },
+        setToken() {
+            event.preventDefault()
+            this.session.token = this.forms.setToken
+            this.forms.setToken = null
+        },
+        unlockStore() {
+            this.apiPost('/public/unlock-store', this.forms.store.pass1, (v) => {
+                this.forms.store = {}
+
+                if (v) {
+                    this.session.token = v
+                    if (!this.watchingState) {
+                        this.watchState()
+                        this.watchingState = true
+                    }
+                }
+            })
+        },
+        apiPost(action, data, onload) {
+            event.preventDefault()
+
+            if (data === undefined) {
+                throw("action " + action + ": no data")
+            }
+
+            /* TODO
+            fetch(action, {
+                method: 'POST',
+                body: JSON.stringify(data),
+            })
+              .then((response) => response.json())
+              .then((result) => onload)
+            // */
+
+            var xhr = new XMLHttpRequest()
+
+            xhr.responseType = 'json'
+            // TODO spinner, pending aciton notification, or something
+            xhr.onerror = () => {
+                // this.actionResults.splice(idx, 1, {...item, done: true, failed: true })
+            }
+            xhr.onload = (r) => {
+                if (xhr.status != 200) {
+                    this.error = xhr.response
+                    return
+                }
+                // this.actionResults.splice(idx, 1, {...item, done: true, resp: xhr.responseText})
+                this.error = null
+                if (onload) {
+                    onload(xhr.response)
+                }
+            }
+
+            xhr.open("POST", action)
+            xhr.setRequestHeader('Accept', 'application/json')
+            xhr.setRequestHeader('Content-Type', 'application/json')
+            if (this.session.token) {
+                xhr.setRequestHeader('Authorization', 'Bearer '+this.session.token)
+            }
+            xhr.send(JSON.stringify(data))
+        },
+        download(url) {
+            event.target.target = '_blank'
+            event.target.href = this.downloadLink(url)
+        },
+        downloadLink(url) {
+            // TODO once-shot download link
+            return url + '?token=' + this.session.token
+        },
+        watchPublicState() {
+            this.watchStream('publicState', '/public-state')
+        },
+        watchState() {
+            this.watchStream('state', '/state', true)
+        },
+        watchStream(field, path, withToken) {
+            let evtSrc = new EventSource(path + (withToken ? '?token='+this.session.token : ''));
+            evtSrc.onmessage = (e) => {
+                let update = JSON.parse(e.data)
+
+                console.log("watch "+path+":", update)
+
+                if (update.err) {
+                    console.log("watch error from server:", err)
+                }
+                if (update.set) {
+                    this[field] = update.set
+                }
+                if (update.p) { // patch
+                    new jsonpatch.JSONPatch(update.p, true).apply(this[field])
+                }
+            }
+            evtSrc.onerror = (e) => {
+                // console.log("event source " + path + " error:", e)
+                if (evtSrc) evtSrc.close()
+
+                this[field] = null
+
+                window.setTimeout(() => { this.watchStream(field, path, withToken) }, 1000)
+            }
+        },
+    }
+
+}).mount('#app')
+