Merge pull request #368 from tapis-project/task/TUI-365--ML-Hub-dashb…

…oard

TUI 365  Dashboard for ML Hub

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>

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;
+}

src/tapis-app/MlHub/Dashboard/Dashboard.tsx

@@ -0,0 +1,82 @@
+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="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"
+        />
+        <DashboardCard
+          icon="data-processing"
+          name="Training Engine"
+          text="View ML model training jobs"
+          link="/ml-hub/training"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

src/tapis-app/MlHub/Dashboard/index.ts

@@ -0,0 +1 @@
+export { default as Dashboard } from './Dashboard';

src/tapis-app/MlHub/_Layout/Layout.module.scss

@@ -0,0 +1,5 @@
+.breadcrumbs {
+  text-transform: none;
+  font-size: 1em;
+  line-height: 1.8em;
+}

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;

src/tapis-app/MlHub/_Layout/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Layout';
+// export { Router as default } from './Router';

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;

src/tapis-app/MlHub/_Router/index.ts

@@ -0,0 +1 @@
+export { default as Router } from './Router';

src/tapis-app/MlHub/_components/Menu/Menu.module.scss

@@ -0,0 +1,3 @@
+.nav-item {
+  margin-right: 16px;
+}

src/tapis-app/MlHub/_components/Menu/Menu.tsx

@@ -0,0 +1,53 @@
+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/datasets">
+              <Button>
+                <Icon name="search-folder"></Icon> Datasets
+              </Button>
+            </Link>
+          </NavItem>
+          <NavItem className={styles['nav-item']}>
+            <Link to="/ml-hub/inference">
+              <Button>
+                <Icon name="multiple-coversation"></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;

src/tapis-app/MlHub/_components/Menu/index.ts

@@ -0,0 +1 @@
+export { default as Menu } from './Menu';

src/tapis-app/MlHub/_components/index.ts

@@ -0,0 +1 @@
+export { Menu } from './Menu';

src/tapis-app/MlHub/index.ts

@@ -0,0 +1 @@
+export { default } from './_Layout';

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 />