Bug fix download files

website/src/page/translation/historyTable.tsx

@@ -24,6 +24,7 @@ import { amplifyConfigureAppend } from "../../util/amplifyConfigure";
 import { formatJobNameId } from "../../util/formatJobNameId";
 import { formatTimestamp } from "../../util/formatTimestamp";
 import { getPresignedUrl } from "../../util/getPresignedUrl";
+import { formatEstimatedCompletion } from "../../util/formatEstimatedCompletion";
 import { describeS3Key } from "./util/describeS3Key";
 
 const cfnOutputs = require("../../cfnOutputs.json");
@@ -132,6 +133,9 @@ export default function HistoryTable() {
 		try {
 			const keys = JSON.parse(stringKeys);
 
+			// Immediately open all windows to avoid popup blockers
+			const windows = keys.map(() => window.open('', '_blank', 'noopener,noreferrer'));
+
 			for (var i in keys) {
 				const k = describeS3Key({
 					key: keys[i],
@@ -140,7 +144,9 @@ export default function HistoryTable() {
 					path: `${k.scope}/${k.identity}/${k.jobId}/${k.stage}/${k.translateId}/${k.filename}`,
 					bucketKey: "awsUserFilesS3Bucket",
 				});
-				window.open(presignedUrl, "_blank", "noopener,noreferrer");
+
+				const newWindow = windows[i];
+				newWindow.location.href = presignedUrl;
 			}
 		} catch (err) {
 			console.log("error: ", err);
@@ -161,6 +167,11 @@ export default function HistoryTable() {
 					header: t("generic_created"),
 					cell: (item: Item) => formatTimestamp(item.createdAt),
 				},
+				{
+					id: "estimatedCompletion",
+					header: "Estimated Completion",
+					cell: (item: Item) => formatEstimatedCompletion(item.createdAt, item.jobStatus),
+				},
 				{
 					id: "source",
 					header: t("generic_source"),

website/src/util/formatEstimatedCompletion.test.tsx

@@ -0,0 +1,37 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { formatEstimatedCompletion } from "./formatEstimatedCompletion";
+
+const minute = 60;
+
+describe("formatTimestamp", () => {
+
+    test("calculates estimated completion correctly", () => {
+        const currentTimeInSeconds = Math.floor(Date.now() / 1000);
+        const fiveMinutesAgoInSeconds = currentTimeInSeconds - 5 * minute;
+
+        const element = formatEstimatedCompletion(fiveMinutesAgoInSeconds, "processing");
+        const htmlString = renderToStaticMarkup(element);
+
+        expect(htmlString).toContain("15 minutes");
+    });
+
+    test("calculates estimated completion correctly for single minute", () => {
+        const currentTimeInSeconds = Math.floor(Date.now() / 1000);
+        const nineteenMinutesAgo = currentTimeInSeconds - 19 * minute;
+
+        const element = formatEstimatedCompletion(nineteenMinutesAgo, "uploaded");
+        const htmlString = renderToStaticMarkup(element);
+
+        expect(htmlString).toContain("1 minute");
+    });
+
+    test("returns empty string for completed job", () => {
+        const currentTimeInSeconds = Math.floor(Date.now() / 1000);
+        const fiveMinutesAgoInSeconds = currentTimeInSeconds - 19 * minute;
+
+        const element = formatEstimatedCompletion(fiveMinutesAgoInSeconds, "COMPLETED");
+        const htmlString = renderToStaticMarkup(element);
+
+        expect(htmlString).toEqual("");
+    });
+});

website/src/util/formatEstimatedCompletion.tsx

@@ -0,0 +1,36 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: MIT-0
+import React from "react";
+
+function detiledTimestamp(unixSeconds: number) {
+	const unixMilliseconds = unixSeconds * 1000;
+	const timestamp = new Date(unixMilliseconds);
+	return timestamp.toLocaleString();
+}
+
+export function formatEstimatedCompletion(unixSeconds: number, jobStatus: string) {
+	const jobOngoingStatuses = ["UPLOADED", "PROCESSING"]
+	if (!jobOngoingStatuses.includes(jobStatus.toUpperCase())) {
+		return ""
+	}
+
+	const estimatedLengthOfJobMins = 20
+	const timestamp = new Date((unixSeconds + estimatedLengthOfJobMins * 60) * 1000);
+	const now = new Date();
+
+	const diff =  timestamp.getTime() - now.getTime();
+	const diffMinutes = Math.round(diff / (1000 * 60));
+
+	if (diffMinutes > 0) {
+		return (
+			<span title={detiledTimestamp(unixSeconds)}>
+				{diffMinutes} minute{diffMinutes > 1 ? "s" : ""}
+			</span>
+		);
+	}
+	return (
+		<span title={detiledTimestamp(unixSeconds)}>
+			Now
+		</span>
+	);
+}