random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-20 01:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Spinners, SQLQuery and sorting implemented

Browse Source
This commit is contained in:
vaidankarswapnil
2021-08-06 12:33:06 +05:30
parent 9a74a8c2ab
commit 18217b71c6
3 changed files with 189 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
View File

@@ -177,7 +177,7 @@ export default class QueryBuilderViewModel {
return filterString.trim(); return filterString.trim();
}; };
public getSqlFilterFromClauses = (): string => { public getSqlFilterFromClauses = (queryTableRows: IQueryTableRowsType[]): string => {
var filterString: string = "SELECT * FROM c"; var filterString: string = "SELECT * FROM c";
if (this._queryViewModel.selectText() && this._queryViewModel.selectText().length > 0) { if (this._queryViewModel.selectText() && this._queryViewModel.selectText().length > 0) {
filterString = "SELECT"; filterString = "SELECT";
@@ -200,44 +200,45 @@ export default class QueryBuilderViewModel {
}); });
filterString = filterString.concat(" FROM c"); filterString = filterString.concat(" FROM c");
} }
if (this.queryClauses.children.length === 0) { if (queryTableRows.length === 0) {
return filterString; return filterString;
} }
filterString = filterString.concat(" WHERE"); filterString = filterString.concat(" WHERE");
var first = true; var first = true;
var treeTraversal = (group: ClauseGroup): void => { // var treeTraversal = (group: ClauseGroup): void => {
for (var i = 0; i < group.children.length; i++) { for (var i = 0; i < queryTableRows.length; i++) {
var currentItem = group.children[i]; var currentItem = queryTableRows[i];
if (currentItem instanceof QueryClauseViewModel) { // if (currentItem instanceof QueryClauseViewModel) {
var clause = <QueryClauseViewModel>currentItem; // var clause = <QueryClauseViewModel>currentItem;
let timeStampValue: string = this.timestampToSqlValue(clause); let timeStampValue: string = this.timestampToSqlValue(currentItem);
var value = clause.value(); var value = currentItem.entityValue;
if (!clause.isValue()) { if (!currentItem.isValue) {
value = timeStampValue; value = timeStampValue;
}
filterString = filterString.concat(
this.constructSqlClause(
first ? "" : clause.and_or(),
this.generateLeftParentheses(clause),
clause.field(),
clause.type(),
clause.operator(),
value,
this.generateRightParentheses(clause)
)
);
first = false;
}
if (currentItem instanceof ClauseGroup) {
treeTraversal(<ClauseGroup>currentItem);
}
} }
}; filterString = filterString.concat(
this.constructSqlClause(
first ? "" : currentItem.selectedOperation,
this.generateLeftParentheses(currentItem),
currentItem.selectedField,
currentItem.selectedEntityType,
currentItem.selectedOperator,
value,
this.generateRightParentheses(currentItem)
)
);
first = false;
// }
treeTraversal(this.queryClauses); // if (currentItem instanceof ClauseGroup) {
// treeTraversal(<ClauseGroup>currentItem);
// }
// }
}
// treeTraversal(this.queryClauses);
console.log("🚀 ~ file: QueryBuilderViewModel.ts ~ line 250 ~ QueryBuilderViewModel ~ filterString", filterString);
return filterString.trim(); return filterString.trim();
}; };
@@ -735,18 +736,18 @@ export default class QueryBuilderViewModel {
} }
} }
private timestampToSqlValue(clause: QueryClauseViewModel): string { private timestampToSqlValue(clause: IQueryTableRowsType): string {
if (clause.isValue()) { if (clause.isValue) {
return null; return null;
} else if (clause.isTimestamp()) { } else if (clause.isTimestamp) {
return this.getTimeStampToSqlQuery(clause); return this.getTimeStampToSqlQuery(clause);
// } else if (clause.isCustomLastTimestamp()) { // } else if (clause.isCustomLastTimestamp()) {
// clause.value(CustomTimestampHelper._queryLastTime(clause.customLastTimestamp().lastNumber, clause.customLastTimestamp().lastTimeUnit)); // clause.value(CustomTimestampHelper._queryLastTime(clause.customLastTimestamp().lastNumber, clause.customLastTimestamp().lastTimeUnit));
} else if (clause.isCustomRangeTimestamp()) { } else if (clause.isCustomRangeTimestamp) {
if (clause.isLocal()) { if (clause.isLocal) {
return DateTimeUtilities.getUTCDateTime(clause.customTimeValue()); return DateTimeUtilities.getUTCDateTime(clause.customTimeValue);
} else { } else {
return clause.customTimeValue(); return clause.customTimeValue;
} }
} }
return null; return null;
@@ -778,8 +779,8 @@ export default class QueryBuilderViewModel {
} }
} }
private getTimeStampToSqlQuery(clause: QueryClauseViewModel): string { private getTimeStampToSqlQuery(clause: IQueryTableRowsType): string {
switch (clause.timeValue()) { switch (clause.timeValue) {
case Constants.timeOptions.lastHour: case Constants.timeOptions.lastHour:
return CustomTimestampHelper._queryLastDaysHours(0, 1); return CustomTimestampHelper._queryLastDaysHours(0, 1);
case Constants.timeOptions.last24Hours: case Constants.timeOptions.last24Hours:

15
src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx
View File

@@ -140,13 +140,13 @@ export default class QueryViewModel {
return this.queryText(); return this.queryText();
}; };
private setSqlFilter = (): string => { private setSqlFilter = (queryTableRows: IQueryTableRowsType[]): string => {
return this.queryBuilderViewModel().getSqlFilterFromClauses(); return this.queryBuilderViewModel().getSqlFilterFromClauses(queryTableRows);
}; };
private setCqlFilter = (): string => { // private setCqlFilter = (): string => {
return this.queryBuilderViewModel().getCqlFilterFromClauses(); // return this.queryBuilderViewModel().getCqlFilterFromClauses();
}; // };
public isHelperEnabled = ko public isHelperEnabled = ko
.computed<boolean>(() => { .computed<boolean>(() => {
@@ -161,7 +161,7 @@ export default class QueryViewModel {
notify: "always", notify: "always",
}); });
public runQuery = (queryTableRows: IQueryTableRowsType[]): void => { public runQuery = (queryTableRows: IQueryTableRowsType[]): string => {
console.log( console.log(
"🚀 ~ file: QueryViewModel.tsx ~ line 169 ~ QueryViewModel ~ //constructor ~ queryTableRows", "🚀 ~ file: QueryViewModel.tsx ~ line 169 ~ QueryViewModel ~ //constructor ~ queryTableRows",
queryTableRows queryTableRows
@@ -177,9 +177,10 @@ export default class QueryViewModel {
this._tableEntityListViewModel.tableQuery.top = top; this._tableEntityListViewModel.tableQuery.top = top;
this._tableEntityListViewModel.tableQuery.select = select; this._tableEntityListViewModel.tableQuery.select = select;
this._tableEntityListViewModel.oDataQuery(filter); this._tableEntityListViewModel.oDataQuery(filter);
this._tableEntityListViewModel.sqlQuery(this.setSqlFilter()); this._tableEntityListViewModel.sqlQuery(this.setSqlFilter(queryTableRows));
this._tableEntityListViewModel.cqlQuery(filter); this._tableEntityListViewModel.cqlQuery(filter);
return this._tableEntityListViewModel.sqlQuery();
// return this._tableEntityListViewModel.reloadTable(/*useSetting*/ false, /*resetHeaders*/ false); // return this._tableEntityListViewModel.reloadTable(/*useSetting*/ false, /*resetHeaders*/ false);
}; };

236
src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx
View File

@@ -1,5 +1,6 @@
import { FeedOptions } from "@azure/cosmos"; import { FeedOptions } from "@azure/cosmos";
import { import {
CheckboxVisibility,
DetailsList, DetailsList,
DetailsListLayoutMode, DetailsListLayoutMode,
IColumn, IColumn,
@@ -62,60 +63,11 @@ export interface Button {
isSelected?: boolean; isSelected?: boolean;
} }
// export interface IDocument {
// partitionKey: string;
// rowKey: string;
// timeStamp: string;
// }
// export interface IQueryTablesTabComponentProps {
// tabKind: ViewModels.CollectionTabKind;
// title: string;
// tabPath: string;
// collection: ViewModels.CollectionBase;
// node: ViewModels.TreeNode;
// onLoadStartKey: number;
// container: Explorer;
// tabsBaseInstance: TabsBase;
// queryTablesTab: NewQueryTablesTab;
// }
// interface IQueryTablesTabComponentStates {
// tableEntityListViewModel: TableEntityListViewModel;
// queryViewModel: QueryViewModel;
// queryText: string;
// selectedQueryText: string;
// executeQueryButton: Button;
// queryBuilderButton: Button;
// queryTextButton: Button;
// addEntityButton: Button;
// editEntityButton: Button;
// deleteEntityButton: Button;
// isHelperActive: boolean;
// columns: IColumn[];
// items: IDocument[];
// isExpanded: boolean;
// isEditorActive: boolean;
// selectedItems: Entities.ITableEntity[];
// isValue: boolean;
// isTimestamp: boolean;
// isCustomLastTimestamp: boolean;
// isCustomRangeTimestamp: boolean;
// operators: string[];
// selectMessage: string;
// queryTableRows: IQueryTableRowsType[];
// }
class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, IQueryTablesTabComponentStates> { class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, IQueryTablesTabComponentStates> {
// public readonly html = template;
public collection: ViewModels.Collection; public collection: ViewModels.Collection;
// public tableEntityListViewModel = ko.observable<TableEntityListViewModel>();
public _queryViewModel: QueryViewModel; public _queryViewModel: QueryViewModel;
public tableCommands: TableCommands; public tableCommands: TableCommands;
public tableDataClient: TableDataClient; public tableDataClient: TableDataClient;
// public queryText = ko.observable("PartitionKey eq 'partitionKey1'"); // Start out with an example they can modify
// public selectedQueryText = ko.observable("").extend({ notify: "always" });
public executeQueryButton: ViewModels.Button; public executeQueryButton: ViewModels.Button;
public addEntityButton: ViewModels.Button; public addEntityButton: ViewModels.Button;
public editEntityButton: ViewModels.Button; public editEntityButton: ViewModels.Button;
@@ -157,7 +109,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
tableEntityListViewModel, tableEntityListViewModel,
queryViewModel: new QueryViewModel(this.props.queryTablesTab), queryViewModel: new QueryViewModel(this.props.queryTablesTab),
queryText: "PartitionKey eq 'partionKey1'", queryText: "PartitionKey eq 'partionKey1'",
selectedQueryText: "", selectedQueryText: "Select * from c",
isHelperActive: true, isHelperActive: true,
executeQueryButton: { executeQueryButton: {
enabled: true, enabled: true,
@@ -536,8 +488,12 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
// this.state.tableEntityListViewModel.items() // this.state.tableEntityListViewModel.items()
// ); // );
// const { queryTableRows } = this.state; // const { queryTableRows } = this.state;
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 496 ~ QueryTablesTabComponent ~ //setTimeout ~ this.state.selectedQueryText",
this.state.selectedQueryText
);
const { collection } = this.props; const { collection } = this.props;
const documents = await this.getDocuments(collection, "Select * from c"); const documents = await this.getDocuments(collection, this.state.selectedQueryText);
const headers = this.getFormattedHeaders(documents.Results); const headers = this.getFormattedHeaders(documents.Results);
this.columns = []; this.columns = [];
headers.map((header) => { headers.map((header) => {
@@ -553,12 +509,25 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
isSortedDescending: false, isSortedDescending: false,
sortAscendingAriaLabel: "Sorted A to Z", sortAscendingAriaLabel: "Sorted A to Z",
sortDescendingAriaLabel: "Sorted Z to A", sortDescendingAriaLabel: "Sorted Z to A",
onColumnClick: this.onColumnClick,
// onRender: (item: Entities.ITableEntity) => {
// // console.log(
// // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 559 ~ QueryTablesTabComponent ~ headers.map ~ item",
// // item
// // );
// return (
// <>
// {item[header] && <div style={{ height: "100%" }}>{item[header]}</div>}
// {!item[header] && (
// <div style={{ height: "100%", backgroundColor: "lightgray", color: "lightgray" }}>{"."}</div>
// )}
// </>
// );
// },
}); });
}); });
const documentItems = this.generateDetailsList(documents.Results); const documentItems = this.generateDetailsList(documents.Results);
// const queryTableRowsClone = [...queryTableRows];
// queryTableRowsClone[0].fieldOptions = getformattedOptions(headers);
this.setState( this.setState(
{ {
columns: this.columns, columns: this.columns,
@@ -577,8 +546,32 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
} }
} }
); );
}
//If private onColumnClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn): void => {
const { columns, items } = this.state;
const newColumns: IColumn[] = columns.slice();
const currColumn: IColumn = newColumns.filter((currCol) => column.key === currCol.key)[0];
newColumns.forEach((newCol: IColumn) => {
if (newCol === currColumn) {
currColumn.isSortedDescending = !currColumn.isSortedDescending;
currColumn.isSorted = true;
} else {
newCol.isSorted = false;
newCol.isSortedDescending = true;
}
});
//eslint-disable-next-line
const newItems = this.copyAndSort(items, currColumn.fieldName!, currColumn.isSortedDescending);
this.setState({
columns: newColumns,
items: newItems,
});
};
private copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): T[] {
const key = columnKey as keyof T;
return items.slice(0).sort((a: T, b: T) => ((isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1));
} }
private getFormattedHeaders = (entities: Entities.ITableEntity[]): string[] => { private getFormattedHeaders = (entities: Entities.ITableEntity[]): string[] => {
@@ -664,6 +657,9 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 423 ~ QueryTablesTabComponent ~ reloadEntities ~ reloadEntities" "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 423 ~ QueryTablesTabComponent ~ reloadEntities ~ reloadEntities"
); );
// this.componentDidMount(); // this.componentDidMount();
this.setState({
isLoading: true,
});
this.loadEntities(false); this.loadEntities(false);
// console.log( // console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 349 ~ QueryTablesTabComponent ~ addEntity ~ addedEntity", // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 349 ~ QueryTablesTabComponent ~ addEntity ~ addedEntity",
@@ -740,53 +736,75 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
//eslint-disable-next-line //eslint-disable-next-line
.then((results: any) => { .then((results: any) => {
return this.state.tableEntityListViewModel.removeEntitiesFromCache(entitiesToDelete).then(() => { return this.state.tableEntityListViewModel.removeEntitiesFromCache(entitiesToDelete).then(() => {
// this.state.tableEntityListViewModel.redrawTableThrottled(); this.setState({
this.componentDidMount(); isLoading: true,
});
this.loadEntities(false);
}); });
}); });
} }
}; };
public runQuery(queryTableRows: IQueryTableRowsType[]): void { public runQuery(queryTableRows: IQueryTableRowsType[]): void {
this.state.queryViewModel.runQuery(queryTableRows); // this.state.queryViewModel.runQuery(queryTableRows);
if (queryTableRows.length !== 0) { this.setState({
isLoading: true,
selectedQueryText: this.state.queryViewModel.runQuery(queryTableRows),
});
setTimeout(() => {
console.log( console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 507 ~ QueryTablesTabComponent ~ runQuery ~ queryTableRows", "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 775 ~ QueryTablesTabComponent ~ runQuery ~ selectedQueryText",
queryTableRows this.state.selectedQueryText
); );
let exp: string; this.loadEntities(false);
queryTableRows.map((row, index) => { }, 2000);
console.log( // if (queryTableRows.length !== 0) {
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 508 ~ QueryTablesTabComponent ~ runQuery ~ row", // console.log(
row // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 507 ~ QueryTablesTabComponent ~ runQuery ~ queryTableRows",
); // queryTableRows,
const operation = row.selectedOperation === "And" ? " && " : " || "; // ", ",
const operator = this.getOperator(row.selectedOperator); // this.state.tableEntityListViewModel.sqlQuery(),
if (index === 0) { // ", ",
exp = "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'"; // this.state.queryViewModel.runQuery(queryTableRows)
} else { // );
exp = exp + operation + "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'";
} // let exp: string;
}); // queryTableRows.map((row, index) => {
console.log( // console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 519 ~ QueryTablesTabComponent ~ queryTableRows.map ~ exp", // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 508 ~ QueryTablesTabComponent ~ runQuery ~ row",
exp // row
); // );
const filteredItems = this.state.originalItems.filter((row) => eval(exp)); // const operation = row.selectedOperation === "And" ? " && " : " || ";
console.log( // const operator = this.getOperator(row.selectedOperator);
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 526 ~ QueryTablesTabComponent ~ runQuery ~ newRows", // if (index === 0) {
filteredItems // exp = "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'";
); // } else {
this.setState({ // exp = exp + operation + "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'";
queryText: this.state.queryViewModel.queryText(), // }
items: filteredItems, // });
}); // console.log(
} else { // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 519 ~ QueryTablesTabComponent ~ queryTableRows.map ~ exp",
this.setState({ // exp
queryText: this.state.queryViewModel.queryText(), // );
items: this.state.originalItems, // const filteredItems = this.state.originalItems.filter((row) => eval(exp));
}); // console.log(
} // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 526 ~ QueryTablesTabComponent ~ runQuery ~ newRows",
// filteredItems
// );
// this.setState({
// queryText: this.state.queryViewModel.queryText(),
// items: filteredItems,
// });
// } else {
// this.setState({
// queryText: this.state.queryViewModel.queryText(),
// items: this.state.originalItems,
// });
// }
this.setState({
queryText: this.state.queryViewModel.queryText(),
// items: this.state.originalItems,
});
} }
public getOperator(operator: string): string { public getOperator(operator: string): string {
@@ -1055,6 +1073,32 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
this.setState({ queryTableRows: cloneQueryTableRows }); this.setState({ queryTableRows: cloneQueryTableRows });
}; };
// function _renderItemColumn(item: , index: number, column: IColumn) {
// const fieldContent = item[column.fieldName as keyof IExampleItem] as string;
// switch (column.key) {
// case 'thumbnail':
// return <Image src={fieldContent} width={50} height={50} imageFit={ImageFit.cover} />;
// case 'name':
// return <Link href="#">{fieldContent}</Link>;
// case 'color':
// return (
// <span
// data-selection-disabled={true}
// className={mergeStyles({ color: fieldContent, height: '100%', display: 'block' })}
// >
// {fieldContent}
// </span>
// );
// default:
// return <span>{fieldContent}</span>;
// }
// }
render(): JSX.Element { render(): JSX.Element {
useCommandBar.getState().setContextButtons(this.getTabsButtons()); useCommandBar.getState().setContextButtons(this.getTabsButtons());
const { queryTableRows } = this.state; const { queryTableRows } = this.state;
@@ -1257,9 +1301,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
</div> </div>
<div className="tablesQueryTab tableContainer"> <div className="tablesQueryTab tableContainer">
{this.state.items.length === 0 && this.state.isLoading && ( {this.state.isLoading && <Spinner size={SpinnerSize.large} className="spinner" />}
<Spinner size={SpinnerSize.large} className="spinner" />
)}
{this.state.items.length > 0 && !this.state.isLoading && ( {this.state.items.length > 0 && !this.state.isLoading && (
<DetailsList <DetailsList
items={this.state.items} items={this.state.items}
@@ -1269,6 +1311,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
compact={true} compact={true}
selection={this.state.selection} selection={this.state.selection}
selectionPreservedOnEmptyClick={true} selectionPreservedOnEmptyClick={true}
checkboxVisibility={CheckboxVisibility.always}
// onRenderItemColumn={_renderItemColumn(this.state.items)}
/> />
)} )}
{this.state.items.length === 0 && !this.state.isLoading && ( {this.state.items.length === 0 && !this.state.isLoading && (