Overview

Create detailed MDX documentation for the Object Explorer component, covering universal resource browsing, multi-kind filtering, view modes, bulk operations, and advanced search capabilities.

File to Create

File: docs/object-explorer.mdx

Features to Document

1. Universal Resource Browser

Access to All Kubernetes Resources

• Browse any Kubernetes resource type
• Built-in types supported:
  • Pods
  • Deployments
  • Services
  • ConfigMaps
  • Secrets
  • StatefulSets
  • DaemonSets
  • Jobs
  • CronJobs
  • ReplicaSets
  • Ingresses
  • PersistentVolumes
  • PersistentVolumeClaims
  • ServiceAccounts
  • Roles
  • RoleBindings
  • NetworkPolicies
• Custom Resource Definitions (CRDs)
• All namespaced and cluster-scoped resources

Resource Discovery

• Auto-discovery of available resource types
• API group detection
• Version support
• Dynamic kind listing

2. Smart Filtering System

Multi-Kind Selection

• Dropdown with all resource types
• Multi-select capability
• Select/deselect all option
• Search resource types
• Recently used types
• Popular types highlighted
• Category grouping:
  • Workloads (Deployments, Pods, Jobs)
  • Services (Services, Ingresses, Endpoints)
  • Config (ConfigMaps, Secrets)
  • Storage (PVs, PVCs)
  • RBAC (Roles, RoleBindings)

Multi-Namespace Selection

• Dropdown with all namespaces
• Multi-select capability
• "All namespaces" option
• Search namespaces
• Namespace count display
• Default namespace selection
• System namespace indicator

Additional Filters

• Status Filter:

  • Running
  • Pending
  • Failed
  • Succeeded
  • Unknown
  • Multiple selection

• Label Filter:

  • Add label key-value pairs
  • Multiple label filters
  • AND/OR logic
  • Label suggestions from existing resources

• Age Filter:

  • Last hour
  • Last 24 hours
  • Last 7 days
  • Last 30 days
  • Custom date range

Quick Search

• Search by resource name
• Real-time filtering
• Case-insensitive
• Partial match support
• Clear search button
• Search history

Active Filters Display

• Filter chips showing active filters
• Click to remove individual filter
• "Clear All" button
• Filter count indicator

3. View Modes 👁️

Grid View (Card Layout)

• Card Design:

  • Resource icon/type badge
  • Resource name (prominent)
  • Namespace chip
  • Status indicator
  • Age display
  • Action menu (⋮)
  • Labels preview (first 3)
  • Quick stats (replicas, ports, etc.)

• Grid Layout:

  • Responsive columns (1-4 based on screen size)
  • Adjustable card size
  • Hover effects
  • Skeleton loading
  • Empty state illustration

List View (Compact)

• List Item Design:

  • Type icon (left)
  • Resource name
  • Namespace
  • Status dot
  • Age
  • Labels count
  • Action menu (right)

• List Features:

  • Condensed spacing
  • Hover highlight
  • Click row to select
  • Double-click to open details
  • Keyboard navigation

Table View (Detailed) - Future

• Sortable columns
• Resizable columns
• Column visibility toggle
• Export to CSV

View Toggle

• Icons for each view mode
• Persistent preference (localStorage)
• Smooth transition animation
• View mode indicator

4. Resource Operations ⚙️

Individual Resource Actions

• View Details:

  • Open detail panel/dialog
  • Summary information
  • Full manifest (YAML/JSON)
  • Related resources

• Edit Manifest:

  • In-place YAML editor
  • Syntax highlighting
  • Validation
  • Save changes
  • Cancel/revert

• View Logs (for Pods):

  • Container selection
  • Live log streaming
  • Download logs
  • Search logs

• Delete Resource:

  • Confirmation dialog
  • Grace period option
  • Force delete option
  • Cascade delete (for parent resources)
  • Success notification

• Additional Actions:

  • Describe (kubectl describe equivalent)
  • Copy name/namespace
  • Copy YAML to clipboard
  • Download YAML
  • View events
  • View related resources

Bulk Operations

• Bulk Selection:

  • Checkbox on each card/row
  • "Select All" on page
  • "Select All" matching filters
  • Selection count display
  • Clear selection button

• Bulk Actions Menu:

  • Bulk delete (with confirmation)
  • Bulk export (download all YAMLs)
  • Bulk label update
  • Bulk annotation update
  • Compare selected resources

• Bulk Operation Progress:

  • Progress bar
  • Success/failure count
  • Error details per resource
  • Cancel in-progress operation

5. Resource Detail Panel

Summary View

• Resource metadata (name, namespace, kind, UID)
• Creation timestamp
• Owner references
• Labels (all, with edit capability)
• Annotations (all, with edit capability)
• Status conditions
• Spec preview (key fields)

Full Manifest Tab

• Complete YAML display
• JSON toggle option
• Syntax highlighting
• Line numbers
• Copy button
• Download button
• Edit mode toggle

Related Resources Tab

• Owner resources (controllers)
• Owned resources (pods, replicasets)
• Services selecting this resource
• Ingresses routing to this service
• ConfigMaps/Secrets referenced
• Click to navigate

Events Tab

• Events related to this resource
• Chronological order
• Warning/Normal separation
• Event details

6. Additional Features

Auto-Refresh

• Toggle on/off
• Configurable interval (5s, 10s, 30s, 60s)
• Manual refresh button
• Last updated timestamp
• Loading indicator
• Pause when detail panel open

Pagination

• Resources per page selector (25, 50, 100)
• Page navigation (First, Prev, Next, Last)
• Total count display
• Jump to page input

Error Handling

• Network error notification
• Permission error handling
• Invalid filter feedback
• Empty state messages:
  • No resources found
  • No resources match filters
  • No resources in namespace
• Retry button

Loading States

• Skeleton cards/rows
• Loading spinner
• Progressive loading for large datasets
• Optimistic UI updates

Empty States

• Illustrative graphics
• Helpful messages
• Action suggestions:
  • "Create your first resource"
  • "Try different filters"
  • "Select a namespace"
• Quick action buttons

Visual Content Requirements

Screenshots Needed (5+ screenshots)

1. Object Explorer Main Interface - Grid View
2. Object Explorer Main Interface - List View
3. Filter Panel Expanded - All Filters Visible
4. Multi-Kind Selection Dropdown
5. Multi-Namespace Selection Dropdown
6. Active Filters with Chips
7. Search Bar in Action
8. Resource Card (Grid View) - Annotated
9. Resource Row (List View) - Annotated
10. Resource Detail Panel - Summary Tab
11. Resource Detail Panel - Manifest Tab (YAML)
12. Bulk Selection Interface
13. Bulk Actions Menu
14. Delete Confirmation Dialog
15. Empty State - No Resources
16. Empty State - Filters Applied
17. Auto-Refresh Controls

Diagrams Required

1. Filter Flow

Select Kinds → Select Namespaces → Apply Status/Labels → Search → Results

2. View Modes Comparison

Grid View: Visual cards, best for browsing
List View: Compact rows, best for scanning
Table View: Detailed columns, best for analysis (future)

3. Bulk Operations Flow

Select Resources → Choose Action → Confirm → Execute → Show Results

Documentation Structure

1. Introduction (200 words)

• What is Object Explorer?
• Purpose: Universal Kubernetes resource browser
• When to use: Finding, browsing, managing any resource
• Key benefits:
  • Access all resource types
  • Powerful filtering
  • Multiple view modes
  • Bulk operations

2. Prerequisites

• Kubernetes cluster access
• Proper RBAC permissions
• KubeStellar UI access

3. Feature Overview

• Resource browsing concept
• Filter-based discovery
• View mode philosophy

4. Step-by-Step Guides

Guide 1: Browsing Pods Across Namespaces

Guide 2: Finding Resources by Labels

Guide 3: Using Multi-Kind Filtering

Guide 4: Bulk Deleting Resources

Guide 5: Editing Resource Manifests

Guide 6: Viewing Resource Details

5. Use Cases

Use Case 1: Debugging Across Namespaces

Use Case 2: Auditing ConfigMaps and Secrets

Use Case 3: Cleaning Up Unused Resources

Use Case 4: Discovering Custom Resources

6. API Reference

• Backend endpoints for resource listing
• Filter query parameters
• Pagination parameters

7. Troubleshooting

• Permission errors
• Slow loading
• Filter not working
• Empty results

8. Related Features

• Comparison with WECS
• Integration with ITS and WDS

Acceptance Criteria

• All features documented
• 5+ screenshots
• 6 step-by-step guides
• 4 use cases
• Both view modes shown
• Filter examples
• Bulk operations demonstrated
• Technical review complete

📚 References

• Code: /frontend/src/pages/ObjectFilterPage.tsx
• E2E Tests: /frontend/e2e/ObjectFilter.spec.ts