random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-04-26 11:34:25 +01: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
Show Stats 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();
};
public getSqlFilterFromClauses = (): string => {
public getSqlFilterFromClauses = (queryTableRows: IQueryTableRowsType[]): string => {
var filterString: string = "SELECT * FROM c";
if (this._queryViewModel.selectText() && this._queryViewModel.selectText().length > 0) {
filterString = "SELECT";
@ -200,44 +200,45 @@ export default class QueryBuilderViewModel {
});
filterString = filterString.concat(" FROM c");
}
if (this.queryClauses.children.length === 0) {
if (queryTableRows.length === 0) {
return filterString;
}
filterString = filterString.concat(" WHERE");
var first = true;
var treeTraversal = (group: ClauseGroup): void => {
for (var i = 0; i < group.children.length; i++) {
var currentItem = group.children[i];
// var treeTraversal = (group: ClauseGroup): void => {
for (var i = 0; i < queryTableRows.length; i++) {
var currentItem = queryTableRows[i];
if (currentItem instanceof QueryClauseViewModel) {
var clause = <QueryClauseViewModel>currentItem;
let timeStampValue: string = this.timestampToSqlValue(clause);
var value = clause.value();
if (!clause.isValue()) {
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);
}
// if (currentItem instanceof QueryClauseViewModel) {
// var clause = <QueryClauseViewModel>currentItem;
let timeStampValue: string = this.timestampToSqlValue(currentItem);
var value = currentItem.entityValue;
if (!currentItem.isValue) {
value = timeStampValue;
}
};
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();
};
@ -735,18 +736,18 @@ export default class QueryBuilderViewModel {
}
}
private timestampToSqlValue(clause: QueryClauseViewModel): string {
if (clause.isValue()) {
private timestampToSqlValue(clause: IQueryTableRowsType): string {
if (clause.isValue) {
return null;
} else if (clause.isTimestamp()) {
} else if (clause.isTimestamp) {
return this.getTimeStampToSqlQuery(clause);
// } else if (clause.isCustomLastTimestamp()) {
// clause.value(CustomTimestampHelper._queryLastTime(clause.customLastTimestamp().lastNumber, clause.customLastTimestamp().lastTimeUnit));
} else if (clause.isCustomRangeTimestamp()) {
if (clause.isLocal()) {
return DateTimeUtilities.getUTCDateTime(clause.customTimeValue());
} else if (clause.isCustomRangeTimestamp) {
if (clause.isLocal) {
return DateTimeUtilities.getUTCDateTime(clause.customTimeValue);
} else {
return clause.customTimeValue();
return clause.customTimeValue;
}
}
return null;
@ -778,8 +779,8 @@ export default class QueryBuilderViewModel {
}
}
private getTimeStampToSqlQuery(clause: QueryClauseViewModel): string {
switch (clause.timeValue()) {
private getTimeStampToSqlQuery(clause: IQueryTableRowsType): string {
switch (clause.timeValue) {
case Constants.timeOptions.lastHour:
return CustomTimestampHelper._queryLastDaysHours(0, 1);
case Constants.timeOptions.last24Hours:

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

@ -140,13 +140,13 @@ export default class QueryViewModel {
return this.queryText();
};
private setSqlFilter = (): string => {
return this.queryBuilderViewModel().getSqlFilterFromClauses();
private setSqlFilter = (queryTableRows: IQueryTableRowsType[]): string => {
return this.queryBuilderViewModel().getSqlFilterFromClauses(queryTableRows);
};
private setCqlFilter = (): string => {
return this.queryBuilderViewModel().getCqlFilterFromClauses();
};
// private setCqlFilter = (): string => {
// return this.queryBuilderViewModel().getCqlFilterFromClauses();
// };
public isHelperEnabled = ko
.computed<boolean>(() => {
@ -161,7 +161,7 @@ export default class QueryViewModel {
notify: "always",
});
public runQuery = (queryTableRows: IQueryTableRowsType[]): void => {
public runQuery = (queryTableRows: IQueryTableRowsType[]): string => {
console.log(
"🚀 ~ file: QueryViewModel.tsx ~ line 169 ~ QueryViewModel ~ //constructor ~ queryTableRows",
queryTableRows
@ -177,9 +177,10 @@ export default class QueryViewModel {
this._tableEntityListViewModel.tableQuery.top = top;
this._tableEntityListViewModel.tableQuery.select = select;
this._tableEntityListViewModel.oDataQuery(filter);
this._tableEntityListViewModel.sqlQuery(this.setSqlFilter());
this._tableEntityListViewModel.sqlQuery(this.setSqlFilter(queryTableRows));
this._tableEntityListViewModel.cqlQuery(filter);
return this._tableEntityListViewModel.sqlQuery();
// 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 {
CheckboxVisibility,
DetailsList,
DetailsListLayoutMode,
IColumn,
@ -62,60 +63,11 @@ export interface Button {
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> {
// public readonly html = template;
public collection: ViewModels.Collection;
// public tableEntityListViewModel = ko.observable<TableEntityListViewModel>();
public _queryViewModel: QueryViewModel;
public tableCommands: TableCommands;
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 addEntityButton: ViewModels.Button;
public editEntityButton: ViewModels.Button;
@ -157,7 +109,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
tableEntityListViewModel,
queryViewModel: new QueryViewModel(this.props.queryTablesTab),
queryText: "PartitionKey eq 'partionKey1'",
selectedQueryText: "",
selectedQueryText: "Select * from c",
isHelperActive: true,
executeQueryButton: {
enabled: true,
@ -536,8 +488,12 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
// this.state.tableEntityListViewModel.items()
// );
// const { queryTableRows } = this.state;
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 496 ~ QueryTablesTabComponent ~ //setTimeout ~ this.state.selectedQueryText",
this.state.selectedQueryText
);
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);
this.columns = [];
headers.map((header) => {
@ -553,12 +509,25 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
isSortedDescending: false,
sortAscendingAriaLabel: "Sorted A to Z",
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 queryTableRowsClone = [...queryTableRows];
// queryTableRowsClone[0].fieldOptions = getformattedOptions(headers);
this.setState(
{
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[] => {
@ -664,6 +657,9 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 423 ~ QueryTablesTabComponent ~ reloadEntities ~ reloadEntities"
);
// this.componentDidMount();
this.setState({
isLoading: true,
});
this.loadEntities(false);
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 349 ~ QueryTablesTabComponent ~ addEntity ~ addedEntity",
@ -740,53 +736,75 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
//eslint-disable-next-line
.then((results: any) => {
return this.state.tableEntityListViewModel.removeEntitiesFromCache(entitiesToDelete).then(() => {
// this.state.tableEntityListViewModel.redrawTableThrottled();
this.componentDidMount();
this.setState({
isLoading: true,
});
this.loadEntities(false);
});
});
}
};
public runQuery(queryTableRows: IQueryTableRowsType[]): void {
this.state.queryViewModel.runQuery(queryTableRows);
if (queryTableRows.length !== 0) {
// this.state.queryViewModel.runQuery(queryTableRows);
this.setState({
isLoading: true,
selectedQueryText: this.state.queryViewModel.runQuery(queryTableRows),
});
setTimeout(() => {
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 507 ~ QueryTablesTabComponent ~ runQuery ~ queryTableRows",
queryTableRows
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 775 ~ QueryTablesTabComponent ~ runQuery ~ selectedQueryText",
this.state.selectedQueryText
);
let exp: string;
queryTableRows.map((row, index) => {
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 508 ~ QueryTablesTabComponent ~ runQuery ~ row",
row
);
const operation = row.selectedOperation === "And" ? " && " : " || ";
const operator = this.getOperator(row.selectedOperator);
if (index === 0) {
exp = "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'";
} else {
exp = exp + operation + "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'";
}
});
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 519 ~ QueryTablesTabComponent ~ queryTableRows.map ~ exp",
exp
);
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.loadEntities(false);
}, 2000);
// if (queryTableRows.length !== 0) {
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 507 ~ QueryTablesTabComponent ~ runQuery ~ queryTableRows",
// queryTableRows,
// ", ",
// this.state.tableEntityListViewModel.sqlQuery(),
// ", ",
// this.state.queryViewModel.runQuery(queryTableRows)
// );
// let exp: string;
// queryTableRows.map((row, index) => {
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 508 ~ QueryTablesTabComponent ~ runQuery ~ row",
// row
// );
// const operation = row.selectedOperation === "And" ? " && " : " || ";
// const operator = this.getOperator(row.selectedOperator);
// if (index === 0) {
// exp = "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'";
// } else {
// exp = exp + operation + "row['" + row.selectedField + "'] " + operator + "'" + row.entityValue + "'";
// }
// });
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 519 ~ QueryTablesTabComponent ~ queryTableRows.map ~ exp",
// exp
// );
// 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 {
@ -1055,6 +1073,32 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
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 {
useCommandBar.getState().setContextButtons(this.getTabsButtons());
const { queryTableRows } = this.state;
@ -1257,9 +1301,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
</div>
<div className="tablesQueryTab tableContainer">
{this.state.items.length === 0 && this.state.isLoading && (
<Spinner size={SpinnerSize.large} className="spinner" />
)}
{this.state.isLoading && <Spinner size={SpinnerSize.large} className="spinner" />}
{this.state.items.length > 0 && !this.state.isLoading && (
<DetailsList
items={this.state.items}
@ -1269,6 +1311,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
compact={true}
selection={this.state.selection}
selectionPreservedOnEmptyClick={true}
checkboxVisibility={CheckboxVisibility.always}
// onRenderItemColumn={_renderItemColumn(this.state.items)}
/>
)}
{this.state.items.length === 0 && !this.state.isLoading && (