diff --git a/src/Explorer/Tables/DataTable/DataTableViewModel.ts b/src/Explorer/Tables/DataTable/DataTableViewModel.ts index 2650299ee..989c647cd 100644 --- a/src/Explorer/Tables/DataTable/DataTableViewModel.ts +++ b/src/Explorer/Tables/DataTable/DataTableViewModel.ts @@ -190,9 +190,6 @@ abstract class DataTableViewModel { this.items(renderData); this.items1 = renderData; - console.log("🚀 ~ file: DataTableViewModel.ts ~ line 191 ~ DataTableViewModel ~ renderData", renderData); - console.log("🚀 ~ file: DataTableViewModel.ts ~ line 192 ~ DataTableViewModel ~ this.items", this.items()); - console.log("🚀 ~ file: DataTableViewModel.ts ~ line 192 ~ DataTableViewModel ~ this.items1", this.items1); // var render: IDataTableRenderData = { // draw: draw, // aaData: renderData, diff --git a/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts b/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts index e0c8c02ab..f8a941350 100644 --- a/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts +++ b/src/Explorer/Tables/DataTable/TableEntityListViewModel.ts @@ -433,10 +433,6 @@ export default class TableEntityListViewModel extends DataTableViewModel { userContext.apiType === "Cassandra" ); var newHeaders: string[] = _.difference(selectedHeadersUnion, this.headers); - console.log( - "🚀 ~ file: TableEntityListViewModel.ts ~ line 435 ~ TableEntityListViewModel ~ .then ~ newHeaders", - newHeaders - ); if (newHeaders.length > 0) { // Any new columns found will be added into headers array, which will trigger a re-render of the DataTable. // So there is no need to call it here. @@ -455,10 +451,6 @@ export default class TableEntityListViewModel extends DataTableViewModel { } }) .catch((error: any) => { - console.log( - "🚀 ~ file: TableEntityListViewModel.ts ~ line 452 ~ TableEntityListViewModel ~ //constructor ~ error", - error - ); const parsedErrors = parseError(error); var errors = parsedErrors.map((error) => { return { @@ -572,10 +564,6 @@ export default class TableEntityListViewModel extends DataTableViewModel { } else { // Create cache. this.cache.data = entities; - console.log( - "🚀 ~ file: TableEntityListViewModel.ts ~ line 569 ~ TableEntityListViewModel ~ .then ~ this.cache.data", - this.cache.data - ); } this.cache.tableQuery = tableQuery; diff --git a/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx b/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx index e24efc170..8c1cc5308 100644 --- a/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx +++ b/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx @@ -49,10 +49,6 @@ export default class QueryViewModel { this.queryTablesTab = queryTablesTab; this.id = `queryViewModel${this.queryTablesTab.tabId}`; this._tableEntityListViewModel = queryTablesTab.tableEntityListViewModel; - console.log( - "🚀 ~ file: QueryViewModel.tsx ~ line 52 ~ QueryViewModel ~ constructor ~ this._tableEntityListViewModel", - this._tableEntityListViewModel - ); this.queryTextIsReadOnly = ko.computed(() => { return userContext.apiType !== "Cassandra"; @@ -100,7 +96,6 @@ export default class QueryViewModel { }; public selectEditor = (): void => { - console.log("🚀 ~ file: QueryViewModel.tsx ~ line 99 ~ QueryViewModel ~ //constructor ~ selectEditor"); this.setFilter(); if (!this.isEditorActive()) { this.unchangedText(this.queryText()); diff --git a/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx b/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx index 5ee143b61..67df6af9a 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx @@ -58,6 +58,8 @@ export interface IQueryTablesTabComponentStates { operators: string[]; selectMessage: string; queryTableRows: IQueryTableRowsType[]; + entities: Entities.ITableEntity[]; + headers: string[]; } export interface IQueryTableRowsType { diff --git a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTab.tsx b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTab.tsx index f17ba9992..fedc5226a 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTab.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTab.tsx @@ -33,7 +33,6 @@ class NewQueryTablesTab extends TabsBase { tabsBaseInstance: this, queryTablesTab: this, }; - console.log("🚀 ~ file: QueryTablesTab.tsx ~ line 13 ~ NewQueryTablesTab ~ constructor ~ props", props); } public render(): JSX.Element { return ; diff --git a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx index e81b527fb..3ef1baa7f 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx @@ -1,3 +1,4 @@ +import { FeedOptions } from "@azure/cosmos"; import { DetailsList, DetailsListLayoutMode, @@ -5,10 +6,10 @@ import { IDropdownOption, IDropdownStyles, Selection, - SelectionMode + SelectionMode, } from "@fluentui/react"; -import * as ko from "knockout"; import React, { Component } from "react"; +import * as _ from "underscore"; import QueryInformation from "../../../../images//QueryBuilder/QueryInformation_16x.png"; import AddProperty from "../../../../images/Add-property.svg"; import AddEntityIcon from "../../../../images/AddEntity.svg"; @@ -22,6 +23,9 @@ import QueryTextIcon from "../../../../images/Query-Text.svg"; import StatusWraning from "../../../../images/QueryBuilder/StatusWarning_16x.png"; import TriangleDown from "../../../../images/Triangle-down.svg"; import TriangleRight from "../../../../images/Triangle-right.svg"; +import { queryDocuments } from "../../../Common/dataAccess/queryDocuments"; +import { handleError } from "../../../Common/ErrorHandlingUtils"; +import * as HeadersUtility from "../../../Common/HeadersUtility"; import * as ViewModels from "../../../Contracts/ViewModels"; import { useSidePanel } from "../../../hooks/useSidePanel"; import { userContext } from "../../../UserContext"; @@ -30,11 +34,13 @@ import Explorer from "../../Explorer"; import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter"; import { AddTableEntityPanel } from "../../Panes/Tables/AddTableEntityPanel"; import { EditTableEntityPanel } from "../../Panes/Tables/EditTableEntityPanel"; +import * as DataTableUtilities from "../../Tables/DataTable/DataTableUtilities"; import TableCommands from "../../Tables/DataTable/TableCommands"; import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel"; import * as Entities from "../../Tables/Entities"; import QueryViewModel from "../../Tables/QueryBuilder/QueryViewModel"; import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataClient"; +import * as TableEntityProcessor from "../../Tables/TableEntityProcessor"; // import TabsBase from "../TabsBase"; // import NewQueryTablesTab from "./QueryTablesTab"; import { QueryTableEntityClause } from "./QueryTableEntityClause"; @@ -43,7 +49,7 @@ import { IDocument, IQueryTableRowsType, IQueryTablesTabComponentProps, - IQueryTablesTabComponentStates + IQueryTablesTabComponentStates, } from "./QueryTableTabUtils"; export interface Button { visible: boolean; @@ -51,60 +57,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 { - // public readonly html = template; public collection: ViewModels.Collection; - // public tableEntityListViewModel = ko.observable(); 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; @@ -119,7 +76,7 @@ class QueryTablesTabComponent extends Component(); + // public tableEntityListViewModel2 = ko.observable(); public allItems: IDocument[]; public columns: IColumn[]; public selection: Selection; @@ -160,20 +117,9 @@ class QueryTablesTabComponent extends Component { - // 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(); - // }); + // this.tableEntityListViewModel2(new TableEntityListViewModel(this.tableCommands, props.queryTablesTab)); 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(); @@ -228,6 +174,8 @@ class QueryTablesTabComponent extends Component ", - this.state.tableEntityListViewModel - ); - // const x = this.state.tableEntityListViewModel.items(); - // console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 146 ~ QueryTablesTabComponent ~ constructor ~ x", x); this.andLabel = this.state.queryViewModel.queryBuilderViewModel().andLabel; this.actionLabel = this.state.queryViewModel.queryBuilderViewModel().actionLabel; this.fieldLabel = this.state.queryViewModel.queryBuilderViewModel().fieldLabel; this.dataTypeLabel = this.state.queryViewModel.queryBuilderViewModel().dataTypeLabel; this.operatorLabel = this.state.queryViewModel.queryBuilderViewModel().operatorLabel; this.valueLabel = this.state.queryViewModel.queryBuilderViewModel().valueLabel; - // console.log( - // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 232 ~ QueryTablesTabComponent ~ constructor ~ this.state.queryViewModel.queryBuilderViewModel().operators", - // this.state.queryViewModel.queryBuilderViewModel().operators() - // ); - useCommandBar.getState().setContextButtons(this.getTabsButtons()); - // this.test(); this.state.queryViewModel .queryBuilderViewModel() .operators() @@ -290,18 +214,6 @@ class QueryTablesTabComponent extends Component { - // console.log("items > ", this.state.tableEntityListViewModel.cache.data); - // console.log("items > ", this.state.tableEntityListViewModel.items()); - // console.log("items1 > ", this.state.tableEntityListViewModel.headers); - // console.log("items1 > simple > ", this.tableEntityListViewModel1.items1); - 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.setState({ - items: this.allItems, - }); - }, 7000); + this.loadDocumentsDetails(); } - // public async test(): Promise { - // await this.state.tableEntityListViewModel.renderNextPageAndupdateCache().then(() => { - // console.log("inside > ", this.state.tableEntityListViewModel.items()); - // }); - // console.log("items > ", this.state.tableEntityListViewModel.items()); - // } + private loadDocumentsDetails = async (): Promise => { + const { queryTableRows } = this.state; + const { collection } = this.props; + const documents = await this.getDocuments(collection, "Select * from c"); + const headers = this.getFormattedHeaders(documents.Results); + this.columns = []; + 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 documentItems = this.generateDetailsList(documents.Results); + const queryTableRowsClone = [...queryTableRows]; + queryTableRowsClone[0].fieldOptions = getformattedOptions(headers); + this.setState({ + columns: this.columns, + headers, + operators: this.state.queryViewModel.queryBuilderViewModel().operators(), + queryTableRows: queryTableRowsClone, + items: documentItems, + entities: documents.Results, + }); + }; + + private getFormattedHeaders = (entities: Entities.ITableEntity[]): string[] => { + const selectedHeadersUnion: string[] = DataTableUtilities.getPropertyIntersectionFromTableEntities( + entities, + userContext.apiType === "Cassandra" + ); + const newHeaders: string[] = _.difference(selectedHeadersUnion, []); + return newHeaders; + }; + + public async getDocuments( + collection: ViewModels.CollectionBase, + query: string + ): Promise { + try { + const options = { + enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey(), + } as FeedOptions; + const iterator = queryDocuments(collection.databaseId, collection.id(), query, options); + const response = await iterator.fetchNext(); + const documents = response?.resources; + const entities = TableEntityProcessor.convertDocumentsToEntities(documents); + + return { + Results: entities, + ContinuationToken: iterator.hasMoreResults(), + iterator: iterator, + }; + } catch (error) { + handleError(error, "TablesAPIDataClient/queryDocuments", "Query documents failed"); + throw error; + } + } public getSelectMessage(selectMessage: string): void { - // console.log( - // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 332 ~ QueryTablesTabComponent ~ getSelectMessage ~ selectMessage", - // selectMessage - // ); this.setState({ selectMessage: selectMessage, }); } private onItemsSelectionChanged = () => { - // 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 - .items() - .filter((item) => item["Timestamp"]._ === Object.values(this.selection.getSelection()[0])[2]); - // console.log("🚀 ~ file: QueryTablesTabComponent.tsx ~ line 293 ~ QueryTablesTabComponent ~ a", a); - + const selectedItems = this.state.entities.filter( + (item) => item["Timestamp"]._ === Object.values(this.selection.getSelection()[0])[2] + ); this.setState({ - // selectionCount: this._selection.getSelectedCount(), - selectedItems: a, + selectedItems, }); } }; public reloadEntities(): void { - this.componentDidMount(); - // console.log( - // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 349 ~ QueryTablesTabComponent ~ addEntity ~ addedEntity", - // addedEntity, - // ", ", - // this.state.tableEntityListViewModel.items() - // ); - // const newItems: any[] = this.state.items; - // newItems.push(addedEntity); - // this.setState({ - // items: newItems, - // }); - // console.log( - // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 358 ~ QueryTablesTabComponent ~ addEntity ~ items", - // this.state.items - // ); - // this.allItems = this.generateDetailsList(); - // console.log( - // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 365 ~ QueryTablesTabComponent ~ addEntity ~ this.allItems", - // this.allItems - // ); - // this.setState({ - // items: this.allItems, - // }); + this.loadDocumentsDetails(); } public onAddEntityClick = (): void => { @@ -483,7 +371,7 @@ class QueryTablesTabComponent extends Component { return this.state.tableEntityListViewModel.removeEntitiesFromCache(entitiesToDelete).then(() => { // this.state.tableEntityListViewModel.redrawTableThrottled(); - this.componentDidMount(); + this.loadDocumentsDetails(); }); }); } @@ -577,38 +465,23 @@ class QueryTablesTabComponent extends Component { - // console.log("generateDetailsList > ", item["PartitionKey"]._); + let obj: any = {}; + documents.map((item) => { 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 383 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ items", - // items - // ); return items; } public toggleAdvancedOptions(): void { - // console.log("toggleAdvancedOptions!"); this.setState({ isExpanded: !this.state.isExpanded, }); @@ -693,8 +566,6 @@ class QueryTablesTabComponent extends Component
@@ -712,8 +583,9 @@ class QueryTablesTabComponent extends Component