random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-28 16:36:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minor changes to vcore mongo quickstart based on feedback (#1678)

Browse Source
This commit is contained in:
vchske 2023-10-26 16:46:01 -07:00 committed by GitHub
parent 15e35eaa82
commit bc68b4dbf9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 89 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/Explorer/Quickstart/VCoreMongoQuickstartCommands.ts
View File

@ -1,5 +1,6 @@
export const newDbAndCollectionCommand = `use quickstartDB
db.createCollection('sampleCollection')`;
db.createCollection('sampleCollection')
`;
export const newDbAndCollectionCommandForDisplay = `use quickstartDB // Create new database named 'quickstartDB' or switch to it if it already exists
@ -16,19 +17,25 @@ export const loadDataCommand = `db.sampleCollection.insertMany([
{title: "War and Peace", author: "Leo Tolstoy", pages: 1392},
{title: "The Odyssey", author: "Homer", pages: 374},
{title: "Ulysses", author: "James Joyce", pages: 730}
])`;
])
`;
export const queriesCommand = `db.sampleCollection.find({author: "George Orwell"})
export const findOrwellCommand = `db.sampleCollection.find({author: "George Orwell"})
`;
export const findOrwellCommandForDisplay = `// Query to find all books written by "George Orwell"
db.sampleCollection.find({author: "George Orwell"})`;
export const findByPagesCommand = `db.sampleCollection.find({pages: {$gt: 500}})
`;
export const findByPagesCommandForDisplay = `// Query to find all books with more than 500 pages
db.sampleCollection.find({pages: {$gt: 500}})
`;
db.sampleCollection.find({}).sort({pages: 1})`;
export const findAndSortCommand = `db.sampleCollection.find({}).sort({pages: 1})
`;
export const queriesCommandForDisplay = `// Query to find all books written by "George Orwell"
db.sampleCollection.find({author: "George Orwell"})
// Query to find all books with more than 500 pages
db.sampleCollection.find({pages: {$gt: 500}})
// Query to find all books and sort them by the number of pages in ascending order
db.sampleCollection.find({}).sort({pages: 1})`;
export const findAndSortCommandForDisplay = `// Query to find all books and sort them by the number of pages in ascending order
db.sampleCollection.find({}).sort({pages: 1})
`;

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

@ -11,11 +11,15 @@ import {
} from "@fluentui/react";
import { customPivotHeaderRenderer } from "Explorer/Quickstart/Shared/QuickstartRenderUtilities";
import {
findAndSortCommand,
findAndSortCommandForDisplay,
findByPagesCommand,
findByPagesCommandForDisplay,
findOrwellCommand,
findOrwellCommandForDisplay,
loadDataCommand,
newDbAndCollectionCommand,
newDbAndCollectionCommandForDisplay,
queriesCommand,
queriesCommandForDisplay,
} from "Explorer/Quickstart/VCoreMongoQuickstartCommands";
import { useTerminal } from "hooks/useTerminal";
import React, { useState } from "react";
@ -190,17 +194,17 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
</Text>
<DefaultButton
style={{ marginTop: 16, width: 110 }}
onClick={() => useTerminal.getState().sendMessage(queriesCommand)}
onClick={() => useTerminal.getState().sendMessage(findOrwellCommand)}
>
Try query
</DefaultButton>
<Stack horizontal style={{ marginTop: 16 }}>
<TextField
id="queriesCommand"
id="findOrwellCommand"
multiline
rows={5}
rows={2}
readOnly
defaultValue={queriesCommandForDisplay}
defaultValue={findOrwellCommandForDisplay}
styles={{
root: { width: "90%" },
field: {
@ -214,7 +218,65 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
iconProps={{
iconName: "Copy",
}}
onClick={() => onCopyBtnClicked("#queriesCommand")}
onClick={() => onCopyBtnClicked("#findOrwellCommand")}
/>
</Stack>
<DefaultButton
style={{ marginTop: 32, width: 110 }}
onClick={() => useTerminal.getState().sendMessage(findByPagesCommand)}
>
Try query
</DefaultButton>
<Stack horizontal style={{ marginTop: 16 }}>
<TextField
id="findByPagesCommand"
multiline
rows={2}
readOnly
defaultValue={findByPagesCommandForDisplay}
styles={{
root: { width: "90%" },
field: {
backgroundColor: "#EEEEEE",
fontFamily:
"Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
},
}}
/>
<IconButton
iconProps={{
iconName: "Copy",
}}
onClick={() => onCopyBtnClicked("#findByPagesCommand")}
/>
</Stack>
<DefaultButton
style={{ marginTop: 32, width: 110 }}
onClick={() => useTerminal.getState().sendMessage(findAndSortCommand)}
>
Try query
</DefaultButton>
<Stack horizontal style={{ marginTop: 16 }}>
<TextField
id="findAndSortCommand"
multiline
rows={2}
readOnly
defaultValue={findAndSortCommandForDisplay}
styles={{
root: { width: "90%" },
field: {
backgroundColor: "#EEEEEE",
fontFamily:
"Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
},
}}
/>
<IconButton
iconProps={{
iconName: "Copy",
}}
onClick={() => onCopyBtnClicked("#findAndSortCommand")}
/>
</Stack>
</Stack>
@ -236,7 +298,7 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
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"
href="https://learn.microsoft.com/azure/cosmos-db/mongodb/vcore/migration-options"
>
Learn more
</Link>