From 42731d1aae91537b4b8fb2d83a5bbfb1589fb78a Mon Sep 17 00:00:00 2001 From: victor-meng <56978073+victor-meng@users.noreply.github.com> Date: Tue, 27 Sep 2022 14:03:28 -0700 Subject: [PATCH] Quickstart UI changes (#1327) --- src/Explorer/Quickstart/QuickstartGuide.tsx | 166 +++++++++++++------- src/Explorer/SplashScreen/SplashScreen.less | 1 + src/Explorer/SplashScreen/SplashScreen.tsx | 47 +++--- 3 files changed, 136 insertions(+), 78 deletions(-) diff --git a/src/Explorer/Quickstart/QuickstartGuide.tsx b/src/Explorer/Quickstart/QuickstartGuide.tsx index 169313356..56465e715 100644 --- a/src/Explorer/Quickstart/QuickstartGuide.tsx +++ b/src/Explorer/Quickstart/QuickstartGuide.tsx @@ -35,24 +35,65 @@ enum GuideSteps { export const QuickstartGuide: React.FC = (): JSX.Element => { const [currentStep, setCurrentStep] = useState(0); - const newTableCommand = `CREATE TABLE github_users -( -user_id bigint, -url text, -login text, - .....`; - const distributeTableCommand = `SELECT create_distributed_table('github_users', 'user_id'); -SELECT create_distributed_table('github_events', 'user_id');`; - const loadDataCommand = `-- download users and store in table + const newTableCommand = `DROP SCHEMA IF EXISTS cosmosdb_tutorial CASCADE; +CREATE SCHEMA cosmosdb_tutorial; -COPY github_users FROM PROGRAM 'curl https://examples.citusdata.com/ -users.csv' WITH (FORMAT CSV)`; - const queryCommand = `-- Find all events for a single user. --- (A common transactional/operational query) +-- Using schema created for tutorial +SET search_path to cosmosdb_tutorial; -SELECT created_at, event_type, repo->>'name' AS repo_name -FROM github_events -WHERE user_id = 3861633;`; +CREATE TABLE github_users +( + user_id bigint, + url text, + login text, + avatar_url text, + gravatar_id text, + display_login text +); + +CREATE TABLE github_events +( + event_id bigint, + 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 +FROM github_events +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 textfield: HTMLInputElement = document.querySelector(selector); @@ -113,13 +154,12 @@ WHERE user_id = 3861633;`; > - This tutorial walks you through the most essential Cosmos DB PostgreSQL statements that will be used - in the PostgreSQL shell (on the right). You can also choose to go through this quick start by - connecting to PGAdmin or other tooling of your choice.
-
Before you can interact with your data using PGShell, you will need to login - please follow - instructions on the right to enter your password + This tutorial guides you to create and query distributed tables using a sample dataset. +
+
+ To begin, please enter the cluster's password in the PostgreSQL terminal. - + setCurrentStep(1)} > - - After logging in, let’s create some new tables for storing data. We will start with two sample tables - - one for storing github users and one for storing github events - - New table + Let’s create two tables github_users and github_events in “cosmosdb_tutorial” schema. + Create new table onCopyBtnClicked("#newTableCommand")} /> - + - Congratulations, you have now created your first 2 tables. + Let’s distribute the two tables using the create_distributed_table() function.

- Your table needs to be sharded on the worker nodes. You need to distribute table before you load any - data or run any queries + We are choosing “user_id” as the distribution column for our sample dataset. - Distribute table + Create distributed table onCopyBtnClicked("#distributeTableCommand")} /> - + setCurrentStep(3)} > - - We're ready to fill the tables with sample data. -
-
- For this quick start, we'll use a dataset previously captured from the GitHub API. Run the - command below to load the data - + Let's load the two tables with a sample dataset generated from the GitHub API. Load data onCopyBtnClicked("#loadDataCommand")} /> - + - github_users is a distributed table, meaning its data is divided between multiple shards. Hyperscale - (Citus) automatically runs the count on all shards in parallel, and combines the results. Let’s try a - query. + Congratulations on creating and distributing your tables. Now, it's time to run your first query! - Try query + Try queries onCopyBtnClicked("#queryCommand")} /> - + @@ -258,7 +314,7 @@ WHERE user_id = 3861633;`; {currentStep === 5 && ( - + You are all set! diff --git a/src/Explorer/SplashScreen/SplashScreen.less b/src/Explorer/SplashScreen/SplashScreen.less index 63f06b4c6..996554f8f 100644 --- a/src/Explorer/SplashScreen/SplashScreen.less +++ b/src/Explorer/SplashScreen/SplashScreen.less @@ -40,6 +40,7 @@ text-align: center; cursor: pointer; margin: 40px auto; + width: 84%; > .mainButton { min-width: 124px; diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx index 0e45ea3f5..f99473fb0 100644 --- a/src/Explorer/SplashScreen/SplashScreen.tsx +++ b/src/Explorer/SplashScreen/SplashScreen.tsx @@ -191,8 +191,8 @@ export class SplashScreen extends React.Component { )} {userContext.apiType === "Postgres" ? ( - - + + { {this.getNextStepItems()} - + { {this.getTipsAndLearnMoreItems()} + ) : (
@@ -634,24 +635,24 @@ export class SplashScreen extends React.Component { private getNextStepItems(): JSX.Element { const items: { link: string; title: string; description: string }[] = [ { - link: "", - title: "Performance tuning", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + link: "https://go.microsoft.com/fwlink/?linkid=2208312", + title: "Data Modeling", + description: "", }, { - link: "", - title: "Join Citus community", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + link: " https://go.microsoft.com/fwlink/?linkid=2206941 ", + title: "How to choose a Distribution Column", + description: "", }, { - link: "", - title: "Useful diagnostic queries", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + link: "https://go.microsoft.com/fwlink/?linkid=2207425", + title: "Build Apps with Python/Java/Django", + description: "", }, ]; return ( - + {items.map((item, i) => ( @@ -670,24 +671,24 @@ export class SplashScreen extends React.Component { private getTipsAndLearnMoreItems(): JSX.Element { const items: { link: string; title: string; description: string }[] = [ { - link: "", - title: "Data modeling", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + link: "https://go.microsoft.com/fwlink/?linkid=2207226", + title: "Performance Tuning", + description: "", }, { - link: "", - title: "How to choose a distribution Column", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + link: "https://go.microsoft.com/fwlink/?linkid=2208037", + title: "Useful Diagnostic Queries", + description: "", }, { - link: "", - title: "Build apps with Python/ Java/ Django", - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + link: "https://go.microsoft.com/fwlink/?linkid=2205270", + title: "Distributed SQL Reference", + description: "", }, ]; return ( - + {items.map((item, i) => (