This repository has been archived by the owner on Aug 1, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add a network diagnostics screen (#1758)
feat(ui): add network diagnostics Signed-off-by: Alex Good <alex@memoryandthought.me>
- Loading branch information
Showing
19 changed files
with
519 additions
and
14 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
declare module "svelte-json-tree" { | ||
import type { SvelteComponentTyped } from "svelte"; | ||
interface Props { | ||
key?: string; | ||
value: any; // eslint-disable-line @typescript-eslint/no-explicit-any | ||
} | ||
export default class JSONTree extends SvelteComponentTyped<Props> {} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
<script lang="typescript"> | ||
import Router from "svelte-spa-router"; | ||
import { status as store } from "ui/src/localPeer"; | ||
import * as path from "ui/src/path"; | ||
import ActionBar from "ui/DesignSystem/Component/ActionBar.svelte"; | ||
import Header from "ui/DesignSystem/Component/Header.svelte"; | ||
import HorizontalMenu from "ui/DesignSystem/Component/HorizontalMenu.svelte"; | ||
import SidebarLayout from "ui/DesignSystem/Component/SidebarLayout.svelte"; | ||
import IconNetwork from "ui/DesignSystem/Primitive/Icon/Network.svelte"; | ||
import IconRoad from "ui/DesignSystem/Primitive/Icon/Road.svelte"; | ||
import ConnectedPeers from "./NetworkDiagnostics/ConnectedPeers.svelte"; | ||
import WaitingRoom from "./NetworkDiagnostics/WaitingRoom.svelte"; | ||
const screenRoutes = { | ||
[path.networkDiagnosticsConnectedPeers()]: ConnectedPeers, | ||
[path.networkDiagnosticsWaitingRoom()]: WaitingRoom, | ||
}; | ||
const topbarMenuItems = [ | ||
{ | ||
icon: IconNetwork, | ||
title: "Peers", | ||
href: path.networkDiagnosticsConnectedPeers(), | ||
looseActiveStateMatching: true, | ||
}, | ||
{ | ||
icon: IconRoad, | ||
title: "Requests", | ||
href: path.networkDiagnosticsWaitingRoom(), | ||
looseActiveStateMatching: true, | ||
}, | ||
]; | ||
</script> | ||
|
||
<style> | ||
.title { | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
} | ||
</style> | ||
|
||
<SidebarLayout> | ||
<Header> | ||
<div slot="left" class="title"> | ||
<h1>Status: {$store.type}</h1> | ||
</div> | ||
</Header> | ||
|
||
<ActionBar> | ||
<div slot="left"> | ||
<HorizontalMenu items={topbarMenuItems} /> | ||
</div> | ||
</ActionBar> | ||
|
||
<Router routes={screenRoutes} /> | ||
</SidebarLayout> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
<script lang="typescript"> | ||
import { StatusType, status } from "ui/src/localPeer"; | ||
let isOnline = false; | ||
let connectedPeers: { [peerId: string]: string[] } = {}; | ||
$: if ($status.type === StatusType.Online) { | ||
isOnline = true; | ||
connectedPeers = $status.connectedPeers; | ||
} | ||
</script> | ||
|
||
<style> | ||
table { | ||
table-layout: fixed; | ||
width: 100%; | ||
border-collapse: collapse; | ||
border: 3px solid purple; | ||
} | ||
</style> | ||
|
||
{#if isOnline} | ||
<div> | ||
<h2>Connected Peers</h2> | ||
<table> | ||
<thead> | ||
<tr> | ||
<td>Peer</td> | ||
<td>Connections</td> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{#each Object.keys(connectedPeers).sort() as peerId} | ||
<tr> | ||
<td>{peerId}</td> | ||
<td> | ||
<ul> | ||
{#each connectedPeers[peerId].sort() as address} | ||
<li>{address}</li> | ||
{/each} | ||
</ul> | ||
</td> | ||
</tr> | ||
{/each} | ||
</tbody> | ||
</table> | ||
</div> | ||
{/if} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<script lang="typescript"> | ||
import type { RoomState } from "ui/src/waitingRoom"; | ||
import StyledCopyable from "ui/DesignSystem/Component/StyledCopyable.svelte"; | ||
export let state: RoomState; | ||
</script> | ||
|
||
<table> | ||
<thead> | ||
<tr> | ||
<td>Urn</td> | ||
<td>State</td> | ||
<td>Peer States</td> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
{#each Object.keys(state).sort() as urn} | ||
<tr> | ||
<td> | ||
<StyledCopyable value={urn} truncate={true} expandable={false} /> | ||
</td> | ||
<td>{state[urn].state}</td> | ||
<td> | ||
<table> | ||
<tbody> | ||
{#each Object.keys(state[urn].peers).sort() as peerId} | ||
<tr> | ||
<td> | ||
<StyledCopyable | ||
value={peerId} | ||
truncate={true} | ||
expandable={false} /> | ||
</td> | ||
<td>{JSON.stringify(state[urn].peers[peerId])}</td> | ||
</tr> | ||
{/each} | ||
</tbody> | ||
</table> | ||
</td> | ||
</tr> | ||
{/each} | ||
</tbody> | ||
</table> |
Oops, something went wrong.