Compare commits
31 Commits
fabricbot-
...
PSQL_Shell
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f18e5dd218 | ||
|
|
a0911d92a6 | ||
|
|
3b790ed3e2 | ||
|
|
8ad426c82f | ||
|
|
3f24a57974 | ||
|
|
83e78ef9ac | ||
|
|
8433a027ad | ||
|
|
81dfd76198 | ||
|
|
7c77ffda6c | ||
|
|
c683d203b2 | ||
|
|
ec74c93670 | ||
|
|
a34d3bb000 | ||
|
|
42731d1aae | ||
|
|
3abbb63adc | ||
|
|
2e618cb3c4 | ||
|
|
beca0d6608 | ||
|
|
d54c896d74 | ||
|
|
d6a58fd45f | ||
|
|
a851f78b1c | ||
|
|
a4061a96b1 | ||
|
|
06c3b6fe94 | ||
|
|
89c7ebdd20 | ||
|
|
d0c2f72ed3 | ||
|
|
c2673ec707 | ||
|
|
759a4ca5cf | ||
|
|
9078878f44 | ||
|
|
139a9cb22c | ||
|
|
c5ef0e608e | ||
|
|
d66e85f431 | ||
|
|
0996489897 | ||
|
|
f83634c50d |
30
.github/fabricbot.json
vendored
@@ -1,30 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "1.0",
|
|
||||||
"tasks": [
|
|
||||||
{
|
|
||||||
"taskType": "trigger",
|
|
||||||
"capabilityId": "AutoMerge",
|
|
||||||
"subCapability": "AutoMerge",
|
|
||||||
"version": "1.0",
|
|
||||||
"id": "LUEPwPETV",
|
|
||||||
"config": {
|
|
||||||
"taskName": "Auto Merge",
|
|
||||||
"label": "automerge",
|
|
||||||
"minMinutesOpen": "5",
|
|
||||||
"mergeType": "squash",
|
|
||||||
"deleteBranches": true,
|
|
||||||
"requireAllStatuses": true,
|
|
||||||
"requireSpecificCheckRuns": false,
|
|
||||||
"usePrDescriptionAsCommitMessage": true,
|
|
||||||
"requireAllStatuses_exemptList": [
|
|
||||||
"Azure Pipelines",
|
|
||||||
"Dependabot",
|
|
||||||
"GitHub Pages",
|
|
||||||
"Check Enforcer"
|
|
||||||
],
|
|
||||||
"silentMode": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"userGroups": []
|
|
||||||
}
|
|
||||||
4
.github/workflows/ci.yml
vendored
@@ -182,7 +182,7 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
name: dist
|
name: dist
|
||||||
- run: cp ./configs/prod.json config.json
|
- run: cp ./configs/prod.json config.json
|
||||||
- run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
|
- run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "vimeng@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
|
||||||
- run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
|
- run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
|
||||||
- run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
|
- run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
|
||||||
- uses: actions/upload-artifact@v2
|
- uses: actions/upload-artifact@v2
|
||||||
@@ -207,7 +207,7 @@ jobs:
|
|||||||
name: dist
|
name: dist
|
||||||
- run: cp ./configs/mpac.json config.json
|
- run: cp ./configs/mpac.json config.json
|
||||||
- run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
|
- run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
|
||||||
- run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
|
- run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "vimeng@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
|
||||||
- run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
|
- run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
|
||||||
- run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
|
- run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
|
||||||
- uses: actions/upload-artifact@v2
|
- uses: actions/upload-artifact@v2
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html class="default no-js">
|
<html class="default no-js">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
@@ -9,8 +10,9 @@
|
|||||||
<link rel="stylesheet" href="../assets/css/main.css">
|
<link rel="stylesheet" href="../assets/css/main.css">
|
||||||
<script async src="../assets/js/search.js" id="search-script"></script>
|
<script async src="../assets/js/search.js" id="search-script"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="tsd-page-toolbar">
|
<div class="tsd-page-toolbar">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="table-wrap">
|
<div class="table-wrap">
|
||||||
@@ -64,8 +66,8 @@
|
|||||||
<h1>Enumeration BladeType</h1>
|
<h1>Enumeration BladeType</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="container container-main">
|
<div class="container container-main">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-8 col-content">
|
<div class="col-8 col-content">
|
||||||
<section class="tsd-panel tsd-comment">
|
<section class="tsd-panel tsd-comment">
|
||||||
@@ -82,12 +84,24 @@
|
|||||||
<section class="tsd-index-section ">
|
<section class="tsd-index-section ">
|
||||||
<h3>Enumeration members</h3>
|
<h3>Enumeration members</h3>
|
||||||
<ul class="tsd-index-list">
|
<ul class="tsd-index-list">
|
||||||
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#cassandrakeys" class="tsd-kind-icon">Cassandra<wbr>Keys</a></li>
|
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
|
||||||
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#gremlinkeys" class="tsd-kind-icon">Gremlin<wbr>Keys</a></li>
|
href="selfserve_selfserveutils.bladetype.html#cassandrakeys"
|
||||||
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#metrics" class="tsd-kind-icon">Metrics</a></li>
|
class="tsd-kind-icon">Cassandra<wbr>Keys</a></li>
|
||||||
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#mongokeys" class="tsd-kind-icon">Mongo<wbr>Keys</a></li>
|
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
|
||||||
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#sqlkeys" class="tsd-kind-icon">Sql<wbr>Keys</a></li>
|
href="selfserve_selfserveutils.bladetype.html#gremlinkeys"
|
||||||
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#tablekeys" class="tsd-kind-icon">Table<wbr>Keys</a></li>
|
class="tsd-kind-icon">Gremlin<wbr>Keys</a></li>
|
||||||
|
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
|
||||||
|
href="selfserve_selfserveutils.bladetype.html#metrics"
|
||||||
|
class="tsd-kind-icon">Metrics</a></li>
|
||||||
|
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
|
||||||
|
href="selfserve_selfserveutils.bladetype.html#mongokeys"
|
||||||
|
class="tsd-kind-icon">Mongo<wbr>Keys</a></li>
|
||||||
|
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
|
||||||
|
href="selfserve_selfserveutils.bladetype.html#sqlkeys"
|
||||||
|
class="tsd-kind-icon">Sql<wbr>Keys</a></li>
|
||||||
|
<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a
|
||||||
|
href="selfserve_selfserveutils.bladetype.html#tablekeys"
|
||||||
|
class="tsd-kind-icon">Table<wbr>Keys</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@@ -98,31 +112,36 @@
|
|||||||
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a name="cassandrakeys" class="tsd-anchor"></a>
|
<a name="cassandrakeys" class="tsd-anchor"></a>
|
||||||
<h3>Cassandra<wbr>Keys</h3>
|
<h3>Cassandra<wbr>Keys</h3>
|
||||||
<div class="tsd-signature tsd-kind-icon">Cassandra<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = "cassandraDbKeys"</span></div>
|
<div class="tsd-signature tsd-kind-icon">Cassandra<wbr>Keys<span
|
||||||
|
class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> =
|
||||||
|
"cassandraDbKeys"</span></div>
|
||||||
<aside class="tsd-sources">
|
<aside class="tsd-sources">
|
||||||
</aside>
|
</aside>
|
||||||
<div class="tsd-comment tsd-typography">
|
<div class="tsd-comment tsd-typography">
|
||||||
<div class="lead">
|
<div class="lead">
|
||||||
<p>Keys blade of a Cassandra API account.</p>
|
<p>Keys blade of a Azure Cosmos DB for Apache Cassandra account.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a name="gremlinkeys" class="tsd-anchor"></a>
|
<a name="gremlinkeys" class="tsd-anchor"></a>
|
||||||
<h3>Gremlin<wbr>Keys</h3>
|
<h3>Gremlin<wbr>Keys</h3>
|
||||||
<div class="tsd-signature tsd-kind-icon">Gremlin<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = "keys"</span></div>
|
<div class="tsd-signature tsd-kind-icon">Gremlin<wbr>Keys<span
|
||||||
|
class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> =
|
||||||
|
"keys"</span></div>
|
||||||
<aside class="tsd-sources">
|
<aside class="tsd-sources">
|
||||||
</aside>
|
</aside>
|
||||||
<div class="tsd-comment tsd-typography">
|
<div class="tsd-comment tsd-typography">
|
||||||
<div class="lead">
|
<div class="lead">
|
||||||
<p>Keys blade of a Gremlin API account.</p>
|
<p>Keys blade of a Azure Cosmos DB for Apache Gremlin account.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a name="metrics" class="tsd-anchor"></a>
|
<a name="metrics" class="tsd-anchor"></a>
|
||||||
<h3>Metrics</h3>
|
<h3>Metrics</h3>
|
||||||
<div class="tsd-signature tsd-kind-icon">Metrics<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = "metrics"</span></div>
|
<div class="tsd-signature tsd-kind-icon">Metrics<span class="tsd-signature-symbol">:</span>
|
||||||
|
<span class="tsd-signature-symbol"> = "metrics"</span></div>
|
||||||
<aside class="tsd-sources">
|
<aside class="tsd-sources">
|
||||||
</aside>
|
</aside>
|
||||||
<div class="tsd-comment tsd-typography">
|
<div class="tsd-comment tsd-typography">
|
||||||
@@ -134,36 +153,41 @@
|
|||||||
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a name="mongokeys" class="tsd-anchor"></a>
|
<a name="mongokeys" class="tsd-anchor"></a>
|
||||||
<h3>Mongo<wbr>Keys</h3>
|
<h3>Mongo<wbr>Keys</h3>
|
||||||
<div class="tsd-signature tsd-kind-icon">Mongo<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = "mongoDbKeys"</span></div>
|
<div class="tsd-signature tsd-kind-icon">Mongo<wbr>Keys<span
|
||||||
|
class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> =
|
||||||
|
"mongoDbKeys"</span></div>
|
||||||
<aside class="tsd-sources">
|
<aside class="tsd-sources">
|
||||||
</aside>
|
</aside>
|
||||||
<div class="tsd-comment tsd-typography">
|
<div class="tsd-comment tsd-typography">
|
||||||
<div class="lead">
|
<div class="lead">
|
||||||
<p>Keys blade of a Mongo API account.</p>
|
<p>Keys blade of a Azure Cosmos DB for MongoDB account.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a name="sqlkeys" class="tsd-anchor"></a>
|
<a name="sqlkeys" class="tsd-anchor"></a>
|
||||||
<h3>Sql<wbr>Keys</h3>
|
<h3>Sql<wbr>Keys</h3>
|
||||||
<div class="tsd-signature tsd-kind-icon">Sql<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = "keys"</span></div>
|
<div class="tsd-signature tsd-kind-icon">Sql<wbr>Keys<span class="tsd-signature-symbol">:</span>
|
||||||
|
<span class="tsd-signature-symbol"> = "keys"</span></div>
|
||||||
<aside class="tsd-sources">
|
<aside class="tsd-sources">
|
||||||
</aside>
|
</aside>
|
||||||
<div class="tsd-comment tsd-typography">
|
<div class="tsd-comment tsd-typography">
|
||||||
<div class="lead">
|
<div class="lead">
|
||||||
<p>Keys blade of a SQL API account.</p>
|
<p>Keys blade of a Azure Cosmos DB for NoSQL account.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a name="tablekeys" class="tsd-anchor"></a>
|
<a name="tablekeys" class="tsd-anchor"></a>
|
||||||
<h3>Table<wbr>Keys</h3>
|
<h3>Table<wbr>Keys</h3>
|
||||||
<div class="tsd-signature tsd-kind-icon">Table<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = "tableKeys"</span></div>
|
<div class="tsd-signature tsd-kind-icon">Table<wbr>Keys<span
|
||||||
|
class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> =
|
||||||
|
"tableKeys"</span></div>
|
||||||
<aside class="tsd-sources">
|
<aside class="tsd-sources">
|
||||||
</aside>
|
</aside>
|
||||||
<div class="tsd-comment tsd-typography">
|
<div class="tsd-comment tsd-typography">
|
||||||
<div class="lead">
|
<div class="lead">
|
||||||
<p>Keys blade of a Table API account.</p>
|
<p>Keys blade of a Azure Cosmos DB for Table account.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -179,19 +203,23 @@
|
|||||||
<a href="../modules/selfserve.html">Self<wbr>Serve</a>
|
<a href="../modules/selfserve.html">Self<wbr>Serve</a>
|
||||||
</li>
|
</li>
|
||||||
<li class=" tsd-kind-module">
|
<li class=" tsd-kind-module">
|
||||||
<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
|
<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr>
|
||||||
|
<wbr>What is currently supported?</a>
|
||||||
</li>
|
</li>
|
||||||
<li class=" tsd-kind-module">
|
<li class=" tsd-kind-module">
|
||||||
<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
|
<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
|
||||||
</li>
|
</li>
|
||||||
<li class=" tsd-kind-module">
|
<li class=" tsd-kind-module">
|
||||||
<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
|
<a
|
||||||
|
href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
|
||||||
</li>
|
</li>
|
||||||
<li class=" tsd-kind-module">
|
<li class=" tsd-kind-module">
|
||||||
<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
|
<a
|
||||||
|
href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="current tsd-kind-module">
|
<li class="current tsd-kind-module">
|
||||||
<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
|
<a
|
||||||
|
href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -203,39 +231,47 @@
|
|||||||
<a href="selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a>
|
<a href="selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a href="selfserve_selfserveutils.bladetype.html#cassandrakeys" class="tsd-kind-icon">Cassandra<wbr>Keys</a>
|
<a href="selfserve_selfserveutils.bladetype.html#cassandrakeys"
|
||||||
|
class="tsd-kind-icon">Cassandra<wbr>Keys</a>
|
||||||
</li>
|
</li>
|
||||||
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a href="selfserve_selfserveutils.bladetype.html#gremlinkeys" class="tsd-kind-icon">Gremlin<wbr>Keys</a>
|
<a href="selfserve_selfserveutils.bladetype.html#gremlinkeys"
|
||||||
|
class="tsd-kind-icon">Gremlin<wbr>Keys</a>
|
||||||
</li>
|
</li>
|
||||||
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a href="selfserve_selfserveutils.bladetype.html#metrics" class="tsd-kind-icon">Metrics</a>
|
<a href="selfserve_selfserveutils.bladetype.html#metrics"
|
||||||
|
class="tsd-kind-icon">Metrics</a>
|
||||||
</li>
|
</li>
|
||||||
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a href="selfserve_selfserveutils.bladetype.html#mongokeys" class="tsd-kind-icon">Mongo<wbr>Keys</a>
|
<a href="selfserve_selfserveutils.bladetype.html#mongokeys"
|
||||||
|
class="tsd-kind-icon">Mongo<wbr>Keys</a>
|
||||||
</li>
|
</li>
|
||||||
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a href="selfserve_selfserveutils.bladetype.html#sqlkeys" class="tsd-kind-icon">Sql<wbr>Keys</a>
|
<a href="selfserve_selfserveutils.bladetype.html#sqlkeys"
|
||||||
|
class="tsd-kind-icon">Sql<wbr>Keys</a>
|
||||||
</li>
|
</li>
|
||||||
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
|
||||||
<a href="selfserve_selfserveutils.bladetype.html#tablekeys" class="tsd-kind-icon">Table<wbr>Keys</a>
|
<a href="selfserve_selfserveutils.bladetype.html#tablekeys"
|
||||||
|
class="tsd-kind-icon">Table<wbr>Keys</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="after-current">
|
<ul class="after-current">
|
||||||
<li class=" tsd-kind-enum tsd-parent-kind-module">
|
<li class=" tsd-kind-enum tsd-parent-kind-module">
|
||||||
<a href="selfserve_selfserveutils.selfservetype.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a>
|
<a href="selfserve_selfserveutils.selfservetype.html"
|
||||||
|
class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a>
|
||||||
</li>
|
</li>
|
||||||
<li class=" tsd-kind-function tsd-parent-kind-module">
|
<li class=" tsd-kind-function tsd-parent-kind-module">
|
||||||
<a href="../modules/selfserve_selfserveutils.html#generatebladelink" class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a>
|
<a href="../modules/selfserve_selfserveutils.html#generatebladelink"
|
||||||
|
class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer class="with-border-bottom">
|
<footer class="with-border-bottom">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Legend</h2>
|
<h2>Legend</h2>
|
||||||
<div class="tsd-legend-group">
|
<div class="tsd-legend-group">
|
||||||
@@ -254,11 +290,12 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<div class="container tsd-generator">
|
<div class="container tsd-generator">
|
||||||
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
|
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="overlay"></div>
|
<div class="overlay"></div>
|
||||||
<script src="../assets/js/main.js"></script>
|
<script src="../assets/js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
4
images/Pivot1_selected.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="8" cy="8" r="8" fill="#0078D4"/>
|
||||||
|
<path d="M9.18652 4.8418V12H7.64844V6.58008C7.5638 6.65495 7.46289 6.72656 7.3457 6.79492C7.23177 6.86003 7.1097 6.92025 6.97949 6.97559C6.84928 7.02767 6.71419 7.07324 6.57422 7.1123C6.43424 7.14811 6.2959 7.17415 6.15918 7.19043V5.8916C6.55957 5.77441 6.93717 5.62467 7.29199 5.44238C7.64681 5.26009 7.96745 5.0599 8.25391 4.8418H9.18652Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 505 B |
4
images/Pivot2.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="8" cy="8" r="7.5" stroke="#949494"/>
|
||||||
|
<path d="M7.21875 10.7207H10.1875V12H5.5293V11.4727C5.5293 11.1146 5.58952 10.7939 5.70996 10.5107C5.8304 10.2243 5.98177 9.96875 6.16406 9.74414C6.34635 9.51628 6.54492 9.31608 6.75977 9.14355C6.97786 8.96777 7.18457 8.8099 7.37988 8.66992C7.58496 8.52344 7.764 8.38346 7.91699 8.25C8.07324 8.11654 8.20345 7.9847 8.30762 7.85449C8.41504 7.72103 8.49479 7.58757 8.54688 7.4541C8.59896 7.31738 8.625 7.17253 8.625 7.01953C8.625 6.72005 8.54036 6.49382 8.37109 6.34082C8.20182 6.18783 7.94303 6.11133 7.59473 6.11133C6.99251 6.11133 6.41634 6.35059 5.86621 6.8291V5.47168C6.47493 5.0778 7.16178 4.88086 7.92676 4.88086C8.28158 4.88086 8.59896 4.92806 8.87891 5.02246C9.16211 5.11361 9.40137 5.24544 9.59668 5.41797C9.79199 5.59049 9.9401 5.80046 10.041 6.04785C10.1452 6.29199 10.1973 6.56543 10.1973 6.86816C10.1973 7.19043 10.1468 7.47689 10.0459 7.72754C9.94824 7.97819 9.81641 8.20605 9.65039 8.41113C9.48763 8.61621 9.29883 8.80501 9.08398 8.97754C8.86914 9.14681 8.64616 9.3112 8.41504 9.4707C8.25879 9.58138 8.10742 9.69206 7.96094 9.80273C7.81771 9.91016 7.69076 10.0176 7.58008 10.125C7.4694 10.2292 7.38151 10.3317 7.31641 10.4326C7.2513 10.5335 7.21875 10.6296 7.21875 10.7207Z" fill="#949494"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
4
images/Pivot2_selected.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="8" cy="8" r="8" fill="#0078D4"/>
|
||||||
|
<path d="M7.21875 10.7207H10.1875V12H5.5293V11.4727C5.5293 11.1146 5.58952 10.7939 5.70996 10.5107C5.8304 10.2243 5.98177 9.96875 6.16406 9.74414C6.34635 9.51628 6.54492 9.31608 6.75977 9.14355C6.97786 8.96777 7.18457 8.8099 7.37988 8.66992C7.58496 8.52344 7.764 8.38346 7.91699 8.25C8.07324 8.11654 8.20345 7.9847 8.30762 7.85449C8.41504 7.72103 8.49479 7.58757 8.54688 7.4541C8.59896 7.31738 8.625 7.17253 8.625 7.01953C8.625 6.72005 8.54036 6.49382 8.37109 6.34082C8.20182 6.18783 7.94303 6.11133 7.59473 6.11133C6.99251 6.11133 6.41634 6.35059 5.86621 6.8291V5.47168C6.47493 5.0778 7.16178 4.88086 7.92676 4.88086C8.28158 4.88086 8.59896 4.92806 8.87891 5.02246C9.16211 5.11361 9.40137 5.24544 9.59668 5.41797C9.79199 5.59049 9.9401 5.80046 10.041 6.04785C10.1452 6.29199 10.1973 6.56543 10.1973 6.86816C10.1973 7.19043 10.1468 7.47689 10.0459 7.72754C9.94824 7.97819 9.81641 8.20605 9.65039 8.41113C9.48763 8.61621 9.29883 8.80501 9.08398 8.97754C8.86914 9.14681 8.64616 9.3112 8.41504 9.4707C8.25879 9.58138 8.10742 9.69206 7.96094 9.80273C7.81771 9.91016 7.69076 10.0176 7.58008 10.125C7.4694 10.2292 7.38151 10.3317 7.31641 10.4326C7.2513 10.5335 7.21875 10.6296 7.21875 10.7207Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
4
images/Pivot3.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="8" cy="8" r="7.5" stroke="#949494"/>
|
||||||
|
<path d="M5.69531 11.7705V10.4277C6.16406 10.7695 6.71094 10.9404 7.33594 10.9404C7.72982 10.9404 8.03581 10.8558 8.25391 10.6865C8.47526 10.5173 8.58594 10.2812 8.58594 9.97852C8.58594 9.66602 8.44922 9.42513 8.17578 9.25586C7.9056 9.08659 7.53288 9.00195 7.05762 9.00195H6.4082V7.82031H7.00879C7.92025 7.82031 8.37598 7.51758 8.37598 6.91211C8.37598 6.34245 8.02604 6.05762 7.32617 6.05762C6.85742 6.05762 6.40169 6.20898 5.95898 6.51172V5.25195C6.45052 5.00456 7.02344 4.88086 7.67773 4.88086C8.39388 4.88086 8.95052 5.04199 9.34766 5.36426C9.74805 5.68652 9.94824 6.10482 9.94824 6.61914C9.94824 7.53385 9.48438 8.10677 8.55664 8.33789V8.3623C9.05143 8.42415 9.44206 8.60482 9.72852 8.9043C10.015 9.20052 10.1582 9.5651 10.1582 9.99805C10.1582 10.6523 9.91895 11.1699 9.44043 11.5508C8.96191 11.9316 8.30111 12.1221 7.45801 12.1221C6.73535 12.1221 6.14779 12.0049 5.69531 11.7705Z" fill="#949494"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
4
images/Pivot3_selected.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="8" cy="8" r="8" fill="#0078D4"/>
|
||||||
|
<path d="M5.69531 11.7705V10.4277C6.16406 10.7695 6.71094 10.9404 7.33594 10.9404C7.72982 10.9404 8.03581 10.8558 8.25391 10.6865C8.47526 10.5173 8.58594 10.2812 8.58594 9.97852C8.58594 9.66602 8.44922 9.42513 8.17578 9.25586C7.9056 9.08659 7.53288 9.00195 7.05762 9.00195H6.4082V7.82031H7.00879C7.92025 7.82031 8.37598 7.51758 8.37598 6.91211C8.37598 6.34245 8.02604 6.05762 7.32617 6.05762C6.85742 6.05762 6.40169 6.20898 5.95898 6.51172V5.25195C6.45052 5.00456 7.02344 4.88086 7.67773 4.88086C8.39388 4.88086 8.95052 5.04199 9.34766 5.36426C9.74805 5.68652 9.94824 6.10482 9.94824 6.61914C9.94824 7.53385 9.48438 8.10677 8.55664 8.33789V8.3623C9.05143 8.42415 9.44206 8.60482 9.72852 8.9043C10.015 9.20052 10.1582 9.5651 10.1582 9.99805C10.1582 10.6523 9.91895 11.1699 9.44043 11.5508C8.96191 11.9316 8.30111 12.1221 7.45801 12.1221C6.73535 12.1221 6.14779 12.0049 5.69531 11.7705Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
4
images/Pivot4.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="8" cy="8" r="7.5" stroke="#949494"/>
|
||||||
|
<path d="M9.77246 4.99805V9.41211H10.6123V10.5645H9.77246V12H8.36621V10.5645H5.31445V9.3584C5.58464 9.05566 5.86458 8.72526 6.1543 8.36719C6.44401 8.00586 6.72396 7.63477 6.99414 7.25391C7.26432 6.87305 7.51497 6.49056 7.74609 6.10645C7.98047 5.71908 8.17904 5.34961 8.3418 4.99805H9.77246ZM6.69629 9.41211H8.36621V6.96582C8.25228 7.17741 8.12858 7.39225 7.99512 7.61035C7.86165 7.8252 7.72168 8.03841 7.5752 8.25C7.42871 8.45833 7.2806 8.66178 7.13086 8.86035C6.98112 9.05566 6.83626 9.23958 6.69629 9.41211Z" fill="#949494"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 680 B |
4
images/Pivot4_selected.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="8" cy="8" r="8" fill="#0078D4"/>
|
||||||
|
<path d="M9.77246 4.99805V9.41211H10.6123V10.5645H9.77246V12H8.36621V10.5645H5.31445V9.3584C5.58464 9.05566 5.86458 8.72526 6.1543 8.36719C6.44401 8.00586 6.72396 7.63477 6.99414 7.25391C7.26432 6.87305 7.51497 6.49056 7.74609 6.10645C7.98047 5.71908 8.17904 5.34961 8.3418 4.99805H9.77246ZM6.69629 9.41211H8.36621V6.96582C8.25228 7.17741 8.12858 7.39225 7.99512 7.61035C7.86165 7.8252 7.72168 8.03841 7.5752 8.25C7.42871 8.45833 7.2806 8.66178 7.13086 8.86035C6.98112 9.05566 6.83626 9.23958 6.69629 9.41211Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 674 B |
4
images/Pivot5.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="8" cy="8" r="7.5" stroke="#949494"/>
|
||||||
|
<path d="M5.81738 11.8193V10.501C6.2959 10.7939 6.80534 10.9404 7.3457 10.9404C7.7526 10.9404 8.06999 10.8444 8.29785 10.6523C8.52897 10.457 8.64453 10.1934 8.64453 9.86133C8.64453 9.16797 8.15462 8.82129 7.1748 8.82129C6.81348 8.82129 6.39681 8.84896 5.9248 8.9043L6.18848 4.99805H9.89453V6.25781H7.36523L7.26758 7.65918C7.51823 7.63965 7.7347 7.62988 7.91699 7.62988C8.63639 7.62988 9.19954 7.81868 9.60645 8.19629C10.0133 8.57389 10.2168 9.08171 10.2168 9.71973C10.2168 10.4261 9.97428 11.0039 9.48926 11.4531C9.00423 11.8991 8.34668 12.1221 7.5166 12.1221C6.84277 12.1221 6.27637 12.0212 5.81738 11.8193Z" fill="#949494"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 779 B |
4
images/Pivot5_selected.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="8" cy="8" r="8" fill="#0078D4"/>
|
||||||
|
<path d="M5.81738 11.8193V10.501C6.2959 10.7939 6.80534 10.9404 7.3457 10.9404C7.7526 10.9404 8.06999 10.8444 8.29785 10.6523C8.52897 10.457 8.64453 10.1934 8.64453 9.86133C8.64453 9.16797 8.15462 8.82129 7.1748 8.82129C6.81348 8.82129 6.39681 8.84896 5.9248 8.9043L6.18848 4.99805H9.89453V6.25781H7.36523L7.26758 7.65918C7.51823 7.63965 7.7347 7.62988 7.91699 7.62988C8.63639 7.62988 9.19954 7.81868 9.60645 8.19629C10.0133 8.57389 10.2168 9.08171 10.2168 9.71973C10.2168 10.4261 9.97428 11.0039 9.48926 11.4531C9.00423 11.8991 8.34668 12.1221 7.5166 12.1221C6.84277 12.1221 6.27637 12.0212 5.81738 11.8193Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 773 B |
3
images/PostgreConnect.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M2.9 10.4C2.86142 9.92426 2.92976 9.44591 3.1 9C3.2722 8.57315 3.54698 8.19534 3.9 7.9L5.6 6.1L10.6 11.1L8.8 12.8C8.50466 13.153 8.12685 13.4278 7.7 13.6C7.29358 13.7932 6.84997 13.8955 6.4 13.9L5.2 13.7L4.3 13.2L1.7 15.7L1 15L3.5 12.4C3.29618 12.1222 3.12819 11.8198 3 11.5C2.92162 11.1388 2.88804 10.7694 2.9 10.4ZM6.4 12.9L7.3 12.7C7.60584 12.5584 7.87842 12.354 8.1 12.1L9.2 11.1L5.6 7.5L4.6 8.6L4 9.4C3.9125 9.72567 3.87872 10.0634 3.9 10.4C3.88428 10.7034 3.91806 11.0074 4 11.3L4.6 12.1L5.4 12.7L6.4 12.9ZM13.2 4.3C13.4038 4.5778 13.5718 4.88018 13.7 5.2C13.8153 5.59037 13.8824 5.99335 13.9 6.4C13.8955 6.84997 13.7932 7.29358 13.6 7.7C13.4278 8.12685 13.153 8.50466 12.8 8.8L11.1 10.6L6.1 5.6L7.9 3.9C8.19534 3.54698 8.57315 3.2722 9 3.1C9.44591 2.92976 9.92426 2.86142 10.4 2.9H11.5L12.4 3.4L15 1L15.7 1.7L13.2 4.3ZM12.1 8.1C12.354 7.87842 12.5584 7.60584 12.7 7.3C12.8142 7.01258 12.8818 6.70875 12.9 6.4C12.8909 6.0577 12.8232 5.71948 12.7 5.4L12.1 4.6L11.3 4.1C11.0284 3.9405 10.7136 3.87053 10.4 3.9H9.4L8.6 4.5L7.5 5.5L11.1 9.1L12.1 8.1Z" fill="#0078D4"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
15
images/PowerShell.svg
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0.944458 10.9331H33.0556V28.836C33.0556 29.1205 32.9425 29.3934 32.7413 29.5946C32.5401 29.7958 32.2672 29.9089 31.9827 29.9089H2.01735C1.7328 29.9089 1.45991 29.7958 1.2587 29.5946C1.05749 29.3934 0.944458 29.1205 0.944458 28.836V10.9331Z" fill="url(#paint0_linear_1497_136679)"/>
|
||||||
|
<path d="M2.02301 4.09132H31.977C32.1179 4.09132 32.2574 4.11907 32.3876 4.17299C32.5178 4.22691 32.636 4.30594 32.7357 4.40557C32.8353 4.50519 32.9143 4.62347 32.9682 4.75364C33.0222 4.8838 33.0499 5.02332 33.0499 5.16421V10.9329H0.944458V5.16421C0.944456 5.02284 0.972394 4.88286 1.02667 4.75232C1.08094 4.62178 1.16047 4.50326 1.2607 4.40356C1.36093 4.30385 1.47987 4.22494 1.6107 4.17136C1.74152 4.11778 1.88164 4.09058 2.02301 4.09132Z" fill="#0078D4"/>
|
||||||
|
<path d="M5.33553 15.0706L6.03309 14.371C6.09216 14.3118 6.17235 14.2785 6.25601 14.2783C6.33967 14.2782 6.41995 14.3113 6.47919 14.3704L11.6394 19.5161C11.6982 19.5747 11.7449 19.6444 11.7769 19.7211C11.8088 19.7979 11.8252 19.8801 11.8254 19.9632C11.8255 20.0463 11.8092 20.1286 11.7775 20.2055C11.7458 20.2823 11.6993 20.3521 11.6407 20.4109L10.9444 21.1091L5.3375 15.518C5.27826 15.4589 5.24491 15.3788 5.24479 15.2951C5.24467 15.2114 5.27779 15.1312 5.33687 15.0719L5.33553 15.0706Z" fill="#F2F2F2"/>
|
||||||
|
<path d="M6.1367 25.5068L5.43717 24.8092C5.37793 24.7501 5.34459 24.67 5.34447 24.5863C5.34435 24.5026 5.37747 24.4224 5.43654 24.3631L10.9463 18.8378L11.6445 19.534C11.7633 19.6525 11.8302 19.8133 11.8305 19.9812C11.8307 20.149 11.7643 20.31 11.6457 20.4289L6.57747 25.5115C6.5184 25.5707 6.43821 25.6041 6.35455 25.6042C6.27089 25.6043 6.19061 25.5712 6.13137 25.5121L6.1367 25.5068Z" fill="#E6E6E6"/>
|
||||||
|
<path d="M22.1019 23.8755H14.1893C13.8857 23.8755 13.6396 24.1216 13.6396 24.4252V25.2355C13.6396 25.5391 13.8857 25.7852 14.1893 25.7852H22.1019C22.4054 25.7852 22.6515 25.5391 22.6515 25.2355V24.4252C22.6515 24.1216 22.4054 23.8755 22.1019 23.8755Z" fill="#F2F2F2"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_1497_136679" x1="17" y1="29.9089" x2="17" y2="10.9331" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#32BEDD"/>
|
||||||
|
<stop offset="0.175" stop-color="#32CAEA"/>
|
||||||
|
<stop offset="0.41" stop-color="#32D2F2"/>
|
||||||
|
<stop offset="0.775" stop-color="#32D4F5"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
127
images/QuickstartComplete.svg
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
<svg width="68" height="72" viewBox="0 0 68 72" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<circle cx="34" cy="35" r="32" fill="#BFBFBF"/>
|
||||||
|
<g style="mix-blend-mode:multiply" filter="url(#filter0_ddd_1497_137613)">
|
||||||
|
<path d="M18 21.3999C18 19.1908 19.7909 17.3999 22 17.3999H43.6L50 23.7999V48.5999C50 50.809 48.2091 52.5999 46 52.5999H22C19.7909 52.5999 18 50.809 18 48.5999V21.3999Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
<g filter="url(#filter1_b_1497_137613)">
|
||||||
|
<path d="M18 21.3999C18 19.1908 19.7909 17.3999 22 17.3999H43.6L50 23.7999V48.5999C50 50.809 48.2091 52.5999 46 52.5999H22C19.7909 52.5999 18 50.809 18 48.5999V21.3999Z" fill="url(#paint0_linear_1497_137613)"/>
|
||||||
|
</g>
|
||||||
|
<g style="mix-blend-mode:hard-light" filter="url(#filter2_ii_1497_137613)">
|
||||||
|
<path d="M18 21.3999C18 19.1908 19.7909 17.3999 22 17.3999H43.6L50 23.7999V48.5999C50 50.809 48.2091 52.5999 46 52.5999H22C19.7909 52.5999 18 50.809 18 48.5999V21.3999Z" fill="#808080"/>
|
||||||
|
<path d="M18 21.3999C18 19.1908 19.7909 17.3999 22 17.3999H43.6L50 23.7999V48.5999C50 50.809 48.2091 52.5999 46 52.5999H22C19.7909 52.5999 18 50.809 18 48.5999V21.3999Z" fill="url(#pattern0)" fill-opacity="0.02"/>
|
||||||
|
</g>
|
||||||
|
<g style="mix-blend-mode:multiply" filter="url(#filter3_ddd_1497_137613)">
|
||||||
|
<path d="M43.6006 17.3999L50.0006 23.7999H47.6006C45.3914 23.7999 43.6006 22.009 43.6006 19.7999V17.3999Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
<g filter="url(#filter4_b_1497_137613)">
|
||||||
|
<path d="M43.6006 17.3999L50.0006 23.7999H47.6006C45.3914 23.7999 43.6006 22.009 43.6006 19.7999V17.3999Z" fill="url(#paint1_linear_1497_137613)"/>
|
||||||
|
</g>
|
||||||
|
<g style="mix-blend-mode:hard-light" filter="url(#filter5_ii_1497_137613)">
|
||||||
|
<path d="M43.6006 17.3999L50.0006 23.7999H47.6006C45.3914 23.7999 43.6006 22.009 43.6006 19.7999V17.3999Z" fill="#808080"/>
|
||||||
|
<path d="M43.6006 17.3999L50.0006 23.7999H47.6006C45.3914 23.7999 43.6006 22.009 43.6006 19.7999V17.3999Z" fill="url(#pattern1)" fill-opacity="0.02"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="33.9994" cy="34.9999" r="9.6" fill="#BFBFBF"/>
|
||||||
|
<path d="M30.7998 34.9998L33.3598 37.5598L37.8398 32.7598" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6793 34.9998C41.6793 39.2414 38.2409 42.6798 33.9993 42.6798C29.7578 42.6798 26.3193 39.2414 26.3193 34.9998C26.3193 30.7583 29.7578 27.3198 33.9993 27.3198C38.2409 27.3198 41.6793 30.7583 41.6793 34.9998ZM33.9993 42.0398C37.8874 42.0398 41.0393 38.8879 41.0393 34.9998C41.0393 31.1117 37.8874 27.9598 33.9993 27.9598C30.1113 27.9598 26.9593 31.1117 26.9593 34.9998C26.9593 38.8879 30.1113 42.0398 33.9993 42.0398Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.3899 22.3199C30.0451 22.3769 29.7748 22.6471 29.7179 22.9919C29.661 22.6471 29.3907 22.3769 29.0459 22.3199C29.3907 22.263 29.661 21.9928 29.7179 21.6479C29.7748 21.9928 30.0451 22.263 30.3899 22.3199Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.5508 19.4641C30.2404 19.5779 30.781 20.1185 30.8948 20.8081C31.0086 20.1185 31.5491 19.5779 32.2388 19.4641C31.5491 19.3503 31.0086 18.8098 30.8948 18.1201C30.781 18.8098 30.2404 19.3503 29.5508 19.4641Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.20776 22.3199C7.55259 22.3769 7.82285 22.6471 7.87976 22.9919C7.93667 22.6471 8.20693 22.3769 8.55176 22.3199C8.20693 22.263 7.93667 21.9928 7.87976 21.6479C7.82285 21.9928 7.55259 22.263 7.20776 22.3199Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.04688 19.4641C7.35721 19.5779 6.81669 20.1185 6.70287 20.8081C6.58906 20.1185 6.04854 19.5779 5.35887 19.4641C6.04854 19.3503 6.58906 18.8098 6.70287 18.1201C6.81669 18.8098 7.35721 19.3503 8.04688 19.4641Z" fill="white"/>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_ddd_1497_137613" x="0" y="0.399902" width="68" height="71.2002" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="3"/>
|
||||||
|
<feGaussianBlur stdDeviation="2.5"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0.16 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1497_137613"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="1"/>
|
||||||
|
<feGaussianBlur stdDeviation="9"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0.12 0"/>
|
||||||
|
<feBlend mode="normal" in2="effect1_dropShadow_1497_137613" result="effect2_dropShadow_1497_137613"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="6"/>
|
||||||
|
<feGaussianBlur stdDeviation="5"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0.14 0"/>
|
||||||
|
<feBlend mode="normal" in2="effect2_dropShadow_1497_137613" result="effect3_dropShadow_1497_137613"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1497_137613" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="filter1_b_1497_137613" x="16" y="15.3999" width="36" height="39.2002" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feGaussianBlur in="BackgroundImage" stdDeviation="1"/>
|
||||||
|
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1497_137613"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1497_137613" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="filter2_ii_1497_137613" x="18" y="17.3999" width="32" height="35.2002" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="1"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.94902 0 0 0 0 0.94902 0 0 0 0 0.94902 0 0 0 0.5 0"/>
|
||||||
|
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1497_137613"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset/>
|
||||||
|
<feGaussianBlur stdDeviation="3"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.94902 0 0 0 0 0.94902 0 0 0 0 0.94902 0 0 0 1 0"/>
|
||||||
|
<feBlend mode="normal" in2="effect1_innerShadow_1497_137613" result="effect2_innerShadow_1497_137613"/>
|
||||||
|
</filter>
|
||||||
|
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1.875" height="1.70455">
|
||||||
|
<use xlink:href="#image0_1497_137613" transform="scale(0.03125 0.0284091)"/>
|
||||||
|
</pattern>
|
||||||
|
<filter id="filter3_ddd_1497_137613" x="25.6006" y="0.399902" width="42.4004" height="42.3999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="3"/>
|
||||||
|
<feGaussianBlur stdDeviation="2.5"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0.16 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1497_137613"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="1"/>
|
||||||
|
<feGaussianBlur stdDeviation="9"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0.12 0"/>
|
||||||
|
<feBlend mode="normal" in2="effect1_dropShadow_1497_137613" result="effect2_dropShadow_1497_137613"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="6"/>
|
||||||
|
<feGaussianBlur stdDeviation="5"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0 0.25098 0 0 0 0.14 0"/>
|
||||||
|
<feBlend mode="normal" in2="effect2_dropShadow_1497_137613" result="effect3_dropShadow_1497_137613"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1497_137613" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="filter4_b_1497_137613" x="41.6006" y="15.3999" width="10.4004" height="10.3999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feGaussianBlur in="BackgroundImage" stdDeviation="1"/>
|
||||||
|
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1497_137613"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1497_137613" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="filter5_ii_1497_137613" x="43.6006" y="17.3999" width="6.40039" height="6.3999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="1"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.94902 0 0 0 0 0.94902 0 0 0 0 0.94902 0 0 0 0.5 0"/>
|
||||||
|
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1497_137613"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset/>
|
||||||
|
<feGaussianBlur stdDeviation="3"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.94902 0 0 0 0 0.94902 0 0 0 0 0.94902 0 0 0 1 0"/>
|
||||||
|
<feBlend mode="normal" in2="effect1_innerShadow_1497_137613" result="effect2_innerShadow_1497_137613"/>
|
||||||
|
</filter>
|
||||||
|
<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="9.375" height="9.375">
|
||||||
|
<use xlink:href="#image0_1497_137613" transform="scale(0.15625)"/>
|
||||||
|
</pattern>
|
||||||
|
<linearGradient id="paint0_linear_1497_137613" x1="34" y1="52.5999" x2="34" y2="17.3999" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#F2F2F2" stop-opacity="0.5"/>
|
||||||
|
<stop offset="1" stop-color="#F2F2F2"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint1_linear_1497_137613" x1="46.8006" y1="23.7999" x2="46.8006" y2="17.3999" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#F2F2F2" stop-opacity="0.5"/>
|
||||||
|
<stop offset="1" stop-color="#F2F2F2"/>
|
||||||
|
</linearGradient>
|
||||||
|
<image id="image0_1497_137613" width="60" height="60" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAM9ElEQVRoQ+WbS6iO3RvG1zv/HCcbiRhR2mJESlJbjBwmGwOH0laUHAaEJLXFwCG1FROHgcPEYbRFSaJtRKQYyCltTBxi/v77rc/v+e53efic+fo/k733+z7Peta67+u+7uu+19qNlFKz2Wwmr/fv36e//vorNRqN1NbWll68eJFWrlyZDh06lG/h856enrRq1ap0//79NH78eAbIn3d1deX7+HzcuHH5uSFDhqRdu3alhQsXpkGDBqXDhw/ncXzG927cuDHfV16My707d+5MW7Zsyb9znTx5Mi1atCiPe/r06Wo8xzl48GBavXp1y3Dt7e2pwWp56NSpU3nSXEz8xo0bqbOzM23evDlNnDgxL2Tq1Km1k+3u7k7Lly9PT548SW/evEkPHz7MBtFAdQu8d+9eNsqwYcOyUb2YC9/duXOneteFCxfS3r1708WLFz8a0+eYI89gEO5//fp1unLlSlq3bl3lFNbECrPJuPH58+dpxIgRlRVnzZqVX6K19LjeZIA4MV56/fr1NGDAgDyPjo6O/LyoiBbnfZs2baq8yj19fX1pypQpGRkgQRREBOqciB4dVaKD50Rhb29vdkS1YLyJl7HO4MGD0+XLl7N3gc6RI0eqiTsJ4CECNIgTixPw/hMnTqTFixe3IMTvWKjo0fjRc7t3706zZ8/OhovjAF++8xkd5LOEAWuIKMqQjhN89+5dOn78eMZ/tKyxVOcVJwu0jTPuZyy97SQcUzRhOIwsspxLNKjvNl4/CvQPCPVzx+jv70/Dhw9vCYNGT09Pk/iM+MeaWkUIAV/gFi8GBrY8Sxz698uXL/NnkNvYsWPTnDlzsvEw1s2bN9OBAwfSjBkzEvdJSBDP7du3M19w8TtXJCU9Vs5BD4O0JUuWZNLlAs4gFT7h3aAhQxpPMAm8Ey9wD2yYjGzM9yys9KYLEmJ4yEn7TLzH+OY7Gdh3C1vev2zZsvwxxnFhn+Iax/kc1+QF/2or8z5IZ/To0Wny5MkVAliQ6UYYx3DDyDDvvHnzsievXbuWn/UyhFywiAJtR48e/ZsHOjo6mmPGjKlYkcBnEuREXs53+/fvzy/CyqQMyArvleQUYyjGP+GBxy9dupQhbAqJKOFdkhqxt3Tp0gx7UEdoyCm+M44vWfEew6TUCDq1ysPANl7fwtpYG0P9yazdaGtra0I4JaUbd8ZNhBjW4n48Rkp59OhRTl2ID7xk/kNY4LlJkyZlDnCsFst++IPxZVXfheqD5UuOQRjhfREBhPWsOX/Hjh3p1q1bmf3hAuAMshpdXV1NYgnoMLCyMnpYliXutm/f3pJCmKQpRQka0wKLZTJOKhIPKcN7CZWRI0fmBZaCg3skQaD6+PHjKi8TFuRaWRjCO3/+fItyjA7KkMZbeoeBo3pSUzPpmFejAPF+BUQUIMZsjPlSoGDcuXPn5nDwvihY8CYeYg56TSaPjMwzIMpxTGOm1oxaIU3cQVaICAYDopIMi1aUlyJe65vHhSaeNTfrXYsOoMXCIJlt27alq1evZo/UhZEe5DsLG3OzaUsGVpJqDBELKrhAUKO3t7eJGIg52LSBIGEBwK2MQVHBQMat8GSBa9asqcaMOdkcavEQ41mmLlFmLEeol4a36MCQzI3Uxe979uypNEaultrb23PxwJfKRqSecatVzZHCxXtdJN6bOXNmjnEGJq6ix/gdj1DFYCCIJ5aKpqpoABdYR3LRKHXP+CyG3bdvX34XKM0xzAIV58aXrI3VYWEKCiSaLEjiVyczKESiCHAMIAaBRJXE5Bj72LFj+Z1CG/hj3GfPnuWxuCwzZW0NGHMwnxmjhMi5c+dyWMYFi04MnmNYSieOgTE5mZTiBQxhVLwKgWApjIQ3WZD1rF7XWLEQIMYhp1isx5RXpiyeFQVMHi2P0QkVuCVmB9DBfCLrR/hjCMIshygeVpXwUpnWuDWnxs4GL4OUtCZw9mJQvGbXIzYXuA+CAmJldeQETYexaGBBFC5kEn7yN8al42HBEtWi8tQCyLAk7lsaAN9DDixUIiG+5AVhKHNKiBb4kSPwEuixzuZZ5aIGjfk8xi7jYwAFEQw9bdq0KsXqzJbi4Uf0jEACsBUhpiI8YUcjavA6whGuos1c+yNSZwXpsm78nRUNRmBx9sVMV8Z0LCa4j0ahuiFygWQnpxBm2cNfIypUW8bcv4kK4jl2PCNRxU7ljxAVymLegVGePn2aVVds8LW0eBQIsVBwgU6uLM+IMYp0Cn+L+s/lVJQT+dq2kMwd+1r+zngwMhe/K3+j+lL6RqET05akRjMRovuItMpAjypJQrADSI0aCw7jMXqfOpq45hl+37p1a0ufq+w78Tf3WQkxpjFMakJBlXmdhSAvyRpohvisi1fONvr6+ppQvbm27DQYy7wYZo1dQxaB2ICg4IC6Ij0igglHUVAaKMZfbBZGweF4zENBRNjQf47awWf46TzhgLxgJ+EEzJ0xl5aCwclBGvPnz88vfPXqVe6QELOOESsWPGdBUZaAsSNZVx6a+33euRKrvA+nvX37NlddpCdJr1SROYZLC1owx8/5HQOws/A1iJBRo6W/BxGxHPwWRDQ6OzubeMaghtUspmU7oYq36G4SQxqlbpcA6FL2xfISOFG52EK1X4bxREFdj8wQI+Toczkmc1MolbkctHBNnz49x3VUYRVLl5UJZGWngoeBBpDEILZto4Uj9TMRmvkWG/G+qKycaCwO+MzOSUvh/mFTLcZmWcbyN+Nv2LAh801s8ltdNbq7u5t4jdiQVFRHDG4slOmonAxQw6vuH1nvWgTQRsJQFBEyP0bCqLGJT3HCFcvLWChopG/e5Sy3S7+m5YkUZaEQhdqYCdmWHTp0aO5kfGp30i7nr9ydrCAdC3IW8eDBg5wv3fON8EMEGBdCRZEgOohRvEXJJnKMe4wqm4ucKGwUO3W7FzFemSc9LutquIcGg8qOe4n9s2fP/pMygTS9rP9yjUu4xFqYharWYmcEhZZZOm6GS14xNUWp6HYHrB7jKJZ9piB+ooCsnhAGqrUyLgkD5WHMwyV3MKbziUWEmoH7ESWIEeSuY4FUmhUteVg2jenhd+3UI4YsTGKDXr2u4YR42fZhDeh0LhxaScv+/v4m3YefUXtq3T+pwqo8LDt/yZYjC1iwYEE6c+bMFx9viHu7tn49+CLD1533wDvferzB8tBeeY5ztlp+V7sFlWWeBnolu4K8UkUZbsDVwy8gydZyeX/LcYdG45827Zee6/gv7BCW5zpYNBekWLG0RxrqzlEQ3x5y4UFyLIwH+7rHq6jXwpAEn61fvz5L0oEDB2b1pGwsO6XUudbOP7NTmhsAdvyiTnXikfoVEDAlKooFlydwGAtRYUfDFMGChHCZDWTYsnjwb8VPhG3U/vwuCzM2AmTUqFGV2LAnlp+J57Qc0O5ibNvieSQkXqDqiduacQEMyguoj2NnIhYIHj7hyAIqiIY+hGLlxXimn5hf7a7EZoVHl2JruGxiMJ7FUNXEQ5LZ6I6BXx4g0YJUTbH7EDfUypzIMxhvxYoVLbuEThYDwyE06Lk88KZKgpwwCoxtk93QiOInGj4WL7G533LkAauycz5hwoTKg1iYM5Juf7pgVExdM436k8nTxyIc3IJVKztBJgxSPJjiuwkFDMD35Sm/eEAtanwQw44GIeYxKreP4rZPhjQdj7iJ/L27guXpuF+1K+hxKZzgxh/OscVDSK5du/bvBf/JBbvQjMeZWEhsJrYk63BulMOuHqYDBaCvti8tW8cDYm6nxj5yPJknUaCosLCNANnUOEVdyfagQfaWiHy3pWHcW2IsOcV4jWmQgsH2EqGk17mn2vLhBMDXHu5igK/ZCuF+YyxOtG4rpDzxV9bjEiC9sXgmWiRgEC7LRQmUWCau88E0zyHHDWmMYDzQqfQsZIQPEy4bAHomniLQa/HoBN7lqEXZCCh3DWKOLnNv2QtzbrFvFhsMZKKqeNBysCaTQSXFk3PAxdMAtHacvAornmP2KIMT+JMOuVULLvdpPeMRC3D3kfAMxohNAr3IzygzSWvm0CgIyi5p3PyK7zS2eTfNBOYljyhr4wGZKHvrjlll4VHqYHIg2xj0pNC/ETplH9rOhd60Vfon7lFlp9DT+n84NmwN39LTiv0qvBoLAzwXd+Bl2zqCiN6O8pM9H686eMc+VzyHZQUHlBEP36MEqyMPTORndz3Kfx8w9n7mP3WUXY+PtlpIK7+jyHdLE8N/yz9vxCLffz3yDBhc5GG5iqXVvPG0zZe2Pr/3+DGsj+z7FcePq+KBOtcNKCxTV2zD5ljLPraiwONGQNYyEU/ZuOMnwgUpat/KDkss+n/Ff9RUaclyirxHcX/37t3ctRBeLJZ6lQXZIKh6vR/+oy32gSWzWC19TkXVFQCQFedHovS1Vx1P6cUT+BrwU+dV/gf5nFrpDQ6oIQAAAABJRU5ErkJggg=="/>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 15 KiB |
@@ -37,8 +37,8 @@ module.exports = {
|
|||||||
global: {
|
global: {
|
||||||
branches: 25,
|
branches: 25,
|
||||||
functions: 25,
|
functions: 25,
|
||||||
lines: 29,
|
lines: 28,
|
||||||
statements: 29,
|
statements: 28,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
35
package-lock.json
generated
@@ -9,7 +9,7 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@azure/arm-cosmosdb": "9.1.0",
|
"@azure/arm-cosmosdb": "9.1.0",
|
||||||
"@azure/cosmos": "3.16.1",
|
"@azure/cosmos": "3.16.2",
|
||||||
"@azure/cosmos-language-service": "0.0.5",
|
"@azure/cosmos-language-service": "0.0.5",
|
||||||
"@azure/identity": "1.2.1",
|
"@azure/identity": "1.2.1",
|
||||||
"@azure/ms-rest-nodeauth": "3.0.7",
|
"@azure/ms-rest-nodeauth": "3.0.7",
|
||||||
@@ -396,12 +396,13 @@
|
|||||||
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
|
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
|
||||||
},
|
},
|
||||||
"node_modules/@azure/cosmos": {
|
"node_modules/@azure/cosmos": {
|
||||||
"version": "3.16.1",
|
"version": "3.16.2",
|
||||||
"resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-3.16.1.tgz",
|
"resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-3.16.2.tgz",
|
||||||
"integrity": "sha512-9J76EMiF+ypZwO/Z7OS4PjrU/3hdRLe18dQh/Hj+jwXG2gKJ1NwgkYqcwu1HiCiX73A8+NCeA3PRDbegEnuuNQ==",
|
"integrity": "sha512-sceY5LWj0BHGj8PSyaVCfDRQLVZyoCfIY78kyIROJVEw0k+p9XFs8fhpykN8JklkCftL0WlaVY+X25SQwnhZsw==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@azure/core-auth": "^1.3.0",
|
"@azure/core-auth": "^1.3.0",
|
||||||
"@azure/core-rest-pipeline": "^1.2.0",
|
"@azure/core-rest-pipeline": "^1.2.0",
|
||||||
|
"@azure/core-tracing": "^1.0.0",
|
||||||
"debug": "^4.1.1",
|
"debug": "^4.1.1",
|
||||||
"fast-json-stable-stringify": "^2.1.0",
|
"fast-json-stable-stringify": "^2.1.0",
|
||||||
"jsbi": "^3.1.3",
|
"jsbi": "^3.1.3",
|
||||||
@@ -441,6 +442,17 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@azure/cosmos/node_modules/@azure/core-tracing": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-I5CGMoLtX+pI17ZdiFJZgxMJApsK6jjfm85hpgp3oazCdq5Wxgh4wMr7ge/TTWW1B5WBuvIOI1fMU/FrOAMKrw==",
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.2.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@azure/cosmos/node_modules/tslib": {
|
"node_modules/@azure/cosmos/node_modules/tslib": {
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
|
||||||
@@ -31458,12 +31470,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@azure/cosmos": {
|
"@azure/cosmos": {
|
||||||
"version": "3.16.1",
|
"version": "3.16.2",
|
||||||
"resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-3.16.1.tgz",
|
"resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-3.16.2.tgz",
|
||||||
"integrity": "sha512-9J76EMiF+ypZwO/Z7OS4PjrU/3hdRLe18dQh/Hj+jwXG2gKJ1NwgkYqcwu1HiCiX73A8+NCeA3PRDbegEnuuNQ==",
|
"integrity": "sha512-sceY5LWj0BHGj8PSyaVCfDRQLVZyoCfIY78kyIROJVEw0k+p9XFs8fhpykN8JklkCftL0WlaVY+X25SQwnhZsw==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@azure/core-auth": "^1.3.0",
|
"@azure/core-auth": "^1.3.0",
|
||||||
"@azure/core-rest-pipeline": "^1.2.0",
|
"@azure/core-rest-pipeline": "^1.2.0",
|
||||||
|
"@azure/core-tracing": "^1.0.0",
|
||||||
"debug": "^4.1.1",
|
"debug": "^4.1.1",
|
||||||
"fast-json-stable-stringify": "^2.1.0",
|
"fast-json-stable-stringify": "^2.1.0",
|
||||||
"jsbi": "^3.1.3",
|
"jsbi": "^3.1.3",
|
||||||
@@ -31475,6 +31488,14 @@
|
|||||||
"uuid": "^8.3.0"
|
"uuid": "^8.3.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@azure/core-tracing": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-I5CGMoLtX+pI17ZdiFJZgxMJApsK6jjfm85hpgp3oazCdq5Wxgh4wMr7ge/TTWW1B5WBuvIOI1fMU/FrOAMKrw==",
|
||||||
|
"requires": {
|
||||||
|
"tslib": "^2.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"tslib": {
|
"tslib": {
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@azure/arm-cosmosdb": "9.1.0",
|
"@azure/arm-cosmosdb": "9.1.0",
|
||||||
"@azure/cosmos": "3.16.1",
|
"@azure/cosmos": "3.16.2",
|
||||||
"@azure/cosmos-language-service": "0.0.5",
|
"@azure/cosmos-language-service": "0.0.5",
|
||||||
"@azure/identity": "1.2.1",
|
"@azure/identity": "1.2.1",
|
||||||
"@azure/ms-rest-nodeauth": "3.0.7",
|
"@azure/ms-rest-nodeauth": "3.0.7",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
|
import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
|
||||||
import arrowLeftImg from "../../images/imgarrowlefticon.svg";
|
import arrowLeftImg from "../../images/imgarrowlefticon.svg";
|
||||||
import { userContext } from "../UserContext";
|
import { getApiShortDisplayName } from "../Utils/APITypeUtils";
|
||||||
import { NormalizedEventKey } from "./Constants";
|
import { NormalizedEventKey } from "./Constants";
|
||||||
|
|
||||||
export interface CollapsedResourceTreeProps {
|
export interface CollapsedResourceTreeProps {
|
||||||
@@ -45,7 +45,7 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
|
|||||||
<img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
|
<img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
|
||||||
</span>
|
</span>
|
||||||
<span className="collectionCollapsed">
|
<span className="collectionCollapsed">
|
||||||
<span>{userContext.apiType} API</span>
|
<span>{getApiShortDisplayName()}</span>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -299,7 +299,7 @@ export function createMongoCollectionWithProxy(
|
|||||||
db: params.databaseId,
|
db: params.databaseId,
|
||||||
coll: params.collectionId,
|
coll: params.collectionId,
|
||||||
pk: shardKey,
|
pk: shardKey,
|
||||||
offerThroughput: params.offerThroughput,
|
offerThroughput: params.autoPilotMaxThroughput || params.offerThroughput,
|
||||||
cd: params.createNewDatabase,
|
cd: params.createNewDatabase,
|
||||||
st: params.databaseLevelThroughput,
|
st: params.databaseLevelThroughput,
|
||||||
is: !!shardKey,
|
is: !!shardKey,
|
||||||
@@ -309,7 +309,6 @@ export function createMongoCollectionWithProxy(
|
|||||||
rg: userContext.resourceGroup,
|
rg: userContext.resourceGroup,
|
||||||
dba: databaseAccount.name,
|
dba: databaseAccount.name,
|
||||||
isAutoPilot: !!params.autoPilotMaxThroughput,
|
isAutoPilot: !!params.autoPilotMaxThroughput,
|
||||||
autoPilotThroughput: params.autoPilotMaxThroughput?.toString(),
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
|
const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import Explorer from "../Explorer/Explorer";
|
|||||||
import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
|
import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
|
||||||
import { ResourceTree } from "../Explorer/Tree/ResourceTree";
|
import { ResourceTree } from "../Explorer/Tree/ResourceTree";
|
||||||
import { userContext } from "../UserContext";
|
import { userContext } from "../UserContext";
|
||||||
|
import { getApiShortDisplayName } from "../Utils/APITypeUtils";
|
||||||
import { NormalizedEventKey } from "./Constants";
|
import { NormalizedEventKey } from "./Constants";
|
||||||
|
|
||||||
export interface ResourceTreeContainerProps {
|
export interface ResourceTreeContainerProps {
|
||||||
@@ -42,7 +43,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
|
|||||||
{/* Collections Window Title/Command Bar - Start */}
|
{/* Collections Window Title/Command Bar - Start */}
|
||||||
<div className="collectiontitle">
|
<div className="collectiontitle">
|
||||||
<div className="coltitle">
|
<div className="coltitle">
|
||||||
<span className="titlepadcol">{userContext.apiType} API</span>
|
<span className="titlepadcol">{getApiShortDisplayName()}</span>
|
||||||
<div className="float-right">
|
<div className="float-right">
|
||||||
<span
|
<span
|
||||||
className="padimgcolrefresh"
|
className="padimgcolrefresh"
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
|
|||||||
);
|
);
|
||||||
try {
|
try {
|
||||||
let collection: DataModels.Collection;
|
let collection: DataModels.Collection;
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
|
if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
|
||||||
if (params.createNewDatabase) {
|
if (params.createNewDatabase) {
|
||||||
const createDatabaseParams: DataModels.CreateDatabaseParams = {
|
const createDatabaseParams: DataModels.CreateDatabaseParams = {
|
||||||
autoPilotMaxThroughput: params.autoPilotMaxThroughput,
|
autoPilotMaxThroughput: params.autoPilotMaxThroughput,
|
||||||
|
|||||||
@@ -25,7 +25,8 @@ export async function createDatabase(params: DataModels.CreateDatabaseParams): P
|
|||||||
if (userContext.apiType === "Tables") {
|
if (userContext.apiType === "Tables") {
|
||||||
throw new Error("Creating database resources is not allowed for tables accounts");
|
throw new Error("Creating database resources is not allowed for tables accounts");
|
||||||
}
|
}
|
||||||
const database: DataModels.Database = await (userContext.authType === AuthType.AAD && !userContext.useSDKOperations
|
const database: DataModels.Database = await (userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations
|
||||||
? createDatabaseWithARM(params)
|
? createDatabaseWithARM(params)
|
||||||
: createDatabaseWithSDK(params));
|
: createDatabaseWithSDK(params));
|
||||||
|
|
||||||
|
|||||||
@@ -20,7 +20,11 @@ export async function createStoredProcedure(
|
|||||||
): Promise<StoredProcedureDefinition & Resource> {
|
): Promise<StoredProcedureDefinition & Resource> {
|
||||||
const clearMessage = logConsoleProgress(`Creating stored procedure ${storedProcedure.id}`);
|
const clearMessage = logConsoleProgress(`Creating stored procedure ${storedProcedure.id}`);
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType === "SQL"
|
||||||
|
) {
|
||||||
try {
|
try {
|
||||||
const getResponse = await getSqlStoredProcedure(
|
const getResponse = await getSqlStoredProcedure(
|
||||||
userContext.subscriptionId,
|
userContext.subscriptionId,
|
||||||
|
|||||||
@@ -14,7 +14,11 @@ export async function createTrigger(
|
|||||||
): Promise<TriggerDefinition | SqlTriggerResource> {
|
): Promise<TriggerDefinition | SqlTriggerResource> {
|
||||||
const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
|
const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType === "SQL"
|
||||||
|
) {
|
||||||
try {
|
try {
|
||||||
const getResponse = await getSqlTrigger(
|
const getResponse = await getSqlTrigger(
|
||||||
userContext.subscriptionId,
|
userContext.subscriptionId,
|
||||||
|
|||||||
@@ -20,7 +20,11 @@ export async function createUserDefinedFunction(
|
|||||||
): Promise<UserDefinedFunctionDefinition & Resource> {
|
): Promise<UserDefinedFunctionDefinition & Resource> {
|
||||||
const clearMessage = logConsoleProgress(`Creating user defined function ${userDefinedFunction.id}`);
|
const clearMessage = logConsoleProgress(`Creating user defined function ${userDefinedFunction.id}`);
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType === "SQL"
|
||||||
|
) {
|
||||||
try {
|
try {
|
||||||
const getResponse = await getSqlUserDefinedFunction(
|
const getResponse = await getSqlUserDefinedFunction(
|
||||||
userContext.subscriptionId,
|
userContext.subscriptionId,
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ import { handleError } from "../ErrorHandlingUtils";
|
|||||||
export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
|
export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
|
||||||
const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
|
const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
|
if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
|
||||||
await deleteCollectionWithARM(databaseId, collectionId);
|
await deleteCollectionWithARM(databaseId, collectionId);
|
||||||
} else {
|
} else {
|
||||||
await client().database(databaseId).container(collectionId).delete();
|
await client().database(databaseId).container(collectionId).delete();
|
||||||
|
|||||||
@@ -12,10 +12,7 @@ export async function deleteDatabase(databaseId: string): Promise<void> {
|
|||||||
const clearMessage = logConsoleProgress(`Deleting database ${databaseId}`);
|
const clearMessage = logConsoleProgress(`Deleting database ${databaseId}`);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (userContext.apiType === "Tables") {
|
if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
|
||||||
throw new Error("Deleting database resources is not allowed for tables accounts");
|
|
||||||
}
|
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
|
|
||||||
await deleteDatabaseWithARM(databaseId);
|
await deleteDatabaseWithARM(databaseId);
|
||||||
} else {
|
} else {
|
||||||
await client().database(databaseId).delete();
|
await client().database(databaseId).delete();
|
||||||
|
|||||||
@@ -12,7 +12,11 @@ export async function deleteStoredProcedure(
|
|||||||
): Promise<void> {
|
): Promise<void> {
|
||||||
const clearMessage = logConsoleProgress(`Deleting stored procedure ${storedProcedureId}`);
|
const clearMessage = logConsoleProgress(`Deleting stored procedure ${storedProcedureId}`);
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType === "SQL"
|
||||||
|
) {
|
||||||
await deleteSqlStoredProcedure(
|
await deleteSqlStoredProcedure(
|
||||||
userContext.subscriptionId,
|
userContext.subscriptionId,
|
||||||
userContext.resourceGroup,
|
userContext.resourceGroup,
|
||||||
|
|||||||
@@ -8,7 +8,11 @@ import { handleError } from "../ErrorHandlingUtils";
|
|||||||
export async function deleteTrigger(databaseId: string, collectionId: string, triggerId: string): Promise<void> {
|
export async function deleteTrigger(databaseId: string, collectionId: string, triggerId: string): Promise<void> {
|
||||||
const clearMessage = logConsoleProgress(`Deleting trigger ${triggerId}`);
|
const clearMessage = logConsoleProgress(`Deleting trigger ${triggerId}`);
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType === "SQL"
|
||||||
|
) {
|
||||||
await deleteSqlTrigger(
|
await deleteSqlTrigger(
|
||||||
userContext.subscriptionId,
|
userContext.subscriptionId,
|
||||||
userContext.resourceGroup,
|
userContext.resourceGroup,
|
||||||
|
|||||||
@@ -8,7 +8,11 @@ import { handleError } from "../ErrorHandlingUtils";
|
|||||||
export async function deleteUserDefinedFunction(databaseId: string, collectionId: string, id: string): Promise<void> {
|
export async function deleteUserDefinedFunction(databaseId: string, collectionId: string, id: string): Promise<void> {
|
||||||
const clearMessage = logConsoleProgress(`Deleting user defined function ${id}`);
|
const clearMessage = logConsoleProgress(`Deleting user defined function ${id}`);
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType === "SQL"
|
||||||
|
) {
|
||||||
await deleteSqlUserDefinedFunction(
|
await deleteSqlUserDefinedFunction(
|
||||||
userContext.subscriptionId,
|
userContext.subscriptionId,
|
||||||
userContext.resourceGroup,
|
userContext.resourceGroup,
|
||||||
|
|||||||
@@ -14,7 +14,11 @@ export const readCollectionOffer = async (params: ReadCollectionOfferParams): Pr
|
|||||||
const clearMessage = logConsoleProgress(`Querying offer for collection ${params.collectionId}`);
|
const clearMessage = logConsoleProgress(`Querying offer for collection ${params.collectionId}`);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType !== "Tables") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType !== "Tables"
|
||||||
|
) {
|
||||||
return await readCollectionOfferWithARM(params.databaseId, params.collectionId);
|
return await readCollectionOfferWithARM(params.databaseId, params.collectionId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -13,7 +13,11 @@ import { handleError } from "../ErrorHandlingUtils";
|
|||||||
export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
|
export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
|
||||||
const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
|
const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType !== "Tables") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType !== "Tables"
|
||||||
|
) {
|
||||||
return await readCollectionsWithARM(databaseId);
|
return await readCollectionsWithARM(databaseId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -13,7 +13,11 @@ export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promis
|
|||||||
const clearMessage = logConsoleProgress(`Querying offer for database ${params.databaseId}`);
|
const clearMessage = logConsoleProgress(`Querying offer for database ${params.databaseId}`);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType !== "Tables") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType !== "Tables"
|
||||||
|
) {
|
||||||
return await readDatabaseOfferWithARM(params.databaseId);
|
return await readDatabaseOfferWithARM(params.databaseId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -13,7 +13,11 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
|
|||||||
let databases: DataModels.Database[];
|
let databases: DataModels.Database[];
|
||||||
const clearMessage = logConsoleProgress(`Querying databases`);
|
const clearMessage = logConsoleProgress(`Querying databases`);
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType !== "Tables") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType !== "Tables"
|
||||||
|
) {
|
||||||
databases = await readDatabasesWithARM();
|
databases = await readDatabasesWithARM();
|
||||||
} else {
|
} else {
|
||||||
const sdkResponse = await client().databases.readAll().fetchAll();
|
const sdkResponse = await client().databases.readAll().fetchAll();
|
||||||
|
|||||||
@@ -12,7 +12,11 @@ export async function readStoredProcedures(
|
|||||||
): Promise<(StoredProcedureDefinition & Resource)[]> {
|
): Promise<(StoredProcedureDefinition & Resource)[]> {
|
||||||
const clearMessage = logConsoleProgress(`Querying stored procedures for container ${collectionId}`);
|
const clearMessage = logConsoleProgress(`Querying stored procedures for container ${collectionId}`);
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType === "SQL"
|
||||||
|
) {
|
||||||
const rpResponse = await listSqlStoredProcedures(
|
const rpResponse = await listSqlStoredProcedures(
|
||||||
userContext.subscriptionId,
|
userContext.subscriptionId,
|
||||||
userContext.resourceGroup,
|
userContext.resourceGroup,
|
||||||
|
|||||||
@@ -13,7 +13,11 @@ export async function readTriggers(
|
|||||||
): Promise<SqlTriggerResource[] | TriggerDefinition[]> {
|
): Promise<SqlTriggerResource[] | TriggerDefinition[]> {
|
||||||
const clearMessage = logConsoleProgress(`Querying triggers for container ${collectionId}`);
|
const clearMessage = logConsoleProgress(`Querying triggers for container ${collectionId}`);
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType === "SQL"
|
||||||
|
) {
|
||||||
const rpResponse = await listSqlTriggers(
|
const rpResponse = await listSqlTriggers(
|
||||||
userContext.subscriptionId,
|
userContext.subscriptionId,
|
||||||
userContext.resourceGroup,
|
userContext.resourceGroup,
|
||||||
|
|||||||
@@ -11,9 +11,9 @@ export async function readUserDefinedFunctions(
|
|||||||
collectionId: string
|
collectionId: string
|
||||||
): Promise<(UserDefinedFunctionDefinition & Resource)[]> {
|
): Promise<(UserDefinedFunctionDefinition & Resource)[]> {
|
||||||
const clearMessage = logConsoleProgress(`Querying user defined functions for container ${collectionId}`);
|
const clearMessage = logConsoleProgress(`Querying user defined functions for container ${collectionId}`);
|
||||||
const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
|
const { authType, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
|
||||||
try {
|
try {
|
||||||
if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
|
if (authType === AuthType.AAD && !userContext.features.enableSDKoperations && apiType === "SQL") {
|
||||||
const rpResponse = await listSqlUserDefinedFunctions(
|
const rpResponse = await listSqlUserDefinedFunctions(
|
||||||
subscriptionId,
|
subscriptionId,
|
||||||
resourceGroup,
|
resourceGroup,
|
||||||
|
|||||||
@@ -33,7 +33,11 @@ export async function updateCollection(
|
|||||||
const clearMessage = logConsoleProgress(`Updating container ${collectionId}`);
|
const clearMessage = logConsoleProgress(`Updating container ${collectionId}`);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType !== "Tables") {
|
if (
|
||||||
|
userContext.authType === AuthType.AAD &&
|
||||||
|
!userContext.features.enableSDKoperations &&
|
||||||
|
userContext.apiType !== "Tables"
|
||||||
|
) {
|
||||||
collection = await updateCollectionWithARM(databaseId, collectionId, newCollection);
|
collection = await updateCollectionWithARM(databaseId, collectionId, newCollection);
|
||||||
} else {
|
} else {
|
||||||
const sdkResponse = await client()
|
const sdkResponse = await client()
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ export const updateOffer = async (params: UpdateOfferParams): Promise<Offer> =>
|
|||||||
const clearMessage = logConsoleProgress(`Updating offer for ${offerResourceText}`);
|
const clearMessage = logConsoleProgress(`Updating offer for ${offerResourceText}`);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
|
if (userContext.authType === AuthType.AAD && !userContext.features.enableSDKoperations) {
|
||||||
if (params.collectionId) {
|
if (params.collectionId) {
|
||||||
updatedOffer = await updateCollectionOfferWithARM(params);
|
updatedOffer = await updateCollectionOfferWithARM(params);
|
||||||
} else if (userContext.apiType === "Tables") {
|
} else if (userContext.apiType === "Tables") {
|
||||||
|
|||||||
@@ -20,9 +20,9 @@ export async function updateStoredProcedure(
|
|||||||
): Promise<StoredProcedureDefinition & Resource> {
|
): Promise<StoredProcedureDefinition & Resource> {
|
||||||
const clearMessage = logConsoleProgress(`Updating stored procedure ${storedProcedure.id}`);
|
const clearMessage = logConsoleProgress(`Updating stored procedure ${storedProcedure.id}`);
|
||||||
try {
|
try {
|
||||||
const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
|
const { authType, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
|
||||||
|
|
||||||
if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
|
if (authType === AuthType.AAD && !userContext.features.enableSDKoperations && apiType === "SQL") {
|
||||||
const getResponse = await getSqlStoredProcedure(
|
const getResponse = await getSqlStoredProcedure(
|
||||||
subscriptionId,
|
subscriptionId,
|
||||||
resourceGroup,
|
resourceGroup,
|
||||||
|
|||||||
@@ -13,9 +13,9 @@ export async function updateTrigger(
|
|||||||
trigger: SqlTriggerResource
|
trigger: SqlTriggerResource
|
||||||
): Promise<SqlTriggerResource | TriggerDefinition> {
|
): Promise<SqlTriggerResource | TriggerDefinition> {
|
||||||
const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`);
|
const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`);
|
||||||
const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
|
const { authType, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
|
||||||
try {
|
try {
|
||||||
if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
|
if (authType === AuthType.AAD && !userContext.features.enableSDKoperations && apiType === "SQL") {
|
||||||
const getResponse = await getSqlTrigger(
|
const getResponse = await getSqlTrigger(
|
||||||
subscriptionId,
|
subscriptionId,
|
||||||
resourceGroup,
|
resourceGroup,
|
||||||
|
|||||||
@@ -19,9 +19,9 @@ export async function updateUserDefinedFunction(
|
|||||||
userDefinedFunction: UserDefinedFunctionDefinition
|
userDefinedFunction: UserDefinedFunctionDefinition
|
||||||
): Promise<UserDefinedFunctionDefinition & Resource> {
|
): Promise<UserDefinedFunctionDefinition & Resource> {
|
||||||
const clearMessage = logConsoleProgress(`Updating user defined function ${userDefinedFunction.id}`);
|
const clearMessage = logConsoleProgress(`Updating user defined function ${userDefinedFunction.id}`);
|
||||||
const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
|
const { authType, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
|
||||||
try {
|
try {
|
||||||
if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
|
if (authType === AuthType.AAD && !userContext.features.enableSDKoperations && apiType === "SQL") {
|
||||||
const getResponse = await getSqlUserDefinedFunction(
|
const getResponse = await getSqlUserDefinedFunction(
|
||||||
subscriptionId,
|
subscriptionId,
|
||||||
resourceGroup,
|
resourceGroup,
|
||||||
|
|||||||
@@ -33,6 +33,7 @@ export interface DatabaseAccountExtendedProperties {
|
|||||||
privateEndpointConnections?: unknown[];
|
privateEndpointConnections?: unknown[];
|
||||||
capacity?: { totalThroughputLimit: number };
|
capacity?: { totalThroughputLimit: number };
|
||||||
locations?: DatabaseAccountResponseLocation[];
|
locations?: DatabaseAccountResponseLocation[];
|
||||||
|
postgresqlEndpoint?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DatabaseAccountResponseLocation {
|
export interface DatabaseAccountResponseLocation {
|
||||||
@@ -481,6 +482,10 @@ export interface IMaxUsersPerDbAccountExceeded extends IPhoenixError {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface IPhoenixConnectionInfoResult {
|
export interface IPhoenixConnectionInfoResult {
|
||||||
|
readonly phoenixServiceInfo?: IPhoenixServiceInfo;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IPhoenixServiceInfo {
|
||||||
readonly authToken?: string;
|
readonly authToken?: string;
|
||||||
readonly phoenixServiceUrl?: string;
|
readonly phoenixServiceUrl?: string;
|
||||||
readonly forwardingId?: string;
|
readonly forwardingId?: string;
|
||||||
@@ -571,4 +576,5 @@ export enum PhoenixErrorType {
|
|||||||
SubscriptionNotAllowed = "SubscriptionNotAllowed",
|
SubscriptionNotAllowed = "SubscriptionNotAllowed",
|
||||||
UnknownError = "UnknownError",
|
UnknownError = "UnknownError",
|
||||||
PhoenixFlightFallback = "PhoenixFlightFallback",
|
PhoenixFlightFallback = "PhoenixFlightFallback",
|
||||||
|
UserMissingPermissionsError = "UserMissingPermissionsError",
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -35,6 +35,7 @@ export enum MessageTypes {
|
|||||||
RefreshDatabaseAccount,
|
RefreshDatabaseAccount,
|
||||||
CloseTab,
|
CloseTab,
|
||||||
OpenQuickstartBlade,
|
OpenQuickstartBlade,
|
||||||
|
OpenPostgreSQLPasswordReset,
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Versions, ActionContracts, Diagnostics };
|
export { Versions, ActionContracts, Diagnostics };
|
||||||
|
|||||||
@@ -372,6 +372,7 @@ export enum TerminalKind {
|
|||||||
Default = 0,
|
Default = 0,
|
||||||
Mongo = 1,
|
Mongo = 1,
|
||||||
Cassandra = 2,
|
Cassandra = 2,
|
||||||
|
Postgres = 3,
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DataExplorerInputsFrame {
|
export interface DataExplorerInputsFrame {
|
||||||
@@ -395,6 +396,9 @@ export interface DataExplorerInputsFrame {
|
|||||||
sharedThroughputDefault?: number;
|
sharedThroughputDefault?: number;
|
||||||
dataExplorerVersion?: string;
|
dataExplorerVersion?: string;
|
||||||
defaultCollectionThroughput?: CollectionCreationDefaults;
|
defaultCollectionThroughput?: CollectionCreationDefaults;
|
||||||
|
isPostgresAccount?: boolean;
|
||||||
|
// TODO: Update this param in the OSS extension to remove isFreeTier, isMarlinServerGroup, and make nodes a flat array instead of an nested array
|
||||||
|
connectionStringParams?: any;
|
||||||
flights?: readonly string[];
|
flights?: readonly string[];
|
||||||
features?: {
|
features?: {
|
||||||
[key: string]: string;
|
[key: string]: string;
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
if (userContext.apiType !== "Tables") {
|
if (userContext.apiType !== "Tables" || userContext.features.enableSDKoperations) {
|
||||||
items.push({
|
items.push({
|
||||||
iconSrc: DeleteDatabaseIcon,
|
iconSrc: DeleteDatabaseIcon,
|
||||||
onClick: () =>
|
onClick: () =>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
* Wrapper around Notebook server terminal
|
* Wrapper around Notebook server terminal
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import { useTerminal } from "hooks/useTerminal";
|
||||||
import postRobot from "post-robot";
|
import postRobot from "post-robot";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import * as DataModels from "../../../Contracts/DataModels";
|
import * as DataModels from "../../../Contracts/DataModels";
|
||||||
@@ -40,6 +41,7 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
|
|||||||
|
|
||||||
handleFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
|
handleFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
|
||||||
this.terminalWindow = (event.target as HTMLIFrameElement).contentWindow;
|
this.terminalWindow = (event.target as HTMLIFrameElement).contentWindow;
|
||||||
|
useTerminal.getState().setTerminal(this.terminalWindow);
|
||||||
this.sendPropsToTerminalFrame();
|
this.sendPropsToTerminalFrame();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -74,6 +76,8 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
|
|||||||
this.props.databaseAccount?.properties.mongoEndpoint || this.props.databaseAccount?.properties.documentEndpoint;
|
this.props.databaseAccount?.properties.mongoEndpoint || this.props.databaseAccount?.properties.documentEndpoint;
|
||||||
} else if (StringUtils.endsWith(notebookServerEndpoint, "cassandra")) {
|
} else if (StringUtils.endsWith(notebookServerEndpoint, "cassandra")) {
|
||||||
terminalEndpoint = this.props.databaseAccount?.properties.cassandraEndpoint;
|
terminalEndpoint = this.props.databaseAccount?.properties.cassandraEndpoint;
|
||||||
|
} else if (StringUtils.endsWith(notebookServerEndpoint, "postgresql")) {
|
||||||
|
return "c.vimeng-postgre-citus.postgres.database.azure.com";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (terminalEndpoint) {
|
if (terminalEndpoint) {
|
||||||
|
|||||||
@@ -35,6 +35,7 @@ exports[`SettingsComponent renders 1`] = `
|
|||||||
"onRefreshDatabasesKeyPress": [Function],
|
"onRefreshDatabasesKeyPress": [Function],
|
||||||
"onRefreshResourcesClick": [Function],
|
"onRefreshResourcesClick": [Function],
|
||||||
"phoenixClient": PhoenixClient {
|
"phoenixClient": PhoenixClient {
|
||||||
|
"armResourceId": undefined,
|
||||||
"retryOptions": Object {
|
"retryOptions": Object {
|
||||||
"maxTimeout": 5000,
|
"maxTimeout": 5000,
|
||||||
"minTimeout": 5000,
|
"minTimeout": 5000,
|
||||||
@@ -111,6 +112,7 @@ exports[`SettingsComponent renders 1`] = `
|
|||||||
"onRefreshDatabasesKeyPress": [Function],
|
"onRefreshDatabasesKeyPress": [Function],
|
||||||
"onRefreshResourcesClick": [Function],
|
"onRefreshResourcesClick": [Function],
|
||||||
"phoenixClient": PhoenixClient {
|
"phoenixClient": PhoenixClient {
|
||||||
|
"armResourceId": undefined,
|
||||||
"retryOptions": Object {
|
"retryOptions": Object {
|
||||||
"maxTimeout": 5000,
|
"maxTimeout": 5000,
|
||||||
"minTimeout": 5000,
|
"minTimeout": 5000,
|
||||||
|
|||||||
@@ -28,6 +28,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
|||||||
isSharded,
|
isSharded,
|
||||||
isFreeTier,
|
isFreeTier,
|
||||||
showFreeTierExceedThroughputTooltip,
|
showFreeTierExceedThroughputTooltip,
|
||||||
|
isQuickstart,
|
||||||
setThroughputValue,
|
setThroughputValue,
|
||||||
setIsAutoscale,
|
setIsAutoscale,
|
||||||
setIsThroughputCapExceeded,
|
setIsThroughputCapExceeded,
|
||||||
@@ -35,7 +36,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
|
|||||||
}: ThroughputInputProps) => {
|
}: ThroughputInputProps) => {
|
||||||
const [isAutoscaleSelected, setIsAutoScaleSelected] = useState<boolean>(true);
|
const [isAutoscaleSelected, setIsAutoScaleSelected] = useState<boolean>(true);
|
||||||
const [throughput, setThroughput] = useState<number>(
|
const [throughput, setThroughput] = useState<number>(
|
||||||
isFreeTier ? AutoPilotUtils.autoPilotThroughput1K : AutoPilotUtils.autoPilotThroughput4K
|
isFreeTier || isQuickstart ? AutoPilotUtils.autoPilotThroughput1K : AutoPilotUtils.autoPilotThroughput4K
|
||||||
);
|
);
|
||||||
const [isCostAcknowledged, setIsCostAcknowledged] = useState<boolean>(false);
|
const [isCostAcknowledged, setIsCostAcknowledged] = useState<boolean>(false);
|
||||||
const [throughputError, setThroughputError] = useState<string>("");
|
const [throughputError, setThroughputError] = useState<string>("");
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { createCollection } from "../../Common/dataAccess/createCollection";
|
import { createCollection } from "../../Common/dataAccess/createCollection";
|
||||||
import { createDocument } from "../../Common/dataAccess/createDocument";
|
import { createDocument } from "../../Common/dataAccess/createDocument";
|
||||||
|
import { createDocument as createMongoDocument } from "../../Common/MongoProxyClient";
|
||||||
import * as DataModels from "../../Contracts/DataModels";
|
import * as DataModels from "../../Contracts/DataModels";
|
||||||
import * as ViewModels from "../../Contracts/ViewModels";
|
import * as ViewModels from "../../Contracts/ViewModels";
|
||||||
import { userContext } from "../../UserContext";
|
import { userContext } from "../../UserContext";
|
||||||
@@ -28,7 +29,7 @@ export class ContainerSampleGenerator {
|
|||||||
dataFileContent = await import(
|
dataFileContent = await import(
|
||||||
/* webpackChunkName: "gremlinSampleJsonData" */ "../../../sampleData/gremlinSampleData.json"
|
/* webpackChunkName: "gremlinSampleJsonData" */ "../../../sampleData/gremlinSampleData.json"
|
||||||
);
|
);
|
||||||
} else if (userContext.apiType === "SQL") {
|
} else if (userContext.apiType === "SQL" || userContext.apiType === "Mongo") {
|
||||||
dataFileContent = await import(
|
dataFileContent = await import(
|
||||||
/* webpackChunkName: "sqlSampleJsonData" */ "../../../sampleData/sqlSampleData.json"
|
/* webpackChunkName: "sqlSampleJsonData" */ "../../../sampleData/sqlSampleData.json"
|
||||||
);
|
);
|
||||||
@@ -68,7 +69,7 @@ export class ContainerSampleGenerator {
|
|||||||
return database.findCollectionWithId(this.sampleDataFile.collectionId);
|
return database.findCollectionWithId(this.sampleDataFile.collectionId);
|
||||||
}
|
}
|
||||||
|
|
||||||
public async populateContainerAsync(collection: ViewModels.Collection): Promise<void> {
|
public async populateContainerAsync(collection: ViewModels.Collection, shardKey?: string): Promise<void> {
|
||||||
if (!collection) {
|
if (!collection) {
|
||||||
throw new Error("No container to populate");
|
throw new Error("No container to populate");
|
||||||
}
|
}
|
||||||
@@ -99,7 +100,9 @@ export class ContainerSampleGenerator {
|
|||||||
await Promise.all(
|
await Promise.all(
|
||||||
this.sampleDataFile.data.map(async (doc) => {
|
this.sampleDataFile.data.map(async (doc) => {
|
||||||
try {
|
try {
|
||||||
await createDocument(collection, doc);
|
userContext.apiType === "Mongo"
|
||||||
|
? await createMongoDocument(collection.databaseId, collection, shardKey, doc)
|
||||||
|
: await createDocument(collection, doc);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
NotificationConsoleUtils.logConsoleError(error);
|
NotificationConsoleUtils.logConsoleError(error);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,12 +16,7 @@ import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHand
|
|||||||
import * as Logger from "../Common/Logger";
|
import * as Logger from "../Common/Logger";
|
||||||
import { QueriesClient } from "../Common/QueriesClient";
|
import { QueriesClient } from "../Common/QueriesClient";
|
||||||
import * as DataModels from "../Contracts/DataModels";
|
import * as DataModels from "../Contracts/DataModels";
|
||||||
import {
|
import { ContainerConnectionInfo, IPhoenixServiceInfo, IProvisionData, IResponse } from "../Contracts/DataModels";
|
||||||
ContainerConnectionInfo,
|
|
||||||
IPhoenixConnectionInfoResult,
|
|
||||||
IProvisionData,
|
|
||||||
IResponse,
|
|
||||||
} from "../Contracts/DataModels";
|
|
||||||
import * as ViewModels from "../Contracts/ViewModels";
|
import * as ViewModels from "../Contracts/ViewModels";
|
||||||
import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
|
import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
|
||||||
import { useSidePanel } from "../hooks/useSidePanel";
|
import { useSidePanel } from "../hooks/useSidePanel";
|
||||||
@@ -98,7 +93,8 @@ export default class Explorer {
|
|||||||
dataExplorerArea: Constants.Areas.ResourceTree,
|
dataExplorerArea: Constants.Areas.ResourceTree,
|
||||||
});
|
});
|
||||||
this._isInitializingNotebooks = false;
|
this._isInitializingNotebooks = false;
|
||||||
this.phoenixClient = new PhoenixClient();
|
|
||||||
|
this.phoenixClient = new PhoenixClient(userContext?.databaseAccount?.id);
|
||||||
useNotebook.subscribe(
|
useNotebook.subscribe(
|
||||||
() => this.refreshCommandBarButtons(),
|
() => this.refreshCommandBarButtons(),
|
||||||
(state) => state.isNotebooksEnabledForAccount
|
(state) => state.isNotebooksEnabledForAccount
|
||||||
@@ -356,7 +352,7 @@ export default class Explorer {
|
|||||||
(notebookServerInfo && notebookServerInfo.notebookServerEndpoint === undefined))
|
(notebookServerInfo && notebookServerInfo.notebookServerEndpoint === undefined))
|
||||||
) {
|
) {
|
||||||
const provisionData: IProvisionData = {
|
const provisionData: IProvisionData = {
|
||||||
cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
|
cosmosEndpoint: userContext?.databaseAccount?.properties?.documentEndpoint,
|
||||||
poolId: PoolIdType.DefaultPoolId,
|
poolId: PoolIdType.DefaultPoolId,
|
||||||
};
|
};
|
||||||
const connectionStatus: ContainerConnectionInfo = {
|
const connectionStatus: ContainerConnectionInfo = {
|
||||||
@@ -407,7 +403,7 @@ export default class Explorer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private async setNotebookInfo(
|
private async setNotebookInfo(
|
||||||
connectionInfo: IResponse<IPhoenixConnectionInfoResult>,
|
connectionInfo: IResponse<IPhoenixServiceInfo>,
|
||||||
connectionStatus: DataModels.ContainerConnectionInfo
|
connectionStatus: DataModels.ContainerConnectionInfo
|
||||||
) {
|
) {
|
||||||
const containerData = {
|
const containerData = {
|
||||||
@@ -1061,6 +1057,10 @@ export default class Explorer {
|
|||||||
title = "Cassandra Shell";
|
title = "Cassandra Shell";
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
case ViewModels.TerminalKind.Postgres:
|
||||||
|
title = "PSQL Shell";
|
||||||
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
throw new Error("Terminal kind: ${kind} not supported");
|
throw new Error("Terminal kind: ${kind} not supported");
|
||||||
}
|
}
|
||||||
@@ -1120,7 +1120,7 @@ export default class Explorer {
|
|||||||
account: userContext.databaseAccount,
|
account: userContext.databaseAccount,
|
||||||
container: this,
|
container: this,
|
||||||
junoClient: this.notebookManager?.junoClient,
|
junoClient: this.notebookManager?.junoClient,
|
||||||
selectedTab: selectedTab || GalleryTabKind.PublicGallery,
|
selectedTab: selectedTab || GalleryTabKind.OfficialSamples,
|
||||||
notebookUrl,
|
notebookUrl,
|
||||||
galleryItem,
|
galleryItem,
|
||||||
isFavorite,
|
isFavorite,
|
||||||
@@ -1247,9 +1247,11 @@ export default class Explorer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public async refreshExplorer(): Promise<void> {
|
public async refreshExplorer(): Promise<void> {
|
||||||
|
if (userContext.apiType !== "Postgres") {
|
||||||
userContext.authType === AuthType.ResourceToken
|
userContext.authType === AuthType.ResourceToken
|
||||||
? this.refreshDatabaseForResourceToken()
|
? this.refreshDatabaseForResourceToken()
|
||||||
: this.refreshAllDatabases();
|
: this.refreshAllDatabases();
|
||||||
|
}
|
||||||
await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
|
await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
|
||||||
|
|
||||||
// TODO: remove reference to isNotebookEnabled and isNotebooksEnabledForAccount
|
// TODO: remove reference to isNotebookEnabled and isNotebooksEnabledForAccount
|
||||||
|
|||||||
@@ -6,8 +6,9 @@
|
|||||||
import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
|
import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
|
||||||
import { useNotebook } from "Explorer/Notebook/useNotebook";
|
import { useNotebook } from "Explorer/Notebook/useNotebook";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
|
import { userContext } from "UserContext";
|
||||||
import create, { UseStore } from "zustand";
|
import create, { UseStore } from "zustand";
|
||||||
import { StyleConstants } from "../../../Common/Constants";
|
import { ConnectionStatusType, StyleConstants } from "../../../Common/Constants";
|
||||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||||
import Explorer from "../../Explorer";
|
import Explorer from "../../Explorer";
|
||||||
import { useSelectedNode } from "../../useSelectedNode";
|
import { useSelectedNode } from "../../useSelectedNode";
|
||||||
@@ -33,6 +34,22 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
|
|||||||
const buttons = useCommandBar((state) => state.contextButtons);
|
const buttons = useCommandBar((state) => state.contextButtons);
|
||||||
const backgroundColor = StyleConstants.BaseLight;
|
const backgroundColor = StyleConstants.BaseLight;
|
||||||
|
|
||||||
|
if (userContext.apiType === "Postgres") {
|
||||||
|
const buttons = CommandBarComponentButtonFactory.createPostgreButtons(container);
|
||||||
|
return (
|
||||||
|
<div className="commandBarContainer">
|
||||||
|
<FluentCommandBar
|
||||||
|
ariaLabel="Use left and right arrow keys to navigate between commands"
|
||||||
|
items={CommandBarUtil.convertButton(buttons, backgroundColor)}
|
||||||
|
styles={{
|
||||||
|
root: { backgroundColor: backgroundColor },
|
||||||
|
}}
|
||||||
|
overflowButtonProps={{ ariaLabel: "More commands" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(container, selectedNodeState);
|
const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(container, selectedNodeState);
|
||||||
const contextButtons = (buttons || []).concat(
|
const contextButtons = (buttons || []).concat(
|
||||||
CommandBarComponentButtonFactory.createContextCommandBarButtons(container, selectedNodeState)
|
CommandBarComponentButtonFactory.createContextCommandBarButtons(container, selectedNodeState)
|
||||||
@@ -53,7 +70,12 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
|
|||||||
const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
|
const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
|
||||||
uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
|
uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
|
||||||
|
|
||||||
if (useNotebook.getState().isPhoenixNotebooks || useNotebook.getState().isPhoenixFeatures) {
|
const connectionInfo = useNotebook((state) => state.connectionInfo);
|
||||||
|
|
||||||
|
if (
|
||||||
|
(useNotebook.getState().isPhoenixNotebooks || useNotebook.getState().isPhoenixFeatures) &&
|
||||||
|
connectionInfo?.status !== ConnectionStatusType.Connect
|
||||||
|
) {
|
||||||
uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus(container, "connectionStatus"));
|
uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus(container, "connectionStatus"));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -104,6 +104,10 @@ export function createStaticCommandBarButtons(
|
|||||||
if (!useNotebook.getState().isPhoenixFeatures) {
|
if (!useNotebook.getState().isPhoenixFeatures) {
|
||||||
applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.mongoShellTemporarilyDownMsg);
|
applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.mongoShellTemporarilyDownMsg);
|
||||||
}
|
}
|
||||||
|
} else if (btn.commandButtonLabel.indexOf("Open Terminal") !== -1) {
|
||||||
|
if (!useNotebook.getState().isPhoenixFeatures) {
|
||||||
|
applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
|
||||||
|
}
|
||||||
} else if (!useNotebook.getState().isPhoenixNotebooks) {
|
} else if (!useNotebook.getState().isPhoenixNotebooks) {
|
||||||
applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
|
applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
|
||||||
}
|
}
|
||||||
@@ -519,6 +523,28 @@ function createOpenCassandraTerminalButton(container: Explorer): CommandButtonCo
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function createOpenPsqlTerminalButton(container: Explorer): CommandButtonComponentProps {
|
||||||
|
const label = "Open PSQL Shell";
|
||||||
|
const disableButton =
|
||||||
|
!useNotebook.getState().isNotebooksEnabledForAccount && !useNotebook.getState().isNotebookEnabled;
|
||||||
|
return {
|
||||||
|
iconSrc: HostedTerminalIcon,
|
||||||
|
iconAlt: label,
|
||||||
|
onCommandClick: () => {
|
||||||
|
if (useNotebook.getState().isNotebookEnabled) {
|
||||||
|
container.openNotebookTerminal(ViewModels.TerminalKind.Postgres);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
commandButtonLabel: label,
|
||||||
|
hasPopup: false,
|
||||||
|
disabled: disableButton,
|
||||||
|
ariaLabel: label,
|
||||||
|
tooltipText: !disableButton
|
||||||
|
? ""
|
||||||
|
: "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
function createNotebookWorkspaceResetButton(container: Explorer): CommandButtonComponentProps {
|
function createNotebookWorkspaceResetButton(container: Explorer): CommandButtonComponentProps {
|
||||||
const label = "Reset Workspace";
|
const label = "Reset Workspace";
|
||||||
return {
|
return {
|
||||||
@@ -581,3 +607,9 @@ function createStaticCommandBarButtonsForResourceToken(
|
|||||||
|
|
||||||
return [newSqlQueryBtn, openQueryBtn];
|
return [newSqlQueryBtn, openQueryBtn];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function createPostgreButtons(container: Explorer): CommandButtonComponentProps[] {
|
||||||
|
const openPostgreShellBtn = createOpenPsqlTerminalButton(container);
|
||||||
|
|
||||||
|
return [openPostgreShellBtn];
|
||||||
|
}
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import { ConnectionStatusType, HttpHeaders, HttpStatusCodes, Notebook, PoolIdTyp
|
|||||||
import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
|
import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
|
||||||
import * as Logger from "../../Common/Logger";
|
import * as Logger from "../../Common/Logger";
|
||||||
import * as DataModels from "../../Contracts/DataModels";
|
import * as DataModels from "../../Contracts/DataModels";
|
||||||
import { IPhoenixConnectionInfoResult, IProvisionData, IResponse } from "../../Contracts/DataModels";
|
import { IPhoenixServiceInfo, IProvisionData, IResponse } from "../../Contracts/DataModels";
|
||||||
import { userContext } from "../../UserContext";
|
import { userContext } from "../../UserContext";
|
||||||
import { getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
|
import { getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
|
||||||
import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
|
import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
|
||||||
@@ -23,7 +23,7 @@ export class NotebookContainerClient {
|
|||||||
private scheduleTimerId: NodeJS.Timeout;
|
private scheduleTimerId: NodeJS.Timeout;
|
||||||
|
|
||||||
constructor(private onConnectionLost: () => void) {
|
constructor(private onConnectionLost: () => void) {
|
||||||
this.phoenixClient = new PhoenixClient();
|
this.phoenixClient = new PhoenixClient(userContext?.databaseAccount?.id);
|
||||||
this.retryOptions = {
|
this.retryOptions = {
|
||||||
retries: Notebook.retryAttempts,
|
retries: Notebook.retryAttempts,
|
||||||
maxTimeout: Notebook.retryAttemptDelayMs,
|
maxTimeout: Notebook.retryAttemptDelayMs,
|
||||||
@@ -129,9 +129,9 @@ export class NotebookContainerClient {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
public async resetWorkspace(): Promise<IResponse<IPhoenixConnectionInfoResult>> {
|
public async resetWorkspace(): Promise<IResponse<IPhoenixServiceInfo>> {
|
||||||
this.isResettingWorkspace = true;
|
this.isResettingWorkspace = true;
|
||||||
let response: IResponse<IPhoenixConnectionInfoResult>;
|
let response: IResponse<IPhoenixServiceInfo>;
|
||||||
try {
|
try {
|
||||||
response = await this._resetWorkspace();
|
response = await this._resetWorkspace();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -142,7 +142,7 @@ export class NotebookContainerClient {
|
|||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _resetWorkspace(): Promise<IResponse<IPhoenixConnectionInfoResult>> {
|
private async _resetWorkspace(): Promise<IResponse<IPhoenixServiceInfo>> {
|
||||||
const notebookServerInfo = useNotebook.getState().notebookServerInfo;
|
const notebookServerInfo = useNotebook.getState().notebookServerInfo;
|
||||||
if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
|
if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
|
||||||
const error = "No server endpoint detected";
|
const error = "No server endpoint detected";
|
||||||
|
|||||||
@@ -124,8 +124,9 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const firstWriteLocation =
|
const firstWriteLocation =
|
||||||
databaseAccount?.properties?.writeLocations &&
|
userContext.apiType === "Postgres"
|
||||||
databaseAccount?.properties?.writeLocations[0]?.locationName.toLowerCase();
|
? databaseAccount?.location
|
||||||
|
: databaseAccount?.properties?.writeLocations?.[0]?.locationName.toLowerCase();
|
||||||
const disallowedLocationsUri = `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
|
const disallowedLocationsUri = `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
|
||||||
const authorizationHeader = getAuthorizationHeader();
|
const authorizationHeader = getAuthorizationHeader();
|
||||||
try {
|
try {
|
||||||
@@ -307,13 +308,16 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
|
|||||||
let isPhoenixFeatures = false;
|
let isPhoenixFeatures = false;
|
||||||
|
|
||||||
const isPublicInternetAllowed = isPublicInternetAccessAllowed();
|
const isPublicInternetAllowed = isPublicInternetAccessAllowed();
|
||||||
const phoenixClient = new PhoenixClient();
|
const phoenixClient = new PhoenixClient(userContext?.databaseAccount?.id);
|
||||||
const dbAccountAllowedInfo = await phoenixClient.getDbAccountAllowedStatus();
|
const dbAccountAllowedInfo = await phoenixClient.getDbAccountAllowedStatus();
|
||||||
|
|
||||||
if (dbAccountAllowedInfo.status === HttpStatusCodes.OK) {
|
if (dbAccountAllowedInfo.status === HttpStatusCodes.OK) {
|
||||||
if (dbAccountAllowedInfo?.type === PhoenixErrorType.PhoenixFlightFallback) {
|
if (dbAccountAllowedInfo?.type === PhoenixErrorType.PhoenixFlightFallback) {
|
||||||
isPhoenixNotebooks = isPublicInternetAllowed && userContext.features.phoenixNotebooks;
|
isPhoenixNotebooks = isPublicInternetAllowed && userContext.features.phoenixNotebooks === true;
|
||||||
isPhoenixFeatures = isPublicInternetAllowed && userContext.features.phoenixFeatures;
|
isPhoenixFeatures =
|
||||||
|
isPublicInternetAllowed &&
|
||||||
|
// phoenix needs to be enabled for Postgres accounts since the PSQL shell requires phoenix containers
|
||||||
|
(userContext.features.phoenixFeatures === true || userContext.apiType === "Postgres");
|
||||||
} else {
|
} else {
|
||||||
isPhoenixNotebooks = isPhoenixFeatures = isPublicInternetAllowed;
|
isPhoenixNotebooks = isPhoenixFeatures = isPublicInternetAllowed;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -122,7 +122,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
|||||||
isSharded: userContext.apiType !== "Tables",
|
isSharded: userContext.apiType !== "Tables",
|
||||||
partitionKey: this.getPartitionKey(),
|
partitionKey: this.getPartitionKey(),
|
||||||
enableDedicatedThroughput: false,
|
enableDedicatedThroughput: false,
|
||||||
createMongoWildCardIndex: isCapabilityEnabled("EnableMongo"),
|
createMongoWildCardIndex:
|
||||||
|
isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport"),
|
||||||
useHashV2: false,
|
useHashV2: false,
|
||||||
enableAnalyticalStore: false,
|
enableAnalyticalStore: false,
|
||||||
uniqueKeys: [],
|
uniqueKeys: [],
|
||||||
@@ -346,6 +347,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
|||||||
isDatabase={true}
|
isDatabase={true}
|
||||||
isSharded={this.state.isSharded}
|
isSharded={this.state.isSharded}
|
||||||
isFreeTier={this.isFreeTierAccount()}
|
isFreeTier={this.isFreeTierAccount()}
|
||||||
|
isQuickstart={this.props.isQuickstart}
|
||||||
setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
|
setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
|
||||||
setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
|
setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
|
||||||
setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
|
setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
|
||||||
@@ -581,6 +583,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
|||||||
isDatabase={false}
|
isDatabase={false}
|
||||||
isSharded={this.state.isSharded}
|
isSharded={this.state.isSharded}
|
||||||
isFreeTier={this.isFreeTierAccount()}
|
isFreeTier={this.isFreeTierAccount()}
|
||||||
|
isQuickstart={this.props.isQuickstart}
|
||||||
setThroughputValue={(throughput: number) => (this.collectionThroughput = throughput)}
|
setThroughputValue={(throughput: number) => (this.collectionThroughput = throughput)}
|
||||||
setIsAutoscale={(isAutoscale: boolean) => (this.isCollectionAutoscale = isAutoscale)}
|
setIsAutoscale={(isAutoscale: boolean) => (this.isCollectionAutoscale = isAutoscale)}
|
||||||
setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
|
setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
|
||||||
@@ -733,7 +736,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Stack className="panelGroupSpacing" id="collapsibleSectionContent">
|
<Stack className="panelGroupSpacing" id="collapsibleSectionContent">
|
||||||
{isCapabilityEnabled("EnableMongo") && (
|
{isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport") && (
|
||||||
<Stack className="panelGroupSpacing">
|
<Stack className="panelGroupSpacing">
|
||||||
<Stack horizontal>
|
<Stack horizontal>
|
||||||
<span className="mandatoryStar">* </span>
|
<span className="mandatoryStar">* </span>
|
||||||
@@ -1249,7 +1252,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
|||||||
collection.isSampleCollection = true;
|
collection.isSampleCollection = true;
|
||||||
useTeachingBubble.getState().setSampleCollection(collection);
|
useTeachingBubble.getState().setSampleCollection(collection);
|
||||||
const sampleGenerator = await ContainerSampleGenerator.createSampleGeneratorAsync(this.props.explorer);
|
const sampleGenerator = await ContainerSampleGenerator.createSampleGeneratorAsync(this.props.explorer);
|
||||||
await sampleGenerator.populateContainerAsync(collection);
|
await sampleGenerator.populateContainerAsync(collection, partitionKeyString);
|
||||||
// auto-expand sample database + container and show teaching bubble
|
// auto-expand sample database + container and show teaching bubble
|
||||||
await database.expandDatabase();
|
await database.expandDatabase();
|
||||||
collection.expandCollection();
|
collection.expandCollection();
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
|
|||||||
"onRefreshDatabasesKeyPress": [Function],
|
"onRefreshDatabasesKeyPress": [Function],
|
||||||
"onRefreshResourcesClick": [Function],
|
"onRefreshResourcesClick": [Function],
|
||||||
"phoenixClient": PhoenixClient {
|
"phoenixClient": PhoenixClient {
|
||||||
|
"armResourceId": undefined,
|
||||||
"retryOptions": Object {
|
"retryOptions": Object {
|
||||||
"maxTimeout": 5000,
|
"maxTimeout": 5000,
|
||||||
"minTimeout": 5000,
|
"minTimeout": 5000,
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
|
|||||||
"onRefreshDatabasesKeyPress": [Function],
|
"onRefreshDatabasesKeyPress": [Function],
|
||||||
"onRefreshResourcesClick": [Function],
|
"onRefreshResourcesClick": [Function],
|
||||||
"phoenixClient": PhoenixClient {
|
"phoenixClient": PhoenixClient {
|
||||||
|
"armResourceId": undefined,
|
||||||
"retryOptions": Object {
|
"retryOptions": Object {
|
||||||
"maxTimeout": 5000,
|
"maxTimeout": 5000,
|
||||||
"minTimeout": 5000,
|
"minTimeout": 5000,
|
||||||
|
|||||||
105
src/Explorer/Quickstart/PostgreQuickstartCommands.ts
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
export const newTableCommand = `DROP SCHEMA IF EXISTS cosmosdb_tutorial CASCADE;
|
||||||
|
CREATE SCHEMA cosmosdb_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 INDEX event_type_index ON github_events (event_type);
|
||||||
|
CREATE INDEX payload_index ON github_events USING GIN (payload jsonb_path_ops);
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const newTableCommandForDisplay = `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);`;
|
||||||
|
|
||||||
|
export const distributeTableCommand = `SET search_path to cosmosdb_tutorial;
|
||||||
|
SELECT create_distributed_table('github_users', 'user_id');
|
||||||
|
SELECT create_distributed_table('github_events', 'user_id');
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const distributeTableCommandForDisplay = `-- 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');`;
|
||||||
|
|
||||||
|
export const loadDataCommand = `SET search_path to cosmosdb_tutorial;
|
||||||
|
\\COPY github_users FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/users.csv"' WITH (FORMAT CSV);
|
||||||
|
\\COPY github_events FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/events.csv"' WITH (FORMAT CSV);
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const loadDataCommandForDisplay = `-- Using schema created for the tutorial
|
||||||
|
SET search_path to cosmosdb_tutorial;
|
||||||
|
|
||||||
|
-- download users and store in table
|
||||||
|
\\COPY github_users FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/users.csv"' WITH (FORMAT CSV);
|
||||||
|
\\COPY github_events FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/events.csv"' WITH (FORMAT CSV);`;
|
||||||
|
|
||||||
|
export const queryCommand = `SET search_path to cosmosdb_tutorial;
|
||||||
|
SELECT count(*) FROM github_users;
|
||||||
|
SELECT created_at, event_type, repo->>'name' AS repo_name
|
||||||
|
FROM github_events
|
||||||
|
WHERE user_id = 3861633;
|
||||||
|
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;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const queryCommandForDisplay = `-- 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;`;
|
||||||
317
src/Explorer/Quickstart/QuickstartGuide.tsx
Normal file
@@ -0,0 +1,317 @@
|
|||||||
|
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>
|
||||||
|
{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="UaBDXHMQAUw" 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="VJqupvSQ-mw" 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="Q-AW7q1GLDY" 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="h15fvLKXzRo" 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="p46nRnE4b8Y" 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
202
src/Explorer/Quickstart/Tutorials/MongoQuickstartTutorial.tsx
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
import { Link, Stack, TeachingBubble, Text } from "@fluentui/react";
|
||||||
|
import { ReactTabKind, useTabs } from "hooks/useTabs";
|
||||||
|
import { useTeachingBubble } from "hooks/useTeachingBubble";
|
||||||
|
import React from "react";
|
||||||
|
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
||||||
|
import { traceCancel, traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
|
||||||
|
import { userContext } from "UserContext";
|
||||||
|
|
||||||
|
export const MongoQuickstartTutorial: React.FC = (): JSX.Element => {
|
||||||
|
const { step, isSampleDBExpanded, isDocumentsTabOpened, sampleCollection, setStep } = useTeachingBubble();
|
||||||
|
|
||||||
|
const onDimissTeachingBubble = (): void => {
|
||||||
|
setStep(0);
|
||||||
|
traceCancel(Action.CancelUITour, { step });
|
||||||
|
};
|
||||||
|
|
||||||
|
if (userContext.apiType !== "Mongo") {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (step) {
|
||||||
|
case 1:
|
||||||
|
return isSampleDBExpanded ? (
|
||||||
|
<TeachingBubble
|
||||||
|
headline="View sample data"
|
||||||
|
target={"#sampleItems"}
|
||||||
|
hasCloseButton
|
||||||
|
primaryButtonProps={{
|
||||||
|
text: "Open Items",
|
||||||
|
onClick: () => {
|
||||||
|
sampleCollection.openTab();
|
||||||
|
setStep(2);
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onDismiss={() => onDimissTeachingBubble()}
|
||||||
|
footerContent="Step 1 of 8"
|
||||||
|
>
|
||||||
|
Start viewing and working with your data by opening Documents under Data
|
||||||
|
</TeachingBubble>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
);
|
||||||
|
case 2:
|
||||||
|
return isDocumentsTabOpened ? (
|
||||||
|
<TeachingBubble
|
||||||
|
headline="View Documents"
|
||||||
|
target={".documentsGridHeaderContainer"}
|
||||||
|
hasCloseButton
|
||||||
|
primaryButtonProps={{
|
||||||
|
text: "Next",
|
||||||
|
onClick: () => setStep(3),
|
||||||
|
}}
|
||||||
|
secondaryButtonProps={{
|
||||||
|
text: "Previous",
|
||||||
|
onClick: () => setStep(1),
|
||||||
|
}}
|
||||||
|
onDismiss={() => onDimissTeachingBubble()}
|
||||||
|
footerContent="Step 2 of 8"
|
||||||
|
>
|
||||||
|
View documents here using the documents window. You can also use your favorite MongoDB tools and drivers to do
|
||||||
|
so.
|
||||||
|
</TeachingBubble>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
);
|
||||||
|
case 3:
|
||||||
|
return (
|
||||||
|
<TeachingBubble
|
||||||
|
headline="Add new document"
|
||||||
|
target={"#mongoNewDocumentBtn"}
|
||||||
|
hasCloseButton
|
||||||
|
primaryButtonProps={{
|
||||||
|
text: "Next",
|
||||||
|
onClick: () => setStep(4),
|
||||||
|
}}
|
||||||
|
secondaryButtonProps={{
|
||||||
|
text: "Previous",
|
||||||
|
onClick: () => setStep(2),
|
||||||
|
}}
|
||||||
|
onDismiss={() => onDimissTeachingBubble()}
|
||||||
|
footerContent="Step 3 of 8"
|
||||||
|
>
|
||||||
|
Add new document by copy / pasting JSON or uploading a JSON. You can also use your favorite MongoDB tools and
|
||||||
|
drivers to do so.
|
||||||
|
</TeachingBubble>
|
||||||
|
);
|
||||||
|
case 4:
|
||||||
|
return (
|
||||||
|
<TeachingBubble
|
||||||
|
headline="Run a query"
|
||||||
|
target={".querydropdown"}
|
||||||
|
hasCloseButton
|
||||||
|
primaryButtonProps={{
|
||||||
|
text: "Next",
|
||||||
|
onClick: () => setStep(5),
|
||||||
|
}}
|
||||||
|
secondaryButtonProps={{
|
||||||
|
text: "Previous",
|
||||||
|
onClick: () => setStep(3),
|
||||||
|
}}
|
||||||
|
onDismiss={() => onDimissTeachingBubble()}
|
||||||
|
footerContent="Step 4 of 8"
|
||||||
|
>
|
||||||
|
Query your data using the filter function. Azure Cosmos DB for MongoDB provides comprehensive support for
|
||||||
|
MongoDB query language constructs. You can also use your favorite MongoDB tools and drivers to do so.
|
||||||
|
</TeachingBubble>
|
||||||
|
);
|
||||||
|
case 5:
|
||||||
|
return (
|
||||||
|
<TeachingBubble
|
||||||
|
headline="Scale throughput"
|
||||||
|
target={"#sampleScaleSettings"}
|
||||||
|
hasCloseButton
|
||||||
|
primaryButtonProps={{
|
||||||
|
text: "Next",
|
||||||
|
onClick: () => setStep(6),
|
||||||
|
}}
|
||||||
|
secondaryButtonProps={{
|
||||||
|
text: "Previous",
|
||||||
|
onClick: () => setStep(4),
|
||||||
|
}}
|
||||||
|
onDismiss={() => onDimissTeachingBubble()}
|
||||||
|
footerContent="Step 5 of 8"
|
||||||
|
>
|
||||||
|
Change throughput provisioned to your collection according to your needs
|
||||||
|
</TeachingBubble>
|
||||||
|
);
|
||||||
|
case 6:
|
||||||
|
return (
|
||||||
|
<TeachingBubble
|
||||||
|
headline="Indexing Policy"
|
||||||
|
target={"#sampleSettings"}
|
||||||
|
hasCloseButton
|
||||||
|
primaryButtonProps={{
|
||||||
|
text: "Next",
|
||||||
|
onClick: () => setStep(7),
|
||||||
|
}}
|
||||||
|
secondaryButtonProps={{
|
||||||
|
text: "Previous",
|
||||||
|
onClick: () => setStep(5),
|
||||||
|
}}
|
||||||
|
onDismiss={() => onDimissTeachingBubble()}
|
||||||
|
footerContent="Step 6 of 8"
|
||||||
|
>
|
||||||
|
Use the indexing policy editor to create and edit your indexes.
|
||||||
|
</TeachingBubble>
|
||||||
|
);
|
||||||
|
case 7:
|
||||||
|
return (
|
||||||
|
<TeachingBubble
|
||||||
|
headline="Create notebook"
|
||||||
|
target={"#newNotebookBtn"}
|
||||||
|
hasCloseButton
|
||||||
|
primaryButtonProps={{
|
||||||
|
text: "Next",
|
||||||
|
onClick: () => setStep(8),
|
||||||
|
}}
|
||||||
|
secondaryButtonProps={{
|
||||||
|
text: "Previous",
|
||||||
|
onClick: () => setStep(6),
|
||||||
|
}}
|
||||||
|
onDismiss={() => onDimissTeachingBubble()}
|
||||||
|
footerContent="Step 7 of 8"
|
||||||
|
>
|
||||||
|
Visualize your data, store queries in an interactive document
|
||||||
|
</TeachingBubble>
|
||||||
|
);
|
||||||
|
case 8:
|
||||||
|
return (
|
||||||
|
<TeachingBubble
|
||||||
|
headline="Congratulations!"
|
||||||
|
target={"#newNotebookBtn"}
|
||||||
|
hasCloseButton
|
||||||
|
primaryButtonProps={{
|
||||||
|
text: "Launch connect",
|
||||||
|
onClick: () => {
|
||||||
|
traceSuccess(Action.CompleteUITour);
|
||||||
|
useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect);
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
secondaryButtonProps={{
|
||||||
|
text: "Previous",
|
||||||
|
onClick: () => setStep(7),
|
||||||
|
}}
|
||||||
|
onDismiss={() => onDimissTeachingBubble()}
|
||||||
|
footerContent="Step 8 of 8"
|
||||||
|
>
|
||||||
|
<Stack>
|
||||||
|
<Text style={{ color: "white" }}>
|
||||||
|
You have finished the tour in data explorer. For next steps, you may want to launch connect and start
|
||||||
|
connecting with your current app.
|
||||||
|
</Text>
|
||||||
|
<Link style={{ color: "white", fontWeight: 600 }} target="_blank" href="https://aka.ms/cosmosdbsurvey">
|
||||||
|
Share your feedback
|
||||||
|
</Link>
|
||||||
|
</Stack>
|
||||||
|
</TeachingBubble>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -1,11 +1,12 @@
|
|||||||
import { Link, Stack, TeachingBubble, Text } from "@fluentui/react";
|
import { Link, Stack, TeachingBubble, Text } from "@fluentui/react";
|
||||||
import { useTabs } from "hooks/useTabs";
|
import { ReactTabKind, useTabs } from "hooks/useTabs";
|
||||||
import { useTeachingBubble } from "hooks/useTeachingBubble";
|
import { useTeachingBubble } from "hooks/useTeachingBubble";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
||||||
import { traceCancel } from "Shared/Telemetry/TelemetryProcessor";
|
import { traceCancel, traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
|
||||||
|
import { userContext } from "UserContext";
|
||||||
|
|
||||||
export const QuickstartTutorial: React.FC = (): JSX.Element => {
|
export const SQLQuickstartTutorial: React.FC = (): JSX.Element => {
|
||||||
const { step, isSampleDBExpanded, isDocumentsTabOpened, sampleCollection, setStep } = useTeachingBubble();
|
const { step, isSampleDBExpanded, isDocumentsTabOpened, sampleCollection, setStep } = useTeachingBubble();
|
||||||
|
|
||||||
const onDimissTeachingBubble = (): void => {
|
const onDimissTeachingBubble = (): void => {
|
||||||
@@ -13,6 +14,10 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => {
|
|||||||
traceCancel(Action.CancelUITour, { step });
|
traceCancel(Action.CancelUITour, { step });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (userContext.apiType !== "SQL") {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
|
|
||||||
switch (step) {
|
switch (step) {
|
||||||
case 1:
|
case 1:
|
||||||
return isSampleDBExpanded ? (
|
return isSampleDBExpanded ? (
|
||||||
@@ -146,7 +151,10 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => {
|
|||||||
hasCloseButton
|
hasCloseButton
|
||||||
primaryButtonProps={{
|
primaryButtonProps={{
|
||||||
text: "Launch connect",
|
text: "Launch connect",
|
||||||
onClick: () => useTabs.getState().openAndActivateConnectTab(),
|
onClick: () => {
|
||||||
|
traceSuccess(Action.CompleteUITour);
|
||||||
|
useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect);
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
secondaryButtonProps={{
|
secondaryButtonProps={{
|
||||||
text: "Previous",
|
text: "Previous",
|
||||||
@@ -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;
|
||||||
|
|||||||
@@ -1,37 +1,41 @@
|
|||||||
/**
|
/**
|
||||||
* Accordion top class
|
* Accordion top class
|
||||||
*/
|
*/
|
||||||
import { Coachmark, DirectionalHint, Image, Link, Stack, TeachingBubbleContent, Text } from "@fluentui/react";
|
import {
|
||||||
|
Coachmark,
|
||||||
|
DirectionalHint,
|
||||||
|
Image,
|
||||||
|
Link,
|
||||||
|
Stack,
|
||||||
|
TeachingBubble,
|
||||||
|
TeachingBubbleContent,
|
||||||
|
Text,
|
||||||
|
} from "@fluentui/react";
|
||||||
|
import { sendMessage } from "Common/MessageHandler";
|
||||||
|
import { MessageTypes } from "Contracts/ExplorerContracts";
|
||||||
|
import { TerminalKind } from "Contracts/ViewModels";
|
||||||
import { useCarousel } from "hooks/useCarousel";
|
import { useCarousel } from "hooks/useCarousel";
|
||||||
import { useTabs } from "hooks/useTabs";
|
import { usePostgres } from "hooks/usePostgres";
|
||||||
|
import { ReactTabKind, useTabs } from "hooks/useTabs";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
||||||
import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
|
import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
|
||||||
import AddDatabaseIcon from "../../../images/AddDatabase.svg";
|
|
||||||
import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
|
|
||||||
import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
|
|
||||||
import OpenQueryIcon from "../../../images/BrowseQuery.svg";
|
|
||||||
import ConnectIcon from "../../../images/Connect_color.svg";
|
import ConnectIcon from "../../../images/Connect_color.svg";
|
||||||
import ContainersIcon from "../../../images/Containers.svg";
|
import ContainersIcon from "../../../images/Containers.svg";
|
||||||
import LinkIcon from "../../../images/Link_blue.svg";
|
import LinkIcon from "../../../images/Link_blue.svg";
|
||||||
import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
|
import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
|
||||||
import NotebookColorIcon from "../../../images/Notebooks.svg";
|
import NotebookColorIcon from "../../../images/Notebooks.svg";
|
||||||
|
import PowerShellIcon from "../../../images/PowerShell.svg";
|
||||||
import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
|
import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
|
||||||
import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
|
|
||||||
import CollectionIcon from "../../../images/tree-collection.svg";
|
import CollectionIcon from "../../../images/tree-collection.svg";
|
||||||
import { AuthType } from "../../AuthType";
|
|
||||||
import * as Constants from "../../Common/Constants";
|
import * as Constants from "../../Common/Constants";
|
||||||
import * as ViewModels from "../../Contracts/ViewModels";
|
|
||||||
import { useSidePanel } from "../../hooks/useSidePanel";
|
|
||||||
import { userContext } from "../../UserContext";
|
import { userContext } from "../../UserContext";
|
||||||
import { getCollectionName, getDatabaseName } from "../../Utils/APITypeUtils";
|
import { getCollectionName } from "../../Utils/APITypeUtils";
|
||||||
import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
|
import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
|
||||||
import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
|
import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
|
||||||
import Explorer from "../Explorer";
|
import Explorer from "../Explorer";
|
||||||
import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
|
import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
|
||||||
import { useNotebook } from "../Notebook/useNotebook";
|
import { useNotebook } from "../Notebook/useNotebook";
|
||||||
import { AddDatabasePanel } from "../Panes/AddDatabasePanel/AddDatabasePanel";
|
|
||||||
import { BrowseQueriesPane } from "../Panes/BrowseQueriesPane/BrowseQueriesPane";
|
|
||||||
import { useDatabases } from "../useDatabases";
|
import { useDatabases } from "../useDatabases";
|
||||||
import { useSelectedNode } from "../useSelectedNode";
|
import { useSelectedNode } from "../useSelectedNode";
|
||||||
|
|
||||||
@@ -83,6 +87,18 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
() => this.setState({}),
|
() => this.setState({}),
|
||||||
(state) => state.showCoachMark
|
(state) => state.showCoachMark
|
||||||
),
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dispose: usePostgres.subscribe(
|
||||||
|
() => this.setState({}),
|
||||||
|
(state) => state.showPostgreTeachingBubble
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
dispose: usePostgres.subscribe(
|
||||||
|
() => this.setState({}),
|
||||||
|
(state) => state.showResetPasswordBubble
|
||||||
|
),
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -101,13 +117,47 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
<div className="splashScreenContainer">
|
<div className="splashScreenContainer">
|
||||||
<div className="splashScreen">
|
<div className="splashScreen">
|
||||||
<div className="title">
|
<div className="title">
|
||||||
Welcome to Cosmos DB
|
{userContext.apiType === "Postgres"
|
||||||
|
? "Welcome to Azure Cosmos DB for PostgreSQL"
|
||||||
|
: "Welcome to Azure Cosmos DB"}
|
||||||
<FeaturePanelLauncher />
|
<FeaturePanelLauncher />
|
||||||
</div>
|
</div>
|
||||||
<div className="subtitle">Globally distributed, multi-model database service for any scale</div>
|
<div className="subtitle">
|
||||||
|
{userContext.apiType === "Postgres"
|
||||||
|
? "Get started with our sample datasets, documentation, and additional tools."
|
||||||
|
: "Globally distributed, multi-model database service for any scale"}
|
||||||
|
</div>
|
||||||
<div className="mainButtonsContainer">
|
<div className="mainButtonsContainer">
|
||||||
|
{userContext.apiType === "Postgres" &&
|
||||||
|
usePostgres.getState().showPostgreTeachingBubble &&
|
||||||
|
!usePostgres.getState().showResetPasswordBubble && (
|
||||||
|
<TeachingBubble
|
||||||
|
headline="New to Cosmos DB PGSQL?"
|
||||||
|
target={"#mainButton-quickstartDescription"}
|
||||||
|
hasCloseButton
|
||||||
|
onDismiss={() => usePostgres.getState().setShowPostgreTeachingBubble(false)}
|
||||||
|
calloutProps={{
|
||||||
|
directionalHint: DirectionalHint.rightCenter,
|
||||||
|
directionalHintFixed: true,
|
||||||
|
preventDismissOnLostFocus: true,
|
||||||
|
preventDismissOnResize: true,
|
||||||
|
preventDismissOnScroll: true,
|
||||||
|
}}
|
||||||
|
primaryButtonProps={{
|
||||||
|
text: "Get started",
|
||||||
|
onClick: () => {
|
||||||
|
useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart);
|
||||||
|
usePostgres.getState().setShowPostgreTeachingBubble(false);
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Welcome! If you are new to Cosmos DB PGSQL and need help with getting started, here is where you
|
||||||
|
can find sample data, query.
|
||||||
|
</TeachingBubble>
|
||||||
|
)}
|
||||||
{mainItems.map((item) => (
|
{mainItems.map((item) => (
|
||||||
<Stack
|
<Stack
|
||||||
|
id={`mainButton-${item.id}`}
|
||||||
horizontal
|
horizontal
|
||||||
className="mainButton focusable"
|
className="mainButton focusable"
|
||||||
key={`${item.title}`}
|
key={`${item.title}`}
|
||||||
@@ -131,6 +181,32 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
</div>
|
</div>
|
||||||
</Stack>
|
</Stack>
|
||||||
))}
|
))}
|
||||||
|
{userContext.apiType === "Postgres" && usePostgres.getState().showResetPasswordBubble && (
|
||||||
|
<TeachingBubble
|
||||||
|
headline="Create your password"
|
||||||
|
target={"#mainButton-quickstartDescription"}
|
||||||
|
hasCloseButton
|
||||||
|
onDismiss={() => usePostgres.getState().setShowResetPasswordBubble(false)}
|
||||||
|
calloutProps={{
|
||||||
|
directionalHint: DirectionalHint.bottomRightEdge,
|
||||||
|
directionalHintFixed: true,
|
||||||
|
preventDismissOnLostFocus: true,
|
||||||
|
preventDismissOnResize: true,
|
||||||
|
preventDismissOnScroll: true,
|
||||||
|
}}
|
||||||
|
primaryButtonProps={{
|
||||||
|
text: "Create",
|
||||||
|
onClick: () => {
|
||||||
|
sendMessage({
|
||||||
|
type: MessageTypes.OpenQuickstartBlade,
|
||||||
|
});
|
||||||
|
usePostgres.getState().setShowResetPasswordBubble(false);
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
This password will be used to connect to the database.
|
||||||
|
</TeachingBubble>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{useCarousel.getState().showCoachMark && (
|
{useCarousel.getState().showCoachMark && (
|
||||||
<Coachmark
|
<Coachmark
|
||||||
@@ -160,6 +236,35 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
</TeachingBubbleContent>
|
</TeachingBubbleContent>
|
||||||
</Coachmark>
|
</Coachmark>
|
||||||
)}
|
)}
|
||||||
|
{userContext.apiType === "Postgres" ? (
|
||||||
|
<Stack horizontal style={{ margin: "0 auto", width: "84%" }} tokens={{ childrenGap: 32 }}>
|
||||||
|
<Stack style={{ width: "33%" }}>
|
||||||
|
<Text
|
||||||
|
variant="large"
|
||||||
|
style={{
|
||||||
|
marginBottom: 16,
|
||||||
|
fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Next steps
|
||||||
|
</Text>
|
||||||
|
{this.getNextStepItems()}
|
||||||
|
</Stack>
|
||||||
|
<Stack style={{ width: "33%" }}>
|
||||||
|
<Text
|
||||||
|
variant="large"
|
||||||
|
style={{
|
||||||
|
marginBottom: 16,
|
||||||
|
fontFamily: '"Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Tips & learn more
|
||||||
|
</Text>
|
||||||
|
{this.getTipsAndLearnMoreItems()}
|
||||||
|
</Stack>
|
||||||
|
<Stack style={{ width: "33%" }}></Stack>
|
||||||
|
</Stack>
|
||||||
|
) : (
|
||||||
<div className="moreStuffContainer">
|
<div className="moreStuffContainer">
|
||||||
<div className="moreStuffColumn commonTasks">
|
<div className="moreStuffColumn commonTasks">
|
||||||
<div className="title">Recents</div>
|
<div className="title">Recents</div>
|
||||||
@@ -174,6 +279,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
{this.getLearningResourceItems()}
|
{this.getLearningResourceItems()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -194,16 +300,15 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
public createMainItems(): SplashScreenItem[] {
|
public createMainItems(): SplashScreenItem[] {
|
||||||
const heroes: SplashScreenItem[] = [];
|
const heroes: SplashScreenItem[] = [];
|
||||||
|
|
||||||
if (userContext.apiType === "SQL" || userContext.apiType === "Mongo") {
|
if (userContext.apiType === "SQL" || userContext.apiType === "Mongo" || userContext.apiType === "Postgres") {
|
||||||
const launchQuickstartBtn = {
|
const launchQuickstartBtn = {
|
||||||
id: "quickstartDescription",
|
id: "quickstartDescription",
|
||||||
iconSrc: QuickStartIcon,
|
iconSrc: QuickStartIcon,
|
||||||
title: "Launch quick start",
|
title: "Launch quick start",
|
||||||
description: "Launch a quick start tutorial to get started with sample data",
|
description: "Launch a quick start tutorial to get started with sample data",
|
||||||
showLinkIcon: userContext.apiType === "Mongo",
|
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
userContext.apiType === "Mongo"
|
userContext.apiType === "Postgres"
|
||||||
? window.open("http://aka.ms/mongodbquickstart", "_blank")
|
? useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart)
|
||||||
: this.container.onNewCollectionClicked({ isQuickstart: true });
|
: this.container.onNewCollectionClicked({ isQuickstart: true });
|
||||||
traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
|
traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType });
|
||||||
},
|
},
|
||||||
@@ -219,6 +324,15 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
heroes.push(newNotebookBtn);
|
heroes.push(newNotebookBtn);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (userContext.apiType === "Postgres") {
|
||||||
|
const postgreShellBtn = {
|
||||||
|
iconSrc: PowerShellIcon,
|
||||||
|
title: "PostgreSQL Shell",
|
||||||
|
description: "Create table and interact with data using PostgreSQL’s shell interface",
|
||||||
|
onClick: () => this.container.openNotebookTerminal(TerminalKind.Postgres),
|
||||||
|
};
|
||||||
|
heroes.push(postgreShellBtn);
|
||||||
|
} else {
|
||||||
const newContainerBtn = {
|
const newContainerBtn = {
|
||||||
iconSrc: ContainersIcon,
|
iconSrc: ContainersIcon,
|
||||||
title: `New ${getCollectionName()}`,
|
title: `New ${getCollectionName()}`,
|
||||||
@@ -229,108 +343,22 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
heroes.push(newContainerBtn);
|
heroes.push(newContainerBtn);
|
||||||
|
}
|
||||||
|
|
||||||
const connectBtn = {
|
const connectBtn = {
|
||||||
iconSrc: ConnectIcon,
|
iconSrc: ConnectIcon,
|
||||||
title: "Connect",
|
title: userContext.apiType === "Postgres" ? "Connect with PG Admin" : "Connect",
|
||||||
description: "Prefer using your own choice of tooling? Find the connection string you need to connect",
|
description:
|
||||||
onClick: () => useTabs.getState().openAndActivateConnectTab(),
|
userContext.apiType === "Postgres"
|
||||||
|
? "Prefer PGadmin? Find your connection strings here"
|
||||||
|
: "Prefer using your own choice of tooling? Find the connection string you need to connect",
|
||||||
|
onClick: () => useTabs.getState().openAndActivateReactTab(ReactTabKind.Connect),
|
||||||
};
|
};
|
||||||
heroes.push(connectBtn);
|
heroes.push(connectBtn);
|
||||||
|
|
||||||
return heroes;
|
return heroes;
|
||||||
}
|
}
|
||||||
|
|
||||||
private createCommonTaskItems(): SplashScreenItem[] {
|
|
||||||
const items: SplashScreenItem[] = [];
|
|
||||||
|
|
||||||
if (userContext.authType === AuthType.ResourceToken) {
|
|
||||||
return items;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!useSelectedNode.getState().isDatabaseNodeOrNoneSelected()) {
|
|
||||||
if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
|
|
||||||
items.push({
|
|
||||||
iconSrc: NewQueryIcon,
|
|
||||||
onClick: () => {
|
|
||||||
const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
|
|
||||||
selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, undefined);
|
|
||||||
},
|
|
||||||
title: "New SQL Query",
|
|
||||||
description: undefined,
|
|
||||||
});
|
|
||||||
} else if (userContext.apiType === "Mongo") {
|
|
||||||
items.push({
|
|
||||||
iconSrc: NewQueryIcon,
|
|
||||||
onClick: () => {
|
|
||||||
const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
|
|
||||||
selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection, undefined);
|
|
||||||
},
|
|
||||||
title: "New Query",
|
|
||||||
description: undefined,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (userContext.apiType === "SQL") {
|
|
||||||
items.push({
|
|
||||||
iconSrc: OpenQueryIcon,
|
|
||||||
title: "Open Query",
|
|
||||||
description: undefined,
|
|
||||||
onClick: () =>
|
|
||||||
useSidePanel
|
|
||||||
.getState()
|
|
||||||
.openSidePanel("Open Saved Queries", <BrowseQueriesPane explorer={this.container} />),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (userContext.apiType !== "Cassandra") {
|
|
||||||
items.push({
|
|
||||||
iconSrc: NewStoredProcedureIcon,
|
|
||||||
title: "New Stored Procedure",
|
|
||||||
description: undefined,
|
|
||||||
onClick: () => {
|
|
||||||
const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
|
|
||||||
selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection, undefined);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scale & Settings */
|
|
||||||
const isShared = useDatabases.getState().findSelectedDatabase()?.isDatabaseShared();
|
|
||||||
|
|
||||||
const label = isShared ? "Settings" : "Scale & Settings";
|
|
||||||
items.push({
|
|
||||||
iconSrc: ScaleAndSettingsIcon,
|
|
||||||
title: label,
|
|
||||||
description: undefined,
|
|
||||||
onClick: () => {
|
|
||||||
const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
|
|
||||||
selectedCollection && selectedCollection.onSettingsClick();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
items.push({
|
|
||||||
iconSrc: AddDatabaseIcon,
|
|
||||||
title: "New " + getDatabaseName(),
|
|
||||||
description: undefined,
|
|
||||||
onClick: async () => {
|
|
||||||
const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
|
|
||||||
if (throughputCap && throughputCap !== -1) {
|
|
||||||
await useDatabases.getState().loadAllOffers();
|
|
||||||
}
|
|
||||||
useSidePanel
|
|
||||||
.getState()
|
|
||||||
.openSidePanel(
|
|
||||||
"New " + getDatabaseName(),
|
|
||||||
<AddDatabasePanel explorer={this.container} buttonElement={document.activeElement as HTMLElement} />
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return items;
|
|
||||||
}
|
|
||||||
|
|
||||||
private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
|
private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
|
||||||
return {
|
return {
|
||||||
iconSrc: CollectionIcon,
|
iconSrc: CollectionIcon,
|
||||||
@@ -372,29 +400,6 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private createTipsItems(): SplashScreenItem[] {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
iconSrc: undefined,
|
|
||||||
title: "Data Modeling",
|
|
||||||
description: "Learn more about modeling",
|
|
||||||
onClick: () => window.open(SplashScreen.dataModelingUrl),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
iconSrc: undefined,
|
|
||||||
title: "Cost & Throughput Calculation",
|
|
||||||
description: "Learn more about cost calculation",
|
|
||||||
onClick: () => window.open(SplashScreen.throughputEstimatorUrl),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
iconSrc: undefined,
|
|
||||||
title: "Configure automatic failover",
|
|
||||||
description: "Learn more about Cosmos DB high-availability",
|
|
||||||
onClick: () => window.open(SplashScreen.failoverUrl),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
private onSplashScreenItemKeyPress(event: React.KeyboardEvent, callback: () => void) {
|
private onSplashScreenItemKeyPress(event: React.KeyboardEvent, callback: () => void) {
|
||||||
if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
|
if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
|
||||||
callback();
|
callback();
|
||||||
@@ -406,6 +411,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
let items: { link: string; title: string; description: string }[];
|
let items: { link: string; title: string; description: string }[];
|
||||||
switch (userContext.apiType) {
|
switch (userContext.apiType) {
|
||||||
case "SQL":
|
case "SQL":
|
||||||
|
case "Postgres":
|
||||||
items = [
|
items = [
|
||||||
{
|
{
|
||||||
link: "https://aka.ms/msl-modeling-partitioning-2",
|
link: "https://aka.ms/msl-modeling-partitioning-2",
|
||||||
@@ -429,7 +435,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
{
|
{
|
||||||
link: "https://aka.ms/mongodbintro",
|
link: "https://aka.ms/mongodbintro",
|
||||||
title: "What is the MongoDB API?",
|
title: "What is the MongoDB API?",
|
||||||
description: "Understand the Cosmos DB API for MongoDB and its features.",
|
description: "Understand Azure Cosmos DB for MongoDB and its features.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link: "https://aka.ms/mongodbfeaturesupport",
|
link: "https://aka.ms/mongodbfeaturesupport",
|
||||||
@@ -486,7 +492,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
{
|
{
|
||||||
link: "https://aka.ms/tableintro",
|
link: "https://aka.ms/tableintro",
|
||||||
title: "What is the Table API?",
|
title: "What is the Table API?",
|
||||||
description: "Understand the Table API in Cosmos DB and its features",
|
description: "Understand Azure Cosmos DB for Table and its features",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link: "https://aka.ms/tableimport",
|
link: "https://aka.ms/tableimport",
|
||||||
@@ -495,8 +501,8 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
link: "https://aka.ms/tablefaq",
|
link: "https://aka.ms/tablefaq",
|
||||||
title: "Table API FAQs",
|
title: "Azure Cosmos DB for Table FAQs",
|
||||||
description: "Common questions about the Table API",
|
description: "Common questions about Azure Cosmos DB for Table",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
break;
|
break;
|
||||||
@@ -552,6 +558,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
let items: { link: string; title: string; description: string }[];
|
let items: { link: string; title: string; description: string }[];
|
||||||
switch (userContext.apiType) {
|
switch (userContext.apiType) {
|
||||||
case "SQL":
|
case "SQL":
|
||||||
|
case "Postgres":
|
||||||
items = [
|
items = [
|
||||||
{
|
{
|
||||||
link: "https://aka.ms/msl-sdk-connect",
|
link: "https://aka.ms/msl-sdk-connect",
|
||||||
@@ -632,17 +639,17 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
{
|
{
|
||||||
link: "https://aka.ms/tabledotnet",
|
link: "https://aka.ms/tabledotnet",
|
||||||
title: "Build a .NET App",
|
title: "Build a .NET App",
|
||||||
description: "How to access Table API from a .NET app.",
|
description: "How to access Azure Cosmos DB for Table from a .NET app.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link: "https://aka.ms/Tablejava",
|
link: "https://aka.ms/Tablejava",
|
||||||
title: "Build a Java App",
|
title: "Build a Java App",
|
||||||
description: "Create a Table API app with Java SDK ",
|
description: "Create a Azure Cosmos DB for Table app with Java SDK ",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
link: "https://aka.ms/tablenodejs",
|
link: "https://aka.ms/tablenodejs",
|
||||||
title: "Build a Node.js App",
|
title: "Build a Node.js App",
|
||||||
description: "Create a Table API app with Node.js SDK",
|
description: "Create a Azure Cosmos DB for Table app with Node.js SDK",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
break;
|
break;
|
||||||
@@ -670,4 +677,76 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
|||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private getNextStepItems(): JSX.Element {
|
||||||
|
const items: { link: string; title: string; description: string }[] = [
|
||||||
|
{
|
||||||
|
link: "https://go.microsoft.com/fwlink/?linkid=2208312",
|
||||||
|
title: "Data Modeling",
|
||||||
|
description: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: " https://go.microsoft.com/fwlink/?linkid=2206941 ",
|
||||||
|
title: "How to choose a Distribution Column",
|
||||||
|
description: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://go.microsoft.com/fwlink/?linkid=2207425",
|
||||||
|
title: "Build Apps with Python/Java/Django",
|
||||||
|
description: "",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack style={{ minWidth: 124, maxWidth: 296 }}>
|
||||||
|
{items.map((item, i) => (
|
||||||
|
<Stack key={`nextStep${i}`} style={{ marginBottom: 26 }}>
|
||||||
|
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
|
||||||
|
<Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
|
||||||
|
{item.title}
|
||||||
|
</Link>
|
||||||
|
<Image src={LinkIcon} />
|
||||||
|
</Stack>
|
||||||
|
<Text>{item.description}</Text>
|
||||||
|
</Stack>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private getTipsAndLearnMoreItems(): JSX.Element {
|
||||||
|
const items: { link: string; title: string; description: string }[] = [
|
||||||
|
{
|
||||||
|
link: "https://go.microsoft.com/fwlink/?linkid=2207226",
|
||||||
|
title: "Performance Tuning",
|
||||||
|
description: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://go.microsoft.com/fwlink/?linkid=2208037",
|
||||||
|
title: "Useful Diagnostic Queries",
|
||||||
|
description: "",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link: "https://go.microsoft.com/fwlink/?linkid=2205270",
|
||||||
|
title: "Distributed SQL Reference",
|
||||||
|
description: "",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack style={{ minWidth: 124, maxWidth: 296 }}>
|
||||||
|
{items.map((item, i) => (
|
||||||
|
<Stack key={`tips${i}`} style={{ marginBottom: 26 }}>
|
||||||
|
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
|
||||||
|
<Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
|
||||||
|
{item.title}
|
||||||
|
</Link>
|
||||||
|
<Image src={LinkIcon} />
|
||||||
|
</Stack>
|
||||||
|
<Text>{item.description}</Text>
|
||||||
|
</Stack>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -811,6 +811,7 @@ export default class DocumentsTab extends TabsBase {
|
|||||||
ariaLabel: label,
|
ariaLabel: label,
|
||||||
hasPopup: false,
|
hasPopup: false,
|
||||||
disabled: !this.newDocumentButton.enabled(),
|
disabled: !this.newDocumentButton.enabled(),
|
||||||
|
id: "mongoNewDocumentBtn",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
133
src/Explorer/Tabs/PostgresConnectTab.tsx
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
import {
|
||||||
|
Checkbox,
|
||||||
|
Dropdown,
|
||||||
|
Icon,
|
||||||
|
IconButton,
|
||||||
|
IDropdownOption,
|
||||||
|
ITextFieldStyles,
|
||||||
|
Label,
|
||||||
|
Link,
|
||||||
|
Stack,
|
||||||
|
Text,
|
||||||
|
TextField,
|
||||||
|
TooltipHost,
|
||||||
|
} from "@fluentui/react";
|
||||||
|
import React from "react";
|
||||||
|
import { userContext } from "UserContext";
|
||||||
|
|
||||||
|
export const PostgresConnectTab: React.FC = (): JSX.Element => {
|
||||||
|
const { adminLogin, nodes, enablePublicIpAccess } = userContext.postgresConnectionStrParams;
|
||||||
|
const [usePgBouncerPort, setUsePgBouncerPort] = React.useState<boolean>(false);
|
||||||
|
const [selectedNode, setSelectedNode] = React.useState<string>(nodes?.[0]?.value);
|
||||||
|
const portNumber = usePgBouncerPort ? "6432" : "5432";
|
||||||
|
|
||||||
|
const onCopyBtnClicked = (selector: string): void => {
|
||||||
|
const textfield: HTMLInputElement = document.querySelector(selector);
|
||||||
|
textfield.select();
|
||||||
|
document.execCommand("copy");
|
||||||
|
};
|
||||||
|
|
||||||
|
const textfieldStyles: Partial<ITextFieldStyles> = {
|
||||||
|
root: { width: "100%" },
|
||||||
|
field: { backgroundColor: "rgb(230, 230, 230)" },
|
||||||
|
fieldGroup: { borderColor: "rgb(138, 136, 134)" },
|
||||||
|
subComponentStyles: { label: { fontWeight: 400 } },
|
||||||
|
description: { fontWeight: 400 },
|
||||||
|
};
|
||||||
|
|
||||||
|
const nodesDropdownOptions: IDropdownOption[] = nodes.map((node) => ({
|
||||||
|
key: node.value,
|
||||||
|
text: node.text,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const postgresSQLConnectionURL = `postgres://${adminLogin}:{your_password}@${selectedNode}:${portNumber}/citus?sslmode=require`;
|
||||||
|
const psql = `psql "host=${selectedNode} port=${portNumber} dbname=citus user=${adminLogin} password={your_password} sslmode=require"`;
|
||||||
|
const jdbc = `jdbc:postgresql://${selectedNode}:${portNumber}/citus?user=${adminLogin}&password={your_password}&sslmode=require`;
|
||||||
|
const libpq = `host=${selectedNode} port=${portNumber} dbname=citus user=${adminLogin} password={your_password} sslmode=require`;
|
||||||
|
const adoDotNet = `Server=${selectedNode};Database=citus;Port=${portNumber};User Id=${adminLogin};Password={your_password};Ssl Mode=Require;`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ width: "100%", padding: 16 }}>
|
||||||
|
<Stack horizontal verticalAlign="center" style={{ marginBottom: 8 }}>
|
||||||
|
<Label style={{ marginRight: 8 }}>Public IP addresses on worker nodes:</Label>
|
||||||
|
<TooltipHost
|
||||||
|
content="
|
||||||
|
You can enable or disable public IP addresses on the worker nodes on 'Networking' page of your server group."
|
||||||
|
>
|
||||||
|
<Icon style={{ margin: "5px 8px 0 0", cursor: "default" }} iconName="Info" />
|
||||||
|
</TooltipHost>
|
||||||
|
|
||||||
|
<TextField value={enablePublicIpAccess ? "On" : "Off"} readOnly disabled />
|
||||||
|
</Stack>
|
||||||
|
<Stack horizontal style={{ marginBottom: 8 }}>
|
||||||
|
<Label style={{ marginRight: 85 }}>Show connection strings for</Label>
|
||||||
|
<Dropdown
|
||||||
|
options={nodesDropdownOptions}
|
||||||
|
selectedKey={selectedNode}
|
||||||
|
onChange={(_, option) => {
|
||||||
|
const selectedNode = option.key as string;
|
||||||
|
setSelectedNode(selectedNode);
|
||||||
|
if (!selectedNode.startsWith("c.")) {
|
||||||
|
setUsePgBouncerPort(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
style={{ width: 200 }}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
<Stack horizontal style={{ marginBottom: 8 }}>
|
||||||
|
<Label style={{ marginRight: 44 }}>PgBouncer connection strings</Label>
|
||||||
|
<Checkbox
|
||||||
|
boxSide="end"
|
||||||
|
checked={usePgBouncerPort}
|
||||||
|
onChange={(_, checked: boolean) => setUsePgBouncerPort(checked)}
|
||||||
|
disabled={!selectedNode?.startsWith("c.")}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
<Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
|
||||||
|
<TextField
|
||||||
|
label="PostgreSQL connection URL"
|
||||||
|
id="postgresSQLConnectionURL"
|
||||||
|
readOnly
|
||||||
|
value={postgresSQLConnectionURL}
|
||||||
|
styles={textfieldStyles}
|
||||||
|
/>
|
||||||
|
<IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#postgresSQLConnectionURL")} />
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
|
||||||
|
<TextField label="psql" id="psql" readOnly value={psql} styles={textfieldStyles} />
|
||||||
|
<IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#psql")} />
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
|
||||||
|
<TextField label="JDBC" id="JDBC" readOnly value={jdbc} styles={textfieldStyles} />
|
||||||
|
<IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#JDBC")} />
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
|
||||||
|
<TextField
|
||||||
|
label="Node.js, Python, Ruby, PHP, C++ (libpq)"
|
||||||
|
id="libpq"
|
||||||
|
readOnly
|
||||||
|
value={libpq}
|
||||||
|
styles={textfieldStyles}
|
||||||
|
/>
|
||||||
|
<IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#libpq")} />
|
||||||
|
</Stack>
|
||||||
|
<Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
|
||||||
|
<TextField label="ADO.NET" id="adoDotNet" readOnly value={adoDotNet} styles={textfieldStyles} />
|
||||||
|
<IconButton iconProps={{ iconName: "Copy" }} onClick={() => onCopyBtnClicked("#adoDotNet")} />
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Label>Secure connections</Label>
|
||||||
|
<Text>
|
||||||
|
Only secure connections are supported. For production use cases, we recommend using the 'verify-full'
|
||||||
|
mode to enforce TLS certificate verification. You will need to download the Hyperscale (Citus) certificate, and
|
||||||
|
provide it when connecting to the database.{" "}
|
||||||
|
<Link href="https://go.microsoft.com/fwlink/?linkid=2155061" target="_blank">
|
||||||
|
Learn more
|
||||||
|
</Link>
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -600,54 +600,41 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
|
|||||||
metricsMap.forEach((queryMetrics) => {
|
metricsMap.forEach((queryMetrics) => {
|
||||||
if (queryMetrics) {
|
if (queryMetrics) {
|
||||||
aggregatedMetrics.documentLoadTime =
|
aggregatedMetrics.documentLoadTime =
|
||||||
queryMetrics.documentLoadTime &&
|
|
||||||
this._normalize(queryMetrics.documentLoadTime.totalMilliseconds()) +
|
this._normalize(queryMetrics.documentLoadTime.totalMilliseconds()) +
|
||||||
this._normalize(aggregatedMetrics.documentLoadTime);
|
this._normalize(aggregatedMetrics.documentLoadTime);
|
||||||
aggregatedMetrics.documentWriteTime =
|
aggregatedMetrics.documentWriteTime =
|
||||||
queryMetrics.documentWriteTime &&
|
|
||||||
this._normalize(queryMetrics.documentWriteTime.totalMilliseconds()) +
|
this._normalize(queryMetrics.documentWriteTime.totalMilliseconds()) +
|
||||||
this._normalize(aggregatedMetrics.documentWriteTime);
|
this._normalize(aggregatedMetrics.documentWriteTime);
|
||||||
aggregatedMetrics.indexHitDocumentCount =
|
aggregatedMetrics.indexHitDocumentCount =
|
||||||
queryMetrics.indexHitDocumentCount &&
|
|
||||||
this._normalize(queryMetrics.indexHitDocumentCount) +
|
this._normalize(queryMetrics.indexHitDocumentCount) +
|
||||||
this._normalize(aggregatedMetrics.indexHitDocumentCount);
|
this._normalize(aggregatedMetrics.indexHitDocumentCount);
|
||||||
aggregatedMetrics.outputDocumentCount =
|
aggregatedMetrics.outputDocumentCount =
|
||||||
queryMetrics.outputDocumentCount &&
|
|
||||||
this._normalize(queryMetrics.outputDocumentCount) + this._normalize(aggregatedMetrics.outputDocumentCount);
|
this._normalize(queryMetrics.outputDocumentCount) + this._normalize(aggregatedMetrics.outputDocumentCount);
|
||||||
aggregatedMetrics.outputDocumentSize =
|
aggregatedMetrics.outputDocumentSize =
|
||||||
queryMetrics.outputDocumentSize &&
|
|
||||||
this._normalize(queryMetrics.outputDocumentSize) + this._normalize(aggregatedMetrics.outputDocumentSize);
|
this._normalize(queryMetrics.outputDocumentSize) + this._normalize(aggregatedMetrics.outputDocumentSize);
|
||||||
aggregatedMetrics.indexLookupTime =
|
aggregatedMetrics.indexLookupTime =
|
||||||
queryMetrics.indexLookupTime &&
|
|
||||||
this._normalize(queryMetrics.indexLookupTime.totalMilliseconds()) +
|
this._normalize(queryMetrics.indexLookupTime.totalMilliseconds()) +
|
||||||
this._normalize(aggregatedMetrics.indexLookupTime);
|
this._normalize(aggregatedMetrics.indexLookupTime);
|
||||||
aggregatedMetrics.retrievedDocumentCount =
|
aggregatedMetrics.retrievedDocumentCount =
|
||||||
queryMetrics.retrievedDocumentCount &&
|
|
||||||
this._normalize(queryMetrics.retrievedDocumentCount) +
|
this._normalize(queryMetrics.retrievedDocumentCount) +
|
||||||
this._normalize(aggregatedMetrics.retrievedDocumentCount);
|
this._normalize(aggregatedMetrics.retrievedDocumentCount);
|
||||||
aggregatedMetrics.retrievedDocumentSize =
|
aggregatedMetrics.retrievedDocumentSize =
|
||||||
queryMetrics.retrievedDocumentSize &&
|
|
||||||
this._normalize(queryMetrics.retrievedDocumentSize) +
|
this._normalize(queryMetrics.retrievedDocumentSize) +
|
||||||
this._normalize(aggregatedMetrics.retrievedDocumentSize);
|
this._normalize(aggregatedMetrics.retrievedDocumentSize);
|
||||||
aggregatedMetrics.vmExecutionTime =
|
aggregatedMetrics.vmExecutionTime =
|
||||||
queryMetrics.vmExecutionTime &&
|
|
||||||
this._normalize(queryMetrics.vmExecutionTime.totalMilliseconds()) +
|
this._normalize(queryMetrics.vmExecutionTime.totalMilliseconds()) +
|
||||||
this._normalize(aggregatedMetrics.vmExecutionTime);
|
this._normalize(aggregatedMetrics.vmExecutionTime);
|
||||||
aggregatedMetrics.totalQueryExecutionTime =
|
aggregatedMetrics.totalQueryExecutionTime =
|
||||||
queryMetrics.totalQueryExecutionTime &&
|
|
||||||
this._normalize(queryMetrics.totalQueryExecutionTime.totalMilliseconds()) +
|
this._normalize(queryMetrics.totalQueryExecutionTime.totalMilliseconds()) +
|
||||||
this._normalize(aggregatedMetrics.totalQueryExecutionTime);
|
this._normalize(aggregatedMetrics.totalQueryExecutionTime);
|
||||||
|
|
||||||
aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime =
|
aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime =
|
||||||
aggregatedMetrics.runtimeExecutionTimes &&
|
|
||||||
this._normalize(queryMetrics.runtimeExecutionTimes.queryEngineExecutionTime.totalMilliseconds()) +
|
this._normalize(queryMetrics.runtimeExecutionTimes.queryEngineExecutionTime.totalMilliseconds()) +
|
||||||
this._normalize(aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime);
|
this._normalize(aggregatedMetrics.runtimeExecutionTimes.queryEngineExecutionTime);
|
||||||
aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime =
|
aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime =
|
||||||
aggregatedMetrics.runtimeExecutionTimes &&
|
|
||||||
this._normalize(queryMetrics.runtimeExecutionTimes.systemFunctionExecutionTime.totalMilliseconds()) +
|
this._normalize(queryMetrics.runtimeExecutionTimes.systemFunctionExecutionTime.totalMilliseconds()) +
|
||||||
this._normalize(aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime);
|
this._normalize(aggregatedMetrics.runtimeExecutionTimes.systemFunctionExecutionTime);
|
||||||
aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime =
|
aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime =
|
||||||
aggregatedMetrics.runtimeExecutionTimes &&
|
|
||||||
this._normalize(queryMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime.totalMilliseconds()) +
|
this._normalize(queryMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime.totalMilliseconds()) +
|
||||||
this._normalize(aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime);
|
this._normalize(aggregatedMetrics.runtimeExecutionTimes.userDefinedFunctionExecutionTime);
|
||||||
}
|
}
|
||||||
|
|||||||
44
src/Explorer/Tabs/QuickstartTab.tsx
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { Spinner, SpinnerSize, Stack } from "@fluentui/react";
|
||||||
|
import { NotebookWorkspaceConnectionInfo } from "Contracts/DataModels";
|
||||||
|
import { NotebookTerminalComponent } from "Explorer/Controls/Notebook/NotebookTerminalComponent";
|
||||||
|
import Explorer from "Explorer/Explorer";
|
||||||
|
import { useNotebook } from "Explorer/Notebook/useNotebook";
|
||||||
|
import { QuickstartGuide } from "Explorer/Quickstart/QuickstartGuide";
|
||||||
|
import React, { useEffect } from "react";
|
||||||
|
import { userContext } from "UserContext";
|
||||||
|
|
||||||
|
interface QuickstartTabProps {
|
||||||
|
explorer: Explorer;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const QuickstartTab: React.FC<QuickstartTabProps> = ({ explorer }: QuickstartTabProps): JSX.Element => {
|
||||||
|
const notebookServerInfo = useNotebook((state) => state.notebookServerInfo);
|
||||||
|
useEffect(() => {
|
||||||
|
explorer.allocateContainer();
|
||||||
|
}, []);
|
||||||
|
const getNotebookServerInfo = (): NotebookWorkspaceConnectionInfo => ({
|
||||||
|
authToken: notebookServerInfo.authToken,
|
||||||
|
notebookServerEndpoint: `${notebookServerInfo.notebookServerEndpoint?.replace(/\/+$/, "")}/postgresql`,
|
||||||
|
forwardingId: notebookServerInfo.forwardingId,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack style={{ width: "100%" }} horizontal>
|
||||||
|
<Stack style={{ width: "50%" }}>
|
||||||
|
<QuickstartGuide />
|
||||||
|
</Stack>
|
||||||
|
<Stack style={{ width: "50%", borderLeft: "black solid 1px" }}>
|
||||||
|
{notebookServerInfo?.notebookServerEndpoint && (
|
||||||
|
<NotebookTerminalComponent
|
||||||
|
notebookServerInfo={getNotebookServerInfo()}
|
||||||
|
databaseAccount={userContext.databaseAccount}
|
||||||
|
tabId="QuickstartPSQLShell"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{!notebookServerInfo?.notebookServerEndpoint && (
|
||||||
|
<Spinner styles={{ root: { marginTop: 10 } }} size={SpinnerSize.large}></Spinner>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,33 +1,43 @@
|
|||||||
import { CollectionTabKind } from "Contracts/ViewModels";
|
import { CollectionTabKind } from "Contracts/ViewModels";
|
||||||
|
import Explorer from "Explorer/Explorer";
|
||||||
|
import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
|
||||||
import { ConnectTab } from "Explorer/Tabs/ConnectTab";
|
import { ConnectTab } from "Explorer/Tabs/ConnectTab";
|
||||||
|
import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
|
||||||
|
import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
|
||||||
import { useTeachingBubble } from "hooks/useTeachingBubble";
|
import { useTeachingBubble } from "hooks/useTeachingBubble";
|
||||||
import ko from "knockout";
|
import ko from "knockout";
|
||||||
import React, { MutableRefObject, useEffect, useRef, useState } from "react";
|
import React, { MutableRefObject, useEffect, useRef, useState } from "react";
|
||||||
|
import { userContext } from "UserContext";
|
||||||
import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
|
import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
|
||||||
import errorIcon from "../../../images/close-black.svg";
|
import errorIcon from "../../../images/close-black.svg";
|
||||||
import { useObservable } from "../../hooks/useObservable";
|
import { useObservable } from "../../hooks/useObservable";
|
||||||
import { useTabs } from "../../hooks/useTabs";
|
import { ReactTabKind, useTabs } from "../../hooks/useTabs";
|
||||||
import TabsBase from "./TabsBase";
|
import TabsBase from "./TabsBase";
|
||||||
|
|
||||||
type Tab = TabsBase | (TabsBase & { render: () => JSX.Element });
|
type Tab = TabsBase | (TabsBase & { render: () => JSX.Element });
|
||||||
|
|
||||||
export const Tabs = (): JSX.Element => {
|
interface TabsProps {
|
||||||
const { openedTabs, activeTab } = useTabs();
|
explorer: Explorer;
|
||||||
const isConnectTabOpen = useTabs((state) => state.isConnectTabOpen);
|
}
|
||||||
const isConnectTabActive = useTabs((state) => state.isConnectTabActive);
|
|
||||||
|
export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
|
||||||
|
const { openedTabs, openedReactTabs, activeTab, activeReactTab } = useTabs();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tabsManagerContainer">
|
<div className="tabsManagerContainer">
|
||||||
<div id="content" className="flexContainer hideOverflows">
|
<div id="content" className="flexContainer hideOverflows">
|
||||||
<div className="nav-tabs-margin">
|
<div className="nav-tabs-margin">
|
||||||
<ul className="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
|
<ul className="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
|
||||||
{isConnectTabOpen && <TabNav key="connect" tab={undefined} active={isConnectTabActive} />}
|
{openedReactTabs.map((tab) => (
|
||||||
|
<TabNav key={ReactTabKind[tab]} active={activeReactTab === tab} tabKind={tab} />
|
||||||
|
))}
|
||||||
{openedTabs.map((tab) => (
|
{openedTabs.map((tab) => (
|
||||||
<TabNav key={tab.tabId} tab={tab} active={activeTab === tab} />
|
<TabNav key={tab.tabId} tab={tab} active={activeTab === tab} />
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="tabPanesContainer">
|
<div className="tabPanesContainer">
|
||||||
{isConnectTabActive && <ConnectTab />}
|
{activeReactTab !== undefined && getReactTabContent(activeReactTab, explorer)}
|
||||||
{openedTabs.map((tab) => (
|
{openedTabs.map((tab) => (
|
||||||
<TabPane key={tab.tabId} tab={tab} active={activeTab === tab} />
|
<TabPane key={tab.tabId} tab={tab} active={activeTab === tab} />
|
||||||
))}
|
))}
|
||||||
@@ -37,7 +47,7 @@ export const Tabs = (): JSX.Element => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
|
function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?: ReactTabKind }) {
|
||||||
const [hovering, setHovering] = useState(false);
|
const [hovering, setHovering] = useState(false);
|
||||||
const focusTab = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
|
const focusTab = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
|
||||||
const tabId = tab ? tab.tabId : "connect";
|
const tabId = tab ? tab.tabId : "connect";
|
||||||
@@ -51,8 +61,20 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
|
|||||||
<li
|
<li
|
||||||
onMouseOver={() => setHovering(true)}
|
onMouseOver={() => setHovering(true)}
|
||||||
onMouseLeave={() => setHovering(false)}
|
onMouseLeave={() => setHovering(false)}
|
||||||
onClick={() => (tab ? tab.onTabClick() : useTabs.getState().activateConnectTab())}
|
onClick={() => {
|
||||||
onKeyPress={({ nativeEvent: e }) => (tab ? tab.onKeyPressActivate(undefined, e) : onKeyPressConnectTab(e))}
|
if (tab) {
|
||||||
|
tab.onTabClick();
|
||||||
|
} else if (tabKind !== undefined) {
|
||||||
|
useTabs.getState().activateReactTab(tabKind);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onKeyPress={({ nativeEvent: e }) => {
|
||||||
|
if (tab) {
|
||||||
|
tab.onKeyPressActivate(undefined, e);
|
||||||
|
} else if (tabKind !== undefined) {
|
||||||
|
onKeyPressReactTab(e, tabKind);
|
||||||
|
}
|
||||||
|
}}
|
||||||
className={active ? "active tabList" : "tabList"}
|
className={active ? "active tabList" : "tabList"}
|
||||||
title={useObservable(tab?.tabPath || ko.observable(""))}
|
title={useObservable(tab?.tabPath || ko.observable(""))}
|
||||||
aria-selected={active}
|
aria-selected={active}
|
||||||
@@ -65,16 +87,18 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
|
|||||||
<span className="tabNavContentContainer">
|
<span className="tabNavContentContainer">
|
||||||
<a data-toggle="tab" href={"#" + tabId} tabIndex={-1}>
|
<a data-toggle="tab" href={"#" + tabId} tabIndex={-1}>
|
||||||
<div className="tab_Content">
|
<div className="tab_Content">
|
||||||
<span className="statusIconContainer">
|
<span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
|
||||||
{useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
|
{useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
|
||||||
{useObservable(tab?.isExecuting || ko.observable(false)) && (
|
{useObservable(tab?.isExecuting || ko.observable(false)) && (
|
||||||
<img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
|
<img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
<span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable("Connect"))}</span>
|
<span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable(ReactTabKind[tabKind]))}</span>
|
||||||
|
{tabKind !== ReactTabKind.Home && (
|
||||||
<span className="tabIconSection">
|
<span className="tabIconSection">
|
||||||
<CloseButton tab={tab} active={active} hovering={hovering} />
|
<CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
|
||||||
</span>
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
@@ -82,14 +106,27 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const CloseButton = ({ tab, active, hovering }: { tab: Tab; active: boolean; hovering: boolean }) => (
|
const CloseButton = ({
|
||||||
|
tab,
|
||||||
|
active,
|
||||||
|
hovering,
|
||||||
|
tabKind,
|
||||||
|
}: {
|
||||||
|
tab: Tab;
|
||||||
|
active: boolean;
|
||||||
|
hovering: boolean;
|
||||||
|
tabKind?: ReactTabKind;
|
||||||
|
}) => (
|
||||||
<span
|
<span
|
||||||
style={{ display: hovering || active ? undefined : "none" }}
|
style={{ display: hovering || active ? undefined : "none" }}
|
||||||
title="Close"
|
title="Close"
|
||||||
role="button"
|
role="button"
|
||||||
aria-label="Close Tab"
|
aria-label="Close Tab"
|
||||||
className="cancelButton"
|
className="cancelButton"
|
||||||
onClick={() => (tab ? tab.onCloseTabButtonClick() : useTabs.getState().closeConnectTab())}
|
onClick={(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
tab ? tab.onCloseTabButtonClick() : useTabs.getState().closeReactTab(tabKind);
|
||||||
|
}}
|
||||||
tabIndex={active ? 0 : undefined}
|
tabIndex={active ? 0 : undefined}
|
||||||
onKeyPress={({ nativeEvent: e }) => tab.onKeyPressClose(undefined, e)}
|
onKeyPress={({ nativeEvent: e }) => tab.onKeyPressClose(undefined, e)}
|
||||||
>
|
>
|
||||||
@@ -144,9 +181,22 @@ function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
|
|||||||
return <div {...attrs} ref={ref} data-bind="html:html" />;
|
return <div {...attrs} ref={ref} data-bind="html:html" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
const onKeyPressConnectTab = (e: KeyboardEvent): void => {
|
const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
|
||||||
if (e.key === "Enter" || e.key === "Space") {
|
if (e.key === "Enter" || e.key === "Space") {
|
||||||
useTabs.getState().activateConnectTab();
|
useTabs.getState().activateReactTab(tabKind);
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => {
|
||||||
|
switch (activeReactTab) {
|
||||||
|
case ReactTabKind.Connect:
|
||||||
|
return userContext.apiType === "Postgres" ? <PostgresConnectTab /> : <ConnectTab />;
|
||||||
|
case ReactTabKind.Home:
|
||||||
|
return <SplashScreen explorer={explorer} />;
|
||||||
|
case ReactTabKind.Quickstart:
|
||||||
|
return <QuickstartTab explorer={explorer} />;
|
||||||
|
default:
|
||||||
|
throw Error(`Unsupported tab kind ${ReactTabKind[activeReactTab]}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|||||||
@@ -95,6 +95,10 @@ export default class TerminalTab extends TabsBase {
|
|||||||
endpointSuffix = "cassandra";
|
endpointSuffix = "cassandra";
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
case ViewModels.TerminalKind.Postgres:
|
||||||
|
endpointSuffix = "postgresql";
|
||||||
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
throw new Error(`Terminal kind: ${options.kind} not supported`);
|
throw new Error(`Terminal kind: ${options.kind} not supported`);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -531,8 +531,13 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (userContext.apiType !== "Cassandra" || !isServerlessAccount()) {
|
if (userContext.apiType !== "Cassandra" || !isServerlessAccount()) {
|
||||||
|
let id = "";
|
||||||
|
if (collection.isSampleCollection) {
|
||||||
|
id = database.isDatabaseShared() ? "sampleSettings" : "sampleScaleSettings";
|
||||||
|
}
|
||||||
|
|
||||||
children.push({
|
children.push({
|
||||||
id: collection.isSampleCollection && !database.isDatabaseShared() ? "sampleScaleSettings" : "",
|
id,
|
||||||
label: database.isDatabaseShared() || isServerlessAccount() ? "Settings" : "Scale & Settings",
|
label: database.isDatabaseShared() || isServerlessAccount() ? "Settings" : "Scale & Settings",
|
||||||
onClick: collection.onSettingsClick.bind(collection),
|
onClick: collection.onSettingsClick.bind(collection),
|
||||||
isSelected: () =>
|
isSelected: () =>
|
||||||
|
|||||||
19
src/Main.tsx
@@ -1,11 +1,13 @@
|
|||||||
// CSS Dependencies
|
// CSS Dependencies
|
||||||
import { initializeIcons } from "@fluentui/react";
|
import { initializeIcons } from "@fluentui/react";
|
||||||
import "bootstrap/dist/css/bootstrap.css";
|
import "bootstrap/dist/css/bootstrap.css";
|
||||||
import { QuickstartCarousel } from "Explorer/Tutorials/QuickstartCarousel";
|
import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
|
||||||
import { QuickstartTutorial } from "Explorer/Tutorials/QuickstartTutorial";
|
import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
|
||||||
|
import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
|
||||||
import { useCarousel } from "hooks/useCarousel";
|
import { useCarousel } from "hooks/useCarousel";
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from "react-dom";
|
||||||
|
import { userContext } from "UserContext";
|
||||||
import "../externals/jquery-ui.min.css";
|
import "../externals/jquery-ui.min.css";
|
||||||
import "../externals/jquery-ui.min.js";
|
import "../externals/jquery-ui.min.js";
|
||||||
import "../externals/jquery-ui.structure.min.css";
|
import "../externals/jquery-ui.structure.min.css";
|
||||||
@@ -46,12 +48,10 @@ import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
|
|||||||
import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
|
import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
|
||||||
import "./Explorer/Panes/PanelComponent.less";
|
import "./Explorer/Panes/PanelComponent.less";
|
||||||
import { SidePanel } from "./Explorer/Panes/PanelContainerComponent";
|
import { SidePanel } from "./Explorer/Panes/PanelContainerComponent";
|
||||||
import { SplashScreen } from "./Explorer/SplashScreen/SplashScreen";
|
|
||||||
import "./Explorer/SplashScreen/SplashScreen.less";
|
import "./Explorer/SplashScreen/SplashScreen.less";
|
||||||
import { Tabs } from "./Explorer/Tabs/Tabs";
|
import { Tabs } from "./Explorer/Tabs/Tabs";
|
||||||
import { useConfig } from "./hooks/useConfig";
|
import { useConfig } from "./hooks/useConfig";
|
||||||
import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
|
import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
|
||||||
import { useTabs } from "./hooks/useTabs";
|
|
||||||
import "./Libs/jquery";
|
import "./Libs/jquery";
|
||||||
import "./Shared/appInsights";
|
import "./Shared/appInsights";
|
||||||
|
|
||||||
@@ -59,8 +59,6 @@ initializeIcons();
|
|||||||
|
|
||||||
const App: React.FunctionComponent = () => {
|
const App: React.FunctionComponent = () => {
|
||||||
const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
|
const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
|
||||||
const openedTabs = useTabs((state) => state.openedTabs);
|
|
||||||
const isConnectTabOpen = useTabs((state) => state.isConnectTabOpen);
|
|
||||||
const isCarouselOpen = useCarousel((state) => state.shouldOpen);
|
const isCarouselOpen = useCarousel((state) => state.shouldOpen);
|
||||||
|
|
||||||
const config = useConfig();
|
const config = useConfig();
|
||||||
@@ -87,6 +85,7 @@ const App: React.FunctionComponent = () => {
|
|||||||
{/* Collections Tree and Tabs - Begin */}
|
{/* Collections Tree and Tabs - Begin */}
|
||||||
<div className="resourceTreeAndTabs">
|
<div className="resourceTreeAndTabs">
|
||||||
{/* Collections Tree - Start */}
|
{/* Collections Tree - Start */}
|
||||||
|
{userContext.apiType !== "Postgres" && (
|
||||||
<div id="resourcetree" data-test="resourceTreeId" className="resourceTree">
|
<div id="resourcetree" data-test="resourceTreeId" className="resourceTree">
|
||||||
<div className="collectionsTreeWithSplitter">
|
<div className="collectionsTreeWithSplitter">
|
||||||
{/* Collections Tree Expanded - Start */}
|
{/* Collections Tree Expanded - Start */}
|
||||||
@@ -104,9 +103,8 @@ const App: React.FunctionComponent = () => {
|
|||||||
{/* Collections Tree Collapsed - End */}
|
{/* Collections Tree Collapsed - End */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Collections Tree - End */}
|
)}
|
||||||
{openedTabs.length === 0 && !isConnectTabOpen && <SplashScreen explorer={explorer} />}
|
<Tabs explorer={explorer} />
|
||||||
<Tabs />
|
|
||||||
</div>
|
</div>
|
||||||
{/* Collections Tree and Tabs - End */}
|
{/* Collections Tree and Tabs - End */}
|
||||||
<div
|
<div
|
||||||
@@ -121,7 +119,8 @@ const App: React.FunctionComponent = () => {
|
|||||||
<SidePanel />
|
<SidePanel />
|
||||||
<Dialog />
|
<Dialog />
|
||||||
{<QuickstartCarousel isOpen={isCarouselOpen} />}
|
{<QuickstartCarousel isOpen={isCarouselOpen} />}
|
||||||
{<QuickstartTutorial />}
|
{<SQLQuickstartTutorial />}
|
||||||
|
{<MongoQuickstartTutorial />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -19,10 +19,9 @@ import {
|
|||||||
IContainerData,
|
IContainerData,
|
||||||
IDbAccountAllow,
|
IDbAccountAllow,
|
||||||
IMaxAllocationTimeExceeded,
|
IMaxAllocationTimeExceeded,
|
||||||
IMaxDbAccountsPerUserExceeded,
|
|
||||||
IMaxUsersPerDbAccountExceeded,
|
|
||||||
IPhoenixConnectionInfoResult,
|
IPhoenixConnectionInfoResult,
|
||||||
IPhoenixError,
|
IPhoenixError,
|
||||||
|
IPhoenixServiceInfo,
|
||||||
IProvisionData,
|
IProvisionData,
|
||||||
IResponse,
|
IResponse,
|
||||||
PhoenixErrorType,
|
PhoenixErrorType,
|
||||||
@@ -33,6 +32,7 @@ import { userContext } from "../UserContext";
|
|||||||
import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
|
import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
|
||||||
|
|
||||||
export class PhoenixClient {
|
export class PhoenixClient {
|
||||||
|
private armResourceId: string;
|
||||||
private containerHealthHandler: NodeJS.Timeout;
|
private containerHealthHandler: NodeJS.Timeout;
|
||||||
private retryOptions: promiseRetry.Options = {
|
private retryOptions: promiseRetry.Options = {
|
||||||
retries: Notebook.retryAttempts,
|
retries: Notebook.retryAttempts,
|
||||||
@@ -40,30 +40,42 @@ export class PhoenixClient {
|
|||||||
minTimeout: Notebook.retryAttemptDelayMs,
|
minTimeout: Notebook.retryAttemptDelayMs,
|
||||||
};
|
};
|
||||||
|
|
||||||
public async allocateContainer(provisionData: IProvisionData): Promise<IResponse<IPhoenixConnectionInfoResult>> {
|
constructor(armResourceId: string) {
|
||||||
|
this.armResourceId = armResourceId;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async allocateContainer(provisionData: IProvisionData): Promise<IResponse<IPhoenixServiceInfo>> {
|
||||||
return this.executeContainerAssignmentOperation(provisionData, "allocate");
|
return this.executeContainerAssignmentOperation(provisionData, "allocate");
|
||||||
}
|
}
|
||||||
|
|
||||||
public async resetContainer(provisionData: IProvisionData): Promise<IResponse<IPhoenixConnectionInfoResult>> {
|
public async resetContainer(provisionData: IProvisionData): Promise<IResponse<IPhoenixServiceInfo>> {
|
||||||
return this.executeContainerAssignmentOperation(provisionData, "reset");
|
return this.executeContainerAssignmentOperation(provisionData, "reset");
|
||||||
}
|
}
|
||||||
|
|
||||||
private async executeContainerAssignmentOperation(
|
private async executeContainerAssignmentOperation(
|
||||||
provisionData: IProvisionData,
|
provisionData: IProvisionData,
|
||||||
operation: string
|
operation: string
|
||||||
): Promise<IResponse<IPhoenixConnectionInfoResult>> {
|
): Promise<IResponse<IPhoenixServiceInfo>> {
|
||||||
let response;
|
let response;
|
||||||
try {
|
try {
|
||||||
response = await fetch(`${this.getPhoenixControlPlanePathPrefix()}/containerconnections`, {
|
response = await fetch(`${this.getPhoenixControlPlanePathPrefix()}/containerconnections/multicontainer`, {
|
||||||
method: operation === "allocate" ? "POST" : "PATCH",
|
method: operation === "allocate" ? "POST" : "PATCH",
|
||||||
headers: PhoenixClient.getHeaders(),
|
headers: PhoenixClient.getHeaders(),
|
||||||
body: JSON.stringify(provisionData),
|
body: JSON.stringify(provisionData),
|
||||||
});
|
});
|
||||||
const responseJson = await response?.json();
|
const responseJson = await response?.json();
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
|
const phoenixConnectionInfoResult = responseJson as IPhoenixConnectionInfoResult[];
|
||||||
|
if (
|
||||||
|
!phoenixConnectionInfoResult ||
|
||||||
|
phoenixConnectionInfoResult.length === 0 ||
|
||||||
|
!phoenixConnectionInfoResult[0]
|
||||||
|
) {
|
||||||
|
throw new Error("Received invalid phoenix connection response.");
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
status: response.status,
|
status: response.status,
|
||||||
data: responseJson,
|
data: phoenixConnectionInfoResult[0].phoenixServiceInfo,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
const phoenixError = responseJson as IPhoenixError;
|
const phoenixError = responseJson as IPhoenixError;
|
||||||
@@ -207,22 +219,21 @@ export class PhoenixClient {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public static getPhoenixEndpoint(): string {
|
private getPhoenixControlPlanePathPrefix(): string {
|
||||||
const phoenixEndpoint =
|
if (!this.armResourceId) {
|
||||||
|
throw new Error("The Phoenix client was not initialized properly: missing ARM resourcce id");
|
||||||
|
}
|
||||||
|
|
||||||
|
const toolsEndpoint =
|
||||||
userContext.features.phoenixEndpoint ?? userContext.features.junoEndpoint ?? configContext.JUNO_ENDPOINT;
|
userContext.features.phoenixEndpoint ?? userContext.features.junoEndpoint ?? configContext.JUNO_ENDPOINT;
|
||||||
if (!validateEndpoint(phoenixEndpoint, allowedJunoOrigins)) {
|
|
||||||
const error = `${phoenixEndpoint} not allowed as juno endpoint`;
|
if (!validateEndpoint(toolsEndpoint, allowedJunoOrigins)) {
|
||||||
|
const error = `${toolsEndpoint} not allowed as tools endpoint`;
|
||||||
console.error(error);
|
console.error(error);
|
||||||
throw new Error(error);
|
throw new Error(error);
|
||||||
}
|
}
|
||||||
|
|
||||||
return phoenixEndpoint;
|
return `${toolsEndpoint}/api/controlplane/toolscontainer/cosmosaccounts${this.armResourceId}`;
|
||||||
}
|
|
||||||
|
|
||||||
public getPhoenixControlPlanePathPrefix(): string {
|
|
||||||
return `${PhoenixClient.getPhoenixEndpoint()}/api/controlplane/toolscontainer/cosmosaccounts${
|
|
||||||
userContext.databaseAccount.id
|
|
||||||
}`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private static getHeaders(): HeadersInit {
|
private static getHeaders(): HeadersInit {
|
||||||
@@ -240,34 +251,13 @@ export class PhoenixClient {
|
|||||||
const maxAllocationTimeExceeded = errInfo as IMaxAllocationTimeExceeded;
|
const maxAllocationTimeExceeded = errInfo as IMaxAllocationTimeExceeded;
|
||||||
const allocateAfterTimestamp = new Date(maxAllocationTimeExceeded?.earliestAllocationTimestamp);
|
const allocateAfterTimestamp = new Date(maxAllocationTimeExceeded?.earliestAllocationTimestamp);
|
||||||
allocateAfterTimestamp.setDate(allocateAfterTimestamp.getDate() + 1);
|
allocateAfterTimestamp.setDate(allocateAfterTimestamp.getDate() + 1);
|
||||||
return (
|
return `${errInfo.message}` + ". Please try again after " + `${allocateAfterTimestamp.toLocaleString()}`;
|
||||||
`${errInfo.message}` +
|
|
||||||
" Max allocation time for a day to a user is " +
|
|
||||||
`${maxAllocationTimeExceeded.maxAllocationTimePerDayPerUserInMinutes}` +
|
|
||||||
". Please try again after " +
|
|
||||||
`${allocateAfterTimestamp.toLocaleString()}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
case PhoenixErrorType.MaxDbAccountsPerUserExceeded: {
|
|
||||||
const maxDbAccountsPerUserExceeded = errInfo as IMaxDbAccountsPerUserExceeded;
|
|
||||||
return (
|
|
||||||
`${errInfo.message}` +
|
|
||||||
" Max simultaneous connections allowed per user is " +
|
|
||||||
`${maxDbAccountsPerUserExceeded.maxSimultaneousConnectionsPerUser}` +
|
|
||||||
"."
|
|
||||||
);
|
|
||||||
}
|
|
||||||
case PhoenixErrorType.MaxUsersPerDbAccountExceeded: {
|
|
||||||
const maxUsersPerDbAccountExceeded = errInfo as IMaxUsersPerDbAccountExceeded;
|
|
||||||
return (
|
|
||||||
`${errInfo.message}` +
|
|
||||||
" Max simultaneous users allowed per DbAccount is " +
|
|
||||||
`${maxUsersPerDbAccountExceeded.maxSimultaneousUsersPerDbAccount}` +
|
|
||||||
"."
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
case PhoenixErrorType.MaxDbAccountsPerUserExceeded:
|
||||||
|
case PhoenixErrorType.MaxUsersPerDbAccountExceeded:
|
||||||
case PhoenixErrorType.AllocationValidationResult:
|
case PhoenixErrorType.AllocationValidationResult:
|
||||||
case PhoenixErrorType.RegionNotServicable:
|
case PhoenixErrorType.RegionNotServicable:
|
||||||
|
case PhoenixErrorType.UserMissingPermissionsError:
|
||||||
case PhoenixErrorType.SubscriptionNotAllowed: {
|
case PhoenixErrorType.SubscriptionNotAllowed: {
|
||||||
return `${errInfo.message}`;
|
return `${errInfo.message}`;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -40,23 +40,23 @@ export enum SelfServeType {
|
|||||||
*/
|
*/
|
||||||
export enum BladeType {
|
export enum BladeType {
|
||||||
/**
|
/**
|
||||||
* Keys blade of a SQL API account.
|
* Keys blade of a Azure Cosmos DB for NoSQL account.
|
||||||
*/
|
*/
|
||||||
SqlKeys = "keys",
|
SqlKeys = "keys",
|
||||||
/**
|
/**
|
||||||
* Keys blade of a Mongo API account.
|
* Keys blade of a Azure Cosmos DB for MongoDB account.
|
||||||
*/
|
*/
|
||||||
MongoKeys = "mongoDbKeys",
|
MongoKeys = "mongoDbKeys",
|
||||||
/**
|
/**
|
||||||
* Keys blade of a Cassandra API account.
|
* Keys blade of a Azure Cosmos DB for Apache Cassandra account.
|
||||||
*/
|
*/
|
||||||
CassandraKeys = "cassandraDbKeys",
|
CassandraKeys = "cassandraDbKeys",
|
||||||
/**
|
/**
|
||||||
* Keys blade of a Gremlin API account.
|
* Keys blade of a Azure Cosmos DB for Apache Gremlin account.
|
||||||
*/
|
*/
|
||||||
GremlinKeys = "keys",
|
GremlinKeys = "keys",
|
||||||
/**
|
/**
|
||||||
* Keys blade of a Table API account.
|
* Keys blade of a Azure Cosmos DB for Table account.
|
||||||
*/
|
*/
|
||||||
TableKeys = "tableKeys",
|
TableKeys = "tableKeys",
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -130,6 +130,7 @@ export enum Action {
|
|||||||
CompleteCarousel,
|
CompleteCarousel,
|
||||||
LaunchUITour,
|
LaunchUITour,
|
||||||
CancelUITour,
|
CancelUITour,
|
||||||
|
CompleteUITour,
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ActionModifiers = {
|
export const ActionModifiers = {
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* JupyterLab applications based on jupyterLab components
|
* JupyterLab applications based on jupyterLab components
|
||||||
*/
|
*/
|
||||||
import { ServerConnection, TerminalManager } from "@jupyterlab/services";
|
import { ServerConnection, TerminalManager } from "@jupyterlab/services";
|
||||||
import { IMessage } from "@jupyterlab/services/lib/terminal/terminal";
|
import { IMessage, ITerminalConnection } from "@jupyterlab/services/lib/terminal/terminal";
|
||||||
import { Terminal } from "@jupyterlab/terminal";
|
import { Terminal } from "@jupyterlab/terminal";
|
||||||
import { Panel, Widget } from "@phosphor/widgets";
|
import { Panel, Widget } from "@phosphor/widgets";
|
||||||
import { userContext } from "UserContext";
|
import { userContext } from "UserContext";
|
||||||
@@ -24,6 +24,10 @@ export class JupyterLabAppFactory {
|
|||||||
this.isShellStarted = content?.includes("Connected to") && content?.includes("cqlsh");
|
this.isShellStarted = content?.includes("Connected to") && content?.includes("cqlsh");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private isPostgresShellStarted(content: string | undefined) {
|
||||||
|
this.isShellStarted = content?.includes("citus=>");
|
||||||
|
}
|
||||||
|
|
||||||
constructor(closeTab: () => void) {
|
constructor(closeTab: () => void) {
|
||||||
this.onShellExited = closeTab;
|
this.onShellExited = closeTab;
|
||||||
this.isShellStarted = false;
|
this.isShellStarted = false;
|
||||||
@@ -36,10 +40,13 @@ export class JupyterLabAppFactory {
|
|||||||
case "Cassandra":
|
case "Cassandra":
|
||||||
this.checkShellStarted = this.isCassandraShellStarted;
|
this.checkShellStarted = this.isCassandraShellStarted;
|
||||||
break;
|
break;
|
||||||
|
case "Postgres":
|
||||||
|
this.checkShellStarted = this.isPostgresShellStarted;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public async createTerminalApp(serverSettings: ServerConnection.ISettings) {
|
public async createTerminalApp(serverSettings: ServerConnection.ISettings): Promise<ITerminalConnection | undefined> {
|
||||||
const manager = new TerminalManager({
|
const manager = new TerminalManager({
|
||||||
serverSettings: serverSettings,
|
serverSettings: serverSettings,
|
||||||
});
|
});
|
||||||
@@ -61,7 +68,7 @@ export class JupyterLabAppFactory {
|
|||||||
|
|
||||||
if (!term) {
|
if (!term) {
|
||||||
console.error("Failed starting terminal");
|
console.error("Failed starting terminal");
|
||||||
return;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
term.title.closable = false;
|
term.title.closable = false;
|
||||||
@@ -83,5 +90,7 @@ export class JupyterLabAppFactory {
|
|||||||
window.addEventListener("unload", () => {
|
window.addEventListener("unload", () => {
|
||||||
panel.dispose();
|
panel.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
return session;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { ServerConnection } from "@jupyterlab/services";
|
import { ServerConnection } from "@jupyterlab/services";
|
||||||
|
import { IMessage, ITerminalConnection } from "@jupyterlab/services/lib/terminal/terminal";
|
||||||
import "@jupyterlab/terminal/style/index.css";
|
import "@jupyterlab/terminal/style/index.css";
|
||||||
import { MessageTypes } from "Contracts/ExplorerContracts";
|
import { MessageTypes } from "Contracts/ExplorerContracts";
|
||||||
import postRobot from "post-robot";
|
import postRobot from "post-robot";
|
||||||
@@ -41,7 +42,7 @@ const createServerSettings = (props: TerminalProps): ServerConnection.ISettings
|
|||||||
return ServerConnection.makeSettings(options);
|
return ServerConnection.makeSettings(options);
|
||||||
};
|
};
|
||||||
|
|
||||||
const initTerminal = async (props: TerminalProps) => {
|
const initTerminal = async (props: TerminalProps): Promise<ITerminalConnection> => {
|
||||||
// Initialize userContext (only properties which are needed by TelemetryProcessor)
|
// Initialize userContext (only properties which are needed by TelemetryProcessor)
|
||||||
updateUserContext({
|
updateUserContext({
|
||||||
subscriptionId: props.subscriptionId,
|
subscriptionId: props.subscriptionId,
|
||||||
@@ -55,10 +56,12 @@ const initTerminal = async (props: TerminalProps) => {
|
|||||||
const startTime = TelemetryProcessor.traceStart(Action.OpenTerminal, data);
|
const startTime = TelemetryProcessor.traceStart(Action.OpenTerminal, data);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await new JupyterLabAppFactory(() => closeTab(props.tabId)).createTerminalApp(serverSettings);
|
const session = await new JupyterLabAppFactory(() => closeTab(props.tabId)).createTerminalApp(serverSettings);
|
||||||
TelemetryProcessor.traceSuccess(Action.OpenTerminal, data, startTime);
|
TelemetryProcessor.traceSuccess(Action.OpenTerminal, data, startTime);
|
||||||
|
return session;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
TelemetryProcessor.traceFailure(Action.OpenTerminal, data, startTime);
|
TelemetryProcessor.traceFailure(Action.OpenTerminal, data, startTime);
|
||||||
|
return undefined;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -70,6 +73,7 @@ const closeTab = (tabId: string): void => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const main = async (): Promise<void> => {
|
const main = async (): Promise<void> => {
|
||||||
|
let session: ITerminalConnection | undefined;
|
||||||
postRobot.on(
|
postRobot.on(
|
||||||
"props",
|
"props",
|
||||||
{
|
{
|
||||||
@@ -80,7 +84,22 @@ const main = async (): Promise<void> => {
|
|||||||
// Typescript definition for event is wrong. So read props by casting to <any>
|
// Typescript definition for event is wrong. So read props by casting to <any>
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
const props = (event as any).data as TerminalProps;
|
const props = (event as any).data as TerminalProps;
|
||||||
await initTerminal(props);
|
session = await initTerminal(props);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
postRobot.on(
|
||||||
|
"sendMessage",
|
||||||
|
{
|
||||||
|
window: window.parent,
|
||||||
|
domain: window.location.origin,
|
||||||
|
},
|
||||||
|
async (event) => {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
const message = (event as any).data as IMessage;
|
||||||
|
if (session) {
|
||||||
|
session.send(message);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useCarousel } from "hooks/useCarousel";
|
import { useCarousel } from "hooks/useCarousel";
|
||||||
|
import { usePostgres } from "hooks/usePostgres";
|
||||||
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
import { Action } from "Shared/Telemetry/TelemetryConstants";
|
||||||
import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
|
import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
|
||||||
import { AuthType } from "./AuthType";
|
import { AuthType } from "./AuthType";
|
||||||
@@ -25,6 +26,20 @@ export interface CollectionCreationDefaults {
|
|||||||
throughput: ThroughputDefaults;
|
throughput: ThroughputDefaults;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface Node {
|
||||||
|
text: string;
|
||||||
|
value: string;
|
||||||
|
ariaLabel: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PostgresConnectionStrParams {
|
||||||
|
adminLogin: string;
|
||||||
|
enablePublicIpAccess: boolean;
|
||||||
|
nodes: Node[];
|
||||||
|
isMarlinServerGroup: boolean;
|
||||||
|
isFreeTier: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
interface UserContext {
|
interface UserContext {
|
||||||
readonly authType?: AuthType;
|
readonly authType?: AuthType;
|
||||||
readonly masterKey?: string;
|
readonly masterKey?: string;
|
||||||
@@ -36,7 +51,6 @@ interface UserContext {
|
|||||||
readonly accessToken?: string;
|
readonly accessToken?: string;
|
||||||
readonly authorizationToken?: string;
|
readonly authorizationToken?: string;
|
||||||
readonly resourceToken?: string;
|
readonly resourceToken?: string;
|
||||||
readonly useSDKOperations: boolean;
|
|
||||||
readonly subscriptionType?: SubscriptionType;
|
readonly subscriptionType?: SubscriptionType;
|
||||||
readonly quotaId?: string;
|
readonly quotaId?: string;
|
||||||
// API Type is not yet provided by ARM. You need to manually inspect all the capabilities+kind so we abstract that logic in userContext
|
// API Type is not yet provided by ARM. You need to manually inspect all the capabilities+kind so we abstract that logic in userContext
|
||||||
@@ -52,16 +66,16 @@ interface UserContext {
|
|||||||
collectionId: string;
|
collectionId: string;
|
||||||
partitionKey?: string;
|
partitionKey?: string;
|
||||||
};
|
};
|
||||||
|
readonly postgresConnectionStrParams?: PostgresConnectionStrParams;
|
||||||
collectionCreationDefaults: CollectionCreationDefaults;
|
collectionCreationDefaults: CollectionCreationDefaults;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra";
|
export type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra" | "Postgres";
|
||||||
export type PortalEnv = "localhost" | "blackforest" | "fairfax" | "mooncake" | "prod" | "dev";
|
export type PortalEnv = "localhost" | "blackforest" | "fairfax" | "mooncake" | "prod" | "dev";
|
||||||
|
|
||||||
const ONE_WEEK_IN_MS = 604800000;
|
const ONE_WEEK_IN_MS = 604800000;
|
||||||
|
|
||||||
const features = extractFeatures();
|
const features = extractFeatures();
|
||||||
const { enableSDKoperations: useSDKOperations } = features;
|
|
||||||
|
|
||||||
const userContext: UserContext = {
|
const userContext: UserContext = {
|
||||||
apiType: "SQL",
|
apiType: "SQL",
|
||||||
@@ -69,7 +83,6 @@ const userContext: UserContext = {
|
|||||||
isTryCosmosDBSubscription: false,
|
isTryCosmosDBSubscription: false,
|
||||||
portalEnv: "prod",
|
portalEnv: "prod",
|
||||||
features,
|
features,
|
||||||
useSDKOperations,
|
|
||||||
addCollectionFlight: CollectionCreation.DefaultAddCollectionDefaultFlight,
|
addCollectionFlight: CollectionCreation.DefaultAddCollectionDefaultFlight,
|
||||||
subscriptionType: CollectionCreation.DefaultSubscriptionType,
|
subscriptionType: CollectionCreation.DefaultSubscriptionType,
|
||||||
collectionCreationDefaults: CollectionCreationDefaults,
|
collectionCreationDefaults: CollectionCreationDefaults,
|
||||||
@@ -95,15 +108,19 @@ function updateUserContext(newContext: Partial<UserContext>): void {
|
|||||||
ONE_WEEK_IN_MS
|
ONE_WEEK_IN_MS
|
||||||
);
|
);
|
||||||
|
|
||||||
if (
|
if (!localStorage.getItem(newContext.databaseAccount.id)) {
|
||||||
!localStorage.getItem(newContext.databaseAccount.id) &&
|
if (newContext.apiType === "Postgres") {
|
||||||
(userContext.isTryCosmosDBSubscription || isNewAccount)
|
usePostgres.getState().setShowPostgreTeachingBubble(true);
|
||||||
) {
|
localStorage.setItem(newContext.databaseAccount.id, "true");
|
||||||
|
}
|
||||||
|
if (userContext.isTryCosmosDBSubscription || isNewAccount) {
|
||||||
useCarousel.getState().setShouldOpen(true);
|
useCarousel.getState().setShouldOpen(true);
|
||||||
|
usePostgres.getState().setShowResetPasswordBubble(true);
|
||||||
localStorage.setItem(newContext.databaseAccount.id, "true");
|
localStorage.setItem(newContext.databaseAccount.id, "true");
|
||||||
traceOpen(Action.OpenCarousel);
|
traceOpen(Action.OpenCarousel);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
Object.assign(userContext, newContext);
|
Object.assign(userContext, newContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -111,25 +128,31 @@ function apiType(account: DatabaseAccount | undefined): ApiType {
|
|||||||
if (!account) {
|
if (!account) {
|
||||||
return "SQL";
|
return "SQL";
|
||||||
}
|
}
|
||||||
const capabilities = account.properties?.capabilities;
|
|
||||||
if (capabilities) {
|
return "Postgres";
|
||||||
if (capabilities.find((c) => c.name === "EnableCassandra")) {
|
|
||||||
return "Cassandra";
|
// const capabilities = account.properties?.capabilities;
|
||||||
}
|
// if (capabilities) {
|
||||||
if (capabilities.find((c) => c.name === "EnableGremlin")) {
|
// if (capabilities.find((c) => c.name === "EnableCassandra")) {
|
||||||
return "Gremlin";
|
// return "Cassandra";
|
||||||
}
|
// }
|
||||||
if (capabilities.find((c) => c.name === "EnableMongo")) {
|
// if (capabilities.find((c) => c.name === "EnableGremlin")) {
|
||||||
return "Mongo";
|
// return "Gremlin";
|
||||||
}
|
// }
|
||||||
if (capabilities.find((c) => c.name === "EnableTable")) {
|
// if (capabilities.find((c) => c.name === "EnableMongo")) {
|
||||||
return "Tables";
|
// return "Mongo";
|
||||||
}
|
// }
|
||||||
}
|
// if (capabilities.find((c) => c.name === "EnableTable")) {
|
||||||
if (account.kind === "MongoDB" || account.kind === "Parse") {
|
// return "Tables";
|
||||||
return "Mongo";
|
// }
|
||||||
}
|
// }
|
||||||
return "SQL";
|
// if (account.kind === "MongoDB" || account.kind === "Parse") {
|
||||||
|
// return "Mongo";
|
||||||
|
// }
|
||||||
|
// if (account.kind === "Postgres") {
|
||||||
|
// return "Postgres";
|
||||||
|
// }
|
||||||
|
// return "SQL";
|
||||||
}
|
}
|
||||||
|
|
||||||
export { userContext, updateUserContext };
|
export { userContext, updateUserContext };
|
||||||
|
|||||||
@@ -17,6 +17,8 @@ export const getCollectionName = (isPlural?: boolean): string => {
|
|||||||
case "Gremlin":
|
case "Gremlin":
|
||||||
collectionName = "Graph";
|
collectionName = "Graph";
|
||||||
break;
|
break;
|
||||||
|
case "Postgres":
|
||||||
|
return "";
|
||||||
default:
|
default:
|
||||||
unknownApiType = userContext.apiType;
|
unknownApiType = userContext.apiType;
|
||||||
throw new Error(`Unknown API type: ${unknownApiType}`);
|
throw new Error(`Unknown API type: ${unknownApiType}`);
|
||||||
@@ -55,3 +57,20 @@ export const getUploadName = (): string => {
|
|||||||
return "Items";
|
return "Items";
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getApiShortDisplayName = (): string => {
|
||||||
|
switch (userContext.apiType) {
|
||||||
|
case "Cassandra":
|
||||||
|
return "Apache Cassandra API";
|
||||||
|
case "Gremlin":
|
||||||
|
return "Apache Gremlin API";
|
||||||
|
case "Mongo":
|
||||||
|
return "MongoDB API";
|
||||||
|
case "Postgres":
|
||||||
|
return "PostgreSQL API";
|
||||||
|
case "SQL":
|
||||||
|
return "NoSQL API";
|
||||||
|
case "Tables":
|
||||||
|
return "Table API";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|||||||
@@ -50,6 +50,7 @@ export const allowedBackendEndpoints: ReadonlyArray<string> = [
|
|||||||
"https://main.documentdb.ext.azure.com",
|
"https://main.documentdb.ext.azure.com",
|
||||||
"https://main.documentdb.ext.azure.cn",
|
"https://main.documentdb.ext.azure.cn",
|
||||||
"https://main.documentdb.ext.azure.us",
|
"https://main.documentdb.ext.azure.us",
|
||||||
|
"https://main.cosmos.ext.azure",
|
||||||
"https://localhost:12901",
|
"https://localhost:12901",
|
||||||
"https://localhost:1234",
|
"https://localhost:1234",
|
||||||
];
|
];
|
||||||
@@ -58,6 +59,7 @@ export const allowedMongoProxyEndpoints: ReadonlyArray<string> = [
|
|||||||
"https://main.documentdb.ext.azure.com",
|
"https://main.documentdb.ext.azure.com",
|
||||||
"https://main.documentdb.ext.azure.cn",
|
"https://main.documentdb.ext.azure.cn",
|
||||||
"https://main.documentdb.ext.azure.us",
|
"https://main.documentdb.ext.azure.us",
|
||||||
|
"https://main.cosmos.ext.azure",
|
||||||
"https://localhost:12901",
|
"https://localhost:12901",
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useTabs } from "hooks/useTabs";
|
import { ReactTabKind, useTabs } from "hooks/useTabs";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { applyExplorerBindings } from "../applyExplorerBindings";
|
import { applyExplorerBindings } from "../applyExplorerBindings";
|
||||||
import { AuthType } from "../AuthType";
|
import { AuthType } from "../AuthType";
|
||||||
@@ -28,7 +28,7 @@ import {
|
|||||||
} from "../Platform/Hosted/HostedUtils";
|
} from "../Platform/Hosted/HostedUtils";
|
||||||
import { CollectionCreation } from "../Shared/Constants";
|
import { CollectionCreation } from "../Shared/Constants";
|
||||||
import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
|
import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
|
||||||
import { PortalEnv, updateUserContext, userContext } from "../UserContext";
|
import { Node, PortalEnv, updateUserContext, userContext } from "../UserContext";
|
||||||
import { listKeys } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
|
import { listKeys } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
|
||||||
import { DatabaseAccountListKeysResult } from "../Utils/arm/generatedClients/cosmos/types";
|
import { DatabaseAccountListKeysResult } from "../Utils/arm/generatedClients/cosmos/types";
|
||||||
import { getMsalInstance } from "../Utils/AuthorizationUtils";
|
import { getMsalInstance } from "../Utils/AuthorizationUtils";
|
||||||
@@ -100,8 +100,12 @@ async function configureHosted(): Promise<Explorer> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (event.data?.type === MessageTypes.CloseTab) {
|
if (event.data?.type === MessageTypes.CloseTab) {
|
||||||
|
if (event.data?.data?.tabId === "QuickstartPSQLShell") {
|
||||||
|
useTabs.getState().closeReactTab(ReactTabKind.Quickstart);
|
||||||
|
} else {
|
||||||
useTabs.getState().closeTabsByComparator((tab) => tab.tabId === event.data?.data?.tabId);
|
useTabs.getState().closeTabsByComparator((tab) => tab.tabId === event.data?.data?.tabId);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
@@ -290,8 +294,12 @@ async function configurePortal(): Promise<Explorer> {
|
|||||||
} else if (shouldForwardMessage(message, event.origin)) {
|
} else if (shouldForwardMessage(message, event.origin)) {
|
||||||
sendMessage(message);
|
sendMessage(message);
|
||||||
} else if (event.data?.type === MessageTypes.CloseTab) {
|
} else if (event.data?.type === MessageTypes.CloseTab) {
|
||||||
|
if (event.data?.data?.tabId === "QuickstartPSQLShell") {
|
||||||
|
useTabs.getState().closeReactTab(ReactTabKind.Quickstart);
|
||||||
|
} else {
|
||||||
useTabs.getState().closeTabsByComparator((tab) => tab.tabId === event.data?.data?.tabId);
|
useTabs.getState().closeTabsByComparator((tab) => tab.tabId === event.data?.data?.tabId);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
@@ -354,9 +362,29 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
|
|||||||
collectionCreationDefaults: inputs.defaultCollectionThroughput,
|
collectionCreationDefaults: inputs.defaultCollectionThroughput,
|
||||||
isTryCosmosDBSubscription: inputs.isTryCosmosDBSubscription,
|
isTryCosmosDBSubscription: inputs.isTryCosmosDBSubscription,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (inputs.isPostgresAccount) {
|
||||||
|
updateUserContext({ apiType: "Postgres" });
|
||||||
|
|
||||||
|
if (inputs.connectionStringParams) {
|
||||||
|
// TODO: Remove after the nodes param has been updated to be a flat array in the OSS extension
|
||||||
|
let flattenedNodesArray: Node[] = [];
|
||||||
|
inputs.connectionStringParams.nodes?.forEach((node: Node | Node[]) => {
|
||||||
|
if (Array.isArray(node)) {
|
||||||
|
flattenedNodesArray = [...flattenedNodesArray, ...node];
|
||||||
|
} else {
|
||||||
|
flattenedNodesArray.push(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
inputs.connectionStringParams.nodes = flattenedNodesArray;
|
||||||
|
updateUserContext({ postgresConnectionStrParams: inputs.connectionStringParams });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (inputs.features) {
|
if (inputs.features) {
|
||||||
Object.assign(userContext.features, extractFeatures(new URLSearchParams(inputs.features)));
|
Object.assign(userContext.features, extractFeatures(new URLSearchParams(inputs.features)));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (inputs.flights) {
|
if (inputs.flights) {
|
||||||
if (inputs.flights.indexOf(Flights.AutoscaleTest) !== -1) {
|
if (inputs.flights.indexOf(Flights.AutoscaleTest) !== -1) {
|
||||||
userContext.features.autoscaleDefault;
|
userContext.features.autoscaleDefault;
|
||||||
|
|||||||
15
src/hooks/usePostgres.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import create, { UseStore } from "zustand";
|
||||||
|
|
||||||
|
interface TeachingBubbleState {
|
||||||
|
showPostgreTeachingBubble: boolean;
|
||||||
|
showResetPasswordBubble: boolean;
|
||||||
|
setShowPostgreTeachingBubble: (showPostgreTeachingBubble: boolean) => void;
|
||||||
|
setShowResetPasswordBubble: (showResetPasswordBubble: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const usePostgres: UseStore<TeachingBubbleState> = create((set) => ({
|
||||||
|
showPostgreTeachingBubble: false,
|
||||||
|
showResetPasswordBubble: false,
|
||||||
|
setShowPostgreTeachingBubble: (showPostgreTeachingBubble: boolean) => set({ showPostgreTeachingBubble }),
|
||||||
|
setShowResetPasswordBubble: (showResetPasswordBubble: boolean) => set({ showResetPasswordBubble }),
|
||||||
|
}));
|
||||||
@@ -6,37 +6,44 @@ import TabsBase from "../Explorer/Tabs/TabsBase";
|
|||||||
|
|
||||||
interface TabsState {
|
interface TabsState {
|
||||||
openedTabs: TabsBase[];
|
openedTabs: TabsBase[];
|
||||||
activeTab: TabsBase;
|
openedReactTabs: ReactTabKind[];
|
||||||
isConnectTabOpen: boolean;
|
activeTab: TabsBase | undefined;
|
||||||
isConnectTabActive: boolean;
|
activeReactTab: ReactTabKind | undefined;
|
||||||
activateTab: (tab: TabsBase) => void;
|
activateTab: (tab: TabsBase) => void;
|
||||||
activateNewTab: (tab: TabsBase) => void;
|
activateNewTab: (tab: TabsBase) => void;
|
||||||
|
activateReactTab: (tabkind: ReactTabKind) => void;
|
||||||
updateTab: (tab: TabsBase) => void;
|
updateTab: (tab: TabsBase) => void;
|
||||||
getTabs: (tabKind: ViewModels.CollectionTabKind, comparator?: (tab: TabsBase) => boolean) => TabsBase[];
|
getTabs: (tabKind: ViewModels.CollectionTabKind, comparator?: (tab: TabsBase) => boolean) => TabsBase[];
|
||||||
refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void;
|
refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void;
|
||||||
closeTabsByComparator: (comparator: (tab: TabsBase) => boolean) => void;
|
closeTabsByComparator: (comparator: (tab: TabsBase) => boolean) => void;
|
||||||
closeTab: (tab: TabsBase) => void;
|
closeTab: (tab: TabsBase) => void;
|
||||||
closeAllNotebookTabs: (hardClose: boolean) => void;
|
closeAllNotebookTabs: (hardClose: boolean) => void;
|
||||||
activateConnectTab: () => void;
|
openAndActivateReactTab: (tabKind: ReactTabKind) => void;
|
||||||
openAndActivateConnectTab: () => void;
|
closeReactTab: (tabKind: ReactTabKind) => void;
|
||||||
closeConnectTab: () => void;
|
}
|
||||||
|
|
||||||
|
export enum ReactTabKind {
|
||||||
|
Connect,
|
||||||
|
Home,
|
||||||
|
Quickstart,
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useTabs: UseStore<TabsState> = create((set, get) => ({
|
export const useTabs: UseStore<TabsState> = create((set, get) => ({
|
||||||
openedTabs: [],
|
openedTabs: [],
|
||||||
|
openedReactTabs: [ReactTabKind.Home],
|
||||||
activeTab: undefined,
|
activeTab: undefined,
|
||||||
isConnectTabOpen: false,
|
activeReactTab: ReactTabKind.Home,
|
||||||
isConnectTabActive: false,
|
|
||||||
activateTab: (tab: TabsBase): void => {
|
activateTab: (tab: TabsBase): void => {
|
||||||
if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
|
if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
|
||||||
set({ activeTab: tab, isConnectTabActive: false });
|
set({ activeTab: tab, activeReactTab: undefined });
|
||||||
tab.onActivate();
|
tab.onActivate();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
activateNewTab: (tab: TabsBase): void => {
|
activateNewTab: (tab: TabsBase): void => {
|
||||||
set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab, isConnectTabActive: false }));
|
set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab, activeReactTab: undefined }));
|
||||||
tab.onActivate();
|
tab.onActivate();
|
||||||
},
|
},
|
||||||
|
activateReactTab: (tabKind: ReactTabKind): void => set({ activeTab: undefined, activeReactTab: tabKind }),
|
||||||
updateTab: (tab: TabsBase) => {
|
updateTab: (tab: TabsBase) => {
|
||||||
if (get().activeTab?.tabId === tab.tabId) {
|
if (get().activeTab?.tabId === tab.tabId) {
|
||||||
set({ activeTab: tab });
|
set({ activeTab: tab });
|
||||||
@@ -73,7 +80,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
|
|||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
if (updatedTabs.length === 0) {
|
if (updatedTabs.length === 0) {
|
||||||
set({ activeTab: undefined, isConnectTabActive: get().isConnectTabOpen });
|
set({ activeTab: undefined, activeReactTab: ReactTabKind.Home });
|
||||||
}
|
}
|
||||||
|
|
||||||
if (tab.tabId === activeTab.tabId && tabIndex !== -1) {
|
if (tab.tabId === activeTab.tabId && tabIndex !== -1) {
|
||||||
@@ -111,21 +118,28 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (get().openedTabs.length === 0) {
|
if (get().openedTabs.length === 0) {
|
||||||
set({ activeTab: undefined, isConnectTabActive: get().isConnectTabOpen });
|
set({ activeTab: undefined, activeReactTab: ReactTabKind.Home });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
activateConnectTab: () => {
|
openAndActivateReactTab: (tabKind: ReactTabKind) => {
|
||||||
if (get().isConnectTabOpen) {
|
if (get().openedReactTabs.indexOf(tabKind) === -1) {
|
||||||
set({ isConnectTabActive: true, activeTab: undefined });
|
set((state) => ({
|
||||||
|
openedReactTabs: [...state.openedReactTabs, tabKind],
|
||||||
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
set({ activeTab: undefined, activeReactTab: tabKind });
|
||||||
},
|
},
|
||||||
openAndActivateConnectTab: () => set({ isConnectTabActive: true, isConnectTabOpen: true, activeTab: undefined }),
|
closeReactTab: (tabKind: ReactTabKind) => {
|
||||||
closeConnectTab: () => {
|
const { activeReactTab, openedTabs, openedReactTabs } = get();
|
||||||
const { isConnectTabActive, openedTabs } = get();
|
const updatedOpenedReactTabs = openedReactTabs.filter((tab: ReactTabKind) => tabKind !== tab);
|
||||||
if (isConnectTabActive && openedTabs?.length > 0) {
|
if (activeReactTab === tabKind) {
|
||||||
set({ activeTab: openedTabs[0] });
|
openedTabs?.length > 0
|
||||||
|
? set({ activeTab: openedTabs[0], activeReactTab: undefined })
|
||||||
|
: set({ activeTab: undefined, activeReactTab: updatedOpenedReactTabs[0] });
|
||||||
}
|
}
|
||||||
set({ isConnectTabActive: false, isConnectTabOpen: false });
|
|
||||||
|
set({ openedReactTabs: updatedOpenedReactTabs });
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|||||||
26
src/hooks/useTerminal.ts
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import postRobot from "post-robot";
|
||||||
|
import create, { UseStore } from "zustand";
|
||||||
|
|
||||||
|
interface TerminalState {
|
||||||
|
terminalWindow: Window;
|
||||||
|
setTerminal: (terminalWindow: Window) => void;
|
||||||
|
sendMessage: (message: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useTerminal: UseStore<TerminalState> = create((set, get) => ({
|
||||||
|
terminalWindow: undefined,
|
||||||
|
setTerminal: (terminalWindow: Window) => {
|
||||||
|
set({ terminalWindow });
|
||||||
|
},
|
||||||
|
sendMessage: (message: string) => {
|
||||||
|
const terminalWindow = get().terminalWindow;
|
||||||
|
postRobot.send(
|
||||||
|
terminalWindow,
|
||||||
|
"sendMessage",
|
||||||
|
{ type: "stdin", content: [message] },
|
||||||
|
{
|
||||||
|
domain: window.location.origin,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
}));
|
||||||