Task/t UI 367 single model info and button placements

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

@@ -0,0 +1,48 @@
+.buttons-container {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  gap: 20px;
+}
+
+.model-details-wrapper {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  position: relative;
+}
+
+.model-details {
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+}
+
+.model-title {
+  padding-bottom: 8px;
+  margin-left: 10px;
+}
+
+.model-detail {
+  display: flex;
+  flex-direction: row;
+}
+
+.detail-title {
+  font-weight: bold;
+  width: 10vw;
+}
+
+.detail-info {
+  margin-left: 8px;
+  text-align: left;
+}
+
+.model-title-container {
+  border-bottom: 1px solid black;
+  margin-bottom: 8px;
+}

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

@@ -0,0 +1,125 @@
+import React from 'react';
+import { Models } from '@tapis/tapis-typescript';
+import { useDetails } from 'tapis-hooks/ml-hub/models';
+import { QueryWrapper } from 'tapis-ui/_wrappers';
+import { Button } from 'reactstrap';
+import styles from './ModelDetails.module.scss';
+import { Icon } from 'tapis-ui/_common';
+import { JSONDisplay } from 'tapis-ui/_common';
+
+type ModelsProps = {
+  modelId: string;
+};
+
+type ButtonNames = {
+  InferenceServerDetails: String;
+  ModelCard: String;
+  DownloadModel: String;
+};
+
+const ModelDetails: React.FC<ModelsProps> = ({ modelId }) => {
+  const { data, isLoading, error } = useDetails({ modelId });
+  const model: Models.ModelFullInfo = data?.result ?? {};
+  return (
+    <QueryWrapper isLoading={isLoading} error={error}>
+      <div className={`${styles['model-title-container']}`}>
+        <div className={`${styles['model-title']}`}>
+          <b>{modelId}</b>
+        </div>
+      </div>
+      <div className={`${styles['model-details-wrapper']}`}>
+        <div className={`${styles['model-details']}`}>
+          <div className={`${styles['model-detail']}`}>
+            <div className={`${styles['detail-title']}`}>author:</div>
+            <div className={`${styles['detail-info']}`}>{model.author}</div>
+          </div>
+          <div className={`${styles['model-detail']}`}>
+            <div className={`${styles['detail-title']}`}>downloads:</div>
+            <div className={`${styles['detail-info']}`}>{model.downloads}</div>
+          </div>
+          <div className={`${styles['model-detail']}`}>
+            <div className={`${styles['detail-title']}`}>created_at:</div>
+            <div className={`${styles['detail-info']}`}>{model.created_at}</div>
+          </div>
+          <div className={`${styles['model-detail']}`}>
+            <div className={`${styles['detail-title']}`}>last_modified:</div>
+            <div className={`${styles['detail-info']}`}>
+              {model.last_modified}
+            </div>
+          </div>
+          <div className={`${styles['model-detail']}`}>
+            <div className={`${styles['detail-title']}`}>sha:</div>
+            <div className={`${styles['detail-info']}`}>{model.sha}</div>
+          </div>
+          <div className={`${styles['model-detail']}`}>
+            <div className={`${styles['detail-title']}`}>
+              repository_content:
+            </div>
+            <div className={`${styles['detail-info']}`}>
+              <JSONDisplay json={model.repository_content}></JSONDisplay>
+            </div>
+          </div>
+          <div className={`${styles['model-detail']}`}>
+            <div className={`${styles['detail-title']}`}>library_name:</div>
+            <div className={`${styles['detail-info']}`}>
+              {model.library_name}
+            </div>
+          </div>
+          <div className={`${styles['model-detail']}`}>
+            <div className={`${styles['detail-title']}`}>
+              transformers_info:
+            </div>
+            <div className={`${styles['detail-info']}`}>
+              <JSONDisplay json={model.transformers_info}></JSONDisplay>
+            </div>
+          </div>
+          <div className={`${styles['model-detail']}`}>
+            <div className={`${styles['detail-title']}`}>config:</div>
+            <div className={`${styles['detail-info']}`}>
+              <JSONDisplay json={model.config}></JSONDisplay>
+            </div>
+          </div>
+        </div>
+        <Buttons
+          InferenceServerDetails="Inference Server Info"
+          DownloadModel="Download Model"
+          ModelCard="Model Card"
+        />
+      </div>
+    </QueryWrapper>
+  );
+};
+
+const Buttons: React.FC<ButtonNames> = ({
+  InferenceServerDetails,
+  ModelCard,
+  DownloadModel,
+}) => {
+  return (
+    <div className={`${styles['buttons-container']}`}>
+      <Button>
+        {InferenceServerDetails}{' '}
+        <span>
+          {' '}
+          <Icon name="push-right" />{' '}
+        </span>
+      </Button>
+      <Button>
+        {DownloadModel}{' '}
+        <span>
+          {' '}
+          <Icon name="push-right" />{' '}
+        </span>{' '}
+      </Button>
+      <Button>
+        {ModelCard}{' '}
+        <span>
+          {' '}
+          <Icon name="push-right" />{' '}
+        </span>{' '}
+      </Button>
+    </div>
+  );
+};
+
+export default ModelDetails;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useRouteMatch } 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';
@@ -10,6 +10,7 @@ import styles from './Models.module.scss';
 const Models: React.FC = () => {
   const { data, isLoading, error } = useList();
   const models: ModelsModule.ModelShortInfo = data?.result ?? {};
+  const { path } = useRouteMatch();
 
   return (
     <QueryWrapper isLoading={isLoading} error={error}>
@@ -28,7 +29,7 @@ const Models: React.FC = () => {
               <td className={`${styles['model-name-column']}`}>
                 <Icon name="simulation" />
                 <span>
-                  <Link to={`/ml-hub/models/${model[0]}`}> {model[0]} </Link>
+                  <Link to={`${path}/${model[0]}`}> {model[0]} </Link>
                 </span>
               </td>
               <td>

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

@@ -1,15 +1,31 @@
 import React from 'react';
-import { Route, useRouteMatch, Switch } from 'react-router-dom';
-
-import { default as Models } from '../Models';
+import {
+  Route,
+  useRouteMatch,
+  Switch,
+  RouteComponentProps,
+} from 'react-router-dom';
+import { Models } from '../../Models';
+import ModelDetails from '../ModelDetails';
 
 const Router: React.FC = () => {
   const { path } = useRouteMatch();
   return (
     <Switch>
-      <Route path={path} exact>
+      <Route path={`${path}`} exact>
         <Models />
       </Route>
+
+      <Route
+        path={`${path}/:modelId+`}
+        render={({
+          match: {
+            params: { modelId },
+          },
+        }: RouteComponentProps<{ modelId: string }>) => {
+          return <ModelDetails modelId={modelId} />;
+        }}
+      />
     </Switch>
   );
 };

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

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

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

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