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

This commit is contained in:
Devika Vellikkunnathillam 2025-06-19 15:28:06 +05:30
parent dbd5ae5f40
commit 886056e2f6
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]);
// 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
useEffect(() => {
if (error) {
@ -2562,10 +2569,7 @@ const DataflowCanvas = ({ dbSlug, hasSchemas = true }) => {
setShowProcessPopup(false);
};
// Show the table creation popup
const addTableNode = () => {
setShowTablePopup(true);
};
// Handle table creation from the popup
const handleCreateTable = async (tableData) => {

321
src/components/ERDiagramCanvas.jsx
View File

@ -563,167 +563,61 @@ const ERDiagramCanvasContent = () => {
};
// Mock database data representing ONE database with multiple schemas (fallback only)
// const mockDatabaseData = {
// id: 1,
// name: "Sample Database",
// slug: "sample_database",
// description: "Sample Database Structure (Mock Data)",
// service: selectedService?.name || "Unknown Service",
// dataSource: selectedDataSource?.name || "Unknown DataSource",
// schemas: [
// {
// sch: "FINANCE_MART",
// tables: [
// {
// id: 1,
// name: "accounts",
// table_type: "dimension",
// columns: [
// { 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_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: "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 }
// ]
// },
// {
// id: 2,
// name: "transactions",
// table_type: "fact",
// columns: [
// { 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: "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: "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,
// name: "customers",
// table_type: "dimension",
// columns: [
// { name: "customer_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
// { name: "first_name", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
// { name: "last_name", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
// { name: "email", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
// { name: "phone", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false },
// { name: "registration_date", data_type: "TIMESTAMP", 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 }
// ]
// }
// ]
// }
// ]
// };
const mockDatabaseData = {
id: 1,
name: "Sample Database",
slug: "sample_database",
description: "Sample Database Structure (Mock Data)",
service: selectedService?.name || "Unknown Service",
dataSource: selectedDataSource?.name || "Unknown DataSource",
schemas: [
{
sch: "FINANCE_MART",
tables: [
{
id: 1,
name: "accounts",
table_type: "dimension",
columns: [
{ 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_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: "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 }
]
},
{
id: 2,
name: "transactions",
table_type: "fact",
columns: [
{ 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: "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 }
]
}
]
},
{
sch: "SALES_MART",
name: "Sales Mart",
tables: [
{
id: 3,
name: "customers",
table_type: "dimension",
columns: [
{ name: "customer_id", data_type: "INTEGER", is_primary_key: true, 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 }
]
}
]
}
]
};
// API Functions for fetching real data
const fetchDatabases = async () => {
@ -1155,48 +1049,99 @@ const ERDiagramCanvasContent = () => {
try {
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
const targetSchema = availableSchemas.find(schema => schema.sch === tableData.schema);
if (!targetSchema) {
throw new Error('Target schema not found');
}
// Create a new table object
const newTable = {
id: `new-table-${Date.now()}`,
// Prepare API payload
const apiPayload = {
token: token,
org: orgSlug,
con: selectedDatabase?.slug || "my_dwh", // Use selected database slug
sch: tableData.schema,
name: tableData.name,
description: tableData.description,
external_name: null,
table_type: tableData.table_type,
columns: tableData.columns,
schema: tableData.schema,
database: selectedDatabase?.name || 'Unknown'
description: tableData.description,
columns: tableData.columns.map(col => ({
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
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 = [];
console.log('API Payload:', apiPayload);
// Make API call to create the table
const response = await axios.post(ENDPOINTS.TABLE_CREATE, apiPayload, {
headers: {
'Content-Type': 'application/json'
}
updatedDatabase.schemas[schemaIndex].tables.push(newTable);
});
console.log('API Response:', response.data);
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()
};
// Regenerate the ER diagram with the new table
generateERDiagram(updatedDatabase);
// Add the table to existing tables list
setExistingTables(prev => [...prev, newTable]);
console.log('Table added successfully:', 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) {
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)}
>
{data.expanded ? (
<>
<span>Collapse Connections</span>
<FaChevronUp size={10} />
</>
) : (
<>
<span>Expand Connections</span>
<FaChevronDown size={10} />
</>
)}
</button>
</div>

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