HANA Cloud MCP Server

import { useState, useEffect } from 'react'; import axios from 'axios'; import toast from 'react-hot-toast'; import { motion, AnimatePresence } from 'framer-motion'; // Import components import VerticalSidebar from './layout/VerticalSidebar'; import DashboardView from './DashboardView'; import DatabaseListView from './DatabaseListView'; import ClaudeConfigTile from './ClaudeConfigTile' import ClaudeDesktopView from './ClaudeDesktopView' import ConnectionDetailsModal from './ConnectionDetailsModal'; // Import existing components import ConfigurationModal from './ConfigurationModal'; import EnvironmentSelector from './EnvironmentSelector'; import PathSetupModal from './PathSetupModal'; import { LoadingOverlay, GlassWindow } from './ui'; const API_BASE = 'http://localhost:3001/api'; const MainApp = () => { // State management const [activeView, setActiveView] = useState('dashboard'); const [hanaServers, setHanaServers] = useState({}); const [claudeServers, setClaudeServers] = useState([]); const [claudeConfigPath, setClaudeConfigPath] = useState(null); const [activeEnvironments, setActiveEnvironments] = useState({}); // UI State const [isConfigModalOpen, setIsConfigModalOpen] = useState(false); const [isPathSetupOpen, setIsPathSetupOpen] = useState(false) const [isConnectionDetailsOpen, setIsConnectionDetailsOpen] = useState(false) const [selectedConnection, setSelectedConnection] = useState(null); const [isEnvironmentSelectorOpen, setIsEnvironmentSelectorOpen] = useState(false); const [selectedServer, setSelectedServer] = useState(null); const [deploymentTarget, setDeploymentTarget] = useState(null); const [activeTab, setActiveTab] = useState('Production'); const [isLoading, setIsLoading] = useState(false); // Form data for multi-environment configuration const [formData, setFormData] = useState({ name: '', description: '', environments: { Production: { HANA_HOST: '', HANA_PORT: '443', HANA_USER: '', HANA_PASSWORD: '', HANA_SCHEMA: '', HANA_SSL: 'true', HANA_ENCRYPT: 'true', HANA_VALIDATE_CERT: 'true', LOG_LEVEL: 'info', ENABLE_FILE_LOGGING: 'true', ENABLE_CONSOLE_LOGGING: 'false' }, Development: { HANA_HOST: '', HANA_PORT: '443', HANA_USER: '', HANA_PASSWORD: '', HANA_SCHEMA: '', HANA_SSL: 'true', HANA_ENCRYPT: 'true', HANA_VALIDATE_CERT: 'false', LOG_LEVEL: 'debug', ENABLE_FILE_LOGGING: 'true', ENABLE_CONSOLE_LOGGING: 'true' }, Staging: { HANA_HOST: '', HANA_PORT: '443', HANA_USER: '', HANA_PASSWORD: '', HANA_SCHEMA: '', HANA_SSL: 'true', HANA_ENCRYPT: 'true', HANA_VALIDATE_CERT: 'true', LOG_LEVEL: 'info', ENABLE_FILE_LOGGING: 'true', ENABLE_CONSOLE_LOGGING: 'false' } } }); const [pathInput, setPathInput] = useState(''); // Load data on component mount useEffect(() => { loadData(); }, []); // Auto-refresh Claude data when Claude tab is opened (only if not initial load) useEffect(() => { if (activeView === 'claude' && claudeServers.length > 0) { // Only refresh if we already have data (prevents race condition on first load) // Silent refresh (no toast notification) refreshClaudeData(false); } }, [activeView]); const loadData = async () => { try { setIsLoading(true); await Promise.all([ loadHanaServers(), loadClaudeServers(), loadClaudeConfigPath(), loadActiveEnvironments() ]); } catch (error) { console.error('Error loading data:', error); toast.error('Failed to load data'); } finally { setIsLoading(false); } }; const refreshClaudeData = async (showToast = true) => { try { await Promise.all([ loadClaudeServers(), loadActiveEnvironments() ]); if (showToast) { toast.success('Configuration refreshed'); } } catch (error) { console.error('Error refreshing Claude data:', error); if (showToast) { toast.error('Failed to refresh configuration'); } } }; const loadHanaServers = async () => { try { const response = await axios.get(`${API_BASE}/hana-servers`); setHanaServers(response.data); } catch (error) { console.error('Error loading HANA servers:', error); } }; const loadClaudeServers = async () => { try { const response = await axios.get(`${API_BASE}/claude`); setClaudeServers(response.data); } catch (error) { console.error('Error loading Claude servers:', error); } }; const loadClaudeConfigPath = async () => { try { const response = await axios.get(`${API_BASE}/claude/config-path`); setClaudeConfigPath(response.data.configPath); if (!response.data.configPath) { setPathInput(response.data.defaultPath || ''); setIsPathSetupOpen(true); } } catch (error) { console.error('Error loading Claude config path:', error); } }; const loadActiveEnvironments = async () => { try { const response = await axios.get(`${API_BASE}/claude/active-environments`); setActiveEnvironments(response.data); } catch (error) { console.error('Error loading active environments:', error); } }; // Form handlers const handleFormChange = (environment, field, value) => { setFormData(prev => ({ ...prev, environments: { ...prev.environments, [environment]: { ...(prev.environments[environment] || {}), [field]: value } } })); }; const handleServerInfoChange = (field, value) => { setFormData(prev => ({ ...prev, [field]: value })); }; // Handle environment-specific updates const handleEnvironmentUpdate = (environments) => { setFormData(prev => ({ ...prev, environments: environments })); }; // Navigation handlers const handleViewChange = (view) => { setActiveView(view); // Handle special actions if (view === 'add-database') { openConfigModal(); return; } }; const handleQuickAction = (actionId) => { switch (actionId) { case 'add-database': openConfigModal(); break; case 'manage-databases': setActiveView('databases'); break; case 'claude-integration': setActiveView('claude'); break; default: console.warn(`Unknown quick action: ${actionId}`); } }; const handleBulkAction = (action, selectedItems) => { switch (action) { case 'deploy': toast.success(`Adding ${selectedItems.length} database(s) to Claude`); break; case 'test': toast.success(`Testing connections for ${selectedItems.length} database(s)`); break; case 'export': toast.success(`Exporting ${selectedItems.length} database configuration(s)`); break; default: console.warn(`Unknown bulk action: ${action}`); } }; const handleConfigPathChange = async (newPath) => { try { // Update the config path via API await axios.post(`${API_BASE}/claude/config-path`, { configPath: newPath }); // Update local state setClaudeConfigPath(newPath); toast.success('Configuration path updated successfully'); // Refresh Claude data to reflect changes await refreshClaudeData(false); } catch (error) { console.error('Error updating config path:', error); toast.error('Failed to update configuration path'); } }; // Modal handlers const openConfigModal = (server = null) => { if (server) { setFormData(server); setSelectedServer(server); // Set active tab to first available environment when editing const envKeys = Object.keys(server.environments || {}); setActiveTab(envKeys.length > 0 ? envKeys[0] : null); } else { // Reset form for new server setFormData({ name: '', description: '', environments: {} }); setSelectedServer(null); setActiveTab(null); } setIsConfigModalOpen(true); }; const closeConfigModal = () => { setIsConfigModalOpen(false); setSelectedServer(null); setActiveTab(null); }; // Server operations const saveServer = async () => { try { setIsLoading(true); if (selectedServer) { await axios.put(`${API_BASE}/hana-servers/${selectedServer.name}`, formData); toast.success('Database updated successfully'); } else { await axios.post(`${API_BASE}/hana-servers`, formData); toast.success('Database created successfully'); } closeConfigModal(); await loadHanaServers(); } catch (error) { console.error('Error saving server:', error); toast.error(error.response?.data?.error || 'Failed to save database'); } finally { setIsLoading(false); } }; const deleteServer = async (serverName) => { try { setIsLoading(true); await axios.delete(`${API_BASE}/hana-servers/${serverName}`); toast.success('Database deleted successfully'); await loadHanaServers(); } catch (error) { console.error('Error deleting server:', error); toast.error('Failed to delete database'); } finally { setIsLoading(false); } }; // Claude operations const openEnvironmentSelector = (serverName) => { setDeploymentTarget(serverName); setIsEnvironmentSelectorOpen(true); }; const deployToClaude = async (environment) => { try { setIsLoading(true); await axios.post(`${API_BASE}/apply-to-claude`, { serverName: deploymentTarget, environment: environment }); toast.success(`Added ${deploymentTarget} (${environment}) to Claude Desktop configuration`); setIsEnvironmentSelectorOpen(false); setDeploymentTarget(null); await loadClaudeServers(); await loadActiveEnvironments(); } catch (error) { console.error('Error adding to Claude:', error); toast.error(error.response?.data?.error || 'Failed to add to Claude configuration'); } finally { setIsLoading(false); } }; const removeFromClaude = async (serverName) => { try { setIsLoading(true); await axios.delete(`${API_BASE}/claude/${encodeURIComponent(serverName)}`); toast.success(`Removed ${serverName} from Claude Desktop`); await loadClaudeServers(); await loadActiveEnvironments(); } catch (error) { console.error('Error removing from Claude:', error); toast.error('Failed to remove from Claude'); } finally { setIsLoading(false); } }; // Claude path operations const saveClaudePath = async () => { try { setIsLoading(true); await axios.post(`${API_BASE}/claude/config-path`, { configPath: pathInput }); setClaudeConfigPath(pathInput); setIsPathSetupOpen(false); toast.success('Claude config path saved successfully'); await loadClaudeServers(); } catch (error) { console.error('Error saving Claude path:', error); toast.error('Failed to save Claude config path'); } finally { setIsLoading(false); } }; // Render main content based on active view const renderMainContent = () => { switch (activeView) { case 'dashboard': return ( <DashboardView hanaServers={hanaServers} claudeServers={claudeServers} activeEnvironments={activeEnvironments} onQuickAction={handleQuickAction} /> ); case 'databases': return ( <DatabaseListView hanaServers={hanaServers} claudeServers={claudeServers} activeEnvironments={activeEnvironments} onEditServer={openConfigModal} onAddToClaudeServer={openEnvironmentSelector} onDeleteServer={deleteServer} onBulkAction={handleBulkAction} onAddDatabase={() => openConfigModal()} /> ); case 'claude': return ( <ClaudeDesktopView claudeConfigPath={claudeConfigPath} claudeServers={claudeServers} activeEnvironments={activeEnvironments} onSetupPath={() => setIsPathSetupOpen(true)} onRemoveConnection={removeFromClaude} onViewConnection={(connection) => { setSelectedConnection(connection); setIsConnectionDetailsOpen(true); }} onRefresh={refreshClaudeData} onConfigPathChange={handleConfigPathChange} /> ); default: return ( <DashboardView hanaServers={hanaServers} claudeServers={claudeServers} activeEnvironments={activeEnvironments} onQuickAction={handleQuickAction} /> ); } }; return ( <GlassWindow maxWidth="full" maxHeight="full"> <div className="flex h-full bg-transparent p-3 sm:p-4 overflow-hidden"> {/* Loading Overlay */} {isLoading && ( <LoadingOverlay message="Processing your request..." /> )} {/* Floating Sidebar */} <div className="flex-shrink-0 h-full"> <VerticalSidebar activeView={activeView} onViewChange={handleViewChange} databaseCount={Object.keys(hanaServers).length} activeConnections={claudeServers.length} claudeConfigured={!!claudeConfigPath} /> </div> {/* Main Content */} <div className="flex-1 flex flex-col overflow-hidden bg-white/50 backdrop-blur-sm rounded-r-2xl sm:rounded-r-3xl ml-3"> {/* Main Content Area */} <main className="flex-1 overflow-hidden p-4 sm:p-6 pb-8"> <AnimatePresence mode="wait"> <motion.div key={activeView} initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -20 }} transition={{ duration: 0.2 }} className="h-full" > {renderMainContent()} </motion.div> </AnimatePresence> </main> </div> </div> {/* Modals */} {isConfigModalOpen && ( <ConfigurationModal isOpen={isConfigModalOpen} onClose={closeConfigModal} server={selectedServer} formData={formData} activeTab={activeTab} setActiveTab={setActiveTab} onFormChange={handleFormChange} onServerInfoChange={handleServerInfoChange} onSave={saveServer} isLoading={isLoading} /> )} {isEnvironmentSelectorOpen && deploymentTarget && ( <EnvironmentSelector isOpen={isEnvironmentSelectorOpen} onClose={() => { setIsEnvironmentSelectorOpen(false); setDeploymentTarget(null); }} serverName={deploymentTarget} environments={hanaServers[deploymentTarget]?.environments || {}} activeEnvironment={activeEnvironments[deploymentTarget]} onDeploy={deployToClaude} isLoading={isLoading} /> )} {isPathSetupOpen && ( <PathSetupModal isOpen={isPathSetupOpen} onClose={() => setIsPathSetupOpen(false)} pathInput={pathInput} setPathInput={setPathInput} onSave={saveClaudePath} isLoading={isLoading} /> )} <ConnectionDetailsModal isOpen={isConnectionDetailsOpen} onClose={() => { setIsConnectionDetailsOpen(false); setSelectedConnection(null); }} connection={selectedConnection} /> </GlassWindow> ); }; export default MainApp;