From bc177554cfbd7e399e607c2005c0d0713ab308f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20Gomez?= Date: Sun, 28 Aug 2022 22:31:18 +0200 Subject: [PATCH 1/3] First draft of a converter web extension --- .gitignore | 1 + cmd/wasm/main.go | 40 ++ dark-web-extension/README.md | 27 ++ dark-web-extension/background_script.js | 34 ++ dark-web-extension/content_script.js | 103 +++++ dark-web-extension/icons/icon.png | Bin 0 -> 3066 bytes dark-web-extension/manifest.json | 31 ++ dark-web-extension/wasm_exec.js | 554 ++++++++++++++++++++++++ 8 files changed, 790 insertions(+) create mode 100644 cmd/wasm/main.go create mode 100644 dark-web-extension/README.md create mode 100644 dark-web-extension/background_script.js create mode 100644 dark-web-extension/content_script.js create mode 100644 dark-web-extension/icons/icon.png create mode 100644 dark-web-extension/manifest.json create mode 100644 dark-web-extension/wasm_exec.js diff --git a/.gitignore b/.gitignore index 5e56e040..459e64eb 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ /bin +*.wasm diff --git a/cmd/wasm/main.go b/cmd/wasm/main.go new file mode 100644 index 00000000..d659c70d --- /dev/null +++ b/cmd/wasm/main.go @@ -0,0 +1,40 @@ +package main + +import ( + "strings" + "syscall/js" + + "github.com/K-Phoen/dark/internal/pkg/converter" + "go.uber.org/zap" +) + +func dashboardToDarkFunc() js.Func { + return js.FuncOf(func(this js.Value, args []js.Value) interface{} { + if len(args) != 1 { + return "invalid nnumber of arguments passed" + } + + logger := zap.NewNop() + conv := converter.NewJSON(logger) + + inputJSON := args[0].String() + output := &strings.Builder{} + + if err := conv.ToK8SManifest(strings.NewReader(inputJSON), output, converter.K8SManifestOptions{ + Folder: "folder_name", + Name: "name", + Namespace: "default", + }); err != nil { + logger.Fatal("Could not convert dashboard", zap.Error(err)) + } + + return output.String() + }) +} + +func main() { + js.Global().Set("dashboardToDark", dashboardToDarkFunc()) + + c := make(chan struct{}, 0) + <-c +} diff --git a/dark-web-extension/README.md b/dark-web-extension/README.md new file mode 100644 index 00000000..6cb61a79 --- /dev/null +++ b/dark-web-extension/README.md @@ -0,0 +1,27 @@ +# DARK web extension + +Browser extension to convert Grafana dashboards into an equivalent DARK YAML file. + +Whenever a Grafana dashboard is viewed, the extension will add an export button to the dashboard's toolbar. + +**Note:** only tested with Firefox. + +## Building + +### Compile the `./cmd/wasm` binary to WebAssembly + +The extension re-uses the conversion logic written in Go, thanks to WebAssembly. + +A binary specific to this use-case is bundled within the repository, and needs to be compiled for the extension to run: + +```sh +GOOS=js GOARCH=wasm go build -o dark-web-extension/dark.wasm ./cmd/wasm +``` + +### `./dark-web-extension/wasm_exec.js` file + +Distributed with Go: + +```sh +cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./dark-web-extension +``` \ No newline at end of file diff --git a/dark-web-extension/background_script.js b/dark-web-extension/background_script.js new file mode 100644 index 00000000..22fb996a --- /dev/null +++ b/dark-web-extension/background_script.js @@ -0,0 +1,34 @@ +// Put all the javascript code here, that you want to execute in background. + +console.debug("starting background worker"); + +browser.runtime.onMessage.addListener(handleMessage); + +function handleMessage(request, _sender, _sendResponse) { + console.info(`content script sent a message`, request); + + if (request.action === 'convert-to-k8s') { + convertToK8s(request.data.model).then(result => { + const blob = new Blob([result], {type: 'text/yaml'}); + + browser.downloads.download({ + url: window.URL.createObjectURL(blob), + filename: 'dark-dashboard.yaml', + conflictAction: 'uniquify', + }); + }); + } +} + +async function convertToK8s(dashboardModel) { + const go = new Go(); + + return WebAssembly.instantiateStreaming( + fetch(browser.runtime.getURL("dark.wasm")), + go.importObject, + ).then(result => { + go.run(result.instance); + + return dashboardToDark(dashboardModel); + }); +} diff --git a/dark-web-extension/content_script.js b/dark-web-extension/content_script.js new file mode 100644 index 00000000..b6c856a0 --- /dev/null +++ b/dark-web-extension/content_script.js @@ -0,0 +1,103 @@ +// Put all the javascript code here, that you want to execute after page load. +if (isGrafana()) { + console.debug("content_script bootstrap"); + + // hackish way of giving enough time for grafana to load the dashboard + waitForElm('.page-toolbar').then((elm) => { + console.debug('page-toolbar found, inserting DARK export button'); + setupExportButton(); + }); +} + +function setupExportButton() { + var elements = document.getElementsByClassName("page-toolbar"); + + if (elements.length === 0) { + console.debug("page-toolbar not found"); + return; + } + + console.debug("appending export button"); + const pageToolbarElmt = elements[0]; + + const lastButton = pageToolbarElmt.childNodes[pageToolbarElmt.childNodes.length - 1]; + const darkExportButton = lastButton.cloneNode(true); + darkExportButton.onclick = triggerExport; + darkExportButton.title = 'Export as DARK dashboard'; + + darkExportButton.childNodes[0].childNodes[0].childNodes[0].innerHTML = ` + + + + +`; + + pageToolbarElmt.appendChild(darkExportButton); +} + +function triggerExport() { + const dashboardUID = getDashboardUID(); + + if (!dashboardUID) { + console.warn('could not infer dashboard UID'); + return; + } + + console.debug("exporting dashboard with UID", dashboardUID); + + fetch(`${window.location.origin}/api/dashboards/uid/${dashboardUID}`) + .then(response => response.json()) + .then(apiResponse => convertGrafanaDashboard(apiResponse.dashboard)) + .catch(error => { + console.error(`Error: ${error}`); + }) +} + +function getDashboardUID() { + const pagePath = window.location.pathname; + + return pagePath.split('/')[2]; +} + +function convertGrafanaDashboard(model) { + return browser.runtime.sendMessage({ + action: "convert-to-k8s", + data: { + model: JSON.stringify(model), + }, + }); +} + +function isGrafana() { + return document.body.classList.contains('app-grafana'); +} + +function waitForElm(selector) { + return new Promise(resolve => { + if (document.querySelector(selector)) { + return resolve(document.querySelector(selector)); + } + + const observer = new MutationObserver(mutations => { + if (document.querySelector(selector)) { + resolve(document.querySelector(selector)); + observer.disconnect(); + } + }); + + observer.observe(document.body, { + childList: true, + subtree: true + }); + }); +} diff --git a/dark-web-extension/icons/icon.png b/dark-web-extension/icons/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..063cfa8f40d2773ce841dea48d343e3940b2b7ee GIT binary patch literal 3066 zcmV z|GfVHoCCu|`E-W4U&-k7gg@K%j4ZO_WYO^}A8#LaeqNUZU1IKM8rhdOo%w+;JEglK zv7;4<8}H{GBk}L!vy$47miuA`Lglk_Z0(dxTW?ixWNH%o7ggdkRdN<-5_d-7*|ish zl)i@tGY?uN3ma!9wrhQMwyh(aT#(MRWXzDf?E@EZQUu33;(1Q-I*V1wC94v9z(*RO z1)A!0L_zvbTB<_wAVp-~Q@u`E^SW+m^WA#2LO)X^=PAWw|2am96~gB-yC%!LL!zGA zP9(P}f}L0R;+bg%(2-X@kaEfmA8Jts>f|P;VcjMpvj*)&PqrikJKP z+&o8rvxF~rIwz_kw?&)px>SXwdR>?BGyKl9Gl>JZ)Wy}%LYklr8c%0Aeq0UY6*MhAMcr7Z5;)X1 zTB{dh3j2Z{Hq}@YWWhc_6}ZjjK*A0npwoUng^fwP#2uRm;x9rlJih;M!VKg7pOGm0b^?t*<70E*J8y+U9>@4U_`?| zL$=8QhXQ6s?*FG;NERHu7y|gxY-0mpzWX{YK8xxSuL!o@H0*bq5ntU2+-_jhYkf5YmmcggYN8n5AuzDx;Z<-*#F%X&`P2AeBbz_Md?D&b9?YVkqpZ<7fVhEUgB&@*qqGHiXatlu-Vs3DMAp+Fz3-cw)Ls?Y zt#>oPX@Dtkoff&R;CffZ<6u!09n)!%k(Q;ZJ5837$>fEH8YCCa!| z$?-0MR5XL|w*p$ESdZ}K%!D6NFtLn=(D%(H2Y?o6g0^}tM!G((3G716>%7>kk|HAs zB2A^~{C zpdq4~Ax%KnDBId8OSXZUqSH2NFc{;ruQ#j;A6YKQU%8# z%E$jhdva_;HN1aUpbgr_bnQl5z$xZSot$oPz>$*@*NX8W&d+gY1m5Xip1)#9WpG)l z9$5U8t}WrmHdB-Eqg!Ce}9tM$kr_qGFO3Xo5Cq3@jN? zE_>bca4%{AoSK!`L0y*mUhy9$mR;OES1;KoZ{uO6mri+Y{dp2nCuR>Bp$Y`hDo z@3O+R1$9k@?ZgF~@>dNrID#uUgF7@BT1XSLL8C9zkyPtY_4D@5f#pwsSh8)(rLqH} zUVhMPG!7S0FC&oB+_`$en&%7irniqXeWFCGwi@v;qLve#OQ>W1eNg*2a4Mx9E;Bk$ zyu~}LLDZoM+Muz{sikEk$7@Rl?zp&P=5;i#StPw^{m9GbJWq5oeX2B=d63qEFQVVo zIgjcV-X4KV(Feb{3~se?h8A_nz@1t~xA+(jK-#p?-tPN(C^x;b%8N#USN98*!IeYL z9vjX)YUyN&BC%)=!0)VJs+95uR}4K1ZsietjiFB(w6}YI4o#*&^RwE=X^RIOzPMw? z_o3Xmm7&~udT4k0jlzwiF9veDzhU)^K@-_2Q61o6r&`5Ti4(YmcBS7ixDsb@hX!b| z1bUhl3w6j zd-AD*eJo{U-`0_>eM`H*IHtLM$9gdj$%1_pMQe3GXbLAkr%@Menv_VD?~SwjUR+fWt{atW;+nZPlk5QsR-@K!s>fNTh#ML_|YXECtAw}Z?+|@9yfpqY}kM;c|p(N4RQly_Crh^ zTsM4U>7Qp+RPDiK`$fHQ{mXalBnVi*tcpcKWUGK|)`;it#V1S2T*3NR{u-jVJ2C*F z=t~bQ>3_%KfdQ<@fDE<@$!0#;zUL0`Nsgp~4@Q2Bz@u8kxYuK3VUby+=|XLR0j$Uf z54K3yOI2FjpWC) z-#q0h{QbC+^8I{ejZsj?;YwYH7&UsIu#3nBY{6!u+6K`ZisV{YxZ#y@^iox?Vg3ex zJJ_@X&<1U9B{gs+VZ%nF>G>M5z-*?4EOJZp*9L;D2%;?7w#pHofD{Zyk3PIF4OPt}11 zOkg*OsPK#FZ68x5w@8^;N%5A6v~6Y4@EsM~T7bDvbFDp4t7M=6eg*{92*S;7&P`!1u z?$Yykr%~|tTZEBsH;faGPG?L=`ao{REb-CUT}UhAvIBt@6@qINuV<0*(7oh_YLZz zO|v=^$jfRUcOuiiZcP7#?>a?s!03Jn-~BhkzAn$|8D3-m0#b)|yCXX#fBK literal 0 HcmV?d00001 diff --git a/dark-web-extension/manifest.json b/dark-web-extension/manifest.json new file mode 100644 index 00000000..df64bfd1 --- /dev/null +++ b/dark-web-extension/manifest.json @@ -0,0 +1,31 @@ +{ + "manifest_version": 2, + "name": "dark", + "description": "Converts Grafana dashboards into an equivalent DARK YAML file", + "version": "0.0.1", + "icons": { + "64": "icons/icon.png" + }, + + "permissions": [ + "downloads" + ], + + "background": { + "scripts": [ + "wasm_exec.js", + "background_script.js" + ] + }, + "content_scripts": [ + { + "matches": [ + "http://*/*", + "https://*/*" + ], + "js": [ + "content_script.js" + ] + } + ] +} \ No newline at end of file diff --git a/dark-web-extension/wasm_exec.js b/dark-web-extension/wasm_exec.js new file mode 100644 index 00000000..9ce6a20c --- /dev/null +++ b/dark-web-extension/wasm_exec.js @@ -0,0 +1,554 @@ +// Copyright 2018 The Go Authors. All rights reserved. +// Use of this source code is governed by a BSD-style +// license that can be found in the LICENSE file. + +"use strict"; + +(() => { + const enosys = () => { + const err = new Error("not implemented"); + err.code = "ENOSYS"; + return err; + }; + + if (!globalThis.fs) { + let outputBuf = ""; + globalThis.fs = { + constants: { O_WRONLY: -1, O_RDWR: -1, O_CREAT: -1, O_TRUNC: -1, O_APPEND: -1, O_EXCL: -1 }, // unused + writeSync(fd, buf) { + outputBuf += decoder.decode(buf); + const nl = outputBuf.lastIndexOf("\n"); + if (nl != -1) { + console.log(outputBuf.substr(0, nl)); + outputBuf = outputBuf.substr(nl + 1); + } + return buf.length; + }, + write(fd, buf, offset, length, position, callback) { + if (offset !== 0 || length !== buf.length || position !== null) { + callback(enosys()); + return; + } + const n = this.writeSync(fd, buf); + callback(null, n); + }, + chmod(path, mode, callback) { callback(enosys()); }, + chown(path, uid, gid, callback) { callback(enosys()); }, + close(fd, callback) { callback(enosys()); }, + fchmod(fd, mode, callback) { callback(enosys()); }, + fchown(fd, uid, gid, callback) { callback(enosys()); }, + fstat(fd, callback) { callback(enosys()); }, + fsync(fd, callback) { callback(null); }, + ftruncate(fd, length, callback) { callback(enosys()); }, + lchown(path, uid, gid, callback) { callback(enosys()); }, + link(path, link, callback) { callback(enosys()); }, + lstat(path, callback) { callback(enosys()); }, + mkdir(path, perm, callback) { callback(enosys()); }, + open(path, flags, mode, callback) { callback(enosys()); }, + read(fd, buffer, offset, length, position, callback) { callback(enosys()); }, + readdir(path, callback) { callback(enosys()); }, + readlink(path, callback) { callback(enosys()); }, + rename(from, to, callback) { callback(enosys()); }, + rmdir(path, callback) { callback(enosys()); }, + stat(path, callback) { callback(enosys()); }, + symlink(path, link, callback) { callback(enosys()); }, + truncate(path, length, callback) { callback(enosys()); }, + unlink(path, callback) { callback(enosys()); }, + utimes(path, atime, mtime, callback) { callback(enosys()); }, + }; + } + + if (!globalThis.process) { + globalThis.process = { + getuid() { return -1; }, + getgid() { return -1; }, + geteuid() { return -1; }, + getegid() { return -1; }, + getgroups() { throw enosys(); }, + pid: -1, + ppid: -1, + umask() { throw enosys(); }, + cwd() { throw enosys(); }, + chdir() { throw enosys(); }, + } + } + + if (!globalThis.crypto) { + throw new Error("globalThis.crypto is not available, polyfill required (crypto.getRandomValues only)"); + } + + if (!globalThis.performance) { + throw new Error("globalThis.performance is not available, polyfill required (performance.now only)"); + } + + if (!globalThis.TextEncoder) { + throw new Error("globalThis.TextEncoder is not available, polyfill required"); + } + + if (!globalThis.TextDecoder) { + throw new Error("globalThis.TextDecoder is not available, polyfill required"); + } + + const encoder = new TextEncoder("utf-8"); + const decoder = new TextDecoder("utf-8"); + + globalThis.Go = class { + constructor() { + this.argv = ["js"]; + this.env = {}; + this.exit = (code) => { + if (code !== 0) { + console.warn("exit code:", code); + } + }; + this._exitPromise = new Promise((resolve) => { + this._resolveExitPromise = resolve; + }); + this._pendingEvent = null; + this._scheduledTimeouts = new Map(); + this._nextCallbackTimeoutID = 1; + + const setInt64 = (addr, v) => { + this.mem.setUint32(addr + 0, v, true); + this.mem.setUint32(addr + 4, Math.floor(v / 4294967296), true); + } + + const getInt64 = (addr) => { + const low = this.mem.getUint32(addr + 0, true); + const high = this.mem.getInt32(addr + 4, true); + return low + high * 4294967296; + } + + const loadValue = (addr) => { + const f = this.mem.getFloat64(addr, true); + if (f === 0) { + return undefined; + } + if (!isNaN(f)) { + return f; + } + + const id = this.mem.getUint32(addr, true); + return this._values[id]; + } + + const storeValue = (addr, v) => { + const nanHead = 0x7FF80000; + + if (typeof v === "number" && v !== 0) { + if (isNaN(v)) { + this.mem.setUint32(addr + 4, nanHead, true); + this.mem.setUint32(addr, 0, true); + return; + } + this.mem.setFloat64(addr, v, true); + return; + } + + if (v === undefined) { + this.mem.setFloat64(addr, 0, true); + return; + } + + let id = this._ids.get(v); + if (id === undefined) { + id = this._idPool.pop(); + if (id === undefined) { + id = this._values.length; + } + this._values[id] = v; + this._goRefCounts[id] = 0; + this._ids.set(v, id); + } + this._goRefCounts[id]++; + let typeFlag = 0; + switch (typeof v) { + case "object": + if (v !== null) { + typeFlag = 1; + } + break; + case "string": + typeFlag = 2; + break; + case "symbol": + typeFlag = 3; + break; + case "function": + typeFlag = 4; + break; + } + this.mem.setUint32(addr + 4, nanHead | typeFlag, true); + this.mem.setUint32(addr, id, true); + } + + const loadSlice = (addr) => { + const array = getInt64(addr + 0); + const len = getInt64(addr + 8); + return new Uint8Array(this._inst.exports.mem.buffer, array, len); + } + + const loadSliceOfValues = (addr) => { + const array = getInt64(addr + 0); + const len = getInt64(addr + 8); + const a = new Array(len); + for (let i = 0; i < len; i++) { + a[i] = loadValue(array + i * 8); + } + return a; + } + + const loadString = (addr) => { + const saddr = getInt64(addr + 0); + const len = getInt64(addr + 8); + return decoder.decode(new DataView(this._inst.exports.mem.buffer, saddr, len)); + } + + const timeOrigin = Date.now() - performance.now(); + this.importObject = { + go: { + // Go's SP does not change as long as no Go code is running. Some operations (e.g. calls, getters and setters) + // may synchronously trigger a Go event handler. This makes Go code get executed in the middle of the imported + // function. A goroutine can switch to a new stack if the current stack is too small (see morestack function). + // This changes the SP, thus we have to update the SP used by the imported function. + + // func wasmExit(code int32) + "runtime.wasmExit": (sp) => { + sp >>>= 0; + const code = this.mem.getInt32(sp + 8, true); + this.exited = true; + delete this._inst; + delete this._values; + delete this._goRefCounts; + delete this._ids; + delete this._idPool; + this.exit(code); + }, + + // func wasmWrite(fd uintptr, p unsafe.Pointer, n int32) + "runtime.wasmWrite": (sp) => { + sp >>>= 0; + const fd = getInt64(sp + 8); + const p = getInt64(sp + 16); + const n = this.mem.getInt32(sp + 24, true); + fs.writeSync(fd, new Uint8Array(this._inst.exports.mem.buffer, p, n)); + }, + + // func resetMemoryDataView() + "runtime.resetMemoryDataView": (sp) => { + sp >>>= 0; + this.mem = new DataView(this._inst.exports.mem.buffer); + }, + + // func nanotime1() int64 + "runtime.nanotime1": (sp) => { + sp >>>= 0; + setInt64(sp + 8, (timeOrigin + performance.now()) * 1000000); + }, + + // func walltime() (sec int64, nsec int32) + "runtime.walltime": (sp) => { + sp >>>= 0; + const msec = (new Date).getTime(); + setInt64(sp + 8, msec / 1000); + this.mem.setInt32(sp + 16, (msec % 1000) * 1000000, true); + }, + + // func scheduleTimeoutEvent(delay int64) int32 + "runtime.scheduleTimeoutEvent": (sp) => { + sp >>>= 0; + const id = this._nextCallbackTimeoutID; + this._nextCallbackTimeoutID++; + this._scheduledTimeouts.set(id, setTimeout( + () => { + this._resume(); + while (this._scheduledTimeouts.has(id)) { + // for some reason Go failed to register the timeout event, log and try again + // (temporary workaround for https://github.com/golang/go/issues/28975) + console.warn("scheduleTimeoutEvent: missed timeout event"); + this._resume(); + } + }, + getInt64(sp + 8) + 1, // setTimeout has been seen to fire up to 1 millisecond early + )); + this.mem.setInt32(sp + 16, id, true); + }, + + // func clearTimeoutEvent(id int32) + "runtime.clearTimeoutEvent": (sp) => { + sp >>>= 0; + const id = this.mem.getInt32(sp + 8, true); + clearTimeout(this._scheduledTimeouts.get(id)); + this._scheduledTimeouts.delete(id); + }, + + // func getRandomData(r []byte) + "runtime.getRandomData": (sp) => { + sp >>>= 0; + crypto.getRandomValues(loadSlice(sp + 8)); + }, + + // func finalizeRef(v ref) + "syscall/js.finalizeRef": (sp) => { + sp >>>= 0; + const id = this.mem.getUint32(sp + 8, true); + this._goRefCounts[id]--; + if (this._goRefCounts[id] === 0) { + const v = this._values[id]; + this._values[id] = null; + this._ids.delete(v); + this._idPool.push(id); + } + }, + + // func stringVal(value string) ref + "syscall/js.stringVal": (sp) => { + sp >>>= 0; + storeValue(sp + 24, loadString(sp + 8)); + }, + + // func valueGet(v ref, p string) ref + "syscall/js.valueGet": (sp) => { + sp >>>= 0; + const result = Reflect.get(loadValue(sp + 8), loadString(sp + 16)); + sp = this._inst.exports.getsp() >>> 0; // see comment above + storeValue(sp + 32, result); + }, + + // func valueSet(v ref, p string, x ref) + "syscall/js.valueSet": (sp) => { + sp >>>= 0; + Reflect.set(loadValue(sp + 8), loadString(sp + 16), loadValue(sp + 32)); + }, + + // func valueDelete(v ref, p string) + "syscall/js.valueDelete": (sp) => { + sp >>>= 0; + Reflect.deleteProperty(loadValue(sp + 8), loadString(sp + 16)); + }, + + // func valueIndex(v ref, i int) ref + "syscall/js.valueIndex": (sp) => { + sp >>>= 0; + storeValue(sp + 24, Reflect.get(loadValue(sp + 8), getInt64(sp + 16))); + }, + + // valueSetIndex(v ref, i int, x ref) + "syscall/js.valueSetIndex": (sp) => { + sp >>>= 0; + Reflect.set(loadValue(sp + 8), getInt64(sp + 16), loadValue(sp + 24)); + }, + + // func valueCall(v ref, m string, args []ref) (ref, bool) + "syscall/js.valueCall": (sp) => { + sp >>>= 0; + try { + const v = loadValue(sp + 8); + const m = Reflect.get(v, loadString(sp + 16)); + const args = loadSliceOfValues(sp + 32); + const result = Reflect.apply(m, v, args); + sp = this._inst.exports.getsp() >>> 0; // see comment above + storeValue(sp + 56, result); + this.mem.setUint8(sp + 64, 1); + } catch (err) { + sp = this._inst.exports.getsp() >>> 0; // see comment above + storeValue(sp + 56, err); + this.mem.setUint8(sp + 64, 0); + } + }, + + // func valueInvoke(v ref, args []ref) (ref, bool) + "syscall/js.valueInvoke": (sp) => { + sp >>>= 0; + try { + const v = loadValue(sp + 8); + const args = loadSliceOfValues(sp + 16); + const result = Reflect.apply(v, undefined, args); + sp = this._inst.exports.getsp() >>> 0; // see comment above + storeValue(sp + 40, result); + this.mem.setUint8(sp + 48, 1); + } catch (err) { + sp = this._inst.exports.getsp() >>> 0; // see comment above + storeValue(sp + 40, err); + this.mem.setUint8(sp + 48, 0); + } + }, + + // func valueNew(v ref, args []ref) (ref, bool) + "syscall/js.valueNew": (sp) => { + sp >>>= 0; + try { + const v = loadValue(sp + 8); + const args = loadSliceOfValues(sp + 16); + const result = Reflect.construct(v, args); + sp = this._inst.exports.getsp() >>> 0; // see comment above + storeValue(sp + 40, result); + this.mem.setUint8(sp + 48, 1); + } catch (err) { + sp = this._inst.exports.getsp() >>> 0; // see comment above + storeValue(sp + 40, err); + this.mem.setUint8(sp + 48, 0); + } + }, + + // func valueLength(v ref) int + "syscall/js.valueLength": (sp) => { + sp >>>= 0; + setInt64(sp + 16, parseInt(loadValue(sp + 8).length)); + }, + + // valuePrepareString(v ref) (ref, int) + "syscall/js.valuePrepareString": (sp) => { + sp >>>= 0; + const str = encoder.encode(String(loadValue(sp + 8))); + storeValue(sp + 16, str); + setInt64(sp + 24, str.length); + }, + + // valueLoadString(v ref, b []byte) + "syscall/js.valueLoadString": (sp) => { + sp >>>= 0; + const str = loadValue(sp + 8); + loadSlice(sp + 16).set(str); + }, + + // func valueInstanceOf(v ref, t ref) bool + "syscall/js.valueInstanceOf": (sp) => { + sp >>>= 0; + this.mem.setUint8(sp + 24, (loadValue(sp + 8) instanceof loadValue(sp + 16)) ? 1 : 0); + }, + + // func copyBytesToGo(dst []byte, src ref) (int, bool) + "syscall/js.copyBytesToGo": (sp) => { + sp >>>= 0; + const dst = loadSlice(sp + 8); + const src = loadValue(sp + 32); + if (!(src instanceof Uint8Array || src instanceof Uint8ClampedArray)) { + this.mem.setUint8(sp + 48, 0); + return; + } + const toCopy = src.subarray(0, dst.length); + dst.set(toCopy); + setInt64(sp + 40, toCopy.length); + this.mem.setUint8(sp + 48, 1); + }, + + // func copyBytesToJS(dst ref, src []byte) (int, bool) + "syscall/js.copyBytesToJS": (sp) => { + sp >>>= 0; + const dst = loadValue(sp + 8); + const src = loadSlice(sp + 16); + if (!(dst instanceof Uint8Array || dst instanceof Uint8ClampedArray)) { + this.mem.setUint8(sp + 48, 0); + return; + } + const toCopy = src.subarray(0, dst.length); + dst.set(toCopy); + setInt64(sp + 40, toCopy.length); + this.mem.setUint8(sp + 48, 1); + }, + + "debug": (value) => { + console.log(value); + }, + } + }; + } + + async run(instance) { + if (!(instance instanceof WebAssembly.Instance)) { + throw new Error("Go.run: WebAssembly.Instance expected"); + } + this._inst = instance; + this.mem = new DataView(this._inst.exports.mem.buffer); + this._values = [ // JS values that Go currently has references to, indexed by reference id + NaN, + 0, + null, + true, + false, + globalThis, + this, + ]; + this._goRefCounts = new Array(this._values.length).fill(Infinity); // number of references that Go has to a JS value, indexed by reference id + this._ids = new Map([ // mapping from JS values to reference ids + [0, 1], + [null, 2], + [true, 3], + [false, 4], + [globalThis, 5], + [this, 6], + ]); + this._idPool = []; // unused ids that have been garbage collected + this.exited = false; // whether the Go program has exited + + // Pass command line arguments and environment variables to WebAssembly by writing them to the linear memory. + let offset = 4096; + + const strPtr = (str) => { + const ptr = offset; + const bytes = encoder.encode(str + "\0"); + new Uint8Array(this.mem.buffer, offset, bytes.length).set(bytes); + offset += bytes.length; + if (offset % 8 !== 0) { + offset += 8 - (offset % 8); + } + return ptr; + }; + + const argc = this.argv.length; + + const argvPtrs = []; + this.argv.forEach((arg) => { + argvPtrs.push(strPtr(arg)); + }); + argvPtrs.push(0); + + const keys = Object.keys(this.env).sort(); + keys.forEach((key) => { + argvPtrs.push(strPtr(`${key}=${this.env[key]}`)); + }); + argvPtrs.push(0); + + const argv = offset; + argvPtrs.forEach((ptr) => { + this.mem.setUint32(offset, ptr, true); + this.mem.setUint32(offset + 4, 0, true); + offset += 8; + }); + + // The linker guarantees global data starts from at least wasmMinDataAddr. + // Keep in sync with cmd/link/internal/ld/data.go:wasmMinDataAddr. + const wasmMinDataAddr = 4096 + 8192; + if (offset >= wasmMinDataAddr) { + throw new Error("total length of command line and environment variables exceeds limit"); + } + + this._inst.exports.run(argc, argv); + if (this.exited) { + this._resolveExitPromise(); + } + await this._exitPromise; + } + + _resume() { + if (this.exited) { + throw new Error("Go program has already exited"); + } + this._inst.exports.resume(); + if (this.exited) { + this._resolveExitPromise(); + } + } + + _makeFuncWrapper(id) { + const go = this; + return function () { + const event = { id: id, this: this, args: arguments }; + go._pendingEvent = event; + go._resume(); + return event.result; + }; + } + } +})(); From 61cae914b4e5f3da68d4a826a4c1f701b7861d39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20Gomez?= Date: Sun, 28 Aug 2022 22:45:16 +0200 Subject: [PATCH 2/3] More build instructions --- .gitignore | 3 ++- dark-web-extension/README.md | 8 ++++++++ dark-web-extension/background_script.js | 9 ++++++++- dark-web-extension/content_script.js | 3 ++- 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 459e64eb..a5f8941e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ /bin -*.wasm +/dark-web-extension/*.wasm +/dark-web-extension/web-ext-artifacts diff --git a/dark-web-extension/README.md b/dark-web-extension/README.md index 6cb61a79..0dfa0cde 100644 --- a/dark-web-extension/README.md +++ b/dark-web-extension/README.md @@ -24,4 +24,12 @@ Distributed with Go: ```sh cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./dark-web-extension +``` + +### Building the extension + +```sh +npm install --global web-ext +cd ./dark-web-extension/ +web-ext build ``` \ No newline at end of file diff --git a/dark-web-extension/background_script.js b/dark-web-extension/background_script.js index 22fb996a..58d9ecb7 100644 --- a/dark-web-extension/background_script.js +++ b/dark-web-extension/background_script.js @@ -4,7 +4,7 @@ console.debug("starting background worker"); browser.runtime.onMessage.addListener(handleMessage); -function handleMessage(request, _sender, _sendResponse) { +function handleMessage(request, _sender, sendResponse) { console.info(`content script sent a message`, request); if (request.action === 'convert-to-k8s') { @@ -16,8 +16,15 @@ function handleMessage(request, _sender, _sendResponse) { filename: 'dark-dashboard.yaml', conflictAction: 'uniquify', }); + + sendResponse({ + success: true, + result: result, + }); }); } + + return true; } async function convertToK8s(dashboardModel) { diff --git a/dark-web-extension/content_script.js b/dark-web-extension/content_script.js index b6c856a0..39ab6254 100644 --- a/dark-web-extension/content_script.js +++ b/dark-web-extension/content_script.js @@ -58,6 +58,7 @@ function triggerExport() { fetch(`${window.location.origin}/api/dashboards/uid/${dashboardUID}`) .then(response => response.json()) .then(apiResponse => convertGrafanaDashboard(apiResponse.dashboard)) + .then(response => console.debug('response', response)) .catch(error => { console.error(`Error: ${error}`); }) @@ -88,7 +89,7 @@ function waitForElm(selector) { return resolve(document.querySelector(selector)); } - const observer = new MutationObserver(mutations => { + const observer = new MutationObserver(() => { if (document.querySelector(selector)) { resolve(document.querySelector(selector)); observer.disconnect(); From 3b0991fe49b02a650cce6a98b16da85c6a673564 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20Gomez?= Date: Wed, 22 Mar 2023 17:01:24 +0100 Subject: [PATCH 3/3] Remove the dust --- cmd/wasm/main.go | 2 ++ dark-web-extension/README.md | 4 ++- dark-web-extension/content_script.js | 29 +++++++++---------- dark-web-extension/manifest.json | 2 +- dark-web-extension/wasm_exec.js | 4 +-- .../grafanadashboard_controller.go | 7 ++--- internal/pkg/converter/json.go | 4 +-- internal/pkg/model/constants.go | 3 ++ 8 files changed, 29 insertions(+), 26 deletions(-) create mode 100644 internal/pkg/model/constants.go diff --git a/cmd/wasm/main.go b/cmd/wasm/main.go index d659c70d..cf8e7339 100644 --- a/cmd/wasm/main.go +++ b/cmd/wasm/main.go @@ -1,3 +1,5 @@ +//go:build js && wasm + package main import ( diff --git a/dark-web-extension/README.md b/dark-web-extension/README.md index 0dfa0cde..6f00a731 100644 --- a/dark-web-extension/README.md +++ b/dark-web-extension/README.md @@ -32,4 +32,6 @@ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" ./dark-web-extension npm install --global web-ext cd ./dark-web-extension/ web-ext build -``` \ No newline at end of file +``` + +The extension can then be installing from the file generated by `web-ext`: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#installing diff --git a/dark-web-extension/content_script.js b/dark-web-extension/content_script.js index 39ab6254..d03feb4c 100644 --- a/dark-web-extension/content_script.js +++ b/dark-web-extension/content_script.js @@ -3,46 +3,43 @@ if (isGrafana()) { console.debug("content_script bootstrap"); // hackish way of giving enough time for grafana to load the dashboard - waitForElm('.page-toolbar').then((elm) => { + waitForElm('.page-toolbar').then(() => { console.debug('page-toolbar found, inserting DARK export button'); setupExportButton(); }); } function setupExportButton() { - var elements = document.getElementsByClassName("page-toolbar"); + const buttonsContainer = document.querySelector('.page-toolbar > div:last-child'); - if (elements.length === 0) { - console.debug("page-toolbar not found"); + if (buttonsContainer.length === 0) { + console.debug("buttons container not found"); return; } console.debug("appending export button"); - const pageToolbarElmt = elements[0]; - - const lastButton = pageToolbarElmt.childNodes[pageToolbarElmt.childNodes.length - 1]; + const lastButton = buttonsContainer.childNodes[buttonsContainer.childNodes.length - 1]; const darkExportButton = lastButton.cloneNode(true); darkExportButton.onclick = triggerExport; darkExportButton.title = 'Export as DARK dashboard'; - darkExportButton.childNodes[0].childNodes[0].childNodes[0].innerHTML = ` - - + + - + + l100.17,69.451c2.518,1.753,5.459,2.631,8.414,2.631c2.355,0,4.696-0.553,6.857-1.676c4.855-2.549,7.909-7.6,7.909-13.092V175.989z" /> `; - pageToolbarElmt.appendChild(darkExportButton); + buttonsContainer.appendChild(darkExportButton); } function triggerExport() { diff --git a/dark-web-extension/manifest.json b/dark-web-extension/manifest.json index df64bfd1..f53456bb 100644 --- a/dark-web-extension/manifest.json +++ b/dark-web-extension/manifest.json @@ -28,4 +28,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/dark-web-extension/wasm_exec.js b/dark-web-extension/wasm_exec.js index 9ce6a20c..e6c89210 100644 --- a/dark-web-extension/wasm_exec.js +++ b/dark-web-extension/wasm_exec.js @@ -19,8 +19,8 @@ outputBuf += decoder.decode(buf); const nl = outputBuf.lastIndexOf("\n"); if (nl != -1) { - console.log(outputBuf.substr(0, nl)); - outputBuf = outputBuf.substr(nl + 1); + console.log(outputBuf.substring(0, nl)); + outputBuf = outputBuf.substring(nl + 1); } return buf.length; }, diff --git a/internal/pkg/controllers/grafanadashboard_controller.go b/internal/pkg/controllers/grafanadashboard_controller.go index 9a9464fa..fccccda9 100644 --- a/internal/pkg/controllers/grafanadashboard_controller.go +++ b/internal/pkg/controllers/grafanadashboard_controller.go @@ -3,21 +3,20 @@ package controllers import ( "context" - "sigs.k8s.io/controller-runtime/pkg/controller" - k8skevingomezfrv1 "github.com/K-Phoen/dark/api/v1" "github.com/K-Phoen/dark/internal/pkg/grafana" + "github.com/K-Phoen/dark/internal/pkg/model" "github.com/K-Phoen/grabana" "k8s.io/apimachinery/pkg/runtime" "k8s.io/client-go/tools/record" ctrl "sigs.k8s.io/controller-runtime" "sigs.k8s.io/controller-runtime/pkg/client" + "sigs.k8s.io/controller-runtime/pkg/controller" "sigs.k8s.io/controller-runtime/pkg/controller/controllerutil" "sigs.k8s.io/controller-runtime/pkg/log" ) const grafanaDashboardFinalizerName = "grafanadashboards.k8s.kevingomez.fr/finalizer" -const DashboardFolderAnnotation = "dark/folder" type dashboardManager interface { FromRawSpec(ctx context.Context, folderName string, uid string, rawJSON []byte) error @@ -103,7 +102,7 @@ func (r *GrafanaDashboardReconciler) Reconcile(ctx context.Context, req ctrl.Req return ctrl.Result{}, nil } - folder := dashboard.Annotations[DashboardFolderAnnotation] + folder := dashboard.Annotations[model.DashboardFolderAnnotation] if dashboard.Folder != "" { folder = dashboard.Folder } diff --git a/internal/pkg/converter/json.go b/internal/pkg/converter/json.go index 1e466076..956f9dcf 100644 --- a/internal/pkg/converter/json.go +++ b/internal/pkg/converter/json.go @@ -6,7 +6,7 @@ import ( "io" v1 "github.com/K-Phoen/dark/api/v1" - "github.com/K-Phoen/dark/internal/pkg/controllers" + "github.com/K-Phoen/dark/internal/pkg/model" grabana "github.com/K-Phoen/grabana/decoder" "github.com/K-Phoen/sdk" "go.uber.org/zap" @@ -90,7 +90,7 @@ func (converter *JSON) ToK8SManifest(input io.Reader, output io.Writer, options if options.Folder != "" { manifest.Metadata["annotations"] = map[string]string{ - controllers.DashboardFolderAnnotation: options.Folder, + model.DashboardFolderAnnotation: options.Folder, } } diff --git a/internal/pkg/model/constants.go b/internal/pkg/model/constants.go new file mode 100644 index 00000000..663f3857 --- /dev/null +++ b/internal/pkg/model/constants.go @@ -0,0 +1,3 @@ +package model + +const DashboardFolderAnnotation = "dark/folder"