Task/t UI 366 ml hub 100 models (#376)

* changed ML Hub icon on dashboard

* Create models landing page - show top 100 models with ID, pipeline_tag, downloads, and last_modified fields

* Run prettier and lint

* Move icon above link

* Match models icon, add ellipsis if name is too long

* Match models icon, add ellipsis if name is too long, italicize None if no pipeline_tag

---------

Co-authored-by: dhannywi <[email protected]>

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

@@ -108,7 +108,7 @@ const Dashboard: React.FC = () => {
               loading={jobs?.isLoading}
             />
             <DashboardCard
-              icon="simulation"
+              icon="share"
               name="ML Hub"
               text="View available models and datasets, run inference and training on ML models"
               link="/ml-hub"

src/tapis-app/MlHub/Models/Models.module.scss

@@ -0,0 +1,3 @@
+.model-name-column {
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Models as ModelsModule } from '@tapis/tapis-typescript';
+import { useList } from 'tapis-hooks/ml-hub/models';
+import { Icon } from 'tapis-ui/_common';
+import { QueryWrapper } from 'tapis-ui/_wrappers';
+import { Table } from 'reactstrap';
+import styles from './Models.module.scss';
+
+const Models: React.FC = () => {
+  const { data, isLoading, error } = useList();
+  const models: ModelsModule.ModelShortInfo = data?.result ?? {};
+
+  return (
+    <QueryWrapper isLoading={isLoading} error={error}>
+      <Table responsive striped>
+        <thead>
+          <tr>
+            <th>Model ID</th>
+            <th>Task</th>
+            <th>Downloads</th>
+            <th>Last Modified</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.entries(models).map((model) => (
+            <tr>
+              <td className={`${styles['model-name-column']}`}>
+                <Icon name="simulation" />
+                <span>
+                  <Link to={`/ml-hub/models/${model[0]}`}> {model[0]} </Link>
+                </span>
+              </td>
+              <td>
+                {model[1].pipeline_tag ? model[1].pipeline_tag : <i>None</i>}
+              </td>
+              <td>{model[1].downloads}</td>
+              <td>{model[1].last_modified}</td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </QueryWrapper>
+  );
+};
+
+export default Models;

src/tapis-app/MlHub/Models/_Layout/Layout.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Router } from '../_Router';
+
+const Layout: React.FC = () => {
+  return <Router />;
+};
+
+export default Layout;

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

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

src/tapis-app/MlHub/Models/_Router/Router.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Route, useRouteMatch, Switch } from 'react-router-dom';
+
+import { default as Models } from '../Models';
+
+const Router: React.FC = () => {
+  const { path } = useRouteMatch();
+  return (
+    <Switch>
+      <Route path={path} exact>
+        <Models />
+      </Route>
+    </Switch>
+  );
+};
+
+export default Router;

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

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

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

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

src/tapis-app/MlHub/_Router/Router.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Route, useRouteMatch, Switch } from 'react-router-dom';
 import { Dashboard } from '../Dashboard';
+import { Models } from '../Models';
 
 const Router: React.FC = () => {
   const { path } = useRouteMatch();
@@ -9,6 +10,10 @@ const Router: React.FC = () => {
       <Route path={`${path}`} exact>
         <Dashboard />
       </Route>
+
+      <Route path={`${path}/models`}>
+        <Models />
+      </Route>
     </Switch>
   );
 };