From dd4f2cde87e53343a59a8befd0208e128eb56cb6 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 8 Nov 2023 21:14:13 +0000 Subject: [PATCH] Revert "added fix for loading spinner issue for other database (#189) (#192)" This reverts commit 94805c50162946aebd041593e5ba4430153f0f45. Signed-off-by: Eric --- .../Main/__snapshots__/main.test.tsx.snap | 12 +- .../__snapshots__/table_view.test.tsx.snap | 2 +- public/components/SQLPage/table_view.scss | 10 - public/components/SQLPage/table_view.tsx | 230 ++++++++++-------- .../selectors/index_type_selector.tsx | 41 ++-- .../selectors/source_selector.tsx | 54 ++-- 6 files changed, 177 insertions(+), 172 deletions(-) delete mode 100644 public/components/SQLPage/table_view.scss diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap index 1735ccb1..c90809bc 100644 --- a/public/components/Main/__snapshots__/main.test.tsx.snap +++ b/public/components/Main/__snapshots__/main.test.tsx.snap @@ -237,7 +237,7 @@ exports[`
spec click clear button 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
spec click run button, and response is not ok 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
spec click run button, and response is ok 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
spec click run button, response fills null and missing values class="euiFlexItem euiFlexItem--flexGrowZero" >
spec click translation button, and response is ok 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
spec renders the component 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" >
{ - 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'); - } - }); } + 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', @@ -179,17 +176,6 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } 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) => { @@ -212,7 +198,14 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } flag: false, status: errorMessage, }); - setTreeDataDatabaseError(databaseName); + setTreeData((prevTreeData) => { + return prevTreeData.map((database) => { + if (database.name === databaseName) { + return { ...database, isExpanded: true, isLoading: false }; + } + return database; + }); + }); setToast(errorMessage, 'danger'); } else { pollQueryStatus(id, http, (data) => { @@ -237,40 +230,17 @@ 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, databaseName: string) => { + const loadCoveringIndex = (tableName: string) => { const coverQuery = { lang: 'sql', - query: `SHOW INDEX ON ${selectedItems[0]['label']}.${databaseName}.${tableName}`, + query: `SHOW INDEX ON ${selectedItems[0]['label']}.${selectedDatabase}.${tableName}`, datasource: selectedItems[0]['label'], }; getJobId(coverQuery, http, (id) => { @@ -280,7 +250,26 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } flag: false, status: errorMessage, }); - setTreeDataTableError(databaseName, 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: false, + isExpanded: false, + }; + } + return table; + }), + }; + } + return database; + }); + }); setToast(errorMessage, 'danger'); } pollQueryStatus(id, http, (data) => { @@ -289,7 +278,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 === databaseName) { + if (database.name === selectedDatabase) { return { ...database, values: database.values?.map((table) => { @@ -319,17 +308,19 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } flag: false, status: data.error, }); - setTreeDataTableError(databaseName, tableName); setToast(`ERROR ${data.error}`, 'danger'); } }); }); }; - const setLoadingForTableElements = (databaseName: string, tableName: string) => { + const handleButtonClick = (e: MouseEvent, tableName: string) => { + e.stopPropagation(); + tableName = TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME; + setSelectedTable(tableName); setTreeData((prevTreeData) => { return prevTreeData.map((database) => { - if (database.name === databaseName) { + if (database.name === selectedDatabase) { return { ...database, values: database.values?.map((table) => { @@ -346,15 +337,9 @@ 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']}.${databaseName}`, + query: `SHOW MATERIALIZED VIEW IN ${selectedItems[0]['label']}.${selectedDatabase}`, datasource: selectedItems[0]['label'], }; getJobId(materializedViewQuery, http, (id) => { @@ -364,7 +349,25 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } flag: false, status: errorMessage, }); - setTreeDataTableError(tableName, databaseName); + 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; + }); + }); setToast(errorMessage, 'danger'); } else { pollQueryStatus(id, http, (data) => { @@ -386,7 +389,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } } setTreeData((prevTreeData) => { return prevTreeData.map((database) => { - if (database.name === databaseName) { + if (database.name === selectedDatabase) { const updatedValues = database.values?.filter( (item) => item.type !== TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME ); @@ -405,7 +408,6 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } flag: false, status: data.error, }); - setTreeDataTableError(databaseName, tableName); setToast(`ERROR ${data.error}`, 'danger'); } }); @@ -413,12 +415,30 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } }); }; - const handleTableClick = (tableName: string, databaseName: string) => { + const handleTableClick = (tableName: string) => { setSelectedTable(tableName); - setLoadingForTableElements(databaseName, 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; + }); + }); const skipQuery = { lang: 'sql', - query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${databaseName}.${tableName}`, + query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${selectedDatabase}.${tableName}`, datasource: selectedItems[0]['label'], }; getJobId(skipQuery, http, (id) => { @@ -428,7 +448,25 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } flag: false, status: 'error', }); - setTreeDataTableError(databaseName, 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: false, + }; + } + return table; + }), + }; + } + return database; + }); + }); setToast(errorMessage, 'danger'); } else { pollQueryStatus(id, http, (data) => { @@ -436,7 +474,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } if (data.results.length > 0) { setTreeData((prevTreeData) => { return prevTreeData.map((database) => { - if (database.name === databaseName) { + if (database.name === selectedDatabase) { return { ...database, values: database.values?.map((table) => { @@ -457,31 +495,22 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } }); }); } - loadCoveringIndex(tableName, databaseName); + loadCoveringIndex(tableName); } else if (data.status === 'FAILED') { setIsLoading({ flag: false, status: data.error, }); - setTreeDataTableError(databaseName, tableName); setToast(`ERROR ${data.error}`, 'danger'); } }); } }); }; - const handleQuery = (e: MouseEvent, parentName: string, tableName: string) => { - e.stopPropagation(); - updateSQLQueries(`select * from ${selectedItems[0].label}.${parentName}.${tableName} limit 10`); - }; const iconCreation = (node: TreeItem) => { if (node.type === TREE_ITEM_MATERIALIZED_VIEW_DEFAULT_NAME) { - return ( - - MV - - ); + return MV; } else if ( node.type === TREE_ITEM_BADGE_NAME || node.type === TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME @@ -514,10 +543,12 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } return (
- - Load Materialized View + + + Load Materialized View + - + {node.isLoading && } @@ -529,16 +560,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }
- + {_.truncate(node.name, { length: 50 })}{' '} {node.isLoading && } - {node.type === TREE_ITEM_TABLE_NAME_DEFAULT_NAME && !node.isLoading && ( - handleQuery(e,parentName,node.name)} - > - )} @@ -577,15 +602,8 @@ 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, 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); } if (table.type === TREE_ITEM_MATERIALIZED_VIEW_DEFAULT_NAME) { handleAccelerationIndexClick( @@ -642,7 +660,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } ) : OpenSearchIndicesTree.length > 0 || treeDataDatabases.length > 0 ? ( - + {selectedItems[0].label === 'OpenSearch' ? ( ) : ( diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx index 1ea4bffd..00e1e92d 100644 --- a/public/components/acceleration/selectors/index_type_selector.tsx +++ b/public/components/acceleration/selectors/index_type_selector.tsx @@ -56,28 +56,27 @@ export const IndexTypeSelector = ({ getJobId(query, http, (id: string) => { if (id === undefined) { setToast(errorMessage, 'danger'); - } else { - pollQueryStatus(id, http, (data: { status: string; results: any[] }) => { - if (data.status === 'SUCCESS') { - const dataTableFields: DataTableFieldsType[] = data.results - .filter((row) => !row[0].startsWith('#')) - .map((row, index) => ({ - id: `${idPrefix}${index + 1}`, - fieldName: row[0], - dataType: row[1], - })); - setAccelerationFormData({ - ...accelerationFormData, - dataTableFields: dataTableFields, - }); - setLoading(false); - } - if (data.status === 'FAILED') { - setLoading(false); - setToast(errorMessage, 'danger'); - } - }); } + pollQueryStatus(id, http, (data: { status: string; results: any[] }) => { + if (data.status === 'SUCCESS') { + const dataTableFields: DataTableFieldsType[] = data.results + .filter((row) => !row[0].startsWith('#')) + .map((row, index) => ({ + id: `${idPrefix}${index + 1}`, + fieldName: row[0], + dataType: row[1], + })); + setAccelerationFormData({ + ...accelerationFormData, + dataTableFields: dataTableFields, + }); + setLoading(false); + } + if (data.status === 'FAILED') { + setLoading(false); + setToast(errorMessage, 'danger'); + } + }); }); } }, [accelerationFormData.dataTable]); diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx index d23b1230..0c488127 100644 --- a/public/components/acceleration/selectors/source_selector.tsx +++ b/public/components/acceleration/selectors/source_selector.tsx @@ -70,21 +70,20 @@ export const AccelerationDataSourceSelector = ({ getJobId(query, http, (id: string) => { if (id === undefined) { setToast(errorMessage, 'danger'); - } else { - pollQueryStatus(id, http, (data: { status: string; results: any[] }) => { - if (data.status === 'SUCCESS') { - let databaseOptions: EuiComboBoxOptionOption[] = []; - if (data.results.length > 0) - databaseOptions = data.results.map((subArray: any[]) => ({ label: subArray[0] })); - setDatabases(databaseOptions); - setLoadingComboBoxes({ ...loadingComboBoxes, database: false }); - } - if (data.status === 'FAILED') { - setLoadingComboBoxes({ ...loadingComboBoxes, database: false }); - setToast(errorMessage, 'danger'); - } - }); } + pollQueryStatus(id, http, (data: { status: string; results: any[] }) => { + if (data.status === 'SUCCESS') { + let databaseOptions: EuiComboBoxOptionOption[] = []; + if (data.results.length > 0) + databaseOptions = data.results.map((subArray: any[]) => ({ label: subArray[0] })); + setDatabases(databaseOptions); + setLoadingComboBoxes({ ...loadingComboBoxes, database: false }); + } + if (data.status === 'FAILED') { + setLoadingComboBoxes({ ...loadingComboBoxes, database: false }); + setToast(errorMessage, 'danger'); + } + }); }); }; @@ -99,21 +98,20 @@ export const AccelerationDataSourceSelector = ({ getJobId(query, http, (id: string) => { if (id === undefined) { setToast(errorMessage, 'danger'); - } else { - pollQueryStatus(id, http, (data: { status: string; results: any[] }) => { - if (data.status === 'SUCCESS') { - let dataTableOptions: EuiComboBoxOptionOption[] = []; - if (data.results.length > 0) - dataTableOptions = data.results.map((subArray) => ({ label: subArray[1] })); - setTables(dataTableOptions); - setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: false }); - } - if (data.status === 'FAILED') { - setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: false }); - setToast(errorMessage, 'danger'); - } - }); } + pollQueryStatus(id, http, (data: { status: string; results: any[] }) => { + if (data.status === 'SUCCESS') { + let dataTableOptions: EuiComboBoxOptionOption[] = []; + if (data.results.length > 0) + dataTableOptions = data.results.map((subArray) => ({ label: subArray[1] })); + setTables(dataTableOptions); + setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: false }); + } + if (data.status === 'FAILED') { + setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: false }); + setToast(errorMessage, 'danger'); + } + }); }); };