romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 21:17:59 +00:00
Code Issues Releases Activity

Many small tweaks

Browse Source
This commit is contained in:
Romein van Buren 2023-01-11 20:41:15 +01:00
parent f4bf270a20
commit 90ffdc6a8b
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
11 changed files with 223 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/app.svelte
View File

@ -11,7 +11,7 @@
let activeHostKey = ''; let activeHostKey = '';
let activeDbKey = ''; let activeDbKey = '';
let activeCollKey = ''; let activeCollKey = '';
let addressBarModalOpen = false; let addressBarModalOpen = true;
$: host = hosts[activeHostKey]; $: host = hosts[activeHostKey];
$: connection = connections[activeHostKey]; $: connection = connections[activeHostKey];
@ -61,60 +61,46 @@
<main> <main>
<AddressBar {hosts} bind:activeHostKey on:select={e => openConnection(e.detail)} bind:modalOpen={addressBarModalOpen} /> <AddressBar {hosts} bind:activeHostKey on:select={e => openConnection(e.detail)} bind:modalOpen={addressBarModalOpen} />
<div class="columns"> {#if host && connection}
{#if host && connection} <div class="hostlist">
<div class="hostlist"> <Grid
<Grid columns={[ { key: 'id' }, { key: 'collCount', right: true } ]}
columns={[ { key: 'id' }, { key: 'collCount', right: true } ]} items={Object.keys(connection.databases).map(id => ({
items={Object.keys(connection.databases).map(id => ({ id,
id, collCount: Object.keys(connection.databases[id].collections || {}).length,
collCount: Object.keys(connection.databases[id].collections || {}).length, children: connection.databases[id].collections || [],
children: connection.databases[id].collections || [], }))}
}))} bind:activeKey={activeDbKey}
bind:activeKey={activeDbKey} bind:activeChildKey={activeCollKey}
bind:activeChildKey={activeCollKey} on:select={e => openDatabase(e.detail)}
on:select={e => openDatabase(e.detail)} on:selectChild={e => openCollection(e.detail)}
on:selectChild={e => openCollection(e.detail)} />
/> </div>
</div>
<div class="collection"> <div class="collection">
<CollectionDetail <CollectionDetail
{collection} {collection}
hostKey={activeHostKey} hostKey={activeHostKey}
dbKey={activeDbKey} dbKey={activeDbKey}
collectionKey={activeCollKey} collectionKey={activeCollKey}
/> />
</div> </div>
{/if} {/if}
</div>
</main> </main>
<style> <style>
main { main {
height: 100vh; height: 100vh;
display: flex; display: grid;
flex-flow: column; grid-template: 3rem auto / 250px 1fr;
gap: 0.5rem;
padding: 0.5rem;
} }
main > :global(.addressbar) {
.columns { grid-column: 1 / 3;
display: flex;
gap: 1rem;
flex: 1;
height: 100%;
}
.columns > :global(*) {
height: 100%;
display: flex;
flex-flow: column;
} }
.hostlist { .hostlist {
flex: 0 0 250px;
overflow: scroll; overflow: scroll;
} }
.collection {
flex: 1;
width: auto;
}
</style> </style>

1
frontend/src/components/code-example.svelte
View File

@ -13,7 +13,6 @@
border-radius: 10px; border-radius: 10px;
padding: 0.5rem; padding: 0.5rem;
opacity: 0.6; opacity: 0.6;
margin-bottom: 0.5rem;
} }
strong { strong {

3
frontend/src/components/grid.svelte
View File

@ -107,8 +107,7 @@
.grid { .grid {
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
overflow: scroll; height: 100%;
max-height: 400px; /* fixme */
} }
.grid.contained { .grid.contained {
border: 1px solid #ccc; border: 1px solid #ccc;

16
frontend/src/organisms/addressbar/index.svelte
View File

@ -18,8 +18,13 @@
<div class="addressbar"> <div class="addressbar">
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="address" class:empty={!host?.uri} on:click={() => modalOpen = true}> <div class="address" on:click={() => modalOpen = true}>
{host?.uri || 'No host selected'} {#if host?.uri}
{@const split = host.uri.split('://').map(s => s.split('/')).flat()}
<span class="protocol">{split[0]}://</span><span class="hostname">{split[1]}</span><span class="path">{split.slice(2).join('/')}</span>
{:else}
<span class="empty">no host selected</span>
{/if}
</div> </div>
<div class="actions"> <div class="actions">
@ -48,14 +53,15 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 1rem;
padding: 0.5rem 0.5rem 0.5rem 1rem; padding: 0.5rem 0.5rem 0.5rem 1rem;
height: 3rem;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 10px; border-radius: 10px;
} }
.address.empty { .address .protocol,
font-style: italic; .address .path,
.address .empty {
opacity: 0.6; opacity: 0.6;
} }

157
frontend/src/organisms/collection-detail/find.svelte
View File

@ -24,20 +24,19 @@
limit: 30, limit: 30,
}; };
let result = []; let result = {};
let submittedForm = {};
let queryField; let queryField;
let activeKey = ''; let activeKey = '';
$: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields && form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `.limit(${form.limit})` : ''};`; $: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields && form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `.limit(${form.limit})` : ''};`;
$: if (collection) {
result = [];
}
async function submitQuery() { async function submitQuery() {
activeKey = ''; activeKey = '';
result = await PerformFind(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form)); result = await PerformFind(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
queryField?.focus(); if (result) {
queryField?.select(); submittedForm = JSON.parse(JSON.stringify(form));
}
resetFocus();
} }
function prev() { function prev() {
@ -58,92 +57,104 @@
alert('yet to be implemented'); alert('yet to be implemented');
} }
onMount(() => { function resetFocus() {
queryField?.focus(); queryField?.focus();
queryField?.select(); queryField?.select();
}); }
onMount(resetFocus);
</script> </script>
<form on:submit|preventDefault={submitQuery}> <div class="find">
<div class="row-one"> <form on:submit|preventDefault={submitQuery}>
<label class="field"> <div class="form-row one">
<span class="label">Query or id</span> <label class="field">
<input type="text" class="code" bind:this={queryField} bind:value={form.query} use:input={{ json: true }} placeholder={defaults.query} /> <span class="label">Query or id</span>
</label> <input type="text" class="code" bind:this={queryField} bind:value={form.query} use:input={{ json: true }} placeholder={defaults.query} />
</label>
<label class="field"> <label class="field">
<span class="label">Sort</span> <span class="label">Sort</span>
<input type="text" class="code" bind:value={form.sort} use:input={{ json: true }} placeholder={defaults.sort} /> <input type="text" class="code" bind:value={form.sort} use:input={{ json: true }} placeholder={defaults.sort} />
</label> </label>
</div>
<div class="row-two">
<label class="field">
<span class="label">Fields</span>
<input type="text" class="code" bind:value={form.fields} use:input={{ json: true }} placeholder={defaults.fields} />
</label>
<label class="field">
<span class="label">Skip</span>
<input type="number" min="0" bind:value={form.skip} use:input placeholder={defaults.skip} />
</label>
<label class="field">
<span class="label">Limit</span>
<input type="number" min="0" bind:value={form.limit} use:input placeholder={defaults.limit} />
</label>
<button type="submit" class="btn">Run</button>
</div>
</form>
<CodeExample {code} />
<div class="result">
<ObjectGrid data={result} bind:activeKey />
<div class="controls">
<div>
{#if result}
Results: {result.length}
{/if}
</div> </div>
<div>
<button class="btn danger" on:click={remove} disabled={!activeKey}> <div class="form-row two">
<Icon name="-" /> <label class="field">
</button> <span class="label">Fields</span>
<button class="btn" on:click={prev} disabled={!form.limit || (form.skip <= 0) || !result?.length}> <input type="text" class="code" bind:value={form.fields} use:input={{ json: true }} placeholder={defaults.fields} />
<Icon name="chev-l" /> </label>
</button>
<button class="btn" on:click={next} disabled={!form.limit || ((result?.length || Infinity) < form.limit) || !result?.length}> <label class="field">
<Icon name="chev-r" /> <span class="label">Skip</span>
</button> <input type="number" min="0" bind:value={form.skip} use:input placeholder={defaults.skip} />
</label>
<label class="field">
<span class="label">Limit</span>
<input type="number" min="0" bind:value={form.limit} use:input placeholder={defaults.limit} />
</label>
<button type="submit" class="btn">Run</button>
</div>
</form>
<CodeExample {code} />
<div class="result">
<div class="grid">
{#key result}
<ObjectGrid data={result.results} bind:activeKey />
{/key}
</div>
<div class="controls">
<div>
{#if result}
Results: {result.total || 0}
{/if}
</div>
<div>
<button class="btn danger" on:click={remove} disabled={!activeKey}>
<Icon name="-" />
</button>
<button class="btn" on:click={prev} disabled={!submittedForm.limit || (submittedForm.skip <= 0) || !result?.results?.length}>
<Icon name="chev-l" />
</button>
<button class="btn" on:click={next} disabled={!submittedForm.limit || ((result?.results?.length || 0) < submittedForm.limit) || !result?.results?.length}>
<Icon name="chev-r" />
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<style> <style>
.row-one { .find {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
grid-template-columns: 3fr 2fr; grid-template: auto auto 1fr / 1fr;
}
.form-row {
display: grid;
gap: 0.5rem;
}
.form-row.one {
grid-template: 1fr / 3fr 2fr;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.row-two { .form-row.two {
display: grid; grid-template: 1fr / 5fr 1fr 1fr 1fr;
gap: 0.5rem;
grid-template-columns: 5fr 1fr 1fr 1fr;
margin-bottom: 0.5rem;
} }
.result { .result {
flex: 1; display: grid;
display: flex; grid-template: 1fr auto / 1fr;
flex-flow: column;
margin-top: 0.5rem;
gap: 0.5rem; gap: 0.5rem;
} }
.result > :global(.grid) { .result > .grid {
flex: 1; overflow: auto;
} }
.result > .controls { .result > .controls {
display: flex; display: flex;

57
frontend/src/organisms/collection-detail/index.svelte
View File

@ -1,11 +1,10 @@
<script> <script>
import ObjectGrid from '../../components/objectgrid.svelte';
import CodeExample from '../../components/code-example.svelte';
import TabBar from '../../components/tabbar.svelte'; import TabBar from '../../components/tabbar.svelte';
import Find from './find.svelte'; import Find from './find.svelte';
import Indexes from './indexes.svelte'; import Indexes from './indexes.svelte';
import Insert from './insert.svelte'; import Insert from './insert.svelte';
import Remove from './remove.svelte'; import Remove from './remove.svelte';
import Stats from './stats.svelte';
export let collection; export let collection;
export let hostKey; export let hostKey;
@ -23,29 +22,25 @@
<div class="collection" class:empty={!collection}> <div class="collection" class:empty={!collection}>
{#if collection} {#if collection}
<TabBar tabs={[ {#key collection}
{ key: 'stats', title: 'Stats' }, <TabBar tabs={[
{ key: 'find', title: 'Find' }, { key: 'stats', title: 'Stats' },
{ key: 'insert', title: 'Insert' }, { key: 'find', title: 'Find' },
{ key: 'update', title: 'Update' }, { key: 'insert', title: 'Insert' },
{ key: 'remove', title: 'Remove' }, { key: 'update', title: 'Update' },
{ key: 'indexes', title: 'Indexes' }, { key: 'remove', title: 'Remove' },
]} bind:selectedKey={tab} /> { key: 'indexes', title: 'Indexes' },
]} bind:selectedKey={tab} />
<div class="container"> <div class="container">
{#if tab === 'stats'} {#if tab === 'stats'} <Stats {collection} />
<CodeExample code="db.stats()" /> {:else if tab === 'find'} <Find {collection} />
<ObjectGrid data={collection.stats} /> {:else if tab === 'insert'} <Insert {collection} />
{:else if tab === 'find'} {:else if tab === 'remove'} <Remove {collection} />
<Find {collection} /> {:else if tab === 'indexes'} <Indexes {collection} />
{:else if tab === 'insert'} {/if}
<Insert {collection} /> </div>
{:else if tab === 'remove'} {/key}
<Remove {collection} />
{:else if tab === 'indexes'}
<Indexes {collection} />
{/if}
</div>
{:else} {:else}
No collection selected No collection selected
{/if} {/if}
@ -53,16 +48,18 @@
<style> <style>
.collection { .collection {
margin: 1rem 1rem 1rem 0;
height: 100%; height: 100%;
display: flex; display: grid;
flex-flow: column; grid-template: auto 1fr / 1fr;
gap: 0.5rem;
} }
.container { .container {
padding: 0.5rem 0.5rem 0; padding: 0 0.5rem;
flex: 1;
display: flex; display: flex;
flex-flow: column; align-items: stretch;
}
.container > :global(*) {
width: 100%;
} }
</style> </style>

4
frontend/src/organisms/collection-detail/insert.svelte
View File

@ -6,10 +6,6 @@
let input = ''; let input = '';
let insertedIds; let insertedIds;
$: if (collection) {
insertedIds = undefined;
}
async function insert() { async function insert() {
insertedIds = await PerformInsert(collection.hostKey, collection.dbKey, collection.key, input); insertedIds = await PerformInsert(collection.hostKey, collection.dbKey, collection.key, input);
} }

19
frontend/src/organisms/collection-detail/stats.svelte Normal file
View File

@ -0,0 +1,19 @@
<script>
import ObjectGrid from '../../components/objectgrid.svelte';
import CodeExample from '../../components/code-example.svelte';
export let collection;
</script>
<div class="stats">
<CodeExample code="db.stats()" />
<ObjectGrid data={collection.stats} />
</div>
<style>
.stats {
display: grid;
gap: 0.5rem;
grid-template: auto 1fr / 1fr;
}
</style>

3
frontend/wailsjs/go/main/App.d.ts vendored
View File

@ -2,6 +2,7 @@
// This file is automatically generated. DO NOT EDIT // This file is automatically generated. DO NOT EDIT
import {map[string]main} from '../models'; import {map[string]main} from '../models';
import {primitive} from '../models'; import {primitive} from '../models';
import {main} from '../models';
export function Hosts():Promise<map[string]main.Host>; export function Hosts():Promise<map[string]main.Host>;
@ -11,6 +12,6 @@ export function OpenConnection(arg1:string):Promise<Array<string>>;
export function OpenDatabase(arg1:string,arg2:string):Promise<Array<string>>; export function OpenDatabase(arg1:string,arg2:string):Promise<Array<string>>;
export function PerformFind(arg1:string,arg2:string,arg3:string,arg4:string):Promise<any>; export function PerformFind(arg1:string,arg2:string,arg3:string,arg4:string):Promise<main.findResult>;
export function PerformInsert(arg1:string,arg2:string,arg3:string,arg4:string):Promise<any>; export function PerformInsert(arg1:string,arg2:string,arg3:string,arg4:string):Promise<any>;

19
frontend/wailsjs/go/models.ts Executable file
View File

@ -0,0 +1,19 @@
export namespace main {
export class findResult {
total: number;
results: any;
static createFrom(source: any = {}) {
return new findResult(source);
}
constructor(source: any = {}) {
if ('string' === typeof source) source = JSON.parse(source);
this.total = source["total"];
this.results = source["results"];
}
}
}

39
main.go
View File

@ -141,7 +141,13 @@ func (a *App) OpenCollection(hostKey, dbKey, collKey string) (result bson.M) {
return result return result
} }
func (a *App) PerformFind(hostKey, dbKey, collKey string, formJson string) interface{} { type findResult struct {
Total int64 `json:"total"`
Results interface{} `json:"results"`
}
func (a *App) PerformFind(hostKey, dbKey, collKey string, formJson string) findResult {
var out findResult
var form struct { var form struct {
Fields string `json:"fields"` Fields string `json:"fields"`
Limit int64 `json:"limit"` Limit int64 `json:"limit"`
@ -158,13 +164,13 @@ func (a *App) PerformFind(hostKey, dbKey, collKey string, formJson string) inter
Title: "Couldn't parse form", Title: "Couldn't parse form",
Message: err.Error(), Message: err.Error(),
}) })
return nil return out
} }
client, ctx, close, err := a.connectToHost(hostKey) client, ctx, close, err := a.connectToHost(hostKey)
if err != nil { if err != nil {
fmt.Println(err.Error()) fmt.Println(err.Error())
return nil return out
} }
defer close() defer close()
@ -180,7 +186,7 @@ func (a *App) PerformFind(hostKey, dbKey, collKey string, formJson string) inter
Title: "Invalid query", Title: "Invalid query",
Message: err.Error(), Message: err.Error(),
}) })
return nil return out
} }
err = json.Unmarshal([]byte(form.Fields), &projection) err = json.Unmarshal([]byte(form.Fields), &projection)
@ -191,7 +197,7 @@ func (a *App) PerformFind(hostKey, dbKey, collKey string, formJson string) inter
Title: "Invalid projection", Title: "Invalid projection",
Message: err.Error(), Message: err.Error(),
}) })
return nil return out
} }
err = json.Unmarshal([]byte(form.Sort), &sort) err = json.Unmarshal([]byte(form.Sort), &sort)
@ -202,7 +208,7 @@ func (a *App) PerformFind(hostKey, dbKey, collKey string, formJson string) inter
Title: "Invalid sort", Title: "Invalid sort",
Message: err.Error(), Message: err.Error(),
}) })
return nil return out
} }
opt := mongoOptions.FindOptions{ opt := mongoOptions.FindOptions{
@ -212,7 +218,18 @@ func (a *App) PerformFind(hostKey, dbKey, collKey string, formJson string) inter
Sort: sort, Sort: sort,
} }
cur, err := client.Database(dbKey).Collection(collKey).Find(ctx, bson.D{}, &opt) total, err := client.Database(dbKey).Collection(collKey).CountDocuments(ctx, query, nil)
if err != nil {
fmt.Println(err.Error())
runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
Type: runtime.ErrorDialog,
Title: "Encountered an error while counting documents",
Message: err.Error(),
})
return out
}
cur, err := client.Database(dbKey).Collection(collKey).Find(ctx, query, &opt)
if err != nil { if err != nil {
fmt.Println(err.Error()) fmt.Println(err.Error())
runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{ runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
@ -220,7 +237,7 @@ func (a *App) PerformFind(hostKey, dbKey, collKey string, formJson string) inter
Title: "Encountered an error while performing query", Title: "Encountered an error while performing query",
Message: err.Error(), Message: err.Error(),
}) })
return nil return out
} }
defer cur.Close(ctx) defer cur.Close(ctx)
@ -234,10 +251,12 @@ func (a *App) PerformFind(hostKey, dbKey, collKey string, formJson string) inter
Title: "Encountered an error while performing query", Title: "Encountered an error while performing query",
Message: err.Error(), Message: err.Error(),
}) })
return nil return out
} }
return results out.Results = results
out.Total = total
return out
} }
func (a *App) PerformInsert(hostKey, dbKey, collKey, jsonData string) interface{} { func (a *App) PerformInsert(hostKey, dbKey, collKey, jsonData string) interface{} {