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/package.json | 2 + ui/pnpm-lock.yaml | 25 ++++++ 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 - ui/src/pages/Dotfiles.tsx | 10 +-- ui/src/pages/History.tsx | 1 - ui/src/state/models.ts | 68 +++++++++++++++-- 11 files changed, 285 insertions(+), 85 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') diff --git a/ui/package.json b/ui/package.json index 98163f01..a6228c12 100644 --- a/ui/package.json +++ b/ui/package.json @@ -26,6 +26,8 @@ "highlight.js": "^11.9.0", "lucide-react": "^0.367.0", "luxon": "^3.4.4", + "prism-react-renderer": "^2.3.1", + "prismjs": "^1.29.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-spinners": "^0.13.8", diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml index b777dd5f..d74361fb 100644 --- a/ui/pnpm-lock.yaml +++ b/ui/pnpm-lock.yaml @@ -53,6 +53,12 @@ dependencies: luxon: specifier: ^3.4.4 version: 3.4.4 + prism-react-renderer: + specifier: ^2.3.1 + version: 2.3.1(react@18.2.0) + prismjs: + specifier: ^1.29.0 + version: 1.29.0 react: specifier: ^18.2.0 version: 18.2.0 @@ -1530,6 +1536,10 @@ packages: resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} dev: true + /@types/prismjs@1.26.4: + resolution: {integrity: sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==} + dev: false + /@types/prop-types@15.7.12: resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} @@ -2289,6 +2299,21 @@ packages: picocolors: 1.0.0 source-map-js: 1.2.0 + /prism-react-renderer@2.3.1(react@18.2.0): + resolution: {integrity: sha512-Rdf+HzBLR7KYjzpJ1rSoxT9ioO85nZngQEoFIhL07XhtJHlCU3SOz0GJ6+qvMyQe0Se+BV3qpe6Yd/NmQF5Juw==} + peerDependencies: + react: '>=16.0.0' + dependencies: + '@types/prismjs': 1.26.4 + clsx: 2.1.0 + react: 18.2.0 + dev: false + + /prismjs@1.29.0: + resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==} + engines: {node: '>=6'} + dev: false + /prop-types@15.8.1: resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} dependencies: 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(); diff --git a/ui/src/pages/Dotfiles.tsx b/ui/src/pages/Dotfiles.tsx index 29b6b54a..43ecfa2a 100644 --- a/ui/src/pages/Dotfiles.tsx +++ b/ui/src/pages/Dotfiles.tsx @@ -5,7 +5,7 @@ import Vars from "@/components/dotfiles/Vars"; enum Section { Aliases, Vars, - Scripts, + Snippets, } function renderDotfiles(current: Section) { @@ -14,7 +14,7 @@ function renderDotfiles(current: Section) { return ; case Section.Vars: return ; - case Section.Scripts: + case Section.Snippets: return
    ; } } @@ -60,9 +60,9 @@ function Tabs({ current, setCurrent }: TabsProps) { section: Section.Vars, }, { - name: "Scripts", - isCurrent: () => current === Section.Scripts, - section: Section.Scripts, + name: "Snippets", + isCurrent: () => current === Section.Snippets, + section: Section.Snippets, }, ]; diff --git a/ui/src/pages/History.tsx b/ui/src/pages/History.tsx index 6eaa6f67..34ad93c2 100644 --- a/ui/src/pages/History.tsx +++ b/ui/src/pages/History.tsx @@ -5,7 +5,6 @@ import HistoryList from "@/components/HistoryList.tsx"; import HistorySearch from "@/components/HistorySearch.tsx"; import Stats from "@/components/history/Stats.tsx"; import Drawer from "@/components/Drawer.tsx"; -import InfiniteHistory from "@/components/InfiniteHistory.tsx"; import { useStore } from "@/state/store"; diff --git a/ui/src/state/models.ts b/ui/src/state/models.ts index 5aca83a0..b92d64a6 100644 --- a/ui/src/state/models.ts +++ b/ui/src/state/models.ts @@ -28,23 +28,29 @@ export class ShellHistory { host: string; cwd: string; duration: number; + exit: number; + /// Pass a row straight from the database to this constructor( id: string, timestamp: number, command: string, - user: string, - host: string, + hostuser: string, cwd: string, duration: number, + exit: number, ) { this.id = id; this.timestamp = timestamp; this.command = command; + + let [host, user] = hostuser.split(":"); this.user = user; this.host = host; + this.cwd = cwd; this.duration = duration; + this.exit = exit; } } @@ -59,12 +65,64 @@ export interface Var { export: boolean; } -export async function inspectHistory(id: string): Promise { +export interface InspectHistory { + other: ShellHistory[]; +} + +export async function inspectCommandHistory( + h: ShellHistory, +): Promise { const db = await Database.load( "sqlite:/Users/ellie/.local/share/atuin/history.db", ); - let res = await db.select("select * from history where id=$1", [id]); + let other: any[] = await db.select( + "select * from history where command=?1 order by timestamp desc", + [h.command], + ); + console.log(other); + + return { + other: other.map( + (i) => + new ShellHistory( + i.id, + i.timestamp, + i.command, + i.hostname, + i.cwd, + i.duration, + i.exit, + ), + ), + }; +} + +export async function inspectDirectoryHistory( + h: ShellHistory, +): Promise { + const db = await Database.load( + "sqlite:/Users/ellie/.local/share/atuin/history.db", + ); + + let other: any[] = await db.select( + "select * from history where cwd=?1 order by timestamp desc", + [h.cwd], + ); + console.log(other); - return res; + return { + other: other.map( + (i) => + new ShellHistory( + i.id, + i.timestamp, + i.command, + i.hostname, + i.cwd, + i.duration, + i.exit, + ), + ), + }; } -- cgit v1.3.1