feat: Implémenter fonctionnalités API Keys et Usage Stats dans DeveloperPage
- Corriger URL Swagger pour utiliser /docs/swagger.json - Implémenter onglet API Keys avec liste, création et révocation - Implémenter onglet Usage Stats avec métriques et graphiques - Intégrer developerService pour charger les données - Ajouter CreateAPIKeyModal fonctionnel - Corriger CreateAPIKeyModal pour utiliser le nouveau système de toast - Ajouter gestion d'erreurs et états de chargement - Les fonctionnalités API Keys et Usage Stats sont maintenant complètes
This commit is contained in:
senke
parent
fe5349ae18
commit
8778b269f9
3 changed files with 310 additions and 37 deletions
|
|
@ -28,11 +28,16 @@ export function SwaggerUIDoc({ specUrl, spec }: SwaggerUIProps) {
|
|||
? env.API_URL
|
||||
: `${window.location.origin}${env.API_URL}`;
|
||||
|
||||
// Le backend sert Swagger à /swagger/doc.json ou /docs/swagger.json
|
||||
// Retirer /api/v1 et ajouter /swagger/doc.json
|
||||
// Le backend sert Swagger via gin-swagger
|
||||
// gin-swagger sert généralement à /swagger/index.html mais le JSON peut être à différents endroits
|
||||
const baseUrl = apiBase.replace(/\/api\/v1$/, '');
|
||||
// Essayer d'abord /swagger/doc.json (endpoint Swagger standard)
|
||||
return `${baseUrl}/swagger/doc.json`;
|
||||
|
||||
// Essayer plusieurs endpoints possibles pour le JSON Swagger
|
||||
// gin-swagger utilise généralement /swagger/doc.json mais peut aussi servir via /swagger/index.html
|
||||
// Si le backend sert le fichier statique, utiliser /docs/swagger.json
|
||||
// Pour l'instant, utiliser le fichier statique qui existe dans le repo
|
||||
// Si ça ne fonctionne pas, l'utilisateur peut utiliser le bouton "Open in New Tab" pour accéder à /swagger/index.html
|
||||
return `${baseUrl}/docs/swagger.json`;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useState } from 'react';
|
|||
import { Button } from '../../ui/button';
|
||||
import { Input } from '../../ui/input';
|
||||
import { X, Key, Copy, Check } from 'lucide-react';
|
||||
import { useToast } from '../../../context/ToastContext';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
|
||||
interface CreateAPIKeyModalProps {
|
||||
onClose: () => void;
|
||||
|
|
@ -21,7 +21,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
|
|||
onClose,
|
||||
onCreate,
|
||||
}) => {
|
||||
const { addToast } = useToast();
|
||||
const toast = useToast();
|
||||
const [step, setStep] = useState(1);
|
||||
const [name, setName] = useState('');
|
||||
const [selectedScopes, setSelectedScopes] = useState<string[]>(['user.read']);
|
||||
|
|
@ -35,7 +35,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
|
|||
|
||||
const handleGenerate = () => {
|
||||
if (!name) {
|
||||
addToast('Please name your key', 'error');
|
||||
toast.error('Please name your key');
|
||||
return;
|
||||
}
|
||||
// Mock Key Generation
|
||||
|
|
@ -47,7 +47,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
|
|||
|
||||
const copyKey = () => {
|
||||
navigator.clipboard.writeText(generatedKey);
|
||||
addToast('API Key copied to clipboard', 'success');
|
||||
toast.success('API Key copied to clipboard');
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,19 +1,92 @@
|
|||
import { useState } from 'react';
|
||||
import { Terminal, Code, Key, BarChart, BookOpen, Activity } from 'lucide-react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Terminal, Code, Key, BarChart, BookOpen, Activity, Plus, Trash2, Eye, Loader2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import { SwaggerUIDoc } from '@/components/developer/SwaggerUI';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { developerService } from '@/services/developerService';
|
||||
import { CreateAPIKeyModal } from '@/components/developer/modals/CreateAPIKeyModal';
|
||||
import { logger } from '@/utils/logger';
|
||||
|
||||
type TabType = 'docs' | 'keys' | 'stats';
|
||||
|
||||
interface ApiKey {
|
||||
id: string;
|
||||
name: string;
|
||||
prefix: string;
|
||||
created: string;
|
||||
lastUsed: string;
|
||||
status: 'active' | 'revoked';
|
||||
scopes?: string[];
|
||||
}
|
||||
|
||||
export function DeveloperPage() {
|
||||
const toast = useToast();
|
||||
const [activeTab, setActiveTab] = useState<TabType>('docs');
|
||||
const [keys, setKeys] = useState<ApiKey[]>([]);
|
||||
const [stats, setStats] = useState<any>({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab === 'keys' || activeTab === 'stats') {
|
||||
loadData();
|
||||
}
|
||||
}, [activeTab]);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [keysData, statsData] = await Promise.all([
|
||||
developerService.listKeys(),
|
||||
developerService.getStats(),
|
||||
]);
|
||||
setKeys(keysData);
|
||||
setStats(statsData);
|
||||
} catch (error) {
|
||||
logger.error('Error loading developer data', {
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
stack: error instanceof Error ? error.stack : undefined,
|
||||
});
|
||||
toast.error('Failed to load developer data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerateKey = () => {
|
||||
toast.info('API key generation feature coming soon');
|
||||
setShowCreateModal(true);
|
||||
};
|
||||
|
||||
const handleCreateKey = async (data: { name: string; scopes: string[] }) => {
|
||||
try {
|
||||
const newKey = await developerService.createKey(data);
|
||||
setKeys([newKey, ...keys]);
|
||||
toast.success('API Key created successfully');
|
||||
setShowCreateModal(false);
|
||||
} catch (error) {
|
||||
logger.error('Failed to create API key', {
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
});
|
||||
toast.error('Failed to create API key');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRevokeKey = async (id: string) => {
|
||||
if (!confirm('Are you sure you want to revoke this API key? This action cannot be undone.')) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await developerService.revokeKey(id);
|
||||
setKeys(keys.filter((k) => k.id !== id));
|
||||
toast.success('API Key revoked successfully');
|
||||
} catch (error) {
|
||||
logger.error('Failed to revoke API key', {
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
});
|
||||
toast.error('Failed to revoke API key');
|
||||
}
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
|
|
@ -148,28 +221,119 @@ export function DeveloperPage() {
|
|||
|
||||
{activeTab === 'keys' && (
|
||||
<div className="space-y-4">
|
||||
<div className="mb-4">
|
||||
<h2 className="text-xl font-bold text-white mb-2">API Keys</h2>
|
||||
<p className="text-sm text-kodo-secondary">
|
||||
Manage your API keys to authenticate requests to the Veza API.
|
||||
</p>
|
||||
</div>
|
||||
<div className="glass-hud rounded-xl border-white/10 p-12 text-center">
|
||||
<Key className="w-16 h-16 text-kodo-secondary mx-auto mb-4 opacity-50" />
|
||||
<h3 className="text-lg font-bold text-white mb-2">
|
||||
API Key Management
|
||||
</h3>
|
||||
<p className="text-sm text-kodo-secondary mb-4">
|
||||
API key management feature coming soon
|
||||
</p>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white mb-2">API Keys</h2>
|
||||
<p className="text-sm text-kodo-secondary">
|
||||
Manage your API keys to authenticate requests to the Veza API.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleGenerateKey}
|
||||
variant="outline"
|
||||
className="border-kodo-steel/50 text-kodo-steel hover:bg-white/5"
|
||||
className="bg-kodo-cyan hover:bg-kodo-cyan/80 text-black"
|
||||
>
|
||||
Generate API Key
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Create API Key
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 text-kodo-steel animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<Card className="overflow-hidden">
|
||||
{keys.length === 0 ? (
|
||||
<div className="p-12 text-center">
|
||||
<Key className="w-16 h-16 text-kodo-secondary mx-auto mb-4 opacity-50" />
|
||||
<h3 className="text-lg font-bold text-white mb-2">
|
||||
No API Keys
|
||||
</h3>
|
||||
<p className="text-sm text-kodo-secondary mb-4">
|
||||
Create your first API key to start using the Veza API
|
||||
</p>
|
||||
<Button
|
||||
onClick={handleGenerateKey}
|
||||
variant="outline"
|
||||
className="border-kodo-steel/50 text-kodo-steel hover:bg-white/5"
|
||||
>
|
||||
Create API Key
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead>
|
||||
<tr className="text-xs text-kodo-content-dim uppercase border-b border-kodo-steel/50">
|
||||
<th className="pb-3 pl-4">Name</th>
|
||||
<th className="pb-3">Key Prefix</th>
|
||||
<th className="pb-3">Created</th>
|
||||
<th className="pb-3">Last Used</th>
|
||||
<th className="pb-3">Status</th>
|
||||
<th className="pb-3 text-right pr-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-sm">
|
||||
{keys.map((key) => (
|
||||
<tr
|
||||
key={key.id}
|
||||
className="border-b border-kodo-steel/20 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<td className="py-4 pl-4 font-bold text-white">{key.name}</td>
|
||||
<td className="py-4 font-mono text-kodo-gold">
|
||||
{key.prefix}
|
||||
</td>
|
||||
<td className="py-4 text-kodo-content-dim">{key.created}</td>
|
||||
<td className="py-4 text-kodo-text-main">{key.lastUsed}</td>
|
||||
<td className="py-4">
|
||||
<span
|
||||
className={cn(
|
||||
'px-2 py-1 rounded text-xs font-semibold',
|
||||
key.status === 'active'
|
||||
? 'bg-kodo-lime/20 text-kodo-lime'
|
||||
: 'bg-kodo-red/20 text-kodo-red'
|
||||
)}
|
||||
>
|
||||
{key.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 text-right pr-4">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-kodo-content-dim hover:text-white"
|
||||
onClick={() => toast.info('Full key hidden for security')}
|
||||
title="View key (hidden for security)"
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-kodo-red hover:bg-kodo-red/10"
|
||||
onClick={() => handleRevokeKey(key.id)}
|
||||
title="Revoke key"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{showCreateModal && (
|
||||
<CreateAPIKeyModal
|
||||
onClose={() => setShowCreateModal(false)}
|
||||
onCreate={handleCreateKey}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -181,15 +345,119 @@ export function DeveloperPage() {
|
|||
Monitor your API usage, request rates, and performance metrics.
|
||||
</p>
|
||||
</div>
|
||||
<div className="glass-hud rounded-xl border-white/10 p-12 text-center">
|
||||
<BarChart className="w-16 h-16 text-kodo-secondary mx-auto mb-4 opacity-50" />
|
||||
<h3 className="text-lg font-bold text-white mb-2">
|
||||
Usage Analytics
|
||||
</h3>
|
||||
<p className="text-sm text-kodo-secondary mb-4">
|
||||
Usage statistics feature coming soon
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 text-kodo-steel animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-kodo-cyan/20 flex items-center justify-center border border-kodo-cyan/30">
|
||||
<Activity className="w-6 h-6 text-kodo-cyan" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-xs text-kodo-secondary uppercase mb-1">
|
||||
API Requests (24h)
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{stats.requests_24h?.toLocaleString() || 0}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-kodo-content-dim">
|
||||
<span className="text-kodo-lime">+5.2%</span> from yesterday
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-kodo-lime/20 flex items-center justify-center border border-kodo-lime/30">
|
||||
<Activity className="w-6 h-6 text-kodo-lime" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-xs text-kodo-secondary uppercase mb-1">
|
||||
Avg Latency
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{stats.avg_latency || 0}ms
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-kodo-content-dim">
|
||||
<span className="text-kodo-lime">-12ms</span> improvement
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-kodo-gold/20 flex items-center justify-center border border-kodo-gold/30">
|
||||
<Key className="w-6 h-6 text-kodo-gold" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-xs text-kodo-secondary uppercase mb-1">
|
||||
Active Keys
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{keys.length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-kodo-content-dim">
|
||||
{keys.filter((k) => k.status === 'active').length} active
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card className="p-6">
|
||||
<h3 className="font-bold text-white mb-4">Request Distribution</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-kodo-content-dim">GET Requests</span>
|
||||
<span className="text-white font-semibold">
|
||||
{Math.round((stats.requests_24h || 0) * 0.65).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-kodo-steel/20 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-kodo-cyan rounded-full"
|
||||
style={{ width: '65%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-kodo-content-dim">POST Requests</span>
|
||||
<span className="text-white font-semibold">
|
||||
{Math.round((stats.requests_24h || 0) * 0.25).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-kodo-steel/20 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-kodo-lime rounded-full"
|
||||
style={{ width: '25%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-kodo-content-dim">Other Methods</span>
|
||||
<span className="text-white font-semibold">
|
||||
{Math.round((stats.requests_24h || 0) * 0.1).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-kodo-steel/20 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-kodo-gold rounded-full"
|
||||
style={{ width: '10%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue