Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added fix for loading spinner issue for other database #189

Merged
merged 4 commits into from
Oct 30, 2023
Merged

added fix for loading spinner issue for other database #189

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
793366d
added fix for loading spinner issue
sumukhswamy Oct 27, 2023
1fa6076
fix oui scroll issue
ps48 Oct 28, 2023
d799af7
added button next to the table for query to be added
sumukhswamy Oct 30, 2023
f4b6c56
icon changed for wuery loader
sumukhswamy Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 81 additions & 115 deletions public/components/SQLPage/table_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,32 +150,46 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
});
setToast(errorMessage, 'danger');
}
pollQueryStatus(id, http, (data) => {
setIsLoading({ flag: true, status: data.status });
if (data.status === 'SUCCESS') {
const fetchedDatanases = [].concat(...data.results);
setTreeData(loadTreeItem(fetchedDatanases, TREE_ITEM_DATABASE_NAME_DEFAULT_NAME));
setIsLoading({ flag: false, status: data.status });
} else if (data.status === 'FAILED') {
setIsLoading({
flag: false,
status: data.error,
});
setToast(`ERROR ${data.error}`, 'danger');
}
});
else{
pollQueryStatus(id, http, (data) => {
setIsLoading({ flag: true, status: data.status });
if (data.status === 'SUCCESS') {
const fetchedDatanases = [].concat(...data.results);
setTreeData(loadTreeItem(fetchedDatanases, TREE_ITEM_DATABASE_NAME_DEFAULT_NAME));
setIsLoading({ flag: false, status: data.status });
} else if (data.status === 'FAILED') {
setIsLoading({
flag: false,
status: data.error,
});
setToast(`ERROR ${data.error}`, 'danger');
}
});
}
});
}
};

useEffect(() => {
setTreeData([])
setIsLoading({
flag: true,
status: 'Query Not Run',
});
getSidebarContent();
}, [selectedItems, refreshTree]);

const setTreeDataDatabaseError = (databaseName: string) => {
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === databaseName) {
return { ...database, isLoading: false };
}
return database;
});
});
}

const handleDatabaseClick = (databaseName: string) => {
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
Expand All @@ -198,14 +212,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
flag: false,
status: errorMessage,
});
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === databaseName) {
return { ...database, isExpanded: true, isLoading: false };
}
return database;
});
});
setTreeDataDatabaseError(databaseName)
setToast(errorMessage, 'danger');
} else {
pollQueryStatus(id, http, (data) => {
Expand All @@ -230,17 +237,40 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
flag: false,
status: data.error,
});
setTreeDataDatabaseError(databaseName)
setToast(`ERROR ${data.error}`, 'danger');
}
});
}
});
};
const setTreeDataTableError = (databaseName: string, tableName: string) => {
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === databaseName) {
return {
...database,
values: database.values?.map((table) => {
if (table.name === tableName) {
return {
...table,
isLoading: false,
isExpanded: false,
};
}
return table;
}),
};
}
return database;
});
});
}

const loadCoveringIndex = (tableName: string) => {
const loadCoveringIndex = (tableName: string,databaseName:string) => {
const coverQuery = {
lang: 'sql',
query: `SHOW INDEX ON ${selectedItems[0]['label']}.${selectedDatabase}.${tableName}`,
query: `SHOW INDEX ON ${selectedItems[0]['label']}.${databaseName}.${tableName}`,
datasource: selectedItems[0]['label'],
};
getJobId(coverQuery, http, (id) => {
Expand All @@ -250,26 +280,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
flag: false,
status: errorMessage,
});
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === selectedDatabase) {
return {
...database,
values: database.values?.map((table) => {
if (table.name === tableName) {
return {
...table,
isLoading: false,
isExpanded: false,
};
}
return table;
}),
};
}
return database;
});
});
setTreeDataTableError(databaseName,tableName)
setToast(errorMessage, 'danger');
}
pollQueryStatus(id, http, (data) => {
Expand All @@ -278,7 +289,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
let coverIndexObj = loadTreeItem(res, TREE_ITEM_COVERING_INDEX_DEFAULT_NAME);
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === selectedDatabase) {
if (database.name === databaseName) {
return {
...database,
values: database.values?.map((table) => {
Expand Down Expand Up @@ -308,19 +319,17 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
flag: false,
status: data.error,
});
setTreeDataTableError(databaseName,tableName)
setToast(`ERROR ${data.error}`, 'danger');
}
});
});
};

const handleButtonClick = (e: MouseEvent, tableName: string) => {
e.stopPropagation();
tableName = TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME;
setSelectedTable(tableName);
const setLoadingForTableElements = (databaseName: string,tableName: string) =>{
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === selectedDatabase) {
if (database.name === databaseName) {
return {
...database,
values: database.values?.map((table) => {
Expand All @@ -337,9 +346,15 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
return database;
});
});
}

const handleButtonClick = (tableName: string, databaseName: string) => {
tableName = TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME;
setSelectedTable(tableName);
setLoadingForTableElements(databaseName,tableName)
const materializedViewQuery = {
lang: 'sql',
query: `SHOW MATERIALIZED VIEW IN ${selectedItems[0]['label']}.${selectedDatabase}`,
query: `SHOW MATERIALIZED VIEW IN ${selectedItems[0]['label']}.${databaseName}`,
datasource: selectedItems[0]['label'],
};
getJobId(materializedViewQuery, http, (id) => {
Expand All @@ -349,25 +364,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
flag: false,
status: errorMessage,
});
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === selectedDatabase) {
return {
...database,
values: database.values?.map((table) => {
if (table.name === tableName) {
return {
...table,
isLoading: false,
};
}
return table;
}),
};
}
return database;
});
});
setTreeDataTableError(tableName,databaseName)
setToast(errorMessage, 'danger');
} else {
pollQueryStatus(id, http, (data) => {
Expand All @@ -389,7 +386,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
}
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === selectedDatabase) {
if (database.name === databaseName) {
const updatedValues = database.values?.filter(
(item) => item.type !== TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME
);
Expand All @@ -408,37 +405,20 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
flag: false,
status: data.error,
});
setTreeDataTableError(databaseName,tableName)
setToast(`ERROR ${data.error}`, 'danger');
}
});
}
});
};

const handleTableClick = (tableName: string) => {
const handleTableClick = (tableName: string, databaseName:string) => {
setSelectedTable(tableName);
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === selectedDatabase) {
return {
...database,
values: database.values?.map((table) => {
if (table.name === tableName) {
return {
...table,
isLoading: true,
};
}
return table;
}),
};
}
return database;
});
});
setLoadingForTableElements(databaseName,tableName)
const skipQuery = {
lang: 'sql',
query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${selectedDatabase}.${tableName}`,
query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${databaseName}.${tableName}`,
datasource: selectedItems[0]['label'],
};
getJobId(skipQuery, http, (id) => {
Expand All @@ -448,33 +428,15 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
flag: false,
status: 'error',
});
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === selectedDatabase) {
return {
...database,
values: database.values?.map((table) => {
if (table.name === tableName) {
return {
...table,
isLoading: false,
};
}
return table;
}),
};
}
return database;
});
});
setTreeDataTableError(databaseName,tableName)
setToast(errorMessage, 'danger');
} else {
pollQueryStatus(id, http, (data) => {
if (data.status === 'SUCCESS') {
if (data.results.length > 0) {
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === selectedDatabase) {
if (database.name === databaseName) {
return {
...database,
values: database.values?.map((table) => {
Expand All @@ -495,12 +457,13 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
});
});
}
loadCoveringIndex(tableName);
loadCoveringIndex(tableName,databaseName);
} else if (data.status === 'FAILED') {
setIsLoading({
flag: false,
status: data.error,
});
setTreeDataTableError(databaseName,tableName)
setToast(`ERROR ${data.error}`, 'danger');
}
});
Expand Down Expand Up @@ -544,7 +507,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
<div key={node.name}>
<EuiFlexGroup direction="row">
<EuiFlexItem>
<EuiBadge color="hollow" onClick={handleButtonClick}>
<EuiBadge color="hollow">
Load Materialized View
</EuiBadge>
</EuiFlexItem>
Expand Down Expand Up @@ -602,8 +565,11 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
id: `${database.name}_${table.name}`,
icon: iconCreation(table),
callback: () => {
if(table.type === TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME){
handleButtonClick(table.name,database.name)
}
if (table.type !== TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME && table.type !== TREE_ITEM_MATERIALIZED_VIEW_DEFAULT_NAME && table.values?.length === 0) {
handleTableClick(table.name);
handleTableClick(table.name,database.name);
sumukhswamy marked this conversation as resolved.
Show resolved Hide resolved
}
if (table.type === TREE_ITEM_MATERIALIZED_VIEW_DEFAULT_NAME) {
handleAccelerationIndexClick(
Expand Down
Loading