mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Improve UI with design feedback, add logs, fix realtime rules
This commit is contained in:
Matej Baco
Generated
+7
-7
@@ -9,7 +9,7 @@
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@analytics/google-analytics": "^1.0.5",
|
||||
"@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.9",
|
||||
"@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.10",
|
||||
"@aw-labs/icons": "0.0.0-77",
|
||||
"@aw-labs/ui": "0.0.0-77",
|
||||
"@popperjs/core": "^2.11.6",
|
||||
@@ -146,9 +146,9 @@
|
||||
},
|
||||
"node_modules/@aw-labs/appwrite-console": {
|
||||
"name": "matej-appwrite-console",
|
||||
"version": "7.1.9",
|
||||
"resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.9.tgz",
|
||||
"integrity": "sha512-3sYGFRfUZK0f6caBHCVTw4F6thKlq1/HgqLg5bOfB+gIz5u8ADRPhjPL5CukdN35vLyJkWvn92rOcCr65tY1tA==",
|
||||
"version": "7.1.10",
|
||||
"resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.10.tgz",
|
||||
"integrity": "sha512-GlNTTkJ5iHpUYgyJ3rexeGmCdD2WQ0zwSw6yFA2lf4aLVh+VuZQdoEEmW0K1dpTnBtg8EGkqhMCIIZTRV4mgcw==",
|
||||
"dependencies": {
|
||||
"cross-fetch": "3.1.5",
|
||||
"isomorphic-form-data": "2.0.0"
|
||||
@@ -7741,9 +7741,9 @@
|
||||
"integrity": "sha512-1Yw7u/COtxx06BfwlI+kVhsa/upKYzmCNrT4c8QDeCY2KMYlnijkUjtHiPU08HxyTIVB5j6d75O0YWVIHwQS8g=="
|
||||
},
|
||||
"@aw-labs/appwrite-console": {
|
||||
"version": "npm:matej-appwrite-console@7.1.9",
|
||||
"resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.9.tgz",
|
||||
"integrity": "sha512-3sYGFRfUZK0f6caBHCVTw4F6thKlq1/HgqLg5bOfB+gIz5u8ADRPhjPL5CukdN35vLyJkWvn92rOcCr65tY1tA==",
|
||||
"version": "npm:matej-appwrite-console@7.1.10",
|
||||
"resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.10.tgz",
|
||||
"integrity": "sha512-GlNTTkJ5iHpUYgyJ3rexeGmCdD2WQ0zwSw6yFA2lf4aLVh+VuZQdoEEmW0K1dpTnBtg8EGkqhMCIIZTRV4mgcw==",
|
||||
"requires": {
|
||||
"cross-fetch": "3.1.5",
|
||||
"isomorphic-form-data": "2.0.0"
|
||||
|
||||
+1
-1
@@ -21,7 +21,7 @@
|
||||
"dependencies": {
|
||||
"@analytics/google-analytics": "^1.0.5",
|
||||
"analytics": "^0.8.1",
|
||||
"@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.9",
|
||||
"@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.10",
|
||||
"@aw-labs/icons": "0.0.0-77",
|
||||
"@aw-labs/ui": "0.0.0-77",
|
||||
"@popperjs/core": "^2.11.6",
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { Pill } from '$lib/elements';
|
||||
import Prism from 'prismjs';
|
||||
import 'prismjs/components/prism-ruby';
|
||||
import 'prismjs/components/prism-php';
|
||||
import 'prismjs/components/prism-dart';
|
||||
import 'prismjs/components/prism-kotlin';
|
||||
import 'prismjs/components/prism-python';
|
||||
import 'prismjs/components/prism-json';
|
||||
import 'prismjs/components/prism-bash';
|
||||
import 'prismjs/components/prism-yaml';
|
||||
@@ -16,7 +19,18 @@
|
||||
export let label: string = null;
|
||||
export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' = null;
|
||||
export let code: string;
|
||||
export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
|
||||
export let language:
|
||||
| 'js'
|
||||
| 'html'
|
||||
| 'dart'
|
||||
| 'ruby'
|
||||
| 'python'
|
||||
| 'php'
|
||||
| 'kotlin'
|
||||
| 'json'
|
||||
| 'sh'
|
||||
| 'yml'
|
||||
| 'swift';
|
||||
export let withLineNumbers = false;
|
||||
export let withCopy = false;
|
||||
export let noMargin = false;
|
||||
|
||||
@@ -22,12 +22,14 @@
|
||||
import Delete from './delete.svelte';
|
||||
import { trackEvent } from '$lib/actions/analytics';
|
||||
import { ruleResource } from './wizard/store';
|
||||
import Logs from './logs.svelte';
|
||||
|
||||
export let rules: Models.ProxyRuleList;
|
||||
export let resourceType: string;
|
||||
export let resourceId: string;
|
||||
|
||||
let showDelete = false;
|
||||
let showLogs = false;
|
||||
let selectedRule: Models.ProxyRule;
|
||||
let isVerifying = {};
|
||||
|
||||
@@ -75,9 +77,9 @@
|
||||
{#if rules.total}
|
||||
<TableScroll>
|
||||
<TableHeader>
|
||||
<TableCellHead width={200}>Domain Name</TableCellHead>
|
||||
<TableCellHead width={50}>Status</TableCellHead>
|
||||
<TableCellHead width={250} />
|
||||
<TableCellHead width={300}>Domain Name</TableCellHead>
|
||||
<TableCellHead width={100}>Status</TableCellHead>
|
||||
<TableCellHead width={150} />
|
||||
<TableCellHead width={40}>Actions</TableCellHead>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
@@ -123,6 +125,20 @@
|
||||
<span class="icon-key" aria-hidden="true" />
|
||||
</button>
|
||||
{/if}
|
||||
{#if rule.status === 'unverified' || rule.status === 'verified'}
|
||||
<!-- TODO: remove inline styles -->
|
||||
<button
|
||||
class="button is-text is-only-icon u-padding-inline-0"
|
||||
style="--p-button-size: var(--button-size, 2.0rem);"
|
||||
aria-label="Verify item"
|
||||
on:click={() => {
|
||||
showLogs = true;
|
||||
selectedRule = rule;
|
||||
}}>
|
||||
<span class="icon-terminal" aria-hidden="true" />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- TODO: remove inline styles -->
|
||||
<button
|
||||
class="button tooltip is-text is-only-icon u-padding-inline-0"
|
||||
@@ -153,3 +169,5 @@
|
||||
</Container>
|
||||
|
||||
<Delete bind:showDelete bind:selectedRule />
|
||||
|
||||
<Logs bind:showLogs logs={selectedRule?.logs ? selectedRule?.logs : 'No logs recorded.'} />
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { Modal } from '$lib/components';
|
||||
import Code from '$lib/components/code.svelte';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
|
||||
export let showLogs = false;
|
||||
export let logs: string;
|
||||
</script>
|
||||
|
||||
<Modal bind:show={showLogs}>
|
||||
<svelte:fragment slot="header">Certificate Logs</svelte:fragment>
|
||||
<p>Logs from the process of certificate generation with LetsEncrypt and Certbot.</p>
|
||||
|
||||
<Code withLineNumbers withCopy language="sh" code={logs} />
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<Button text on:click={() => (showLogs = false)}>Close</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
@@ -1,20 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { WizardStep } from '$lib/layout';
|
||||
import { sdkForProject } from '$lib/stores/sdk';
|
||||
import { rule } from './store';
|
||||
import { sdkForConsole, sdkForProject } from '$lib/stores/sdk';
|
||||
import CnameTable from './cnameTable.svelte';
|
||||
import VerificationBox from './verificationBox.svelte';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import type { Models } from '@aw-labs/appwrite-console';
|
||||
import { rule } from './store';
|
||||
|
||||
let status = 'verifying';
|
||||
const checkCertificate = () => {
|
||||
setTimeout(async () => {
|
||||
const result = await sdkForProject.proxy.getRule($rule.$id);
|
||||
status = result.status;
|
||||
|
||||
if (result.status === 'verifying') {
|
||||
checkCertificate();
|
||||
let unsubscribe: { (): void };
|
||||
|
||||
onMount(() => {
|
||||
unsubscribe = sdkForConsole.client.subscribe<Models.ProxyRule>('console', (response) => {
|
||||
if (response.events.includes(`rules.${$rule.$id}`)) {
|
||||
status = response.payload.status;
|
||||
}
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe();
|
||||
}
|
||||
});
|
||||
|
||||
const checkCertificate = async () => {
|
||||
const result = await sdkForProject.proxy.getRule($rule.$id);
|
||||
status = result.status;
|
||||
};
|
||||
checkCertificate();
|
||||
</script>
|
||||
|
||||
@@ -8,46 +8,83 @@
|
||||
export let showSnippet = false;
|
||||
export let variableKey: string;
|
||||
|
||||
// TODO: @Meldiron Finish or delete this component
|
||||
// TODO: @Meldiron finish this component
|
||||
|
||||
enum Language {
|
||||
NodeJS,
|
||||
NodeJs,
|
||||
PHP,
|
||||
Python,
|
||||
Dart,
|
||||
Ruby,
|
||||
Java
|
||||
Deno,
|
||||
Dart,
|
||||
Kotlin,
|
||||
Swift
|
||||
}
|
||||
let language: Language = Language.NodeJS;
|
||||
let language: Language = Language.NodeJs;
|
||||
</script>
|
||||
|
||||
<Modal bind:show={showSnippet} size="big">
|
||||
<svelte:fragment slot="header">Code Snippet</svelte:fragment>
|
||||
<p>Snippet of a code showing how to read environment variables in Appwrite Functions.</p>
|
||||
<Tabs>
|
||||
<Tab on:click={() => (language = Language.NodeJS)} selected={language === Language.NodeJS}>
|
||||
Node.JS
|
||||
<Tab on:click={() => (language = Language.NodeJs)} selected={language === Language.NodeJs}>
|
||||
Node.js
|
||||
</Tab>
|
||||
<Tab on:click={() => (language = Language.PHP)} selected={language === Language.PHP}>
|
||||
PHP
|
||||
</Tab>
|
||||
<Tab on:click={() => (language = Language.Python)} selected={language === Language.Python}>
|
||||
Python
|
||||
</Tab>
|
||||
<Tab on:click={() => (language = Language.Dart)} selected={language === Language.Dart}>
|
||||
Dart
|
||||
</Tab>
|
||||
<Tab on:click={() => (language = Language.Ruby)} selected={language === Language.Ruby}>
|
||||
Ruby
|
||||
</Tab>
|
||||
<Tab on:click={() => (language = Language.Java)} selected={language === Language.Java}>
|
||||
Java
|
||||
<Tab on:click={() => (language = Language.Deno)} selected={language === Language.Deno}>
|
||||
Deno
|
||||
</Tab>
|
||||
<Tab on:click={() => (language = Language.Dart)} selected={language === Language.Dart}>
|
||||
Dart
|
||||
</Tab>
|
||||
<Tab on:click={() => (language = Language.Kotlin)} selected={language === Language.Kotlin}>
|
||||
Kotlin
|
||||
</Tab>
|
||||
<Tab on:click={() => (language = Language.Swift)} selected={language === Language.Swift}>
|
||||
Swift
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
{#if language === Language.NodeJS}
|
||||
{#if language === Language.NodeJs}
|
||||
<Code withLineNumbers withCopy language="js" code={`process.env['${variableKey}']`} />
|
||||
{:else if language === Language.PHP}
|
||||
<Code withLineNumbers withCopy language="php" code={`getenv('${variableKey}')`} />
|
||||
{:else if language === Language.Python}
|
||||
<Code
|
||||
withLineNumbers
|
||||
withCopy
|
||||
language="js"
|
||||
label="JavaScript"
|
||||
code={`process.env['${variableKey}']`} />
|
||||
language="python"
|
||||
code={`os.environ.get('${variableKey}')`} />
|
||||
{:else if language === Language.Ruby}
|
||||
<Code withLineNumbers withCopy language="ruby" code={`ENV['${variableKey}']`} />
|
||||
{:else if language === Language.Deno}
|
||||
<Code withLineNumbers withCopy language="js" code={`Deno.env.get("${variableKey}")`} />
|
||||
{:else if language === Language.Dart}
|
||||
<Code
|
||||
withLineNumbers
|
||||
withCopy
|
||||
language="dart"
|
||||
code={`Platform.environment['${variableKey}']`} />
|
||||
{:else if language === Language.Kotlin}
|
||||
<Code
|
||||
withLineNumbers
|
||||
withCopy
|
||||
language="kotlin"
|
||||
code={`System.getenv().getOrDefault("${variableKey}")`} />
|
||||
{:else if language === Language.Swift}
|
||||
<Code
|
||||
withLineNumbers
|
||||
withCopy
|
||||
language="swift"
|
||||
code={`ProcessInfo.processInfo.environment["${variableKey}"]`} />
|
||||
{/if}
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
|
||||
@@ -209,21 +209,6 @@
|
||||
<span class="icon-duplicate" aria-hidden="true" />
|
||||
</button>
|
||||
</Copy>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
snippetKey = variable.key;
|
||||
showSnippet = true;
|
||||
}}
|
||||
use:tooltip={{
|
||||
content: 'Code snippets',
|
||||
hideOnClick: false
|
||||
}}
|
||||
class="interactive-text-output-button"
|
||||
aria-label="copy code">
|
||||
<span class="icon-code" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@@ -240,6 +225,14 @@
|
||||
<span class="icon-dots-horizontal" aria-hidden="true" />
|
||||
</button>
|
||||
<svelte:fragment slot="list">
|
||||
<DropListItem
|
||||
icon="code"
|
||||
on:click={() => {
|
||||
snippetKey = variable.key;
|
||||
showSnippet = true;
|
||||
}}>
|
||||
Code snippets
|
||||
</DropListItem>
|
||||
<DropListItem
|
||||
icon="pencil"
|
||||
on:click={() => {
|
||||
@@ -281,7 +274,7 @@
|
||||
showVariablesModal = true;
|
||||
}}>
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text">Create environment variables</span>
|
||||
<span class="text">Create environment variable</span>
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -291,7 +284,7 @@
|
||||
|
||||
{#if !isShared && !isWizard}
|
||||
<Alert type="info">
|
||||
Shared variables from <a href={sharedVariablesUrl} class="link">project settings</a> are also
|
||||
Global variables from <a href={sharedVariablesUrl} class="link">project settings</a> are also
|
||||
available. When there is name conflict, function variable is used.
|
||||
</Alert>
|
||||
{/if}
|
||||
@@ -307,7 +300,7 @@
|
||||
|
||||
{#if !isShared}
|
||||
<Modal bind:show={showPromote} on:submit={() => handlePromote(promoteVariable)} warning>
|
||||
<svelte:fragment slot="header">Promote To Shared Variable</svelte:fragment>
|
||||
<svelte:fragment slot="header">Promote To Global Variable</svelte:fragment>
|
||||
<p>
|
||||
Are you sure you want to promote <code>{promoteVariable.key}</code>? This will move
|
||||
variable into project settings and make it visible to all services.
|
||||
|
||||
@@ -10,6 +10,8 @@
|
||||
unsubscribe = sdkForConsole.client.subscribe('console', (response) => {
|
||||
if (response.events.includes('functions.*.deployments.*')) {
|
||||
invalidate(Dependencies.DEPLOYMENTS);
|
||||
} else if (response.events.includes('rules.*')) {
|
||||
invalidate(Dependencies.RULES);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
-2
@@ -36,8 +36,6 @@
|
||||
let arePermsDisabled = true;
|
||||
let logging: boolean = null;
|
||||
|
||||
// TODO: @Meldiron implement "Promote"
|
||||
|
||||
const eventSet: Writable<Set<string>> = writable(new Set());
|
||||
let showEvents = false;
|
||||
let areEventsDisabled = true;
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
},
|
||||
{
|
||||
href: `${path}/variables`,
|
||||
title: 'Shared Variables',
|
||||
event: 'sharedVariables'
|
||||
title: 'Global Variables',
|
||||
event: 'globalVariables'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user