diff --git a/README.md b/README.md index cf8af69..a1ec4dc 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Config example: +Config example (default location $HOME/.config/datagraph.yaml): ```yaml network: diff --git a/main.go b/main.go index 3b317cf..197d062 100644 --- a/main.go +++ b/main.go @@ -12,7 +12,7 @@ import ( "path" ) -const VERSION = "v1" +const VERSION = "v3" var ( flagConfigFile string diff --git a/node.go b/node.go index 2bf6302..39ac133 100644 --- a/node.go +++ b/node.go @@ -149,7 +149,7 @@ func GetNodeTree(startNodeID, maxDepth int, withData bool) (topNode *Node, err e n.id, ns.depth+1 AS depth FROM node n - INNER JOIN nodes ns ON ns.depth < $2 AND n.parent_id = ns.id + INNER JOIN nodes ns ON ns.depth < $2 AND n.parent_id = ns.id AND n.id != ns.id ) SEARCH DEPTH FIRST BY id SET ordercol diff --git a/static/css/main.css b/static/css/main.css index a3e4c8b..04e9df3 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -53,9 +53,10 @@ button { } #menu { grid-area: menu; - grid-template-columns: repeat(100, min-content); + grid-template-columns: repeat(5, min-content) 1fr; grid-gap: 24px; align-items: center; + padding-right: 24px !important; } #menu.page { display: grid; @@ -70,6 +71,11 @@ button { #menu .item.selected { font-weight: bold; } +#menu .version { + text-align: right; + align-self: start; + color: #888; +} #logo img { height: 64px; margin-right: 32px; @@ -219,6 +225,24 @@ dialog#create-type > div { dialog::backdrop { background-color: rgba(0, 0, 0, 0.75); } +dialog .dialog-close { + position: absolute; + top: 8px; + right: 8px; + width: 32px !important; + height: 32px !important; + min-width: unset !important; +} +dialog .dialog-close::after { + display: block; + content: ""; + width: 100%; + height: 100%; + background-image: url("/images/v0/node_modules/@mdi/svg/svg/close-box-outline.svg"); + background-size: 32px; + background-repeat: no-repeat; + background-position: 0px 0px; +} select:focus { outline: 2px solid #888; outline-offset: -2px; @@ -526,6 +550,13 @@ dialog#connection-data div.button { grid-gap: 8px; padding: 32px; } +#script-hook-dialog img.trash { + position: absolute; + right: 44px; + top: 8px; + height: 32px; + cursor: pointer; +} #script-hook-dialog .top { display: grid; grid-template-columns: 1fr min-content; @@ -536,10 +567,6 @@ dialog#connection-data div.button { font-weight: bold; color: var(--section-color); } -#script-hook-dialog .top img { - height: 32px; - cursor: pointer; -} #script-hook-dialog .label { font-weight: bold; margin-top: 16px; @@ -612,11 +639,14 @@ dialog#connection-data div.button { font-weight: bold; color: var(--section-color); } -#script-execution-value-dialog .top .copy { +#script-execution-value-dialog .copy { height: 32px; cursor: pointer; + position: absolute; + right: 44px; + top: 8px; } -#script-execution-value-dialog .top .copy.clicked { +#script-execution-value-dialog .copy.clicked { filter: invert(50%); } #script-execution-value-dialog .label { diff --git a/static/js/app.mjs b/static/js/app.mjs index dba1c17..b6decb4 100644 --- a/static/js/app.mjs +++ b/static/js/app.mjs @@ -500,7 +500,8 @@ class NodeCreateDialog { this.dialog.id = 'create-type' this.dialog.addEventListener('close', () => this.dialog.remove()) this.dialog.innerHTML = ` -
+
+
@@ -1244,7 +1245,7 @@ class ScriptsList extends Component { const script = { Group: 'Uncategorized', Name: name, - Source: "%!/bin/bash\n", + Source: "#!/bin/bash\n", } fetch(`/scripts/update/0`, { method: 'POST', @@ -1388,6 +1389,7 @@ class ScriptSelectDialog extends Component { renderComponent() {// {{{ const div = document.createElement('div') div.innerHTML = ` +
Search for script
@@ -1469,9 +1471,10 @@ class ScriptHookDialog extends Component { renderComponent() {// {{{ const div = document.createElement('div') div.innerHTML = ` +
+
-
SSH
@@ -1493,7 +1496,7 @@ class ScriptHookDialog extends Component { ` div.querySelector('.header').innerText = `Hook for ${this.hook.Script.Name}` - div.querySelector('.top img').addEventListener('click', () => this.delete()) + div.querySelector('.trash').addEventListener('click', () => this.delete()) this.ssh = div.querySelector('.ssh') this.ssh.value = this.hook.SSH @@ -1693,9 +1696,10 @@ class ScriptExecutionValueDialog extends Component { renderComponent() {// {{{ const div = document.createElement('div') div.innerHTML = ` +
+
${this.valueName}
-
${this.execution.ID}
diff --git a/static/js/select_node.mjs b/static/js/select_node.mjs index 3e92114..c6ba292 100644 --- a/static/js/select_node.mjs +++ b/static/js/select_node.mjs @@ -18,6 +18,7 @@ export class SelectNodeDialog { dlg.addEventListener('close', () => dlg.remove()) dlg.innerHTML = ` +
Search for node
@@ -203,13 +204,12 @@ export class ConnectionDataDialog { dlg.addEventListener('close', () => dlg.remove()) dlg.innerHTML = ` +
+
+ +
-
Connection data
-
-
- -
-
+
Connection data
${this.node.Name}
diff --git a/static/less/main.less b/static/less/main.less index 03379e3..5485143 100644 --- a/static/less/main.less +++ b/static/less/main.less @@ -69,9 +69,10 @@ button { #menu { grid-area: menu; - grid-template-columns: repeat(100, min-content); + grid-template-columns: repeat(5, min-content) 1fr; grid-gap: 24px; align-items: center; + padding-right: 24px !important; &.page { display: grid; @@ -88,6 +89,12 @@ button { font-weight: bold; } } + + .version { + text-align: right; + align-self: start; + color: #888; + } } #logo { @@ -280,18 +287,41 @@ datalist { } } -dialog#create-type { - min-width: 400px; +dialog { + &#create-type { + min-width: 400px; - & > div { - display: grid; - grid-gap: 8px; + & > div { + display: grid; + grid-gap: 8px; + } + } + + &::backdrop { + background-color: rgba(0, 0, 0, 0.75); + } + + .dialog-close { + position: absolute; + top: 8px; + right: 8px; + width: 32px !important; + height: 32px !important; + min-width: unset !important; + + &::after { + display: block; + content: ""; + width: 100%; + height: 100%; + background-image: url("/images/v0/node_modules/@mdi/svg/svg/close-box-outline.svg"); + background-size: 32px; + background-repeat: no-repeat; + background-position: 0px 0px; + } } } -dialog::backdrop { - background-color: rgba(0, 0, 0, 0.75); -} select:focus { outline: 2px solid #888; @@ -674,6 +704,14 @@ dialog#connection-data { grid-gap: 8px; padding: 32px; + img.trash { + position: absolute; + right: 44px; + top: 8px; + height: 32px; + cursor: pointer; + } + .top { display: grid; grid-template-columns: 1fr min-content; @@ -684,11 +722,6 @@ dialog#connection-data { font-weight: bold; color: var(--section-color); } - - img { - height: 32px; - cursor: pointer; - } } .label { @@ -777,13 +810,17 @@ dialog#connection-data { color: var(--section-color); } - .copy { - height: 32px; - cursor: pointer; + } - &.clicked { - filter: invert(50%); - } + .copy { + height: 32px; + cursor: pointer; + position: absolute; + right: 44px; + top: 8px; + + &.clicked { + filter: invert(50%); } } diff --git a/views/pages/app.gotmpl b/views/pages/app.gotmpl index 5909db8..bb00aae 100644 --- a/views/pages/app.gotmpl +++ b/views/pages/app.gotmpl @@ -26,6 +26,7 @@
Types
Scripts
Script executions
+
{{ .VERSION }}