1 files changed, 75 insertions, 0 deletions
diff --git a/ui/src/components/HistoryList.tsx b/ui/src/components/HistoryList.tsx
new file mode 100644
index 00000000..b31a4be4
--- /dev/null
+++ b/ui/src/components/HistoryList.tsx
@@ -0,0 +1,75 @@
+import { DateTime } from 'luxon';
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+
+function msToTime(ms) {
+  let milliseconds = (ms).toFixed(1);
+  let seconds = (ms / 1000).toFixed(1);
+  let minutes = (ms / (1000 * 60)).toFixed(1);
+  let hours = (ms / (1000 * 60 * 60)).toFixed(1);
+  let days = (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 HistoryList(props){
+  return (
+
+            <ul
+              role="list"
+              className="divide-y divide-gray-100 overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5"
+            >
+              {props.history.map((h) => (
+                <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">
+                      <pre className="whitespace-pre-wrap"><code className="text-sm">{h.command}</code></pre>
+                      <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 className="mt-1 flex items-center gap-x-1.5">
+                          <div className="flex-none rounded-full bg-emerald-500/20 p-1">
+                            <div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                          </div>
+                          <p className="text-xs leading-5 text-gray-500">Online</p>
+                        </div>
+                      )}
+                    </div>
+                    <ChevronRightIcon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
+                  </div>
+                </li>
+              ))}
+            </ul>
+  );
+}