From 34265613b80d1d2249d276da5fcd5e4c274af357 Mon Sep 17 00:00:00 2001 From: Ellie Huxtable Date: Tue, 14 May 2024 12:16:04 +0700 Subject: 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 --- ui/src/components/CodeBlock.tsx | 35 +++++++++ ui/src/components/HistoryList.tsx | 74 +----------------- ui/src/components/HistorySearch.tsx | 3 +- ui/src/components/history/HistoryInspect.tsx | 40 ++++++++++ ui/src/components/history/HistoryRow.tsx | 110 +++++++++++++++++++++++++++ ui/src/components/history/Stats.tsx | 2 - 6 files changed, 190 insertions(+), 74 deletions(-) create mode 100644 ui/src/components/CodeBlock.tsx create mode 100644 ui/src/components/history/HistoryInspect.tsx create mode 100644 ui/src/components/history/HistoryRow.tsx (limited to 'ui/src/components') diff --git a/ui/src/components/CodeBlock.tsx b/ui/src/components/CodeBlock.tsx new file mode 100644 index 00000000..a4c34784 --- /dev/null +++ b/ui/src/components/CodeBlock.tsx @@ -0,0 +1,35 @@ +import { Highlight, themes } from "prism-react-renderer"; +import Prism from "prismjs"; +import "prismjs/components/prism-bash"; + +export default function CodeBlock({ code, language }: any) { + return ( +
+ + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + 
+            {tokens.map((line, i) => (
+              

+                {i == 0 && (
+                  $ 
+                )}
+                {line.map((token, key) => (
+                  
+                ))}
+              

+            ))}
+
+ )} + +
+ ); +} diff --git a/ui/src/components/HistoryList.tsx b/ui/src/components/HistoryList.tsx index 7cdeacd8..09456c3e 100644 --- a/ui/src/components/HistoryList.tsx +++ b/ui/src/components/HistoryList.tsx @@ -1,22 +1,5 @@ import { useRef } from "react"; -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"; -} +import HistoryRow from "./history/HistoryRow"; export default function HistoryList(props: any) { return ( @@ -32,9 +15,7 @@ export default function HistoryList(props: any) { let h = props.history[i.index]; return ( -
  • -
    -
    -

    - {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString( - DateTime.TIME_WITH_SECONDS, - )} -

    -

    - {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString( - DateTime.DATE_SHORT, - )} -

    -
    -
    - 
    -                  {h.command}
-
    -

    - {h.user} - -  on  - - {h.host} - -  in  - - {h.cwd} -

    -
    -
    -
    -
    -

    {h.exit}

    - {h.duration ? ( -

    - -

    - ) : ( -
    - )} -
    -
    -
    • + + ); })} diff --git a/ui/src/components/HistorySearch.tsx b/ui/src/components/HistorySearch.tsx index b3c8492a..046a2a07 100644 --- a/ui/src/components/HistorySearch.tsx +++ b/ui/src/components/HistorySearch.tsx @@ -26,7 +26,7 @@ export default function HistorySearch(props: HistorySearchProps) { /> { props.setQuery(query.target.value); - props.refresh(); }} /> 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 ( +
    + +
    + ); +} + +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 ( +
    + + +
    + {other.map((i: any) => { + return ; + })} +
    +
    + ); +} 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 ( +
  • +
    +
    +

    + {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString( + DateTime.TIME_WITH_SECONDS, + )} +

    +

    + {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString( + DateTime.DATE_SHORT, + )} +

    +
    +
    + + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + 
    +                {tokens &&
+                  tokens.map((line, i) => {
+                    if (i != 0) return;
+                    return (
+                      
    
+                        {line.map((token, key) => (
+                          
+                        ))}
+                      
    
+                    );
+                  })}
+
    + )} +     +

    + {h.user} + +  on  + + {h.host} + +  in  + + {h.cwd} +

    +
    +
    +
    +
    +

    {h.exit}

    + {h.duration ? ( +

    + +

    + ) : ( +
    + )} +
    + + +
    +
    • + ); +} 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 (
    @@ -111,7 +110,6 @@ export default function Stats() { console.log(e); }); }, []); - console.log(top); if (stats.length == 0) { return renderLoading(); -- cgit v1.3.1