feat(ui): add history explore (#2022)

* break out HistoryRow, add drawer

* syntax highlighting!

* smaller text

* allow inspecting all old commands, no drag command

* fix query bug

* add loader

3 files changed, 150 insertions, 2 deletions

diff --git a/ui/src/components/history/HistoryInspect.tsx b/ui/src/components/history/HistoryInspect.tsx
new file mode 100644
index 00000000..8e820169
--- /dev/null
+++ b/ui/src/components/history/HistoryInspect.tsx
@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react";
+
+import PacmanLoader from "react-spinners/PacmanLoader";
+
+import CodeBlock from "@/components/CodeBlock";
+import HistoryRow from "@/components/history/HistoryRow";
+import { inspectCommandHistory } from "@/state/models";
+
+function renderLoading() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <PacmanLoader color="#26bd65" />
+    </div>
+  );
+}
+
+export default function HistoryInspect({ history }: any) {
+  let [other, setOther] = useState([]);
+
+  useEffect(() => {
+    (async () => {
+      let inspect = await inspectCommandHistory(history);
+      setOther(inspect.other);
+    })();
+  }, []);
+
+  if (other.length == 0) return renderLoading();
+
+  return (
+    <div className="overflow-y-auto">
+      <CodeBlock code={history.command} language="bash" />
+
+      <div>
+        {other.map((i: any) => {
+          return <HistoryRow h={i} />;
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/components/history/HistoryRow.tsx b/ui/src/components/history/HistoryRow.tsx
new file mode 100644
index 00000000..ef76d000
--- /dev/null
+++ b/ui/src/components/history/HistoryRow.tsx
@@ -0,0 +1,110 @@
+// @ts-ignore
+import { DateTime } from "luxon";
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
+import { Highlight, themes } from "prism-react-renderer";
+
+import Prism from "prismjs";
+import "prismjs/components/prism-bash";
+
+import Drawer from "../Drawer";
+import HistoryInspect from "./HistoryInspect";
+
+function msToTime(ms: number) {
+  let milliseconds = parseInt(ms.toFixed(1));
+  let seconds = parseInt((ms / 1000).toFixed(1));
+  let minutes = parseInt((ms / (1000 * 60)).toFixed(1));
+  let hours = parseInt((ms / (1000 * 60 * 60)).toFixed(1));
+  let days = parseInt((ms / (1000 * 60 * 60 * 24)).toFixed(1));
+
+  if (milliseconds < 1000) return milliseconds + "ms";
+  else if (seconds < 60) return seconds + "s";
+  else if (minutes < 60) return minutes + "m";
+  else if (hours < 24) return hours + "hr";
+  else return days + " Days";
+}
+
+export default function HistoryRow({ h }: any) {
+  return (
+    <li
+      key={h.id}
+      className="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6"
+    >
+      <div className="flex min-w-0 gap-x-4">
+        <div className="flex flex-col justify-center">
+          <p className="flex text-xs text-gray-500 justify-center">
+            {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString(
+              DateTime.TIME_WITH_SECONDS,
+            )}
+          </p>
+          <p className="flex text-xs mt-1 text-gray-400 justify-center">
+            {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString(
+              DateTime.DATE_SHORT,
+            )}
+          </p>
+        </div>
+        <div className="min-w-0 flex-col justify-center truncate">
+          <Highlight
+            theme={themes.github}
+            code={h.command}
+            language="bash"
+            prism={Prism}
+          >
+            {({ className, style, tokens, getLineProps, getTokenProps }) => (
+              <pre style={style} className="!bg-inherit text-sm">
+                {tokens &&
+                  tokens.map((line, i) => {
+                    if (i != 0) return;
+                    return (
+                      <div key={i} {...getLineProps({ line })}>
+                        {line.map((token, key) => (
+                          <span key={key} {...getTokenProps({ token })} />
+                        ))}
+                      </div>
+                    );
+                  })}
+              </pre>
+            )}
+          </Highlight>
+          <p className="mt-1 flex text-xs leading-5 text-gray-500">
+            <span className="relative truncate ">{h.user}</span>
+
+            <span>&nbsp;on&nbsp;</span>
+
+            <span className="relative truncate ">{h.host}</span>
+
+            <span>&nbsp;in&nbsp;</span>
+
+            <span className="relative truncate ">{h.cwd}</span>
+          </p>
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-x-4">
+        <div className="hidden sm:flex sm:flex-col sm:items-end">
+          <p className="text-sm leading-6 text-gray-900">{h.exit}</p>
+          {h.duration ? (
+            <p className="mt-1 text-xs leading-5 text-gray-500">
+              <time dateTime={h.duration}>
+                {msToTime(h.duration / 1000000)}
+              </time>
+            </p>
+          ) : (
+            <div />
+          )}
+        </div>
+        <Drawer
+          width="60%"
+          trigger={
+            <button type="button">
+              <ChevronRightIcon
+                className="h-5 w-5 flex-none text-gray-400"
+                aria-hidden="true"
+              />
+            </button>
+          }
+        >
+          <HistoryInspect history={h} />
+        </Drawer>
+      </div>
+    </li>
+  );
+}
diff --git a/ui/src/components/history/Stats.tsx b/ui/src/components/history/Stats.tsx
index bc4e5c33..df25d930 100644
--- a/ui/src/components/history/Stats.tsx
+++ b/ui/src/components/history/Stats.tsx
@@ -20,7 +20,6 @@ function renderLoading() {
 }
 
 function TopTable({ stats }: any) {
-  console.log(stats);
   return (
     <div className="px-4 sm:px-6 lg:px-8">
       <div className="flex items-center">
@@ -111,7 +110,6 @@ export default function Stats() {
         console.log(e);
       });
   }, []);
-  console.log(top);
 
   if (stats.length == 0) {
     return renderLoading();