mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-23 02:41:39 +00:00
Compare commits
25 Commits
languy-com
...
PROD-2021-
| Author | SHA1 | Date | |
|---|---|---|---|
|
8bf976026f | ||
|
|
c7ba5de90d | ||
|
|
ddf59d6b24 | ||
|
316fe7e8bb | ||
|
|
ee8d2070bf | ||
|
e97a1643fb | ||
|
049e3c36d8 | ||
|
|
159c297e8d | ||
|
|
4e09e4c7fa | ||
|
|
19880203ec | ||
|
|
f929a638d6 | ||
|
|
3cccbdfe81 | ||
|
65c859c835 | ||
|
|
c6090e2663 | ||
|
|
c43e24061c | ||
|
909a9fa522 | ||
|
|
be4e490a64 | ||
|
|
9db0975f7f | ||
|
|
a2e3be9680 | ||
|
|
eab9b0ce9c | ||
|
|
d9d88c1517 | ||
|
e10ab08d5c | ||
|
|
3eda8029ba | ||
|
|
6582d3be37 | ||
|
3530633fa2 |
@@ -24,7 +24,6 @@ src/Common/ObjectCache.test.ts
|
||||
src/Common/ObjectCache.ts
|
||||
src/Common/QueriesClient.ts
|
||||
src/Common/Splitter.ts
|
||||
src/Common/UrlUtility.ts
|
||||
src/Config.ts
|
||||
src/Contracts/ActionContracts.ts
|
||||
src/Contracts/DataModels.ts
|
||||
|
||||
@@ -69,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.
|
||||
|
||||
### Architechture
|
||||
### Architecture
|
||||
|
||||
[](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)
|
||||
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"GITHUB_CLIENT_ID": "167ea4b09801db1de03d",
|
||||
"GITHUB_CLIENT_SECRET": "e7bb10a3a8da428815805c6fc483560a035a73c1"
|
||||
}
|
||||
@@ -7,5 +7,6 @@ module.exports = {
|
||||
defaultViewport: null,
|
||||
ignoreHTTPSErrors: true,
|
||||
args: ["--disable-web-security"],
|
||||
exitOnPageError: false,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -21,17 +21,13 @@ module.exports = {
|
||||
collectCoverage: true,
|
||||
|
||||
// An array of glob patterns indicating a set of files for which coverage information should be collected
|
||||
// collectCoverageFrom: [
|
||||
// "src/Common/Headers*"
|
||||
// ],
|
||||
collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
|
||||
|
||||
// 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"],
|
||||
@@ -39,10 +35,10 @@ module.exports = {
|
||||
// An object that configures minimum threshold enforcement for coverage results
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
branches: 22,
|
||||
functions: 28,
|
||||
lines: 33,
|
||||
statements: 31,
|
||||
branches: 25,
|
||||
functions: 25,
|
||||
lines: 30,
|
||||
statements: 30,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
268
package-lock.json
generated
268
package-lock.json
generated
@@ -1552,17 +1552,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@fluentui/react-icons": {
|
||||
"version": "0.3.9",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-0.3.9.tgz",
|
||||
"integrity": "sha512-xGisio0Ds8/TWkbERtg6akoegp68/Vop3n6eD7X+0HqVL0rOl44iW+cmQrnOh1xIWiz7EqLVQU0w70bL2oLCGw==",
|
||||
"requires": {
|
||||
"@microsoft/load-themed-styles": "^1.10.26",
|
||||
"@uifabric/set-version": "^7.0.23",
|
||||
"@uifabric/utilities": "^7.33.2",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@fluentui/react-window-provider": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-1.0.1.tgz",
|
||||
@@ -4428,9 +4417,9 @@
|
||||
}
|
||||
},
|
||||
"@types/expect-puppeteer": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/expect-puppeteer/-/expect-puppeteer-4.4.3.tgz",
|
||||
"integrity": "sha512-jWZOO9d8ST2vutV5yxZ1OYxxtYD0lOufIgOUlDjyTNBGo8um67shJs2NQDLVDG06wWrabpPPOUQlI8GSvsdKVQ==",
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/expect-puppeteer/-/expect-puppeteer-4.4.5.tgz",
|
||||
"integrity": "sha512-vxPaumA8Fj6xlm3llKCR9V8L936HX4PyipaNMxDbWQIOWZoCl99jabD/6xuxXnCptOWUdUhXwDuX5cAJgCHsLg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/jest": "*",
|
||||
@@ -4637,16 +4626,14 @@
|
||||
}
|
||||
},
|
||||
"@types/jest-environment-puppeteer": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/jest-environment-puppeteer/-/jest-environment-puppeteer-4.3.2.tgz",
|
||||
"integrity": "sha512-QVR49cGaQMOrWRN7CXlvtPMuVAxa3Z+W3APxhWoSQLG/lvz1y03ECPvS7Y9eK+hgfndK+39400rO6IifDJV9YA==",
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/jest-environment-puppeteer/-/jest-environment-puppeteer-4.4.1.tgz",
|
||||
"integrity": "sha512-LiZTD6i63le6QMnxi7pJB0SFv/fWtss6VVEEDm/UaeowBgjduf8txyE//j3WEeDPxngTvioUjbzA7Rc6Wc3cBA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@jest/environment": "^24",
|
||||
"@jest/fake-timers": "^24",
|
||||
"@jest/types": "^24",
|
||||
"@jest/types": ">=24 <=26",
|
||||
"@types/puppeteer": "*",
|
||||
"jest-mock": "^24"
|
||||
"jest-environment-node": ">=24 <=26"
|
||||
}
|
||||
},
|
||||
"@types/json-schema": {
|
||||
@@ -4738,9 +4725,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@types/puppeteer": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/puppeteer/-/puppeteer-3.0.1.tgz",
|
||||
"integrity": "sha512-t03eNKCvWJXhQ8wkc5C6GYuSqMEdKLOX0GLMGtks25YZr38wKZlKTwGM/BoAPVtdysX7Bb9tdwrDS1+NrW3RRA==",
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/puppeteer/-/puppeteer-5.4.3.tgz",
|
||||
"integrity": "sha512-3nE8YgR9DIsgttLW+eJf6mnXxq8Ge+27m5SU3knWmrlfl6+KOG0Bf9f7Ua7K+C4BnaTMAh3/UpySqdAYvrsvjg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/node": "*"
|
||||
@@ -8904,6 +8891,12 @@
|
||||
"integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
|
||||
"dev": true
|
||||
},
|
||||
"devtools-protocol": {
|
||||
"version": "0.0.854822",
|
||||
"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.854822.tgz",
|
||||
"integrity": "sha512-xd4D8kHQtB0KtWW0c9xBZD5LVtm9chkMOfs/3Yn01RhT/sFIsVtzTtypfKoFfWBaL+7xCYLxjOLkhwPXaX/Kcg==",
|
||||
"dev": true
|
||||
},
|
||||
"diagnostic-channel": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/diagnostic-channel/-/diagnostic-channel-0.3.1.tgz",
|
||||
@@ -15983,12 +15976,6 @@
|
||||
"through2": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"mitt": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
|
||||
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==",
|
||||
"dev": true
|
||||
},
|
||||
"mixin-deep": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
|
||||
@@ -16611,45 +16598,148 @@
|
||||
"dev": true
|
||||
},
|
||||
"office-ui-fabric-react": {
|
||||
"version": "7.134.1",
|
||||
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.134.1.tgz",
|
||||
"integrity": "sha512-yQhPdt5kQfzI/MQnqQMu9lf2mgdHSogEfVIYgfOjbvfMJoUzqA/hH3X2Z7RbncdJ/ca2H+GXVp5GvSgahCOs6g==",
|
||||
"version": "7.164.2",
|
||||
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.164.2.tgz",
|
||||
"integrity": "sha512-qx8WbSXDJbcfq7MdJujUSAkiaYTQIQBkz4pb03r9LncwlrcnVx+thgKn8yztb2g0FlP0z5ONHv1wufrOHYxnHQ==",
|
||||
"requires": {
|
||||
"@fluentui/date-time-utilities": "^7.7.0",
|
||||
"@fluentui/react-focus": "^7.15.0",
|
||||
"@fluentui/react-icons": "^0.3.0",
|
||||
"@fluentui/react-window-provider": "^0.3.0",
|
||||
"@fluentui/date-time-utilities": "^7.9.1",
|
||||
"@fluentui/react-focus": "^7.17.6",
|
||||
"@fluentui/react-window-provider": "^1.0.2",
|
||||
"@microsoft/load-themed-styles": "^1.10.26",
|
||||
"@uifabric/foundation": "^7.9.0",
|
||||
"@uifabric/icons": "^7.5.0",
|
||||
"@uifabric/merge-styles": "^7.18.0",
|
||||
"@uifabric/react-hooks": "^7.11.0",
|
||||
"@uifabric/set-version": "^7.0.22",
|
||||
"@uifabric/styling": "^7.16.0",
|
||||
"@uifabric/utilities": "^7.31.0",
|
||||
"@uifabric/foundation": "^7.9.26",
|
||||
"@uifabric/icons": "^7.5.23",
|
||||
"@uifabric/merge-styles": "^7.19.2",
|
||||
"@uifabric/react-hooks": "^7.13.12",
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"@uifabric/styling": "^7.19.0",
|
||||
"@uifabric/utilities": "^7.33.5",
|
||||
"prop-types": "^15.7.2",
|
||||
"tslib": "^1.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fluentui/react-window-provider": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-0.3.3.tgz",
|
||||
"integrity": "sha512-MVPf2hqOQ17LAZsuvGcr3oOHksAskUm+fCYdXFhbVoAgsCDVTIuH6i8XgHFd6YjBtzjZmI4+k/3NTQfDqBX8EQ==",
|
||||
"@fluentui/date-time-utilities": {
|
||||
"version": "7.9.1",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-7.9.1.tgz",
|
||||
"integrity": "sha512-o8iU1VIY+QsqVRWARKiky29fh4KR1xaKSgMClXIi65qkt8EDDhjmlzL0KVDEoDA2GWukwb/1PpaVCWDg4v3cUQ==",
|
||||
"requires": {
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@fluentui/dom-utilities": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-1.1.2.tgz",
|
||||
"integrity": "sha512-XqPS7l3YoMwxdNlaYF6S2Mp0K3FmVIOIy2K3YkMc+eRxu9wFK6emr2Q/3rBhtG5u/On37NExRT7/5CTLnoi9gw==",
|
||||
"requires": {
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@fluentui/react-focus": {
|
||||
"version": "7.17.6",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-7.17.6.tgz",
|
||||
"integrity": "sha512-JkLWNDe567lhvbnIhbYv9nUWYDIVN06utc3krs0UZBI+A0YZtQmftBtY0ghXo4PSjgozZocdu9sYkkgZOgyRLg==",
|
||||
"requires": {
|
||||
"@fluentui/keyboard-key": "^0.2.12",
|
||||
"@uifabric/merge-styles": "^7.19.2",
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"@uifabric/styling": "^7.19.0",
|
||||
"@uifabric/utilities": "^7.33.5",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@fluentui/react-window-provider": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-1.0.2.tgz",
|
||||
"integrity": "sha512-fGSgL3Vp/+6t1Ysfz21FWZmqsU+iFVxOigvHnm5uKVyyRPwtaabv/F6kQ2y5isLMI2YmJaUd2i0cDJKu8ggrvw==",
|
||||
"requires": {
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@fluentui/theme": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-1.7.4.tgz",
|
||||
"integrity": "sha512-o4eo7lstLxxXl1g2RR9yz18Yt8yjQO/LbQuZjsiAfv/4Bf0CRnb+3j1F7gxIdBWAchKj9gzaMpIFijfI98pvYQ==",
|
||||
"requires": {
|
||||
"@uifabric/merge-styles": "^7.19.2",
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"@uifabric/utilities": "^7.33.5",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@uifabric/foundation": {
|
||||
"version": "7.9.26",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-7.9.26.tgz",
|
||||
"integrity": "sha512-1FLTb+jlH/Tuel2L9wT/zLl5ZW6W4Lbjrs5VUVjv81vWxzznvPnTf8+Ew0qkzaH7xDuMNMl7okswhV0IfJyheg==",
|
||||
"requires": {
|
||||
"@uifabric/merge-styles": "^7.19.2",
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"@uifabric/styling": "^7.19.0",
|
||||
"@uifabric/utilities": "^7.33.5",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@uifabric/icons": {
|
||||
"version": "7.5.23",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-7.5.23.tgz",
|
||||
"integrity": "sha512-eIvUbH0EWgFgdfgFfINgqS2ZVZTyJ/9n5nR4bmcyAe75wsKxm4ser4WIT9IvaBF6+HFVfjUF/v6+VMD7y2LBng==",
|
||||
"requires": {
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"@uifabric/styling": "^7.19.0",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@uifabric/merge-styles": {
|
||||
"version": "7.19.2",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.19.2.tgz",
|
||||
"integrity": "sha512-kTlhwglDqwVgIaJq+0yXgzi65plGhmFcPrfme/rXUGMJZoU+qlGT5jXj5d3kuI59p6VB8jWEg9DAxHozhYeu0g==",
|
||||
"requires": {
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@uifabric/react-hooks": {
|
||||
"version": "7.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/react-hooks/-/react-hooks-7.14.0.tgz",
|
||||
"integrity": "sha512-Ndu/DEKHF4gFXEZa2AGgSkdWaj+njVrsSyXbkWRh2UZReFWnH1LMko9p/ZCwk1i9kAd5CUmyIfURUzIEya9YCg==",
|
||||
"requires": {
|
||||
"@fluentui/react-window-provider": "^1.0.2",
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"@uifabric/utilities": "^7.33.5",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@uifabric/set-version": {
|
||||
"version": "7.0.24",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.24.tgz",
|
||||
"integrity": "sha512-t0Pt21dRqdC707/ConVJC0WvcQ/KF7tKLU8AZY7YdjgJpMHi1c0C427DB4jfUY19I92f60LOQyhJ4efH+KpFEg==",
|
||||
"requires": {
|
||||
"@uifabric/set-version": "^7.0.23",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@uifabric/styling": {
|
||||
"version": "7.16.19",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.16.19.tgz",
|
||||
"integrity": "sha512-T5fjUCx0LbzUC8Myw15YCaBjdGbSrihWSiPHtLVW77k59yWAW947XnH73QngE8xU7kyKPH3AhQrUEBMB2NjHag==",
|
||||
"version": "7.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.19.0.tgz",
|
||||
"integrity": "sha512-fXComDtGV7dHF4rP4cLHwI6fC+1f/nvPavpMBz4IQdySwixta9TVMKbzt0OA6i0mJztqZCVAd27F/sl9R/JmcQ==",
|
||||
"requires": {
|
||||
"@fluentui/theme": "^1.7.1",
|
||||
"@fluentui/theme": "^1.7.4",
|
||||
"@microsoft/load-themed-styles": "^1.10.26",
|
||||
"@uifabric/merge-styles": "^7.19.1",
|
||||
"@uifabric/set-version": "^7.0.23",
|
||||
"@uifabric/utilities": "^7.33.2",
|
||||
"@uifabric/merge-styles": "^7.19.2",
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"@uifabric/utilities": "^7.33.5",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"@uifabric/utilities": {
|
||||
"version": "7.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.5.tgz",
|
||||
"integrity": "sha512-I+Oi0deD/xltSluFY8l2EVd/J4mvOaMljxKO2knSD9/KoGDlo/o5GN4gbnVo8nIt76HWHLAk3KtlJKJm6BhbIQ==",
|
||||
"requires": {
|
||||
"@fluentui/dom-utilities": "^1.1.2",
|
||||
"@uifabric/merge-styles": "^7.19.2",
|
||||
"@uifabric/set-version": "^7.0.24",
|
||||
"prop-types": "^15.7.2",
|
||||
"tslib": "^1.10.0"
|
||||
}
|
||||
}
|
||||
@@ -17690,38 +17780,66 @@
|
||||
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
|
||||
},
|
||||
"puppeteer": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-4.0.0.tgz",
|
||||
"integrity": "sha512-yNshT0M5DWfZ8DQoduZuGYpcwqXxKOZdgt5G0IF5VEKbydaDbWP/f5pQRfzQ4e+a4w0Rge3uzcogHeUPQM8nCA==",
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-8.0.0.tgz",
|
||||
"integrity": "sha512-D0RzSWlepeWkxPPdK3xhTcefj8rjah1791GE82Pdjsri49sy11ci/JQsAO8K2NRukqvwEtcI+ImP5F4ZiMvtIQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"debug": "^4.1.0",
|
||||
"devtools-protocol": "0.0.854822",
|
||||
"extract-zip": "^2.0.0",
|
||||
"https-proxy-agent": "^4.0.0",
|
||||
"mime": "^2.0.3",
|
||||
"mitt": "^2.0.1",
|
||||
"https-proxy-agent": "^5.0.0",
|
||||
"node-fetch": "^2.6.1",
|
||||
"pkg-dir": "^4.2.0",
|
||||
"progress": "^2.0.1",
|
||||
"proxy-from-env": "^1.0.0",
|
||||
"proxy-from-env": "^1.1.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"tar-fs": "^2.0.0",
|
||||
"unbzip2-stream": "^1.3.3",
|
||||
"ws": "^7.2.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"agent-base": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
|
||||
"integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
|
||||
"dev": true
|
||||
},
|
||||
"https-proxy-agent": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
|
||||
"integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
|
||||
"find-up": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
|
||||
"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"agent-base": "5",
|
||||
"debug": "4"
|
||||
"locate-path": "^5.0.0",
|
||||
"path-exists": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"locate-path": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
|
||||
"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"p-locate": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"p-locate": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
|
||||
"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"p-limit": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"path-exists": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
|
||||
"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
|
||||
"dev": true
|
||||
},
|
||||
"pkg-dir": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
|
||||
"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"find-up": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"rimraf": {
|
||||
|
||||
12
package.json
12
package.json
@@ -80,7 +80,7 @@
|
||||
"ms": "2.1.3",
|
||||
"msal": "1.4.4",
|
||||
"object.entries": "1.1.0",
|
||||
"office-ui-fabric-react": "7.134.1",
|
||||
"office-ui-fabric-react": "7.164.2",
|
||||
"p-retry": "4.2.0",
|
||||
"plotly.js-cartesian-dist-min": "1.52.3",
|
||||
"promise-polyfill": "8.1.0",
|
||||
@@ -121,15 +121,15 @@
|
||||
"@types/d3": "5.9.2",
|
||||
"@types/enzyme": "3.10.7",
|
||||
"@types/enzyme-adapter-react-16": "1.0.6",
|
||||
"@types/expect-puppeteer": "4.4.3",
|
||||
"@types/expect-puppeteer": "4.4.5",
|
||||
"@types/hasher": "0.0.31",
|
||||
"@types/jest": "26.0.20",
|
||||
"@types/jest-environment-puppeteer": "4.3.2",
|
||||
"@types/jest-environment-puppeteer": "4.4.1",
|
||||
"@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": "3.0.1",
|
||||
"@types/puppeteer": "5.4.3",
|
||||
"@types/q": "1.5.1",
|
||||
"@types/react": "17.0.0",
|
||||
"@types/react-dom": "17.0.0",
|
||||
@@ -176,7 +176,7 @@
|
||||
"monaco-editor-webpack-plugin": "1.7.0",
|
||||
"node-fetch": "2.6.1",
|
||||
"prettier": "2.2.1",
|
||||
"puppeteer": "4.0.0",
|
||||
"puppeteer": "8.0.0",
|
||||
"raw-loader": "0.5.1",
|
||||
"rimraf": "3.0.0",
|
||||
"sinon": "3.2.1",
|
||||
@@ -238,4 +238,4 @@
|
||||
"prettier": {
|
||||
"printWidth": 120
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -120,6 +120,7 @@ export class Features {
|
||||
public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
|
||||
public static readonly selfServeType = "selfservetype";
|
||||
public static readonly enableKOPanel = "enablekopanel";
|
||||
public static readonly enableReactPane = "enablereactpane";
|
||||
}
|
||||
|
||||
// flight names returned from the portal are always lowercase
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
import Q from "q";
|
||||
import * as _ from "underscore";
|
||||
import * as Constants from "./Constants";
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
import { getDataExplorerWindow } from "../Utils/WindowUtils";
|
||||
import * as Constants from "./Constants";
|
||||
|
||||
export interface CachedDataPromise<T> {
|
||||
deferred: Q.Deferred<T>;
|
||||
@@ -61,6 +61,21 @@ 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;
|
||||
}
|
||||
|
||||
@@ -1,55 +1,61 @@
|
||||
export default class UrlUtility {
|
||||
public static parseDocumentsPath(resourcePath: string): any {
|
||||
if (typeof resourcePath !== "string") {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (resourcePath.length === 0) {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (resourcePath[resourcePath.length - 1] !== "/") {
|
||||
resourcePath = resourcePath + "/";
|
||||
}
|
||||
|
||||
if (resourcePath[0] !== "/") {
|
||||
resourcePath = "/" + resourcePath;
|
||||
}
|
||||
|
||||
var id: string;
|
||||
var type: string;
|
||||
var pathParts = resourcePath.split("/");
|
||||
|
||||
if (pathParts.length % 2 === 0) {
|
||||
id = pathParts[pathParts.length - 2];
|
||||
type = pathParts[pathParts.length - 3];
|
||||
} else {
|
||||
id = pathParts[pathParts.length - 3];
|
||||
type = pathParts[pathParts.length - 2];
|
||||
}
|
||||
|
||||
var result = {
|
||||
type: type,
|
||||
objectBody: {
|
||||
id: id,
|
||||
self: resourcePath,
|
||||
},
|
||||
};
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
public static createUri(baseUri: string, relativeUri: string): string {
|
||||
if (!baseUri) {
|
||||
throw new Error("baseUri is null or empty");
|
||||
}
|
||||
|
||||
var slashAtEndOfUriRegex = /\/$/,
|
||||
slashAtStartOfUriRegEx = /^\//;
|
||||
|
||||
var normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
|
||||
normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
|
||||
|
||||
return normalizedBaseUri + normalizedRelativeUri;
|
||||
}
|
||||
interface Result {
|
||||
type?: string;
|
||||
objectBody?: {
|
||||
id: string;
|
||||
self: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function parseDocumentsPath(resourcePath: string): Result {
|
||||
if (typeof resourcePath !== "string") {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (resourcePath.length === 0) {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (resourcePath[resourcePath.length - 1] !== "/") {
|
||||
resourcePath = resourcePath + "/";
|
||||
}
|
||||
|
||||
if (resourcePath[0] !== "/") {
|
||||
resourcePath = "/" + resourcePath;
|
||||
}
|
||||
|
||||
let id: string;
|
||||
let type: string;
|
||||
const pathParts = resourcePath.split("/");
|
||||
|
||||
if (pathParts.length % 2 === 0) {
|
||||
id = pathParts[pathParts.length - 2];
|
||||
type = pathParts[pathParts.length - 3];
|
||||
} else {
|
||||
id = pathParts[pathParts.length - 3];
|
||||
type = pathParts[pathParts.length - 2];
|
||||
}
|
||||
|
||||
const result = {
|
||||
type: type,
|
||||
objectBody: {
|
||||
id: id,
|
||||
self: resourcePath,
|
||||
},
|
||||
};
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export function createUri(baseUri: string, relativeUri: string): string {
|
||||
if (!baseUri) {
|
||||
throw new Error("baseUri is null or empty");
|
||||
}
|
||||
|
||||
const slashAtEndOfUriRegex = /\/$/,
|
||||
slashAtStartOfUriRegEx = /^\//;
|
||||
|
||||
const normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
|
||||
normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
|
||||
|
||||
return normalizedBaseUri + normalizedRelativeUri;
|
||||
}
|
||||
|
||||
@@ -390,7 +390,6 @@ export interface DataExplorerInputsFrame {
|
||||
sharedThroughputMaximum?: number;
|
||||
sharedThroughputDefault?: number;
|
||||
dataExplorerVersion?: string;
|
||||
isAuthWithresourceToken?: boolean;
|
||||
defaultCollectionThroughput?: CollectionCreationDefaults;
|
||||
flights?: readonly string[];
|
||||
}
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
import * as Plotly from "plotly.js-cartesian-dist-min";
|
||||
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 {
|
||||
ChartSettings,
|
||||
DataPayload,
|
||||
@@ -11,11 +16,6 @@ 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);
|
||||
sendMessage("ready");
|
||||
sendReadyMessage();
|
||||
|
||||
@@ -6,6 +6,7 @@ describe("CollapsibleSectionComponent", () => {
|
||||
it("renders", () => {
|
||||
const props: CollapsibleSectionProps = {
|
||||
title: "Sample title",
|
||||
isExpandedByDefault: true,
|
||||
};
|
||||
|
||||
const wrapper = shallow(<CollapsibleSectionComponent {...props} />);
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { Icon, Label, Stack } from "office-ui-fabric-react";
|
||||
import * as React from "react";
|
||||
import { accordionIconStyles, accordionStackTokens } from "../Settings/SettingsRenderUtils";
|
||||
import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
|
||||
|
||||
export interface CollapsibleSectionProps {
|
||||
title: string;
|
||||
isExpandedByDefault: boolean;
|
||||
}
|
||||
|
||||
export interface CollapsibleSectionState {
|
||||
@@ -14,7 +15,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
|
||||
constructor(props: CollapsibleSectionProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isExpanded: true,
|
||||
isExpanded: this.props.isExpandedByDefault,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -25,8 +26,14 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<Stack className="collapsibleSection" horizontal tokens={accordionStackTokens} onClick={this.toggleCollapsed}>
|
||||
<Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
|
||||
<Stack
|
||||
className="collapsibleSection"
|
||||
horizontal
|
||||
verticalAlign="center"
|
||||
tokens={accordionStackTokens}
|
||||
onClick={this.toggleCollapsed}
|
||||
>
|
||||
<Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
|
||||
<Label>{this.props.title}</Label>
|
||||
</Stack>
|
||||
{this.state.isExpanded && this.props.children}
|
||||
|
||||
@@ -11,16 +11,10 @@ exports[`CollapsibleSectionComponent renders 1`] = `
|
||||
"childrenGap": 10,
|
||||
}
|
||||
}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="ChevronDown"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"paddingTop": 7,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
<StyledLabelBase>
|
||||
Sample title
|
||||
|
||||
@@ -354,7 +354,6 @@ exports[`test render renders with filters 1`] = `
|
||||
data-is-scrollable="true"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="stickyAbove-42"
|
||||
style={
|
||||
Object {
|
||||
@@ -375,7 +374,6 @@ exports[`test render renders with filters 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
style={
|
||||
Object {
|
||||
"pointerEvents": "none",
|
||||
@@ -395,7 +393,6 @@ exports[`test render renders with filters 1`] = `
|
||||
style={Object {}}
|
||||
>
|
||||
<div
|
||||
aria-hidden={false}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "",
|
||||
@@ -411,6 +408,7 @@ exports[`test render renders with filters 1`] = `
|
||||
>
|
||||
<TextFieldBase
|
||||
ariaLabel="Directory filter text box"
|
||||
canRevealPassword={false}
|
||||
className="directoryListFilterTextBox"
|
||||
deferredValidationTime={200}
|
||||
onChange={[Function]}
|
||||
@@ -1123,7 +1121,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"iconDisabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1149,7 +1147,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"menuIconDisabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1168,7 +1166,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 2,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
"outlineColor": "ButtonText",
|
||||
@@ -1247,7 +1245,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 2,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
"outlineColor": "ButtonText",
|
||||
@@ -1279,8 +1277,10 @@ exports[`test render renders with filters 1`] = `
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f1",
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: 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)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: 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)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: 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)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"border": "none",
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
@@ -1373,19 +1373,20 @@ exports[`test render renders with filters 1`] = `
|
||||
"borderBottomRightRadius": "0",
|
||||
"borderTopRightRadius": "0",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: 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)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"border": "1px solid WindowText",
|
||||
"borderLeftWidth": "0",
|
||||
},
|
||||
@@ -1398,10 +1399,11 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -1411,10 +1413,11 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -1424,12 +1427,11 @@ exports[`test render renders with filters 1`] = `
|
||||
"border": "none",
|
||||
"outline": "none",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
},
|
||||
"@media screen and (forced-colors: active)": Object {
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
@@ -1441,7 +1443,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Highlight",
|
||||
"color": "Window",
|
||||
},
|
||||
@@ -1450,7 +1452,7 @@ exports[`test render renders with filters 1`] = `
|
||||
".ms-Button.is-disabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
@@ -1466,7 +1468,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "WindowText",
|
||||
},
|
||||
},
|
||||
@@ -1478,7 +1480,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "WindowText",
|
||||
},
|
||||
},
|
||||
@@ -1495,7 +1497,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1518,7 +1520,7 @@ exports[`test render renders with filters 1`] = `
|
||||
":hover": Object {
|
||||
"backgroundColor": "#edebe9",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "Highlight",
|
||||
},
|
||||
},
|
||||
@@ -1526,6 +1528,11 @@ 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",
|
||||
@@ -1571,7 +1578,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
@@ -1580,7 +1587,7 @@ exports[`test render renders with filters 1`] = `
|
||||
},
|
||||
".ms-Button-menuIcon": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1588,7 +1595,7 @@ exports[`test render renders with filters 1`] = `
|
||||
":hover": Object {
|
||||
"cursor": "default",
|
||||
},
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"border": "1px solid GrayText",
|
||||
"color": "GrayText",
|
||||
@@ -1893,7 +1900,7 @@ exports[`test render renders with filters 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-disabled={true}
|
||||
className="ms-Button ms-Button--default is-disabled directoryListButton root-54"
|
||||
className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
|
||||
data-is-focusable={false}
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
@@ -1905,7 +1912,7 @@ exports[`test render renders with filters 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="ms-Button-flexContainer flexContainer-55"
|
||||
className="ms-Button-flexContainer flexContainer-58"
|
||||
data-automationid="splitbuttonprimary"
|
||||
>
|
||||
<div
|
||||
@@ -1936,7 +1943,6 @@ exports[`test render renders with filters 1`] = `
|
||||
</List>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="stickyBelow-43"
|
||||
style={
|
||||
Object {
|
||||
|
||||
@@ -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 UrlUtility from "../../../Common/UrlUtility";
|
||||
import * as UrlUtility from "../../../Common/UrlUtility";
|
||||
import Explorer from "../../Explorer";
|
||||
|
||||
export interface AddRepoComponentProps {
|
||||
|
||||
@@ -47,6 +47,7 @@ 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);
|
||||
@@ -103,7 +104,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
|
||||
</Card.Item>
|
||||
|
||||
<Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
|
||||
<Text variant="small" nowrap>
|
||||
<Text variant="small" nowrap styles={{ root: { height: GalleryCardComponent.smallTextLineHeight } }}>
|
||||
{this.props.data.tags ? (
|
||||
this.props.data.tags.map((tag, index, array) => (
|
||||
<span key={tag}>
|
||||
@@ -129,7 +130,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
|
||||
{cardTitle}
|
||||
</Text>
|
||||
|
||||
<Text variant="small" styles={{ root: { height: 36 } }}>
|
||||
<Text variant="small" styles={{ root: { height: GalleryCardComponent.smallTextLineHeight * 2 } }}>
|
||||
{this.renderTruncatedDescription()}
|
||||
</Text>
|
||||
|
||||
|
||||
@@ -50,6 +50,13 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
>
|
||||
<Text
|
||||
nowrap={true}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"height": 18,
|
||||
},
|
||||
}
|
||||
}
|
||||
variant="small"
|
||||
>
|
||||
<span
|
||||
@@ -100,7 +107,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="RedEye"
|
||||
styles={
|
||||
Object {
|
||||
@@ -124,7 +131,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="Download"
|
||||
styles={
|
||||
Object {
|
||||
@@ -148,7 +155,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="Heart"
|
||||
styles={
|
||||
Object {
|
||||
@@ -173,7 +180,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
}
|
||||
>
|
||||
<Styled
|
||||
<Separator
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
|
||||
@@ -13,7 +13,7 @@ exports[`InfoComponent renders 1`] = `
|
||||
<div
|
||||
className="infoPanelMain"
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
className="infoIconMain"
|
||||
iconName="Help"
|
||||
styles={
|
||||
|
||||
@@ -68,14 +68,14 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
|
||||
Invalid Date
|
||||
</Text>
|
||||
<Text>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="RedEye"
|
||||
/>
|
||||
|
||||
0
|
||||
</Text>
|
||||
<Text>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="Download"
|
||||
/>
|
||||
0
|
||||
@@ -180,14 +180,14 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
|
||||
Invalid Date
|
||||
</Text>
|
||||
<Text>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="RedEye"
|
||||
/>
|
||||
|
||||
0
|
||||
</Text>
|
||||
<Text>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
iconName="Download"
|
||||
/>
|
||||
0
|
||||
|
||||
@@ -1,49 +1,51 @@
|
||||
import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
|
||||
import * as React from "react";
|
||||
import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
|
||||
import * as Constants from "../../../Common/Constants";
|
||||
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 Explorer from "../../Explorer";
|
||||
import { updateOffer } from "../../../Common/dataAccess/updateOffer";
|
||||
import { AuthType } from "../../../AuthType";
|
||||
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 { 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 { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
|
||||
import "./SettingsComponent.less";
|
||||
import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
|
||||
import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
|
||||
import {
|
||||
MongoIndexingPolicyComponent,
|
||||
MongoIndexingPolicyComponentProps,
|
||||
} from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
|
||||
import {
|
||||
hasDatabaseSharedThroughput,
|
||||
GeospatialConfigType,
|
||||
TtlType,
|
||||
ChangeFeedPolicyState,
|
||||
SettingsV2TabTypes,
|
||||
getTabTitle,
|
||||
isDirty,
|
||||
AddMongoIndexProps,
|
||||
MongoIndexTypes,
|
||||
parseConflictResolutionMode,
|
||||
parseConflictResolutionProcedure,
|
||||
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";
|
||||
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,
|
||||
isDirty,
|
||||
MongoIndexTypes,
|
||||
parseConflictResolutionMode,
|
||||
parseConflictResolutionProcedure,
|
||||
SettingsV2TabTypes,
|
||||
TtlType,
|
||||
} from "./SettingsUtils";
|
||||
|
||||
interface SettingsV2TabInfo {
|
||||
tab: SettingsV2TabTypes;
|
||||
@@ -325,7 +327,6 @@ 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(
|
||||
@@ -699,7 +700,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
}
|
||||
}
|
||||
|
||||
this.container.isRefreshingExplorer(false);
|
||||
this.setBaseline();
|
||||
this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
|
||||
traceSuccess(
|
||||
@@ -862,7 +862,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
});
|
||||
}
|
||||
}
|
||||
this.container.isRefreshingExplorer(false);
|
||||
this.setBaseline();
|
||||
this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
|
||||
traceSuccess(
|
||||
@@ -877,6 +876,18 @@ 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,
|
||||
@@ -994,15 +1005,11 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />,
|
||||
});
|
||||
} else if (this.container.isPreferredApiMongoDB()) {
|
||||
if (this.container.isEnableMongoCapabilityPresent()) {
|
||||
const mongoIndexTabContext = this.getMongoIndexTabContent(mongoIndexingPolicyComponentProps);
|
||||
if (mongoIndexTabContext) {
|
||||
tabs.push({
|
||||
tab: SettingsV2TabTypes.IndexingPolicyTab,
|
||||
content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />,
|
||||
});
|
||||
} else {
|
||||
tabs.push({
|
||||
tab: SettingsV2TabTypes.IndexingPolicyTab,
|
||||
content: mongoIndexingPolicyAADError,
|
||||
content: mongoIndexTabContext,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,6 @@ import {
|
||||
ITextStyles,
|
||||
IDetailsRowStyles,
|
||||
IStackStyles,
|
||||
IIconStyles,
|
||||
IDetailsListStyles,
|
||||
IDropdownStyles,
|
||||
ISeparatorStyles,
|
||||
@@ -116,8 +115,6 @@ 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)">
|
||||
<CollapsibleSectionComponent title="Current index(es)" isExpandedByDefault={true}>
|
||||
{
|
||||
<>
|
||||
<DetailsList
|
||||
@@ -266,7 +266,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
|
||||
|
||||
return (
|
||||
<Stack styles={mediumWidthStackStyles}>
|
||||
<CollapsibleSectionComponent title="Index(es) to be dropped">
|
||||
<CollapsibleSectionComponent title="Index(es) to be dropped" isExpandedByDefault={true}>
|
||||
{indexesToBeDropped.length > 0 && (
|
||||
<DetailsList
|
||||
styles={customDetailsListStyles}
|
||||
|
||||
@@ -42,6 +42,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
|
||||
}
|
||||
>
|
||||
<CollapsibleSectionComponent
|
||||
isExpandedByDefault={true}
|
||||
title="Current index(es)"
|
||||
>
|
||||
<StyledWithViewportComponent
|
||||
@@ -114,7 +115,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
|
||||
</Stack>
|
||||
</CollapsibleSectionComponent>
|
||||
</Stack>
|
||||
<Styled
|
||||
<Separator
|
||||
styles={
|
||||
Object {
|
||||
"root": Array [
|
||||
@@ -139,6 +140,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
|
||||
}
|
||||
>
|
||||
<CollapsibleSectionComponent
|
||||
isExpandedByDefault={true}
|
||||
title="Index(es) to be dropped"
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
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 { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
|
||||
import * as ViewModels from "../../../../Contracts/ViewModels";
|
||||
import { configContext, Platform } from "../../../../ConfigContext";
|
||||
import * as DataModels from "../../../../Contracts/DataModels";
|
||||
import * as ViewModels from "../../../../Contracts/ViewModels";
|
||||
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 * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
|
||||
import { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
|
||||
import { configContext, Platform } from "../../../../ConfigContext";
|
||||
import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
|
||||
|
||||
export interface ScaleComponentProps {
|
||||
collection: ViewModels.Collection;
|
||||
@@ -79,7 +80,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
|
||||
};
|
||||
|
||||
public getMaxRUs = (): number => {
|
||||
if (this.props.container?.isTryCosmosDBSubscription()) {
|
||||
if (userContext.isTryCosmosDBSubscription) {
|
||||
return Constants.TryCosmosExperience.maxRU;
|
||||
}
|
||||
|
||||
@@ -91,7 +92,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
|
||||
};
|
||||
|
||||
public getMinRUs = (): number => {
|
||||
if (this.props.container?.isTryCosmosDBSubscription()) {
|
||||
if (userContext.isTryCosmosDBSubscription) {
|
||||
return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
|
||||
}
|
||||
|
||||
@@ -172,7 +173,6 @@ 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,17 +1,16 @@
|
||||
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,55 +1,53 @@
|
||||
import React from "react";
|
||||
import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
|
||||
import {
|
||||
getTextFieldStyles,
|
||||
getToolTipContainer,
|
||||
noLeftPaddingCheckBoxStyle,
|
||||
titleAndInputStackProps,
|
||||
checkBoxAndInputStackProps,
|
||||
getChoiceGroupStyles,
|
||||
messageBarStyles,
|
||||
getEstimatedSpendingElement,
|
||||
getAutoPilotV3SpendElement,
|
||||
manualToAutoscaleDisclaimerElement,
|
||||
saveThroughputWarningMessage,
|
||||
ManualEstimatedSpendingDisplayProps,
|
||||
AutoscaleEstimatedSpendingDisplayProps,
|
||||
PriceBreakdown,
|
||||
getRuPriceBreakdown,
|
||||
transparentDetailsHeaderStyle,
|
||||
} from "../../SettingsRenderUtils";
|
||||
import {
|
||||
Text,
|
||||
TextField,
|
||||
ChoiceGroup,
|
||||
IChoiceGroupOption,
|
||||
Checkbox,
|
||||
Stack,
|
||||
ChoiceGroup,
|
||||
FontIcon,
|
||||
IChoiceGroupOption,
|
||||
IColumn,
|
||||
Label,
|
||||
Link,
|
||||
MessageBar,
|
||||
FontIcon,
|
||||
IColumn,
|
||||
Stack,
|
||||
Text,
|
||||
TextField,
|
||||
} from "office-ui-fabric-react";
|
||||
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 React from "react";
|
||||
import { Features } from "../../../../../Common/Constants";
|
||||
import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
|
||||
|
||||
import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
|
||||
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";
|
||||
|
||||
export interface ThroughputInputAutoPilotV3Props {
|
||||
databaseAccount: DataModels.DatabaseAccount;
|
||||
databaseName: string;
|
||||
collectionName: string;
|
||||
serverId: string;
|
||||
throughput: number;
|
||||
throughputBaseline: number;
|
||||
onThroughputChange: (newThroughput: number) => void;
|
||||
@@ -182,7 +180,6 @@ 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;
|
||||
|
||||
@@ -192,7 +189,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,
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
isDirty ? this.props.throughput : undefined
|
||||
@@ -200,7 +197,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
|
||||
} else {
|
||||
estimatedSpend = this.getEstimatedAutoscaleSpendElement(
|
||||
this.props.maxAutoPilotThroughputBaseline,
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
isDirty ? this.props.maxAutoPilotThroughput : undefined
|
||||
|
||||
@@ -41,7 +41,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
|
||||
}
|
||||
}
|
||||
>
|
||||
<StyledIconBase
|
||||
<Icon
|
||||
ariaLabel="Info"
|
||||
iconName="Info"
|
||||
styles={
|
||||
|
||||
@@ -920,7 +920,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"hasStorageAnalyticsAfecFeature": [Function],
|
||||
"hasWriteAccess": [Function],
|
||||
"isAccountReady": [Function],
|
||||
"isAuthWithResourceToken": [Function],
|
||||
"isAutoscaleDefaultEnabled": [Function],
|
||||
"isCopyNotebookPaneEnabled": [Function],
|
||||
"isEnableMongoCapabilityPresent": [Function],
|
||||
@@ -937,7 +936,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isPreferredApiMongoDB": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isPublishNotebookPaneEnabled": [Function],
|
||||
"isRefreshingExplorer": [Function],
|
||||
"isResourceTokenCollectionNodeSelected": [Function],
|
||||
"isRightPanelV2Enabled": [Function],
|
||||
"isSchemaEnabled": [Function],
|
||||
@@ -946,7 +944,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isSparkEnabledForAccount": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTabsContentExpanded": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"loadQueryPane": LoadQueryPane {
|
||||
"container": [Circular],
|
||||
"files": [Function],
|
||||
@@ -1060,7 +1057,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"serverId": [Function],
|
||||
"setInProgressConsoleDataIdToBeDeleted": undefined,
|
||||
"setIsNotificationConsoleExpanded": undefined,
|
||||
"setNotificationConsoleData": undefined,
|
||||
@@ -2121,7 +2117,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"hasStorageAnalyticsAfecFeature": [Function],
|
||||
"hasWriteAccess": [Function],
|
||||
"isAccountReady": [Function],
|
||||
"isAuthWithResourceToken": [Function],
|
||||
"isAutoscaleDefaultEnabled": [Function],
|
||||
"isCopyNotebookPaneEnabled": [Function],
|
||||
"isEnableMongoCapabilityPresent": [Function],
|
||||
@@ -2138,7 +2133,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isPreferredApiMongoDB": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isPublishNotebookPaneEnabled": [Function],
|
||||
"isRefreshingExplorer": [Function],
|
||||
"isResourceTokenCollectionNodeSelected": [Function],
|
||||
"isRightPanelV2Enabled": [Function],
|
||||
"isSchemaEnabled": [Function],
|
||||
@@ -2147,7 +2141,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isSparkEnabledForAccount": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTabsContentExpanded": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"loadQueryPane": LoadQueryPane {
|
||||
"container": [Circular],
|
||||
"files": [Function],
|
||||
@@ -2261,7 +2254,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"serverId": [Function],
|
||||
"setInProgressConsoleDataIdToBeDeleted": undefined,
|
||||
"setIsNotificationConsoleExpanded": undefined,
|
||||
"setNotificationConsoleData": undefined,
|
||||
@@ -3335,7 +3327,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"hasStorageAnalyticsAfecFeature": [Function],
|
||||
"hasWriteAccess": [Function],
|
||||
"isAccountReady": [Function],
|
||||
"isAuthWithResourceToken": [Function],
|
||||
"isAutoscaleDefaultEnabled": [Function],
|
||||
"isCopyNotebookPaneEnabled": [Function],
|
||||
"isEnableMongoCapabilityPresent": [Function],
|
||||
@@ -3352,7 +3343,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isPreferredApiMongoDB": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isPublishNotebookPaneEnabled": [Function],
|
||||
"isRefreshingExplorer": [Function],
|
||||
"isResourceTokenCollectionNodeSelected": [Function],
|
||||
"isRightPanelV2Enabled": [Function],
|
||||
"isSchemaEnabled": [Function],
|
||||
@@ -3361,7 +3351,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isSparkEnabledForAccount": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTabsContentExpanded": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"loadQueryPane": LoadQueryPane {
|
||||
"container": [Circular],
|
||||
"files": [Function],
|
||||
@@ -3475,7 +3464,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"serverId": [Function],
|
||||
"setInProgressConsoleDataIdToBeDeleted": undefined,
|
||||
"setIsNotificationConsoleExpanded": undefined,
|
||||
"setNotificationConsoleData": undefined,
|
||||
@@ -4536,7 +4524,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"hasStorageAnalyticsAfecFeature": [Function],
|
||||
"hasWriteAccess": [Function],
|
||||
"isAccountReady": [Function],
|
||||
"isAuthWithResourceToken": [Function],
|
||||
"isAutoscaleDefaultEnabled": [Function],
|
||||
"isCopyNotebookPaneEnabled": [Function],
|
||||
"isEnableMongoCapabilityPresent": [Function],
|
||||
@@ -4553,7 +4540,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isPreferredApiMongoDB": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isPublishNotebookPaneEnabled": [Function],
|
||||
"isRefreshingExplorer": [Function],
|
||||
"isResourceTokenCollectionNodeSelected": [Function],
|
||||
"isRightPanelV2Enabled": [Function],
|
||||
"isSchemaEnabled": [Function],
|
||||
@@ -4562,7 +4548,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isSparkEnabledForAccount": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTabsContentExpanded": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"loadQueryPane": LoadQueryPane {
|
||||
"container": [Circular],
|
||||
"files": [Function],
|
||||
@@ -4676,7 +4661,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"serverId": [Function],
|
||||
"setInProgressConsoleDataIdToBeDeleted": undefined,
|
||||
"setIsNotificationConsoleExpanded": undefined,
|
||||
"setNotificationConsoleData": undefined,
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import * as React from "react";
|
||||
import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
|
||||
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 { Slider } from "office-ui-fabric-react/lib/Slider";
|
||||
import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
|
||||
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
|
||||
import { TextField } from "office-ui-fabric-react/lib/TextField";
|
||||
import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
|
||||
import { Text } from "office-ui-fabric-react/lib/Text";
|
||||
import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
|
||||
import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
|
||||
import * as InputUtils from "./InputUtils";
|
||||
import "./SmartUiComponent.less";
|
||||
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 {
|
||||
ChoiceItem,
|
||||
Description,
|
||||
@@ -19,8 +18,9 @@ import {
|
||||
NumberUiType,
|
||||
SmartUiInput,
|
||||
} from "../../../SelfServe/SelfServeTypes";
|
||||
import { TFunction } from "i18next";
|
||||
import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent";
|
||||
import * as InputUtils from "./InputUtils";
|
||||
import "./SmartUiComponent.less";
|
||||
|
||||
/**
|
||||
* Generic UX renderer
|
||||
@@ -138,11 +138,12 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
);
|
||||
}
|
||||
|
||||
private renderTextInput(input: StringInput, labelId: string): JSX.Element {
|
||||
private renderTextInput(input: StringInput, labelId: string, labelElement: JSX.Element): 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 (
|
||||
<div className="stringInputContainer">
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<TextField
|
||||
id={`${input.dataFieldName}-textField-input`}
|
||||
aria-labelledby={labelId}
|
||||
@@ -155,25 +156,32 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
root: { width: 400 },
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
private renderDescription(input: DescriptionDisplay, labelId: string): JSX.Element {
|
||||
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) {
|
||||
return this.renderError("Description is not provided.");
|
||||
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 = (
|
||||
<Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
|
||||
{this.props.getTranslation(description.textTKey)}{" "}
|
||||
{description.link && (
|
||||
<Link target="_blank" href={description.link.href}>
|
||||
{this.props.getTranslation(description.link.textTKey)}
|
||||
</Link>
|
||||
)}
|
||||
</Text>
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
|
||||
{this.props.getTranslation(description.textTKey)}{" "}
|
||||
{description.link && (
|
||||
<Link target="_blank" href={description.link.href}>
|
||||
{this.props.getTranslation(description.link.textTKey)}
|
||||
</Link>
|
||||
)}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
if (description.type === DescriptionType.Text) {
|
||||
@@ -227,7 +235,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
return undefined;
|
||||
};
|
||||
|
||||
private renderNumberInput(input: NumberInput, labelId: string): JSX.Element {
|
||||
private renderNumberInput(input: NumberInput, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
const { labelTKey, min, max, dataFieldName, step } = input;
|
||||
const props = {
|
||||
min: min,
|
||||
@@ -240,61 +248,72 @@ 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 styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
|
||||
<SpinButton
|
||||
{...props}
|
||||
id={`${input.dataFieldName}-spinner-input`}
|
||||
value={value?.toString()}
|
||||
onValidate={(newValue) => this.onValidate(input, newValue, props.min, props.max)}
|
||||
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}
|
||||
/>
|
||||
{this.state.errors.has(dataFieldName) && (
|
||||
<MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
|
||||
)}
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
|
||||
<SpinButton
|
||||
{...props}
|
||||
id={`${input.dataFieldName}-spinner-input`}
|
||||
value={value?.toString()}
|
||||
onValidate={(newValue) => this.onValidate(input, newValue, props.min, props.max)}
|
||||
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}
|
||||
/>
|
||||
{this.state.errors.has(dataFieldName) && (
|
||||
<MessageBar messageBarType={MessageBarType.error}>
|
||||
Error: {this.state.errors.get(dataFieldName)}
|
||||
</MessageBar>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
} else if (input.uiType === NumberUiType.Slider) {
|
||||
return (
|
||||
<div id={`${input.dataFieldName}-slider-input`}>
|
||||
<Slider
|
||||
{...props}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onChange={(newValue) => this.props.onInputChange(input, newValue)}
|
||||
styles={{
|
||||
root: { width: 400 },
|
||||
valueLabel: SmartUiComponent.labelStyle,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<div id={`${input.dataFieldName}-slider-input`}>
|
||||
<Slider
|
||||
{...props}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onChange={(newValue) => this.props.onInputChange(input, newValue)}
|
||||
styles={{
|
||||
root: { width: 400 },
|
||||
valueLabel: SmartUiComponent.labelStyle,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
);
|
||||
} else {
|
||||
return <>Unsupported number UI type {input.uiType}</>;
|
||||
}
|
||||
}
|
||||
|
||||
private renderBooleanInput(input: BooleanInput, labelId: string): JSX.Element {
|
||||
private renderBooleanInput(input: BooleanInput, labelId: string, labelElement: JSX.Element): 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 (
|
||||
<Toggle
|
||||
id={`${input.dataFieldName}-toggle-input`}
|
||||
aria-labelledby={labelId}
|
||||
checked={value || false}
|
||||
onText={this.props.getTranslation(input.trueLabelTKey)}
|
||||
offText={this.props.getTranslation(input.falseLabelTKey)}
|
||||
disabled={disabled}
|
||||
onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
|
||||
styles={{ root: { width: 400 } }}
|
||||
/>
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Toggle
|
||||
id={`${input.dataFieldName}-toggle-input`}
|
||||
aria-labelledby={labelId}
|
||||
checked={value || false}
|
||||
onText={this.props.getTranslation(input.trueLabelTKey)}
|
||||
offText={this.props.getTranslation(input.falseLabelTKey)}
|
||||
disabled={disabled}
|
||||
onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
|
||||
styles={{ root: { width: 400 } }}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
private renderChoiceInput(input: ChoiceInput, labelId: string): JSX.Element {
|
||||
private renderChoiceInput(input: ChoiceInput, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
const { 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;
|
||||
@@ -303,22 +322,26 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
selectedKey = "";
|
||||
}
|
||||
return (
|
||||
<Dropdown
|
||||
id={`${input.dataFieldName}-dropdown-input`}
|
||||
aria-labelledby={labelId}
|
||||
selectedKey={selectedKey}
|
||||
onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
|
||||
placeholder={this.props.getTranslation(placeholderTKey)}
|
||||
disabled={disabled}
|
||||
options={choices.map((c) => ({
|
||||
key: c.key,
|
||||
text: this.props.getTranslation(c.label),
|
||||
}))}
|
||||
styles={{
|
||||
root: { width: 400 },
|
||||
dropdown: SmartUiComponent.labelStyle,
|
||||
}}
|
||||
/>
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Dropdown
|
||||
id={`${input.dataFieldName}-dropdown-input`}
|
||||
aria-labelledby={labelId}
|
||||
selectedKey={selectedKey}
|
||||
onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
|
||||
placeholder={this.props.getTranslation(placeholderTKey)}
|
||||
disabled={disabled}
|
||||
dropdownWidth="auto"
|
||||
options={choices.map((c) => ({
|
||||
key: c.key,
|
||||
text: this.props.getTranslation(c.label),
|
||||
}))}
|
||||
styles={{
|
||||
root: { width: 400 },
|
||||
dropdown: SmartUiComponent.labelStyle,
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -326,7 +349,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
|
||||
}
|
||||
|
||||
private renderDisplayWithInfoBubble(input: AnyDisplay, info: Info): JSX.Element {
|
||||
private renderElement(input: AnyDisplay, info: Info): JSX.Element {
|
||||
if (input.errorMessage) {
|
||||
return this.renderError(input.errorMessage);
|
||||
}
|
||||
@@ -335,34 +358,31 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
return <></>;
|
||||
}
|
||||
const labelId = `${input.dataFieldName}-label`;
|
||||
return (
|
||||
<Stack>
|
||||
{input.labelTKey && (
|
||||
<Label id={labelId}>
|
||||
<ToolTipLabelComponent
|
||||
label={this.props.getTranslation(input.labelTKey)}
|
||||
toolTipElement={this.renderInfo(info)}
|
||||
/>
|
||||
</Label>
|
||||
)}
|
||||
{this.renderDisplay(input, labelId)}
|
||||
</Stack>
|
||||
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 renderDisplay(input: AnyDisplay, labelId: string): JSX.Element {
|
||||
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);
|
||||
return this.renderDescription(input as DescriptionDisplay, labelId, labelElement);
|
||||
}
|
||||
return this.renderTextInput(input as StringInput, labelId);
|
||||
return this.renderTextInput(input as StringInput, labelId, labelElement);
|
||||
case "number":
|
||||
return this.renderNumberInput(input as NumberInput, labelId);
|
||||
return this.renderNumberInput(input as NumberInput, labelId, labelElement);
|
||||
case "boolean":
|
||||
return this.renderBooleanInput(input as BooleanInput, labelId);
|
||||
return this.renderBooleanInput(input as BooleanInput, labelId, labelElement);
|
||||
case "object":
|
||||
return this.renderChoiceInput(input as ChoiceInput, labelId);
|
||||
return this.renderChoiceInput(input as ChoiceInput, labelId, labelElement);
|
||||
default:
|
||||
throw new Error(`Unknown input type: ${input.type}`);
|
||||
}
|
||||
@@ -373,7 +393,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
|
||||
return (
|
||||
<Stack tokens={containerStackTokens} className="widgetRendererContainer">
|
||||
<Stack.Item>{node.input && this.renderDisplayWithInfoBubble(node.input, node.info as Info)}</Stack.Item>
|
||||
<Stack.Item>{node.input && this.renderElement(node.input, node.info as Info)}</Stack.Item>
|
||||
{node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -23,19 +23,21 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
id="description-text-display"
|
||||
>
|
||||
this is an example description text.
|
||||
|
||||
<StyledLinkBase
|
||||
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
|
||||
target="_blank"
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
id="description-text-display"
|
||||
>
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
this is an example description text.
|
||||
|
||||
<StyledLinkBase
|
||||
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
|
||||
target="_blank"
|
||||
>
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -53,51 +55,53 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (input)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<Stack
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 2,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedSpinButton
|
||||
aria-labelledby="throughput-label"
|
||||
ariaLabel="Throughput (input)"
|
||||
decrementButtonIcon={
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (input)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<Stack
|
||||
styles={
|
||||
Object {
|
||||
"iconName": "ChevronDownSmall",
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
disabled={true}
|
||||
id="throughput-spinner-input"
|
||||
incrementButtonIcon={
|
||||
tokens={
|
||||
Object {
|
||||
"iconName": "ChevronUpSmall",
|
||||
"childrenGap": 2,
|
||||
}
|
||||
}
|
||||
label=""
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
onDecrement={[Function]}
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
/>
|
||||
>
|
||||
<CustomizedSpinButton
|
||||
aria-labelledby="throughput-label"
|
||||
ariaLabel="Throughput (input)"
|
||||
decrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronDownSmall",
|
||||
}
|
||||
}
|
||||
disabled={true}
|
||||
id="throughput-spinner-input"
|
||||
incrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronUpSmall",
|
||||
}
|
||||
}
|
||||
label=""
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
onDecrement={[Function]}
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
@@ -116,37 +120,39 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (Slider)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
disabled={true}
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"valueLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (Slider)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
disabled={true}
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"valueLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -185,16 +191,14 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledTextFieldBase
|
||||
aria-labelledby="containerId-label"
|
||||
disabled={true}
|
||||
@@ -210,7 +214,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -228,29 +232,31 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledToggleBase
|
||||
aria-labelledby="analyticalStore-label"
|
||||
checked={false}
|
||||
disabled={true}
|
||||
id="analyticalStore-toggle-input"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledToggleBase
|
||||
aria-labelledby="analyticalStore-label"
|
||||
checked={false}
|
||||
disabled={true}
|
||||
id="analyticalStore-toggle-input"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -268,48 +274,51 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Database"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledWithResponsiveMode
|
||||
aria-labelledby="database-label"
|
||||
disabled={true}
|
||||
id="database-dropdown-input"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": "db1",
|
||||
"text": "Database 1",
|
||||
},
|
||||
Object {
|
||||
"key": "db2",
|
||||
"text": "Database 2",
|
||||
},
|
||||
Object {
|
||||
"key": "db3",
|
||||
"text": "Database 3",
|
||||
},
|
||||
]
|
||||
}
|
||||
selectedKey="db2"
|
||||
styles={
|
||||
Object {
|
||||
"dropdown": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Database"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledWithResponsiveMode
|
||||
aria-labelledby="database-label"
|
||||
disabled={true}
|
||||
dropdownWidth="auto"
|
||||
id="database-dropdown-input"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": "db1",
|
||||
"text": "Database 1",
|
||||
},
|
||||
Object {
|
||||
"key": "db2",
|
||||
"text": "Database 2",
|
||||
},
|
||||
Object {
|
||||
"key": "db3",
|
||||
"text": "Database 3",
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
/>
|
||||
selectedKey="db2"
|
||||
styles={
|
||||
Object {
|
||||
"dropdown": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -340,19 +349,21 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
id="description-text-display"
|
||||
>
|
||||
this is an example description text.
|
||||
|
||||
<StyledLinkBase
|
||||
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
|
||||
target="_blank"
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
id="description-text-display"
|
||||
>
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
this is an example description text.
|
||||
|
||||
<StyledLinkBase
|
||||
href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
|
||||
target="_blank"
|
||||
>
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -370,51 +381,53 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (input)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<Stack
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
tokens={
|
||||
Object {
|
||||
"childrenGap": 2,
|
||||
}
|
||||
}
|
||||
>
|
||||
<CustomizedSpinButton
|
||||
aria-labelledby="throughput-label"
|
||||
ariaLabel="Throughput (input)"
|
||||
decrementButtonIcon={
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (input)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<Stack
|
||||
styles={
|
||||
Object {
|
||||
"iconName": "ChevronDownSmall",
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
disabled={false}
|
||||
id="throughput-spinner-input"
|
||||
incrementButtonIcon={
|
||||
tokens={
|
||||
Object {
|
||||
"iconName": "ChevronUpSmall",
|
||||
"childrenGap": 2,
|
||||
}
|
||||
}
|
||||
label=""
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
onDecrement={[Function]}
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
/>
|
||||
>
|
||||
<CustomizedSpinButton
|
||||
aria-labelledby="throughput-label"
|
||||
ariaLabel="Throughput (input)"
|
||||
decrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronDownSmall",
|
||||
}
|
||||
}
|
||||
disabled={false}
|
||||
id="throughput-spinner-input"
|
||||
incrementButtonIcon={
|
||||
Object {
|
||||
"iconName": "ChevronUpSmall",
|
||||
}
|
||||
}
|
||||
label=""
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
onDecrement={[Function]}
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
@@ -433,36 +446,38 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (Slider)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"valueLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (Slider)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
max={500}
|
||||
min={400}
|
||||
onChange={[Function]}
|
||||
step={10}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"valueLabel": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -501,16 +516,14 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledTextFieldBase
|
||||
aria-labelledby="containerId-label"
|
||||
id="containerId-textField-input"
|
||||
@@ -525,7 +538,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -543,28 +556,30 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledToggleBase
|
||||
aria-labelledby="analyticalStore-label"
|
||||
checked={false}
|
||||
id="analyticalStore-toggle-input"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledToggleBase
|
||||
aria-labelledby="analyticalStore-label"
|
||||
checked={false}
|
||||
id="analyticalStore-toggle-input"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -582,47 +597,50 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Database"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledWithResponsiveMode
|
||||
aria-labelledby="database-label"
|
||||
id="database-dropdown-input"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": "db1",
|
||||
"text": "Database 1",
|
||||
},
|
||||
Object {
|
||||
"key": "db2",
|
||||
"text": "Database 2",
|
||||
},
|
||||
Object {
|
||||
"key": "db3",
|
||||
"text": "Database 3",
|
||||
},
|
||||
]
|
||||
}
|
||||
selectedKey="db2"
|
||||
styles={
|
||||
Object {
|
||||
"dropdown": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Database"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledWithResponsiveMode
|
||||
aria-labelledby="database-label"
|
||||
dropdownWidth="auto"
|
||||
id="database-dropdown-input"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": "db1",
|
||||
"text": "Database 1",
|
||||
},
|
||||
Object {
|
||||
"key": "db2",
|
||||
"text": "Database 2",
|
||||
},
|
||||
Object {
|
||||
"key": "db3",
|
||||
"text": "Database 3",
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
/>
|
||||
selectedKey="db2"
|
||||
styles={
|
||||
Object {
|
||||
"dropdown": Object {
|
||||
"color": "#393939",
|
||||
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
|
||||
"fontSize": 12,
|
||||
},
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
|
||||
20
src/Explorer/Controls/ThroughputInput/ThroughputInput.less
Normal file
20
src/Explorer/Controls/ThroughputInput/ThroughputInput.less
Normal file
@@ -0,0 +1,20 @@
|
||||
@import "../../../../less/Common/Constants";
|
||||
|
||||
.throughputInputContainer {
|
||||
.throughputInputRadioBtn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.throughputInputRadioBtnLabel {
|
||||
font-size: @mediumFontSize;
|
||||
padding: 0 @LargeSpace 0 @SmallSpace;
|
||||
}
|
||||
|
||||
.throughputInputSpacing {
|
||||
margin-bottom: @SmallSpace;
|
||||
|
||||
& > * {
|
||||
margin-bottom: @SmallSpace;
|
||||
}
|
||||
}
|
||||
302
src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
Normal file
302
src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
Normal file
@@ -0,0 +1,302 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -48,6 +48,7 @@ import { FileSystemUtil } from "./Notebook/FileSystemUtil";
|
||||
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";
|
||||
@@ -163,8 +164,6 @@ export default class Explorer {
|
||||
public isAccountReady: ko.Observable<boolean>;
|
||||
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;
|
||||
@@ -186,11 +185,6 @@ export default class Explorer {
|
||||
public selectedCollectionId: ko.Computed<string>;
|
||||
public isLeftPaneExpanded: ko.Observable<boolean>;
|
||||
public selectedNode: ko.Observable<ViewModels.TreeNode>;
|
||||
/**
|
||||
* @deprecated
|
||||
* Use a local loading state and spinner instead. Using a global isRefreshing state causes problems.
|
||||
* */
|
||||
public isRefreshingExplorer: ko.Observable<boolean>;
|
||||
private resourceTree: ResourceTreeAdapter;
|
||||
|
||||
// Resource Token
|
||||
@@ -198,9 +192,8 @@ export default class Explorer {
|
||||
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>;
|
||||
private resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
|
||||
public resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
|
||||
|
||||
// Tabs
|
||||
public isTabsContentExpanded: ko.Observable<boolean>;
|
||||
@@ -301,22 +294,6 @@ 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._isInitializingNotebooks = false;
|
||||
this.arcadiaToken = ko.observable<string>();
|
||||
@@ -337,7 +314,9 @@ export default class Explorer {
|
||||
this.isSynapseLinkUpdating = ko.observable<boolean>(false);
|
||||
this.isAccountReady.subscribe(async (isAccountReady: boolean) => {
|
||||
if (isAccountReady) {
|
||||
this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases(true);
|
||||
userContext.authType === AuthType.ResourceToken
|
||||
? this.refreshDatabaseForResourceToken()
|
||||
: this.refreshAllDatabases(true);
|
||||
RouteHandler.getInstance().initHandler();
|
||||
this.notebookWorkspaceManager = new NotebookWorkspaceManager();
|
||||
this.arcadiaWorkspaces = ko.observableArray();
|
||||
@@ -348,7 +327,7 @@ export default class Explorer {
|
||||
Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
|
||||
async () => {
|
||||
this.isNotebookEnabled(
|
||||
!this.isAuthWithResourceToken() &&
|
||||
userContext.authType !== AuthType.ResourceToken &&
|
||||
((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
|
||||
this.isFeatureEnabled(Constants.Features.enableNotebooks))
|
||||
);
|
||||
@@ -397,15 +376,12 @@ 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);
|
||||
@@ -1086,7 +1062,6 @@ 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,
|
||||
});
|
||||
@@ -1116,22 +1091,19 @@ export default class Explorer {
|
||||
this.deleteDatabasesFromList(deltaDatabases.toDelete);
|
||||
this.selectedNode(currentlySelectedNode);
|
||||
this._setLoadingStatusText("Fetching containers...");
|
||||
this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
|
||||
.then(
|
||||
() => {
|
||||
this._setLoadingStatusText("Successfully fetched containers.");
|
||||
deferred.resolve();
|
||||
},
|
||||
(reason) => {
|
||||
this._setLoadingStatusText("Failed to fetch containers.");
|
||||
deferred.reject(reason);
|
||||
}
|
||||
)
|
||||
.finally(() => this.isRefreshingExplorer(false));
|
||||
this.refreshAndExpandNewDatabases(deltaDatabases.toAdd).then(
|
||||
() => {
|
||||
this._setLoadingStatusText("Successfully fetched containers.");
|
||||
deferred.resolve();
|
||||
},
|
||||
(reason) => {
|
||||
this._setLoadingStatusText("Failed to fetch containers.");
|
||||
deferred.reject(reason);
|
||||
}
|
||||
);
|
||||
},
|
||||
(error) => {
|
||||
this._setLoadingStatusText("Failed to fetch databases.");
|
||||
this.isRefreshingExplorer(false);
|
||||
deferred.reject(error);
|
||||
const errorMessage = getErrorMessage(error);
|
||||
TelemetryProcessor.traceFailure(
|
||||
@@ -1191,8 +1163,9 @@ export default class Explorer {
|
||||
description: "Refresh button clicked",
|
||||
dataExplorerArea: Constants.Areas.ResourceTree,
|
||||
});
|
||||
this.isRefreshingExplorer(true);
|
||||
this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases();
|
||||
userContext.authType === AuthType.ResourceToken
|
||||
? this.refreshDatabaseForResourceToken()
|
||||
: this.refreshAllDatabases();
|
||||
this.refreshNotebookList();
|
||||
};
|
||||
|
||||
@@ -1441,15 +1414,12 @@ export default class Explorer {
|
||||
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);
|
||||
TelemetryProcessor.traceSuccess(
|
||||
Action.LoadDatabaseAccount,
|
||||
@@ -1530,9 +1500,9 @@ export default class Explorer {
|
||||
|
||||
public isRunningOnNationalCloud(): boolean {
|
||||
return (
|
||||
this.serverId() === Constants.ServerIds.blackforest ||
|
||||
this.serverId() === Constants.ServerIds.fairfax ||
|
||||
this.serverId() === Constants.ServerIds.mooncake
|
||||
userContext.portalEnv === "blackforest" ||
|
||||
userContext.portalEnv === "fairfax" ||
|
||||
userContext.portalEnv === "mooncake"
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2397,10 +2367,12 @@ export default class Explorer {
|
||||
public onNewCollectionClicked(): void {
|
||||
if (this.isPreferredApiCassandra()) {
|
||||
this.cassandraAddCollectionPane.open();
|
||||
} else if (this.isFeatureEnabled(Constants.Features.enableReactPane)) {
|
||||
this.openAddCollectionPanel();
|
||||
} else {
|
||||
this.addCollectionPane.open(this.selectedDatabaseId());
|
||||
document.getElementById("linkAddCollection").focus();
|
||||
}
|
||||
document.getElementById("linkAddCollection").focus();
|
||||
}
|
||||
|
||||
private refreshCommandBarButtons(): void {
|
||||
@@ -2540,4 +2512,16 @@ export default class Explorer {
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
public async openAddCollectionPanel(): Promise<void> {
|
||||
await this.loadDatabaseOffers();
|
||||
this.openSidePanel(
|
||||
"New Collection",
|
||||
<AddCollectionPanel
|
||||
explorer={this}
|
||||
closePanel={() => this.closeSidePanel()}
|
||||
openNotificationConsole={() => this.expandConsole()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
/**
|
||||
* This adapter is responsible to render the React component
|
||||
* If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
|
||||
* and update any knockout observables passed from the parent.
|
||||
*/
|
||||
import * as ko from "knockout";
|
||||
import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
|
||||
import * as React from "react";
|
||||
import { StyleConstants } from "../../../Common/Constants";
|
||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||
import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
|
||||
import * as CommandBarUtil from "./CommandBarUtil";
|
||||
|
||||
export interface CommandBarComponentProps {
|
||||
isNotebookTabActive: boolean;
|
||||
tabsButtons: CommandButtonComponentProps[];
|
||||
}
|
||||
|
||||
export const CommandBarComponent: React.FunctionComponent = ({ isNotebookTabActive, tabsButtons }: CommandBarComponentProps) {
|
||||
|
||||
constructor(props: CommandBarComponentProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isNotebookTabActive: false
|
||||
}
|
||||
|
||||
this.container = container;
|
||||
this.tabsButtons = [];
|
||||
// this.isNotebookTabActive = ko.computed(() =>
|
||||
// container.tabsManager.isTabActive(ViewModels.CollectionTabKind.NotebookV2)
|
||||
// );
|
||||
|
||||
// These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
|
||||
const toWatch = [
|
||||
container.isPreferredApiTable,
|
||||
container.isPreferredApiMongoDB,
|
||||
container.isPreferredApiDocumentDB,
|
||||
container.isPreferredApiCassandra,
|
||||
container.isPreferredApiGraph,
|
||||
container.deleteCollectionText,
|
||||
container.deleteDatabaseText,
|
||||
container.addCollectionText,
|
||||
container.addDatabaseText,
|
||||
container.isDatabaseNodeOrNoneSelected,
|
||||
container.isDatabaseNodeSelected,
|
||||
container.isNoneSelected,
|
||||
container.isResourceTokenCollectionNodeSelected,
|
||||
container.isHostedDataExplorerEnabled,
|
||||
container.isSynapseLinkUpdating,
|
||||
container.databaseAccount,
|
||||
this.isNotebookTabActive,
|
||||
container.isServerlessEnabled,
|
||||
];
|
||||
|
||||
ko.computed(() => ko.toJSON(toWatch)).subscribe(() => this.triggerRender());
|
||||
this.parameters = ko.observable(Date.now());
|
||||
}
|
||||
|
||||
public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
|
||||
this.tabsButtons = buttons;
|
||||
this.triggerRender();
|
||||
}
|
||||
|
||||
const backgroundColor = StyleConstants.BaseLight;
|
||||
|
||||
const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(this.container);
|
||||
const contextButtons = (this.tabsButtons || []).concat(
|
||||
CommandBarComponentButtonFactory.createContextCommandBarButtons(this.container)
|
||||
);
|
||||
const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(this.container);
|
||||
|
||||
const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
|
||||
if (this.tabsButtons && this.tabsButtons.length > 0) {
|
||||
uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
|
||||
}
|
||||
|
||||
const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
|
||||
|
||||
if (uiFabricTabsButtons.length > 0) {
|
||||
uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
|
||||
}
|
||||
|
||||
const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
|
||||
uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
|
||||
|
||||
if (props.isNotebookTabActive) {
|
||||
uiFabricControlButtons.unshift(
|
||||
CommandBarUtil.createMemoryTracker("memoryTracker", this.container.memoryUsageInfo)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="commandBarContainer">
|
||||
<CommandBar
|
||||
ariaLabel="Use left and right arrow keys to navigate between commands"
|
||||
items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
|
||||
farItems={uiFabricControlButtons}
|
||||
styles={{
|
||||
root: { backgroundColor: backgroundColor },
|
||||
}}
|
||||
overflowButtonProps={{ ariaLabel: "More commands" }}
|
||||
/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
110
src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
Normal file
110
src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
/**
|
||||
* This adapter is responsible to render the React component
|
||||
* If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
|
||||
* and update any knockout observables passed from the parent.
|
||||
*/
|
||||
import * as ko from "knockout";
|
||||
import * as React from "react";
|
||||
import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
|
||||
import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
|
||||
import { StyleConstants } from "../../../Common/Constants";
|
||||
import * as CommandBarUtil from "./CommandBarUtil";
|
||||
import Explorer from "../../Explorer";
|
||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||
|
||||
export class CommandBarComponentAdapter implements ReactAdapter {
|
||||
public parameters: ko.Observable<number>;
|
||||
public container: Explorer;
|
||||
private tabsButtons: CommandButtonComponentProps[];
|
||||
private isNotebookTabActive: ko.Computed<boolean>;
|
||||
|
||||
constructor(container: Explorer) {
|
||||
this.container = container;
|
||||
this.tabsButtons = [];
|
||||
this.isNotebookTabActive = ko.computed(() =>
|
||||
container.tabsManager.isTabActive(ViewModels.CollectionTabKind.NotebookV2)
|
||||
);
|
||||
|
||||
// These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
|
||||
const toWatch = [
|
||||
container.isPreferredApiTable,
|
||||
container.isPreferredApiMongoDB,
|
||||
container.isPreferredApiDocumentDB,
|
||||
container.isPreferredApiCassandra,
|
||||
container.isPreferredApiGraph,
|
||||
container.deleteCollectionText,
|
||||
container.deleteDatabaseText,
|
||||
container.addCollectionText,
|
||||
container.addDatabaseText,
|
||||
container.isDatabaseNodeOrNoneSelected,
|
||||
container.isDatabaseNodeSelected,
|
||||
container.isNoneSelected,
|
||||
container.isResourceTokenCollectionNodeSelected,
|
||||
container.isHostedDataExplorerEnabled,
|
||||
container.isSynapseLinkUpdating,
|
||||
container.databaseAccount,
|
||||
this.isNotebookTabActive,
|
||||
container.isServerlessEnabled,
|
||||
];
|
||||
|
||||
ko.computed(() => ko.toJSON(toWatch)).subscribe(() => this.triggerRender());
|
||||
this.parameters = ko.observable(Date.now());
|
||||
}
|
||||
|
||||
public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
|
||||
this.tabsButtons = buttons;
|
||||
this.triggerRender();
|
||||
}
|
||||
|
||||
public renderComponent(): JSX.Element {
|
||||
const backgroundColor = StyleConstants.BaseLight;
|
||||
|
||||
const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(this.container);
|
||||
const contextButtons = (this.tabsButtons || []).concat(
|
||||
CommandBarComponentButtonFactory.createContextCommandBarButtons(this.container)
|
||||
);
|
||||
const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(this.container);
|
||||
|
||||
const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
|
||||
if (this.tabsButtons && this.tabsButtons.length > 0) {
|
||||
uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
|
||||
}
|
||||
|
||||
const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
|
||||
|
||||
if (uiFabricTabsButtons.length > 0) {
|
||||
uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
|
||||
}
|
||||
|
||||
const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
|
||||
uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
|
||||
|
||||
if (this.isNotebookTabActive()) {
|
||||
uiFabricControlButtons.unshift(
|
||||
CommandBarUtil.createMemoryTracker("memoryTracker", this.container.memoryUsageInfo)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="commandBarContainer">
|
||||
<CommandBar
|
||||
ariaLabel="Use left and right arrow keys to navigate between commands"
|
||||
items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
|
||||
farItems={uiFabricControlButtons}
|
||||
styles={{
|
||||
root: { backgroundColor: backgroundColor },
|
||||
}}
|
||||
overflowButtonProps={{ ariaLabel: "More commands" }}
|
||||
/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
private triggerRender() {
|
||||
window.requestAnimationFrame(() => this.parameters(Date.now()));
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,10 @@
|
||||
import * as ko from "knockout";
|
||||
import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
|
||||
import { AuthType } from "../../../AuthType";
|
||||
import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
|
||||
import NotebookManager from "../../Notebook/NotebookManager";
|
||||
import { updateUserContext } from "../../../UserContext";
|
||||
import Explorer from "../../Explorer";
|
||||
import NotebookManager from "../../Notebook/NotebookManager";
|
||||
import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
|
||||
|
||||
describe("CommandBarComponentButtonFactory tests", () => {
|
||||
let mockExplorer: Explorer;
|
||||
@@ -13,7 +15,6 @@ 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);
|
||||
@@ -53,7 +54,6 @@ 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,7 +118,6 @@ 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);
|
||||
@@ -199,7 +198,6 @@ 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);
|
||||
@@ -281,7 +279,6 @@ 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);
|
||||
@@ -340,12 +337,13 @@ 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,37 +1,38 @@
|
||||
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 * as React from "react";
|
||||
import AddCollectionIcon from "../../../../images/AddCollection.svg";
|
||||
import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
|
||||
import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.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 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 AddUdfIcon from "../../../../images/AddUdf.svg";
|
||||
import BrowseQueriesIcon from "../../../../images/BrowseQuery.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 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 GitHubIcon from "../../../../images/github.svg";
|
||||
import OpenInTabIcon from "../../../../images/open-in-tab.svg";
|
||||
import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
|
||||
import SettingsIcon from "../../../../images/settings_15x15.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 Explorer from "../../Explorer";
|
||||
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 * as React from "react";
|
||||
import Explorer from "../../Explorer";
|
||||
import { OpenFullScreen } from "../../OpenFullScreen";
|
||||
|
||||
let counter = 0;
|
||||
|
||||
export function createStaticCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
|
||||
if (container.isAuthWithResourceToken()) {
|
||||
if (userContext.authType === AuthType.ResourceToken) {
|
||||
return createStaticCommandBarButtonsForResourceToken(container);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer } from "rxjs";
|
||||
import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer, from } from "rxjs";
|
||||
import { webSocket } from "rxjs/webSocket";
|
||||
import { StateObservable } from "redux-observable";
|
||||
import { ofType } from "redux-observable";
|
||||
@@ -944,6 +944,39 @@ 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,
|
||||
@@ -960,4 +993,5 @@ export const allEpics = [
|
||||
traceNotebookTelemetryEpic,
|
||||
traceNotebookInfoEpic,
|
||||
traceNotebookKernelEpic,
|
||||
resetCellStatusOnExecuteCanceledEpic,
|
||||
];
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import * as _ from "underscore";
|
||||
import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
|
||||
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 { 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 * 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 PricingUtils from "../../Utils/PricingUtils";
|
||||
import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
|
||||
import { ContextualPaneBase } from "./ContextualPaneBase";
|
||||
|
||||
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.Computed<boolean>;
|
||||
public isTryCosmosDBSubscription: ko.Observable<boolean>;
|
||||
public maxThroughputRU: ko.Observable<number>;
|
||||
public minThroughputRU: ko.Observable<number>;
|
||||
public throughputRangeText: ko.Computed<string>;
|
||||
@@ -186,7 +186,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId: string = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -200,23 +199,28 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
if (!this.isSharedAutoPilotSelected()) {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
offerThroughput,
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
} else {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
@@ -240,7 +244,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId: string = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -254,28 +257,28 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
if (!this.isAutoPilotSelected()) {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.throughputMultiPartition(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
this.throughputMultiPartition(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
} else {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.autoPilotThroughput(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.autoPilotThroughput(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
@@ -285,9 +288,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
return estimatedSpend;
|
||||
});
|
||||
|
||||
this.isTryCosmosDBSubscription = ko.pureComputed<boolean>(() => {
|
||||
return (this.container && this.container.isTryCosmosDBSubscription()) || false;
|
||||
});
|
||||
this.isTryCosmosDBSubscription = ko.observable<boolean>(userContext.isTryCosmosDBSubscription || false);
|
||||
|
||||
this.isTryCosmosDBSubscription.subscribe((isTryCosmosDB: boolean) => {
|
||||
if (!!isTryCosmosDB) {
|
||||
@@ -298,7 +299,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
this.canRequestSupport = ko.pureComputed(() => {
|
||||
if (
|
||||
configContext.platform !== Platform.Emulator &&
|
||||
!this.container.isTryCosmosDBSubscription() &&
|
||||
!userContext.isTryCosmosDBSubscription &&
|
||||
configContext.platform !== Platform.Portal
|
||||
) {
|
||||
const offerThroughput: number = this._getThroughput();
|
||||
@@ -489,7 +490,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
|
||||
this.upsellMessage = ko.pureComputed<string>(() => {
|
||||
return PricingUtils.getUpsellMessage(
|
||||
this.container.serverId(),
|
||||
userContext.portalEnv,
|
||||
this.isFreeTierAccount(),
|
||||
this.container.isFirstResourceCreated(),
|
||||
this.container.defaultExperience(),
|
||||
|
||||
1018
src/Explorer/Panes/AddCollectionPanel.tsx
Normal file
1018
src/Explorer/Panes/AddCollectionPanel.tsx
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,19 +1,19 @@
|
||||
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 * as Constants from "../../Common/Constants";
|
||||
import { createDatabase } from "../../Common/dataAccess/createDatabase";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
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 PricingUtils from "../../Utils/PricingUtils";
|
||||
import { ContextualPaneBase } from "./ContextualPaneBase";
|
||||
|
||||
export default class AddDatabasePane extends ContextualPaneBase {
|
||||
public defaultExperience: ko.Computed<string>;
|
||||
@@ -122,7 +122,6 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -134,10 +133,15 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
let estimatedSpendAcknowledge: string;
|
||||
let estimatedSpend: string;
|
||||
if (!this.isAutoPilotSelected()) {
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
offerThroughput,
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -145,13 +149,13 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
} else {
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.maxAutoPilotThroughputSet(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.maxAutoPilotThroughputSet(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -165,7 +169,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
this.canRequestSupport = ko.pureComputed(() => {
|
||||
if (
|
||||
configContext.platform !== Platform.Emulator &&
|
||||
!this.container.isTryCosmosDBSubscription() &&
|
||||
!userContext.isTryCosmosDBSubscription &&
|
||||
configContext.platform !== Platform.Portal
|
||||
) {
|
||||
const offerThroughput: number = this.throughput();
|
||||
@@ -239,7 +243,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
|
||||
this.upsellMessage = ko.pureComputed<string>(() => {
|
||||
return PricingUtils.getUpsellMessage(
|
||||
this.container.serverId(),
|
||||
userContext.portalEnv,
|
||||
this.isFreeTierAccount(),
|
||||
this.container.isFirstResourceCreated(),
|
||||
this.container.defaultExperience(),
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import * as _ from "underscore";
|
||||
import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
|
||||
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 * 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 { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
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 PricingUtils from "../../Utils/PricingUtils";
|
||||
import { CassandraAPIDataClient } from "../Tables/TableDataClient";
|
||||
import { ContextualPaneBase } from "./ContextualPaneBase";
|
||||
|
||||
export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
public createTableQuery: ko.Observable<string>;
|
||||
@@ -127,7 +127,6 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -139,10 +138,15 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
let estimatedSpend: string;
|
||||
let estimatedDedicatedSpendAcknowledge: string;
|
||||
if (!this.isAutoPilotSelected()) {
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
offerThroughput,
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -150,13 +154,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
} else {
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.selectedAutoPilotThroughput(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.selectedAutoPilotThroughput(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -172,7 +176,6 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -183,10 +186,15 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
let estimatedSpend: string;
|
||||
let estimatedSharedSpendAcknowledge: string;
|
||||
if (!this.isSharedAutoPilotSelected()) {
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(this.keyspaceThroughput(), serverId, regions, multimaster);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
this.keyspaceThroughput(),
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.keyspaceThroughput(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
@@ -194,13 +202,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
} else {
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
@@ -215,7 +223,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
});
|
||||
|
||||
this.canRequestSupport = ko.pureComputed(() => {
|
||||
if (configContext.platform !== Platform.Emulator && !this.container.isTryCosmosDBSubscription()) {
|
||||
if (configContext.platform !== Platform.Emulator && !userContext.isTryCosmosDBSubscription) {
|
||||
const offerThroughput: number = this.throughput();
|
||||
return offerThroughput <= 100000;
|
||||
}
|
||||
|
||||
@@ -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("click");
|
||||
wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
|
||||
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("click");
|
||||
wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
|
||||
expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
|
||||
|
||||
const deleteFeedback = new DeleteFeedback(
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
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 * as React from "react";
|
||||
import { Areas } from "../../Common/Constants";
|
||||
import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
|
||||
import { PanelErrorComponent, PanelErrorProps } from "./PanelErrorComponent";
|
||||
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 Explorer from "../Explorer";
|
||||
import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
|
||||
|
||||
import { PanelFooterComponent } from "./PanelFooterComponent";
|
||||
import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
|
||||
import { PanelLoadingScreen } from "./PanelLoadingScreen";
|
||||
export interface DeleteCollectionConfirmationPanelProps {
|
||||
explorer: Explorer;
|
||||
closePanel: () => void;
|
||||
@@ -44,8 +43,8 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
|
||||
render(): JSX.Element {
|
||||
return (
|
||||
<div className="panelContentContainer">
|
||||
<PanelErrorComponent {...this.getPanelErrorProps()} />
|
||||
<form className="panelFormWrapper" onSubmit={this.submit.bind(this)}>
|
||||
<PanelInfoErrorComponent {...this.getPanelErrorProps()} />
|
||||
<div className="panelMainContent">
|
||||
<div className="confirmDeleteInput">
|
||||
<span className="mandatoryStar">* </span>
|
||||
@@ -79,18 +78,16 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<PanelFooterComponent buttonLabel="OK" onOKButtonClicked={() => this.submit()} />
|
||||
<div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!this.state.isExecuting}>
|
||||
<img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
|
||||
</div>
|
||||
</div>
|
||||
<PanelFooterComponent buttonLabel="OK" />
|
||||
{this.state.isExecuting && <PanelLoadingScreen />}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
private getPanelErrorProps(): PanelErrorProps {
|
||||
private getPanelErrorProps(): PanelInfoErrorProps {
|
||||
if (this.state.formError) {
|
||||
return {
|
||||
isWarning: false,
|
||||
messageType: "error",
|
||||
message: this.state.formError,
|
||||
showErrorDetails: true,
|
||||
openNotificationConsole: this.props.openNotificationConsole,
|
||||
@@ -98,7 +95,7 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
}
|
||||
|
||||
return {
|
||||
isWarning: true,
|
||||
messageType: "warning",
|
||||
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.",
|
||||
@@ -109,9 +106,10 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
return this.props.explorer.isLastCollection() && !this.props.explorer.isSelectedDatabaseShared();
|
||||
}
|
||||
|
||||
public async submit(): Promise<void> {
|
||||
const collection = this.props.explorer.findSelectedCollection();
|
||||
public async submit(event: React.FormEvent<HTMLFormElement>): Promise<void> {
|
||||
event.preventDefault();
|
||||
|
||||
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 });
|
||||
|
||||
@@ -1,12 +1,58 @@
|
||||
@import "../../../less/Common/Constants";
|
||||
|
||||
.panelContentContainer {
|
||||
.panelFormWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.panelMainContent {
|
||||
flex-grow: 1;
|
||||
padding: 0 34px;
|
||||
margin: 20px 0;
|
||||
overflow: auto;
|
||||
|
||||
& > * {
|
||||
margin-bottom: @DefaultSpace;
|
||||
|
||||
& > * {
|
||||
margin-bottom: @SmallSpace;
|
||||
}
|
||||
}
|
||||
|
||||
.panelInfoIcon {
|
||||
font-size: @mediumFontSize;
|
||||
width: @mediumFontSize;
|
||||
margin: auto 0 auto @SmallSpace;
|
||||
color: @InfoIconColor;
|
||||
cursor: default;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.panelTextBold {
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.panelTextField {
|
||||
font-size: @mediumFontSize;
|
||||
border: 1px solid #605e5c;
|
||||
color: #000;
|
||||
padding: 4px 10px;
|
||||
width: @newCollectionPaneInputWidth;
|
||||
}
|
||||
|
||||
.panelRadioBtn {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.panelRadioBtnLabel {
|
||||
font-size: @mediumFontSize;
|
||||
padding: 0 @LargeSpace 0 @SmallSpace;
|
||||
}
|
||||
|
||||
.collapsibleSection {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,26 +62,30 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.panelWarningErrorContainer {
|
||||
.panelInfoErrorContainer {
|
||||
background-color: @BaseLow;
|
||||
padding: @DefaultSpace;
|
||||
display: inline-flex;
|
||||
margin-bottom: 24px;
|
||||
margin: 20px 34px 0 34px;
|
||||
|
||||
.panelWarningIcon {
|
||||
i {
|
||||
font-size: @WarningErrorIconSize;
|
||||
width: @WarningErrorIconSize;
|
||||
margin: auto 0 auto @SmallSpace;
|
||||
margin-left: @SmallSpace;
|
||||
}
|
||||
|
||||
.panelWarningIcon {
|
||||
color: @WarningIconColor;
|
||||
}
|
||||
|
||||
.panelErrorIcon {
|
||||
font-size: @WarningErrorIconSize;
|
||||
width: @WarningErrorIconSize;
|
||||
margin: auto 0 auto @SmallSpace;
|
||||
color: @ErrorIconColor;
|
||||
}
|
||||
|
||||
.panelLargeInfoIcon {
|
||||
color: @InfoIconColor;
|
||||
}
|
||||
|
||||
.panelWarningErrorDetailsLinkContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -48,10 +98,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.panelFooter button {
|
||||
height: 30px;
|
||||
.panelFooter {
|
||||
padding: 20px 34px;
|
||||
border-top: solid 1px #bbbbbb;
|
||||
|
||||
& button {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.deleteCollectionFeedback {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.panelGroupSpacing > * {
|
||||
margin-bottom: @SmallSpace;
|
||||
}
|
||||
|
||||
@@ -9,10 +9,30 @@ export interface PanelContainerProps {
|
||||
closePanel: () => void;
|
||||
}
|
||||
|
||||
export class PanelContainerComponent extends React.Component<PanelContainerProps> {
|
||||
export interface PanelContainerState {
|
||||
height: string;
|
||||
}
|
||||
|
||||
export class PanelContainerComponent extends React.Component<PanelContainerProps, PanelContainerState> {
|
||||
private static readonly consoleHeaderHeight = 32;
|
||||
private static readonly consoleContentHeight = 220;
|
||||
|
||||
constructor(props: PanelContainerProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
height: this.getPanelHeight(),
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
window.addEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
window.removeEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
if (!this.props.panelContent) {
|
||||
return <></>;
|
||||
@@ -30,8 +50,10 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
|
||||
headerClassName="panelHeader"
|
||||
styles={{
|
||||
navigation: { borderBottom: "1px solid #cccccc" },
|
||||
content: { padding: "24px 34px 20px 34px", height: "100%" },
|
||||
content: { padding: 0, height: "100%" },
|
||||
scrollableContent: { height: "100%" },
|
||||
header: { padding: "0 0 8px 34px" },
|
||||
commands: { marginTop: 8 },
|
||||
}}
|
||||
style={{ height: this.getPanelHeight() }}
|
||||
>
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import React from "react";
|
||||
import { Icon, Text } from "office-ui-fabric-react";
|
||||
|
||||
export interface PanelErrorProps {
|
||||
message: string;
|
||||
isWarning: boolean;
|
||||
showErrorDetails: boolean;
|
||||
openNotificationConsole?: () => void;
|
||||
}
|
||||
|
||||
export const PanelErrorComponent: React.FunctionComponent<PanelErrorProps> = (props: PanelErrorProps): JSX.Element => (
|
||||
<div className="panelWarningErrorContainer">
|
||||
{props.isWarning ? (
|
||||
<Icon iconName="WarningSolid" className="panelWarningIcon" />
|
||||
) : (
|
||||
<Icon iconName="StatusErrorFull" className="panelErrorIcon" />
|
||||
)}
|
||||
<span className="panelWarningErrorDetailsLinkContainer">
|
||||
<Text className="panelWarningErrorMessage" variant="small">
|
||||
{props.message}
|
||||
</Text>
|
||||
{props.showErrorDetails && (
|
||||
<a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
|
||||
More details
|
||||
</a>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
@@ -3,13 +3,12 @@ import { PrimaryButton } from "office-ui-fabric-react";
|
||||
|
||||
export interface PanelFooterProps {
|
||||
buttonLabel: string;
|
||||
onOKButtonClicked: () => void;
|
||||
}
|
||||
|
||||
export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
|
||||
props: PanelFooterProps
|
||||
): JSX.Element => (
|
||||
<div className="panelFooter">
|
||||
<PrimaryButton id="sidePanelOkButton" text={props.buttonLabel} onClick={() => props.onOKButtonClicked()} />
|
||||
<PrimaryButton type="submit" id="sidePanelOkButton" text={props.buttonLabel} />
|
||||
</div>
|
||||
);
|
||||
|
||||
45
src/Explorer/Panes/PanelInfoErrorComponent.tsx
Normal file
45
src/Explorer/Panes/PanelInfoErrorComponent.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import { Icon, Link, Stack, Text } from "office-ui-fabric-react";
|
||||
|
||||
export interface PanelInfoErrorProps {
|
||||
message: string;
|
||||
messageType: string;
|
||||
showErrorDetails: boolean;
|
||||
link?: string;
|
||||
linkText?: string;
|
||||
openNotificationConsole?: () => void;
|
||||
}
|
||||
|
||||
export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = (
|
||||
props: PanelInfoErrorProps
|
||||
): JSX.Element => {
|
||||
let icon: JSX.Element;
|
||||
if (props.messageType === "error") {
|
||||
icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" />;
|
||||
} else if (props.messageType === "warning") {
|
||||
icon = <Icon iconName="WarningSolid" className="panelWarningIcon" />;
|
||||
} else if (props.messageType === "info") {
|
||||
icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack className="panelInfoErrorContainer" horizontal verticalAlign="start">
|
||||
{icon}
|
||||
<span className="panelWarningErrorDetailsLinkContainer">
|
||||
<Text className="panelWarningErrorMessage" variant="small">
|
||||
{props.message}{" "}
|
||||
{props.link && props.linkText && (
|
||||
<Link target="_blank" href={props.link}>
|
||||
{props.linkText}
|
||||
</Link>
|
||||
)}
|
||||
</Text>
|
||||
{props.showErrorDetails && (
|
||||
<a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
|
||||
More details
|
||||
</a>
|
||||
)}
|
||||
</span>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
8
src/Explorer/Panes/PanelLoadingScreen.tsx
Normal file
8
src/Explorer/Panes/PanelLoadingScreen.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import React from "react";
|
||||
import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
|
||||
|
||||
export const PanelLoadingScreen: React.FunctionComponent = () => (
|
||||
<div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer">
|
||||
<img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
|
||||
</div>
|
||||
);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -16,9 +16,15 @@ exports[`PaneContainerComponent test should be resize if notification console is
|
||||
}
|
||||
styles={
|
||||
Object {
|
||||
"commands": Object {
|
||||
"marginTop": 8,
|
||||
},
|
||||
"content": Object {
|
||||
"height": "100%",
|
||||
"padding": "24px 34px 20px 34px",
|
||||
"padding": 0,
|
||||
},
|
||||
"header": Object {
|
||||
"padding": "0 0 8px 34px",
|
||||
},
|
||||
"navigation": Object {
|
||||
"borderBottom": "1px solid #cccccc",
|
||||
@@ -52,9 +58,15 @@ exports[`PaneContainerComponent test should render with panel content and header
|
||||
}
|
||||
styles={
|
||||
Object {
|
||||
"commands": Object {
|
||||
"marginTop": 8,
|
||||
},
|
||||
"content": Object {
|
||||
"height": "100%",
|
||||
"padding": "24px 34px 20px 34px",
|
||||
"padding": 0,
|
||||
},
|
||||
"header": Object {
|
||||
"padding": "0 0 8px 34px",
|
||||
},
|
||||
"navigation": Object {
|
||||
"borderBottom": "1px solid #cccccc",
|
||||
|
||||
@@ -1,25 +1,26 @@
|
||||
/**
|
||||
* Accordion top class
|
||||
*/
|
||||
import * as React from "react";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { Link } from "office-ui-fabric-react/lib/Link";
|
||||
import * as React from "react";
|
||||
import AddDatabaseIcon from "../../../images/AddDatabase.svg";
|
||||
import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
|
||||
import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
|
||||
import OpenQueryIcon from "../../../images/BrowseQuery.svg";
|
||||
import NewContainerIcon from "../../../images/Hero-new-container.svg";
|
||||
import NewNotebookIcon from "../../../images/Hero-new-notebook.svg";
|
||||
import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
|
||||
import OpenQueryIcon from "../../../images/BrowseQuery.svg";
|
||||
import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
|
||||
import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
|
||||
import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
|
||||
import AddDatabaseIcon from "../../../images/AddDatabase.svg";
|
||||
import SampleIcon from "../../../images/Hero-sample.svg";
|
||||
import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
|
||||
import Explorer from "../Explorer";
|
||||
import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
|
||||
import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
|
||||
import CollectionIcon from "../../../images/tree-collection.svg";
|
||||
import { AuthType } from "../../AuthType";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import { userContext } from "../../UserContext";
|
||||
import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
|
||||
import CollectionIcon from "../../../images/tree-collection.svg";
|
||||
import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
|
||||
import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
|
||||
import Explorer from "../Explorer";
|
||||
import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
|
||||
|
||||
export interface SplashScreenItem {
|
||||
iconSrc: string;
|
||||
@@ -220,7 +221,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
||||
private createCommonTaskItems(): SplashScreenItem[] {
|
||||
const items: SplashScreenItem[] = [];
|
||||
|
||||
if (this.container.isAuthWithResourceToken()) {
|
||||
if (userContext.authType === AuthType.ResourceToken) {
|
||||
return items;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,22 +1,21 @@
|
||||
import * as ko from "knockout";
|
||||
import * as _ from "underscore";
|
||||
import Q from "q";
|
||||
|
||||
import * as _ from "underscore";
|
||||
import { Areas } from "../../../Common/Constants";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
|
||||
import { CassandraTableKey, CassandraAPIDataClient } from "../TableDataClient";
|
||||
import DataTableViewModel from "./DataTableViewModel";
|
||||
import * as DataTableUtilities from "./DataTableUtilities";
|
||||
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import QueryTablesTab from "../../Tabs/QueryTablesTab";
|
||||
import * as Constants from "../Constants";
|
||||
import { getQuotedCqlIdentifier } from "../CqlUtilities";
|
||||
import * as Entities from "../Entities";
|
||||
import { CassandraAPIDataClient, CassandraTableKey } from "../TableDataClient";
|
||||
import * as TableEntityProcessor from "../TableEntityProcessor";
|
||||
import * as Utilities from "../Utilities";
|
||||
import * as DataTableUtilities from "./DataTableUtilities";
|
||||
import DataTableViewModel from "./DataTableViewModel";
|
||||
import TableCommands from "./TableCommands";
|
||||
import TableEntityCache from "./TableEntityCache";
|
||||
import * as Constants from "../Constants";
|
||||
import { Areas } from "../../../Common/Constants";
|
||||
import * as Utilities from "../Utilities";
|
||||
import * as Entities from "../Entities";
|
||||
import QueryTablesTab from "../../Tabs/QueryTablesTab";
|
||||
import * as TableEntityProcessor from "../TableEntityProcessor";
|
||||
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
|
||||
interface IListTableEntitiesSegmentedResult extends Entities.IListTableEntitiesResult {
|
||||
ExceedMaximumRetries?: boolean;
|
||||
@@ -354,8 +353,8 @@ export default class TableEntityListViewModel extends DataTableViewModel {
|
||||
itemB = new Date(<string>(<any>rowB[col])._);
|
||||
break;
|
||||
default:
|
||||
itemA = <string>(<any>rowA[col])._.toLowerCase();
|
||||
itemB = <string>(<any>rowB[col])._.toLowerCase();
|
||||
itemA = <string>(<any>rowA[col])._?.toLowerCase();
|
||||
itemB = <string>(<any>rowB[col])._?.toLowerCase();
|
||||
}
|
||||
var compareResult: number = itemA < itemB ? -1 : itemA > itemB ? 1 : 0;
|
||||
if (compareResult !== 0) {
|
||||
|
||||
@@ -136,7 +136,6 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -150,14 +149,14 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
// if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
|
||||
this.overrideWithAutoPilotSettings() ? this.autoPilotThroughput() : this.throughput(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
} else {
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.autoPilotThroughput(),
|
||||
serverId,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
@@ -402,7 +401,6 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
|
||||
this._setBaseline();
|
||||
this._wasAutopilotOriginallySet(this.isAutoPilotSelected());
|
||||
} catch (error) {
|
||||
this.container.isRefreshingExplorer(false);
|
||||
this.isExecutionError(true);
|
||||
console.error(error);
|
||||
const errorMessage = getErrorMessage(error);
|
||||
|
||||
@@ -36,7 +36,7 @@ export default class GalleryTab extends TabsBase {
|
||||
galleryItem: options.galleryItem,
|
||||
isFavorite: options.isFavorite,
|
||||
selectedTab: options.selectedTab,
|
||||
sortBy: SortBy.MostViewed,
|
||||
sortBy: SortBy.MostRecent,
|
||||
searchText: undefined,
|
||||
};
|
||||
this.galleryAndNotebookViewerComponentAdapter = new GalleryAndNotebookViewerComponentAdapter(
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import * as ko from "knockout";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import AuthHeadersUtil from "../../Platform/Hosted/Authorization";
|
||||
import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
|
||||
import Q from "q";
|
||||
import TabsBase from "./TabsBase";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { HashMap } from "../../Common/HashMap";
|
||||
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 { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
|
||||
import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
|
||||
import Explorer from "../Explorer";
|
||||
import { userContext } from "../../UserContext";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import TabsBase from "./TabsBase";
|
||||
|
||||
export default class MongoShellTab extends TabsBase {
|
||||
public url: ko.Computed<string>;
|
||||
@@ -33,7 +31,7 @@ export default class MongoShellTab extends TabsBase {
|
||||
this._runtimeEndpoint = configContext.platform === Platform.Hosted ? configContext.BACKEND_ENDPOINT : "";
|
||||
const extensionEndpoint: string = configContext.BACKEND_ENDPOINT || this._runtimeEndpoint || "";
|
||||
let baseUrl = "/content/mongoshell/dist/";
|
||||
if (this._container.serverId() === "localhost") {
|
||||
if (userContext.portalEnv === "localhost") {
|
||||
baseUrl = "/content/mongoshell/";
|
||||
}
|
||||
|
||||
@@ -85,10 +83,10 @@ export default class MongoShellTab extends TabsBase {
|
||||
}
|
||||
|
||||
private handleReadyMessage(event: MessageEvent, shellIframe: HTMLIFrameElement) {
|
||||
if (typeof event.data["data"] !== "string") {
|
||||
if (typeof event.data["kind"] !== "string") {
|
||||
return;
|
||||
}
|
||||
if (event.data.data !== "ready") {
|
||||
if (event.data.kind !== "ready") {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,18 +4,24 @@ import * as _ from "underscore";
|
||||
import UploadWorker from "worker-loader!../../workers/upload";
|
||||
import { AuthType } from "../../AuthType";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { createDocument } from "../../Common/dataAccess/createDocument";
|
||||
import { getCollectionUsageSizeInKB } from "../../Common/dataAccess/getCollectionDataUsageSize";
|
||||
import { readCollectionOffer } from "../../Common/dataAccess/readCollectionOffer";
|
||||
import { readStoredProcedures } from "../../Common/dataAccess/readStoredProcedures";
|
||||
import { readTriggers } from "../../Common/dataAccess/readTriggers";
|
||||
import { readUserDefinedFunctions } from "../../Common/dataAccess/readUserDefinedFunctions";
|
||||
import { readCollectionOffer } from "../../Common/dataAccess/readCollectionOffer";
|
||||
import { getCollectionUsageSizeInKB } from "../../Common/dataAccess/getCollectionDataUsageSize";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import * as Logger from "../../Common/Logger";
|
||||
import { fetchPortalNotifications } from "../../Common/PortalNotifications";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
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 * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
|
||||
import { StartUploadMessageParams, UploadDetails, UploadDetailsRecord } from "../../workers/upload/definitions";
|
||||
import Explorer from "../Explorer";
|
||||
import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import { CassandraAPIDataClient, CassandraTableKey, CassandraTableKeys } from "../Tables/TableDataClient";
|
||||
import ConflictsTab from "../Tabs/ConflictsTab";
|
||||
@@ -32,12 +38,6 @@ import DocumentId from "./DocumentId";
|
||||
import StoredProcedure from "./StoredProcedure";
|
||||
import Trigger from "./Trigger";
|
||||
import UserDefinedFunction from "./UserDefinedFunction";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import Explorer from "../Explorer";
|
||||
import { userContext } from "../../UserContext";
|
||||
import { fetchPortalNotifications } from "../../Common/PortalNotifications";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { createDocument } from "../../Common/dataAccess/createDocument";
|
||||
|
||||
export default class Collection implements ViewModels.Collection {
|
||||
public nodeKind: string;
|
||||
@@ -1200,7 +1200,6 @@ export default class Collection implements ViewModels.Collection {
|
||||
|
||||
public async loadOffer(): Promise<void> {
|
||||
if (!this.container.isServerlessEnabled() && !this.offer()) {
|
||||
this.container.isRefreshingExplorer(true);
|
||||
const startKey: number = TelemetryProcessor.traceStart(Action.LoadOffers, {
|
||||
databaseName: this.databaseId,
|
||||
collectionName: this.id(),
|
||||
@@ -1237,8 +1236,6 @@ export default class Collection implements ViewModels.Collection {
|
||||
startKey
|
||||
);
|
||||
throw error;
|
||||
} finally {
|
||||
this.container.isRefreshingExplorer(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ const onInit = async () => {
|
||||
const props: GalleryAndNotebookViewerComponentProps = {
|
||||
junoClient: new JunoClient(),
|
||||
selectedTab: galleryViewerProps.selectedTab || GalleryTab.PublicGallery,
|
||||
sortBy: galleryViewerProps.sortBy || SortBy.MostViewed,
|
||||
sortBy: galleryViewerProps.sortBy || SortBy.MostRecent,
|
||||
searchText: galleryViewerProps.searchText,
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Octokit } from "@octokit/rest";
|
||||
import { HttpStatusCodes } from "../Common/Constants";
|
||||
import * as Logger from "../Common/Logger";
|
||||
import UrlUtility from "../Common/UrlUtility";
|
||||
import * as UrlUtility from "../Common/UrlUtility";
|
||||
import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
|
||||
import { getErrorMessage } from "../Common/ErrorHandlingUtils";
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ import * as Logger from "../Common/Logger";
|
||||
import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
|
||||
import { GitHubClient, IGitHubFile, IGitHubResponse } from "./GitHubClient";
|
||||
import * as GitHubUtils from "../Utils/GitHubUtils";
|
||||
import UrlUtility from "../Common/UrlUtility";
|
||||
import * as UrlUtility from "../Common/UrlUtility";
|
||||
import { getErrorMessage } from "../Common/ErrorHandlingUtils";
|
||||
|
||||
export interface GitHubContentProviderParams {
|
||||
|
||||
@@ -27,8 +27,8 @@
|
||||
"Enable DB level throughput": "Enable Database Level Throughput",
|
||||
"Database Throughput": "Database Throughput",
|
||||
"UpdateInProgressMessage": "Data is being updated",
|
||||
"UpdateCompletedMessageTitle":"Update succeeded",
|
||||
"UpdateCompletedMessageText": "Data updation completed.",
|
||||
"UpdateCompletedMessageTitle": "Update succeeded",
|
||||
"UpdateCompletedMessageText": "Data update completed.",
|
||||
"SubmissionMessageSuccessTitle": "Update started",
|
||||
"SubmissionMessageForNewRegionText": "Data update started. Region changed.",
|
||||
"SubmissionMessageForSameRegionText": "Data update started. Region not changed.",
|
||||
@@ -37,6 +37,56 @@
|
||||
"OnSaveFailureMessage": "Data save operation not currently permitted."
|
||||
},
|
||||
"SqlX": {
|
||||
"DedicatedGatewayDescription": "Provision a dedicated gateway cluster for your Azure Cosmos DB account. A dedicated gateway is compute that is a front-end to data in your Azure Cosmos DB account. Your dedicated gateway automatically includes the integrated cache, which can improve read performance. ",
|
||||
"DedicatedGateway": "Dedicated Gateway",
|
||||
"Enable": "Enable",
|
||||
"Disable": "Disable",
|
||||
"LearnAboutDedicatedGateway": "Learn more about dedicated gateway.",
|
||||
"DeprovisioningDetailsText": "Learn more about deprovisioning the dedicated gateway.",
|
||||
"DedicatedGatewayPricing": "Learn more about dedicated gateway pricing",
|
||||
"SKUs": "SKUs",
|
||||
"SKUsPlaceHolder": "Select SKUs",
|
||||
"NumberOfInstances": "Number of instances",
|
||||
"CosmosD4s": "Cosmos.D4s (General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory)",
|
||||
"CosmosD8s": "Cosmos.D8s (General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory)",
|
||||
"CosmosD16s": "Cosmos.D16s (General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory)",
|
||||
"CosmosD32s": "Cosmos.D32s (General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory)",
|
||||
"CreateMessage": "Dedicated gateway resource is being created.",
|
||||
"CreateInitializeTitle": "Provisioning resource",
|
||||
"CreateInitializeMessage": "Dedicated gateway resource will be provisioned.",
|
||||
"CreateSuccessTitle": "Resource provisioned",
|
||||
"CreateSuccesseMessage": "Dedicated gateway resource provisioned.",
|
||||
"CreateFailureTitle": "Failed to provision resource",
|
||||
"CreateFailureMessage": "Dedicated gateway resource provisioning failed.",
|
||||
"UpdateMessage": "Dedicated gateway resource is being updated.",
|
||||
"UpdateInitializeTitle": "Updating resource",
|
||||
"UpdateInitializeMessage": "Dedicated gateway resource will be updated.",
|
||||
"UpdateSuccessTitle": "Resource updated",
|
||||
"UpdateSuccesseMessage": "Dedicated gateway resource updated.",
|
||||
"UpdateFailureTitle": "Failed to update resource",
|
||||
"UpdateFailureMessage": "Dedicated gateway resource updation failed.",
|
||||
"DeleteMessage": "Dedicated gateway resource is being deleted.",
|
||||
"DeleteInitializeTitle": "Deleting resource",
|
||||
"DeleteInitializeMessage": "Dedicated gateway resource will be deleted.",
|
||||
"DeleteSuccessTitle": "Resource deleted",
|
||||
"DeleteSuccesseMessage": "Dedicated gateway resource deleted.",
|
||||
"DeleteFailureTitle": "Failed to delete resource",
|
||||
"DeleteFailureMessage": "Dedicated gateway resource deletion failed.",
|
||||
"CannotSave": "Cannot save the changes to the Dedicated gateway resource at the moment",
|
||||
"DedicatedGatewayEndpoint": "Dedicated gatewayEndpoint",
|
||||
"NoValue": "",
|
||||
"SKUDetails": "SKU Details: ",
|
||||
"CosmosD4Details": "General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory",
|
||||
"CosmosD8Details": "General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory",
|
||||
"CosmosD16Details": "General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory",
|
||||
"CosmosD32Details": "General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory",
|
||||
"Cost": "Cost",
|
||||
"CostText": "Hourly cost of the dedicated gateway resource depends on the SKU selection, number of instances per region, and number of regions.",
|
||||
"ConnectionString": "Connection String",
|
||||
"ConnectionStringText": "To use the dedicated gateway, use the connection string shown in ",
|
||||
"KeysBlade": "the keys blade",
|
||||
"WarningBannerOnUpdate": "Adding or modifying dedicated gateway instances may affect your bill.",
|
||||
"WarningBannerOnDelete": "After deprovisioning the dedicated gateway, you must update any applications using the old dedicated gateway connection string."
|
||||
}
|
||||
}
|
||||
}
|
||||
24
src/Main.tsx
24
src/Main.tsx
@@ -37,6 +37,7 @@ import "../less/TableStyles/EntityEditor.less";
|
||||
import "../less/TableStyles/fulldatatables.less";
|
||||
import "../less/TableStyles/queryBuilder.less";
|
||||
import "../less/tree.less";
|
||||
import { AuthType } from "./AuthType";
|
||||
import "./Explorer/Controls/Accordion/AccordionComponent.less";
|
||||
import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
|
||||
import { Dialog, DialogProps } from "./Explorer/Controls/Dialog";
|
||||
@@ -44,11 +45,11 @@ import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
|
||||
import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
|
||||
import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
|
||||
import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
|
||||
import "./Explorer/Controls/ThroughputInput/ThroughputInput.less";
|
||||
import "./Explorer/Controls/TreeComponent/treeComponent.less";
|
||||
import { ExplorerParams } from "./Explorer/Explorer";
|
||||
import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
|
||||
import "./Explorer/Graph/NewVertexComponent/newVertexComponent.less";
|
||||
import { CommandBarComponent } from "./Explorer/Menus/CommandBar/CommandBarComponent";
|
||||
import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
|
||||
import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
|
||||
import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
|
||||
@@ -60,13 +61,13 @@ import { SplashScreen } from "./Explorer/SplashScreen/SplashScreen";
|
||||
import "./Explorer/SplashScreen/SplashScreen.less";
|
||||
import "./Explorer/Tabs/QueryTab.less";
|
||||
import { useConfig } from "./hooks/useConfig";
|
||||
import { useExplorerState } from "./hooks/useExplorerState";
|
||||
import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
|
||||
import { useSidePanel } from "./hooks/useSidePanel";
|
||||
import { KOCommentEnd, KOCommentIfStart } from "./koComment";
|
||||
import "./Libs/is-integer-polyfill";
|
||||
import "./Libs/jquery";
|
||||
import "./Shared/appInsights";
|
||||
import { userContext } from "./UserContext";
|
||||
|
||||
initializeIcons();
|
||||
|
||||
@@ -101,8 +102,6 @@ const App: React.FunctionComponent = () => {
|
||||
const config = useConfig();
|
||||
const explorer = useKnockoutExplorer(config?.platform, explorerParams);
|
||||
|
||||
const { commandBarProperties } = useExplorerState(explorer);
|
||||
|
||||
if (!explorer) {
|
||||
return <LoadingExplorer />;
|
||||
}
|
||||
@@ -111,7 +110,7 @@ const App: React.FunctionComponent = () => {
|
||||
<div className="flexContainer">
|
||||
<div id="divExplorer" className="flexContainer hideOverflows" style={{ display: "none" }}>
|
||||
{/* Main Command Bar - Start */}
|
||||
<CommandBarComponent {...commandBarProperties} />
|
||||
<div data-bind="react: commandBarComponentAdapter" />
|
||||
{/* Collections Tree and Tabs - Begin */}
|
||||
<div className="resourceTreeAndTabs">
|
||||
{/* Collections Tree - Start */}
|
||||
@@ -158,11 +157,11 @@ const App: React.FunctionComponent = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{ overflowY: "auto" }}
|
||||
data-bind="if: isAuthWithResourceToken(), react:resourceTreeForResourceToken"
|
||||
/>
|
||||
<div style={{ overflowY: "auto" }} data-bind="if: !isAuthWithResourceToken(), react:resourceTree" />
|
||||
{userContext.authType === AuthType.ResourceToken ? (
|
||||
<div style={{ overflowY: "auto" }} data-bind="react:resourceTreeForResourceToken" />
|
||||
) : (
|
||||
<div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
|
||||
)}
|
||||
</div>
|
||||
{/* Collections Window - End */}
|
||||
</div>
|
||||
@@ -212,10 +211,7 @@ const App: React.FunctionComponent = () => {
|
||||
{/* Splitter - End */}
|
||||
</div>
|
||||
{/* Collections Tree - End */}
|
||||
<div
|
||||
className="connectExplorerContainer"
|
||||
data-bind="visible: !isRefreshingExplorer() && tabsManager.openedTabs().length === 0"
|
||||
>
|
||||
<div className="connectExplorerContainer" data-bind="visible: tabsManager.openedTabs().length === 0">
|
||||
<form className="connectExplorerFormContainer">
|
||||
<SplashScreen explorer={explorer} />
|
||||
</form>
|
||||
|
||||
@@ -3,7 +3,7 @@ import { HttpStatusCodes } from "../Common/Constants";
|
||||
import { IResourceProviderClient, IResourceProviderRequestOptions } from "./IResourceProviderClient";
|
||||
import { OperationStatus } from "../Contracts/DataModels";
|
||||
import { TokenProviderFactory } from "../TokenProviders/TokenProviderFactory";
|
||||
import UrlUtility from "../Common/UrlUtility";
|
||||
import * as UrlUtility from "../Common/UrlUtility";
|
||||
|
||||
export class ResourceProviderClient<T> implements IResourceProviderClient<T> {
|
||||
private httpClient: HttpClient;
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import crossroads from "crossroads";
|
||||
import hasher from "hasher";
|
||||
import * as _ from "underscore";
|
||||
import * as Constants from "../Common/Constants";
|
||||
import * as ViewModels from "../Contracts/ViewModels";
|
||||
|
||||
import crossroads from "crossroads";
|
||||
import hasher from "hasher";
|
||||
import ScriptTabBase from "../Explorer/Tabs/ScriptTabBase";
|
||||
import TabsBase from "../Explorer/Tabs/TabsBase";
|
||||
|
||||
@@ -398,14 +397,7 @@ export class TabRouteHandler {
|
||||
|
||||
private _executeActionHelper(action: () => void): void {
|
||||
const explorer = window.dataExplorer;
|
||||
if (!!explorer && (explorer.isRefreshingExplorer() || !explorer.isAccountReady())) {
|
||||
const refreshSubscription = explorer.isRefreshingExplorer.subscribe((isRefreshing: boolean) => {
|
||||
if (!isRefreshing) {
|
||||
action();
|
||||
refreshSubscription.dispose();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (explorer && explorer.isAccountReady()) {
|
||||
action();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { PropertyInfo, OnChange, Values, IsDisplayable, RefreshOptions } from "../Decorators";
|
||||
import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
|
||||
import {
|
||||
ChoiceItem,
|
||||
Description,
|
||||
@@ -12,14 +12,14 @@ import {
|
||||
SmartUiInput,
|
||||
} from "../SelfServeTypes";
|
||||
import {
|
||||
getMaxCollectionThroughput,
|
||||
getMaxDatabaseThroughput,
|
||||
getMinCollectionThroughput,
|
||||
getMinDatabaseThroughput,
|
||||
initialize,
|
||||
onRefreshSelfServeExample,
|
||||
Regions,
|
||||
update,
|
||||
initialize,
|
||||
getMinDatabaseThroughput,
|
||||
getMaxDatabaseThroughput,
|
||||
getMinCollectionThroughput,
|
||||
getMaxCollectionThroughput,
|
||||
} from "./SelfServeExample.rp";
|
||||
|
||||
const regionDropdownItems: ChoiceItem[] = [
|
||||
@@ -203,11 +203,7 @@ export default class SelfServeExample extends SelfServeBaseClass {
|
||||
public initialize = async (): Promise<Map<string, SmartUiInput>> => {
|
||||
const initializeResponse = await initialize();
|
||||
const defaults = new Map<string, SmartUiInput>();
|
||||
const currentRegionText = `current region selected is ${initializeResponse.regions}`;
|
||||
defaults.set("currentRegionText", {
|
||||
value: { textTKey: currentRegionText, type: DescriptionType.Text } as Description,
|
||||
hidden: false,
|
||||
});
|
||||
defaults.set("currentRegionText", undefined);
|
||||
defaults.set("regions", { value: initializeResponse.regions });
|
||||
defaults.set("enableLogging", { value: initializeResponse.enableLogging });
|
||||
const accountName = initializeResponse.accountName;
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import { Spinner, SpinnerSize } from "office-ui-fabric-react";
|
||||
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
|
||||
import * as React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { sendMessage } from "../Common/MessageHandler";
|
||||
import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
|
||||
import { sendReadyMessage } from "../Common/MessageHandler";
|
||||
import { configContext, updateConfigContext } from "../ConfigContext";
|
||||
import { SelfServeFrameInputs } from "../Contracts/ViewModels";
|
||||
import { updateUserContext } from "../UserContext";
|
||||
import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
|
||||
import "./SelfServe.less";
|
||||
import { SelfServeComponent } from "./SelfServeComponent";
|
||||
import { SelfServeDescriptor } from "./SelfServeTypes";
|
||||
import { SelfServeType } from "./SelfServeUtils";
|
||||
import { SelfServeFrameInputs } from "../Contracts/ViewModels";
|
||||
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
|
||||
import { configContext, updateConfigContext } from "../ConfigContext";
|
||||
import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
|
||||
import { updateUserContext } from "../UserContext";
|
||||
import "./SelfServe.less";
|
||||
import { Spinner, SpinnerSize } from "office-ui-fabric-react";
|
||||
initializeIcons();
|
||||
|
||||
const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDescriptor> => {
|
||||
@@ -89,4 +89,4 @@ const handleMessage = async (event: MessageEvent): Promise<void> => {
|
||||
|
||||
ReactDOM.render(renderSpinner(), document.getElementById("selfServeContent"));
|
||||
window.addEventListener("message", handleMessage, false);
|
||||
sendMessage("ready");
|
||||
sendReadyMessage();
|
||||
|
||||
@@ -1,34 +1,36 @@
|
||||
import React from "react";
|
||||
import { TFunction } from "i18next";
|
||||
import {
|
||||
CommandBar,
|
||||
ICommandBarItemProps,
|
||||
IStackTokens,
|
||||
MessageBar,
|
||||
MessageBarType,
|
||||
Separator,
|
||||
Spinner,
|
||||
SpinnerSize,
|
||||
Stack,
|
||||
} from "office-ui-fabric-react";
|
||||
import promiseRetry, { AbortError } from "p-retry";
|
||||
import React from "react";
|
||||
import { Translation } from "react-i18next";
|
||||
import * as _ from "underscore";
|
||||
import { sendMessage } from "../Common/MessageHandler";
|
||||
import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
|
||||
import { SmartUiComponent, SmartUiDescriptor } from "../Explorer/Controls/SmartUi/SmartUiComponent";
|
||||
import "../i18n";
|
||||
import { commandBarItemStyles, commandBarStyles, containerStackTokens, separatorStyles } from "./SelfServeStyles";
|
||||
import {
|
||||
AnyDisplay,
|
||||
Node,
|
||||
BooleanInput,
|
||||
ChoiceInput,
|
||||
DescriptionDisplay,
|
||||
InputType,
|
||||
Node,
|
||||
NumberInput,
|
||||
RefreshResult,
|
||||
SelfServeDescriptor,
|
||||
SmartUiInput,
|
||||
DescriptionDisplay,
|
||||
StringInput,
|
||||
NumberInput,
|
||||
BooleanInput,
|
||||
ChoiceInput,
|
||||
} from "./SelfServeTypes";
|
||||
import { SmartUiComponent, SmartUiDescriptor } from "../Explorer/Controls/SmartUi/SmartUiComponent";
|
||||
import { Translation } from "react-i18next";
|
||||
import { TFunction } from "i18next";
|
||||
import "../i18n";
|
||||
import { sendMessage } from "../Common/MessageHandler";
|
||||
import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
|
||||
import promiseRetry, { AbortError } from "p-retry";
|
||||
|
||||
interface SelfServeNotification {
|
||||
message: string;
|
||||
@@ -127,7 +129,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
||||
this.props.descriptor.inputNames.map((inputName) => {
|
||||
let initialValue = initialValues.get(inputName);
|
||||
if (!initialValue) {
|
||||
initialValue = { value: undefined, hidden: false };
|
||||
initialValue = { value: undefined, hidden: false, disabled: false };
|
||||
}
|
||||
currentValues = currentValues.set(inputName, initialValue);
|
||||
baselineValues = baselineValues.set(inputName, initialValue);
|
||||
@@ -311,34 +313,41 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
||||
this.performSave();
|
||||
};
|
||||
|
||||
public isDiscardButtonDisabled = (): boolean => {
|
||||
if (this.state.isSaving) {
|
||||
return true;
|
||||
}
|
||||
public isInputModified = (): boolean => {
|
||||
for (const key of this.state.currentValues.keys()) {
|
||||
const currentValue = JSON.stringify(this.state.currentValues.get(key));
|
||||
const baselineValue = JSON.stringify(this.state.baselineValues.get(key));
|
||||
const currentValue = this.state.currentValues.get(key);
|
||||
if (currentValue && currentValue.hidden === undefined) {
|
||||
currentValue.hidden = false;
|
||||
}
|
||||
if (currentValue && currentValue.disabled === undefined) {
|
||||
currentValue.disabled = false;
|
||||
}
|
||||
|
||||
if (currentValue !== baselineValue) {
|
||||
return false;
|
||||
const baselineValue = this.state.baselineValues.get(key);
|
||||
if (baselineValue && baselineValue.hidden === undefined) {
|
||||
baselineValue.hidden = false;
|
||||
}
|
||||
if (baselineValue && baselineValue.disabled === undefined) {
|
||||
baselineValue.disabled = false;
|
||||
}
|
||||
|
||||
if (!_.isEqual(currentValue, baselineValue)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
return false;
|
||||
};
|
||||
|
||||
public isRefreshing = (): boolean => {
|
||||
return this.state.isSaving || this.state.isInitializing || this.state.refreshResult?.isUpdateInProgress;
|
||||
};
|
||||
|
||||
public isDiscardButtonDisabled = (): boolean => {
|
||||
return this.isRefreshing() || !this.isInputModified();
|
||||
};
|
||||
|
||||
public isSaveButtonDisabled = (): boolean => {
|
||||
if (this.state.hasErrors || this.state.isSaving) {
|
||||
return true;
|
||||
}
|
||||
for (const key of this.state.currentValues.keys()) {
|
||||
const currentValue = JSON.stringify(this.state.currentValues.get(key));
|
||||
const baselineValue = JSON.stringify(this.state.baselineValues.get(key));
|
||||
|
||||
if (currentValue !== baselineValue) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
return this.state.hasErrors || this.isRefreshing() || !this.isInputModified();
|
||||
};
|
||||
|
||||
private performRefresh = async (): Promise<void> => {
|
||||
@@ -397,7 +406,6 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
||||
key: "save",
|
||||
text: this.getCommonTranslation("Save"),
|
||||
iconProps: { iconName: "Save" },
|
||||
split: true,
|
||||
disabled: this.isSaveButtonDisabled(),
|
||||
onClick: () => this.onSaveButtonClick(),
|
||||
},
|
||||
@@ -405,21 +413,21 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
||||
key: "discard",
|
||||
text: this.getCommonTranslation("Discard"),
|
||||
iconProps: { iconName: "Undo" },
|
||||
split: true,
|
||||
disabled: this.isDiscardButtonDisabled(),
|
||||
onClick: () => {
|
||||
this.discard();
|
||||
},
|
||||
buttonStyles: commandBarItemStyles,
|
||||
},
|
||||
{
|
||||
key: "refresh",
|
||||
text: this.getCommonTranslation("Refresh"),
|
||||
disabled: this.state.isInitializing,
|
||||
iconProps: { iconName: "Refresh" },
|
||||
split: true,
|
||||
onClick: () => {
|
||||
this.onRefreshClicked();
|
||||
},
|
||||
buttonStyles: commandBarItemStyles,
|
||||
},
|
||||
];
|
||||
};
|
||||
@@ -432,7 +440,6 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
||||
};
|
||||
|
||||
public render(): JSX.Element {
|
||||
const containerStackTokens: IStackTokens = { childrenGap: 5 };
|
||||
if (this.state.compileErrorMessage) {
|
||||
return <MessageBar messageBarType={MessageBarType.error}>{this.state.compileErrorMessage}</MessageBar>;
|
||||
}
|
||||
@@ -445,13 +452,13 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
|
||||
|
||||
return (
|
||||
<div style={{ overflowX: "auto" }}>
|
||||
<Stack tokens={containerStackTokens} styles={{ root: { padding: 10 } }}>
|
||||
<CommandBar styles={{ root: { paddingLeft: 0 } }} items={this.getCommandBarItems()} />
|
||||
<Stack tokens={containerStackTokens}>
|
||||
<Stack.Item>
|
||||
<CommandBar styles={commandBarStyles} items={this.getCommandBarItems()} />
|
||||
<Separator styles={separatorStyles} />
|
||||
</Stack.Item>
|
||||
{this.state.isInitializing ? (
|
||||
<Spinner
|
||||
size={SpinnerSize.large}
|
||||
styles={{ root: { textAlign: "center", justifyContent: "center", width: "100%", height: "100%" } }}
|
||||
/>
|
||||
<Spinner size={SpinnerSize.large} />
|
||||
) : (
|
||||
<>
|
||||
{this.state.notification && (
|
||||
|
||||
20
src/SelfServe/SelfServeStyles.tsx
Normal file
20
src/SelfServe/SelfServeStyles.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { IButtonStyles, ICommandBarStyles, ISeparatorStyles, IStackTokens } from "office-ui-fabric-react";
|
||||
import { StyleConstants } from "../Common/Constants";
|
||||
|
||||
export const commandBarItemStyles: IButtonStyles = { root: { paddingLeft: 20 } };
|
||||
|
||||
export const commandBarStyles: ICommandBarStyles = { root: { paddingLeft: 0 } };
|
||||
|
||||
export const containerStackTokens: IStackTokens = { childrenGap: 5, padding: 10 };
|
||||
|
||||
export const separatorStyles: Partial<ISeparatorStyles> = {
|
||||
root: {
|
||||
selectors: {
|
||||
"::before": {
|
||||
background: StyleConstants.BaseMedium,
|
||||
},
|
||||
},
|
||||
padding: 0,
|
||||
height: 1,
|
||||
},
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
import "reflect-metadata";
|
||||
import { userContext } from "../UserContext";
|
||||
import {
|
||||
Node,
|
||||
AnyDisplay,
|
||||
BooleanInput,
|
||||
ChoiceInput,
|
||||
@@ -10,13 +10,13 @@ import {
|
||||
Info,
|
||||
InputType,
|
||||
InputTypeValue,
|
||||
Node,
|
||||
NumberInput,
|
||||
RefreshParams,
|
||||
SelfServeDescriptor,
|
||||
SmartUiInput,
|
||||
StringInput,
|
||||
RefreshParams,
|
||||
} from "./SelfServeTypes";
|
||||
import { userContext } from "../UserContext";
|
||||
|
||||
export enum SelfServeType {
|
||||
// No self serve type passed, launch explorer
|
||||
@@ -195,5 +195,5 @@ export const generateBladeLink = (blade: BladeType): string => {
|
||||
const subscriptionId = userContext.subscriptionId;
|
||||
const resourceGroupName = userContext.resourceGroup;
|
||||
const databaseAccountName = userContext.databaseAccount.name;
|
||||
return `www.portal.azure.com/#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
|
||||
return `https://portal.azure.com/#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
|
||||
};
|
||||
|
||||
@@ -1,33 +1,98 @@
|
||||
import { RefreshResult } from "../SelfServeTypes";
|
||||
import { userContext } from "../../UserContext";
|
||||
import { armRequestWithoutPolling } from "../../Utils/arm/request";
|
||||
import { configContext } from "../../ConfigContext";
|
||||
import { SqlxServiceResource, UpdateDedicatedGatewayRequestParameters } from "./SqlxTypes";
|
||||
|
||||
const apiVersion = "2020-06-01-preview";
|
||||
|
||||
export enum ResourceStatus {
|
||||
Running = "Running",
|
||||
Creating = "Creating",
|
||||
Updating = "Updating",
|
||||
Deleting = "Deleting",
|
||||
}
|
||||
|
||||
export interface DedicatedGatewayResponse {
|
||||
sku: string;
|
||||
instances: number;
|
||||
status: string;
|
||||
endpoint: string;
|
||||
}
|
||||
|
||||
export const getRegionSpecificMinInstances = async (): Promise<number> => {
|
||||
// TODO: write RP call to get min number of instances needed for this region
|
||||
throw new Error("getRegionSpecificMinInstances not implemented");
|
||||
export const getPath = (subscriptionId: string, resourceGroup: string, name: string): string => {
|
||||
return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${name}/services/sqlx`;
|
||||
};
|
||||
|
||||
export const getRegionSpecificMaxInstances = async (): Promise<number> => {
|
||||
// TODO: write RP call to get max number of instances needed for this region
|
||||
throw new Error("getRegionSpecificMaxInstances not implemented");
|
||||
export const updateDedicatedGatewayResource = async (sku: string, instances: number): Promise<string> => {
|
||||
const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
|
||||
const body: UpdateDedicatedGatewayRequestParameters = {
|
||||
properties: {
|
||||
instanceSize: sku,
|
||||
instanceCount: instances,
|
||||
serviceType: "Sqlx",
|
||||
},
|
||||
};
|
||||
const armRequestResult = await armRequestWithoutPolling({
|
||||
host: configContext.ARM_ENDPOINT,
|
||||
path,
|
||||
method: "PUT",
|
||||
apiVersion,
|
||||
body,
|
||||
});
|
||||
return armRequestResult.operationStatusUrl;
|
||||
};
|
||||
|
||||
export const updateDedicatedGatewayProvisioning = async (sku: string, instances: number): Promise<void> => {
|
||||
// TODO: write RP call to update dedicated gateway provisioning
|
||||
throw new Error(
|
||||
`updateDedicatedGatewayProvisioning not implemented. Parameters- sku: ${sku}, instances:${instances}`
|
||||
);
|
||||
export const deleteDedicatedGatewayResource = async (): Promise<string> => {
|
||||
const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
|
||||
const armRequestResult = await armRequestWithoutPolling({
|
||||
host: configContext.ARM_ENDPOINT,
|
||||
path,
|
||||
method: "DELETE",
|
||||
apiVersion,
|
||||
});
|
||||
return armRequestResult.operationStatusUrl;
|
||||
};
|
||||
|
||||
export const initializeDedicatedGatewayProvisioning = async (): Promise<DedicatedGatewayResponse> => {
|
||||
// TODO: write RP call to initialize UI for dedicated gateway provisioning
|
||||
throw new Error("initializeDedicatedGatewayProvisioning not implemented");
|
||||
export const getDedicatedGatewayResource = async (): Promise<SqlxServiceResource> => {
|
||||
const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
|
||||
const armRequestResult = await armRequestWithoutPolling<SqlxServiceResource>({
|
||||
host: configContext.ARM_ENDPOINT,
|
||||
path,
|
||||
method: "GET",
|
||||
apiVersion,
|
||||
});
|
||||
return armRequestResult.result;
|
||||
};
|
||||
|
||||
export const getCurrentProvisioningState = async (): Promise<DedicatedGatewayResponse> => {
|
||||
try {
|
||||
const response = await getDedicatedGatewayResource();
|
||||
return {
|
||||
sku: response.properties.instanceSize,
|
||||
instances: response.properties.instanceCount,
|
||||
status: response.properties.status,
|
||||
endpoint: response.properties.sqlxEndPoint,
|
||||
};
|
||||
} catch (e) {
|
||||
return { sku: undefined, instances: undefined, status: undefined, endpoint: undefined };
|
||||
}
|
||||
};
|
||||
|
||||
export const refreshDedicatedGatewayProvisioning = async (): Promise<RefreshResult> => {
|
||||
// TODO: write RP call to check if dedicated gateway update has gone through
|
||||
throw new Error("refreshDedicatedGatewayProvisioning not implemented");
|
||||
try {
|
||||
const response = await getDedicatedGatewayResource();
|
||||
if (response.properties.status === ResourceStatus.Running.toString()) {
|
||||
return { isUpdateInProgress: false, updateInProgressMessageTKey: undefined };
|
||||
} else if (response.properties.status === ResourceStatus.Creating.toString()) {
|
||||
return { isUpdateInProgress: true, updateInProgressMessageTKey: "CreateMessage" };
|
||||
} else if (response.properties.status === ResourceStatus.Deleting.toString()) {
|
||||
return { isUpdateInProgress: true, updateInProgressMessageTKey: "DeleteMessage" };
|
||||
} else {
|
||||
return { isUpdateInProgress: true, updateInProgressMessageTKey: "UpdateMessage" };
|
||||
}
|
||||
} catch {
|
||||
//TODO differentiate between different failures
|
||||
return { isUpdateInProgress: false, updateInProgressMessageTKey: undefined };
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { IsDisplayable, OnChange, Values } from "../Decorators";
|
||||
import { IsDisplayable, OnChange, RefreshOptions, Values } from "../Decorators";
|
||||
import {
|
||||
ChoiceItem,
|
||||
Description,
|
||||
DescriptionType,
|
||||
InputType,
|
||||
NumberUiType,
|
||||
@@ -9,65 +10,284 @@ import {
|
||||
SelfServeBaseClass,
|
||||
SmartUiInput,
|
||||
} from "../SelfServeTypes";
|
||||
import { refreshDedicatedGatewayProvisioning } from "./SqlX.rp";
|
||||
import { BladeType, generateBladeLink } from "../SelfServeUtils";
|
||||
import {
|
||||
deleteDedicatedGatewayResource,
|
||||
getCurrentProvisioningState,
|
||||
refreshDedicatedGatewayProvisioning,
|
||||
updateDedicatedGatewayResource,
|
||||
} from "./SqlX.rp";
|
||||
|
||||
const costPerHourValue: Description = {
|
||||
textTKey: "CostText",
|
||||
type: DescriptionType.Text,
|
||||
link: {
|
||||
href: "https://azure.microsoft.com/en-us/pricing/details/cosmos-db/",
|
||||
textTKey: "DedicatedGatewayPricing",
|
||||
},
|
||||
};
|
||||
|
||||
const connectionStringValue: Description = {
|
||||
textTKey: "ConnectionStringText",
|
||||
type: DescriptionType.Text,
|
||||
link: {
|
||||
href: generateBladeLink(BladeType.SqlKeys),
|
||||
textTKey: "KeysBlade",
|
||||
},
|
||||
};
|
||||
|
||||
const CosmosD4s = "Cosmos.D4s";
|
||||
const CosmosD8s = "Cosmos.D8s";
|
||||
const CosmosD16s = "Cosmos.D16s";
|
||||
const CosmosD32s = "Cosmos.D32s";
|
||||
|
||||
const getSKUDetails = (sku: string): string => {
|
||||
if (sku === CosmosD4s) {
|
||||
return "CosmosD4Details";
|
||||
} else if (sku === CosmosD8s) {
|
||||
return "CosmosD8Details";
|
||||
} else if (sku === CosmosD16s) {
|
||||
return "CosmosD16Details";
|
||||
} else if (sku === CosmosD32s) {
|
||||
return "CosmosD32Details";
|
||||
}
|
||||
return "Not Supported Yet";
|
||||
};
|
||||
|
||||
const onSKUChange = (newValue: InputType, currentValues: Map<string, SmartUiInput>): Map<string, SmartUiInput> => {
|
||||
currentValues.set("sku", { value: newValue });
|
||||
currentValues.set("skuDetails", {
|
||||
value: { textTKey: getSKUDetails(`${newValue.toString()}`), type: DescriptionType.Text } as Description,
|
||||
});
|
||||
currentValues.set("costPerHour", { value: costPerHourValue });
|
||||
return currentValues;
|
||||
};
|
||||
|
||||
const onNumberOfInstancesChange = (
|
||||
newValue: InputType,
|
||||
currentValues: Map<string, SmartUiInput>
|
||||
): Map<string, SmartUiInput> => {
|
||||
currentValues.set("instances", { value: newValue });
|
||||
currentValues.set("warningBanner", {
|
||||
value: { textTKey: "WarningBannerOnUpdate" } as Description,
|
||||
hidden: false,
|
||||
});
|
||||
|
||||
return currentValues;
|
||||
};
|
||||
|
||||
const onEnableDedicatedGatewayChange = (
|
||||
newValue: InputType,
|
||||
currentState: Map<string, SmartUiInput>
|
||||
currentValues: Map<string, SmartUiInput>,
|
||||
baselineValues: ReadonlyMap<string, SmartUiInput>
|
||||
): Map<string, SmartUiInput> => {
|
||||
const sku = currentState.get("sku");
|
||||
const instances = currentState.get("instances");
|
||||
const isSkuHidden = newValue === undefined || !(newValue as boolean);
|
||||
currentState.set("enableDedicatedGateway", { value: newValue });
|
||||
currentState.set("sku", { value: sku.value, hidden: isSkuHidden });
|
||||
currentState.set("instances", { value: instances.value, hidden: isSkuHidden });
|
||||
return currentState;
|
||||
currentValues.set("enableDedicatedGateway", { value: newValue });
|
||||
const dedicatedGatewayOriginallyEnabled = baselineValues.get("enableDedicatedGateway")?.value as boolean;
|
||||
if (dedicatedGatewayOriginallyEnabled === newValue) {
|
||||
currentValues.set("sku", baselineValues.get("sku"));
|
||||
currentValues.set("instances", baselineValues.get("instances"));
|
||||
currentValues.set("skuDetails", baselineValues.get("skuDetails"));
|
||||
currentValues.set("costPerHour", baselineValues.get("costPerHour"));
|
||||
currentValues.set("warningBanner", baselineValues.get("warningBanner"));
|
||||
currentValues.set("connectionString", baselineValues.get("connectionString"));
|
||||
return currentValues;
|
||||
}
|
||||
|
||||
currentValues.set("warningBanner", undefined);
|
||||
if (newValue === true) {
|
||||
currentValues.set("warningBanner", {
|
||||
value: {
|
||||
textTKey: "WarningBannerOnUpdate",
|
||||
link: {
|
||||
href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
|
||||
textTKey: "DedicatedGatewayPricing",
|
||||
},
|
||||
} as Description,
|
||||
hidden: false,
|
||||
});
|
||||
} else {
|
||||
currentValues.set("warningBanner", {
|
||||
value: {
|
||||
textTKey: "WarningBannerOnDelete",
|
||||
link: {
|
||||
href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
|
||||
textTKey: "DeprovisioningDetailsText",
|
||||
},
|
||||
} as Description,
|
||||
hidden: false,
|
||||
});
|
||||
}
|
||||
const sku = currentValues.get("sku");
|
||||
const instances = currentValues.get("instances");
|
||||
const hideAttributes = newValue === undefined || !(newValue as boolean);
|
||||
currentValues.set("sku", {
|
||||
value: sku.value,
|
||||
hidden: hideAttributes,
|
||||
disabled: dedicatedGatewayOriginallyEnabled,
|
||||
});
|
||||
currentValues.set("instances", {
|
||||
value: instances.value,
|
||||
hidden: hideAttributes,
|
||||
disabled: dedicatedGatewayOriginallyEnabled,
|
||||
});
|
||||
|
||||
currentValues.set("skuDetails", {
|
||||
value: { textTKey: getSKUDetails(`${currentValues.get("sku").value}`), type: DescriptionType.Text } as Description,
|
||||
hidden: hideAttributes,
|
||||
disabled: dedicatedGatewayOriginallyEnabled,
|
||||
});
|
||||
|
||||
currentValues.set("costPerHour", { value: costPerHourValue, hidden: hideAttributes });
|
||||
currentValues.set("connectionString", {
|
||||
value: connectionStringValue,
|
||||
hidden: !newValue || !dedicatedGatewayOriginallyEnabled,
|
||||
});
|
||||
|
||||
return currentValues;
|
||||
};
|
||||
|
||||
const skuDropDownItems: ChoiceItem[] = [
|
||||
{ label: "CosmosD4s", key: CosmosD4s },
|
||||
{ label: "CosmosD8s", key: CosmosD8s },
|
||||
{ label: "CosmosD16s", key: CosmosD16s },
|
||||
{ label: "CosmosD32s", key: CosmosD32s },
|
||||
];
|
||||
|
||||
const getSkus = async (): Promise<ChoiceItem[]> => {
|
||||
// TODO: get SKUs from getRegionSpecificSkus() RP call and return array of {label:..., key:...}.
|
||||
throw new Error("getSkus not implemented.");
|
||||
return skuDropDownItems;
|
||||
};
|
||||
|
||||
const getInstancesMin = async (): Promise<number> => {
|
||||
// TODO: get SKUs from getRegionSpecificSkus() RP call and return array of {label:..., key:...}.
|
||||
throw new Error("getInstancesMin not implemented.");
|
||||
return 1;
|
||||
};
|
||||
|
||||
const getInstancesMax = async (): Promise<number> => {
|
||||
// TODO: get SKUs from getRegionSpecificSkus() RP call and return array of {label:..., key:...}.
|
||||
throw new Error("getInstancesMax not implemented.");
|
||||
};
|
||||
|
||||
const validate = (currentValues: Map<string, SmartUiInput>): void => {
|
||||
// TODO: add cusom validation logic to be called before Saving the data.
|
||||
throw new Error(`validate not implemented. No. of properties to validate: ${currentValues.size}`);
|
||||
return 5;
|
||||
};
|
||||
|
||||
@IsDisplayable()
|
||||
@RefreshOptions({ retryIntervalInMs: 20000 })
|
||||
export default class SqlX extends SelfServeBaseClass {
|
||||
public onRefresh = async (): Promise<RefreshResult> => {
|
||||
return refreshDedicatedGatewayProvisioning();
|
||||
return await refreshDedicatedGatewayProvisioning();
|
||||
};
|
||||
|
||||
public onSave = async (currentValues: Map<string, SmartUiInput>): Promise<OnSaveResult> => {
|
||||
validate(currentValues);
|
||||
// TODO: add pre processing logic before calling the updateDedicatedGatewayProvisioning() RP call.
|
||||
throw new Error(`onSave not implemented. No. of properties to save: ${currentValues.size}`);
|
||||
public onSave = async (
|
||||
currentValues: Map<string, SmartUiInput>,
|
||||
baselineValues: Map<string, SmartUiInput>
|
||||
): Promise<OnSaveResult> => {
|
||||
const dedicatedGatewayCurrentlyEnabled = currentValues.get("enableDedicatedGateway")?.value as boolean;
|
||||
const dedicatedGatewayOriginallyEnabled = baselineValues.get("enableDedicatedGateway")?.value as boolean;
|
||||
|
||||
currentValues.set("warningBanner", undefined);
|
||||
|
||||
//TODO : Add try catch for each RP call and return relevant notifications
|
||||
if (dedicatedGatewayOriginallyEnabled) {
|
||||
if (!dedicatedGatewayCurrentlyEnabled) {
|
||||
const operationStatusUrl = await deleteDedicatedGatewayResource();
|
||||
return {
|
||||
operationStatusUrl: operationStatusUrl,
|
||||
portalNotification: {
|
||||
initialize: {
|
||||
titleTKey: "DeleteInitializeTitle",
|
||||
messageTKey: "DeleteInitializeMessage",
|
||||
},
|
||||
success: {
|
||||
titleTKey: "DeleteSuccessTitle",
|
||||
messageTKey: "DeleteSuccesseMessage",
|
||||
},
|
||||
failure: {
|
||||
titleTKey: "DeleteFailureTitle",
|
||||
messageTKey: "DeleteFailureMessage",
|
||||
},
|
||||
},
|
||||
};
|
||||
} else {
|
||||
// Check for scaling up/down/in/out
|
||||
return {
|
||||
operationStatusUrl: undefined,
|
||||
portalNotification: {
|
||||
initialize: {
|
||||
titleTKey: "UpdateInitializeTitle",
|
||||
messageTKey: "UpdateInitializeMessage",
|
||||
},
|
||||
success: {
|
||||
titleTKey: "UpdateSuccessTitle",
|
||||
messageTKey: "UpdateSuccesseMessage",
|
||||
},
|
||||
failure: {
|
||||
titleTKey: "UpdateFailureTitle",
|
||||
messageTKey: "UpdateFailureMessage",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
} else {
|
||||
const sku = currentValues.get("sku")?.value as string;
|
||||
const instances = currentValues.get("instances").value as number;
|
||||
const operationStatusUrl = await updateDedicatedGatewayResource(sku, instances);
|
||||
return {
|
||||
operationStatusUrl: operationStatusUrl,
|
||||
portalNotification: {
|
||||
initialize: {
|
||||
titleTKey: "CreateInitializeTitle",
|
||||
messageTKey: "CreateInitializeTitle",
|
||||
},
|
||||
success: {
|
||||
titleTKey: "CreateSuccessTitle",
|
||||
messageTKey: "CreateSuccesseMessage",
|
||||
},
|
||||
failure: {
|
||||
titleTKey: "CreateFailureTitle",
|
||||
messageTKey: "CreateFailureMessage",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
public initialize = async (): Promise<Map<string, SmartUiInput>> => {
|
||||
// TODO: get initialization data from initializeDedicatedGatewayProvisioning() RP call.
|
||||
throw new Error("onSave not implemented");
|
||||
// Based on the RP call enableDedicatedGateway will be true if it has not yet been enabled and false if it has.
|
||||
const defaults = new Map<string, SmartUiInput>();
|
||||
defaults.set("enableDedicatedGateway", { value: false });
|
||||
defaults.set("sku", { value: CosmosD4s, hidden: true });
|
||||
defaults.set("instances", { value: await getInstancesMin(), hidden: true });
|
||||
defaults.set("skuDetails", undefined);
|
||||
defaults.set("costPerHour", undefined);
|
||||
defaults.set("connectionString", undefined);
|
||||
|
||||
const response = await getCurrentProvisioningState();
|
||||
if (response.status && response.status !== "Deleting") {
|
||||
defaults.set("enableDedicatedGateway", { value: true });
|
||||
defaults.set("sku", { value: response.sku, disabled: true });
|
||||
defaults.set("instances", { value: response.instances, disabled: true });
|
||||
defaults.set("costPerHour", { value: costPerHourValue });
|
||||
defaults.set("skuDetails", {
|
||||
value: { textTKey: getSKUDetails(`${defaults.get("sku").value}`), type: DescriptionType.Text } as Description,
|
||||
hidden: false,
|
||||
});
|
||||
defaults.set("connectionString", {
|
||||
value: connectionStringValue,
|
||||
hidden: false,
|
||||
});
|
||||
}
|
||||
|
||||
defaults.set("warningBanner", undefined);
|
||||
return defaults;
|
||||
};
|
||||
|
||||
@Values({
|
||||
isDynamicDescription: true,
|
||||
})
|
||||
warningBanner: string;
|
||||
|
||||
@Values({
|
||||
description: {
|
||||
textTKey: "Provisioning dedicated gateways for SqlX accounts.",
|
||||
textTKey: "DedicatedGatewayDescription",
|
||||
type: DescriptionType.Text,
|
||||
link: {
|
||||
href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
|
||||
textTKey: "Learn more about dedicated gateway.",
|
||||
textTKey: "LearnAboutDedicatedGateway",
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -75,25 +295,45 @@ export default class SqlX extends SelfServeBaseClass {
|
||||
|
||||
@OnChange(onEnableDedicatedGatewayChange)
|
||||
@Values({
|
||||
labelTKey: "Dedicated Gateway",
|
||||
trueLabelTKey: "Enable",
|
||||
falseLabelTKey: "Disable",
|
||||
labelTKey: "DedicatedGateway",
|
||||
trueLabelTKey: "Provisioned",
|
||||
falseLabelTKey: "Deprovisioned",
|
||||
})
|
||||
enableDedicatedGateway: boolean;
|
||||
|
||||
@OnChange(onSKUChange)
|
||||
@Values({
|
||||
labelTKey: "SKUs",
|
||||
choices: getSkus,
|
||||
placeholderTKey: "Select SKUs",
|
||||
placeholderTKey: "SKUsPlaceHolder",
|
||||
})
|
||||
sku: ChoiceItem;
|
||||
|
||||
@Values({
|
||||
labelTKey: "Number of instances",
|
||||
labelTKey: "SKUDetails",
|
||||
isDynamicDescription: true,
|
||||
})
|
||||
skuDetails: string;
|
||||
|
||||
@OnChange(onNumberOfInstancesChange)
|
||||
@Values({
|
||||
labelTKey: "NumberOfInstances",
|
||||
min: getInstancesMin,
|
||||
max: getInstancesMax,
|
||||
step: 1,
|
||||
uiType: NumberUiType.Spinner,
|
||||
})
|
||||
instances: number;
|
||||
|
||||
@Values({
|
||||
labelTKey: "Cost",
|
||||
isDynamicDescription: true,
|
||||
})
|
||||
costPerHour: string;
|
||||
|
||||
@Values({
|
||||
labelTKey: "ConnectionString",
|
||||
isDynamicDescription: true,
|
||||
})
|
||||
connectionString: string;
|
||||
}
|
||||
|
||||
31
src/SelfServe/SqlX/SqlxTypes.ts
Normal file
31
src/SelfServe/SqlX/SqlxTypes.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
export type SqlxServiceResource = {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
properties: SqlxServiceProps;
|
||||
locations: SqlxServiceLocations;
|
||||
};
|
||||
export type SqlxServiceProps = {
|
||||
serviceType: string;
|
||||
creationTime: string;
|
||||
status: string;
|
||||
instanceSize: string;
|
||||
instanceCount: number;
|
||||
sqlxEndPoint: string;
|
||||
};
|
||||
|
||||
export type SqlxServiceLocations = {
|
||||
location: string;
|
||||
status: string;
|
||||
sqlxEndpoint: string;
|
||||
};
|
||||
|
||||
export type UpdateDedicatedGatewayRequestParameters = {
|
||||
properties: UpdateDedicatedGatewayRequestProperties;
|
||||
};
|
||||
|
||||
export type UpdateDedicatedGatewayRequestProperties = {
|
||||
instanceSize: string;
|
||||
instanceCount: number;
|
||||
serviceType: string;
|
||||
};
|
||||
@@ -20,11 +20,14 @@ interface UserContext {
|
||||
// API Type is not yet provided by ARM. You need to manually inspect all the capabilities+kind so we abstract that logic in userContext
|
||||
// This is coming in a future Cosmos ARM API version as a prperty on databaseAccount
|
||||
apiType?: ApiType;
|
||||
isTryCosmosDBSubscription?: boolean;
|
||||
portalEnv?: PortalEnv;
|
||||
}
|
||||
|
||||
type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra";
|
||||
export type PortalEnv = "localhost" | "blackforest" | "fairfax" | "mooncake" | "prod" | "dev";
|
||||
|
||||
const userContext: UserContext = {};
|
||||
const userContext: UserContext = { isTryCosmosDBSubscription: false, portalEnv: "prod" };
|
||||
|
||||
function updateUserContext(newContext: UserContext): void {
|
||||
Object.assign(userContext, newContext);
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import Explorer from "../Explorer/Explorer";
|
||||
|
||||
export interface ExplorerStateProperties {
|
||||
commandBarProperties: {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export const useExplorerState = (container: Explorer): ExplorerStateProperties => {
|
||||
const [isPanelOpen, setIsPanelOpen] = useState<boolean>(false);
|
||||
|
||||
|
||||
return {};
|
||||
};
|
||||
@@ -3,7 +3,7 @@ import { applyExplorerBindings } from "../applyExplorerBindings";
|
||||
import { AuthType } from "../AuthType";
|
||||
import { AccountKind, DefaultAccountExperience } from "../Common/Constants";
|
||||
import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
|
||||
import { sendMessage } from "../Common/MessageHandler";
|
||||
import { sendReadyMessage } from "../Common/MessageHandler";
|
||||
import { configContext, Platform, updateConfigContext } from "../ConfigContext";
|
||||
import { ActionType, DataExplorerAction } from "../Contracts/ActionContracts";
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
@@ -25,7 +25,7 @@ import {
|
||||
getDatabaseAccountPropertiesFromMetadata,
|
||||
} from "../Platform/Hosted/HostedUtils";
|
||||
import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
|
||||
import { updateUserContext } from "../UserContext";
|
||||
import { PortalEnv, updateUserContext } from "../UserContext";
|
||||
import { listKeys } from "../Utils/arm/generatedClients/2020-04-01/databaseAccounts";
|
||||
import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
|
||||
|
||||
@@ -78,18 +78,22 @@ async function configureHosted(explorerParams: ExplorerParams): Promise<Explorer
|
||||
}
|
||||
|
||||
async function configureHostedWithAAD(config: AAD, explorerParams: ExplorerParams): Promise<Explorer> {
|
||||
// TODO: Refactor. updateUserContext needs to be called twice because listKeys below depends on userContext.authorizationToken
|
||||
updateUserContext({
|
||||
authType: AuthType.AAD,
|
||||
authorizationToken: `Bearer ${config.authorizationToken}`,
|
||||
});
|
||||
const account = config.databaseAccount;
|
||||
const accountResourceId = account.id;
|
||||
const subscriptionId = accountResourceId && accountResourceId.split("subscriptions/")[1].split("/")[0];
|
||||
const resourceGroup = accountResourceId && accountResourceId.split("resourceGroups/")[1].split("/")[0];
|
||||
const keys = await listKeys(subscriptionId, resourceGroup, account.name);
|
||||
updateUserContext({
|
||||
subscriptionId,
|
||||
resourceGroup,
|
||||
authType: AuthType.AAD,
|
||||
authorizationToken: `Bearer ${config.authorizationToken}`,
|
||||
databaseAccount: config.databaseAccount,
|
||||
masterKey: keys.primaryMasterKey,
|
||||
});
|
||||
const keys = await listKeys(subscriptionId, resourceGroup, account.name);
|
||||
const explorer = new Explorer(explorerParams);
|
||||
explorer.configure({
|
||||
databaseAccount: account,
|
||||
@@ -118,6 +122,7 @@ function configureHostedWithConnectionString(config: ConnectionString, explorerP
|
||||
authType: AuthType.EncryptedToken,
|
||||
accessToken: encodeURIComponent(config.encryptedToken),
|
||||
databaseAccount,
|
||||
masterKey: config.masterKey,
|
||||
});
|
||||
const explorer = new Explorer(explorerParams);
|
||||
explorer.configure({
|
||||
@@ -155,9 +160,7 @@ function configureHostedWithResourceToken(config: ResourceToken, explorerParams:
|
||||
explorer.configure({
|
||||
databaseAccount,
|
||||
features: extractFeatures(),
|
||||
isAuthWithresourceToken: true,
|
||||
});
|
||||
explorer.isRefreshingExplorer(false);
|
||||
return explorer;
|
||||
}
|
||||
|
||||
@@ -257,6 +260,7 @@ async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer
|
||||
subscriptionId: inputs.subscriptionId,
|
||||
subscriptionType: inputs.subscriptionType,
|
||||
quotaId: inputs.quotaId,
|
||||
portalEnv: inputs.serverId as PortalEnv,
|
||||
});
|
||||
|
||||
const explorer = new Explorer(explorerParams);
|
||||
@@ -270,7 +274,7 @@ async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer
|
||||
false
|
||||
);
|
||||
|
||||
sendMessage("ready");
|
||||
sendReadyMessage();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ describe("MongoDB Index policy tests", () => {
|
||||
await frame.click(`div[data-test="${collectionId}"]`);
|
||||
|
||||
await frame.waitFor(`div[data-test="Scale & Settings"]`), { visible: true };
|
||||
await frame.waitFor(LOADING_STATE_DELAY);
|
||||
await frame.waitFor(10000);
|
||||
await frame.click(`div[data-test="Scale & Settings"]`);
|
||||
|
||||
await frame.waitFor(`button[data-content="Indexing Policy"]`), { visible: true };
|
||||
|
||||
@@ -12,14 +12,19 @@ describe("Self Serve", () => {
|
||||
|
||||
// id of the display element is in the format {PROPERTY_NAME}-{DISPLAY_NAME}-{DISPLAY_TYPE}
|
||||
await frame.waitForSelector("#description-text-display");
|
||||
await frame.waitForSelector("#currentRegionText-text-display");
|
||||
|
||||
const regions = await frame.waitForSelector("#regions-dropdown-input");
|
||||
|
||||
const currentRegionsDescription = await frame.$$("#currentRegionText-text-display");
|
||||
expect(currentRegionsDescription).toHaveLength(0);
|
||||
let disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]");
|
||||
expect(disabledLoggingToggle).toHaveLength(0);
|
||||
|
||||
await regions.click();
|
||||
const regionsDropdownElement1 = await frame.waitForSelector("#regions-dropdown-input-list0");
|
||||
await regionsDropdownElement1.click();
|
||||
|
||||
await frame.waitForSelector("#currentRegionText-text-display");
|
||||
disabledLoggingToggle = await frame.$$("#enableLogging-toggle-input[disabled]");
|
||||
expect(disabledLoggingToggle).toHaveLength(1);
|
||||
|
||||
|
||||
@@ -65,12 +65,6 @@ describe("Collection Add and Delete SQL spec", () => {
|
||||
await frame.waitFor(CREATE_DELAY);
|
||||
await frame.waitFor("div[class='rowData'] > span[class='message']");
|
||||
|
||||
const didCreateContainer = await frame.$$eval("div[class='rowData'] > span[class='message']", (elements) => {
|
||||
return elements.some((el) => el.textContent.includes("Successfully created"));
|
||||
});
|
||||
|
||||
expect(didCreateContainer).toBe(true);
|
||||
|
||||
await frame.waitFor(`div[data-test="${selectedDbId}"]`), { visible: true };
|
||||
await frame.waitFor(LOADING_STATE_DELAY);
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ console.log("Subcription: ", subscriptionId);
|
||||
console.log("Account Name: ", accountName);
|
||||
|
||||
const initTestExplorer = async (): Promise<void> => {
|
||||
const { token } = await credentials.getToken("https://management.core.windows.net/.default");
|
||||
const { token } = await credentials.getToken("https://management.azure.com//.default");
|
||||
updateUserContext({
|
||||
authorizationToken: `bearer ${token}`,
|
||||
});
|
||||
@@ -79,7 +79,7 @@ const initTestExplorer = async (): Promise<void> => {
|
||||
// After we have received the "ready" message from the child iframe we can post configuration
|
||||
// This simulates the same action that happens in the portal
|
||||
console.dir(event.data);
|
||||
if (event.data?.data === "ready") {
|
||||
if (event.data?.kind === "ready") {
|
||||
iframe.contentWindow.postMessage(
|
||||
{
|
||||
signature: "pcIframe",
|
||||
|
||||
Reference in New Issue
Block a user