mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-02-13 19:55:15 +00:00
274 lines
13 KiB
HTML
274 lines
13 KiB
HTML
<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="cassandraaddcollectionpane">
|
|
<!-- Add Cassandra collection form - Start -->
|
|
<div class="contextual-pane-in">
|
|
<form
|
|
class="paneContentContainer"
|
|
role="dialog"
|
|
aria-label="Add Table"
|
|
data-bind="
|
|
submit: submit"
|
|
>
|
|
<!-- Add Cassandra collection header - Start -->
|
|
<div class="firstdivbg headerline">
|
|
<span role="heading" aria-level="2" data-bind="text: title"></span>
|
|
<div
|
|
class="closeImg"
|
|
role="button"
|
|
aria-label="Close pane"
|
|
tabindex="0"
|
|
data-bind="
|
|
click: cancel, event: { keypress: onCloseKeyPress }"
|
|
>
|
|
<img src="../../../images/close-black.svg" title="Close" alt="Close" />
|
|
</div>
|
|
</div>
|
|
<!-- Add Cassandra collection header - End -->
|
|
<!-- Add Cassandra 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>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- Add Cassandra collection errors - End -->
|
|
<div class="paneMainContent">
|
|
<div class="seconddivpadding">
|
|
<p>
|
|
<span class="mandatoryStar">*</span> Keyspace name
|
|
<span class="infoTooltip" role="tooltip" tabindex="0">
|
|
<img class="infoImg" src="/info-bubble.svg" alt="More information" />
|
|
<span class="tooltiptext infoTooltipWidth"
|
|
>Select an existing keyspace or enter a new keyspace id.</span
|
|
>
|
|
</span>
|
|
</p>
|
|
|
|
<div class="createNewDatabaseOrUseExisting">
|
|
<input
|
|
class="createNewDatabaseOrUseExistingRadio"
|
|
aria-label="Create new keyspace"
|
|
name="databaseType"
|
|
type="radio"
|
|
role="radio"
|
|
id="keyspaceCreateNew"
|
|
data-test="addCollection-newDatabase"
|
|
tabindex="0"
|
|
data-bind="checked: keyspaceCreateNew, checkedValue: true, attr: { 'aria-checked': keyspaceCreateNew() ? 'true' : 'false' }"
|
|
/>
|
|
<span class="createNewDatabaseOrUseExistingSpace" for="keyspaceCreateNew">Create new</span>
|
|
|
|
<input
|
|
class="createNewDatabaseOrUseExistingRadio"
|
|
aria-label="Use existing keyspace"
|
|
name="databaseType"
|
|
type="radio"
|
|
role="radio"
|
|
id="keyspaceUseExisting"
|
|
data-test="addCollection-existingDatabase"
|
|
tabindex="0"
|
|
data-bind="checked: keyspaceCreateNew, checkedValue: false, attr: { 'aria-checked': !keyspaceCreateNew() ? 'true' : 'false' }"
|
|
/>
|
|
<span class="createNewDatabaseOrUseExistingSpace" for="keyspaceUseExisting">Use existing</span>
|
|
</div>
|
|
|
|
<input
|
|
id="keyspace-id"
|
|
data-test="addCollection-keyspaceId"
|
|
type="text"
|
|
autocomplete="off"
|
|
pattern="[^/?#\\]*[^/?# \\]"
|
|
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
|
placeholder="Type a new keyspace id"
|
|
size="40"
|
|
class="collid"
|
|
data-bind="visible: keyspaceCreateNew, textInput: keyspaceId, hasFocus: firstFieldHasFocus"
|
|
aria-label="Keyspace id"
|
|
aria-required="true"
|
|
autofocus
|
|
/>
|
|
|
|
<input
|
|
type="text"
|
|
aria-required="true"
|
|
autocomplete="off"
|
|
pattern="[^/?#\\]*[^/?# \\]"
|
|
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
|
list="keyspacesList"
|
|
placeholder="Choose existing keyspace id"
|
|
size="40"
|
|
class="collid"
|
|
data-bind="visible: !keyspaceCreateNew(), textInput: keyspaceId, hasFocus: firstFieldHasFocus"
|
|
aria-label="Keyspace id"
|
|
/>
|
|
|
|
<datalist id="keyspacesList" data-bind="foreach: container.databases">
|
|
<option data-bind="value: $data.id"></option>
|
|
</datalist>
|
|
|
|
<!-- Database provisioned throughput - Start -->
|
|
<!-- ko if: canConfigureThroughput -->
|
|
<div
|
|
class="databaseProvision"
|
|
aria-label="New database provision support"
|
|
data-bind="visible: keyspaceCreateNew"
|
|
>
|
|
<input
|
|
tabindex="0"
|
|
type="checkbox"
|
|
id="keyspaceSharedThroughput"
|
|
title="Provision shared throughput"
|
|
data-bind="checked: keyspaceHasSharedOffer"
|
|
/>
|
|
<span class="databaseProvisionText" for="keyspaceSharedThroughput">Provision keyspace 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 keyspace level will be shared across unlimited number of tables within
|
|
the keyspace</span
|
|
>
|
|
</span>
|
|
</div>
|
|
<!-- 1 -->
|
|
<div data-bind="visible: keyspaceCreateNew() && keyspaceHasSharedOffer()">
|
|
<throughput-input-autopilot-v3
|
|
params="{
|
|
testId: 'cassandraThroughputValue-v3-shared',
|
|
value: keyspaceThroughput,
|
|
minimum: minThroughputRU,
|
|
maximum: maxThroughputRU,
|
|
isEnabled: keyspaceCreateNew() && keyspaceHasSharedOffer(),
|
|
label: sharedThroughputRangeText,
|
|
ariaLabel: sharedThroughputRangeText,
|
|
requestUnitsUsageCost: requestUnitsUsageCostShared,
|
|
spendAckChecked: sharedThroughputSpendAck,
|
|
spendAckId: 'sharedThroughputSpendAck-v3-shared',
|
|
spendAckText: sharedThroughputSpendAckText,
|
|
spendAckVisible: sharedThroughputSpendAckVisible,
|
|
showAsMandatory: true,
|
|
infoBubbleText: ruToolTipText,
|
|
throughputAutoPilotRadioId: 'newKeyspace-databaseThroughput-autoPilotRadio-v3-shared',
|
|
throughputProvisionedRadioId: 'newKeyspace-databaseThroughput-manualRadio-v3-shared',
|
|
isAutoPilotSelected: isSharedAutoPilotSelected,
|
|
maxAutoPilotThroughputSet: sharedAutoPilotThroughput,
|
|
autoPilotUsageCost: autoPilotUsageCost,
|
|
canExceedMaximumValue: canExceedMaximumValue,
|
|
costsVisible: costsVisible,
|
|
}"
|
|
>
|
|
</throughput-input-autopilot-v3>
|
|
</div>
|
|
<!-- /ko -->
|
|
<!-- Database provisioned throughput - End -->
|
|
</div>
|
|
<div class="seconddivpadding">
|
|
<p>
|
|
<span class="mandatoryStar">*</span> Enter CQL command to create the table.
|
|
<a href="https://aka.ms/cassandra-create-table" target="_blank">Learn More</a>
|
|
</p>
|
|
<div data-bind="text: createTableQuery" style="float: left; padding-top: 3px; padding-right: 3px"></div>
|
|
<input
|
|
type="text"
|
|
data-test="addCollection-tableId"
|
|
aria-required="true"
|
|
autocomplete="off"
|
|
pattern="[^/?#\\]*[^/?# \\]"
|
|
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
|
data-test="addCollection-tableId"
|
|
placeholder="Enter tableId"
|
|
size="20"
|
|
class="textfontclr"
|
|
data-bind="value: tableId"
|
|
style="margin-bottom: 5px"
|
|
/>
|
|
<textarea
|
|
id="editor-area"
|
|
rows="15"
|
|
aria-label="Table Schema"
|
|
data-bind="value: userTableQuery"
|
|
style="height: 125px; width: calc(100% - 80px); resize: vertical"
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Provision table throughput - start -->
|
|
<!-- ko if: canConfigureThroughput -->
|
|
<div class="seconddivpadding" data-bind="visible: keyspaceHasSharedOffer() && !keyspaceCreateNew()">
|
|
<input
|
|
type="checkbox"
|
|
id="tableSharedThroughput"
|
|
title="Provision dedicated throughput for this table"
|
|
data-bind="checked: dedicateTableThroughput"
|
|
/>
|
|
<span for="tableSharedThroughput">Provision dedicated throughput for this table</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 table within a keyspace that has throughput
|
|
provisioned. This dedicated throughput amount will not be shared with other tables in the keyspace and
|
|
does not count towards the throughput you provisioned for the keyspace. This throughput amount will be
|
|
billed in addition to the throughput amount you provisioned at the keyspace level.</span
|
|
>
|
|
</span>
|
|
</div>
|
|
<!-- 2 -->
|
|
<div data-bind="visible: !keyspaceHasSharedOffer() || dedicateTableThroughput()">
|
|
<throughput-input-autopilot-v3
|
|
params="{
|
|
testId: 'cassandraSharedThroughputValue-v3-dedicated',
|
|
value: throughput,
|
|
minimum: minThroughputRU,
|
|
maximum: maxThroughputRU,
|
|
isEnabled: !keyspaceHasSharedOffer() || dedicateTableThroughput(),
|
|
label: throughputRangeText,
|
|
ariaLabel: throughputRangeText,
|
|
costsVisible: costsVisible,
|
|
requestUnitsUsageCost: requestUnitsUsageCostDedicated,
|
|
spendAckChecked: throughputSpendAck,
|
|
spendAckId: 'throughputSpendAckCassandra-v3-dedicated',
|
|
spendAckText: throughputSpendAckText,
|
|
spendAckVisible: throughputSpendAckVisible,
|
|
showAsMandatory: true,
|
|
infoBubbleText: ruToolTipText,
|
|
throughputAutoPilotRadioId: 'newKeyspace-containerThroughput-autoPilotRadio-v3-dedicated',
|
|
throughputProvisionedRadioId: 'newKeyspace-containerThroughput-manualRadio-v3-dedicated',
|
|
isAutoPilotSelected: isAutoPilotSelected,
|
|
maxAutoPilotThroughputSet: selectedAutoPilotThroughput,
|
|
autoPilotUsageCost: autoPilotUsageCost,
|
|
canExceedMaximumValue: canExceedMaximumValue,
|
|
overrideWithAutoPilotSettings: false,
|
|
overrideWithProvisionedThroughputSettings: false
|
|
}"
|
|
>
|
|
</throughput-input-autopilot-v3>
|
|
</div>
|
|
<!-- /ko -->
|
|
<!-- Provision table throughput - end -->
|
|
</div>
|
|
<div class="paneFooter">
|
|
<div class="leftpanel-okbut">
|
|
<input type="submit" data-test="addCollection-createCollection" value="OK" class="btncreatecoll1" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!-- Add Cassandra collection form - End -->
|
|
<!-- Loader - Start -->
|
|
<div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
|
|
<img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" alt="loading indicator" />
|
|
</div>
|
|
<!-- Loader - End -->
|
|
</div>
|
|
</div>
|
|
</div>
|