diff --git a/common/utils/async_query_helpers.ts b/common/utils/async_query_helpers.ts index bc4f874c..3990b189 100644 --- a/common/utils/async_query_helpers.ts +++ b/common/utils/async_query_helpers.ts @@ -12,24 +12,32 @@ import { POLL_INTERVAL_MS, } from '../constants'; -export const setAsyncSessionId = (value: string | null) => { +export const setAsyncSessionId = (dataSource: string, value: string | null) => { if (value !== null) { - sessionStorage.setItem(ASYNC_QUERY_SESSION_ID, value); + sessionStorage.setItem(`${ASYNC_QUERY_SESSION_ID}_${dataSource}`, value); } }; -export const getAsyncSessionId = () => { - return sessionStorage.getItem(ASYNC_QUERY_SESSION_ID); +export const getAsyncSessionId = (dataSource: string) => { + return sessionStorage.getItem(`${ASYNC_QUERY_SESSION_ID}_${dataSource}`); }; -export const getJobId = (query: {}, http: CoreStart['http'], callback) => { +export const getJobId = ( + currentDataSource: string, + query: {}, + http: CoreStart['http'], + callback +) => { http .post(ASYNC_QUERY_ENDPOINT, { - body: JSON.stringify({ ...query, sessionId: getAsyncSessionId() ?? undefined }), + body: JSON.stringify({ + ...query, + sessionId: getAsyncSessionId(currentDataSource) ?? undefined, + }), }) .then((res) => { const id = res.data.resp.queryId; - setAsyncSessionId(_.get(res.data.resp, 'sessionId', null)); + setAsyncSessionId(currentDataSource, _.get(res.data.resp, 'sessionId', null)); if (id === undefined) { console.error(JSON.parse(res.data.body)); } @@ -51,14 +59,14 @@ export const pollQueryStatus = (id: string, http: CoreStart['http'], callback) = status === 'scheduled' || status === 'waiting' ) { - callback({ status: status }); + callback({ status }); setTimeout(() => pollQueryStatus(id, http, callback), POLL_INTERVAL_MS); } else if (status === 'failed') { const results = res.data.resp; callback({ status: 'FAILED', error: results.error }); } else if (status === 'success') { const results = _.get(res.data.resp, 'datarows'); - callback({ status: 'SUCCESS', results: results }); + callback({ status: 'SUCCESS', results }); } }) .catch((err) => { diff --git a/public/components/Main/main.test.tsx b/public/components/Main/main.test.tsx index cb548d24..581a7f5f 100644 --- a/public/components/Main/main.test.tsx +++ b/public/components/Main/main.test.tsx @@ -17,7 +17,7 @@ import { mockQueryTranslationResponse, mockResultWithNull, } from '../../../test/mocks/mockData'; -import Main from './main'; +import { Main } from './main'; const setBreadcrumbsMock = jest.fn(); @@ -129,7 +129,6 @@ describe('
spec', () => { }); it('click clear button', async () => { - let postRequestFlag = 0; const client = httpClientMock; client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery); client.post = jest.fn(() => { diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx index bf7c101c..b0d6d1f9 100644 --- a/public/components/Main/main.tsx +++ b/public/components/Main/main.tsx @@ -58,18 +58,20 @@ export interface ResponseDetail { data?: T; } -export type TranslateResult = { [key: string]: any }; +export interface TranslateResult { + [key: string]: any; +} export interface QueryMessage { text: any; className: string; } -export type QueryResult = { +export interface QueryResult { fields: string[]; records: DataRow[]; message: string; -}; +} export interface Tab { id: string; @@ -77,18 +79,18 @@ export interface Tab { disabled: boolean; } -export type ItemIdToExpandedRowMap = { +export interface ItemIdToExpandedRowMap { [key: string]: { nodes: Tree; expandedRow?: {}; selectedNodes?: { [key: string]: any }; }; -}; +} -export type DataRow = { +export interface DataRow { rowId: number; data: { [key: string]: any }; -}; +} interface MainProps { httpClient: CoreStart['http']; @@ -112,7 +114,7 @@ interface MainState { selectedTabId: string; searchQuery: string; itemIdToExpandedRowMap: ItemIdToExpandedRowMap; - messages: Array; + messages: QueryMessage[]; isResultFullScreen: boolean; selectedDatasource: EuiComboBoxOptionOption[]; asyncLoading: boolean; @@ -127,7 +129,7 @@ interface MainState { const SUCCESS_MESSAGE = 'Success'; const errorQueryResponse = (queryResultResponseDetail: any) => { - let errorMessage = + const errorMessage = queryResultResponseDetail.errorMessage + ', this query is not runnable. \n \n' + queryResultResponseDetail.data; @@ -135,9 +137,9 @@ const errorQueryResponse = (queryResultResponseDetail: any) => { }; export function getQueryResultsForTable( - queryResults: ResponseDetail[], + queryResults: Array>, jsonParseData: boolean -): ResponseDetail[] { +): Array> { return queryResults.map( (queryResultResponseDetail: ResponseDetail): ResponseDetail => { if (!queryResultResponseDetail.fulfilled) { @@ -150,8 +152,8 @@ export function getQueryResultsForTable( ? JSON.parse(queryResultResponseDetail.data) : queryResultResponseDetail.data; const responseObj = queryResultResponseDetail.data ? resultData : ''; - let fields: string[] = []; - let dataRows: DataRow[] = []; + const fields: string[] = []; + const dataRows: DataRow[] = []; const schema: object[] = _.get(responseObj, 'schema'); const datarows: any[][] = _.get(responseObj, 'datarows'); @@ -179,9 +181,9 @@ export function getQueryResultsForTable( } for (const [id, field] of datarows.entries()) { - let row: { [key: string]: any } = {}; - row['TABLE_NAME'] = field[index]; - let dataRow: DataRow = { + const row: { [key: string]: any } = {}; + row.TABLE_NAME = field[index]; + const dataRow: DataRow = { rowId: id, data: row, }; @@ -203,12 +205,12 @@ export function getQueryResultsForTable( } for (const [id, data] of datarows.entries()) { - let row: { [key: string]: any } = {}; - for (const index of schema.keys()) { - const fieldname = fields[index]; - row[fieldname] = _.isNull(data[index]) ? '-' : data[index]; + const row: { [key: string]: any } = {}; + for (const idx of schema.keys()) { + const fieldname = fields[idx]; + row[fieldname] = _.isNull(data[idx]) ? '-' : data[idx]; } - let dataRow: DataRow = { + const dataRow: DataRow = { rowId: id, data: row, }; @@ -221,7 +223,7 @@ export function getQueryResultsForTable( return { fulfilled: queryResultResponseDetail.fulfilled, data: { - fields: fields, + fields, records: dataRows, message: SUCCESS_MESSAGE, }, @@ -309,14 +311,14 @@ export class Main extends React.Component { }; } if (!response.data.ok) { - let err = response.data.resp; + const err = response.data.resp; console.log('Error occurred when processing query response: ', err); // Exclude a special case from the error cases: // When downloading the csv result, it gets the "Unable to parse/serialize body" response // But data is also returned in data body. For this case: // Mark fulfilled to true for this case to write the csv result to downloading file - if (response.data.body && err == 'Unable to parse/serialize body') { + if (response.data.body && err === 'Unable to parse/serialize body') { return { fulfilled: true, errorMessage: err, @@ -358,7 +360,7 @@ export class Main extends React.Component { }; // It returns the error or successful message to display in the Message Tab - getMessage(queryResultsForTable: ResponseDetail[]): Array { + getMessage(queryResultsForTable: Array>): QueryMessage[] { return queryResultsForTable.map((queryResult) => { return { text: @@ -370,7 +372,7 @@ export class Main extends React.Component { }); } - getTranslateMessage(translationResult: ResponseDetail[]): Array { + getTranslateMessage(translationResult: Array>): QueryMessage[] { return translationResult.map((translation) => { return { text: translation.data ? SUCCESS_MESSAGE : translation.errorMessage, @@ -383,7 +385,7 @@ export class Main extends React.Component { const queries: string[] = getQueries(queriesString); const language = this.state.language; if (queries.length > 0) { - let endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery'); + const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery'); const responsePromise = Promise.all( queries.map((query: string) => this.httpClient @@ -401,13 +403,16 @@ export class Main extends React.Component { ) ); Promise.all([responsePromise]).then(([response]) => { - const results: ResponseDetail[] = response.map((response) => - this.processQueryResponse(response as IHttpResponse) + const results: Array> = response.map((resp) => + this.processQueryResponse(resp as IHttpResponse) + ); + const resultTable: Array> = getQueryResultsForTable( + results, + true ); - const resultTable: ResponseDetail[] = getQueryResultsForTable(results, true); this.setState( { - queries: queries, + queries, queryResults: results, queryResultsTable: resultTable, selectedTabId: getDefaultTabId(results), @@ -434,6 +439,7 @@ export class Main extends React.Component { // finding regular query here const queries: string[] = getQueries(queriesString); const language = this.state.language; + const currentDataSource = this.state.selectedDatasource[0].label; if (queries.length > 0) { const responsePromise = Promise.all( queries.map((query: string) => @@ -441,9 +447,9 @@ export class Main extends React.Component { .post(ASYNC_QUERY_ENDPOINT, { body: JSON.stringify({ lang: language, - query: query, - datasource: this.state.selectedDatasource[0].label, - sessionId: getAsyncSessionId() ?? undefined, + query, + datasource: currentDataSource, + sessionId: getAsyncSessionId(currentDataSource) ?? undefined, }), }) .catch((error: any) => { @@ -460,8 +466,8 @@ export class Main extends React.Component { ); Promise.all([responsePromise]).then(([response]) => { - const results: ResponseDetail[] = response.map((response) => - this.processQueryResponse(response as IHttpResponse) + const results: Array> = response.map((resp) => + this.processQueryResponse(resp as IHttpResponse) ); results.map( (queryResultResponseDetail: ResponseDetail): ResponseDetail => { @@ -476,7 +482,7 @@ export class Main extends React.Component { : ''; const queryId: string = _.get(responseObj, 'queryId'); - setAsyncSessionId(_.get(responseObj, 'sessionId', null)); + setAsyncSessionId(currentDataSource, _.get(responseObj, 'sessionId', null)); // clear state from previous results and start async loading this.setState({ @@ -527,13 +533,16 @@ export class Main extends React.Component { const result: ResponseDetail = this.processQueryResponse( response as IHttpResponse ); - const status = result.data['status']; + const status = result.data.status; if (_.isEqual(status, 'SUCCESS')) { - const resultTable: ResponseDetail[] = getQueryResultsForTable([result], false); + const resultTable: Array> = getQueryResultsForTable( + [result], + false + ); this.setState({ - queries: queries, + queries, queryResults: [result], - queryResultsTable: result.data['schema'].length > 0 ? resultTable : [], + queryResultsTable: result.data.schema.length > 0 ? resultTable : [], selectedTabId: getDefaultTabId([result]), selectedTabName: getDefaultTabLabel([result], queries[0]), messages: this.getMessage(resultTable), @@ -544,7 +553,7 @@ export class Main extends React.Component { searchQuery: '', asyncLoading: false, asyncLoadingStatus: status, - isCallOutVisible: !(result.data['schema'].length > 0), + isCallOutVisible: !(result.data.schema.length > 0), }); } else if (_.isEqual(status, 'FAILED') || _.isEqual(status, 'CANCELLED')) { this.setState({ @@ -556,7 +565,7 @@ export class Main extends React.Component { className: 'error-message', }, ], - asyncQueryError: result.data['error'], + asyncQueryError: result.data.error, }); } else { this.setState({ @@ -589,12 +598,12 @@ export class Main extends React.Component { const language = this.state.language; if (queries.length > 0) { - let endpoint = + const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'translatesql' : 'translateppl'); const translationPromise = Promise.all( queries.map((query: string) => this.httpClient - .post(endpoint, { body: JSON.stringify({ query: query }) }) + .post(endpoint, { body: JSON.stringify({ query }) }) .catch((error: any) => { this.setState({ messages: [ @@ -609,12 +618,12 @@ export class Main extends React.Component { ); Promise.all([translationPromise]).then(([translationResponse]) => { - const translationResult: ResponseDetail< + const translationResult: Array[] = translationResponse.map((translationResponse) => - this.processTranslateResponse(translationResponse as IHttpResponse) + >> = translationResponse.map((translationResp) => + this.processTranslateResponse(translationResp as IHttpResponse) ); - const shouldCleanResults = queries == this.state.queries; + const shouldCleanResults = queries === this.state.queries; if (shouldCleanResults) { this.setState({ queries, @@ -653,8 +662,8 @@ export class Main extends React.Component { }) ) ).then((response) => { - const results: ResponseDetail[] = response.map((response) => - this.processQueryResponse(response as IHttpResponse) + const results: Array> = response.map((resp) => + this.processQueryResponse(resp as IHttpResponse) ); this.setState( { @@ -670,11 +679,11 @@ export class Main extends React.Component { getJdbc = (queries: string[]): void => { const language = this.state.language; if (queries.length > 0) { - let endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery'); + const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery'); Promise.all( queries.map((query: string) => this.httpClient - .post(endpoint, { body: JSON.stringify({ query: query }) }) + .post(endpoint, { body: JSON.stringify({ query }) }) .catch((error: any) => { this.setState({ messages: [ @@ -687,8 +696,8 @@ export class Main extends React.Component { }) ) ).then((jdbcResponse) => { - const jdbcResult: ResponseDetail[] = jdbcResponse.map((jdbcResponse) => - this.processQueryResponse(jdbcResponse as IHttpResponse) + const jdbcResult: Array> = jdbcResponse.map((jdbcResp) => + this.processQueryResponse(jdbcResp as IHttpResponse) ); this.setState( { @@ -704,11 +713,11 @@ export class Main extends React.Component { getCsv = (queries: string[]): void => { const language = this.state.language; if (queries.length > 0) { - let endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlcsv' : 'pplcsv'); + const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlcsv' : 'pplcsv'); Promise.all( queries.map((query: string) => this.httpClient - .post(endpoint, { body: JSON.stringify({ query: query }) }) + .post(endpoint, { body: JSON.stringify({ query }) }) .catch((error: any) => { this.setState({ messages: [ @@ -721,8 +730,8 @@ export class Main extends React.Component { }) ) ).then((csvResponse) => { - const csvResult: ResponseDetail[] = csvResponse.map((csvResponse) => - this.processQueryResponse(csvResponse as IHttpResponse) + const csvResult: Array> = csvResponse.map((csvResp) => + this.processQueryResponse(csvResp as IHttpResponse) ); this.setState( { @@ -738,11 +747,11 @@ export class Main extends React.Component { getText = (queries: string[]): void => { const language = this.state.language; if (queries.length > 0) { - let endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqltext' : 'ppltext'); + const endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqltext' : 'ppltext'); Promise.all( queries.map((query: string) => this.httpClient - .post(endpoint, { body: JSON.stringify({ query: query }) }) + .post(endpoint, { body: JSON.stringify({ query }) }) .catch((error: any) => { this.setState({ messages: [ @@ -755,8 +764,8 @@ export class Main extends React.Component { }) ) ).then((textResponse) => { - const textResult: ResponseDetail[] = textResponse.map((textResponse) => - this.processQueryResponse(textResponse as IHttpResponse) + const textResult: Array> = textResponse.map((textResp) => + this.processQueryResponse(textResp as IHttpResponse) ); this.setState( { @@ -845,7 +854,7 @@ export class Main extends React.Component { let link; let linkTitle; - if (this.state.language == 'SQL') { + if (this.state.language === 'SQL') { page = ( { - +
{page}
@@ -1082,5 +1091,3 @@ export class Main extends React.Component { ); } } - -export default Main; diff --git a/public/components/SQLPage/table_view.tsx b/public/components/SQLPage/table_view.tsx index 9ff070b7..1982be98 100644 --- a/public/components/SQLPage/table_view.tsx +++ b/public/components/SQLPage/table_view.tsx @@ -46,8 +46,8 @@ interface CustomView { export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }: CustomView) => { const [tableNames, setTableNames] = useState([]); - const [selectedDatabase, setSelectedDatabase] = useState(''); - const [selectedTable, setSelectedTable] = useState(null); + const [_selectedDatabase, setSelectedDatabase] = useState(''); + const [_selectedTable, setSelectedTable] = useState(null); const [isLoadingBanner, setIsLoading] = useState({ flag: false, status: 'Not loading', @@ -82,15 +82,15 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } function loadTreeItem(elements: string[], type: TreeItemType): TreeItem[] { return elements.map((element) => { - let treeItem: TreeItem = { + const treeItem: TreeItem = { name: element, - type: type, + type, isExpanded: false, }; if ( - type != TREE_ITEM_COVERING_INDEX_DEFAULT_NAME && - type != TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME + type !== TREE_ITEM_COVERING_INDEX_DEFAULT_NAME && + type !== TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME ) { treeItem.values = []; treeItem.isLoading = false; @@ -139,10 +139,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } setTableNames([]); const query = { lang: 'sql', - query: `SHOW SCHEMAS IN ${selectedItems[0]['label']}`, - datasource: selectedItems[0]['label'], + query: `SHOW SCHEMAS IN ${selectedItems[0].label}`, + datasource: selectedItems[0].label, }; - getJobId(query, http, (id) => { + getJobId(selectedItems[0].label, query, http, (id) => { if (id === undefined) { const errorMessage = 'ERROR fetching databases'; setIsLoading({ @@ -202,10 +202,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } setSelectedDatabase(databaseName); const query = { lang: 'sql', - query: `SHOW TABLES IN ${selectedItems[0]['label']}.${databaseName}`, - datasource: selectedItems[0]['label'], + query: `SHOW TABLES IN ${selectedItems[0].label}.${databaseName}`, + datasource: selectedItems[0].label, }; - getJobId(query, http, (id) => { + getJobId(selectedItems[0].label, query, http, (id) => { if (id === undefined) { const errorMessage = 'ERROR fetching Tables'; setIsLoading({ @@ -219,7 +219,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } if (data.status === 'SUCCESS') { const fetchTables = data.results.map((subArray) => subArray[1]); let values = loadTreeItem(fetchTables, TREE_ITEM_TABLE_NAME_DEFAULT_NAME); - let mvObj = loadTreeItem( + const mvObj = loadTreeItem( [TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME], TREE_ITEM_LOAD_MATERIALIZED_BADGE_NAME ); @@ -227,7 +227,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } setTreeData((prevTreeData) => { return prevTreeData.map((database) => { if (database.name === databaseName) { - return { ...database, values: values, isExpanded: true, isLoading: false }; + return { ...database, values, isExpanded: true, isLoading: false }; } return database; }); @@ -270,10 +270,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } const loadCoveringIndex = (tableName: string, databaseName: string) => { const coverQuery = { lang: 'sql', - query: `SHOW INDEX ON ${selectedItems[0]['label']}.${databaseName}.${tableName}`, - datasource: selectedItems[0]['label'], + query: `SHOW INDEX ON ${selectedItems[0].label}.${databaseName}.${tableName}`, + datasource: selectedItems[0].label, }; - getJobId(coverQuery, http, (id) => { + getJobId(selectedItems[0].label, coverQuery, http, (id) => { if (id === undefined) { const errorMessage = 'ERROR fetching Covering Index'; setIsLoading({ @@ -286,7 +286,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } pollQueryStatus(id, http, (data) => { if (data.status === 'SUCCESS') { const res = [].concat(data.results); - let coverIndexObj = loadTreeItem(res, TREE_ITEM_COVERING_INDEX_DEFAULT_NAME); + const coverIndexObj = loadTreeItem(res, TREE_ITEM_COVERING_INDEX_DEFAULT_NAME); setTreeData((prevTreeData) => { return prevTreeData.map((database) => { if (database.name === databaseName) { @@ -354,10 +354,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } setLoadingForTableElements(databaseName, tableName); const materializedViewQuery = { lang: 'sql', - query: `SHOW MATERIALIZED VIEW IN ${selectedItems[0]['label']}.${databaseName}`, - datasource: selectedItems[0]['label'], + query: `SHOW MATERIALIZED VIEW IN ${selectedItems[0].label}.${databaseName}`, + datasource: selectedItems[0].label, }; - getJobId(materializedViewQuery, http, (id) => { + getJobId(selectedItems[0].label, materializedViewQuery, http, (id) => { if (id === undefined) { const errorMessage = 'ERROR fetching Materialized View'; setIsLoading({ @@ -418,10 +418,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } setLoadingForTableElements(databaseName, tableName); const skipQuery = { lang: 'sql', - query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${databaseName}.${tableName}`, - datasource: selectedItems[0]['label'], + query: `DESC SKIPPING INDEX ON ${selectedItems[0].label}.${databaseName}.${tableName}`, + datasource: selectedItems[0].label, }; - getJobId(skipQuery, http, (id) => { + getJobId(selectedItems[0].label, skipQuery, http, (id) => { if (id === undefined) { const errorMessage = 'ERROR fetching Skipping index'; setIsLoading({ @@ -537,7 +537,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } handleQuery(e, parentName, node.name)} - > + /> )} @@ -572,8 +572,8 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } }, isSelectable: true, isExpanded: database.isExpanded, - children: database.values?.map((table, index) => ({ - label: createLabel(table, database.name, index), + children: database.values?.map((table, idx) => ({ + label: createLabel(table, database.name, idx), id: `${database.name}_${table.name}`, icon: iconCreation(table), callback: () => { @@ -598,8 +598,8 @@ export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree } }, isSelectable: true, isExpanded: table.isExpanded, - children: table.values?.map((indexChild, index) => ({ - label: createLabel(indexChild, table.name, index), + children: table.values?.map((indexChild, idxValue) => ({ + label: createLabel(indexChild, table.name, idxValue), id: `${database.name}_${table.name}_${indexChild.name}`, icon: iconCreation(indexChild), callback: () => { diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx index 1ea4bffd..0f8c6b5c 100644 --- a/public/components/acceleration/selectors/index_type_selector.tsx +++ b/public/components/acceleration/selectors/index_type_selector.tsx @@ -38,9 +38,9 @@ export const IndexTypeSelector = ({ setAccelerationFormData, }: IndexTypeSelectorProps) => { const { setToast } = useToast(); - const [selectedIndexType, setSelectedIndexType] = useState[]>([ - ACCELERATION_INDEX_TYPES[0], - ]); + const [selectedIndexType, setSelectedIndexType] = useState< + Array> + >([ACCELERATION_INDEX_TYPES[0]]); const [loading, setLoading] = useState(false); useEffect(() => { @@ -53,7 +53,7 @@ export const IndexTypeSelector = ({ datasource: accelerationFormData.dataSource, }; const errorMessage = 'ERROR: failed to load table columns'; - getJobId(query, http, (id: string) => { + getJobId(accelerationFormData.dataSource, query, http, (id: string) => { if (id === undefined) { setToast(errorMessage, 'danger'); } else { @@ -68,7 +68,7 @@ export const IndexTypeSelector = ({ })); setAccelerationFormData({ ...accelerationFormData, - dataTableFields: dataTableFields, + dataTableFields, }); setLoading(false); } @@ -82,7 +82,7 @@ export const IndexTypeSelector = ({ } }, [accelerationFormData.dataTable]); - const onChangeIndexType = (indexTypeOption: EuiComboBoxOptionOption[]) => { + const onChangeIndexType = (indexTypeOption: Array>) => { const indexType = indexTypeOption[0].value as AccelerationIndexType; setAccelerationFormData({ ...accelerationFormData, diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx index d23b1230..a7e141f5 100644 --- a/public/components/acceleration/selectors/source_selector.tsx +++ b/public/components/acceleration/selectors/source_selector.tsx @@ -26,14 +26,18 @@ export const AccelerationDataSourceSelector = ({ selectedDatasource, }: AccelerationDataSourceSelectorProps) => { const { setToast } = useToast(); - const [dataConnections, setDataConnections] = useState[]>([]); + const [dataConnections, setDataConnections] = useState>>( + [] + ); const [selectedDataConnection, setSelectedDataConnection] = useState< - EuiComboBoxOptionOption[] + Array> >(selectedDatasource.length > 0 ? [{ label: selectedDatasource[0].label }] : []); - const [databases, setDatabases] = useState[]>([]); - const [selectedDatabase, setSelectedDatabase] = useState[]>([]); - const [tables, setTables] = useState[]>([]); - const [selectedTable, setSelectedTable] = useState[]>([]); + const [databases, setDatabases] = useState>>([]); + const [selectedDatabase, setSelectedDatabase] = useState>>( + [] + ); + const [tables, setTables] = useState>>([]); + const [selectedTable, setSelectedTable] = useState>>([]); const [loadingComboBoxes, setLoadingComboBoxes] = useState({ dataSource: false, database: false, @@ -67,13 +71,13 @@ export const AccelerationDataSourceSelector = ({ datasource: accelerationFormData.dataSource, }; const errorMessage = `ERROR: failed to load databases`; - getJobId(query, http, (id: string) => { + getJobId(selectedDataConnection[0].label, 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[] = []; + let databaseOptions: Array> = []; if (data.results.length > 0) databaseOptions = data.results.map((subArray: any[]) => ({ label: subArray[0] })); setDatabases(databaseOptions); @@ -96,13 +100,13 @@ export const AccelerationDataSourceSelector = ({ datasource: accelerationFormData.dataSource, }; const errorMessage = `ERROR: failed to load tables`; - getJobId(query, http, (id: string) => { + getJobId(selectedDataConnection[0].label, 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[] = []; + let dataTableOptions: Array> = []; if (data.results.length > 0) dataTableOptions = data.results.map((subArray) => ({ label: subArray[1] })); setTables(dataTableOptions);