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

Run query implemented

Browse Source
This commit is contained in:
vaidankarswapnil
2021-08-04 18:12:41 +05:30
parent 594c4026d5
commit d062c85e94
7 changed files with 488 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Common/EntityValue.tsx
View File

@@ -54,7 +54,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
<TextField
label={entityValueLabel && entityValueLabel}
className="addEntityTextField"
id="entityValueId"
// id="entityValueId"
autoFocus
disabled={isEntityValueDisable}
type={entityValueType}

4
src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
View File

@@ -112,6 +112,10 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
console.log("🚀 ~ file: AddTableEntityPanel.tsx ~ line 113 ~ submit ~ newEntity", newEntity);
await tableEntityListViewModel.addEntityToCache(newEntity);
console.log(
"🚀 ~ file: AddTableEntityPanel.tsx ~ line 116 ~ submit ~ !tryInsertNewHeaders(tableEntityListViewModel, newEntity)",
!tryInsertNewHeaders(tableEntityListViewModel, newEntity)
);
if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) {
// tableEntityListViewModel.redrawTableThrottled();
reloadEntities();

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

@@ -1,6 +1,7 @@
import * as ko from "knockout";
import { KeyCodes } from "../../../Common/Constants";
import { userContext } from "../../../UserContext";
import { IQueryTableRowsType } from "../../Tabs/QueryTablesTab/QueryTableTabUtils";
import * as Constants from "../Constants";
import { getQuotedCqlIdentifier } from "../CqlUtilities";
import * as DataTableUtilities from "../DataTable/DataTableUtilities";
@@ -141,35 +142,37 @@ export default class QueryBuilderViewModel {
this.addClauseImpl(example2, 1);
}
public getODataFilterFromClauses = (): string => {
public getODataFilterFromClauses = (queryClauses: IQueryTableRowsType[]): string => {
var filterString: string = "";
var treeTraversal = (group: ClauseGroup): void => {
for (var i = 0; i < group.children.length; i++) {
var currentItem = group.children[i];
// var treeTraversal = (queryClauses: IQueryTableRowsType[]): void => {
if (queryClauses != undefined) {
for (var i = 0; i < queryClauses.length; i++) {
var currentItem = queryClauses[i];
if (currentItem instanceof QueryClauseViewModel) {
var clause = <QueryClauseViewModel>currentItem;
this.timestampToValue(clause);
filterString = filterString.concat(
this.constructODataClause(
filterString === "" ? "" : clause.and_or(),
this.generateLeftParentheses(clause),
clause.field(),
clause.type(),
clause.operator(),
clause.value(),
this.generateRightParentheses(clause)
)
);
}
// if (currentItem instanceof QueryClauseViewModel) {
// var clause = <QueryClauseViewModel>currentItem;
this.timestampToValue(currentItem);
filterString = filterString.concat(
this.constructODataClause(
filterString === "" ? "" : currentItem.selectedOperation,
this.generateLeftParentheses(currentItem),
currentItem.selectedField,
currentItem.selectedEntityType,
currentItem.selectedOperator,
currentItem.entityValue,
this.generateRightParentheses(currentItem)
)
);
// }
if (currentItem instanceof ClauseGroup) {
treeTraversal(<ClauseGroup>currentItem);
}
// if (currentItem instanceof ClauseGroup) {
// treeTraversal(<ClauseGroup>currentItem);
// }
}
};
}
// };
treeTraversal(this.queryClauses);
// treeTraversal(this.queryClauses);
return filterString.trim();
};
@@ -238,7 +241,7 @@ export default class QueryBuilderViewModel {
return filterString.trim();
};
public getCqlFilterFromClauses = (): string => {
public getCqlFilterFromClauses = (queryTableRows: IQueryTableRowsType[]): string => {
const databaseId = this._queryViewModel.queryTablesTab.collection.databaseId;
const collectionId = this._queryViewModel.queryTablesTab.collection.id();
const tableToQuery = `${getQuotedCqlIdentifier(databaseId)}.${getQuotedCqlIdentifier(collectionId)}`;
@@ -300,7 +303,7 @@ export default class QueryBuilderViewModel {
this.columnOptions(newHeaders.sort(DataTableUtilities.compareTableColumns));
};
private generateLeftParentheses(clause: QueryClauseViewModel): string {
private generateLeftParentheses(clause: IQueryTableRowsType): string {
var result = "";
if (clause.clauseGroup.isRootGroup || clause.clauseGroup.children.indexOf(clause) !== 0) {
@@ -323,7 +326,7 @@ export default class QueryBuilderViewModel {
return result;
}
private generateRightParentheses(clause: QueryClauseViewModel): string {
private generateRightParentheses(clause: IQueryTableRowsType): string {
var result = "";
if (
@@ -495,6 +498,7 @@ export default class QueryBuilderViewModel {
// adds a new clause to the end of the array
public addNewClause = (): void => {
this.addClauseIndex(this.clauseArray().length, null);
// this.addClauseIndex(queryTableRows.length, null);
};
public onAddClauseKeyDown = (index: number, data: any, event: KeyboardEvent, source: any): boolean => {
@@ -715,18 +719,18 @@ export default class QueryBuilderViewModel {
//DataTableUtilities.forceRecalculateTableSize();
}
private timestampToValue(clause: QueryClauseViewModel): void {
if (clause.isValue()) {
private timestampToValue(clause: IQueryTableRowsType): void {
if (clause.isValue) {
return;
} else if (clause.isTimestamp()) {
} else if (clause.isTimestamp) {
this.getTimeStampToQuery(clause);
// } else if (clause.isCustomLastTimestamp()) {
// clause.value(`datetime'${CustomTimestampHelper._queryLastTime(clause.customLastTimestamp().lastNumber, clause.customLastTimestamp().lastTimeUnit)}'`);
} else if (clause.isCustomRangeTimestamp()) {
if (clause.isLocal()) {
clause.value(`datetime'${DateTimeUtilities.getUTCDateTime(clause.customTimeValue())}'`);
} else if (clause.isCustomRangeTimestamp) {
if (clause.isLocal) {
clause.entityValue = `datetime'${DateTimeUtilities.getUTCDateTime(clause.customTimeValue)}'`;
} else {
clause.value(`datetime'${clause.customTimeValue()}Z'`);
clause.entityValue = `datetime'${clause.customTimeValue}Z'`;
}
}
}
@@ -748,28 +752,28 @@ export default class QueryBuilderViewModel {
return null;
}
private getTimeStampToQuery(clause: QueryClauseViewModel): void {
switch (clause.timeValue()) {
private getTimeStampToQuery(clause: IQueryTableRowsType): void {
switch (clause.timeValue) {
case Constants.timeOptions.lastHour:
clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(0, 1)}'`);
clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(0, 1)}'`;
break;
case Constants.timeOptions.last24Hours:
clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(0, 24)}'`);
clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(0, 24)}'`;
break;
case Constants.timeOptions.last7Days:
clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(7, 0)}'`);
clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(7, 0)}'`;
break;
case Constants.timeOptions.last31Days:
clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(31, 0)}'`);
clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(31, 0)}'`;
break;
case Constants.timeOptions.last365Days:
clause.value(`datetime'${CustomTimestampHelper._queryLastDaysHours(365, 0)}'`);
clause.entityValue = `datetime'${CustomTimestampHelper._queryLastDaysHours(365, 0)}'`;
break;
case Constants.timeOptions.currentMonth:
clause.value(`datetime'${CustomTimestampHelper._queryCurrentMonthLocal()}'`);
clause.entityValue = `datetime'${CustomTimestampHelper._queryCurrentMonthLocal()}'`;
break;
case Constants.timeOptions.currentYear:
clause.value(`datetime'${CustomTimestampHelper._queryCurrentYearLocal()}'`);
clause.entityValue = `datetime'${CustomTimestampHelper._queryCurrentYearLocal()}'`;
break;
}
}

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

@@ -6,6 +6,7 @@ import { useSidePanel } from "../../../hooks/useSidePanel";
import { userContext } from "../../../UserContext";
import { TableQuerySelectPanel } from "../../Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel";
import NewQueryTablesTab from "../../Tabs/QueryTablesTab/QueryTablesTab";
import { IQueryTableRowsType } from "../../Tabs/QueryTablesTab/QueryTableTabUtils";
import { getQuotedCqlIdentifier } from "../CqlUtilities";
import * as DataTableUtilities from "../DataTable/DataTableUtilities";
import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
@@ -133,12 +134,12 @@ export default class QueryViewModel {
return this.selectText();
};
private setFilter = (): string => {
private setFilter = (queryTableRows: IQueryTableRowsType[]): string => {
const queryString = this.isEditorActive()
? this.queryText()
: userContext.apiType === "Cassandra"
? this.queryBuilderViewModel().getCqlFilterFromClauses()
: this.queryBuilderViewModel().getODataFilterFromClauses();
? this.queryBuilderViewModel().getCqlFilterFromClauses(queryTableRows)
: this.queryBuilderViewModel().getODataFilterFromClauses(queryTableRows);
const filter = queryString;
this.queryText(filter);
return this.queryText();
@@ -165,8 +166,12 @@ export default class QueryViewModel {
notify: "always",
});
public runQuery = (): void => {
let filter = this.setFilter();
public runQuery = (queryTableRows: IQueryTableRowsType[]): void => {
console.log(
"🚀 ~ file: QueryViewModel.tsx ~ line 169 ~ QueryViewModel ~ //constructor ~ queryTableRows",
queryTableRows
);
let filter = this.setFilter(queryTableRows);
if (filter && userContext.apiType !== "Cassandra") {
filter = filter.replace(/"/g, "'");
}

3
src/Explorer/Tabs/QueryTablesTab/QueryTableEntityClause.tsx
View File

@@ -17,6 +17,7 @@ import { IOption } from "./QueryTableTabUtils";
const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
export interface IQueryTableEntityClauseProps {
index: number;
entityValue: string;
entityValuePlaceHolder?: string;
selectedOperator: string;
@@ -39,6 +40,7 @@ export interface IQueryTableEntityClauseProps {
}
export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClauseProps> = ({
index,
entityValue,
entityValuePlaceHolder,
selectedOperator,
@@ -88,6 +90,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
</TooltipHost>
<Checkbox checked={isQueryTableEntityChecked} onChange={onQueryTableEntityCheck} />
<Dropdown
style={{ visibility: index > 0 ? "visible" : "hidden" }}
selectedKey={selectedOperation}
onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
onDropdownChange(selectedOption, "selectedOperation")

14
src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx
View File

@@ -1,12 +1,12 @@
import { IColumn } from "@fluentui/react";
import { IColumn, Selection } from "@fluentui/react";
import * as ViewModels from "../../../Contracts/ViewModels";
import Explorer from "../../Explorer";
import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
import * as Entities from "../../Tables/Entities";
import ClauseGroup from "../../Tables/QueryBuilder/ClauseGroup";
import QueryViewModel from "../../Tables/QueryBuilder/QueryViewModel";
import TabsBase from "../TabsBase";
import NewQueryTablesTab from "./QueryTablesTab";
export interface Button {
visible: boolean;
enabled: boolean;
@@ -58,6 +58,9 @@ export interface IQueryTablesTabComponentStates {
operators: string[];
selectMessage: string;
queryTableRows: IQueryTableRowsType[];
originalItems: IDocument[];
rowSelected: boolean;
selection: Selection;
}
export interface IQueryTableRowsType {
@@ -75,6 +78,13 @@ export interface IQueryTableRowsType {
operationOptions: IOption[];
timestampOptions: IOption[];
id: string;
clauseGroup: ClauseGroup;
isLocal: boolean;
isTimestamp: boolean;
isValue: boolean;
isCustomRangeTimestamp: boolean;
customTimeValue: string;
timeValue: string;
}
export const getformattedOptions = (options: Array<string>): IOption[] => {

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

@@ -161,19 +161,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
this.tableCommands = new TableCommands(this.container);
this.tableDataClient = this.container.tableDataClient;
this.tableEntityListViewModel2(new TableEntityListViewModel(this.tableCommands, props.queryTablesTab));
// const sampleQuerySubscription = this.tableEntityListViewModel2().items.subscribe(() => {
// if (this.tableEntityListViewModel2().items().length > 0 && userContext.apiType === "Tables") {
// // this.queryViewModel().queryBuilderViewModel().setExample();
// console.log(
// "🚀 ~ file: QueryTablesTab.tsx ~ line 55 ~ QueryTablesTab ~ sampleQuerySubscription ~ this.queryViewModel().queryBuilderViewModel().setExample()"
// // this.queryViewModel().queryBuilderViewModel().setExample()
// );
// }
// sampleQuerySubscription.dispose();
// });
const tableEntityListViewModel = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab);
// this._queryViewModel = new QueryViewModel(this.props.queryTablesTab);
const queryBuilderViewModel = new QueryViewModel(this.props.queryTablesTab).queryBuilderViewModel();
const entityTypeOptions = queryBuilderViewModel.edmTypes();
@@ -219,6 +207,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
},
columns: columns,
items: [],
originalItems: [],
isExpanded: false,
isEditorActive: false,
selectedItems: [],
@@ -228,13 +217,15 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
isCustomRangeTimestamp: false,
operators: [],
selectMessage: "",
rowSelected: false,
selection: this.createSelection(),
queryTableRows: [
{
isQueryTableEntityChecked: false,
selectedOperator: "=",
id: 1,
id: "1",
selectedField: "PartitionKey",
selectedOperation: "And",
selectedOperation: "",
entityValue: "",
selectedEntityType: "String",
isTimeStampSelected: false,
@@ -244,6 +235,13 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
entityTypeOptions: getformattedOptions(entityTypeOptions),
operationOptions: getformattedOptions(operationOptions),
timestampOptions: getformattedOptions(timestampOptions),
clauseGroup: queryBuilderViewModel.queryClauses,
isValue: true,
isLocal: false,
isTimestamp: false,
isCustomRangeTimestamp: false,
customTimeValue: "",
timeValue: "",
},
],
};
@@ -287,9 +285,9 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
dropdown: { width: 300 },
};
this.selection = new Selection({
onSelectionChanged: this.onItemsSelectionChanged,
});
// this.selection = new Selection({
// onSelectionChanged: this.onItemsSelectionChanged,
// });
this.buildCommandBarOptions();
}
@@ -297,82 +295,131 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
/****************** Constructor Ends */
componentDidMount(): void {
const { tableEntityListViewModel, queryTableRows } = this.state;
tableEntityListViewModel.renderNextPageAndupdateCache();
this.loadEntities();
setTimeout(() => {
// console.log("items > ", this.state.tableEntityListViewModel.cache.data);
// console.log("items > ", this.state.tableEntityListViewModel.items());
// console.log("items1 > ", this.state.tableEntityListViewModel.headers);
this.columns = [];
tableEntityListViewModel.headers.map((header) => {
this.columns.push({
key: header,
name: header,
minWidth: 100,
maxWidth: 200,
data: "string",
fieldName: header,
isResizable: true,
isSorted: true,
isSortedDescending: false,
sortAscendingAriaLabel: "Sorted A to Z",
sortDescendingAriaLabel: "Sorted Z to A",
});
});
const queryTableRowsClone = [...queryTableRows];
queryTableRowsClone[0].fieldOptions = getformattedOptions(tableEntityListViewModel.headers);
this.setState({
columns: this.columns,
operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
queryTableRows: queryTableRowsClone,
// isValue:
});
setTimeout(() => {
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 248 ~ QueryTablesTabComponent ~ setTimeout ~ columns",
// this.state.columns
// );
}, 1000);
this.allItems = this.generateDetailsList();
this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.map((clause) => {
// clause._id
this.allQueryTableRows.push({
id: clause._id,
isQueryTableEntityChecked: false,
selectedOperator: clause.operator(),
selectedField: clause.field(),
selectedEntityType: clause.type(),
selectedOperation: clause.and_or(),
entityValue: clause.value(),
isTimeStampSelected: false,
selectedTimestamp: "Last hour",
operatorOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().operators()),
fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
entityTypeOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().edmTypes()),
operationOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().clauseRules()),
timestampOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().timeOptions()),
});
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 336 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ clause._id",
clause,
", ",
clause._id
);
});
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 319 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ this.allQueryTableRows",
this.allQueryTableRows
);
this.setState({
items: this.allItems,
queryTableRows: this.allQueryTableRows,
});
this.loadFilterExample();
// this.setDefaultItemSelection();
}, 7000);
}
public createSelection = (): Selection => {
return new Selection({
onSelectionChanged: () => this.onItemsSelectionChanged(),
// onSelectionChanged: () => {
// this.setState({ selectedItems: this.onItemsSelectionChanged() });
// },
getKey: (item: any) => item.key,
});
};
public setDefaultItemSelection(): void {
const newSelection = this.createSelection();
const items: any = this.state.items;
newSelection.setItems(items);
for (let i = 1; i <= 3; i++) {
newSelection.setKeySelected(`${i}`, true, false);
console.log(" yooo > ", newSelection.setKeySelected(`${i}`, true, false));
}
this.setState({
selection: newSelection,
// selectedItems: this.onItemsSelectionChanged(),
});
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 342 ~ QueryTablesTabComponent ~ setDefaultItemSelection ~ selection",
this.state.selection,
", ",
this.state.selectedItems
);
}
//NOT USED. Backup only
public originalDidMount(): void {
// const { tableEntityListViewModel, queryTableRows } = this.state;
// // tableEntityListViewModel.renderNextPageAndupdateCache();
// setTimeout(() => {
// // console.log(
// // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 296 ~ QueryTablesTabComponent ~ componentDidMount ~ componentDidMount",
// // this.state.tableEntityListViewModel.items()
// // );
// // // console.log("items > ", this.state.tableEntityListViewModel.cache.data);
// // // console.log("items > ", this.state.tableEntityListViewModel.items());
// // // console.log("items1 > ", this.state.tableEntityListViewModel.headers);
// // this.columns = [];
// // tableEntityListViewModel.headers.map((header) => {
// // this.columns.push({
// // key: header,
// // name: header,
// // minWidth: 100,
// // maxWidth: 200,
// // data: "string",
// // fieldName: header,
// // isResizable: true,
// // isSorted: true,
// // isSortedDescending: false,
// // sortAscendingAriaLabel: "Sorted A to Z",
// // sortDescendingAriaLabel: "Sorted Z to A",
// // });
// // });
// const queryTableRowsClone = [...queryTableRows];
// queryTableRowsClone[0].fieldOptions = getformattedOptions(tableEntityListViewModel.headers);
// this.setState({
// // columns: this.columns,
// operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
// queryTableRows: queryTableRowsClone,
// // isValue:
// });
// // this.allItems = this.generateDetailsList();
// this.state.queryViewModel
// .queryBuilderViewModel()
// .setExample(
// this.state.tableEntityListViewModel.items()[0].PartitionKey._,
// this.state.tableEntityListViewModel.items()[0].RowKey._
// );
// this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.map((clause) => {
// // clause._id
// this.allQueryTableRows.push({
// id: clause._id,
// isQueryTableEntityChecked: false,
// selectedOperator: clause.operator(),
// selectedField: clause.field(),
// selectedEntityType: clause.type(),
// selectedOperation: clause.and_or(),
// entityValue: clause.value(),
// isTimeStampSelected: false,
// selectedTimestamp: "Last hour",
// operatorOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().operators()),
// fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
// entityTypeOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().edmTypes()),
// operationOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().clauseRules()),
// timestampOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().timeOptions()),
// clauseGroup: clause.clauseGroup,
// isValue: clause.isValue(),
// isLocal: clause.isLocal(),
// isCustomRangeTimestamp: clause.isCustomRangeTimestamp(),
// isTimestamp: clause.isTimestamp(),
// customTimeValue: clause.customTimeValue(),
// timeValue: clause.timeValue(),
// });
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 336 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ clause._id",
// clause,
// ", ",
// clause._id
// );
// });
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 319 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ this.allQueryTableRows",
// this.allQueryTableRows
// );
// this.setState({
// // items: this.allItems,
// // originalItems: this.allItems,
// queryTableRows: this.allQueryTableRows,
// // queryText: this.state.queryViewModel.queryText(),
// });
// }, 7000);
}
// public async test(): Promise<void> {
// await this.state.tableEntityListViewModel.renderNextPageAndupdateCache().then(() => {
// console.log("inside > ", this.state.tableEntityListViewModel.items());
@@ -390,32 +437,179 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
});
}
private onItemsSelectionChanged = () => {
private onItemsSelectionChanged = (): Entities.ITableEntity[] => {
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 280 ~ QueryTablesTabComponent ~ onItemsSelectionChanged",
// Object.values(this.selection.getSelection()[0])[2],
// ", ",
// this.selection.getSelection()[0]["Timestamp"]
// );
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 338 ~ QueryTablesTabComponent ~ this.selection.getSelection().length",
// this.selection.getSelection().length
// );
if (this.selection.getSelection().length > 0) {
const a = this.state.tableEntityListViewModel
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 338 ~ QueryTablesTabComponent ~ this.selection.getSelection().length",
this.state.selection.getSelection().length,
", ",
this.state.selection.getSelection()
);
let selectedItems: Entities.ITableEntity[];
if (this.state.selection.getSelection().length > 0) {
selectedItems = this.state.tableEntityListViewModel
.items()
.filter((item) => item["Timestamp"]._ === Object.values(this.selection.getSelection()[0])[2]);
// console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ a", a);
.filter((item) => item["Timestamp"]._ === Object.values(this.state.selection.getSelection()[0])[2]);
// console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ selectedItems", selectedItems);
this.setState({
// selectionCount: this._selection.getSelectedCount(),
selectedItems: a,
selectedItems: selectedItems,
rowSelected: true,
});
}
return selectedItems;
};
public loadFilterExample(): void {
const { tableEntityListViewModel, queryTableRows } = this.state;
const queryTableRowsClone = [...queryTableRows];
queryTableRowsClone[0].fieldOptions = getformattedOptions(tableEntityListViewModel.headers);
this.setState({
operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
queryTableRows: queryTableRowsClone,
});
this.state.queryViewModel
.queryBuilderViewModel()
.setExample(tableEntityListViewModel.items()[0].PartitionKey._, tableEntityListViewModel.items()[0].RowKey._);
this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.map((clause, index) => {
this.allQueryTableRows.push({
id: clause._id,
isQueryTableEntityChecked: false,
selectedOperator: clause.operator(),
selectedField: clause.field(),
selectedEntityType: clause.type(),
selectedOperation: index === 0 ? "" : clause.and_or(),
entityValue: clause.value(),
isTimeStampSelected: false,
selectedTimestamp: "Last hour",
operatorOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().operators()),
fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
entityTypeOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().edmTypes()),
operationOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().clauseRules()),
timestampOptions: getformattedOptions(this.state.queryViewModel.queryBuilderViewModel().timeOptions()),
clauseGroup: clause.clauseGroup,
isValue: clause.isValue(),
isLocal: clause.isLocal(),
isCustomRangeTimestamp: clause.isCustomRangeTimestamp(),
isTimestamp: clause.isTimestamp(),
customTimeValue: clause.customTimeValue(),
timeValue: clause.timeValue(),
});
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 336 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ clause._id",
clause,
", ",
clause._id
);
});
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 319 ~ QueryTablesTabComponent ~ this.state.queryViewModel.queryBuilderViewModel ~ this.allQueryTableRows",
this.allQueryTableRows
);
this.setState({
queryTableRows: this.allQueryTableRows,
});
}
public loadEntities(): void {
const { tableEntityListViewModel } = this.state;
tableEntityListViewModel.renderNextPageAndupdateCache();
setTimeout(() => {
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 296 ~ QueryTablesTabComponent ~ componentDidMount ~ componentDidMount",
this.state.tableEntityListViewModel.items()
);
this.columns = [];
tableEntityListViewModel.headers.map((header) => {
this.columns.push({
key: header,
name: header,
minWidth: 100,
maxWidth: 200,
data: "string",
fieldName: header,
isResizable: true,
isSorted: true,
isSortedDescending: false,
sortAscendingAriaLabel: "Sorted A to Z",
sortDescendingAriaLabel: "Sorted Z to A",
});
});
this.setState({
columns: this.columns,
});
this.allItems = this.generateDetailsList();
this.setState({
items: this.allItems,
originalItems: this.allItems,
queryText: this.state.queryViewModel.queryText(),
});
}, 7000);
}
public generateDetailsList(): IDocument[] {
// const items: IDocument[] = [];
//eslint-disable-next-line
const items: any[] = [];
//eslint-disable-next-line
let obj: any = undefined;
// const newColumns = [];
// const compare = ["PartitionKey", "RowKey", "Timestamp", "_rid", "_self", "_etag", "_attachments"];
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 582 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ this.state.tableEntityListViewModel.items()",
this.state.tableEntityListViewModel.items()
);
this.state.tableEntityListViewModel.items().map((item) => {
// console.log("generateDetailsList > ", item["PartitionKey"]._);
this.columns.map((col) => {
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 403 ~ QueryTablesTabComponent ~ this.columns.map ~ col.name",
// col.name
// );
if (item[col.name]) {
// console.log("Data > ", item[col.name]._);
obj = { ...obj, ...{ [col.name]: item[col.name]._ } };
}
});
items.push(obj);
});
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 814 ~ QueryTablesTabComponent ~ generateDetailsList ~ items",
items
);
// this.state.queryViewModel
// .queryBuilderViewModel()
// .setExample(
// this.state.tableEntityListViewModel.items()[0].PartitionKey._,
// this.state.tableEntityListViewModel.items()[0].RowKey._
// );
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 383 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ items",
// this.state.queryViewModel.queryBuilderViewModel().queryClauses.children
// );
return items;
}
public reloadEntities(): void {
this.componentDidMount();
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 423 ~ QueryTablesTabComponent ~ reloadEntities ~ reloadEntities"
);
// this.componentDidMount();
this.loadEntities();
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 349 ~ QueryTablesTabComponent ~ addEntity ~ addedEntity",
// addedEntity,
@@ -498,6 +692,72 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
}
};
public runQuery(queryTableRows: IQueryTableRowsType[]): void {
this.state.queryViewModel.runQuery(queryTableRows);
if (queryTableRows.length !== 0) {
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 507 ~ QueryTablesTabComponent ~ runQuery ~ queryTableRows",
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,
});
}
}
public getOperator(operator: string): string {
let result = "";
switch (operator) {
case "=":
result = " === ";
break;
case ">":
result = " > ";
break;
case "<":
result = " < ";
break;
case ">=":
result = " >= ";
break;
case "<=":
result = " <= ";
break;
default:
result = " === ";
}
return result;
}
protected getTabsButtons(): CommandButtonComponentProps[] {
const buttons: CommandButtonComponentProps[] = [];
if (this.state.queryBuilderButton.visible) {
@@ -533,7 +793,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
buttons.push({
iconSrc: ExecuteQueryIcon,
iconAlt: label,
onCommandClick: () => this.state.queryViewModel.runQuery(),
onCommandClick: () => this.runQuery(this.state.queryTableRows),
commandButtonLabel: label,
ariaLabel: label,
hasPopup: false,
@@ -586,7 +846,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
this.props.tabsBaseInstance.updateNavbarWithTabsButtons();
}
public generateDetailsList(): IDocument[] {
//NOT USED. Backup only
public originalGenerateDetailsList(): IDocument[] {
// const items: IDocument[] = [];
//eslint-disable-next-line
const items: any[] = [];
@@ -602,10 +863,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
this.state.tableEntityListViewModel.items().map((item) => {
// console.log("generateDetailsList > ", item["PartitionKey"]._);
this.columns.map((col) => {
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 403 ~ QueryTablesTabComponent ~ this.columns.map ~ col.name",
// col.name
// );
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 403 ~ QueryTablesTabComponent ~ this.columns.map ~ col.name",
col.name
);
if (item[col.name]) {
// console.log("Data > ", item[col.name]._);
obj = { ...obj, ...{ [col.name]: item[col.name]._ } };
@@ -613,6 +874,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
});
items.push(obj);
});
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 814 ~ QueryTablesTabComponent ~ generateDetailsList ~ items",
items
);
this.state.queryViewModel
.queryBuilderViewModel()
.setExample(
@@ -620,10 +885,10 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
this.state.tableEntityListViewModel.items()[0].RowKey._
);
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 383 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ items",
this.state.queryViewModel.queryBuilderViewModel().queryClauses.children
);
// console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 383 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ items",
// this.state.queryViewModel.queryBuilderViewModel().queryClauses.children
// );
return items;
}
@@ -648,6 +913,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
isEditorActive: false,
});
}
private onQueryTableEntityCheck = (index: number): void => {
const { queryTableRows } = this.state;
const cloneQueryTableRows: IQueryTableRowsType[] = [...queryTableRows];
@@ -682,24 +948,49 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
};
onAddNewClause = (): void => {
const { queryTableRows } = this.state;
const { queryTableRows, queryViewModel, tableEntityListViewModel } = this.state;
this.state.queryViewModel.queryBuilderViewModel().addNewClause();
console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 696 ~ QueryTablesTabComponent ~ this.state ~ onAddNewClause",
this.state.queryViewModel.queryBuilderViewModel().queryClauses.children[
this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.length - 1
],
", ",
this.state.queryViewModel.queryBuilderViewModel().queryClauses.children,
", ",
this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.length
);
const newClause = this.state.queryViewModel.queryBuilderViewModel().queryClauses.children[
this.state.queryViewModel.queryBuilderViewModel().queryClauses.children.length - 1
];
const cloneQueryTableRows: IQueryTableRowsType[] = [...queryTableRows];
cloneQueryTableRows.splice(cloneQueryTableRows.length, 0, {
isQueryTableEntityChecked: false,
selectedOperator: "=",
operatorOptions: queryTableRows[0].operatorOptions,
operatorOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().operators()),
// id: cloneQueryTableRows.length + 1,
id: "newRow",
id: newClause._id,
selectedField: "PartitionKey",
fieldOptions: queryTableRows[0].fieldOptions,
entityTypeOptions: queryTableRows[0].entityTypeOptions,
fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
entityTypeOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().edmTypes()),
selectedEntityType: "String",
operationOptions: queryTableRows[0].operationOptions,
operationOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().clauseRules()),
// operationOptions: queryTableRows[0].operationOptions,
selectedOperation: "And",
entityValue: "",
isTimeStampSelected: false,
timestampOptions: queryTableRows[0].timestampOptions,
timestampOptions: getformattedOptions(queryViewModel.queryBuilderViewModel().timeOptions()),
// timestampOptions: queryTableRows[0].timestampOptions,
selectedTimestamp: "Last hour",
clauseGroup: newClause.clauseGroup,
isValue: newClause.isValue(),
isLocal: newClause.isLocal(),
isCustomRangeTimestamp: newClause.isCustomRangeTimestamp(),
isTimestamp: newClause.isTimestamp(),
customTimeValue: newClause.customTimeValue(),
timeValue: newClause.timeValue(),
});
this.setState({ queryTableRows: cloneQueryTableRows });
};
@@ -782,6 +1073,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
<>
{queryTableRows.map((queryTableRow, index) => (
<QueryTableEntityClause
index={index}
key={queryTableRow.id}
isQueryTableEntityChecked={queryTableRow.isQueryTableEntityChecked}
selectedOperator={queryTableRow.selectedOperator}
@@ -914,7 +1206,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
selectionMode={SelectionMode.single}
layoutMode={DetailsListLayoutMode.justified}
compact={true}
selection={this.selection}
selection={this.state.selection}
selectionPreservedOnEmptyClick={true}
/>
</div>
</div>