random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-16 17:25:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hide TTL in settings tab for Mongo API (#677)

Browse Source 
* Hide ttl for mongo

* Fix typo

* Refine info message
This commit is contained in:
victor-meng 2021-04-15 16:51:59 -07:00 committed by GitHub
parent 3f8e394952
commit 2bccb7885f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
View File

@ -1,4 +1,13 @@
import { ChoiceGroup, IChoiceGroupOption, Label, MessageBar, Stack, Text, TextField } from "office-ui-fabric-react"; import {
ChoiceGroup,
IChoiceGroupOption,
Label,
Link,
MessageBar,
Stack,
Text,
TextField,
} from "office-ui-fabric-react";
import * as React from "react"; import * as React from "react";
import * as ViewModels from "../../../../Contracts/ViewModels"; import * as ViewModels from "../../../../Contracts/ViewModels";
import { userContext } from "../../../../UserContext"; import { userContext } from "../../../../UserContext";
@ -61,17 +70,15 @@ export interface SubSettingsComponentProps {
export class SubSettingsComponent extends React.Component<SubSettingsComponentProps> { export class SubSettingsComponent extends React.Component<SubSettingsComponentProps> {
private shouldCheckComponentIsDirty = true; private shouldCheckComponentIsDirty = true;
private ttlVisible: boolean;
private geospatialVisible: boolean; private geospatialVisible: boolean;
private partitionKeyValue: string; private partitionKeyValue: string;
private partitionKeyName: string; private partitionKeyName: string;
constructor(props: SubSettingsComponentProps) { constructor(props: SubSettingsComponentProps) {
super(props); super(props);
this.ttlVisible = (this.props.container && !this.props.container.isPreferredApiCassandra()) || false;
this.geospatialVisible = userContext.apiType === "SQL"; this.geospatialVisible = userContext.apiType === "SQL";
this.partitionKeyValue = "/" + this.props.collection.partitionKeyProperty; this.partitionKeyValue = "/" + this.props.collection.partitionKeyProperty;
this.partitionKeyName = this.props.container.isPreferredApiMongoDB() ? "Shard key" : "Partition key"; this.partitionKeyName = userContext.apiType === "Mongo" ? "Shard key" : "Partition key";
} }
componentDidMount(): void { componentDidMount(): void {
@ -171,39 +178,51 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
): void => ): void =>
this.props.onChangeFeedPolicyChange(ChangeFeedPolicyState[option.key as keyof typeof ChangeFeedPolicyState]); this.props.onChangeFeedPolicyChange(ChangeFeedPolicyState[option.key as keyof typeof ChangeFeedPolicyState]);
private getTtlComponent = (): JSX.Element => ( private getTtlComponent = (): JSX.Element =>
<Stack {...titleAndInputStackProps}> userContext.apiType === "Mongo" ? (
<ChoiceGroup <MessageBar
id="timeToLive" messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
label="Time to Live" styles={{ text: { fontSize: 14 } }}
selectedKey={this.props.timeToLive} >
options={this.ttlChoiceGroupOptions} To enable time-to-live (TTL) for your collection/documents,
onChange={this.onTtlChange} <Link href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live" target="_blank">
styles={getChoiceGroupStyles(this.props.timeToLive, this.props.timeToLiveBaseline)} create a TTL index
/> </Link>
{isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) && this.props.timeToLive === TtlType.On && ( .
<MessageBar </MessageBar>
messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }} ) : (
styles={messageBarStyles} <Stack {...titleAndInputStackProps}>
> <ChoiceGroup
{ttlWarning} id="timeToLive"
</MessageBar> label="Time to Live"
)} selectedKey={this.props.timeToLive}
{this.props.timeToLive === TtlType.On && ( options={this.ttlChoiceGroupOptions}
<TextField onChange={this.onTtlChange}
id="timeToLiveSeconds" styles={getChoiceGroupStyles(this.props.timeToLive, this.props.timeToLiveBaseline)}
styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
type="number"
required
min={1}
max={Int32.Max}
value={this.props.timeToLiveSeconds?.toString()}
onChange={this.onTimeToLiveSecondsChange}
suffix="second(s)"
/> />
)} {isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) && this.props.timeToLive === TtlType.On && (
</Stack> <MessageBar
); messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
styles={messageBarStyles}
>
{ttlWarning}
</MessageBar>
)}
{this.props.timeToLive === TtlType.On && (
<TextField
id="timeToLiveSeconds"
styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
type="number"
required
min={1}
max={Int32.Max}
value={this.props.timeToLiveSeconds?.toString()}
onChange={this.onTimeToLiveSecondsChange}
suffix="second(s)"
/>
)}
</Stack>
);
private analyticalTtlChoiceGroupOptions: IChoiceGroupOption[] = [ private analyticalTtlChoiceGroupOptions: IChoiceGroupOption[] = [
{ key: TtlType.Off, text: "Off", disabled: true }, { key: TtlType.Off, text: "Off", disabled: true },
@ -316,7 +335,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Stack {...subComponentStackProps}> <Stack {...subComponentStackProps}>
{this.ttlVisible && this.getTtlComponent()} {userContext.apiType !== "Cassandra" && this.getTtlComponent()}
{this.geospatialVisible && this.getGeoSpatialComponent()} {this.geospatialVisible && this.getGeoSpatialComponent()}