mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-21 09:51:11 +00:00
Test Explorer Improvements (#541)
This commit is contained in:
Steve Faulkner
GitHub
@@ -1,10 +1,10 @@
|
||||
import * as Cosmos from "@azure/cosmos";
|
||||
import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
|
||||
import { configContext, Platform } from "../ConfigContext";
|
||||
import { getErrorMessage } from "./ErrorHandlingUtils";
|
||||
import { userContext } from "../UserContext";
|
||||
import { logConsoleError } from "../Utils/NotificationConsoleUtils";
|
||||
import { EmulatorMasterKey, HttpHeaders } from "./Constants";
|
||||
import { userContext } from "../UserContext";
|
||||
import { getErrorMessage } from "./ErrorHandlingUtils";
|
||||
|
||||
const _global = typeof self === "undefined" ? window : self;
|
||||
|
||||
|
||||
@@ -775,96 +775,88 @@ export default class Explorer {
|
||||
$(document.body).click(() => $(".commandDropdownContainer").hide());
|
||||
});
|
||||
|
||||
// TODO move this to API customization class
|
||||
this.defaultExperience.subscribe((defaultExperience) => {
|
||||
const defaultExperienceNormalizedString = (
|
||||
defaultExperience || Constants.DefaultAccountExperience.Default
|
||||
).toLowerCase();
|
||||
|
||||
switch (defaultExperienceNormalizedString) {
|
||||
case Constants.DefaultAccountExperience.DocumentDB.toLowerCase():
|
||||
this.addCollectionText("New Container");
|
||||
this.addDatabaseText("New Database");
|
||||
this.collectionTitle("SQL API");
|
||||
this.collectionTreeNodeAltText("Container");
|
||||
this.deleteCollectionText("Delete Container");
|
||||
this.deleteDatabaseText("Delete Database");
|
||||
this.addCollectionPane.title("Add Container");
|
||||
this.addCollectionPane.collectionIdTitle("Container id");
|
||||
this.addCollectionPane.collectionWithThroughputInSharedTitle(
|
||||
"Provision dedicated throughput for this container"
|
||||
);
|
||||
this.deleteCollectionConfirmationPane.title("Delete Container");
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the container id");
|
||||
this.refreshTreeTitle("Refresh containers");
|
||||
break;
|
||||
case Constants.DefaultAccountExperience.MongoDB.toLowerCase():
|
||||
case Constants.DefaultAccountExperience.ApiForMongoDB.toLowerCase():
|
||||
this.addCollectionText("New Collection");
|
||||
this.addDatabaseText("New Database");
|
||||
this.collectionTitle("Collections");
|
||||
this.collectionTreeNodeAltText("Collection");
|
||||
this.deleteCollectionText("Delete Collection");
|
||||
this.deleteDatabaseText("Delete Database");
|
||||
this.addCollectionPane.title("Add Collection");
|
||||
this.addCollectionPane.collectionIdTitle("Collection id");
|
||||
this.addCollectionPane.collectionWithThroughputInSharedTitle(
|
||||
"Provision dedicated throughput for this collection"
|
||||
);
|
||||
this.refreshTreeTitle("Refresh collections");
|
||||
break;
|
||||
case Constants.DefaultAccountExperience.Graph.toLowerCase():
|
||||
this.addCollectionText("New Graph");
|
||||
this.addDatabaseText("New Database");
|
||||
this.deleteCollectionText("Delete Graph");
|
||||
this.deleteDatabaseText("Delete Database");
|
||||
this.collectionTitle("Gremlin API");
|
||||
this.collectionTreeNodeAltText("Graph");
|
||||
this.addCollectionPane.title("Add Graph");
|
||||
this.addCollectionPane.collectionIdTitle("Graph id");
|
||||
this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this graph");
|
||||
this.deleteCollectionConfirmationPane.title("Delete Graph");
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the graph id");
|
||||
this.refreshTreeTitle("Refresh graphs");
|
||||
break;
|
||||
case Constants.DefaultAccountExperience.Table.toLowerCase():
|
||||
this.addCollectionText("New Table");
|
||||
this.addDatabaseText("New Database");
|
||||
this.deleteCollectionText("Delete Table");
|
||||
this.deleteDatabaseText("Delete Database");
|
||||
this.collectionTitle("Azure Table API");
|
||||
this.collectionTreeNodeAltText("Table");
|
||||
this.addCollectionPane.title("Add Table");
|
||||
this.addCollectionPane.collectionIdTitle("Table id");
|
||||
this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
|
||||
this.refreshTreeTitle("Refresh tables");
|
||||
this.addTableEntityPane.title("Add Table Entity");
|
||||
this.editTableEntityPane.title("Edit Table Entity");
|
||||
this.deleteCollectionConfirmationPane.title("Delete Table");
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
|
||||
this.tableDataClient = new TablesAPIDataClient();
|
||||
break;
|
||||
case Constants.DefaultAccountExperience.Cassandra.toLowerCase():
|
||||
this.addCollectionText("New Table");
|
||||
this.addDatabaseText("New Keyspace");
|
||||
this.deleteCollectionText("Delete Table");
|
||||
this.deleteDatabaseText("Delete Keyspace");
|
||||
this.collectionTitle("Cassandra API");
|
||||
this.collectionTreeNodeAltText("Table");
|
||||
this.addCollectionPane.title("Add Table");
|
||||
this.addCollectionPane.collectionIdTitle("Table id");
|
||||
this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
|
||||
this.refreshTreeTitle("Refresh tables");
|
||||
this.addTableEntityPane.title("Add Table Row");
|
||||
this.editTableEntityPane.title("Edit Table Row");
|
||||
this.deleteCollectionConfirmationPane.title("Delete Table");
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
|
||||
this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
|
||||
this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
|
||||
this.tableDataClient = new CassandraAPIDataClient();
|
||||
break;
|
||||
}
|
||||
});
|
||||
switch (userContext.apiType) {
|
||||
case "SQL":
|
||||
this.addCollectionText("New Container");
|
||||
this.addDatabaseText("New Database");
|
||||
this.collectionTitle("SQL API");
|
||||
this.collectionTreeNodeAltText("Container");
|
||||
this.deleteCollectionText("Delete Container");
|
||||
this.deleteDatabaseText("Delete Database");
|
||||
this.addCollectionPane.title("Add Container");
|
||||
this.addCollectionPane.collectionIdTitle("Container id");
|
||||
this.addCollectionPane.collectionWithThroughputInSharedTitle(
|
||||
"Provision dedicated throughput for this container"
|
||||
);
|
||||
this.deleteCollectionConfirmationPane.title("Delete Container");
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the container id");
|
||||
this.refreshTreeTitle("Refresh containers");
|
||||
break;
|
||||
case "Mongo":
|
||||
this.addCollectionText("New Collection");
|
||||
this.addDatabaseText("New Database");
|
||||
this.collectionTitle("Collections");
|
||||
this.collectionTreeNodeAltText("Collection");
|
||||
this.deleteCollectionText("Delete Collection");
|
||||
this.deleteDatabaseText("Delete Database");
|
||||
this.addCollectionPane.title("Add Collection");
|
||||
this.addCollectionPane.collectionIdTitle("Collection id");
|
||||
this.addCollectionPane.collectionWithThroughputInSharedTitle(
|
||||
"Provision dedicated throughput for this collection"
|
||||
);
|
||||
this.refreshTreeTitle("Refresh collections");
|
||||
break;
|
||||
case "Gremlin":
|
||||
this.addCollectionText("New Graph");
|
||||
this.addDatabaseText("New Database");
|
||||
this.deleteCollectionText("Delete Graph");
|
||||
this.deleteDatabaseText("Delete Database");
|
||||
this.collectionTitle("Gremlin API");
|
||||
this.collectionTreeNodeAltText("Graph");
|
||||
this.addCollectionPane.title("Add Graph");
|
||||
this.addCollectionPane.collectionIdTitle("Graph id");
|
||||
this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this graph");
|
||||
this.deleteCollectionConfirmationPane.title("Delete Graph");
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the graph id");
|
||||
this.refreshTreeTitle("Refresh graphs");
|
||||
break;
|
||||
case "Tables":
|
||||
this.addCollectionText("New Table");
|
||||
this.addDatabaseText("New Database");
|
||||
this.deleteCollectionText("Delete Table");
|
||||
this.deleteDatabaseText("Delete Database");
|
||||
this.collectionTitle("Azure Table API");
|
||||
this.collectionTreeNodeAltText("Table");
|
||||
this.addCollectionPane.title("Add Table");
|
||||
this.addCollectionPane.collectionIdTitle("Table id");
|
||||
this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
|
||||
this.refreshTreeTitle("Refresh tables");
|
||||
this.addTableEntityPane.title("Add Table Entity");
|
||||
this.editTableEntityPane.title("Edit Table Entity");
|
||||
this.deleteCollectionConfirmationPane.title("Delete Table");
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
|
||||
this.tableDataClient = new TablesAPIDataClient();
|
||||
break;
|
||||
case "Cassandra":
|
||||
this.addCollectionText("New Table");
|
||||
this.addDatabaseText("New Keyspace");
|
||||
this.deleteCollectionText("Delete Table");
|
||||
this.deleteDatabaseText("Delete Keyspace");
|
||||
this.collectionTitle("Cassandra API");
|
||||
this.collectionTreeNodeAltText("Table");
|
||||
this.addCollectionPane.title("Add Table");
|
||||
this.addCollectionPane.collectionIdTitle("Table id");
|
||||
this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
|
||||
this.refreshTreeTitle("Refresh tables");
|
||||
this.addTableEntityPane.title("Add Table Row");
|
||||
this.editTableEntityPane.title("Edit Table Row");
|
||||
this.deleteCollectionConfirmationPane.title("Delete Table");
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
|
||||
this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
|
||||
this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
|
||||
this.tableDataClient = new CassandraAPIDataClient();
|
||||
break;
|
||||
}
|
||||
|
||||
this.commandBarComponentAdapter = new CommandBarComponentAdapter(this);
|
||||
|
||||
|
||||
149
src/Main.tsx
149
src/Main.tsx
@@ -1,74 +1,70 @@
|
||||
// CSS Dependencies
|
||||
import "abort-controller/polyfill";
|
||||
import "babel-polyfill";
|
||||
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 "./Explorer/Panes/PanelComponent.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 "es6-object-assign/auto";
|
||||
import "es6-symbol/implement";
|
||||
import "object.entries/auto";
|
||||
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
|
||||
import "promise-polyfill/src/polyfill";
|
||||
import "promise.prototype.finally/auto";
|
||||
import React, { useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "url-polyfill/url-polyfill.min";
|
||||
import "webcrypto-liner/build/webcrypto-liner.shim.min";
|
||||
import "whatwg-fetch";
|
||||
import "../externals/jquery-ui.min.css";
|
||||
import "../externals/jquery-ui.min.js";
|
||||
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/SplashScreen.less";
|
||||
import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
|
||||
|
||||
import "../externals/jquery.dataTables.min.css";
|
||||
import "../externals/jquery.typeahead.min.css";
|
||||
import "../externals/jquery.typeahead.min.js";
|
||||
// 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";
|
||||
|
||||
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
|
||||
import { ExplorerParams } from "./Explorer/Explorer";
|
||||
import React, { useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
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 refreshImg from "../images/refresh-cosmos.svg";
|
||||
import "../less/documentDB.less";
|
||||
import "../less/forms.less";
|
||||
import "../less/infobox.less";
|
||||
import "../less/menus.less";
|
||||
import "../less/messagebox.less";
|
||||
import "../less/resourceTree.less";
|
||||
import "../less/TableStyles/CustomizeColumns.less";
|
||||
import "../less/TableStyles/EntityEditor.less";
|
||||
import "../less/TableStyles/fulldatatables.less";
|
||||
import "../less/TableStyles/queryBuilder.less";
|
||||
import "../less/tree.less";
|
||||
import "./Explorer/Controls/Accordion/AccordionComponent.less";
|
||||
import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
|
||||
import { Dialog, DialogProps } from "./Explorer/Controls/Dialog";
|
||||
import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
|
||||
import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
|
||||
import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
|
||||
import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
|
||||
import "./Explorer/Controls/TreeComponent/treeComponent.less";
|
||||
import { ExplorerParams } from "./Explorer/Explorer";
|
||||
import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
|
||||
import "./Explorer/Graph/NewVertexComponent/newVertexComponent.less";
|
||||
import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
|
||||
import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
|
||||
import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
|
||||
import { NotificationConsoleComponent } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import "./Explorer/Panes/GraphNewVertexPane.less";
|
||||
import "./Explorer/Panes/PanelComponent.less";
|
||||
import { PanelContainerComponent } from "./Explorer/Panes/PanelContainerComponent";
|
||||
import { SplashScreen } from "./Explorer/SplashScreen/SplashScreen";
|
||||
import "./Explorer/SplashScreen/SplashScreen.less";
|
||||
import "./Explorer/Tabs/QueryTab.less";
|
||||
import { useConfig } from "./hooks/useConfig";
|
||||
import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
|
||||
import { useSidePanel } from "./hooks/useSidePanel";
|
||||
import { NotificationConsoleComponent } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import { PanelContainerComponent } from "./Explorer/Panes/PanelContainerComponent";
|
||||
import { SplashScreen } from "./Explorer/SplashScreen/SplashScreen";
|
||||
import { Dialog, DialogProps } from "./Explorer/Controls/Dialog";
|
||||
import { KOCommentEnd, KOCommentIfStart } from "./koComment";
|
||||
import "./Libs/is-integer-polyfill";
|
||||
import "./Libs/jquery";
|
||||
import "./Shared/appInsights";
|
||||
|
||||
initializeIcons();
|
||||
|
||||
@@ -103,6 +99,10 @@ const App: React.FunctionComponent = () => {
|
||||
const config = useConfig();
|
||||
const explorer = useKnockoutExplorer(config?.platform, explorerParams);
|
||||
|
||||
if (!explorer) {
|
||||
return <LoadingExplorer />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flexContainer">
|
||||
<div id="divExplorer" className="flexContainer hideOverflows" style={{ display: "none" }}>
|
||||
@@ -236,21 +236,6 @@ const App: React.FunctionComponent = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Global loader - Start */}
|
||||
<div className="splashLoaderContainer" data-bind="visible: isRefreshingExplorer">
|
||||
<div className="splashLoaderContentContainer">
|
||||
<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>
|
||||
{/* Global loader - End */}
|
||||
<PanelContainerComponent
|
||||
isOpen={isPanelOpen}
|
||||
panelContent={panelContent}
|
||||
@@ -294,3 +279,21 @@ const App: React.FunctionComponent = () => {
|
||||
};
|
||||
|
||||
ReactDOM.render(<App />, document.body);
|
||||
|
||||
function LoadingExplorer(): JSX.Element {
|
||||
return (
|
||||
<div className="splashLoaderContainer">
|
||||
<div className="splashLoaderContentContainer">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { applyExplorerBindings } from "../applyExplorerBindings";
|
||||
import { AuthType } from "../AuthType";
|
||||
import { AccountKind, DefaultAccountExperience } from "../Common/Constants";
|
||||
@@ -32,53 +32,65 @@ import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
|
||||
// This hook will create a new instance of Explorer.ts and bind it to the DOM
|
||||
// This hook has a LOT of magic, but ideally we can delete it once we have removed KO and switched entirely to React
|
||||
// Pleas tread carefully :)
|
||||
let explorer: Explorer;
|
||||
|
||||
export function useKnockoutExplorer(platform: Platform, explorerParams: ExplorerParams): Explorer {
|
||||
explorer = explorer || new Explorer(explorerParams);
|
||||
const [explorer, setExplorer] = useState<Explorer>();
|
||||
|
||||
useEffect(() => {
|
||||
const effect = async () => {
|
||||
if (platform) {
|
||||
if (platform === Platform.Hosted) {
|
||||
await configureHosted();
|
||||
applyExplorerBindings(explorer);
|
||||
const explorer = await configureHosted(explorerParams);
|
||||
setExplorer(explorer);
|
||||
} else if (platform === Platform.Emulator) {
|
||||
configureEmulator();
|
||||
applyExplorerBindings(explorer);
|
||||
const explorer = configureEmulator(explorerParams);
|
||||
setExplorer(explorer);
|
||||
} else if (platform === Platform.Portal) {
|
||||
configurePortal();
|
||||
const explorer = await configurePortal(explorerParams);
|
||||
setExplorer(explorer);
|
||||
}
|
||||
}
|
||||
};
|
||||
effect();
|
||||
}, [platform]);
|
||||
|
||||
useEffect(() => {
|
||||
if (explorer) {
|
||||
applyExplorerBindings(explorer);
|
||||
}
|
||||
}, [explorer]);
|
||||
|
||||
return explorer;
|
||||
}
|
||||
|
||||
async function configureHosted() {
|
||||
async function configureHosted(explorerParams: ExplorerParams): Promise<Explorer> {
|
||||
const win = (window as unknown) as HostedExplorerChildFrame;
|
||||
if (win.hostedConfig.authType === AuthType.EncryptedToken) {
|
||||
configureHostedWithEncryptedToken(win.hostedConfig);
|
||||
return configureHostedWithEncryptedToken(win.hostedConfig, explorerParams);
|
||||
} else if (win.hostedConfig.authType === AuthType.ResourceToken) {
|
||||
configureHostedWithResourceToken(win.hostedConfig);
|
||||
return configureHostedWithResourceToken(win.hostedConfig, explorerParams);
|
||||
} else if (win.hostedConfig.authType === AuthType.ConnectionString) {
|
||||
configureHostedWithConnectionString(win.hostedConfig);
|
||||
return configureHostedWithConnectionString(win.hostedConfig, explorerParams);
|
||||
} else if (win.hostedConfig.authType === AuthType.AAD) {
|
||||
await configureHostedWithAAD(win.hostedConfig);
|
||||
return configureHostedWithAAD(win.hostedConfig, explorerParams);
|
||||
}
|
||||
throw new Error(`Unknown hosted config: ${win.hostedConfig}`);
|
||||
}
|
||||
|
||||
async function configureHostedWithAAD(config: AAD) {
|
||||
async function configureHostedWithAAD(config: AAD, explorerParams: ExplorerParams): Promise<Explorer> {
|
||||
const account = config.databaseAccount;
|
||||
const accountResourceId = account.id;
|
||||
const subscriptionId = accountResourceId && accountResourceId.split("subscriptions/")[1].split("/")[0];
|
||||
const resourceGroup = accountResourceId && accountResourceId.split("resourceGroups/")[1].split("/")[0];
|
||||
updateUserContext({
|
||||
subscriptionId,
|
||||
resourceGroup,
|
||||
authType: AuthType.AAD,
|
||||
authorizationToken: `Bearer ${config.authorizationToken}`,
|
||||
databaseAccount: config.databaseAccount,
|
||||
});
|
||||
const keys = await listKeys(subscriptionId, resourceGroup, account.name);
|
||||
const explorer = new Explorer(explorerParams);
|
||||
explorer.configure({
|
||||
databaseAccount: account,
|
||||
subscriptionId,
|
||||
@@ -87,9 +99,10 @@ async function configureHostedWithAAD(config: AAD) {
|
||||
authorizationToken: `Bearer ${config.authorizationToken}`,
|
||||
features: extractFeatures(),
|
||||
});
|
||||
return explorer;
|
||||
}
|
||||
|
||||
function configureHostedWithConnectionString(config: ConnectionString) {
|
||||
function configureHostedWithConnectionString(config: ConnectionString, explorerParams: ExplorerParams): Explorer {
|
||||
const apiExperience = DefaultExperienceUtility.getDefaultExperienceFromApiKind(config.encryptedTokenMetadata.apiKind);
|
||||
const databaseAccount = {
|
||||
id: "",
|
||||
@@ -106,14 +119,16 @@ function configureHostedWithConnectionString(config: ConnectionString) {
|
||||
accessToken: encodeURIComponent(config.encryptedToken),
|
||||
databaseAccount,
|
||||
});
|
||||
const explorer = new Explorer(explorerParams);
|
||||
explorer.configure({
|
||||
databaseAccount,
|
||||
masterKey: config.masterKey,
|
||||
features: extractFeatures(),
|
||||
});
|
||||
return explorer;
|
||||
}
|
||||
|
||||
function configureHostedWithResourceToken(config: ResourceToken) {
|
||||
function configureHostedWithResourceToken(config: ResourceToken, explorerParams: ExplorerParams): Explorer {
|
||||
const parsedResourceToken = parseResourceTokenConnectionString(config.resourceToken);
|
||||
const databaseAccount = {
|
||||
id: "",
|
||||
@@ -131,6 +146,7 @@ function configureHostedWithResourceToken(config: ResourceToken) {
|
||||
resourceToken: parsedResourceToken.resourceToken,
|
||||
endpoint: parsedResourceToken.accountEndpoint,
|
||||
});
|
||||
const explorer = new Explorer(explorerParams);
|
||||
explorer.resourceTokenDatabaseId(parsedResourceToken.databaseId);
|
||||
explorer.resourceTokenCollectionId(parsedResourceToken.collectionId);
|
||||
if (parsedResourceToken.partitionKey) {
|
||||
@@ -142,9 +158,10 @@ function configureHostedWithResourceToken(config: ResourceToken) {
|
||||
isAuthWithresourceToken: true,
|
||||
});
|
||||
explorer.isRefreshingExplorer(false);
|
||||
return explorer;
|
||||
}
|
||||
|
||||
function configureHostedWithEncryptedToken(config: EncryptedToken) {
|
||||
function configureHostedWithEncryptedToken(config: EncryptedToken, explorerParams: ExplorerParams): Explorer {
|
||||
updateUserContext({
|
||||
authType: AuthType.EncryptedToken,
|
||||
accessToken: encodeURIComponent(config.encryptedToken),
|
||||
@@ -152,6 +169,7 @@ function configureHostedWithEncryptedToken(config: EncryptedToken) {
|
||||
const apiExperience: string = DefaultExperienceUtility.getDefaultExperienceFromApiKind(
|
||||
config.encryptedTokenMetadata.apiKind
|
||||
);
|
||||
const explorer = new Explorer(explorerParams);
|
||||
explorer.configure({
|
||||
databaseAccount: {
|
||||
id: "",
|
||||
@@ -162,91 +180,98 @@ function configureHostedWithEncryptedToken(config: EncryptedToken) {
|
||||
},
|
||||
features: extractFeatures(),
|
||||
});
|
||||
return explorer;
|
||||
}
|
||||
|
||||
function configureEmulator() {
|
||||
function configureEmulator(explorerParams: ExplorerParams): Explorer {
|
||||
updateUserContext({
|
||||
databaseAccount: emulatorAccount,
|
||||
authType: AuthType.MasterKey,
|
||||
});
|
||||
const explorer = new Explorer(explorerParams);
|
||||
explorer.databaseAccount(emulatorAccount);
|
||||
explorer.isAccountReady(true);
|
||||
return explorer;
|
||||
}
|
||||
|
||||
function configurePortal() {
|
||||
async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer> {
|
||||
updateUserContext({
|
||||
authType: AuthType.AAD,
|
||||
});
|
||||
// In development mode, try to load the iframe message from session storage.
|
||||
// This allows webpack hot reload to function properly in the portal
|
||||
if (process.env.NODE_ENV === "development" && !window.location.search.includes("disablePortalInitCache")) {
|
||||
const initMessage = sessionStorage.getItem("portalDataExplorerInitMessage");
|
||||
if (initMessage) {
|
||||
const message = JSON.parse(initMessage);
|
||||
console.warn(
|
||||
"Loaded cached portal iframe message from session storage. Do a full page refresh to get a new message"
|
||||
);
|
||||
console.dir(message);
|
||||
explorer.configure(message);
|
||||
applyExplorerBindings(explorer);
|
||||
return new Promise((resolve) => {
|
||||
// In development mode, try to load the iframe message from session storage.
|
||||
// This allows webpack hot reload to function properly in the portal
|
||||
if (process.env.NODE_ENV === "development" && !window.location.search.includes("disablePortalInitCache")) {
|
||||
const initMessage = sessionStorage.getItem("portalDataExplorerInitMessage");
|
||||
if (initMessage) {
|
||||
const message = JSON.parse(initMessage);
|
||||
console.warn(
|
||||
"Loaded cached portal iframe message from session storage. Do a full page refresh to get a new message"
|
||||
);
|
||||
console.dir(message);
|
||||
const explorer = new Explorer(explorerParams);
|
||||
explorer.configure(message);
|
||||
resolve(explorer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// In the Portal, configuration of Explorer happens via iframe message
|
||||
window.addEventListener(
|
||||
"message",
|
||||
(event) => {
|
||||
if (isInvalidParentFrameOrigin(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!shouldProcessMessage(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check for init message
|
||||
const message: PortalMessage = event.data?.data;
|
||||
const inputs = message?.inputs;
|
||||
const openAction = message?.openAction;
|
||||
if (inputs) {
|
||||
if (
|
||||
configContext.BACKEND_ENDPOINT &&
|
||||
configContext.platform === Platform.Portal &&
|
||||
process.env.NODE_ENV === "development"
|
||||
) {
|
||||
inputs.extensionEndpoint = configContext.PROXY_PATH;
|
||||
// In the Portal, configuration of Explorer happens via iframe message
|
||||
window.addEventListener(
|
||||
"message",
|
||||
(event) => {
|
||||
if (isInvalidParentFrameOrigin(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const authorizationToken = inputs.authorizationToken || "";
|
||||
const masterKey = inputs.masterKey || "";
|
||||
const databaseAccount = inputs.databaseAccount;
|
||||
|
||||
updateConfigContext({
|
||||
BACKEND_ENDPOINT: inputs.extensionEndpoint || configContext.BACKEND_ENDPOINT,
|
||||
ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
|
||||
});
|
||||
|
||||
updateUserContext({
|
||||
authorizationToken,
|
||||
masterKey,
|
||||
databaseAccount,
|
||||
resourceGroup: inputs.resourceGroup,
|
||||
subscriptionId: inputs.subscriptionId,
|
||||
subscriptionType: inputs.subscriptionType,
|
||||
quotaId: inputs.quotaId,
|
||||
});
|
||||
|
||||
explorer.configure(inputs);
|
||||
applyExplorerBindings(explorer);
|
||||
if (openAction) {
|
||||
handleOpenAction(openAction, explorer.nonSystemDatabases(), explorer);
|
||||
if (!shouldProcessMessage(event)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
sendMessage("ready");
|
||||
// Check for init message
|
||||
const message: PortalMessage = event.data?.data;
|
||||
const inputs = message?.inputs;
|
||||
const openAction = message?.openAction;
|
||||
if (inputs) {
|
||||
if (
|
||||
configContext.BACKEND_ENDPOINT &&
|
||||
configContext.platform === Platform.Portal &&
|
||||
process.env.NODE_ENV === "development"
|
||||
) {
|
||||
inputs.extensionEndpoint = configContext.PROXY_PATH;
|
||||
}
|
||||
|
||||
const authorizationToken = inputs.authorizationToken || "";
|
||||
const masterKey = inputs.masterKey || "";
|
||||
const databaseAccount = inputs.databaseAccount;
|
||||
|
||||
updateConfigContext({
|
||||
BACKEND_ENDPOINT: inputs.extensionEndpoint || configContext.BACKEND_ENDPOINT,
|
||||
ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
|
||||
});
|
||||
|
||||
updateUserContext({
|
||||
authorizationToken,
|
||||
masterKey,
|
||||
databaseAccount,
|
||||
resourceGroup: inputs.resourceGroup,
|
||||
subscriptionId: inputs.subscriptionId,
|
||||
subscriptionType: inputs.subscriptionType,
|
||||
quotaId: inputs.quotaId,
|
||||
});
|
||||
|
||||
const explorer = new Explorer(explorerParams);
|
||||
explorer.configure(inputs);
|
||||
resolve(explorer);
|
||||
if (openAction) {
|
||||
handleOpenAction(openAction, explorer.nonSystemDatabases(), explorer);
|
||||
}
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
sendMessage("ready");
|
||||
});
|
||||
}
|
||||
|
||||
function shouldProcessMessage(event: MessageEvent): boolean {
|
||||
|
||||
Reference in New Issue
Block a user