2020-05-26 03:30:55 +01:00
|
|
|
|
<!DOCTYPE html public "-//W3C//DTD HTML 4.0//en">
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
|
|
|
|
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
|
|
|
|
<title>Azure Cosmos DB</title>
|
|
|
|
|
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="flexContainer">
|
|
|
|
|
|
<div id="divExplorer" class="flexContainer hideOverflows" style="display: none">
|
|
|
|
|
|
<!-- Main Command Bar - Start -->
|
|
|
|
|
|
<div data-bind="react: commandBarComponentAdapter"></div>
|
|
|
|
|
|
<!-- Main Command Bar - End -->
|
|
|
|
|
|
<!-- Share url flyout - Start -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="shareDataAccessFlyout"
|
|
|
|
|
|
class="shareDataAccessFlyout"
|
|
|
|
|
|
data-bind="visible: shouldShowShareDialogContents"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="shareDataAccessFlyoutContent">
|
|
|
|
|
|
<div class="urlContainer">
|
|
|
|
|
|
<span class="urlContentText"
|
|
|
|
|
|
>Open this database account in a new browser tab with Cosmos DB Explorer. Or copy the read-write or read
|
|
|
|
|
|
only access urls below to share with others. For security purposes, the URLs grant time-bound access to
|
|
|
|
|
|
the account. When access expires, you can reconnect, using a valid connection string for the
|
|
|
|
|
|
account.</span
|
|
|
|
|
|
>
|
|
|
|
|
|
<br />
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="toggles"
|
|
|
|
|
|
data-bind="event: { keydown: onToggleKeyDown }, visible: shareAccessData().readWriteUrl != null"
|
|
|
|
|
|
tabindex="0"
|
|
|
|
|
|
aria-label="Read-Write and Read toggle"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="tab">
|
|
|
|
|
|
<input type="radio" class="radio" value="readwrite" />
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="toggleSwitch"
|
|
|
|
|
|
role="presentation"
|
|
|
|
|
|
data-bind="click: toggleReadWrite, css:{ selectedToggle: isReadWriteToggled(), unselectedToggle: !isReadWriteToggled() }"
|
|
|
|
|
|
>Read-Write</span
|
|
|
|
|
|
>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tab">
|
|
|
|
|
|
<input type="radio" class="radio" value="read" />
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="toggleSwitch"
|
|
|
|
|
|
role="presentation"
|
|
|
|
|
|
data-bind="click: toggleRead, css:{ selectedToggle: isReadToggled(), unselectedToggle: !isReadToggled() }"
|
|
|
|
|
|
>Read</span
|
|
|
|
|
|
>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="urlSpace">
|
|
|
|
|
|
<input
|
|
|
|
|
|
id="shareUrlLink"
|
|
|
|
|
|
aria-label="Share url link"
|
|
|
|
|
|
class="shareLink"
|
|
|
|
|
|
type="text"
|
|
|
|
|
|
read-only
|
|
|
|
|
|
data-bind="value: shareAccessUrl"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="urlTokenCopyInfoTooltip"
|
|
|
|
|
|
data-bind="click: copyUrlLink, event: { keypress: onCopyUrlLinkKeyPress }"
|
|
|
|
|
|
aria-label="Copy url link"
|
|
|
|
|
|
role="button"
|
|
|
|
|
|
tabindex="0"
|
|
|
|
|
|
>
|
|
|
|
|
|
<img src="/Copy.svg" alt="Copy link" />
|
|
|
|
|
|
<span class="urlTokenCopyTooltiptext" data-bind="text: shareUrlCopyHelperText"></span>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Share url flyout - End -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Collections Tree and Tabs - Begin -->
|
|
|
|
|
|
<div class="resourceTreeAndTabs">
|
|
|
|
|
|
<!-- Collections Tree - Start -->
|
|
|
|
|
|
<div id="resourcetree" data-test="resourceTreeId" class="resourceTree">
|
|
|
|
|
|
<div class="collectionsTreeWithSplitter">
|
|
|
|
|
|
<!-- Collections Tree Expanded - Start -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="main"
|
|
|
|
|
|
class="main"
|
|
|
|
|
|
data-bind="
|
|
|
|
|
|
visible: isLeftPaneExpanded()"
|
|
|
|
|
|
>
|
|
|
|
|
|
<!-- Collections Window - - Start -->
|
|
|
|
|
|
<div id="mainslide" class="flexContainer">
|
|
|
|
|
|
<!-- Collections Window Title/Command Bar - Start -->
|
|
|
|
|
|
<div class="collectiontitle">
|
|
|
|
|
|
<div class="coltitle">
|
|
|
|
|
|
<span class="titlepadcol" data-bind="text: collectionTitle"></span>
|
|
|
|
|
|
<div class="float-right">
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="padimgcolrefresh"
|
|
|
|
|
|
data-test="refreshTree"
|
|
|
|
|
|
role="button"
|
|
|
|
|
|
data-bind="
|
|
|
|
|
|
click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
|
|
|
|
|
|
tabindex="0"
|
|
|
|
|
|
aria-label="Refresh tree"
|
2020-09-01 16:28:23 +01:00
|
|
|
|
title="Refresh tree"
|
2020-05-26 03:30:55 +01:00
|
|
|
|
>
|
|
|
|
|
|
<img
|
|
|
|
|
|
class="refreshcol"
|
|
|
|
|
|
src="/refresh-cosmos.svg"
|
|
|
|
|
|
data-bind="attr: { alt: refreshTreeTitle }"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="padimgcolrefresh1"
|
|
|
|
|
|
id="expandToggleLeftPaneButton"
|
|
|
|
|
|
role="button"
|
|
|
|
|
|
data-bind="
|
|
|
|
|
|
click: toggleLeftPaneExpanded, event: { keypress: toggleLeftPaneExpandedKeyPress }"
|
|
|
|
|
|
tabindex="0"
|
|
|
|
|
|
aria-label="Collapse Tree"
|
2020-09-01 16:28:23 +01:00
|
|
|
|
title="Collapse Tree"
|
2020-05-26 03:30:55 +01:00
|
|
|
|
>
|
|
|
|
|
|
<img class="refreshcol1" src="/imgarrowlefticon.svg" alt="Hide" />
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Collections Window Title/Command Bar - End -->
|
2020-06-15 11:16:52 +01:00
|
|
|
|
<!-- ko if: !isAuthWithResourceToken() -->
|
2020-05-26 03:30:55 +01:00
|
|
|
|
<div style="overflow-y: auto" data-bind="react:resourceTree"></div>
|
|
|
|
|
|
<!-- /ko -->
|
2020-06-15 11:16:52 +01:00
|
|
|
|
<!-- ko if: isAuthWithResourceToken() -->
|
2020-05-26 03:30:55 +01:00
|
|
|
|
<div style="overflow-y: auto" data-bind="react:resourceTreeForResourceToken"></div>
|
|
|
|
|
|
<!-- /ko -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Collections Window - End -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Collections Tree Expanded - End -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Collections Tree Collapsed - Start -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="mini"
|
|
|
|
|
|
class="mini toggle-mini"
|
|
|
|
|
|
data-bind="visible: !isLeftPaneExpanded()
|
|
|
|
|
|
attr: { style: { width: collapsedResourceTreeWidth }}"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="main-nav nav">
|
|
|
|
|
|
<ul class="nav">
|
|
|
|
|
|
<li
|
|
|
|
|
|
class="resourceTreeCollapse"
|
|
|
|
|
|
id="collapseToggleLeftPaneButton"
|
|
|
|
|
|
role="button"
|
|
|
|
|
|
data-bind="event: { keypress: toggleLeftPaneExpandedKeyPress }"
|
|
|
|
|
|
tabindex="0"
|
|
|
|
|
|
aria-label="Expand Tree"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="leftarrowCollapsed"
|
|
|
|
|
|
data-bind="
|
|
|
|
|
|
click: toggleLeftPaneExpanded"
|
|
|
|
|
|
>
|
|
|
|
|
|
<img class="arrowCollapsed" src="/imgarrowlefticon.svg" alt="Expand" />
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span
|
|
|
|
|
|
class="collectionCollapsed"
|
|
|
|
|
|
data-bind="
|
|
|
|
|
|
click: toggleLeftPaneExpanded"
|
|
|
|
|
|
>
|
|
|
|
|
|
<span
|
|
|
|
|
|
data-bind="
|
|
|
|
|
|
text: collectionTitle"
|
|
|
|
|
|
></span>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Collections Tree Collapsed - End -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Splitter - Start -->
|
|
|
|
|
|
<div class="splitter ui-resizable-handle ui-resizable-e" id="h_splitter1"></div>
|
|
|
|
|
|
<!-- Splitter - End -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Collections Tree - End -->
|
|
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="connectExplorerContainer"
|
2020-07-09 21:53:37 +01:00
|
|
|
|
data-bind="visible: !isRefreshingExplorer() && tabsManager.openedTabs().length === 0"
|
2020-05-26 03:30:55 +01:00
|
|
|
|
>
|
|
|
|
|
|
<form class="connectExplorerFormContainer">
|
2020-06-18 09:36:05 +01:00
|
|
|
|
<div class="connectExplorer" data-bind="react: splashScreenAdapter"></div>
|
2020-05-26 03:30:55 +01:00
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
2020-07-10 23:08:38 +01:00
|
|
|
|
<tabs-manager
|
2020-07-17 02:35:18 +01:00
|
|
|
|
class="tabsManagerContainer"
|
2020-07-10 23:08:38 +01:00
|
|
|
|
params="{data: tabsManager}"
|
|
|
|
|
|
data-bind="visible: tabsManager.openedTabs().length > 0"
|
|
|
|
|
|
></tabs-manager>
|
2020-05-26 03:30:55 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Collections Tree and Tabs - End -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
class="dataExplorerErrorConsoleContainer"
|
|
|
|
|
|
role="contentinfo"
|
|
|
|
|
|
aria-label="Notification console"
|
|
|
|
|
|
id="explorerNotificationConsole"
|
|
|
|
|
|
data-bind="react: notificationConsoleComponentAdapter"
|
|
|
|
|
|
></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Explorer Connection - Encryption Token / AAD - Start -->
|
|
|
|
|
|
<div id="connectExplorer" class="connectExplorerContainer" style="display: none;">
|
|
|
|
|
|
<div class="connectExplorerFormContainer">
|
|
|
|
|
|
<div class="connectExplorer">
|
|
|
|
|
|
<p class="connectExplorerContent"><img src="/HdeConnectCosmosDB.svg" alt="Azure Cosmos DB" /></p>
|
|
|
|
|
|
<p class="welcomeText">Welcome to Azure Cosmos DB</p>
|
|
|
|
|
|
<div id="connectWithAad">
|
|
|
|
|
|
<input
|
|
|
|
|
|
class="filterbtnstyle"
|
|
|
|
|
|
data-test="cosmosdb-signinBtn"
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
value="Sign In"
|
|
|
|
|
|
data-bind="click: $data.signInAad"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<p
|
|
|
|
|
|
class="switchConnectTypeText"
|
|
|
|
|
|
data-test="cosmosdb-connectionString"
|
|
|
|
|
|
data-bind="click: $data.onSwitchToConnectionString"
|
|
|
|
|
|
>
|
|
|
|
|
|
Connect to your account with connection string
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<form id="connectWithConnectionString" data-bind="submit: renewToken" style="display: none;">
|
|
|
|
|
|
<p class="connectExplorerContent connectStringText">Connect to your account with connection string</p>
|
|
|
|
|
|
<p class="connectExplorerContent">
|
|
|
|
|
|
<input
|
|
|
|
|
|
class="inputToken"
|
|
|
|
|
|
type="text"
|
|
|
|
|
|
required
|
|
|
|
|
|
placeholder="Please enter a connection string"
|
|
|
|
|
|
data-bind="value: tokenForRenewal"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span class="errorDetailsInfoTooltip" data-bind="visible: renewTokenError().length > 0">
|
|
|
|
|
|
<img class="errorImg" src="/error.svg" alt="Error notification" />
|
|
|
|
|
|
<span class="errorDetails" data-bind="text: renewTokenError"></span>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p class="connectExplorerContent"><input class="filterbtnstyle" type="submit" value="Connect" /></p>
|
|
|
|
|
|
<p class="switchConnectTypeText" data-bind="click: $data.signInAad">Sign In with Azure Account</p>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Explorer Connection - Encryption Token / AAD - End -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Global loader - Start -->
|
|
|
|
|
|
<div class="splashLoaderContainer" data-bind="visible: isRefreshingExplorer">
|
|
|
|
|
|
<div class="splashLoaderContentContainer">
|
|
|
|
|
|
<p class="connectExplorerContent"><img src="/HdeConnectCosmosDB.svg" alt="Azure Cosmos DB" /></p>
|
|
|
|
|
|
<p class="splashLoaderTitle" id="explorerLoadingStatusTitle">Welcome to Azure Cosmos DB</p>
|
2020-09-01 20:45:20 +01:00
|
|
|
|
<p class="splashLoaderText" id="explorerLoadingStatusText" role="alert">Connecting...</p>
|
2020-05-26 03:30:55 +01:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Global loader - End -->
|
2020-06-10 08:15:32 +01:00
|
|
|
|
<div data-bind="react:uploadItemsPaneAdapter"></div>
|
2020-05-26 03:30:55 +01:00
|
|
|
|
<add-database-pane params="{data: addDatabasePane}"></add-database-pane>
|
|
|
|
|
|
<add-collection-pane params="{data: addCollectionPane}"></add-collection-pane>
|
|
|
|
|
|
<delete-collection-confirmation-pane params="{data: deleteCollectionConfirmationPane}">
|
|
|
|
|
|
</delete-collection-confirmation-pane>
|
|
|
|
|
|
<delete-database-confirmation-pane params="{data: deleteDatabaseConfirmationPane}">
|
|
|
|
|
|
</delete-database-confirmation-pane>
|
|
|
|
|
|
<graph-new-vertex-pane params="{data: newVertexPane}"></graph-new-vertex-pane>
|
|
|
|
|
|
<graph-styling-pane params="{data: graphStylingPane}"></graph-styling-pane>
|
|
|
|
|
|
<table-add-entity-pane params="{data: addTableEntityPane}"></table-add-entity-pane>
|
|
|
|
|
|
<table-edit-entity-pane params="{data: editTableEntityPane}"></table-edit-entity-pane>
|
|
|
|
|
|
<table-column-options-pane params="{data: tableColumnOptionsPane}"></table-column-options-pane>
|
|
|
|
|
|
<table-query-select-pane params="{data: querySelectPane}"></table-query-select-pane>
|
|
|
|
|
|
<cassandra-add-collection-pane params="{data: cassandraAddCollectionPane}"></cassandra-add-collection-pane>
|
|
|
|
|
|
<settings-pane params="{data: settingsPane}"></settings-pane>
|
|
|
|
|
|
<upload-items-pane params="{data: uploadItemsPane}"></upload-items-pane>
|
|
|
|
|
|
<load-query-pane params="{data: loadQueryPane}"></load-query-pane>
|
|
|
|
|
|
<execute-sproc-params-pane params="{data: executeSprocParamsPane}"></execute-sproc-params-pane>
|
|
|
|
|
|
<renew-adhoc-access-pane params="{data: renewAdHocAccessPane}"></renew-adhoc-access-pane>
|
|
|
|
|
|
<save-query-pane params="{data: saveQueryPane}"></save-query-pane>
|
|
|
|
|
|
<browse-queries-pane params="{data: browseQueriesPane}"></browse-queries-pane>
|
|
|
|
|
|
<upload-file-pane params="{data: uploadFilePane}"></upload-file-pane>
|
|
|
|
|
|
<string-input-pane params="{data: stringInputPane}"></string-input-pane>
|
|
|
|
|
|
<setup-notebooks-pane params="{data: setupNotebooksPane}"></setup-notebooks-pane>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ko if: isGitHubPaneEnabled -->
|
|
|
|
|
|
<github-repos-pane params="{data: gitHubReposPane}"></github-repos-pane>
|
|
|
|
|
|
<!-- /ko -->
|
|
|
|
|
|
|
2020-06-30 19:47:21 +01:00
|
|
|
|
<!-- ko if: isPublishNotebookPaneEnabled -->
|
|
|
|
|
|
<div data-bind="react: publishNotebookPaneAdapter"></div>
|
|
|
|
|
|
<!-- /ko -->
|
|
|
|
|
|
|
2020-08-11 17:27:57 +01:00
|
|
|
|
<!-- ko if: isCopyNotebookPaneEnabled -->
|
|
|
|
|
|
<div data-bind="react: copyNotebookPaneAdapter"></div>
|
|
|
|
|
|
<!-- /ko -->
|
|
|
|
|
|
|
2020-05-26 03:30:55 +01:00
|
|
|
|
<!-- Global access token expiration dialog - Start -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="dataAccessTokenModal"
|
|
|
|
|
|
class="dataAccessTokenModal"
|
|
|
|
|
|
style="display: none"
|
|
|
|
|
|
data-bind="visible: shouldShowDataAccessExpiryDialog"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="dataAccessTokenModalContent">
|
|
|
|
|
|
<p class="dataAccessTokenExpireText">Please reconnect to the account using the connection string.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Global access token expiration dialog - End -->
|
|
|
|
|
|
<!-- Context switch prompt - Start -->
|
|
|
|
|
|
<div
|
|
|
|
|
|
id="contextSwitchPrompt"
|
|
|
|
|
|
class="dataAccessTokenModal"
|
|
|
|
|
|
style="display: none"
|
|
|
|
|
|
data-bind="visible: shouldShowContextSwitchPrompt"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="dataAccessTokenModalContent">
|
|
|
|
|
|
<p class="dataAccessTokenExpireText">
|
|
|
|
|
|
Please save your work before you switch! When you switch to a different Azure Cosmos DB account, current
|
|
|
|
|
|
Data Explorer tabs will be closed.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p class="dataAccessTokenExpireText">Proceed anyway?</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div data-bind="react: dialogComponentAdapter"></div>
|
|
|
|
|
|
<div data-bind="react: addSynapseLinkDialog"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
