feat(dashboard): debloat wfspec view (#1123)

- Added `getLatestWfSpecs` server actions - Uses `lhClient` RPC - Group unique `WfSpecs` with latest version tag --------- Co-authored-by: Hazim Arafa <[email protected]>
littlehorse-enterprises · Nov 22, 2024 · 1f63419 · 1f63419
1 parent 16db9ec
commit 1f63419
Show file tree

Hide file tree

Showing 8 changed files with 13,219 additions and 6,337 deletions.
diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -15,14 +15,16 @@
     "@headlessui/react": "^2.0.3",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-checkbox": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.1.1",
     "@tanstack/react-query": "^5.37.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
     "dagre": "^0.8.5",
     "littlehorse-client": "file://../sdk-js",
     "lucide-react": "^0.379.0",

diff --git a/dashboard/src/app/(authenticated)/components/Search.tsx b/dashboard/src/app/(authenticated)/components/Search.tsx
@@ -35,7 +35,7 @@ export const Search: FC<{}> = () => {
           <RefreshCwIcon className="h-8 w-8 animate-spin text-blue-500" />
         </div>
       ) : (
-        <div className="min-h-[360px]">
+        <div>
           {type === 'WfSpec' && <WfSpecTable pages={data?.pages} />}
           {type === 'TaskDef' && <TaskDefTable pages={data?.pages} />}
           {type === 'UserTaskDef' && <UserTaskDefTable pages={data?.pages} />}

diff --git a/dashboard/src/app/(authenticated)/components/VersionSelector.tsx b/dashboard/src/app/(authenticated)/components/VersionSelector.tsx
@@ -21,17 +21,19 @@ export const VersionSelector: FC<Props> = ({ path, currentVersion, versions, loa
             {currentVersion}
           </Listbox.Button>
           <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
-            {versions.map(version => (
-              <Listbox.Option
-                className="relative block cursor-pointer select-none p-2 hover:bg-slate-300"
-                key={version}
-                value={version}
-                as={Link}
-                href={`${path}/${version}`}
-              >
-                {version}
-              </Listbox.Option>
-            ))}
+            {[...versions].reverse().map(version => {
+              return (
+                <Listbox.Option
+                  className="relative block cursor-pointer select-none p-2 hover:bg-slate-300"
+                  key={version}
+                  value={version}
+                  as={Link}
+                  href={`${path}/${version}`}
+                >
+                  {version}
+                </Listbox.Option>
+              )
+            })}
           </Listbox.Options>
         </div>
       </div>

diff --git a/dashboard/src/app/(authenticated)/components/tables/WfSpecTable.tsx b/dashboard/src/app/(authenticated)/components/tables/WfSpecTable.tsx
@@ -1,30 +1,46 @@
-import { WfSpecId } from 'littlehorse-client/proto'
-import { TagIcon } from 'lucide-react'
-import Link from 'next/link'
-import { FC, Fragment } from 'react'
+import { FC, Fragment, useEffect, useMemo, useState } from 'react'
 import { SearchResultProps } from '.'
-
+import { TagIcon } from 'lucide-react'
+import { Separator } from '@/components/ui/separator'
+import { useRouter } from 'next/navigation'
+import { getLatestWfSpecs } from '@/app/actions/getLatestWfSpec'
+import { useWhoAmI } from '@/contexts/WhoAmIContext'
+import { WfSpecData } from '@/types'
 export const WfSpecTable: FC<SearchResultProps> = ({ pages = [] }) => {
+  const router = useRouter()
+  const [wfSpecs, setWfSpecs] = useState<WfSpecData[]>([])
+  const { tenantId } = useWhoAmI()
+
   if (pages.length === 0) {
     return <div className="flex min-h-[360px] items-center justify-center text-center italic">No WfSpecs</div>
   }
 
+  useEffect(() => {
+    if (!tenantId) return
+    const wfSpecNames = pages.flatMap(page => page.results).map(wfSpec => wfSpec.name)
+    getLatestWfSpecs(tenantId, wfSpecNames).then(setWfSpecs)
+  }, [pages, tenantId])
+
   return (
     <div className="py-4">
-      {pages.map((page, i) => (
-        <Fragment key={i}>
-          {page.results.map(({ name, majorVersion, revision }: WfSpecId) => (
-            <div key={`${name}.${majorVersion}.${revision}`} className="my-2 flex gap-2">
-              <Link className="underline hover:no-underline" href={`/wfSpec/${name}/${majorVersion}.${revision}`}>
-                {name}
-              </Link>
+      <div className="flex max-h-[600px] flex-col overflow-auto">
+        {wfSpecs.map(wfSpec => (
+          <Fragment key={wfSpec.name}>
+            <button
+              className="flex items-center gap-3 rounded-md px-2 py-2 hover:bg-gray-100"
+              key={wfSpec.name}
+              onClick={() => router.push(`/wfSpec/${wfSpec.name}/${wfSpec.latestVersion}`)}
+            >
+              <p>{wfSpec.name}</p>
               <div className="flex items-center gap-2 rounded bg-blue-200 px-2 font-mono text-sm text-gray-500">
-                <TagIcon className="h-4 w-4 fill-none stroke-gray-500 stroke-1" />v{majorVersion}.{revision}
+                <TagIcon className="h-4 w-4 fill-none stroke-gray-500 stroke-1" />
+                Latest: v{wfSpec.latestVersion}
               </div>
-            </div>
-          ))}
-        </Fragment>
-      ))}
+            </button>
+            <Separator />
+          </Fragment>
+        ))}
+      </div>
     </div>
   )
 }
diff --git a/dashboard/src/app/actions/getLatestWfSpec.tsx b/dashboard/src/app/actions/getLatestWfSpec.tsx
@@ -0,0 +1,24 @@
+'use server'
+
+import { WfSpecId } from 'littlehorse-client/proto'
+import { lhClient } from '../lhClient'
+import { WfSpecData } from '@/types'
+
+export async function getLatestWfSpecs(tenantId: string, wfSpecNames: string[]): Promise<WfSpecData[]> {
+  const client = await lhClient({ tenantId })
+  const specMap = new Map<string, WfSpecData>()
+
+  await Promise.all(
+    wfSpecNames.map(async name => {
+      if (!specMap.has(name)) {
+        const wf = await client.getLatestWfSpec({ name })
+        specMap.set(name, {
+          name,
+          latestVersion: `${wf?.id?.majorVersion}.${wf?.id?.revision}`,
+        })
+      }
+    })
+  )
+
+  return Array.from(specMap.values())
+}
diff --git a/dashboard/src/components/ui/separator.tsx b/dashboard/src/components/ui/separator.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@/components/utils'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
+    {...props}
+  />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/dashboard/src/types/index.ts b/dashboard/src/types/index.ts
@@ -20,6 +20,11 @@ export type VersionList = {
   bookmark?: string
 }
 
+export type WfSpecData = {
+  name: string
+  latestVersion: string
+}
+
 export type FormFieldProp = {
   variables?: ThreadVarDef
   custom?: boolean