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

Turn on carousel to insert sample data

This commit is contained in:
Victor Meng 2023-07-11 16:27:11 -07:00
parent cf0c51337f
commit d1d62d34d1
2 changed files with 21 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/Explorer/QueryCopilot/CopilotCarousel.tsx
View File

@ -13,11 +13,8 @@ import {
} from "@fluentui/react"; } from "@fluentui/react";
import { QueryCopilotSampleDatabaseId, StyleConstants } from "Common/Constants"; import { QueryCopilotSampleDatabaseId, StyleConstants } from "Common/Constants";
import { handleError } from "Common/ErrorHandlingUtils"; import { handleError } from "Common/ErrorHandlingUtils";
import { createCollection } from "Common/dataAccess/createCollection";
import * as DataModels from "Contracts/DataModels";
import { ContainerSampleGenerator } from "Explorer/DataSamples/ContainerSampleGenerator"; import { ContainerSampleGenerator } from "Explorer/DataSamples/ContainerSampleGenerator";
import Explorer from "Explorer/Explorer"; import Explorer from "Explorer/Explorer";
import { AllPropertiesIndexed } from "Explorer/Panes/AddCollectionPanel";
import { PromptCard } from "Explorer/QueryCopilot/PromptCard"; import { PromptCard } from "Explorer/QueryCopilot/PromptCard";
import { useDatabases } from "Explorer/useDatabases"; import { useDatabases } from "Explorer/useDatabases";
import { useCarousel } from "hooks/useCarousel"; import { useCarousel } from "hooks/useCarousel";
@ -78,30 +75,27 @@ export const QueryCopilotCarousel: React.FC<QueryCopilotCarouselProps> = ({
}; };
const createSampleDatabase = async (): Promise<void> => { const createSampleDatabase = async (): Promise<void> => {
const database = useDatabases.getState().findDatabaseWithId(QueryCopilotSampleDatabaseId); // const database = useDatabases.getState().findDatabaseWithId(QueryCopilotSampleDatabaseId);
if (database) {
return;
}
try { try {
setIsCreatingDatabase(true); // setIsCreatingDatabase(true);
setSpinnerText("Setting up your database..."); // setSpinnerText("Setting up your database...");
const params: DataModels.CreateCollectionParams = { // const params: DataModels.CreateCollectionParams = {
createNewDatabase: true, // createNewDatabase: false,
collectionId: "SampleContainer", // collectionId: "SampleContainer",
databaseId: QueryCopilotSampleDatabaseId, // databaseId: QueryCopilotSampleDatabaseId,
databaseLevelThroughput: true, // databaseLevelThroughput: true,
autoPilotMaxThroughput: 1000, // autoPilotMaxThroughput: 1000,
offerThroughput: undefined, // offerThroughput: undefined,
indexingPolicy: AllPropertiesIndexed, // indexingPolicy: AllPropertiesIndexed,
partitionKey: { // partitionKey: {
paths: ["/categoryId"], // paths: ["/categoryId"],
kind: "Hash", // kind: "Hash",
version: 2, // version: 2,
}, // },
}; // };
await createCollection(params); // await createCollection(params);
await explorer.refreshAllDatabases(); // await explorer.refreshAllDatabases();
const database = useDatabases.getState().findDatabaseWithId(QueryCopilotSampleDatabaseId); const database = useDatabases.getState().findDatabaseWithId(QueryCopilotSampleDatabaseId);
await database.loadCollections(); await database.loadCollections();
const collection = database.findCollectionWithId("SampleContainer"); const collection = database.findCollectionWithId("SampleContainer");

4
src/Main.tsx
View File

@ -63,7 +63,7 @@ initializeIcons();
const App: React.FunctionComponent = () => { const App: React.FunctionComponent = () => {
const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true); const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
const isCarouselOpen = useCarousel((state) => state.shouldOpen); const isCarouselOpen = useCarousel((state) => state.shouldOpen);
const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel); // const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
const shouldShowModal = useQueryCopilot((state) => state.showFeedbackModal); const shouldShowModal = useQueryCopilot((state) => state.showFeedbackModal);
const config = useConfig(); const config = useConfig();
@ -127,7 +127,7 @@ const App: React.FunctionComponent = () => {
{<QuickstartCarousel isOpen={isCarouselOpen} />} {<QuickstartCarousel isOpen={isCarouselOpen} />}
{<SQLQuickstartTutorial />} {<SQLQuickstartTutorial />}
{<MongoQuickstartTutorial />} {<MongoQuickstartTutorial />}
{<QueryCopilotCarousel isOpen={isCopilotCarouselOpen} explorer={explorer} />} {<QueryCopilotCarousel isOpen={true} explorer={explorer} />}
{shouldShowModal && <QueryCopilotFeedbackModal />} {shouldShowModal && <QueryCopilotFeedbackModal />}
</div> </div>
); );