Not connected.
+Available assets
+{{ msg }}
diff --git a/html/ui/GetCopy-7e3c9678f9647d40.js b/html/ui/GetCopy-2e04b7b63750e25a.js
similarity index 65%
rename from html/ui/GetCopy-7e3c9678f9647d40.js
rename to html/ui/GetCopy-2e04b7b63750e25a.js
index aed4707..18260a2 100644
--- a/html/ui/GetCopy-7e3c9678f9647d40.js
+++ b/html/ui/GetCopy-2e04b7b63750e25a.js
@@ -1,7 +1,7 @@
const GetCopy = {
props: [ 'name', 'href', 'token' ],
data() { return {showCopied: false} },
- template: ` Not connected. Store is new. Option 1: initialize a new store Store is not open. Not logged in. Invalid token {{v.title}} Not connected. Not connected. Store is new. Option 1: initialize a new store Store is not open. Not logged in. Invalid token {{v.title}}copied!{{name}} 🗐`,
+ template: `{{name}} 🗐`,
methods: {
fetch() {
event.preventDefault()
@@ -12,7 +12,7 @@ const GetCopy = {
},
handleFetchError(e) {
console.log("failed to get value:", e)
- alert('failed to get value')
+ this.$root.toast('failed to get value', 'error')
},
fetchAndSave() {
this.fetch().then(resp => resp.blob()).then((value) => {
@@ -23,9 +23,12 @@ const GetCopy = {
this.fetch()
.then((resp) => resp.headers.get("content-type") == "application/json" ? resp.json() : resp.text())
.then((value) => {
- window.navigator.clipboard.writeText(value)
- this.showCopied = true
- setTimeout(() => { this.showCopied = false }, 1000)
+ try {
+ window.navigator.clipboard.writeText(value)
+ this.$root.toast('copied!', 'info')
+ } catch (e) {
+ this.$root.toast('copy failed', 'error')
+ }
}).catch(this.handleFetchError)
},
},
diff --git a/html/ui/app-e7fb26679b9aa0f2.js b/html/ui/app-4f0c6935250753e9.js
similarity index 81%
rename from html/ui/app-e7fb26679b9aa0f2.js
rename to html/ui/app-4f0c6935250753e9.js
index eb946c2..946c9c1 100644
--- a/html/ui/app-e7fb26679b9aa0f2.js
+++ b/html/ui/app-4f0c6935250753e9.js
@@ -21,11 +21,17 @@ createApp({
uiHash: null,
watchingState: false,
state: null,
+ toasts: [],
+ toastId: 0,
}
},
mounted() {
this.session = JSON.parse(sessionStorage.state || "{}")
this.watchPublicState()
+ document.addEventListener('keydown', (e) => this.onKeydown(e))
+ },
+ unmounted() {
+ document.removeEventListener('keydown', (e) => this.onKeydown(e))
},
watch: {
session: {
@@ -56,13 +62,16 @@ createApp({
},
computed: {
- views() {
- var views = [{type: "actions", name: "admin", title: "Admin actions"}];
-
- (this.state.Clusters||[]).forEach((c) => views.push({type: "cluster", name: c.Name, title: `Cluster ${c.Name}`}));
- (this.state.Hosts ||[]).forEach((c) => views.push({type: "host", name: c.Name, title: `Host ${c.Name}`}));
-
- return views.filter((v) => v.type != "host" || v.name.includes(this.viewFilter));
+ adminViews() {
+ return [{type: "actions", name: "admin", title: "Admin actions"}];
+ },
+ clusterViews() {
+ return (this.state.Clusters||[]).map((c) => ({type: "cluster", name: c.Name, title: c.Name}));
+ },
+ hostViews() {
+ return (this.state.Hosts||[])
+ .filter((h) => h.Name.includes(this.viewFilter))
+ .map((h) => ({type: "host", name: h.Name, title: h.Name}));
},
viewObj() {
if (this.view) {
@@ -84,9 +93,32 @@ createApp({
any(array) {
return array && array.length != 0;
},
+ isActive(v) {
+ return this.view && this.view.type == v.type && this.view.name == v.name
+ },
+ onKeydown(e) {
+ if ((e.ctrlKey || e.metaKey) && e.key == 'k') {
+ e.preventDefault()
+ this.$nextTick(() => {
+ const el = document.querySelector('.sidebar input[type="search"]')
+ if (el) el.focus()
+ })
+ return
+ }
+
+ if (e.key == 'Escape') {
+ this.viewFilter = ''
+ return
+ }
+ },
copyText(text) {
event.preventDefault()
- window.navigator.clipboard.writeText(text)
+ try {
+ window.navigator.clipboard.writeText(text)
+ this.toast('copied!', 'info')
+ } catch (e) {
+ this.toast('copy failed: ' + e, 'error')
+ }
},
setToken() {
event.preventDefault()
@@ -177,16 +209,12 @@ createApp({
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.onerror = () => {}
xhr.onload = (r) => {
if (xhr.status != 200) {
- this.error = xhr.response
+ this.toast((xhr.response && xhr.response.message) || 'request failed', 'error')
return
}
- // this.actionResults.splice(idx, 1, {...item, done: true, resp: xhr.responseText})
this.error = null
if (onload) {
onload(xhr.response)
@@ -235,6 +263,14 @@ createApp({
// TODO once-shot download link
return url + '?token=' + this.session.token
},
+ toast(message, kind) {
+ const id = ++this.toastId
+ this.toasts.push({id, message, kind: kind || 'info'})
+ setTimeout(() => this.dismissToast(id), 4000)
+ },
+ dismissToast(id) {
+ this.toasts = this.toasts.filter(t => t.id != id)
+ },
watchPublicState() {
this.watchStream('publicState', '/public-state')
},
diff --git a/html/ui/app.css b/html/ui/app.css
index bee1bd9..9b90cae 100644
--- a/html/ui/app.css
+++ b/html/ui/app.css
@@ -1,12 +1,7 @@
.view-links > span {
- display: inline-block;
+ display: block;
white-space: nowrap;
- margin-right: 1ex;
- margin-bottom: 1ex;
- padding: 0.5ex;
- border: 1pt solid;
- border-radius: 1ex;
cursor: pointer;
}
@@ -15,9 +10,6 @@
display: inline-block;
margin-right: 1ex;
margin-bottom: 1ex;
- padding: 0.5ex;
- border: 1px solid !important;
- border-radius: 1ex;
cursor: pointer;
}
}
@@ -37,7 +29,7 @@
position:relative;
textarea {
- width: 64em;
+ width: 100%;
}
input[type="file"] {
diff --git a/html/ui/index.html b/html/ui/index.html
index 493e515..73e4d87 100644
--- a/html/ui/index.html
+++ b/html/ui/index.html
@@ -10,32 +10,27 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/html/ui/style.css b/html/ui/style.css
index 664d9a1..1ebf588 100644
--- a/html/ui/style.css
+++ b/html/ui/style.css
@@ -1,35 +1,231 @@
:root {
- --bg: #eee;
- --color: black;
- --bevel-dark: darkgray;
- --bevel-light: lightgray;
- --link: blue;
- --input-bg: #ddd;
- --input-text: white;
- --btn-bg: #eee;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --bg: black;
- --color: orange;
- --bevel-dark: #402900;
- --bevel-light: #805300;
+ --bg: #000;
+ --color: #ddd;
+ --accent: #d4a017;
+ --dim: #555;
--link: #31b0fa;
- --input-bg: #111;
- --input-text: #ddd;
- --btn-bg: #222;
- }
+ --input-bg: #1a1a1a;
+ --border: #333;
+ --hover: #222;
}
body {
background: var(--bg);
color: var(--color);
+ font-family: "Courier New", Courier, monospace;
+ font-size: 14px;
+ line-height: 1.5;
+ margin: 0;
+ padding: 0;
}
-button[disabled] {
- opacity: 0.5;
+/* Layout */
+
+html, body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
}
+#app {
+ display: grid;
+ height: 100vh;
+ grid-template: auto 1fr / 18em 1fr;
+ grid-template-areas: "h h" "s m";
+}
+header {
+ grid-area: h;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.5em 1em;
+ border-bottom: 1px solid var(--border);
+}
+#logo > img {
+ vertical-align: middle;
+ margin-right: 0.5em;
+}
+header .utils > * {
+ margin-left: 1em;
+}
+
+.sidebar {
+ grid-area: s;
+ border-right: 1px solid var(--border);
+ padding: 0.5em;
+ overflow-y: auto;
+}
+.sidebar input[type="search"] {
+ width: 100%;
+ box-sizing: border-box;
+ margin-bottom: 0.5em;
+ background: var(--input-bg);
+ color: var(--color);
+ border: 1px solid var(--border);
+ padding: 0.3em 0.5em;
+ font-family: inherit;
+}
+
+.content {
+ grid-area: m;
+ padding: 1em;
+ overflow-y: auto;
+}
+
+/* Sidebar nav sections */
+
+.nav-section {
+ margin: 0.5em 0 0.2em;
+ padding: 0.2em 0.5em;
+ color: var(--dim);
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ font-size: 0.85em;
+ border-bottom: 1px solid var(--border);
+}
+
+/* Sidebar nav items */
+
+.view-links {
+ margin: 0;
+ padding: 0;
+}
+.sidebar:focus-within .view-links > button {
+ color: var(--color);
+}
+.view-links > button {
+ display: block;
+ width: 100%;
+ padding: 0.2em 0.5em;
+ cursor: pointer;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--dim);
+ border: none;
+ border-bottom: 1px solid var(--border);
+ background: none;
+ font: inherit;
+ text-align: left;
+ border-radius: 0;
+}
+.view-links > button:last-child {
+ border-bottom: none;
+}
+.view-links > button:hover {
+ background: var(--hover);
+ color: var(--color);
+}
+.view-links > button.selected {
+ color: var(--accent) !important;
+ border-bottom-color: var(--accent);
+}
+
+/* Headings */
+
+h2 {
+ color: var(--accent);
+ border-bottom: 1px solid var(--border);
+ padding-bottom: 0.3em;
+ margin-top: 0;
+}
+h3 {
+ color: var(--accent);
+ margin: 1em 0 0.5em;
+}
+h3::before {
+ content: "── ";
+}
+h3::after {
+ content: " ──";
+}
+h4 {
+ color: var(--color);
+ margin: 0.5em 0 0.3em;
+ font-weight: bold;
+}
+
+/* Details / summary (collapsible sections) */
+
+details {
+ margin: 0.5em 0;
+ border: 1px solid var(--border);
+}
+details[open] {
+ border-color: var(--accent);
+}
+summary {
+ cursor: pointer;
+ padding: 0.3em 0.5em;
+ background: var(--hover);
+ color: var(--accent);
+ user-select: none;
+}
+summary:hover {
+ background: #2a2a2a;
+}
+details[open] summary {
+ border-bottom: 1px solid var(--border);
+}
+
+/* Tables */
+
+table {
+ border-collapse: collapse;
+ width: 100%;
+}
+th, td {
+ border: 1px solid var(--border);
+ padding: 0.3em 0.5em;
+ text-align: left;
+}
+th {
+ color: var(--accent);
+ font-weight: bold;
+}
+
+/* Form elements */
+
+textarea, select, input {
+ background: var(--input-bg);
+ color: var(--color);
+ border: 1px solid var(--border);
+ padding: 0.3em 0.5em;
+ font-family: inherit;
+ font-size: inherit;
+ box-sizing: border-box;
+}
+textarea:focus, select:focus, input:focus {
+ outline: none;
+ border-color: var(--accent);
+}
+
+button, input[type=button], input[type=submit], ::file-selector-button {
+ background: var(--input-bg);
+ color: var(--color);
+ border: 1px solid var(--border);
+ padding: 0.3em 0.7em;
+ cursor: pointer;
+ font-family: inherit;
+ font-size: inherit;
+}
+button:hover, input[type=button]:hover, input[type=submit]:hover {
+ border-color: var(--accent);
+ color: var(--accent);
+}
+button:active, input[type=button]:active, input[type=submit]:active {
+ background: var(--accent);
+ color: var(--bg);
+}
+button[disabled] {
+ opacity: 0.4;
+ cursor: default;
+}
+button[disabled]:hover {
+ border-color: var(--border);
+ color: var(--color);
+}
+
+/* Links */
a[href], a[href]:visited, button.link {
border: none;
@@ -37,140 +233,153 @@ a[href], a[href]:visited, button.link {
background: none;
cursor: pointer;
text-decoration: none;
+ font-family: inherit;
+ font-size: inherit;
+}
+a[href]:hover {
+ text-decoration: underline;
}
-table {
- border-collapse: collapse;
+/* Radio pills */
+
+label.radio {
+ display: inline-block;
+ margin-right: 0.5em;
+ margin-bottom: 0.5em;
+ padding: 0.3em 0.7em;
+ border: 1px solid var(--border);
+ cursor: pointer;
+ user-select: none;
}
-th, td {
- border-left: dotted 1pt;
- border-right: dotted 1pt;
- border-bottom: dotted 1pt;
- padding: 2pt 4pt;
+label.radio:has(input:checked) {
+ color: var(--accent);
+ border-color: var(--accent);
}
-tr:first-child {
- th, td {
- border-top: dotted 1pt;
- }
+label.radio input {
+ position: absolute;
+ opacity: 0;
+ width: 0;
+ height: 0;
}
-th, tr:last-child > td {
- border-bottom: solid 1pt;
+label.radio:focus-within {
+ color: var(--accent);
+ border-color: var(--accent);
}
+/* Asset checkboxes → [x] / [ ] style */
+
+.downloads label {
+ display: inline-block;
+ margin-right: 0.5em;
+ margin-bottom: 0.5em;
+ padding: 0.2em 0;
+ cursor: pointer;
+ user-select: none;
+ font-family: inherit;
+ border-bottom: 1px solid transparent;
+}
+.downloads label.selected {
+ color: var(--accent);
+ border-bottom-color: var(--accent);
+}
+.downloads label input[type="checkbox"] {
+ position: absolute;
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+.downloads label:focus-within {
+ color: var(--accent);
+ border-bottom-color: var(--accent);
+}
+.downloads label::before {
+ content: "[ ] ";
+ color: var(--dim);
+}
+.downloads label.selected::before {
+ content: "[x] ";
+ color: var(--accent);
+}
+
+/* Toast notifications */
+
+.toasts {
+ position: fixed;
+ bottom: 1em;
+ right: 1em;
+ z-index: 1000;
+ display: flex;
+ flex-direction: column;
+ gap: 0.3em;
+}
+.toast {
+ background: #1a1a1a;
+ border: 1px solid var(--border);
+ padding: 0.5em 1em;
+ max-width: 30em;
+ animation: fadein 0.2s;
+ font-family: inherit;
+ opacity: 1;
+}
+.toast.info {
+ border-color: var(--accent);
+ color: var(--accent);
+}
+.toast.error {
+ background: #100;
+ border-color: #c00;
+ color: #c00;
+}
+@keyframes fadein {
+ from { opacity: 0; transform: translateY(0.5em); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* Terminal output block */
+
+.term {
+ background: #000;
+ border: 1px solid var(--border);
+ padding: 0.5em;
+ word-break: break-all;
+ font-family: inherit;
+ white-space: pre-wrap;
+}
+.term a {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--link);
+}
+
+/* Misc */
+
+.green { color: #0a0; }
+.red { color: #c00; }
+.copy { font-size: small; }
+
+.links > * { margin-left: 1ex; }
+.links > *:first-child { margin-left: 0; }
+
.flat > * { margin-left: 1ex; }
.flat > *:first-child { margin-left: 0; }
-.green { color: green; }
-.red { color: red; }
-
-@media (prefers-color-scheme: dark) {
- .red { color: #c00; }
-}
-
-textarea, select, input {
- background: var(--input-bg);
- color: var(--input-text);
- border: solid 1pt;
- border-color: var(--bevel-light);
- border-top-color: var(--bevel-dark);
- border-left-color: var(--bevel-dark);
- margin: 1pt;
-
- &:focus {
- outline: solid 1pt var(--color);
- }
- }
-
-button, input[type=button], input[type=submit], ::file-selector-button {
- background: var(--btn-bg);
- color: var(--color);
- border: solid 2pt;
- border-color: var(--bevel-dark);
- border-top-color: var(--bevel-light);
- border-left-color: var(--bevel-light);
-
- &:hover {
- background: var(--bevel-dark);
- }
- &:active {
- background: var(--bevel-dark);
- border-color: var(--bevel-light);
- }
-}
-
-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;
+ background: rgba(200,0,0,0.15);
+ border: 1px solid #c00;
+ padding: 0.5em;
+ margin: 0.5em 0;
justify-content: space-between;
align-items: center;
}
-.error .btn-close,
-.error .code {
+.error .btn-close {
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;
-}
-.sheets > *:last-child > table:last-child > tr:last-child > td {
- border-bottom: none;
+ padding: 0.3em 0.7em;
+ cursor: pointer;
}
.notif {
@@ -180,34 +389,21 @@ header .utils > * {
.notif > div:first-child {
position: absolute;
min-width: 100%; height: 100%;
- background: white;
- opacity: 75%;
+ background: var(--bg);
+ opacity: 85%;
text-align: center;
}
-.links > * { margin-left: 1ex; }
-.links > *:first-child { margin-left: 0; }
-
-@media (prefers-color-scheme: dark) {
- .notif > div:first-child {
- background: black;
- }
+.text-and-file {
+ position: relative;
+ display: block;
}
-
-.copy { font-size: small; }
-
-label.radio {
- display: inline-block;
- margin-right: 1ex;
- margin-bottom: 1ex;
- padding: 0.5ex;
- border: 1pt solid;
- border-radius: 1ex;
- cursor: pointer;
+.text-and-file textarea {
+ width: 100%;
+ box-sizing: border-box;
}
-label.radio:has(input:checked) {
- color: var(--link);
-}
-label.radio input {
- display: none;
+.text-and-file input[type="file"] {
+ position: absolute;
+ bottom: 0;
+ right: 0;
}
diff --git a/ui/app.css b/ui/app.css
index bee1bd9..9b90cae 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -1,12 +1,7 @@
.view-links > span {
- display: inline-block;
+ display: block;
white-space: nowrap;
- margin-right: 1ex;
- margin-bottom: 1ex;
- padding: 0.5ex;
- border: 1pt solid;
- border-radius: 1ex;
cursor: pointer;
}
@@ -15,9 +10,6 @@
display: inline-block;
margin-right: 1ex;
margin-bottom: 1ex;
- padding: 0.5ex;
- border: 1px solid !important;
- border-radius: 1ex;
cursor: pointer;
}
}
@@ -37,7 +29,7 @@
position:relative;
textarea {
- width: 64em;
+ width: 100%;
}
input[type="file"] {
diff --git a/ui/index.html b/ui/index.html
index dad1bf0..cd446c7 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -21,21 +21,16 @@
-
-
- Direktil Local Server
-
+
+
Direktil Local Server
+
Logged in
-
server
{{ serverVersion || '-----' }}
ui {{ uiHash || '-----' }}
-
🗲
-
@@ -44,11 +39,13 @@
-
-
-
+{{ t.message }}{{view.title}}
+
+ {{ view.type == 'cluster' ? 'Cluster ' : view.type == 'host' ? 'Host ' : '' }}{{view.title}}
+
-
-
- Direktil Local Server
-
+
+
Direktil Local Server
+
Logged in
-
server
{{ serverVersion || '-----' }}
ui {{ uiHash || '-----' }}
-
🗲
-
@@ -44,11 +39,13 @@
-
-
-
+{{ t.message }}{{view.title}}
+
+ {{ view.type == 'cluster' ? 'Cluster ' : view.type == 'host' ? 'Host ' : '' }}{{view.title}}
+