Skip to main content

Traffic Shifting

Overview​

Traffic Shifting (also called Traffic Management) is a feature that enables users to distribute network traffic across multiple microservices using weighted routing. It creates a virtual service (traffic shifter) that acts as a single endpoint and intelligently distributes incoming requests to multiple backend microservices based on configurable percentage weights. This is useful for A/B testing, canary deployments, blue-green deployments, and gradual rollouts of new service versions.

Access & Location​

  • Route: ?panel=traffic-shifting
  • Navigation: Network → Traffic Shifting
  • Access Requirements:
    • Users can view their own traffic shifters
    • Admin roles can view all traffic shifters (controlled by TrafficShiftingRoles.filters.email)
    • Cancel action requires ownership or specific admin role (TrafficShiftingRoles.actions.cancel)
  • Feature Flags: None

Key Capabilities​

Create Traffic Shifter​

Create a virtual service endpoint that distributes traffic across multiple microservices with configurable weight percentages. Users can add up to 5 microservices and define how traffic is split between them (e.g., 70% to Service A, 30% to Service B).

Update Traffic Distribution​

Modify the traffic weight distribution for existing traffic shifters. Users can add or remove microservices, adjust percentage weights, and update descriptions without recreating the traffic shifter.

Cancel Traffic Shifter​

Deactivate a traffic shifter to stop routing traffic through the virtual service. This is a permanent action that removes the traffic splitting configuration.

Monitor Traffic Distribution​

View active traffic shifters with their associated microservices, current traffic distribution percentages, status, and endpoint URLs. The interface uses a hierarchical tree view where each traffic shifter can be expanded to show its constituent microservices.

User Interface​

Main View​

The main panel displays a hierarchical data grid showing all traffic shifters with expandable rows revealing the microservices behind each shifter. The table shows:

  • Traffic shifter name and subdomain
  • Overall status (Active/Inactive)
  • Distribution percentages for each microservice
  • Endpoint URLs
  • Individual microservice status and logs
  • User ownership information

Dialogs & Modals​

  1. Traffic Shifting Create Dialog

    • Purpose: Create a new traffic shifter with multiple microservices
    • Fields:
      • Traffic Shifter Name (required): Display name for the traffic shifter
      • Name (subdomain) (required): Subdomain where the traffic shifter will be hosted (alphanumeric, dashes, dots, max 63 chars)
      • Description: Optional description
      • Services: Select up to 5 microservices to include
      • Traffic Weights: Percentage distribution for each service (must total 100%)
    • Actions:
      • Add Service: Add another microservice to the distribution
      • Evenly Distribute Traffic: Automatically balance weights equally across all services
      • Pin/Unpin Weight: Lock a service's weight percentage to prevent automatic adjustments
      • Create Traffic Shifter: Submit and create the traffic shifter
    • Features:
      • Random webhook URL generator (creates public URLs ending in -webhook or -public)
      • Live summary panel showing configuration before creation
      • Smart weight adjustment: When adjusting one service's weight, others are automatically recalculated

  2. Cancel Traffic Shift Dialog

    • Purpose: Permanently deactivate a traffic shifter
    • Fields: Confirmation message
    • Actions: Cancel (deactivate) or Close (abort)

  3. Traffic Shifter Detail Panel

    • Purpose: View and edit an existing traffic shifter
    • Fields:
      • Description (editable)
      • Service list with weight sliders
    • Actions:
      • Adjust weights using sliders or numeric input
      • Add/remove services
      • Evenly distribute traffic
      • Reset to original values
      • Confirm changes

  4. Traffic Shifting Input Component

    • Purpose: Manage the list of microservices and their traffic weights
    • Features:
      • Service autocomplete for selecting microservices
      • Weight slider (0-100%) with numeric input
      • Pin functionality to lock specific weights during adjustments
      • Delete service button (disabled when pinned)
      • Intelligent weight redistribution algorithm

  5. Traffic Shifter Weight Input Slider

    • Purpose: Fine-tune individual service traffic percentages
    • Features:
      • Slider control (0-100%)
      • Numeric text input with percentage symbol
      • Automatic clamping to valid range (0-100)
      • Integrated with smart redistribution logic

  6. Traffic Table Filter Dialog

    • Purpose: Filter traffic shifters by various criteria
    • Fields:
      • Status: Active/Inactive
      • Traffic Shifter ID or name
      • Pipeline YAML Path
      • Timeline filters (Started/Completed with date range)
    • Actions: Apply filters or Cancel

Tables & Data Grids​

  1. Current Traffic Shifting Table
    • Columns:
      • Actions: Menu with Cancel option (for traffic shifters), Events/Logs (for microservices)
      • Name (subdomain/service): Display name or job name (clickable to view details)
      • Status: Active/Inactive for traffic shifters, standard status for microservices
      • Logs: Grafana link and events/logs dialog for microservices
      • Distribution: Traffic percentage (100% for parent, specific % for children)
      • ID: Traffic shifter or microservice ID (hidden by default)
      • Endpoint: Host URL for traffic shifter, service URL for microservices
      • Port: Exposed port for microservices
      • Pipeline YAML Path: Path to the pipeline definition
      • Start: Start timestamp
      • User Email: Owner email
    • Actions:
      • Click name to view details
      • Expand/collapse traffic shifter rows to show microservices
      • Cancel traffic shifter from actions menu
    • Filtering:
      • Filter by status, ID, name, timeline, YAML path
      • Email filter automatically applied based on user role
      • Filter chips display active filters
      • Reset filters button

Technical Details​

GraphQL Operations​

Queries:

  • getTrafficSplit - Retrieves traffic shifters with pagination, filtering, and associated microservice information including weight distribution

Mutations:

  • createTrafficSplit - Creates a new traffic shifter with display name, host, service-to-weight mapping, namespace, and description
  • updateTrafficSplit - Updates an existing traffic shifter's display name, description, and service weight distribution
  • deactivateTrafficSplit - Deactivates/cancels a traffic shifter by ID, namespace, and name

Subscriptions:

  • None

Component Structure​

  • Main Component: components/TrafficShifting/TrafficShiftingPanel.tsx
  • Dialogs: components/TrafficShifting/Dialogs/
    • TrafficShiftingCreateDialog.tsx - Create new traffic shifter
    • CancelTrafficShiftDialog.tsx - Cancel/deactivate traffic shifter
    • TrafficShifterDetailPanel.tsx - View and edit traffic shifter details
    • TrafficShiftingInput.tsx - Manage services and weights
    • TrafficShifterWeightInputSlider.tsx - Weight adjustment slider
    • TrafficTableFilterDialog.tsx - Filter traffic shifters
  • Tables: components/TrafficShifting/
    • TrafficShiftingTables.tsx - Query and data management
    • CurrentTrafficShiftingTable.tsx - Table display and columns
  • Details: components/TrafficShifting/TrafficShiftingDetails.tsx

State Management​

The feature uses Jotai atoms for state management:

  • CurrentTrafficAtom - Stores traffic shifter data
  • CurrentTrafficTablePageAtom - Current table page
  • CurrentTrafficFiltersAtom - Active filters
  • CurrentTrafficDataLoadingAtom - Loading state
  • TrafficPanelSectionAtom - Current panel section (table/create/details)
  • TrafficDetailsValueAtom - Selected traffic shifter for details view
  • JobsDetailsValueAtom - Selected microservice for details view

Weight Distribution Algorithm​

The traffic shifter implements an intelligent weight redistribution algorithm:

  1. When a user adjusts one service's weight, the system automatically adjusts other services to maintain 100% total
  2. Pinned services are excluded from automatic adjustments
  3. Adjustments prioritize services after the modified service in the list
  4. If no subsequent services exist, adjustments are distributed across all unpinned services
  5. The algorithm handles edge cases to ensure weights always total exactly 100%

Common Workflows​

Creating a Basic Traffic Shifter​

  1. Click "Create Traffic Shifter" button
  2. Enter a Traffic Shifter Name
  3. Enter or generate a subdomain name
  4. Add 2+ microservices using the "Add Service" button
  5. Select microservices from the dropdown
  6. Adjust traffic weights using sliders (or use "Evenly Distribute Traffic")
  7. Review the summary panel
  8. Click "Create Traffic Shifter"

Performing a Canary Deployment​

  1. Create a traffic shifter with your stable service at 95% and canary service at 5%
  2. Monitor metrics and logs for both services
  3. View details of the traffic shifter
  4. Gradually increase the canary service weight (e.g., 10%, 25%, 50%)
  5. Use "Confirm" to apply changes
  6. Continue monitoring and adjusting until canary is at 100% or rollback if issues occur

A/B Testing Multiple Versions​

  1. Create a traffic shifter with two service versions
  2. Set equal weights (50/50) or desired distribution
  3. Pin both weights to prevent accidental changes
  4. Monitor user behavior and metrics through logs
  5. Adjust distribution based on results
  6. Remove underperforming version when test completes

Updating Traffic Distribution​

  1. Click on a traffic shifter name to view details
  2. Adjust weights using sliders or numeric inputs
  3. Add new services with "+" button if needed
  4. Remove services using the delete icon
  5. Use "Evenly Distribute Traffic" for equal distribution
  6. Click "Confirm" to apply changes
  7. Use "Reset" to revert to previous configuration

Filtering Traffic Shifters​

  1. Click "Filter" button in the toolbar
  2. Select status (Active/Inactive)
  3. Enter traffic shifter ID or name
  4. Set timeline ranges (Started/Completed dates)
  5. Click "Filter" to apply
  6. View active filters as chips
  7. Click "Reset Filters" to clear all filters
  • Microservices/Pipeline Jobs - The backend microservices that traffic shifters route to
  • Network/Ingress Configuration - Traffic shifters create Kubernetes VirtualService resources
  • Stack Components - Pre-configured services that can be used behind traffic shifters

Notes & Tips​

  • Subdomain Naming: Subdomains ending in -webhook or -public are publicly accessible without authentication
  • Weight Pinning: Pin service weights when you want specific services to maintain exact percentages during adjustments
  • Maximum Services: Up to 5 microservices can be added to a single traffic shifter
  • Weight Totals: The system automatically ensures weights always total 100%
  • Public URLs: Random webhook URLs can be generated for public-facing traffic shifters
  • Hierarchical View: Expand traffic shifter rows to see individual microservice status and logs
  • Grafana Integration: Each microservice provides a direct link to Grafana logs
  • Email Filtering: Non-admin users automatically see only their own traffic shifters
  • Namespace: Traffic shifters are deployed to the hyperplane-pipelines namespace
  • Virtual Service: Each traffic shifter creates a Kubernetes VirtualService with the name format hyperplane-traffic-shifter-{id-first-6-chars}
  • Smart Distribution: When adjusting weights, unpinned services are automatically recalculated to maintain 100% total
  • Deactivation: Canceling a traffic shifter is permanent and immediately stops traffic routing
Last updated on by chyuen-devsentient