mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-04-16 06:38:20 +01:00
Added dynamic data of clause entity
This commit is contained in:
sunilyadav840
parent
8ec551f6e6
commit
f1ffa968a7
@ -8,7 +8,7 @@ import {
|
||||
IStackTokens,
|
||||
Stack,
|
||||
TextField,
|
||||
TooltipHost
|
||||
TooltipHost,
|
||||
} from "@fluentui/react";
|
||||
import React, { FunctionComponent } from "react";
|
||||
import AddIcon from "../../../../images/Add.svg";
|
||||
@ -21,8 +21,8 @@ export interface IQueryTableEntityClauseProps {
|
||||
entityValuePlaceHolder?: string;
|
||||
selectedOperator: string;
|
||||
selectedOperation: string;
|
||||
opertorOptions: IOption[];
|
||||
opertationOptions: IOption[];
|
||||
operatorOptions: IOption[];
|
||||
operationOptions: IOption[];
|
||||
isQueryTableEntityChecked: boolean;
|
||||
selectedField: string;
|
||||
fieldOptions: IOption[];
|
||||
@ -42,14 +42,14 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
|
||||
entityValue,
|
||||
entityValuePlaceHolder,
|
||||
selectedOperator,
|
||||
opertorOptions,
|
||||
operatorOptions,
|
||||
selectedField,
|
||||
isQueryTableEntityChecked,
|
||||
fieldOptions,
|
||||
entityTypeOptions,
|
||||
selectedEntityType,
|
||||
selectedOperation,
|
||||
opertationOptions,
|
||||
operationOptions,
|
||||
isTimeStampSelected,
|
||||
selectedTimestamp,
|
||||
timestampOptions,
|
||||
@ -92,7 +92,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
|
||||
onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
|
||||
onDropdownChange(selectedOption, "selectedOperation")
|
||||
}
|
||||
options={opertationOptions}
|
||||
options={operationOptions}
|
||||
id="operatorOptionId"
|
||||
styles={dropdownStyles}
|
||||
/>
|
||||
@ -120,7 +120,7 @@ export const QueryTableEntityClause: FunctionComponent<IQueryTableEntityClausePr
|
||||
onChange={(_event: React.FormEvent<HTMLElement>, selectedOption: IDropdownOption) =>
|
||||
onDropdownChange(selectedOption, "selectedOperator")
|
||||
}
|
||||
options={opertorOptions}
|
||||
options={operatorOptions}
|
||||
id="operatorOptionId"
|
||||
styles={dropdownStyles}
|
||||
/>
|
||||
|
||||
@ -70,50 +70,15 @@ export interface IQueryTableRowsType {
|
||||
selectedOperation: string;
|
||||
selectedTimestamp: string;
|
||||
fieldOptions: IOption[];
|
||||
opertorOptions: IOption[];
|
||||
operatorOptions: IOption[];
|
||||
entityTypeOptions: IOption[];
|
||||
opertionOptions: IOption[];
|
||||
operationOptions: IOption[];
|
||||
timestampOptions: IOption[];
|
||||
id: number;
|
||||
}
|
||||
|
||||
export const opertionOptions = [
|
||||
{ key: "And", text: "And" },
|
||||
{ key: "Or", text: "Or" },
|
||||
];
|
||||
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" },
|
||||
];
|
||||
export const getformattedOptions = (options: Array<string>): IOption[] => {
|
||||
return options.map((option) => {
|
||||
return { key: option, text: option };
|
||||
});
|
||||
};
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
IDropdownOption,
|
||||
IDropdownStyles,
|
||||
Selection,
|
||||
SelectionMode,
|
||||
SelectionMode
|
||||
} from "@fluentui/react";
|
||||
import * as ko from "knockout";
|
||||
import React, { Component } from "react";
|
||||
@ -39,21 +39,18 @@ import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataC
|
||||
// import NewQueryTablesTab from "./QueryTablesTab";
|
||||
import { QueryTableEntityClause } from "./QueryTableEntityClause";
|
||||
import {
|
||||
entityTypeOptions,
|
||||
fieldOptions,
|
||||
getformattedOptions,
|
||||
IDocument,
|
||||
IQueryTableRowsType,
|
||||
IQueryTablesTabComponentProps,
|
||||
IQueryTablesTabComponentStates,
|
||||
opertionOptions,
|
||||
opertorOptions,
|
||||
timestampOptions,
|
||||
IQueryTablesTabComponentStates
|
||||
} from "./QueryTableTabUtils";
|
||||
export interface Button {
|
||||
visible: boolean;
|
||||
enabled: boolean;
|
||||
isSelected?: boolean;
|
||||
}
|
||||
|
||||
// export interface IDocument {
|
||||
// partitionKey: string;
|
||||
// rowKey: string;
|
||||
@ -175,12 +172,17 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
// 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.state = {
|
||||
tableEntityListViewModel: new TableEntityListViewModel(this.tableCommands, props.queryTablesTab),
|
||||
const queryBuilderViewModel = new QueryViewModel(this.props.queryTablesTab).queryBuilderViewModel();
|
||||
|
||||
// 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),
|
||||
queryText: "PartitionKey eq 'partionKey1'",
|
||||
selectedQueryText: "",
|
||||
@ -230,21 +232,22 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
{
|
||||
isQueryTableEntityChecked: false,
|
||||
selectedOperator: "=",
|
||||
opertorOptions,
|
||||
selectedField: "PartitionKey",
|
||||
fieldOptions,
|
||||
id: 1,
|
||||
entityTypeOptions,
|
||||
selectedEntityType: "String",
|
||||
opertionOptions,
|
||||
selectedField: "PartitionKey",
|
||||
selectedOperation: "And",
|
||||
entityValue: "",
|
||||
selectedEntityType: "String",
|
||||
isTimeStampSelected: false,
|
||||
timestampOptions,
|
||||
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;
|
||||
console.log(
|
||||
"🚀 ~ file: QueryTablesTabComponent.tsx ~ line 24 ~ QueryTablesTabComponent ~ constructor ~ props",
|
||||
@ -314,7 +317,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
/****************** Constructor Ends */
|
||||
|
||||
componentDidMount(): void {
|
||||
this.state.tableEntityListViewModel.renderNextPageAndupdateCache();
|
||||
const { tableEntityListViewModel, queryTableRows } = this.state;
|
||||
tableEntityListViewModel.renderNextPageAndupdateCache();
|
||||
|
||||
setTimeout(() => {
|
||||
// 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 > simple > ", this.tableEntityListViewModel1.items1);
|
||||
this.columns = [];
|
||||
this.state.tableEntityListViewModel.headers.map((header) => {
|
||||
tableEntityListViewModel.headers.map((header) => {
|
||||
this.columns.push({
|
||||
key: header,
|
||||
name: header,
|
||||
@ -337,11 +341,16 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
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",
|
||||
@ -352,7 +361,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
this.setState({
|
||||
items: this.allItems,
|
||||
});
|
||||
}, 5000);
|
||||
}, 7000);
|
||||
}
|
||||
|
||||
// public async test(): Promise<void> {
|
||||
@ -632,12 +641,15 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
//@ts-ignore
|
||||
cloneQueryTableRows[index][selectedOptionType] = selectedOption.text;
|
||||
const { text } = selectedOption;
|
||||
if (text === "DateTime" || text === "Timestamp") {
|
||||
cloneQueryTableRows[index].isTimeStampSelected = true;
|
||||
cloneQueryTableRows[index].selectedEntityType = "DateTime";
|
||||
} else if (selectedOptionType !== "selectedTimestamp") {
|
||||
cloneQueryTableRows[index].isTimeStampSelected = false;
|
||||
if (selectedOptionType !== "selectedOperation" && selectedOptionType !== "selectedOperator") {
|
||||
cloneQueryTableRows[index].selectedEntityType = "String";
|
||||
const { text } = selectedOption;
|
||||
if (text === "DateTime" || text === "Timestamp") {
|
||||
cloneQueryTableRows[index].isTimeStampSelected = true;
|
||||
cloneQueryTableRows[index].selectedEntityType = "DateTime";
|
||||
} else if (selectedOptionType !== "selectedTimestamp") {
|
||||
cloneQueryTableRows[index].isTimeStampSelected = false;
|
||||
}
|
||||
}
|
||||
this.setState({ queryTableRows: cloneQueryTableRows });
|
||||
};
|
||||
@ -655,17 +667,17 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
cloneQueryTableRows.splice(cloneQueryTableRows.length, 0, {
|
||||
isQueryTableEntityChecked: false,
|
||||
selectedOperator: "=",
|
||||
opertorOptions,
|
||||
operatorOptions: queryTableRows[0].operatorOptions,
|
||||
id: cloneQueryTableRows.length + 1,
|
||||
selectedField: "PartitionKey",
|
||||
fieldOptions,
|
||||
entityTypeOptions,
|
||||
fieldOptions: queryTableRows[0].fieldOptions,
|
||||
entityTypeOptions: queryTableRows[0].entityTypeOptions,
|
||||
selectedEntityType: "String",
|
||||
opertionOptions,
|
||||
operationOptions: queryTableRows[0].operationOptions,
|
||||
selectedOperation: "And",
|
||||
entityValue: "",
|
||||
isTimeStampSelected: false,
|
||||
timestampOptions,
|
||||
timestampOptions: queryTableRows[0].timestampOptions,
|
||||
selectedTimestamp: "Last hour",
|
||||
});
|
||||
this.setState({ queryTableRows: cloneQueryTableRows });
|
||||
@ -682,6 +694,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
useCommandBar.getState().setContextButtons(this.getTabsButtons());
|
||||
const { queryTableRows } = this.state;
|
||||
|
||||
|
||||
return (
|
||||
<div className="tab-pane tableContainer" id={this.props.tabsBaseInstance.tabId} role="tabpanel">
|
||||
<div className="query-builder">
|
||||
@ -699,9 +712,8 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
<div className="query-editor-panel">
|
||||
<div>
|
||||
<textarea
|
||||
className={`query-editor-text ${
|
||||
this.state.queryViewModel.hasQueryError() ? "query-editor-text-invalid" : ""
|
||||
} `}
|
||||
className={`query-editor-text ${this.state.queryViewModel.hasQueryError() ? "query-editor-text-invalid" : ""
|
||||
} `}
|
||||
value={this.state.queryText}
|
||||
readOnly={true}
|
||||
name="query-editor"
|
||||
@ -754,14 +766,14 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
selectedOperator={queryTableRow.selectedOperator}
|
||||
selectedField={queryTableRow.selectedField}
|
||||
selectedOperation={queryTableRow.selectedOperation}
|
||||
opertationOptions={queryTableRow.opertionOptions}
|
||||
operationOptions={queryTableRow.operationOptions}
|
||||
entityValue={queryTableRow.entityValue}
|
||||
selectedEntityType={queryTableRow.selectedEntityType}
|
||||
entityTypeOptions={queryTableRow.entityTypeOptions}
|
||||
fieldOptions={queryTableRow.fieldOptions}
|
||||
selectedTimestamp={queryTableRow.selectedTimestamp}
|
||||
timestampOptions={queryTableRow.timestampOptions}
|
||||
opertorOptions={queryTableRow.opertorOptions}
|
||||
operatorOptions={queryTableRow.operatorOptions}
|
||||
isTimeStampSelected={queryTableRow.isTimeStampSelected}
|
||||
onAddNewClause={this.onAddNewClause}
|
||||
onDeleteClause={() => this.onDeleteClause(index)}
|
||||
@ -790,7 +802,7 @@ class QueryTablesTabComponent extends Component<IQueryTablesTabComponentProps, I
|
||||
/>
|
||||
<span
|
||||
style={{ marginLeft: "5px" }}
|
||||
// data-bind="text: addNewClauseLine"
|
||||
// data-bind="text: addNewClauseLine"
|
||||
>
|
||||
{this.state.queryViewModel.queryBuilderViewModel().addNewClauseLine}
|
||||
</span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user