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

Added dynamic data of clause entity

Browse Source
This commit is contained in:
sunilyadav840 2021-08-02 15:26:11 +05:30
parent 8ec551f6e6
commit f1ffa968a7
3 changed files with 64 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import {
IStackTokens, IStackTokens,
Stack, Stack,
TextField, TextField,
TooltipHost TooltipHost,
} from "@fluentui/react"; } from "@fluentui/react";
import React, { FunctionComponent } from "react"; import React, { FunctionComponent } from "react";
import AddIcon from "../../../../images/Add.svg"; import AddIcon from "../../../../images/Add.svg";
@ -21,8 +21,8 @@ export interface IQueryTableEntityClauseProps {
entityValuePlaceHolder?: string; entityValuePlaceHolder?: string;
selectedOperator: string; selectedOperator: string;
selectedOperation: string; selectedOperation: string;
opertorOptions: IOption[]; operatorOptions: IOption[];
opertationOptions: IOption[]; operationOptions: IOption[];
isQueryTableEntityChecked: boolean; isQueryTableEntityChecked: boolean;
selectedField: string; selectedField: string;
fieldOptions: IOption[]; fieldOptions: IOption[];
@ -42,14 +42,14 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
entityValue, entityValue,
entityValuePlaceHolder, entityValuePlaceHolder,
selectedOperator, selectedOperator,
opertorOptions, operatorOptions,
selectedField, selectedField,
isQueryTableEntityChecked, isQueryTableEntityChecked,
fieldOptions, fieldOptions,
entityTypeOptions, entityTypeOptions,
selectedEntityType, selectedEntityType,
selectedOperation, selectedOperation,
opertationOptions, operationOptions,
isTimeStampSelected, isTimeStampSelected,
selectedTimestamp, selectedTimestamp,
timestampOptions, timestampOptions,
@ -92,7 +92,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) => onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
onDropdownChange(selectedOption, "selectedOperation") onDropdownChange(selectedOption, "selectedOperation")
} }
options={opertationOptions} options={operationOptions}
id="operatorOptionId" id="operatorOptionId"
styles={dropdownStyles} styles={dropdownStyles}
/> />
@ -120,7 +120,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) => onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
onDropdownChange(selectedOption, "selectedOperator") onDropdownChange(selectedOption, "selectedOperator")
} }
options={opertorOptions} options={operatorOptions}
id="operatorOptionId" id="operatorOptionId"
styles={dropdownStyles} styles={dropdownStyles}
/> />

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

@ -70,50 +70,15 @@ export interface IQueryTableRowsType {
selectedOperation: string; selectedOperation: string;
selectedTimestamp: string; selectedTimestamp: string;
fieldOptions: IOption[]; fieldOptions: IOption[];
opertorOptions: IOption[]; operatorOptions: IOption[];
entityTypeOptions: IOption[]; entityTypeOptions: IOption[];
opertionOptions: IOption[]; operationOptions: IOption[];
timestampOptions: IOption[]; timestampOptions: IOption[];
id: number; id: number;
} }
export const opertionOptions = [ export const getformattedOptions = (options: Array<string>): IOption[] => {
{ key: "And", text: "And" }, return options.map((option) => {
{ key: "Or", text: "Or" }, return { key: option, text: option };
]; });
export const opertorOptions = [ };
{ key: "=", text: "=" },
{ key: ">", text: ">" },
{ key: ">=", text: ">=" },
{ key: "<", text: "<" },
{ key: "<=", text: "<=" },
{ key: "<>", text: "<>" },
];
export const fieldOptions = [
{ key: "PartitionKey", text: "PartitionKey" },
{ key: "RowKey", text: "RowKey" },
{ key: "Timestamp", text: "Timestamp" },
{ key: "t3PN", text: "t3PN" },
];
export const entityTypeOptions = [
{ key: "String", text: "String" },
{ key: "Boolean", text: "Boolean" },
{ key: "Binary", text: "Binary" },
{ key: "DateTime", text: "DateTime" },
{ key: "Double", text: "Double" },
{ key: "Guid", text: "Guid" },
{ key: "Int32", text: "Int32" },
{ key: "Int64", text: "Int64" },
];
export const timestampOptions = [
{ key: "Last hour", text: "Last hour" },
{ key: "Last 24 hours", text: "Last 24 hours" },
{ key: "Last 7 days", text: "Last 7 days" },
{ key: "Last 31 days", text: "Last 31 days" },
{ key: "Last 365 days", text: "Last 365 days" },
{ key: "Current month", text: "Current month" },
{ key: "Current year", text: "Current year" },
];

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

@ -5,7 +5,7 @@ import {
IDropdownOption, IDropdownOption,
IDropdownStyles, IDropdownStyles,
Selection, Selection,
SelectionMode, SelectionMode
} from "@fluentui/react"; } from "@fluentui/react";
import * as ko from "knockout"; import * as ko from "knockout";
import React, { Component } from "react"; import React, { Component } from "react";
@ -39,21 +39,18 @@ import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataC
// import NewQueryTablesTab from "./QueryTablesTab"; // import NewQueryTablesTab from "./QueryTablesTab";
import { QueryTableEntityClause } from "./QueryTableEntityClause"; import { QueryTableEntityClause } from "./QueryTableEntityClause";
import { import {
entityTypeOptions, getformattedOptions,
fieldOptions,
IDocument, IDocument,
IQueryTableRowsType, IQueryTableRowsType,
IQueryTablesTabComponentProps, IQueryTablesTabComponentProps,
IQueryTablesTabComponentStates, IQueryTablesTabComponentStates
opertionOptions,
opertorOptions,
timestampOptions,
} from "./QueryTableTabUtils"; } from "./QueryTableTabUtils";
export interface Button { export interface Button {
visible: boolean; visible: boolean;
enabled: boolean; enabled: boolean;
isSelected?: boolean; isSelected?: boolean;
} }
// export interface IDocument { // export interface IDocument {
// partitionKey: string; // partitionKey: string;
// rowKey: string; // rowKey: string;
@ -175,12 +172,17 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
// sampleQuerySubscription.dispose(); // sampleQuerySubscription.dispose();
// }); // });
this.tableEntityListViewModel1 = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab); const tableEntityListViewModel = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab);
// this._queryViewModel = new QueryViewModel(this.props.queryTablesTab); // this._queryViewModel = new QueryViewModel(this.props.queryTablesTab);
this.state = { const queryBuilderViewModel = new QueryViewModel(this.props.queryTablesTab).queryBuilderViewModel();
tableEntityListViewModel: new TableEntityListViewModel(this.tableCommands, props.queryTablesTab),
// tableEntityListViewModel.queryTablesTab : this.props.queryTablesTab const entityTypeOptions = queryBuilderViewModel.edmTypes();
const timestampOptions = queryBuilderViewModel.timeOptions();
const operatorsOptions = queryBuilderViewModel.operators();
const operationOptions = queryBuilderViewModel.clauseRules();
this.state = {
tableEntityListViewModel,
queryViewModel: new QueryViewModel(this.props.queryTablesTab), queryViewModel: new QueryViewModel(this.props.queryTablesTab),
queryText: "PartitionKey eq 'partionKey1'", queryText: "PartitionKey eq 'partionKey1'",
selectedQueryText: "", selectedQueryText: "",
@ -230,21 +232,22 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
{ {
isQueryTableEntityChecked: false, isQueryTableEntityChecked: false,
selectedOperator: "=", selectedOperator: "=",
opertorOptions,
selectedField: "PartitionKey",
fieldOptions,
id: 1, id: 1,
entityTypeOptions, selectedField: "PartitionKey",
selectedEntityType: "String",
opertionOptions,
selectedOperation: "And", selectedOperation: "And",
entityValue: "", entityValue: "",
selectedEntityType: "String",
isTimeStampSelected: false, isTimeStampSelected: false,
timestampOptions,
selectedTimestamp: "Last hour", selectedTimestamp: "Last hour",
operatorOptions: getformattedOptions(operatorsOptions),
fieldOptions: getformattedOptions(tableEntityListViewModel.headers),
entityTypeOptions: getformattedOptions(entityTypeOptions),
operationOptions: getformattedOptions(operationOptions),
timestampOptions: getformattedOptions(timestampOptions),
}, },
], ],
}; };
this.state.tableEntityListViewModel.queryTablesTab = this.props.queryTablesTab; this.state.tableEntityListViewModel.queryTablesTab = this.props.queryTablesTab;
console.log( console.log(
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 24 ~ QueryTablesTabComponent ~ constructor ~ props", "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 24 ~ QueryTablesTabComponent ~ constructor ~ props",
@ -314,7 +317,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
/****************** Constructor Ends */ /****************** Constructor Ends */
componentDidMount(): void { componentDidMount(): void {
this.state.tableEntityListViewModel.renderNextPageAndupdateCache(); const { tableEntityListViewModel, queryTableRows } = this.state;
tableEntityListViewModel.renderNextPageAndupdateCache();
setTimeout(() => { setTimeout(() => {
// console.log("items > ", this.state.tableEntityListViewModel.cache.data); // console.log("items > ", this.state.tableEntityListViewModel.cache.data);
@ -322,7 +326,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
// console.log("items1 > ", this.state.tableEntityListViewModel.headers); // console.log("items1 > ", this.state.tableEntityListViewModel.headers);
// console.log("items1 > simple > ", this.tableEntityListViewModel1.items1); // console.log("items1 > simple > ", this.tableEntityListViewModel1.items1);
this.columns = []; this.columns = [];
this.state.tableEntityListViewModel.headers.map((header) => { tableEntityListViewModel.headers.map((header) => {
this.columns.push({ this.columns.push({
key: header, key: header,
name: header, name: header,
@ -337,11 +341,16 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
sortDescendingAriaLabel: "Sorted Z to A", sortDescendingAriaLabel: "Sorted Z to A",
}); });
}); });
const queryTableRowsClone = [...queryTableRows];
queryTableRowsClone[0].fieldOptions = getformattedOptions(tableEntityListViewModel.headers);
this.setState({ this.setState({
columns: this.columns, columns: this.columns,
operators: this.state.queryViewModel.queryBuilderViewModel().operators(), operators: this.state.queryViewModel.queryBuilderViewModel().operators(),
queryTableRows: queryTableRowsClone,
// isValue: // isValue:
}); });
setTimeout(() => { setTimeout(() => {
// console.log( // console.log(
// "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 248 ~ QueryTablesTabComponent ~ setTimeout ~ columns", // "🚀 ~ file: QueryTablesTabComponent.tsx ~ line 248 ~ QueryTablesTabComponent ~ setTimeout ~ columns",
@ -352,7 +361,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
this.setState({ this.setState({
items: this.allItems, items: this.allItems,
}); });
}, 5000); }, 7000);
} }
// public async test(): Promise<void> { // public async test(): Promise<void> {
@ -632,12 +641,15 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore //@ts-ignore
cloneQueryTableRows[index][selectedOptionType] = selectedOption.text; cloneQueryTableRows[index][selectedOptionType] = selectedOption.text;
const { text } = selectedOption; if (selectedOptionType !== "selectedOperation" && selectedOptionType !== "selectedOperator") {
if (text === "DateTime" || text === "Timestamp") { cloneQueryTableRows[index].selectedEntityType = "String";
cloneQueryTableRows[index].isTimeStampSelected = true; const { text } = selectedOption;
cloneQueryTableRows[index].selectedEntityType = "DateTime"; if (text === "DateTime" || text === "Timestamp") {
} else if (selectedOptionType !== "selectedTimestamp") { cloneQueryTableRows[index].isTimeStampSelected = true;
cloneQueryTableRows[index].isTimeStampSelected = false; cloneQueryTableRows[index].selectedEntityType = "DateTime";
} else if (selectedOptionType !== "selectedTimestamp") {
cloneQueryTableRows[index].isTimeStampSelected = false;
}
} }
this.setState({ queryTableRows: cloneQueryTableRows }); this.setState({ queryTableRows: cloneQueryTableRows });
}; };
@ -655,17 +667,17 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
cloneQueryTableRows.splice(cloneQueryTableRows.length, 0, { cloneQueryTableRows.splice(cloneQueryTableRows.length, 0, {
isQueryTableEntityChecked: false, isQueryTableEntityChecked: false,
selectedOperator: "=", selectedOperator: "=",
opertorOptions, operatorOptions: queryTableRows[0].operatorOptions,
id: cloneQueryTableRows.length + 1, id: cloneQueryTableRows.length + 1,
selectedField: "PartitionKey", selectedField: "PartitionKey",
fieldOptions, fieldOptions: queryTableRows[0].fieldOptions,
entityTypeOptions, entityTypeOptions: queryTableRows[0].entityTypeOptions,
selectedEntityType: "String", selectedEntityType: "String",
opertionOptions, operationOptions: queryTableRows[0].operationOptions,
selectedOperation: "And", selectedOperation: "And",
entityValue: "", entityValue: "",
isTimeStampSelected: false, isTimeStampSelected: false,
timestampOptions, timestampOptions: queryTableRows[0].timestampOptions,
selectedTimestamp: "Last hour", selectedTimestamp: "Last hour",
}); });
this.setState({ queryTableRows: cloneQueryTableRows }); this.setState({ queryTableRows: cloneQueryTableRows });
@ -682,6 +694,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
useCommandBar.getState().setContextButtons(this.getTabsButtons()); useCommandBar.getState().setContextButtons(this.getTabsButtons());
const { queryTableRows } = this.state; const { queryTableRows } = this.state;
return ( return (
<div className="tab-pane tableContainer" id={this.props.tabsBaseInstance.tabId} role="tabpanel"> <div className="tab-pane tableContainer" id={this.props.tabsBaseInstance.tabId} role="tabpanel">
<div className="query-builder"> <div className="query-builder">
@ -699,9 +712,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
<div className="query-editor-panel"> <div className="query-editor-panel">
<div> <div>
<textarea <textarea
className={`query-editor-text ${ className={`query-editor-text ${this.state.queryViewModel.hasQueryError() ? "query-editor-text-invalid" : ""
this.state.queryViewModel.hasQueryError() ? "query-editor-text-invalid" : "" } `}
} `}
value={this.state.queryText} value={this.state.queryText}
readOnly={true} readOnly={true}
name="query-editor" name="query-editor"
@ -754,14 +766,14 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
selectedOperator={queryTableRow.selectedOperator} selectedOperator={queryTableRow.selectedOperator}
selectedField={queryTableRow.selectedField} selectedField={queryTableRow.selectedField}
selectedOperation={queryTableRow.selectedOperation} selectedOperation={queryTableRow.selectedOperation}
opertationOptions={queryTableRow.opertionOptions} operationOptions={queryTableRow.operationOptions}
entityValue={queryTableRow.entityValue} entityValue={queryTableRow.entityValue}
selectedEntityType={queryTableRow.selectedEntityType} selectedEntityType={queryTableRow.selectedEntityType}
entityTypeOptions={queryTableRow.entityTypeOptions} entityTypeOptions={queryTableRow.entityTypeOptions}
fieldOptions={queryTableRow.fieldOptions} fieldOptions={queryTableRow.fieldOptions}
selectedTimestamp={queryTableRow.selectedTimestamp} selectedTimestamp={queryTableRow.selectedTimestamp}
timestampOptions={queryTableRow.timestampOptions} timestampOptions={queryTableRow.timestampOptions}
opertorOptions={queryTableRow.opertorOptions} operatorOptions={queryTableRow.operatorOptions}
isTimeStampSelected={queryTableRow.isTimeStampSelected} isTimeStampSelected={queryTableRow.isTimeStampSelected}
onAddNewClause={this.onAddNewClause} onAddNewClause={this.onAddNewClause}
onDeleteClause={() => this.onDeleteClause(index)} onDeleteClause={() => this.onDeleteClause(index)}
@ -790,7 +802,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
/> />
<span <span
style={{ marginLeft: "5px" }} style={{ marginLeft: "5px" }}
// data-bind="text: addNewClauseLine" // data-bind="text: addNewClauseLine"
> >
{this.state.queryViewModel.queryBuilderViewModel().addNewClauseLine} {this.state.queryViewModel.queryBuilderViewModel().addNewClauseLine}
</span> </span>