Skip to content

Refactor form suggestion retrieval to support asynchronous loading states #491

@kyasbal

Description

@kyasbal

Description

The current form suggestion retrieval process is executed synchronously. This implementation leads to two significant usability issues:

  1. Blocking Initial Render: When a form is opened, the rendering process is blocked until all suggestion data is retrieved. This causes noticeable delays, especially for fields requiring external API calls (e.g., Cloud Monitoring).
  2. Stale Data Visualization: When a dependent form element is updated, dependent fields display stale suggestions without any "loading" indication until the new data is fully fetched. This lack of feedback makes it difficult for users to distinguish between current and outdated information.

Proposed Solution

To resolve these issues while maintaining the synchronous nature of the backend TaskRunner, we will implement a "check-and-trigger" pattern within the dryrun phase. This allows immediate form rendering with "Loading" states while data is fetched asynchronously in the background.

1. Backend Architecture (Synchronous Runner with Async Trigger)

The TaskRunner interface will remain synchronous. We will modify the behavior of form tasks during the dryrun execution to support non-blocking data retrieval.

  • Async Suggestion Utility: Introduce a new utility (e.g., AsyncOptionProvider) for TextFormTaskBuilder and SetFormTaskBuilder.
  • Execution Logic:
    1. Check Cache: Upon execution, the task checks a shared cache or temporary store for the requested data.
    2. Cache Hit: If the data exists, return it immediately.
    3. Cache Miss:
      • Trigger a background goroutine to fetch the data.
      • Immediately return a result with an "isLoading" flag set to true (and potentially empty suggestions).
  • Data Persistence: The background routine will populate the shared cache so that subsequent dryrun calls for the same inspection session can retrieve the result.

2. Schema Updates

The form field definitions in web/src/app/common/schema/form-types.ts will be updated to include a loading state.

export interface TextParameterFormField extends ParameterFormFieldBase {
  // ... existing fields
  /**
   * Indicates if the suggestions are currently being fetched in the background.
   */
  isLoading?: boolean;
}

export interface SetParameterFormField extends ParameterFormFieldBase {
  // ... existing fields
  /**
   * Indicates if the options are currently being fetched in the background.
   */
  isLoading?: boolean;
}

3. Frontend Updates

  • Visual Feedback: Update the form components to display a loading indicator (e.g., spinner or skeleton UI) when isLoading is true.
  • Polling/Re-validation: Leverage the existing polling mechanism for dryrun. When the frontend receives a form definition with isLoading: true, it will continue to poll. Once the background task completes, the next dryrun response will contain the populated suggestions and isLoading: false, automatically updating the UI.

Expected Behavior

  • Immediate Rendering: The form opens immediately without waiting for slow data sources.
  • Non-blocking Updates: Heavy data fetching occurs in the background without freezing the UI.
  • Clear Status: Fields waiting for data clearly display a "Loading..." state.
  • Automatic Refresh: The UI automatically updates from "Loading" to the actual data once the background process completes and the next dryrun result is received.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions