mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-21 18:01:39 +00:00
319 lines
12 KiB
TypeScript
319 lines
12 KiB
TypeScript
import {
|
||
DefaultButton,
|
||
Icon,
|
||
IconButton,
|
||
Image,
|
||
IPivotItemProps,
|
||
Pivot,
|
||
PivotItem,
|
||
PrimaryButton,
|
||
Stack,
|
||
Text,
|
||
TextField,
|
||
} from "@fluentui/react";
|
||
import {
|
||
distributeTableCommand,
|
||
distributeTableCommandForDisplay,
|
||
loadDataCommand,
|
||
loadDataCommandForDisplay,
|
||
newTableCommand,
|
||
newTableCommandForDisplay,
|
||
queryCommand,
|
||
queryCommandForDisplay,
|
||
} from "Explorer/Quickstart/PostgreQuickstartCommands";
|
||
import { useTerminal } from "hooks/useTerminal";
|
||
import React, { useState } from "react";
|
||
import Youtube from "react-youtube";
|
||
import Pivot1SelectedIcon from "../../../images/Pivot1_selected.svg";
|
||
import Pivot2Icon from "../../../images/Pivot2.svg";
|
||
import Pivot2SelectedIcon from "../../../images/Pivot2_selected.svg";
|
||
import Pivot3Icon from "../../../images/Pivot3.svg";
|
||
import Pivot3SelectedIcon from "../../../images/Pivot3_selected.svg";
|
||
import Pivot4Icon from "../../../images/Pivot4.svg";
|
||
import Pivot4SelectedIcon from "../../../images/Pivot4_selected.svg";
|
||
import Pivot5Icon from "../../../images/Pivot5.svg";
|
||
import Pivot5SelectedIcon from "../../../images/Pivot5_selected.svg";
|
||
import CompleteIcon from "../../../images/QuickstartComplete.svg";
|
||
import { ReactTabKind, useTabs } from "../../hooks/useTabs";
|
||
|
||
enum GuideSteps {
|
||
Login,
|
||
NewTable,
|
||
DistributeTable,
|
||
LoadData,
|
||
Query,
|
||
}
|
||
|
||
export const QuickstartGuide: React.FC = (): JSX.Element => {
|
||
const [currentStep, setCurrentStep] = useState<number>(0);
|
||
|
||
const onCopyBtnClicked = (selector: string): void => {
|
||
const textfield: HTMLInputElement = document.querySelector(selector);
|
||
textfield.select();
|
||
document.execCommand("copy");
|
||
};
|
||
|
||
const getPivotHeaderIcon = (step: number): string => {
|
||
switch (step) {
|
||
case 0:
|
||
return Pivot1SelectedIcon;
|
||
case 1:
|
||
return step === currentStep ? Pivot2SelectedIcon : Pivot2Icon;
|
||
case 2:
|
||
return step === currentStep ? Pivot3SelectedIcon : Pivot3Icon;
|
||
case 3:
|
||
return step === currentStep ? Pivot4SelectedIcon : Pivot4Icon;
|
||
case 4:
|
||
return step === currentStep ? Pivot5SelectedIcon : Pivot5Icon;
|
||
default:
|
||
return "";
|
||
}
|
||
};
|
||
|
||
const customPivotHeaderRenderer = (
|
||
link: IPivotItemProps,
|
||
defaultRenderer: (link?: IPivotItemProps) => JSX.Element | null,
|
||
step: number
|
||
): JSX.Element | null => {
|
||
if (!link || !defaultRenderer) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<Stack horizontal verticalAlign="center">
|
||
{currentStep > step ? (
|
||
<Icon iconName="CompletedSolid" style={{ color: "#57A300", marginRight: 8 }} />
|
||
) : (
|
||
<Image style={{ marginRight: 8 }} src={getPivotHeaderIcon(step)} />
|
||
)}
|
||
{defaultRenderer({ ...link, itemIcon: undefined })}
|
||
</Stack>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Stack style={{ paddingTop: 8, height: "100%", width: "100%" }}>
|
||
<Stack style={{ flexGrow: 1, padding: "0 20px", overflow: "auto" }}>
|
||
<Text variant="xxLarge">Quick start guide</Text>
|
||
<Text variant="medium">Gettings started in Cosmos DB</Text>
|
||
{currentStep < 5 && (
|
||
<Pivot style={{ marginTop: 10, width: "100%" }} selectedKey={GuideSteps[currentStep]}>
|
||
<PivotItem
|
||
headerText="Login"
|
||
onRenderItemLink={(props, defaultRenderer) => customPivotHeaderRenderer(props, defaultRenderer, 0)}
|
||
itemKey={GuideSteps[0]}
|
||
onClick={() => setCurrentStep(0)}
|
||
>
|
||
<Stack style={{ marginTop: 20 }}>
|
||
<Text>
|
||
This tutorial guides you to create and query distributed tables using a sample dataset.
|
||
<br />
|
||
<br />
|
||
To begin, please enter the cluster's password in the PostgreSQL terminal.
|
||
</Text>
|
||
<Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
|
||
</Stack>
|
||
</PivotItem>
|
||
<PivotItem
|
||
headerText="New table"
|
||
onRenderItemLink={(props, defaultRenderer) => customPivotHeaderRenderer(props, defaultRenderer, 1)}
|
||
itemKey={GuideSteps[1]}
|
||
onClick={() => setCurrentStep(1)}
|
||
>
|
||
<Stack style={{ marginTop: 20 }}>
|
||
<Text>Let’s create two tables github_users and github_events in “cosmosdb_tutorial” schema.</Text>
|
||
<DefaultButton
|
||
style={{ marginTop: 16, width: 150 }}
|
||
onClick={() => useTerminal.getState().sendMessage(newTableCommand)}
|
||
>
|
||
Create new table
|
||
</DefaultButton>
|
||
<Stack horizontal style={{ marginTop: 16 }}>
|
||
<TextField
|
||
id="newTableCommand"
|
||
multiline
|
||
rows={5}
|
||
readOnly
|
||
defaultValue={newTableCommandForDisplay}
|
||
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("#newTableCommand")}
|
||
/>
|
||
</Stack>
|
||
<Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
|
||
</Stack>
|
||
</PivotItem>
|
||
<PivotItem
|
||
headerText="Distribute table"
|
||
onRenderItemLink={(props, defaultRenderer) => customPivotHeaderRenderer(props, defaultRenderer, 2)}
|
||
itemKey={GuideSteps[2]}
|
||
onClick={() => setCurrentStep(2)}
|
||
>
|
||
<Stack style={{ marginTop: 20 }}>
|
||
<Text>
|
||
Let’s distribute the two tables using the create_distributed_table() function.
|
||
<br />
|
||
<br />
|
||
We are choosing “user_id” as the distribution column for our sample dataset.
|
||
</Text>
|
||
<DefaultButton
|
||
style={{ marginTop: 16, width: 200 }}
|
||
onClick={() => useTerminal.getState().sendMessage(distributeTableCommand)}
|
||
>
|
||
Create distributed table
|
||
</DefaultButton>
|
||
<Stack horizontal style={{ marginTop: 16 }}>
|
||
<TextField
|
||
id="distributeTableCommand"
|
||
multiline
|
||
rows={5}
|
||
readOnly
|
||
defaultValue={distributeTableCommandForDisplay}
|
||
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("#distributeTableCommand")}
|
||
/>
|
||
</Stack>
|
||
<Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
|
||
</Stack>
|
||
</PivotItem>
|
||
<PivotItem
|
||
headerText="Load data"
|
||
onRenderItemLink={(props, defaultRenderer) => customPivotHeaderRenderer(props, defaultRenderer, 3)}
|
||
itemKey={GuideSteps[3]}
|
||
onClick={() => setCurrentStep(3)}
|
||
>
|
||
<Stack style={{ marginTop: 20 }}>
|
||
<Text>Let's load the two tables with a sample dataset generated from the GitHub API.</Text>
|
||
<DefaultButton
|
||
style={{ marginTop: 16, width: 110 }}
|
||
onClick={() => useTerminal.getState().sendMessage(loadDataCommand)}
|
||
>
|
||
Load data
|
||
</DefaultButton>
|
||
<Stack horizontal style={{ marginTop: 16 }}>
|
||
<TextField
|
||
id="loadDataCommand"
|
||
multiline
|
||
rows={5}
|
||
readOnly
|
||
defaultValue={loadDataCommandForDisplay}
|
||
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("#loadDataCommand")}
|
||
/>
|
||
</Stack>
|
||
<Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
|
||
</Stack>
|
||
</PivotItem>
|
||
<PivotItem
|
||
headerText="Query"
|
||
onRenderItemLink={(props, defaultRenderer) => customPivotHeaderRenderer(props, defaultRenderer, 4)}
|
||
itemKey={GuideSteps[4]}
|
||
onClick={() => setCurrentStep(4)}
|
||
>
|
||
<Stack style={{ marginTop: 20 }}>
|
||
<Text>
|
||
Congratulations on creating and distributing your tables. Now, it's time to run your first query!
|
||
</Text>
|
||
<DefaultButton
|
||
style={{ marginTop: 16, width: 115 }}
|
||
onClick={() => useTerminal.getState().sendMessage(queryCommand)}
|
||
>
|
||
Try queries
|
||
</DefaultButton>
|
||
<Stack horizontal style={{ marginTop: 16 }}>
|
||
<TextField
|
||
id="queryCommand"
|
||
multiline
|
||
rows={5}
|
||
readOnly
|
||
defaultValue={queryCommandForDisplay}
|
||
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("#queryCommand")}
|
||
/>
|
||
</Stack>
|
||
<Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
|
||
</Stack>
|
||
</PivotItem>
|
||
</Pivot>
|
||
)}
|
||
{currentStep === 5 && (
|
||
<Stack style={{ margin: "auto" }} horizontalAlign="center">
|
||
<Image src={CompleteIcon} />
|
||
<Text variant="mediumPlus" style={{ fontWeight: 900, marginTop: 7 }}>
|
||
You are all set!
|
||
</Text>
|
||
<Text variant="mediumPlus" style={{ marginTop: 8 }}>
|
||
You have completed the quick start guide.{" "}
|
||
</Text>
|
||
</Stack>
|
||
)}
|
||
</Stack>
|
||
<Stack horizontal style={{ padding: "16px 20px", boxShadow: "inset 0px 1px 0px rgba(204, 204, 204, 0.8)" }}>
|
||
<DefaultButton disabled={currentStep === 0} onClick={() => setCurrentStep(currentStep - 1)}>
|
||
Previous
|
||
</DefaultButton>
|
||
{currentStep < 5 && (
|
||
<PrimaryButton onClick={() => setCurrentStep(currentStep + 1)} style={{ marginLeft: 8 }}>
|
||
Next
|
||
</PrimaryButton>
|
||
)}
|
||
{currentStep === 5 && (
|
||
<PrimaryButton
|
||
onClick={() => useTabs.getState().closeReactTab(ReactTabKind.Quickstart)}
|
||
style={{ marginLeft: 8 }}
|
||
>
|
||
Close
|
||
</PrimaryButton>
|
||
)}
|
||
</Stack>
|
||
</Stack>
|
||
);
|
||
};
|