From 212877e001ef545123e03f7aed8bfb38fae06eb7 Mon Sep 17 00:00:00 2001
From: dhannywi <dwindrakusuma@gmail.com>
Date: Mon, 29 Apr 2024 16:43:54 -0500
Subject: [PATCH 1/4] sidebar router for ML Hub

---
 src/tapis-app/_Router/Router.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/tapis-app/_Router/Router.tsx b/src/tapis-app/_Router/Router.tsx
index 8bfb0b502..3339bafd3 100644
--- a/src/tapis-app/_Router/Router.tsx
+++ b/src/tapis-app/_Router/Router.tsx
@@ -11,6 +11,7 @@ import Systems from '../Systems';
 import Pods from '../Pods';
 import Files from '../Files';
 import Workflows from '../Workflows';
+import MlHub from '../MlHub';
 import UIPatterns from '../UIPatterns';
 
 const Router: React.FC = () => {
@@ -47,7 +48,7 @@ const Router: React.FC = () => {
         <Workflows />
       </ProtectedRoute>
       <ProtectedRoute path="/ml-hub">
-        {/* TODO: create ML Hub */}
+        <MlHub />
       </ProtectedRoute>
       <ProtectedRoute path="/pods">
         <Pods />

From c67f0ca144d806d1d1f8e216859761f753354eea Mon Sep 17 00:00:00 2001
From: dhannywi <dwindrakusuma@gmail.com>
Date: Mon, 29 Apr 2024 17:32:44 -0500
Subject: [PATCH 2/4] created dashboard page for ML Hub

---
 .../MlHub/Dashboard/Dashboard.module.scss     | 27 +++++++
 src/tapis-app/MlHub/Dashboard/Dashboard.tsx   | 78 +++++++++++++++++++
 src/tapis-app/MlHub/Dashboard/index.ts        |  1 +
 .../MlHub/_Layout/Layout.module.scss          |  5 ++
 src/tapis-app/MlHub/_Layout/Layout.tsx        | 40 ++++++++++
 src/tapis-app/MlHub/_Layout/index.ts          |  2 +
 src/tapis-app/MlHub/_Router/Router.tsx        | 16 ++++
 src/tapis-app/MlHub/_Router/index.ts          |  1 +
 .../MlHub/_components/Menu/Menu.module.scss   |  3 +
 src/tapis-app/MlHub/_components/Menu/Menu.tsx | 46 +++++++++++
 src/tapis-app/MlHub/_components/Menu/index.ts |  1 +
 src/tapis-app/MlHub/_components/index.ts      |  1 +
 src/tapis-app/MlHub/index.ts                  |  1 +
 13 files changed, 222 insertions(+)
 create mode 100644 src/tapis-app/MlHub/Dashboard/Dashboard.module.scss
 create mode 100644 src/tapis-app/MlHub/Dashboard/Dashboard.tsx
 create mode 100644 src/tapis-app/MlHub/Dashboard/index.ts
 create mode 100644 src/tapis-app/MlHub/_Layout/Layout.module.scss
 create mode 100644 src/tapis-app/MlHub/_Layout/Layout.tsx
 create mode 100644 src/tapis-app/MlHub/_Layout/index.ts
 create mode 100644 src/tapis-app/MlHub/_Router/Router.tsx
 create mode 100644 src/tapis-app/MlHub/_Router/index.ts
 create mode 100644 src/tapis-app/MlHub/_components/Menu/Menu.module.scss
 create mode 100644 src/tapis-app/MlHub/_components/Menu/Menu.tsx
 create mode 100644 src/tapis-app/MlHub/_components/Menu/index.ts
 create mode 100644 src/tapis-app/MlHub/_components/index.ts
 create mode 100644 src/tapis-app/MlHub/index.ts

diff --git a/src/tapis-app/MlHub/Dashboard/Dashboard.module.scss b/src/tapis-app/MlHub/Dashboard/Dashboard.module.scss
new file mode 100644
index 000000000..c5a892c90
--- /dev/null
+++ b/src/tapis-app/MlHub/Dashboard/Dashboard.module.scss
@@ -0,0 +1,27 @@
+.card-container {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card {
+  width: 25em;
+  margin-right: 1em;
+  margin-bottom: 1em;
+}
+
+.card-header {
+  display: flex;
+  justify-content: baseline;
+  div {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-direction: column;
+  }
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/src/tapis-app/MlHub/Dashboard/Dashboard.tsx b/src/tapis-app/MlHub/Dashboard/Dashboard.tsx
new file mode 100644
index 000000000..38ae1598f
--- /dev/null
+++ b/src/tapis-app/MlHub/Dashboard/Dashboard.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Icon } from 'tapis-ui/_common';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardTitle,
+  CardFooter,
+  CardText,
+} from 'reactstrap';
+import styles from './Dashboard.module.scss';
+
+type DashboardCardProps = {
+  icon: string;
+  link: string;
+  name: string;
+  text: string;
+};
+
+const DashboardCard: React.FC<DashboardCardProps> = ({
+  icon,
+  link,
+  name,
+  text,
+}) => {
+  return (
+    <Card className={styles.card}>
+      <CardHeader>
+        <div className={styles['card-header']}>
+          <div>
+            <Icon name={icon} className="dashboard__card-icon" />
+          </div>
+          <div>{name}</div>
+        </div>
+      </CardHeader>
+      <CardBody>
+        <CardTitle tag="h5">
+        </CardTitle>
+        <CardText>{text}</CardText>
+      </CardBody>
+      <CardFooter className={styles['card-footer']}>
+        <Link to={link}>Go to {name}</Link>
+        <Icon name="push-right" />
+      </CardFooter>
+    </Card>
+  );
+};
+
+const Dashboard: React.FC = () => {
+
+  return (
+    <div id="dashboard">
+      <div id="dashboard-cards" className={styles['card-container']}>
+        <DashboardCard
+          icon="simulation"
+          name="Models Hub"
+          text="View available ML models"
+          link="/ml-hub/models"
+        />
+        <DashboardCard
+          icon="conversation"
+          name="Inference Server"
+          text="View available inference server for ML models"
+          link="/ml-hub/inference"
+        />
+        <DashboardCard
+          icon="data-processing"
+          name="Training Engine"
+          text="View ML model training jobs"
+          link="/ml-hub/training"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;
diff --git a/src/tapis-app/MlHub/Dashboard/index.ts b/src/tapis-app/MlHub/Dashboard/index.ts
new file mode 100644
index 000000000..15d6d118c
--- /dev/null
+++ b/src/tapis-app/MlHub/Dashboard/index.ts
@@ -0,0 +1 @@
+export { default as Dashboard } from './Dashboard';
diff --git a/src/tapis-app/MlHub/_Layout/Layout.module.scss b/src/tapis-app/MlHub/_Layout/Layout.module.scss
new file mode 100644
index 000000000..842088233
--- /dev/null
+++ b/src/tapis-app/MlHub/_Layout/Layout.module.scss
@@ -0,0 +1,5 @@
+.breadcrumbs {
+  text-transform: none;
+  font-size: 1em;
+  line-height: 1.8em;
+}
diff --git a/src/tapis-app/MlHub/_Layout/Layout.tsx b/src/tapis-app/MlHub/_Layout/Layout.tsx
new file mode 100644
index 000000000..19e8421f9
--- /dev/null
+++ b/src/tapis-app/MlHub/_Layout/Layout.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Router } from '../_Router';
+import {
+  PageLayout,
+  LayoutBody,
+  LayoutHeader,
+  Breadcrumbs,
+} from 'tapis-ui/_common';
+import { useLocation } from 'react-router';
+import breadcrumbsFromPathname from 'tapis-ui/_common/Breadcrumbs/breadcrumbsFromPathname';
+import styles from './Layout.module.scss';
+import { Menu } from '../_components';
+
+const Layout: React.FC = () => {
+  const { pathname } = useLocation();
+  const crumbs = breadcrumbsFromPathname(pathname).splice(1);
+  const header = (
+    <div>
+      <LayoutHeader>
+        <div className={styles.breadcrumbs}>
+          <Breadcrumbs
+            breadcrumbs={[{ text: 'ML Hub', to: '/ml-hub' }, ...crumbs]}
+            truncate={false}
+          />
+        </div>
+      </LayoutHeader>
+      <Menu />
+    </div>
+  );
+
+  const body = (
+    <LayoutBody>
+      <Router />
+    </LayoutBody>
+  );
+
+  return <PageLayout top={header} right={body} />;
+};
+
+export default Layout;
diff --git a/src/tapis-app/MlHub/_Layout/index.ts b/src/tapis-app/MlHub/_Layout/index.ts
new file mode 100644
index 000000000..cee81508d
--- /dev/null
+++ b/src/tapis-app/MlHub/_Layout/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Layout';
+// export { Router as default } from './Router';
diff --git a/src/tapis-app/MlHub/_Router/Router.tsx b/src/tapis-app/MlHub/_Router/Router.tsx
new file mode 100644
index 000000000..561dd901b
--- /dev/null
+++ b/src/tapis-app/MlHub/_Router/Router.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Route, useRouteMatch, Switch } from 'react-router-dom';
+import { Dashboard } from '../Dashboard';
+
+const Router: React.FC = () => {
+  const { path } = useRouteMatch();
+  return (
+    <Switch>
+      <Route path={`${path}`} exact>
+        <Dashboard />
+      </Route>
+    </Switch>
+  );
+};
+
+export default Router;
diff --git a/src/tapis-app/MlHub/_Router/index.ts b/src/tapis-app/MlHub/_Router/index.ts
new file mode 100644
index 000000000..70385796a
--- /dev/null
+++ b/src/tapis-app/MlHub/_Router/index.ts
@@ -0,0 +1 @@
+export { default as Router } from './Router';
diff --git a/src/tapis-app/MlHub/_components/Menu/Menu.module.scss b/src/tapis-app/MlHub/_components/Menu/Menu.module.scss
new file mode 100644
index 000000000..12bc9e1bf
--- /dev/null
+++ b/src/tapis-app/MlHub/_components/Menu/Menu.module.scss
@@ -0,0 +1,3 @@
+.nav-item {
+  margin-right: 16px;
+}
diff --git a/src/tapis-app/MlHub/_components/Menu/Menu.tsx b/src/tapis-app/MlHub/_components/Menu/Menu.tsx
new file mode 100644
index 000000000..9bd5de910
--- /dev/null
+++ b/src/tapis-app/MlHub/_components/Menu/Menu.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Navbar, Nav, NavItem, Collapse, Button } from 'reactstrap';
+import { Link } from 'react-router-dom';
+import { Icon } from 'tapis-ui/_common';
+import styles from './Menu.module.scss';
+
+const Menu: React.FC = () => {
+  return (
+    <Navbar color="light" light expand={true}>
+      <Collapse isOpen={true} navbar>
+        <Nav className="me-auto" navbar>
+          <NavItem className={styles['nav-item']}>
+            <Link to="/ml-hub">
+              <Button>
+                <Icon name="dashboard"></Icon> Dashboard
+              </Button>
+            </Link>
+          </NavItem>
+          <NavItem className={styles['nav-item']}>
+            <Link to="/ml-hub/models">
+              <Button>
+                <Icon name="simulation"></Icon> Models
+              </Button>
+            </Link>
+          </NavItem>
+          <NavItem className={styles['nav-item']}>
+            <Link to="/ml-hub/inference">
+              <Button>
+                <Icon name="conversation"></Icon> Inference
+              </Button>
+            </Link>
+          </NavItem>
+          <NavItem className={styles['nav-item']}>
+            <Link to="/ml-hub/training">
+              <Button>
+                <Icon name="data-processing"></Icon> Training
+              </Button>
+            </Link>
+          </NavItem>
+        </Nav>
+      </Collapse>
+    </Navbar>
+  );
+};
+
+export default Menu;
diff --git a/src/tapis-app/MlHub/_components/Menu/index.ts b/src/tapis-app/MlHub/_components/Menu/index.ts
new file mode 100644
index 000000000..16c7bd914
--- /dev/null
+++ b/src/tapis-app/MlHub/_components/Menu/index.ts
@@ -0,0 +1 @@
+export { default as Menu } from './Menu';
diff --git a/src/tapis-app/MlHub/_components/index.ts b/src/tapis-app/MlHub/_components/index.ts
new file mode 100644
index 000000000..81b93712f
--- /dev/null
+++ b/src/tapis-app/MlHub/_components/index.ts
@@ -0,0 +1 @@
+export { Menu } from './Menu';
diff --git a/src/tapis-app/MlHub/index.ts b/src/tapis-app/MlHub/index.ts
new file mode 100644
index 000000000..138d0afa6
--- /dev/null
+++ b/src/tapis-app/MlHub/index.ts
@@ -0,0 +1 @@
+export { default } from './_Layout';

From 9ba63411a0c43a6b10462ae4951820d52df3263d Mon Sep 17 00:00:00 2001
From: dhannywi <dwindrakusuma@gmail.com>
Date: Tue, 30 Apr 2024 09:02:03 -0500
Subject: [PATCH 3/4] Create ML Hub card on main Dashboard page. Add Datasets
 Hub (on ML Hub dashboard page).

---
 .../Dashboard/_components/Dashboard/Dashboard.tsx        | 8 ++++++++
 src/tapis-app/MlHub/Dashboard/Dashboard.tsx              | 8 +++++++-
 src/tapis-app/MlHub/_components/Menu/Menu.tsx            | 9 ++++++++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/tapis-app/Dashboard/_components/Dashboard/Dashboard.tsx b/src/tapis-app/Dashboard/_components/Dashboard/Dashboard.tsx
index 816767d0e..65acb09f7 100644
--- a/src/tapis-app/Dashboard/_components/Dashboard/Dashboard.tsx
+++ b/src/tapis-app/Dashboard/_components/Dashboard/Dashboard.tsx
@@ -107,6 +107,14 @@ const Dashboard: React.FC = () => {
               counter={`${jobs?.data?.result?.length} jobs`}
               loading={jobs?.isLoading}
             />
+            <DashboardCard
+              icon="simulation"
+              name="ML Hub"
+              text="View available models and datasets, run inference and training on ML models"
+              link="/ml-hub"
+              counter={`${4} services`}
+              loading={apps?.isLoading}
+            />
           </>
         ) : (
           <Card>
diff --git a/src/tapis-app/MlHub/Dashboard/Dashboard.tsx b/src/tapis-app/MlHub/Dashboard/Dashboard.tsx
index 38ae1598f..267e729cf 100644
--- a/src/tapis-app/MlHub/Dashboard/Dashboard.tsx
+++ b/src/tapis-app/MlHub/Dashboard/Dashboard.tsx
@@ -59,7 +59,13 @@ const Dashboard: React.FC = () => {
           link="/ml-hub/models"
         />
         <DashboardCard
-          icon="conversation"
+          icon="search-folder"
+          name="Datasets Hub"
+          text="View available Datasets"
+          link="/ml-hub/datasets"
+        />
+        <DashboardCard
+          icon="multiple-coversation"
           name="Inference Server"
           text="View available inference server for ML models"
           link="/ml-hub/inference"
diff --git a/src/tapis-app/MlHub/_components/Menu/Menu.tsx b/src/tapis-app/MlHub/_components/Menu/Menu.tsx
index 9bd5de910..b7fecf0e7 100644
--- a/src/tapis-app/MlHub/_components/Menu/Menu.tsx
+++ b/src/tapis-app/MlHub/_components/Menu/Menu.tsx
@@ -23,10 +23,17 @@ const Menu: React.FC = () => {
               </Button>
             </Link>
           </NavItem>
+          <NavItem className={styles['nav-item']}>
+            <Link to="/ml-hub/datasets">
+              <Button>
+                <Icon name="search-folder"></Icon> Datasets
+              </Button>
+            </Link>
+          </NavItem>
           <NavItem className={styles['nav-item']}>
             <Link to="/ml-hub/inference">
               <Button>
-                <Icon name="conversation"></Icon> Inference
+                <Icon name="multiple-coversation"></Icon> Inference
               </Button>
             </Link>
           </NavItem>

From 479bbefbf4fa526d0d85b23438ee736fffee11d6 Mon Sep 17 00:00:00 2001
From: dhannywi <dwindrakusuma@gmail.com>
Date: Tue, 30 Apr 2024 09:13:20 -0500
Subject: [PATCH 4/4] ran prettier and lint

---
 src/tapis-app/MlHub/Dashboard/Dashboard.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/tapis-app/MlHub/Dashboard/Dashboard.tsx b/src/tapis-app/MlHub/Dashboard/Dashboard.tsx
index 267e729cf..526c664fb 100644
--- a/src/tapis-app/MlHub/Dashboard/Dashboard.tsx
+++ b/src/tapis-app/MlHub/Dashboard/Dashboard.tsx
@@ -35,8 +35,7 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
         </div>
       </CardHeader>
       <CardBody>
-        <CardTitle tag="h5">
-        </CardTitle>
+        <CardTitle tag="h5"></CardTitle>
         <CardText>{text}</CardText>
       </CardBody>
       <CardFooter className={styles['card-footer']}>
@@ -48,7 +47,6 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
 };
 
 const Dashboard: React.FC = () => {
-
   return (
     <div id="dashboard">
       <div id="dashboard-cards" className={styles['card-container']}>