From 59c65f4e8b8e0126d7448861f207d9d0c17805ea Mon Sep 17 00:00:00 2001 From: RouxAntoine Date: Mon, 24 Jul 2023 08:23:26 +0200 Subject: [PATCH] feature: frontend split component and list all node --- src/main/resources/application-dev.properties | 4 + src/main/resources/application.properties | 4 + src/main/resources/public/index.html | 9 ++ src/main/resources/public/src/App.js | 113 +++++++----------- src/main/resources/public/src/ListData.js | 13 ++ .../resources/public/src/NodesComponent.js | 18 +++ src/main/resources/public/src/RootBody.js | 20 ++++ src/main/resources/public/src/RootFooter.js | 7 ++ src/main/resources/public/src/RootHeader.js | 44 +++++++ 9 files changed, 163 insertions(+), 69 deletions(-) create mode 100644 src/main/resources/application-dev.properties create mode 100644 src/main/resources/application.properties create mode 100644 src/main/resources/public/src/ListData.js create mode 100644 src/main/resources/public/src/NodesComponent.js create mode 100644 src/main/resources/public/src/RootBody.js create mode 100644 src/main/resources/public/src/RootFooter.js create mode 100644 src/main/resources/public/src/RootHeader.js diff --git a/src/main/resources/application-dev.properties b/src/main/resources/application-dev.properties new file mode 100644 index 0000000..a916e60 --- /dev/null +++ b/src/main/resources/application-dev.properties @@ -0,0 +1,4 @@ +backoffice.configuration.kubernetes.api.kubeconfig=/Users/antoine/.kube/config.kubeconfig + +#backoffice.configuration.kubernetes.api.url=https://kubernetes.localdomain:6443 +#backoffice.configuration.kubernetes.api.ca-cert=/Users/antoine/Documents/virtualization/kubeadm/ca.crt diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties new file mode 100644 index 0000000..77259e7 --- /dev/null +++ b/src/main/resources/application.properties @@ -0,0 +1,4 @@ +backoffice.configuration.api-prefix=/api + +#backoffice.configuration.kubernetes.api.url=https://$KUBERNETES_SERVICE_HOST:$KUBERNETES_SERVICE_PORT +#backoffice.configuration.kubernetes.api.ca-cert=/run/secrets/kubernetes.io/serviceaccount/ca.crt diff --git a/src/main/resources/public/index.html b/src/main/resources/public/index.html index 90eac2f..6905ae6 100644 --- a/src/main/resources/public/index.html +++ b/src/main/resources/public/index.html @@ -1,6 +1,9 @@ backoffice + + +
@@ -8,11 +11,17 @@ + + + + + + diff --git a/src/main/resources/public/src/App.js b/src/main/resources/public/src/App.js index 96f9e5a..7e2f2e2 100644 --- a/src/main/resources/public/src/App.js +++ b/src/main/resources/public/src/App.js @@ -2,79 +2,54 @@ // import {useState, useEffect} from 'react'; -function formatDate(date) { - return date.toLocaleString(); -} - -function currentDate() { - return new Date(); -} - -function RootHeader() { - return ( -
-
- ); -} - -function RootFooter() { - return ( - - ); -} - -function Result({criteria}) { - const [res, setRes] = React.useState([]); - React.useEffect(() => { - console.log("hey") - setRes([...res, "toto"]); - }, [criteria]); - return ( -
- { - res.map((r) => -
{r}
- ) - } -
- ) -} - -function SearchInput() { - const [criteria, setCriteria] = React.useState("") - // searchByCriteria(criteria); - return ( - setCriteria(e.target.value)} - /> - ) -} - -function RootBody(props) { - return ( -
-
coucou 2
- - -
{formatDate(props.date)}
-
- ); -} +const ColorModeContext = React.createContext({ toggleColorMode: () => {} }); function App() { - return ( -
- - - -
- ); + const prefersDarkMode = MaterialUI.useMediaQuery('(prefers-color-scheme: dark)'); + const preferredBrowserColorMode = prefersDarkMode ? 'dark' : 'light'; + const persistedColorMode = localStorage.getItem("colorMode") + + const [mode, setMode] = React.useState(persistedColorMode || preferredBrowserColorMode); + const colorMode = React.useMemo(() => { + return { + toggleColorMode: () => { + return setMode((prevMode) => { + let newColorMode = prevMode === 'light' ? 'dark' : 'light'; + localStorage.setItem("colorMode", newColorMode); + return newColorMode; + }); + }, + }; + }, [], + ); + + const theme = React.useMemo(() => { + return MaterialUI.createTheme({ + palette: { + mode: mode, + }, + }); + }, [mode]); + + return ( +
+ + + + + + + + + + +
+ ); } let target = ReactDOM.createRoot(document.getElementById('react_container')); target.render( - - - + + + ) diff --git a/src/main/resources/public/src/ListData.js b/src/main/resources/public/src/ListData.js new file mode 100644 index 0000000..3f4ca4f --- /dev/null +++ b/src/main/resources/public/src/ListData.js @@ -0,0 +1,13 @@ +'use strict'; + +function ListData({datas}) { + return ( +
+ { + datas.map((data, index) => +
{data.name}
+ ) + } +
+ ) +} diff --git a/src/main/resources/public/src/NodesComponent.js b/src/main/resources/public/src/NodesComponent.js new file mode 100644 index 0000000..38450cb --- /dev/null +++ b/src/main/resources/public/src/NodesComponent.js @@ -0,0 +1,18 @@ +'use strict'; + +function Nodes({criteria}) { + const [nodes, setNodes] = React.useState([]); + + React.useEffect(() => { + fetch("/api/v1/nodes") + .then(response => response.json()) + .then(value => setNodes(value)); + }, []); + + return ( +
+
nodes
+ +
+ ); +} diff --git a/src/main/resources/public/src/RootBody.js b/src/main/resources/public/src/RootBody.js new file mode 100644 index 0000000..252a1b0 --- /dev/null +++ b/src/main/resources/public/src/RootBody.js @@ -0,0 +1,20 @@ +'use strict'; + +function FilterInput({onChange}) { + return ( + + ) +} + +function RootBody() { + const [criteria, setCriteria] = React.useState("") + + return ( +
+ + setCriteria(e.target.value)}/> +
+ ); +} diff --git a/src/main/resources/public/src/RootFooter.js b/src/main/resources/public/src/RootFooter.js new file mode 100644 index 0000000..6583fd4 --- /dev/null +++ b/src/main/resources/public/src/RootFooter.js @@ -0,0 +1,7 @@ +'use strict'; + +function RootFooter() { + return ( + + ); +} diff --git a/src/main/resources/public/src/RootHeader.js b/src/main/resources/public/src/RootHeader.js new file mode 100644 index 0000000..8befabe --- /dev/null +++ b/src/main/resources/public/src/RootHeader.js @@ -0,0 +1,44 @@ +'use strict'; + +function currentDate() { + return new Date(); +} + +function formatDate(date) { + return date.toLocaleString(); +} + + +function ColoredApp() { + const theme = MaterialUI.useTheme(); + const colorMode = React.useContext(ColorModeContext); + return ( + + {theme.palette.mode} mode + + {theme.palette.mode === 'dark' ? brightness_7 : brightness_4} + + + ); +} + +function RootHeader() { + return ( +
+ + + {formatDate(currentDate())} +
+ ); +}