feat(conn): add connection toggle

pinoramajs · Jul 12, 2024 · d42d470 · d42d470
1 parent 8669432
commit d42d470
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 35 deletions.
diff --git a/packages/pinorama-studio/src/app.tsx b/packages/pinorama-studio/src/app.tsx
@@ -2,29 +2,37 @@ import { useState } from "react"
 import { LogExplorer } from "./components/log-explorer"
 import type { SearchFilters } from "./components/log-explorer/components/log-filters/types"
 import { TitleBar } from "./components/title-bar/title-bar"
+import { useAppConfig } from "./contexts"
 
 function App() {
+  const appConfig = useAppConfig()
+
   const [searchText, setSearchText] = useState<string>("")
   const [filters, setFilters] = useState<SearchFilters>({})
 
   const hasFilters = searchText.length > 0 || Object.keys(filters).length > 0
+
   const handleResetFilters = () => {
     setSearchText("")
     setFilters({})
   }
 
+  const isConnected = appConfig?.config.connectionStatus === "connected"
+
   return (
     <div className="h-screen w-full grid grid-rows-[48px_1fr]">
       {/* Header */}
       <TitleBar hasFilters={hasFilters} onResetFilters={handleResetFilters} />
 
       {/* Container */}
-      <LogExplorer
-        searchText={searchText}
-        filters={filters}
-        onSearchTextChange={setSearchText}
-        onFiltersChange={setFilters}
-      />
+      {isConnected ? (
+        <LogExplorer
+          searchText={searchText}
+          filters={filters}
+          onSearchTextChange={setSearchText}
+          onFiltersChange={setFilters}
+        />
+      ) : null}
     </div>
   )
 }

diff --git a/packages/pinorama-studio/src/components/connection-status/connection-status.tsx b/packages/pinorama-studio/src/components/connection-status/connection-status.tsx
@@ -18,7 +18,7 @@ import { Input } from "../ui/input"
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
 
 const formSchema = z.object({
-  serverUrl: z.string().url("Invalid URL")
+  connectionUrl: z.string().url("Invalid URL")
 })
 
 export function ConnectionStatus() {
@@ -30,14 +30,14 @@ export function ConnectionStatus() {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      serverUrl: appConfig?.config.serverUrl
+      connectionUrl: appConfig?.config.connectionUrl || ""
     }
   })
 
   const onSubmit = (values: z.infer<typeof formSchema>) => {
     appConfig?.setConfig({
       ...appConfig.config,
-      serverUrl: values.serverUrl
+      connectionUrl: values.connectionUrl
     })
 
     setOpen(false)
@@ -46,7 +46,13 @@ export function ConnectionStatus() {
   let statusColor = ""
   let statusText = ""
 
+  const connectionStatus = appConfig?.config.connectionStatus
+
   switch (true) {
+    case connectionStatus === "disconnected":
+      statusColor = "bg-gray-500"
+      statusText = "Disconnected"
+      break
     case status === "pending" && fetchStatus === "fetching":
       statusColor = "bg-orange-500"
       statusText = "Connecting..."
@@ -59,6 +65,10 @@ export function ConnectionStatus() {
       statusColor = "bg-red-500"
       statusText = "Connection failed"
       break
+    default:
+      statusColor = "bg-gray-500"
+      statusText = "Unknown"
+      break
   }
 
   return (
@@ -68,7 +78,7 @@ export function ConnectionStatus() {
           <div className={`w-2 h-2 rounded-full ${statusColor}`} />
           <span className="">{statusText}</span>
           <span className="text-muted-foreground">
-            {appConfig?.config.serverUrl ?? "Unknown"}
+            {appConfig?.config.connectionUrl ?? "Unknown"}
           </span>
         </Button>
       </PopoverTrigger>
@@ -77,10 +87,10 @@ export function ConnectionStatus() {
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
             <FormField
               control={form.control}
-              name="serverUrl"
+              name="connectionUrl"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Pinorama Server URL</FormLabel>
+                  <FormLabel>Server URL</FormLabel>
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
@@ -99,7 +109,7 @@ export function ConnectionStatus() {
                 Reset
               </Button>
               <Button type="submit" className="w-full">
-                Connect
+                Save
               </Button>
             </div>
           </form>

diff --git a/packages/pinorama-studio/src/components/connection-toggle/connection-toggle.tsx b/packages/pinorama-studio/src/components/connection-toggle/connection-toggle.tsx
@@ -0,0 +1,24 @@
+import { useAppConfig } from "@/contexts"
+import { Button } from "../ui/button"
+
+export function ConnectionToggle() {
+  const appConfig = useAppConfig()
+
+  const connectionStatus = appConfig?.config.connectionStatus
+
+  const text = connectionStatus === "connected" ? "Disconnect" : "Connect"
+
+  const handleClick = () => {
+    appConfig?.setConfig({
+      ...appConfig.config,
+      connectionStatus:
+        connectionStatus === "connected" ? "disconnected" : "connected"
+    })
+  }
+
+  return (
+    <Button variant={"outline2"} size={"sm"} onClick={handleClick}>
+      {text}
+    </Button>
+  )
+}
diff --git a/packages/pinorama-studio/src/components/title-bar/title-bar.tsx b/packages/pinorama-studio/src/components/title-bar/title-bar.tsx
@@ -1,4 +1,5 @@
 import { ConnectionStatus } from "../connection-status/connection-status"
+import { ConnectionToggle } from "../connection-toggle/connection-toggle"
 import { PinoramaLogo } from "../pinorama-logo/pinorama-logo"
 import { ThemeToggle } from "../theme-toggle/theme-toggle"
 import { Button } from "../ui/button"
@@ -33,6 +34,7 @@ export function TitleBar(props: TitleBarProps) {
               Reset Filters
             </Button>
           )}
+          <ConnectionToggle />
           <ThemeToggle />
         </div>
       </div>

diff --git a/packages/pinorama-studio/src/contexts/app-config-context.tsx b/packages/pinorama-studio/src/contexts/app-config-context.tsx
@@ -1,40 +1,45 @@
 import { createContext, useContext, useEffect, useState } from "react"
 
 export type AppConfig = {
-  serverUrl: string
+  connectionStatus: "connected" | "disconnected"
+  connectionUrl?: string | null
 }
 
 type AppConfigContextType = {
   config: AppConfig
   setConfig: (config: AppConfig) => void
 }
 
-type AppConfigProviderProps = {
-  children: React.ReactNode
-}
-
 const DEFAULT_CONFIG: AppConfig = {
-  serverUrl: "http://localhost:6200"
+  connectionStatus: "disconnected",
+  connectionUrl: "http://localhost:6200"
 }
 
-const getQueryParams = (): Partial<AppConfig> => {
+const getAppConfigFromQueryParams = () => {
+  const appConfig: Partial<AppConfig> = {}
   const params = new URLSearchParams(window.location.search)
-  return {
-    serverUrl: params.get("url") || DEFAULT_CONFIG.serverUrl
+
+  const connectionUrl = params.get("connectionUrl")
+  if (connectionUrl) {
+    appConfig.connectionUrl = connectionUrl
   }
+
+  return appConfig
 }
 
 const AppConfigContext = createContext<AppConfigContextType | null>(null)
 
-export function AppConfigProvider(props: AppConfigProviderProps) {
-  const queryConfig = getQueryParams()
-
-  const [config, setConfig] = useState<AppConfig>({
-    serverUrl: queryConfig.serverUrl || DEFAULT_CONFIG.serverUrl
-  })
+export function AppConfigProvider(props: { children: React.ReactNode }) {
+  const [config, setConfig] = useState<AppConfig>(DEFAULT_CONFIG)
 
   useEffect(() => {
-    const queryConfig = getQueryParams()
+    const queryConfig = getAppConfigFromQueryParams()
+
+    const autoConnect = !!queryConfig.connectionUrl
+    if (autoConnect) {
+      queryConfig.connectionStatus = "connected"
+    }
+
     setConfig((prevConfig) => ({ ...prevConfig, ...queryConfig }))
   }, [])
 

diff --git a/packages/pinorama-studio/src/contexts/pinorama-client-context.tsx b/packages/pinorama-studio/src/contexts/pinorama-client-context.tsx
@@ -13,14 +13,23 @@ const PinoramaClientContext = createContext<PinoramaClient | null>(null)
 export function PinoramaClientProvider({
   children
 }: PinoramaClientProviderProps) {
-  const queryClient = new QueryClient()
-
   const appConfig = useAppConfig()
 
-  const pinoramaClient = new PinoramaClient({
-    url: appConfig?.config.serverUrl
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        enabled: appConfig?.config.connectionStatus === "connected"
+      }
+    }
   })
 
+  let pinoramaClient: PinoramaClient | null = null
+  if (appConfig?.config.connectionUrl) {
+    pinoramaClient = new PinoramaClient({
+      url: appConfig?.config.connectionUrl
+    })
+  }
+
   return (
     <QueryClientProvider client={queryClient}>
       <PinoramaClientContext.Provider value={pinoramaClient}>

diff --git a/packages/pinorama-studio/src/hooks/use-pinorama-introspection.ts b/packages/pinorama-studio/src/hooks/use-pinorama-introspection.ts
@@ -10,7 +10,6 @@ export const usePinoramaIntrospection = () => {
       const response: any = await client?.introspection()
       return response
     },
-    enabled: !!client,
     refetchInterval: 3000
   })
 

diff --git a/packages/pinorama-studio/src/hooks/use-pinorama-styles.ts b/packages/pinorama-studio/src/hooks/use-pinorama-styles.ts
@@ -11,7 +11,6 @@ export const usePinoramaStyles = () => {
       const response: any = await client?.styles()
       return response
     },
-    enabled: !!client,
     staleTime: Number.POSITIVE_INFINITY
   })