Collapsible query settings and better mobile support.
Also use a larger list of test clusters, for testing.
This commit is contained in:
Sage Vaillancourt
parent
4e75739b1d
commit
81e18d4e60
59
src/app.css
59
src/app.css
|
|
@ -38,6 +38,11 @@ select, input {
|
|||
padding: 0.3em;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
main {
|
||||
height: calc(100% - 4em);
|
||||
}
|
||||
|
||||
select option {
|
||||
|
|
@ -230,13 +235,12 @@ button {
|
|||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: #95c1d3;
|
||||
flex-grow: 2;
|
||||
flex-grow: 1;
|
||||
padding: 1em;
|
||||
background-color: #e2eaff;
|
||||
height: 84vh;
|
||||
max-width: 65vw;
|
||||
min-width: 65vw;
|
||||
overflow-y: scroll;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.settings-option {
|
||||
|
|
@ -254,8 +258,57 @@ button:focus:not(:focus-visible) {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
.query-settings-hider {
|
||||
color: rgba(0,0,0, 0.5)
|
||||
}
|
||||
.query-settings-shower {
|
||||
color: rgba(0,0,0, 0.5)
|
||||
}
|
||||
|
||||
.query-settings-hider:before {
|
||||
content: "«";
|
||||
}
|
||||
.query-settings-shower:before {
|
||||
content: "»";
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.query-settings {
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
.query-settings {
|
||||
overflow: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 719px) {
|
||||
section {
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
}
|
||||
.query-settings {
|
||||
flex-grow: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
.query-settings-hider:before {
|
||||
content: '▲';
|
||||
}
|
||||
.query-settings-shower:before {
|
||||
content: '▼';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
} from './+page.js';
|
||||
export let errors, data
|
||||
|
||||
let showQuerySettings = true
|
||||
let showQueryModal = false
|
||||
let queryRunning = ''
|
||||
|
||||
|
|
@ -90,120 +91,99 @@
|
|||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<div class="query-settings">
|
||||
<!--
|
||||
<Header />
|
||||
<NavBar />
|
||||
-->
|
||||
<h1>Topic Search</h1>
|
||||
<div class="state-error">
|
||||
{#if $state.error}
|
||||
<span transition:fade={{duration: 100}}>{$state.error}</span>
|
||||
{#if $state.errorDetails}
|
||||
<div class="state-error-details">{$state.errorDetails}</div>
|
||||
{#if showQuerySettings}
|
||||
<div class="query-settings">
|
||||
<!--
|
||||
<Header />
|
||||
<NavBar />
|
||||
-->
|
||||
<h1>Topic Search</h1>
|
||||
<div class="state-error">
|
||||
{#if $state.error}
|
||||
<span transition:fade={{duration: 100}}>{$state.error}</span>
|
||||
{#if $state.errorDetails}
|
||||
<div class="state-error-details">{$state.errorDetails}</div>
|
||||
{/if}
|
||||
{:else}
|
||||
|
||||
{/if}
|
||||
{:else}
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-option">
|
||||
<h3>Cluster</h3>
|
||||
<select disabled={clusterNames.length === 0} bind:value={querySettings.cluster} name="cluster" id="cluster" on:change={updateTopics}>
|
||||
{#each clusterNames as clusterName}
|
||||
<option value={clusterName}>{clusterName}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-option">
|
||||
<h3>Cluster</h3>
|
||||
<select disabled={clusterNames.length === 0} bind:value={querySettings.cluster} name="cluster" id="cluster" on:change={updateTopics}>
|
||||
{#each clusterNames as clusterName}
|
||||
<option value={clusterName}>{clusterName}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-option">
|
||||
<h3>Topic</h3>
|
||||
<select disabled={topics.length === 0} bind:value={querySettings.topic} name="topic" id="topic">
|
||||
{#each topics as topic}
|
||||
<option value={topic}>{topic}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-option">
|
||||
<h3>Topic</h3>
|
||||
<select disabled={topics.length === 0} bind:value={querySettings.topic} name="topic" id="topic">
|
||||
{#each topics as topic}
|
||||
<option value={topic}>{topic}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="settings-option">
|
||||
<label>
|
||||
Maximum Results
|
||||
<input type=number bind:value={querySettings.maxItems} min=0 max=10000>
|
||||
</label>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<div class="settings-option">
|
||||
<QueryInput
|
||||
bind:jsFilter={querySettings.jsFilter}
|
||||
bind:mutableObjects={querySettings.mutableObjects}
|
||||
bind:queryCode={querySettings.queryCode} />
|
||||
{#if querySettings.jsFilter}
|
||||
<button class="query-input-button" on:click={() => showQueryModal = true}>Open Editor Window</button>
|
||||
{/if}
|
||||
{#if showQueryModal}
|
||||
<Modal onClickOut={() => showQueryModal = false}
|
||||
onCancel={null}
|
||||
onConfirm={() => showQueryModal = false}
|
||||
confirm="Close"
|
||||
title={'JS Filter'}>
|
||||
<QueryInput big
|
||||
bind:jsFilter={querySettings.jsFilter}
|
||||
bind:mutableObjects={querySettings.mutableObjects}
|
||||
bind:queryCode={querySettings.queryCode} />
|
||||
</Modal>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Previous 'Start' style
|
||||
<div class="settings-option query-type">
|
||||
<span>Query Type:</span>
|
||||
<span>
|
||||
<label title="Consume and display new events as they are produced.">
|
||||
<input type=radio bind:group={querySettings.mode} name="mode" value={queryMode.REAL_TIME}>
|
||||
Real Time
|
||||
<div class="settings-option">
|
||||
<label>
|
||||
Maximum Results
|
||||
<input type=number bind:value={querySettings.maxItems} min=0 max=10000>
|
||||
</label>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<label title="Query all messages that currently exist, then stop.">
|
||||
<input type=radio bind:group={querySettings.mode} name="mode" value={queryMode.ONE_SHOT}>
|
||||
One Shot
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="settings-option">
|
||||
<QueryInput
|
||||
bind:jsFilter={querySettings.jsFilter}
|
||||
bind:mutableObjects={querySettings.mutableObjects}
|
||||
bind:queryCode={querySettings.queryCode} />
|
||||
{#if querySettings.jsFilter}
|
||||
<button class="query-input-button" on:click={() => showQueryModal = true}>Open Editor Window</button>
|
||||
{/if}
|
||||
{#if showQueryModal}
|
||||
<Modal onClickOut={() => showQueryModal = false}
|
||||
onCancel={null}
|
||||
onConfirm={() => showQueryModal = false}
|
||||
confirm="Close"
|
||||
title={'JS Filter'}>
|
||||
<QueryInput big
|
||||
bind:jsFilter={querySettings.jsFilter}
|
||||
bind:mutableObjects={querySettings.mutableObjects}
|
||||
bind:queryCode={querySettings.queryCode} />
|
||||
</Modal>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="query-button">
|
||||
{#if queryRunning}
|
||||
<button class="danger" on:click={() => queryRunning = stopQuery(querySettings)}>Stop Query</button>
|
||||
{:else}
|
||||
<button class="colored" on:click={() => queryRunning = startQuery(querySettings)}>Start Query</button>
|
||||
{/if}
|
||||
<div class="query-button">
|
||||
{#if queryRunning && $state.queryState !== queryState.DONE}
|
||||
<div transition:slide|local class="stop-button">
|
||||
<button class="danger" on:click={() => queryRunning = stopQuery(querySettings)}>
|
||||
{queryRunning === queryMode.REAL_TIME ? 'End Real Time' : 'Cancel One-Shot'} Query
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div transition:slide|local class="start-buttons colored">
|
||||
<button class="colored" on:click={() => queryRunning = startQuery({...querySettings, mode: queryMode.ONE_SHOT})}>
|
||||
Start One-Shot
|
||||
</button>
|
||||
<div class="separator"></div>
|
||||
<button class="colored" on:click={() => queryRunning = startQuery({...querySettings, mode: queryMode.REAL_TIME})}>
|
||||
Start Real-Time
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div class="query-button">
|
||||
{#if queryRunning && $state.queryState !== queryState.DONE}
|
||||
<div transition:slide|local class="stop-button">
|
||||
<button class="danger" on:click={() => queryRunning = stopQuery(querySettings)}>
|
||||
{queryRunning === queryMode.REAL_TIME ? 'End Real Time' : 'Cancel One-Shot'} Query
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div transition:slide|local class="start-buttons colored">
|
||||
<button class="colored" on:click={() => queryRunning = startQuery({...querySettings, mode: queryMode.ONE_SHOT})}>
|
||||
Start One-Shot
|
||||
</button>
|
||||
<div class="separator"></div>
|
||||
<button class="colored" on:click={() => queryRunning = startQuery({...querySettings, mode: queryMode.REAL_TIME})}>
|
||||
Start Real-Time
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="data-view-container">
|
||||
<div class="data-view-bar">
|
||||
<div class="border-between">
|
||||
<button class={showQuerySettings ? "query-settings-hider" : "query-settings-shower"}
|
||||
on:click={() => showQuerySettings = !showQuerySettings}></button>
|
||||
<button class={jsonDisplay.expandAll ? 'selected' : ''}
|
||||
on:click={() => jsonDisplay.expandAll = !jsonDisplay.expandAll}>
|
||||
Expand All Objects
|
||||
|
|
@ -252,6 +232,7 @@
|
|||
.data-view-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.data-view-bar {
|
||||
background-color: #d7dbf3;
|
||||
|
|
@ -299,14 +280,6 @@
|
|||
margin-right: 1em;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -321,16 +294,6 @@
|
|||
background-color: #575757;
|
||||
}
|
||||
|
||||
.query-settings {
|
||||
margin-right: 1rem;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
padding: 1em;
|
||||
height: 84.5vh;
|
||||
}
|
||||
|
||||
.query-type {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -159,6 +159,9 @@
|
|||
</section>
|
||||
|
||||
<style>
|
||||
.data-view {
|
||||
min-height: 40%;
|
||||
}
|
||||
.cluster-listing {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -183,13 +186,6 @@
|
|||
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -210,14 +206,6 @@
|
|||
min-width: 20vw;
|
||||
}
|
||||
|
||||
.query-settings {
|
||||
margin-right: 1rem;
|
||||
padding: 1em;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings-sub-option {
|
||||
margin-top: 0.2em;
|
||||
display: flex;
|
||||
|
|
|
|||
30
src/utils.js
30
src/utils.js
|
|
@ -29,18 +29,28 @@ const jsonRequest = type => async (path, object) => fetch(backendUrl + path, {
|
|||
export const postJson = (path, object) => jsonRequest('POST')(path, object)
|
||||
export const putJson = (path, object) => jsonRequest('PUT')(path, object)
|
||||
|
||||
const mockCluster = {
|
||||
clientId: 'TestClient',
|
||||
brokers: ['testbroker.com:5000'],
|
||||
ssl: true,
|
||||
sasl: {
|
||||
mechanism: 'SCRAM-SHA-512',
|
||||
username: 'testuser',
|
||||
password: 'XXXXXXXXXXXXXXXXXXXXXX'
|
||||
}
|
||||
}
|
||||
const mockApi = {
|
||||
'/clusters': {
|
||||
'TestCluster': {
|
||||
clientId: 'TestClient',
|
||||
brokers: ['testbroker.com:5000'],
|
||||
ssl: true,
|
||||
sasl: {
|
||||
mechanism: 'SCRAM-SHA-512',
|
||||
username: 'testuser',
|
||||
password: 'XXXXXXXXXXXXXXXXXXXXXX'
|
||||
}
|
||||
}
|
||||
'TestCluster1': mockCluster,
|
||||
'TestCluster2': mockCluster,
|
||||
'TestCluster3': mockCluster,
|
||||
'TestCluster4': mockCluster,
|
||||
'TestCluster5': mockCluster,
|
||||
'TestCluster6': mockCluster,
|
||||
'TestCluster7': mockCluster,
|
||||
'TestCluster8': mockCluster,
|
||||
'TestCluster9': mockCluster,
|
||||
'TestCluster10': mockCluster,
|
||||
},
|
||||
'/topics/TestCluster': ['NewReleases']
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue