# API Normalization UI

Enhanced UI components for the API Normalization module.

## Overview

API Normalization UI is a **submodule** that provides enhanced user interface components, dashboards, and administrative tools for managing and monitoring API normalization functionality.

## Features

- Enhanced configuration forms
- API provider status dashboard
- Visual API response inspector
- Real-time API monitoring
- Request/response logging UI
- Provider comparison tools
- Performance metrics visualization
- API testing interface

## Requirements

- Drupal 10.3+ or 11.x
- API Normalization (parent module)

## Installation

```bash
drush en api_normalization api_normalization_ui
```

## Configuration

Navigate to **Admin > Configuration > Web Services > API Normalization > UI Settings**

Path: `/admin/config/services/api-normalization/ui`

## UI Components

### Dashboard

Main dashboard at `/admin/config/services/api-normalization/dashboard` provides:
- Provider status overview
- Recent API activity
- Success/error rates
- Performance metrics
- Quick action buttons

### API Inspector

Interactive tool for testing and debugging API calls:
- Live API request testing
- Response visualization (JSON, formatted)
- Normalized vs. raw response comparison
- Request history
- Copy/export functionality

### Provider Management

Enhanced provider configuration interface:
- Visual provider cards
- Quick enable/disable toggles
- Connection status indicators
- Configuration wizards
- Bulk operations

### Monitoring Tools

Real-time monitoring interfaces:
- Active request tracking
- Error log viewer
- Performance graphs
- Rate limit monitoring
- Quota usage displays

## Usage

### Testing API Endpoints

1. Navigate to **API Normalization > UI > Inspector**
2. Select API provider
3. Choose endpoint
4. Configure request parameters
5. Click "Test Request"
6. View normalized response

### Monitoring API Activity

1. Go to **API Normalization > Dashboard**
2. View real-time metrics
3. Filter by provider/date range
4. Export reports if needed

### Managing Providers

1. Navigate to **API Normalization > Providers**
2. View provider status cards
3. Quick-enable/disable providers
4. Configure provider settings
5. Test connections

## Permissions

- **Access API Normalization UI**: View dashboards and inspector
- **Administer API Normalization UI**: Configure UI settings
- **Test API endpoints**: Use the API inspector tool
- **View API logs**: Access monitoring and logs

Configure at **Admin > People > Permissions**

## Theming

The UI components use Drupal's standard admin theme and can be customized:

```css
/* Custom styling for API Normalization UI */
.api-normalization-dashboard {
  /* Your custom styles */
}

.api-provider-card {
  /* Provider card styling */
}
```

## JavaScript APIs

The module provides JavaScript APIs for custom UI development:

```javascript
// API Inspector widget
Drupal.apiNormalization.inspector.init({
  container: '#api-inspector',
  provider: 'openai',
  endpoint: 'chat'
});

// Dashboard widget
Drupal.apiNormalization.dashboard.refresh();
```

## Related Modules

- **api_normalization** - Parent module (required)
- **api_normalization_core** - Core functionality
- **api_normalization_feeds** - Feeds integration
- **api_normalization_graphql** - GraphQL support
- **apidog_integration** - Apidog platform integration

## Troubleshooting

### UI Not Displaying

1. Clear Drupal cache: `drush cr`
2. Check module is enabled: `drush pml | grep api_normalization_ui`
3. Verify permissions are granted
4. Check JavaScript console for errors

### Dashboard Data Not Loading

Check:
1. API Normalization parent module is configured
2. API providers are properly configured
3. Database tables are installed
4. Check watchdog logs: `drush wd-show`

### Performance Issues

For large API activity logs:
1. Enable log pruning in settings
2. Adjust log retention period
3. Archive old logs
4. Consider using Views for custom reports

## Accessibility

This module follows Drupal accessibility standards:
- ARIA labels on all interactive elements
- Keyboard navigation support
- Screen reader compatible
- High contrast mode support

## Browser Support

- Chrome/Chromium (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Edge (latest 2 versions)

## Documentation

- [API Normalization Documentation](../../README.md)
- [Drupal UI Patterns](https://www.drupal.org/docs/develop/user-interface-standards)

## Support

- Issue queue: https://www.drupal.org/project/issues/api_normalization
- Documentation: https://www.drupal.org/docs/contributed-modules/api-normalization

## License

GPL-2.0-or-later
