From 5cf251042854cacb01f36c28b6b49c9359d5ba11 Mon Sep 17 00:00:00 2001
From: khorne07 <henry@wallit.eu>
Date: Mon, 8 Nov 2021 02:57:32 -0500
Subject: [PATCH] Added websocket

---
 web/src/App.jsx                      |  30 +++--
 web/src/components/EndpointTable.jsx |  84 +++++++-------
 web/src/components/Endpoints.jsx     | 157 +++++++++++----------------
 web/src/components/Footer.jsx        | 108 +++++++++---------
 web/src/components/Header.jsx        |   2 +-
 web/src/hooks/index.js               |   2 +
 web/src/hooks/useSocket.js           |  53 +++++++++
 7 files changed, 226 insertions(+), 210 deletions(-)
 create mode 100644 web/src/hooks/index.js
 create mode 100644 web/src/hooks/useSocket.js

diff --git a/web/src/App.jsx b/web/src/App.jsx
index 56e0b7d..95cc2ba 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -1,19 +1,17 @@
-import { useState } from 'react'
-import Header from './components/Header'
-import Footer from './components/Footer'
-import Endpoints from './components/Endpoints'
-import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
-const queryClient = new QueryClient()
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import Endpoints from "./components/Endpoints";
+
 function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Header />
-      <main className={"main"}>
-        <Endpoints />
-      </main>
-      <Footer />
-    </QueryClientProvider>
-  )
+	return (
+		<>
+			<Header />
+			<main className={"main"}>
+				<Endpoints />
+			</main>
+			<Footer />
+		</>
+	);
 }
 
-export default App
+export default App;
diff --git a/web/src/components/EndpointTable.jsx b/web/src/components/EndpointTable.jsx
index 7f14df1..348a02f 100644
--- a/web/src/components/EndpointTable.jsx
+++ b/web/src/components/EndpointTable.jsx
@@ -1,44 +1,44 @@
-import { Table, Thead, Tr, Th, Tbody, Td, Tooltip, Link } from '@chakra-ui/react'
-import React from 'react'
-import urlParse from 'https://cdn.skypack.dev/url-parse';
+import {
+	Table,
+	Thead,
+	Tr,
+	Th,
+	Tbody,
+	Td,
+	Tooltip,
+	Link,
+} from "@chakra-ui/react";
+import React from "react";
+import urlParse from "https://cdn.skypack.dev/url-parse";
 
 const EndpointTable = ({ endpoints, onSelectedRow }) => {
-
-    return (
-        <>
-            <Table variant="simple">
-
-                <Thead>
-                    <Tr>
-                        {
-                            Object.keys(endpoints[0]).map(k => (<Th key={k}>{k}</Th>))
-                        }
-                    </Tr>
-                </Thead>
-                <Tbody>
-
-                    {
-                        endpoints.map(endpoint => (
-
-
-                            <Tr onClick={() => onSelectedRow(endpoint)} key={endpoint.id}>
-
-                                <Td cursor="pointer" color="green">
-                                    <Tooltip label="go to ..." placement="left">
-                                        {endpoint.id.split("-")[0]}
-                                    </Tooltip>
-                                </Td>
-
-                                <Td >{urlParse(endpoint.path_url).pathname}</Td>
-                                <Td >{endpoint.status ? '☠️ down' : '✅ up'}</Td>
-                            </Tr>
-                        ))
-                    }
-
-                </Tbody>
-            </Table>
-        </>
-    )
-}
-
-export default EndpointTable
\ No newline at end of file
+	return (
+		<>
+			<Table variant="simple">
+				<Thead>
+					<Tr>
+						{Object.keys(endpoints[0]).map((k) => (
+							<Th key={k}>{k}</Th>
+						))}
+					</Tr>
+				</Thead>
+				<Tbody>
+					{endpoints.map((endpoint) => (
+						<Tr onClick={() => onSelectedRow(endpoint)} key={endpoint.id}>
+							<Td cursor="pointer" color="green">
+								<Tooltip label="go to ..." placement="left">
+									{endpoint.id.split("-")[0]}
+								</Tooltip>
+							</Td>
+
+							<Td>{urlParse(endpoint.path_url).pathname}</Td>
+							<Td>{endpoint.status ? "☠️ down" : "✅ up"}</Td>
+						</Tr>
+					))}
+				</Tbody>
+			</Table>
+		</>
+	);
+};
+
+export default EndpointTable;
diff --git a/web/src/components/Endpoints.jsx b/web/src/components/Endpoints.jsx
index b1d232b..97a61f3 100644
--- a/web/src/components/Endpoints.jsx
+++ b/web/src/components/Endpoints.jsx
@@ -1,97 +1,64 @@
-import React, { Fragment, useEffect, useReducer, useState } from 'react'
-import EndpointCard from './EndpointCard'
-import { Box, Container, Flex, Heading, Text, Center } from "@chakra-ui/react"
-import { FaIdCard, FaTable } from 'react-icons/fa'
-import EndpointTable from './EndpointTable'
-import NoDataImage from './NoData'
-import { useQuery } from 'react-query'
+import React, { useState } from "react";
+import { Box, Container, Flex, Heading, Text, Center } from "@chakra-ui/react";
+import EndpointCard from "./EndpointCard";
+import { FaIdCard, FaTable } from "react-icons/fa";
+import EndpointTable from "./EndpointTable";
+import NoDataImage from "./NoData";
+import { useSocket } from "../hooks";
 
 const Endpoints = () => {
-
-    const [viewElement, setViewElement] = useState(false)
-
-    const handleViewElement = () => {
-        setViewElement(!viewElement)
-    }
-    const handleSelectedRow = (endpoint) => {
-        console.log(endpoint)
-    }
-    const width = "100%";
-
-    const { isLoading, error, data } = useQuery('endpointsData', () =>
-        fetch('/api/v1/mngt/')
-            .then(response =>
-                response.json()
-            )
-    )
-
-    if (isLoading) return 'Loading...'
-
-    if (error) return 'An error has occurred: ' + error.message
-
-
-    return (
-        <>
-            <Container maxW="container.1sm" px={[0, 4]}>
-                <Heading as="h2" m={8} size="md">
-                    Ngonx Proxy!!
-                </Heading>
-
-                <Heading as="h1" m={8} size="2xl">
-                    Service Discovery
-                </Heading>
-                {
-
-                    <>
-                        <Box onClick={handleViewElement} cursor="pointer">
-                            {viewElement
-                                ? <FaIdCard size={23} />
-                                : <FaTable size={23} />
-                            }
-                        </Box>
-                        {
-                            viewElement
-                                ? (
-                                    <Box p={23}>
-
-                                        {
-                                            data.length > 0
-                                                ? <EndpointTable endpoints={data} onSelectedRow={handleSelectedRow} />
-                                                : <NoDataImage
-                                                    width="300"
-                                                    height="300" />
-                                        }
-
-                                    </Box>
-
-                                )
-                                : (
-
-                                    <div>
-                                        {
-                                            data.length > 0
-                                                ? (<div className={'grid'}>
-                                                    {data.map((endpoint) => (
-                                                        <Fragment key={endpoint.id}>
-
-                                                            <EndpointCard {...endpoint} />
-                                                        </Fragment>
-                                                    ))}
-                                                </div>)
-                                                : <Center>
-                                                    <NoDataImage
-                                                        width="300"
-                                                        height="300" />
-                                                </Center>
-                                        }
-                                    </div>
-                                )
-                        }
-                    </>
-
-                }
-            </Container>
-        </>
-    )
-}
-export default Endpoints;
\ No newline at end of file
+	const [viewElement, setViewElement] = useState(false);
+	const { data, error } = useSocket("api/v1/mngt/wss");
+
+	const handleViewElement = () => {
+		setViewElement(!viewElement);
+	};
+	const handleSelectedRow = (endpoint) => {
+		console.log(endpoint);
+	};
+
+	if (error) return "An error has occurred: " + error;
+
+	return (
+		<>
+			<Container maxW="container.1sm" px={[0, 4]}>
+				<Heading as="h2" m={8} size="md">
+					Ngonx Proxy!!
+				</Heading>
+				<Heading as="h1" m={8} size="2xl">
+					Service Discovery
+				</Heading>
+				<Box onClick={handleViewElement} cursor="pointer">
+					{viewElement ? <FaIdCard size={23} /> : <FaTable size={23} />}
+				</Box>
+				{viewElement ? (
+					<Box p={23}>
+						{data.length > 0 ? (
+							<EndpointTable
+								endpoints={data}
+								onSelectedRow={handleSelectedRow}
+							/>
+						) : (
+							<NoDataImage width="300" height="300" />
+						)}
+					</Box>
+				) : (
+					<div>
+						{data?.length > 0 ? (
+							<div className={"grid"}>
+								{data.map((endpoint) => (
+									<EndpointCard {...endpoint} key={endpoint.id} />
+								))}
+							</div>
+						) : (
+							<Center>
+								<NoDataImage width="300" height="300" />
+							</Center>
+						)}
+					</div>
+				)}
+			</Container>
+		</>
+	);
+};
+export default Endpoints;
diff --git a/web/src/components/Footer.jsx b/web/src/components/Footer.jsx
index 0106bab..28ec0ac 100644
--- a/web/src/components/Footer.jsx
+++ b/web/src/components/Footer.jsx
@@ -1,64 +1,60 @@
 import {
-    Box,
-    chakra,
-    Stack,
-    Text,
-    VisuallyHidden,
-    useColorModeValue,
-    Center,
-} from '@chakra-ui/react';
-import { useStylesApp } from '../hooks/useStyleApp';
+	Box,
+	chakra,
+	Stack,
+	Text,
+	VisuallyHidden,
+	useColorModeValue,
+	Center,
+} from "@chakra-ui/react";
+import { useStylesApp } from "../hooks";
 
-
-export const SocialButton = ({
-    children,
-    label,
-    href,
-}) => {
-    return (
-        <chakra.button
-            // bg={useColorModeValue('blackAlpha.100', 'whiteAlpha.100')}
-            rounded={'full'}
-            w={8}
-            h={8}
-            cursor={'pointer'}
-            as={'a'}
-            href={href}
-            display={'inline-flex'}
-            alignItems={'center'}
-            justifyContent={'center'}
-            transition={'background 0.3s ease'}
-            _hover={{
-                // bg: useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
-            }}>
-            <VisuallyHidden>{label}</VisuallyHidden>
-            {children}
-        </chakra.button>
-    );
+export const SocialButton = ({ children, label, href }) => {
+	return (
+		<chakra.button
+			// bg={useColorModeValue('blackAlpha.100', 'whiteAlpha.100')}
+			rounded={"full"}
+			w={8}
+			h={8}
+			cursor={"pointer"}
+			as={"a"}
+			href={href}
+			display={"inline-flex"}
+			alignItems={"center"}
+			justifyContent={"center"}
+			transition={"background 0.3s ease"}
+			_hover={
+				{
+					// bg: useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
+				}
+			}
+		>
+			<VisuallyHidden>{label}</VisuallyHidden>
+			{children}
+		</chakra.button>
+	);
 };
 
 const ListHeader = ({ children }) => {
-    return (
-        <Text fontWeight={'500'} fontSize={'lg'} mb={2}>
-            {children}
-        </Text>
-    );
+	return (
+		<Text fontWeight={"500"} fontSize={"lg"} mb={2}>
+			{children}
+		</Text>
+	);
 };
 
 export default function LargeWithNewsletter() {
-    const { border, colorBase } = useStylesApp()
-    return (
-        <Box
-            pt="20"
-            color={border}>
-            <Center>
-                <Stack spacing={6}>
-
-                    <Text fontSize={'sm'}>
-                        © {new Date().getFullYear()} @kenriortega web page. All rights reserved
-                    </Text>
-                </Stack>
-            </Center>
-        </Box>
-    );
-}
\ No newline at end of file
+	const { border, colorBase } = useStylesApp();
+	return (
+		<Box pt="20" color={border}>
+			<Center>
+				<Stack spacing={6}>
+					<Text fontSize={"sm"}>
+						© {new Date().getFullYear()} @kenriortega web page. All rights
+						reserved
+					</Text>
+				</Stack>
+			</Center>
+		</Box>
+	);
+}
diff --git a/web/src/components/Header.jsx b/web/src/components/Header.jsx
index 05ac5f3..56bdf18 100644
--- a/web/src/components/Header.jsx
+++ b/web/src/components/Header.jsx
@@ -11,7 +11,7 @@ import {
 } from "@chakra-ui/react";
 import Logo from "./Logo";
 import { FaSun, FaMoon, FaBars } from 'react-icons/fa'
-import { useStylesApp } from "../hooks/useStyleApp";
+import { useStylesApp } from "../hooks";
 const NavBar = (props) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const toggle = () => setIsOpen(!isOpen);
diff --git a/web/src/hooks/index.js b/web/src/hooks/index.js
new file mode 100644
index 0000000..486b8e6
--- /dev/null
+++ b/web/src/hooks/index.js
@@ -0,0 +1,2 @@
+export * from "./useSocket";
+export * from "./useStyleApp";
diff --git a/web/src/hooks/useSocket.js b/web/src/hooks/useSocket.js
new file mode 100644
index 0000000..f825439
--- /dev/null
+++ b/web/src/hooks/useSocket.js
@@ -0,0 +1,53 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+
+export const useSocket = (url) => {
+	const [data, setData] = useState(null);
+	const [error, setError] = useState(null);
+	const socket = useMemo(
+		() => new WebSocket(`ws://localhost:10001/${url}`),
+		[]
+	);
+
+	socket.onmessage = useCallback(
+		(event) => {
+			console.log("Socket message: ", data);
+			return setData(event.data);
+		},
+		[socket]
+	);
+
+	socket.onerror = useCallback(
+		(error) => {
+			console.log("Socket error: ", error);
+			setError(error);
+		},
+		[socket]
+	);
+
+	socket.onclose = useCallback(
+		(event) => {
+			if (event.wasClean) {
+				setError(
+					`Connection closed cleanly, code=${event.code} reason=${event.reason}`
+				);
+			} else {
+				//  server process killed or network down
+				setError("Connection died");
+			}
+		},
+		[socket]
+	);
+
+	const closeConnection = useCallback(
+		(code, reason) => {
+			socket.close(code, reason);
+		},
+		[socket]
+	);
+
+	useEffect(() => {
+		return closeConnection(1000, "Clean up");
+	}, []);
+
+	return { data, error, close: closeConnection };
+};