Pending Review

Pending Review from User Experience (UX)

Connector Component

Overview

The Connector component provides a comprehensive edge appliance management system for managing Progress infrastructure connections and deployments. This solution component combines data management, wizard workflows, and API integration to deliver enterprise-grade connector lifecycle management with real-time monitoring and configuration capabilities.

Core Capabilities

Edge Appliance Management - Complete lifecycle management of connector and collector appliances with CRUD operations
Real-time Status Monitoring - Live appliance status tracking with booting, updating, installing, online, and ready states
Configuration Wizard Integration - Multi-step deployment workflows with guided setup and validation processes
Context-Aware State Management - Centralized EdgeContext provider for consistent state across all connector views
Multi-Product Support - Support for LM360, WUG360, and CHEF360 product deployments with different configurations
Hypervisor Integration - Support for VMware, KVM, Nutanix, Hyper-V, AWS, and Azure deployment targets

When to use Connector:

Enterprise Edge Deployments - Managing distributed appliance infrastructure across multiple locations and environments
Infrastructure Automation - Automating connector provisioning, configuration, and deployment workflows for IT operations
Monitoring Dashboards - Building comprehensive infrastructure monitoring interfaces with real-time status updates
IT Operations Centers - Centralizing edge appliance management, troubleshooting, and maintenance activities

When not to use Connector:

Simple API Integrations - Use basic HTTP client components for straightforward API connections without appliance management
Static Configuration - Consider simpler alternatives for applications that don't require dynamic connector lifecycle management
Non-Enterprise Environments - Use lighter-weight solutions for small-scale deployments without complex infrastructure needs

Basic Implementation

React 18React 19+AngularPure JavaScript

import React, { useState } from 'react';
import { PwcConnectors } from '@progress-i360/pwc-react';

function ConnectorManagement() {
  const [connectors, setConnectors] = useState([
    { id: 1, name: 'Edge Connector 1', status: 'online' },
    { id: 2, name: 'Edge Connector 2', status: 'offline' }
  ]);

  const handleConnectorUpdate = (id: number, status: string) => {
    setConnectors(prev => prev.map(conn => 
      conn.id === id ? { ...conn, status } : conn
    ));
  };

  return (
      <PwcConnectors
        baseApiUrl="/api/v1/connectors"
        connectors={connectors}
        onConnectorUpdate={handleConnectorUpdate}
      />
  );
}

import { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react';
import '@progress-i360/progress-web-components/connectors';

function ConnectorDeployment() {
  const [deploymentState, setDeploymentState] = useState({
    products: ['LM360', 'WUG360'],
    isDeploying: false
  });

  const deferredState = useDeferredValue(deploymentState);
  const { products, isDeploying } = deferredState;
  const connectorsRef = useRef<(HTMLElement & { products: string[]; isDeploying: boolean }) | null>(null);

  const handleDeployment = useCallback((event: CustomEvent<{ connectorId: string; product: string }>) => {
    const { connectorId, product } = event.detail;
    console.log(`Deploying ${product} to connector ${connectorId}`);
    setDeploymentState(prev => ({ ...prev, isDeploying: true }));
    setTimeout(() => {
      setDeploymentState(prev => ({ ...prev, isDeploying: false }));
    }, 2000);
  }, []);

  useEffect(() => {
    if (connectorsRef.current) {
      connectorsRef.current.products = products;
      connectorsRef.current.isDeploying = isDeploying;
    }
  }, [products, isDeploying]);

  return (
      <pwc-connectors
        ref={connectorsRef}
        base-api-url="/api/v1/connectors"
        onPwcDeploy={handleDeployment}
      ></pwc-connectors>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/connectors";
import "@progress-i360/progress-web-components/action-bar";
import "@progress-i360/progress-web-components/button";

@Component({
  selector: 'connector-demo',
  template: `
    <pwc-connectors [baseApiUrl]="apiUrl" [products]="products"></pwc-connectors>
    <pwc-action-bar heading="Edge Appliances" [rowCount]="applianceCount">
      <pwc-button slot="actions" label="Add Appliance" variant="primary" (pwc-click)="addAppliance()"></pwc-button>
    </pwc-action-bar>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ConnectorDemo {
  apiUrl = "/mockedgeapi";
  products = ["LM360", "WUG360", "CHEF360"];
  applianceCount = 3;

  addAppliance() {
    this.applianceCount++;
  }
}

// Create connector management with API integration
const connectors = document.createElement('pwc-connectors');
connectors.setAttribute('base-api-url', '/edgeapi');

// Configure supported products for deployment
const products = ['LM360', 'WUG360', 'CHEF360'];
connectors.products = products;

// Monitor appliance status changes
connectors.addEventListener('pwc-appliance-status-changed', (event) => {
  console.log('Appliance status updated:', event.detail);
});

// Handle appliance lifecycle events  
connectors.addEventListener('pwc-appliance-deleted', (event) => {
  console.log('Appliance removed:', event.detail.applianceId);
});

document.body.appendChild(connectors);

Usage Patterns

Appliance Lifecycle Management - Complete management of connector and collector appliances from deployment to decommissioning
Multi-Environment Deployments - Managing appliances across development, staging, and production environments with consistent workflows
Status Monitoring Dashboards - Real-time monitoring of appliance health with status indicators and automated status polling
Guided Configuration Workflows - Step-by-step wizard-based setup for complex appliance configurations and deployments

Best Practices

Content Strategy Guidelines

Clear Status Communication - Use descriptive status labels and visual indicators that clearly communicate appliance health and deployment progress
Consistent Terminology - Maintain consistent language for appliance types, statuses, and actions across all connector management interfaces
Progressive Disclosure - Present complex configuration options in logical steps that build upon previous selections and context
Error Message Clarity - Provide specific, actionable error messages that guide users toward resolution steps

Performance Optimization

Efficient State Management - Utilize EdgeContext provider pattern to minimize unnecessary re-renders and API calls across components
API Call Optimization - Implement proper polling strategies for status updates and batch operations for bulk appliance management
Lazy Loading - Load connector views and configuration data only when needed to improve initial load performance
Caching Strategy - Cache appliance data and status information appropriately to reduce server load and improve response times

Integration Architecture

Modular View Architecture - Structure connector views (Summary, Editor, Config, Deploy, Download) as independent, reusable components
Context-Driven Design - Leverage EdgeContext for consistent state management across all connector management workflows
API Abstraction - Implement clean API layer with proper error handling, retry logic, and response validation
Flexible Configuration - Support multiple products and deployment targets through configurable properties and extensible architecture

Common Use Cases

Data Table Headers

Appliance Management Tables - Display connector and collector appliances with status, name, and type columns for efficient management
Status Monitoring Views - Real-time status updates with visual indicators for booting, updating, installing, online, and ready states
Bulk Operations Interface - Action bars for performing batch operations on multiple selected appliances simultaneously

Search Result Sections

Appliance Discovery - Search and filter capabilities across large deployments to quickly locate specific appliances or groups
Configuration Search - Find appliances by configuration parameters, deployment settings, or assigned products
Status-Based Filtering - Filter appliances by current status to focus on specific operational concerns or maintenance needs

Infrastructure Overview - High-level dashboard widgets showing appliance distribution, health metrics, and deployment statistics
Operational Metrics - Real-time performance indicators for appliance connectivity, resource utilization, and service availability
Deployment Progress - Status widgets showing ongoing deployments, configuration changes, and system updates across the infrastructure

Troubleshooting

Common Issues

Actions Not Triggering

Problem: Appliance management actions (edit, delete, deploy) don't respond or fail to execute properly

Solutions:

Verify that EdgeContext is properly provided and consumed by connector components
Check that API endpoints are correctly configured with baseApiUrl property
Ensure that event handlers are properly bound to component methods and context

Actions Not Visible

Problem: Management actions or appliance data don't appear in the interface

Solutions:

Confirm that appliance data is being fetched successfully from the API endpoints
Check that connector views are properly imported and registered in the component structure
Verify that products array is configured correctly for the target deployment environment

Layout Issues

Problem: Connector management interface doesn't display correctly or has responsive layout problems

Solutions:

Ensure that required CSS styles and design tokens are properly loaded
Check that container components have appropriate flex layout and spacing configurations
Verify that table and wizard components have proper responsive breakpoint handling

Icon Problems

Problem: Status icons, action buttons, or visual indicators don't display correctly

Solutions:

Confirm that icon fonts and assets are properly bundled and available
Check that status mapping objects correctly map appliance states to visual variants
Verify that action buttons have proper icon keys and variant configurations matching the design system

Implementation Support

Framework Integration - Complete examples and integration guides for React, Angular, and vanilla JavaScript implementations
EdgeContext Integration - Comprehensive state management patterns using the provided context system for appliance management
API Integration Support - Full documentation for REST API endpoints, error handling, and data management patterns

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.

Connector Component

Overview

Core Capabilities

Basic Implementation

Usage Patterns

Best Practices

Content Strategy Guidelines

Performance Optimization

Integration Architecture

Common Use Cases

Data Table Headers

Search Result Sections

Dashboard Widget Headers

Troubleshooting

Common Issues

Actions Not Triggering

Actions Not Visible

Layout Issues

Icon Problems

Implementation Support

Resources

Storybook Documentation