feat(studio): add refresh data button (#28)

Author: cesconix

.changeset/thin-carrots-cover.md

@@ -0,0 +1,5 @@
+---
+"pinorama-studio": patch
+---
+
+add refresh data button

packages/pinorama-client/package.json

@@ -21,9 +21,7 @@
     }
   },
   "types": "./dist/types/pinorama-client.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "clean": "rimraf dist node_modules",
     "build": "rollup --config"

packages/pinorama-server/package.json

@@ -5,9 +5,7 @@
   "type": "module",
   "types": "./dist/index.d.mts",
   "exports": "./dist/index.mjs",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "clean": "rimraf dist node_modules",
     "build": "tsc"

packages/pinorama-studio/package.json

@@ -6,10 +6,7 @@
   "bin": {
     "pinorama": "./cli.mjs"
   },
-  "files": [
-    "dist",
-    "cli.mjs"
-  ],
+  "files": ["dist", "cli.mjs"],
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

packages/pinorama-studio/src/features/log-explorer/components/log-viewer/components/header/header.tsx

@@ -6,16 +6,19 @@ import { ToggleFiltersButton } from "./toggle-filters-button"
 import { ToggleLiveButton } from "./toggle-live-button"
 
 import type { Table } from "@tanstack/react-table"
+import { RefreshDataButton } from "./refresh-data-button"
 
 type LogViewerHeaderProps = {
   table: Table<unknown>
   searchText: string
   showClearFiltersButton: boolean
   liveMode: boolean
+  isLoading: boolean
   onSearchTextChange: (text: string) => void
   onToggleFiltersButtonClick: () => void
   onClearFiltersButtonClick: () => void
   onToggleLiveButtonClick: (live: boolean) => void
+  onRefreshButtonClick: () => void
 }
 
 export function LogViewerHeader(props: LogViewerHeaderProps) {
@@ -35,6 +38,10 @@ export function LogViewerHeader(props: LogViewerHeaderProps) {
         pressed={props.liveMode}
         onPressedChange={props.onToggleLiveButtonClick}
       />
+      <RefreshDataButton
+        onClick={props.onRefreshButtonClick}
+        loading={props.isLoading}
+      />
       {props.showClearFiltersButton ? (
         <ClearFiltersButton onClick={props.onClearFiltersButtonClick} />
       ) : null}

packages/pinorama-studio/src/features/log-explorer/components/log-viewer/components/header/refresh-data-button.tsx

@@ -0,0 +1,43 @@
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { LoaderIcon, RefreshCwIcon } from "lucide-react"
+import { useIntl } from "react-intl"
+
+type RefreshDataButtonProps = {
+  onClick: () => void
+  loading?: boolean
+}
+
+export function RefreshDataButton(props: RefreshDataButtonProps) {
+  const intl = useIntl()
+  const label = intl.formatMessage({ id: "logExplorer.refreshData" })
+
+  const Icon = props.loading ? LoaderIcon : RefreshCwIcon
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          aria-label={label}
+          variant="outline2"
+          className="px-2.5"
+          onClick={props.onClick}
+          disabled={props.loading}
+        >
+          <Icon
+            className={cn("h-[18px] w-[18px]", props.loading && "animate-spin")}
+          />
+        </Button>
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent>{label}</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  )
+}

packages/pinorama-studio/src/features/log-explorer/components/log-viewer/hooks/use-live-logs.ts

@@ -39,7 +39,7 @@ export const useLiveLogs = (
     getNextPageParam: (lastPage) => lastPage.nextCursor,
     staleTime: Number.POSITIVE_INFINITY,
     // refetchInterval: POLL_DELAY, // NOTE: This is not working as expected, it doesn't use the nextCursor
-    enabled: false // NOTE: We will manually poll the data
+    enabled: false
   })
 
   const schedulePoll = useCallback(() => {
@@ -48,18 +48,20 @@ export const useLiveLogs = (
         query.fetchNextPage().finally(schedulePoll)
       }, POLL_DELAY)
     }
-  }, [enabled, query])
+  }, [enabled, query.fetchNextPage])
 
   useEffect(() => {
     if (enabled) {
-      schedulePoll()
+      query.fetchNextPage().finally(() => {
+        schedulePoll()
+      })
     }
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current)
       }
     }
-  }, [enabled, schedulePoll])
+  }, [enabled, query.fetchNextPage, schedulePoll])
 
   const flattenedData = useMemo(() => {
     return query.data?.pages.flatMap((page) => page.data) ?? []

packages/pinorama-studio/src/features/log-explorer/components/log-viewer/hooks/use-static-logs.ts

@@ -14,7 +14,7 @@ export const useStaticLogs = (
   return useQuery({
     queryKey: ["static-logs", searchText, searchFilters],
     queryFn: async ({ signal }) => {
-      await new Promise((resolve) => setTimeout(resolve, 1000))
+      await new Promise((resolve) => setTimeout(resolve, 300))
       if (signal.aborted) return
 
       const payload = buildPayload(searchText, searchFilters)

packages/pinorama-studio/src/features/log-explorer/components/log-viewer/index.tsx

@@ -126,10 +126,12 @@ export function LogViewer(props: LogViewerProps) {
         searchText={props.searchText}
         liveMode={props.liveMode}
         showClearFiltersButton={hasFilters}
+        isLoading={logsQuery.isFetching}
         onSearchTextChange={props.onSearchTextChange}
         onToggleFiltersButtonClick={props.onToggleFiltersButtonClick}
         onToggleLiveButtonClick={props.onToggleLiveButtonClick}
         onClearFiltersButtonClick={props.onClearFiltersButtonClick}
+        onRefreshButtonClick={logsQuery.refetch}
       />
 
       <div

packages/pinorama-studio/src/features/log-explorer/messages/en.json

@@ -3,6 +3,7 @@
   "logExplorer.noLogsFound": "No logs found. Please check filters.",
   "logExplorer.showOrHideFilters": "Show or hide filters",
   "logExplorer.liveMode": "Live Mode",
+  "logExplorer.refreshData": "Refresh Data",
   "logExplorer.clearFilters": "Clear search text and filters",
   "logExplorer.columns": "Columns",
   "logExplorer.columnsVisibility": "Columns visibility",

packages/pinorama-studio/src/features/log-explorer/messages/it.json

@@ -3,6 +3,7 @@
   "logExplorer.noLogsFound": "Nessun log trovato. Si prega di controllare i filtri.",
   "logExplorer.showOrHideFilters": "Mostra o nascondi filtri",
   "logExplorer.liveMode": "Modalità Live",
+  "logExplorer.refreshData": "Aggiorna Dati",
   "logExplorer.clearFilters": "Cancella testo di ricerca e filtri",
   "logExplorer.columns": "Colonne",
   "logExplorer.columnsVisibility": "Visibilità delle colonne",

packages/pinorama-transport/package.json

@@ -8,9 +8,7 @@
   "bin": {
     "pino-pinorama": "./dist/cli.mjs"
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",