Improve SettingsPane (#1945)
* Use accordion in settingsPane * Fix format * Fix format for retry interval * Fix unit tests * Cosmetic changes * Move info tips into accordion section * Update snapshot
This commit is contained in:
Laurent Nguyen
GitHub
parent
4296b5ae02
commit
07c0ead523
|
|
@ -3,11 +3,12 @@ import * as React from "react";
|
||||||
|
|
||||||
export interface TooltipProps {
|
export interface TooltipProps {
|
||||||
children: string;
|
children: string;
|
||||||
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }: TooltipProps) => {
|
export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children, className }: TooltipProps) => {
|
||||||
return (
|
return (
|
||||||
<span>
|
<span className={className}>
|
||||||
<TooltipHost content={children}>
|
<TooltipHost content={children}>
|
||||||
<Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} />
|
<Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} />
|
||||||
</TooltipHost>
|
</TooltipHost>
|
||||||
|
|
|
||||||
|
|
@ -5,15 +5,13 @@ import {
|
||||||
IChoiceGroupOption,
|
IChoiceGroupOption,
|
||||||
ISpinButtonStyles,
|
ISpinButtonStyles,
|
||||||
IToggleStyles,
|
IToggleStyles,
|
||||||
Icon,
|
|
||||||
MessageBar,
|
MessageBar,
|
||||||
MessageBarType,
|
MessageBarType,
|
||||||
Position,
|
Position,
|
||||||
SpinButton,
|
SpinButton,
|
||||||
Toggle,
|
Toggle,
|
||||||
TooltipHost,
|
|
||||||
} from "@fluentui/react";
|
} from "@fluentui/react";
|
||||||
import { makeStyles } from "@fluentui/react-components";
|
import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, makeStyles } from "@fluentui/react-components";
|
||||||
import { AuthType } from "AuthType";
|
import { AuthType } from "AuthType";
|
||||||
import * as Constants from "Common/Constants";
|
import * as Constants from "Common/Constants";
|
||||||
import { SplitterDirection } from "Common/Splitter";
|
import { SplitterDirection } from "Common/Splitter";
|
||||||
|
|
@ -59,6 +57,32 @@ const useStyles = makeStyles({
|
||||||
listStyleType: "disc",
|
listStyleType: "disc",
|
||||||
paddingLeft: "20px",
|
paddingLeft: "20px",
|
||||||
},
|
},
|
||||||
|
container: {
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
height: "100%",
|
||||||
|
},
|
||||||
|
firstItem: {
|
||||||
|
flex: "1",
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
marginRight: "5px",
|
||||||
|
},
|
||||||
|
headerIcon: {
|
||||||
|
paddingTop: "4px",
|
||||||
|
cursor: "pointer",
|
||||||
|
},
|
||||||
|
settingsSectionContainer: {
|
||||||
|
paddingLeft: "15px",
|
||||||
|
},
|
||||||
|
settingsSectionDescription: {
|
||||||
|
paddingBottom: "10px",
|
||||||
|
fontSize: "12px",
|
||||||
|
},
|
||||||
|
subHeader: {
|
||||||
|
marginRight: "5px",
|
||||||
|
fontSize: "12px",
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const useDataPlaneRbac: DataPlaneRbacStore = create(() => ({
|
export const useDataPlaneRbac: DataPlaneRbacStore = create(() => ({
|
||||||
|
|
@ -444,82 +468,66 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RightPaneForm {...genericPaneProps}>
|
<RightPaneForm {...genericPaneProps}>
|
||||||
<div className="paneMainContent">
|
<div className={`paneMainContent ${styles.container}`}>
|
||||||
{shouldShowQueryPageOptions && (
|
<Accordion className={styles.firstItem}>
|
||||||
<div className="settingsSection">
|
{shouldShowQueryPageOptions && (
|
||||||
<div className="settingsSectionPart">
|
<AccordionItem value="1">
|
||||||
<fieldset>
|
<AccordionHeader>
|
||||||
<legend id="pageOptions" className="settingsSectionLabel legendLabel">
|
<div className={styles.header}>Page Options</div>
|
||||||
Page Options
|
</AccordionHeader>
|
||||||
</legend>
|
<AccordionPanel>
|
||||||
<InfoTooltip>
|
<div className={styles.settingsSectionContainer}>
|
||||||
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many
|
<div className={styles.settingsSectionDescription}>
|
||||||
query results per page.
|
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as
|
||||||
</InfoTooltip>
|
many query results per page.
|
||||||
<ChoiceGroup
|
|
||||||
ariaLabelledBy="pageOptions"
|
|
||||||
selectedKey={pageOption}
|
|
||||||
options={pageOptionList}
|
|
||||||
styles={choiceButtonStyles}
|
|
||||||
onChange={handleOnPageOptionChange}
|
|
||||||
/>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
<div className="tabs settingsSectionPart">
|
|
||||||
{isCustomPageOptionSelected() && (
|
|
||||||
<div className="tabcontent">
|
|
||||||
<div className="settingsSectionLabel">
|
|
||||||
Query results per page
|
|
||||||
<InfoTooltip>Enter the number of query results that should be shown per page.</InfoTooltip>
|
|
||||||
</div>
|
</div>
|
||||||
|
<ChoiceGroup
|
||||||
<SpinButton
|
ariaLabelledBy="pageOptions"
|
||||||
ariaLabel="Custom query items per page"
|
selectedKey={pageOption}
|
||||||
value={"" + customItemPerPage}
|
options={pageOptionList}
|
||||||
onIncrement={(newValue) => {
|
styles={choiceButtonStyles}
|
||||||
setCustomItemPerPage(parseInt(newValue) + 1 || customItemPerPage);
|
onChange={handleOnPageOptionChange}
|
||||||
}}
|
|
||||||
onDecrement={(newValue) => setCustomItemPerPage(parseInt(newValue) - 1 || customItemPerPage)}
|
|
||||||
onValidate={(newValue) => setCustomItemPerPage(parseInt(newValue) || customItemPerPage)}
|
|
||||||
min={1}
|
|
||||||
step={1}
|
|
||||||
className="textfontclr"
|
|
||||||
incrementButtonAriaLabel="Increase value by 1"
|
|
||||||
decrementButtonAriaLabel="Decrease value by 1"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<div className={`tabs ${styles.settingsSectionContainer}`}>
|
||||||
</div>
|
{isCustomPageOptionSelected() && (
|
||||||
</div>
|
<div className="tabcontent">
|
||||||
)}
|
<div className={styles.settingsSectionDescription}>
|
||||||
{userContext.apiType === "SQL" &&
|
Query results per page{" "}
|
||||||
userContext.authType === AuthType.AAD &&
|
<InfoTooltip className={styles.headerIcon}>
|
||||||
configContext.platform !== Platform.Fabric && (
|
Enter the number of query results that should be shown per page.
|
||||||
<>
|
</InfoTooltip>
|
||||||
<div className="settingsSection">
|
</div>
|
||||||
<div className="settingsSectionPart">
|
|
||||||
<fieldset>
|
<SpinButton
|
||||||
<legend id="enableDataPlaneRBACOptions" className="settingsSectionLabel legendLabel">
|
ariaLabel="Custom query items per page"
|
||||||
Enable Entra ID RBAC
|
value={"" + customItemPerPage}
|
||||||
</legend>
|
onIncrement={(newValue) => {
|
||||||
<TooltipHost
|
setCustomItemPerPage(parseInt(newValue) + 1 || customItemPerPage);
|
||||||
content={
|
}}
|
||||||
<>
|
onDecrement={(newValue) => setCustomItemPerPage(parseInt(newValue) - 1 || customItemPerPage)}
|
||||||
Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable
|
onValidate={(newValue) => setCustomItemPerPage(parseInt(newValue) || customItemPerPage)}
|
||||||
Entra ID RBAC.
|
min={1}
|
||||||
<a
|
step={1}
|
||||||
href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
|
className="textfontclr"
|
||||||
target="_blank"
|
incrementButtonAriaLabel="Increase value by 1"
|
||||||
rel="noopener noreferrer"
|
decrementButtonAriaLabel="Decrease value by 1"
|
||||||
>
|
/>
|
||||||
{" "}
|
</div>
|
||||||
Learn more{" "}
|
)}
|
||||||
</a>
|
</div>
|
||||||
</>
|
</AccordionPanel>
|
||||||
}
|
</AccordionItem>
|
||||||
>
|
)}
|
||||||
<Icon iconName="Info" ariaLabel="Info tooltip" className="panelInfoIcon" tabIndex={0} />
|
{userContext.apiType === "SQL" &&
|
||||||
</TooltipHost>
|
userContext.authType === AuthType.AAD &&
|
||||||
|
configContext.platform !== Platform.Fabric && (
|
||||||
|
<AccordionItem value="2">
|
||||||
|
<AccordionHeader>
|
||||||
|
<div className={styles.header}>Enable Entra ID RBAC</div>
|
||||||
|
</AccordionHeader>
|
||||||
|
<AccordionPanel>
|
||||||
|
<div className={styles.settingsSectionContainer}>
|
||||||
{showDataPlaneRBACWarning && configContext.platform === Platform.Portal && (
|
{showDataPlaneRBACWarning && configContext.platform === Platform.Portal && (
|
||||||
<MessageBar
|
<MessageBar
|
||||||
messageBarType={MessageBarType.warning}
|
messageBarType={MessageBarType.warning}
|
||||||
|
|
@ -531,6 +539,18 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
|
||||||
operations
|
operations
|
||||||
</MessageBar>
|
</MessageBar>
|
||||||
)}
|
)}
|
||||||
|
<div className={styles.settingsSectionDescription}>
|
||||||
|
Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
|
||||||
|
ID RBAC.
|
||||||
|
<a
|
||||||
|
href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
Learn more{" "}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<ChoiceGroup
|
<ChoiceGroup
|
||||||
ariaLabelledBy="enableDataPlaneRBACOptions"
|
ariaLabelledBy="enableDataPlaneRBACOptions"
|
||||||
options={dataPlaneRBACOptionsList}
|
options={dataPlaneRBACOptionsList}
|
||||||
|
|
@ -538,316 +558,339 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
|
||||||
selectedKey={enableDataPlaneRBACOption}
|
selectedKey={enableDataPlaneRBACOption}
|
||||||
onChange={handleOnDataPlaneRBACOptionChange}
|
onChange={handleOnDataPlaneRBACOptionChange}
|
||||||
/>
|
/>
|
||||||
</fieldset>
|
</div>
|
||||||
</div>
|
</AccordionPanel>
|
||||||
</div>
|
</AccordionItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{userContext.apiType === "SQL" && (
|
||||||
|
<>
|
||||||
|
<AccordionItem value="3">
|
||||||
|
<AccordionHeader>
|
||||||
|
<div className={styles.header}>Query Timeout</div>
|
||||||
|
</AccordionHeader>
|
||||||
|
<AccordionPanel>
|
||||||
|
<div className={styles.settingsSectionContainer}>
|
||||||
|
<div className={styles.settingsSectionDescription}>
|
||||||
|
When a query reaches a specified time limit, a popup with an option to cancel the query will show
|
||||||
|
unless automatic cancellation has been enabled.
|
||||||
|
</div>
|
||||||
|
<Toggle
|
||||||
|
styles={toggleStyles}
|
||||||
|
label="Enable query timeout"
|
||||||
|
onChange={handleOnQueryTimeoutToggleChange}
|
||||||
|
defaultChecked={queryTimeoutEnabled}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{queryTimeoutEnabled && (
|
||||||
|
<div className={styles.settingsSectionContainer}>
|
||||||
|
<SpinButton
|
||||||
|
label="Query timeout (ms)"
|
||||||
|
labelPosition={Position.top}
|
||||||
|
defaultValue={(queryTimeout || 5000).toString()}
|
||||||
|
min={100}
|
||||||
|
step={1000}
|
||||||
|
onChange={handleOnQueryTimeoutSpinButtonChange}
|
||||||
|
incrementButtonAriaLabel="Increase value by 1000"
|
||||||
|
decrementButtonAriaLabel="Decrease value by 1000"
|
||||||
|
styles={spinButtonStyles}
|
||||||
|
/>
|
||||||
|
<Toggle
|
||||||
|
label="Automatically cancel query after timeout"
|
||||||
|
styles={toggleStyles}
|
||||||
|
onChange={handleOnAutomaticallyCancelQueryToggleChange}
|
||||||
|
defaultChecked={automaticallyCancelQueryAfterTimeout}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</AccordionPanel>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="4">
|
||||||
|
<AccordionHeader>
|
||||||
|
<div className={styles.header}>RU Threshold</div>
|
||||||
|
</AccordionHeader>
|
||||||
|
<AccordionPanel>
|
||||||
|
<div className={styles.settingsSectionContainer}>
|
||||||
|
<div className={styles.settingsSectionDescription}>
|
||||||
|
If a query exceeds a configured RU threshold, the query will be aborted.
|
||||||
|
</div>
|
||||||
|
<Toggle
|
||||||
|
styles={toggleStyles}
|
||||||
|
label="Enable RU threshold"
|
||||||
|
onChange={handleOnRUThresholdToggleChange}
|
||||||
|
defaultChecked={ruThresholdEnabled}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{ruThresholdEnabled && (
|
||||||
|
<div className={styles.settingsSectionContainer}>
|
||||||
|
<SpinButton
|
||||||
|
label="RU Threshold (RU)"
|
||||||
|
labelPosition={Position.top}
|
||||||
|
defaultValue={(ruThreshold || DefaultRUThreshold).toString()}
|
||||||
|
min={1}
|
||||||
|
step={1000}
|
||||||
|
onChange={handleOnRUThresholdSpinButtonChange}
|
||||||
|
incrementButtonAriaLabel="Increase value by 1000"
|
||||||
|
decrementButtonAriaLabel="Decrease value by 1000"
|
||||||
|
styles={spinButtonStyles}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</AccordionPanel>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="5">
|
||||||
|
<AccordionHeader>
|
||||||
|
<div className={styles.header}>Default Query Results View</div>
|
||||||
|
</AccordionHeader>
|
||||||
|
<AccordionPanel>
|
||||||
|
<div className={styles.settingsSectionContainer}>
|
||||||
|
<div className={styles.settingsSectionDescription}>
|
||||||
|
Select the default view to use when displaying query results.
|
||||||
|
</div>
|
||||||
|
<ChoiceGroup
|
||||||
|
ariaLabelledBy="defaultQueryResultsView"
|
||||||
|
selectedKey={defaultQueryResultsView}
|
||||||
|
options={defaultQueryResultsViewOptionList}
|
||||||
|
styles={choiceButtonStyles}
|
||||||
|
onChange={handleOnDefaultQueryResultsViewChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionPanel>
|
||||||
|
</AccordionItem>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{userContext.apiType === "SQL" && (
|
|
||||||
<>
|
<AccordionItem value="6">
|
||||||
<div className="settingsSection">
|
<AccordionHeader>
|
||||||
<div className="settingsSectionPart">
|
<div className={styles.header}>Retry Settings</div>
|
||||||
<div>
|
</AccordionHeader>
|
||||||
<legend id="ruThresholdLabel" className="settingsSectionLabel legendLabel">
|
<AccordionPanel>
|
||||||
RU Threshold
|
<div className={styles.settingsSectionContainer}>
|
||||||
</legend>
|
<div className={styles.settingsSectionDescription}>
|
||||||
<InfoTooltip>If a query exceeds a configured RU threshold, the query will be aborted.</InfoTooltip>
|
Retry policy associated with throttled requests during CosmosDB queries.
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Toggle
|
<span className={styles.subHeader}>Max retry attempts</span>
|
||||||
styles={toggleStyles}
|
<InfoTooltip className={styles.headerIcon}>
|
||||||
label="Enable RU threshold"
|
Max number of retries to be performed for a request. Default value 9.
|
||||||
onChange={handleOnRUThresholdToggleChange}
|
|
||||||
defaultChecked={ruThresholdEnabled}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{ruThresholdEnabled && (
|
|
||||||
<div>
|
|
||||||
<SpinButton
|
|
||||||
label="RU Threshold (RU)"
|
|
||||||
labelPosition={Position.top}
|
|
||||||
defaultValue={(ruThreshold || DefaultRUThreshold).toString()}
|
|
||||||
min={1}
|
|
||||||
step={1000}
|
|
||||||
onChange={handleOnRUThresholdSpinButtonChange}
|
|
||||||
incrementButtonAriaLabel="Increase value by 1000"
|
|
||||||
decrementButtonAriaLabel="Decrease value by 1000"
|
|
||||||
styles={spinButtonStyles}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="settingsSection">
|
|
||||||
<div className="settingsSectionPart">
|
|
||||||
<div>
|
|
||||||
<legend id="queryTimeoutLabel" className="settingsSectionLabel legendLabel">
|
|
||||||
Query Timeout
|
|
||||||
</legend>
|
|
||||||
<InfoTooltip>
|
|
||||||
When a query reaches a specified time limit, a popup with an option to cancel the query will show
|
|
||||||
unless automatic cancellation has been enabled
|
|
||||||
</InfoTooltip>
|
</InfoTooltip>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<SpinButton
|
||||||
<Toggle
|
labelPosition={Position.top}
|
||||||
styles={toggleStyles}
|
min={1}
|
||||||
label="Enable query timeout"
|
step={1}
|
||||||
onChange={handleOnQueryTimeoutToggleChange}
|
value={"" + retryAttempts}
|
||||||
defaultChecked={queryTimeoutEnabled}
|
onChange={handleOnQueryRetryAttemptsSpinButtonChange}
|
||||||
/>
|
incrementButtonAriaLabel="Increase value by 1"
|
||||||
</div>
|
decrementButtonAriaLabel="Decrease value by 1"
|
||||||
{queryTimeoutEnabled && (
|
onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
|
||||||
<div>
|
onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
|
||||||
<SpinButton
|
onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
|
||||||
label="Query timeout (ms)"
|
styles={spinButtonStyles}
|
||||||
labelPosition={Position.top}
|
/>
|
||||||
defaultValue={(queryTimeout || 5000).toString()}
|
<div>
|
||||||
min={100}
|
<span className={styles.subHeader}>Fixed retry interval (ms)</span>
|
||||||
step={1000}
|
<InfoTooltip className={styles.headerIcon}>
|
||||||
onChange={handleOnQueryTimeoutSpinButtonChange}
|
Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as
|
||||||
incrementButtonAriaLabel="Increase value by 1000"
|
part of the response. Default value is 0 milliseconds.
|
||||||
decrementButtonAriaLabel="Decrease value by 1000"
|
</InfoTooltip>
|
||||||
styles={spinButtonStyles}
|
</div>
|
||||||
/>
|
<SpinButton
|
||||||
<Toggle
|
labelPosition={Position.top}
|
||||||
label="Automatically cancel query after timeout"
|
min={1000}
|
||||||
styles={toggleStyles}
|
step={1000}
|
||||||
onChange={handleOnAutomaticallyCancelQueryToggleChange}
|
value={"" + retryInterval}
|
||||||
defaultChecked={automaticallyCancelQueryAfterTimeout}
|
onChange={handleOnRetryIntervalSpinButtonChange}
|
||||||
/>
|
incrementButtonAriaLabel="Increase value by 1000"
|
||||||
</div>
|
decrementButtonAriaLabel="Decrease value by 1000"
|
||||||
)}
|
onIncrement={(newValue) => setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
|
||||||
</div>
|
onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
|
||||||
</div>
|
onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
|
||||||
<div className="settingsSection">
|
styles={spinButtonStyles}
|
||||||
<div className="settingsSectionPart">
|
/>
|
||||||
<div>
|
<div>
|
||||||
<legend id="defaultQueryResultsView" className="settingsSectionLabel legendLabel">
|
<span className={styles.subHeader}>Max wait time (s)</span>
|
||||||
Default Query Results View
|
<InfoTooltip className={styles.headerIcon}>
|
||||||
</legend>
|
Max wait time in seconds to wait for a request while the retries are happening. Default value 30
|
||||||
<InfoTooltip>Select the default view to use when displaying query results.</InfoTooltip>
|
seconds.
|
||||||
</div>
|
</InfoTooltip>
|
||||||
<div>
|
</div>
|
||||||
<ChoiceGroup
|
<SpinButton
|
||||||
ariaLabelledBy="defaultQueryResultsView"
|
labelPosition={Position.top}
|
||||||
selectedKey={defaultQueryResultsView}
|
min={1}
|
||||||
options={defaultQueryResultsViewOptionList}
|
step={1}
|
||||||
styles={choiceButtonStyles}
|
value={"" + MaxWaitTimeInSeconds}
|
||||||
onChange={handleOnDefaultQueryResultsViewChange}
|
onChange={handleOnMaxWaitTimeSpinButtonChange}
|
||||||
/>
|
incrementButtonAriaLabel="Increase value by 1"
|
||||||
</div>
|
decrementButtonAriaLabel="Decrease value by 1"
|
||||||
</div>
|
onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
|
||||||
</div>
|
onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
|
||||||
</>
|
onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
|
||||||
)}
|
styles={spinButtonStyles}
|
||||||
<div className="settingsSection">
|
|
||||||
<div className="settingsSectionPart">
|
|
||||||
<div className="settingsSectionLabel">
|
|
||||||
Retry Settings
|
|
||||||
<InfoTooltip>Retry policy associated with throttled requests during CosmosDB queries.</InfoTooltip>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel">
|
|
||||||
Max retry attempts
|
|
||||||
</legend>
|
|
||||||
<InfoTooltip>Max number of retries to be performed for a request. Default value 9.</InfoTooltip>
|
|
||||||
</div>
|
|
||||||
<SpinButton
|
|
||||||
labelPosition={Position.top}
|
|
||||||
min={1}
|
|
||||||
step={1}
|
|
||||||
value={"" + retryAttempts}
|
|
||||||
onChange={handleOnQueryRetryAttemptsSpinButtonChange}
|
|
||||||
incrementButtonAriaLabel="Increase value by 1"
|
|
||||||
decrementButtonAriaLabel="Decrease value by 1"
|
|
||||||
onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
|
|
||||||
onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
|
|
||||||
onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
|
|
||||||
styles={spinButtonStyles}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel">
|
|
||||||
Fixed retry interval (ms)
|
|
||||||
</legend>
|
|
||||||
<InfoTooltip>
|
|
||||||
Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part
|
|
||||||
of the response. Default value is 0 milliseconds.
|
|
||||||
</InfoTooltip>
|
|
||||||
</div>
|
|
||||||
<SpinButton
|
|
||||||
labelPosition={Position.top}
|
|
||||||
min={1000}
|
|
||||||
step={1000}
|
|
||||||
value={"" + retryInterval}
|
|
||||||
onChange={handleOnRetryIntervalSpinButtonChange}
|
|
||||||
incrementButtonAriaLabel="Increase value by 1000"
|
|
||||||
decrementButtonAriaLabel="Decrease value by 1000"
|
|
||||||
onIncrement={(newValue) => setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
|
|
||||||
onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
|
|
||||||
onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
|
|
||||||
styles={spinButtonStyles}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel">
|
|
||||||
Max wait time (s)
|
|
||||||
</legend>
|
|
||||||
<InfoTooltip>
|
|
||||||
Max wait time in seconds to wait for a request while the retries are happening. Default value 30
|
|
||||||
seconds.
|
|
||||||
</InfoTooltip>
|
|
||||||
</div>
|
|
||||||
<SpinButton
|
|
||||||
labelPosition={Position.top}
|
|
||||||
min={1}
|
|
||||||
step={1}
|
|
||||||
value={"" + MaxWaitTimeInSeconds}
|
|
||||||
onChange={handleOnMaxWaitTimeSpinButtonChange}
|
|
||||||
incrementButtonAriaLabel="Increase value by 1"
|
|
||||||
decrementButtonAriaLabel="Decrease value by 1"
|
|
||||||
onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
|
|
||||||
onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
|
|
||||||
onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
|
|
||||||
styles={spinButtonStyles}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="settingsSection">
|
|
||||||
<div className="settingsSectionPart settingsSectionInlineCheckbox">
|
|
||||||
<div className="settingsSectionLabel">
|
|
||||||
Enable container pagination
|
|
||||||
<InfoTooltip>
|
|
||||||
Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
|
|
||||||
</InfoTooltip>
|
|
||||||
</div>
|
|
||||||
<Checkbox
|
|
||||||
styles={{
|
|
||||||
label: { padding: 0 },
|
|
||||||
}}
|
|
||||||
className="padding"
|
|
||||||
ariaLabel="Enable container pagination"
|
|
||||||
checked={containerPaginationEnabled}
|
|
||||||
onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{shouldShowCrossPartitionOption && (
|
|
||||||
<div className="settingsSection">
|
|
||||||
<div className="settingsSectionPart settingsSectionInlineCheckbox">
|
|
||||||
<div className="settingsSectionLabel">
|
|
||||||
Enable cross-partition query
|
|
||||||
<InfoTooltip>
|
|
||||||
Send more than one request while executing a query. More than one request is necessary if the query is
|
|
||||||
not scoped to single partition key value.
|
|
||||||
</InfoTooltip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Checkbox
|
|
||||||
styles={{
|
|
||||||
label: { padding: 0 },
|
|
||||||
}}
|
|
||||||
className="padding"
|
|
||||||
ariaLabel="Enable cross partition query"
|
|
||||||
checked={crossPartitionQueryEnabled}
|
|
||||||
onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{shouldShowParallelismOption && (
|
|
||||||
<div className="settingsSection">
|
|
||||||
<div className="settingsSectionPart">
|
|
||||||
<div className="settingsSectionLabel">
|
|
||||||
Max degree of parallelism
|
|
||||||
<InfoTooltip>
|
|
||||||
Gets or sets the number of concurrent operations run client side during parallel query execution. A
|
|
||||||
positive property value limits the number of concurrent operations to the set value. If it is set to
|
|
||||||
less than 0, the system automatically decides the number of concurrent operations to run.
|
|
||||||
</InfoTooltip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<SpinButton
|
|
||||||
min={-1}
|
|
||||||
step={1}
|
|
||||||
className="textfontclr"
|
|
||||||
role="textbox"
|
|
||||||
id="max-degree"
|
|
||||||
value={"" + maxDegreeOfParallelism}
|
|
||||||
onIncrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)}
|
|
||||||
onDecrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) - 1 || maxDegreeOfParallelism)}
|
|
||||||
onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)}
|
|
||||||
ariaLabel="Max degree of parallelism"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{shouldShowPriorityLevelOption && (
|
|
||||||
<div className="settingsSection">
|
|
||||||
<div className="settingsSectionPart">
|
|
||||||
<fieldset>
|
|
||||||
<legend id="priorityLevel" className="settingsSectionLabel legendLabel">
|
|
||||||
Priority Level
|
|
||||||
</legend>
|
|
||||||
<InfoTooltip>
|
|
||||||
Sets the priority level for data-plane requests from Data Explorer when using Priority-Based
|
|
||||||
Execution. If "None" is selected, Data Explorer will not specify priority level, and the
|
|
||||||
server-side default priority level will be used.
|
|
||||||
</InfoTooltip>
|
|
||||||
<ChoiceGroup
|
|
||||||
ariaLabelledBy="priorityLevel"
|
|
||||||
selectedKey={priorityLevel}
|
|
||||||
options={priorityLevelOptionList}
|
|
||||||
styles={choiceButtonStyles}
|
|
||||||
onChange={handleOnPriorityLevelOptionChange}
|
|
||||||
/>
|
/>
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{shouldShowGraphAutoVizOption && (
|
|
||||||
<div className="settingsSection">
|
|
||||||
<div className="settingsSectionPart">
|
|
||||||
<div className="settingsSectionLabel">
|
|
||||||
Display Gremlin query results as:
|
|
||||||
<InfoTooltip>
|
|
||||||
Select Graph to automatically visualize the query results as a Graph or JSON to display the results as
|
|
||||||
JSON.
|
|
||||||
</InfoTooltip>
|
|
||||||
</div>
|
</div>
|
||||||
|
</AccordionPanel>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
<ChoiceGroup
|
<AccordionItem value="7">
|
||||||
selectedKey={graphAutoVizDisabled}
|
<AccordionHeader>
|
||||||
options={graphAutoOptionList}
|
<div className={styles.header}>Enable container pagination</div>
|
||||||
onChange={handleOnGremlinChange}
|
</AccordionHeader>
|
||||||
aria-label="Graph Auto-visualization"
|
<AccordionPanel>
|
||||||
/>
|
<div className={styles.settingsSectionContainer}>
|
||||||
</div>
|
<div className={styles.settingsSectionDescription}>
|
||||||
</div>
|
Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
|
||||||
)}
|
</div>
|
||||||
{shouldShowCopilotSampleDBOption && (
|
<Checkbox
|
||||||
<div className="settingsSection">
|
styles={{
|
||||||
<div className="settingsSectionPart settingsSectionInlineCheckbox">
|
label: { padding: 0 },
|
||||||
<div className="settingsSectionLabel">
|
}}
|
||||||
Enable sample database
|
className="padding"
|
||||||
<InfoTooltip>
|
ariaLabel="Enable container pagination"
|
||||||
This is a sample database and collection with synthetic product data you can use to explore using
|
checked={containerPaginationEnabled}
|
||||||
NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and is
|
onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
|
||||||
created by, and maintained by Microsoft at no cost to you.
|
label="Enable container pagination"
|
||||||
</InfoTooltip>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</AccordionPanel>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
{shouldShowCrossPartitionOption && (
|
||||||
|
<AccordionItem value="8">
|
||||||
|
<AccordionHeader>
|
||||||
|
<div className={styles.header}>Enable cross-partition query</div>
|
||||||
|
</AccordionHeader>
|
||||||
|
<AccordionPanel>
|
||||||
|
<div className={styles.settingsSectionContainer}>
|
||||||
|
<div className={styles.settingsSectionDescription}>
|
||||||
|
Send more than one request while executing a query. More than one request is necessary if the query
|
||||||
|
is not scoped to single partition key value.
|
||||||
|
</div>
|
||||||
|
<Checkbox
|
||||||
|
styles={{
|
||||||
|
label: { padding: 0 },
|
||||||
|
}}
|
||||||
|
className="padding"
|
||||||
|
ariaLabel="Enable cross partition query"
|
||||||
|
checked={crossPartitionQueryEnabled}
|
||||||
|
onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
|
||||||
|
label="Enable cross-partition query"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionPanel>
|
||||||
|
</AccordionItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{shouldShowParallelismOption && (
|
||||||
|
<AccordionItem value="9">
|
||||||
|
<AccordionHeader>
|
||||||
|
<div className={styles.header}>Max degree of parallelism</div>
|
||||||
|
</AccordionHeader>
|
||||||
|
<AccordionPanel>
|
||||||
|
<div className={styles.settingsSectionContainer}>
|
||||||
|
<div className={styles.settingsSectionDescription}>
|
||||||
|
Gets or sets the number of concurrent operations run client side during parallel query execution. A
|
||||||
|
positive property value limits the number of concurrent operations to the set value. If it is set to
|
||||||
|
less than 0, the system automatically decides the number of concurrent operations to run.
|
||||||
|
</div>
|
||||||
|
<SpinButton
|
||||||
|
min={-1}
|
||||||
|
step={1}
|
||||||
|
className="textfontclr"
|
||||||
|
role="textbox"
|
||||||
|
id="max-degree"
|
||||||
|
value={"" + maxDegreeOfParallelism}
|
||||||
|
onIncrement={(newValue) =>
|
||||||
|
setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)
|
||||||
|
}
|
||||||
|
onDecrement={(newValue) =>
|
||||||
|
setMaxDegreeOfParallelism(parseInt(newValue) - 1 || maxDegreeOfParallelism)
|
||||||
|
}
|
||||||
|
onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)}
|
||||||
|
ariaLabel="Max degree of parallelism"
|
||||||
|
label="Max degree of parallelism"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionPanel>
|
||||||
|
</AccordionItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{shouldShowPriorityLevelOption && (
|
||||||
|
<AccordionItem value="10">
|
||||||
|
<AccordionHeader>
|
||||||
|
<div className={styles.header}>Priority Level</div>
|
||||||
|
</AccordionHeader>
|
||||||
|
<AccordionPanel>
|
||||||
|
<div className={styles.settingsSectionContainer}>
|
||||||
|
<div className={styles.settingsSectionDescription}>
|
||||||
|
Sets the priority level for data-plane requests from Data Explorer when using Priority-Based
|
||||||
|
Execution. If "None" is selected, Data Explorer will not specify priority level, and the
|
||||||
|
server-side default priority level will be used.
|
||||||
|
</div>
|
||||||
|
<ChoiceGroup
|
||||||
|
ariaLabelledBy="priorityLevel"
|
||||||
|
selectedKey={priorityLevel}
|
||||||
|
options={priorityLevelOptionList}
|
||||||
|
styles={choiceButtonStyles}
|
||||||
|
onChange={handleOnPriorityLevelOptionChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionPanel>
|
||||||
|
</AccordionItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{shouldShowGraphAutoVizOption && (
|
||||||
|
<AccordionItem value="11">
|
||||||
|
<AccordionHeader>
|
||||||
|
<div className={styles.header}>Display Gremlin query results as: </div>
|
||||||
|
</AccordionHeader>
|
||||||
|
<AccordionPanel>
|
||||||
|
<div className={styles.settingsSectionContainer}>
|
||||||
|
<div className={styles.settingsSectionDescription}>
|
||||||
|
Select Graph to automatically visualize the query results as a Graph or JSON to display the results
|
||||||
|
as JSON.
|
||||||
|
</div>
|
||||||
|
<ChoiceGroup
|
||||||
|
selectedKey={graphAutoVizDisabled}
|
||||||
|
options={graphAutoOptionList}
|
||||||
|
onChange={handleOnGremlinChange}
|
||||||
|
aria-label="Graph Auto-visualization"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionPanel>
|
||||||
|
</AccordionItem>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{shouldShowCopilotSampleDBOption && (
|
||||||
|
<AccordionItem value="12">
|
||||||
|
<AccordionHeader>
|
||||||
|
<div className={styles.header}>Enable sample database</div>
|
||||||
|
</AccordionHeader>
|
||||||
|
<AccordionPanel>
|
||||||
|
<div className={styles.settingsSectionContainer}>
|
||||||
|
<div className={styles.settingsSectionDescription}>
|
||||||
|
This is a sample database and collection with synthetic product data you can use to explore using
|
||||||
|
NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and
|
||||||
|
is created by, and maintained by Microsoft at no cost to you.
|
||||||
|
</div>
|
||||||
|
<Checkbox
|
||||||
|
styles={{
|
||||||
|
label: { padding: 0 },
|
||||||
|
}}
|
||||||
|
className="padding"
|
||||||
|
ariaLabel="Enable sample db for Query Advisor"
|
||||||
|
checked={copilotSampleDBEnabled}
|
||||||
|
onChange={handleSampleDatabaseChange}
|
||||||
|
label="Enable sample database"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionPanel>
|
||||||
|
</AccordionItem>
|
||||||
|
)}
|
||||||
|
</Accordion>
|
||||||
|
|
||||||
<Checkbox
|
|
||||||
styles={{
|
|
||||||
label: { padding: 0 },
|
|
||||||
}}
|
|
||||||
className="padding"
|
|
||||||
ariaLabel="Enable sample db for Query Advisor"
|
|
||||||
checked={copilotSampleDBEnabled}
|
|
||||||
onChange={handleSampleDatabaseChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="settingsSection">
|
<div className="settingsSection">
|
||||||
<div className="settingsSectionPart">
|
<div className="settingsSectionPart">
|
||||||
<DefaultButton
|
<DefaultButton
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue