downloads API, UI

2023-02-07 21:29:19 +01:00
parent e44303eab9
commit b6c714fac7
32 changed files with 17675 additions and 5 deletions
--- a/html/favicon.ico
+++ b/html/favicon.ico
--- a/html/html.go
+++ b/html/html.go
@ -0,0 +1,6 @@
+package dlshtml
+
+import "embed"
+
+//go:embed favicon.ico ui
+var FS embed.FS
--- a/html/ui/app.css
+++ b/html/ui/app.css
@ -0,0 +1,19 @@
+
+.downloads {
+    display: flex;
+    align-content: stretch;
+}
+
+.downloads > * {
+    margin-left: 6pt;
+}
+.downloads > *:first-child {
+    margin-left: 0;
+}
+
+.downloads > div {
+    display: flex;
+    flex-flow: column;
+    max-height: 100pt;
+    overflow: auto;
+}
--- a/html/ui/index.html
+++ b/html/ui/index.html
@ -0,0 +1,87 @@
+<!doctype html>
+<html>
+<head>
+<title>Direktil Local Server</title>
+<style>
+@import url('./style.css');
+@import url('./app.css');
+</style>
+<script src="js/jsonpatch.min.js" crossorigin="anonymous"></script>
+<script src="js/app.js" type="module" defer></script>
+<body>
+
+<div id="app">
+<header>
+    <div id="logo">
+        <img src="/favicon.ico" />
+        <span>Direktil Local Server</span>
+    </div>
+    <div class="utils">
+        <span id="login-hdr" v-if="session.token">
+            Logged in
+            <button class="link" @click="copyText(session.token)">&#x1F5D0;</button>
+        </span>
+
+        <span id="uiHash">ui <code>{{ uiHash || '-----' }}</code></span>
+
+        <span class="green" v-if="publicState">&#x1F5F2;</span>
+        <span class="red"   v-else            >&#x1F5F2;</span>
+    </div>
+</header>
+
+<div class="error" v-if="error">
+    <button class="btn-close" @click="error=null">&times;</button>
+    <div class="code" v-if="error.code">{{ error.code }}</div>
+    <div class="message">{{ error.message }}</div>
+</div>
+
+<template v-if="!publicState">
+    <p>Not connected.</p>
+</template>
+<template v-else-if="publicState.Store.New">
+    <p>Store is new.</p>
+    <form @submit="unlockStore" action="/public/unlock-store">
+        <input type="password" v-model="forms.store.pass1" name="passphrase" />
+        <input type="password" v-model="forms.store.pass2" />
+        <input type="submit" value="initialize" :disabled="!forms.store.pass1 || forms.store.pass1 != forms.store.pass2" />
+    </form>
+</template>
+<template v-else-if="!publicState.Store.Open">
+    <p>Store is not open.</p>
+    <form @submit="unlockStore" action="/public/unlock-store">
+        <input type="password" name="passphrase" v-model="forms.store.pass1" />
+        <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>
+
+    <form @submit="setToken">
+        <input type="password" v-model="forms.setToken" />
+        <input type="submit" value="set token"/>
+    </form>
+</template>
+<template v-else>
+  <div v-if="state.Clusters" id="clusters">
+    <h2>Clusters</h2>
+
+    <div class="sheets">
+        <Cluster v-for="c in state.Clusters" :cluster="c" :token="session.token" :state="state" />
+    </div>
+  </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>
+
+  <pre v-if="false">{{ state }}</pre>
+</template>
+</div>
+
+</body>
+</html>
--- a/html/ui/js/Cluster.js
+++ b/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>
+`
+}
--- a/html/ui/js/Downloads.js
+++ b/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>`
+}
--- a/html/ui/js/Host.js
+++ b/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>
+`
+}
--- a/html/ui/js/app.js
+++ b/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')
+
--- a/html/ui/js/jsonpatch.min.js
+++ b/html/ui/js/jsonpatch.min.js
--- a/html/ui/js/vue.esm-browser.js
+++ b/html/ui/js/vue.esm-browser.js
--- a/html/ui/style.css
+++ b/html/ui/style.css
@ -0,0 +1,127 @@
+body {
+    background: white;
+}
+
+button[disabled] {
+    opacity: 0.5;
+}
+
+a[href], a[href]:visited, button.link {
+    border: none;
+    color: blue;
+    background: none;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+table {
+    border-collapse: collapse;
+}
+th, td {
+    border-left:   dotted 1pt;
+    border-right:  dotted 1pt;
+    border-bottom: dotted 1pt;
+    padding: 2pt 4pt;
+}
+tr:first-child > th {
+    border-top: dotted 1pt;
+}
+th, tr:last-child > td {
+    border-bottom: solid 1pt;
+}
+
+.flat > * { margin-left: 1ex; }
+.flat > *:first-child { margin-left: 0; }
+
+.green { color: green; }
+.red   { color: red; }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: black;
+    color: orange;
+  }
+  button, input[type=submit] {
+    background: #333;
+    color: #eee;
+  }
+  a[href], button.link {
+    border: none;
+    color: #31b0fa;
+  }
+
+  .red { color: #c00; }
+}
+
+header {
+    display: flex;
+    align-items: center;
+    border-bottom: 2pt solid;
+    margin: 0 0 1em 0;
+    padding: 1ex;
+    justify-content: space-between;
+}
+#logo > img {
+    vertical-align: middle;
+}
+header .utils > * {
+    margin-left: 1ex;
+}
+
+.error {
+    display: flex;
+    position: relative;
+    background: rgba(255,0,0,0.2);
+    border: 1pt solid red;
+    justify-content: space-between;
+    align-items: center;
+}
+.error .btn-close,
+.error .code {
+    background: #600;
+    color: white;
+    font-weight: bold;
+    border: none;
+    align-self: stretch;
+    padding: 1ex 1em;
+}
+.error .code {
+    order: 1;
+
+    display: flex;
+    align-items: center;
+    text-align: center;
+}
+.error .message {
+    order: 2;
+    padding: 1ex 2em;
+}
+.error .btn-close {
+    order: 3;
+}
+
+.sheets {
+    display: flex;
+    align-items: stretch;
+}
+.sheets > div {
+    margin: 0 1ex;
+    border: 1pt solid;
+    border-radius: 6pt;
+}
+.sheets .title {
+    text-align: center;
+    font-weight: bold;
+    font-size: large;
+    padding: 2pt 6pt;
+    background: rgba(127,127,127,0.5);
+}
+.sheets .section {
+    padding: 2pt 6pt 2pt 6pt;
+    font-weight: bold;
+    border-top: 1px dotted;
+}
+.sheets section {
+    margin: 2pt 6pt 6pt 6pt;
+}
+