flowyml 1.7.2__py3-none-any.whl → 1.8.0__py3-none-any.whl

flowyml/ui/frontend/src/app/settings/page.jsx

@@ -1,315 +1,329 @@
 import React, { useState, useEffect } from 'react';
-import { Key, Copy, Trash2, Plus, Eye, EyeOff, Calendar, Shield, CheckCircle2 } from 'lucide-react';
+import {
+    Settings as SettingsIcon,
+    Palette,
+    Bell,
+    Database,
+    Shield,
+    Globe,
+    Zap,
+    Clock,
+    Save,
+    RefreshCw,
+    CheckCircle2,
+    Moon,
+    Sun,
+    Monitor
+} from 'lucide-react';
 import { Card } from '../../components/ui/Card';
 import { Button } from '../../components/ui/Button';
 import { Badge } from '../../components/ui/Badge';
-import { format } from 'date-fns';
 
 export function Settings() {
-    const [tokens, setTokens] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [showCreateModal, setShowCreateModal] = useState(false);
-    const [newTokenName, setNewTokenName] = useState('');
-    const [createdToken, setCreatedToken] = useState(null);
-    const [visibleTokens, setVisibleTokens] = useState(new Set());
+    const [settings, setSettings] = useState({
+        theme: 'system',
+        notificationsEnabled: true,
+        emailAlerts: false,
+        autoRefresh: true,
+        refreshInterval: 30,
+        timezone: 'auto',
+        dataRetention: 30,
+        artifactUpload: false,
+        debugMode: false
+    });
+    const [saved, setSaved] = useState(false);
+    const [serverInfo, setServerInfo] = useState(null);
 
     useEffect(() => {
-        fetchTokens();
+        fetchServerInfo();
     }, []);
 
-    const fetchTokens = async () => {
+    const fetchServerInfo = async () => {
         try {
-            const response = await fetch('/api/execution/tokens');
-            const data = await response.json();
-            setTokens(data.tokens || []);
-        } catch (error) {
-            console.error('Failed to fetch tokens:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const createToken = async (e) => {
-        e.preventDefault();
-        try {
-            const response = await fetch('/api/execution/tokens', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ name: newTokenName })
-            });
-            const data = await response.json();
-            setCreatedToken(data.token);
-            setNewTokenName('');
-            fetchTokens();
-        } catch (error) {
-            console.error('Failed to create token:', error);
-        }
-    };
-
-    const deleteToken = async (tokenId) => {
-        if (!confirm('Are you sure you want to delete this token? This action cannot be undone.')) return;
-
-        try {
-            await fetch(`/api/execution/tokens/${tokenId}`, {
-                method: 'DELETE'
-            });
-            fetchTokens();
+            const response = await fetch('/api/execution/info');
+            if (response.ok) {
+                const data = await response.json();
+                setServerInfo(data);
+            }
         } catch (error) {
-            console.error('Failed to delete token:', error);
+            console.error('Failed to fetch server info:', error);
         }
     };
 
-    const copyToClipboard = (text) => {
-        navigator.clipboard.writeText(text);
-        // Could add a toast notification here
+    const handleSettingChange = (key, value) => {
+        setSettings(prev => ({ ...prev, [key]: value }));
+        setSaved(false);
     };
 
-    const toggleTokenVisibility = (tokenId) => {
-        setVisibleTokens(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(tokenId)) {
-                newSet.delete(tokenId);
-            } else {
-                newSet.add(tokenId);
-            }
-            return newSet;
-        });
+    const saveSettings = () => {
+        // In a real app, this would save to the backend
+        localStorage.setItem('flowyml_settings', JSON.stringify(settings));
+        setSaved(true);
+        setTimeout(() => setSaved(false), 3000);
     };
 
-    const maskToken = (token) => {
-        if (!token || typeof token !== 'string') return '••••••••••••••••••••••••••••••••••••••••••••••••';
-        return `${token.substring(0, 8)}${'•'.repeat(32)}${token.substring(token.length - 8)}`;
-    };
-
-    if (loading) {
-        return (
-            <div className="flex items-center justify-center min-h-screen">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
-            </div>
-        );
-    }
+    const ThemeButton = ({ theme, icon: Icon, label }) => (
+        <button
+            onClick={() => handleSettingChange('theme', theme)}
+            className={`flex flex-col items-center justify-center p-4 rounded-xl border-2 transition-all ${settings.theme === theme
+                ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
+                : 'border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600'
+                }`}
+        >
+            <Icon size={24} className={settings.theme === theme ? 'text-primary-600' : 'text-slate-500'} />
+            <span className={`mt-2 text-sm font-medium ${settings.theme === theme ? 'text-primary-600' : 'text-slate-600 dark:text-slate-400'
+                }`}>
+                {label}
+            </span>
+        </button>
+    );
 
     return (
-        <div className="p-6 max-w-6xl mx-auto space-y-6">
+        <div className="p-6 max-w-4xl mx-auto space-y-6">
             {/* Header */}
             <div className="flex items-center justify-between">
                 <div>
                     <h1 className="text-3xl font-bold text-slate-900 dark:text-white flex items-center gap-3">
-                        <div className="p-3 bg-gradient-to-br from-primary-500 to-purple-500 rounded-xl text-white">
-                            <Key size={28} />
+                        <div className="p-3 bg-gradient-to-br from-slate-600 to-slate-800 rounded-xl text-white">
+                            <SettingsIcon size={28} />
                         </div>
-                        API Tokens
+                        Settings
                     </h1>
                     <p className="text-slate-500 dark:text-slate-400 mt-2">
-                        Manage API tokens for programmatic access to flowyml
+                        Configure your FlowyML dashboard preferences
                     </p>
                 </div>
                 <Button
-                    onClick={() => setShowCreateModal(true)}
+                    onClick={saveSettings}
                     className="flex items-center gap-2 bg-gradient-to-r from-primary-600 to-purple-600 hover:from-primary-700 hover:to-purple-700"
                 >
-                    <Plus size={16} />
-                    Create Token
+                    {saved ? <CheckCircle2 size={16} /> : <Save size={16} />}
+                    {saved ? 'Saved!' : 'Save Settings'}
                 </Button>
             </div>
 
-            {/* Security Notice */}
-            <Card className="border-l-4 border-l-amber-500 bg-amber-50 dark:bg-amber-900/10">
-                <div className="flex items-start gap-3">
-                    <Shield className="text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" size={20} />
+            {/* Appearance */}
+            <Card>
+                <div className="flex items-center gap-3 mb-6">
+                    <div className="p-2 bg-purple-100 dark:bg-purple-900/20 rounded-lg">
+                        <Palette className="text-purple-600 dark:text-purple-400" size={20} />
+                    </div>
                     <div>
-                        <h3 className="font-semibold text-amber-900 dark:text-amber-200">Security Notice</h3>
-                        <p className="text-sm text-amber-800 dark:text-amber-300 mt-1">
-                            Treat your API tokens like passwords. Never share them publicly or commit them to version control.
-                        </p>
+                        <h2 className="text-lg font-semibold text-slate-900 dark:text-white">Appearance</h2>
+                        <p className="text-sm text-slate-500 dark:text-slate-400">Customize the look and feel</p>
                     </div>
                 </div>
-            </Card>
 
-            {/* Token List */}
-            <div className="grid gap-4">
-                {tokens.length === 0 ? (
-                    <Card className="text-center py-16 bg-slate-50 dark:bg-slate-800/30">
-                        <div className="mx-auto w-20 h-20 bg-slate-100 dark:bg-slate-700 rounded-2xl flex items-center justify-center mb-6">
-                            <Key className="text-slate-400" size={32} />
-                        </div>
-                        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">No API tokens yet</h3>
-                        <p className="text-slate-500 max-w-md mx-auto mb-6">
-                            Create your first API token to start making programmatic requests to flowyml
-                        </p>
-                        <Button
-                            onClick={() => setShowCreateModal(true)}
-                            className="bg-primary-600 hover:bg-primary-700"
-                        >
-                            <Plus size={16} className="mr-2" />
-                            Create Your First Token
-                        </Button>
-                    </Card>
-                ) : (
-                    Array.isArray(tokens) && tokens.map((token) => (
-                        <Card key={token.id} className="hover:shadow-lg transition-all duration-200">
-                            <div className="flex items-center justify-between gap-4">
-                                <div className="flex-1 min-w-0">
-                                    <div className="flex items-center gap-3 mb-3">
-                                        <div className="p-2 bg-primary-50 dark:bg-primary-900/20 rounded-lg">
-                                            <Key className="text-primary-600 dark:text-primary-400" size={20} />
-                                        </div>
-                                        <div className="flex-1 min-w-0">
-                                            <h3 className="text-lg font-semibold text-slate-900 dark:text-white truncate">
-                                                {token.name}
-                                            </h3>
-                                            <div className="flex items-center gap-2 flex-wrap">
-                                                <span className="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1">
-                                                    <Calendar size={12} />
-                                                    Created {format(new Date(token.created_at), 'MMM d, yyyy')}
-                                                </span>
-                                                <Badge variant="secondary" className="text-xs">
-                                                    {token.id}
-                                                </Badge>
-                                            </div>
-                                        </div>
-                                    </div>
+                <div className="grid grid-cols-3 gap-4">
+                    <ThemeButton theme="light" icon={Sun} label="Light" />
+                    <ThemeButton theme="dark" icon={Moon} label="Dark" />
+                    <ThemeButton theme="system" icon={Monitor} label="System" />
+                </div>
+            </Card>
 
-                                    {/* Token Value */}
-                                    <div className="bg-slate-50 dark:bg-slate-800 rounded-lg p-3 font-mono text-sm border border-slate-200 dark:border-slate-700">
-                                        <div className="flex items-center gap-2">
-                                            <code className="flex-1 truncate text-slate-700 dark:text-slate-300">
-                                                {visibleTokens.has(token.id) ? token.token : maskToken(token.token)}
-                                            </code>
-                                            <div className="flex items-center gap-1">
-                                                <button
-                                                    onClick={() => toggleTokenVisibility(token.id)}
-                                                    className="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded transition-colors"
-                                                    title={visibleTokens.has(token.id) ? 'Hide token' : 'Show token'}
-                                                >
-                                                    {visibleTokens.has(token.id) ? (
-                                                        <EyeOff size={16} className="text-slate-500" />
-                                                    ) : (
-                                                        <Eye size={16} className="text-slate-500" />
-                                                    )}
-                                                </button>
-                                                <button
-                                                    onClick={() => copyToClipboard(token.token)}
-                                                    className="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded transition-colors"
-                                                    title="Copy to clipboard"
-                                                >
-                                                    <Copy size={16} className="text-slate-500" />
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
+            {/* Notifications */}
+            <Card>
+                <div className="flex items-center gap-3 mb-6">
+                    <div className="p-2 bg-blue-100 dark:bg-blue-900/20 rounded-lg">
+                        <Bell className="text-blue-600 dark:text-blue-400" size={20} />
+                    </div>
+                    <div>
+                        <h2 className="text-lg font-semibold text-slate-900 dark:text-white">Notifications</h2>
+                        <p className="text-sm text-slate-500 dark:text-slate-400">Manage alert preferences</p>
+                    </div>
+                </div>
 
-                                <Button
-                                    onClick={() => deleteToken(token.id)}
-                                    variant="ghost"
-                                    className="text-rose-600 hover:text-rose-700 hover:bg-rose-50 dark:hover:bg-rose-900/20 flex-shrink-0"
-                                >
-                                    <Trash2 size={18} />
-                                </Button>
+                <div className="space-y-4">
+                    <label className="flex items-center justify-between cursor-not-allowed opacity-60">
+                        <div>
+                            <div className="font-medium text-slate-900 dark:text-white flex items-center gap-2">
+                                Push Notifications
+                                <Badge variant="secondary" className="text-xs">Coming Soon</Badge>
                             </div>
-                        </Card>
-                    ))
-                )}
-            </div>
-
-            {/* Create Token Modal */}
-            {showCreateModal && (
-                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-                    <Card className="max-w-lg w-full">
-                        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
-                            <Plus className="text-primary-600" size={24} />
-                            Create New Token
-                        </h2>
+                            <div className="text-sm text-slate-500">Get notified about pipeline completions</div>
+                        </div>
+                        <input
+                            type="checkbox"
+                            checked={settings.notificationsEnabled}
+                            disabled
+                            className="w-5 h-5 rounded text-slate-400 cursor-not-allowed"
+                        />
+                    </label>
 
-                        <form onSubmit={createToken} className="space-y-4">
-                            <div>
-                                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
-                                    Token Name
-                                </label>
-                                <input
-                                    type="text"
-                                    value={newTokenName}
-                                    onChange={(e) => setNewTokenName(e.target.value)}
-                                    placeholder="e.g., Production API, CI/CD Pipeline"
-                                    className="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-slate-800 text-slate-900 dark:text-white"
-                                    required
-                                />
-                                <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
-                                    Choose a descriptive name to identify this token's purpose
-                                </p>
+                    <label className="flex items-center justify-between cursor-not-allowed opacity-60">
+                        <div>
+                            <div className="font-medium text-slate-900 dark:text-white flex items-center gap-2">
+                                Email Alerts
+                                <Badge variant="secondary" className="text-xs">Coming Soon</Badge>
                             </div>
+                            <div className="text-sm text-slate-500">Receive email for failed pipelines</div>
+                        </div>
+                        <input
+                            type="checkbox"
+                            checked={settings.emailAlerts}
+                            disabled
+                            className="w-5 h-5 rounded text-slate-400 cursor-not-allowed"
+                        />
+                    </label>
+                </div>
+            </Card>
 
-                            <div className="flex gap-3 justify-end pt-4">
-                                <Button
-                                    type="button"
-                                    variant="ghost"
-                                    onClick={() => setShowCreateModal(false)}
-                                >
-                                    Cancel
-                                </Button>
-                                <Button
-                                    type="submit"
-                                    className="bg-primary-600 hover:bg-primary-700"
-                                >
-                                    Create Token
-                                </Button>
-                            </div>
-                        </form>
-                    </Card>
+            {/* Data & Storage */}
+            <Card>
+                <div className="flex items-center gap-3 mb-6">
+                    <div className="p-2 bg-green-100 dark:bg-green-900/20 rounded-lg">
+                        <Database className="text-green-600 dark:text-green-400" size={20} />
+                    </div>
+                    <div>
+                        <h2 className="text-lg font-semibold text-slate-900 dark:text-white">Data & Storage</h2>
+                        <p className="text-sm text-slate-500 dark:text-slate-400">Configure data handling</p>
+                    </div>
                 </div>
-            )}
 
-            {/* Token Created Success Modal */}
-            {createdToken && (
-                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-                    <Card className="max-w-2xl w-full">
-                        <div className="text-center mb-6">
-                            <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mb-4">
-                                <CheckCircle2 className="text-green-600 dark:text-green-400" size={32} />
+                <div className="space-y-4">
+                    <label className="flex items-center justify-between cursor-not-allowed opacity-60">
+                        <div>
+                            <div className="font-medium text-slate-900 dark:text-white flex items-center gap-2">
+                                Auto-upload Artifacts
+                                <Badge variant="secondary" className="text-xs">Coming Soon</Badge>
                             </div>
-                            <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Token Created Successfully!</h2>
-                            <p className="text-slate-500 dark:text-slate-400 mt-2">
-                                Copy this token now. You won't be able to see it again.
-                            </p>
+                            <div className="text-sm text-slate-500">Automatically upload artifacts to remote storage</div>
                         </div>
+                        <input
+                            type="checkbox"
+                            checked={settings.artifactUpload}
+                            disabled
+                            className="w-5 h-5 rounded text-slate-400 cursor-not-allowed"
+                        />
+                    </label>
 
-                        <div className="bg-slate-50 dark:bg-slate-800 rounded-lg p-4 mb-6 border-2 border-primary-200 dark:border-primary-800">
-                            <div className="flex items-center gap-2 mb-2">
-                                <code className="flex-1 font-mono text-sm break-all text-slate-900 dark:text-white">
-                                    {createdToken}
-                                </code>
-                                <button
-                                    onClick={() => copyToClipboard(createdToken)}
-                                    className="p-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-colors flex-shrink-0"
-                                    title="Copy to clipboard"
-                                >
-                                    <Copy size={18} />
-                                </button>
+                    <div className="opacity-60">
+                        <div className="flex items-center justify-between mb-2">
+                            <div>
+                                <div className="font-medium text-slate-900 dark:text-white flex items-center gap-2">
+                                    Data Retention
+                                    <Badge variant="secondary" className="text-xs">Coming Soon</Badge>
+                                </div>
+                                <div className="text-sm text-slate-500">Days to keep run history</div>
                             </div>
+                            <Badge variant="secondary">{settings.dataRetention} days</Badge>
+                        </div>
+                        <input
+                            type="range"
+                            min="7"
+                            max="365"
+                            value={settings.dataRetention}
+                            disabled
+                            className="w-full h-2 bg-slate-200 dark:bg-slate-700 rounded-lg appearance-none cursor-not-allowed"
+                        />
+                    </div>
+                </div>
+            </Card>
+
+            {/* Performance */}
+            <Card>
+                <div className="flex items-center gap-3 mb-6">
+                    <div className="p-2 bg-amber-100 dark:bg-amber-900/20 rounded-lg">
+                        <Zap className="text-amber-600 dark:text-amber-400" size={20} />
+                    </div>
+                    <div>
+                        <h2 className="text-lg font-semibold text-slate-900 dark:text-white">Performance</h2>
+                        <p className="text-sm text-slate-500 dark:text-slate-400">Dashboard behavior settings</p>
+                    </div>
+                </div>
+
+                <div className="space-y-4">
+                    <label className="flex items-center justify-between cursor-pointer">
+                        <div>
+                            <div className="font-medium text-slate-900 dark:text-white">Auto-refresh Data</div>
+                            <div className="text-sm text-slate-500">Automatically refresh dashboard data</div>
                         </div>
+                        <input
+                            type="checkbox"
+                            checked={settings.autoRefresh}
+                            onChange={(e) => handleSettingChange('autoRefresh', e.target.checked)}
+                            className="w-5 h-5 rounded text-primary-600 focus:ring-primary-500"
+                        />
+                    </label>
 
-                        <div className="bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6">
-                            <div className="flex gap-2">
-                                <Shield className="text-amber-600 dark:text-amber-400 flex-shrink-0" size={20} />
-                                <div className="text-sm text-amber-800 dark:text-amber-200">
-                                    <strong>Important:</strong> Store this token securely. It won't be displayed again.
+                    {settings.autoRefresh && (
+                        <div>
+                            <div className="flex items-center justify-between mb-2">
+                                <div>
+                                    <div className="font-medium text-slate-900 dark:text-white">Refresh Interval</div>
+                                    <div className="text-sm text-slate-500">Seconds between refreshes</div>
                                 </div>
+                                <Badge variant="secondary">{settings.refreshInterval}s</Badge>
                             </div>
+                            <input
+                                type="range"
+                                min="10"
+                                max="120"
+                                step="10"
+                                value={settings.refreshInterval}
+                                onChange={(e) => handleSettingChange('refreshInterval', parseInt(e.target.value))}
+                                className="w-full h-2 bg-slate-200 dark:bg-slate-700 rounded-lg appearance-none cursor-pointer"
+                            />
                         </div>
+                    )}
 
-                        <Button
-                            onClick={() => {
-                                setCreatedToken(null);
-                                setShowCreateModal(false);
-                            }}
-                            className="w-full bg-primary-600 hover:bg-primary-700"
-                        >
-                            I've Saved My Token
-                        </Button>
-                    </Card>
+                    <label className="flex items-center justify-between cursor-pointer">
+                        <div>
+                            <div className="font-medium text-slate-900 dark:text-white">Debug Mode</div>
+                            <div className="text-sm text-slate-500">Show verbose logging in console</div>
+                        </div>
+                        <input
+                            type="checkbox"
+                            checked={settings.debugMode}
+                            onChange={(e) => handleSettingChange('debugMode', e.target.checked)}
+                            className="w-5 h-5 rounded text-primary-600 focus:ring-primary-500"
+                        />
+                    </label>
                 </div>
-            )}
+            </Card>
+
+            {/* Server Info */}
+            <Card className="bg-slate-50 dark:bg-slate-800/50">
+                <div className="flex items-center gap-3 mb-6">
+                    <div className="p-2 bg-slate-200 dark:bg-slate-700 rounded-lg">
+                        <Globe className="text-slate-600 dark:text-slate-400" size={20} />
+                    </div>
+                    <div>
+                        <h2 className="text-lg font-semibold text-slate-900 dark:text-white">Server Information</h2>
+                        <p className="text-sm text-slate-500 dark:text-slate-400">FlowyML backend details</p>
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                    <div>
+                        <div className="text-slate-500 dark:text-slate-400">Version</div>
+                        <div className="font-medium text-slate-900 dark:text-white">{serverInfo?.version || '0.1.0'}</div>
+                    </div>
+                    <div>
+                        <div className="text-slate-500 dark:text-slate-400">Environment</div>
+                        <div className="font-medium text-slate-900 dark:text-white">{serverInfo?.environment || 'Development'}</div>
+                    </div>
+                    <div>
+                        <div className="text-slate-500 dark:text-slate-400">Database</div>
+                        <div className="font-medium text-slate-900 dark:text-white">{serverInfo?.database || 'PostgreSQL'}</div>
+                    </div>
+                    <div>
+                        <div className="text-slate-500 dark:text-slate-400">Uptime</div>
+                        <div className="font-medium text-slate-900 dark:text-white">{serverInfo?.uptime || 'N/A'}</div>
+                    </div>
+                </div>
+            </Card>
+
+            {/* Footer Branding */}
+            <div className="text-center pt-8 pb-4 border-t border-slate-200 dark:border-slate-700">
+                <div className="flex items-center justify-center gap-2 text-slate-500 dark:text-slate-400">
+                    <span className="text-sm">Made with ❤️ by</span>
+                    <span className="font-semibold text-primary-600 dark:text-primary-400">UnicoLab</span>
+                </div>
+                <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">
+                    FlowyML - Next-generation MLOps Platform
+                </p>
+            </div>
         </div>
     );
 }