Skip to content

Add filtering and sorting capabilities for deployments in the release details page

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Problem to solve

Currently, when viewing deployments related to a release (feature added in %17.7 via #501169 (closed)), users with many deployments cannot filter or sort the list by deployment status. This makes it difficult to quickly identify successful or failed deployments among numerous entries.

Intended users

  • DevOps engineers
  • Release managers
  • Development teams managing deployments

User experience goal

Enable users to filter the deployments list by status (particularly "success" or "failed") and sort the list accordingly, allowing them to focus on relevant deployment information without being distracted by deployments in "waiting" or "created" status.

Proposal

Add filtering and sorting capabilities to the deployments list in the release view:

  1. Add a filter dropdown to allow filtering by deployment status
  2. Prioritize filtering for "success" and "failed" statuses
  3. Add column sorting functionality
  4. Consider pagination for better performance with large numbers of deployments

Screenshots/mockups

Screenshot_2025-06-04_at_19.32.54

Implementation guide

GitLab uses a filtered search system that requires custom "tokens" for different data types. Think of tokens as specialized input components that know how to handle specific types of data.

Study this existing example first: job_status_token.vue. Your deployment token will follow the same pattern but with different statuses.

Step 1: Create the Deployment Status Token

Why do we need this? The filtered search component needs to know:

  • What deployment statuses exist
  • How to display each status (icon + text)
  • How to style each status with the right colors
  1. Create: app/assets/javascripts/releases/components/deployment_status_token.vue
  2. Look at the job_status_token and adapt it for these deployment statuses:
  • CREATED → "Created" (status_created, ci-status-icon-created)
  • RUNNING → "Running" (status_running, ci-status-icon-running)
  • SUCCESS → "Passed" (status_success, ci-status-icon-success)
  • FAILED → "Failed" (status_failed, ci-status-icon-failed)
  • CANCELED → "Canceled" (status_canceled, ci-status-icon-canceled)
  • SKIPPED → "Skipped" (status_skipped, ci-status-icon-skipped)
  • BLOCKED → "Waiting" (status_manual, ci-status-icon-manual)

Remember: Use s__('Deployment|StatusName') for all text labels to support translations.

Step 2: Add Filtering to the Deployments Component

Open: app/assets/javascripts/releases/components/release_block_deployments.vue

Understanding what you need to add:

  1. Import the filtered search components:

  2. Configure the token in your component's data:

    availableTokens: [
  {
    type: TOKEN_TYPE_STATUS,    // Tells the system this is a status filter
    icon: 'status',             // Icon for the filter button
    title: TOKEN_TITLE_STATUS,  // "Status" label
    unique: true,               // Only one status filter allowed
    token: DeploymentStatusToken, // Your custom component
    operators: OPERATORS_IS,    // Supports "is" operator only
  },
]

  3. Add filtering logic:

    • Track the selected status in the component state
    • Create a computed property that filters deployments based on the selected status
    • Handle the search events (submit and clear)

  4. Update the template:

    • Add the <gl-filtered-search> component above the table
    • Change the table to use filteredDeployments instead of deployments

Your implementation tasks:

  1. Add the necessary imports - Look at other components using GlFilteredSearch for examples

  2. Add state tracking:

    data() {
  return {
    // existing data...
    selectedStatus: null, // Track which status is selected
    availableTokens: [/* token configuration */],
  };
}

  3. Create the filtering logic:

    computed: {
  filteredDeployments() {
    // If no status selected, show all deployments
    // Otherwise, filter by matching status
    // Hint: Compare deployment.status with selectedStatus
  }
}

  4. Handle search events:

    methods: {
  handleSearch(searchTerms) {
    // Extract the status value from searchTerms array
    // searchTerms[0]?.value?.data contains the selected status
  }
}

Step 3: Understanding the Data Flow

  1. User clicks the status filter → dropdown shows your token's suggestions
  2. User selects "Failed" → handleSearch is called with the selected value
  3. selectedStatus is updated → filteredDeployments recomputes
  4. Table updates to show only failed deployments

Testing Your Implementation

Unit tests to write:

  1. Test that DeploymentStatusToken renders all statuses
  2. Test that filtering logic works for each status
  3. Test that clearing filters works
  4. Test edge cases (no deployments, all deployments filtered out)

Getting Help

  • Design patterns: Look at other filtered search implementations in the codebase
  • Component examples: Study job_status_token.vue and similar components
  • GitLab UI docs: Check component documentation for GlFilteredSearch props and events
  • Status styling: Look at existing CI status components for styling patterns

Edited by 🤖 GitLab Bot 🤖