Skip to content

Commit

Permalink
Tornjak UI Refactoring
Browse files Browse the repository at this point in the history 
I have refactored the main user interface for Tornjak. Please test for functionality.

Signed-off-by: Kai <cjiakai0824@gmail.com>
  • Loading branch information
@EdgarAllan-Bro
EdgarAllan-Bro committed Nov 3, 2024
1 parent 1bbbc34 commit 2f9e878
Show file tree
Hide file tree
Showing 8 changed files with 515 additions and 191 deletions.
57 changes: 31 additions & 26 deletions frontend/src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
.nav-comp {
min-width: 700px;
.app-container {
display: flex;
}

.main-content {
flex: 1;
flex-direction: column;
}
.rest-body {
margin-left: 20px;

.bottom{
padding: 20px;
}

.App {
text-align: center;
}
Expand Down Expand Up @@ -53,29 +60,27 @@
z-index: 2;
}

.carbon-toast .Toastify__toast {
padding: 0 !important;
/* background: $inverse-02 !important; */
}

.carbon-toast .Toastify__toast > svg {
margin-top: 1.375rem;
margin-right: 1rem;
/* fill: $inverse-01; */
}

.carbon-toast .Toastify__toast {
padding: 0 !important;
/* background: $inverse-02 !important; */
}

.carbon-toast .Toastify__toast > svg {
margin-top: 1.375rem;
margin-right: 1rem;
/* fill: $inverse-01; */
}

.carbon-toast .Toastify__toast-body {
margin: 0 !important;
padding: 0 !important;
}
.carbon-toast .Toastify__toast-body {
margin: 0 !important;
padding: 0 !important;
}

.carbon-toast .Toastify__toast-container {
width: auto !important;
height: auto !important;
}
.carbon-toast .Toastify__toast-container {
width: auto !important;
height: auto !important;
}

.carbon-toast .bx--toast-notification{
margin: 0;
}
.carbon-toast .bx--toast-notification{
margin: 0;
}
58 changes: 31 additions & 27 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import './App.css';
import 'react-toastify/dist/ReactToastify.css';
import SpireHealthCheck from 'components/spire-health-check';
import {env} from './env';
import Topbar from './components/topbar';

// to enable SPIRE health check component
const spireHealthCheck = (env.REACT_APP_SPIRE_HEALTH_CHECK_ENABLE === 'true') ?? false; // defualt value false
Expand All @@ -30,40 +31,43 @@ function App() {
<div>
<Provider store={store}>
<Router>
<div>
<div className="nav-comp">
<div className="app-container">
<div className="sidebar">
<NavigationBar />
</div>
{spireHealthCheck &&
<div>
<SpireHealthCheck />
</div>
}
<div className="rest-body">
<SelectServer />
<br />
{IsManager && <br />}
<Route path="/" exact component={AgentList} />
<Route path="/clusters" exact component={ClusterList} />
<Route path="/federations" exact component={FederationList} />
<Route path="/agents" exact component={AgentList} />
<Route path="/entries" exact component={EntryList} />
<RenderOnAdminRole>
<Route path="/entry/create" exact component={EntryCreate} />
<Route path="/agent/createjointoken" exact component={CreateJoinToken} />
<Route path="/cluster/clustermanagement" exact component={ClusterManagement} />
</RenderOnAdminRole>
<Route path="/tornjak/serverinfo" exact component={TornjakServerInfo} />
<Route path="/tornjak/dashboard" exact component={TornjakDashBoardStyled} />
<Route
path="/tornjak/dashboard/details/:entity"
render={(props) => (<DashboardDetailsRender {...props} params={props.match.params} />)}
/>
<Route path="/server/manage" exact component={ServerManagement} />
<br /><br /><br />
<svg className="endbanneroutput">
<rect className="endbanneroutput"></rect>
</svg>
<div className="main-content">
<div className="top">
<Topbar/>
</div>

<div className="bottom">
<SelectServer />
<br />
{IsManager && <br />}
<Route path="/" exact component={AgentList} />
<Route path="/clusters" exact component={ClusterList} />
<Route path="/federations" exact component={FederationList} />
<Route path="/agents" exact component={AgentList} />
<Route path="/entries" exact component={EntryList} />
<RenderOnAdminRole>
<Route path="/entry/create" exact component={EntryCreate} />
<Route path="/agent/createjointoken" exact component={CreateJoinToken} />
<Route path="/cluster/clustermanagement" exact component={ClusterManagement} />
</RenderOnAdminRole>
<Route path="/tornjak/serverinfo" exact component={TornjakServerInfo} />
<Route path="/tornjak/dashboard" exact component={TornjakDashBoardStyled} />
<Route
path="/tornjak/dashboard/details/:entity"
render={(props) => (<DashboardDetailsRender {...props} params={props.match.params} />)}
/>
<Route path="/server/manage" exact component={ServerManagement} />
<br /><br /><br />
</div>
</div>
</div>
</Router>
Expand Down
71 changes: 71 additions & 0 deletions frontend/src/components/NavDropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { ChevronDown } from '@carbon/icons-react';

interface NavDropdownProps {
icon: React.ReactNode;
title: string;
link: string;
isAdmin: boolean;
withAuth: boolean;
subLinks: Array<{
label: string;
to: string;
adminOnly?: boolean;
}>;
}

interface NavDropdownState {
isOpen: boolean;
}

class NavDropdown extends React.Component<NavDropdownProps, NavDropdownState> {
constructor(props: NavDropdownProps) {
super(props);
this.state = {
isOpen: false,
};
}

toggleDropdown = () => {
this.setState((prevState) => ({
isOpen: !prevState.isOpen,
}));
};

render() {
const { icon, title, link, isAdmin, withAuth, subLinks } = this.props;
const { isOpen } = this.state;

return (
<div>
<div className="dropdown-header">
{icon}
<Link to={link} className="dropbtn">
{title}
</Link>
<ChevronDown
className="icon_spacing_drop"
onClick={this.toggleDropdown}
/>
</div>
{isOpen && (
<div className="dropdown-content">
{subLinks.map((subLink, index) => {
if (subLink.adminOnly && !(isAdmin || !withAuth)) {
return null;
}
return (
<Link key={index} to={subLink.to} className="nav-link">
{subLink.label}
</Link>
);
})}
</div>
)}
</div>
);
}
}

export default NavDropdown;
45 changes: 1 addition & 44 deletions frontend/src/components/dashboard/dashboard-drawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { withStyles } from 'tss-react/mui';
import {
CssBaseline,
Drawer,
AppBar,
Toolbar,
List,
Typography,
Expand Down Expand Up @@ -46,24 +45,6 @@ const styles = theme => ({
padding: '0 8px',
...theme.mixins.toolbar,
},
appBar: { //appbar
backgroundColor: 'lightgrey',
marginTop: 48,
zIndex: 2,
height: 80,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: { //appbar on shift/ open
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: { //menu button next to Tornjak Dashboard title on view
marginRight: 35,
marginTop: 20
Expand All @@ -79,7 +60,7 @@ const styles = theme => ({
drawerPaper: { //dashboard side drawer on open
position: 'relative',
whiteSpace: 'nowrap',
marginLeft: -20,
marginLeft: 10,
top: 10,
zIndex: 1,
width: drawerWidth,
Expand All @@ -100,7 +81,6 @@ const styles = theme => ({
width: theme.spacing(9),
},
},
appBarSpacer: theme.mixins.toolbar,
content: {
flexGrow: 1,
},
Expand Down Expand Up @@ -152,36 +132,13 @@ class DashboardDrawer extends React.Component {
return (
<div>
<CssBaseline />
<AppBar position="absolute" className={clsx(classes.appBar, this.state.open && classes.appBarShift)}>
<Toolbar className={classes.toolbar}>
<IconButton
edge="start"
color="inherit"
aria-label="open drawer"
onClick={this.handleDrawerOpen}
className={clsx(classes.menuButton, this.state.open && classes.menuButtonHidden)}
>
<MenuIcon
className={classes.menuIcon}
color="inherit" />
</IconButton>
<Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}>
Tornjak Dashboard
</Typography>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
classes={{
paper: clsx(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
}}
open={this.state.open}
>
<div className={classes.toolbarIcon}>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider
className={classes.drawerdivider}/>
<List>
Expand Down
Loading

0 comments on commit 2f9e878

Please sign in to comment.