diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d89914..a26ae38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
* Added meaningful window titles, and actually show these in the title bar (macOS).
* Corrected link to documentation in the about box (#30).
* Fixed host/database selection bug in grid (#31, #32), involving a frontend refactoring.
+* Replaced (some) harsh loading dialogs with smooth spinners, and replaced (some) capricious error dialogs with friendly error messages.
## [v0.2.0]
diff --git a/frontend/src/components/blankstate.svelte b/frontend/src/components/blankstate.svelte
index 8f00f45..d4463ce 100644
--- a/frontend/src/components/blankstate.svelte
+++ b/frontend/src/components/blankstate.svelte
@@ -1,14 +1,25 @@
-
+ {#if icon}
+
+ {:else if image}
+
+ {/if}
+
+
{title}
{label}
+
@@ -27,12 +38,20 @@
height: 150px;
width: auto;
}
+ .content :global(svg) {
+ height: 40px;
+ width: auto;
+ }
p {
margin: 2.85rem 0;
font-size: 1.25rem;
line-height: 1.25rem;
}
+ p.title {
+ font-weight: 700;
+ margin-bottom: -1.85rem;
+ }
.blankstate :global(.btn) {
font-size: 1.35rem;
@@ -48,7 +67,7 @@
filter: grayscale(1);
opacity: 0.4;
}
- .pale p {
+ .pale {
color: #777;
}
diff --git a/frontend/src/components/grid.svelte b/frontend/src/components/grid.svelte
index 7d3d9a4..879e6bb 100644
--- a/frontend/src/components/grid.svelte
+++ b/frontend/src/components/grid.svelte
@@ -1,4 +1,5 @@
@@ -27,45 +30,51 @@
{/if} -->
-
- {#if showHeaders && columns.some(col => col.title)}
-
-
- {#if !hideChildrenToggles}
-
- {/if}
+ {#if busy}
+
+ {:else if errorTitle || errorDescription}
+
+ {:else}
+
+ {#if showHeaders && columns.some(col => col.title)}
+
+
+ {#if !hideChildrenToggles}
+
+ {/if}
-
+
- {#each columns as column}
- {column.title || ''}
- {/each}
+ {#each columns as column}
+ {column.title || ''}
+ {/each}
- {#if canRemoveItems}
-
- {/if}
-
-
- {/if}
+ {#if canRemoveItems}
+
+ {/if}
+
+
+ {/if}
-
-
-
-
+
+
+
+
+ {/if}
diff --git a/frontend/src/components/icon.svelte b/frontend/src/components/icon.svelte
index 3a3e742..5a024b0 100644
--- a/frontend/src/components/icon.svelte
+++ b/frontend/src/components/icon.svelte
@@ -14,9 +14,19 @@
width: auto;
vertical-align: bottom;
}
+
+ @keyframes spinning {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+
+ svg.spinning {
+ animation: spinning 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ }
-
+ stroke-linejoin="round"
+ class:spinning={name === 'loading'}
+>
{#if name === 'radio'}
{:else if name === 'chev-l'}
@@ -126,5 +138,9 @@
{:else if name === '?'}
+ {:else if name === '!'}
+
+ {:else if name === 'loading'}
+
{/if}
diff --git a/frontend/src/components/objectgrid.svelte b/frontend/src/components/objectgrid.svelte
index ea681a4..288463f 100644
--- a/frontend/src/components/objectgrid.svelte
+++ b/frontend/src/components/objectgrid.svelte
@@ -8,6 +8,9 @@
export let activePath = [];
export let hideObjectIndicators = false;
export let getRootMenu = () => undefined;
+ export let errorTitle = '';
+ export let errorDescription = '';
+ export let busy = false;
const columns = [
{ key: 'key', label: 'Key' },
@@ -116,4 +119,7 @@
{columns}
{items}
{hideObjectIndicators}
+ {errorTitle}
+ {errorDescription}
+ {busy}
/>
diff --git a/frontend/src/dialogs/input.svelte b/frontend/src/dialogs/input.svelte
index b6f75d2..2cb990c 100644
--- a/frontend/src/dialogs/input.svelte
+++ b/frontend/src/dialogs/input.svelte
@@ -36,3 +36,9 @@
Cancel
+
+
diff --git a/frontend/src/lib/stores/hosttree.js b/frontend/src/lib/stores/hosttree.js
index adc8ea1..c5c08d1 100644
--- a/frontend/src/lib/stores/hosttree.js
+++ b/frontend/src/lib/stores/hosttree.js
@@ -44,10 +44,11 @@ async function refresh() {
host.uri = hostDetails.uri;
host.open = async function() {
- const progress = startProgress(`Connecting to "${hostKey}"…`);
- const { databases: dbNames, status, systemInfo } = await OpenConnection(hostKey);
+ const { databases: dbNames, status, statusError, systemInfo, systemInfoError } = await OpenConnection(hostKey);
host.status = status;
+ host.statusError = statusError;
host.systemInfo = systemInfo;
+ host.systemInfoError = systemInfoError;
host.databases = host.databases || {};
if (!dbNames) {
@@ -71,9 +72,9 @@ async function refresh() {
delete database.new;
database.open = async function() {
- const progress = startProgress(`Opening database "${dbKey}"…`);
- const { collections: collNames, stats } = await OpenDatabase(hostKey, dbKey);
+ const { collections: collNames, stats, statsError } = await OpenDatabase(hostKey, dbKey);
database.stats = stats;
+ database.statsError = statsError;
if (!collNames) {
return;
@@ -97,11 +98,12 @@ async function refresh() {
delete collection.new;
collection.open = async function() {
- const progress = startProgress(`Opening database "${dbKey}"…`);
- const stats = await OpenCollection(hostKey, dbKey, collKey);
+ const { stats, statsError } = await OpenCollection(hostKey, dbKey, collKey);
+
collection.stats = stats;
+ collection.statsError = statsError;
+
await refresh();
- progress.end();
};
collection.rename = async function() {
@@ -168,7 +170,12 @@ async function refresh() {
collection.getIndexes = async function() {
const progress = startProgress(`Retrieving indexes of "${collKey}"…`);
collection.indexes = [];
- const indexes = await GetIndexes(hostKey, dbKey, collKey);
+ const { indexes, error } = await GetIndexes(hostKey, dbKey, collKey);
+
+ if (error) {
+ progress.end();
+ return error;
+ }
for (const indexDetails of indexes) {
const index = {
@@ -190,7 +197,6 @@ async function refresh() {
}
progress.end();
- return collection.indexes;
};
collection.getIndexByName = function(indesName) {
@@ -236,7 +242,6 @@ async function refresh() {
}
await refresh();
- progress.end();
windowTitle.setSegments(dbKey, host.name, 'Rolens');
};
@@ -283,7 +288,6 @@ async function refresh() {
};
await refresh();
- progress.end();
};
host.remove = async function() {
diff --git a/frontend/src/organisms/connection/collection/find.svelte b/frontend/src/organisms/connection/collection/find.svelte
index 1da82fd..6d9de76 100644
--- a/frontend/src/organisms/connection/collection/find.svelte
+++ b/frontend/src/organisms/connection/collection/find.svelte
@@ -46,8 +46,7 @@
return;
}
- querying = true;
- const progress = startProgress('Performing query…');
+ querying = `Querying ${collection.key}…`;
activePath = [];
const newResult = await FindItems(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
@@ -57,7 +56,6 @@
submittedForm = deepClone(form);
}
- progress.end();
resetFocus();
querying = false;
}
@@ -231,6 +229,9 @@
hideObjectIndicators={$views[collection.viewKey]?.hideObjectIndicators}
bind:activePath
on:trigger={e => openJson(e.detail?.index)}
+ errorTitle={result.errorTitle}
+ errorDescription={result.errorDescription}
+ busy={querying}
/>
{:else}
EJSON.deserialize(r)) : []}
bind:activePath
on:trigger={e => openJson(e.detail?.index)}
+ errorTitle={result.errorTitle}
+ errorDescription={result.errorDescription}
+ busy={querying}
/>
{/if}
{/key}
diff --git a/frontend/src/organisms/connection/collection/indexes.svelte b/frontend/src/organisms/connection/collection/indexes.svelte
index 18131d5..2aec5f8 100644
--- a/frontend/src/organisms/connection/collection/indexes.svelte
+++ b/frontend/src/organisms/connection/collection/indexes.svelte
@@ -7,18 +7,21 @@
let activePath = [];
let _indexes = [];
+ let error = '';
async function refresh() {
- await collection.getIndexes();
- _indexes = collection.indexes.map(idx => {
- return {
- name: idx.name,
- background: idx.background || false,
- unique: idx.unique || false,
- sparse: idx.sparse || false,
- model: idx.model,
- };
- });
+ error = await collection.getIndexes();
+ if (!error) {
+ _indexes = collection.indexes.map(idx => {
+ return {
+ name: idx.name,
+ background: idx.background || false,
+ unique: idx.unique || false,
+ sparse: idx.sparse || false,
+ model: idx.model,
+ };
+ });
+ }
}
async function createIndex() {
@@ -50,6 +53,8 @@
key="name"
data={_indexes}
getRootMenu={(_, idx) => [ { label: 'Drop this index', fn: () => dropIndex(idx.name) } ]}
+ errorTitle={error ? 'Error while getting indexes' : ''}
+ errorDescription={error}
bind:activePath
/>
diff --git a/frontend/src/organisms/connection/collection/stats.svelte b/frontend/src/organisms/connection/collection/stats.svelte
index 3bf8e83..36aaac9 100644
--- a/frontend/src/organisms/connection/collection/stats.svelte
+++ b/frontend/src/organisms/connection/collection/stats.svelte
@@ -18,11 +18,16 @@
-
+