random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-04-18 15:49:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Quickstart UI changes (#1327)

Browse Source
This commit is contained in:
victor-meng 2022-09-27 14:03:28 -07:00 committed by GitHub
parent 3abbb63adc
commit 42731d1aae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 136 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/Explorer/Quickstart/QuickstartGuide.tsx
View File

@ -35,24 +35,65 @@ enum GuideSteps {
export const QuickstartGuide: React.FC = (): JSX.Element => { export const QuickstartGuide: React.FC = (): JSX.Element => {
const [currentStep, setCurrentStep] = useState<number>(0); const [currentStep, setCurrentStep] = useState<number>(0);
const newTableCommand = `CREATE TABLE github_users const newTableCommand = `DROP SCHEMA IF EXISTS cosmosdb_tutorial CASCADE;
CREATE SCHEMA cosmosdb_tutorial;
-- Using schema created for tutorial
SET search_path to cosmosdb_tutorial;
CREATE TABLE github_users
( (
user_id bigint, user_id bigint,
url text, url text,
login text, login text,
.....`; avatar_url text,
const distributeTableCommand = `SELECT create_distributed_table('github_users', 'user_id'); gravatar_id text,
SELECT create_distributed_table('github_events', 'user_id');`; display_login text
const loadDataCommand = `-- download users and store in table );
COPY github_users FROM PROGRAM 'curl https://examples.citusdata.com/ CREATE TABLE github_events
users.csv' WITH (FORMAT CSV)`; (
const queryCommand = `-- Find all events for a single user. event_id bigint,
-- (A common transactional/operational query) event_type text,
event_public boolean,
repo_id bigint,
payload jsonb,
repo jsonb,
user_id bigint,
org jsonb,
created_at timestamp
);
--Create indexes on events table
CREATE INDEX event_type_index ON github_events (event_type);
CREATE INDEX payload_index ON github_events USING GIN (payload jsonb_path_ops); `;
const distributeTableCommand = `-- Using schema created for the tutorial
SET search_path to cosmosdb_tutorial;
SELECT create_distributed_table('github_users', 'user_id');
SELECT create_distributed_table('github_events', 'user_id'); `;
const loadDataCommand = `-- Using schema created for the tutorial
SET search_path to cosmosdb_tutorial;
-- download users and store in table
\\COPY github_users FROM PROGRAM 'curl https://examples.citusdata.com/users.csv' WITH (FORMAT CSV)
\\COPY github_events FROM PROGRAM 'curl https://examples.citusdata.com/events.csv' WITH (FORMAT CSV) `;
const queryCommand = `-- Using schema created for the tutorial
SET search_path to cosmosdb_tutorial;
-- count all rows (across shards)
SELECT count(*) FROM github_users;
-- Find all events for a single user.
SELECT created_at, event_type, repo->>'name' AS repo_name SELECT created_at, event_type, repo->>'name' AS repo_name
FROM github_events FROM github_events
WHERE user_id = 3861633;`; WHERE user_id = 3861633;
-- Find the number of commits on the master branch per hour
SELECT date_trunc('hour', created_at) AS hour, sum((payload->>'distinct_size')::int) AS num_commits FROM github_events WHERE event_type = 'PushEvent' AND payload @> '{"ref":"refs/heads/master"}' GROUP BY hour ORDER BY hour; `;
const onCopyBtnClicked = (selector: string): void => { const onCopyBtnClicked = (selector: string): void => {
const textfield: HTMLInputElement = document.querySelector(selector); const textfield: HTMLInputElement = document.querySelector(selector);
@ -113,13 +154,12 @@ WHERE user_id = 3861633;`;
> >
<Stack style={{ marginTop: 20 }}> <Stack style={{ marginTop: 20 }}>
<Text> <Text>
This tutorial walks you through the most essential Cosmos DB PostgreSQL statements that will be used This tutorial guides you to create and query distributed tables using a sample dataset.
in the PostgreSQL shell (on the right). You can also choose to go through this quick start by <br />
connecting to PGAdmin or other tooling of your choice. <br /> <br />
<br /> Before you can interact with your data using PGShell, you will need to login - please follow To begin, please enter the cluster&apos;s password in the PostgreSQL terminal.
instructions on the right to enter your password
</Text> </Text>
<Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "60%" }} /> <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
</Stack> </Stack>
</PivotItem> </PivotItem>
<PivotItem <PivotItem
@ -129,19 +169,23 @@ WHERE user_id = 3861633;`;
onClick={() => setCurrentStep(1)} onClick={() => setCurrentStep(1)}
> >
<Stack style={{ marginTop: 20 }}> <Stack style={{ marginTop: 20 }}>
<Text> <Text>Let’s create two tables github_users and github_events in “cosmosdb_tutorial” schema.</Text>
After logging in, let’s create some new tables for storing data. We will start with two sample tables <DefaultButton style={{ marginTop: 16, width: 150 }}>Create new table</DefaultButton>
- one for storing github users and one for storing github events
</Text>
<DefaultButton style={{ marginTop: 16, width: 110 }}>New table</DefaultButton>
<Stack horizontal style={{ marginTop: 16 }}> <Stack horizontal style={{ marginTop: 16 }}>
<TextField <TextField
id="newTableCommand" id="newTableCommand"
multiline multiline
rows={6} rows={5}
readOnly readOnly
defaultValue={newTableCommand} defaultValue={newTableCommand}
styles={{ root: { width: "90%" } }} styles={{
root: { width: "90%" },
field: {
backgroundColor: "#EEEEEE",
fontFamily:
"Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
},
}}
/> />
<IconButton <IconButton
iconProps={{ iconProps={{
@ -150,7 +194,7 @@ WHERE user_id = 3861633;`;
onClick={() => onCopyBtnClicked("#newTableCommand")} onClick={() => onCopyBtnClicked("#newTableCommand")}
/> />
</Stack> </Stack>
<Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "60%" }} /> <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
</Stack> </Stack>
</PivotItem> </PivotItem>
<PivotItem <PivotItem
@ -161,21 +205,27 @@ WHERE user_id = 3861633;`;
> >
<Stack style={{ marginTop: 20 }}> <Stack style={{ marginTop: 20 }}>
<Text> <Text>
Congratulations, you have now created your first 2 tables. Let’s distribute the two tables using the create_distributed_table() function.
<br /> <br />
<br /> <br />
Your table needs to be sharded on the worker nodes. You need to distribute table before you load any We are choosing “user_id” as the distribution column for our sample dataset.
data or run any queries
</Text> </Text>
<DefaultButton style={{ marginTop: 16, width: 150 }}>Distribute table</DefaultButton> <DefaultButton style={{ marginTop: 16, width: 200 }}>Create distributed table</DefaultButton>
<Stack horizontal style={{ marginTop: 16 }}> <Stack horizontal style={{ marginTop: 16 }}>
<TextField <TextField
id="distributeTableCommand" id="distributeTableCommand"
multiline multiline
rows={2} rows={5}
readOnly readOnly
defaultValue={distributeTableCommand} defaultValue={distributeTableCommand}
styles={{ root: { width: "90%" } }} styles={{
root: { width: "90%" },
field: {
backgroundColor: "#EEEEEE",
fontFamily:
"Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
},
}}
/> />
<IconButton <IconButton
iconProps={{ iconProps={{
@ -184,7 +234,7 @@ WHERE user_id = 3861633;`;
onClick={() => onCopyBtnClicked("#distributeTableCommand")} onClick={() => onCopyBtnClicked("#distributeTableCommand")}
/> />
</Stack> </Stack>
<Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "60%" }} /> <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
</Stack> </Stack>
</PivotItem> </PivotItem>
<PivotItem <PivotItem
@ -194,22 +244,23 @@ WHERE user_id = 3861633;`;
onClick={() => setCurrentStep(3)} onClick={() => setCurrentStep(3)}
> >
<Stack style={{ marginTop: 20 }}> <Stack style={{ marginTop: 20 }}>
<Text> <Text>Let&apos;s load the two tables with a sample dataset generated from the GitHub API.</Text>
We&apos;re ready to fill the tables with sample data.
<br />
<br />
For this quick start, we&apos;ll use a dataset previously captured from the GitHub API. Run the
command below to load the data
</Text>
<DefaultButton style={{ marginTop: 16, width: 110 }}>Load data</DefaultButton> <DefaultButton style={{ marginTop: 16, width: 110 }}>Load data</DefaultButton>
<Stack horizontal style={{ marginTop: 16 }}> <Stack horizontal style={{ marginTop: 16 }}>
<TextField <TextField
id="loadDataCommand" id="loadDataCommand"
multiline multiline
rows={4} rows={5}
readOnly readOnly
defaultValue={loadDataCommand} defaultValue={loadDataCommand}
styles={{ root: { width: "90%" } }} styles={{
root: { width: "90%" },
field: {
backgroundColor: "#EEEEEE",
fontFamily:
"Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
},
}}
/> />
<IconButton <IconButton
iconProps={{ iconProps={{
@ -218,7 +269,7 @@ WHERE user_id = 3861633;`;
onClick={() => onCopyBtnClicked("#loadDataCommand")} onClick={() => onCopyBtnClicked("#loadDataCommand")}
/> />
</Stack> </Stack>
<Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "60%" }} /> <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
</Stack> </Stack>
</PivotItem> </PivotItem>
<PivotItem <PivotItem
@ -229,19 +280,24 @@ WHERE user_id = 3861633;`;
> >
<Stack style={{ marginTop: 20 }}> <Stack style={{ marginTop: 20 }}>
<Text> <Text>
github_users is a distributed table, meaning its data is divided between multiple shards. Hyperscale Congratulations on creating and distributing your tables. Now, it&apos;s time to run your first query!
(Citus) automatically runs the count on all shards in parallel, and combines the results. Let’s try a
query.
</Text> </Text>
<DefaultButton style={{ marginTop: 16, width: 110 }}>Try query</DefaultButton> <DefaultButton style={{ marginTop: 16, width: 115 }}>Try queries</DefaultButton>
<Stack horizontal style={{ marginTop: 16 }}> <Stack horizontal style={{ marginTop: 16 }}>
<TextField <TextField
id="queryCommand" id="queryCommand"
multiline multiline
rows={6} rows={5}
readOnly readOnly
defaultValue={queryCommand} defaultValue={queryCommand}
styles={{ root: { width: "90%" } }} styles={{
root: { width: "90%" },
field: {
backgroundColor: "#EEEEEE",
fontFamily:
"Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
},
}}
/> />
<IconButton <IconButton
iconProps={{ iconProps={{
@ -250,7 +306,7 @@ WHERE user_id = 3861633;`;
onClick={() => onCopyBtnClicked("#queryCommand")} onClick={() => onCopyBtnClicked("#queryCommand")}
/> />
</Stack> </Stack>
<Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "60%" }} /> <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
</Stack> </Stack>
</PivotItem> </PivotItem>
</Pivot> </Pivot>
@ -258,7 +314,7 @@ WHERE user_id = 3861633;`;
{currentStep === 5 && ( {currentStep === 5 && (
<Stack style={{ margin: "auto" }} horizontalAlign="center"> <Stack style={{ margin: "auto" }} horizontalAlign="center">
<Image src={CompleteIcon} /> <Image src={CompleteIcon} />
<Text variant="mediumPlus" style={{ fontWeight: 600, marginTop: 7 }}> <Text variant="mediumPlus" style={{ fontWeight: 900, marginTop: 7 }}>
You are all set! You are all set!
</Text> </Text>
<Text variant="mediumPlus" style={{ marginTop: 8 }}> <Text variant="mediumPlus" style={{ marginTop: 8 }}>

1
src/Explorer/SplashScreen/SplashScreen.less
View File

@ -40,6 +40,7 @@
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
margin: 40px auto; margin: 40px auto;
width: 84%;
> .mainButton { > .mainButton {
min-width: 124px; min-width: 124px;

47
src/Explorer/SplashScreen/SplashScreen.tsx
View File

@ -191,8 +191,8 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
</Coachmark> </Coachmark>
)} )}
{userContext.apiType === "Postgres" ? ( {userContext.apiType === "Postgres" ? (
<Stack horizontal style={{ margin: "0 auto" }} tokens={{ childrenGap: "15%" }}> <Stack horizontal style={{ margin: "0 auto", width: "84%" }} tokens={{ childrenGap: 32 }}>
<Stack> <Stack style={{ width: "33%" }}>
<Text <Text
variant="large" variant="large"
style={{ style={{
@ -204,7 +204,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
</Text> </Text>
{this.getNextStepItems()} {this.getNextStepItems()}
</Stack> </Stack>
<Stack> <Stack style={{ width: "33%" }}>
<Text <Text
variant="large" variant="large"
style={{ style={{
@ -216,6 +216,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
</Text> </Text>
{this.getTipsAndLearnMoreItems()} {this.getTipsAndLearnMoreItems()}
</Stack> </Stack>
<Stack style={{ width: "33%" }}></Stack>
</Stack> </Stack>
) : ( ) : (
<div className="moreStuffContainer"> <div className="moreStuffContainer">
@ -634,24 +635,24 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
private getNextStepItems(): JSX.Element { private getNextStepItems(): JSX.Element {
const items: { link: string; title: string; description: string }[] = [ const items: { link: string; title: string; description: string }[] = [
{ {
link: "", link: "https://go.microsoft.com/fwlink/?linkid=2208312",
title: "Performance tuning", title: "Data Modeling",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", description: "",
}, },
{ {
link: "", link: " https://go.microsoft.com/fwlink/?linkid=2206941 ",
title: "Join Citus community", title: "How to choose a Distribution Column",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", description: "",
}, },
{ {
link: "", link: "https://go.microsoft.com/fwlink/?linkid=2207425",
title: "Useful diagnostic queries", title: "Build Apps with Python/Java/Django",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", description: "",
}, },
]; ];
return ( return (
<Stack> <Stack style={{ minWidth: 124, maxWidth: 296 }}>
{items.map((item, i) => ( {items.map((item, i) => (
<Stack key={`nextStep${i}`} style={{ marginBottom: 26 }}> <Stack key={`nextStep${i}`} style={{ marginBottom: 26 }}>
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}> <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
@ -670,24 +671,24 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
private getTipsAndLearnMoreItems(): JSX.Element { private getTipsAndLearnMoreItems(): JSX.Element {
const items: { link: string; title: string; description: string }[] = [ const items: { link: string; title: string; description: string }[] = [
{ {
link: "", link: "https://go.microsoft.com/fwlink/?linkid=2207226",
title: "Data modeling", title: "Performance Tuning",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", description: "",
}, },
{ {
link: "", link: "https://go.microsoft.com/fwlink/?linkid=2208037",
title: "How to choose a distribution Column", title: "Useful Diagnostic Queries",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", description: "",
}, },
{ {
link: "", link: "https://go.microsoft.com/fwlink/?linkid=2205270",
title: "Build apps with Python/ Java/ Django", title: "Distributed SQL Reference",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", description: "",
}, },
]; ];
return ( return (
<Stack> <Stack style={{ minWidth: 124, maxWidth: 296 }}>
{items.map((item, i) => ( {items.map((item, i) => (
<Stack key={`tips${i}`} style={{ marginBottom: 26 }}> <Stack key={`tips${i}`} style={{ marginBottom: 26 }}>
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}> <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>