Dashboard UI design update

- Added a sidebar and moved the navigation dropdown menu to the sidebar
- Added titles to each page
- Updated table design
- Changed button colors

ISSUE-ID: AIMLFW-162

Change-Id: Ic1b3244fa6ce0f2009cc9bafd200f96c416cfe0a
Signed-off-by: Sungjin Lee <sodyn99@gmail.com>

diff --git a/src/App.css b/src/App.css
index 15dd0a6..5efc4c2 100644 (file)
--- a/src/App.css
+++ b/src/App.css
@@ -20,23 +20,56 @@
   text-align: initial;
 }
 
+.content {
+  background-color: #edf2f5;
+  flex-grow: 1;
+  height: calc(100vh - 100px);
+  padding-left: calc(var(--bs-gutter-x)* 1.5) !important;
+  padding-right: calc(var(--bs-gutter-x)* 1.5) !important;
+}
+
+.table-responsive {
+  background-color: white;
+  padding: 30px;
+  margin-top: 20px;
+  border-radius: 20px;
+  max-height: calc(100vh - 310px);
+}
+
+.table {
+  margin: 0 !important;
+}
+
+.table > thead > tr th:first-child {
+  border-top-left-radius: 30px;
+  border-bottom-left-radius: 30px;
+}
+
+.table > thead > tr th:last-child {
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
+}
+
 .table > thead > tr > th {
-  background-color: rgb(41, 107, 250);
+  background-color: #f3f7fd;
   text-align: center;
-  outline-style: initial;
-  border-bottom-width: thick;
-  color: white;
-  /*font-family: "Times New Roman", Times, serif;*/
+  border: none;
+  color: #333;
+  font-weight: bold;
+  padding: 12px;
 }
 
 .table td {
   text-align: center;
-  vertical-align: baseline;
+  vertical-align: middle;
+  padding: 1em 1em !important;
+  color: #333;
+  font-size: 14px;
 }
 
 .status-buttons {
   color: rgb(94, 83, 83);
-  background-color: #4caf50;
+  background-color: #6282F6;
 }
 
 .create-tab {
@@ -106,8 +139,16 @@ body[data-bs-theme='dark'] .App {
   color: var(--bs-body-color);
 }
 
+body[data-bs-theme='dark'] .content {
+  background-color: #1a1a1a;
+}
+
+body[data-bs-theme='dark'] .table-responsive {
+  background-color: var(--bs-body-bg);
+}
+
 body[data-bs-theme='dark'] .table > thead > tr > th {
-  background-color: var(--bs-table-bg);
+  background-color: #1a1a1a;
   color: var(--bs-table-color);
 }
 

diff --git a/src/components/button/theme-toggle-button.js b/src/components/button/theme-toggle-button.js
index d1c65c4..195d16f 100644 (file)
--- a/src/components/button/theme-toggle-button.js
+++ b/src/components/button/theme-toggle-button.js
@@ -2,7 +2,7 @@ import { Button } from 'react-bootstrap';
 
 export const ThemeToggleButton = ({ theme, toggleTheme }) => {
   return (
-    <Button onClick={toggleTheme} variant={theme === 'dark' ? 'dark' : 'primary'}>
+    <Button onClick={toggleTheme} style={{ backgroundColor: theme === 'dark' ? '#fff' : '#6282f6', color: theme === 'dark' ? '#000' : '#fff', border: 'none' }}>
       {theme === 'dark' ? <i className='bi bi-sun-fill' /> : <i className='bi bi-moon-stars-fill' />}
     </Button>
   );

diff --git a/src/components/home/HomePage.js b/src/components/home/HomePage.js
index 9921e3b..8b2db80 100644 (file)
--- a/src/components/home/HomePage.js
+++ b/src/components/home/HomePage.js
@@ -17,6 +17,7 @@
 // ==================================================================================
 
 import React from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
 import CreateTrainingJob from './create/CreateTrainingJob';
 import StatusPageRows from './status/StatusPageRows';
 import UploadPipelineForm from './pipelines/UploadPipeline';
@@ -24,6 +25,7 @@ import CreateFeatureGroup from './create/CreateFeatureGroup';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import ListFeatureGroup from './status/ListFeatureGroup';
 import { NavigationBar } from '../navigation';
+import { Sidebar } from '../sidebar';
 import { debug_var } from '../../states';
 
 var DEBUG = debug_var === 'true';
@@ -39,6 +41,12 @@ class HomePage extends React.Component {
       <>
         <Router>
           <NavigationBar />
+          <Container fluid>
+            <Row>
+              <Col md={2}>
+                <Sidebar />
+              </Col>
+              <Col md={10} className='content'>
           <Routes>
             <Route path='/' exact component={Home} />
             <Route path='/TrainingJob/CreateTrainingJob' element={<CreateTrainingJob logger={logger} />} />
@@ -47,6 +55,9 @@ class HomePage extends React.Component {
             <Route path='/TrainingJob/CreateFeatureGroup' element={<CreateFeatureGroup logger={logger} />} />
             <Route path='/TrainingJob/ListFeatureGroups' element={<ListFeatureGroup logger={logger} />} />
           </Routes>
+              </Col>
+            </Row>
+          </Container>
         </Router>
       </>
     );

diff --git a/src/components/home/pipelines/UploadPipeline.js b/src/components/home/pipelines/UploadPipeline.js
index db20d2d..c82aee9 100644 (file)
--- a/src/components/home/pipelines/UploadPipeline.js
+++ b/src/components/home/pipelines/UploadPipeline.js
@@ -133,6 +133,8 @@ class UploadPipelineForm extends React.Component {
   render() {
     return (
       <>
+        <h1 style={{ fontWeight: 'bold', margin: '40px 0px' }}>Training Function</h1>
+
         <div className='upload-pipeline'>
           <OverlayTrigger trigger='click' placement='right' overlay={this.popover()}>
             <Button className='from-tooltip' placement='right' variant='secondary'>
@@ -140,7 +142,7 @@ class UploadPipelineForm extends React.Component {
             </Button>
           </OverlayTrigger>
           <div className='upload-pl-form'>
-            <Button variant='success' size='sm' onClick={e => this.handleCreatePipeline(e)}>
+            <Button variant='primary' size='sm' onClick={e => this.handleCreatePipeline(e)}>
               Create Training Function
             </Button>
             <Form onSubmit={this.handleSubmit}>
@@ -157,7 +159,7 @@ class UploadPipelineForm extends React.Component {
 
               <input type='file' className='form-control' name='upload_file' onChange={this.handleInputChange} />
 
-              <Button type='submit'> Upload </Button>
+              <Button style={{ backgroundColor: '#6282f6' }} type='submit'> Upload </Button>
             </Form>
           </div>
         </div>

diff --git a/src/components/home/status/ListFeatureGroup.js b/src/components/home/status/ListFeatureGroup.js
index f9eec18..f02123f 100644 (file)
--- a/src/components/home/status/ListFeatureGroup.js
+++ b/src/components/home/status/ListFeatureGroup.js
@@ -164,13 +164,15 @@ const ListFeatureGroup = props => {
   );
   return (
     <>
-      <Button variant='success' size='sm' onClick={handleCreateClick}>
+      <h1 style={{ fontWeight: 'bold', margin: '40px 0px' }}>Feature Groups</h1>
+
+      <Button variant='primary' size='sm' onClick={handleCreateClick}>
         Create
       </Button>{' '}
-      <Button variant='success' size='sm' onClick={e => handleDelete(e)}>
+      <Button variant='primary' size='sm' onClick={e => handleDelete(e)}>
         Delete
       </Button>{' '}
-      <BTable className='Status_table' responsive striped bordered hover size='sm' {...getTableProps()}>
+      <BTable className='Status_table' responsive hover size='sm' {...getTableProps()}>
         <thead>
           {headerGroups.map(headerGroup => (
             <tr {...headerGroup.getHeaderGroupProps()}>

diff --git a/src/components/home/status/StatusPageRows.js b/src/components/home/status/StatusPageRows.js
index 6c13d72..a1df12b 100644 (file)
--- a/src/components/home/status/StatusPageRows.js
+++ b/src/components/home/status/StatusPageRows.js
@@ -184,7 +184,8 @@ const StatusPageRows = props => {
         Cell: ({ row }) => {
           return (
             <Button
-              variant='info'
+              variant='primary'
+              style={{ backgroundColor: '#6282f6', border: '#6282f6' }}
               onClick={() => handleStepStateClick(row.original.trainingjob_name, row.original.version)}
             >
               Detailed Status
@@ -219,19 +220,21 @@ const StatusPageRows = props => {
 
   return (
     <>
-      <Button variant='success' size='sm' onClick={e => handleCreate(e)}>
+      <h1 style={{ fontWeight: 'bold', margin: '40px 0px' }}>Training Jobs</h1>
+
+      <Button variant='primary' size='sm' onClick={e => handleCreate(e)}>
         Create
       </Button>{' '}
-      <Button variant='success' size='sm' onClick={e => handleEdit(e)}>
+      <Button variant='primary' size='sm' onClick={e => handleEdit(e)}>
         Edit
       </Button>{' '}
-      <Button variant='success' size='sm' onClick={e => handleRetrain(e)}>
+      <Button variant='primary' size='sm' onClick={e => handleRetrain(e)}>
         Train
       </Button>{' '}
-      <Button variant='success' size='sm' onClick={e => handleDelete(e)}>
+      <Button variant='primary' size='sm' onClick={e => handleDelete(e)}>
         Delete
       </Button>{' '}
-      <BTable className='Status_table' responsive striped bordered hover size='sm' {...getTableProps()}>
+      <BTable className='Status_table' responsive hover size='sm' {...getTableProps()}>
         <thead>
           {headerGroups.map(headerGroup => (
             <tr {...headerGroup.getHeaderGroupProps()}>

diff --git a/src/components/index.js b/src/components/index.js
index df7d721..d2d7b19 100644 (file)
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,5 +1,6 @@
 export * from './button';
 export * from './navigation';
+export * from './sidebar';
 export * from './checkbox';
 export * from './popup';
 export * from './steps-state';

diff --git a/src/components/navigation/navigation-bar.css b/src/components/navigation/navigation-bar.css
index 4a85961..7536f87 100644 (file)
--- a/src/components/navigation/navigation-bar.css
+++ b/src/components/navigation/navigation-bar.css
@@ -16,7 +16,16 @@
 
  ================================================================================== */
 .nav-bar {
-  margin-bottom: 5px;
+  padding: 30px 0px !important;
+}
+
+.nav-bar .container {
+  max-width: calc(100vw - 120px);
+  font-weight: bold;
+}
+
+.nav-bar .container a{
+  color: black;
 }
 
 .nav-drop-down {
@@ -27,13 +36,7 @@
   width: 130px;
 }
 
-body[data-bs-theme='light'] .custom-navbar {
-  background-color: rgb(41, 107, 250);
-  color: white;
-}
-
-body[data-bs-theme='dark'] .custom-navbar {
-  background-color: #1a1a1a;
+body[data-bs-theme='dark'] .nav-bar .container a {
   color: white;
 }
 

diff --git a/src/components/navigation/navigation-bar.js b/src/components/navigation/navigation-bar.js
index 27058c4..2042766 100644 (file)
--- a/src/components/navigation/navigation-bar.js
+++ b/src/components/navigation/navigation-bar.js
@@ -13,11 +13,6 @@ export const NavigationBar = () => {
       <Container>
         <Navbar.Brand href='/'>AI/ML Management Dashboard</Navbar.Brand>
         <Nav>
-          <NavDropdown title='Training Jobs' className='nav-drop-down'>
-            <NavDropdown.Item href='/TrainingJob/TrainingJobsStatus'>Training Job</NavDropdown.Item>
-            <NavDropdown.Item href='/TrainingJob/Pipeline'>Training Function</NavDropdown.Item>
-            <NavDropdown.Item href='/TrainingJob/ListFeatureGroups'>Feature Group</NavDropdown.Item>
-          </NavDropdown>
           <ThemeToggleButton theme={theme} toggleTheme={toggleTheme} />
         </Nav>
       </Container>

diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js
new file mode 100644 (file)
index 0000000..b2ba9a4
--- /dev/null
+++ b/src/components/sidebar/index.js
@@ -0,0 +1 @@
+export * from './sidebar';

diff --git a/src/components/sidebar/sidebar.css b/src/components/sidebar/sidebar.css
new file mode 100644 (file)
index 0000000..02f10cf
--- /dev/null
+++ b/src/components/sidebar/sidebar.css
@@ -0,0 +1,32 @@
+.sidebar-link {
+  display: block;
+  padding: 20px;
+  margin-bottom: 20px;
+  color: black;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.sidebar-link:hover {
+  background-color: #ddd;
+  border-radius: 5px;
+}
+
+.active {
+  background-color: #6282f6 !important;
+  color: white;
+  border-radius: 5px;
+}
+
+body[data-bs-theme='dark'] .sidebar-link {
+  color: white;
+}
+
+body[data-bs-theme='dark'] .sidebar-link:hover {
+  background-color: #1a1a1a;
+  color: white;
+}
+
+body[data-bs-theme='dark'] .active {
+  background-color: #42434e !important;
+}

diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
new file mode 100644 (file)
index 0000000..5c0c091
--- /dev/null
+++ b/src/components/sidebar/sidebar.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Row, Col } from 'react-bootstrap';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+import './sidebar.css';
+
+export const Sidebar = () => {
+  const isActive = (path) => location.pathname === path ? 'active' : '';
+
+  return (
+    <Row className="sidebar-row">
+      <Col xs={12} style={{ padding: '0px 30px' }}>
+        <a href="/TrainingJob/TrainingJobsStatus" className={`sidebar-link ${isActive('/TrainingJob/TrainingJobsStatus')}`}>
+          <i className="bi bi-gear-fill"></i> Training Jobs
+        </a>
+        <a href="/TrainingJob/Pipeline" className={`sidebar-link ${isActive('/TrainingJob/Pipeline')}`}>
+          <i className="bi bi-bar-chart-fill"></i> Training Function
+        </a>
+        <a href="/TrainingJob/ListFeatureGroups" className={`sidebar-link ${isActive('/TrainingJob/ListFeatureGroups')}`}>
+          <i className="bi bi-folder-fill"></i> Feature Group
+        </a>
+      </Col>
+    </Row>
+  );
+};
\ No newline at end of file