Display emulation execution time

page/src/components/emulation-summary.tsx

@@ -1,9 +1,16 @@
 import { EmulationStatus } from "@/emulator";
 import { TextTooltip } from "./text-tooltip";
-import { BarChartSteps, CpuFill, FloppyFill } from "react-bootstrap-icons";
+import {
+  BarChartSteps,
+  CpuFill,
+  FloppyFill,
+  StopwatchFill,
+} from "react-bootstrap-icons";
+import React from "react";
 
 export interface EmulationSummaryProps {
   status?: EmulationStatus;
+  executionTimeFetcher: () => number;
 }
 
 function formatMemory(value: BigInt): string {
@@ -20,27 +27,75 @@ function formatMemory(value: BigInt): string {
   return num.toFixed(2) + " " + abbr[index];
 }
 
-export function EmulationSummary(props: EmulationSummaryProps) {
-  if (!props.status) {
-    return <></>;
+function formatTime(seconds: number): string {
+  const hrs = Math.floor(seconds / 3600);
+  const mins = Math.floor((seconds % 3600) / 60);
+  const secs = Math.floor(seconds % 60);
+
+  const secsString = secs < 10 ? "0" + secs : secs.toString();
+
+  if (hrs > 0) {
+    const minsString = mins < 10 ? "0" + mins : mins.toString();
+    return `${hrs.toString()}:${minsString}:${secsString}`;
   }
 
-  return (
-    <div className="emulation-summary terminal-glass items-center absolute z-49 right-0 m-6 rounded-xl min-w-[150px] p-3 text-white cursor-default font-medium text-right text-sm whitespace-nowrap leading-6 font-mono">
-      <TextTooltip tooltip={"Active threads"}>
-        {props.status.activeThreads}
-        <BarChartSteps className="inline ml-3" />
-      </TextTooltip>
-      <br />
-      <TextTooltip tooltip={"Application memory"}>
-        {formatMemory(props.status.committedMemory)}
-        <FloppyFill className="inline ml-3" />
-      </TextTooltip>
-      <br />
-      <TextTooltip tooltip={"Executed instructions"}>
-        {props.status.executedInstructions.toLocaleString()}
-        <CpuFill className="inline ml-3" />
-      </TextTooltip>
-    </div>
-  );
+  return `${mins.toString()}:${secsString}`;
+}
+
+export class EmulationSummary extends React.Component<
+  EmulationSummaryProps,
+  {}
+> {
+  private timer: NodeJS.Timeout | undefined = undefined;
+
+  constructor(props: EmulationSummaryProps) {
+    super(props);
+  }
+
+  componentDidMount(): void {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+
+    this.timer = setInterval(() => {
+      this.forceUpdate();
+    }, 200);
+  }
+
+  componentWillUnmount(): void {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = undefined;
+    }
+  }
+
+  render() {
+    if (!this.props.status) {
+      return <></>;
+    }
+
+    return (
+      <div className="emulation-summary terminal-glass items-center absolute z-49 right-0 m-6 rounded-xl min-w-[150px] p-3 text-white cursor-default font-medium text-right text-sm whitespace-nowrap leading-6 font-mono">
+        <TextTooltip tooltip={"Active Threads"}>
+          {this.props.status.activeThreads}
+          <BarChartSteps className="inline ml-3" />
+        </TextTooltip>
+        <br />
+        <TextTooltip tooltip={"Application Memory"}>
+          {formatMemory(this.props.status.committedMemory)}
+          <FloppyFill className="inline ml-3" />
+        </TextTooltip>
+        <br />
+        <TextTooltip tooltip={"Executed Instructions"}>
+          {this.props.status.executedInstructions.toLocaleString()}
+          <CpuFill className="inline ml-3" />
+        </TextTooltip>
+        <br />
+        <TextTooltip tooltip={"Execution Time"}>
+          {formatTime(this.props.executionTimeFetcher() / 1000)}
+          <StopwatchFill className="inline ml-3" />
+        </TextTooltip>
+      </div>
+    );
+  }
 }