Adding vcore mongo quickstart (#1600)

* Safety checkin * Adding vcoremongo to Main * Safety checkin * Adding vcoremongo to Main * Safety commit * Safety checkin * Adding vcoremongo to Main * Safety commit * Integrating mongo shell * Safety checkin * Adding vcoremongo to Main * Safety commit * Integrating mongo shell * Safety checkin * Safety commit * Enable mongo shell in its own tab * Safety checkin * Adding vcoremongo to Main * Safety commit * Integrating mongo shell * Safety checkin * Safety commit * Safety commit * Integrating mongo shell * Safety checkin * Safety commit * Enable mongo shell in its own tab * Adding message * Integrated mongo shell * Moving Juno endpoint back to prod * Fixed command bar unit tests * Fixing spelling
2025-12-20 17:30:46 +00:00 · 2023-09-12 18:03:59 -07:00
parent 135a409f0c
commit c07000a5c2
30 changed files with 1013 additions and 306 deletions
--- a/src/Explorer/Tabs/QuickstartTab.tsx
+++ b/src/Explorer/Tabs/QuickstartTab.tsx
@@ -1,16 +1,16 @@
 import { Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
 import { PoolIdType } from "Common/Constants";
-import { configContext } from "ConfigContext";
-import { NotebookWorkspaceConnectionInfo, PostgresFirewallRule } from "Contracts/DataModels";
+import { NotebookWorkspaceConnectionInfo } from "Contracts/DataModels";
+import { MessageTypes } from "Contracts/ExplorerContracts";
 import { NotebookTerminalComponent } from "Explorer/Controls/Notebook/NotebookTerminalComponent";
 import Explorer from "Explorer/Explorer";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
 import { QuickstartFirewallNotification } from "Explorer/Quickstart/QuickstartFirewallNotification";
 import { QuickstartGuide } from "Explorer/Quickstart/QuickstartGuide";
-import { ReactTabKind, useTabs } from "hooks/useTabs";
-import React, { useEffect, useState } from "react";
+import { checkFirewallRules } from "Explorer/Tabs/Shared/CheckFirewallRules";
 import { userContext } from "UserContext";
-import { armRequest } from "Utils/arm/request";
+import React, { useEffect, useState } from "react";
+import FirewallRuleScreenshot from "../../../images/firewallRule.png";

 interface QuickstartTabProps {
  explorer: Explorer;
@@ -26,29 +26,12 @@ export const QuickstartTab: React.FC<QuickstartTabProps> = ({ explorer }: Quicks
    forwardingId: notebookServerInfo.forwardingId,
  });

-  const checkFirewallRules = async (): Promise<void> => {
-    const firewallRulesUri = `${userContext.databaseAccount.id}/firewallRules`;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const response: any = await armRequest({
-      host: configContext.ARM_ENDPOINT,
-      path: firewallRulesUri,
-      method: "GET",
-      apiVersion: "2022-11-08",
-    });
-    const firewallRules: PostgresFirewallRule[] = response?.data?.value || response?.value || [];
-    const isEnabled = firewallRules.some(
-      (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"
-    );
-    setIsAllPublicIPAddressEnabled(isEnabled);
-
-    // If the firewall rule is not added, check every 30 seconds to see if the user has added the rule
-    if (!isEnabled && useTabs.getState().activeReactTab === ReactTabKind.Quickstart) {
-      setTimeout(checkFirewallRules, 30000);
-    }
-  };
-
  useEffect(() => {
-    checkFirewallRules();
+    checkFirewallRules(
+      "2022-11-08",
+      (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255",
+      setIsAllPublicIPAddressEnabled
+    );
  });

  useEffect(() => {
@@ -61,7 +44,13 @@ export const QuickstartTab: React.FC<QuickstartTabProps> = ({ explorer }: Quicks
        <QuickstartGuide />
      </Stack>
      <Stack style={{ width: "50%", borderLeft: "black solid 1px" }}>
-        {!isAllPublicIPAddressEnabled && <QuickstartFirewallNotification />}
+        {!isAllPublicIPAddressEnabled && (
+          <QuickstartFirewallNotification
+            messageType={MessageTypes.OpenPostgresNetworkingBlade}
+            screenshot={FirewallRuleScreenshot}
+            shellName="PostgreSQL"
+          />
+        )}
        {isAllPublicIPAddressEnabled && notebookServerInfo?.notebookServerEndpoint && (
          <NotebookTerminalComponent
            notebookServerInfo={getNotebookServerInfo()}
--- a/src/Explorer/Tabs/Shared/CheckFirewallRules.ts
+++ b/src/Explorer/Tabs/Shared/CheckFirewallRules.ts
@@ -0,0 +1,44 @@
+import { configContext } from "ConfigContext";
+import * as DataModels from "Contracts/DataModels";
+import { userContext } from "UserContext";
+import { armRequest } from "Utils/arm/request";
+
+export async function checkFirewallRules(
+  apiVersion: string,
+  firewallRulesPredicate: (rule: DataModels.FirewallRule) => unknown,
+  isAllPublicIPAddressesEnabled?: ko.Observable<boolean> | React.Dispatch<React.SetStateAction<boolean>>,
+  setMessageFunc?: (message: string) => void,
+  message?: string
+): Promise<void> {
+  const firewallRulesUri = `${userContext.databaseAccount.id}/firewallRules`;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const response: any = await armRequest({
+    host: configContext.ARM_ENDPOINT,
+    path: firewallRulesUri,
+    method: "GET",
+    apiVersion: apiVersion,
+  });
+  const firewallRules: DataModels.FirewallRule[] = response?.data?.value || response?.value || [];
+  const isEnabled = firewallRules.some(firewallRulesPredicate);
+
+  if (isAllPublicIPAddressesEnabled) {
+    isAllPublicIPAddressesEnabled(isEnabled);
+  }
+
+  if (setMessageFunc) {
+    if (!isEnabled) {
+      setMessageFunc(message);
+    } else {
+      setMessageFunc(undefined);
+    }
+  }
+
+  // If the firewall rule is not added, check every 30 seconds to see if the user has added the rule
+  if (!isEnabled) {
+    setTimeout(
+      () =>
+        checkFirewallRules(apiVersion, firewallRulesPredicate, isAllPublicIPAddressesEnabled, setMessageFunc, message),
+      30000
+    );
+  }
+}
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -8,6 +8,8 @@ import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
 import { ConnectTab } from "Explorer/Tabs/ConnectTab";
 import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
 import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
+import { VcoreMongoConnectTab } from "Explorer/Tabs/VCoreMongoConnectTab";
+import { VcoreMongoQuickstartTab } from "Explorer/Tabs/VCoreMongoQuickstartTab";
 import { userContext } from "UserContext";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
@@ -35,7 +37,16 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
        <MessageBar
          messageBarType={MessageBarType.warning}
          actions={
-            <MessageBarButton onClick={() => sendMessage({ type: MessageTypes.OpenPostgresNetworkingBlade })}>
+            <MessageBarButton
+              onClick={() =>
+                sendMessage({
+                  type:
+                    userContext.apiType === "VCoreMongo"
+                      ? MessageTypes.OpenVCoreMongoNetworkingBlade
+                      : MessageTypes.OpenPostgresNetworkingBlade,
+                })
+              }
+            >
              Change network settings
            </MessageBarButton>
          }
@@ -252,11 +263,21 @@ const isQueryErrorThrown = (tab?: Tab, tabKind?: ReactTabKind): boolean => {
 const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => {
  switch (activeReactTab) {
    case ReactTabKind.Connect:
-      return userContext.apiType === "Postgres" ? <PostgresConnectTab /> : <ConnectTab />;
+      return userContext.apiType === "VCoreMongo" ? (
+        <VcoreMongoConnectTab />
+      ) : userContext.apiType === "Postgres" ? (
+        <PostgresConnectTab />
+      ) : (
+        <ConnectTab />
+      );
    case ReactTabKind.Home:
      return <SplashScreen explorer={explorer} />;
    case ReactTabKind.Quickstart:
-      return <QuickstartTab explorer={explorer} />;
+      return userContext.apiType === "VCoreMongo" ? (
+        <VcoreMongoQuickstartTab explorer={explorer} />
+      ) : (
+        <QuickstartTab explorer={explorer} />
+      );
    case ReactTabKind.QueryCopilot:
      return <QueryCopilotTab explorer={explorer} />;
    default:
--- a/src/Explorer/Tabs/TerminalTab.tsx
+++ b/src/Explorer/Tabs/TerminalTab.tsx
@@ -1,9 +1,10 @@
 import { Spinner, SpinnerSize } from "@fluentui/react";
-import { configContext } from "ConfigContext";
+import { MessageTypes } from "Contracts/ExplorerContracts";
 import { QuickstartFirewallNotification } from "Explorer/Quickstart/QuickstartFirewallNotification";
+import { checkFirewallRules } from "Explorer/Tabs/Shared/CheckFirewallRules";
 import * as ko from "knockout";
 import * as React from "react";
-import { armRequest } from "Utils/arm/request";
+import FirewallRuleScreenshot from "../../../images/firewallRule.png";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -18,6 +19,7 @@ export interface TerminalTabOptions extends ViewModels.TabOptions {
  account: DataModels.DatabaseAccount;
  container: Explorer;
  kind: ViewModels.TerminalKind;
+  username?: string;
 }

 /**
@@ -30,12 +32,19 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
    private getNotebookServerInfo: () => DataModels.NotebookWorkspaceConnectionInfo,
    private getDatabaseAccount: () => DataModels.DatabaseAccount,
    private getTabId: () => string,
+    private getUsername: () => string,
    private isAllPublicIPAddressesEnabled: ko.Observable<boolean>
  ) {}

  public renderComponent(): JSX.Element {
    if (!this.isAllPublicIPAddressesEnabled()) {
-      return <QuickstartFirewallNotification />;
+      return (
+        <QuickstartFirewallNotification
+          messageType={MessageTypes.OpenPostgresNetworkingBlade}
+          screenshot={FirewallRuleScreenshot}
+          shellName="PostgreSQL"
+        />
+      );
    }

    return this.parameters() ? (
@@ -43,6 +52,7 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
        notebookServerInfo={this.getNotebookServerInfo()}
        databaseAccount={this.getDatabaseAccount()}
        tabId={this.getTabId()}
+        username={this.getUsername()}
      />
    ) : (
      <Spinner styles={{ root: { marginTop: 10 } }} size={SpinnerSize.large}></Spinner>
@@ -64,6 +74,7 @@ export default class TerminalTab extends TabsBase {
      () => this.getNotebookServerInfo(options),
      () => userContext?.databaseAccount,
      () => this.tabId,
+      () => this.getUsername(),
      this.isAllPublicIPAddressesEnabled
    );
    this.notebookTerminalComponentAdapter.parameters = ko.computed<boolean>(() => {
@@ -79,7 +90,21 @@ export default class TerminalTab extends TabsBase {
    });

    if (options.kind === ViewModels.TerminalKind.Postgres) {
-      this.checkPostgresFirewallRules();
+      checkFirewallRules(
+        "2022-11-08",
+        (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255",
+        this.isAllPublicIPAddressesEnabled
+      );
+    }
+
+    if (options.kind === ViewModels.TerminalKind.VCoreMongo) {
+      checkFirewallRules(
+        "2023-03-01-preview",
+        (rule) =>
+          rule.name.startsWith("AllowAllAzureServicesAndResourcesWithinAzureIps") ||
+          (rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"),
+        this.isAllPublicIPAddressesEnabled
+      );
    }
  }

@@ -115,6 +140,10 @@ export default class TerminalTab extends TabsBase {
        endpointSuffix = "postgresql";
        break;

+      case ViewModels.TerminalKind.VCoreMongo:
+        endpointSuffix = "mongovcore";
+        break;
+
      default:
        throw new Error(`Terminal kind: ${options.kind} not supported`);
    }
@@ -127,24 +156,11 @@ export default class TerminalTab extends TabsBase {
    };
  }

-  private async checkPostgresFirewallRules(): Promise<void> {
-    const firewallRulesUri = `${userContext.databaseAccount.id}/firewallRules`;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const response: any = await armRequest({
-      host: configContext.ARM_ENDPOINT,
-      path: firewallRulesUri,
-      method: "GET",
-      apiVersion: "2022-11-08",
-    });
-    const firewallRules: DataModels.PostgresFirewallRule[] = response?.data?.value || response?.value || [];
-    const isEnabled = firewallRules.some(
-      (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"
-    );
-    this.isAllPublicIPAddressesEnabled(isEnabled);
-
-    // If the firewall rule is not added, check every 30 seconds to see if the user has added the rule
-    if (!isEnabled) {
-      setTimeout(() => this.checkPostgresFirewallRules(), 30000);
+  private getUsername(): string {
+    if (userContext.apiType !== "VCoreMongo" || !userContext?.vcoreMongoConnectionParams?.adminLogin) {
+      return undefined;
    }
+
+    return userContext.vcoreMongoConnectionParams.adminLogin;
  }
 }
--- a/src/Explorer/Tabs/VCoreMongoConnectTab.tsx
+++ b/src/Explorer/Tabs/VCoreMongoConnectTab.tsx
@@ -0,0 +1,37 @@
+import { IconButton, ITextFieldStyles, Stack, TextField } from "@fluentui/react";
+import React from "react";
+import { userContext } from "UserContext";
+
+export const VcoreMongoConnectTab: React.FC = (): JSX.Element => {
+  const { adminLogin, connectionString } = userContext.vcoreMongoConnectionParams;
+  const displayConnectionString = connectionString.replace("<user>", adminLogin);
+
+  const textfieldStyles: Partial<ITextFieldStyles> = {
+    root: { width: "100%" },
+    field: { backgroundColor: "rgb(230, 230, 230)" },
+    fieldGroup: { borderColor: "rgb(138, 136, 134)" },
+    subComponentStyles: { label: { fontWeight: 400 } },
+    description: { fontWeight: 400 },
+  };
+
+  const onCopyBtnClicked = (selector: string): void => {
+    const textfield: HTMLInputElement = document.querySelector(selector);
+    textfield.select();
+    document.execCommand("copy");
+  };
+
+  return (
+    <div style={{ width: "100%", padding: 16 }}>
+      <Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
+        <TextField
+          label="MongoDB SRV connection URL"
+          id="mongoSrvConnectionURL"
+          readOnly
+          value={displayConnectionString}
+          styles={textfieldStyles}
+        />
+        <IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#mongoSrvConnectionURL")} />
+      </Stack>
+    </div>
+  );
+};
--- a/src/Explorer/Tabs/VCoreMongoQuickstartTab.tsx
+++ b/src/Explorer/Tabs/VCoreMongoQuickstartTab.tsx
@@ -0,0 +1,80 @@
+import { Spinner, SpinnerSize, Stack, Text } from "@fluentui/react";
+import { PoolIdType } from "Common/Constants";
+import { NotebookWorkspaceConnectionInfo } from "Contracts/DataModels";
+import { MessageTypes } from "Contracts/ExplorerContracts";
+import { NotebookTerminalComponent } from "Explorer/Controls/Notebook/NotebookTerminalComponent";
+import Explorer from "Explorer/Explorer";
+import { useNotebook } from "Explorer/Notebook/useNotebook";
+import { QuickstartFirewallNotification } from "Explorer/Quickstart/QuickstartFirewallNotification";
+import { VcoreMongoQuickstartGuide } from "Explorer/Quickstart/VCoreMongoQuickstartGuide";
+import { checkFirewallRules } from "Explorer/Tabs/Shared/CheckFirewallRules";
+import { userContext } from "UserContext";
+import React, { useEffect, useState } from "react";
+import FirewallRuleScreenshot from "../../../images/vcoreMongoFirewallRule.png";
+
+interface VCoreMongoQuickstartTabProps {
+  explorer: Explorer;
+}
+
+export const VcoreMongoQuickstartTab: React.FC<VCoreMongoQuickstartTabProps> = ({
+  explorer,
+}: VCoreMongoQuickstartTabProps): JSX.Element => {
+  const notebookServerInfo = useNotebook((state) => state.notebookServerInfo);
+  const [isAllPublicIPAddressEnabled, setIsAllPublicIPAddressEnabled] = useState<boolean>(true);
+
+  const getNotebookServerInfo = (): NotebookWorkspaceConnectionInfo => ({
+    authToken: notebookServerInfo.authToken,
+    notebookServerEndpoint: `${notebookServerInfo.notebookServerEndpoint?.replace(/\/+$/, "")}/mongovcore`,
+    forwardingId: notebookServerInfo.forwardingId,
+  });
+
+  useEffect(() => {
+    checkFirewallRules(
+      "2023-03-01-preview",
+      (rule) =>
+        rule.name.startsWith("AllowAllAzureServicesAndResourcesWithinAzureIps") ||
+        (rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"),
+      setIsAllPublicIPAddressEnabled
+    );
+  });
+
+  useEffect(() => {
+    explorer.allocateContainer(PoolIdType.DefaultPoolId);
+  }, []);
+
+  return (
+    <Stack style={{ width: "100%" }} horizontal>
+      <Stack style={{ width: "50%" }}>
+        <VcoreMongoQuickstartGuide />
+      </Stack>
+      <Stack style={{ width: "50%", borderLeft: "black solid 1px" }}>
+        {!isAllPublicIPAddressEnabled && (
+          <QuickstartFirewallNotification
+            messageType={MessageTypes.OpenVCoreMongoNetworkingBlade}
+            screenshot={FirewallRuleScreenshot}
+            shellName="MongoDB"
+          />
+        )}
+        {isAllPublicIPAddressEnabled && notebookServerInfo?.notebookServerEndpoint && (
+          <NotebookTerminalComponent
+            notebookServerInfo={getNotebookServerInfo()}
+            databaseAccount={userContext.databaseAccount}
+            tabId="QuickstartVcoreMongoShell"
+            username={userContext.vcoreMongoConnectionParams.adminLogin}
+          />
+        )}
+        {isAllPublicIPAddressEnabled && !notebookServerInfo?.notebookServerEndpoint && (
+          <Stack style={{ margin: "auto 0" }}>
+            <Text block style={{ margin: "auto" }}>
+              Connecting to the Mongo shell.
+            </Text>
+            <Text block style={{ margin: "auto" }}>
+              If the cluster was just created, this could take up to a minute.
+            </Text>
+            <Spinner styles={{ root: { marginTop: 16 } }} size={SpinnerSize.large}></Spinner>
+          </Stack>
+        )}
+      </Stack>
+    </Stack>
+  );
+};