generated from cds-snc/project-template
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Main page layout of the SRE bot (#266)
* Committing google app frontend * Adding backend and frontend url as env. variables * Additional changes to the frontedn * Adding static files * Reverting using env for frontend/backend * Adding a catch all route * Adding final Google login elements * Adding env variables to the ci_code action tests * Update App.js Removing comments. * Removing the SRE bot logo image from App.js * Committing initial dashboard * Added dashboard components * Adding changes to the dashboard * Adding logout button to the sidebar * Adding files to make dashboard * Changing the names of the topbar and sidebar components * Linting code
- Loading branch information
1 parent
4ea1a3e
commit 4008f0e
Showing
27 changed files
with
4,556 additions
and
180 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
Large diffs are not rendered by default.
Oops, something went wrong.
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
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
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,29 +1,160 @@ | ||
| import './App.css'; | ||
| import sre_bot_logo from './sre_bot_logo.png'; | ||
|
|
||
|
|
||
| import {BrowserRouter, Routes, Route} from 'react-router-dom'; | ||
| import { CssBaseline, ThemeProvider } from "@mui/material"; | ||
| import { BrowserRouter, Routes, Route } from "react-router-dom"; | ||
| import { ColorModeContext, useMode } from "./theme"; | ||
| import { React, useState, useEffect } from "react"; | ||
| import LandingPage from './pages/LandingPage.js'; | ||
| import HomePage from './pages/HomePage.js'; | ||
| import Topmenu from "./scenes/global/Topmenu"; | ||
| import Dashboard from "./scenes/dashboard"; | ||
| import Sidemenu from "./scenes/global/Sidemenu"; | ||
| import Webhooks from './scenes/webhooks'; | ||
| import Incident from './scenes/incident'; | ||
| import IncidentHistory from './scenes/incident_history'; | ||
| import Geolocate from './scenes/geolocate'; | ||
| import Faq from './scenes/faq'; | ||
|
|
||
| /** | ||
| * The main component of the application. | ||
| */ | ||
| function App() { | ||
| return ( | ||
| <div className="hero min-h-screen bg-base-200"> | ||
|
|
||
| <div className="hero-content flex-col lg:flex-row"> | ||
|
|
||
| // Get the current theme and color mode | ||
| const [theme, colorMode] = useMode(); | ||
|
|
||
| // Set the initial state of the Sidemenu | ||
| const [isSidemenu, setIsSidemenu] = useState(true); | ||
|
|
||
| /** | ||
| * Custom hook to get user data from the server. | ||
| * @returns {boolean} Whether the user is authenticated or not. | ||
| */ | ||
| const useUserData = () => { | ||
| const [userData, setUserData] = useState(null); | ||
|
|
||
| useEffect(() => { | ||
| // Make a GET request to the "/user" endpoint | ||
| fetch('/user') | ||
| .then(response => { | ||
| // Check if the response status code is OK (200) | ||
| if (!response.ok) { | ||
| throw new Error('Network response was not ok'); | ||
| } | ||
| // Parse the JSON response | ||
| return response.json(); | ||
| }) | ||
| .then(data => { | ||
| // Handle the JSON data from the response | ||
| setUserData(data); | ||
| }) | ||
| .catch(error => { | ||
| console.error('There was a problem with the fetch operation:', error); | ||
| }); | ||
| }, []); | ||
|
|
||
| // if the user is not logged in, then return false. Otherwise, return true | ||
| if (userData && userData.error === "Not logged in") { | ||
| return false; | ||
| } | ||
| return true; | ||
| }; | ||
|
|
||
| // Check if the user is authenticated | ||
| const isAuthenticated = useUserData(); | ||
|
|
||
| <img src = {sre_bot_logo} alt="sre_bot"></img> | ||
| <div> | ||
| // Render the application. If the user is authenticated, show the Sidemenu, Topmenu and menu items. | ||
| // Otherwise (ie user is not logged in), show the landing page where an user can log in. | ||
| return ( | ||
| <BrowserRouter> | ||
| <Routes> | ||
| <Route path="/" element={<LandingPage/>} /> | ||
| <Route path="/home" element={<HomePage/>} /> | ||
| </Routes> | ||
| </BrowserRouter> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default App; | ||
| <Routes> | ||
| {isAuthenticated ? ( | ||
| <> | ||
| <Route path="/" element={ | ||
| <ColorModeContext.Provider value={colorMode}> | ||
| <ThemeProvider theme={theme}> | ||
| <CssBaseline /> | ||
| <div className="app"> | ||
| <Sidemenu isSidemenu={isSidemenu} /> | ||
| <main className="content"> | ||
| <Topmenu setIsSidemenu={setIsSidemenu} /> | ||
| <Dashboard/> | ||
| </main> | ||
| </div> | ||
| </ThemeProvider> | ||
| </ColorModeContext.Provider> | ||
| } /> | ||
| <Route path="/webhooks" element={ | ||
| <ColorModeContext.Provider value={colorMode}> | ||
| <ThemeProvider theme={theme}> | ||
| <CssBaseline /> | ||
| <div className="app"> | ||
| <Sidemenu isSidemenu={isSidemenu} /> | ||
| <main className="content"> | ||
| <Topmenu setIsSidemenu={setIsSidemenu} /> | ||
| <Webhooks/> | ||
| </main> | ||
| </div> | ||
| </ThemeProvider> | ||
| </ColorModeContext.Provider>} /> | ||
| <Route path="/incident" element={ | ||
| <ColorModeContext.Provider value={colorMode}> | ||
| <ThemeProvider theme={theme}> | ||
| <CssBaseline /> | ||
| <div className="app"> | ||
| <Sidemenu isSidemenu={isSidemenu} /> | ||
| <main className="content"> | ||
| <Topmenu setIsSidemenu={setIsSidemenu} /> | ||
| <Incident/> | ||
| </main> | ||
| </div> | ||
| </ThemeProvider> | ||
| </ColorModeContext.Provider>} /> | ||
| <Route path="/incident_history" element={ | ||
| <ColorModeContext.Provider value={colorMode}> | ||
| <ThemeProvider theme={theme}> | ||
| <CssBaseline /> | ||
| <div className="app"> | ||
| <Sidemenu isSidemenu={isSidemenu} /> | ||
| <main className="content"> | ||
| <Topmenu setIsSidemenu={setIsSidemenu} /> | ||
| <IncidentHistory/> | ||
| </main> | ||
| </div> | ||
| </ThemeProvider> | ||
| </ColorModeContext.Provider>} /> | ||
| <Route path="/geolocate" element={ | ||
| <ColorModeContext.Provider value={colorMode}> | ||
| <ThemeProvider theme={theme}> | ||
| <CssBaseline /> | ||
| <div className="app"> | ||
| <Sidemenu isSidemenu={isSidemenu} /> | ||
| <main className="content"> | ||
| <Topmenu setIsSidemenu={setIsSidemenu} /> | ||
| <Geolocate/> | ||
| </main> | ||
| </div> | ||
| </ThemeProvider> | ||
| </ColorModeContext.Provider>} /> | ||
| <Route path="/faq" element={ | ||
| <ColorModeContext.Provider value={colorMode}> | ||
| <ThemeProvider theme={theme}> | ||
| <CssBaseline /> | ||
| <div className="app"> | ||
| <Sidemenu isSidemenu={isSidemenu} /> | ||
| <main className="content"> | ||
| <Topmenu setIsSidemenu={setIsSidemenu} /> | ||
| <Faq/> | ||
| </main> | ||
| </div> | ||
| </ThemeProvider> | ||
| </ColorModeContext.Provider>} /> | ||
| <Route path="/logout" element = {<LandingPage/>} /> | ||
| </> | ||
| ) : ( | ||
| <Route path="/" element={<LandingPage />} /> | ||
| )} | ||
| </Routes> | ||
| </BrowserRouter> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
| export default App; |
This file was deleted.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { Typography, Box, useTheme } from "@mui/material"; | ||
| import { tokens } from "../theme"; | ||
|
|
||
| const Header = ({ title, subtitle }) => { | ||
| const theme = useTheme(); | ||
| const colors = tokens(theme.palette.mode); | ||
| return ( | ||
| <Box mb="30px"> | ||
| <Typography | ||
| variant="h2" | ||
| color={colors.grey[100]} | ||
| fontWeight="bold" | ||
| sx={{ m: "0 0 5px 0" }} | ||
| > | ||
| {title} | ||
| </Typography> | ||
| <Typography variant="h5" color={colors.greenAccent[400]}> | ||
| {subtitle} | ||
| </Typography> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default Header; |
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 |
|---|---|---|
|
|
@@ -2,16 +2,40 @@ | |
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| body { | ||
| margin: 0; | ||
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | ||
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | ||
| sans-serif; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| /* @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,[email protected],400;8..60,600;8..60,700&display=swap'); */ | ||
| @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Source+Serif+4:opsz,[email protected],400;8..60,600;8..60,700&display=swap'); | ||
|
|
||
| html, | ||
| body, | ||
| #root, | ||
| .app, | ||
| .content { | ||
| height: 100%; | ||
| width: 100%; | ||
| /* font-family: 'Source Serif 4', sans-serif; */ | ||
| font-family: 'Lato', sans-serif; | ||
| } | ||
|
|
||
| .app { | ||
| display: flex; | ||
| position: relative; | ||
| } | ||
|
|
||
| ::-webkit-scrollbar { | ||
| width: 10px; | ||
| } | ||
|
|
||
| /* Track */ | ||
| ::-webkit-scrollbar-track { | ||
| background: #e0e0e0; | ||
| } | ||
|
|
||
| code { | ||
| font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', | ||
| monospace; | ||
|
|
||
| /* Handle */ | ||
| ::-webkit-scrollbar-thumb { | ||
| background: #888; | ||
| } | ||
| /* Handle on hover */ | ||
| ::-webkit-scrollbar-thumb:hover { | ||
| background: #555; | ||
| } | ||
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,17 +1,16 @@ | ||
| /** | ||
| * Entry point of the React application. | ||
| * Renders the <App /> component inside the root element of the HTML document. | ||
| */ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom/client'; | ||
| import './index.css'; | ||
| import App from './App'; | ||
| import reportWebVitals from './reportWebVitals'; | ||
|
|
||
|
|
||
| const root = ReactDOM.createRoot(document.getElementById('root')); | ||
| root.render( | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode> | ||
| ); | ||
|
|
||
| // If you want to start measuring performance in your app, pass a function | ||
| // to log results (for example: reportWebVitals(console.log)) | ||
| // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals | ||
| reportWebVitals(); | ||
| ); |
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
Oops, something went wrong.