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 9a68c9d33..28dc268cd 100644 --- a/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx +++ b/src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx @@ -50,10 +50,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"; @@ -101,7 +97,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 db1dceea9..3fa96c4c9 100644 --- a/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx +++ b/src/Explorer/Tabs/QueryTablesTab/QueryTableTabUtils.tsx @@ -61,6 +61,8 @@ export interface IQueryTablesTabComponentStates { originalItems: IDocument[]; rowSelected: boolean; selection: Selection; + 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 7082c5201..866c98f53 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, @@ -9,6 +10,7 @@ import { } 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 +24,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 +35,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"; @@ -219,6 +226,8 @@ class QueryTablesTabComponent extends Component ", - this.state.tableEntityListViewModel - ); + // console.log( + // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 24 ~ QueryTablesTabComponent ~ constructor ~ props", + // props + // ); + // console.log( + // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 85 ~ QueryTablesTabComponent ~ constructor ~ this.state", + // this.state, + // ", ", + // this.state.queryViewModel.queryBuilderViewModel(), + // ", ", + // this.state.queryViewModel.queryBuilderViewModel().clauseArray(), + // ", ", + // this.state.tableEntityListViewModel.items(), + // ", tableEntityList > ", + // this.state.tableEntityListViewModel + // ); this.andLabel = this.state.queryViewModel.queryBuilderViewModel().andLabel; this.actionLabel = this.state.queryViewModel.queryBuilderViewModel().actionLabel; this.fieldLabel = this.state.queryViewModel.queryBuilderViewModel().fieldLabel; @@ -296,10 +305,10 @@ class QueryTablesTabComponent extends Component { - this.loadFilterExample(); - // this.setDefaultItemSelection(); - }, 7000); + // setTimeout(() => { + // this.loadFilterExample(); + // // this.setDefaultItemSelection(); + // }, 7000); } public createSelection = (): Selection => { @@ -467,9 +476,17 @@ class QueryTablesTabComponent extends Component ", + this.state.entities, + ", operation > ", + this.state.queryViewModel.queryBuilderViewModel().operators() + ); const queryTableRowsClone = [...queryTableRows]; - queryTableRowsClone[0].fieldOptions = getformattedOptions(tableEntityListViewModel.headers); + queryTableRowsClone[0].fieldOptions = getformattedOptions(headers); this.setState({ operators: this.state.queryViewModel.queryBuilderViewModel().operators(), queryTableRows: queryTableRowsClone, @@ -477,7 +494,8 @@ class QueryTablesTabComponent extends Component { this.allQueryTableRows.push({ id: clause._id, @@ -490,7 +508,7 @@ class QueryTablesTabComponent extends Component { + // 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", - }); + // setTimeout(() => { + // console.log( + // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 296 ~ QueryTablesTabComponent ~ componentDidMount ~ componentDidMount", + // this.state.tableEntityListViewModel.items() + // ); + // 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", }); + }); - this.setState({ + const documentItems = this.generateDetailsList(documents.Results); + // const queryTableRowsClone = [...queryTableRows]; + // queryTableRowsClone[0].fieldOptions = getformattedOptions(headers); + this.setState( + { columns: this.columns, - }); - - this.allItems = this.generateDetailsList(); - - this.setState({ - items: this.allItems, - originalItems: this.allItems, + headers, + operators: this.state.queryViewModel.queryBuilderViewModel().operators(), + // queryTableRows: queryTableRowsClone, + items: documentItems, + entities: documents.Results, + originalItems: documentItems, queryText: this.state.queryViewModel.queryText(), - }); - }, 7000); + }, + () => this.loadFilterExample() + ); } - public generateDetailsList(): IDocument[] { + 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 generateDetailsList(documents: Entities.ITableEntity[]): IDocument[] { // const items: IDocument[] = []; //eslint-disable-next-line const items: any[] = []; @@ -570,9 +628,9 @@ class QueryTablesTabComponent extends Component { + documents.map((item) => { // console.log("generateDetailsList > ", item["PartitionKey"]._); this.columns.map((col) => { // console.log( @@ -848,48 +906,46 @@ class QueryTablesTabComponent extends Component { - // 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._ - ); - + // // 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 383 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ items", - // this.state.queryViewModel.queryBuilderViewModel().queryClauses.children + // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 582 ~ QueryTablesTabComponent ~ this.state.tableEntityListViewModel.items ~ this.state.tableEntityListViewModel.items()", + // this.state.tableEntityListViewModel.items() // ); - return 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 toggleAdvancedOptions(): void { @@ -948,7 +1004,7 @@ class QueryTablesTabComponent extends Component { - const { queryTableRows, queryViewModel, tableEntityListViewModel } = this.state; + const { queryTableRows, queryViewModel, headers } = this.state; this.state.queryViewModel.queryBuilderViewModel().addNewClause(); console.log( "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 696 ~ QueryTablesTabComponent ~ this.state ~ onAddNewClause", @@ -971,7 +1027,7 @@ class QueryTablesTabComponent extends Component - this.state.queryViewModel.selectQueryOptions( - this.state.tableEntityListViewModel.headers, - (selectMessage: string) => this.getSelectMessage(selectMessage) + this.state.queryViewModel.selectQueryOptions(this.state.headers, (selectMessage: string) => + this.getSelectMessage(selectMessage) ) } >