157 lines
No EOL
4.8 KiB
Markdown
157 lines
No EOL
4.8 KiB
Markdown
# CVS Repository Browser UI
|
|
|
|
A modern, responsive web-based interface for browsing CVS repositories. Built with vanilla HTML, CSS, and JavaScript.
|
|
|
|
## Features
|
|
|
|
- **Repository Tree Navigation**: Browse the complete repository structure with an intuitive file tree
|
|
- **File Viewing**: Display file contents with syntax highlighting support
|
|
- **Revision History**: View complete revision history for any file with author, date, and change information
|
|
- **Diff Viewer**: Compare different versions of files with color-coded diff output
|
|
- **Real-time Status**: Connection status indicator showing API health
|
|
- **Responsive Design**: Works on desktop and mobile devices
|
|
|
|
## Architecture
|
|
|
|
### File Structure
|
|
|
|
```
|
|
ui/
|
|
├── index.html # Main HTML structure
|
|
├── styles.css # Complete styling and responsive design
|
|
├── api.js # API client for backend communication
|
|
├── ui.js # UI management and DOM manipulation
|
|
├── app.js # Main application logic and orchestration
|
|
└── README.md # This file
|
|
```
|
|
|
|
### Components
|
|
|
|
#### `api.js` - API Client
|
|
- Handles all communication with the backend `/v1` endpoints
|
|
- Methods:
|
|
- `getTree(module)` - Get repository structure
|
|
- `getFileContent(filePath, revision)` - Get file contents
|
|
- `getFileHistory(filePath)` - Get revision history
|
|
- `getDiff(filePath, rev1, rev2)` - Get diff between revisions
|
|
- `getHealth()` - Check API health
|
|
|
|
#### `ui.js` - UI Manager
|
|
- Manages DOM elements and view switching
|
|
- Handles tree rendering and navigation
|
|
- Displays file content, history, and diffs
|
|
- Provides utility functions for HTML escaping and formatting
|
|
|
|
#### `app.js` - Application Logic
|
|
- Orchestrates API calls and UI updates
|
|
- Manages application state
|
|
- Handles user interactions and event listeners
|
|
- Initializes the application on page load
|
|
|
|
#### `styles.css` - Styling
|
|
- Modern, clean design with CSS variables for theming
|
|
- Responsive layout that adapts to different screen sizes
|
|
- Color-coded diff display
|
|
- Smooth transitions and hover effects
|
|
|
|
## Usage
|
|
|
|
### Starting the Application
|
|
|
|
The UI is automatically served by the Flask application when you start the CVS Proxy:
|
|
|
|
```bash
|
|
python -m cvs_proxy.app
|
|
```
|
|
|
|
Then navigate to `http://localhost:5000` in your browser.
|
|
|
|
### Navigation
|
|
|
|
1. **Browse Repository**: The left sidebar shows the repository tree. Click on any file to view its contents.
|
|
|
|
2. **View File**: When a file is selected, its contents are displayed in the main area with action buttons.
|
|
|
|
3. **View History**: Click the "📋 History" button to see all revisions of the current file. Click on any revision to view that version.
|
|
|
|
4. **Compare Versions**: Click the "🔀 Diff" button to compare two revisions. Select the revisions from the dropdowns and click "Generate Diff".
|
|
|
|
5. **Refresh**: Click the refresh button (🔄) in the sidebar to reload the repository tree.
|
|
|
|
## Styling
|
|
|
|
The UI uses CSS custom properties (variables) for easy theming:
|
|
|
|
```css
|
|
--primary-color: #2563eb
|
|
--secondary-color: #6b7280
|
|
--success-color: #10b981
|
|
--danger-color: #ef4444
|
|
--bg-color: #f9fafb
|
|
--surface-color: #ffffff
|
|
--border-color: #e5e7eb
|
|
--text-primary: #111827
|
|
--text-secondary: #6b7280
|
|
```
|
|
|
|
## Responsive Design
|
|
|
|
The UI is fully responsive and adapts to different screen sizes:
|
|
|
|
- **Desktop**: Sidebar on the left, main content on the right
|
|
- **Tablet/Mobile**: Sidebar collapses to a smaller height, content stacks vertically
|
|
|
|
## Error Handling
|
|
|
|
The application includes comprehensive error handling:
|
|
|
|
- Connection errors are displayed in the status indicator
|
|
- API errors are shown in the main content area
|
|
- Loading states provide user feedback during operations
|
|
- Graceful fallbacks for missing data
|
|
|
|
## Browser Compatibility
|
|
|
|
- Chrome/Chromium (latest)
|
|
- Firefox (latest)
|
|
- Safari (latest)
|
|
- Edge (latest)
|
|
|
|
## Development
|
|
|
|
### Adding New Features
|
|
|
|
1. **New API Endpoints**: Add methods to the `CVSProxyAPI` class in `api.js`
|
|
2. **UI Changes**: Update the HTML in `index.html` and add styles to `styles.css`
|
|
3. **Logic Changes**: Modify the `CVSRepositoryBrowser` class in `app.js`
|
|
4. **UI Utilities**: Add helper methods to the `UIManager` class in `ui.js`
|
|
|
|
### Debugging
|
|
|
|
Open the browser's Developer Console (F12) to see:
|
|
- API requests and responses
|
|
- JavaScript errors
|
|
- Application state logs
|
|
|
|
## Performance Considerations
|
|
|
|
- File content is loaded on-demand
|
|
- Tree structure is built once and cached
|
|
- Diff generation is performed server-side
|
|
- Minimal DOM manipulation for smooth interactions
|
|
|
|
## Security
|
|
|
|
- HTML content is properly escaped to prevent XSS attacks
|
|
- API calls use standard HTTP methods
|
|
- No sensitive data is stored in the browser
|
|
- CORS headers are handled by the Flask backend
|
|
|
|
## Future Enhancements
|
|
|
|
- Search functionality for files
|
|
- Syntax highlighting for code files
|
|
- Blame view showing who changed each line
|
|
- Branch/tag support
|
|
- Download file functionality
|
|
- Keyboard shortcuts for navigation |