mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-29 13:51:49 +00:00
Initial Move from Azure DevOps to GitHub
This commit is contained in:
Steve Faulkner
268
src/Explorer/Panes/SettingsPane.html
Normal file
268
src/Explorer/Panes/SettingsPane.html
Normal file
@@ -0,0 +1,268 @@
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user