Frontend node logs loading indicator

This commit is contained in:
ditatompel 2024-05-07 20:55:57 +07:00
parent d04473a807
commit 59da1cb7eb
No known key found for this signature in database
GPG key ID: 31D3D06D77950979
4 changed files with 179 additions and 146 deletions

11
frontend/src/app.d.ts vendored
View file

@ -11,6 +11,17 @@ declare global {
interface ImportMetaEnv { interface ImportMetaEnv {
VITE_API_URL: string; VITE_API_URL: string;
} }
interface MoneroNode {
id: number;
hostname: string;
ip: string;
port: number;
protocol: string;
is_tor: boolean;
is_available: boolean;
nettype: string;
}
} }
export {}; export {};

View file

@ -127,7 +127,7 @@
<MainNav /> <MainNav />
<div class="pt-10 md:pt-12"> <div class="pt-10 md:pt-12 min-h-screen">
<slot /> <slot />
</div> </div>

View file

@ -1,7 +1,7 @@
<script> <script>
import { DataHandler } from '@vincjo/datatables/remote'; import { DataHandler } from '@vincjo/datatables/remote';
import { format, formatDistance } from 'date-fns'; import { format, formatDistance } from 'date-fns';
import { loadData, formatBytes } from './api-handler'; import { loadData, loadNodeInfo, formatBytes } from './api-handler';
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { import {
DtSrRowsPerPage, DtSrRowsPerPage,
@ -45,6 +45,9 @@
let filterProberId = 0; let filterProberId = 0;
let filterStatus = -1; let filterStatus = -1;
/** @type {MoneroNode | null} */
let nodeInfo;
const handler = new DataHandler([], { rowsPerPage: 10, totalRows: 0 }); const handler = new DataHandler([], { rowsPerPage: 10, totalRows: 0 });
let rows = handler.getRows(); let rows = handler.getRows();
@ -93,6 +96,9 @@
}); });
onMount(() => { onMount(() => {
pageId = new URLSearchParams(window.location.search).get('node_id') || '0'; pageId = new URLSearchParams(window.location.search).get('node_id') || '0';
loadNodeInfo(pageId).then((data) => {
nodeInfo = data;
});
handler.filter(pageId, 'node_id'); handler.filter(pageId, 'node_id');
handler.onChange((state) => loadData(state)); handler.onChange((state) => loadData(state));
handler.invalidate(); handler.invalidate();
@ -109,34 +115,43 @@
</div> </div>
<div class="section-container text-center"> <div class="section-container text-center">
<h1 class="h1 pb-2 font-extrabold">{data.meta.title}</h1> <h1 class="h1 pb-2 font-extrabold">{data.meta.title}</h1>
<p class="mx-auto max-w-3xl">
<strong>Monero remote node</strong> is a device on the internet running the Monero software with
full copy of the Monero blockchain that doesn't run on the same local machine where the Monero
wallet is located.
</p>
</div> </div>
<div class="mx-auto w-full max-w-3xl px-20"> <div class="mx-auto w-full max-w-3xl px-20">
<hr class="!border-primary-400-500-token !border-t-4 !border-double" /> <hr class="!border-primary-400-500-token !border-t-4 !border-double" />
</div> </div>
</header> </header>
<section id="introduction "> {#if nodeInfo === undefined}
<div class="section-container text-center !max-w-4xl"> <div class="section-container mx-auto w-full max-w-3xl text-center">
<p> <p>Loading...</p>
Remote node can be used by people who, for their own reasons (usually because of hardware </div>
requirements, disk space, or technical abilities), cannot/don't want to run their own node and {:else if nodeInfo === null}
prefer to relay on one publicly available on the Monero network. <div class="section-container mx-auto w-full max-w-3xl text-center">
</p> <p>Node ID does not exist</p>
<p> </div>
Using an open node will allow to make a transaction instantaneously, without the need to {:else}
download the blockchain and sync to the Monero network first, but at the cost of the control <div class="section-container">
over your privacy. the <strong>Monero community suggests to always run your own node</strong> to <div class="table-container mx-auto w-full max-w-3xl">
obtain the maximum possible privacy and to help decentralize the network. <table class="table">
</p> <tbody>
<tr>
<td class="font-bold">Hostname:Port</td>
<td>{nodeInfo?.hostname}:{nodeInfo?.port}</td>
</tr>
<tr>
<td class="font-bold">Public IP</td>
<td>{nodeInfo?.ip}</td>
</tr>
<tr>
<td class="font-bold">Net Type</td>
<td>{nodeInfo?.nettype.toUpperCase()}</td>
</tr></tbody
>
</table>
</div>
</div> </div>
</section>
<section id="monero-remote-node"> <section id="node-logs">
<div class="section-container"> <div class="section-container">
<div class="space-y-2 overflow-x-auto"> <div class="space-y-2 overflow-x-auto">
<div class="flex justify-between"> <div class="flex justify-between">
@ -248,7 +263,8 @@
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/if}
<style lang="postcss"> <style lang="postcss">
.section-container { .section-container {

View file

@ -8,6 +8,12 @@ export const loadData = async (state) => {
return json.data.items ?? []; return json.data.items ?? [];
}; };
export const loadNodeInfo = async (nodeId) => {
const response = await fetch(apiUri(`/api/v1/nodes/id/${nodeId}`));
const json = await response.json();
return json.data;
};
/** /**
* @param {number} bytes * @param {number} bytes
* @param {number} decimals * @param {number} decimals