Duration and size tags

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;

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>

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}
+    </>
+  );
+}

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}
+    </>
+  );
+}