diff options
Diffstat (limited to 'ui/src/components')
| -rw-r--r-- | ui/src/components/CodeBlock.tsx | 35 | ||||
| -rw-r--r-- | ui/src/components/HistoryList.tsx | 74 | ||||
| -rw-r--r-- | ui/src/components/HistorySearch.tsx | 3 | ||||
| -rw-r--r-- | ui/src/components/history/HistoryInspect.tsx | 40 | ||||
| -rw-r--r-- | ui/src/components/history/HistoryRow.tsx | 110 | ||||
| -rw-r--r-- | ui/src/components/history/Stats.tsx | 2 |
6 files changed, 190 insertions, 74 deletions
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 ( + <div className="overflow-auto"> + <Highlight + theme={themes.github} + code={code} + prism={Prism} + language={language} + > + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + <pre style={style} className="p-4 break-words whitespace-pre-wrap"> + {tokens.map((line, i) => ( + <div key={i} {...getLineProps({ line })} data-vaul-no-drag> + {i == 0 && ( + <span className="text-gray-500 select-none">$ </span> + )} + {line.map((token, key) => ( + <span + key={key} + {...getTokenProps({ token })} + data-vaul-no-drag + /> + ))} + </div> + ))} + </pre> + )} + </Highlight> + </div> + ); +} 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 ( - <li - key={h.id} - className="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6" + <div style={{ position: "absolute", top: 0, @@ -44,55 +25,8 @@ export default function HistoryList(props: any) { transform: `translateY(${i.start}px)`, }} > - <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> on </span> - - <span className="relative truncate ">{h.host}</span> - - <span> in </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> - <ChevronRightIcon - className="h-5 w-5 flex-none text-gray-400" - aria-hidden="true" - /> - </div> - </li> + <HistoryRow h={h} /> + </div> ); })} </div> 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) { /> <input id="search-field" - className="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm" + className="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm outline-none" placeholder="Search..." autoComplete="off" autoCapitalize="off" @@ -36,7 +36,6 @@ export default function HistorySearch(props: HistorySearchProps) { name="search" onChange={(query) => { props.setQuery(query.target.value); - props.refresh(); }} /> </form> 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> on </span> + + <span className="relative truncate ">{h.host}</span> + + <span> in </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(); |