Refactoring and design tweaks (#1130)

wellcomecollection · Jun 28, 2024 · 55b9d7f · 55b9d7f
1 parent a758e08
commit 55b9d7f
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 115 deletions.
diff --git a/monitoring/ingest_inspector/frontend/src/app/components/Form.tsx b/monitoring/ingest_inspector/frontend/src/app/components/Form.tsx
@@ -26,7 +26,7 @@ export const Form = ({defaultIngestId}: FormProps) => {
     return (
         <div className="content my-8">
             <form onSubmit={onSubmit} className="flex items-end">
-                <div className="input-wrapper">
+                <div className="w-full mr-[10px]">
                     <label htmlFor="ingest-id">Ingest ID</label>
                     <input
                         type="text"

diff --git a/monitoring/ingest_inspector/frontend/src/app/components/Ingest.tsx b/monitoring/ingest_inspector/frontend/src/app/components/Ingest.tsx
@@ -34,50 +34,50 @@ const Ingest = ({ingestData}: IngestProps) => {
     const callbackStatus = ingestData.callback?.status.id;
 
     return (
-        <div className="mt-3 bg-[#EDECE3] p-8 card">
+        <div className="mt-3 bg-[#EDECE3] p-4 sm:p-8 card">
             <IngestTags ingestData={ingestData}/>
-            <h2 className="text-3xl font-medium mt-2">{ingestData.id}</h2>
-            <dl className="ingest-data p-4">
-                <dt>source location:</dt>
+            <h2 className="text-3xl font-medium mt-2 mb-4">{ingestData.id}</h2>
+            <dl className="ingest-data">
+                <dt>Source location:</dt>
                 <dd>
-                    <a href={ingestData.s3Url} target="_blank" rel="noreferrer">{ingestData.displayS3Url}</a>
+                    <a className="status-color" href={ingestData.s3Url} target="_blank" rel="noreferrer">{ingestData.displayS3Url}</a>
                 </dd>
 
-                <dt>storage space:</dt>
+                <dt>Storage space:</dt>
                 <dd>{space}</dd>
 
-                <dt>external identifier:</dt>
+                <dt>External identifier:</dt>
                 <dd>{ingestData.bag.info.externalIdentifier}</dd>
 
-                <dt>version:</dt>
-                <dd>{version || "none assigned"}</dd>
+                <dt>Version:</dt>
+                <dd>{version || "-"}</dd>
 
                 {/*If the ingest succeeded, we can link to the bag in S3.*/}
                 {status === "succeeded" && (
                     <>
-                        <dt>bag locations:</dt>
+                        <dt>Bag locations:</dt>
                         <dd>
-                            <a href={getS3Url(primaryBucket, path)}>s3://{primaryBucket}/{path}</a>
+                            <a className="status-color" href={getS3Url(primaryBucket, path)}>s3://{primaryBucket}/{path}</a>
                             <br/>
-                            <a href={getS3Url(glacierBucket, path)}>s3://{glacierBucket}/{path}</a>
+                            <a className="status-color" href={getS3Url(glacierBucket, path)}>s3://{glacierBucket}/{path}</a>
                         </dd>
                     </>
                 )}
 
-                <IngestFormattedDateItem label="created date:" date={ingestData.createdDate} includeDelta={false}/>
-                <IngestFormattedDateItem label="last update:" date={ingestData.lastUpdatedDate} includeDelta/>
+                <IngestFormattedDateItem label="Created:" date={ingestData.createdDate} includeDelta={false}/>
+                <IngestFormattedDateItem label="Last updated:" date={ingestData.lastUpdatedDate} includeDelta/>
 
                 {callbackStatus && (
                     <>
                         <dt className={`callback--${callbackStatus}`}>
-                            callback status:
+                            Callback status:
                         </dt>
                         <dd className={`callback--${callbackStatus}`}>
                             {callbackStatus === "processing" ? "pending" : callbackStatus}
                         </dd>
                     </>
                 )}
-                <dt>events:</dt>
+                <dt>Events:</dt>
                 <dd>
                     <ul>
                         {ingestData.events.map((event) => (

diff --git a/monitoring/ingest_inspector/frontend/src/app/components/IngestEventItem.tsx b/monitoring/ingest_inspector/frontend/src/app/components/IngestEventItem.tsx
@@ -31,13 +31,13 @@ const IngestEventItem = ({event}: { event: IngestData["events"][0] }) => {
     const attemptCount = getAttemptCount(event);
 
     return (
-        <li title={event.createdDate} key={event.createdDate}>
+        <li title={event.createdDate} className="w-fit leading-[1.6rem]">
             <span className={cx({"font-semibold": isFailed})}>{event.description}</span>
             {(attemptCount || isFailed || event._is_unmatched_start) && (
-                <span className={cx({"count": attemptCount})}>
+                <span className="text-[#777]">
                     {' '}(
                     {attemptCount && `${attemptCount} / `}
-                    <a href={event.kibanaUrl} target="_blank" rel="noreferrer">dev logs</a>)
+                    <a className={cx({"status-color font-medium": isFailed})} href={event.kibanaUrl} target="_blank" rel="noreferrer">dev logs</a>)
                 </span>
             )}
         </li>

diff --git a/monitoring/ingest_inspector/frontend/src/app/components/IngestFormattedDateItem.tsx b/monitoring/ingest_inspector/frontend/src/app/components/IngestFormattedDateItem.tsx
@@ -91,7 +91,7 @@ type IngestFormattedDateItemProps = {
 const IngestFormattedDateItem = ({label, date, includeDelta}: IngestFormattedDateItemProps) => (
     <>
         <dt>{label}</dt>
-        <dd className="timestamp" title={date}>
+        <dd className="timestamp w-fit" title={date}>
             {localiseDateString(date)}
             {includeDelta && ` ${updateDelta(date)}`}
         </dd>

diff --git a/monitoring/ingest_inspector/frontend/src/app/components/IngestTags.tsx b/monitoring/ingest_inspector/frontend/src/app/components/IngestTags.tsx
@@ -2,7 +2,7 @@ import {IngestData} from "@/app/types";
 
 export const IngestTags = ({ingestData}: {ingestData: IngestData}) => (
     <div className="flex font-medium gap-1 text-sm">
-        <div className={`px-1 api-${ingestData.environment} capitalize`}>{ingestData.status.id}</div>
+        <div className={`px-1 api-${ingestData.environment} capitalize status-color`}>{ingestData.status.id}</div>
         <div
             className={`px-1 api-${ingestData.environment} !border-black capitalize !bg-black !text-white`}>{ingestData.environment}</div>
     </div>

diff --git a/monitoring/ingest_inspector/frontend/src/app/globals.css b/monitoring/ingest_inspector/frontend/src/app/globals.css
@@ -46,22 +46,6 @@ header {
     align-items: center;
 }
 
-header a,
-header a:visited {
-    color: black;
-    text-decoration: none;
-    transition: color 0.2s;
-}
-
-header a:hover {
-    text-decoration: underline;
-    background: none;
-}
-
-header a:visited:hover {
-    background: none;
-}
-
 hr {
     background-color: #ddd;
     height: 1px;
@@ -104,11 +88,6 @@ input:focus-within {
     box-shadow: 0 0 0 4px #ffce3c; /* yellow */
 }
 
-.input-wrapper {
-    width: 100%;
-    margin-right: 10px;
-}
-
 label {
     font-weight: 700;
     font-size: 1rem;
@@ -156,97 +135,65 @@ button {
     color: black;
 }
 
-.status-succeeded .card {
-    border-color: #0b7051; /* validation green */
-}
-
-.status-succeeded .card a {
-    color: #0b7051; /* validation green */
-}
-
-.status-processing .card {
-    border-color: #1dbebb; /* turquoise */
-}
-
-.status-processing .card a {
-    color: #1dbebb; /* turquoise */
-}
-
-.status-failed .card {
-    border-color: #e01b2f; /* validation red */
+.status-succeeded .status-color {
+    color: #0b7051;
+    border-color: #0b7051;
 }
 
-.status-failed .card a {
-    color: #e01b2f; /* validation red */
+.status-processing .status-color {
+    color: #1dbebb;
+    border-color: #1dbebb;
 }
 
-.status-accepted .card {
-    border-color: #ffce3c; /* yellow */
+.status-failed .status-color {
+    color: #e01b2f;
+    border-color: #e01b2f;
 }
 
-.status-accepted .card a {
-    color: #c29207;
+.status-accepted .status-color {
+    color: #ffce3c;
+    border-color: #ffce3c;
 }
 
-.card .card-header.api-staging {
-    border-bottom: 3px solid;
-    font-weight: bold;
+.api-production, .api-staging {
+    border-width: 3px;
+    border-style: solid;
 }
 
 .status-succeeded .api-production {
     background: #0b7051; /* validation green */
     color: white;
-    border: 3px solid #0b7051;
 }
 
 .status-succeeded .api-staging {
     color: #0b7051; /* validation green */
-    border: 3px solid #0b7051;
 }
 
 .status-processing .api-production {
     background: #1dbebb; /* turquoise */
     color: white;
-    border: 3px solid #1dbebb;
-
 }
 
 .status-processing .api-staging {
     color: #1dbebb; /* turquoise */
-    border: 3px solid #1dbebb;
 }
 
 .status-failed .api-production {
     background: #e01b2f; /* validation red */
     color: white;
-    border: 3px solid #e01b2f;
 }
 
 .status-failed .api-staging {
     color: #e01b2f; /* validation red */
-    border: 3px solid #e01b2f;
 }
 
 .status-accepted .api-production {
     background: #ffce3c; /* yellow */
     color: black;
-    border: 3px solid #ffce3c;
-
 }
 
 .status-accepted .api-staging {
     color: #ffce3c;
-    border: 3px solid #ffce3c;
-}
-
-.card ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.card li {
-    line-height: 1.6em;
 }
 
 footer {
@@ -262,30 +209,15 @@ footer a:visited {
     color: #777;
 }
 
-.count,
-.status-accepted .count a,
-.status-processing .count a,
-.status-failed .count a {
-    color: #555;
-    background: #ededed;
-}
-
-.status-succeeded .count,
-.status-succeeded .count a {
-    color: #777;
-    background: none;
-}
-
 .ingest-data {
     display: grid;
-    grid-column-gap: 8px;
-    grid-row-gap: 2px;
+    grid-row-gap: 20px;
     grid-template-columns: 180px auto;
 }
 
 dt {
     grid-column: 1 / 2;
-    text-align: right;
+    text-align: left;
     font-weight: 575;
 }
 
@@ -299,6 +231,7 @@ strong {
 
 dd {
     grid-column: 2 / 2;
+    width: fit-content;
 }
 
 /* https://twitter.com/thingskatedid/status/1314843881993764864 */
@@ -307,17 +240,17 @@ dd {
 }
 
 /* Give a strong visual hint that there's still callback stuff to do */
-
 .status-succeeded .callback--processing,
 .status-failed .callback--processing {
     background: rgba(0, 155, 178, 0.3);
     padding: 1px 4px;
     margin: -1px -4px;
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 700px) {
     .ingest-data {
         grid-template-columns: auto;
+        grid-row-gap: 0;
     }
 
     dt {

diff --git a/monitoring/ingest_inspector/frontend/src/app/hooks/useGetIngest.ts b/monitoring/ingest_inspector/frontend/src/app/hooks/useGetIngest.ts
@@ -1,8 +1,8 @@
 import useSWR from "swr";
-import {IngestInspectorApiResponse} from "@/app/types";
 import {useEffect} from "react";
 import {storeNewIngest} from "@/app/components/RecentIngests";
 import NProgress from "nprogress";
+import {IngestData} from "@/app/types";
 
 const BASE_API_URL =
     "https://xkgpnijmy5.execute-api.eu-west-1.amazonaws.com/v1/ingest";
@@ -14,7 +14,7 @@ export const APIErrors = {
 
 const getIngest = async (
     ingestId: string,
-): Promise<IngestInspectorApiResponse> => {
+): Promise<IngestData> => {
     const response = await fetch(`${BASE_API_URL}/${ingestId}`);
     const content = await response.json();
 

diff --git a/monitoring/ingest_inspector/frontend/src/app/layout.tsx b/monitoring/ingest_inspector/frontend/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
       <header>
         <div className="loading-indicator-wrapper w-full h-1 top-0 absolute" />
         <div className="content">
-          <Link href="/?">wellcome ingest inspector</Link>
+          <Link href="/?" className="no-underline hover:underline">wellcome ingest inspector</Link>
         </div>
       </header>
       <main>

diff --git a/monitoring/ingest_inspector/frontend/src/app/page.tsx b/monitoring/ingest_inspector/frontend/src/app/page.tsx
@@ -21,9 +21,7 @@ const HomePage = () => {
             <Form defaultIngestId={ingestId}/>
             <hr/>
             <div className="content mt-6">
-                {data && (
-                    <Ingest ingestData={data} environment={data.environment}/>
-                )}
+                {data && (<Ingest ingestData={data} />)}
                 {error && (
                     <div className="mt-12">
                         {error.message === APIErrors.INVALID_INGEST_ID && <h3 className="text-2xl">The ingest ID <strong>{ingestId}</strong> is not valid.</h3>}