-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #30 from khorne07/Fixing-websocket-usage
Added websocket
- Loading branch information
Showing
7 changed files
with
226 additions
and
210 deletions.
There are no files selected for viewing
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 |
|---|---|---|
| @@ -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; |
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 |
|---|---|---|
| @@ -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 | ||
| 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; |
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 |
|---|---|---|
| @@ -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; | ||
| 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; |
Oops, something went wrong.