local-server/html/ui/js/app.js

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: {},
                storeUpload: {},
                delKey: {},
                hostFromTemplate: {},
                hostFromTemplateDel: "",
            },
            session: {},
            error: null,
            publicState: null,
            serverVersion: 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) {
                    this.serverVersion = v.ServerVersion
                    if (this.uiHash && v.UIHash != this.uiHash) {
                        console.log("reloading")
                        location.reload()
                    } else {
                        this.uiHash = v.UIHash
                    }
                }
            },
        }
    },

    computed: {
        hostsFromTemplate() {
            return (this.state.Hosts||[]).filter((h) => h.Template)
        },
    },

    methods: {
        copyText(text) {
            event.preventDefault()
            window.navigator.clipboard.writeText(text)
        },
        setToken() {
            event.preventDefault()
            this.session.token = this.forms.setToken
            this.forms.setToken = null
        },
        uploadStore() {
            event.preventDefault()
            this.apiPost('/public/store.tar', this.$refs.storeUpload.files[0], (v) => {
                this.forms.store = {}
            }, "application/tar")
        },
        namedPassphrase(name, passphrase) {
            return {Name: this.forms.store.name, Passphrase: btoa(this.forms.store.pass1)}
        },
        storeAddKey() {
            this.apiPost('/store/add-key', this.namedPassphrase(), (v) => {
                this.forms.store = {}
            })
        },
        storeDelKey() {
            event.preventDefault()

            let name = this.forms.delKey.name

            if (!confirm("Remove key named "+JSON.stringify(name)+"?")) {
                return
            }
            this.apiPost('/store/delete-key', name , (v) => {
                this.forms.delKey = {}
            })
        },
        unlockStore() {
            this.apiPost('/public/unlock-store', this.namedPassphrase(), (v) => {
                this.forms.store = {}

                if (v) {
                    this.session.token = v
                    if (!this.watchingState) {
                        this.watchState()
                        this.watchingState = true
                    }
                }
            })
        },
        uploadConfig() {
            this.apiPost('/configs', this.$refs.configUpload.files[0], (v) => {}, "text/vnd.yaml")
        },
        hostFromTemplateAdd() {
            let v = this.forms.hostFromTemplate;
            this.apiPost('/hosts-from-template/'+v.name, v, (v) => { this.forms.hostFromTemplate = {} });
        },
        hostFromTemplateDel() {
            event.preventDefault()

            let v = this.forms.hostFromTemplateDel;
            if (!confirm("delete host template instance "+v+"?")) {
                return
            }
            this.apiDelete('/hosts-from-template/'+v, (v) => { this.forms.hostFromTemplateDel = "" });
        },
        apiPost(action, data, onload, contentType = 'application/json') {
            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 action 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', contentType)
            if (this.session.token) {
                xhr.setRequestHeader('Authorization', 'Bearer '+this.session.token)
            }

            if (contentType == "application/json") {
                xhr.send(JSON.stringify(data))
            } else {
                xhr.send(data)
            }
        },
        apiDelete(action, data, onload) {
            event.preventDefault()

            var xhr = new XMLHttpRequest()
            xhr.onload = (r) => {
                if (xhr.status != 200) {
                    this.error = xhr.response
                    return
                }
                this.error = null
                if (onload) {
                    onload(xhr.response)
                }
            }
            xhr.open("DELETE", action)
            xhr.setRequestHeader('Accept', 'application/json')
            if (this.session.token) {
                xhr.setRequestHeader('Authorization', 'Bearer '+this.session.token)
            }
            xhr.send()
        },
        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')