2021-01-20 15:15:01 +00:00
|
|
|
// CSS Dependencies
|
|
|
|
|
import "bootstrap/dist/css/bootstrap.css";
|
|
|
|
|
import "../less/documentDB.less";
|
|
|
|
|
import "../less/tree.less";
|
|
|
|
|
import "../less/forms.less";
|
|
|
|
|
import "../less/menus.less";
|
|
|
|
|
import "../less/infobox.less";
|
|
|
|
|
import "../less/messagebox.less";
|
|
|
|
|
import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
|
|
|
|
|
import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
|
|
|
|
|
import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
|
|
|
|
|
import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
|
|
|
|
|
import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
|
|
|
|
|
import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
|
|
|
|
|
import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
|
|
|
|
|
import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
|
|
|
|
|
import "../less/TableStyles/queryBuilder.less";
|
|
|
|
|
import "../externals/jquery.dataTables.min.css";
|
|
|
|
|
import "../less/TableStyles/fulldatatables.less";
|
|
|
|
|
import "../less/TableStyles/EntityEditor.less";
|
|
|
|
|
import "../less/TableStyles/CustomizeColumns.less";
|
|
|
|
|
import "../less/resourceTree.less";
|
|
|
|
|
import "../externals/jquery.typeahead.min.css";
|
|
|
|
|
import "../externals/jquery-ui.min.css";
|
|
|
|
|
import "../externals/jquery-ui.structure.min.css";
|
|
|
|
|
import "../externals/jquery-ui.theme.min.css";
|
|
|
|
|
import "./Explorer/Graph/NewVertexComponent/newVertexComponent.less";
|
|
|
|
|
import "./Explorer/Panes/GraphNewVertexPane.less";
|
|
|
|
|
import "./Explorer/Tabs/QueryTab.less";
|
|
|
|
|
import "./Explorer/Controls/TreeComponent/treeComponent.less";
|
|
|
|
|
import "./Explorer/Controls/Accordion/AccordionComponent.less";
|
|
|
|
|
import "./Explorer/SplashScreen/SplashScreenComponent.less";
|
|
|
|
|
import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
|
|
|
|
|
|
|
|
|
|
// Image Dependencies
|
|
|
|
|
import "../images/CosmosDB_rgb_ui_lighttheme.ico";
|
|
|
|
|
import "../images/favicon.ico";
|
|
|
|
|
|
|
|
|
|
import "./Shared/appInsights";
|
|
|
|
|
import "babel-polyfill";
|
|
|
|
|
import "es6-symbol/implement";
|
|
|
|
|
import "webcrypto-liner/build/webcrypto-liner.shim.min";
|
|
|
|
|
import "./Libs/jquery";
|
|
|
|
|
import "bootstrap/dist/js/npm";
|
|
|
|
|
import "../externals/jquery.typeahead.min.js";
|
|
|
|
|
import "../externals/jquery-ui.min.js";
|
|
|
|
|
import "promise-polyfill/src/polyfill";
|
|
|
|
|
import "abort-controller/polyfill";
|
|
|
|
|
import "whatwg-fetch";
|
|
|
|
|
import "es6-object-assign/auto";
|
|
|
|
|
import "promise.prototype.finally/auto";
|
|
|
|
|
import "object.entries/auto";
|
|
|
|
|
import "./Libs/is-integer-polyfill";
|
|
|
|
|
import "url-polyfill/url-polyfill.min";
|
|
|
|
|
|
|
|
|
|
initializeIcons();
|
|
|
|
|
|
|
|
|
|
import { AuthType } from "./AuthType";
|
|
|
|
|
|
|
|
|
|
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
|
|
|
|
|
import { applyExplorerBindings } from "./applyExplorerBindings";
|
|
|
|
|
import { configContext, initializeConfiguration, Platform } from "./ConfigContext";
|
|
|
|
|
import Explorer from "./Explorer/Explorer";
|
|
|
|
|
import React, { useEffect } from "react";
|
|
|
|
|
import ReactDOM from "react-dom";
|
|
|
|
|
import copyImage from "../images/Copy.svg";
|
|
|
|
|
import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
|
|
|
|
|
import refreshImg from "../images/refresh-cosmos.svg";
|
|
|
|
|
import arrowLeftImg from "../images/imgarrowlefticon.svg";
|
|
|
|
|
import { KOCommentEnd, KOCommentIfStart } from "./koComment";
|
|
|
|
|
import { updateUserContext } from "./UserContext";
|
|
|
|
|
import { CollectionCreation } from "./Shared/Constants";
|
|
|
|
|
import { extractFeatures } from "./Platform/Hosted/extractFeatures";
|
|
|
|
|
import { emulatorAccount } from "./Platform/Emulator/emulatorAccount";
|
|
|
|
|
import { HostedExplorerChildFrame } from "./HostedExplorerChildFrame";
|
|
|
|
|
import {
|
|
|
|
|
getDatabaseAccountKindFromExperience,
|
|
|
|
|
getDatabaseAccountPropertiesFromMetadata,
|
|
|
|
|
} from "./Platform/Hosted/HostedUtils";
|
|
|
|
|
import { DefaultExperienceUtility } from "./Shared/DefaultExperienceUtility";
|
|
|
|
|
import { parseResourceTokenConnectionString } from "./Platform/Hosted/Helpers/ResourceTokenUtils";
|
|
|
|
|
import { AccountKind, DefaultAccountExperience, ServerIds } from "./Common/Constants";
|
|
|
|
|
import { listKeys } from "./Utils/arm/generatedClients/2020-04-01/databaseAccounts";
|
|
|
|
|
import { SelfServeType } from "./SelfServe/SelfServeUtils";
|
|
|
|
|
|
|
|
|
|
const App: React.FunctionComponent = () => {
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
initializeConfiguration().then(async (config) => {
|
|
|
|
|
let explorer: Explorer;
|
|
|
|
|
if (config.platform === Platform.Hosted) {
|
|
|
|
|
const win = (window as unknown) as HostedExplorerChildFrame;
|
|
|
|
|
explorer = new Explorer();
|
|
|
|
|
explorer.selfServeType(SelfServeType.none);
|
|
|
|
|
if (win.hostedConfig.authType === AuthType.EncryptedToken) {
|
|
|
|
|
// TODO: Remove window.authType
|
|
|
|
|
window.authType = AuthType.EncryptedToken;
|
|
|
|
|
// Impossible to tell if this is a try cosmos sub using an encrypted token
|
|
|
|
|
explorer.isTryCosmosDBSubscription(false);
|
|
|
|
|
updateUserContext({
|
|
|
|
|
accessToken: encodeURIComponent(win.hostedConfig.encryptedToken),
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const apiExperience: string = DefaultExperienceUtility.getDefaultExperienceFromApiKind(
|
|
|
|
|
win.hostedConfig.encryptedTokenMetadata.apiKind
|
|
|
|
|
);
|
|
|
|
|
explorer.initDataExplorerWithFrameInputs({
|
|
|
|
|
databaseAccount: {
|
|
|
|
|
id: "",
|
|
|
|
|
// id: Main._databaseAccountId,
|
|
|
|
|
name: win.hostedConfig.encryptedTokenMetadata.accountName,
|
|
|
|
|
kind: getDatabaseAccountKindFromExperience(apiExperience),
|
|
|
|
|
properties: getDatabaseAccountPropertiesFromMetadata(win.hostedConfig.encryptedTokenMetadata),
|
|
|
|
|
tags: [],
|
|
|
|
|
},
|
|
|
|
|
subscriptionId: undefined,
|
|
|
|
|
resourceGroup: undefined,
|
|
|
|
|
masterKey: undefined,
|
|
|
|
|
hasWriteAccess: true, // TODO: we should embed this information in the token ideally
|
|
|
|
|
authorizationToken: undefined,
|
|
|
|
|
features: extractFeatures(),
|
|
|
|
|
csmEndpoint: undefined,
|
|
|
|
|
dnsSuffix: undefined,
|
|
|
|
|
serverId: ServerIds.productionPortal,
|
|
|
|
|
extensionEndpoint: configContext.BACKEND_ENDPOINT,
|
|
|
|
|
subscriptionType: CollectionCreation.DefaultSubscriptionType,
|
|
|
|
|
quotaId: undefined,
|
|
|
|
|
addCollectionDefaultFlight: explorer.flight(),
|
|
|
|
|
isTryCosmosDBSubscription: explorer.isTryCosmosDBSubscription(),
|
|
|
|
|
});
|
|
|
|
|
explorer.isAccountReady(true);
|
|
|
|
|
} else if (win.hostedConfig.authType === AuthType.ResourceToken) {
|
|
|
|
|
window.authType = AuthType.ResourceToken;
|
|
|
|
|
// Resource tokens can only be used with SQL API
|
|
|
|
|
const apiExperience: string = DefaultAccountExperience.DocumentDB;
|
|
|
|
|
const parsedResourceToken = parseResourceTokenConnectionString(win.hostedConfig.resourceToken);
|
|
|
|
|
updateUserContext({
|
|
|
|
|
resourceToken: parsedResourceToken.resourceToken,
|
|
|
|
|
endpoint: parsedResourceToken.accountEndpoint,
|
|
|
|
|
});
|
|
|
|
|
explorer.resourceTokenDatabaseId(parsedResourceToken.databaseId);
|
|
|
|
|
explorer.resourceTokenCollectionId(parsedResourceToken.collectionId);
|
|
|
|
|
if (parsedResourceToken.partitionKey) {
|
|
|
|
|
explorer.resourceTokenPartitionKey(parsedResourceToken.partitionKey);
|
|
|
|
|
}
|
|
|
|
|
explorer.initDataExplorerWithFrameInputs({
|
|
|
|
|
databaseAccount: {
|
|
|
|
|
id: "",
|
|
|
|
|
name: parsedResourceToken.accountEndpoint,
|
|
|
|
|
kind: AccountKind.GlobalDocumentDB,
|
|
|
|
|
properties: { documentEndpoint: parsedResourceToken.accountEndpoint },
|
|
|
|
|
tags: { defaultExperience: apiExperience },
|
|
|
|
|
},
|
|
|
|
|
subscriptionId: undefined,
|
|
|
|
|
resourceGroup: undefined,
|
|
|
|
|
masterKey: undefined,
|
|
|
|
|
hasWriteAccess: true, // TODO: we should embed this information in the token ideally
|
|
|
|
|
authorizationToken: undefined,
|
|
|
|
|
features: extractFeatures(),
|
|
|
|
|
csmEndpoint: undefined,
|
|
|
|
|
dnsSuffix: undefined,
|
|
|
|
|
serverId: ServerIds.productionPortal,
|
|
|
|
|
extensionEndpoint: configContext.BACKEND_ENDPOINT,
|
|
|
|
|
subscriptionType: CollectionCreation.DefaultSubscriptionType,
|
|
|
|
|
quotaId: undefined,
|
|
|
|
|
addCollectionDefaultFlight: explorer.flight(),
|
|
|
|
|
isTryCosmosDBSubscription: explorer.isTryCosmosDBSubscription(),
|
|
|
|
|
isAuthWithresourceToken: true,
|
|
|
|
|
});
|
|
|
|
|
explorer.isAccountReady(true);
|
|
|
|
|
explorer.isRefreshingExplorer(false);
|
|
|
|
|
} else if (win.hostedConfig.authType === AuthType.ConnectionString) {
|
|
|
|
|
// For legacy reasons lots of code expects a connection string login to look and act like an encrypted token login
|
|
|
|
|
window.authType = AuthType.EncryptedToken;
|
|
|
|
|
// Impossible to tell if this is a try cosmos sub using an encrypted token
|
|
|
|
|
explorer.isTryCosmosDBSubscription(false);
|
|
|
|
|
updateUserContext({
|
|
|
|
|
accessToken: encodeURIComponent(win.hostedConfig.encryptedToken),
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const apiExperience: string = DefaultExperienceUtility.getDefaultExperienceFromApiKind(
|
|
|
|
|
win.hostedConfig.encryptedTokenMetadata.apiKind
|
|
|
|
|
);
|
|
|
|
|
explorer.initDataExplorerWithFrameInputs({
|
|
|
|
|
databaseAccount: {
|
|
|
|
|
id: "",
|
|
|
|
|
// id: Main._databaseAccountId,
|
|
|
|
|
name: win.hostedConfig.encryptedTokenMetadata.accountName,
|
|
|
|
|
kind: getDatabaseAccountKindFromExperience(apiExperience),
|
|
|
|
|
properties: getDatabaseAccountPropertiesFromMetadata(win.hostedConfig.encryptedTokenMetadata),
|
|
|
|
|
tags: [],
|
|
|
|
|
},
|
|
|
|
|
subscriptionId: undefined,
|
|
|
|
|
resourceGroup: undefined,
|
|
|
|
|
masterKey: win.hostedConfig.masterKey,
|
|
|
|
|
hasWriteAccess: true, // TODO: we should embed this information in the token ideally
|
|
|
|
|
authorizationToken: undefined,
|
|
|
|
|
features: extractFeatures(),
|
|
|
|
|
csmEndpoint: undefined,
|
|
|
|
|
dnsSuffix: undefined,
|
|
|
|
|
serverId: ServerIds.productionPortal,
|
|
|
|
|
extensionEndpoint: configContext.BACKEND_ENDPOINT,
|
|
|
|
|
subscriptionType: CollectionCreation.DefaultSubscriptionType,
|
|
|
|
|
quotaId: undefined,
|
|
|
|
|
addCollectionDefaultFlight: explorer.flight(),
|
|
|
|
|
isTryCosmosDBSubscription: explorer.isTryCosmosDBSubscription(),
|
|
|
|
|
});
|
|
|
|
|
explorer.isAccountReady(true);
|
|
|
|
|
} else if (win.hostedConfig.authType === AuthType.AAD) {
|
|
|
|
|
window.authType = AuthType.AAD;
|
|
|
|
|
const account = win.hostedConfig.databaseAccount;
|
|
|
|
|
const accountResourceId = account.id;
|
|
|
|
|
const subscriptionId = accountResourceId && accountResourceId.split("subscriptions/")[1].split("/")[0];
|
|
|
|
|
const resourceGroup = accountResourceId && accountResourceId.split("resourceGroups/")[1].split("/")[0];
|
|
|
|
|
updateUserContext({
|
|
|
|
|
authorizationToken: `Bearer ${win.hostedConfig.authorizationToken}`,
|
|
|
|
|
databaseAccount: win.hostedConfig.databaseAccount,
|
|
|
|
|
});
|
|
|
|
|
const keys = await listKeys(subscriptionId, resourceGroup, account.name);
|
|
|
|
|
explorer.initDataExplorerWithFrameInputs({
|
|
|
|
|
databaseAccount: account,
|
|
|
|
|
subscriptionId,
|
|
|
|
|
resourceGroup,
|
|
|
|
|
masterKey: keys.primaryMasterKey,
|
|
|
|
|
hasWriteAccess: true, //TODO: 425017 - support read access
|
|
|
|
|
authorizationToken: `Bearer ${win.hostedConfig.authorizationToken}`,
|
|
|
|
|
features: extractFeatures(),
|
|
|
|
|
csmEndpoint: undefined,
|
|
|
|
|
dnsSuffix: undefined,
|
|
|
|
|
serverId: ServerIds.productionPortal,
|
|
|
|
|
extensionEndpoint: configContext.BACKEND_ENDPOINT,
|
|
|
|
|
subscriptionType: CollectionCreation.DefaultSubscriptionType,
|
|
|
|
|
quotaId: undefined,
|
|
|
|
|
addCollectionDefaultFlight: explorer.flight(),
|
|
|
|
|
isTryCosmosDBSubscription: explorer.isTryCosmosDBSubscription(),
|
|
|
|
|
});
|
|
|
|
|
explorer.isAccountReady(true);
|
|
|
|
|
}
|
|
|
|
|
} else if (config.platform === Platform.Emulator) {
|
|
|
|
|
window.authType = AuthType.MasterKey;
|
|
|
|
|
explorer = new Explorer();
|
|
|
|
|
explorer.selfServeType(SelfServeType.none);
|
|
|
|
|
explorer.databaseAccount(emulatorAccount);
|
|
|
|
|
explorer.isAccountReady(true);
|
|
|
|
|
} else if (config.platform === Platform.Portal) {
|
2021-01-21 18:56:05 +00:00
|
|
|
window.authType = AuthType.AAD;
|
2021-01-20 15:15:01 +00:00
|
|
|
explorer = new Explorer();
|
|
|
|
|
|
|
|
|
|
// In development mode, try to load the iframe message from session storage.
|
|
|
|
|
// This allows webpack hot reload to funciton properly
|
|
|
|
|
if (process.env.NODE_ENV === "development") {
|
|
|
|
|
const initMessage = sessionStorage.getItem("portalDataExplorerInitMessage");
|
|
|
|
|
if (initMessage) {
|
|
|
|
|
const message = JSON.parse(initMessage);
|
|
|
|
|
console.warn("Loaded cached portal iframe message from session storage");
|
|
|
|
|
console.dir(message);
|
|
|
|
|
explorer.initDataExplorerWithFrameInputs(message);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener("message", explorer.handleMessage.bind(explorer), false);
|
|
|
|
|
}
|
|
|
|
|
applyExplorerBindings(explorer);
|
|
|
|
|
});
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="flexContainer">
|
|
|
|
|
<div
|
|
|
|
|
id="divSelfServe"
|
|
|
|
|
className="flexContainer"
|
|
|
|
|
data-bind="visible: selfServeType() && selfServeType() !== 'none', react: selfServeComponentAdapter"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
id="divExplorer"
|
|
|
|
|
data-bind="if: selfServeType() === 'none'"
|
|
|
|
|
className="flexContainer hideOverflows"
|
|
|
|
|
style={{ display: "none" }}
|
|
|
|
|
>
|
|
|
|
|
{/* Main Command Bar - Start */}
|
|
|
|
|
<div data-bind="react: commandBarComponentAdapter" />
|
|
|
|
|
{/* Main Command Bar - End */}
|
|
|
|
|
{/* Share url flyout - Start */}
|
|
|
|
|
<div
|
|
|
|
|
id="shareDataAccessFlyout"
|
|
|
|
|
className="shareDataAccessFlyout"
|
|
|
|
|
data-bind="visible: shouldShowShareDialogContents"
|
|
|
|
|
>
|
|
|
|
|
<div className="shareDataAccessFlyoutContent">
|
|
|
|
|
<div className="urlContainer">
|
|
|
|
|
<span className="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
|
|
|
|
|
className="toggles"
|
|
|
|
|
data-bind="event: { keydown: onToggleKeyDown }, visible: shareAccessData().readWriteUrl != null"
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
aria-label="Read-Write and Read toggle"
|
|
|
|
|
>
|
|
|
|
|
<div className="tab">
|
|
|
|
|
<input type="radio" className="radio" defaultValue="readwrite" />
|
|
|
|
|
<span
|
|
|
|
|
className="toggleSwitch"
|
|
|
|
|
role="presentation"
|
|
|
|
|
data-bind="click: toggleReadWrite, css:{ selectedToggle: isReadWriteToggled(), unselectedToggle: !isReadWriteToggled() }"
|
|
|
|
|
>
|
|
|
|
|
Read-Write
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="tab">
|
|
|
|
|
<input type="radio" className="radio" defaultValue="read" />
|
|
|
|
|
<span
|
|
|
|
|
className="toggleSwitch"
|
|
|
|
|
role="presentation"
|
|
|
|
|
data-bind="click: toggleRead, css:{ selectedToggle: isReadToggled(), unselectedToggle: !isReadToggled() }"
|
|
|
|
|
>
|
|
|
|
|
Read
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="urlSpace">
|
|
|
|
|
<input
|
|
|
|
|
id="shareUrlLink"
|
|
|
|
|
aria-label="Share url link"
|
|
|
|
|
className="shareLink"
|
|
|
|
|
type="text"
|
|
|
|
|
read-only={true}
|
|
|
|
|
data-bind="value: shareAccessUrl"
|
|
|
|
|
/>
|
|
|
|
|
<span
|
|
|
|
|
className="urlTokenCopyInfoTooltip"
|
|
|
|
|
data-bind="click: copyUrlLink, event: { keypress: onCopyUrlLinkKeyPress }"
|
|
|
|
|
aria-label="Copy url link"
|
|
|
|
|
role="button"
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
>
|
|
|
|
|
<img src={copyImage} alt="Copy link" />
|
|
|
|
|
<span className="urlTokenCopyTooltiptext" data-bind="text: shareUrlCopyHelperText" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{/* Share url flyout - End */}
|
|
|
|
|
{/* Collections Tree and Tabs - Begin */}
|
|
|
|
|
<div className="resourceTreeAndTabs">
|
|
|
|
|
{/* Collections Tree - Start */}
|
|
|
|
|
<div id="resourcetree" data-test="resourceTreeId" className="resourceTree">
|
|
|
|
|
<div className="collectionsTreeWithSplitter">
|
|
|
|
|
{/* Collections Tree Expanded - Start */}
|
|
|
|
|
<div
|
|
|
|
|
id="main"
|
|
|
|
|
className="main"
|
|
|
|
|
data-bind="
|
|
|
|
|
visible: isLeftPaneExpanded()"
|
|
|
|
|
>
|
|
|
|
|
{/* Collections Window - - Start */}
|
|
|
|
|
<div id="mainslide" className="flexContainer">
|
|
|
|
|
{/* Collections Window Title/Command Bar - Start */}
|
|
|
|
|
<div className="collectiontitle">
|
|
|
|
|
<div className="coltitle">
|
|
|
|
|
<span className="titlepadcol" data-bind="text: collectionTitle" />
|
|
|
|
|
<div className="float-right">
|
|
|
|
|
<span
|
|
|
|
|
className="padimgcolrefresh"
|
|
|
|
|
data-test="refreshTree"
|
|
|
|
|
role="button"
|
|
|
|
|
data-bind="
|
|
|
|
|
click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
aria-label="Refresh tree"
|
|
|
|
|
title="Refresh tree"
|
|
|
|
|
>
|
|
|
|
|
<img className="refreshcol" src={refreshImg} data-bind="attr: { alt: refreshTreeTitle }" />
|
|
|
|
|
</span>
|
|
|
|
|
<span
|
|
|
|
|
className="padimgcolrefresh1"
|
|
|
|
|
id="expandToggleLeftPaneButton"
|
|
|
|
|
role="button"
|
|
|
|
|
data-bind="
|
|
|
|
|
click: toggleLeftPaneExpanded, event: { keypress: toggleLeftPaneExpandedKeyPress }"
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
aria-label="Collapse Tree"
|
|
|
|
|
title="Collapse Tree"
|
|
|
|
|
>
|
|
|
|
|
<img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
style={{ overflowY: "auto" }}
|
|
|
|
|
data-bind="if: isAuthWithResourceToken(), react:resourceTreeForResourceToken"
|
|
|
|
|
/>
|
|
|
|
|
<div style={{ overflowY: "auto" }} data-bind="if: !isAuthWithResourceToken(), react:resourceTree" />
|
|
|
|
|
</div>
|
|
|
|
|
{/* Collections Window - End */}
|
|
|
|
|
</div>
|
|
|
|
|
{/* Collections Tree Expanded - End */}
|
|
|
|
|
{/* Collections Tree Collapsed - Start */}
|
|
|
|
|
<div
|
|
|
|
|
id="mini"
|
|
|
|
|
className="mini toggle-mini"
|
|
|
|
|
data-bind="visible: !isLeftPaneExpanded()
|
|
|
|
|
attr: { style: { width: collapsedResourceTreeWidth }}"
|
|
|
|
|
>
|
|
|
|
|
<div className="main-nav nav">
|
|
|
|
|
<ul className="nav">
|
|
|
|
|
<li
|
|
|
|
|
className="resourceTreeCollapse"
|
|
|
|
|
id="collapseToggleLeftPaneButton"
|
|
|
|
|
role="button"
|
|
|
|
|
data-bind="event: { keypress: toggleLeftPaneExpandedKeyPress }"
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
aria-label="Expand Tree"
|
|
|
|
|
>
|
|
|
|
|
<span
|
|
|
|
|
className="leftarrowCollapsed"
|
|
|
|
|
data-bind="
|
|
|
|
|
click: toggleLeftPaneExpanded"
|
|
|
|
|
>
|
|
|
|
|
<img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
|
|
|
|
|
</span>
|
|
|
|
|
<span
|
|
|
|
|
className="collectionCollapsed"
|
|
|
|
|
data-bind="
|
|
|
|
|
click: toggleLeftPaneExpanded"
|
|
|
|
|
>
|
|
|
|
|
<span
|
|
|
|
|
data-bind="
|
|
|
|
|
text: collectionTitle"
|
|
|
|
|
/>
|
|
|
|
|
</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{/* Collections Tree Collapsed - End */}
|
|
|
|
|
</div>
|
|
|
|
|
{/* Splitter - Start */}
|
|
|
|
|
<div className="splitter ui-resizable-handle ui-resizable-e" id="h_splitter1" />
|
|
|
|
|
{/* Splitter - End */}
|
|
|
|
|
</div>
|
|
|
|
|
{/* Collections Tree - End */}
|
|
|
|
|
<div
|
|
|
|
|
className="connectExplorerContainer"
|
|
|
|
|
data-bind="visible: !isRefreshingExplorer() && tabsManager.openedTabs().length === 0"
|
|
|
|
|
>
|
|
|
|
|
<form className="connectExplorerFormContainer">
|
|
|
|
|
<div className="connectExplorer" data-bind="react: splashScreenAdapter" />
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
className="tabsManagerContainer"
|
|
|
|
|
data-bind='component: { name: "tabs-manager", params: {data: tabsManager} }'
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
{/* Collections Tree and Tabs - End */}
|
|
|
|
|
<div
|
|
|
|
|
className="dataExplorerErrorConsoleContainer"
|
|
|
|
|
role="contentinfo"
|
|
|
|
|
aria-label="Notification console"
|
|
|
|
|
id="explorerNotificationConsole"
|
|
|
|
|
data-bind="react: notificationConsoleComponentAdapter"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
{/* Global loader - Start */}
|
|
|
|
|
|
|
|
|
|
<div className="splashLoaderContainer" data-bind="visible: isRefreshingExplorer">
|
|
|
|
|
<div className="splashLoaderContentContainer">
|
|
|
|
|
<div data-bind="visible: selfServeType() === undefined, react: selfServeLoadingComponentAdapter"></div>
|
|
|
|
|
<div data-bind="if: selfServeType() === 'none'" style={{ display: "none" }}>
|
|
|
|
|
<p className="connectExplorerContent">
|
|
|
|
|
<img src={hdeConnectImage} alt="Azure Cosmos DB" />
|
|
|
|
|
</p>
|
|
|
|
|
<p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
|
|
|
|
|
Welcome to Azure Cosmos DB
|
|
|
|
|
</p>
|
|
|
|
|
<p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
|
|
|
|
|
Connecting...
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{/* Global loader - End */}
|
|
|
|
|
<div data-bind="react:uploadItemsPaneAdapter" />
|
|
|
|
|
<div data-bind='component: { name: "add-database-pane", params: {data: addDatabasePane} }' />
|
|
|
|
|
<div data-bind='component: { name: "add-collection-pane", params: { data: addCollectionPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "delete-collection-confirmation-pane", params: { data: deleteCollectionConfirmationPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "delete-database-confirmation-pane", params: { data: deleteDatabaseConfirmationPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "graph-new-vertex-pane", params: { data: newVertexPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "graph-styling-pane", params: { data: graphStylingPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "table-add-entity-pane", params: { data: addTableEntityPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "table-edit-entity-pane", params: { data: editTableEntityPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "table-column-options-pane", params: { data: tableColumnOptionsPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "table-query-select-pane", params: { data: querySelectPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "cassandra-add-collection-pane", params: { data: cassandraAddCollectionPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "settings-pane", params: { data: settingsPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "upload-items-pane", params: { data: uploadItemsPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "load-query-pane", params: { data: loadQueryPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "execute-sproc-params-pane", params: { data: executeSprocParamsPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "renew-adhoc-access-pane", params: { data: renewAdHocAccessPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "save-query-pane", params: { data: saveQueryPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "browse-queries-pane", params: { data: browseQueriesPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "upload-file-pane", params: { data: uploadFilePane} }' />
|
|
|
|
|
<div data-bind='component: { name: "string-input-pane", params: { data: stringInputPane} }' />
|
|
|
|
|
<div data-bind='component: { name: "setup-notebooks-pane", params: { data: setupNotebooksPane} }' />
|
|
|
|
|
<KOCommentIfStart if="isGitHubPaneEnabled" />
|
|
|
|
|
<div data-bind='component: { name: "github-repos-pane", params: { data: gitHubReposPane } }' />
|
|
|
|
|
<KOCommentEnd />
|
|
|
|
|
<KOCommentIfStart if="isPublishNotebookPaneEnabled" />
|
|
|
|
|
<div data-bind="react: publishNotebookPaneAdapter" />
|
|
|
|
|
<KOCommentEnd />
|
|
|
|
|
<KOCommentIfStart if="isCopyNotebookPaneEnabled" />
|
|
|
|
|
<div data-bind="react: copyNotebookPaneAdapter" />
|
|
|
|
|
<KOCommentEnd />
|
|
|
|
|
{/* Global access token expiration dialog - Start */}
|
|
|
|
|
<div
|
|
|
|
|
id="dataAccessTokenModal"
|
|
|
|
|
className="dataAccessTokenModal"
|
|
|
|
|
style={{ display: "none" }}
|
|
|
|
|
data-bind="visible: shouldShowDataAccessExpiryDialog"
|
|
|
|
|
>
|
|
|
|
|
<div className="dataAccessTokenModalContent">
|
|
|
|
|
<p className="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"
|
|
|
|
|
className="dataAccessTokenModal"
|
|
|
|
|
style={{ display: "none" }}
|
|
|
|
|
data-bind="visible: shouldShowContextSwitchPrompt"
|
|
|
|
|
>
|
|
|
|
|
<div className="dataAccessTokenModalContent">
|
|
|
|
|
<p className="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 className="dataAccessTokenExpireText">Proceed anyway?</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div data-bind="react: dialogComponentAdapter" />
|
|
|
|
|
<div data-bind="react: addSynapseLinkDialog" />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
ReactDOM.render(<App />, document.body);
|
