feat: support view crd yaml (#229)

Author: kincoy

ui/src/components/resource-table.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   ColumnDef,
   ColumnFiltersState,
@@ -71,6 +71,7 @@ export interface ResourceTableProps<T> {
   searchQueryFilter?: (item: T, query: string) => boolean // Custom filter function
   showCreateButton?: boolean // If true, show create button
   onCreateClick?: () => void // Callback for create button click
+  extraToolbars?: React.ReactNode[] // Additional toolbar components
 }
 
 export function ResourceTable<T>({
@@ -81,6 +82,7 @@ export function ResourceTable<T>({
   searchQueryFilter,
   showCreateButton = false,
   onCreateClick,
+  extraToolbars = [],
 }: ResourceTableProps<T>) {
   const { t } = useTranslation()
   const [sorting, setSorting] = useState<SortingState>([])
@@ -116,7 +118,6 @@ export function ResourceTable<T>({
       : storedNamespace || 'default' // Default to 'default' if not set
   })
   const [useSSE, setUseSSE] = useState(false)
-
   const {
     isLoading: queryLoading,
     data: queryData,
@@ -367,7 +368,6 @@ export function ResourceTable<T>({
       setIsDeleting(false)
     }
   }, [table, clusterScope, resourceType, resourceName, t, useSSE, refetch])
-
   // Calculate total and filtered row counts
   const totalRowCount = useMemo(
     () => (data as T[] | undefined)?.length || 0,
@@ -503,6 +503,9 @@ export function ResourceTable<T>({
 
         <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
           <div className="flex items-center gap-2 flex-wrap">
+            {extraToolbars?.map((toolbar, index) => (
+              <React.Fragment key={index}>{toolbar}</React.Fragment>
+            ))}
             {/* Watch/Live mode toggle switch */}
             {resourceName === 'Pods' && (
               <div className="flex items-center gap-2">

ui/src/pages/cr-list-page.tsx

@@ -1,19 +1,49 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { createColumnHelper } from '@tanstack/react-table'
+import * as yaml from 'js-yaml'
+import { CustomResourceDefinition } from 'kubernetes-types/apiextensions/v1'
 import { get } from 'lodash'
+import { Eye } from 'lucide-react'
 import { Link, useParams } from 'react-router-dom'
 
 import { CustomResource, ResourceType } from '@/types/api'
 import { useResource } from '@/lib/api'
 import { formatDate } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
 import { ResourceTable } from '@/components/resource-table'
+import { YamlEditor } from '@/components/yaml-editor'
 
 export function CRListPage() {
+  const [isYamlDialogOpen, setIsYamlDialogOpen] = useState(false)
+  const [yamlContent, setYamlContent] = useState('')
   const { crd } = useParams<{ crd: string }>()
   const { data: crdData, isLoading: isLoadingCRD } = useResource('crds', crd!)
 
   const columnHelper = createColumnHelper<CustomResource>()
-
+  const handleViewYaml = useCallback((crd: CustomResourceDefinition) => {
+    setYamlContent(yaml.dump(crd, { indent: 2 }))
+    setIsYamlDialogOpen(true)
+  }, [])
+  const extraToolbars = useMemo(() => {
+    return [
+      <Button
+        variant="outline"
+        size="default"
+        onClick={() => {
+          handleViewYaml(crdData as CustomResourceDefinition)
+        }}
+      >
+        <Eye className="h-4 w-4 mr-1" />
+        View YAML
+      </Button>,
+    ]
+  }, [crdData, handleViewYaml])
   const columns = useMemo(() => {
     const baseColumns = [
       columnHelper.accessor('metadata.name', {
@@ -33,7 +63,6 @@ export function CRListPage() {
         },
       }),
     ]
-
     const additionalColumns =
       crdData?.spec.versions[0].additionalPrinterColumns?.map(
         (printerColumn) => {
@@ -91,12 +120,31 @@ export function CRListPage() {
   }
 
   return (
-    <ResourceTable
-      resourceName={crdData.spec.names.kind || 'Custom Resources'}
-      resourceType={crd as ResourceType}
-      columns={columns}
-      clusterScope={crdData.spec.scope === 'Cluster'}
-      searchQueryFilter={searchQueryFilter}
-    />
+    <>
+      <ResourceTable
+        resourceName={crdData.spec.names.kind || 'Custom Resources'}
+        resourceType={crd as ResourceType}
+        columns={columns}
+        clusterScope={crdData.spec.scope === 'Cluster'}
+        searchQueryFilter={searchQueryFilter}
+        extraToolbars={extraToolbars}
+      />
+
+      <Dialog open={isYamlDialogOpen} onOpenChange={setIsYamlDialogOpen}>
+        <DialogContent className="sm:max-w-4xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              YAML Configuration: {crdData?.metadata?.name ?? 'Unknown'}
+            </DialogTitle>
+          </DialogHeader>
+          <YamlEditor
+            value={yamlContent}
+            readOnly={true}
+            showControls={false}
+            minHeight={600}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }