diff options
Diffstat (limited to 'ui/src')
| -rw-r--r-- | ui/src/App.css | 16 | ||||
| -rw-r--r-- | ui/src/components/HistoryList.tsx | 126 | ||||
| -rw-r--r-- | ui/src/components/HistorySearch.tsx | 12 | ||||
| -rw-r--r-- | ui/src/components/dotfiles/Aliases.tsx | 2 | ||||
| -rw-r--r-- | ui/src/components/history/Stats.tsx | 67 | ||||
| -rw-r--r-- | ui/src/global.d.ts | 1 | ||||
| -rw-r--r-- | ui/src/pages/History.tsx | 53 | ||||
| -rw-r--r-- | ui/src/state/models.ts | 34 | ||||
| -rw-r--r-- | ui/src/state/store.ts | 23 | ||||
| -rw-r--r-- | ui/src/styles.css | 94 |
10 files changed, 304 insertions, 124 deletions
diff --git a/ui/src/App.css b/ui/src/App.css index 5a32a1a5..cf6d3123 100644 --- a/ui/src/App.css +++ b/ui/src/App.css @@ -9,3 +9,19 @@ html { .logo.react:hover { filter: drop-shadow(0 0 2em #61dafb); } + +.history-header { + height: 150px; +} + +.history-search { + height: 64px; +} + +.history-list { + height: calc(100vh - 150px - 64px); +} + +.history-item { + height: 90px; +} diff --git a/ui/src/components/HistoryList.tsx b/ui/src/components/HistoryList.tsx index 9616ecf0..7cdeacd8 100644 --- a/ui/src/components/HistoryList.tsx +++ b/ui/src/components/HistoryList.tsx @@ -1,3 +1,4 @@ +import { useRef } from "react"; import { ChevronRightIcon } from "@heroicons/react/20/solid"; // @ts-ignore @@ -19,70 +20,81 @@ function msToTime(ms: number) { export default function HistoryList(props: any) { return ( - <ul + <div role="list" - className="divide-y divide-gray-100 overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5" + className="divide-y divide-gray-100 bg-white shadow-sm ring-1 ring-gray-900/5 overflow-auto" + style={{ + height: `${props.height}px`, + position: "relative", + }} > - {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> + {props.items.map((i: any) => { + let h = props.history[i.index]; - <span> on </span> + return ( + <li + key={h.id} + className="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6" + style={{ + position: "absolute", + top: 0, + left: 0, + width: "100%", + height: `${i.size}px`, + 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 className="relative truncate ">{h.host}</span> + <span> on </span> - <span> in </span> + <span className="relative truncate ">{h.host}</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> + <span> in </span> + + <span className="relative truncate ">{h.cwd}</span> </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> + </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> - <ChevronRightIcon - className="h-5 w-5 flex-none text-gray-400" - aria-hidden="true" - /> - </div> - </li> - ))} - </ul> + </li> + ); + })} + </div> ); } diff --git a/ui/src/components/HistorySearch.tsx b/ui/src/components/HistorySearch.tsx index 08bed2a8..b3c8492a 100644 --- a/ui/src/components/HistorySearch.tsx +++ b/ui/src/components/HistorySearch.tsx @@ -3,12 +3,12 @@ import { ArrowPathIcon } from "@heroicons/react/24/outline"; import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; interface HistorySearchProps { - refresh: (query: string) => void; + query: string; + refresh: () => void; + setQuery: (query: string) => void; } export default function HistorySearch(props: HistorySearchProps) { - let [searchQuery, setSearchQuery] = useState(""); - return ( <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6"> <form @@ -35,8 +35,8 @@ export default function HistorySearch(props: HistorySearchProps) { type="search" name="search" onChange={(query) => { - setSearchQuery(query.target.value); - props.refresh(query.target.value); + props.setQuery(query.target.value); + props.refresh(); }} /> </form> @@ -45,7 +45,7 @@ export default function HistorySearch(props: HistorySearchProps) { type="button" className="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500" onClick={() => { - props.refresh(searchQuery); + props.refresh(); }} > <ArrowPathIcon className="h-6 w-6" aria-hidden="true" /> diff --git a/ui/src/components/dotfiles/Aliases.tsx b/ui/src/components/dotfiles/Aliases.tsx index 61fd001c..9af3e994 100644 --- a/ui/src/components/dotfiles/Aliases.tsx +++ b/ui/src/components/dotfiles/Aliases.tsx @@ -16,7 +16,7 @@ import { ColumnDef } from "@tanstack/react-table"; import { invoke } from "@tauri-apps/api/core"; import Drawer from "@/components/Drawer"; -import { Alias } from "@/state/models"; +import { Alias, inspectHistory } from "@/state/models"; import { useStore } from "@/state/store"; function deleteAlias(name: string, refreshAliases: () => void) { diff --git a/ui/src/components/history/Stats.tsx b/ui/src/components/history/Stats.tsx index ce92ac04..bc4e5c33 100644 --- a/ui/src/components/history/Stats.tsx +++ b/ui/src/components/history/Stats.tsx @@ -19,12 +19,60 @@ 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"> + <div className="flex-auto"> + <h1 className="text-base font-semibold">Top commands</h1> + </div> + </div> + <div className="mt-4 flow-root"> + <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> + <div className="inline-block min-w-full py-2 align-middle"> + <table className="min-w-full divide-y divide-gray-300"> + <thead> + <tr> + <th + scope="col" + className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8" + > + Command + </th> + <th + scope="col" + className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" + > + Count + </th> + </tr> + </thead> + <tbody className="divide-y divide-gray-200 bg-white"> + {stats.map((stat) => ( + <tr> + <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8"> + {stat[0][0]} + </td> + <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> + {stat[1]} + </td> + </tr> + ))} + </tbody> + </table> + </div> + </div> + </div> + </div> + ); +} + export default function Stats() { const [stats, setStats]: any = useState([]); + const [top, setTop]: any = useState([]); const [chart, setChart]: any = useState([]); - console.log("Stats mounted"); - useEffect(() => { if (stats.length != 0) return; @@ -38,6 +86,10 @@ export default function Stats() { stat: s.total_history.toLocaleString(), }, { + name: "Unique history", + stat: s.stats.unique_commands.toLocaleString(), + }, + { name: "Last 1d", stat: s.last_1d.toLocaleString(), }, @@ -52,20 +104,23 @@ export default function Stats() { ]); setChart(s.daily); + + setTop(s.stats); }) .catch((e) => { console.log(e); }); }, []); + console.log(top); if (stats.length == 0) { return renderLoading(); } return ( - <div className="flex flex-col"> + <div className="flex flex-col overflow-y-scroll"> <div className="flexfull"> - <dl className="grid grid-cols-1 sm:grid-cols-4 w-full"> + <dl className="grid grid-cols-1 sm:grid-cols-5 w-full"> {stats.map((item: any) => ( <div key={item.name} @@ -94,6 +149,10 @@ export default function Stats() { </ResponsiveContainer> </div> </div> + + <div> + <TopTable stats={top.top} /> + </div> </div> ); } diff --git a/ui/src/global.d.ts b/ui/src/global.d.ts new file mode 100644 index 00000000..d97caa3a --- /dev/null +++ b/ui/src/global.d.ts @@ -0,0 +1 @@ +type Option<T> = T | null; diff --git a/ui/src/pages/History.tsx b/ui/src/pages/History.tsx index 91ed9824..6eaa6f67 100644 --- a/ui/src/pages/History.tsx +++ b/ui/src/pages/History.tsx @@ -1,11 +1,17 @@ -import { useEffect } from "react"; +import { useEffect, useState, useRef } from "react"; +import { useVirtualizer } from "@tanstack/react-virtual"; 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"; +import { inspectHistory, listHistory } from "@/state/models"; +import { invoke } from "@tauri-apps/api/core"; + function Header() { return ( <div className="md:flex md:items-center md:justify-between"> @@ -49,29 +55,64 @@ function Header() { export default function Search() { const history = useStore((state) => state.shellHistory); const refreshHistory = useStore((state) => state.refreshShellHistory); + const historyNextPage = useStore((state) => state.historyNextPage); + + let [query, setQuery] = useState(""); useEffect(() => { + (async () => { + // nothing rn + })(); + refreshHistory(); }, []); + const parentRef = useRef(); + + const rowVirtualizer = useVirtualizer({ + count: history.length, + getScrollElement: () => parentRef.current, + estimateSize: () => 90, + overscan: 5, + }); + + useEffect(() => { + const [lastItem] = rowVirtualizer.getVirtualItems().slice(-1); + + if (!lastItem) return; // no undefined plz + if (lastItem.index < history.length - 1) return; // if we're not at the end yet, bail + + // we're at the end! more rows plz! + historyNextPage(query); + }, [rowVirtualizer.getVirtualItems()]); + return ( <> <div className="pl-60"> - <div className="p-10"> + <div className="p-10 history-header"> <Header /> <p>A history of all the commands you run in your shell.</p> </div> - <div className="flex h-16 shrink-0 items-center gap-x-4 border-b border-t border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"> + <div className="flex h-16 shrink-0 items-center gap-x-4 border-b border-t border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8 history-search"> <HistorySearch - refresh={(query?: string) => { + query={query} + setQuery={(q) => { + setQuery(q); + refreshHistory(q); + }} + refresh={() => { refreshHistory(query); }} /> </div> - <main> - <HistoryList history={history} /> + <main className="overflow-y-scroll history-list" ref={parentRef}> + <HistoryList + history={history} + items={rowVirtualizer.getVirtualItems()} + height={rowVirtualizer.getTotalSize()} + /> </main> </div> </> diff --git a/ui/src/state/models.ts b/ui/src/state/models.ts index 5afcb804..5aca83a0 100644 --- a/ui/src/state/models.ts +++ b/ui/src/state/models.ts @@ -1,3 +1,5 @@ +import Database from "@tauri-apps/plugin-sql"; + export interface User { username: string; } @@ -18,7 +20,7 @@ export const DefaultHomeInfo: HomeInfo = { lastSyncTime: new Date(), }; -export interface ShellHistory { +export class ShellHistory { id: string; timestamp: number; command: string; @@ -26,6 +28,24 @@ export interface ShellHistory { host: string; cwd: string; duration: number; + + constructor( + id: string, + timestamp: number, + command: string, + user: string, + host: string, + cwd: string, + duration: number, + ) { + this.id = id; + this.timestamp = timestamp; + this.command = command; + this.user = user; + this.host = host; + this.cwd = cwd; + this.duration = duration; + } } export interface Alias { @@ -36,5 +56,15 @@ export interface Alias { export interface Var { name: string; value: string; - export: bool; + export: boolean; +} + +export async function inspectHistory(id: string): Promise<any> { + 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]); + + return res; } diff --git a/ui/src/state/store.ts b/ui/src/state/store.ts index 7e237d70..fef1b632 100644 --- a/ui/src/state/store.ts +++ b/ui/src/state/store.ts @@ -8,6 +8,7 @@ import { DefaultHomeInfo, Alias, ShellHistory, + Var, } from "./models"; import { invoke } from "@tauri-apps/api/core"; @@ -26,9 +27,10 @@ interface AtuinState { refreshAliases: () => void; refreshVars: () => void; refreshShellHistory: (query?: string) => void; + historyNextPage: (query?: string) => void; } -export const useStore = create<AtuinState>()((set) => ({ +export const useStore = create<AtuinState>()((set, get) => ({ user: DefaultUser, homeInfo: DefaultHomeInfo, aliases: [], @@ -78,4 +80,23 @@ export const useStore = create<AtuinState>()((set) => ({ console.log(e); }); }, + + historyNextPage: (query?: string) => { + let history = get().shellHistory; + let offset = history.length - 1; + + if (query) { + invoke("search", { query: query, offset: offset }) + .then((res: any) => { + set({ shellHistory: [...history, ...res] }); + }) + .catch((e) => { + console.log(e); + }); + } else { + invoke("list", { offset: offset }).then((res: any) => { + set({ shellHistory: [...history, ...res] }); + }); + } + }, })); diff --git a/ui/src/styles.css b/ui/src/styles.css index b0e6fff5..27e12ec6 100644 --- a/ui/src/styles.css +++ b/ui/src/styles.css @@ -1,76 +1,76 @@ @tailwind base; - @tailwind components; - @tailwind utilities; +@tailwind components; +@tailwind utilities; - @layer base { +@layer base { :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; - --radius: 0.5rem; + --radius: 0.5rem; } .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; } - } +} - @layer base { +@layer base { * { - @apply border-border; + @apply border-border; } body { - @apply bg-background text-foreground; + @apply bg-background text-foreground; } - }
\ No newline at end of file +} |