mirror of
https://github.com/R0m1k3/LogiFlow.git
synced 2026-10-11 17:27:31 +02:00
Add SQL execution tool for administrators to manage database tables
Introduce a new admin-only utility tab allowing direct SQL query execution, file uploads (.sql), and logging of operations. Includes server-side endpoint and client-side UI for executing raw SQL commands against the database. Replit-Commit-Author: Agent Replit-Commit-Session-Id: cfbfe47c-0c9a-4ebf-8a41-2937407eccff Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cfbfe47c-0c9a-4ebf-8a41-2937407eccff/ECRh2Iu
This commit is contained in:
michaelschal committed
1 parent
5b338b224e
commit
2c36650edd
6 files changed
+324
-101
No files matched your search
@@ -0,0 +1,236 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { Upload, Play, Copy, AlertTriangle, Database } from "lucide-react";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
|
||||
export default function SQLExecutor() {
|
||||
const { toast } = useToast();
|
||||
const [sqlContent, setSqlContent] = useState("");
|
||||
const [logs, setLogs] = useState<string[]>([]);
|
||||
const [isExecuting, setIsExecuting] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const executeMutation = useMutation({
|
||||
mutationFn: async (sql: string) => {
|
||||
setLogs([]);
|
||||
setIsExecuting(true);
|
||||
|
||||
const response = await fetch('/api/admin/execute-sql', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ sql }),
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Erreur lors de l\'exécution SQL');
|
||||
}
|
||||
|
||||
return response.json();
|
||||
},
|
||||
onSuccess: (result) => {
|
||||
setLogs(prev => [...prev, '✅ Exécution SQL terminée avec succès']);
|
||||
if (result.logs) {
|
||||
setLogs(prev => [...prev, ...result.logs]);
|
||||
}
|
||||
if (result.results) {
|
||||
setLogs(prev => [...prev, `📊 Résultats: ${JSON.stringify(result.results, null, 2)}`]);
|
||||
}
|
||||
|
||||
toast({
|
||||
title: "Succès",
|
||||
description: "SQL exécuté avec succès",
|
||||
});
|
||||
},
|
||||
onError: (error: any) => {
|
||||
setLogs(prev => [...prev, `❌ Erreur: ${error.message}`]);
|
||||
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
onSettled: () => {
|
||||
setIsExecuting(false);
|
||||
}
|
||||
});
|
||||
|
||||
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
if (!file.name.endsWith('.sql')) {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: "Veuillez sélectionner un fichier .sql",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const content = e.target?.result as string;
|
||||
setSqlContent(content);
|
||||
setLogs([`📁 Fichier ${file.name} chargé (${content.length} caractères)`]);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
};
|
||||
|
||||
const handleExecuteSQL = () => {
|
||||
if (!sqlContent.trim()) {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: "Veuillez saisir du SQL à exécuter",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setLogs([`🔄 Début de l'exécution SQL...`]);
|
||||
executeMutation.mutate(sqlContent);
|
||||
};
|
||||
|
||||
const handleCopyWebhookSQL = () => {
|
||||
const webhookSQL = `-- Script pour créer la table webhook_bap_config
|
||||
CREATE TABLE IF NOT EXISTS webhook_bap_config (
|
||||
id SERIAL PRIMARY KEY,
|
||||
name VARCHAR(100) NOT NULL DEFAULT 'Configuration BAP',
|
||||
webhook_url TEXT NOT NULL,
|
||||
description TEXT,
|
||||
is_active BOOLEAN NOT NULL DEFAULT true,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- Insérer la configuration par défaut
|
||||
INSERT INTO webhook_bap_config (name, webhook_url, description, is_active)
|
||||
SELECT
|
||||
'Configuration BAP',
|
||||
'https://workflow.ffnancy.fr/webhook/a3d03176-b72f-412d-8fb9-f920b9fbab4d',
|
||||
'Configuration par défaut pour envoi des fichiers BAP vers n8n',
|
||||
true
|
||||
WHERE NOT EXISTS (SELECT 1 FROM webhook_bap_config);
|
||||
|
||||
-- Commentaire sur la table
|
||||
COMMENT ON TABLE webhook_bap_config IS 'Configuration pour webhook BAP n8n';
|
||||
|
||||
-- Vérification finale
|
||||
SELECT 'Table webhook_bap_config créée!' AS message;
|
||||
SELECT COUNT(*) AS nb_configs FROM webhook_bap_config;`;
|
||||
|
||||
setSqlContent(webhookSQL);
|
||||
navigator.clipboard.writeText(webhookSQL);
|
||||
|
||||
toast({
|
||||
title: "SQL copié",
|
||||
description: "Le script webhook BAP a été copié et collé",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Database className="h-6 w-6 text-blue-600" />
|
||||
<h1 className="text-2xl font-bold">Exécution SQL</h1>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<AlertTriangle className="h-5 w-5 text-orange-500" />
|
||||
Avertissement de Sécurité
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Cette fonctionnalité permet d'exécuter du SQL directement sur la base de données.
|
||||
Utilisez-la avec précaution et uniquement pour des opérations de maintenance.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Script SQL</CardTitle>
|
||||
<CardDescription>
|
||||
Collez votre SQL ou uploadez un fichier .sql
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Upload className="h-4 w-4" />
|
||||
Charger fichier SQL
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCopyWebhookSQL}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
SQL Webhook BAP
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".sql"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
<Textarea
|
||||
placeholder="-- Collez votre SQL ici ou utilisez le bouton pour charger un fichier..."
|
||||
value={sqlContent}
|
||||
onChange={(e) => setSqlContent(e.target.value)}
|
||||
className="min-h-[300px] font-mono text-sm"
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={handleExecuteSQL}
|
||||
disabled={!sqlContent.trim() || isExecuting}
|
||||
className="w-full flex items-center gap-2"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
{isExecuting ? 'Exécution en cours...' : 'Exécuter SQL'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Logs d'exécution</CardTitle>
|
||||
<CardDescription>
|
||||
Résultats et messages de l'exécution SQL
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="bg-black text-green-400 p-4 rounded-md min-h-[300px] font-mono text-sm overflow-auto">
|
||||
{logs.length === 0 ? (
|
||||
<div className="text-gray-500">Aucun log pour l'instant...</div>
|
||||
) : (
|
||||
logs.map((log, index) => (
|
||||
<div key={index} className="mb-1">
|
||||
{log}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,7 +7,8 @@ import {
|
||||
Server,
|
||||
Bug,
|
||||
Cloud,
|
||||
Send
|
||||
Send,
|
||||
Code
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
@@ -19,6 +20,7 @@ import NocoDBConfig from "./NocoDBConfig";
|
||||
import DatabaseDebug from "./DatabaseDebug";
|
||||
import WeatherSettings from "./WeatherSettings";
|
||||
import WebhookBAPConfig from "./WebhookBAPConfig";
|
||||
import SQLExecutor from "./SQLExecutor";
|
||||
|
||||
export default function Utilities() {
|
||||
const { user } = useAuthUnified();
|
||||
@@ -38,9 +40,10 @@ export default function Utilities() {
|
||||
const canDebugDatabase = user?.role === 'admin';
|
||||
const canManageWeather = user?.role === 'admin';
|
||||
const canManageWebhookBAP = user?.role === 'admin';
|
||||
const canExecuteSQL = user?.role === 'admin';
|
||||
|
||||
// Si l'utilisateur n'a aucune permission, afficher le message d'accès refusé
|
||||
if (!canManageBackups && !canManageNocoDB && !canDebugDatabase && !canManageWeather && !canManageWebhookBAP) {
|
||||
if (!canManageBackups && !canManageNocoDB && !canDebugDatabase && !canManageWeather && !canManageWebhookBAP && !canExecuteSQL) {
|
||||
return (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<Card className="w-96">
|
||||
@@ -76,7 +79,7 @@ export default function Utilities() {
|
||||
{/* Content avec onglets */}
|
||||
<div className="flex-1 p-6 overflow-hidden">
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="h-full flex flex-col">
|
||||
<TabsList className="grid w-full grid-cols-5 mb-6">
|
||||
<TabsList className="grid w-full grid-cols-6 mb-6">
|
||||
{canManageBackups && (
|
||||
<TabsTrigger value="backups" className="flex items-center gap-2">
|
||||
<Database className="w-4 h-4" />
|
||||
@@ -107,6 +110,12 @@ export default function Utilities() {
|
||||
Configuration BAP
|
||||
</TabsTrigger>
|
||||
)}
|
||||
{canExecuteSQL && (
|
||||
<TabsTrigger value="sql" className="flex items-center gap-2">
|
||||
<Code className="w-4 h-4" />
|
||||
Exécution SQL
|
||||
</TabsTrigger>
|
||||
)}
|
||||
</TabsList>
|
||||
|
||||
{/* Contenu des onglets */}
|
||||
@@ -149,6 +158,14 @@ export default function Utilities() {
|
||||
</div>
|
||||
</TabsContent>
|
||||
)}
|
||||
|
||||
{canExecuteSQL && (
|
||||
<TabsContent value="sql" className="flex-1 overflow-hidden">
|
||||
<div className="h-full bg-gray-50 -m-6 p-6">
|
||||
<SQLExecutor />
|
||||
</div>
|
||||
</TabsContent>
|
||||
)}
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user