Merge pull request #228 from exacaster/update_title_ui

Update application title
exacaster · Nov 22, 2022 · 57f9a6d · 57f9a6d
2 parents c0ff527 + 46c1433
commit 57f9a6d
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 23 deletions.
diff --git a/frontend/src/client/types.ts b/frontend/src/client/types.ts
@@ -2,6 +2,7 @@ export type Application = {
   id: string;
   state: string;
   createdAt: string;
+  contactedAt: string;
   appId?: string;
   submitParams: {
     name: string;

diff --git a/frontend/src/components/AppInfo.module.scss b/frontend/src/components/AppInfo.module.scss
@@ -1,5 +1,10 @@
-.noWrapTable {
-  td {
-    white-space: nowrap;
+.appInfo {
+  max-width: 100%;
+  overflow-y: auto;
+
+  .noWrapTable {
+    td {
+      white-space: nowrap;
+    }
   }
 }
diff --git a/frontend/src/components/AppInfo.tsx b/frontend/src/components/AppInfo.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 const AppInfo: React.FC<Props> = ({app}) => {
   return (
-    <Box mt="5">
+    <Box mt="5" className={styles.appInfo}>
       <Table className={styles.noWrapTable} variant="simple" size="sm">
         <Thead>
           <Tr>

diff --git a/frontend/src/components/AppTitle.tsx b/frontend/src/components/AppTitle.tsx
@@ -1,27 +1,38 @@
-import {Grid, GridItem} from '@chakra-ui/react';
-import React, {ReactNode} from 'react';
+import {Grid, GridItem, Text} from '@chakra-ui/react';
+import React from 'react';
 import {Application} from '../client/types';
 import AppActions from './AppActions';
 import AppStatus from './AppStatus';
+import DateTime from './DateTime';
 import PageHeading from './PageHeading';
 
 interface Props {
   app: Application;
-  children: ReactNode;
 }
 
-const AppTitle: React.FC<Props> = ({app, children}) => {
+const AppTitle: React.FC<Props> = ({app}) => {
   return (
-    <PageHeading>
-      <Grid templateColumns="repeat(5, 1fr)">
-        <GridItem colSpan={4}>
-          {children} <AppStatus status={app.state} />
-        </GridItem>
-        <GridItem colSpan={1} justifySelf="end">
-          <AppActions app={app} />
-        </GridItem>
-      </Grid>
-    </PageHeading>
+    <>
+      <PageHeading mb="3">
+        <Grid templateColumns="repeat(5, 1fr)">
+          <GridItem colSpan={4}>
+            {app.submitParams.name} <AppStatus status={app.state} />
+          </GridItem>
+          <GridItem colSpan={1} justifySelf="end">
+            <AppActions app={app} />
+          </GridItem>
+        </Grid>
+      </PageHeading>
+      <Text fontSize="sm" color="gray">
+        <Text as="b">Application Id: </Text> {app.id}
+        {' | '}
+        <Text as="b">Created: </Text>
+        <DateTime>{app.createdAt}</DateTime>
+        {' | '}
+        <Text as="b">Last checked: </Text>
+        <DateTime>{app.contactedAt}</DateTime>
+      </Text>
+    </>
   );
 };
 

diff --git a/frontend/src/components/PageHeading.tsx b/frontend/src/components/PageHeading.tsx
@@ -1,14 +1,15 @@
-import {Heading} from '@chakra-ui/layout';
+import {Heading, HeadingProps} from '@chakra-ui/layout';
 import {ReactNode} from 'react';
 
 interface Props {
   children: ReactNode;
+  mb?: HeadingProps['mb'];
 }
 
-const PageHeading: React.FC<Props> = ({children}) => {
+const PageHeading: React.FC<Props> = ({children, mb = '5'}) => {
   return (
     <>
-      <Heading size="lg" mb="5">
+      <Heading size="lg" mb={mb}>
         {children}
       </Heading>
     </>

diff --git a/frontend/src/pages/Batch.tsx b/frontend/src/pages/Batch.tsx
@@ -18,7 +18,7 @@ const Batch: React.FC = () => {
 
   return (
     <div>
-      <AppTitle app={batch}>Batch {id}</AppTitle>
+      <AppTitle app={batch} />
       <Box textStyle="caption" mt="5">
         Logs:
       </Box>

diff --git a/frontend/src/pages/Session.tsx b/frontend/src/pages/Session.tsx
@@ -17,7 +17,7 @@ const Session: React.FC = () => {
 
   return (
     <div>
-      <AppTitle app={session}>Session {id}</AppTitle>
+      <AppTitle app={session} />
       <Box textStyle="caption" mt="5">
         Logs:
       </Box>