random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-22 18:32:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Integrate PSQL shell in quick start guide

Browse Source
This commit is contained in:
Victor Meng
2022-09-29 23:01:19 -07:00
parent 42731d1aae
commit ec74c93670
10 changed files with 230 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,17 @@ import {
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";
@@ -35,65 +46,6 @@ enum GuideSteps {
export const QuickstartGuide: React.FC = (): JSX.Element => {
const [currentStep, setCurrentStep] = useState<number>(0);
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,
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);
@@ -170,14 +122,19 @@ SELECT date_trunc('hour', created_at) AS hour, sum((payload->>'distinct_size')::
>
<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 }}>Create new table</DefaultButton>
<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={newTableCommand}
defaultValue={newTableCommandForDisplay}
styles={{
root: { width: "90%" },
field: {
@@ -210,14 +167,19 @@ SELECT date_trunc('hour', created_at) AS hour, sum((payload->>'distinct_size')::
<br />
We are choosing “user_id” as the distribution column for our sample dataset.
</Text>
<DefaultButton style={{ marginTop: 16, width: 200 }}>Create distributed table</DefaultButton>
<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={distributeTableCommand}
defaultValue={distributeTableCommandForDisplay}
styles={{
root: { width: "90%" },
field: {
@@ -245,14 +207,19 @@ SELECT date_trunc('hour', created_at) AS hour, sum((payload->>'distinct_size')::
>
<Stack style={{ marginTop: 20 }}>
<Text>Let&apos;s load the two tables with a sample dataset generated from the GitHub API.</Text>
<DefaultButton style={{ marginTop: 16, width: 110 }}>Load data</DefaultButton>
<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={loadDataCommand}
defaultValue={loadDataCommandForDisplay}
styles={{
root: { width: "90%" },
field: {
@@ -282,14 +249,19 @@ SELECT date_trunc('hour', created_at) AS hour, sum((payload->>'distinct_size')::
<Text>
Congratulations on creating and distributing your tables. Now, it&apos;s time to run your first query!
</Text>
<DefaultButton style={{ marginTop: 16, width: 115 }}>Try queries</DefaultButton>
<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={queryCommand}
defaultValue={queryCommandForDisplay}
styles={{
root: { width: "90%" },
field: {