Torjak UI Refactoring

I have refactored the main user interface for Tornjak after addressing the issue of windows new line. Please test for functionality. Signed-off-by: Kai Chen <[email protected]>
EdgarAllan-Bro · Nov 19, 2024 · 12e953d · 12e953d
1 parent 1bbbc34
commit 12e953d
Show file tree

Hide file tree

Showing 29 changed files with 647 additions and 263 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,9 +1,20 @@
-.nav-comp {
-  min-width: 700px;
+.app-container {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main-content {
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
 }
-.rest-body {
-  margin-left: 20px;
+
+.main{
+  padding: 20px;
+  margin-top: -20px;
 }
+
 .App {
   text-align: center;
 }
@@ -53,29 +64,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;
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -19,51 +19,41 @@ import DashboardDetailsRender from 'components/dashboard/dashboard-details-rende
 import RenderOnAdminRole from 'components/RenderOnAdminRole'
 import './App.css';
 import 'react-toastify/dist/ReactToastify.css';
-import SpireHealthCheck from 'components/spire-health-check';
-import {env} from './env';
-
-// to enable SPIRE health check component
-const spireHealthCheck = (env.REACT_APP_SPIRE_HEALTH_CHECK_ENABLE === 'true') ?? false; // defualt value false
 
 function App() {
     return (
         <div>
             <Provider store={store}>
                 <Router>
-                    <div>
-                        <div className="nav-comp">
+                    <div className="app-container">
+                        <div className="sidebar">
                             <NavigationBar />
                         </div>
-                        {spireHealthCheck &&
-                            <div>
-                                <SpireHealthCheck />
+
+                        <div className="main-content">
+                            <div className="main">
+                                <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 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>
                     </div>
                 </Router>
@@ -72,4 +62,4 @@ function App() {
     )
 }
 
-export default App
+export default App
diff --git a/frontend/src/charts/PieChart.tsx b/frontend/src/charts/PieChart.tsx
@@ -41,11 +41,10 @@ class PieChart1 extends React.Component<PieChartProps, PieChartState> {
   }
 
   render() {
-    const { data } = this.props;
+    const { data, title } = this.props;
     return (
       <div>
-        <div>
-        </div>
+          <h3 style={{ fontSize: '18px' }}>{title}</h3>
           <PieChart
             data={data}
             options={this.state.options}
@@ -61,4 +60,4 @@ const mapStateToProps = (state: RootState) => ({
 export default connect(
   mapStateToProps,
   {}
-  )(PieChart1);
+  )(PieChart1);
diff --git a/frontend/src/components/NavDropdown.tsx b/frontend/src/components/NavDropdown.tsx
@@ -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;
diff --git a/frontend/src/components/agent-list.tsx b/frontend/src/components/agent-list.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { connect } from 'react-redux';
 import IsManager from './is_manager';
 import Table from "tables/agents-list-table";

diff --git a/frontend/src/components/cluster-create.tsx b/frontend/src/components/cluster-create.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { connect } from 'react-redux';
 import axios from 'axios';
 import { Dropdown, TextInput, FilterableMultiSelect, TextArea, InlineNotification } from 'carbon-components-react';

diff --git a/frontend/src/components/cluster-edit.tsx b/frontend/src/components/cluster-edit.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { connect } from 'react-redux';
 import axios from 'axios';
 import { Dropdown, TextInput, FilterableMultiSelect, TextArea, InlineNotification } from 'carbon-components-react';

diff --git a/frontend/src/components/cluster-list.tsx b/frontend/src/components/cluster-list.tsx
@@ -147,4 +147,4 @@ export default connect(
   { serverSelectedFunc, agentsListUpdateFunc, tornjakServerInfoUpdateFunc, serverInfoUpdateFunc, selectorInfoFunc, tornjakMessageFunc, workloadSelectorInfoFunc, agentworkloadSelectorInfoFunc, clustersListUpdateFunc }
 )(ClusterList)
 
-export { ClusterList }
+export { ClusterList }
diff --git a/frontend/src/components/dashboard/agents-dashboard-table.tsx b/frontend/src/components/dashboard/agents-dashboard-table.tsx
@@ -94,4 +94,4 @@ const AgentDashboardTableStyled = withStyles(
   })
 );
 
-export default connect(mapStateToProps, {})(AgentDashboardTableStyled);
+export default connect(mapStateToProps, {})(AgentDashboardTableStyled);
diff --git a/frontend/src/components/dashboard/agents-pie-chart.tsx b/frontend/src/components/dashboard/agents-pie-chart.tsx
@@ -86,4 +86,4 @@ const mapStateToProps = (state: RootState) => ({
   globalEntries: state.entries,
 })
 
-export default connect(mapStateToProps, {})(AgentsPieChart)
+export default connect(mapStateToProps, {})(AgentsPieChart)
diff --git a/frontend/src/components/dashboard/clusters-pie-chart.tsx b/frontend/src/components/dashboard/clusters-pie-chart.tsx
@@ -47,4 +47,4 @@ const mapStateToProps = (state: RootState) => ({
   globalClustersList: state.clusters.globalClustersList,
 })
 
-export default connect(mapStateToProps, {})(ClustersPieChart)
+export default connect(mapStateToProps, {})(ClustersPieChart)
diff --git a/frontend/src/components/dashboard/dashboard-details-render.js b/frontend/src/components/dashboard/dashboard-details-render.js
@@ -89,4 +89,4 @@ export default connect(
       agentworkloadSelectorInfoFunc, 
       clusterTypeInfoFunc, 
       clickedDashboardTableFunc }
-)(DashboardDetailsRender);
+)(DashboardDetailsRender);
diff --git a/frontend/src/components/dashboard/dashboard-details.js b/frontend/src/components/dashboard/dashboard-details.js
@@ -324,4 +324,3 @@ const mapStateToProps = (state) => ({
 
 const DashboardDetailsStyled = withStyles(DashboardDetails, styles);
 export default connect(mapStateToProps, {})(DashboardDetailsStyled);
-
-Original file line number
+Diff line change
@@ Expand Up / @@ -94,4 +94,4 @@ const AgentDashboardTableStyled = withStyles( @@
       })
     );
-    export default connect(mapStateToProps, {})(AgentDashboardTableStyled);
+    export default connect(mapStateToProps, {})(AgentDashboardTableStyled);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -324,4 +324,3 @@ const mapStateToProps = (state) => ({

		const DashboardDetailsStyled = withStyles(DashboardDetails, styles);
		export default connect(mapStateToProps, {})(DashboardDetailsStyled);