feat: start beta ngonx-ui

kenriortega · Nov 1, 2021 · bd659b2 · bd659b2
1 parent 9bf8e5f
commit bd659b2
Show file tree

Hide file tree

Showing 20 changed files with 2,512 additions and 0 deletions.
diff --git a/web/ngonx-app/.gitignore b/web/ngonx-app/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/web/ngonx-app/index.html b/web/ngonx-app/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/web/ngonx-app/package.json b/web/ngonx-app/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "ngonx-app",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^1.6.10",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "framer-motion": "^4",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-icons": "^4.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^1.0.0",
+    "vite": "^2.6.4"
+  }
+}
diff --git a/web/ngonx-app/src/App.jsx b/web/ngonx-app/src/App.jsx
@@ -0,0 +1,17 @@
+import { useState } from 'react'
+import Header from './components/Header'
+import Footer from './components/Footer'
+import Endpoints from './components/Endpoints'
+function App() {
+  return (
+    <>
+      <Header />
+      <main className={"main"}>
+        <Endpoints />
+      </main>
+      <Footer />
+    </>
+  )
+}
+
+export default App
diff --git a/web/ngonx-app/src/components/EndpointCard.jsx b/web/ngonx-app/src/components/EndpointCard.jsx
@@ -0,0 +1,22 @@
+import { Box, Link } from '@chakra-ui/react'
+import React from 'react'
+import urlParse from 'https://cdn.skypack.dev/url-parse';
+const EndpointCard = ({ id, path_url, status }) => {
+    const { pathname, hostname, protocol } = new urlParse(path_url)
+    return (
+        <>
+            <span className={"card"} >
+                <Box w="500" >
+
+                    <h1>{status ? `☠️ Down` : `✅ UP`}</h1>
+                    <h3>Path: {pathname}</h3>
+                    <h4>Host: {hostname}</h4>
+
+                </Box>
+            </span>
+
+        </>
+    )
+}
+
+export default EndpointCard
diff --git a/web/ngonx-app/src/components/EndpointTable.jsx b/web/ngonx-app/src/components/EndpointTable.jsx
@@ -0,0 +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';
+
+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
diff --git a/web/ngonx-app/src/components/Endpoints.jsx b/web/ngonx-app/src/components/Endpoints.jsx
@@ -0,0 +1,122 @@
+import React, { Fragment, useEffect, useReducer, useState } from 'react'
+import EndpointCard from './EndpointCard'
+import { Box, Container, Flex, Heading, Text } from "@chakra-ui/react"
+import { getAllEndpoints, GetEndpointsReducer, initialStateGetAllEndpoints } from '../lib/getEndpointsReducer'
+import { FaIdCard, FaTable } from 'react-icons/fa'
+import EndpointTable from './EndpointTable'
+import NoDataImage from './NoData'
+const Endpoints = () => {
+    // const [{ endpoints, loading, errorMessage }, dispatch] =
+    //     useReducer(GetEndpointsReducer, initialStateGetAllEndpoints)
+
+    // useEffect(() => {
+    //     async function fetchEndpoints() {
+    //         try {
+    //             let response = await getAllEndpoints(dispatch)
+    //             if (!response) return;
+    //         } catch (error) {
+    //             console.log(error);
+    //         }
+    //     }
+
+    //     fetchEndpoints()
+    // }, [])
+
+    const endpoints = [
+        {
+            id: "6c4fa765-f6bf-4f00-950f-3315f504cc50",
+            path_url: "http://localhost:3000/api/v1/health/",
+            status: "down"
+        },
+        {
+            id: "4abbf98f-8a8c-46ca-a2c5-ae8eaefbef60",
+            path_url: "http://localhost:3000/api/v1/version/",
+            status: "down"
+        }
+    ]
+
+    const loading = false
+    const [viewElement, setViewElement] = useState(false)
+
+    const handleViewElement = () => {
+        setViewElement(!viewElement)
+    }
+    const handleSelectedRow = (poll) => {
+        console.log(poll)
+    }
+    const width = "100%";
+    return (
+        <>
+            <Container maxW="container.1sm" px={[0, 4]}>
+                <Heading as="h2" m={8} size="md">
+                    Ngonx Proxy!!
+
+                </Heading>
+                <Text m={8} size="md">
+                    In this board you can find the status check point for all endpoints defined on yml file
+                </Text>
+
+
+                <Heading as="h1" m={8} size="2xl">
+                    Service Discovery
+                </Heading>
+                {
+                    loading
+                        ?
+                        (<Text>Fetching data ...</Text>)
+                        :
+                        (
+                            <>
+                                <Box onClick={handleViewElement} cursor="pointer">
+                                    {viewElement
+                                        ? <FaIdCard size={23} />
+                                        : <FaTable size={23} />
+                                    }
+                                </Box>
+                                {
+                                    viewElement
+                                        ? (
+                                            <Box p={23}>
+
+                                                {
+                                                    endpoints.length > 0
+                                                        ? <EndpointTable endpoints={endpoints} onSelectedRow={handleSelectedRow} />
+                                                        : <NoDataImage
+                                                            width="300"
+                                                            height="300" />
+                                                }
+
+                                            </Box>
+
+                                        )
+                                        : (
+
+                                            <div>
+                                                {
+                                                    endpoints.length > 0
+                                                        ? (<div className={'grid'}>
+                                                            {endpoints.map((endpoint) => (
+                                                                <Fragment key={endpoint.id}>
+
+                                                                    <EndpointCard {...endpoint} />
+                                                                </Fragment>
+                                                            ))}
+                                                        </div>)
+                                                        : <Center>
+                                                            <NoDataImage
+                                                                width="300"
+                                                                height="300" />
+                                                        </Center>
+                                                }
+                                            </div>
+                                        )
+                                }
+                            </>
+                        )
+
+                }
+            </Container>
+        </>
+    )
+}
+export default Endpoints;
diff --git a/web/ngonx-app/src/components/Footer.jsx b/web/ngonx-app/src/components/Footer.jsx
@@ -0,0 +1,64 @@
+import {
+    Box,
+    chakra,
+    Stack,
+    Text,
+    VisuallyHidden,
+    useColorModeValue,
+    Center,
+} from '@chakra-ui/react';
+import { useStylesApp } from '../hooks/useStyleApp';
+
+
+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>
+    );
+};
+
+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>
+    );
+}