From 5a956bafa9574ad2ec7eecc13233ec9d5a7d0d1e Mon Sep 17 00:00:00 2001 From: sumukhswamy Date: Mon, 30 Oct 2023 13:58:56 -0700 Subject: [PATCH] added fix for loading spinner issue for other database (#189) * added fix for loading spinner issue Signed-off-by: sumukhswamy * fix oui scroll issue Signed-off-by: Shenoy Pratik * added button next to the table for query to be added Signed-off-by: sumukhswamy * icon changed for wuery loader Signed-off-by: sumukhswamy --------- Signed-off-by: sumukhswamy Signed-off-by: Shenoy Pratik Co-authored-by: Shenoy Pratik --- .../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, 172 insertions(+), 177 deletions(-) create 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 c90809bc..1735ccb1 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', @@ -176,6 +179,17 @@ 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) => { @@ -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) => { @@ -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) => { @@ -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) => { @@ -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) => { @@ -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) => { @@ -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) => { @@ -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) => { @@ -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 ); @@ -408,6 +405,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } flag: false, status: data.error, }); + setTreeDataTableError(databaseName, tableName); setToast(`ERROR ${data.error}`, 'danger'); } }); @@ -415,30 +413,12 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } }); }; - 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) => { @@ -448,25 +428,7 @@ 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) => { @@ -474,7 +436,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } 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) => { @@ -495,22 +457,31 @@ 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'); } }); } }); }; + 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 @@ -543,12 +514,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } return (
- - - Load Materialized View - + + Load Materialized View - + {node.isLoading && } @@ -560,10 +529,16 @@ 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)} + > + )} @@ -602,8 +577,15 @@ 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 && table.type !== TREE_ITEM_MATERIALIZED_VIEW_DEFAULT_NAME && table.values?.length === 0) { - handleTableClick(table.name); + 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_MATERIALIZED_VIEW_DEFAULT_NAME) { handleAccelerationIndexClick( @@ -660,7 +642,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 00e1e92d..1ea4bffd 100644 --- a/public/components/acceleration/selectors/index_type_selector.tsx +++ b/public/components/acceleration/selectors/index_type_selector.tsx @@ -56,27 +56,28 @@ 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 0c488127..d23b1230 100644 --- a/public/components/acceleration/selectors/source_selector.tsx +++ b/public/components/acceleration/selectors/source_selector.tsx @@ -70,20 +70,21 @@ 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'); - } - }); }); }; @@ -98,20 +99,21 @@ 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'); - } - }); }); };