Minor Fixes

Allow health status check to be aligned. Fixed tornjak dashboard UI to use carbon components. Fixed windows scroll. Signed-off-by: Kai Chen <[email protected]>
spiffe · Nov 29, 2024 · bbb4962 · bbb4962
1 parent c8cfe90
commit bbb4962
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 191 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,7 +1,13 @@
 .app-container {
   display: flex;
-  height: 100vh;
-  overflow: hidden;
+  /*height: 100vh;*/
+  /*overflow: hidden;*/
+}
+
+.sidebar {
+  position: sticky;
+  top: 0;
+  align-self: flex-start; 
 }
 
 .main-content {

diff --git a/frontend/src/components/dashboard/dashboard-drawer.js b/frontend/src/components/dashboard/dashboard-drawer.js
@@ -1,148 +1,74 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import clsx from 'clsx';
 import { withStyles } from 'tss-react/mui';
-// Components
-import {
-    CssBaseline,
-    Drawer,
-    List,
-    Divider,
-    IconButton,
-    ListItem,
-    ListItemIcon,
-    ListItemText,
-    ListSubheader,
-} from '@mui/material';
-
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import PeopleIcon from '@mui/icons-material/People';
-import BarChartIcon from '@mui/icons-material/BarChart';
-import LayersIcon from '@mui/icons-material/Layers';
+import { CssBaseline } from '@mui/material';
+import { Tabs, TabList, Tab} from '@carbon/react';
 import {
     clickedDashboardTableFunc,
 } from 'redux/actions';
-const drawerWidth = 240;
-const drawerHeight = '100%';
 
 const styles = theme => ({
     root: {
-        marginTop: -35, //set to 0 
-        marginLeft: -20,
+        marginTop: 0,
         display: 'flex',
-    },
-    toolbar: {
-        paddingRight: 24, // keep right padding when drawer closed
-    },
-    toolbarIcon: { //drawer icon close
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-        padding: '0 8px',
-        ...theme.mixins.toolbar,
-    },
-    appBar: { //appbar
-        backgroundColor: 'lightgrey', //remove bg color or make transparent
-        marginTop: 48,
-        zIndex: 2,
-        height: 80, //set height to 0
-        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
-        marginLeft: -20,
-        marginTop: 20,
-    },
-    menuButtonHidden: { //menu button next to Tornjak Dashboard title on hidden
-        display: 'none',
+        flexDirection: 'column',
     },
     title: {
         flexGrow: 1,
         color: 'black',
-        marginTop: 20
-    },
-    drawerPaper: { //dashboard side drawer on open
-        position: 'relative',
-        whiteSpace: 'nowrap',
-        top: 10,
-        zIndex: 1,
-        width: drawerWidth,
-        height: drawerHeight,
-        transition: theme.transitions.create('width', {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-    },
-    drawerPaperClose: { //dashboard side drawer on close
-        overflowX: 'hidden',
-        transition: theme.transitions.create('width', {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen,
-        }),
-        width: theme.spacing(7),
-        [theme.breakpoints.up('sm')]: {
-            width: theme.spacing(9),
-        },
+        marginTop: 20,
     },
-    appBarSpacer: theme.mixins.toolbar,
     content: {
         flexGrow: 1,
     },
-    container: { //container for root
+    container: {
         paddingTop: theme.spacing(4),
         paddingBottom: theme.spacing(4),
-        marginLeft: 0
+        marginLeft: 0,
     },
-    paper: { //container for all grids
+    paper: {
         padding: theme.spacing(2),
         display: 'flex',
         overflow: 'auto',
         flexDirection: 'column',
-        marginBottom: 20
     },
     fixedHeight: {
-        height: 370, //height of piechart container
-    },
-    menuIcon: {
-        color: "black", //height of piechart container
-    },
-    drawerdivider: {
-        marginTop: 16,
+        height: 370,
     },
     h3: {
         color: 'black',
         marginTop: 20,
-        marginLeft: 10
-    }
+        marginLeft: 10,
+        marginLeft: 20,
+        marginBottom: 10,
+    },
+
+    tabList: {
+        marginLeft: '20px', 
+        marginBottom: '-80px', 
+    },
 });
 
 class DashboardDrawer extends React.Component {
-   constructor(props) {
+    constructor(props) {
         super(props);
+        let selectedTab = 0;
+        const path = window.location.pathname;
+        if (path.includes("clusters")) {
+            selectedTab = 1;
+        } else if (path.includes("agents")) {
+            selectedTab = 2;
+        } else if (path.includes("entries")) {
+            selectedTab = 3;
+        }
         this.state = {
-            open: true,
+            selectedTab: selectedTab,
         };
-        this.toggleDrawer = this.toggleDrawer.bind(this);
-    }
-
-    toggleDrawer() {
-        this.setState(prevState => ({ open: !prevState.open }));
     }
 
-    assignDashboardPath(entity) {
+    assignDashboardPath(entity, tabIndex) {
         this.props.clickedDashboardTableFunc(entity);
+        this.setState({ selectedTab: tabIndex });
         const path = "/tornjak/dashboard";
         if (window.location.href !== window.location.origin + path)
             window.location.href = path;
@@ -151,81 +77,28 @@ class DashboardDrawer extends React.Component {
     render() {
         const classes = withStyles.getClasses(this.props);
         return (
-            <div>
+            <div className={classes.root}>
                 <CssBaseline />
-                <div style={{ display: 'flex' }}>
-                    <h3 style={{ marginLeft: '20px', marginTop: '20px', whiteSpace: 'nowrap'}}>Tornjak Dashboard</h3>
+                <div style={{ display: 'flex', flexDirection: 'column'}}>
+                    <h3 className={classes.h3}>Tornjak Dashboard</h3>
                 </div>
-                <Drawer
-                    variant="permanent"
-                    classes={{
-                        paper: clsx(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
-                    }}
-                    open={this.state.open}
-                >
-                    <Divider 
-                        className={classes.drawerdivider}/>
-                    <List>
-                        <div>
-                            <ListItem
-                                button
-                                onClick={() => {
-                                    this.assignDashboardPath("dashboard");
-                                }}>
-                                <ListItemIcon>
-                                    <DashboardIcon />
-                                </ListItemIcon>
-                                <ListItemText primary="Dashboard" />
-                            </ListItem>
-                            <ListSubheader inset>Details</ListSubheader>
-                            <ListItem
-                                button
-                                onClick={() => {
-                                    this.assignDashboardPath("clusters");
-                                }}>
-                                <ListItemIcon>
-                                    <LayersIcon />
-                                </ListItemIcon>
-                                <ListItemText primary="Clusters" />
-                            </ListItem>
-                            <ListItem
-                                button
-                                onClick={() => {
-                                    this.assignDashboardPath("agents");
-                                }}>
-                                <ListItemIcon>
-                                    <PeopleIcon />
-                                </ListItemIcon>
-                                <ListItemText primary="Agents" />
-                            </ListItem>
-                            <ListItem
-                                button
-                                onClick={() => {
-                                    this.assignDashboardPath("entries");
-                                }}>
-                                <ListItemIcon>
-                                    <BarChartIcon />
-                                </ListItemIcon>
-                                <ListItemText primary="Entries" />
-                            </ListItem>
-                        </div>
-                    </List>
-                    <Divider />
-                    <div className={classes.toolbarIcon}>
-                        <IconButton onClick={this.toggleDrawer}>
-                            {this.state.open ? <ChevronLeftIcon /> : <ChevronRightIcon/>}
-                        </IconButton>
-                    </div>
-                </Drawer>
+                <Tabs selectedIndex={this.state.selectedTab}>
+                    <TabList aria-label="List of tabs" className={classes.tabList}>
+                        <Tab onClick={() => this.assignDashboardPath("dashboard", 0)}>Dashboard</Tab>
+                        <Tab onClick={() => this.assignDashboardPath("clusters", 1)}>Clusters</Tab>
+                        <Tab onClick={() => this.assignDashboardPath("agents", 2)}>Agents</Tab>
+                        <Tab onClick={() => this.assignDashboardPath("entries", 3)}>Entries</Tab>
+                    </TabList>
+
+                </Tabs>
             </div>
         );
     }
-
 }
 
 const mapStateToProps = (state) => ({
     globalClickedDashboardTable: state.tornjak.globalClickedDashboardTable,
-})
+});
 
 const DashboardDrawerStyled = withStyles(DashboardDrawer, styles);
-export default connect(mapStateToProps, { clickedDashboardTableFunc })(DashboardDrawerStyled);
+export default connect(mapStateToProps, { clickedDashboardTableFunc })(DashboardDrawerStyled);
diff --git a/frontend/src/components/dashboard/tornjak-dashboard.js b/frontend/src/components/dashboard/tornjak-dashboard.js
@@ -49,6 +49,7 @@ const styles = (theme) => ({
     marginTop: -25,
     marginLeft: -20,
     display: 'flex',
+    flexDirection: 'column',
   },
   appBarSpacer: theme.mixins.toolbar,
   content: {

diff --git a/frontend/src/components/style.css b/frontend/src/components/style.css
@@ -544,16 +544,31 @@
   margin-bottom: 10px;
 }
 
+.refresh_status {
+  display: flex;
+  gap: 10px; 
+  align-items: center;
+  margin-top: 20px;
+}
+
+.spire-health-check-refresh-dropdown,
 .health-status-check-container {
-  padding: 3.5px 10px 3.5px 10px;
-  background-color: rgb(233, 233, 233);
-  top: 0;
-  margin-top: 25px;
-  width: 140px;
-  height: 40px;
+  flex: 1;
+  height: 45px; 
   display: flex;
   justify-content: center;
   align-items: center;
+  background-color: rgb(233, 233, 233); 
+  border: 1px solid #000000;
+  padding: 5px;
+}
+
+.health-status-check-container {
+  max-width: 140px; 
+}
+
+#spire-refresh-rate-drop-down{
+  margin-bottom: 23px;
 }
 
 .health-status-check-title {
@@ -567,17 +582,6 @@
   align-items: center;
 }
 
-.refresh_status{
-  display: flex;
-  gap: 10px;
-}
-
-.spire-health-check-refresh-dropdown {
-  width: 115px;
-  flex-wrap: none;
-  display: inline-block;
-}
-
 .spire-health-refresh-tooltip {
   margin-top: 10px;
   display: flex;