mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-22 10:21:37 +00:00
603 lines
30 KiB
HTML
603 lines
30 KiB
HTML
<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
|
|
<div class="contextual-pane-out" data-bind="setTemplateReady: true, click: cancel, clickBubble: false"></div>
|
|
<div class="contextual-pane" data-bind="attr: { id: id }">
|
|
<!-- Add collection form -- Start -->
|
|
<div class="contextual-pane-in">
|
|
<form data-bind="submit: submit" style="height: 100%">
|
|
<div
|
|
class="paneContentContainer"
|
|
role="dialog"
|
|
aria-labelledby="containerTitle"
|
|
data-bind="template: { name: 'add-collection-inputs' }"
|
|
></div>
|
|
</form>
|
|
</div>
|
|
<!-- Add collection form -- End -->
|
|
<!-- Loader - Start -->
|
|
<div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
|
|
<img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
|
|
</div>
|
|
<!-- Loader - End -->
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/html" id="add-collection-inputs">
|
|
<!-- Add collection header - Start -->
|
|
<div class="firstdivbg headerline">
|
|
<span id="containerTitle" role="heading" aria-level="2" data-bind="text: title"></span>
|
|
<div
|
|
class="closeImg"
|
|
id="closeBtnAddCollection"
|
|
role="button"
|
|
aria-label="Add collection close pane"
|
|
data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
|
|
tabindex="0"
|
|
>
|
|
<img src="../../../images/close-black.svg" title="Close" alt="Close" />
|
|
</div>
|
|
</div>
|
|
<!-- Add collection header - End -->
|
|
|
|
<!-- Add collection 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, event: { keypress: onMoreDetailsKeyPress }"
|
|
tabindex="0"
|
|
>
|
|
More details</a
|
|
>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="warningErrorContainer" aria-live="assertive" data-bind="visible: formWarnings() && formWarnings() !== ''">
|
|
<div class="warningErrorContent">
|
|
<span><img class="paneErrorIcon" src="/warning.svg" alt="Warning" /></span>
|
|
<span class="warningErrorDetailsLinkContainer">
|
|
<span class="formErrors" data-bind="text: formWarnings, attr: { title: formWarnings }"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- Add collection errors - End -->
|
|
|
|
<!-- upsell message - start -->
|
|
<div
|
|
class="infoBoxContainer"
|
|
aria-live="assertive"
|
|
data-bind="visible: showUpsellMessage && showUpsellMessage() && formErrors && !formErrors()"
|
|
>
|
|
<div class="infoBoxContent">
|
|
<span><img class="infoBoxIcon" src="/info_color.svg" alt="Promo" /></span>
|
|
<span class="infoBoxDetails">
|
|
<span class="infoBoxMessage" data-bind="text: upsellMessage, attr: { title: upsellMessage }"></span>
|
|
<a
|
|
class="underlinedLink"
|
|
id="linkAddCollection"
|
|
data-bind="text: upsellAnchorText, attr: { 'href': upsellAnchorUrl, 'aria-label': upsellMessageAriaLabel }"
|
|
target="_blank"
|
|
href=""
|
|
tabindex="0"
|
|
></a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- upsell message - end -->
|
|
|
|
<!-- Add collection inputs - Start -->
|
|
<div class="paneMainContent" data-bind="visible: !maxCollectionsReached()">
|
|
<div data-bind="visible: !isPreferredApiTable()">
|
|
<p>
|
|
<span class="mandatoryStar">*</span>
|
|
<span class="addCollectionLabel">Database id</span>
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext infoTooltipWidth"
|
|
>A database is analogous to a namespace. It is the unit of management for a set of containers.</span
|
|
>
|
|
</span>
|
|
</p>
|
|
|
|
<div class="createNewDatabaseOrUseExisting">
|
|
<input
|
|
class="createNewDatabaseOrUseExistingRadio"
|
|
aria-label="Create new database"
|
|
name="databaseType"
|
|
type="radio"
|
|
role="radio"
|
|
id="databaseCreateNew"
|
|
data-test="addCollection-createNewDatabase"
|
|
tabindex="0"
|
|
data-bind="checked: databaseCreateNew, checkedValue: true, attr: { 'aria-checked': databaseCreateNew() ? 'true' : 'false' }"
|
|
/>
|
|
<span class="createNewDatabaseOrUseExistingSpace" for="databaseCreateNew">Create new</span>
|
|
|
|
<input
|
|
class="createNewDatabaseOrUseExistingRadio"
|
|
aria-label="Use existing database"
|
|
name="databaseType"
|
|
type="radio"
|
|
role="radio"
|
|
id="databaseUseExisting"
|
|
data-test="addCollection-existingDatabase"
|
|
tabindex="0"
|
|
data-bind="checked: databaseCreateNew, checkedValue: false, attr: { 'aria-checked': !databaseCreateNew() ? 'true' : 'false' }"
|
|
/>
|
|
<span class="createNewDatabaseOrUseExistingSpace" for="databaseUseExisting">Use existing</span>
|
|
</div>
|
|
|
|
<input
|
|
name="newDatabaseId"
|
|
id="databaseId"
|
|
data-test="addCollection-newDatabaseId"
|
|
aria-required="true"
|
|
type="text"
|
|
autocomplete="off"
|
|
pattern="[^/?#\\]*[^/?# \\]"
|
|
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
|
placeholder="Type a new database id"
|
|
size="40"
|
|
class="collid"
|
|
data-bind="visible: databaseCreateNew, textInput: databaseId, hasFocus: firstFieldHasFocus"
|
|
autofocus
|
|
/>
|
|
|
|
<input
|
|
name="existingDatabaseId"
|
|
id="existingDatabaseId"
|
|
data-test="addCollection-existingDatabaseId"
|
|
aria-required="true"
|
|
type="text"
|
|
autocomplete="off"
|
|
pattern="[^/?#\\]*[^/?# \\]"
|
|
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
|
list="databasesList"
|
|
placeholder="Choose an existing database"
|
|
size="40"
|
|
class="collid"
|
|
data-bind="visible: !databaseCreateNew(), textInput: databaseId, hasFocus: firstFieldHasFocus"
|
|
/>
|
|
|
|
<datalist id="databasesList" data-bind="foreach: databaseIds" data-bind="visible: databaseCreateNew">
|
|
<option data-bind="value: $data"></option>
|
|
</datalist>
|
|
|
|
<!-- Database provisioned throughput - Start -->
|
|
<!-- ko if: canConfigureThroughput -->
|
|
<div class="databaseProvision" aria-label="Provision database throughput" data-bind="visible: databaseCreateNew">
|
|
<input
|
|
tabindex="0"
|
|
type="checkbox"
|
|
data-test="addCollectionPane-databaseSharedThroughput"
|
|
id="addCollection-databaseSharedThroughput"
|
|
title="Provision database throughput"
|
|
data-bind="checked: databaseCreateNewShared"
|
|
/>
|
|
<span class="databaseProvisionText" for="databaseSharedThroughput">Provision database throughput</span>
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext provisionDatabaseThroughput"
|
|
>Provisioned throughput at the database level will be shared across all containers within the
|
|
database.</span
|
|
>
|
|
</span>
|
|
</div>
|
|
<div data-bind="visible: databaseCreateNewShared() && databaseCreateNew()">
|
|
<!-- 1 -->
|
|
<throughput-input-autopilot-v3
|
|
params="{
|
|
testId: 'databaseThroughputValue',
|
|
value: throughputDatabase,
|
|
minimum: minThroughputRU,
|
|
maximum: maxThroughputRU,
|
|
isEnabled: databaseCreateNewShared() && databaseCreateNew(),
|
|
label: sharedThroughputRangeText,
|
|
ariaLabel: sharedThroughputRangeText,
|
|
costsVisible: costsVisible,
|
|
requestUnitsUsageCost: requestUnitsUsageCost,
|
|
spendAckChecked: throughputSpendAck,
|
|
spendAckId: 'throughputSpendAck',
|
|
spendAckText: throughputSpendAckText,
|
|
spendAckVisible: throughputSpendAckVisible,
|
|
showAsMandatory: true,
|
|
infoBubbleText: ruToolTipText,
|
|
throughputAutoPilotRadioId: 'newContainer-databaseThroughput-autoPilotRadio',
|
|
throughputProvisionedRadioId: 'newContainer-databaseThroughput-manualRadio',
|
|
throughputModeRadioName: 'sharedThroughputModeRadio',
|
|
isAutoPilotSelected: isSharedAutoPilotSelected,
|
|
maxAutoPilotThroughputSet: sharedAutoPilotThroughput,
|
|
autoPilotUsageCost: autoPilotUsageCost,
|
|
canExceedMaximumValue: canExceedMaximumValue,
|
|
freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
|
|
}"
|
|
>
|
|
</throughput-input-autopilot-v3>
|
|
</div>
|
|
<!-- /ko -->
|
|
<!-- Database provisioned throughput - End -->
|
|
</div>
|
|
|
|
<div class="seconddivpadding">
|
|
<p>
|
|
<span class="mandatoryStar">*</span>
|
|
<span class="addCollectionLabel" data-bind="text: collectionIdTitle"></span>
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext infoTooltipWidth"
|
|
>Unique identifier for the container and used for id-based routing through REST and all SDKs</span
|
|
>
|
|
</span>
|
|
</p>
|
|
<input
|
|
name="collectionId"
|
|
id="containerId"
|
|
data-test="addCollection-collectionId"
|
|
type="text"
|
|
aria-required="true"
|
|
autocomplete="off"
|
|
pattern="[^/?#\\]*[^/?# \\]"
|
|
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
|
placeholder="e.g., Container1"
|
|
size="40"
|
|
class="textfontclr collid"
|
|
data-bind="value: collectionId"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Indexing For Shared Throughput - start -->
|
|
<div class="seconddivpadding" data-bind="visible: showIndexingOptionsForSharedThroughput() && !isMongo()">
|
|
<div
|
|
class="useIndexingForSharedThroughput createNewDatabaseOrUseExisting"
|
|
aria-label="Indexing For Shared Throughput"
|
|
>
|
|
<p>
|
|
<span class="mandatoryStar">*</span>
|
|
<span class="addCollectionLabel">Indexing</span>
|
|
</p>
|
|
<div>
|
|
<input
|
|
type="radio"
|
|
id="useIndexingForSharedThroughputOn"
|
|
name="useIndexingForSharedThroughput"
|
|
value="on"
|
|
class="createNewDatabaseOrUseExistingRadio"
|
|
data-bind="checked: useIndexingForSharedThroughput, checkedValue: true"
|
|
/>
|
|
<span class="createNewDatabaseOrUseExistingSpace" for="useIndexingForSharedThroughputOn">Automatic</span>
|
|
<input
|
|
type="radio"
|
|
id="useIndexingForSharedThroughputOff"
|
|
name="useIndexingForSharedThroughput"
|
|
value="off"
|
|
class="createNewDatabaseOrUseExistingRadio"
|
|
data-bind="checked: useIndexingForSharedThroughput, checkedValue: false"
|
|
/>
|
|
<span class="createNewDatabaseOrUseExistingSpace" for="useIndexingForSharedThroughputOff">Off</span>
|
|
</div>
|
|
<p data-bind="visible: useIndexingForSharedThroughput">
|
|
All properties in your documents will be indexed by default for flexible and efficient queries.
|
|
<a class="errorLink" href="https://aka.ms/cosmos-indexing-policy" target="_blank">Learn more</a>
|
|
</p>
|
|
<p data-bind="visible: useIndexingForSharedThroughput() === false">
|
|
Indexing will be turned off. Recommended if you don't need to run queries or only have key value operations.
|
|
<a class="errorLink" href="https://aka.ms/cosmos-indexing-policy" target="_blank">Learn more</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Indexing For Shared Throughput - end -->
|
|
|
|
<p
|
|
class="seconddivpadding"
|
|
data-bind="visible: isMongo() && !databaseHasSharedOffer() || container.isFixedCollectionWithSharedThroughputSupported"
|
|
>
|
|
<span class="mandatoryStar">*</span>
|
|
<span class="addCollectionLabel">Storage capacity</span>
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext infoTooltipWidth"
|
|
>This is the maximum storage size of the container. Storage is billed per GB based on consumption.</span
|
|
>
|
|
</span>
|
|
</p>
|
|
|
|
<div class="tabs">
|
|
<div
|
|
tabindex="0"
|
|
data-bind="event: { keydown: onStorageOptionsKeyDown }, visible: isMongo() && !databaseHasSharedOffer() || container.isFixedCollectionWithSharedThroughputSupported"
|
|
aria-label="Storage capacity"
|
|
>
|
|
<!-- Fixed option button - Start -->
|
|
<div class="tab">
|
|
<input type="radio" id="tab1" name="storage" value="10" class="radio" data-bind="checked: storage" />
|
|
<label for="tab1">Fixed (20 GB)</label>
|
|
</div>
|
|
<!-- Fixed option button - End -->
|
|
|
|
<!-- Unlimited option button - Start -->
|
|
<div class="tab">
|
|
<input type="radio" id="tab2" name="storage" value="100" class="radio" data-bind="checked: storage" />
|
|
<label for="tab2">Unlimited</label>
|
|
</div>
|
|
<!-- Unlimited option button - End -->
|
|
</div>
|
|
<!-- Unlimited Button Content - Start -->
|
|
<div class="tabcontent" data-bind="visible: isUnlimitedStorageSelected() || databaseHasSharedOffer()">
|
|
<div data-bind="visible: partitionKeyVisible">
|
|
<p>
|
|
<span class="mandatoryStar">*</span>
|
|
<span class="addCollectionLabel" data-bind="text: partitionKeyName"></span>
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext infoTooltipWidth"
|
|
>The <span data-bind="text: partitionKeyName"></span> is used to automatically partition data among
|
|
multiple servers for scalability. Choose a JSON property name that has a wide range of values and is
|
|
likely to have evenly distributed access patterns.</span
|
|
>
|
|
</span>
|
|
</p>
|
|
<input
|
|
type="text"
|
|
id="addCollection-partitionKeyValue"
|
|
data-test="addCollection-partitionKeyValue"
|
|
aria-required="true"
|
|
size="40"
|
|
class="textfontclr collid"
|
|
data-bind="textInput: partitionKey,
|
|
attr: {
|
|
placeholder: partitionKeyPlaceholder,
|
|
required: partitionKeyVisible(),
|
|
pattern: partitionKeyPattern,
|
|
title: partitionKeyTitle
|
|
}"
|
|
/>
|
|
</div>
|
|
<!-- large parition key - start -->
|
|
<div class="largePartitionKey" aria-label="Large Partition Key" data-bind="visible: partitionKeyVisible">
|
|
<input
|
|
tabindex="0"
|
|
type="checkbox"
|
|
id="largePartitionKey"
|
|
data-test="addCollection-largePartitionKey"
|
|
title="Large Partition Key"
|
|
data-bind="checked: largePartitionKey"
|
|
/>
|
|
<span for="largePartitionKey"
|
|
>My <span data-bind="text: lowerCasePartitionKeyName"></span> is larger than 100 bytes</span
|
|
>
|
|
<p
|
|
data-bind="visible: largePartitionKey"
|
|
class="largePartitionKeyDescription"
|
|
data-test="addCollection-largePartitionKeyDescription"
|
|
>
|
|
Old SDKs do not work with containers that support large
|
|
<span data-bind="text: lowerCasePartitionKeyName"></span>s, ensure you are using the right SDK version.
|
|
<a class="errorLink" href="https://aka.ms/cosmosdb/pkv2" target="_blank">Learn more</a>
|
|
</p>
|
|
</div>
|
|
<!-- large parition key - end -->
|
|
|
|
<!-- ko if: canConfigureThroughput -->
|
|
<!-- Provision collection throughput checkbox - start -->
|
|
<div class="pkPadding" data-bind="visible: databaseHasSharedOffer() && !databaseCreateNew()">
|
|
<input
|
|
type="checkbox"
|
|
id="collectionSharedThroughput"
|
|
data-bind="checked: collectionWithThroughputInShared, attr: {title:collectionWithThroughputInSharedTitle}"
|
|
/>
|
|
<span for="collectionSharedThroughput" data-bind="text: collectionWithThroughputInSharedTitle"></span>
|
|
<span class="leftAlignInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext sharedCollectionThroughputTooltipWidth"
|
|
>You can optionally provision dedicated throughput for a container within a database that has throughput
|
|
provisioned. This dedicated throughput amount will not be shared with other containers in the database and
|
|
does not count towards the throughput you provisioned for the database. This throughput amount will be
|
|
billed in addition to the throughput amount you provisioned at the database level.</span
|
|
>
|
|
</span>
|
|
</div>
|
|
<!-- Provision collection throughput checkbox - end -->
|
|
|
|
<!-- Provision collection throughput spinner - start -->
|
|
<div data-bind="visible: displayCollectionThroughput" data-test="addCollection-displayCollectionThroughput">
|
|
<!-- 3 -->
|
|
<throughput-input-autopilot-v3
|
|
params="{
|
|
testId: 'collectionThroughputValue',
|
|
value: throughputMultiPartition,
|
|
minimum: minThroughputRU,
|
|
maximum: maxThroughputRU,
|
|
isEnabled: displayCollectionThroughput,
|
|
label: throughputRangeText,
|
|
ariaLabel: throughputRangeText,
|
|
costsVisible: costsVisible,
|
|
requestUnitsUsageCost: dedicatedRequestUnitsUsageCost,
|
|
spendAckChecked: throughputSpendAck,
|
|
spendAckId: 'throughputSpendAckCollection',
|
|
spendAckText: throughputSpendAckText,
|
|
spendAckVisible: throughputSpendAckVisible,
|
|
showAsMandatory: true,
|
|
infoBubbleText: ruToolTipText,
|
|
throughputAutoPilotRadioId: 'newContainer-containerThroughput-autoPilotRadio',
|
|
throughputProvisionedRadioId: 'newContainer-containerThroughput-manualRadio',
|
|
throughputModeRadioName: 'throughputModeRadioName',
|
|
isAutoPilotSelected: isAutoPilotSelected,
|
|
maxAutoPilotThroughputSet: autoPilotThroughput,
|
|
autoPilotUsageCost: autoPilotUsageCost,
|
|
canExceedMaximumValue: canExceedMaximumValue,
|
|
freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
|
|
}"
|
|
>
|
|
</throughput-input-autopilot-v3>
|
|
</div>
|
|
<!-- Provision collection throughput spinner - end -->
|
|
<!-- /ko -->
|
|
<!-- Provision collection throughput - end -->
|
|
|
|
<!-- Custom indexes for mongo checkbox - start -->
|
|
<div class="pkPadding" data-bind="visible: isEnableMongoCapabilityEnabled()">
|
|
<p>
|
|
<span class="addCollectionLabel">Indexing</span>
|
|
</p>
|
|
<input
|
|
type="checkbox"
|
|
id="mongoWildcardIndex"
|
|
title="mongoWildcardIndex"
|
|
data-bind="checked: shouldCreateMongoWildcardIndex"
|
|
/>
|
|
<span>Create a Wildcard Index on all fields</span>
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext mongoWildcardIndexTooltipWidth">
|
|
By default, only the field _id is indexed. Creating a wildcard index on all fields will quickly optimize
|
|
query performance and is recommended during development.
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<!-- Custom indexes for mongo checkbox - end -->
|
|
|
|
<!-- Enable analytical storage - start -->
|
|
<div
|
|
class="enableAnalyticalStorage pkPadding"
|
|
aria-label="Enable Analytical Store"
|
|
data-bind="visible: isSynapseLinkSupported"
|
|
>
|
|
<div>
|
|
<span class="mandatoryStar">*</span>
|
|
<span class="addCollectionLabel">Analytical store</span>
|
|
<span
|
|
class="infoTooltip"
|
|
role="tooltip"
|
|
tabindex="0"
|
|
data-bind="event: { focus: function(data, event) { transferFocus('tooltip1', 'link1') } }"
|
|
>
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span id="tooltip1" class="tooltiptext infoTooltipWidth" data-bind="event: { mouseout: onMouseOut }">
|
|
Enable analytical store capability to perform near real-time analytics on your operational data, without
|
|
impacting the performance of transactional workloads. Learn more
|
|
<a
|
|
id="link1"
|
|
class="errorLink"
|
|
href="https://aka.ms/analytical-store-overview"
|
|
target="_blank"
|
|
data-bind="event: { focusout: onFocusOut, keydown: onKeyDown.bind($data, 'largePartitionKey') }"
|
|
>here</a
|
|
>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="paragraph">
|
|
<input
|
|
class="enableAnalyticalStorageRadio"
|
|
id="enableAnalyticalStorageRadioOn"
|
|
name="analyticalStore"
|
|
type="radio"
|
|
role="radio"
|
|
tabindex="0"
|
|
data-bind="
|
|
disable: showEnableSynapseLink,
|
|
checked: isAnalyticalStorageOn,
|
|
checkedValue: true,
|
|
attr: {
|
|
'aria-checked': isAnalyticalStorageOn() ? 'true' : 'false'
|
|
}"
|
|
/>
|
|
<label for="enableAnalyticalStorageRadioOn" class="enableAnalyticalStorageRadioLabel">
|
|
<span data-bind="disable: showEnableSynapseLink"> On </span>
|
|
</label>
|
|
|
|
<input
|
|
class="enableAnalyticalStorageRadio"
|
|
id="enableAnalyticalStorageRadioOff"
|
|
name="analyticalStore"
|
|
type="radio"
|
|
role="radio"
|
|
tabindex="0"
|
|
data-bind="
|
|
disable: showEnableSynapseLink,
|
|
checked: isAnalyticalStorageOn,
|
|
checkedValue: false,
|
|
attr: {
|
|
'aria-checked': isAnalyticalStorageOn() ? 'false' : 'true'
|
|
}"
|
|
/>
|
|
<label for="enableAnalyticalStorageRadioOff" class="enableAnalyticalStorageRadioLabel">
|
|
<span data-bind="disable: showEnableSynapseLink"> Off </span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="paragraph italic" data-bind="visible: ttl90DaysEnabled() && isAnalyticalStorageOn()">
|
|
By default, Analytical Time-to-Live will be configured to retain 90 days of data in the analytical store.
|
|
You can configure a custom retention policy in the 'Settings' tab.
|
|
<span
|
|
><a class="errorLink" href="https://aka.ms/cosmosdb-analytical-ttl" target="_blank">Learn more</a></span
|
|
>
|
|
</div>
|
|
|
|
<div class="paragraph" data-bind="visible: showEnableSynapseLink">
|
|
Azure Synapse Link is required for creating an analytical store container. Enable Synapse Link for this
|
|
Cosmos DB account.
|
|
<span><a class="errorLink" href="https://aka.ms/cosmosdb-synapselink" target="_blank">Learn more</a></span>
|
|
</div>
|
|
|
|
<div class="paragraph" data-bind="visible: showEnableSynapseLink">
|
|
<button
|
|
class="button"
|
|
type="button"
|
|
data-bind="
|
|
click: onEnableSynapseLinkButtonClicked,
|
|
disable: isSynapseLinkUpdating,
|
|
css: {
|
|
enabled: !isSynapseLinkUpdating(),
|
|
disabled: isSynapseLinkUpdating
|
|
}
|
|
"
|
|
>
|
|
Enable
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Enable analytical storage - end -->
|
|
</div>
|
|
<!-- Unlimited Button Content - End -->
|
|
</div>
|
|
<div class="uniqueIndexesContainer" data-bind="visible: uniqueKeysVisible">
|
|
<p class="uniqueKeys">
|
|
<span class="addCollectionLabel">Unique keys</span>
|
|
<span class="uniqueInfoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="uniqueTooltiptext infoTooltipWidth"
|
|
>Unique keys provide developers with the ability to add a layer of data integrity to their database. By
|
|
creating a unique key policy when a container is created, you ensure the uniqueness of one or more values
|
|
per partition key.</span
|
|
>
|
|
</span>
|
|
</p>
|
|
<dynamic-list
|
|
params="{ listItems: uniqueKeys, placeholder: uniqueKeysPlaceholder(), ariaLabel: 'Write a comma separated path list of unique keys', buttonText: 'Add unique key' }"
|
|
>
|
|
</dynamic-list>
|
|
</div>
|
|
</div>
|
|
<div class="paneFooter">
|
|
<div class="leftpanel-okbut">
|
|
<input
|
|
name="createCollection"
|
|
id="submitBtnAddCollection"
|
|
data-test="addCollection-createCollection"
|
|
type="submit"
|
|
value="OK"
|
|
class="btncreatecoll1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div data-bind="visible: maxCollectionsReached">
|
|
<error-display params="{ errorMsg: maxCollectionsReachedMessage }"></error-display>
|
|
</div>
|
|
<!-- Add collection inputs - End -->
|
|
</script>
|