2021-01-20 15:15:01 +00:00
|
|
|
// CSS Dependencies
|
2021-05-06 00:26:03 +01:00
|
|
|
import { initializeIcons } from "@fluentui/react";
|
2021-01-20 15:15:01 +00:00
|
|
|
import "bootstrap/dist/css/bootstrap.css";
|
2021-03-15 03:53:16 +00:00
|
|
|
import React, { useState } from "react";
|
|
|
|
import ReactDOM from "react-dom";
|
|
|
|
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 "../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 hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
|
2021-05-17 16:40:23 +01:00
|
|
|
import arrowLeftImg from "../images/imgarrowlefticon.svg";
|
|
|
|
import refreshImg from "../images/refresh-cosmos.svg";
|
2021-01-20 15:15:01 +00:00
|
|
|
import "../less/documentDB.less";
|
|
|
|
import "../less/forms.less";
|
|
|
|
import "../less/infobox.less";
|
2021-03-15 03:53:16 +00:00
|
|
|
import "../less/menus.less";
|
2021-01-20 15:15:01 +00:00
|
|
|
import "../less/messagebox.less";
|
2021-03-15 03:53:16 +00:00
|
|
|
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";
|
2021-05-17 16:40:23 +01:00
|
|
|
import { AuthType } from "./AuthType";
|
2021-03-15 03:53:16 +00:00
|
|
|
import "./Explorer/Controls/Accordion/AccordionComponent.less";
|
2021-01-20 15:15:01 +00:00
|
|
|
import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
|
2021-03-15 03:53:16 +00:00
|
|
|
import { Dialog, DialogProps } from "./Explorer/Controls/Dialog";
|
2021-01-20 15:15:01 +00:00
|
|
|
import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
|
2021-03-15 03:53:16 +00:00
|
|
|
import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
|
2021-01-20 15:15:01 +00:00
|
|
|
import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
|
2021-03-15 03:53:16 +00:00
|
|
|
import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
|
|
|
|
import "./Explorer/Controls/TreeComponent/treeComponent.less";
|
|
|
|
import { ExplorerParams } from "./Explorer/Explorer";
|
2021-01-20 15:15:01 +00:00
|
|
|
import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
|
2021-03-15 03:53:16 +00:00
|
|
|
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/PanelComponent.less";
|
|
|
|
import { PanelContainerComponent } from "./Explorer/Panes/PanelContainerComponent";
|
|
|
|
import { SplashScreen } from "./Explorer/SplashScreen/SplashScreen";
|
2021-02-23 19:15:57 +00:00
|
|
|
import "./Explorer/SplashScreen/SplashScreen.less";
|
2021-03-15 03:53:16 +00:00
|
|
|
import "./Explorer/Tabs/QueryTab.less";
|
2021-04-19 21:11:48 +01:00
|
|
|
import { Tabs } from "./Explorer/Tabs/Tabs";
|
2021-01-25 19:56:15 +00:00
|
|
|
import { useConfig } from "./hooks/useConfig";
|
|
|
|
import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
|
2021-02-10 21:44:00 +00:00
|
|
|
import { useSidePanel } from "./hooks/useSidePanel";
|
2021-04-07 17:15:00 +01:00
|
|
|
import { useTabs } from "./hooks/useTabs";
|
2021-03-15 03:53:16 +00:00
|
|
|
import "./Libs/jquery";
|
|
|
|
import "./Shared/appInsights";
|
2021-05-17 16:40:23 +01:00
|
|
|
import { userContext } from "./UserContext";
|
2021-01-20 15:15:01 +00:00
|
|
|
|
2021-01-25 19:56:15 +00:00
|
|
|
initializeIcons();
|
2021-01-20 15:15:01 +00:00
|
|
|
|
2021-01-25 19:56:15 +00:00
|
|
|
const App: React.FunctionComponent = () => {
|
2021-01-26 23:32:37 +00:00
|
|
|
const [isNotificationConsoleExpanded, setIsNotificationConsoleExpanded] = useState(false);
|
|
|
|
const [notificationConsoleData, setNotificationConsoleData] = useState(undefined);
|
|
|
|
//TODO: Refactor so we don't need to pass the id to remove a console data
|
|
|
|
const [inProgressConsoleDataIdToBeDeleted, setInProgressConsoleDataIdToBeDeleted] = useState("");
|
2021-02-10 21:44:00 +00:00
|
|
|
|
2021-02-25 00:41:28 +00:00
|
|
|
const [dialogProps, setDialogProps] = useState<DialogProps>();
|
|
|
|
const [showDialog, setShowDialog] = useState<boolean>(false);
|
|
|
|
|
|
|
|
const openDialog = (props: DialogProps) => {
|
|
|
|
setDialogProps(props);
|
|
|
|
setShowDialog(true);
|
|
|
|
};
|
|
|
|
const closeDialog = () => {
|
|
|
|
setShowDialog(false);
|
|
|
|
};
|
|
|
|
|
2021-02-10 21:44:00 +00:00
|
|
|
const { isPanelOpen, panelContent, headerText, openSidePanel, closeSidePanel } = useSidePanel();
|
2021-04-19 21:11:48 +01:00
|
|
|
const { tabs, activeTab, tabsManager } = useTabs();
|
2021-02-10 21:44:00 +00:00
|
|
|
|
2021-01-26 23:32:37 +00:00
|
|
|
const explorerParams: ExplorerParams = {
|
|
|
|
setIsNotificationConsoleExpanded,
|
|
|
|
setNotificationConsoleData,
|
|
|
|
setInProgressConsoleDataIdToBeDeleted,
|
2021-02-10 21:44:00 +00:00
|
|
|
openSidePanel,
|
|
|
|
closeSidePanel,
|
2021-02-25 00:41:28 +00:00
|
|
|
openDialog,
|
|
|
|
closeDialog,
|
2021-04-07 17:15:00 +01:00
|
|
|
tabsManager,
|
2021-01-26 23:32:37 +00:00
|
|
|
};
|
2021-04-07 17:15:00 +01:00
|
|
|
|
2021-01-25 19:56:15 +00:00
|
|
|
const config = useConfig();
|
2021-02-23 19:15:57 +00:00
|
|
|
const explorer = useKnockoutExplorer(config?.platform, explorerParams);
|
2021-01-20 15:15:01 +00:00
|
|
|
|
2021-03-15 03:53:16 +00:00
|
|
|
if (!explorer) {
|
|
|
|
return <LoadingExplorer />;
|
|
|
|
}
|
|
|
|
|
2021-01-20 15:15:01 +00:00
|
|
|
return (
|
|
|
|
<div className="flexContainer">
|
2021-05-19 05:41:44 +01:00
|
|
|
<div id="divExplorer" className="flexContainer hideOverflows">
|
2021-03-10 21:55:05 +00:00
|
|
|
{/* Main Command Bar - Start */}
|
2021-01-20 15:15:01 +00:00
|
|
|
<div data-bind="react: commandBarComponentAdapter" />
|
|
|
|
{/* 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 */}
|
2021-05-17 16:40:23 +01:00
|
|
|
<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>
|
|
|
|
{userContext.authType === AuthType.ResourceToken ? (
|
|
|
|
<div style={{ overflowY: "auto" }} data-bind="react:resourceTreeForResourceToken" />
|
|
|
|
) : (
|
|
|
|
<div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
{/* Collections Window - End */}
|
|
|
|
</div>
|
2021-01-20 15:15:01 +00:00
|
|
|
{/* Collections Tree Expanded - End */}
|
|
|
|
{/* Collections Tree Collapsed - Start */}
|
2021-05-17 16:40:23 +01:00
|
|
|
<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>
|
2021-01-20 15:15:01 +00:00
|
|
|
{/* 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 */}
|
2021-04-07 17:15:00 +01:00
|
|
|
{tabs.length === 0 && <SplashScreen explorer={explorer} />}
|
2021-04-19 21:11:48 +01:00
|
|
|
<Tabs tabs={tabs} activeTab={activeTab} />
|
2021-01-20 15:15:01 +00:00
|
|
|
</div>
|
|
|
|
{/* Collections Tree and Tabs - End */}
|
|
|
|
<div
|
|
|
|
className="dataExplorerErrorConsoleContainer"
|
|
|
|
role="contentinfo"
|
|
|
|
aria-label="Notification console"
|
|
|
|
id="explorerNotificationConsole"
|
2021-01-26 23:32:37 +00:00
|
|
|
>
|
|
|
|
<NotificationConsoleComponent
|
|
|
|
isConsoleExpanded={isNotificationConsoleExpanded}
|
|
|
|
consoleData={notificationConsoleData}
|
|
|
|
inProgressConsoleDataIdToBeDeleted={inProgressConsoleDataIdToBeDeleted}
|
|
|
|
setIsConsoleExpanded={setIsNotificationConsoleExpanded}
|
|
|
|
/>
|
|
|
|
</div>
|
2021-01-20 15:15:01 +00:00
|
|
|
</div>
|
2021-02-10 21:44:00 +00:00
|
|
|
<PanelContainerComponent
|
|
|
|
isOpen={isPanelOpen}
|
|
|
|
panelContent={panelContent}
|
|
|
|
headerText={headerText}
|
|
|
|
closePanel={closeSidePanel}
|
|
|
|
isConsoleExpanded={isNotificationConsoleExpanded}
|
|
|
|
/>
|
2021-02-25 00:41:28 +00:00
|
|
|
{showDialog && <Dialog {...dialogProps} />}
|
2021-01-20 15:15:01 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
ReactDOM.render(<App />, document.body);
|
2021-03-15 03:53:16 +00:00
|
|
|
|
|
|
|
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>
|
|
|
|
);
|
|
|
|
}
|