mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-23 10:51:30 +00:00
Compare commits
2 Commits
iframe-htm
...
fail-safe-
| Author | SHA1 | Date | |
|---|---|---|---|
|
26210bcdc5 | ||
|
d62134d228 |
@@ -11,9 +11,15 @@ src/Common/CosmosClient.test.ts
|
||||
src/Common/CosmosClient.ts
|
||||
src/Common/DataAccessUtilityBase.test.ts
|
||||
src/Common/DataAccessUtilityBase.ts
|
||||
src/Common/DeleteFeedback.ts
|
||||
src/Common/DocumentClientUtilityBase.ts
|
||||
src/Common/EditableUtility.ts
|
||||
src/Common/HashMap.test.ts
|
||||
src/Common/HashMap.ts
|
||||
src/Common/HeadersUtility.test.ts
|
||||
src/Common/HeadersUtility.ts
|
||||
src/Common/IteratorUtilities.test.ts
|
||||
src/Common/IteratorUtilities.ts
|
||||
src/Common/Logger.test.ts
|
||||
src/Common/MessageHandler.test.ts
|
||||
src/Common/MessageHandler.ts
|
||||
@@ -24,6 +30,8 @@ src/Common/ObjectCache.test.ts
|
||||
src/Common/ObjectCache.ts
|
||||
src/Common/QueriesClient.ts
|
||||
src/Common/Splitter.ts
|
||||
src/Common/ThemeUtility.ts
|
||||
src/Common/UrlUtility.ts
|
||||
src/Config.ts
|
||||
src/Contracts/ActionContracts.ts
|
||||
src/Contracts/DataModels.ts
|
||||
@@ -50,6 +58,8 @@ src/Explorer/ComponentRegisterer.test.ts
|
||||
src/Explorer/ComponentRegisterer.ts
|
||||
src/Explorer/ContextMenuButtonFactory.ts
|
||||
src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
|
||||
src/Explorer/Controls/CommandButton/CommandButton.test.ts
|
||||
src/Explorer/Controls/CommandButton/CommandButton.ts
|
||||
src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
|
||||
src/Explorer/Controls/DynamicList/DynamicList.test.ts
|
||||
src/Explorer/Controls/DynamicList/DynamicListComponent.ts
|
||||
@@ -85,6 +95,8 @@ src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
|
||||
src/Explorer/Graph/GraphExplorerComponent/EdgeInfoCache.ts
|
||||
src/Explorer/Graph/GraphExplorerComponent/GraphData.test.ts
|
||||
src/Explorer/Graph/GraphExplorerComponent/GraphData.ts
|
||||
src/Explorer/Graph/GraphExplorerComponent/GraphUtil.test.ts
|
||||
src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
|
||||
src/Explorer/Graph/GraphExplorerComponent/GremlinClient.test.ts
|
||||
src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts
|
||||
src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.test.ts
|
||||
@@ -97,6 +109,8 @@ src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
|
||||
src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
|
||||
src/Explorer/Menus/ContextMenu.ts
|
||||
src/Explorer/MostRecentActivity/MostRecentActivity.ts
|
||||
src/Explorer/Notebook/FileSystemUtil.ts
|
||||
src/Explorer/Notebook/NTeractUtil.ts
|
||||
src/Explorer/Notebook/NotebookClientV2.ts
|
||||
src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
|
||||
src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
|
||||
@@ -125,12 +139,15 @@ src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
|
||||
src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
|
||||
src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
|
||||
src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
|
||||
src/Explorer/Panes/ExecuteSprocParamsPane.ts
|
||||
src/Explorer/Panes/GraphStylingPane.ts
|
||||
src/Explorer/Panes/LoadQueryPane.ts
|
||||
src/Explorer/Panes/NewVertexPane.ts
|
||||
src/Explorer/Panes/PaneComponents.ts
|
||||
src/Explorer/Panes/RenewAdHocAccessPane.ts
|
||||
src/Explorer/Panes/SaveQueryPane.ts
|
||||
src/Explorer/Panes/SettingsPane.test.ts
|
||||
src/Explorer/Panes/SettingsPane.ts
|
||||
src/Explorer/Panes/SetupNotebooksPane.ts
|
||||
src/Explorer/Panes/StringInputPane.ts
|
||||
src/Explorer/Panes/SwitchDirectoryPane.ts
|
||||
@@ -143,6 +160,8 @@ src/Explorer/Panes/Tables/TableEntityPane.ts
|
||||
src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
|
||||
src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
|
||||
src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
|
||||
src/Explorer/Panes/UploadFilePane.ts
|
||||
src/Explorer/Panes/UploadItemsPane.ts
|
||||
src/Explorer/SplashScreen/SplashScreen.test.ts
|
||||
src/Explorer/Tables/Constants.ts
|
||||
src/Explorer/Tables/DataTable/CacheBase.ts
|
||||
@@ -151,6 +170,7 @@ src/Explorer/Tables/DataTable/DataTableBuilder.ts
|
||||
src/Explorer/Tables/DataTable/DataTableContextMenu.ts
|
||||
src/Explorer/Tables/DataTable/DataTableOperationManager.ts
|
||||
src/Explorer/Tables/DataTable/DataTableOperations.ts
|
||||
src/Explorer/Tables/DataTable/DataTableUtilities.ts
|
||||
src/Explorer/Tables/DataTable/DataTableViewModel.ts
|
||||
src/Explorer/Tables/DataTable/TableCommands.ts
|
||||
src/Explorer/Tables/DataTable/TableEntityCache.ts
|
||||
@@ -159,6 +179,8 @@ src/Explorer/Tables/Entities.ts
|
||||
src/Explorer/Tables/QueryBuilder/ClauseGroup.ts
|
||||
src/Explorer/Tables/QueryBuilder/ClauseGroupViewModel.ts
|
||||
src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts
|
||||
src/Explorer/Tables/QueryBuilder/DateTimeUtilities.test.ts
|
||||
src/Explorer/Tables/QueryBuilder/DateTimeUtilities.ts
|
||||
src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
|
||||
src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts
|
||||
src/Explorer/Tables/QueryBuilder/QueryViewModel.ts
|
||||
@@ -241,6 +263,8 @@ src/Shared/ExplorerSettings.ts
|
||||
src/Shared/PriceEstimateCalculator.ts
|
||||
src/Shared/StorageUtility.test.ts
|
||||
src/Shared/StorageUtility.ts
|
||||
src/Shared/StringUtility.test.ts
|
||||
src/Shared/StringUtility.ts
|
||||
src/Shared/appInsights.ts
|
||||
src/SparkClusterManager/ArcadiaResourceManager.ts
|
||||
src/SparkClusterManager/SparkClusterManager.ts
|
||||
@@ -249,11 +273,25 @@ src/Terminal/NotebookAppContracts.d.ts
|
||||
src/Terminal/index.ts
|
||||
src/TokenProviders/PortalTokenProvider.ts
|
||||
src/TokenProviders/TokenProviderFactory.ts
|
||||
src/Utils/AuthorizationUtils.test.ts
|
||||
src/Utils/AuthorizationUtils.ts
|
||||
src/Utils/AutoPilotUtils.test.ts
|
||||
src/Utils/AutoPilotUtils.ts
|
||||
src/Utils/DatabaseAccountUtils.test.ts
|
||||
src/Utils/DatabaseAccountUtils.ts
|
||||
src/Utils/JunoUtils.ts
|
||||
src/Utils/MessageValidation.ts
|
||||
src/Utils/NotebookConfigurationUtils.ts
|
||||
src/Utils/PricingUtils.test.ts
|
||||
src/Utils/QueryUtils.test.ts
|
||||
src/Utils/QueryUtils.ts
|
||||
src/Utils/StringUtils.test.ts
|
||||
src/Utils/StringUtils.ts
|
||||
src/applyExplorerBindings.ts
|
||||
src/global.d.ts
|
||||
src/quickstart.ts
|
||||
src/setupTests.ts
|
||||
src/workers/upload/definitions.ts
|
||||
src/workers/upload/index.ts
|
||||
src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx
|
||||
src/Explorer/Controls/Accordion/AccordionComponent.tsx
|
||||
@@ -300,7 +338,15 @@ src/Explorer/Graph/GraphExplorerComponent/QueryContainerComponent.tsx
|
||||
src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx
|
||||
src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx
|
||||
src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
|
||||
src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
|
||||
src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx
|
||||
src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
|
||||
src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx
|
||||
src/Explorer/Menus/NavBar/ControlBarComponent.tsx
|
||||
src/Explorer/Menus/NavBar/ControlBarComponentAdapter.tsx
|
||||
src/Explorer/Menus/NavBar/MeControlComponent.test.tsx
|
||||
src/Explorer/Menus/NavBar/MeControlComponent.tsx
|
||||
src/Explorer/Menus/NavBar/MeControlComponentAdapter.tsx
|
||||
src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
|
||||
src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
|
||||
src/Explorer/Menus/NotificationConsole/NotificationConsoleComponentAdapter.tsx
|
||||
|
||||
9
.github/dependabot.yml
vendored
9
.github/dependabot.yml
vendored
@@ -1,9 +0,0 @@
|
||||
# Please see the documentation for all configuration options:
|
||||
# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
|
||||
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: "npm"
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: "daily"
|
||||
38
.github/workflows/ci.yml
vendored
38
.github/workflows/ci.yml
vendored
@@ -15,10 +15,10 @@ jobs:
|
||||
if: github.ref == 'refs/heads/master'
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Use Node.js 14.x
|
||||
- name: Use Node.js 12.x
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14.x
|
||||
node-version: 12.x
|
||||
- run: npm ci
|
||||
- run: node utils/codeMetrics.js
|
||||
env:
|
||||
@@ -28,10 +28,10 @@ jobs:
|
||||
name: "Compile TypeScript"
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Use Node.js 14.x
|
||||
- name: Use Node.js 12.x
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14.x
|
||||
node-version: 12.x
|
||||
- run: npm ci
|
||||
- run: npm run compile
|
||||
- run: npm run compile:strict
|
||||
@@ -40,10 +40,10 @@ jobs:
|
||||
name: "Check Format"
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Use Node.js 14.x
|
||||
- name: Use Node.js 12.x
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14.x
|
||||
node-version: 12.x
|
||||
- run: npm ci
|
||||
- run: npm run format:check
|
||||
lint:
|
||||
@@ -51,10 +51,10 @@ jobs:
|
||||
name: "Lint"
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Use Node.js 14.x
|
||||
- name: Use Node.js 12.x
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14.x
|
||||
node-version: 12.x
|
||||
- run: npm ci
|
||||
- run: npm run lint
|
||||
unittest:
|
||||
@@ -62,10 +62,10 @@ jobs:
|
||||
name: "Unit Tests"
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Use Node.js 14.x
|
||||
- name: Use Node.js 12.x
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14.x
|
||||
node-version: 12.x
|
||||
- run: npm ci
|
||||
- run: npm run test
|
||||
build:
|
||||
@@ -74,10 +74,10 @@ jobs:
|
||||
name: "Build"
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Use Node.js 14.x
|
||||
- name: Use Node.js 12.x
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14.x
|
||||
node-version: 12.x
|
||||
- run: npm ci
|
||||
- run: npm run build:contracts
|
||||
- name: Restore Build Cache
|
||||
@@ -94,14 +94,14 @@ jobs:
|
||||
path: dist/
|
||||
endtoendemulator:
|
||||
name: "End To End Emulator Tests"
|
||||
if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
|
||||
needs: [lint, format, compile, unittest]
|
||||
runs-on: windows-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Use Node.js 14.x
|
||||
- name: Use Node.js 12.x
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14.x
|
||||
node-version: 12.x
|
||||
- uses: southpolesteve/cosmos-emulator-github-action@v1
|
||||
- name: End to End Tests
|
||||
run: |
|
||||
@@ -125,10 +125,10 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- name: Use Node.js 14.x
|
||||
- name: Use Node.js 12.x
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 14.x
|
||||
node-version: 12.x
|
||||
- name: Accessibility Check
|
||||
run: |
|
||||
# Ubuntu gets mad when webpack runs too many files watchers
|
||||
@@ -163,11 +163,12 @@ jobs:
|
||||
TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
|
||||
DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
test-file:
|
||||
- ./test/cassandra/container.spec.ts
|
||||
- ./test/mongo/container.spec.ts
|
||||
- ./test/mongo/mongoIndexPolicy.spec.ts
|
||||
- ./test/mongo/openMongoAccount.spec.ts
|
||||
- ./test/notebooks/uploadAndOpenNotebook.spec.ts
|
||||
- ./test/selfServe/selfServeExample.spec.ts
|
||||
- ./test/sql/container.spec.ts
|
||||
@@ -193,6 +194,7 @@ jobs:
|
||||
path: failed-*
|
||||
cleanupaccounts:
|
||||
name: "Cleanup Test Database Accounts"
|
||||
needs: [lint, format, compile, unittest]
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
|
||||
|
||||
7
.vscode/settings.json
vendored
7
.vscode/settings.json
vendored
@@ -17,10 +17,5 @@
|
||||
"test/out/**": true,
|
||||
"workers/libs/**": true
|
||||
},
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"editor.formatOnSave": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true,
|
||||
"source.organizeImports": true
|
||||
}
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
@@ -18,6 +18,7 @@ Run `npm start` to start the development server and automatically rebuild on cha
|
||||
### Hosted Development (https://cosmos.azure.com)
|
||||
|
||||
- Visit: `https://localhost:1234/hostedExplorer.html`
|
||||
- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
|
||||
- The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
|
||||
|
||||
### Emulator Development
|
||||
@@ -68,7 +69,7 @@ Jest and Puppeteer are used for end to end browser based tests and are contained
|
||||
|
||||
We generally adhere to the release strategy [documented by the Azure SDK Guidelines](https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches). Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a `release/` or `hotfix/` branch. See linked documentation for more details.
|
||||
|
||||
### Architecture
|
||||
### Architechture
|
||||
|
||||
[](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)
|
||||
|
||||
|
||||
@@ -7,6 +7,5 @@ module.exports = {
|
||||
defaultViewport: null,
|
||||
ignoreHTTPSErrors: true,
|
||||
args: ["--disable-web-security"],
|
||||
exitOnPageError: false,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -21,13 +21,17 @@ module.exports = {
|
||||
collectCoverage: true,
|
||||
|
||||
// An array of glob patterns indicating a set of files for which coverage information should be collected
|
||||
collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
|
||||
// collectCoverageFrom: [
|
||||
// "src/Common/Headers*"
|
||||
// ],
|
||||
|
||||
// The directory where Jest should output its coverage files
|
||||
coverageDirectory: "coverage",
|
||||
|
||||
// An array of regexp pattern strings used to skip coverage collection
|
||||
coveragePathIgnorePatterns: ["/node_modules/"],
|
||||
// coveragePathIgnorePatterns: [
|
||||
// "/node_modules/"
|
||||
// ],
|
||||
|
||||
// A list of reporter names that Jest uses when writing coverage reports
|
||||
coverageReporters: ["json", "text", "cobertura"],
|
||||
@@ -35,10 +39,10 @@ module.exports = {
|
||||
// An object that configures minimum threshold enforcement for coverage results
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
branches: 25,
|
||||
functions: 25,
|
||||
lines: 30,
|
||||
statements: 30,
|
||||
branches: 22,
|
||||
functions: 28,
|
||||
lines: 33,
|
||||
statements: 31,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -67,8 +71,7 @@ module.exports = {
|
||||
|
||||
// A map from regular expressions to module names that allow to stub out resources with a single module
|
||||
moduleNameMapper: {
|
||||
"^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
|
||||
"@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
|
||||
"^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
|
||||
"worker-loader": "<rootDir>/mockModule",
|
||||
"office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
|
||||
"^dnd-core$": "dnd-core/dist/cjs",
|
||||
|
||||
@@ -718,7 +718,7 @@ execute-sproc-params-pane {
|
||||
}
|
||||
}
|
||||
|
||||
.stored-procedure-tab {
|
||||
stored-procedure-tab {
|
||||
@ToggleHeight: 30px;
|
||||
@ToggleWidth: 180px;
|
||||
|
||||
|
||||
29278
package-lock.json
generated
29278
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
31
package.json
31
package.json
@@ -43,9 +43,10 @@
|
||||
"@types/mkdirp": "1.0.1",
|
||||
"@types/node-fetch": "2.5.7",
|
||||
"@uifabric/react-cards": "0.109.110",
|
||||
"@uifabric/react-hooks": "7.14.0",
|
||||
"@uifabric/styling": "7.13.7",
|
||||
"abort-controller": "3.0.0",
|
||||
"applicationinsights": "1.8.0",
|
||||
"babel-polyfill": "6.26.0",
|
||||
"bootstrap": "3.4.1",
|
||||
"canvas": "file:./canvas",
|
||||
"clean-webpack-plugin": "0.1.19",
|
||||
@@ -59,6 +60,8 @@
|
||||
"date-fns": "1.29.0",
|
||||
"dayjs": "1.8.19",
|
||||
"dotenv": "8.2.0",
|
||||
"es6-object-assign": "1.1.0",
|
||||
"es6-symbol": "3.1.3",
|
||||
"eslint-plugin-jest": "23.13.2",
|
||||
"eslint-plugin-react": "7.20.0",
|
||||
"hasher": "1.2.0",
|
||||
@@ -74,11 +77,13 @@
|
||||
"knockout": "3.5.1",
|
||||
"mkdirp": "1.0.4",
|
||||
"monaco-editor": "0.18.1",
|
||||
"ms": "2.1.3",
|
||||
"msal": "1.4.4",
|
||||
"office-ui-fabric-react": "7.164.2",
|
||||
"object.entries": "1.1.0",
|
||||
"office-ui-fabric-react": "7.134.1",
|
||||
"p-retry": "4.2.0",
|
||||
"plotly.js-cartesian-dist-min": "1.52.3",
|
||||
"promise-polyfill": "8.1.0",
|
||||
"promise.prototype.finally": "3.1.0",
|
||||
"q": "1.5.1",
|
||||
"react": "16.13.1",
|
||||
"react-animate-height": "2.0.8",
|
||||
@@ -95,9 +100,13 @@
|
||||
"rxjs": "6.6.3",
|
||||
"styled-components": "4.3.2",
|
||||
"swr": "0.4.0",
|
||||
"terser-webpack-plugin": "3.1.0",
|
||||
"text-encoding": "0.7.0",
|
||||
"underscore": "1.9.1",
|
||||
"utility-types": "3.10.0"
|
||||
"url-polyfill": "1.1.7",
|
||||
"utility-types": "3.10.0",
|
||||
"webcrypto-liner": "1.1.4",
|
||||
"webfontloader": "1.6.28",
|
||||
"whatwg-fetch": "3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.9.0",
|
||||
@@ -111,15 +120,15 @@
|
||||
"@types/d3": "5.9.2",
|
||||
"@types/enzyme": "3.10.7",
|
||||
"@types/enzyme-adapter-react-16": "1.0.6",
|
||||
"@types/expect-puppeteer": "4.4.5",
|
||||
"@types/expect-puppeteer": "4.4.3",
|
||||
"@types/hasher": "0.0.31",
|
||||
"@types/jest": "26.0.20",
|
||||
"@types/jest-environment-puppeteer": "4.4.1",
|
||||
"@types/jest-environment-puppeteer": "4.3.2",
|
||||
"@types/memoize-one": "4.1.1",
|
||||
"@types/node": "12.11.1",
|
||||
"@types/promise.prototype.finally": "2.0.3",
|
||||
"@types/prop-types": "15.5.8",
|
||||
"@types/puppeteer": "5.4.3",
|
||||
"@types/puppeteer": "3.0.1",
|
||||
"@types/q": "1.5.1",
|
||||
"@types/react": "17.0.0",
|
||||
"@types/react-dom": "17.0.0",
|
||||
@@ -127,7 +136,9 @@
|
||||
"@types/react-redux": "7.1.7",
|
||||
"@types/sinon": "2.3.3",
|
||||
"@types/styled-components": "5.1.1",
|
||||
"@types/text-encoding": "0.0.33",
|
||||
"@types/underscore": "1.7.36",
|
||||
"@types/webfontloader": "1.6.29",
|
||||
"@typescript-eslint/eslint-plugin": "4.0.1",
|
||||
"@typescript-eslint/parser": "4.0.1",
|
||||
"axe-puppeteer": "1.1.0",
|
||||
@@ -152,6 +163,7 @@
|
||||
"html-loader": "0.5.5",
|
||||
"html-loader-jest": "0.2.1",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"inline-css": "2.2.5",
|
||||
"jest": "25.5.4",
|
||||
"jest-canvas-mock": "2.1.0",
|
||||
"jest-puppeteer": "4.4.0",
|
||||
@@ -163,11 +175,12 @@
|
||||
"monaco-editor-webpack-plugin": "1.7.0",
|
||||
"node-fetch": "2.6.1",
|
||||
"prettier": "2.2.1",
|
||||
"puppeteer": "8.0.0",
|
||||
"puppeteer": "4.0.0",
|
||||
"raw-loader": "0.5.1",
|
||||
"rimraf": "3.0.0",
|
||||
"sinon": "3.2.1",
|
||||
"style-loader": "0.23.0",
|
||||
"terser-webpack-plugin": "3.0.5",
|
||||
"ts-loader": "6.2.2",
|
||||
"tslint": "5.11.0",
|
||||
"tslint-microsoft-contrib": "6.0.0",
|
||||
|
||||
@@ -98,6 +98,30 @@ export class CapabilityNames {
|
||||
public static readonly EnableServerless: string = "EnableServerless";
|
||||
}
|
||||
|
||||
export class Features {
|
||||
public static readonly cosmosdb = "cosmosdb";
|
||||
public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
|
||||
public static readonly executeSproc = "dataexplorerexecutesproc";
|
||||
public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
|
||||
public static readonly enableTtl = "enablettl";
|
||||
public static readonly enableNotebooks = "enablenotebooks";
|
||||
public static readonly enableSpark = "enablespark";
|
||||
public static readonly livyEndpoint = "livyendpoint";
|
||||
public static readonly notebookServerUrl = "notebookserverurl";
|
||||
public static readonly notebookServerToken = "notebookservertoken";
|
||||
public static readonly notebookBasePath = "notebookbasepath";
|
||||
public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
|
||||
public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
|
||||
public static readonly ttl90Days = "ttl90days";
|
||||
public static readonly enableRightPanelV2 = "enablerightpanelv2";
|
||||
public static readonly enableSchema = "enableschema";
|
||||
public static readonly enableSDKoperations = "enablesdkoperations";
|
||||
public static readonly showMinRUSurvey = "showminrusurvey";
|
||||
public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
|
||||
public static readonly selfServeType = "selfservetype";
|
||||
public static readonly enableKOPanel = "enablekopanel";
|
||||
}
|
||||
|
||||
// flight names returned from the portal are always lowercase
|
||||
export class Flights {
|
||||
public static readonly SettingsV2 = "settingsv2";
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import * as Cosmos from "@azure/cosmos";
|
||||
import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
|
||||
import { configContext, Platform } from "../ConfigContext";
|
||||
import { userContext } from "../UserContext";
|
||||
import { getErrorMessage } from "./ErrorHandlingUtils";
|
||||
import { logConsoleError } from "../Utils/NotificationConsoleUtils";
|
||||
import { EmulatorMasterKey, HttpHeaders } from "./Constants";
|
||||
import { getErrorMessage } from "./ErrorHandlingUtils";
|
||||
import { userContext } from "../UserContext";
|
||||
|
||||
const _global = typeof self === "undefined" ? window : self;
|
||||
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { ARMError } from "../Utils/arm/request";
|
||||
import { HttpStatusCodes } from "./Constants";
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
import { SubscriptionType } from "../Contracts/SubscriptionType";
|
||||
import { userContext } from "../UserContext";
|
||||
import { ARMError } from "../Utils/arm/request";
|
||||
import { logConsoleError } from "../Utils/NotificationConsoleUtils";
|
||||
import { HttpStatusCodes } from "./Constants";
|
||||
import { logError } from "./Logger";
|
||||
import { sendMessage } from "./MessageHandler";
|
||||
|
||||
@@ -45,7 +44,7 @@ const sendNotificationForError = (errorMessage: string, errorCode: number | stri
|
||||
|
||||
const replaceKnownError = (errorMessage: string): string => {
|
||||
if (
|
||||
userContext.subscriptionType === SubscriptionType.Internal &&
|
||||
window.dataExplorer?.subscriptionType() === SubscriptionType.Internal &&
|
||||
errorMessage?.indexOf("SharedOffer is Disabled for your account") >= 0
|
||||
) {
|
||||
return "Database throughput is not supported for internal subscriptions.";
|
||||
|
||||
@@ -1,5 +1,28 @@
|
||||
import * as Constants from "./Constants";
|
||||
|
||||
import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
|
||||
|
||||
// x-ms-resource-quota: databases = 100; collections = 5000; users = 500000; permissions = 2000000;
|
||||
export function getQuota(responseHeaders: any): any {
|
||||
return responseHeaders && responseHeaders[Constants.HttpHeaders.resourceQuota]
|
||||
? parseStringIntoObject(responseHeaders[Constants.HttpHeaders.resourceQuota])
|
||||
: null;
|
||||
}
|
||||
|
||||
export function shouldEnableCrossPartitionKey(): boolean {
|
||||
return LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true";
|
||||
}
|
||||
|
||||
function parseStringIntoObject(resourceString: string) {
|
||||
var entityObject: any = {};
|
||||
|
||||
if (resourceString) {
|
||||
var entitiesArray: string[] = resourceString.split(";");
|
||||
for (var i: any = 0; i < entitiesArray.length; i++) {
|
||||
var entity: string[] = entitiesArray[i].split("=");
|
||||
entityObject[entity[0]] = entity[1];
|
||||
}
|
||||
}
|
||||
|
||||
return entityObject;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { QueryResults } from "../Contracts/ViewModels";
|
||||
|
||||
interface QueryResponse {
|
||||
// [Todo] remove any
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
resources: any[];
|
||||
hasMoreResults: boolean;
|
||||
activityId: string;
|
||||
@@ -18,7 +16,6 @@ export interface MinimalQueryIterator {
|
||||
export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex: number): Promise<QueryResults> {
|
||||
return documentsIterator.fetchNext().then((response) => {
|
||||
const documents = response.resources;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const headers = (response as any).headers || {}; // TODO this is a private key. Remove any
|
||||
const itemCount = (documents && documents.length) || 0;
|
||||
return {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
import Q from "q";
|
||||
import * as _ from "underscore";
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
import { getDataExplorerWindow } from "../Utils/WindowUtils";
|
||||
import * as Constants from "./Constants";
|
||||
import { getDataExplorerWindow } from "../Utils/WindowUtils";
|
||||
|
||||
export interface CachedDataPromise<T> {
|
||||
deferred: Q.Deferred<T>;
|
||||
@@ -61,21 +61,6 @@ export function sendMessage(data: any): void {
|
||||
}
|
||||
}
|
||||
|
||||
export function sendReadyMessage(): void {
|
||||
if (canSendMessage()) {
|
||||
// We try to find data explorer window first, then fallback to current window
|
||||
const portalChildWindow = getDataExplorerWindow(window) || window;
|
||||
portalChildWindow.parent.postMessage(
|
||||
{
|
||||
signature: "pcIframe",
|
||||
kind: "ready",
|
||||
data: "ready",
|
||||
},
|
||||
portalChildWindow.document.referrer
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function canSendMessage(): boolean {
|
||||
return window.parent !== window;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ import Explorer from "../Explorer/Explorer";
|
||||
import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
|
||||
import DocumentId from "../Explorer/Tree/DocumentId";
|
||||
import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
|
||||
import * as QueryUtils from "../Utils/QueryUtils";
|
||||
import { QueryUtils } from "../Utils/QueryUtils";
|
||||
import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
|
||||
import { userContext } from "../UserContext";
|
||||
import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
* Copyright (C) Microsoft Corporation. All rights reserved.
|
||||
*----------------------------------------------------------*/
|
||||
|
||||
export function getMonacoTheme(theme: string): string {
|
||||
export default class ThemeUtility {
|
||||
public static getMonacoTheme(theme: string): string {
|
||||
switch (theme) {
|
||||
case "default":
|
||||
case "hc-white":
|
||||
@@ -15,3 +16,4 @@ export function getMonacoTheme(theme: string): string {
|
||||
return "vs";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
import { useId } from "@uifabric/react-hooks";
|
||||
import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
|
||||
import * as React from "react";
|
||||
import InfoBubble from "../../../images/info-bubble.svg";
|
||||
|
||||
const calloutProps = { gapSpace: 0 };
|
||||
const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
|
||||
|
||||
export interface TooltipProps {
|
||||
children: string;
|
||||
}
|
||||
export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
|
||||
const tooltipId = useId("tooltip");
|
||||
|
||||
return children ? (
|
||||
<span>
|
||||
<TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
|
||||
<img className="infoImg" src={InfoBubble} alt="More information" />
|
||||
</TooltipHost>
|
||||
</span>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
};
|
||||
@@ -1,75 +0,0 @@
|
||||
import { Image, Stack, TextField } from "office-ui-fabric-react";
|
||||
import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
|
||||
import FolderIcon from "../../../images/folder_16x16.svg";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { Tooltip } from "../Tooltip";
|
||||
|
||||
interface UploadProps {
|
||||
label: string;
|
||||
accept?: string;
|
||||
tooltip?: string;
|
||||
multiple?: boolean;
|
||||
tabIndex?: number;
|
||||
onUpload: (event: ChangeEvent<HTMLInputElement>) => void;
|
||||
}
|
||||
|
||||
export const Upload: FunctionComponent<UploadProps> = ({
|
||||
label,
|
||||
accept,
|
||||
tooltip,
|
||||
multiple,
|
||||
tabIndex,
|
||||
...props
|
||||
}: UploadProps) => {
|
||||
const [selectedFilesTitle, setSelectedFilesTitle] = useState<string[]>([]);
|
||||
|
||||
const fileRef = useRef<HTMLInputElement>();
|
||||
|
||||
const onImportLinkKeyPress = (event: KeyboardEvent<HTMLAnchorElement>): void => {
|
||||
if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
|
||||
onImportLinkClick();
|
||||
}
|
||||
};
|
||||
|
||||
const onImportLinkClick = (): void => {
|
||||
fileRef?.current?.click();
|
||||
};
|
||||
|
||||
const onUpload = (event: ChangeEvent<HTMLInputElement>): void => {
|
||||
const { files } = event.target;
|
||||
|
||||
const newFileList = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
newFileList.push(files.item(i).name);
|
||||
}
|
||||
if (newFileList) {
|
||||
setSelectedFilesTitle(newFileList);
|
||||
props.onUpload(event);
|
||||
}
|
||||
};
|
||||
const title = label + " to upload";
|
||||
return (
|
||||
<div>
|
||||
<span className="renewUploadItemsHeader">{label}</span>
|
||||
<Tooltip>{tooltip}</Tooltip>
|
||||
<Stack horizontal>
|
||||
<TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
|
||||
<input
|
||||
type="file"
|
||||
id="importFileInput"
|
||||
style={{ display: "none" }}
|
||||
ref={fileRef}
|
||||
accept={accept}
|
||||
tabIndex={tabIndex}
|
||||
multiple={multiple}
|
||||
title="Upload Icon"
|
||||
onChange={onUpload}
|
||||
role="button"
|
||||
/>
|
||||
<a href="#" id="fileImportLinkNotebook" onClick={onImportLinkClick} onKeyPress={onImportLinkKeyPress}>
|
||||
<Image className="fileImportImg" src={FolderIcon} alt={title} title={title} />
|
||||
</a>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,12 +1,5 @@
|
||||
interface Result {
|
||||
type?: string;
|
||||
objectBody?: {
|
||||
id: string;
|
||||
self: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function parseDocumentsPath(resourcePath: string): Result {
|
||||
export default class UrlUtility {
|
||||
public static parseDocumentsPath(resourcePath: string): any {
|
||||
if (typeof resourcePath !== "string") {
|
||||
return {};
|
||||
}
|
||||
@@ -23,9 +16,9 @@ export function parseDocumentsPath(resourcePath: string): Result {
|
||||
resourcePath = "/" + resourcePath;
|
||||
}
|
||||
|
||||
let id: string;
|
||||
let type: string;
|
||||
const pathParts = resourcePath.split("/");
|
||||
var id: string;
|
||||
var type: string;
|
||||
var pathParts = resourcePath.split("/");
|
||||
|
||||
if (pathParts.length % 2 === 0) {
|
||||
id = pathParts[pathParts.length - 2];
|
||||
@@ -35,7 +28,7 @@ export function parseDocumentsPath(resourcePath: string): Result {
|
||||
type = pathParts[pathParts.length - 2];
|
||||
}
|
||||
|
||||
const result = {
|
||||
var result = {
|
||||
type: type,
|
||||
objectBody: {
|
||||
id: id,
|
||||
@@ -46,16 +39,17 @@ export function parseDocumentsPath(resourcePath: string): Result {
|
||||
return result;
|
||||
}
|
||||
|
||||
export function createUri(baseUri: string, relativeUri: string): string {
|
||||
public static createUri(baseUri: string, relativeUri: string): string {
|
||||
if (!baseUri) {
|
||||
throw new Error("baseUri is null or empty");
|
||||
}
|
||||
|
||||
const slashAtEndOfUriRegex = /\/$/,
|
||||
var slashAtEndOfUriRegex = /\/$/,
|
||||
slashAtStartOfUriRegEx = /^\//;
|
||||
|
||||
const normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
|
||||
var normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
|
||||
normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
|
||||
|
||||
return normalizedBaseUri + normalizedRelativeUri;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,10 +9,10 @@ export interface DatabaseAccount {
|
||||
}
|
||||
|
||||
export interface DatabaseAccountExtendedProperties {
|
||||
documentEndpoint?: string;
|
||||
tableEndpoint?: string;
|
||||
gremlinEndpoint?: string;
|
||||
cassandraEndpoint?: string;
|
||||
documentEndpoint: string;
|
||||
tableEndpoint: string;
|
||||
gremlinEndpoint: string;
|
||||
cassandraEndpoint: string;
|
||||
configurationOverrides?: ConfigurationOverrides;
|
||||
capabilities?: Capability[];
|
||||
enableMultipleWriteLocations?: boolean;
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* Messaging types used with SelfServe Component <-> Portal communication
|
||||
* and Hosted <-> SelfServe Component communication
|
||||
*/
|
||||
|
||||
export enum SelfServeMessageTypes {
|
||||
TelemetryInfo = "TelemetryInfo",
|
||||
Notification = "Notification",
|
||||
}
|
||||
@@ -88,6 +88,7 @@ export interface Database extends TreeNode {
|
||||
loadCollections(): Promise<void>;
|
||||
findCollectionWithId(collectionId: string): Collection;
|
||||
openAddCollection(database: Database, event: MouseEvent): void;
|
||||
onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
|
||||
onSettingsClick: () => void;
|
||||
loadOffer(): Promise<void>;
|
||||
getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
|
||||
@@ -375,6 +376,7 @@ export interface DataExplorerInputsFrame {
|
||||
masterKey?: string;
|
||||
hasWriteAccess?: boolean;
|
||||
authorizationToken?: string;
|
||||
features: { [key: string]: string };
|
||||
csmEndpoint?: string;
|
||||
dnsSuffix?: string;
|
||||
serverId?: string;
|
||||
@@ -388,18 +390,10 @@ export interface DataExplorerInputsFrame {
|
||||
sharedThroughputMaximum?: number;
|
||||
sharedThroughputDefault?: number;
|
||||
dataExplorerVersion?: string;
|
||||
isAuthWithresourceToken?: boolean;
|
||||
defaultCollectionThroughput?: CollectionCreationDefaults;
|
||||
flights?: readonly string[];
|
||||
}
|
||||
|
||||
export interface SelfServeFrameInputs {
|
||||
selfServeType: SelfServeType;
|
||||
databaseAccount: any;
|
||||
subscriptionId: string;
|
||||
resourceGroup: string;
|
||||
authorizationToken: string;
|
||||
csmEndpoint: string;
|
||||
flights?: readonly string[];
|
||||
selfServeType?: SelfServeType;
|
||||
}
|
||||
|
||||
export interface CollectionCreationDefaults {
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
import dayjs from "dayjs";
|
||||
import * as Plotly from "plotly.js-cartesian-dist-min";
|
||||
import { StyleConstants } from "../../Common/Constants";
|
||||
import { sendCachedDataMessage, sendReadyMessage } from "../../Common/MessageHandler";
|
||||
import { MessageTypes } from "../../Contracts/ExplorerContracts";
|
||||
import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
|
||||
import "./Heatmap.less";
|
||||
import dayjs from "dayjs";
|
||||
import {
|
||||
ChartSettings,
|
||||
DataPayload,
|
||||
@@ -16,6 +11,11 @@ import {
|
||||
PartitionTimeStampToData,
|
||||
PortalTheme,
|
||||
} from "./HeatmapDatatypes";
|
||||
import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
|
||||
import { sendCachedDataMessage, sendMessage } from "../../Common/MessageHandler";
|
||||
import { MessageTypes } from "../../Contracts/ExplorerContracts";
|
||||
import { StyleConstants } from "../../Common/Constants";
|
||||
import "./Heatmap.less";
|
||||
|
||||
export class Heatmap {
|
||||
public static readonly elementId: string = "heatmap";
|
||||
@@ -266,4 +266,4 @@ export function handleMessage(event: MessageEvent) {
|
||||
}
|
||||
|
||||
window.addEventListener("message", handleMessage, false);
|
||||
sendReadyMessage();
|
||||
sendMessage("ready");
|
||||
|
||||
@@ -77,6 +77,10 @@ describe("Component Registerer", () => {
|
||||
expect(ko.components.isRegistered("delete-collection-confirmation-pane")).toBe(true);
|
||||
});
|
||||
|
||||
it("should register delete-database-confirmation-pane component", () => {
|
||||
expect(ko.components.isRegistered("delete-database-confirmation-pane")).toBe(true);
|
||||
});
|
||||
|
||||
it("should register save-query-pane component", () => {
|
||||
expect(ko.components.isRegistered("save-query-pane")).toBe(true);
|
||||
});
|
||||
@@ -93,6 +97,10 @@ describe("Component Registerer", () => {
|
||||
expect(ko.components.isRegistered("graph-styling-pane")).toBe(true);
|
||||
});
|
||||
|
||||
it("should register upload-file-pane component", () => {
|
||||
expect(ko.components.isRegistered("upload-file-pane")).toBe(true);
|
||||
});
|
||||
|
||||
it("should register string-input-pane component", () => {
|
||||
expect(ko.components.isRegistered("string-input-pane")).toBe(true);
|
||||
});
|
||||
|
||||
@@ -1,30 +1,16 @@
|
||||
import * as ko from "knockout";
|
||||
import * as PaneComponents from "./Panes/PaneComponents";
|
||||
import * as TabComponents from "./Tabs/TabComponents";
|
||||
import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
|
||||
import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
|
||||
import { EditorComponent } from "./Controls/Editor/EditorComponent";
|
||||
import { ErrorDisplayComponent } from "./Controls/ErrorDisplayComponent/ErrorDisplayComponent";
|
||||
import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
|
||||
import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahead";
|
||||
import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
|
||||
import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
|
||||
import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
|
||||
import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
|
||||
import * as PaneComponents from "./Panes/PaneComponents";
|
||||
import ConflictsTab from "./Tabs/ConflictsTab";
|
||||
import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab";
|
||||
import DocumentsTab from "./Tabs/DocumentsTab";
|
||||
import GalleryTab from "./Tabs/GalleryTab";
|
||||
import GraphTab from "./Tabs/GraphTab";
|
||||
import MongoShellTab from "./Tabs/MongoShellTab";
|
||||
import NotebookTabV2 from "./Tabs/NotebookV2Tab";
|
||||
import NotebookViewerTab from "./Tabs/NotebookViewerTab";
|
||||
import QueryTab from "./Tabs/QueryTab";
|
||||
import QueryTablesTab from "./Tabs/QueryTablesTab";
|
||||
import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
|
||||
import StoredProcedureTab from "./Tabs/StoredProcedureTab";
|
||||
import TabsManagerTemplate from "./Tabs/TabsManager.html";
|
||||
import TerminalTab from "./Tabs/TerminalTab";
|
||||
import TriggerTab from "./Tabs/TriggerTab";
|
||||
import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
|
||||
import { TabsManagerKOComponent } from "./Tabs/TabsManager";
|
||||
import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
|
||||
|
||||
ko.components.register("input-typeahead", new InputTypeaheadComponent());
|
||||
ko.components.register("new-vertex-form", NewVertexComponent);
|
||||
@@ -35,27 +21,28 @@ ko.components.register("json-editor", new JsonEditorComponent());
|
||||
ko.components.register("diff-editor", new DiffEditorComponent());
|
||||
ko.components.register("dynamic-list", DynamicListComponent);
|
||||
ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
|
||||
ko.components.register("tabs-manager", { template: TabsManagerTemplate });
|
||||
ko.components.register("tabs-manager", TabsManagerKOComponent());
|
||||
|
||||
// Collection Tabs
|
||||
[
|
||||
DocumentsTab,
|
||||
StoredProcedureTab,
|
||||
TriggerTab,
|
||||
UserDefinedFunctionTab,
|
||||
SettingsTabV2,
|
||||
QueryTab,
|
||||
QueryTablesTab,
|
||||
GraphTab,
|
||||
MongoShellTab,
|
||||
ConflictsTab,
|
||||
NotebookTabV2,
|
||||
TerminalTab,
|
||||
GalleryTab,
|
||||
NotebookViewerTab,
|
||||
DatabaseSettingsTab,
|
||||
DatabaseSettingsTabV2,
|
||||
].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
|
||||
ko.components.register("documents-tab", new TabComponents.DocumentsTab());
|
||||
ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
|
||||
ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
|
||||
ko.components.register("trigger-tab", new TabComponents.TriggerTab());
|
||||
ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
|
||||
ko.components.register("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
|
||||
ko.components.register("query-tab", new TabComponents.QueryTab());
|
||||
ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
|
||||
ko.components.register("graph-tab", new TabComponents.GraphTab());
|
||||
ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());
|
||||
ko.components.register("conflicts-tab", new TabComponents.ConflictsTab());
|
||||
ko.components.register("notebookv2-tab", new TabComponents.NotebookV2Tab());
|
||||
ko.components.register("terminal-tab", new TabComponents.TerminalTab());
|
||||
ko.components.register("gallery-tab", new TabComponents.GalleryTab());
|
||||
ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTab());
|
||||
|
||||
// Database Tabs
|
||||
ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
|
||||
ko.components.register("database-settings-tab-v2", new TabComponents.SettingsTabV2());
|
||||
|
||||
// Panes
|
||||
ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
|
||||
@@ -64,7 +51,10 @@ ko.components.register(
|
||||
"delete-collection-confirmation-pane",
|
||||
new PaneComponents.DeleteCollectionConfirmationPaneComponent()
|
||||
);
|
||||
|
||||
ko.components.register(
|
||||
"delete-database-confirmation-pane",
|
||||
new PaneComponents.DeleteDatabaseConfirmationPaneComponent()
|
||||
);
|
||||
ko.components.register("graph-new-vertex-pane", new PaneComponents.GraphNewVertexPaneComponent());
|
||||
ko.components.register("graph-styling-pane", new PaneComponents.GraphStylingPaneComponent());
|
||||
ko.components.register("table-add-entity-pane", new PaneComponents.TableAddEntityPaneComponent());
|
||||
@@ -72,9 +62,13 @@ ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEnt
|
||||
ko.components.register("table-column-options-pane", new PaneComponents.TableColumnOptionsPaneComponent());
|
||||
ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
|
||||
ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
|
||||
ko.components.register("settings-pane", new PaneComponents.SettingsPaneComponent());
|
||||
ko.components.register("execute-sproc-params-pane", new PaneComponents.ExecuteSprocParamsComponent());
|
||||
ko.components.register("upload-items-pane", new PaneComponents.UploadItemsPaneComponent());
|
||||
ko.components.register("load-query-pane", new PaneComponents.LoadQueryPaneComponent());
|
||||
ko.components.register("save-query-pane", new PaneComponents.SaveQueryPaneComponent());
|
||||
ko.components.register("browse-queries-pane", new PaneComponents.BrowseQueriesPaneComponent());
|
||||
ko.components.register("upload-file-pane", new PaneComponents.UploadFilePaneComponent());
|
||||
ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent());
|
||||
ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());
|
||||
ko.components.register("github-repos-pane", new PaneComponents.GitHubReposPaneComponent());
|
||||
|
||||
@@ -1,22 +1,23 @@
|
||||
import * as ko from "knockout";
|
||||
import * as ViewModels from "../Contracts/ViewModels";
|
||||
import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
|
||||
import AddCollectionIcon from "../../images/AddCollection.svg";
|
||||
import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
|
||||
import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
|
||||
import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
|
||||
import AddTriggerIcon from "../../images/AddTrigger.svg";
|
||||
import AddUdfIcon from "../../images/AddUdf.svg";
|
||||
import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
|
||||
import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
|
||||
import DeleteSprocIcon from "../../images/DeleteSproc.svg";
|
||||
import AddUdfIcon from "../../images/AddUdf.svg";
|
||||
import AddTriggerIcon from "../../images/AddTrigger.svg";
|
||||
import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
|
||||
import DeleteUDFIcon from "../../images/DeleteUDF.svg";
|
||||
import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
|
||||
import * as ViewModels from "../Contracts/ViewModels";
|
||||
import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
|
||||
import { userContext } from "../UserContext";
|
||||
import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
|
||||
import DeleteSprocIcon from "../../images/DeleteSproc.svg";
|
||||
import Explorer from "./Explorer";
|
||||
import UserDefinedFunction from "./Tree/UserDefinedFunction";
|
||||
import StoredProcedure from "./Tree/StoredProcedure";
|
||||
import Trigger from "./Tree/Trigger";
|
||||
import UserDefinedFunction from "./Tree/UserDefinedFunction";
|
||||
import { userContext } from "../UserContext";
|
||||
import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
|
||||
|
||||
export interface CollectionContextMenuButtonParams {
|
||||
databaseId: string;
|
||||
@@ -42,7 +43,7 @@ export class ResourceTreeContextMenuButtonFactory {
|
||||
if (userContext.defaultExperience !== DefaultAccountExperienceType.Table) {
|
||||
items.push({
|
||||
iconSrc: DeleteDatabaseIcon,
|
||||
onClick: () => container.openDeleteDatabaseConfirmationPane(),
|
||||
onClick: () => container.deleteDatabaseConfirmationPane.open(),
|
||||
label: container.deleteDatabaseText(),
|
||||
styleClass: "deleteDatabaseMenuItem",
|
||||
});
|
||||
|
||||
@@ -6,7 +6,6 @@ describe("CollapsibleSectionComponent", () => {
|
||||
it("renders", () => {
|
||||
const props: CollapsibleSectionProps = {
|
||||
title: "Sample title",
|
||||
isExpandedByDefault: true,
|
||||
};
|
||||
|
||||
const wrapper = shallow(<CollapsibleSectionComponent {...props} />);
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { Icon, Label, Stack } from "office-ui-fabric-react";
|
||||
import * as React from "react";
|
||||
import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
|
||||
import { accordionIconStyles, accordionStackTokens } from "../Settings/SettingsRenderUtils";
|
||||
|
||||
export interface CollapsibleSectionProps {
|
||||
title: string;
|
||||
isExpandedByDefault: boolean;
|
||||
}
|
||||
|
||||
export interface CollapsibleSectionState {
|
||||
@@ -15,7 +14,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
|
||||
constructor(props: CollapsibleSectionProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isExpanded: this.props.isExpandedByDefault,
|
||||
isExpanded: true,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -26,14 +25,8 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
className="collapsibleSection"
|
||||
horizontal
|
||||
verticalAlign="center"
|
||||
tokens={accordionStackTokens}
|
||||
onClick={this.toggleCollapsed}
|
||||
>
|
||||
<Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
|
||||
<Stack className="collapsibleSection" horizontal tokens={accordionStackTokens} onClick={this.toggleCollapsed}>
|
||||
<Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
|
||||
<Label>{this.props.title}</Label>
|
||||
</Stack>
|
||||
{this.state.isExpanded && this.props.children}
|
||||
|
||||
@@ -11,10 +11,16 @@ exports[`CollapsibleSectionComponent renders 1`] = `
|
||||
"childrenGap": 10,
|
||||
}
|
||||
}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="ChevronDown"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"paddingTop": 7,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
<StyledLabelBase>
|
||||
Sample title
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as StringUtils from "../../../Utils/StringUtils";
|
||||
import { StringUtils } from "../../../Utils/StringUtils";
|
||||
import { KeyCodes } from "../../../Common/Constants";
|
||||
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
|
||||
|
||||
@@ -350,11 +350,12 @@ exports[`test render renders with filters 1`] = `
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="ms-ScrollablePane root-72"
|
||||
className="ms-ScrollablePane root-40"
|
||||
data-is-scrollable="true"
|
||||
>
|
||||
<div
|
||||
className="stickyAbove-74"
|
||||
aria-hidden="true"
|
||||
className="stickyAbove-42"
|
||||
style={
|
||||
Object {
|
||||
"height": 0,
|
||||
@@ -365,7 +366,7 @@ exports[`test render renders with filters 1`] = `
|
||||
}
|
||||
/>
|
||||
<div
|
||||
className="ms-ScrollablePane--contentContainer contentContainer-73"
|
||||
className="ms-ScrollablePane--contentContainer contentContainer-41"
|
||||
data-is-scrollable={true}
|
||||
>
|
||||
<Sticky
|
||||
@@ -374,6 +375,7 @@ exports[`test render renders with filters 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
style={
|
||||
Object {
|
||||
"pointerEvents": "none",
|
||||
@@ -393,6 +395,7 @@ exports[`test render renders with filters 1`] = `
|
||||
style={Object {}}
|
||||
>
|
||||
<div
|
||||
aria-hidden={false}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "",
|
||||
@@ -408,7 +411,6 @@ exports[`test render renders with filters 1`] = `
|
||||
>
|
||||
<TextFieldBase
|
||||
ariaLabel="Directory filter text box"
|
||||
canRevealPassword={false}
|
||||
className="directoryListFilterTextBox"
|
||||
deferredValidationTime={200}
|
||||
onChange={[Function]}
|
||||
@@ -691,18 +693,18 @@ exports[`test render renders with filters 1`] = `
|
||||
validateOnLoad={true}
|
||||
>
|
||||
<div
|
||||
className="ms-TextField directoryListFilterTextBox root-78"
|
||||
className="ms-TextField directoryListFilterTextBox root-46"
|
||||
>
|
||||
<div
|
||||
className="ms-TextField-wrapper"
|
||||
>
|
||||
<div
|
||||
className="ms-TextField-fieldGroup fieldGroup-79"
|
||||
className="ms-TextField-fieldGroup fieldGroup-47"
|
||||
>
|
||||
<input
|
||||
aria-invalid={false}
|
||||
aria-label="Directory filter text box"
|
||||
className="ms-TextField-field field-80"
|
||||
className="ms-TextField-field field-48"
|
||||
id="TextField0"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
@@ -1121,7 +1123,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"iconDisabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1147,7 +1149,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"menuIconDisabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1166,7 +1168,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 2,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
"outlineColor": "ButtonText",
|
||||
@@ -1245,7 +1247,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 2,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
"outlineColor": "ButtonText",
|
||||
@@ -1277,10 +1279,8 @@ exports[`test render renders with filters 1`] = `
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f1",
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
@@ -1300,7 +1300,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"backgroundColor": "#f3f2f1",
|
||||
"color": "#201f1e",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"borderColor": "Highlight",
|
||||
"color": "Highlight",
|
||||
},
|
||||
@@ -1326,7 +1326,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"splitButtonContainer": Array [
|
||||
Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"border": "none",
|
||||
},
|
||||
},
|
||||
@@ -1344,7 +1344,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 3,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"border": "none",
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
@@ -1373,20 +1373,19 @@ exports[`test render renders with filters 1`] = `
|
||||
"borderBottomRightRadius": "0",
|
||||
"borderTopRightRadius": "0",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "Window",
|
||||
"border": "1px solid WindowText",
|
||||
"borderRightWidth": "0",
|
||||
"color": "WindowText",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
".ms-Button--primary + .ms-Button": Object {
|
||||
"border": "none",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"border": "1px solid WindowText",
|
||||
"borderLeftWidth": "0",
|
||||
},
|
||||
@@ -1399,11 +1398,10 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -1413,11 +1411,10 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -1427,11 +1424,12 @@ exports[`test render renders with filters 1`] = `
|
||||
"border": "none",
|
||||
"outline": "none",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
},
|
||||
"@media screen and (forced-colors: active)": Object {
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
@@ -1443,7 +1441,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Highlight",
|
||||
"color": "Window",
|
||||
},
|
||||
@@ -1452,7 +1450,7 @@ exports[`test render renders with filters 1`] = `
|
||||
".ms-Button.is-disabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
@@ -1468,7 +1466,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "WindowText",
|
||||
},
|
||||
},
|
||||
@@ -1480,7 +1478,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "WindowText",
|
||||
},
|
||||
},
|
||||
@@ -1497,7 +1495,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1520,7 +1518,7 @@ exports[`test render renders with filters 1`] = `
|
||||
":hover": Object {
|
||||
"backgroundColor": "#edebe9",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"color": "Highlight",
|
||||
},
|
||||
},
|
||||
@@ -1528,11 +1526,6 @@ exports[`test render renders with filters 1`] = `
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
".ms-Button-menuIcon": Object {
|
||||
"color": "WindowText",
|
||||
},
|
||||
},
|
||||
"border": "1px solid #8a8886",
|
||||
"borderBottomRightRadius": "2px",
|
||||
"borderLeft": "none",
|
||||
@@ -1578,7 +1571,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
@@ -1587,7 +1580,7 @@ exports[`test render renders with filters 1`] = `
|
||||
},
|
||||
".ms-Button-menuIcon": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1595,7 +1588,7 @@ exports[`test render renders with filters 1`] = `
|
||||
":hover": Object {
|
||||
"cursor": "default",
|
||||
},
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"border": "1px solid GrayText",
|
||||
"color": "GrayText",
|
||||
@@ -1900,7 +1893,7 @@ exports[`test render renders with filters 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-disabled={true}
|
||||
className="ms-Button ms-Button--default is-disabled directoryListButton root-89"
|
||||
className="ms-Button ms-Button--default is-disabled directoryListButton root-54"
|
||||
data-is-focusable={false}
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
@@ -1912,7 +1905,7 @@ exports[`test render renders with filters 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="ms-Button-flexContainer flexContainer-90"
|
||||
className="ms-Button-flexContainer flexContainer-55"
|
||||
data-automationid="splitbuttonprimary"
|
||||
>
|
||||
<div
|
||||
@@ -1943,7 +1936,8 @@ exports[`test render renders with filters 1`] = `
|
||||
</List>
|
||||
</div>
|
||||
<div
|
||||
className="stickyBelow-75"
|
||||
aria-hidden="true"
|
||||
className="stickyBelow-43"
|
||||
style={
|
||||
Object {
|
||||
"bottom": "0px",
|
||||
@@ -1954,7 +1948,7 @@ exports[`test render renders with filters 1`] = `
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="stickyBelowItems-76"
|
||||
className="stickyBelowItems-44"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ import { ChildrenMargin } from "./GitHubStyleConstants";
|
||||
import * as GitHubUtils from "../../../Utils/GitHubUtils";
|
||||
import { IGitHubRepo } from "../../../GitHub/GitHubClient";
|
||||
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import * as UrlUtility from "../../../Common/UrlUtility";
|
||||
import UrlUtility from "../../../Common/UrlUtility";
|
||||
import Explorer from "../../Explorer";
|
||||
|
||||
export interface AddRepoComponentProps {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
import * as React from "react";
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import * as StringUtils from "../../../Utils/StringUtils";
|
||||
import { StringUtils } from "../../../Utils/StringUtils";
|
||||
import { userContext } from "../../../UserContext";
|
||||
import { TerminalQueryParams } from "../../../Common/Constants";
|
||||
import { handleError } from "../../../Common/ErrorHandlingUtils";
|
||||
|
||||
@@ -18,7 +18,7 @@ import {
|
||||
} from "office-ui-fabric-react";
|
||||
import * as React from "react";
|
||||
import { IGalleryItem } from "../../../../Juno/JunoClient";
|
||||
import * as FileSystemUtil from "../../../Notebook/FileSystemUtil";
|
||||
import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
|
||||
import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
|
||||
|
||||
export interface GalleryCardComponentProps {
|
||||
@@ -47,7 +47,6 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
|
||||
private static readonly cardItemGapBig = 10;
|
||||
private static readonly cardItemGapSmall = 8;
|
||||
private static readonly cardDeleteSpinnerHeight = 360;
|
||||
private static readonly smallTextLineHeight = 18;
|
||||
|
||||
constructor(props: GalleryCardComponentProps) {
|
||||
super(props);
|
||||
@@ -104,7 +103,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
|
||||
</Card.Item>
|
||||
|
||||
<Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
|
||||
<Text variant="small" nowrap styles={{ root: { height: GalleryCardComponent.smallTextLineHeight } }}>
|
||||
<Text variant="small" nowrap>
|
||||
{this.props.data.tags ? (
|
||||
this.props.data.tags.map((tag, index, array) => (
|
||||
<span key={tag}>
|
||||
@@ -130,7 +129,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
|
||||
{cardTitle}
|
||||
</Text>
|
||||
|
||||
<Text variant="small" styles={{ root: { height: GalleryCardComponent.smallTextLineHeight * 2 } }}>
|
||||
<Text variant="small" styles={{ root: { height: 36 } }}>
|
||||
{this.renderTruncatedDescription()}
|
||||
</Text>
|
||||
|
||||
|
||||
@@ -50,13 +50,6 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
>
|
||||
<Text
|
||||
nowrap={true}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"height": 18,
|
||||
},
|
||||
}
|
||||
}
|
||||
variant="small"
|
||||
>
|
||||
<span
|
||||
@@ -107,7 +100,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="RedEye"
|
||||
styles={
|
||||
Object {
|
||||
@@ -131,7 +124,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="Download"
|
||||
styles={
|
||||
Object {
|
||||
@@ -155,7 +148,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="Heart"
|
||||
styles={
|
||||
Object {
|
||||
@@ -180,7 +173,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
}
|
||||
>
|
||||
<Separator
|
||||
<Styled
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
.publicGalleryTabContainer {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.publicGalleryTabOverlayContent {
|
||||
|
||||
@@ -47,8 +47,8 @@ export interface GalleryViewerComponentProps {
|
||||
}
|
||||
|
||||
export enum GalleryTab {
|
||||
PublicGallery,
|
||||
OfficialSamples,
|
||||
PublicGallery,
|
||||
Favorites,
|
||||
Published,
|
||||
}
|
||||
@@ -151,14 +151,15 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
|
||||
public render(): JSX.Element {
|
||||
this.traceViewGallery();
|
||||
|
||||
const tabs: GalleryTabInfo[] = [
|
||||
const tabs: GalleryTabInfo[] = [this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
|
||||
|
||||
tabs.push(
|
||||
this.createPublicGalleryTab(
|
||||
GalleryTab.PublicGallery,
|
||||
this.state.publicNotebooks,
|
||||
this.state.isCodeOfConductAccepted
|
||||
),
|
||||
this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks),
|
||||
];
|
||||
)
|
||||
);
|
||||
|
||||
if (this.props.container) {
|
||||
tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
|
||||
@@ -200,13 +201,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
|
||||
}
|
||||
|
||||
switch (this.state.selectedTab) {
|
||||
case GalleryTab.PublicGallery:
|
||||
if (!this.viewPublicGalleryTraced) {
|
||||
this.resetViewGalleryTabTracedFlags();
|
||||
this.viewPublicGalleryTraced = true;
|
||||
trace(Action.NotebooksGalleryViewPublicGallery);
|
||||
}
|
||||
break;
|
||||
case GalleryTab.OfficialSamples:
|
||||
if (!this.viewOfficialSamplesTraced) {
|
||||
this.resetViewGalleryTabTracedFlags();
|
||||
@@ -214,6 +208,13 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
|
||||
trace(Action.NotebooksGalleryViewOfficialSamples);
|
||||
}
|
||||
break;
|
||||
case GalleryTab.PublicGallery:
|
||||
if (!this.viewPublicGalleryTraced) {
|
||||
this.resetViewGalleryTabTracedFlags();
|
||||
this.viewPublicGalleryTraced = true;
|
||||
trace(Action.NotebooksGalleryViewPublicGallery);
|
||||
}
|
||||
break;
|
||||
case GalleryTab.Favorites:
|
||||
if (!this.viewFavoritesTraced) {
|
||||
this.resetViewGalleryTabTracedFlags();
|
||||
@@ -388,7 +389,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
|
||||
private createSearchBarHeader(content: JSX.Element): JSX.Element {
|
||||
return (
|
||||
<Stack tokens={{ childrenGap: 10 }}>
|
||||
<Stack horizontal wrap tokens={{ childrenGap: 20, padding: 10 }}>
|
||||
<Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}>
|
||||
<Stack.Item grow>
|
||||
<SearchBox value={this.state.searchText} placeholder="Search" onChange={this.onSearchBoxChange} />
|
||||
</Stack.Item>
|
||||
@@ -443,14 +444,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
|
||||
|
||||
private loadTabContent(tab: GalleryTab, searchText: string, sortBy: SortBy, offline: boolean): void {
|
||||
switch (tab) {
|
||||
case GalleryTab.PublicGallery:
|
||||
this.loadPublicNotebooks(searchText, sortBy, offline);
|
||||
break;
|
||||
|
||||
case GalleryTab.OfficialSamples:
|
||||
this.loadSampleNotebooks(searchText, sortBy, offline);
|
||||
break;
|
||||
|
||||
case GalleryTab.PublicGallery:
|
||||
this.loadPublicNotebooks(searchText, sortBy, offline);
|
||||
break;
|
||||
|
||||
case GalleryTab.Favorites:
|
||||
this.loadFavoriteNotebooks(searchText, sortBy, offline);
|
||||
break;
|
||||
|
||||
@@ -13,7 +13,7 @@ exports[`InfoComponent renders 1`] = `
|
||||
<div
|
||||
className="infoPanelMain"
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
className="infoIconMain"
|
||||
iconName="Help"
|
||||
styles={
|
||||
|
||||
@@ -8,6 +8,90 @@ exports[`GalleryViewerComponent renders 1`] = `
|
||||
onLinkClick={[Function]}
|
||||
selectedKey="OfficialSamples"
|
||||
>
|
||||
<PivotItem
|
||||
headerText="Official samples"
|
||||
itemKey="OfficialSamples"
|
||||
key="OfficialSamples"
|
||||
style={
|
||||
Object {
|
||||
"marginTop": 20,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 20,
|
||||
"padding": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<StackItem
|
||||
grow={true}
|
||||
>
|
||||
<StyledSearchBoxBase
|
||||
onChange={[Function]}
|
||||
placeholder="Search"
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem>
|
||||
<StyledLabelBase>
|
||||
Sort by
|
||||
</StyledLabelBase>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"minWidth": 200,
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<StyledWithResponsiveMode
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": 0,
|
||||
"text": "Most viewed",
|
||||
},
|
||||
Object {
|
||||
"key": 1,
|
||||
"text": "Most downloaded",
|
||||
},
|
||||
Object {
|
||||
"key": 3,
|
||||
"text": "Most recent",
|
||||
},
|
||||
Object {
|
||||
"key": 2,
|
||||
"text": "Most favorited",
|
||||
},
|
||||
]
|
||||
}
|
||||
selectedKey={0}
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem>
|
||||
<InfoComponent />
|
||||
</StackItem>
|
||||
</Stack>
|
||||
<StackItem>
|
||||
<StyledSpinnerBase
|
||||
size={3}
|
||||
/>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</PivotItem>
|
||||
<PivotItem
|
||||
headerText="Public gallery"
|
||||
itemKey="PublicGallery"
|
||||
@@ -36,7 +120,6 @@ exports[`GalleryViewerComponent renders 1`] = `
|
||||
"padding": 10,
|
||||
}
|
||||
}
|
||||
wrap={true}
|
||||
>
|
||||
<StackItem
|
||||
grow={true}
|
||||
@@ -97,91 +180,6 @@ exports[`GalleryViewerComponent renders 1`] = `
|
||||
</Stack>
|
||||
</div>
|
||||
</PivotItem>
|
||||
<PivotItem
|
||||
headerText="Official samples"
|
||||
itemKey="OfficialSamples"
|
||||
key="OfficialSamples"
|
||||
style={
|
||||
Object {
|
||||
"marginTop": 20,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 20,
|
||||
"padding": 10,
|
||||
}
|
||||
}
|
||||
wrap={true}
|
||||
>
|
||||
<StackItem
|
||||
grow={true}
|
||||
>
|
||||
<StyledSearchBoxBase
|
||||
onChange={[Function]}
|
||||
placeholder="Search"
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem>
|
||||
<StyledLabelBase>
|
||||
Sort by
|
||||
</StyledLabelBase>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"minWidth": 200,
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<StyledWithResponsiveMode
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": 0,
|
||||
"text": "Most viewed",
|
||||
},
|
||||
Object {
|
||||
"key": 1,
|
||||
"text": "Most downloaded",
|
||||
},
|
||||
Object {
|
||||
"key": 3,
|
||||
"text": "Most recent",
|
||||
},
|
||||
Object {
|
||||
"key": 2,
|
||||
"text": "Most favorited",
|
||||
},
|
||||
]
|
||||
}
|
||||
selectedKey={0}
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem>
|
||||
<InfoComponent />
|
||||
</StackItem>
|
||||
</Stack>
|
||||
<StackItem>
|
||||
<StyledSpinnerBase
|
||||
size={3}
|
||||
/>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</PivotItem>
|
||||
</StyledPivotBase>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
} from "office-ui-fabric-react";
|
||||
import * as React from "react";
|
||||
import { IGalleryItem } from "../../../Juno/JunoClient";
|
||||
import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
|
||||
import { FileSystemUtil } from "../../Notebook/FileSystemUtil";
|
||||
import "./NotebookViewerComponent.less";
|
||||
import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
|
||||
import { InfoComponent } from "../NotebookGallery/InfoComponent/InfoComponent";
|
||||
|
||||
@@ -68,14 +68,14 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
|
||||
Invalid Date
|
||||
</Text>
|
||||
<Text>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="RedEye"
|
||||
/>
|
||||
|
||||
0
|
||||
</Text>
|
||||
<Text>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="Download"
|
||||
/>
|
||||
0
|
||||
@@ -180,14 +180,14 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
|
||||
Invalid Date
|
||||
</Text>
|
||||
<Text>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="RedEye"
|
||||
/>
|
||||
|
||||
0
|
||||
</Text>
|
||||
<Text>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="Download"
|
||||
/>
|
||||
0
|
||||
|
||||
@@ -1,19 +1,17 @@
|
||||
import { shallow } from "enzyme";
|
||||
import ko from "knockout";
|
||||
import React from "react";
|
||||
import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
|
||||
import { updateOffer } from "../../../Common/dataAccess/updateOffer";
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
|
||||
import Explorer from "../../Explorer";
|
||||
import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
|
||||
import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
|
||||
import { isDirty, TtlType } from "./SettingsUtils";
|
||||
import { collection } from "./TestUtils";
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import ko from "knockout";
|
||||
import { TtlType, isDirty } from "./SettingsUtils";
|
||||
import Explorer from "../../Explorer";
|
||||
jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
|
||||
getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
|
||||
}));
|
||||
import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
|
||||
jest.mock("../../../Common/dataAccess/updateCollection", () => ({
|
||||
updateCollection: jest.fn().mockReturnValue({
|
||||
id: undefined,
|
||||
@@ -31,6 +29,8 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
|
||||
analyticalStorageTtl: undefined,
|
||||
} as MongoDBCollectionResource),
|
||||
}));
|
||||
import { updateOffer } from "../../../Common/dataAccess/updateOffer";
|
||||
import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
|
||||
jest.mock("../../../Common/dataAccess/updateOffer", () => ({
|
||||
updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer),
|
||||
}));
|
||||
@@ -134,6 +134,7 @@ describe("SettingsComponent", () => {
|
||||
loadCollections: undefined,
|
||||
findCollectionWithId: undefined,
|
||||
openAddCollection: undefined,
|
||||
onDeleteDatabaseContextMenuClick: undefined,
|
||||
readSettings: undefined,
|
||||
onSettingsClick: undefined,
|
||||
loadOffer: undefined,
|
||||
|
||||
@@ -1,51 +1,49 @@
|
||||
import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
|
||||
import * as React from "react";
|
||||
import DiscardIcon from "../../../../images/discard.svg";
|
||||
import SaveIcon from "../../../../images/save-cosmos.svg";
|
||||
import { AuthType } from "../../../AuthType";
|
||||
import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
|
||||
import * as Constants from "../../../Common/Constants";
|
||||
import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
|
||||
import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
|
||||
import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
|
||||
import { updateOffer } from "../../../Common/dataAccess/updateOffer";
|
||||
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import DiscardIcon from "../../../../images/discard.svg";
|
||||
import SaveIcon from "../../../../images/save-cosmos.svg";
|
||||
import { traceStart, traceFailure, traceSuccess, trace } from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
|
||||
import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../../UserContext";
|
||||
import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
|
||||
import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
|
||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||
import Explorer from "../../Explorer";
|
||||
import { updateOffer } from "../../../Common/dataAccess/updateOffer";
|
||||
import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
|
||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||
import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
|
||||
import "./SettingsComponent.less";
|
||||
import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
|
||||
import {
|
||||
ConflictResolutionComponent,
|
||||
ConflictResolutionComponentProps,
|
||||
} from "./SettingsSubComponents/ConflictResolutionComponent";
|
||||
import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
|
||||
import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
|
||||
import {
|
||||
MongoIndexingPolicyComponent,
|
||||
MongoIndexingPolicyComponentProps,
|
||||
} from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
|
||||
import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
|
||||
import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
|
||||
import {
|
||||
AddMongoIndexProps,
|
||||
ChangeFeedPolicyState,
|
||||
GeospatialConfigType,
|
||||
getMongoNotification,
|
||||
getTabTitle,
|
||||
hasDatabaseSharedThroughput,
|
||||
GeospatialConfigType,
|
||||
TtlType,
|
||||
ChangeFeedPolicyState,
|
||||
SettingsV2TabTypes,
|
||||
getTabTitle,
|
||||
isDirty,
|
||||
AddMongoIndexProps,
|
||||
MongoIndexTypes,
|
||||
parseConflictResolutionMode,
|
||||
parseConflictResolutionProcedure,
|
||||
SettingsV2TabTypes,
|
||||
TtlType,
|
||||
getMongoNotification,
|
||||
} from "./SettingsUtils";
|
||||
import {
|
||||
ConflictResolutionComponent,
|
||||
ConflictResolutionComponentProps,
|
||||
} from "./SettingsSubComponents/ConflictResolutionComponent";
|
||||
import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
|
||||
import { Pivot, PivotItem, IPivotProps, IPivotItemProps } from "office-ui-fabric-react";
|
||||
import "./SettingsComponent.less";
|
||||
import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
|
||||
import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
|
||||
import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
|
||||
import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
|
||||
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
|
||||
|
||||
interface SettingsV2TabInfo {
|
||||
tab: SettingsV2TabTypes;
|
||||
@@ -139,7 +137,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
this.shouldShowIndexingPolicyEditor =
|
||||
this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
|
||||
|
||||
this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
|
||||
this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
|
||||
Constants.Features.enableChangeFeedPolicy
|
||||
);
|
||||
|
||||
// Mongo container with system partition key still treat as "Fixed"
|
||||
this.isFixedContainer =
|
||||
@@ -325,6 +325,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
? this.saveCollectionSettings(startKey)
|
||||
: this.saveDatabaseSettings(startKey));
|
||||
} catch (error) {
|
||||
this.container.isRefreshingExplorer(false);
|
||||
this.props.settingsTab.isExecutionError(true);
|
||||
console.error(error);
|
||||
traceFailure(
|
||||
@@ -698,6 +699,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
}
|
||||
}
|
||||
|
||||
this.container.isRefreshingExplorer(false);
|
||||
this.setBaseline();
|
||||
this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
|
||||
traceSuccess(
|
||||
@@ -860,6 +862,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
});
|
||||
}
|
||||
}
|
||||
this.container.isRefreshingExplorer(false);
|
||||
this.setBaseline();
|
||||
this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
|
||||
traceSuccess(
|
||||
@@ -874,18 +877,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
);
|
||||
};
|
||||
|
||||
public getMongoIndexTabContent = (
|
||||
mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps
|
||||
): JSX.Element => {
|
||||
if (userContext.authType === AuthType.AAD) {
|
||||
if (this.container.isEnableMongoCapabilityPresent()) {
|
||||
return <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
return mongoIndexingPolicyAADError;
|
||||
};
|
||||
|
||||
public render(): JSX.Element {
|
||||
const scaleComponentProps: ScaleComponentProps = {
|
||||
collection: this.collection,
|
||||
@@ -1003,11 +994,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />,
|
||||
});
|
||||
} else if (this.container.isPreferredApiMongoDB()) {
|
||||
const mongoIndexTabContext = this.getMongoIndexTabContent(mongoIndexingPolicyComponentProps);
|
||||
if (mongoIndexTabContext) {
|
||||
if (this.container.isEnableMongoCapabilityPresent()) {
|
||||
tabs.push({
|
||||
tab: SettingsV2TabTypes.IndexingPolicyTab,
|
||||
content: mongoIndexTabContext,
|
||||
content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />,
|
||||
});
|
||||
} else {
|
||||
tabs.push({
|
||||
tab: SettingsV2TabTypes.IndexingPolicyTab,
|
||||
content: mongoIndexingPolicyAADError,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
ITextStyles,
|
||||
IDetailsRowStyles,
|
||||
IStackStyles,
|
||||
IIconStyles,
|
||||
IDetailsListStyles,
|
||||
IDropdownStyles,
|
||||
ISeparatorStyles,
|
||||
@@ -115,6 +116,8 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
|
||||
childrenGap: 20,
|
||||
};
|
||||
|
||||
export const accordionIconStyles: IIconStyles = { root: { paddingTop: 7 } };
|
||||
|
||||
export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };
|
||||
|
||||
export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };
|
||||
|
||||
@@ -239,7 +239,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
|
||||
|
||||
return (
|
||||
<Stack {...createAndAddMongoIndexStackProps} styles={mediumWidthStackStyles}>
|
||||
<CollapsibleSectionComponent title="Current index(es)" isExpandedByDefault={true}>
|
||||
<CollapsibleSectionComponent title="Current index(es)">
|
||||
{
|
||||
<>
|
||||
<DetailsList
|
||||
@@ -266,7 +266,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
|
||||
|
||||
return (
|
||||
<Stack styles={mediumWidthStackStyles}>
|
||||
<CollapsibleSectionComponent title="Index(es) to be dropped" isExpandedByDefault={true}>
|
||||
<CollapsibleSectionComponent title="Index(es) to be dropped">
|
||||
{indexesToBeDropped.length > 0 && (
|
||||
<DetailsList
|
||||
styles={customDetailsListStyles}
|
||||
|
||||
@@ -42,7 +42,6 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
|
||||
}
|
||||
>
|
||||
<CollapsibleSectionComponent
|
||||
isExpandedByDefault={true}
|
||||
title="Current index(es)"
|
||||
>
|
||||
<StyledWithViewportComponent
|
||||
@@ -115,7 +114,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
|
||||
</Stack>
|
||||
</CollapsibleSectionComponent>
|
||||
</Stack>
|
||||
<Separator
|
||||
<Styled
|
||||
styles={
|
||||
Object {
|
||||
"root": Array [
|
||||
@@ -140,7 +139,6 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
|
||||
}
|
||||
>
|
||||
<CollapsibleSectionComponent
|
||||
isExpandedByDefault={true}
|
||||
title="Index(es) to be dropped"
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
@@ -1,24 +1,23 @@
|
||||
import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "office-ui-fabric-react";
|
||||
import * as React from "react";
|
||||
import * as Constants from "../../../../Common/Constants";
|
||||
import { configContext, Platform } from "../../../../ConfigContext";
|
||||
import * as DataModels from "../../../../Contracts/DataModels";
|
||||
import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
|
||||
import * as ViewModels from "../../../../Contracts/ViewModels";
|
||||
import * as DataModels from "../../../../Contracts/DataModels";
|
||||
import * as SharedConstants from "../../../../Shared/Constants";
|
||||
import { userContext } from "../../../../UserContext";
|
||||
import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
|
||||
import Explorer from "../../../Explorer";
|
||||
import {
|
||||
getTextFieldStyles,
|
||||
subComponentStackProps,
|
||||
titleAndInputStackProps,
|
||||
throughputUnit,
|
||||
getThroughputApplyLongDelayMessage,
|
||||
getThroughputApplyShortDelayMessage,
|
||||
subComponentStackProps,
|
||||
throughputUnit,
|
||||
titleAndInputStackProps,
|
||||
updateThroughputBeyondLimitWarningMessage,
|
||||
} from "../SettingsRenderUtils";
|
||||
import { hasDatabaseSharedThroughput } from "../SettingsUtils";
|
||||
import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
|
||||
import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
|
||||
import { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
|
||||
import { configContext, Platform } from "../../../../ConfigContext";
|
||||
|
||||
export interface ScaleComponentProps {
|
||||
collection: ViewModels.Collection;
|
||||
@@ -80,7 +79,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
|
||||
};
|
||||
|
||||
public getMaxRUs = (): number => {
|
||||
if (userContext.isTryCosmosDBSubscription) {
|
||||
if (this.props.container?.isTryCosmosDBSubscription()) {
|
||||
return Constants.TryCosmosExperience.maxRU;
|
||||
}
|
||||
|
||||
@@ -92,7 +91,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
|
||||
};
|
||||
|
||||
public getMinRUs = (): number => {
|
||||
if (userContext.isTryCosmosDBSubscription) {
|
||||
if (this.props.container?.isTryCosmosDBSubscription()) {
|
||||
return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
|
||||
}
|
||||
|
||||
@@ -173,6 +172,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
|
||||
databaseAccount={this.props.container.databaseAccount()}
|
||||
databaseName={this.databaseId}
|
||||
collectionName={this.collectionId}
|
||||
serverId={this.props.container.serverId()}
|
||||
throughput={this.props.throughput}
|
||||
throughputBaseline={this.props.throughputBaseline}
|
||||
onThroughputChange={this.props.onThroughputChange}
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
import * as DataModels from "../../../../../Contracts/DataModels";
|
||||
import {
|
||||
ThroughputInputAutoPilotV3Component,
|
||||
ThroughputInputAutoPilotV3Props,
|
||||
} from "./ThroughputInputAutoPilotV3Component";
|
||||
import * as DataModels from "../../../../../Contracts/DataModels";
|
||||
|
||||
describe("ThroughputInputAutoPilotV3Component", () => {
|
||||
const baseProps: ThroughputInputAutoPilotV3Props = {
|
||||
databaseAccount: {} as DataModels.DatabaseAccount,
|
||||
databaseName: "test",
|
||||
collectionName: "test",
|
||||
serverId: undefined,
|
||||
wasAutopilotOriginallySet: false,
|
||||
throughput: 100,
|
||||
throughputBaseline: 100,
|
||||
|
||||
@@ -1,52 +1,55 @@
|
||||
import React from "react";
|
||||
import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
|
||||
import {
|
||||
Checkbox,
|
||||
getTextFieldStyles,
|
||||
getToolTipContainer,
|
||||
noLeftPaddingCheckBoxStyle,
|
||||
titleAndInputStackProps,
|
||||
checkBoxAndInputStackProps,
|
||||
getChoiceGroupStyles,
|
||||
messageBarStyles,
|
||||
getEstimatedSpendingElement,
|
||||
getAutoPilotV3SpendElement,
|
||||
manualToAutoscaleDisclaimerElement,
|
||||
saveThroughputWarningMessage,
|
||||
ManualEstimatedSpendingDisplayProps,
|
||||
AutoscaleEstimatedSpendingDisplayProps,
|
||||
PriceBreakdown,
|
||||
getRuPriceBreakdown,
|
||||
transparentDetailsHeaderStyle,
|
||||
} from "../../SettingsRenderUtils";
|
||||
import {
|
||||
Text,
|
||||
TextField,
|
||||
ChoiceGroup,
|
||||
FontIcon,
|
||||
IChoiceGroupOption,
|
||||
IColumn,
|
||||
Checkbox,
|
||||
Stack,
|
||||
Label,
|
||||
Link,
|
||||
MessageBar,
|
||||
Stack,
|
||||
Text,
|
||||
TextField,
|
||||
FontIcon,
|
||||
IColumn,
|
||||
} from "office-ui-fabric-react";
|
||||
import React from "react";
|
||||
import * as DataModels from "../../../../../Contracts/DataModels";
|
||||
import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
|
||||
import * as SharedConstants from "../../../../../Shared/Constants";
|
||||
import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../../../../UserContext";
|
||||
import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
|
||||
import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
|
||||
import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
|
||||
import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
|
||||
import {
|
||||
AutoscaleEstimatedSpendingDisplayProps,
|
||||
checkBoxAndInputStackProps,
|
||||
getAutoPilotV3SpendElement,
|
||||
getChoiceGroupStyles,
|
||||
getEstimatedSpendingElement,
|
||||
getRuPriceBreakdown,
|
||||
getTextFieldStyles,
|
||||
getToolTipContainer,
|
||||
ManualEstimatedSpendingDisplayProps,
|
||||
manualToAutoscaleDisclaimerElement,
|
||||
messageBarStyles,
|
||||
noLeftPaddingCheckBoxStyle,
|
||||
PriceBreakdown,
|
||||
saveThroughputWarningMessage,
|
||||
titleAndInputStackProps,
|
||||
transparentDetailsHeaderStyle,
|
||||
} from "../../SettingsRenderUtils";
|
||||
import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
|
||||
import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
|
||||
import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
|
||||
import * as SharedConstants from "../../../../../Shared/Constants";
|
||||
import * as DataModels from "../../../../../Contracts/DataModels";
|
||||
import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
|
||||
import { userContext } from "../../../../../UserContext";
|
||||
import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
|
||||
import { usageInGB, calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
|
||||
import { Features } from "../../../../../Common/Constants";
|
||||
import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
|
||||
|
||||
import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
|
||||
|
||||
export interface ThroughputInputAutoPilotV3Props {
|
||||
databaseAccount: DataModels.DatabaseAccount;
|
||||
databaseName: string;
|
||||
collectionName: string;
|
||||
serverId: string;
|
||||
throughput: number;
|
||||
throughputBaseline: number;
|
||||
onThroughputChange: (newThroughput: number) => void;
|
||||
@@ -179,6 +182,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
|
||||
}
|
||||
|
||||
const isDirty: boolean = this.IsComponentDirty().isDiscardable;
|
||||
const serverId: string = this.props.serverId;
|
||||
const regions = account?.properties?.readLocations?.length || 1;
|
||||
const multimaster = account?.properties?.enableMultipleWriteLocations || false;
|
||||
|
||||
@@ -188,7 +192,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
|
||||
estimatedSpend = this.getEstimatedManualSpendElement(
|
||||
// if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
|
||||
this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
isDirty ? this.props.throughput : undefined
|
||||
@@ -196,7 +200,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
|
||||
} else {
|
||||
estimatedSpend = this.getEstimatedAutoscaleSpendElement(
|
||||
this.props.maxAutoPilotThroughputBaseline,
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
isDirty ? this.props.maxAutoPilotThroughput : undefined
|
||||
@@ -464,7 +468,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
|
||||
const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
|
||||
const oneTBinKB = 1000000000;
|
||||
const minRUperGB = 10;
|
||||
const featureFlagEnabled = userContext.features.showMinRUSurvey;
|
||||
const featureFlagEnabled = window.dataExplorer?.isFeatureEnabled(Features.showMinRUSurvey);
|
||||
const collectionIsEligible =
|
||||
userContext.subscriptionType !== SubscriptionType.Internal &&
|
||||
this.props.usageSizeInKB > oneTBinKB &&
|
||||
|
||||
@@ -41,7 +41,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
|
||||
}
|
||||
}
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
ariaLabel="Info"
|
||||
iconName="Info"
|
||||
styles={
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
import ko from "knockout";
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import { collection } from "./TestUtils";
|
||||
import {
|
||||
getMongoIndexType,
|
||||
getMongoIndexTypeText,
|
||||
getMongoNotification,
|
||||
getSanitizedInputValue,
|
||||
hasDatabaseSharedThroughput,
|
||||
isDirty,
|
||||
isIndexTransforming,
|
||||
MongoIndexTypes,
|
||||
MongoNotificationType,
|
||||
MongoWildcardPlaceHolder,
|
||||
parseConflictResolutionMode,
|
||||
parseConflictResolutionProcedure,
|
||||
MongoWildcardPlaceHolder,
|
||||
getMongoIndexTypeText,
|
||||
SingleFieldText,
|
||||
WildcardText,
|
||||
isIndexTransforming,
|
||||
} from "./SettingsUtils";
|
||||
import { collection } from "./TestUtils";
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import ko from "knockout";
|
||||
|
||||
describe("SettingsUtils", () => {
|
||||
it("hasDatabaseSharedThroughput", () => {
|
||||
@@ -42,6 +42,7 @@ describe("SettingsUtils", () => {
|
||||
loadCollections: undefined,
|
||||
findCollectionWithId: undefined,
|
||||
openAddCollection: undefined,
|
||||
onDeleteDatabaseContextMenuClick: undefined,
|
||||
readSettings: undefined,
|
||||
onSettingsClick: undefined,
|
||||
loadOffer: undefined,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
import { DescriptionType, NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
|
||||
import { shallow } from "enzyme";
|
||||
import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
|
||||
import { NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
|
||||
|
||||
describe("SmartUiComponent", () => {
|
||||
const exampleData: SmartUiDescriptor = {
|
||||
@@ -18,12 +18,10 @@ describe("SmartUiComponent", () => {
|
||||
{
|
||||
id: "description",
|
||||
input: {
|
||||
labelTKey: undefined,
|
||||
dataFieldName: "description",
|
||||
type: "string",
|
||||
description: {
|
||||
textTKey: "this is an example description text.",
|
||||
type: DescriptionType.Text,
|
||||
link: {
|
||||
href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
|
||||
textTKey: "Click here for more information.",
|
||||
@@ -97,9 +95,9 @@ describe("SmartUiComponent", () => {
|
||||
dataFieldName: "database",
|
||||
type: "object",
|
||||
choices: [
|
||||
{ labelTKey: "Database 1", key: "db1" },
|
||||
{ labelTKey: "Database 2", key: "db2" },
|
||||
{ labelTKey: "Database 3", key: "db3" },
|
||||
{ label: "Database 1", key: "db1" },
|
||||
{ label: "Database 2", key: "db2" },
|
||||
{ label: "Database 3", key: "db3" },
|
||||
],
|
||||
defaultKey: "db2",
|
||||
},
|
||||
|
||||
@@ -1,26 +1,24 @@
|
||||
import { TFunction } from "i18next";
|
||||
import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
|
||||
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
|
||||
import * as React from "react";
|
||||
import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
|
||||
import { Slider } from "office-ui-fabric-react/lib/Slider";
|
||||
import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
|
||||
import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
|
||||
import { Text } from "office-ui-fabric-react/lib/Text";
|
||||
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
|
||||
import { TextField } from "office-ui-fabric-react/lib/TextField";
|
||||
import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
|
||||
import * as React from "react";
|
||||
import { Text } from "office-ui-fabric-react/lib/Text";
|
||||
import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
|
||||
import { Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
|
||||
import * as InputUtils from "./InputUtils";
|
||||
import "./SmartUiComponent.less";
|
||||
import {
|
||||
ChoiceItem,
|
||||
Description,
|
||||
DescriptionType,
|
||||
Info,
|
||||
InputType,
|
||||
InputTypeValue,
|
||||
NumberUiType,
|
||||
SmartUiInput,
|
||||
} from "../../../SelfServe/SelfServeTypes";
|
||||
import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent";
|
||||
import * as InputUtils from "./InputUtils";
|
||||
import "./SmartUiComponent.less";
|
||||
import { TFunction } from "i18next";
|
||||
|
||||
/**
|
||||
* Generic UX renderer
|
||||
@@ -31,14 +29,15 @@ import "./SmartUiComponent.less";
|
||||
*/
|
||||
|
||||
interface BaseDisplay {
|
||||
labelTKey: string;
|
||||
dataFieldName: string;
|
||||
errorMessage?: string;
|
||||
type: InputTypeValue;
|
||||
}
|
||||
|
||||
interface BaseInput extends BaseDisplay {
|
||||
labelTKey: string;
|
||||
placeholderTKey?: string;
|
||||
errorMessage?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -68,8 +67,7 @@ interface ChoiceInput extends BaseInput {
|
||||
}
|
||||
|
||||
interface DescriptionDisplay extends BaseDisplay {
|
||||
description?: Description;
|
||||
isDynamicDescription?: boolean;
|
||||
description: Description;
|
||||
}
|
||||
|
||||
type AnyDisplay = NumberInput | BooleanInput | StringInput | ChoiceInput | DescriptionDisplay;
|
||||
@@ -125,28 +123,25 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
|
||||
private renderInfo(info: Info): JSX.Element {
|
||||
return (
|
||||
info && (
|
||||
<Text>
|
||||
{this.props.getTranslation(info.messageTKey)}{" "}
|
||||
<MessageBar styles={{ root: { width: 400 } }}>
|
||||
{this.props.getTranslation(info.messageTKey)}
|
||||
{info.link && (
|
||||
<Link href={info.link.href} target="_blank">
|
||||
{this.props.getTranslation(info.link.textTKey)}
|
||||
</Link>
|
||||
)}
|
||||
</Text>
|
||||
)
|
||||
</MessageBar>
|
||||
);
|
||||
}
|
||||
|
||||
private renderTextInput(input: StringInput, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
private renderTextInput(input: StringInput): JSX.Element {
|
||||
const value = this.props.currentValues.get(input.dataFieldName)?.value as string;
|
||||
const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
|
||||
return (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<div className="stringInputContainer">
|
||||
<TextField
|
||||
id={`${input.dataFieldName}-textField-input`}
|
||||
aria-labelledby={labelId}
|
||||
label={this.props.getTranslation(input.labelTKey)}
|
||||
type="text"
|
||||
value={value || ""}
|
||||
placeholder={this.props.getTranslation(input.placeholderTKey)}
|
||||
@@ -154,42 +149,32 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
onChange={(_, newValue) => this.props.onInputChange(input, newValue)}
|
||||
styles={{
|
||||
root: { width: 400 },
|
||||
subComponentStyles: {
|
||||
label: {
|
||||
root: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private renderDescription(input: DescriptionDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
const dataFieldName = input.dataFieldName;
|
||||
const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
|
||||
if (!description) {
|
||||
if (!input.isDynamicDescription) {
|
||||
return this.renderError("Description is not provided.");
|
||||
}
|
||||
// If input is a dynamic description and description is not available, empty element is rendered
|
||||
return <></>;
|
||||
}
|
||||
const descriptionElement = (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
|
||||
{this.props.getTranslation(description.textTKey)}{" "}
|
||||
private renderDescription(input: DescriptionDisplay): JSX.Element {
|
||||
const description = input.description;
|
||||
return (
|
||||
<Text id={`${input.dataFieldName}-text-display`}>
|
||||
{this.props.getTranslation(input.description.textTKey)}{" "}
|
||||
{description.link && (
|
||||
<Link target="_blank" href={description.link.href}>
|
||||
{this.props.getTranslation(description.link.textTKey)}
|
||||
<Link target="_blank" href={input.description.link.href}>
|
||||
{this.props.getTranslation(input.description.link.textTKey)}
|
||||
</Link>
|
||||
)}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
if (description.type === DescriptionType.Text) {
|
||||
return descriptionElement;
|
||||
}
|
||||
const messageBarType =
|
||||
description.type === DescriptionType.InfoMessageBar ? MessageBarType.info : MessageBarType.warning;
|
||||
return <MessageBar messageBarType={messageBarType}>{descriptionElement}</MessageBar>;
|
||||
}
|
||||
|
||||
private clearError(dataFieldName: string): void {
|
||||
@@ -235,12 +220,13 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
return undefined;
|
||||
};
|
||||
|
||||
private renderNumberInput(input: NumberInput, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
private renderNumberInput(input: NumberInput): JSX.Element {
|
||||
const { labelTKey, min, max, dataFieldName, step } = input;
|
||||
const props = {
|
||||
label: this.props.getTranslation(labelTKey),
|
||||
min: min,
|
||||
max: max,
|
||||
ariaLabel: this.props.getTranslation(labelTKey),
|
||||
ariaLabel: labelTKey,
|
||||
step: step,
|
||||
};
|
||||
|
||||
@@ -248,8 +234,6 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
|
||||
if (input.uiType === NumberUiType.Spinner) {
|
||||
return (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
|
||||
<SpinButton
|
||||
{...props}
|
||||
@@ -259,21 +243,21 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
|
||||
onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
|
||||
labelPosition={Position.top}
|
||||
aria-labelledby={labelId}
|
||||
disabled={disabled}
|
||||
styles={{
|
||||
label: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{this.state.errors.has(dataFieldName) && (
|
||||
<MessageBar messageBarType={MessageBarType.error}>
|
||||
Error: {this.state.errors.get(dataFieldName)}
|
||||
</MessageBar>
|
||||
<MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
} else if (input.uiType === NumberUiType.Slider) {
|
||||
return (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<div id={`${input.dataFieldName}-slider-input`}>
|
||||
<Slider
|
||||
{...props}
|
||||
@@ -282,26 +266,27 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
onChange={(newValue) => this.props.onInputChange(input, newValue)}
|
||||
styles={{
|
||||
root: { width: 400 },
|
||||
titleLabel: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600,
|
||||
},
|
||||
valueLabel: SmartUiComponent.labelStyle,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
);
|
||||
} else {
|
||||
return <>Unsupported number UI type {input.uiType}</>;
|
||||
}
|
||||
}
|
||||
|
||||
private renderBooleanInput(input: BooleanInput, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
private renderBooleanInput(input: BooleanInput): JSX.Element {
|
||||
const value = this.props.currentValues.get(input.dataFieldName)?.value as boolean;
|
||||
const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
|
||||
return (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Toggle
|
||||
id={`${input.dataFieldName}-toggle-input`}
|
||||
aria-labelledby={labelId}
|
||||
label={this.props.getTranslation(input.labelTKey)}
|
||||
checked={value || false}
|
||||
onText={this.props.getTranslation(input.trueLabelTKey)}
|
||||
offText={this.props.getTranslation(input.falseLabelTKey)}
|
||||
@@ -309,12 +294,11 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
|
||||
styles={{ root: { width: 400 } }}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
private renderChoiceInput(input: ChoiceInput, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
const { defaultKey, dataFieldName, choices, placeholderTKey } = input;
|
||||
private renderChoiceInput(input: ChoiceInput): JSX.Element {
|
||||
const { labelTKey, defaultKey, dataFieldName, choices, placeholderTKey } = input;
|
||||
const value = this.props.currentValues.get(dataFieldName)?.value as string;
|
||||
const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
|
||||
let selectedKey = value ? value : defaultKey;
|
||||
@@ -322,67 +306,53 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
selectedKey = "";
|
||||
}
|
||||
return (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Dropdown
|
||||
id={`${input.dataFieldName}-dropdown-input`}
|
||||
aria-labelledby={labelId}
|
||||
label={this.props.getTranslation(labelTKey)}
|
||||
selectedKey={selectedKey}
|
||||
onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
|
||||
placeholder={this.props.getTranslation(placeholderTKey)}
|
||||
disabled={disabled}
|
||||
// Removed dropdownWidth="auto" as dropdown accept only number
|
||||
options={choices.map((c) => ({
|
||||
key: c.key,
|
||||
text: this.props.getTranslation(c.labelTKey),
|
||||
text: this.props.getTranslation(c.label),
|
||||
}))}
|
||||
styles={{
|
||||
root: { width: 400 },
|
||||
label: {
|
||||
...SmartUiComponent.labelStyle,
|
||||
fontWeight: 600,
|
||||
},
|
||||
dropdown: SmartUiComponent.labelStyle,
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
private renderError(errorMessage: string): JSX.Element {
|
||||
return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
|
||||
private renderError(input: AnyDisplay): JSX.Element {
|
||||
return <MessageBar messageBarType={MessageBarType.error}>Error: {input.errorMessage}</MessageBar>;
|
||||
}
|
||||
|
||||
private renderElement(input: AnyDisplay, info: Info): JSX.Element {
|
||||
private renderDisplay(input: AnyDisplay): JSX.Element {
|
||||
if (input.errorMessage) {
|
||||
return this.renderError(input.errorMessage);
|
||||
return this.renderError(input);
|
||||
}
|
||||
const inputHidden = this.props.currentValues.get(input.dataFieldName)?.hidden;
|
||||
if (inputHidden) {
|
||||
return <></>;
|
||||
}
|
||||
const labelId = `${input.dataFieldName}-label`;
|
||||
const labelElement: JSX.Element = input.labelTKey && (
|
||||
<Label id={labelId}>
|
||||
<ToolTipLabelComponent
|
||||
label={this.props.getTranslation(input.labelTKey)}
|
||||
toolTipElement={this.renderInfo(info)}
|
||||
/>
|
||||
</Label>
|
||||
);
|
||||
|
||||
return <Stack>{this.renderControl(input, labelId, labelElement)}</Stack>;
|
||||
}
|
||||
|
||||
private renderControl(input: AnyDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
switch (input.type) {
|
||||
case "string":
|
||||
if ("description" in input || "isDynamicDescription" in input) {
|
||||
return this.renderDescription(input as DescriptionDisplay, labelId, labelElement);
|
||||
if ("description" in input) {
|
||||
return this.renderDescription(input as DescriptionDisplay);
|
||||
}
|
||||
return this.renderTextInput(input as StringInput, labelId, labelElement);
|
||||
return this.renderTextInput(input as StringInput);
|
||||
case "number":
|
||||
return this.renderNumberInput(input as NumberInput, labelId, labelElement);
|
||||
return this.renderNumberInput(input as NumberInput);
|
||||
case "boolean":
|
||||
return this.renderBooleanInput(input as BooleanInput, labelId, labelElement);
|
||||
return this.renderBooleanInput(input as BooleanInput);
|
||||
case "object":
|
||||
return this.renderChoiceInput(input as ChoiceInput, labelId, labelElement);
|
||||
return this.renderChoiceInput(input as ChoiceInput);
|
||||
default:
|
||||
throw new Error(`Unknown input type: ${input.type}`);
|
||||
}
|
||||
@@ -393,7 +363,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
|
||||
return (
|
||||
<Stack tokens={containerStackTokens} className="widgetRendererContainer">
|
||||
<Stack.Item>{node.input && this.renderElement(node.input, node.info as Info)}</Stack.Item>
|
||||
<Stack.Item>
|
||||
{node.info && this.renderInfo(node.info as Info)}
|
||||
{node.input && this.renderDisplay(node.input)}
|
||||
</Stack.Item>
|
||||
{node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -9,7 +9,25 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
}
|
||||
>
|
||||
<StackItem />
|
||||
<StackItem>
|
||||
<StyledMessageBarBase
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
Start at $24/mo per database
|
||||
<StyledLinkBase
|
||||
href="https://aka.ms/azure-cosmos-db-pricing"
|
||||
target="_blank"
|
||||
>
|
||||
More Details
|
||||
</StyledLinkBase>
|
||||
</StyledMessageBarBase>
|
||||
</StackItem>
|
||||
<div
|
||||
key="description"
|
||||
>
|
||||
@@ -22,10 +40,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
id="description-text-display"
|
||||
>
|
||||
this is an example description text.
|
||||
@@ -37,8 +52,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -54,15 +67,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (input)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<Stack
|
||||
styles={
|
||||
Object {
|
||||
@@ -78,7 +82,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<CustomizedSpinButton
|
||||
aria-labelledby="throughput-label"
|
||||
ariaLabel="Throughput (input)"
|
||||
decrementButtonIcon={
|
||||
Object {
|
||||
@@ -92,7 +95,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
"iconName": "ChevronUpSmall",
|
||||
}
|
||||
}
|
||||
label=""
|
||||
label="Throughput (input)"
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
@@ -100,10 +103,18 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"label": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -119,21 +130,13 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (Slider)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
disabled={true}
|
||||
label="Throughput (Slider)"
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
@@ -143,6 +146,12 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"titleLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
"valueLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
@@ -152,8 +161,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -190,32 +197,35 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledTextFieldBase
|
||||
aria-labelledby="containerId-label"
|
||||
disabled={true}
|
||||
id="containerId-textField-input"
|
||||
label="Container id"
|
||||
onChange={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"subComponentStyles": Object {
|
||||
"label": Object {
|
||||
"root": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -231,20 +241,11 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledToggleBase
|
||||
aria-labelledby="analyticalStore-label"
|
||||
checked={false}
|
||||
disabled={true}
|
||||
id="analyticalStore-toggle-input"
|
||||
label="Analytical Store"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
@@ -256,8 +257,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -273,19 +272,10 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Database"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledWithResponsiveMode
|
||||
aria-labelledby="database-label"
|
||||
disabled={true}
|
||||
id="database-dropdown-input"
|
||||
label="Database"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
@@ -311,14 +301,18 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
"label": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -334,7 +328,25 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
}
|
||||
>
|
||||
<StackItem />
|
||||
<StackItem>
|
||||
<StyledMessageBarBase
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
Start at $24/mo per database
|
||||
<StyledLinkBase
|
||||
href="https://aka.ms/azure-cosmos-db-pricing"
|
||||
target="_blank"
|
||||
>
|
||||
More Details
|
||||
</StyledLinkBase>
|
||||
</StyledMessageBarBase>
|
||||
</StackItem>
|
||||
<div
|
||||
key="description"
|
||||
>
|
||||
@@ -347,10 +359,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
id="description-text-display"
|
||||
>
|
||||
this is an example description text.
|
||||
@@ -362,8 +371,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -379,15 +386,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (input)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<Stack
|
||||
styles={
|
||||
Object {
|
||||
@@ -403,7 +401,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<CustomizedSpinButton
|
||||
aria-labelledby="throughput-label"
|
||||
ariaLabel="Throughput (input)"
|
||||
decrementButtonIcon={
|
||||
Object {
|
||||
@@ -417,7 +414,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
"iconName": "ChevronUpSmall",
|
||||
}
|
||||
}
|
||||
label=""
|
||||
label="Throughput (input)"
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
@@ -425,10 +422,18 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"label": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -444,20 +449,12 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (Slider)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
label="Throughput (Slider)"
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
@@ -467,6 +464,12 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"titleLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
"valueLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
@@ -476,8 +479,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -514,31 +515,34 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledTextFieldBase
|
||||
aria-labelledby="containerId-label"
|
||||
id="containerId-textField-input"
|
||||
label="Container id"
|
||||
onChange={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"subComponentStyles": Object {
|
||||
"label": Object {
|
||||
"root": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -554,19 +558,10 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledToggleBase
|
||||
aria-labelledby="analyticalStore-label"
|
||||
checked={false}
|
||||
id="analyticalStore-toggle-input"
|
||||
label="Analytical Store"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
@@ -578,8 +573,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
@@ -595,18 +588,9 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
}
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Database"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledWithResponsiveMode
|
||||
aria-labelledby="database-label"
|
||||
id="database-dropdown-input"
|
||||
label="Database"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
@@ -632,14 +616,18 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
"label": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
},
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
@import "../../../../less/Common/Constants";
|
||||
|
||||
.throughputInputContainer {
|
||||
.throughputInputRadioBtn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.throughputInputRadioBtnLabel {
|
||||
font-size: @mediumFontSize;
|
||||
padding: 0 @LargeSpace 0 @SmallSpace;
|
||||
}
|
||||
|
||||
.throughputInputSpacing {
|
||||
margin-bottom: @SmallSpace;
|
||||
|
||||
& > * {
|
||||
margin-bottom: @SmallSpace;
|
||||
}
|
||||
}
|
||||
@@ -1,302 +0,0 @@
|
||||
import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "office-ui-fabric-react";
|
||||
import React from "react";
|
||||
import * as Constants from "../../../Common/Constants";
|
||||
import * as SharedConstants from "../../../Shared/Constants";
|
||||
import { userContext } from "../../../UserContext";
|
||||
import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
|
||||
import * as PricingUtils from "../../../Utils/PricingUtils";
|
||||
|
||||
export interface ThroughputInputProps {
|
||||
isDatabase: boolean;
|
||||
showFreeTierExceedThroughputTooltip: boolean;
|
||||
setThroughputValue: (throughput: number) => void;
|
||||
setIsAutoscale: (isAutoscale: boolean) => void;
|
||||
onCostAcknowledgeChange: (isAcknowledged: boolean) => void;
|
||||
}
|
||||
|
||||
export interface ThroughputInputState {
|
||||
isAutoscaleSelected: boolean;
|
||||
throughput: number;
|
||||
isCostAcknowledged: boolean;
|
||||
}
|
||||
|
||||
export class ThroughputInput extends React.Component<ThroughputInputProps, ThroughputInputState> {
|
||||
constructor(props: ThroughputInputProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isAutoscaleSelected: true,
|
||||
throughput: AutoPilotUtils.minAutoPilotThroughput,
|
||||
isCostAcknowledged: false,
|
||||
};
|
||||
|
||||
this.props.setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
|
||||
this.props.setIsAutoscale(true);
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
return (
|
||||
<div className="throughputInputContainer throughputInputSpacing">
|
||||
<Stack horizontal>
|
||||
<span className="mandatoryStar">* </span>
|
||||
<Text variant="small" style={{ lineHeight: "20px" }}>
|
||||
{this.getThroughputLabelText()}
|
||||
</Text>
|
||||
<TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={PricingUtils.getRuToolTipText()}>
|
||||
<Icon iconName="InfoSolid" className="panelInfoIcon" />
|
||||
</TooltipHost>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal verticalAlign="center">
|
||||
<input
|
||||
className="throughputInputRadioBtn"
|
||||
aria-label="Autoscale mode"
|
||||
checked={this.state.isAutoscaleSelected}
|
||||
type="radio"
|
||||
role="radio"
|
||||
tabIndex={0}
|
||||
onChange={this.onAutoscaleRadioBtnChange.bind(this)}
|
||||
/>
|
||||
<span className="throughputInputRadioBtnLabel">Autoscale</span>
|
||||
|
||||
<input
|
||||
className="throughputInputRadioBtn"
|
||||
aria-label="Manual mode"
|
||||
checked={!this.state.isAutoscaleSelected}
|
||||
type="radio"
|
||||
role="radio"
|
||||
tabIndex={0}
|
||||
onChange={this.onManualRadioBtnChange.bind(this)}
|
||||
/>
|
||||
<span className="throughputInputRadioBtnLabel">Manual</span>
|
||||
</Stack>
|
||||
|
||||
{this.state.isAutoscaleSelected && (
|
||||
<Stack className="throughputInputSpacing">
|
||||
<Text variant="small">
|
||||
Provision maximum RU/s required by this resource. Estimate your required RU/s with
|
||||
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
|
||||
capacity calculator
|
||||
</Link>
|
||||
.
|
||||
</Text>
|
||||
|
||||
<Stack horizontal>
|
||||
<Text variant="small" style={{ lineHeight: "20px" }}>
|
||||
Max RU/s
|
||||
</Text>
|
||||
<TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={this.getAutoScaleTooltip()}>
|
||||
<Icon iconName="InfoSolid" className="panelInfoIcon" />
|
||||
</TooltipHost>
|
||||
</Stack>
|
||||
|
||||
<TextField
|
||||
type="number"
|
||||
styles={{
|
||||
fieldGroup: { width: 300, height: 27 },
|
||||
field: { fontSize: 12 },
|
||||
}}
|
||||
onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
|
||||
step={AutoPilotUtils.autoPilotIncrementStep}
|
||||
min={AutoPilotUtils.minAutoPilotThroughput}
|
||||
value={this.state.throughput.toString()}
|
||||
aria-label="Max request units per second"
|
||||
required={true}
|
||||
/>
|
||||
|
||||
<Text variant="small">
|
||||
Your {this.props.isDatabase ? "database" : "container"} throughput will automatically scale from{" "}
|
||||
<b>
|
||||
{AutoPilotUtils.getMinRUsBasedOnUserInput(this.state.throughput)} RU/s (10% of max RU/s) -{" "}
|
||||
{this.state.throughput} RU/s
|
||||
</b>{" "}
|
||||
based on usage.
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{!this.state.isAutoscaleSelected && (
|
||||
<Stack className="throughputInputSpacing">
|
||||
<Text variant="small">
|
||||
Estimate your required RU/s with
|
||||
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
|
||||
capacity calculator
|
||||
</Link>
|
||||
.
|
||||
</Text>
|
||||
|
||||
<TooltipHost
|
||||
directionalHint={DirectionalHint.topLeftEdge}
|
||||
content={
|
||||
this.props.showFreeTierExceedThroughputTooltip &&
|
||||
this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs400
|
||||
? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<TextField
|
||||
type="number"
|
||||
styles={{
|
||||
fieldGroup: { width: 300, height: 27 },
|
||||
field: { fontSize: 12 },
|
||||
}}
|
||||
onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
|
||||
step={100}
|
||||
min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
|
||||
max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
|
||||
value={this.state.throughput.toString()}
|
||||
aria-label="Max request units per second"
|
||||
required={true}
|
||||
/>
|
||||
</TooltipHost>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<CostEstimateText requestUnits={this.state.throughput} isAutoscale={this.state.isAutoscaleSelected} />
|
||||
|
||||
{this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && (
|
||||
<Stack horizontal verticalAlign="start">
|
||||
<Checkbox
|
||||
checked={this.state.isCostAcknowledged}
|
||||
styles={{
|
||||
checkbox: { width: 12, height: 12 },
|
||||
label: { padding: 0, margin: "4px 4px 0 0" },
|
||||
}}
|
||||
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
|
||||
this.setState({ isCostAcknowledged: isChecked });
|
||||
this.props.onCostAcknowledgeChange(isChecked);
|
||||
}}
|
||||
/>
|
||||
<Text variant="small" style={{ lineHeight: "20px" }}>
|
||||
{this.getCostAcknowledgeText()}
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private getThroughputLabelText(): string {
|
||||
if (this.state.isAutoscaleSelected) {
|
||||
return AutoPilotUtils.getAutoPilotHeaderText();
|
||||
}
|
||||
|
||||
const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
|
||||
const maxRU: string = userContext.isTryCosmosDBSubscription
|
||||
? Constants.TryCosmosExperience.maxRU.toLocaleString()
|
||||
: "unlimited";
|
||||
return this.state.isAutoscaleSelected
|
||||
? AutoPilotUtils.getAutoPilotHeaderText()
|
||||
: `Throughput (${minRU} - ${maxRU} RU/s)`;
|
||||
}
|
||||
|
||||
private onThroughputValueChange(newInput: string): void {
|
||||
const newThroughput = parseInt(newInput);
|
||||
this.setState({ throughput: newThroughput });
|
||||
this.props.setThroughputValue(newThroughput);
|
||||
}
|
||||
|
||||
private getAutoScaleTooltip(): string {
|
||||
return `After the first ${AutoPilotUtils.getStorageBasedOnUserInput(
|
||||
this.state.throughput
|
||||
)} GB of data stored, the max
|
||||
RU/s will be automatically upgraded based on the new storage value.`;
|
||||
}
|
||||
|
||||
private getCostAcknowledgeText(): string {
|
||||
const databaseAccount = userContext.databaseAccount;
|
||||
if (!databaseAccount || !databaseAccount.properties) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
|
||||
const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
|
||||
|
||||
return PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.state.throughput,
|
||||
userContext.portalEnv,
|
||||
numberOfRegions,
|
||||
multimasterEnabled,
|
||||
this.state.isAutoscaleSelected
|
||||
);
|
||||
}
|
||||
|
||||
private onAutoscaleRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
||||
if (event.target.checked && !this.state.isAutoscaleSelected) {
|
||||
this.setState({ isAutoscaleSelected: true, throughput: AutoPilotUtils.minAutoPilotThroughput });
|
||||
this.props.setIsAutoscale(true);
|
||||
}
|
||||
}
|
||||
|
||||
private onManualRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
||||
if (event.target.checked && this.state.isAutoscaleSelected) {
|
||||
this.setState({
|
||||
isAutoscaleSelected: false,
|
||||
throughput: SharedConstants.CollectionCreation.DefaultCollectionRUs400,
|
||||
});
|
||||
this.props.setIsAutoscale(false);
|
||||
this.props.setThroughputValue(SharedConstants.CollectionCreation.DefaultCollectionRUs400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface CostEstimateTextProps {
|
||||
requestUnits: number;
|
||||
isAutoscale: boolean;
|
||||
}
|
||||
|
||||
const CostEstimateText: React.FunctionComponent<CostEstimateTextProps> = (props: CostEstimateTextProps) => {
|
||||
const { requestUnits, isAutoscale } = props;
|
||||
const databaseAccount = userContext.databaseAccount;
|
||||
if (!databaseAccount || !databaseAccount.properties) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const serverId: string = userContext.portalEnv;
|
||||
const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
|
||||
const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
|
||||
const hourlyPrice: number = PricingUtils.computeRUUsagePriceHourly({
|
||||
serverId,
|
||||
requestUnits,
|
||||
numberOfRegions,
|
||||
multimasterEnabled,
|
||||
isAutoscale,
|
||||
});
|
||||
const dailyPrice: number = hourlyPrice * 24;
|
||||
const monthlyPrice: number = hourlyPrice * SharedConstants.hoursInAMonth;
|
||||
const currency: string = PricingUtils.getPriceCurrency(serverId);
|
||||
const currencySign: string = PricingUtils.getCurrencySign(serverId);
|
||||
const multiplier = PricingUtils.getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
|
||||
const pricePerRu = isAutoscale
|
||||
? PricingUtils.getAutoscalePricePerRu(serverId, multiplier) * multiplier
|
||||
: PricingUtils.getPricePerRu(serverId) * multiplier;
|
||||
|
||||
if (isAutoscale) {
|
||||
return (
|
||||
<Text variant="small">
|
||||
Estimated monthly cost ({currency}):{" "}
|
||||
<b>
|
||||
{currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice / 10)} -{" "}
|
||||
{currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)}{" "}
|
||||
</b>
|
||||
({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "}
|
||||
RU/s, {currencySign + pricePerRu}/RU)
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Text variant="small">
|
||||
Cost ({currency}):{" "}
|
||||
<b>
|
||||
{currencySign + PricingUtils.calculateEstimateNumber(hourlyPrice)} hourly /{" "}
|
||||
{currencySign + PricingUtils.calculateEstimateNumber(dailyPrice)} daily /{" "}
|
||||
{currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)} monthly{" "}
|
||||
</b>
|
||||
({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "}
|
||||
{currencySign + pricePerRu}/RU)
|
||||
<br />
|
||||
<em>{PricingUtils.estimatedCostDisclaimer}</em>
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
@@ -129,6 +129,7 @@ export interface ThroughputInputParams {
|
||||
throughputModeRadioName: string;
|
||||
maxAutoPilotThroughputSet: ViewModels.Editable<number>;
|
||||
autoPilotUsageCost: ko.Computed<string>;
|
||||
showAutoPilot?: ko.Observable<boolean>;
|
||||
overrideWithAutoPilotSettings: ko.Observable<boolean>;
|
||||
overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
|
||||
freeTierExceedThroughputTooltip?: ko.Observable<string>;
|
||||
@@ -157,6 +158,7 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
|
||||
public infoBubbleText: string | ko.Observable<string>;
|
||||
public label: ko.Observable<string>;
|
||||
public isFixed: boolean;
|
||||
public showAutoPilot: ko.Observable<boolean>;
|
||||
public isAutoPilotSelected: ko.Observable<boolean>;
|
||||
public throughputAutoPilotRadioId: string;
|
||||
public throughputProvisionedRadioId: string;
|
||||
@@ -200,6 +202,7 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
|
||||
this.isFixed = !!options.isFixed;
|
||||
this.infoBubbleText = options.infoBubbleText || ko.observable<string>();
|
||||
this.label = options.label || ko.observable<string>();
|
||||
this.showAutoPilot = options.showAutoPilot !== undefined ? options.showAutoPilot : ko.observable<boolean>(true);
|
||||
this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
|
||||
this.isAutoPilotSelected.subscribe((value) => {
|
||||
TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
|
||||
<!-- ko if: !isFixed -->
|
||||
<div class="throughputModeContainer">
|
||||
<div data-bind="visible: showAutoPilot" class="throughputModeContainer">
|
||||
<input
|
||||
class="throughputModeRadio"
|
||||
aria-label="Autopilot mode"
|
||||
|
||||
@@ -2,17 +2,17 @@ jest.mock("../Graph/GraphExplorerComponent/GremlinClient");
|
||||
jest.mock("../../Common/dataAccess/createCollection");
|
||||
jest.mock("../../Common/dataAccess/createDocument");
|
||||
import * as ko from "knockout";
|
||||
import Q from "q";
|
||||
import { createDocument } from "../../Common/dataAccess/createDocument";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import { updateUserContext } from "../../UserContext";
|
||||
import Explorer from "../Explorer";
|
||||
import Q from "q";
|
||||
import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
|
||||
import { createDocument } from "../../Common/dataAccess/createDocument";
|
||||
import Explorer from "../Explorer";
|
||||
import { updateUserContext } from "../../UserContext";
|
||||
|
||||
describe("ContainerSampleGenerator", () => {
|
||||
const createExplorerStub = (database: ViewModels.Database): Explorer => {
|
||||
const explorerStub = {} as Explorer;
|
||||
explorerStub.databases = ko.observableArray<ViewModels.Database>([database]);
|
||||
explorerStub.nonSystemDatabases = ko.computed(() => [database]);
|
||||
explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => false);
|
||||
explorerStub.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
|
||||
explorerStub.isPreferredApiDocumentDB = ko.computed<boolean>(() => false);
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import * as ko from "knockout";
|
||||
import * as sinon from "sinon";
|
||||
import { Collection, Database } from "../../Contracts/ViewModels";
|
||||
import Explorer from "../Explorer";
|
||||
import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
|
||||
import { DataSamplesUtil } from "./DataSamplesUtil";
|
||||
import * as sinon from "sinon";
|
||||
import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
|
||||
import * as ko from "knockout";
|
||||
import Explorer from "../Explorer";
|
||||
import { Database, Collection } from "../../Contracts/ViewModels";
|
||||
|
||||
describe("DataSampleUtils", () => {
|
||||
const sampleCollectionId = "sampleCollectionId";
|
||||
@@ -16,7 +16,7 @@ describe("DataSampleUtils", () => {
|
||||
collections: ko.observableArray<Collection>([collection]),
|
||||
} as Database;
|
||||
const explorer = {} as Explorer;
|
||||
explorer.databases = ko.observableArray<Database>([database]);
|
||||
explorer.nonSystemDatabases = ko.computed(() => [database]);
|
||||
explorer.showOkModalDialog = () => {};
|
||||
const dataSamplesUtil = new DataSamplesUtil(explorer);
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
|
||||
import Explorer from "../Explorer";
|
||||
import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
|
||||
import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
|
||||
import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import Explorer from "../Explorer";
|
||||
|
||||
export class DataSamplesUtil {
|
||||
private static readonly DialogTitle = "Create Sample Container";
|
||||
@@ -17,7 +17,7 @@ export class DataSamplesUtil {
|
||||
|
||||
const databaseName = generator.getDatabaseId();
|
||||
const containerName = generator.getCollectionId();
|
||||
if (this.hasContainer(databaseName, containerName, this.container.databases())) {
|
||||
if (this.hasContainer(databaseName, containerName, this.container.nonSystemDatabases())) {
|
||||
const msg = `The container ${containerName} in database ${databaseName} already exists. Please delete it and retry.`;
|
||||
this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
|
||||
NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
jest.mock("./../Common/dataAccess/deleteDatabase");
|
||||
jest.mock("./../Shared/Telemetry/TelemetryProcessor");
|
||||
import * as ko from "knockout";
|
||||
import { deleteDatabase } from "./../Common/dataAccess/deleteDatabase";
|
||||
import * as ViewModels from "./../Contracts/ViewModels";
|
||||
import Explorer from "./Explorer";
|
||||
|
||||
describe("Explorer.isLastDatabase() and Explorer.isLastNonEmptyDatabase()", () => {
|
||||
let explorer: Explorer;
|
||||
beforeAll(() => {
|
||||
(deleteDatabase as jest.Mock).mockResolvedValue(undefined);
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
explorer = new Explorer();
|
||||
});
|
||||
|
||||
it("should be true if only 1 database", () => {
|
||||
const database = {} as ViewModels.Database;
|
||||
explorer.databases = ko.observableArray<ViewModels.Database>([database]);
|
||||
expect(explorer.isLastDatabase()).toBe(true);
|
||||
});
|
||||
|
||||
it("should be false if only 2 databases", () => {
|
||||
const database = {} as ViewModels.Database;
|
||||
const database2 = {} as ViewModels.Database;
|
||||
explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
|
||||
expect(explorer.isLastDatabase()).toBe(false);
|
||||
});
|
||||
|
||||
it("should be false if not last empty database", () => {
|
||||
const database = {} as ViewModels.Database;
|
||||
explorer.databases = ko.observableArray<ViewModels.Database>([database]);
|
||||
expect(explorer.isLastNonEmptyDatabase()).toBe(false);
|
||||
});
|
||||
|
||||
it("should be true if last non empty database", () => {
|
||||
const database = {} as ViewModels.Database;
|
||||
database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
|
||||
explorer.databases = ko.observableArray<ViewModels.Database>([database]);
|
||||
expect(explorer.isLastNonEmptyDatabase()).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -1,87 +1,93 @@
|
||||
import * as ko from "knockout";
|
||||
import { IChoiceGroupProps } from "office-ui-fabric-react";
|
||||
import * as path from "path";
|
||||
import Q from "q";
|
||||
import React from "react";
|
||||
import _ from "underscore";
|
||||
import { AuthType } from "../AuthType";
|
||||
import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
|
||||
import { ReactAdapter } from "../Bindings/ReactBindingHandler";
|
||||
import * as ComponentRegisterer from "./ComponentRegisterer";
|
||||
import * as Constants from "../Common/Constants";
|
||||
import { ExplorerMetrics } from "../Common/Constants";
|
||||
import * as DataModels from "../Contracts/DataModels";
|
||||
import * as ko from "knockout";
|
||||
import * as path from "path";
|
||||
import * as SharedConstants from "../Shared/Constants";
|
||||
import * as ViewModels from "../Contracts/ViewModels";
|
||||
import _ from "underscore";
|
||||
import AddCollectionPane from "./Panes/AddCollectionPane";
|
||||
import AddDatabasePane from "./Panes/AddDatabasePane";
|
||||
import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
|
||||
import AuthHeadersUtil from "../Platform/Hosted/Authorization";
|
||||
import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
|
||||
import Database from "./Tree/Database";
|
||||
import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
|
||||
import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
|
||||
import { readCollection } from "../Common/dataAccess/readCollection";
|
||||
import { readDatabases } from "../Common/dataAccess/readDatabases";
|
||||
import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
|
||||
import * as Logger from "../Common/Logger";
|
||||
import { sendCachedDataMessage, sendMessage } from "../Common/MessageHandler";
|
||||
import { QueriesClient } from "../Common/QueriesClient";
|
||||
import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter";
|
||||
import { configContext, Platform } from "../ConfigContext";
|
||||
import * as DataModels from "../Contracts/DataModels";
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
import { SubscriptionType } from "../Contracts/SubscriptionType";
|
||||
import * as ViewModels from "../Contracts/ViewModels";
|
||||
import { IGalleryItem } from "../Juno/JunoClient";
|
||||
import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
|
||||
import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
|
||||
import { RouteHandler } from "../RouteHandlers/RouteHandler";
|
||||
import { appInsights } from "../Shared/appInsights";
|
||||
import * as SharedConstants from "../Shared/Constants";
|
||||
import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
|
||||
import { ExplorerSettings } from "../Shared/ExplorerSettings";
|
||||
import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
|
||||
import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
|
||||
import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
|
||||
import GraphStylingPane from "./Panes/GraphStylingPane";
|
||||
import NewVertexPane from "./Panes/NewVertexPane";
|
||||
import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
|
||||
import Q from "q";
|
||||
import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
|
||||
import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
|
||||
import TerminalTab from "./Tabs/TerminalTab";
|
||||
import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager";
|
||||
import { updateUserContext, userContext } from "../UserContext";
|
||||
import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
|
||||
import { stringToBlob } from "../Utils/BlobUtils";
|
||||
import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
|
||||
import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
|
||||
import * as ComponentRegisterer from "./ComponentRegisterer";
|
||||
import { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
|
||||
import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
|
||||
import { DialogProps, TextFieldProps } from "./Controls/Dialog";
|
||||
import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
|
||||
import { AuthType } from "../AuthType";
|
||||
import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
|
||||
import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
|
||||
import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
|
||||
import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
|
||||
import { configContext, Platform, updateConfigContext } from "../ConfigContext";
|
||||
import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import * as FileSystemUtil from "./Notebook/FileSystemUtil";
|
||||
import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
|
||||
import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
|
||||
import { DialogProps, TextFieldProps } from "./Controls/Dialog";
|
||||
import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
|
||||
import { ExplorerMetrics } from "../Common/Constants";
|
||||
import { ExplorerSettings } from "../Shared/ExplorerSettings";
|
||||
import { FileSystemUtil } from "./Notebook/FileSystemUtil";
|
||||
import { IGalleryItem } from "../Juno/JunoClient";
|
||||
import { LoadQueryPane } from "./Panes/LoadQueryPane";
|
||||
import * as Logger from "../Common/Logger";
|
||||
import { sendMessage, sendCachedDataMessage } from "../Common/MessageHandler";
|
||||
import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
|
||||
import { NotebookUtil } from "./Notebook/NotebookUtil";
|
||||
import AddCollectionPane from "./Panes/AddCollectionPane";
|
||||
import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
|
||||
import AddDatabasePane from "./Panes/AddDatabasePane";
|
||||
import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
|
||||
import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
|
||||
import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
|
||||
import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
|
||||
import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
|
||||
import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
|
||||
import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
|
||||
import GraphStylingPane from "./Panes/GraphStylingPane";
|
||||
import { LoadQueryPane } from "./Panes/LoadQueryPane";
|
||||
import NewVertexPane from "./Panes/NewVertexPane";
|
||||
import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
|
||||
import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
|
||||
import { QueriesClient } from "../Common/QueriesClient";
|
||||
import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
|
||||
import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
|
||||
import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
|
||||
import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
|
||||
import { RouteHandler } from "../RouteHandlers/RouteHandler";
|
||||
import { SaveQueryPane } from "./Panes/SaveQueryPane";
|
||||
import { SettingsPane } from "./Panes/SettingsPane";
|
||||
import { SetupNotebooksPane } from "./Panes/SetupNotebooksPane";
|
||||
import { SplashScreen } from "./SplashScreen/SplashScreen";
|
||||
import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter";
|
||||
import { StringInputPane } from "./Panes/StringInputPane";
|
||||
import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
|
||||
import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
|
||||
import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
|
||||
import { TableColumnOptionsPane } from "./Panes/Tables/TableColumnOptionsPane";
|
||||
import { TabsManager } from "./Tabs/TabsManager";
|
||||
import { UploadFilePane } from "./Panes/UploadFilePane";
|
||||
import { UploadItemsPane } from "./Panes/UploadItemsPane";
|
||||
import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
|
||||
import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
|
||||
import TabsBase from "./Tabs/TabsBase";
|
||||
import { TabsManager } from "./Tabs/TabsManager";
|
||||
import TerminalTab from "./Tabs/TerminalTab";
|
||||
import Database from "./Tree/Database";
|
||||
import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
|
||||
import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
|
||||
import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
|
||||
import { UploadItemsPaneAdapter } from "./Panes/UploadItemsPaneAdapter";
|
||||
import { ReactAdapter } from "../Bindings/ReactBindingHandler";
|
||||
import { toRawContentUri, fromContentUri } from "../Utils/GitHubUtils";
|
||||
import UserDefinedFunction from "./Tree/UserDefinedFunction";
|
||||
import StoredProcedure from "./Tree/StoredProcedure";
|
||||
import Trigger from "./Tree/Trigger";
|
||||
import UserDefinedFunction from "./Tree/UserDefinedFunction";
|
||||
import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
|
||||
import TabsBase from "./Tabs/TabsBase";
|
||||
import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
|
||||
import { updateUserContext, userContext } from "../UserContext";
|
||||
import { stringToBlob } from "../Utils/BlobUtils";
|
||||
import { IChoiceGroupProps } from "office-ui-fabric-react";
|
||||
import { getErrorMessage, handleError, getErrorStack } from "../Common/ErrorHandlingUtils";
|
||||
import { SubscriptionType } from "../Contracts/SubscriptionType";
|
||||
import { appInsights } from "../Shared/appInsights";
|
||||
import { SelfServeLoadingComponentAdapter } from "../SelfServe/SelfServeLoadingComponentAdapter";
|
||||
import { SelfServeType } from "../SelfServe/SelfServeUtils";
|
||||
import { SelfServeComponentAdapter } from "../SelfServe/SelfServeComponentAdapter";
|
||||
import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
|
||||
import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
|
||||
|
||||
BindingHandlersRegisterer.registerBindingHandlers();
|
||||
// Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
|
||||
@@ -112,57 +118,24 @@ export default class Explorer {
|
||||
public hasWriteAccess: ko.Observable<boolean>;
|
||||
public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth;
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
* Use userContext.databaseAccount instead
|
||||
* */
|
||||
public databaseAccount: ko.Observable<DataModels.DatabaseAccount>;
|
||||
public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
|
||||
/**
|
||||
* @deprecated
|
||||
* Use userContext.subscriptionType instead
|
||||
* */
|
||||
public subscriptionType: ko.Observable<SubscriptionType>;
|
||||
/**
|
||||
* @deprecated
|
||||
* Use userContext.apiType instead
|
||||
* */
|
||||
public defaultExperience: ko.Observable<string>;
|
||||
/**
|
||||
* @deprecated
|
||||
* Compare a string with userContext.apiType instead: userContext.apiType === "SQL"
|
||||
* */
|
||||
public isPreferredApiDocumentDB: ko.Computed<boolean>;
|
||||
/**
|
||||
* @deprecated
|
||||
* Compare a string with userContext.apiType instead: userContext.apiType === "Cassandra"
|
||||
* */
|
||||
public isPreferredApiCassandra: ko.Computed<boolean>;
|
||||
/**
|
||||
* @deprecated
|
||||
* Compare a string with userContext.apiType instead: userContext.apiType === "Mongo"
|
||||
* */
|
||||
public isPreferredApiMongoDB: ko.Computed<boolean>;
|
||||
/**
|
||||
* @deprecated
|
||||
* Compare a string with userContext.apiType instead: userContext.apiType === "Gremlin"
|
||||
* */
|
||||
public isPreferredApiGraph: ko.Computed<boolean>;
|
||||
/**
|
||||
* @deprecated
|
||||
* Compare a string with userContext.apiType instead: userContext.apiType === "Tables"
|
||||
* */
|
||||
public isPreferredApiTable: ko.Computed<boolean>;
|
||||
public isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
|
||||
/**
|
||||
* @deprecated
|
||||
* Compare a string with userContext.apiType instead: userContext.apiType === "Mongo"
|
||||
* */
|
||||
public isEnableMongoCapabilityPresent: ko.Computed<boolean>;
|
||||
public isServerlessEnabled: ko.Computed<boolean>;
|
||||
public isAccountReady: ko.Observable<boolean>;
|
||||
public selfServeType: ko.Observable<SelfServeType>;
|
||||
public canSaveQueries: ko.Computed<boolean>;
|
||||
public features: ko.Observable<any>;
|
||||
public serverId: ko.Observable<string>;
|
||||
public isTryCosmosDBSubscription: ko.Observable<boolean>;
|
||||
public queriesClient: QueriesClient;
|
||||
public tableDataClient: TableDataClient;
|
||||
public splitter: Splitter;
|
||||
@@ -179,19 +152,23 @@ export default class Explorer {
|
||||
|
||||
// Resource Tree
|
||||
public databases: ko.ObservableArray<ViewModels.Database>;
|
||||
public nonSystemDatabases: ko.Computed<ViewModels.Database[]>;
|
||||
public selectedDatabaseId: ko.Computed<string>;
|
||||
public selectedCollectionId: ko.Computed<string>;
|
||||
public isLeftPaneExpanded: ko.Observable<boolean>;
|
||||
public selectedNode: ko.Observable<ViewModels.TreeNode>;
|
||||
public isRefreshingExplorer: ko.Observable<boolean>;
|
||||
private resourceTree: ResourceTreeAdapter;
|
||||
private selfServeComponentAdapter: SelfServeComponentAdapter;
|
||||
|
||||
// Resource Token
|
||||
public resourceTokenDatabaseId: ko.Observable<string>;
|
||||
public resourceTokenCollectionId: ko.Observable<string>;
|
||||
public resourceTokenCollection: ko.Observable<ViewModels.CollectionBase>;
|
||||
public resourceTokenPartitionKey: ko.Observable<string>;
|
||||
public isAuthWithResourceToken: ko.Observable<boolean>;
|
||||
public isResourceTokenCollectionNodeSelected: ko.Computed<boolean>;
|
||||
public resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
|
||||
private resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
|
||||
|
||||
// Tabs
|
||||
public isTabsContentExpanded: ko.Observable<boolean>;
|
||||
@@ -203,6 +180,7 @@ export default class Explorer {
|
||||
public addDatabasePane: AddDatabasePane;
|
||||
public addCollectionPane: AddCollectionPane;
|
||||
public deleteCollectionConfirmationPane: DeleteCollectionConfirmationPane;
|
||||
public deleteDatabaseConfirmationPane: DeleteDatabaseConfirmationPane;
|
||||
public graphStylingPane: GraphStylingPane;
|
||||
public addTableEntityPane: AddTableEntityPane;
|
||||
public editTableEntityPane: EditTableEntityPane;
|
||||
@@ -210,9 +188,14 @@ export default class Explorer {
|
||||
public querySelectPane: QuerySelectPane;
|
||||
public newVertexPane: NewVertexPane;
|
||||
public cassandraAddCollectionPane: CassandraAddCollectionPane;
|
||||
public settingsPane: SettingsPane;
|
||||
public executeSprocParamsPane: ExecuteSprocParamsPane;
|
||||
public uploadItemsPane: UploadItemsPane;
|
||||
public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
|
||||
public loadQueryPane: LoadQueryPane;
|
||||
public saveQueryPane: ContextualPaneBase;
|
||||
public browseQueriesPane: BrowseQueriesPane;
|
||||
public uploadFilePane: UploadFilePane;
|
||||
public stringInputPane: StringInputPane;
|
||||
public setupNotebooksPane: SetupNotebooksPane;
|
||||
public gitHubReposPane: ContextualPaneBase;
|
||||
@@ -249,6 +232,7 @@ export default class Explorer {
|
||||
public closeDialog: ExplorerParams["closeDialog"];
|
||||
|
||||
private _panes: ContextualPaneBase[] = [];
|
||||
private _isSystemDatabasePredicate: (database: ViewModels.Database) => boolean = (database) => false;
|
||||
private _isInitializingNotebooks: boolean;
|
||||
private notebookBasePath: ko.Observable<string>;
|
||||
private _arcadiaManager: ArcadiaResourceManager;
|
||||
@@ -259,6 +243,7 @@ export default class Explorer {
|
||||
|
||||
// React adapters
|
||||
private commandBarComponentAdapter: CommandBarComponentAdapter;
|
||||
private selfServeLoadingComponentAdapter: SelfServeLoadingComponentAdapter;
|
||||
|
||||
private static readonly MaxNbDatabasesToAutoExpand = 5;
|
||||
|
||||
@@ -285,7 +270,24 @@ export default class Explorer {
|
||||
|
||||
this.databaseAccount = ko.observable<DataModels.DatabaseAccount>();
|
||||
this.subscriptionType = ko.observable<SubscriptionType>(SharedConstants.CollectionCreation.DefaultSubscriptionType);
|
||||
let firstInitialization = true;
|
||||
this.isRefreshingExplorer = ko.observable<boolean>(true);
|
||||
this.isRefreshingExplorer.subscribe((isRefreshing: boolean) => {
|
||||
if (!isRefreshing && firstInitialization) {
|
||||
// set focus on first element
|
||||
firstInitialization = false;
|
||||
try {
|
||||
document.getElementById("createNewContainerCommandButton").parentElement.parentElement.focus();
|
||||
} catch (e) {
|
||||
Logger.logWarning(
|
||||
"getElementById('createNewContainerCommandButton') failed to find element",
|
||||
"Explorer/this.isRefreshingExplorer.subscribe"
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
this.isAccountReady = ko.observable<boolean>(false);
|
||||
this.selfServeType = ko.observable<SelfServeType>(undefined);
|
||||
this._isInitializingNotebooks = false;
|
||||
this.arcadiaToken = ko.observable<string>();
|
||||
this.arcadiaToken.subscribe((token: string) => {
|
||||
@@ -305,9 +307,7 @@ export default class Explorer {
|
||||
this.isSynapseLinkUpdating = ko.observable<boolean>(false);
|
||||
this.isAccountReady.subscribe(async (isAccountReady: boolean) => {
|
||||
if (isAccountReady) {
|
||||
userContext.authType === AuthType.ResourceToken
|
||||
? this.refreshDatabaseForResourceToken()
|
||||
: this.refreshAllDatabases(true);
|
||||
this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases(true);
|
||||
RouteHandler.getInstance().initHandler();
|
||||
this.notebookWorkspaceManager = new NotebookWorkspaceManager();
|
||||
this.arcadiaWorkspaces = ko.observableArray();
|
||||
@@ -318,9 +318,9 @@ export default class Explorer {
|
||||
Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
|
||||
async () => {
|
||||
this.isNotebookEnabled(
|
||||
userContext.authType !== AuthType.ResourceToken &&
|
||||
!this.isAuthWithResourceToken() &&
|
||||
((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
|
||||
userContext.features.enableNotebooks)
|
||||
this.isFeatureEnabled(Constants.Features.enableNotebooks))
|
||||
);
|
||||
|
||||
TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
|
||||
@@ -342,7 +342,7 @@ export default class Explorer {
|
||||
this.isSparkEnabledForAccount() &&
|
||||
this.arcadiaWorkspaces() &&
|
||||
this.arcadiaWorkspaces().length > 0) ||
|
||||
userContext.features.enableSpark
|
||||
this.isFeatureEnabled(Constants.Features.enableSpark)
|
||||
);
|
||||
if (this.isSparkEnabled()) {
|
||||
appInsights.trackEvent(
|
||||
@@ -366,20 +366,26 @@ export default class Explorer {
|
||||
});
|
||||
this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
|
||||
|
||||
this.features = ko.observable();
|
||||
this.serverId = ko.observable<string>();
|
||||
this.queriesClient = new QueriesClient(this);
|
||||
this.isTryCosmosDBSubscription = ko.observable<boolean>(false);
|
||||
|
||||
this.resourceTokenDatabaseId = ko.observable<string>();
|
||||
this.resourceTokenCollectionId = ko.observable<string>();
|
||||
this.resourceTokenCollection = ko.observable<ViewModels.CollectionBase>();
|
||||
this.resourceTokenPartitionKey = ko.observable<string>();
|
||||
this.isAuthWithResourceToken = ko.observable<boolean>(false);
|
||||
this.isGitHubPaneEnabled = ko.observable<boolean>(false);
|
||||
this.isMongoIndexingEnabled = ko.observable<boolean>(false);
|
||||
this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
|
||||
this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
|
||||
|
||||
this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
|
||||
this.canExceedMaximumValue = ko.computed<boolean>(() =>
|
||||
this.isFeatureEnabled(Constants.Features.canExceedMaximumValue)
|
||||
);
|
||||
|
||||
this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
|
||||
this.isSchemaEnabled = ko.computed<boolean>(() => this.isFeatureEnabled(Constants.Features.enableSchema));
|
||||
|
||||
this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);
|
||||
|
||||
@@ -433,7 +439,6 @@ export default class Explorer {
|
||||
databaseAccount
|
||||
);
|
||||
this.defaultExperience(defaultExperience);
|
||||
// TODO. Remove this entirely
|
||||
updateUserContext({
|
||||
defaultExperience: DefaultExperienceUtility.mapDefaultExperienceStringToEnum(defaultExperience),
|
||||
});
|
||||
@@ -459,7 +464,7 @@ export default class Explorer {
|
||||
});
|
||||
|
||||
this.isFixedCollectionWithSharedThroughputSupported = ko.computed(() => {
|
||||
if (userContext.features.enableFixedCollectionWithSharedThroughput) {
|
||||
if (this.isFeatureEnabled(Constants.Features.enableFixedCollectionWithSharedThroughput)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -518,7 +523,20 @@ export default class Explorer {
|
||||
() =>
|
||||
configContext.platform === Platform.Portal && !this.isRunningOnNationalCloud() && !this.isPreferredApiGraph()
|
||||
);
|
||||
this.isRightPanelV2Enabled = ko.computed<boolean>(() => userContext.features.enableRightPanelV2);
|
||||
this.isRightPanelV2Enabled = ko.computed<boolean>(() =>
|
||||
this.isFeatureEnabled(Constants.Features.enableRightPanelV2)
|
||||
);
|
||||
this.defaultExperience.subscribe((defaultExperience: string) => {
|
||||
if (
|
||||
defaultExperience &&
|
||||
defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.Cassandra.toLowerCase()
|
||||
) {
|
||||
this._isSystemDatabasePredicate = (database: ViewModels.Database): boolean => {
|
||||
return database.id() === "system";
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
this.selectedDatabaseId = ko.computed<string>(() => {
|
||||
const selectedNode = this.selectedNode();
|
||||
if (!selectedNode) {
|
||||
@@ -540,6 +558,10 @@ export default class Explorer {
|
||||
}
|
||||
});
|
||||
|
||||
this.nonSystemDatabases = ko.computed(() => {
|
||||
return this.databases().filter((database: ViewModels.Database) => !this._isSystemDatabasePredicate(database));
|
||||
});
|
||||
|
||||
this.addDatabasePane = new AddDatabasePane({
|
||||
id: "adddatabasepane",
|
||||
visible: ko.observable<boolean>(false),
|
||||
@@ -562,6 +584,13 @@ export default class Explorer {
|
||||
container: this,
|
||||
});
|
||||
|
||||
this.deleteDatabaseConfirmationPane = new DeleteDatabaseConfirmationPane({
|
||||
id: "deletedatabaseconfirmationpane",
|
||||
visible: ko.observable<boolean>(false),
|
||||
|
||||
container: this,
|
||||
});
|
||||
|
||||
this.graphStylingPane = new GraphStylingPane({
|
||||
id: "graphstylingpane",
|
||||
visible: ko.observable<boolean>(false),
|
||||
@@ -611,6 +640,30 @@ export default class Explorer {
|
||||
container: this,
|
||||
});
|
||||
|
||||
this.settingsPane = new SettingsPane({
|
||||
id: "settingspane",
|
||||
visible: ko.observable<boolean>(false),
|
||||
|
||||
container: this,
|
||||
});
|
||||
|
||||
this.executeSprocParamsPane = new ExecuteSprocParamsPane({
|
||||
id: "executesprocparamspane",
|
||||
visible: ko.observable<boolean>(false),
|
||||
|
||||
container: this,
|
||||
});
|
||||
|
||||
this.uploadItemsPane = new UploadItemsPane({
|
||||
id: "uploaditemspane",
|
||||
visible: ko.observable<boolean>(false),
|
||||
|
||||
container: this,
|
||||
});
|
||||
|
||||
this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
|
||||
this.selfServeComponentAdapter = new SelfServeComponentAdapter(this);
|
||||
|
||||
this.loadQueryPane = new LoadQueryPane({
|
||||
id: "loadquerypane",
|
||||
visible: ko.observable<boolean>(false),
|
||||
@@ -632,6 +685,13 @@ export default class Explorer {
|
||||
container: this,
|
||||
});
|
||||
|
||||
this.uploadFilePane = new UploadFilePane({
|
||||
id: "uploadfilepane",
|
||||
visible: ko.observable<boolean>(false),
|
||||
|
||||
container: this,
|
||||
});
|
||||
|
||||
this.stringInputPane = new StringInputPane({
|
||||
id: "stringinputpane",
|
||||
visible: ko.observable<boolean>(false),
|
||||
@@ -652,6 +712,7 @@ export default class Explorer {
|
||||
this.addDatabasePane,
|
||||
this.addCollectionPane,
|
||||
this.deleteCollectionConfirmationPane,
|
||||
this.deleteDatabaseConfirmationPane,
|
||||
this.graphStylingPane,
|
||||
this.addTableEntityPane,
|
||||
this.editTableEntityPane,
|
||||
@@ -659,9 +720,13 @@ export default class Explorer {
|
||||
this.querySelectPane,
|
||||
this.newVertexPane,
|
||||
this.cassandraAddCollectionPane,
|
||||
this.settingsPane,
|
||||
this.executeSprocParamsPane,
|
||||
this.uploadItemsPane,
|
||||
this.loadQueryPane,
|
||||
this.saveQueryPane,
|
||||
this.browseQueriesPane,
|
||||
this.uploadFilePane,
|
||||
this.stringInputPane,
|
||||
this.setupNotebooksPane,
|
||||
];
|
||||
@@ -680,8 +745,14 @@ export default class Explorer {
|
||||
$(document.body).click(() => $(".commandDropdownContainer").hide());
|
||||
});
|
||||
|
||||
switch (userContext.apiType) {
|
||||
case "SQL":
|
||||
// TODO move this to API customization class
|
||||
this.defaultExperience.subscribe((defaultExperience) => {
|
||||
const defaultExperienceNormalizedString = (
|
||||
defaultExperience || Constants.DefaultAccountExperience.Default
|
||||
).toLowerCase();
|
||||
|
||||
switch (defaultExperienceNormalizedString) {
|
||||
case Constants.DefaultAccountExperience.DocumentDB.toLowerCase():
|
||||
this.addCollectionText("New Container");
|
||||
this.addDatabaseText("New Database");
|
||||
this.collectionTitle("SQL API");
|
||||
@@ -697,7 +768,8 @@ export default class Explorer {
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the container id");
|
||||
this.refreshTreeTitle("Refresh containers");
|
||||
break;
|
||||
case "Mongo":
|
||||
case Constants.DefaultAccountExperience.MongoDB.toLowerCase():
|
||||
case Constants.DefaultAccountExperience.ApiForMongoDB.toLowerCase():
|
||||
this.addCollectionText("New Collection");
|
||||
this.addDatabaseText("New Database");
|
||||
this.collectionTitle("Collections");
|
||||
@@ -711,7 +783,7 @@ export default class Explorer {
|
||||
);
|
||||
this.refreshTreeTitle("Refresh collections");
|
||||
break;
|
||||
case "Gremlin":
|
||||
case Constants.DefaultAccountExperience.Graph.toLowerCase():
|
||||
this.addCollectionText("New Graph");
|
||||
this.addDatabaseText("New Database");
|
||||
this.deleteCollectionText("Delete Graph");
|
||||
@@ -725,7 +797,7 @@ export default class Explorer {
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the graph id");
|
||||
this.refreshTreeTitle("Refresh graphs");
|
||||
break;
|
||||
case "Tables":
|
||||
case Constants.DefaultAccountExperience.Table.toLowerCase():
|
||||
this.addCollectionText("New Table");
|
||||
this.addDatabaseText("New Database");
|
||||
this.deleteCollectionText("Delete Table");
|
||||
@@ -742,7 +814,7 @@ export default class Explorer {
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
|
||||
this.tableDataClient = new TablesAPIDataClient();
|
||||
break;
|
||||
case "Cassandra":
|
||||
case Constants.DefaultAccountExperience.Cassandra.toLowerCase():
|
||||
this.addCollectionText("New Table");
|
||||
this.addDatabaseText("New Keyspace");
|
||||
this.deleteCollectionText("Delete Table");
|
||||
@@ -757,11 +829,15 @@ export default class Explorer {
|
||||
this.editTableEntityPane.title("Edit Table Row");
|
||||
this.deleteCollectionConfirmationPane.title("Delete Table");
|
||||
this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
|
||||
this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
|
||||
this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
|
||||
this.tableDataClient = new CassandraAPIDataClient();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
this.commandBarComponentAdapter = new CommandBarComponentAdapter(this);
|
||||
this.selfServeLoadingComponentAdapter = new SelfServeLoadingComponentAdapter();
|
||||
|
||||
this._initSettings();
|
||||
|
||||
@@ -810,29 +886,42 @@ export default class Explorer {
|
||||
});
|
||||
|
||||
// Override notebook server parameters from URL parameters
|
||||
if (userContext.features.notebookServerUrl && userContext.features.notebookServerToken) {
|
||||
this.notebookServerInfo({
|
||||
notebookServerEndpoint: userContext.features.notebookServerUrl,
|
||||
authToken: userContext.features.notebookServerToken,
|
||||
});
|
||||
const featureSubcription = this.features.subscribe((features) => {
|
||||
const serverInfo = this.notebookServerInfo();
|
||||
if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
|
||||
serverInfo.notebookServerEndpoint = features[Constants.Features.notebookServerUrl];
|
||||
}
|
||||
|
||||
if (userContext.features.notebookBasePath) {
|
||||
this.notebookBasePath(userContext.features.notebookBasePath);
|
||||
if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
|
||||
serverInfo.authToken = features[Constants.Features.notebookServerToken];
|
||||
}
|
||||
this.notebookServerInfo(serverInfo);
|
||||
this.notebookServerInfo.valueHasMutated();
|
||||
|
||||
if (this.isFeatureEnabled(Constants.Features.notebookBasePath)) {
|
||||
this.notebookBasePath(features[Constants.Features.notebookBasePath]);
|
||||
}
|
||||
|
||||
if (userContext.features.livyEndpoint) {
|
||||
if (this.isFeatureEnabled(Constants.Features.livyEndpoint)) {
|
||||
this.sparkClusterConnectionInfo({
|
||||
userName: undefined,
|
||||
password: undefined,
|
||||
endpoints: [
|
||||
{
|
||||
endpoint: userContext.features.livyEndpoint,
|
||||
endpoint: features[Constants.Features.livyEndpoint],
|
||||
kind: DataModels.SparkClusterEndpointKind.Livy,
|
||||
},
|
||||
],
|
||||
});
|
||||
this.sparkClusterConnectionInfo.valueHasMutated();
|
||||
}
|
||||
|
||||
if (this.isFeatureEnabled(Constants.Features.enableSDKoperations)) {
|
||||
updateUserContext({ useSDKOperations: true });
|
||||
}
|
||||
|
||||
featureSubcription.dispose();
|
||||
});
|
||||
}
|
||||
|
||||
public openEnableSynapseLinkDialog(): void {
|
||||
@@ -916,6 +1005,20 @@ export default class Explorer {
|
||||
return this.selectedNode() == null;
|
||||
}
|
||||
|
||||
public isFeatureEnabled(feature: string): boolean {
|
||||
const features = this.features();
|
||||
|
||||
if (!features) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (feature in features && features[feature]) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
public logConsoleData(consoleData: ConsoleData): void {
|
||||
this.setNotificationConsoleData(consoleData);
|
||||
}
|
||||
@@ -962,6 +1065,7 @@ export default class Explorer {
|
||||
}
|
||||
|
||||
public refreshAllDatabases(isInitialLoad?: boolean): Q.Promise<any> {
|
||||
this.isRefreshingExplorer(true);
|
||||
const startKey: number = TelemetryProcessor.traceStart(Action.LoadDatabases, {
|
||||
dataExplorerArea: Constants.Areas.ResourceTree,
|
||||
});
|
||||
@@ -991,7 +1095,8 @@ export default class Explorer {
|
||||
this.deleteDatabasesFromList(deltaDatabases.toDelete);
|
||||
this.selectedNode(currentlySelectedNode);
|
||||
this._setLoadingStatusText("Fetching containers...");
|
||||
this.refreshAndExpandNewDatabases(deltaDatabases.toAdd).then(
|
||||
this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
|
||||
.then(
|
||||
() => {
|
||||
this._setLoadingStatusText("Successfully fetched containers.");
|
||||
deferred.resolve();
|
||||
@@ -1000,10 +1105,12 @@ export default class Explorer {
|
||||
this._setLoadingStatusText("Failed to fetch containers.");
|
||||
deferred.reject(reason);
|
||||
}
|
||||
);
|
||||
)
|
||||
.finally(() => this.isRefreshingExplorer(false));
|
||||
},
|
||||
(error) => {
|
||||
this._setLoadingStatusText("Failed to fetch databases.");
|
||||
this.isRefreshingExplorer(false);
|
||||
deferred.reject(error);
|
||||
const errorMessage = getErrorMessage(error);
|
||||
TelemetryProcessor.traceFailure(
|
||||
@@ -1063,9 +1170,8 @@ export default class Explorer {
|
||||
description: "Refresh button clicked",
|
||||
dataExplorerArea: Constants.Areas.ResourceTree,
|
||||
});
|
||||
userContext.authType === AuthType.ResourceToken
|
||||
? this.refreshDatabaseForResourceToken()
|
||||
: this.refreshAllDatabases();
|
||||
this.isRefreshingExplorer(true);
|
||||
this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases();
|
||||
this.refreshNotebookList();
|
||||
};
|
||||
|
||||
@@ -1158,12 +1264,12 @@ export default class Explorer {
|
||||
throw error;
|
||||
} finally {
|
||||
// Overwrite with feature flags
|
||||
if (userContext.features.notebookServerUrl) {
|
||||
connectionInfo.notebookServerEndpoint = userContext.features.notebookServerUrl;
|
||||
if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
|
||||
connectionInfo.notebookServerEndpoint = this.features()[Constants.Features.notebookServerUrl];
|
||||
}
|
||||
|
||||
if (userContext.features.notebookServerToken) {
|
||||
connectionInfo.authToken = userContext.features.notebookServerToken;
|
||||
if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
|
||||
connectionInfo.authToken = this.features()[Constants.Features.notebookServerToken];
|
||||
}
|
||||
|
||||
this.notebookServerInfo(connectionInfo);
|
||||
@@ -1279,12 +1385,7 @@ export default class Explorer {
|
||||
}
|
||||
|
||||
public isLastNonEmptyDatabase(): boolean {
|
||||
if (
|
||||
this.isLastDatabase() &&
|
||||
this.databases()[0] &&
|
||||
this.databases()[0].collections &&
|
||||
this.databases()[0].collections().length > 0
|
||||
) {
|
||||
if (this.isLastDatabase() && this.databases()[0].collections && this.databases()[0].collections().length > 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
@@ -1306,6 +1407,20 @@ export default class Explorer {
|
||||
return false;
|
||||
}
|
||||
|
||||
public setSelfServeType(inputs: ViewModels.DataExplorerInputsFrame): void {
|
||||
const selfServeFeature = inputs.features[Constants.Features.selfServeType];
|
||||
if (selfServeFeature) {
|
||||
// self serve type received from query string
|
||||
const selfServeType = SelfServeType[selfServeFeature?.toLowerCase() as keyof typeof SelfServeType];
|
||||
this.selfServeType(selfServeType ? selfServeType : SelfServeType.invalid);
|
||||
} else if (inputs.selfServeType) {
|
||||
// self serve type received from portal
|
||||
this.selfServeType(inputs.selfServeType);
|
||||
} else {
|
||||
this.selfServeType(SelfServeType.none);
|
||||
}
|
||||
}
|
||||
|
||||
public configure(inputs: ViewModels.DataExplorerInputsFrame): void {
|
||||
if (inputs != null) {
|
||||
// In development mode, save the iframe message from the portal in session storage.
|
||||
@@ -1314,17 +1429,39 @@ export default class Explorer {
|
||||
sessionStorage.setItem("portalDataExplorerInitMessage", JSON.stringify(inputs));
|
||||
}
|
||||
|
||||
const authorizationToken = inputs.authorizationToken || "";
|
||||
const masterKey = inputs.masterKey || "";
|
||||
const databaseAccount = inputs.databaseAccount || null;
|
||||
if (inputs.defaultCollectionThroughput) {
|
||||
this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
|
||||
}
|
||||
this.features(inputs.features);
|
||||
this.serverId(inputs.serverId ?? Constants.ServerIds.productionPortal);
|
||||
this.databaseAccount(databaseAccount);
|
||||
this.subscriptionType(inputs.subscriptionType ?? SharedConstants.CollectionCreation.DefaultSubscriptionType);
|
||||
this.hasWriteAccess(inputs.hasWriteAccess ?? true);
|
||||
if (inputs.addCollectionDefaultFlight) {
|
||||
this.flight(inputs.addCollectionDefaultFlight);
|
||||
}
|
||||
this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription ?? false);
|
||||
this.isAuthWithResourceToken(inputs.isAuthWithresourceToken ?? false);
|
||||
this.setFeatureFlagsFromFlights(inputs.flights);
|
||||
this.setSelfServeType(inputs);
|
||||
|
||||
updateConfigContext({
|
||||
BACKEND_ENDPOINT: inputs.extensionEndpoint || configContext.BACKEND_ENDPOINT,
|
||||
ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
|
||||
});
|
||||
|
||||
updateUserContext({
|
||||
authorizationToken,
|
||||
masterKey,
|
||||
databaseAccount,
|
||||
resourceGroup: inputs.resourceGroup,
|
||||
subscriptionId: inputs.subscriptionId,
|
||||
subscriptionType: inputs.subscriptionType,
|
||||
quotaId: inputs.quotaId,
|
||||
});
|
||||
TelemetryProcessor.traceSuccess(
|
||||
Action.LoadDatabaseAccount,
|
||||
{
|
||||
@@ -1404,9 +1541,9 @@ export default class Explorer {
|
||||
|
||||
public isRunningOnNationalCloud(): boolean {
|
||||
return (
|
||||
userContext.portalEnv === "blackforest" ||
|
||||
userContext.portalEnv === "fairfax" ||
|
||||
userContext.portalEnv === "mooncake"
|
||||
this.serverId() === Constants.ServerIds.blackforest ||
|
||||
this.serverId() === Constants.ServerIds.fairfax ||
|
||||
this.serverId() === Constants.ServerIds.mooncake
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2077,6 +2214,38 @@ export default class Explorer {
|
||||
.finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(notificationProgressId));
|
||||
}
|
||||
|
||||
public onUploadToNotebookServerClicked(parent?: NotebookContentItem): void {
|
||||
parent = parent || this.resourceTree.myNotebooksContentRoot;
|
||||
|
||||
this.uploadFilePane.openWithOptions({
|
||||
paneTitle: "Upload file to notebook server",
|
||||
selectFileInputLabel: "Select file to upload",
|
||||
errorMessage: "Could not upload file",
|
||||
inProgressMessage: "Uploading file to notebook server",
|
||||
successMessage: "Successfully uploaded file to notebook server",
|
||||
onSubmit: async (file: File): Promise<NotebookContentItem> => {
|
||||
const readFileAsText = (inputFile: File): Promise<string> => {
|
||||
const reader = new FileReader();
|
||||
return new Promise((resolve, reject) => {
|
||||
reader.onerror = () => {
|
||||
reader.abort();
|
||||
reject(`Problem parsing file: ${inputFile}`);
|
||||
};
|
||||
reader.onload = () => {
|
||||
resolve(reader.result as string);
|
||||
};
|
||||
reader.readAsText(inputFile);
|
||||
});
|
||||
};
|
||||
|
||||
const fileContent = await readFileAsText(file);
|
||||
return this.uploadFile(file.name, fileContent, parent);
|
||||
},
|
||||
extensions: undefined,
|
||||
submitButtonLabel: "Upload",
|
||||
});
|
||||
}
|
||||
|
||||
public refreshContentItem(item: NotebookContentItem): Promise<void> {
|
||||
if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
|
||||
const error = "Attempt to refresh notebook list, but notebook is not enabled";
|
||||
@@ -2158,7 +2327,7 @@ export default class Explorer {
|
||||
account: userContext.databaseAccount,
|
||||
container: this,
|
||||
junoClient: this.notebookManager?.junoClient,
|
||||
selectedTab: selectedTab || GalleryTab.PublicGallery,
|
||||
selectedTab: selectedTab || GalleryTab.OfficialSamples,
|
||||
notebookUrl,
|
||||
galleryItem,
|
||||
isFavorite,
|
||||
@@ -2239,12 +2408,10 @@ export default class Explorer {
|
||||
public onNewCollectionClicked(): void {
|
||||
if (this.isPreferredApiCassandra()) {
|
||||
this.cassandraAddCollectionPane.open();
|
||||
} else if (userContext.features.enableReactPane) {
|
||||
this.openAddCollectionPanel();
|
||||
} else {
|
||||
this.addCollectionPane.open(this.selectedDatabaseId());
|
||||
document.getElementById("linkAddCollection").focus();
|
||||
}
|
||||
document.getElementById("linkAddCollection").focus();
|
||||
}
|
||||
|
||||
private refreshCommandBarButtons(): void {
|
||||
@@ -2373,7 +2540,7 @@ export default class Explorer {
|
||||
}
|
||||
|
||||
public openDeleteCollectionConfirmationPane(): void {
|
||||
userContext.features.enableKOPanel
|
||||
this.isFeatureEnabled(Constants.Features.enableKOPanel)
|
||||
? this.deleteCollectionConfirmationPane.open()
|
||||
: this.openSidePanel(
|
||||
"Delete Collection",
|
||||
@@ -2384,54 +2551,4 @@ export default class Explorer {
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
public openDeleteDatabaseConfirmationPane(): void {
|
||||
this.openSidePanel(
|
||||
"Delete Database",
|
||||
<DeleteDatabaseConfirmationPanel
|
||||
explorer={this}
|
||||
openNotificationConsole={this.expandConsole}
|
||||
closePanel={this.closeSidePanel}
|
||||
selectedDatabase={this.findSelectedDatabase()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
public openUploadItemsPanePane(): void {
|
||||
this.openSidePanel("Upload", <UploadItemsPane explorer={this} closePanel={this.closeSidePanel} />);
|
||||
}
|
||||
|
||||
public openSettingPane(): void {
|
||||
this.openSidePanel("Settings", <SettingsPane explorer={this} closePanel={this.closeSidePanel} />);
|
||||
}
|
||||
|
||||
public openExecuteSprocParamsPanel(): void {
|
||||
this.openSidePanel(
|
||||
"Input parameters",
|
||||
<ExecuteSprocParamsPanel explorer={this} closePanel={() => this.closeSidePanel()} />
|
||||
);
|
||||
}
|
||||
|
||||
public async openAddCollectionPanel(): Promise<void> {
|
||||
await this.loadDatabaseOffers();
|
||||
this.openSidePanel(
|
||||
"New Collection",
|
||||
<AddCollectionPanel
|
||||
explorer={this}
|
||||
closePanel={() => this.closeSidePanel()}
|
||||
openNotificationConsole={() => this.expandConsole()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
public openUploadFilePanel(parent?: NotebookContentItem): void {
|
||||
parent = parent || this.resourceTree.myNotebooksContentRoot;
|
||||
this.openSidePanel(
|
||||
"Upload File",
|
||||
<UploadFilePane
|
||||
explorer={this}
|
||||
closePanel={this.closeSidePanel}
|
||||
uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
import * as React from "react";
|
||||
import { NeighborVertexBasicInfo, EditedEdges, GraphNewEdgeData, PossibleVertex } from "./GraphExplorer";
|
||||
import * as GraphUtil from "./GraphUtil";
|
||||
import { GraphUtil } from "./GraphUtil";
|
||||
import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
|
||||
import DeleteIcon from "../../../../images/delete.svg";
|
||||
import AddPropertyIcon from "../../../../images/Add-property.svg";
|
||||
|
||||
@@ -9,7 +9,7 @@ import { GraphVizComponentProps } from "./GraphVizComponent";
|
||||
import * as GraphData from "./GraphData";
|
||||
import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
|
||||
import * as GraphUtil from "./GraphUtil";
|
||||
import { GraphUtil } from "./GraphUtil";
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import * as GremlinClient from "./GremlinClient";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as GraphUtil from "./GraphUtil";
|
||||
import { GraphUtil } from "./GraphUtil";
|
||||
import { GraphData, GremlinVertex, GremlinEdge } from "./GraphData";
|
||||
import * as sinon from "sinon";
|
||||
import { GraphExplorer } from "./GraphExplorer";
|
||||
@@ -69,7 +69,7 @@ describe("Process Gremlin vertex", () => {
|
||||
describe("getLimitedArrayString()", () => {
|
||||
const expectedEmptyResult = { result: "", consumedCount: 0 };
|
||||
it("should handle null array", () => {
|
||||
expect(GraphUtil.getLimitedArrayString(undefined, 10)).toEqual(expectedEmptyResult);
|
||||
expect(GraphUtil.getLimitedArrayString(null, 10)).toEqual(expectedEmptyResult);
|
||||
});
|
||||
|
||||
it("should handle empty array", () => {
|
||||
|
||||
@@ -7,13 +7,8 @@ interface JoinArrayMaxCharOutput {
|
||||
consumedCount: number; // Number of items consumed
|
||||
}
|
||||
|
||||
interface EdgePropertyType {
|
||||
id: string;
|
||||
outV?: string;
|
||||
inV?: string;
|
||||
}
|
||||
|
||||
export function getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
|
||||
export class GraphUtil {
|
||||
public static getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
|
||||
return `edge id: ${neighbor.edgeId}, vertex id: ${neighbor.id}`;
|
||||
}
|
||||
|
||||
@@ -23,17 +18,17 @@ export function getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
|
||||
* @param graphData
|
||||
* @param newNodes (optional) object describing new nodes encountered
|
||||
*/
|
||||
export function createEdgesfromNode(
|
||||
public static createEdgesfromNode(
|
||||
vertex: GraphData.GremlinVertex,
|
||||
graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>,
|
||||
newNodes?: { [id: string]: boolean }
|
||||
): void {
|
||||
if (Object.prototype.hasOwnProperty.call(vertex, "outE")) {
|
||||
const outE = vertex.outE;
|
||||
for (const label in outE) {
|
||||
$.each(outE[label], (index: number, edge: EdgePropertyType) => {
|
||||
if (vertex.hasOwnProperty("outE")) {
|
||||
let outE = vertex.outE;
|
||||
for (var label in outE) {
|
||||
$.each(outE[label], (index: number, edge: any) => {
|
||||
// We create our own edge. No need to fetch
|
||||
const e = {
|
||||
let e = {
|
||||
id: edge.id,
|
||||
label: label,
|
||||
inV: edge.inV,
|
||||
@@ -47,12 +42,12 @@ export function createEdgesfromNode(
|
||||
});
|
||||
}
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(vertex, "inE")) {
|
||||
const inE = vertex.inE;
|
||||
for (const label in inE) {
|
||||
$.each(inE[label], (index: number, edge: EdgePropertyType) => {
|
||||
if (vertex.hasOwnProperty("inE")) {
|
||||
let inE = vertex.inE;
|
||||
for (var label in inE) {
|
||||
$.each(inE[label], (index: number, edge: any) => {
|
||||
// We create our own edge. No need to fetch
|
||||
const e = {
|
||||
let e = {
|
||||
id: edge.id,
|
||||
label: label,
|
||||
inV: vertex.id,
|
||||
@@ -75,7 +70,7 @@ export function createEdgesfromNode(
|
||||
* @param maxSize
|
||||
* @return
|
||||
*/
|
||||
export function getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
|
||||
public static getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
|
||||
if (!array || array.length === 0 || array[0].length + 2 > maxSize) {
|
||||
return { result: "", consumedCount: 0 };
|
||||
}
|
||||
@@ -98,7 +93,7 @@ export function getLimitedArrayString(array: string[], maxSize: number): JoinArr
|
||||
};
|
||||
}
|
||||
|
||||
export function createFetchEdgePairQuery(
|
||||
public static createFetchEdgePairQuery(
|
||||
outE: boolean,
|
||||
pkid: string,
|
||||
excludedEdgeIds: string[],
|
||||
@@ -109,8 +104,8 @@ export function createFetchEdgePairQuery(
|
||||
let gremlinQuery: string;
|
||||
if (excludedEdgeIds.length > 0) {
|
||||
// build a string up to max char
|
||||
const joined = getLimitedArrayString(excludedEdgeIds, withoutStepArgMaxLenght);
|
||||
const hasWithoutStep = joined.result ? `.has(id, without(${joined.result}))` : "";
|
||||
const joined = GraphUtil.getLimitedArrayString(excludedEdgeIds, withoutStepArgMaxLenght);
|
||||
const hasWithoutStep = !!joined.result ? `.has(id, without(${joined.result}))` : "";
|
||||
|
||||
if (joined.consumedCount === excludedEdgeIds.length) {
|
||||
gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.limit(${pageSize}).as('e').${
|
||||
@@ -133,7 +128,7 @@ export function createFetchEdgePairQuery(
|
||||
/**
|
||||
* Trim graph
|
||||
*/
|
||||
export function trimGraph(
|
||||
public static trimGraph(
|
||||
currentRoot: GraphData.GremlinVertex,
|
||||
graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
|
||||
) {
|
||||
@@ -146,14 +141,14 @@ export function trimGraph(
|
||||
});
|
||||
}
|
||||
|
||||
export function addRootChildToGraph(
|
||||
public static addRootChildToGraph(
|
||||
root: GraphData.GremlinVertex,
|
||||
child: GraphData.GremlinVertex,
|
||||
graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
|
||||
) {
|
||||
child._ancestorsId = (root._ancestorsId || []).concat([root.id]);
|
||||
graphData.addVertex(child);
|
||||
createEdgesfromNode(child, graphData);
|
||||
GraphUtil.createEdgesfromNode(child, graphData);
|
||||
graphData.addNeighborInfo(child);
|
||||
}
|
||||
|
||||
@@ -161,23 +156,23 @@ export function addRootChildToGraph(
|
||||
* TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
|
||||
* @param value
|
||||
*/
|
||||
export function escapeDoubleQuotes(value: string): string {
|
||||
return value === undefined ? value : value.replace(/"/g, '\\"');
|
||||
public static escapeDoubleQuotes(value: string): string {
|
||||
return value == null ? value : value.replace(/"/g, '\\"');
|
||||
}
|
||||
|
||||
/**
|
||||
* Surround with double-quotes if val is a string.
|
||||
* @param val
|
||||
*/
|
||||
export function getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
|
||||
public static getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
|
||||
switch (ip.type) {
|
||||
case "number":
|
||||
case "boolean":
|
||||
return `${ip.value}`;
|
||||
case "null":
|
||||
return undefined;
|
||||
return null;
|
||||
default:
|
||||
return `"${escapeDoubleQuotes(ip.value as string)}"`;
|
||||
return `"${GraphUtil.escapeDoubleQuotes(ip.value as string)}"`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -185,6 +180,7 @@ export function getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
|
||||
* TODO Perform minimal substitution to prevent breaking gremlin query and allow \' for now.
|
||||
* @param value
|
||||
*/
|
||||
export function escapeSingleQuotes(value: string): string {
|
||||
return value === undefined ? value : value.replace(/'/g, "\\'");
|
||||
public static escapeSingleQuotes(value: string): string {
|
||||
return value == null ? value : value.replace(/'/g, "\\'");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,8 +4,11 @@
|
||||
* - inspired from gremlin-javascript for nodejs: https://github.com/jbmusso/gremlin-javascript
|
||||
* - tested on cosmosdb gremlin server
|
||||
* - only supports sessionless gremlin requests
|
||||
* - Relies on text-encoding polyfill (github.com/inexorabletash/text-encoding) for TextEncoder/TextDecoder on IE, Edge.
|
||||
*/
|
||||
|
||||
import { TextEncoder, TextDecoder } from "text-encoding";
|
||||
|
||||
export interface GremlinSimpleClientParameters {
|
||||
endpoint: string; // The websocket endpoint
|
||||
user: string;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
import * as React from "react";
|
||||
import { GraphHighlightedNodeData, NeighborVertexBasicInfo } from "./GraphExplorer";
|
||||
import * as GraphUtil from "./GraphUtil";
|
||||
import { GraphUtil } from "./GraphUtil";
|
||||
import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
|
||||
|
||||
export interface ReadOnlyNeighborsComponentProps {
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import * as ko from "knockout";
|
||||
import { AuthType } from "../../../AuthType";
|
||||
import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
|
||||
import { updateUserContext } from "../../../UserContext";
|
||||
import Explorer from "../../Explorer";
|
||||
import NotebookManager from "../../Notebook/NotebookManager";
|
||||
import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
|
||||
import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
|
||||
import NotebookManager from "../../Notebook/NotebookManager";
|
||||
import Explorer from "../../Explorer";
|
||||
|
||||
describe("CommandBarComponentButtonFactory tests", () => {
|
||||
let mockExplorer: Explorer;
|
||||
@@ -15,6 +13,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(false);
|
||||
mockExplorer.isPreferredApiTable = ko.computed(() => true);
|
||||
mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
|
||||
mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
|
||||
@@ -54,6 +53,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(false);
|
||||
mockExplorer.isPreferredApiTable = ko.computed(() => true);
|
||||
mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
|
||||
mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
|
||||
@@ -118,6 +118,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(false);
|
||||
mockExplorer.isPreferredApiTable = ko.computed(() => true);
|
||||
mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
|
||||
mockExplorer.isSparkEnabled = ko.observable(true);
|
||||
@@ -198,6 +199,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(false);
|
||||
mockExplorer.isPreferredApiTable = ko.computed(() => true);
|
||||
mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
|
||||
mockExplorer.isSynapseLinkUpdating = ko.observable(false);
|
||||
@@ -279,6 +281,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(false);
|
||||
mockExplorer.isPreferredApiTable = ko.computed(() => true);
|
||||
mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
|
||||
mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
|
||||
@@ -337,13 +340,12 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(true);
|
||||
mockExplorer.isPreferredApiDocumentDB = ko.computed(() => true);
|
||||
mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
|
||||
|
||||
mockExplorer.isResourceTokenCollectionNodeSelected = ko.computed(() => true);
|
||||
mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
|
||||
updateUserContext({
|
||||
authType: AuthType.ResourceToken,
|
||||
});
|
||||
});
|
||||
|
||||
it("should only show New SQL Query and Open Query buttons", () => {
|
||||
|
||||
@@ -1,38 +1,37 @@
|
||||
import * as React from "react";
|
||||
import AddCollectionIcon from "../../../../images/AddCollection.svg";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
|
||||
import { Areas } from "../../../Common/Constants";
|
||||
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
|
||||
import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
|
||||
import AddCollectionIcon from "../../../../images/AddCollection.svg";
|
||||
import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
|
||||
import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
|
||||
import AddTriggerIcon from "../../../../images/AddTrigger.svg";
|
||||
import AddUdfIcon from "../../../../images/AddUdf.svg";
|
||||
import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
|
||||
import * as Constants from "../../../Common/Constants";
|
||||
import OpenInTabIcon from "../../../../images/open-in-tab.svg";
|
||||
import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
|
||||
import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
|
||||
import FeedbackIcon from "../../../../images/Feedback-Command.svg";
|
||||
import GitHubIcon from "../../../../images/github.svg";
|
||||
import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
|
||||
import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
|
||||
import SettingsIcon from "../../../../images/settings_15x15.svg";
|
||||
import AddUdfIcon from "../../../../images/AddUdf.svg";
|
||||
import AddTriggerIcon from "../../../../images/AddTrigger.svg";
|
||||
import FeedbackIcon from "../../../../images/Feedback-Command.svg";
|
||||
import EnableNotebooksIcon from "../../../../images/notebook/Notebook-enable.svg";
|
||||
import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
|
||||
import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
|
||||
import OpenInTabIcon from "../../../../images/open-in-tab.svg";
|
||||
import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
|
||||
import SettingsIcon from "../../../../images/settings_15x15.svg";
|
||||
import GitHubIcon from "../../../../images/github.svg";
|
||||
import SynapseIcon from "../../../../images/synapse-link.svg";
|
||||
import { AuthType } from "../../../AuthType";
|
||||
import * as Constants from "../../../Common/Constants";
|
||||
import { Areas } from "../../../Common/Constants";
|
||||
import { configContext, Platform } from "../../../ConfigContext";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../../UserContext";
|
||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||
import Explorer from "../../Explorer";
|
||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||
import * as React from "react";
|
||||
import { OpenFullScreen } from "../../OpenFullScreen";
|
||||
|
||||
let counter = 0;
|
||||
|
||||
export function createStaticCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
|
||||
if (userContext.authType === AuthType.ResourceToken) {
|
||||
if (container.isAuthWithResourceToken()) {
|
||||
return createStaticCommandBarButtonsForResourceToken(container);
|
||||
}
|
||||
|
||||
@@ -164,7 +163,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
|
||||
const settingsPaneButton: CommandButtonComponentProps = {
|
||||
iconSrc: SettingsIcon,
|
||||
iconAlt: label,
|
||||
onCommandClick: () => container.openSettingPane(),
|
||||
onCommandClick: () => container.settingsPane.open(),
|
||||
commandButtonLabel: undefined,
|
||||
ariaLabel: label,
|
||||
tooltipText: label,
|
||||
@@ -407,7 +406,7 @@ function createuploadNotebookButton(container: Explorer): CommandButtonComponent
|
||||
return {
|
||||
iconSrc: NewNotebookIcon,
|
||||
iconAlt: label,
|
||||
onCommandClick: () => container.openUploadFilePanel(),
|
||||
onCommandClick: () => container.onUploadToNotebookServerClicked(),
|
||||
commandButtonLabel: label,
|
||||
hasPopup: false,
|
||||
disabled: false,
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import * as CommandBarUtil from "./CommandBarUtil";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
|
||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||
|
||||
@@ -25,7 +26,7 @@ describe("CommandBarUtil tests", () => {
|
||||
const converteds = CommandBarUtil.convertButton([btn], backgroundColor);
|
||||
expect(converteds.length).toBe(1);
|
||||
const converted = converteds[0];
|
||||
expect(converted.split).toBe(undefined);
|
||||
expect(!converted.split);
|
||||
expect(converted.iconProps.imageProps.src).toEqual(btn.iconSrc);
|
||||
expect(converted.iconProps.imageProps.alt).toEqual(btn.iconAlt);
|
||||
expect(converted.text).toEqual(btn.commandButtonLabel);
|
||||
@@ -49,7 +50,7 @@ describe("CommandBarUtil tests", () => {
|
||||
const converteds = CommandBarUtil.convertButton([btn], "backgroundColor");
|
||||
expect(converteds.length).toBe(1);
|
||||
const converted = converteds[0];
|
||||
expect(converted.split).toBe(true);
|
||||
expect(converted.split);
|
||||
expect(converted.subMenuProps.items.length).toBe(btn.children.length);
|
||||
for (let i = 0; i < converted.subMenuProps.items.length; i++) {
|
||||
expect(converted.subMenuProps.items[i].text).toEqual(btn.children[i].commandButtonLabel);
|
||||
@@ -63,6 +64,7 @@ describe("CommandBarUtil tests", () => {
|
||||
}
|
||||
|
||||
const converteds = CommandBarUtil.convertButton(btns, "backgroundColor");
|
||||
const keys = converteds.map((btn: ICommandBarItemProps) => btn.key);
|
||||
const uniqueKeys = converteds
|
||||
.map((btn: ICommandBarItemProps) => btn.key)
|
||||
.filter((value: string, index: number, self: string[]) => self.indexOf(value) === index);
|
||||
@@ -73,7 +75,7 @@ describe("CommandBarUtil tests", () => {
|
||||
const btn = createButton();
|
||||
const backgroundColor = "backgroundColor";
|
||||
|
||||
btn.commandButtonLabel = undefined;
|
||||
btn.commandButtonLabel = null;
|
||||
let converted = CommandBarUtil.convertButton([btn], backgroundColor)[0];
|
||||
expect(converted.text).toEqual(btn.tooltipText);
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ export class ControlBarComponent extends React.Component<ControlBarComponentProp
|
||||
return commandButtonOptions.map(
|
||||
(btn: CommandButtonComponentProps, index: number): JSX.Element => {
|
||||
// Remove label
|
||||
btn.commandButtonLabel = undefined;
|
||||
btn.commandButtonLabel = null;
|
||||
return CommandButtonComponent.renderButton(btn, `${index}`);
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
import { observable } from "knockout";
|
||||
import { mostRecentActivity } from "./MostRecentActivity";
|
||||
|
||||
describe("MostRecentActivity", () => {
|
||||
const accountId = "some account";
|
||||
|
||||
beforeEach(() => mostRecentActivity.clear(accountId));
|
||||
|
||||
it("Has no items at first", () => {
|
||||
expect(mostRecentActivity.getItems(accountId)).toStrictEqual([]);
|
||||
});
|
||||
|
||||
it("Can record collections being opened", () => {
|
||||
const collectionId = "some collection";
|
||||
const databaseId = "some database";
|
||||
const collection = {
|
||||
id: observable(collectionId),
|
||||
databaseId,
|
||||
};
|
||||
|
||||
mostRecentActivity.collectionWasOpened(accountId, collection);
|
||||
|
||||
const activity = mostRecentActivity.getItems(accountId);
|
||||
expect(activity).toEqual([
|
||||
expect.objectContaining({
|
||||
collectionId,
|
||||
databaseId,
|
||||
}),
|
||||
]);
|
||||
});
|
||||
|
||||
it("Can record notebooks being opened", () => {
|
||||
const name = "some notebook";
|
||||
const path = "some path";
|
||||
const notebook = { name, path };
|
||||
|
||||
mostRecentActivity.notebookWasItemOpened(accountId, notebook);
|
||||
|
||||
const activity = mostRecentActivity.getItems(accountId);
|
||||
expect(activity).toEqual([expect.objectContaining(notebook)]);
|
||||
});
|
||||
|
||||
it("Filters out duplicates", () => {
|
||||
const name = "some notebook";
|
||||
const path = "some path";
|
||||
const notebook = { name, path };
|
||||
const sameNotebook = { name, path };
|
||||
|
||||
mostRecentActivity.notebookWasItemOpened(accountId, notebook);
|
||||
mostRecentActivity.notebookWasItemOpened(accountId, sameNotebook);
|
||||
|
||||
const activity = mostRecentActivity.getItems(accountId);
|
||||
expect(activity.length).toEqual(1);
|
||||
expect(activity).toEqual([expect.objectContaining(notebook)]);
|
||||
});
|
||||
|
||||
it("Allows for multiple accounts", () => {
|
||||
const name = "some notebook";
|
||||
const path = "some path";
|
||||
const notebook = { name, path };
|
||||
|
||||
const anotherNotebook = { name: "Another " + name, path };
|
||||
const anotherAccountId = "Another " + accountId;
|
||||
|
||||
mostRecentActivity.notebookWasItemOpened(accountId, notebook);
|
||||
mostRecentActivity.notebookWasItemOpened(anotherAccountId, anotherNotebook);
|
||||
|
||||
expect(mostRecentActivity.getItems(accountId)).toEqual([expect.objectContaining(notebook)]);
|
||||
expect(mostRecentActivity.getItems(anotherAccountId)).toEqual([expect.objectContaining(anotherNotebook)]);
|
||||
});
|
||||
|
||||
it("Can store multiple distinct elements, in FIFO order", () => {
|
||||
const name = "some notebook";
|
||||
const path = "some path";
|
||||
const first = { name, path };
|
||||
const second = { name: "Another " + name, path };
|
||||
const third = { name, path: "Another " + path };
|
||||
|
||||
mostRecentActivity.notebookWasItemOpened(accountId, first);
|
||||
mostRecentActivity.notebookWasItemOpened(accountId, second);
|
||||
mostRecentActivity.notebookWasItemOpened(accountId, third);
|
||||
|
||||
const activity = mostRecentActivity.getItems(accountId);
|
||||
expect(activity).toEqual([third, second, first].map(expect.objectContaining));
|
||||
});
|
||||
});
|
||||
@@ -1,6 +1,4 @@
|
||||
import { CollectionBase } from "../../Contracts/ViewModels";
|
||||
import { StorageKey, LocalStorageUtility } from "../../Shared/StorageUtility";
|
||||
import { NotebookContentItem } from "../Notebook/NotebookContentItem";
|
||||
|
||||
export enum Type {
|
||||
OpenCollection,
|
||||
@@ -8,18 +6,21 @@ export enum Type {
|
||||
}
|
||||
|
||||
export interface OpenNotebookItem {
|
||||
type: Type.OpenNotebook;
|
||||
name: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
export interface OpenCollectionItem {
|
||||
type: Type.OpenCollection;
|
||||
databaseId: string;
|
||||
collectionId: string;
|
||||
}
|
||||
|
||||
type Item = OpenNotebookItem | OpenCollectionItem;
|
||||
export interface Item {
|
||||
type: Type;
|
||||
title: string;
|
||||
description: string;
|
||||
data: OpenNotebookItem | OpenCollectionItem;
|
||||
}
|
||||
|
||||
// Update schemaVersion if you are going to change this interface
|
||||
interface StoredData {
|
||||
@@ -31,7 +32,7 @@ interface StoredData {
|
||||
* Stores most recent activity
|
||||
*/
|
||||
class MostRecentActivity {
|
||||
private static readonly schemaVersion: string = "2";
|
||||
private static readonly schemaVersion: string = "1";
|
||||
private static itemsMaxNumber: number = 5;
|
||||
private storedData: StoredData;
|
||||
constructor() {
|
||||
@@ -91,7 +92,7 @@ class MostRecentActivity {
|
||||
LocalStorageUtility.setEntryString(StorageKey.MostRecentActivity, JSON.stringify(this.storedData));
|
||||
}
|
||||
|
||||
private addItem(accountId: string, newItem: Item): void {
|
||||
public addItem(accountId: string, newItem: Item): void {
|
||||
// When debugging, accountId is "undefined": most recent activity cannot be saved by account. Uncomment to disable.
|
||||
// if (!accountId) {
|
||||
// return;
|
||||
@@ -110,23 +111,6 @@ class MostRecentActivity {
|
||||
return this.storedData.itemsMap[accountId] || [];
|
||||
}
|
||||
|
||||
public collectionWasOpened(accountId: string, { id, databaseId }: Pick<CollectionBase, "id" | "databaseId">) {
|
||||
const collectionId = id();
|
||||
this.addItem(accountId, {
|
||||
type: Type.OpenCollection,
|
||||
databaseId,
|
||||
collectionId,
|
||||
});
|
||||
}
|
||||
|
||||
public notebookWasItemOpened(accountId: string, { name, path }: Pick<NotebookContentItem, "name" | "path">) {
|
||||
this.addItem(accountId, {
|
||||
type: Type.OpenNotebook,
|
||||
name,
|
||||
path,
|
||||
});
|
||||
}
|
||||
|
||||
public clear(accountId: string): void {
|
||||
delete this.storedData.itemsMap[accountId];
|
||||
this.saveToLocalStorage();
|
||||
@@ -144,7 +128,11 @@ class MostRecentActivity {
|
||||
let index = -1;
|
||||
for (let i = 0; i < itemsArray.length; i++) {
|
||||
const currentItem = itemsArray[i];
|
||||
if (JSON.stringify(currentItem) === JSON.stringify(item)) {
|
||||
if (
|
||||
currentItem.title === item.title &&
|
||||
currentItem.description === item.description &&
|
||||
JSON.stringify(currentItem.data) === JSON.stringify(item.data)
|
||||
) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
// Utilities for file system
|
||||
|
||||
export class FileSystemUtil {
|
||||
/**
|
||||
* file list returns path starting with ./blah
|
||||
* rename returns simply blah.
|
||||
@@ -7,7 +10,7 @@
|
||||
* @param path1
|
||||
* @param path2
|
||||
*/
|
||||
export function isPathEqual(path1: string, path2: string): boolean {
|
||||
public static isPathEqual(path1: string, path2: string): boolean {
|
||||
const normalize = (path: string): string => {
|
||||
const dotSlash = "./";
|
||||
if (path.indexOf(dotSlash) === 0) {
|
||||
@@ -24,10 +27,11 @@ export function isPathEqual(path1: string, path2: string): boolean {
|
||||
* @param path
|
||||
* @param extension Without the ".". e.g. "ipynb" (and not ".ipynb")
|
||||
*/
|
||||
export function stripExtension(path: string, extension: string): string {
|
||||
public static stripExtension(path: string, extension: string): string {
|
||||
const splitted = path.split(".");
|
||||
if (splitted[splitted.length - 1] === extension) {
|
||||
splitted.pop();
|
||||
}
|
||||
return splitted.join(".");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@ import { NotebookContentRecordProps, selectors } from "@nteract/core";
|
||||
/**
|
||||
* A bunch of utilities to interact with nteract
|
||||
*/
|
||||
export function getCurrentCellType(content: NotebookContentRecordProps): "markdown" | "code" | "raw" | undefined {
|
||||
export default class NTeractUtil {
|
||||
public static getCurrentCellType(content: NotebookContentRecordProps): "markdown" | "code" | "raw" | undefined {
|
||||
if (!content) {
|
||||
return undefined;
|
||||
}
|
||||
@@ -18,3 +19,4 @@ export function getCurrentCellType(content: NotebookContentRecordProps): "markdo
|
||||
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
// Manages all the redux logic for the notebook nteract code
|
||||
// TODO: Merge with NotebookClient?
|
||||
import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
|
||||
|
||||
// Vendor modules
|
||||
import {
|
||||
actions,
|
||||
AppState,
|
||||
ContentRecord, createHostRef,
|
||||
createHostRef,
|
||||
createKernelspecsRef,
|
||||
HostRecord,
|
||||
HostRef,
|
||||
IContentProvider, KernelspecsRef, makeAppRecord,
|
||||
makeAppRecord,
|
||||
makeCommsRecord,
|
||||
makeContentsRecord,
|
||||
makeEditorsRecord,
|
||||
@@ -16,22 +18,24 @@ import {
|
||||
makeHostsRecord,
|
||||
makeJupyterHostRecord,
|
||||
makeStateRecord,
|
||||
makeTransformsRecord
|
||||
makeTransformsRecord,
|
||||
ContentRecord,
|
||||
HostRecord,
|
||||
HostRef,
|
||||
KernelspecsRef,
|
||||
IContentProvider,
|
||||
} from "@nteract/core";
|
||||
import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
|
||||
import { Media } from "@nteract/outputs";
|
||||
import TransformVDOM from "@nteract/transform-vdom";
|
||||
import * as Immutable from "immutable";
|
||||
import { Notification } from "react-notification-system";
|
||||
import { AnyAction, Dispatch, Middleware, MiddlewareAPI, Store } from "redux";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
|
||||
import { Action } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Store, AnyAction, MiddlewareAPI, Middleware, Dispatch } from "redux";
|
||||
|
||||
import configureStore from "./NotebookComponent/store";
|
||||
import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
|
||||
import IFrameHTML from "./NotebookRenderer/outputs/IFrameHTML";
|
||||
import IFrameJavaScript from "./NotebookRenderer/outputs/IFrameJavaScript";
|
||||
|
||||
import { Notification } from "react-notification-system";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
|
||||
|
||||
export type KernelSpecsDisplay = { name: string; displayName: string };
|
||||
|
||||
@@ -164,8 +168,8 @@ export class NotebookClientV2 {
|
||||
"application/vnd.vega.v5+json": NullTransform,
|
||||
"application/vdom.v1+json": TransformVDOM,
|
||||
"application/json": Media.Json,
|
||||
"application/javascript": IFrameJavaScript,
|
||||
"text/html": IFrameHTML,
|
||||
"application/javascript": Media.JavaScript,
|
||||
"text/html": Media.HTML,
|
||||
"text/markdown": Media.Markdown,
|
||||
"text/latex": Media.LaTeX,
|
||||
"image/svg+xml": Media.SVG,
|
||||
|
||||
@@ -29,7 +29,7 @@ import "@nteract/styles/global-variables.css";
|
||||
import "react-table/react-table.css";
|
||||
|
||||
import * as CdbActions from "./actions";
|
||||
import * as NteractUtil from "../NTeractUtil";
|
||||
import NteractUtil from "../NTeractUtil";
|
||||
|
||||
export interface NotebookComponentBootstrapperOptions {
|
||||
notebookClient: NotebookClientV2;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import { AppState, ContentRef, selectors } from "@nteract/core";
|
||||
import { connect } from "react-redux";
|
||||
import * as NteractUtil from "../NTeractUtil";
|
||||
import NteractUtil from "../NTeractUtil";
|
||||
|
||||
interface VirtualCommandBarComponentProps {
|
||||
kernelSpecName: string;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as StringUtils from "../../../../../Utils/StringUtils";
|
||||
import { StringUtils } from "../../../../../Utils/StringUtils";
|
||||
import { actions, AppState, ContentRef, selectors } from "@nteract/core";
|
||||
import { IMonacoProps as MonacoEditorProps } from "@nteract/monaco-editor";
|
||||
import * as React from "react";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer, from } from "rxjs";
|
||||
import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer } from "rxjs";
|
||||
import { webSocket } from "rxjs/webSocket";
|
||||
import { StateObservable } from "redux-observable";
|
||||
import { ofType } from "redux-observable";
|
||||
@@ -44,7 +44,7 @@ import { CdbAppState } from "./types";
|
||||
import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";
|
||||
import * as TextFile from "./contents/file/text-file";
|
||||
import { NotebookUtil } from "../NotebookUtil";
|
||||
import * as FileSystemUtil from "../FileSystemUtil";
|
||||
import { FileSystemUtil } from "../FileSystemUtil";
|
||||
import * as cdbActions from "../NotebookComponent/actions";
|
||||
import { Areas } from "../../../Common/Constants";
|
||||
|
||||
@@ -944,39 +944,6 @@ const traceNotebookKernelEpic = (
|
||||
);
|
||||
};
|
||||
|
||||
const resetCellStatusOnExecuteCanceledEpic = (
|
||||
action$: Observable<actions.ExecuteCanceled>,
|
||||
state$: StateObservable<AppState>
|
||||
): Observable<actions.UpdateCellStatus> => {
|
||||
return action$.pipe(
|
||||
ofType(actions.EXECUTE_CANCELED),
|
||||
mergeMap((action) => {
|
||||
const contentRef = action.payload.contentRef;
|
||||
const model = state$.value.core.entities.contents.byRef.get(contentRef).model;
|
||||
let busyCellIds: string[] = [];
|
||||
|
||||
if (model.type === "notebook") {
|
||||
const cellMap = model.transient.get("cellMap");
|
||||
if (cellMap) {
|
||||
for (const entry of cellMap.toArray()) {
|
||||
const cellId = entry[0];
|
||||
const status = model.transient.getIn(["cellMap", cellId, "status"]);
|
||||
if (status === "busy") {
|
||||
busyCellIds.push(cellId);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return from(busyCellIds).pipe(
|
||||
map((busyCellId) => {
|
||||
return actions.updateCellStatus({ id: busyCellId, contentRef, status: undefined });
|
||||
})
|
||||
);
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
export const allEpics = [
|
||||
addInitialCodeCellEpic,
|
||||
focusInitialCodeCellEpic,
|
||||
@@ -993,5 +960,4 @@ export const allEpics = [
|
||||
traceNotebookTelemetryEpic,
|
||||
traceNotebookInfoEpic,
|
||||
traceNotebookKernelEpic,
|
||||
resetCellStatusOnExecuteCanceledEpic,
|
||||
];
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { stringifyNotebook } from "@nteract/commutable";
|
||||
import { FileType, IContent, IContentProvider, IEmptyContent, ServerConfig } from "@nteract/core";
|
||||
import { AjaxResponse } from "rxjs/ajax";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import * as StringUtils from "../../Utils/StringUtils";
|
||||
import * as FileSystemUtil from "./FileSystemUtil";
|
||||
import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
|
||||
import { StringUtils } from "../../Utils/StringUtils";
|
||||
import { FileSystemUtil } from "./FileSystemUtil";
|
||||
import { NotebookUtil } from "./NotebookUtil";
|
||||
|
||||
import { ServerConfig, IContent, IContentProvider, FileType, IEmptyContent } from "@nteract/core";
|
||||
import { AjaxResponse } from "rxjs/ajax";
|
||||
import { stringifyNotebook } from "@nteract/commutable";
|
||||
|
||||
export class NotebookContentClient {
|
||||
constructor(
|
||||
private notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>,
|
||||
|
||||
@@ -1,63 +0,0 @@
|
||||
import * as React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* The HTML string that will be rendered.
|
||||
*/
|
||||
data: string;
|
||||
/**
|
||||
* The media type associated with the HTML
|
||||
* string. This defaults to text/html.
|
||||
*/
|
||||
mediaType: "text/html";
|
||||
}
|
||||
|
||||
const StyledIFrame = styled.iframe`
|
||||
width: 100%;
|
||||
border-style: unset;
|
||||
`;
|
||||
|
||||
export class IFrameHTML extends React.PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
data: "",
|
||||
mediaType: "text/html"
|
||||
};
|
||||
|
||||
frame?: HTMLIFrameElement;
|
||||
|
||||
appendChildDOM(): void {
|
||||
if (!this.frame) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.frame.contentDocument.open();
|
||||
this.frame.contentDocument.write(this.props.data);
|
||||
this.frame.contentDocument.close();
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
this.appendChildDOM();
|
||||
}
|
||||
|
||||
componentDidUpdate(): void {
|
||||
this.appendChildDOM();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<StyledIFrame
|
||||
ref={frame => this.frame = frame}
|
||||
allow="accelerometer; autoplay; camera; gyroscope; magnetometer; microphone; xr-spatial-tracking"
|
||||
sandbox="allow-downloads allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-popups-to-escape-sandbox"
|
||||
onLoad={() => this.onFrameLoaded()} />
|
||||
);
|
||||
}
|
||||
|
||||
onFrameLoaded() {
|
||||
this.frame.height = (this.frame.contentDocument.body.scrollHeight + 4) + "px";
|
||||
this.frame.contentDocument.body.style.margin = "0px";
|
||||
}
|
||||
}
|
||||
|
||||
export default IFrameHTML;
|
||||
@@ -1,28 +0,0 @@
|
||||
import React from "react";
|
||||
import IFrameHTML from "./IFrameHTML";
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* The JavaScript code that we would like to execute.
|
||||
*/
|
||||
data: string;
|
||||
/**
|
||||
* The media type associated with our component.
|
||||
*/
|
||||
mediaType: "text/javascript";
|
||||
}
|
||||
|
||||
export class IFrameJavaScript extends React.PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
data: "",
|
||||
mediaType: "application/javascript"
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<IFrameHTML data={`<script>${this.props.data}</script>`} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default IFrameJavaScript;
|
||||
@@ -1,7 +1,7 @@
|
||||
import path from "path";
|
||||
import { ImmutableNotebook, ImmutableCodeCell } from "@nteract/commutable";
|
||||
import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
|
||||
import * as StringUtils from "../../Utils/StringUtils";
|
||||
import { StringUtils } from "../../Utils/StringUtils";
|
||||
import * as GitHubUtils from "../../Utils/GitHubUtils";
|
||||
|
||||
// Must match rx-jupyter' FileType
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
|
||||
|
||||
import { ActionContracts } from "../Contracts/ExplorerContracts";
|
||||
import * as ViewModels from "../Contracts/ViewModels";
|
||||
import { ActionContracts } from "../Contracts/ExplorerContracts";
|
||||
import Explorer from "./Explorer";
|
||||
|
||||
export function handleOpenAction(
|
||||
@@ -145,7 +145,7 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
|
||||
(<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
|
||||
) {
|
||||
explorer.closeAllPanes();
|
||||
explorer.openSettingPane();
|
||||
explorer.settingsPane.open();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -214,6 +214,7 @@
|
||||
maxAutoPilotThroughputSet: sharedAutoPilotThroughput,
|
||||
autoPilotUsageCost: autoPilotUsageCost,
|
||||
canExceedMaximumValue: canExceedMaximumValue,
|
||||
showAutoPilot: !isFreeTierAccount(),
|
||||
freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
|
||||
}"
|
||||
>
|
||||
@@ -434,6 +435,7 @@
|
||||
maxAutoPilotThroughputSet: autoPilotThroughput,
|
||||
autoPilotUsageCost: autoPilotUsageCost,
|
||||
canExceedMaximumValue: canExceedMaximumValue,
|
||||
showAutoPilot: !isFixedStorageSelected(),
|
||||
freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
|
||||
}"
|
||||
>
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import * as ko from "knockout";
|
||||
import * as _ from "underscore";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { createCollection } from "../../Common/dataAccess/createCollection";
|
||||
import editable from "../../Common/EditableUtility";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../UserContext";
|
||||
import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import * as ko from "knockout";
|
||||
import * as PricingUtils from "../../Utils/PricingUtils";
|
||||
import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import editable from "../../Common/EditableUtility";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import { ContextualPaneBase } from "./ContextualPaneBase";
|
||||
import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
|
||||
import { createCollection } from "../../Common/dataAccess/createCollection";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { userContext } from "../../UserContext";
|
||||
|
||||
export interface AddCollectionPaneOptions extends ViewModels.PaneOptions {
|
||||
isPreferredApiTable: ko.Computed<boolean>;
|
||||
@@ -49,7 +49,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
public throughputDatabase: ViewModels.Editable<number>;
|
||||
public isPreferredApiTable: ko.Computed<boolean>;
|
||||
public partitionKeyPlaceholder: ko.Computed<string>;
|
||||
public isTryCosmosDBSubscription: ko.Observable<boolean>;
|
||||
public isTryCosmosDBSubscription: ko.Computed<boolean>;
|
||||
public maxThroughputRU: ko.Observable<number>;
|
||||
public minThroughputRU: ko.Observable<number>;
|
||||
public throughputRangeText: ko.Computed<string>;
|
||||
@@ -186,6 +186,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId: string = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -199,28 +200,23 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
if (!this.isSharedAutoPilotSelected()) {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
|
||||
} else {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
@@ -244,6 +240,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId: string = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -257,28 +254,28 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
if (!this.isAutoPilotSelected()) {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.throughputMultiPartition(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
this.throughputMultiPartition(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
} else {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.autoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.autoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
@@ -288,7 +285,9 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
return estimatedSpend;
|
||||
});
|
||||
|
||||
this.isTryCosmosDBSubscription = ko.observable<boolean>(userContext.isTryCosmosDBSubscription || false);
|
||||
this.isTryCosmosDBSubscription = ko.pureComputed<boolean>(() => {
|
||||
return (this.container && this.container.isTryCosmosDBSubscription()) || false;
|
||||
});
|
||||
|
||||
this.isTryCosmosDBSubscription.subscribe((isTryCosmosDB: boolean) => {
|
||||
if (!!isTryCosmosDB) {
|
||||
@@ -299,7 +298,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
this.canRequestSupport = ko.pureComputed(() => {
|
||||
if (
|
||||
configContext.platform !== Platform.Emulator &&
|
||||
!userContext.isTryCosmosDBSubscription &&
|
||||
!this.container.isTryCosmosDBSubscription() &&
|
||||
configContext.platform !== Platform.Portal
|
||||
) {
|
||||
const offerThroughput: number = this._getThroughput();
|
||||
@@ -490,7 +489,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
|
||||
this.upsellMessage = ko.pureComputed<string>(() => {
|
||||
return PricingUtils.getUpsellMessage(
|
||||
userContext.portalEnv,
|
||||
this.container.serverId(),
|
||||
this.isFreeTierAccount(),
|
||||
this.container.isFirstResourceCreated(),
|
||||
this.container.defaultExperience(),
|
||||
@@ -750,17 +749,13 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
// return undefined if autopilot is selected for the new database/collection
|
||||
if (this.databaseCreateNew()) {
|
||||
// database is shared and autopilot is sleected for the database
|
||||
if (this.isAutoPilotSelected()) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (this.databaseCreateNewShared() && this.isSharedAutoPilotSelected()) {
|
||||
return undefined;
|
||||
}
|
||||
// database is not shared and autopilot is selected for the collection
|
||||
if (!this.databaseCreateNewShared() && this.isAutoPilotSelected()) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
return this._getThroughput();
|
||||
}
|
||||
@@ -994,7 +989,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
this.container.openEnableSynapseLinkDialog();
|
||||
}
|
||||
|
||||
public ttl90DaysEnabled: () => boolean = () => userContext.features.ttl90Days;
|
||||
public ttl90DaysEnabled: () => boolean = () => this.container.isFeatureEnabled(Constants.Features.ttl90Days);
|
||||
|
||||
public isValid(): boolean {
|
||||
// TODO add feature flag that disables validation for customers with custom accounts
|
||||
@@ -1202,7 +1197,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
|
||||
if (this.isAnalyticalStorageOn()) {
|
||||
// TODO: always default to 90 days once the backend hotfix is deployed
|
||||
return userContext.features.ttl90Days
|
||||
return this.container.isFeatureEnabled(Constants.Features.ttl90Days)
|
||||
? Constants.AnalyticalStorageTtl.Days90
|
||||
: Constants.AnalyticalStorageTtl.Infinite;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -149,6 +149,7 @@
|
||||
maxAutoPilotThroughputSet: maxAutoPilotThroughputSet,
|
||||
autoPilotUsageCost: autoPilotUsageCost,
|
||||
canExceedMaximumValue: canExceedMaximumValue,
|
||||
showAutoPilot: !isFreeTierAccount(),
|
||||
freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
|
||||
}"
|
||||
>
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import * as ko from "knockout";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { createDatabase } from "../../Common/dataAccess/createDatabase";
|
||||
import editable from "../../Common/EditableUtility";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../UserContext";
|
||||
import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import * as ko from "knockout";
|
||||
import * as PricingUtils from "../../Utils/PricingUtils";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import editable from "../../Common/EditableUtility";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { ContextualPaneBase } from "./ContextualPaneBase";
|
||||
import { createDatabase } from "../../Common/dataAccess/createDatabase";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import { userContext } from "../../UserContext";
|
||||
|
||||
export default class AddDatabasePane extends ContextualPaneBase {
|
||||
public defaultExperience: ko.Computed<string>;
|
||||
@@ -122,6 +122,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -133,15 +134,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
let estimatedSpendAcknowledge: string;
|
||||
let estimatedSpend: string;
|
||||
if (!this.isAutoPilotSelected()) {
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
|
||||
estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -149,13 +145,13 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
} else {
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.maxAutoPilotThroughputSet(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.maxAutoPilotThroughputSet(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -169,7 +165,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
this.canRequestSupport = ko.pureComputed(() => {
|
||||
if (
|
||||
configContext.platform !== Platform.Emulator &&
|
||||
!userContext.isTryCosmosDBSubscription &&
|
||||
!this.container.isTryCosmosDBSubscription() &&
|
||||
configContext.platform !== Platform.Portal
|
||||
) {
|
||||
const offerThroughput: number = this.throughput();
|
||||
@@ -243,7 +239,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
|
||||
this.upsellMessage = ko.pureComputed<string>(() => {
|
||||
return PricingUtils.getUpsellMessage(
|
||||
userContext.portalEnv,
|
||||
this.container.serverId(),
|
||||
this.isFreeTierAccount(),
|
||||
this.container.isFirstResourceCreated(),
|
||||
this.container.defaultExperience(),
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
aria-label="Keyspace id"
|
||||
/>
|
||||
|
||||
<datalist id="keyspacesList" data-bind="foreach: container.databases">
|
||||
<datalist id="keyspacesList" data-bind="foreach: container.nonSystemDatabases">
|
||||
<option data-bind="value: $data.id"></option>
|
||||
</datalist>
|
||||
|
||||
@@ -166,6 +166,7 @@
|
||||
autoPilotUsageCost: autoPilotUsageCost,
|
||||
canExceedMaximumValue: canExceedMaximumValue,
|
||||
costsVisible: costsVisible,
|
||||
showAutoPilot: !isFreeTierAccount()
|
||||
}"
|
||||
>
|
||||
</throughput-input-autopilot-v3>
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import * as ko from "knockout";
|
||||
import * as _ from "underscore";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { HashMap } from "../../Common/HashMap";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../UserContext";
|
||||
import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import * as ko from "knockout";
|
||||
import * as PricingUtils from "../../Utils/PricingUtils";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { CassandraAPIDataClient } from "../Tables/TableDataClient";
|
||||
import { ContextualPaneBase } from "./ContextualPaneBase";
|
||||
import { HashMap } from "../../Common/HashMap";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import { userContext } from "../../UserContext";
|
||||
|
||||
export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
public createTableQuery: ko.Observable<string>;
|
||||
@@ -127,6 +127,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -138,15 +139,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
let estimatedSpend: string;
|
||||
let estimatedDedicatedSpendAcknowledge: string;
|
||||
if (!this.isAutoPilotSelected()) {
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
|
||||
estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -154,13 +150,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
} else {
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.selectedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.selectedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -176,6 +172,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -186,15 +183,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
let estimatedSpend: string;
|
||||
let estimatedSharedSpendAcknowledge: string;
|
||||
if (!this.isSharedAutoPilotSelected()) {
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
this.keyspaceThroughput(),
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(this.keyspaceThroughput(), serverId, regions, multimaster);
|
||||
estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.keyspaceThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
@@ -202,13 +194,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
} else {
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
@@ -223,7 +215,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
});
|
||||
|
||||
this.canRequestSupport = ko.pureComputed(() => {
|
||||
if (configContext.platform !== Platform.Emulator && !userContext.isTryCosmosDBSubscription) {
|
||||
if (configContext.platform !== Platform.Emulator && !this.container.isTryCosmosDBSubscription()) {
|
||||
const offerThroughput: number = this.throughput();
|
||||
return offerThroughput <= 100000;
|
||||
}
|
||||
@@ -261,8 +253,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
});
|
||||
this.keyspaceIds(cachedKeyspaceIdsList);
|
||||
};
|
||||
this.container.databases.subscribe((newDatabases: ViewModels.Database[]) => updateKeyspaceIds(newDatabases));
|
||||
updateKeyspaceIds(this.container.databases());
|
||||
this.container.nonSystemDatabases.subscribe((newDatabases: ViewModels.Database[]) =>
|
||||
updateKeyspaceIds(newDatabases)
|
||||
);
|
||||
updateKeyspaceIds(this.container.nonSystemDatabases());
|
||||
}
|
||||
|
||||
this.autoPilotUsageCost = ko.pureComputed<string>(() => {
|
||||
|
||||
@@ -133,7 +133,7 @@ describe("Delete Collection Confirmation Pane", () => {
|
||||
.simulate("change", { target: { value: selectedCollectionId } });
|
||||
|
||||
expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
|
||||
wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
|
||||
wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
|
||||
expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
|
||||
|
||||
wrapper.unmount();
|
||||
@@ -154,7 +154,7 @@ describe("Delete Collection Confirmation Pane", () => {
|
||||
.simulate("change", { target: { value: feedbackText } });
|
||||
|
||||
expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
|
||||
wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
|
||||
wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
|
||||
expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
|
||||
|
||||
const deleteFeedback = new DeleteFeedback(
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
import { Text, TextField } from "office-ui-fabric-react";
|
||||
import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import * as React from "react";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { PanelFooterComponent } from "./PanelFooterComponent";
|
||||
import { Collection } from "../../Contracts/ViewModels";
|
||||
import { Text, TextField } from "office-ui-fabric-react";
|
||||
import { userContext } from "../../UserContext";
|
||||
import { Areas } from "../../Common/Constants";
|
||||
import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
|
||||
import DeleteFeedback from "../../Common/DeleteFeedback";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { Collection } from "../../Contracts/ViewModels";
|
||||
import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../UserContext";
|
||||
import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
|
||||
import { PanelErrorComponent, PanelErrorProps } from "./PanelErrorComponent";
|
||||
import DeleteFeedback from "../../Common/DeleteFeedback";
|
||||
import Explorer from "../Explorer";
|
||||
import { PanelFooterComponent } from "./PanelFooterComponent";
|
||||
import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
|
||||
import { PanelLoadingScreen } from "./PanelLoadingScreen";
|
||||
import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
|
||||
|
||||
export interface DeleteCollectionConfirmationPanelProps {
|
||||
explorer: Explorer;
|
||||
closePanel: () => void;
|
||||
@@ -43,8 +44,8 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
|
||||
render(): JSX.Element {
|
||||
return (
|
||||
<form className="panelFormWrapper" onSubmit={this.submit.bind(this)}>
|
||||
<PanelInfoErrorComponent {...this.getPanelErrorProps()} />
|
||||
<div className="panelContentContainer">
|
||||
<PanelErrorComponent {...this.getPanelErrorProps()} />
|
||||
<div className="panelMainContent">
|
||||
<div className="confirmDeleteInput">
|
||||
<span className="mandatoryStar">* </span>
|
||||
@@ -78,16 +79,18 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<PanelFooterComponent buttonLabel="OK" />
|
||||
{this.state.isExecuting && <PanelLoadingScreen />}
|
||||
</form>
|
||||
<PanelFooterComponent buttonLabel="OK" onOKButtonClicked={() => this.submit()} />
|
||||
<div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!this.state.isExecuting}>
|
||||
<img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private getPanelErrorProps(): PanelInfoErrorProps {
|
||||
private getPanelErrorProps(): PanelErrorProps {
|
||||
if (this.state.formError) {
|
||||
return {
|
||||
messageType: "error",
|
||||
isWarning: false,
|
||||
message: this.state.formError,
|
||||
showErrorDetails: true,
|
||||
openNotificationConsole: this.props.openNotificationConsole,
|
||||
@@ -95,7 +98,7 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
}
|
||||
|
||||
return {
|
||||
messageType: "warning",
|
||||
isWarning: true,
|
||||
showErrorDetails: false,
|
||||
message:
|
||||
"Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
|
||||
@@ -106,10 +109,9 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
return this.props.explorer.isLastCollection() && !this.props.explorer.isSelectedDatabaseShared();
|
||||
}
|
||||
|
||||
public async submit(event: React.FormEvent<HTMLFormElement>): Promise<void> {
|
||||
event.preventDefault();
|
||||
|
||||
public async submit(): Promise<void> {
|
||||
const collection = this.props.explorer.findSelectedCollection();
|
||||
|
||||
if (!collection || this.inputCollectionName !== collection.id()) {
|
||||
const errorMessage = "Input collection name does not match the selected collection";
|
||||
this.setState({ formError: errorMessage });
|
||||
|
||||
109
src/Explorer/Panes/DeleteDatabaseConfirmationPane.html
Normal file
109
src/Explorer/Panes/DeleteDatabaseConfirmationPane.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
|
||||
<div
|
||||
class="contextual-pane-out"
|
||||
data-bind="
|
||||
click: cancel,
|
||||
clickBubble: false"
|
||||
></div>
|
||||
<div class="contextual-pane" id="deletedatabaseconfirmationpane">
|
||||
<!-- Delete Databaes Confirmation form - Start -->
|
||||
<div class="contextual-pane-in">
|
||||
<form
|
||||
class="paneContentContainer"
|
||||
data-bind="
|
||||
submit: submit"
|
||||
>
|
||||
<!-- Delete Database Confirmation header - Start -->
|
||||
<div class="firstdivbg headerline">
|
||||
<span role="heading" aria-level="2" data-bind="text: title"></span>
|
||||
<div
|
||||
class="closeImg"
|
||||
role="button"
|
||||
aria-label="Close pane"
|
||||
tabindex="0"
|
||||
data-bind="
|
||||
click: cancel, event: { keypress: onCloseKeyPress }"
|
||||
>
|
||||
<img src="../../../images/close-black.svg" title="Close" alt="Close" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Delete Database Confirmation header - End -->
|
||||
|
||||
<div class="warningErrorContainer" data-bind="visible: !formErrors()">
|
||||
<div class="warningErrorContent">
|
||||
<span><img class="paneWarningIcon" src="/warning.svg" alt="Warning" /></span>
|
||||
<span class="warningErrorDetailsLinkContainer">
|
||||
Warning! The action you are about to take cannot be undone. Continuing will permanently delete this
|
||||
resource and all of its children resources.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Database Confirmation errors - Start -->
|
||||
<div
|
||||
class="warningErrorContainer"
|
||||
aria-live="assertive"
|
||||
data-bind="
|
||||
visible: formErrors() && formErrors() !== ''"
|
||||
>
|
||||
<div class="warningErrorContent">
|
||||
<span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
|
||||
<span class="warningErrorDetailsLinkContainer">
|
||||
<span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
|
||||
<a class="errorLink" role="link" data-bind="click: showErrorDetails">More details</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Delete Database Confirmation errors - End -->
|
||||
|
||||
<!-- Delete Database Confirmation inputs - Start -->
|
||||
<div class="paneMainContent">
|
||||
<div>
|
||||
<span class="mandatoryStar">*</span> <span data-bind="text: databaseIdConfirmationText"></span>
|
||||
<p>
|
||||
<input
|
||||
type="text"
|
||||
name="databaseIdConfirmation"
|
||||
data-test="confirmDatabaseId"
|
||||
required
|
||||
class="collid"
|
||||
data-bind="value: databaseIdConfirmation, hasFocus: firstFieldHasFocus"
|
||||
aria-label="Confirm by typing the database id"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div data-bind="visible: recordDeleteFeedback">
|
||||
<div>Help us improve Azure Cosmos DB!</div>
|
||||
<div>What is the reason why you are deleting this database?</div>
|
||||
<p>
|
||||
<textarea
|
||||
type="text"
|
||||
data-test="databaseDeleteFeedback"
|
||||
name="databaseDeleteFeedback"
|
||||
rows="3"
|
||||
cols="53"
|
||||
maxlength="512"
|
||||
class="collid"
|
||||
data-bind="value: databaseDeleteFeedback"
|
||||
aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
|
||||
>
|
||||
</textarea>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="paneFooter">
|
||||
<div class="leftpanel-okbut">
|
||||
<input type="submit" data-test="deleteDatabase" value="OK" class="btncreatecoll1" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Delete Database Confirmation inputs - End -->
|
||||
</form>
|
||||
</div>
|
||||
<!-- Delete Database Confirmation form - Start -->
|
||||
<!-- Loader - Start -->
|
||||
<div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
|
||||
<img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
|
||||
</div>
|
||||
<!-- Loader - End -->
|
||||
</div>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user