mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-27 12:51:41 +00:00
269 lines
12 KiB
HTML
269 lines
12 KiB
HTML
<!-- TODO: Move Pane to REACT -->
|
|
<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
|
|
<div
|
|
class="contextual-pane-out"
|
|
data-bind="
|
|
click: cancel,
|
|
clickBubble: false"
|
|
></div>
|
|
<div class="contextual-pane" id="settingspane">
|
|
<!-- Settings Confirmation form - Start -->
|
|
<div class="contextual-pane-in">
|
|
<form class="paneContentContainer" data-bind="submit: submit">
|
|
<!-- Settings Confirmation header - Start -->
|
|
<div class="firstdivbg headerline">
|
|
<span data-bind="text: title"></span>
|
|
<div
|
|
class="closeImg"
|
|
role="button"
|
|
aria-label="Close pane"
|
|
tabindex="0"
|
|
data-bind="
|
|
click: cancel, event: { keydown: onCloseKeyPress }"
|
|
>
|
|
<img src="../../../images/close-black.svg" title="Close" alt="Close" />
|
|
</div>
|
|
</div>
|
|
<!-- Settings Confirmation header - End -->
|
|
|
|
<!-- Settings Confirmation errors - Start -->
|
|
<div
|
|
class="warningErrorContainer"
|
|
aria-live="assertive"
|
|
data-bind="visible: formErrors() && formErrors() !== ''"
|
|
>
|
|
<div class="warningErrorContent">
|
|
<span><img class="paneErrorIcon" src="/error_red.svg" alt="Error"/></span>
|
|
<span class="warningErrorDetailsLinkContainer">
|
|
<span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
|
|
<a
|
|
class="errorLink"
|
|
role="link"
|
|
data-bind="
|
|
visible: formErrorsDetails() && formErrorsDetails() !== '',
|
|
click: showErrorDetails"
|
|
>More details</a
|
|
>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- Settings Confirmation errors - End -->
|
|
|
|
<!-- Settings Confirmation inputs - Start -->
|
|
<div class="paneMainContent">
|
|
<div>
|
|
<div class="settingsSection" data-bind="visible: shouldShowQueryPageOptions">
|
|
<div class="settingsSectionPart pageOptionsPart">
|
|
<div class="settingsSectionLabel">
|
|
Page options
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext pageOptionTooltipWidth">
|
|
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as
|
|
many query results per page.
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="tabs" role="radiogroup" aria-label="Page options">
|
|
<!-- Fixed option button - Start -->
|
|
<div class="tab">
|
|
<input
|
|
type="radio"
|
|
id="customItemPerPage"
|
|
name="pageOption"
|
|
value="custom"
|
|
data-bind="checked: pageOption"
|
|
/>
|
|
<label
|
|
for="customItemPerPage"
|
|
id="custom-selection"
|
|
tabindex="0"
|
|
role="radio"
|
|
data-bind=" attr:{
|
|
'aria-checked': pageOption() === 'custom' ? 'true' : 'false' },
|
|
event: { keydown: onCustomPageOptionsKeyDown
|
|
}"
|
|
>Custom</label
|
|
>
|
|
</div>
|
|
<!-- Fixed option button - End -->
|
|
|
|
<!-- Unlimited option button - Start -->
|
|
<div class="tab">
|
|
<input
|
|
type="radio"
|
|
id="unlimitedItemPerPage"
|
|
name="pageOption"
|
|
value="unlimited"
|
|
data-bind="checked: pageOption"
|
|
/>
|
|
<label
|
|
for="unlimitedItemPerPage"
|
|
id="unlimited-selection"
|
|
tabindex="0"
|
|
role="radio"
|
|
data-bind=" attr:{
|
|
'aria-checked': pageOption() === 'unlimited' ? 'true' : 'false' },
|
|
event: { keydown: onUnlimitedPageOptionKeyDown
|
|
}"
|
|
>Unlimited</label
|
|
>
|
|
</div>
|
|
<!-- Unlimited option button - End -->
|
|
</div>
|
|
</div>
|
|
<div class="tabs settingsSectionPart">
|
|
<div class="tabcontent" data-bind="visible: isCustomPageOptionSelected()">
|
|
<div class="settingsSectionLabel">
|
|
Query results per page
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext pageOptionTooltipWidth">
|
|
Enter the number of query results that should be shown per page.
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="number"
|
|
required
|
|
min="1"
|
|
step="1"
|
|
class="textfontclr collid"
|
|
aria-label="Custom query items per page"
|
|
data-bind="textInput: customItemPerPage, enable: isCustomPageOptionSelected()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="settingsSection" data-bind="visible: shouldShowCrossPartitionOption">
|
|
<div class="settingsSectionPart">
|
|
<div class="settingsSectionLabel">
|
|
Enable cross-partition query
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext pageOptionTooltipWidth">
|
|
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.
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="checkbox"
|
|
tabindex="0"
|
|
aria-label="Enable cross partition query"
|
|
data-bind="checked: crossPartitionQueryEnabled"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="settingsSection" data-bind="visible: shouldShowParallelismOption">
|
|
<div class="settingsSectionPart">
|
|
<div class="settingsSectionLabel">
|
|
Max degree of parallelism
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext pageOptionTooltipWidth">
|
|
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.
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="number"
|
|
required
|
|
min="-1"
|
|
step="1"
|
|
class="textfontclr collid"
|
|
role="textbox"
|
|
tabindex="0"
|
|
id="max-degree"
|
|
aria-label="Max degree of parallelism"
|
|
data-bind="value: maxDegreeOfParallelism"
|
|
autofocus
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="settingsSection" data-bind="visible: shouldShowGraphAutoVizOption">
|
|
<div class="settingsSectionPart">
|
|
<div class="settingsSectionLabel">
|
|
Display Gremlin query results as:
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext pageOptionTooltipWidth">
|
|
Select Graph to automatically visualize the query results as a Graph or JSON to display the
|
|
results as JSON.
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="tabs" role="radiogroup" aria-label="Graph Auto-visualization">
|
|
<!-- Fixed option button - Start -->
|
|
<div class="tab">
|
|
<input
|
|
type="radio"
|
|
id="graphAutoVizOn"
|
|
name="graphAutoVizOption"
|
|
value="false"
|
|
data-bind="checked: graphAutoVizDisabled"
|
|
/>
|
|
<label
|
|
for="graphAutoVizOn"
|
|
id="graph-display"
|
|
tabindex="0"
|
|
role="radio"
|
|
data-bind="
|
|
attr: { 'aria-checked': graphAutoVizDisabled() === 'false' ? 'true' : 'false' },
|
|
event: { keypress: onGraphDisplayResultsKeyDown
|
|
}"
|
|
>Graph</label
|
|
>
|
|
</div>
|
|
<!-- Fixed option button - End -->
|
|
|
|
<!-- Unlimited option button - Start -->
|
|
<div class="tab">
|
|
<input
|
|
type="radio"
|
|
id="graphAutoVizOff"
|
|
name="graphAutoVizOption"
|
|
value="true"
|
|
data-bind="checked: graphAutoVizDisabled"
|
|
/>
|
|
<label
|
|
for="graphAutoVizOff"
|
|
tabindex="0"
|
|
role="radio"
|
|
data-bind="
|
|
attr: { 'aria-checked': graphAutoVizDisabled() === 'true' ? 'true' : 'false' },
|
|
event: { keypress: onJsonDisplayResultsKeyDown
|
|
}"
|
|
>JSON</label
|
|
>
|
|
</div>
|
|
<!-- Unlimited option button - End -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="settingsSection">
|
|
<div class="settingsSectionPart">
|
|
<div class="settingsSectionLabel">Explorer Version</div>
|
|
|
|
<div data-bind="text: explorerVersion"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="paneFooter">
|
|
<div class="leftpanel-okbut"><input type="submit" value="Apply" class="btncreatecoll1" /></div>
|
|
</div>
|
|
<!-- Settings Confirmation inputs - End -->
|
|
</form>
|
|
</div>
|
|
<!-- Settings Confirmation form - Start -->
|
|
<!-- Loader - Start -->
|
|
<div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
|
|
<img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
|
|
</div>
|
|
<!-- Loader - End -->
|
|
</div>
|
|
</div>
|