random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updating vcore mongo quickstart text based on feedback (#1669) 

* Updating quickstart text based on feedback

* Escaping apostrophe
This commit is contained in:
vchske 2023-10-20 12:32:22 -07:00 committed by GitHub
parent 2d3048eafe
commit deb0ebcf92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/Explorer/Quickstart/VCoreMongoQuickstartGuide.tsx
View File

@ -9,8 +9,6 @@ import {
Text, Text,
TextField, TextField,
} from "@fluentui/react"; } from "@fluentui/react";
import { sendMessage } from "Common/MessageHandler";
import { MessageTypes } from "Contracts/ExplorerContracts";
import { customPivotHeaderRenderer } from "Explorer/Quickstart/Shared/QuickstartRenderUtilities"; import { customPivotHeaderRenderer } from "Explorer/Quickstart/Shared/QuickstartRenderUtilities";
import { import {
loadDataCommand, loadDataCommand,
@ -63,28 +61,16 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
> >
<Stack style={{ marginTop: 20 }}> <Stack style={{ marginTop: 20 }}>
<Text> <Text>
A hosted mongosh (mongo shell) is provided for this quick start. You are automatically logged in to This tutorial guides you to create and query distributed tables using a sample dataset.
mongosh, allowing you to interact with your database directly.
<br /> <br />
<br /> <br />
When not in the quick start guide, connecting to Azure Cosmos DB for MongoDB vCore is straightforward To start, input the admin password you used during the cluster creation process into the MongoDB vCore
using your connection string. terminal.
<br /> <br />
<br /> <br />
<Link
aria-label="View connection string"
href=""
onClick={() => sendMessage({ type: MessageTypes.OpenVCoreMongoConnectionStringsBlade })}
>
View connection string
</Link>
<br /> <br />
<br /> Note: If you navigate out of the Quick start blade &#40;MongoDB vCore Shell&#41;, the session will be
This string contains placeholders for &lt;user&gt; and &lt;password&gt;. Replace them with your chosen closed and all ongoing commands might be interrupted.
username and password to establish a secure connection to your cluster. Depending on your environment,
you may need to adjust firewall rules or configure private endpoints in the &lsquo;Networking&rsquo;
tab of your database settings, or modify your own network&apos;s firewall settings, to successfully
connect.
</Text> </Text>
</Stack> </Stack>
</PivotItem> </PivotItem>
@ -103,6 +89,7 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
documents are similar to the columns in a relational database table. One key advantage of MongoDB is documents are similar to the columns in a relational database table. One key advantage of MongoDB is
that these documents within a collection can have different fields. that these documents within a collection can have different fields.
<br /> <br />
<br />
You&apos;re now going to create a new database and a collection within that database using the Mongo You&apos;re now going to create a new database and a collection within that database using the Mongo
shell. In MongoDB, creating a database or a collection is implicit. This means that databases and shell. In MongoDB, creating a database or a collection is implicit. This means that databases and
collections are created when you first reference them in a command, so no explicit creation command is collections are created when you first reference them in a command, so no explicit creation command is
@ -153,14 +140,14 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
with data. In MongoDB, data is stored as documents, which are structured as field and value pairs. with data. In MongoDB, data is stored as documents, which are structured as field and value pairs.
<br /> <br />
<br /> <br />
Let&apos;s populate your sampleCollection with data. We&apos;ll add 10 documents representing books, We&apos;ll add 10 documents representing books, each with a title, author, and number of pages, to
each with a title, author, and number of pages, to your sampleCollection in the quickstartDB database. your sampleCollection in the quickstartDB database.
</Text> </Text>
<DefaultButton <DefaultButton
style={{ marginTop: 16, width: 200 }} style={{ marginTop: 16, width: 200 }}
onClick={() => useTerminal.getState().sendMessage(loadDataCommand)} onClick={() => useTerminal.getState().sendMessage(loadDataCommand)}
> >
Create distributed table Load data
</DefaultButton> </DefaultButton>
<Stack horizontal style={{ marginTop: 16 }}> <Stack horizontal style={{ marginTop: 16 }}>
<TextField <TextField
@ -197,7 +184,7 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
> >
<Stack style={{ marginTop: 20 }}> <Stack style={{ marginTop: 20 }}>
<Text> <Text>
Once you’ve inserted data into your sampleCollection, you can retrieve it using queries. MongoDB Once you&apos;ve inserted data into your sampleCollection, you can retrieve it using queries. MongoDB
queries can be as simple or as complex as you need them to be, allowing you to filter, sort, and limit queries can be as simple or as complex as you need them to be, allowing you to filter, sort, and limit
results. results.
</Text> </Text>
@ -205,7 +192,7 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
style={{ marginTop: 16, width: 110 }} style={{ marginTop: 16, width: 110 }}
onClick={() => useTerminal.getState().sendMessage(queriesCommand)} onClick={() => useTerminal.getState().sendMessage(queriesCommand)}
> >
Load data Try query
</DefaultButton> </DefaultButton>
<Stack horizontal style={{ marginTop: 16 }}> <Stack horizontal style={{ marginTop: 16 }}>
<TextField <TextField
@ -233,7 +220,7 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
</Stack> </Stack>
</PivotItem> </PivotItem>
<PivotItem <PivotItem
headerText="Integrations" headerText="Next steps"
onRenderItemLink={(props, defaultRenderer) => onRenderItemLink={(props, defaultRenderer) =>
customPivotHeaderRenderer(props, defaultRenderer, currentStep, 4) customPivotHeaderRenderer(props, defaultRenderer, currentStep, 4)
} }
@ -242,46 +229,18 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
> >
<Stack> <Stack>
<Text> <Text>
Cosmos DB for MongoDB vCore seamlessly integrates with Azure services. These integrations enable <b>Migrate existing data</b>
Cosmos DB for MongoDB and its partner products to directly interoperate, ensuring a smooth and unified <br />
experience, that just works. <br />
Modernize your data seamlessly from an existing MongoDB cluster, whether it&apos;s on-premises or
hosted in the cloud, to Azure Cosmos DB for MongoDB vCore.&nbsp;
<Link
target="_blank"
href="https://learn.microsoft.com/azure-data-studio/extensions/azure-cosmos-db-mongodb-extension"
>
Learn more
</Link>
</Text> </Text>
<Stack horizontal>
<Stack style={{ marginTop: 20, marginRight: 20 }}>
<Text>
<b>First party integrations</b>
<br />
<br />
<b>Azure Monitor</b>
<br />
Azure monitor provides comprehensive monitoring and diagnostics for Cosmos DB for Mongo DB. Learn
more
<br />
<br />
<b>Azure Networking</b>
<br />
Azure Networking seamlessly integrates with Azure Cosmos DB for Mongo DB for fast and secure data
access. Learn more
<br />
<br />
<b>PowerShell/CLI/ARM</b>
<br />
PowerShell/CLI/ARM seamlessly integrates with Azure Cosmos DB for Mongo DB for efficient
management and automation. Learn more
</Text>
</Stack>
<Stack style={{ marginTop: 20, marginLeft: 20 }}>
<Text>
<b>Application platforms integrations</b>
<br />
<br />
<b>Vercel</b>
<br />
Vercel is a cloud platform for hosting static front ends and serverless functions, with instant
deployments, automated scaling, and Next.js integration. Learn more
</Text>
</Stack>
</Stack>
</Stack> </Stack>
</PivotItem> </PivotItem>
</Pivot> </Pivot>