java/spring-react-kubernetes-api
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature: frontend split component and list all node

Browse Source
This commit is contained in:
RouxAntoine 2023-07-24 08:23:26 +02:00
parent 2983242dde
commit 59c65f4e8b
Signed by: antoine
GPG Key ID: 098FB66FC0475E70
9 changed files with 163 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/resources/application-dev.properties Normal file
View File

@ -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

4
src/main/resources/application.properties Normal file
View File

@ -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

9
src/main/resources/public/index.html
View File

@ -1,6 +1,9 @@
<html>
<head>
<title>backoffice</title>
<meta name="viewport" content="initial-scale=1, width=device-width" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
</head>
<body>
<div id="react_container"></div>
@ -8,11 +11,17 @@
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@mui/material@5.14.1/umd/material-ui.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Load our React component. -->
<script src="http://localhost:35729/livereload.js"></script>
<script type="text/babel" src="src/RootHeader.js" data-presets="es2015,react"></script>
<script type="text/babel" src="src/ListData.js" data-presets="es2015,react"></script>
<script type="text/babel" src="src/NodesComponent.js" data-presets="es2015,react"></script>
<script type="text/babel" src="src/RootBody.js" data-presets="es2015,react"></script>
<script type="text/babel" src="src/RootFooter.js" data-presets="es2015,react"></script>
<script type="text/babel" src="src/App.js" data-presets="es2015,react"></script>
</body>
</html>

113
src/main/resources/public/src/App.js
View File

@ -2,79 +2,54 @@
// import {useState, useEffect} from 'react';
function formatDate(date) {
return date.toLocaleString();
}
function currentDate() {
return new Date();
}
function RootHeader() {
return (
<header>
</header>
);
}
function RootFooter() {
return (
<footer></footer>
);
}
function Result({criteria}) {
const [res, setRes] = React.useState([]);
React.useEffect(() => {
console.log("hey")
setRes([...res, "toto"]);
}, [criteria]);
return (
<div>
{
res.map((r) =>
<div key={r}>{r}</div>
)
}
</div>
)
}
function SearchInput() {
const [criteria, setCriteria] = React.useState("")
// searchByCriteria(criteria);
return (
<input
value={criteria}
onChange={e => setCriteria(e.target.value)}
/>
)
}
function RootBody(props) {
return (
<div>
<div>coucou 2</div>
<SearchInput/>
<Result/>
<div>{formatDate(props.date)}</div>
</div>
);
}
const ColorModeContext = React.createContext({ toggleColorMode: () => {} });
function App() {
return (
<div>
<RootHeader/>
<RootBody date={currentDate()}/>
<RootFooter/>
</div>
);
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 (
<div>
<ColorModeContext.Provider value={colorMode}>
<MaterialUI.ThemeProvider theme={theme}>
<MaterialUI.CssBaseline enableColorScheme/>
<RootHeader/>
<RootBody/>
<RootFooter/>
</MaterialUI.ThemeProvider>
</ColorModeContext.Provider>
</div>
);
}
let target = ReactDOM.createRoot(document.getElementById('react_container'));
target.render(
<React.StrictMode>
<App/>
</React.StrictMode>
<React.StrictMode>
<App/>
</React.StrictMode>
)

13
src/main/resources/public/src/ListData.js Normal file
View File

@ -0,0 +1,13 @@
'use strict';
function ListData({datas}) {
return (
<div>
{
datas.map((data, index) =>
<div key={index}>{data.name}</div>
)
}
</div>
)
}

18
src/main/resources/public/src/NodesComponent.js Normal file
View File

@ -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 (
<div>
<div>nodes</div>
<ListData datas={nodes}/>
</div>
);
}

20
src/main/resources/public/src/RootBody.js Normal file
View File

@ -0,0 +1,20 @@
'use strict';
function FilterInput({onChange}) {
return (
<input
onChange={onChange}
/>
)
}
function RootBody() {
const [criteria, setCriteria] = React.useState("")
return (
<div>
<Nodes criteria={criteria}/>
<FilterInput onChange={e => setCriteria(e.target.value)}/>
</div>
);
}

7
src/main/resources/public/src/RootFooter.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
function RootFooter() {
return (
<footer></footer>
);
}

44
src/main/resources/public/src/RootHeader.js Normal file
View File

@ -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 (
<MaterialUI.Box
sx={{
display: 'flex',
width: '100%',
alignItems: 'center',
justifyContent: 'center',
bgcolor: 'background.default',
color: 'text.primary',
borderRadius: 1,
p: 3,
}}
>
{theme.palette.mode} mode
<MaterialUI.IconButton sx={{ml: 1}} onClick={colorMode.toggleColorMode} color="inherit">
{theme.palette.mode === 'dark' ? <span className="material-icons">brightness_7</span> : <span className="material-icons">brightness_4</span>}
</MaterialUI.IconButton>
</MaterialUI.Box>
);
}
function RootHeader() {
return (
<header>
<ColoredApp/>
{formatDate(currentDate())}
</header>
);
}