GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/nym connect health status frontend (#2969)

Browse Source 
* filter services on rust side by gateway performance

* format rust code

* create events hook

* use events hook

* remove unused component

remove unused component

update prop names in svg

* display errors in connected screen when needed

update failed health check message
This commit is contained in:
Fouad
2023-02-07 06:32:02 +00:00
committed by GitHub
parent e2309ea091
commit 11bbbb3179
9 changed files with 89 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nym-connect/src/App.tsx
-74
View File
@@ -1,74 +0,0 @@
import React, { useEffect } from 'react';
import { DateTime } from 'luxon';
import { forage } from '@tauri-apps/tauri-forage';
import { useClientContext } from './context/main';
import { useTauriEvents } from './utils';
import { AppRoutes } from './routes';
import { Connected } from './pages/connection/Connected';
export const App: FCWithChildren = () => {
const context = useClientContext();
const [busy, setBusy] = React.useState<boolean>();
useTauriEvents('help://clear-storage', (_event) => {
console.log('About to clear local storage...');
// clear local storage
try {
forage.clear()();
console.log('Local storage cleared');
} catch (e) {
console.error('Failed to clear local storage', e);
}
});
const handleConnectClick = React.useCallback(async () => {
const currentStatus = context.connectionStatus;
if (currentStatus === 'connected' || currentStatus === 'disconnected') {
setBusy(true);
// eslint-disable-next-line default-case
switch (currentStatus) {
case 'disconnected':
await context.startConnecting();
context.setConnectedSince(DateTime.now());
break;
case 'connected':
await context.startDisconnecting();
context.setConnectedSince(undefined);
break;
}
setBusy(false);
}
}, [context.connectionStatus]);
if (context.connectionStatus === 'disconnected' || context.connectionStatus === 'connecting') {
return <AppRoutes />;
}
return (
<Connected
status={context.connectionStatus}
showInfoModal={context.showInfoModal}
closeInfoModal={() => context.setShowInfoModal(false)}
busy={busy}
onConnectClick={handleConnectClick}
ipAddress="127.0.0.1"
port={1080}
gatewayPerformance={context.gatewayPerformance}
connectedSince={context.connectedSince}
serviceProvider={context.selectedProvider}
stats={[
{
label: 'in:',
totalBytes: 1024,
rateBytesPerSecond: 1024 * 1024 * 1024 + 10,
},
{
label: 'out:',
totalBytes: 1024 * 1024 * 1024 * 1024 * 20,
rateBytesPerSecond: 1024 * 1024 + 10,
},
]}
/>
);
};
nym-connect/src/components/PowerButton/PowerButton.tsx
+3 -3
View File
@@ -89,18 +89,18 @@ export const PowerButton: FCWithChildren<{
<circle cx={131} cy={131} r={75} strokeWidth={4} stroke={statusFillColor} filter="url(#blur)" opacity="0.6" />
<circle cx={131} cy={131} r={25} strokeWidth={2} stroke={statusFillColor} filter="url(#blur)" opacity="0.5" />
<g id="Button power">
<circle cx="131" cy="131" r="68.5" stroke={statusFillColor} stroke-width="0.5" />
<circle cx="131" cy="131" r="68.5" stroke={statusFillColor} strokeWidth="0.5" />
<circle id="ring-one" className={getClassName()} cx="131" cy="131" r="73" stroke={statusFillColor} />
<circle id="ring-two" className={getClassName()} cx="131" cy="131" r="77" stroke={statusFillColor} />
<circle id="ring-three" className={getClassName()} cx="131" cy="131" r="81" stroke={statusFillColor} />
<circle id="ring-four" className={getClassName()} cx="131" cy="131" r="85" stroke={statusFillColor} />
<g id="button bg">
<circle cx="131" cy="131" r="63" stroke={statusFillColor} stroke-width="3" className={buttonPulse()} />
<circle cx="131" cy="131" r="63" stroke={statusFillColor} strokeWidth="3" className={buttonPulse()} />
</g>
<g id="Power icon">
<g id="Icon">
<g id="Group 672_2">
<g id="power_settings_new_black_24dp (1) 1_2" clip-path="url(#clip1_944_8739)">
<g id="power_settings_new_black_24dp (1) 1_2" clipPath="url(#clip1_944_8739)">
<path
id="Vector_2"
d="M131 113C129.9 113 129 113.9 129 115V131C129 132.1 129.9 133 131 133C132.1 133 133 132.1 133 131V115C133 113.9 132.1 113 131 113ZM141.28 118.72C140.5 119.5 140.52 120.72 141.26 121.5C143.52 123.9 144.92 127.1 145 130.64C145.18 138.3 138.84 144.9 131.18 144.98C123.36 145.1 117 138.8 117 131C117 127.32 118.42 123.98 120.74 121.48C121.48 120.7 121.48 119.48 120.72 118.72C119.92 117.92 118.62 117.94 117.86 118.76C114.96 121.84 113.14 125.94 113 130.48C112.72 140.24 120.66 148.68 130.42 148.98C140.62 149.3 149 141.12 149 130.98C149 126.24 147.16 121.96 144.16 118.76C143.4 117.94 142.08 117.92 141.28 118.72Z"
nym-connect/src/context/main.tsx
+7 -46
View File
@@ -1,15 +1,13 @@
import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
import { DateTime } from 'luxon';
import { invoke } from '@tauri-apps/api';
import type { UnlistenFn } from '@tauri-apps/api/event';
import { listen } from '@tauri-apps/api/event';
import { forage } from '@tauri-apps/tauri-forage';
import { Error } from 'src/types/error';
import { TauriEvent } from 'src/types/event';
import { getVersion } from '@tauri-apps/api/app';
import { ConnectionStatusKind, GatewayPerformance } from '../types';
import { ConnectionStatsItem } from '../components/ConnectionStats';
import { ServiceProvider, Services } from '../types/directory';
import { useEvents } from 'src/hooks/events';
const TAURI_EVENT_STATUS_CHANGED = 'app:connection-status-changed';
@@ -66,6 +64,12 @@ export const ClientContextProvider: FCWithChildren = ({ children }) => {
setServiceProviders(services as ServiceProvider[]);
};
useEvents({
onError: (error) => setError(error),
onGatewayPerformanceChange: (performance) => setGatewayPerformance(performance),
onStatusChange: (status) => setConnectionStatus(status),
});
useEffect(() => {
initialiseApp();
}, []);
@@ -78,49 +82,6 @@ export const ClientContextProvider: FCWithChildren = ({ children }) => {
})();
}, []);
useEffect(() => {
const unlisten: UnlistenFn[] = [];
// TODO: fix typings
listen(TAURI_EVENT_STATUS_CHANGED, (event) => {
const { status } = event.payload as any;
console.log(TAURI_EVENT_STATUS_CHANGED, { status, event });
setConnectionStatus(status);
})
.then((result) => {
unlisten.push(result);
})
.catch((e) => console.log(e));
listen('socks5-event', (e: TauriEvent) => {
console.log(e);
setError(e.payload);
}).then((result) => {
unlisten.push(result);
});
listen('socks5-status-event', (e: TauriEvent) => {
if (e.payload.message.includes('slow')) {
setGatewayPerformance('Poor');
if (timerId.current) {
clearTimeout(timerId.current);
}
timerId.current = setTimeout(() => {
setGatewayPerformance('Good');
}, 10000);
}
}).then((result) => {
unlisten.push(result);
});
return () => {
unlisten.forEach((unsubscribe) => unsubscribe());
};
}, []);
const startConnecting = useCallback(async () => {
try {
await invoke('start_connecting');
nym-connect/src/hooks/events.ts
+68
View File
@@ -0,0 +1,68 @@
import { useEffect, useRef } from 'react';
import { listen, UnlistenFn } from '@tauri-apps/api/event';
import { ConnectionStatusKind, GatewayPerformance } from 'src/types';
import { Error } from 'src/types/error';
import { TauriEvent } from 'src/types/event';
const TAURI_EVENT_STATUS_CHANGED = 'app:connection-status-changed';
export const useEvents = ({
onError,
onStatusChange,
onGatewayPerformanceChange,
}: {
onError: (error: Error) => void;
onStatusChange: (status: ConnectionStatusKind) => void;
onGatewayPerformanceChange: (status: GatewayPerformance) => void;
}) => {
const timerId = useRef<NodeJS.Timeout>();
useEffect(() => {
const unlisten: UnlistenFn[] = [];
// TODO: fix typings
listen(TAURI_EVENT_STATUS_CHANGED, (event) => {
const { status } = event.payload as any;
console.log(TAURI_EVENT_STATUS_CHANGED, { status, event });
onStatusChange(status);
})
.then((result) => {
unlisten.push(result);
})
.catch((e) => console.log(e));
listen('socks5-event', (e: TauriEvent) => {
console.log(e);
onError(e.payload);
}).then((result) => {
unlisten.push(result);
});
listen('socks5-status-event', (e: TauriEvent) => {
if (e.payload.message.includes('slow')) {
onGatewayPerformanceChange('Poor');
if (timerId?.current) {
clearTimeout(timerId.current);
}
timerId.current = setTimeout(() => {
onGatewayPerformanceChange('Good');
}, 10000);
}
}).then((result) => {
unlisten.push(result);
});
listen('socks5-connection-fail-event', (e: TauriEvent) => {
onError({ title: 'Connection failed', message: `${e.payload.message} - Please disconnect and reconnect.` });
onGatewayPerformanceChange('Poor');
}).then((result) => {
unlisten.push(result);
});
return () => {
unlisten.forEach((unsubscribe) => unsubscribe());
};
}, []);
};
nym-connect/src/index.tsx
-1
View File
@@ -4,7 +4,6 @@ import { ErrorBoundary } from 'react-error-boundary';
import { ClientContextProvider } from './context/main';
import { ErrorFallback } from './components/Error';
import { NymMixnetTheme } from './theme';
import { App } from './App';
import { AppWindowFrame } from './components/AppWindowFrame';
import { TestAndEarnContextProvider } from './components/Growth/context/TestAndEarnContext';
import { BrowserRouter as Router } from 'react-router-dom';
nym-connect/src/pages/connection/Connected.tsx
+7
View File
@@ -11,8 +11,11 @@ import { ServiceProvider } from 'src/types/directory';
import { ExperimentalWarning } from 'src/components/ExperimentalWarning';
import { ConnectionLayout } from 'src/layouts/ConnectionLayout';
import { PowerButton } from 'src/components/PowerButton/PowerButton';
import { Error } from 'src/types/error';
import { InfoModal } from 'src/components/InfoModal';
export const Connected: FCWithChildren<{
error?: Error;
status: ConnectionStatusKind;
showInfoModal: boolean;
gatewayPerformance: GatewayPerformance;
@@ -23,9 +26,11 @@ export const Connected: FCWithChildren<{
busy?: boolean;
isError?: boolean;
serviceProvider?: ServiceProvider;
clearError: () => void;
onConnectClick: (status: ConnectionStatusKind) => void;
closeInfoModal: () => void;
}> = ({
error,
status,
showInfoModal,
gatewayPerformance,
@@ -35,11 +40,13 @@ export const Connected: FCWithChildren<{
busy,
isError,
serviceProvider,
clearError,
onConnectClick,
closeInfoModal,
}) => {
return (
<>
{error && <InfoModal show title={error.title} description={error.message} onClose={clearError} />}
<IpAddressAndPortModal show={showInfoModal} onClose={closeInfoModal} ipAddress={ipAddress} port={port} />
<ConnectionLayout
TopContent={
nym-connect/src/pages/connection/index.tsx
+2
View File
@@ -47,6 +47,8 @@ export const ConnectionPage = () => {
if (context.connectionStatus === 'connected')
return (
<Connected
error={context.error}
clearError={context.clearError}
status={context.connectionStatus}
showInfoModal={context.showInfoModal}
busy={busy}
nym-connect/src/stories/AppFlow.stories.tsx
+1
View File
@@ -87,6 +87,7 @@ export const Mock: ComponentStory<typeof AppWindowFrame> = () => {
return (
<AppWindowFrame>
<Connected
clearError={() => {}}
gatewayPerformance="Good"
showInfoModal={false}
closeInfoModal={() => undefined}
nym-connect/src/stories/ConnectedLayout.stories.tsx
+1
View File
@@ -15,6 +15,7 @@ export default {
export const Default: ComponentStory<typeof Connected> = () => (
<Box p={2} width={242} sx={{ bgcolor: 'nym.background.dark' }}>
<Connected
clearError={() => {}}
gatewayPerformance="Good"
showInfoModal={false}
closeInfoModal={() => {