Skip to content

Commit

Permalink
Format frontend code with Prettier (#1130)
Browse files Browse the repository at this point in the history
  • Loading branch information
@StepanBrychta
StepanBrychta committed Jun 28, 2024
1 parent 739366e commit 6775552
Show file tree
Hide file tree
Showing 15 changed files with 613 additions and 565 deletions.
2 changes: 1 addition & 1 deletion monitoring/ingest_inspector/frontend/next.config.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
output: "export",
};

export default nextConfig;
16 changes: 16 additions & 0 deletions monitoring/ingest_inspector/frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions monitoring/ingest_inspector/frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"eslint": "^8",
"eslint-config-next": "14.2.4",
"postcss": "^8",
"prettier": "3.3.2",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
Expand Down
76 changes: 38 additions & 38 deletions monitoring/ingest_inspector/frontend/src/app/components/Form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
import {useRouter} from "next/navigation";
import {FormEvent, useEffect, useState} from "react";
import { useRouter } from "next/navigation";
import { FormEvent, useEffect, useState } from "react";

type FormProps = {
defaultIngestId: string;
}
defaultIngestId: string;
};

export const Form = ({defaultIngestId}: FormProps) => {
const [ingestId, setIngestId] = useState<string>(defaultIngestId);
const router = useRouter();
export const Form = ({ defaultIngestId }: FormProps) => {
const [ingestId, setIngestId] = useState<string>(defaultIngestId);
const router = useRouter();

useEffect(() => {
setIngestId(defaultIngestId);
}, [defaultIngestId])
useEffect(() => {
setIngestId(defaultIngestId);
}, [defaultIngestId]);

const onSubmit = (e: FormEvent) => {
e.preventDefault();
const data = new FormData(e.target as HTMLFormElement);
const ingestId = data.get("ingest-id") as string;
const onSubmit = (e: FormEvent) => {
e.preventDefault();
const data = new FormData(e.target as HTMLFormElement);
const ingestId = data.get("ingest-id") as string;

if (ingestId?.length > 0) {
router.push(`/?ingestId=${ingestId}`);
}
};
if (ingestId?.length > 0) {
router.push(`/?ingestId=${ingestId}`);
}
};

return (
<div className="content my-8">
<form onSubmit={onSubmit} className="flex items-end">
<div className="w-full mr-[10px]">
<label htmlFor="ingest-id">Ingest ID</label>
<input
type="text"
name="ingest-id"
placeholder="123e4567-e89b-12d3-a456-426655440000"
autoFocus
spellCheck="false"
value={ingestId}
onChange={(e) => setIngestId(e.target.value)}
/>
</div>
<button type="submit" className="status-bg hover:underline">
Look up ingest
</button>
</form>
return (
<div className="content my-8">
<form onSubmit={onSubmit} className="flex items-end">
<div className="w-full mr-[10px]">
<label htmlFor="ingest-id">Ingest ID</label>
<input
type="text"
name="ingest-id"
placeholder="123e4567-e89b-12d3-a456-426655440000"
autoFocus
spellCheck="false"
value={ingestId}
onChange={(e) => setIngestId(e.target.value)}
/>
</div>
);
<button type="submit" className="status-bg hover:underline">
Look up ingest
</button>
</form>
</div>
);
};

export default Form;
154 changes: 87 additions & 67 deletions monitoring/ingest_inspector/frontend/src/app/components/Ingest.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,112 @@
import {IngestData} from "../types";
import { IngestData } from "../types";
import IngestEventItem from "@/app/components/IngestEventItem";
import IngestFormattedDateItem from "@/app/components/IngestFormattedDateItem";
import IngestTags from "@/app/components/IngestTags";

const STAGING_PRIMARY_BUCKET = "wellcomecollection-storage-staging";
const STAGING_GLACIER_BUCKET =
"wellcomecollection-storage-staging-replica-ireland";
"wellcomecollection-storage-staging-replica-ireland";
const PRODUCTION_PRIMARY_BUCKET = "wellcomecollection-storage";
const PRODUCTION_GLACIER_BUCKET = "wellcomecollection-storage-replica-ireland";

const getS3Url = (bucket: string, path: string) => {
return `https://s3.console.aws.amazon.com/s3/buckets/${bucket}/${path}/?region=eu-west-1&tab=overview`
}
return `https://s3.console.aws.amazon.com/s3/buckets/${bucket}/${path}/?region=eu-west-1&tab=overview`;
};

type IngestProps = {
ingestData: IngestData;
ingestData: IngestData;
};

const Ingest = ({ingestData}: IngestProps) => {
const glacierBucket =
ingestData.environment === "production"
? PRODUCTION_GLACIER_BUCKET
: STAGING_GLACIER_BUCKET;
const primaryBucket =
ingestData.environment === "production"
? PRODUCTION_PRIMARY_BUCKET
: STAGING_PRIMARY_BUCKET;
const Ingest = ({ ingestData }: IngestProps) => {
const { environment } = ingestData;
const glacierBucket =
environment === "production"
? PRODUCTION_GLACIER_BUCKET
: STAGING_GLACIER_BUCKET;
const primaryBucket =
environment === "production"
? PRODUCTION_PRIMARY_BUCKET
: STAGING_PRIMARY_BUCKET;

const status = ingestData.status.id;
const version = ingestData.bag.info.version;
const space = ingestData.space.id;
const path = `${space}/${ingestData.bag.info.externalIdentifier}/${ingestData.bag.info.version}`;
const callbackStatus = ingestData.callback?.status.id;

const status = ingestData.status.id;
const version = ingestData.bag.info.version;
const space = ingestData.space.id;
const path = `${space}/${ingestData.bag.info.externalIdentifier}/${ingestData.bag.info.version}`;
const callbackStatus = ingestData.callback?.status.id;
return (
<div className="mt-3 bg-[#EDECE3] p-4 sm:p-8">
<IngestTags ingestData={ingestData} />
<h2 className="text-3xl font-medium mt-2 mb-4">{ingestData.id}</h2>
<dl className="ingest-data">
<dt>Source location:</dt>
<dd>
<a
className="status-color"
href={ingestData.s3Url}
target="_blank"
rel="noreferrer"
>
{ingestData.displayS3Url}
</a>
</dd>

return (
<div className="mt-3 bg-[#EDECE3] p-4 sm:p-8 card">
<IngestTags ingestData={ingestData}/>
<h2 className="text-3xl font-medium mt-2 mb-4">{ingestData.id}</h2>
<dl className="ingest-data">
<dt>Source location:</dt>
<dd>
<a className="status-color" href={ingestData.s3Url} target="_blank" rel="noreferrer">{ingestData.displayS3Url}</a>
</dd>
<dt>Storage space:</dt>
<dd>{space}</dd>

<dt>Storage space:</dt>
<dd>{space}</dd>
<dt>External identifier:</dt>
<dd>{ingestData.bag.info.externalIdentifier}</dd>

<dt>External identifier:</dt>
<dd>{ingestData.bag.info.externalIdentifier}</dd>
<dt>Version:</dt>
<dd>{version || "-"}</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>
<dd>
<a className="status-color" href={getS3Url(primaryBucket, path)}>
s3://{primaryBucket}/{path}
</a>
<br />
<a className="status-color" href={getS3Url(glacierBucket, path)}>
s3://{glacierBucket}/{path}
</a>
</dd>
</>
)}

{/*If the ingest succeeded, we can link to the bag in S3.*/}
{status === "succeeded" && (
<>
<dt>Bag locations:</dt>
<dd>
<a className="status-color" href={getS3Url(primaryBucket, path)}>s3://{primaryBucket}/{path}</a>
<br/>
<a className="status-color" href={getS3Url(glacierBucket, path)}>s3://{glacierBucket}/{path}</a>
</dd>
</>
)}
<IngestFormattedDateItem
label="Created:"
date={ingestData.createdDate}
includeDelta={false}
/>
<IngestFormattedDateItem
label="Last updated:"
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:</dt>
<dd className={`callback--${callbackStatus}`}>
{callbackStatus === "processing" ? "pending" : callbackStatus}
</dd>
</>
)}

{callbackStatus && (
<>
<dt className={`callback--${callbackStatus}`}>
Callback status:
</dt>
<dd className={`callback--${callbackStatus}`}>
{callbackStatus === "processing" ? "pending" : callbackStatus}
</dd>
</>
)}
<dt>Events:</dt>
<dd>
<ul>
{ingestData.events.map((event) => (
<IngestEventItem key={event.createdDate} event={event}/>))}
</ul>
</dd>
</dl>
</div>
);
<dt>Events:</dt>
<dd>
<ul>
{ingestData.events.map((event, i) => (
<IngestEventItem key={i} event={event} />
))}
</ul>
</dd>
</dl>
</div>
);
};

export default Ingest;
35 changes: 35 additions & 0 deletions monitoring/ingest_inspector/frontend/src/app/components/IngestError.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { APIErrors } from "@/app/hooks/useGetIngest";

const KIBANA_ERROR_URL =
"https://logging.wellcomecollection.org/app/kibana#/discover?_g=()&_a=(columns:!(log),index:'6db79190-8556-11ea-8b79-41cfdb8d9024',interval:auto,query:(language:kuery,query:'service_name%20:%20%22*-ingests-service%22'),sort:!(!('@timestamp',desc)))";

type IngestErrorProps = {
ingestId: string;
error: Error;
};

const IngestError = ({ ingestId, error }: IngestErrorProps) => {
return (
<div className="mt-12">
{error.message === APIErrors.INVALID_INGEST_ID && (
<h3 className="text-2xl">
The ingest ID <strong>{ingestId}</strong> is not valid.
</h3>
)}
{error.message === APIErrors.INGEST_NOT_FOUND && (
<h3 className="text-2xl">
Could not find ingest <strong>{ingestId}</strong>.
</h3>
)}
<p className="mt-4 text-lg">
Developers can{" "}
<a href={KIBANA_ERROR_URL} target="_blank" rel="noreferrer">
look at API logs
</a>{" "}
in Kibana.
</p>
</div>
);
};

export default IngestError;
Loading

0 comments on commit 6775552

Please sign in to comment.