Merge pull request #405 from tapis-project/task/TUI-400

Task/TUI-400-mlhub-datasets-page

src/app/MlHub/Datasets/Datasets.module.scss

@@ -0,0 +1,8 @@
+.datasets-table {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.datasets-name-column {
+  text-overflow: ellipsis;
+}

src/app/MlHub/Datasets/Datasets.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Link, useRouteMatch } from 'react-router-dom';
+import { Datasets as DatasetsModule } from '@tapis/tapis-typescript';
+import { Icon, QueryWrapper } from '@tapis/tapisui-common';
+import { MLHub as Hooks } from '@tapis/tapisui-hooks';
+import { Table } from 'reactstrap';
+import styles from './Datasets.module.scss';
+
+const Datasets: React.FC = () => {
+  const { data, isLoading, error } = Hooks.Datasets.useList();
+  const datasets: DatasetsModule.DatasetShortInfo = data?.result ?? {};
+  const { path } = useRouteMatch();
+
+  return (
+    <QueryWrapper
+      isLoading={isLoading}
+      error={error}
+      className={styles['datasets-table']}
+    >
+      <Table responsive striped>
+        <thead>
+          <tr>
+            <th>Dataset ID</th>
+            <th>Downloads</th>
+            <th>Last Modified</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.entries(datasets).map((dataset) => (
+            <tr>
+              <td className={`${styles['dataset-name-column']}`}>
+                <Icon name="search-folder" />
+                <span>
+                  <Link to={`${path}/${dataset[0]}`}>{dataset[0]}</Link>
+                </span>
+              </td>
+              <td>{dataset[1].downloads}</td>
+              <td>{dataset[1].last_modified}</td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </QueryWrapper>
+  );
+};
+
+export default Datasets;

src/app/MlHub/Datasets/_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/app/MlHub/Datasets/_Layout/index.ts

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

src/app/MlHub/Datasets/_Router/Router.tsx

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

src/app/MlHub/Datasets/_Router/index.ts

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

src/app/MlHub/Models/InferenceServerInfo.tsx

@@ -3,6 +3,7 @@ import { MLHub as Hooks } from '@tapis/tapisui-hooks';
 import { JSONDisplay } from '@tapis/tapisui-common';
 import styles from './ModelDetails.module.scss';
 import { QueryWrapper } from '@tapis/tapisui-common';
+import { Link, useRouteMatch } from 'react-router-dom';
 
 type InferenceServerInfoProps = {
   modelId: string;
@@ -17,6 +18,9 @@ const InferenceServerInfo: React.FC<InferenceServerInfoProps> = ({
     isError,
     isLoading,
   } = Hooks.Models.useInferenceServerDetails({ modelId });
+
+  const { path } = useRouteMatch();
+
   if (isLoading) {
     return <p>Loading...</p>;
   }
@@ -31,7 +35,6 @@ const InferenceServerInfo: React.FC<InferenceServerInfoProps> = ({
 
   if (serverInfo) {
     const { message, metadata, result, status, version } = serverInfo;
-    // console.log ("serverInfo" , serverInfo)
 
     if (
       parseInt(serverInfo.status!) === 200 ||
@@ -58,7 +61,14 @@ const InferenceServerInfo: React.FC<InferenceServerInfoProps> = ({
                     inference_endpoint:
                   </div>
                   <div className={`${styles['detail-info']}`}>
-                    {serverInfo.result.inference_endpoint}
+                    <span>
+                      <Link
+                        to={`${path}/${serverInfo.result.inference_endpoint}`}
+                      >
+                        {' '}
+                        {serverInfo.result.inference_endpoint}{' '}
+                      </Link>
+                    </span>
                   </div>
                 </div>
               )}
@@ -77,7 +87,7 @@ const InferenceServerInfo: React.FC<InferenceServerInfoProps> = ({
                       inference_server_possible:
                     </div>
                     <div className={`${styles['detail-info']}`}>
-                      {serverInfo.result?.inference_server_possible}
+                      {String(serverInfo.result?.inference_server_possible)}
                     </div>
                   </div>
                 </>

src/app/MlHub/_Router/Router.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Route, useRouteMatch, Switch } from 'react-router-dom';
 import { Dashboard } from '../Dashboard';
 import { Layout as ModelsLayout } from '../Models/_Layout';
+import { Layout as DatasetsLayout } from '../Datasets/_Layout';
 
 const Router: React.FC = () => {
   const { path } = useRouteMatch();
@@ -14,6 +15,10 @@ const Router: React.FC = () => {
       <Route path={`${path}/models`}>
         <ModelsLayout />
       </Route>
+
+      <Route path={`${path}/datasets`}>
+        <DatasetsLayout />
+      </Route>
     </Switch>
   );
 };