Skip to main content

Home Panel

Overview​

The Home panel serves as the central dashboard landing page in Shakudo, providing users with quick access to common actions and an overview of their active stack components. It features a personalized greeting, quick-start buttons for primary workflows, and displays pinned or active stack components along with helpful tutorial resources.

Access & Location​

  • Route: ?panel=home
  • Navigation: Shakudo → Home (Shakudo logo icon in the navigation menu)
  • Access Requirements: None - available to all authenticated users
  • Feature Flags: None

Key Capabilities​

Quick Action Buttons​

The Home panel provides four primary action buttons that navigate users to key platform features:

  • Start a Session - Opens the Sessions panel to create a new development environment
  • Start a Job - Opens the Jobs panel to create an immediate job
  • Start a Microservice - Opens the Services panel to create a new microservice
  • Monitor Nodes - Opens Grafana in a new tab to monitor Kubernetes compute resources

Stack Components Display​

Shows a curated list of stack components (platform apps) to provide quick access to installed tools:

  • Displays pinned apps for the current user when available
  • Falls back to showing all active apps if the user has no pinned apps
  • Each app card displays the app's icon, name, and indicates pinned status
  • Clicking an app card opens either a dedicated management page or the app's UI in a dialog

Tutorial Resources​

Displays a filtered list of tutorials with usage documentation to help users learn about the platform and its features.

User Interface​

Main View​

The Home panel consists of three main sections:

  1. Welcome Header

    • Personalized greeting using the user's first name or email prefix
    • Centered at the top of the page

  2. Quick Action Grid

    • Four action buttons arranged horizontally (responsive grid layout)
    • Each button displays an icon and descriptive text
    • Icons: Code (Sessions), Square Play (Jobs), Cloud Cog (Microservices), Activity (Monitor)

  3. Stack Components Section

    • Section header with "Stack Components" title
    • Loading indicator shown during data fetch
    • Grid of app cards showing either:
      • User's pinned apps (if any exist)
      • Active platform apps (fallback when no pinned apps)
    • Each card shows app icon, name, and pin indicator (if pinned)

  4. Get Started Section

    • Section header with "Get Started" title
    • Tutorial panel displaying available tutorials with usage documentation
    • Fixed height of 160px for home panel display
    • No search bar enabled for home panel tutorials

  5. Footer

    • Standard home page footer at the bottom

Dialogs & Modals​

  1. SessionStatusDialog

    • Purpose: Display status information for a newly created or selected session
    • Triggered when a session ID is set (currently not actively used in the displayed code flow)
    • Actions: Close dialog

  2. PlatformAppIframeDialog (via AppCardSmall)

    • Purpose: Display stack component UI in an embedded iframe
    • Triggered when clicking on an app card that has a web UI
    • Shows the app's interface without leaving the dashboard

Technical Details​

GraphQL Operations​

Queries:

  • GetPinnedApps - Retrieves pinned platform apps for the current user

    • Variables: user ID, optional limit and offset
    • Filters: show=true, installStatus=ACTIVE
    • Returns: app details including name, URLs, images, install status, namespace, usage docs
    • Also returns: count of pinned apps

  • GetApps - Retrieves all platform apps with optional filtering

    • Variables: optional where clause for filtering
    • Returns: complete app details including license information
    • Ordered by name (ascending)

Mutations: None - Home panel is read-only

Subscriptions: None

Component Structure​

  • Main Component: components/Panels/Home.tsx
  • Supporting Components:
    • components/HomePage/StarterButton.tsx - Quick action buttons
    • components/PlatformApps/PlatformAppsCardSmall.tsx - Stack component cards
    • components/Tutorials/TutorialPanel.tsx - Tutorial resource display
    • components/HomePage/Footer.tsx - Page footer
    • components/Sessions/Dialog/SessionStatusDialog.tsx - Session status modal

Data Flow​

  1. Fetches user's pinned apps using GetPinnedApps query with user ID
  2. Fetches all platform apps using GetApps query
  3. Filters active apps (ACTIVE, SCALING, or PAUSING status) excluding pinned apps
  4. Displays pinned apps if available, otherwise shows active apps
  5. Tutorials are filtered to only show those with usage_docs_url

State Management​

  • Uses React context for user data (HyperplaneUserContext) and platform parameters (PlatformParametersContext)
  • Local state for session dialog visibility
  • Apollo Client cache-first fetch policy for optimal performance

Common Workflows​

Starting a New Session​

  1. User clicks "Start a session" button
  2. Redirects to Sessions panel with create section open
  3. User can configure and launch a new development environment

Starting a New Job​

  1. User clicks "Start a Job" button
  2. Redirects to Jobs panel with create section open
  3. User can configure and launch an immediate job

Starting a Microservice​

  1. User clicks "Start a Microservice" button
  2. Redirects to Services panel with create section open
  3. User can configure and deploy a new microservice

Accessing Stack Components​

  1. User views pinned or active stack components in the grid
  2. User clicks on an app card
  3. System checks if app has a dedicated management page or web UI
  4. Either navigates to management page or opens iframe dialog with app UI

Monitoring Infrastructure​

  1. User clicks "Monitor Nodes" button
  2. Opens Grafana dashboard in new browser tab
  3. Shows Kubernetes compute resources for user's namespace
  4. Dashboard auto-refreshes every 10 seconds

Notes & Tips​

User Identity Display​

  • The greeting uses the user's first name if available
  • Falls back to the email username (part before @) if first name is not set
  • Display is capitalized for proper presentation

Stack Component Behavior​

  • Pinned apps are prioritized and always shown when available
  • Active apps serve as a fallback to ensure something is always displayed
  • Pin indicator appears in the top-right corner of pinned app cards
  • Apps can be clicked only if they have ACTIVE install status

App Card Navigation Logic​

  • Apps with dedicated management pages (found in appPageDirectory) navigate to the apps panel with specific app view
  • Apps with web UIs open in an iframe dialog within the dashboard
  • Apps without UIs show informational notifications

Grafana Integration​

  • Grafana URL is dynamically constructed using the platform domain and user's default namespace
  • Pre-configured to show Kubernetes compute resources dashboard
  • Uses organization ID 1 and Prometheus datasource

Performance Optimization​

  • Uses cache-first fetch policy to minimize API calls
  • Memoizes active apps list to prevent unnecessary recalculations
  • Efficient filtering using Set data structure for pinned app IDs

Tutorial Display​

  • Home panel shows a condensed version (160px height vs 220px for dedicated tutorials panel)
  • Only tutorials with usage documentation URLs are displayed
  • Search bar is disabled on the home panel version
Last updated on by chyuen-devsentient