Skip to content

Commit

Permalink
Da 321 add tooltips for cli tools (#322)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lokesh-couchbase
lokesh-couchbase authored Oct 31, 2023
1 parent 7cdffdc commit 329d95e
Show file tree
Hide file tree
Showing 6 changed files with 222 additions and 34 deletions.
2 changes: 1 addition & 1 deletion src/webViews/clusterOverview.webview.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { IClusterOverview } from "../types/IClusterOverview";
export function getClusterOverview(overview: IClusterOverview): string {
return `
return /*HTML*/`
<!DOCTYPE html>
<html lang="en">
<head>
Expand Down
2 changes: 1 addition & 1 deletion src/webViews/connectionScreen.webview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/

export const getClusterConnectingFormView = (message: any) => {
return `
return /*HTML*/`
<!DOCTYPE html>
<html>
<head>
Expand Down
71 changes: 61 additions & 10 deletions src/webViews/tools/dataExport.webview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,14 +194,44 @@ export const dataExportWebview = async (buckets: string[]): Promise<string> => {
transition: transform 0.2s;
margin-right:5px;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 400px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 10px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -40px;
opacity: 0;
transition: opacity 0s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<h1 class="heading">Export Data</h1>
<form action="#" method="post" id="dataExportForm">
<label for="bucket">Bucket:</label>
<h4 >Before proceeding do checkout <a href="https://docs.couchbase.com/server/current/tools/cbexport.html">Couchbase docs</a> for CB Export</h4>
<label for="bucket" class="tooltip">Bucket:
<span class="tooltiptext">Select the top level bucket on which export should happen. Only 1 bucket can be exported at a time</span>
</label>
<select name="bucket" id="bucket" onchange="onBucketClick(value)">
<option value="" disabled selected>Select a bucket</option>
${buckets.map((bucketName)=>{
Expand All @@ -212,34 +242,48 @@ export const dataExportWebview = async (buckets: string[]): Promise<string> => {
</select>
<br>
<label for="scopes">Scopes:</label>
<label for="scopes" class="tooltip">Scopes:
<span class="tooltiptext">Select the scopes that should be exported, you can also select all scopes which will override any other selection.</span>
</label>
<select name="scopes" id="scopes" multiple class="js-select2" disabled onchange="onScopeClick(options)" width="100%"></select>
<br>
<label for="collections">Collections:</label>
<label for="collections" class="tooltip">Collections:
<span class="tooltiptext">The collections that you would like to include. You can select <strong>All</strong> or more than one option.</span>
</label>
<select name="collections" id="collections" multiple class="js-select2" disabled width="100%"></select>
<br>
<label for="documentsKeyField">Document's Key Field:</label>
<label for="documentsKeyField" class="tooltip">Document's Key Field:
<span class="tooltiptext">In Couchbase, the document's key is not part of the body of the document. But when you are exporting the dataset, it is recommended to also include the original keys. This property defines the name of the attribute in the final exported file that will contain the document's key.</span>
</label>
<input type="text" name="documentsKeyField" id="documentsKeyField" value="cbmid">
<br>
<label for="scopeFieldName">Scope Field Name:</label>
<label for="scopeFieldName" class="tooltip">Scope Field Name:
<span class="tooltiptext">This filed will be used to store the name of the scope the document came from. It will be created on each JSON document.</span>
</label>
<input type="text" name="scopeFieldName" id="scopeFieldName" value="cbms">
<br>
<label for="collectionFieldName">Collection Field Name:</label>
<label for="collectionFieldName" class="tooltip">Collection Field Name:
<span class="tooltiptext">This filed will be used to store the name of the collection the document came from. It will be created on each JSON document.</span>
</label>
<input type="text" name="collectionFieldName" id="collectionFieldName" value="cbmc">
<br>
<label for="format">Format:</label>
<label for="format" class="tooltip">Format:
<span class="tooltiptext">The format of the dataset specified (lines or list). See the <a href='https://docs.couchbase.com/server/current/tools/cbexport-json.html#dataset-formats'>DATASET FORMATS</a> section for more details on the formats supported.</span>
</label>
<select name="format" id="format">
<option value="list">JSON Array</option>
<option value="lines">JSON Lines</option>
</select>
<br>
<label for="fileDestination">File Destination Folder:</label>
<label for="fileDestination" class="tooltip">File Destination Folder:
<span class="tooltiptext">Folder where the exported file will be stored</span>
</label>
<div class="folder-container">
<div class="folder-destination redButton" id="folderDestination" onclick="getFolder()">Choose</div>
<input type="text" id="selectedFolder" name="selectedFolder" readonly>
Expand All @@ -252,11 +296,18 @@ export const dataExportWebview = async (buckets: string[]): Promise<string> => {
Advanced Settings
</div>
<div class="advanced-settings" id="advanced-settings">
<label for="threads">Threads</label>
<label for="threads" class="tooltip">Threads:
<span class="tooltiptext">Specifies the number of concurrent clients to use when exporting data.
Fewer clients means exports will take longer, but there will be less cluster resources used to complete the export.
More clients means faster exports, but at the cost of more cluster resource usage.
</span>
</label>
<input type="number" name="threads" id="threads" value="4">
<br>
<div class="verboseLogContainer">
<label for="verboseLog" id="verboseLogLabel">Verbose Log:</label>
<label for="verboseLog" id="verboseLogLabel" class="tooltip">Verbose Log:
<span class="tooltiptext">Specifies that detailed logging should be sent to stdout</span>
</label>
<input type="checkbox" name="verboseLog" id="verboseLog">
</div>
</div>
Expand Down
69 changes: 62 additions & 7 deletions src/webViews/tools/dataImport/getDatasetAndCollection.webview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,17 +121,48 @@ export const getDatasetAndCollection = async (
.redButton:hover {
background: #bb1117;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 400px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 10px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -40px;
opacity: 0;
transition: opacity 0s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<h1 class="heading">Import Data</h1>
<form action="#" method="post" id="dataImportForm">
<h4 >Before proceeding do checkout <a href="https://docs.couchbase.com/server/current/tools/cbimport.html">Couchbase docs</a> for CB Import</h4>
<div class="separator-container">
<span class="separator-text">Dataset</span>
<div class="separator"></div>
</div>
<label for="dataset-destination">Select the Dataset (CSV or JSON format):</label>
<label for="dataset-destination" class="tooltip">Select the Dataset (CSV or JSON format):
<span class="tooltiptext">Select the file containing the data to import. The file must be in either JSON or CSV format.</span>
</label>
<div class="dataset-container">
<div class="dataset-destination redButton" id="datasetDestination" onclick="getDatasetFile()">Choose</div>
<input type="text" id="selectedFile" name="selectedFile" readonly>
Expand All @@ -143,7 +174,9 @@ export const getDatasetAndCollection = async (
<div class="separator"></div>
</div>
<label for="bucket">Bucket:</label>
<label for="bucket" class="tooltip">Bucket:
<span class="tooltiptext">Select the bucket where you want to import the data.</span>
</label>
<select name="bucket" id="bucket" onchange="onBucketClick(value)">
${buckets.map((bucketName, index) => {
return `
Expand All @@ -155,7 +188,9 @@ export const getDatasetAndCollection = async (
</select>
<br>
<label for="scopesAndCollections">Scopes And Collections:</label>
<label for="scopesAndCollections" class="tooltip">Scopes And Collections:
<span class="tooltiptext">Select the scope and collection where you want to import the data. You can choose to import into the default scope and collection, a specific collection, or dynamically determine the scope and collection based on the data.</span>
</label>
<select name="scopesAndCollections" id="scopesAndCollections" onchange="onScopeAndCollectionsClick(value)" width="100%">
<option value="defaultCollection" selected>Default scope and collection</option>
<option value="SpecifiedCollection">Choose a specified collection </option>
Expand All @@ -165,22 +200,42 @@ export const getDatasetAndCollection = async (
<!-- If person wants to choose simple scope and collection dropdown picker -->
<div id="specifiedCollectionContainer" hidden>
<label for="scopesDropdown">Scope:</label>
<label for="scopesDropdown" class="tooltip">Scope:
<span class="tooltiptext">Select the scope where you want to import the data.</span>
</label>
<select name="scopesDropdown" id="scopesDropdown" onchange="onScopesDropdownClick(value, selectedIndex)" width="100%"></select>
<br>
<label for="collectionsDropdown">Collection:</label>
<label for="collectionsDropdown" class="tooltip">Collection:
<span class="tooltiptext">Select the collection where you want to import the data.</span>
</label>
<select name="collectionsDropdown" id="collectionsDropdown" width="100%"></select>
<br>
</div>
<!-- Dynamic Scopes and Collections -->
<div id="dynamicCollectionContainer" hidden>
<label for="scopesDynamicField">Scope Field:</label>
<label for="scopesDynamicField" class="tooltip">Scope Field:
<span class="tooltiptext">Specify the field in the data that contains the scope name.<br>
To use information from the JSON document, specify the column name between % characters.
For example, --scope-collection-exp %scope_field%.%collection_field%.
Fields that contain a % character may be escaped using %%.<br>
For more information about the accepted format, see the
<a href="https://docs.couchbase.com/server/current/tools/cbimport-json.html#scopecollection-parser">SCOPE/COLLECTION PARSER</a> section
</span>
</label>
<input type="text" name="scopesDynamicField" id="scopesDynamicField" value="" placeholder="%cbms%">
<br>
<label for="collectionsDynamicField">Collection Field:</label>
<label for="collectionsDynamicField" class="tooltip">Collection Field:
<span class="tooltiptext">Specify the field in the data that contains the collection name.<br>
To use information from the JSON document, specify the column name between % characters.
For example, --scope-collection-exp %scope_field%.%collection_field%.
Fields that contain a % character may be escaped using %%.<br>
For more information about the accepted format, see the
<a href="https://docs.couchbase.com/server/current/tools/cbimport-json.html#scopecollection-parser">SCOPE/COLLECTION PARSER</a> section
</span>
</label>
<input type="text" name="collectionsDynamicField" id="collectionsDynamicField" value="" placeholder="%cbmc%">
<br>
</div>
Expand Down
Loading

0 comments on commit 329d95e

Please sign in to comment.