vdevika
/
Qubit_EPM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Integrated the qbt_table_create api endpoint in the Add New Table Modal for the ER Diagram #14

Merged
vdevika merged 1 commits from develop into main 2025-06-19 09:59:48 +00:00
Conversation 0 Commits 1 Files Changed 4 +152 -192
4 changed files with 152 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/DataflowCanvas.jsx
View File

@ -1587,6 +1587,13 @@ const DataflowCanvas = ({ dbSlug, hasSchemas = true }) => {
} }
}, [error]); }, [error]);
// Create a loading component
// const LoadingComponent = () => (
// <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
// <div>Loading data from API...</div>
// </div>
// );
// Log error but continue with mockApiData as fallback // Log error but continue with mockApiData as fallback
useEffect(() => { useEffect(() => {
if (error) { if (error) {
@ -2562,10 +2569,7 @@ const DataflowCanvas = ({ dbSlug, hasSchemas = true }) => {
setShowProcessPopup(false); setShowProcessPopup(false);
}; };
// Show the table creation popup
const addTableNode = () => {
setShowTablePopup(true);
};
// Handle table creation from the popup // Handle table creation from the popup
const handleCreateTable = async (tableData) => { const handleCreateTable = async (tableData) => {

315
src/components/ERDiagramCanvas.jsx
View File

@ -563,167 +563,61 @@ const ERDiagramCanvasContent = () => {
}; };
// Mock database data representing ONE database with multiple schemas (fallback only) // Mock database data representing ONE database with multiple schemas (fallback only)
// const mockDatabaseData = { const mockDatabaseData = {
// id: 1, id: 1,
// name: "Sample Database", name: "Sample Database",
// slug: "sample_database", slug: "sample_database",
// description: "Sample Database Structure (Mock Data)", description: "Sample Database Structure (Mock Data)",
// service: selectedService?.name || "Unknown Service", service: selectedService?.name || "Unknown Service",
// dataSource: selectedDataSource?.name || "Unknown DataSource", dataSource: selectedDataSource?.name || "Unknown DataSource",
// schemas: [ schemas: [
// { {
// sch: "FINANCE_MART", sch: "FINANCE_MART",
// tables: [ tables: [
// { {
// id: 1, id: 1,
// name: "accounts", name: "accounts",
// table_type: "dimension", table_type: "dimension",
// columns: [ columns: [
// { name: "account_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false }, { name: "account_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "account_number", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false }, { name: "account_number", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false },
// { name: "account_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false }, { name: "account_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
// { name: "account_type", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false }, { name: "account_type", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
// { name: "balance", data_type: "DECIMAL(15,2)", is_primary_key: false, is_foreign_key: false }, { name: "balance", data_type: "DECIMAL(15,2)", is_primary_key: false, is_foreign_key: false },
// { name: "created_date", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false } { name: "created_date", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false }
// ] ]
// }, },
// { {
// id: 2, id: 2,
// name: "transactions", name: "transactions",
// table_type: "fact", table_type: "fact",
// columns: [ columns: [
// { name: "transaction_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false }, { name: "transaction_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "account_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true }, { name: "account_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
// { name: "transaction_date", data_type: "DATE", is_primary_key: false, is_foreign_key: false }, { name: "transaction_date", data_type: "DATE", is_primary_key: false, is_foreign_key: false },
// { name: "amount", data_type: "DECIMAL(12,2)", is_primary_key: false, is_foreign_key: false }, { name: "amount", data_type: "DECIMAL(12,2)", is_primary_key: false, is_foreign_key: false }
// { name: "transaction_type", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false }, ]
// { name: "description", data_type: "VARCHAR(255)", is_primary_key: false, is_foreign_key: false } }
// ] ]
// }, },
// { {
// id: 3, sch: "SALES_MART",
// name: "customers", name: "Sales Mart",
// table_type: "dimension", tables: [
// columns: [ {
// { name: "customer_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false }, id: 3,
// { name: "first_name", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false }, name: "customers",
// { name: "last_name", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false }, table_type: "dimension",
// { name: "email", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false }, columns: [
// { name: "phone", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false }, { name: "customer_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "registration_date", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false } { name: "customer_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
// ] { name: "email", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false }
// }, ]
// { }
// id: 4, ]
// name: "financial_reports", }
// table_type: "fact", ]
// columns: [ };
// { name: "report_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "account_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
// { name: "report_date", data_type: "DATE", is_primary_key: false, is_foreign_key: false },
// { name: "balance_amount", data_type: "DECIMAL(15,2)", is_primary_key: false, is_foreign_key: false },
// { name: "profit_loss", data_type: "DECIMAL(12,2)", is_primary_key: false, is_foreign_key: false }
// ]
// }
// ]
// },
// {
// sch: "Schema100",
// tables: [
// {
// id: 5,
// name: "products",
// table_type: "dimension",
// columns: [
// { name: "product_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "product_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
// { name: "category", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
// { name: "price", data_type: "DECIMAL(10,2)", is_primary_key: false, is_foreign_key: false },
// { name: "stock_quantity", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false }
// ]
// },
// {
// id: 6,
// name: "orders",
// table_type: "fact",
// columns: [
// { name: "order_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "customer_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
// { name: "product_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
// { name: "order_date", data_type: "DATE", is_primary_key: false, is_foreign_key: false },
// { name: "quantity", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false },
// { name: "total_amount", data_type: "DECIMAL(12,2)", is_primary_key: false, is_foreign_key: false }
// ]
// },
// {
// id: 7,
// name: "inventory",
// table_type: "stage",
// columns: [
// { name: "inventory_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "product_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
// { name: "warehouse_location", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
// { name: "stock_level", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false },
// { name: "last_updated", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false }
// ]
// },
// {
// id: 8,
// name: "suppliers",
// table_type: "dimension",
// columns: [
// { name: "supplier_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "supplier_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
// { name: "contact_email", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
// { name: "phone_number", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false }
// ]
// }
// ]
// },
// {
// sch: "New_sch",
// tables: [
// {
// id: 9,
// name: "analytics_summary",
// table_type: "fact",
// columns: [
// { name: "summary_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "date", data_type: "DATE", is_primary_key: false, is_foreign_key: false },
// { name: "total_revenue", data_type: "DECIMAL(15,2)", is_primary_key: false, is_foreign_key: false },
// { name: "total_orders", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false },
// { name: "unique_customers", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false }
// ]
// },
// {
// id: 10,
// name: "user_sessions",
// table_type: "stage",
// columns: [
// { name: "session_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "customer_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
// { name: "session_start", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false },
// { name: "session_end", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false },
// { name: "pages_viewed", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false },
// { name: "device_type", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false }
// ]
// },
// {
// id: 11,
// name: "reports",
// table_type: "dimension",
// columns: [
// { name: "report_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "report_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
// { name: "report_type", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
// { name: "created_by", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
// { name: "created_date", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false }
// ]
// }
// ]
// }
// ]
// };
// API Functions for fetching real data // API Functions for fetching real data
const fetchDatabases = async () => { const fetchDatabases = async () => {
@ -1155,48 +1049,99 @@ const ERDiagramCanvasContent = () => {
try { try {
console.log('Adding new table:', tableData); console.log('Adding new table:', tableData);
// Here you would typically make an API call to create the table
// For now, we'll add it to the current diagram
// Find the target schema // Find the target schema
const targetSchema = availableSchemas.find(schema => schema.sch === tableData.schema); const targetSchema = availableSchemas.find(schema => schema.sch === tableData.schema);
if (!targetSchema) { if (!targetSchema) {
throw new Error('Target schema not found'); throw new Error('Target schema not found');
} }
// Create a new table object // Prepare API payload
const newTable = { const apiPayload = {
id: `new-table-${Date.now()}`, token: token,
org: orgSlug,
con: selectedDatabase?.slug || "my_dwh", // Use selected database slug
sch: tableData.schema,
name: tableData.name, name: tableData.name,
description: tableData.description, external_name: null,
table_type: tableData.table_type, table_type: tableData.table_type,
columns: tableData.columns, description: tableData.description,
schema: tableData.schema, columns: tableData.columns.map(col => ({
database: selectedDatabase?.name || 'Unknown' column_name: col.name,
data_type: col.data_type,
is_nullable: col.is_nullable
})),
keys: tableData.keys.map(key => ({
key_name: key.name,
key_type: key.key_type,
key_columns: [{
column_name: key.column_name,
sequence: key.sequence
}]
}))
}; };
// Add the table to existing tables list console.log('API Payload:', apiPayload);
setExistingTables(prev => [...prev, newTable]);
// Update the current database structure and regenerate the diagram // Make API call to create the table
const updatedDatabase = { ...selectedDatabase }; const response = await axios.post(ENDPOINTS.TABLE_CREATE, apiPayload, {
const schemaIndex = updatedDatabase.schemas.findIndex(s => s.sch === tableData.schema); headers: {
'Content-Type': 'application/json'
if (schemaIndex !== -1) {
if (!updatedDatabase.schemas[schemaIndex].tables) {
updatedDatabase.schemas[schemaIndex].tables = [];
} }
updatedDatabase.schemas[schemaIndex].tables.push(newTable); });
// Regenerate the ER diagram with the new table console.log('API Response:', response.data);
generateERDiagram(updatedDatabase);
console.log('Table added successfully:', newTable); if (response.data.status === 200) {
// API call successful, create new table object for local state
const newTable = {
id: response.data.id || `new-table-${Date.now()}`,
name: tableData.name,
tbl: response.data.tbl || tableData.name.toLowerCase(), // Table slug from API or fallback
description: tableData.description,
table_type: tableData.table_type,
columns: tableData.columns,
schema: tableData.schema,
database: selectedDatabase?.slug || 'Unknown',
created_at: new Date().toISOString()
};
// Add the table to existing tables list
setExistingTables(prev => [...prev, newTable]);
// Update the current database structure and regenerate the diagram
const updatedDatabase = { ...selectedDatabase };
const schemaIndex = updatedDatabase.schemas.findIndex(s => s.sch === tableData.schema);
if (schemaIndex !== -1) {
if (!updatedDatabase.schemas[schemaIndex].tables) {
updatedDatabase.schemas[schemaIndex].tables = [];
}
updatedDatabase.schemas[schemaIndex].tables.push(newTable);
// Update the selected database state
setSelectedDatabase(updatedDatabase);
// Regenerate the ER diagram with the new table
generateERDiagram(updatedDatabase);
console.log('Table added successfully:', newTable);
}
} else {
throw new Error(response.data.message || 'Failed to create table');
} }
} catch (error) { } catch (error) {
console.error('Error adding table:', error); console.error('Error adding table:', error);
throw error;
// Check if it's an API error
if (error.response) {
const errorMessage = error.response.data?.message || `API Error: ${error.response.status}`;
throw new Error(errorMessage);
} else if (error.request) {
throw new Error('Network error: Unable to connect to the API');
} else {
throw new Error(error.message || 'Unknown error occurred');
}
} }
}; };

11
src/components/InfiniteCanvas.jsx
View File

@ -1104,6 +1104,17 @@ const ServiceNode = ({ data = {} }) => {
}} }}
onClick={() => data.onToggle && data.onToggle(data.id)} onClick={() => data.onToggle && data.onToggle(data.id)}
> >
{data.expanded ? (
<>
<span>Collapse Connections</span>
<FaChevronUp size={10} />
</>
) : (
<>
<span>Expand Connections</span>
<FaChevronDown size={10} />
</>
)}
</button> </button>
</div> </div>

0
src/components/children/Pipelines.jsx Normal file
View File