From a22154e8ce4ea72105d034c0a72f92a3882a309c Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 13 Apr 2023 20:50:17 -0700
Subject: [PATCH] Duration and size tags

---
 index.html                              |  2 +-
 src-web/components/ResponsePane.tsx     |  8 ++++---
 src-web/components/core/DurationTag.tsx | 25 ++++++++++++++++++++++
 src-web/components/core/SizeTag.tsx     | 28 +++++++++++++++++++++++++
 4 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 src-web/components/core/DurationTag.tsx
 create mode 100644 src-web/components/core/SizeTag.tsx

diff --git a/index.html b/index.html
index 72141867..a50c3894 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Yaak App</title>
-  <script src="http://localhost:8097"></script>
+<!--  <script src="http://localhost:8097"></script>-->
   <style>
       body {
           background-color: white;
diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index 33bca803..b303bb62 100644
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -14,8 +14,10 @@ import { pluralize } from '../lib/pluralize';
 import { Banner } from './core/Banner';
 import { CountBadge } from './core/CountBadge';
 import { Dropdown } from './core/Dropdown';
+import { DurationTag } from './core/DurationTag';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
+import { SizeTag } from './core/SizeTag';
 import { HStack } from './core/Stacks';
 import { StatusTag } from './core/StatusTag';
 import type { TabItem } from './core/Tabs/Tabs';
@@ -108,13 +110,13 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                     {activeResponse.elapsed > 0 && (
                       <>
                         <span>&bull;</span>
-                        <span>{activeResponse.elapsed}ms</span>
+                        <DurationTag millis={activeResponse.elapsed} />
                       </>
                     )}
-                    {activeResponse.contentLength && (
+                    {!!activeResponse.contentLength && (
                       <>
                         <span>&bull;</span>
-                        <span>{(activeResponse.contentLength / 1000).toFixed(1)} KB</span>
+                        <SizeTag contentLength={activeResponse.contentLength} />
                       </>
                     )}
                   </HStack>
diff --git a/src-web/components/core/DurationTag.tsx b/src-web/components/core/DurationTag.tsx
new file mode 100644
index 00000000..d4bb3964
--- /dev/null
+++ b/src-web/components/core/DurationTag.tsx
@@ -0,0 +1,25 @@
+interface Props {
+  millis: number;
+}
+
+export function DurationTag({ millis }: Props) {
+  let num;
+  let unit;
+
+  if (millis > 1000 * 60) {
+    num = millis / 1000 / 60;
+    unit = 'min';
+  } else if (millis > 1000) {
+    num = millis / 1000;
+    unit = 's';
+  } else {
+    num = millis;
+    unit = 'ms';
+  }
+
+  return (
+    <>
+      {Math.round(num * 10) / 10} {unit}
+    </>
+  );
+}
diff --git a/src-web/components/core/SizeTag.tsx b/src-web/components/core/SizeTag.tsx
new file mode 100644
index 00000000..69f62340
--- /dev/null
+++ b/src-web/components/core/SizeTag.tsx
@@ -0,0 +1,28 @@
+interface Props {
+  contentLength: number;
+}
+
+export function SizeTag({ contentLength }: Props) {
+  let num;
+  let unit;
+
+  if (contentLength > 1000 * 1000 * 1000) {
+    num = contentLength / 1000 / 1000 / 1000;
+    unit = 'GB';
+  } else if (contentLength > 1000 * 1000) {
+    num = contentLength / 1000 / 1000;
+    unit = 'MB';
+  } else if (contentLength > 1000) {
+    num = contentLength / 1000;
+    unit = 'KB';
+  } else {
+    num = contentLength;
+    unit = 'B';
+  }
+
+  return (
+    <>
+      {Math.round(num * 10) / 10} {unit}
+    </>
+  );
+}