ui/src/components/HistoryList.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

import { ChevronRightIcon } from "@heroicons/react/20/solid";

// @ts-ignore
import { DateTime } from "luxon";

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 HistoryList(props: any) {
  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: any) => (
        <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>
  );
}