Skip to content

Commit

Permalink
addressed pr comments, added code for reload button
Browse files Browse the repository at this point in the history 
Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
  • Loading branch information
@sumukhswamy
sumukhswamy committed Oct 17, 2023
1 parent ed65722 commit a4c8c72
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 56 deletions.
9 changes: 4 additions & 5 deletions common/constants/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ export const PLUGIN_NAME = 'Query Workbench';
export const OPENSEARCH_ACC_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
export const ACC_INDEX_TYPE_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';

export const SKIPPING_INDEX_NAME = `skipping_index`;
export const COVERING_INDEX_NAME = `covering_index`;
export const DATABASE_NAME = `database`;
export const TABLE_NAME = `table`;
export const INDICIES_NAME = `indicies`
export const TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME = `skipping_index`;
export const TREE_ITEM_COVERING_INDEX_DEFAULT_NAME = `covering_index`;
export const TREE_ITEM_DATABASE_NAME_DEFAULT_NAME = `database`;
export const TREE_ITEM_TABLE_NAME_DEFAULT_NAME = `table`;
export const LOAD_OPENSEARCH_INDICES_QUERY = `SHOW tables LIKE '%';`;
export const SKIPPING_INDEX_QUERY = `CREATE SKIPPING INDEX ON myS3.logs_db.http_logs
(status VALUE_SET)
Expand Down
4 changes: 2 additions & 2 deletions common/types/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,11 @@ export interface CreateAccelerationForm {
}

export type AsyncQueryLoadingStatus = 'SUCCESS' | 'FAILED' | 'RUNNING' | 'SCHEDULED' | 'CANCELED';
export type Tree = 'covering_index' | 'skipping_index' | 'table' | 'database' | 'materialized_view';
export type TreeItemType = 'covering_index' | 'skipping_index' | 'table' | 'database' | 'materialized_view';

export interface TreeItem {
name: string;
type: Tree;
type: TreeItemType;
isExpanded: boolean;
values?: TreeItem[];
}
27 changes: 23 additions & 4 deletions public/components/Main/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ interface MainState {
asyncLoading: boolean;
asyncLoadingStatus: AsyncQueryLoadingStatus;
asyncJobId: string;
refreshTree: boolean;
}

const SUCCESS_MESSAGE = 'Success';
Expand Down Expand Up @@ -246,6 +247,7 @@ export class Main extends React.Component<MainProps, MainState> {
asyncLoading: false,
asyncLoadingStatus: 'SUCCESS',
asyncJobId: '',
refreshTree: false,
};
this.httpClient = this.props.httpClient;
this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
Expand Down Expand Up @@ -798,6 +800,12 @@ export class Main extends React.Component<MainProps, MainState> {
});
};

handleReloadTree = () => {
this.setState({
refreshTree: !this.state.refreshTree,
});
};

render() {
let page;
let link;
Expand Down Expand Up @@ -920,16 +928,27 @@ export class Main extends React.Component<MainProps, MainState> {
<EuiFlexGroup direction="column">
<EuiFlexItem>
<EuiFlexItem grow={false}>
<CreateButton
updateSQLQueries={this.updateSQLQueries}
selectedDatasource={this.state.selectedDatasource}
/>
<EuiFlexGroup direction="row">
<EuiFlexItem grow={false}>
<EuiButton
iconType="refresh"
onClick={this.handleReloadTree}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<CreateButton
updateSQLQueries={this.updateSQLQueries}
selectedDatasource={this.state.selectedDatasource}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiSpacer />
<TableView
http={this.httpClient}
selectedItems={this.state.selectedDatasource}
updateSQLQueries={this.updateSQLQueries}
refreshTree={this.state.refreshTree}
/>
<EuiSpacer />
</EuiFlexItem>
Expand Down
111 changes: 66 additions & 45 deletions public/components/SQLPage/TableView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@ import {
EuiLoadingSpinner,
EuiText,
EuiToolTip,
EuiTreeView,
EuiTreeView
} from '@elastic/eui';
import { Tree, TreeItem } from 'common/types';
import { TreeItem, TreeItemType } from 'common/types';
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import { CoreStart } from '../../../../../src/core/public';
import {
COVERING_INDEX_NAME,
DATABASE_NAME,
FETCH_OPENSEARCH_INDICES_PATH,
LOAD_OPENSEARCH_INDICES_QUERY,
SKIPPING_INDEX_NAME,
TABLE_NAME,
TREE_ITEM_COVERING_INDEX_DEFAULT_NAME,
TREE_ITEM_DATABASE_NAME_DEFAULT_NAME,
TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME,
TREE_ITEM_TABLE_NAME_DEFAULT_NAME
} from '../../../common/constants';
import { AccelerationIndexFlyout } from './acceleration_index_flyout';
import { getJobId, pollQueryStatus } from './utils';
Expand All @@ -33,9 +33,10 @@ interface CustomView {
http: CoreStart['http'];
selectedItems: EuiComboBoxOptionOption[];
updateSQLQueries: (query: string) => void;
refreshTree: boolean
}

export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) => {
export const TableView = ({ http, selectedItems, updateSQLQueries, refreshTree }: CustomView) => {
const [tableNames, setTableNames] = useState<string[]>([]);
const [selectedDatabase, setSelectedDatabase] = useState<string>('');
const [selectedTable, setSelectedTable] = useState<string | null>(null);
Expand Down Expand Up @@ -65,23 +66,18 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
);
};

function loadTreeItem(elements: string[], type: Tree): TreeItem[] {
function loadTreeItem(elements: string[], type: TreeItemType): TreeItem[] {
return elements.map((element) => {
let treeItem: TreeItem = {
name: element,
type: type,
isExpanded: true,
};

if (type === DATABASE_NAME || type === TABLE_NAME) {
if (type === TREE_ITEM_DATABASE_NAME_DEFAULT_NAME || type === TREE_ITEM_TABLE_NAME_DEFAULT_NAME) {
treeItem.values = [];
treeItem.isExpanded = true;
} else if (type === SKIPPING_INDEX_NAME) {
treeItem.type = SKIPPING_INDEX_NAME;
} else {
treeItem.type = COVERING_INDEX_NAME;
}

return treeItem;
});
}
Expand Down Expand Up @@ -120,7 +116,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
getJobId(query, http, (id) => {
get_async_query_results(id, http, (data) => {
data = [].concat(...data);
setTreeData(loadTreeItem(data, DATABASE_NAME));
setTreeData(loadTreeItem(data, TREE_ITEM_DATABASE_NAME_DEFAULT_NAME));
setIsLoading(false);
});
});
Expand All @@ -130,7 +126,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
useEffect(() => {
setIsLoading(false);
getSidebarContent();
}, [selectedItems]);
}, [selectedItems, refreshTree]);

const handleDatabaseClick = (databaseName: string) => {
setSelectedDatabase(databaseName);
Expand All @@ -143,11 +139,14 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
getJobId(query, http, (id) => {
get_async_query_results(id, http, (data) => {
data = data.map((subArray) => subArray[1]);
const values = loadTreeItem(data, TABLE_NAME);
treeData.map((database) => {
if (database.name === databaseName) {
database.values = values;
}
const values = loadTreeItem(data, TREE_ITEM_TABLE_NAME_DEFAULT_NAME);
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === databaseName) {
return { ...database, values: values };
}
return database;
});
});
setIsLoading(false);
});
Expand All @@ -163,15 +162,25 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
getJobId(coverQuery, http, (id) => {
get_async_query_results(id, http, (data) => {
const res = [].concat(data);
let coverIndexObj = loadTreeItem(res, COVERING_INDEX_NAME);
treeData.map((database) => {
if (database.name === selectedDatabase) {
database.values.map((table) => {
if (table.name === tableName) {
table.values = table.values.concat(...coverIndexObj);
}
});
}
let coverIndexObj = loadTreeItem(res, TREE_ITEM_COVERING_INDEX_DEFAULT_NAME);
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === selectedDatabase) {
return {
...database,
values: database.values.map((table) => {
if (table.name === tableName) {
return {
...table,
values: table.values.concat(...coverIndexObj),
};
}
return table;
}),
};
}
return database;
});
});
setIsLoading(false);
});
Expand All @@ -189,21 +198,32 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
getJobId(skipQuery, http, (id) => {
get_async_query_results(id, http, (data) => {
if (data.length > 0) {
treeData.map((database) => {
if (database.name === selectedDatabase) {
database.values.map((table) => {
if (table.name === tableName) {
table.values = loadTreeItem([SKIPPING_INDEX_NAME], SKIPPING_INDEX_NAME);
}
});
}
setTreeData((prevTreeData) => {
return prevTreeData.map((database) => {
if (database.name === selectedDatabase) {
return {
...database,
values: database.values.map((table) => {
if (table.name === tableName) {
return {
...table,
values: loadTreeItem([TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME], TREE_ITEM_SKIPPING_INDEX_DEFAULT_NAME),
};
}
return table;
}),
};
}
return database;
});
});
}
loadCoveringIndex(tableName);
});
});
};
const labelCreation = (name: string) => {

const createLabel = (name: string) => {
return (
<div key={name}>
<EuiToolTip position="right" content={name} delay="long">
Expand All @@ -214,13 +234,14 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
};

const OpenSearchIndicesTree = tableNames.map((database, index) => ({
label: labelCreation(database),
label: createLabel(database),
icon: <EuiIcon type="database" size="m" />,
id: 'element_' + index,
isSelectable: false,
}));

const treeDataDatabases = treeData.map((database, index) => ({
label: labelCreation(database.name),
label: createLabel(database.name),
icon: <EuiIcon type="database" size="m" />,
id: 'element_' + index,
callback: () => {
Expand All @@ -229,9 +250,9 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
}
},
isSelectable: true,
isExpanded: true,
isExpanded: database.isExpanded,
children: database.values.map((table) => ({
label: labelCreation(table.name),
label: createLabel(table.name),
id: `${database.name}_${table.name}`,
icon: <EuiIcon type="tableDensityCompact" size="s" />,
callback: () => {
Expand All @@ -240,9 +261,9 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
}
},
isSelectable: true,
isExpanded: true,
isExpanded: table.isExpanded,
children: table.values.map((indexChild) => ({
label: labelCreation(indexChild.name),
label: createLabel(indexChild.name),
id: `${database.name}_${table.name}_${indexChild.name}`,
icon: <EuiIcon type="bolt" size="s" />,
callback: () =>
Expand Down

0 comments on commit a4c8c72

Please sign in to comment.