From 6dcc90f47d5ee61e2035b714d4990da66f266ef1 Mon Sep 17 00:00:00 2001 From: Sage Vaillancourt Date: Tue, 23 Aug 2022 16:53:03 -0400 Subject: [PATCH] Fix jsonRequest() Modal transitions. Almost got the Footer working (hidden for now) More flexibility with sasl config. --- src/app.css | 6 ++++ src/app.html | 2 +- src/lib/Modal.svelte | 5 ++-- src/lib/constants.js | 6 +++- src/lib/state.js | 6 +++- src/routes/+layout.svelte | 18 ++++++------ src/routes/+page.svelte | 12 ++++++-- src/routes/settings/+page.svelte | 48 ++++++++++++++++++-------------- src/utils.js | 2 +- 9 files changed, 68 insertions(+), 37 deletions(-) diff --git a/src/app.css b/src/app.css index 4aa148c..4fad9ab 100644 --- a/src/app.css +++ b/src/app.css @@ -18,6 +18,12 @@ --column-margin-top: 4rem; } +.root-div { + height: 100vh; + display: flex; + flex-direction: column; +} + select, button { font-family: Roboto, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 90%; diff --git a/src/app.html b/src/app.html index 5b53ef7..2e2db7f 100644 --- a/src/app.html +++ b/src/app.html @@ -7,6 +7,6 @@ %sveltekit.head% -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/src/lib/Modal.svelte b/src/lib/Modal.svelte index 8fb2bb0..9b32a33 100644 --- a/src/lib/Modal.svelte +++ b/src/lib/Modal.svelte @@ -1,4 +1,5 @@ -
onClickOut && onClickOut()}> -
{}}> +
onClickOut && onClickOut()}> +
{}}> {#if title}

{title}

{/if} diff --git a/src/lib/constants.js b/src/lib/constants.js index cd1f009..41ba705 100644 --- a/src/lib/constants.js +++ b/src/lib/constants.js @@ -1,3 +1,5 @@ +import { npm_package_version } from "$env/static/private"; + export const queryMode = { REAL_TIME: 'realTime', ONE_SHOT: 'oneShot' @@ -7,4 +9,6 @@ export const backendAddressAndPort = 'localhost:3000' export const backendUrl = `http://${backendAddressAndPort}` -export const saslAuthMethods = ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512', 'AWS'] \ No newline at end of file +export const saslAuthMethods = ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512', 'AWS'] + +export const clientVersion = npm_package_version \ No newline at end of file diff --git a/src/lib/state.js b/src/lib/state.js index 50813e4..06217c9 100644 --- a/src/lib/state.js +++ b/src/lib/state.js @@ -34,7 +34,7 @@ const mockItems = [ }, ].map(addMetadata) -export const testMode = true +export const testMode = false export const state = writable({ items: [], @@ -145,6 +145,10 @@ export const connect = () => { }) ws.addEventListener('message', message => { + if (message.data === 'CONNECTED') { + updateClearError(s => ({...s})) + return + } let data; try { data = JSON.parse(message.data) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index f99fb08..b7d01ab 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,7 @@
@@ -9,14 +10,16 @@ - + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 74e9970..629b911 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -197,7 +197,7 @@ return message.value.eventType === "Television";` {$state.itemCount} Messages
{/if} -
+
@@ -220,6 +220,10 @@ return message.value.eventType === "Television";` .data-view { border-top: none; } + .data-view-container { + display: flex; + flex-direction: column; + } .data-view-bar { background-color: #d7dbf3; border-style: solid; @@ -236,10 +240,14 @@ return message.value.eventType === "Television";` border-width: 1px; border-style: none; display: flex; + flex-grow: 1; } .border-between button:last-child { border-right: none; } + .zoom-buttons button { + width: 2.5em; + } .data-view-bar button { border-color: white; border-style: none; @@ -291,7 +299,7 @@ return message.value.eventType === "Television";` flex-direction: column; overflow: auto; padding: 1em; - height: 83vh; + height: 84.5vh; } .query-type { diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index 330d38d..718a28b 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -4,8 +4,8 @@ import { apiFetch, findLast, deepCopy, postJson, putJson } from "../../utils.js"; import Modal from "../../lib/Modal.svelte"; - const addCluster = async cluster => fetchClusters(await postJson('/clusters', cluster)) - const updateCluster = async cluster => fetchClusters(await putJson('/clusters', cluster)) + const addCluster = async () => fetchClusters(await postJson('/clusters', getConfig())) + const updateCluster = async () => fetchClusters(await putJson('/clusters', getConfig())) const deleteCluster = async clusterName => fetchClusters(await postJson('/clusters/delete', { clusterName })) let clusters = [] @@ -22,6 +22,7 @@ const values = Object.values(clusters) if (values.length > 0) { config = deepCopy(values[0]) + useSasl = !!config.sasl } } onMount(async () => { @@ -32,11 +33,15 @@ config = emptyConfig() } + let useSasl = false + const getConfig = () => ({ ...config, sasl: useSasl ? config.sasl : undefined }) + const emptyConfig = () => ({ originalName: null, // A `null` originalName indicates that the config is new, clusterName: '', // and will be POSTed as a new cluster, not PUTted, updating an existing one clientId: '', brokers: [''], + useSasl: true, ssl: true, sasl: { mechanism: '', @@ -104,27 +109,29 @@
-
SASL:
-
-
Auth Mechanism:
- -
-
-
Username:
- -
-
-
Password:
- -
+
SASL:
+ {#if useSasl} +
+
Auth Mechanism:
+ +
+
+
Username:
+ +
+
+
Password:
+ +
+ {/if}
+ on:click={() => (config.originalName ? updateCluster() : addCluster())}>{config.originalName ? 'Update Cluster Config' : 'Add Cluster Config'}
@@ -207,7 +214,6 @@ .query-settings { margin-right: 1rem; padding: 1em; - height: 83vh; overflow: auto; display: flex; flex-direction: column; diff --git a/src/utils.js b/src/utils.js index b573711..e959f23 100644 --- a/src/utils.js +++ b/src/utils.js @@ -12,7 +12,7 @@ export const findLast = array => { return array[array.length - 1] } -const jsonRequest = type => async (path, object) => fetch(path, { +const jsonRequest = type => async (path, object) => fetch(backendUrl + path, { method: type, body: JSON.stringify(object), headers: {