mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-28 14:14:08 +00:00
Compare commits
7 Commits
dependabot
...
languy-res
| Author | SHA1 | Date | |
|---|---|---|---|
|
a17d71d76e | ||
|
|
faf2e3b559 | ||
|
|
7e992c2b17 | ||
|
|
21b92ed4f8 | ||
|
|
e5755dff39 | ||
|
|
e48a6a10cb | ||
|
|
4480a7250d |
@@ -24,6 +24,7 @@ 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
|
||||
|
||||
9
.github/dependabot.yml
vendored
9
.github/dependabot.yml
vendored
@@ -1,9 +0,0 @@
|
||||
# Please see the documentation for all configuration options:
|
||||
# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
|
||||
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: "npm"
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: "daily"
|
||||
@@ -18,6 +18,7 @@ Run `npm start` to start the development server and automatically rebuild on cha
|
||||
### Hosted Development (https://cosmos.azure.com)
|
||||
|
||||
- Visit: `https://localhost:1234/hostedExplorer.html`
|
||||
- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
|
||||
- The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
|
||||
|
||||
### Emulator Development
|
||||
@@ -68,7 +69,7 @@ Jest and Puppeteer are used for end to end browser based tests and are contained
|
||||
|
||||
We generally adhere to the release strategy [documented by the Azure SDK Guidelines](https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches). Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a `release/` or `hotfix/` branch. See linked documentation for more details.
|
||||
|
||||
### Architecture
|
||||
### Architechture
|
||||
|
||||
[](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)
|
||||
|
||||
|
||||
@@ -7,6 +7,5 @@ module.exports = {
|
||||
defaultViewport: null,
|
||||
ignoreHTTPSErrors: true,
|
||||
args: ["--disable-web-security"],
|
||||
exitOnPageError: false,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -21,13 +21,17 @@ module.exports = {
|
||||
collectCoverage: true,
|
||||
|
||||
// An array of glob patterns indicating a set of files for which coverage information should be collected
|
||||
collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
|
||||
// collectCoverageFrom: [
|
||||
// "src/Common/Headers*"
|
||||
// ],
|
||||
|
||||
// The directory where Jest should output its coverage files
|
||||
coverageDirectory: "coverage",
|
||||
|
||||
// An array of regexp pattern strings used to skip coverage collection
|
||||
coveragePathIgnorePatterns: ["/node_modules/"],
|
||||
// coveragePathIgnorePatterns: [
|
||||
// "/node_modules/"
|
||||
// ],
|
||||
|
||||
// A list of reporter names that Jest uses when writing coverage reports
|
||||
coverageReporters: ["json", "text", "cobertura"],
|
||||
@@ -35,10 +39,10 @@ module.exports = {
|
||||
// An object that configures minimum threshold enforcement for coverage results
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
branches: 25,
|
||||
functions: 25,
|
||||
lines: 30,
|
||||
statements: 30,
|
||||
branches: 22,
|
||||
functions: 28,
|
||||
lines: 33,
|
||||
statements: 31,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -67,8 +71,7 @@ module.exports = {
|
||||
|
||||
// A map from regular expressions to module names that allow to stub out resources with a single module
|
||||
moduleNameMapper: {
|
||||
"^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
|
||||
"@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
|
||||
"^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
|
||||
"worker-loader": "<rootDir>/mockModule",
|
||||
"office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
|
||||
"^dnd-core$": "dnd-core/dist/cjs",
|
||||
|
||||
@@ -718,7 +718,7 @@ execute-sproc-params-pane {
|
||||
}
|
||||
}
|
||||
|
||||
.stored-procedure-tab {
|
||||
stored-procedure-tab {
|
||||
@ToggleHeight: 30px;
|
||||
@ToggleWidth: 180px;
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
.main {
|
||||
height: 100%;
|
||||
}
|
||||
border-right: 1px solid @BaseMedium;
|
||||
}
|
||||
|
||||
.resourceTreeScroll {
|
||||
|
||||
26885
package-lock.json
generated
26885
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
30
package.json
30
package.json
@@ -44,7 +44,9 @@
|
||||
"@types/node-fetch": "2.5.7",
|
||||
"@uifabric/react-cards": "0.109.110",
|
||||
"@uifabric/styling": "7.13.7",
|
||||
"abort-controller": "3.0.0",
|
||||
"applicationinsights": "1.8.0",
|
||||
"babel-polyfill": "6.26.0",
|
||||
"bootstrap": "3.4.1",
|
||||
"canvas": "file:./canvas",
|
||||
"clean-webpack-plugin": "0.1.19",
|
||||
@@ -58,13 +60,15 @@
|
||||
"date-fns": "1.29.0",
|
||||
"dayjs": "1.8.19",
|
||||
"dotenv": "8.2.0",
|
||||
"es6-object-assign": "1.1.0",
|
||||
"es6-symbol": "3.1.3",
|
||||
"eslint-plugin-jest": "23.13.2",
|
||||
"eslint-plugin-react": "7.20.0",
|
||||
"hasher": "1.2.0",
|
||||
"html2canvas": "1.0.0-rc.5",
|
||||
"i18next": "19.8.4",
|
||||
"i18next-browser-languagedetector": "6.0.1",
|
||||
"i18next-http-backend": "1.2.1",
|
||||
"i18next-http-backend": "1.0.23",
|
||||
"immutable": "4.0.0-rc.12",
|
||||
"is-ci": "2.0.0",
|
||||
"jquery": "3.5.1",
|
||||
@@ -75,9 +79,12 @@
|
||||
"monaco-editor": "0.18.1",
|
||||
"ms": "2.1.3",
|
||||
"msal": "1.4.4",
|
||||
"office-ui-fabric-react": "7.164.2",
|
||||
"object.entries": "1.1.0",
|
||||
"office-ui-fabric-react": "7.134.1",
|
||||
"p-retry": "4.2.0",
|
||||
"plotly.js-cartesian-dist-min": "1.52.3",
|
||||
"promise-polyfill": "8.1.0",
|
||||
"promise.prototype.finally": "3.1.0",
|
||||
"q": "1.5.1",
|
||||
"react": "16.13.1",
|
||||
"react-animate-height": "2.0.8",
|
||||
@@ -94,9 +101,13 @@
|
||||
"rxjs": "6.6.3",
|
||||
"styled-components": "4.3.2",
|
||||
"swr": "0.4.0",
|
||||
"terser-webpack-plugin": "3.1.0",
|
||||
"text-encoding": "0.7.0",
|
||||
"underscore": "1.9.1",
|
||||
"utility-types": "3.10.0"
|
||||
"url-polyfill": "1.1.7",
|
||||
"utility-types": "3.10.0",
|
||||
"webcrypto-liner": "1.1.4",
|
||||
"webfontloader": "1.6.28",
|
||||
"whatwg-fetch": "3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.9.0",
|
||||
@@ -110,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.5",
|
||||
"@types/expect-puppeteer": "4.4.3",
|
||||
"@types/hasher": "0.0.31",
|
||||
"@types/jest": "26.0.20",
|
||||
"@types/jest-environment-puppeteer": "4.4.1",
|
||||
"@types/jest-environment-puppeteer": "4.3.2",
|
||||
"@types/memoize-one": "4.1.1",
|
||||
"@types/node": "12.11.1",
|
||||
"@types/promise.prototype.finally": "2.0.3",
|
||||
"@types/prop-types": "15.5.8",
|
||||
"@types/puppeteer": "5.4.3",
|
||||
"@types/puppeteer": "3.0.1",
|
||||
"@types/q": "1.5.1",
|
||||
"@types/react": "17.0.0",
|
||||
"@types/react-dom": "17.0.0",
|
||||
@@ -126,7 +137,9 @@
|
||||
"@types/react-redux": "7.1.7",
|
||||
"@types/sinon": "2.3.3",
|
||||
"@types/styled-components": "5.1.1",
|
||||
"@types/text-encoding": "0.0.33",
|
||||
"@types/underscore": "1.7.36",
|
||||
"@types/webfontloader": "1.6.29",
|
||||
"@typescript-eslint/eslint-plugin": "4.0.1",
|
||||
"@typescript-eslint/parser": "4.0.1",
|
||||
"axe-puppeteer": "1.1.0",
|
||||
@@ -163,11 +176,12 @@
|
||||
"monaco-editor-webpack-plugin": "1.7.0",
|
||||
"node-fetch": "2.6.1",
|
||||
"prettier": "2.2.1",
|
||||
"puppeteer": "8.0.0",
|
||||
"puppeteer": "4.0.0",
|
||||
"raw-loader": "0.5.1",
|
||||
"rimraf": "3.0.0",
|
||||
"sinon": "3.2.1",
|
||||
"style-loader": "0.23.0",
|
||||
"terser-webpack-plugin": "3.0.5",
|
||||
"ts-loader": "6.2.2",
|
||||
"tslint": "5.11.0",
|
||||
"tslint-microsoft-contrib": "6.0.0",
|
||||
|
||||
@@ -98,6 +98,30 @@ export class CapabilityNames {
|
||||
public static readonly EnableServerless: string = "EnableServerless";
|
||||
}
|
||||
|
||||
export class Features {
|
||||
public static readonly cosmosdb = "cosmosdb";
|
||||
public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
|
||||
public static readonly executeSproc = "dataexplorerexecutesproc";
|
||||
public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
|
||||
public static readonly enableTtl = "enablettl";
|
||||
public static readonly enableNotebooks = "enablenotebooks";
|
||||
public static readonly enableSpark = "enablespark";
|
||||
public static readonly livyEndpoint = "livyendpoint";
|
||||
public static readonly notebookServerUrl = "notebookserverurl";
|
||||
public static readonly notebookServerToken = "notebookservertoken";
|
||||
public static readonly notebookBasePath = "notebookbasepath";
|
||||
public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
|
||||
public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
|
||||
public static readonly ttl90Days = "ttl90days";
|
||||
public static readonly enableRightPanelV2 = "enablerightpanelv2";
|
||||
public static readonly enableSchema = "enableschema";
|
||||
public static readonly enableSDKoperations = "enablesdkoperations";
|
||||
public static readonly showMinRUSurvey = "showminrusurvey";
|
||||
public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
|
||||
public static readonly selfServeType = "selfservetype";
|
||||
public static readonly enableKOPanel = "enablekopanel";
|
||||
}
|
||||
|
||||
// flight names returned from the portal are always lowercase
|
||||
export class Flights {
|
||||
public static readonly SettingsV2 = "settingsv2";
|
||||
@@ -368,6 +392,9 @@ export class Notebook {
|
||||
public static readonly kernelRestartInitialDelayMs = 1000;
|
||||
public static readonly kernelRestartMaxDelayMs = 20000;
|
||||
public static readonly autoSaveIntervalMs = 120000;
|
||||
|
||||
public static readonly MyNotebooksTitle = "My Notebooks";
|
||||
public static readonly GitHubReposTitle = "GitHub repos";
|
||||
}
|
||||
|
||||
export class SparkLibrary {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
import Q from "q";
|
||||
import * as _ from "underscore";
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
import { getDataExplorerWindow } from "../Utils/WindowUtils";
|
||||
import * as Constants from "./Constants";
|
||||
import { getDataExplorerWindow } from "../Utils/WindowUtils";
|
||||
|
||||
export interface CachedDataPromise<T> {
|
||||
deferred: Q.Deferred<T>;
|
||||
@@ -61,21 +61,6 @@ export function sendMessage(data: any): void {
|
||||
}
|
||||
}
|
||||
|
||||
export function sendReadyMessage(): void {
|
||||
if (canSendMessage()) {
|
||||
// We try to find data explorer window first, then fallback to current window
|
||||
const portalChildWindow = getDataExplorerWindow(window) || window;
|
||||
portalChildWindow.parent.postMessage(
|
||||
{
|
||||
signature: "pcIframe",
|
||||
kind: "ready",
|
||||
data: "ready",
|
||||
},
|
||||
portalChildWindow.document.referrer
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function canSendMessage(): boolean {
|
||||
return window.parent !== window;
|
||||
}
|
||||
|
||||
@@ -1,61 +1,55 @@
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -376,6 +376,7 @@ export interface DataExplorerInputsFrame {
|
||||
masterKey?: string;
|
||||
hasWriteAccess?: boolean;
|
||||
authorizationToken?: string;
|
||||
features: { [key: string]: string };
|
||||
csmEndpoint?: string;
|
||||
dnsSuffix?: string;
|
||||
serverId?: string;
|
||||
@@ -389,6 +390,7 @@ export interface DataExplorerInputsFrame {
|
||||
sharedThroughputMaximum?: number;
|
||||
sharedThroughputDefault?: number;
|
||||
dataExplorerVersion?: string;
|
||||
isAuthWithresourceToken?: boolean;
|
||||
defaultCollectionThroughput?: CollectionCreationDefaults;
|
||||
flights?: readonly string[];
|
||||
}
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
import dayjs from "dayjs";
|
||||
import * as Plotly from "plotly.js-cartesian-dist-min";
|
||||
import { StyleConstants } from "../../Common/Constants";
|
||||
import { sendCachedDataMessage, sendReadyMessage } from "../../Common/MessageHandler";
|
||||
import { MessageTypes } from "../../Contracts/ExplorerContracts";
|
||||
import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
|
||||
import "./Heatmap.less";
|
||||
import dayjs from "dayjs";
|
||||
import {
|
||||
ChartSettings,
|
||||
DataPayload,
|
||||
@@ -16,6 +11,11 @@ import {
|
||||
PartitionTimeStampToData,
|
||||
PortalTheme,
|
||||
} from "./HeatmapDatatypes";
|
||||
import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
|
||||
import { sendCachedDataMessage, sendMessage } from "../../Common/MessageHandler";
|
||||
import { MessageTypes } from "../../Contracts/ExplorerContracts";
|
||||
import { StyleConstants } from "../../Common/Constants";
|
||||
import "./Heatmap.less";
|
||||
|
||||
export class Heatmap {
|
||||
public static readonly elementId: string = "heatmap";
|
||||
@@ -266,4 +266,4 @@ export function handleMessage(event: MessageEvent) {
|
||||
}
|
||||
|
||||
window.addEventListener("message", handleMessage, false);
|
||||
sendReadyMessage();
|
||||
sendMessage("ready");
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import * as ko from "knockout";
|
||||
import * as PaneComponents from "./Panes/PaneComponents";
|
||||
import * as TabComponents from "./Tabs/TabComponents";
|
||||
import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
|
||||
import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
|
||||
import { EditorComponent } from "./Controls/Editor/EditorComponent";
|
||||
@@ -8,25 +9,9 @@ import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleCompo
|
||||
import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahead";
|
||||
import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
|
||||
import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
|
||||
import { TabsManagerKOComponent } from "./Tabs/TabsManager";
|
||||
import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
|
||||
|
||||
import DocumentsTab from "./Tabs/DocumentsTab";
|
||||
import StoredProcedureTab from "./Tabs/StoredProcedureTab";
|
||||
import TriggerTab from "./Tabs/TriggerTab";
|
||||
import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
|
||||
import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
|
||||
import QueryTab from "./Tabs/QueryTab";
|
||||
import QueryTablesTab from "./Tabs/QueryTablesTab";
|
||||
import GraphTab from "./Tabs/GraphTab";
|
||||
import MongoShellTab from "./Tabs/MongoShellTab";
|
||||
import ConflictsTab from "./Tabs/ConflictsTab";
|
||||
import NotebookTabV2 from "./Tabs/NotebookV2Tab";
|
||||
import TerminalTab from "./Tabs/TerminalTab";
|
||||
import GalleryTab from "./Tabs/GalleryTab";
|
||||
import NotebookViewerTab from "./Tabs/NotebookViewerTab";
|
||||
import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab";
|
||||
import TabsManagerTemplate from "./Tabs/TabsManager.html";
|
||||
|
||||
ko.components.register("input-typeahead", new InputTypeaheadComponent());
|
||||
ko.components.register("new-vertex-form", NewVertexComponent);
|
||||
ko.components.register("error-display", new ErrorDisplayComponent());
|
||||
@@ -36,27 +21,28 @@ ko.components.register("json-editor", new JsonEditorComponent());
|
||||
ko.components.register("diff-editor", new DiffEditorComponent());
|
||||
ko.components.register("dynamic-list", DynamicListComponent);
|
||||
ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
|
||||
ko.components.register("tabs-manager", { template: TabsManagerTemplate });
|
||||
ko.components.register("tabs-manager", TabsManagerKOComponent());
|
||||
|
||||
// Collection Tabs
|
||||
[
|
||||
DocumentsTab,
|
||||
StoredProcedureTab,
|
||||
TriggerTab,
|
||||
UserDefinedFunctionTab,
|
||||
SettingsTabV2,
|
||||
QueryTab,
|
||||
QueryTablesTab,
|
||||
GraphTab,
|
||||
MongoShellTab,
|
||||
ConflictsTab,
|
||||
NotebookTabV2,
|
||||
TerminalTab,
|
||||
GalleryTab,
|
||||
NotebookViewerTab,
|
||||
DatabaseSettingsTab,
|
||||
DatabaseSettingsTabV2,
|
||||
].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
|
||||
ko.components.register("documents-tab", new TabComponents.DocumentsTab());
|
||||
ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
|
||||
ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
|
||||
ko.components.register("trigger-tab", new TabComponents.TriggerTab());
|
||||
ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
|
||||
ko.components.register("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
|
||||
ko.components.register("query-tab", new TabComponents.QueryTab());
|
||||
ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
|
||||
ko.components.register("graph-tab", new TabComponents.GraphTab());
|
||||
ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());
|
||||
ko.components.register("conflicts-tab", new TabComponents.ConflictsTab());
|
||||
ko.components.register("notebookv2-tab", new TabComponents.NotebookV2Tab());
|
||||
ko.components.register("terminal-tab", new TabComponents.TerminalTab());
|
||||
ko.components.register("gallery-tab", new TabComponents.GalleryTab());
|
||||
ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTab());
|
||||
|
||||
// Database Tabs
|
||||
ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
|
||||
ko.components.register("database-settings-tab-v2", new TabComponents.SettingsTabV2());
|
||||
|
||||
// Panes
|
||||
ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
|
||||
|
||||
@@ -6,7 +6,6 @@ describe("CollapsibleSectionComponent", () => {
|
||||
it("renders", () => {
|
||||
const props: CollapsibleSectionProps = {
|
||||
title: "Sample title",
|
||||
isExpandedByDefault: true,
|
||||
};
|
||||
|
||||
const wrapper = shallow(<CollapsibleSectionComponent {...props} />);
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { Icon, Label, Stack } from "office-ui-fabric-react";
|
||||
import * as React from "react";
|
||||
import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
|
||||
import { accordionIconStyles, accordionStackTokens } from "../Settings/SettingsRenderUtils";
|
||||
|
||||
export interface CollapsibleSectionProps {
|
||||
title: string;
|
||||
isExpandedByDefault: boolean;
|
||||
}
|
||||
|
||||
export interface CollapsibleSectionState {
|
||||
@@ -15,7 +14,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
|
||||
constructor(props: CollapsibleSectionProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isExpanded: this.props.isExpandedByDefault,
|
||||
isExpanded: true,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -26,14 +25,8 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
className="collapsibleSection"
|
||||
horizontal
|
||||
verticalAlign="center"
|
||||
tokens={accordionStackTokens}
|
||||
onClick={this.toggleCollapsed}
|
||||
>
|
||||
<Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
|
||||
<Stack className="collapsibleSection" horizontal tokens={accordionStackTokens} onClick={this.toggleCollapsed}>
|
||||
<Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
|
||||
<Label>{this.props.title}</Label>
|
||||
</Stack>
|
||||
{this.state.isExpanded && this.props.children}
|
||||
|
||||
@@ -11,10 +11,16 @@ exports[`CollapsibleSectionComponent renders 1`] = `
|
||||
"childrenGap": 10,
|
||||
}
|
||||
}
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="ChevronDown"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"paddingTop": 7,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
<StyledLabelBase>
|
||||
Sample title
|
||||
|
||||
@@ -354,6 +354,7 @@ exports[`test render renders with filters 1`] = `
|
||||
data-is-scrollable="true"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="stickyAbove-42"
|
||||
style={
|
||||
Object {
|
||||
@@ -374,6 +375,7 @@ exports[`test render renders with filters 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-hidden={true}
|
||||
style={
|
||||
Object {
|
||||
"pointerEvents": "none",
|
||||
@@ -393,6 +395,7 @@ exports[`test render renders with filters 1`] = `
|
||||
style={Object {}}
|
||||
>
|
||||
<div
|
||||
aria-hidden={false}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "",
|
||||
@@ -408,7 +411,6 @@ exports[`test render renders with filters 1`] = `
|
||||
>
|
||||
<TextFieldBase
|
||||
ariaLabel="Directory filter text box"
|
||||
canRevealPassword={false}
|
||||
className="directoryListFilterTextBox"
|
||||
deferredValidationTime={200}
|
||||
onChange={[Function]}
|
||||
@@ -1121,7 +1123,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"iconDisabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1147,7 +1149,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"menuIconDisabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1166,7 +1168,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 2,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
"outlineColor": "ButtonText",
|
||||
@@ -1245,7 +1247,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 2,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
"outlineColor": "ButtonText",
|
||||
@@ -1277,10 +1279,8 @@ exports[`test render renders with filters 1`] = `
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#f3f2f1",
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
@@ -1300,7 +1300,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"backgroundColor": "#f3f2f1",
|
||||
"color": "#201f1e",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"borderColor": "Highlight",
|
||||
"color": "Highlight",
|
||||
},
|
||||
@@ -1326,7 +1326,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"splitButtonContainer": Array [
|
||||
Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"border": "none",
|
||||
},
|
||||
},
|
||||
@@ -1344,7 +1344,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 3,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"border": "none",
|
||||
"bottom": -2,
|
||||
"left": -2,
|
||||
@@ -1373,20 +1373,19 @@ exports[`test render renders with filters 1`] = `
|
||||
"borderBottomRightRadius": "0",
|
||||
"borderTopRightRadius": "0",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "Window",
|
||||
"border": "1px solid WindowText",
|
||||
"borderRightWidth": "0",
|
||||
"color": "WindowText",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
".ms-Button--primary + .ms-Button": Object {
|
||||
"border": "none",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"border": "1px solid WindowText",
|
||||
"borderLeftWidth": "0",
|
||||
},
|
||||
@@ -1399,11 +1398,10 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -1413,11 +1411,10 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"backgroundColor": "WindowText",
|
||||
"color": "Window",
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -1427,11 +1424,12 @@ exports[`test render renders with filters 1`] = `
|
||||
"border": "none",
|
||||
"outline": "none",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"MsHighContrastAdjust": "none",
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
},
|
||||
"@media screen and (forced-colors: active)": Object {
|
||||
"forcedColorAdjust": "none",
|
||||
},
|
||||
},
|
||||
@@ -1443,7 +1441,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Highlight",
|
||||
"color": "Window",
|
||||
},
|
||||
@@ -1452,7 +1450,7 @@ exports[`test render renders with filters 1`] = `
|
||||
".ms-Button.is-disabled": Object {
|
||||
"color": "#a19f9d",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
@@ -1468,7 +1466,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "WindowText",
|
||||
},
|
||||
},
|
||||
@@ -1480,7 +1478,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "WindowText",
|
||||
},
|
||||
},
|
||||
@@ -1497,7 +1495,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"position": "absolute",
|
||||
"right": 31,
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1520,7 +1518,7 @@ exports[`test render renders with filters 1`] = `
|
||||
":hover": Object {
|
||||
"backgroundColor": "#edebe9",
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"color": "Highlight",
|
||||
},
|
||||
},
|
||||
@@ -1528,11 +1526,6 @@ exports[`test render renders with filters 1`] = `
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
".ms-Button-menuIcon": Object {
|
||||
"color": "WindowText",
|
||||
},
|
||||
},
|
||||
"border": "1px solid #8a8886",
|
||||
"borderBottomRightRadius": "2px",
|
||||
"borderLeft": "none",
|
||||
@@ -1578,7 +1571,7 @@ exports[`test render renders with filters 1`] = `
|
||||
"selectors": Object {
|
||||
".ms-Button--primary": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"borderColor": "GrayText",
|
||||
"color": "GrayText",
|
||||
@@ -1587,7 +1580,7 @@ exports[`test render renders with filters 1`] = `
|
||||
},
|
||||
".ms-Button-menuIcon": Object {
|
||||
"selectors": Object {
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"color": "GrayText",
|
||||
},
|
||||
},
|
||||
@@ -1595,7 +1588,7 @@ exports[`test render renders with filters 1`] = `
|
||||
":hover": Object {
|
||||
"cursor": "default",
|
||||
},
|
||||
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
|
||||
"@media screen and (-ms-high-contrast: active)": Object {
|
||||
"backgroundColor": "Window",
|
||||
"border": "1px solid GrayText",
|
||||
"color": "GrayText",
|
||||
@@ -1900,7 +1893,7 @@ exports[`test render renders with filters 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-disabled={true}
|
||||
className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
|
||||
className="ms-Button ms-Button--default is-disabled directoryListButton root-54"
|
||||
data-is-focusable={false}
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
@@ -1912,7 +1905,7 @@ exports[`test render renders with filters 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="ms-Button-flexContainer flexContainer-58"
|
||||
className="ms-Button-flexContainer flexContainer-55"
|
||||
data-automationid="splitbuttonprimary"
|
||||
>
|
||||
<div
|
||||
@@ -1943,6 +1936,7 @@ 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 * as UrlUtility from "../../../Common/UrlUtility";
|
||||
import UrlUtility from "../../../Common/UrlUtility";
|
||||
import Explorer from "../../Explorer";
|
||||
|
||||
export interface AddRepoComponentProps {
|
||||
|
||||
@@ -47,7 +47,6 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
|
||||
private static readonly cardItemGapBig = 10;
|
||||
private static readonly cardItemGapSmall = 8;
|
||||
private static readonly cardDeleteSpinnerHeight = 360;
|
||||
private static readonly smallTextLineHeight = 18;
|
||||
|
||||
constructor(props: GalleryCardComponentProps) {
|
||||
super(props);
|
||||
@@ -104,7 +103,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
|
||||
</Card.Item>
|
||||
|
||||
<Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
|
||||
<Text variant="small" nowrap styles={{ root: { height: GalleryCardComponent.smallTextLineHeight } }}>
|
||||
<Text variant="small" nowrap>
|
||||
{this.props.data.tags ? (
|
||||
this.props.data.tags.map((tag, index, array) => (
|
||||
<span key={tag}>
|
||||
@@ -130,7 +129,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
|
||||
{cardTitle}
|
||||
</Text>
|
||||
|
||||
<Text variant="small" styles={{ root: { height: GalleryCardComponent.smallTextLineHeight * 2 } }}>
|
||||
<Text variant="small" styles={{ root: { height: 36 } }}>
|
||||
{this.renderTruncatedDescription()}
|
||||
</Text>
|
||||
|
||||
|
||||
@@ -50,13 +50,6 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
>
|
||||
<Text
|
||||
nowrap={true}
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"height": 18,
|
||||
},
|
||||
}
|
||||
}
|
||||
variant="small"
|
||||
>
|
||||
<span
|
||||
@@ -107,7 +100,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="RedEye"
|
||||
styles={
|
||||
Object {
|
||||
@@ -131,7 +124,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="Download"
|
||||
styles={
|
||||
Object {
|
||||
@@ -155,7 +148,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
variant="tiny"
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="Heart"
|
||||
styles={
|
||||
Object {
|
||||
@@ -180,7 +173,7 @@ exports[`GalleryCardComponent renders 1`] = `
|
||||
}
|
||||
}
|
||||
>
|
||||
<Separator
|
||||
<Styled
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
|
||||
@@ -13,7 +13,7 @@ exports[`InfoComponent renders 1`] = `
|
||||
<div
|
||||
className="infoPanelMain"
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
className="infoIconMain"
|
||||
iconName="Help"
|
||||
styles={
|
||||
|
||||
@@ -68,14 +68,14 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
|
||||
Invalid Date
|
||||
</Text>
|
||||
<Text>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="RedEye"
|
||||
/>
|
||||
|
||||
0
|
||||
</Text>
|
||||
<Text>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="Download"
|
||||
/>
|
||||
0
|
||||
@@ -180,14 +180,14 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
|
||||
Invalid Date
|
||||
</Text>
|
||||
<Text>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="RedEye"
|
||||
/>
|
||||
|
||||
0
|
||||
</Text>
|
||||
<Text>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
iconName="Download"
|
||||
/>
|
||||
0
|
||||
|
||||
@@ -1,51 +1,49 @@
|
||||
import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
|
||||
import * as React from "react";
|
||||
import DiscardIcon from "../../../../images/discard.svg";
|
||||
import SaveIcon from "../../../../images/save-cosmos.svg";
|
||||
import { AuthType } from "../../../AuthType";
|
||||
import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
|
||||
import * as Constants from "../../../Common/Constants";
|
||||
import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
|
||||
import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
|
||||
import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
|
||||
import { updateOffer } from "../../../Common/dataAccess/updateOffer";
|
||||
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import DiscardIcon from "../../../../images/discard.svg";
|
||||
import SaveIcon from "../../../../images/save-cosmos.svg";
|
||||
import { traceStart, traceFailure, traceSuccess, trace } from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
|
||||
import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../../UserContext";
|
||||
import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
|
||||
import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
|
||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||
import Explorer from "../../Explorer";
|
||||
import { updateOffer } from "../../../Common/dataAccess/updateOffer";
|
||||
import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
|
||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||
import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
|
||||
import "./SettingsComponent.less";
|
||||
import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
|
||||
import {
|
||||
ConflictResolutionComponent,
|
||||
ConflictResolutionComponentProps,
|
||||
} from "./SettingsSubComponents/ConflictResolutionComponent";
|
||||
import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
|
||||
import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
|
||||
import {
|
||||
MongoIndexingPolicyComponent,
|
||||
MongoIndexingPolicyComponentProps,
|
||||
} from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
|
||||
import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
|
||||
import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
|
||||
import {
|
||||
AddMongoIndexProps,
|
||||
ChangeFeedPolicyState,
|
||||
GeospatialConfigType,
|
||||
getMongoNotification,
|
||||
getTabTitle,
|
||||
hasDatabaseSharedThroughput,
|
||||
GeospatialConfigType,
|
||||
TtlType,
|
||||
ChangeFeedPolicyState,
|
||||
SettingsV2TabTypes,
|
||||
getTabTitle,
|
||||
isDirty,
|
||||
AddMongoIndexProps,
|
||||
MongoIndexTypes,
|
||||
parseConflictResolutionMode,
|
||||
parseConflictResolutionProcedure,
|
||||
SettingsV2TabTypes,
|
||||
TtlType,
|
||||
getMongoNotification,
|
||||
} from "./SettingsUtils";
|
||||
import {
|
||||
ConflictResolutionComponent,
|
||||
ConflictResolutionComponentProps,
|
||||
} from "./SettingsSubComponents/ConflictResolutionComponent";
|
||||
import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
|
||||
import { Pivot, PivotItem, IPivotProps, IPivotItemProps } from "office-ui-fabric-react";
|
||||
import "./SettingsComponent.less";
|
||||
import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
|
||||
import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
|
||||
import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
|
||||
import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
|
||||
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
|
||||
|
||||
interface SettingsV2TabInfo {
|
||||
tab: SettingsV2TabTypes;
|
||||
@@ -139,7 +137,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
this.shouldShowIndexingPolicyEditor =
|
||||
this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
|
||||
|
||||
this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
|
||||
this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
|
||||
Constants.Features.enableChangeFeedPolicy
|
||||
);
|
||||
|
||||
// Mongo container with system partition key still treat as "Fixed"
|
||||
this.isFixedContainer =
|
||||
@@ -325,6 +325,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
? this.saveCollectionSettings(startKey)
|
||||
: this.saveDatabaseSettings(startKey));
|
||||
} catch (error) {
|
||||
this.container.isRefreshingExplorer(false);
|
||||
this.props.settingsTab.isExecutionError(true);
|
||||
console.error(error);
|
||||
traceFailure(
|
||||
@@ -698,6 +699,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
}
|
||||
}
|
||||
|
||||
this.container.isRefreshingExplorer(false);
|
||||
this.setBaseline();
|
||||
this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
|
||||
traceSuccess(
|
||||
@@ -860,6 +862,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
});
|
||||
}
|
||||
}
|
||||
this.container.isRefreshingExplorer(false);
|
||||
this.setBaseline();
|
||||
this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
|
||||
traceSuccess(
|
||||
@@ -874,18 +877,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
);
|
||||
};
|
||||
|
||||
public getMongoIndexTabContent = (
|
||||
mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps
|
||||
): JSX.Element => {
|
||||
if (userContext.authType === AuthType.AAD) {
|
||||
if (this.container.isEnableMongoCapabilityPresent()) {
|
||||
return <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
return mongoIndexingPolicyAADError;
|
||||
};
|
||||
|
||||
public render(): JSX.Element {
|
||||
const scaleComponentProps: ScaleComponentProps = {
|
||||
collection: this.collection,
|
||||
@@ -1003,11 +994,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />,
|
||||
});
|
||||
} else if (this.container.isPreferredApiMongoDB()) {
|
||||
const mongoIndexTabContext = this.getMongoIndexTabContent(mongoIndexingPolicyComponentProps);
|
||||
if (mongoIndexTabContext) {
|
||||
if (this.container.isEnableMongoCapabilityPresent()) {
|
||||
tabs.push({
|
||||
tab: SettingsV2TabTypes.IndexingPolicyTab,
|
||||
content: mongoIndexTabContext,
|
||||
content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />,
|
||||
});
|
||||
} else {
|
||||
tabs.push({
|
||||
tab: SettingsV2TabTypes.IndexingPolicyTab,
|
||||
content: mongoIndexingPolicyAADError,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
ITextStyles,
|
||||
IDetailsRowStyles,
|
||||
IStackStyles,
|
||||
IIconStyles,
|
||||
IDetailsListStyles,
|
||||
IDropdownStyles,
|
||||
ISeparatorStyles,
|
||||
@@ -115,6 +116,8 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
|
||||
childrenGap: 20,
|
||||
};
|
||||
|
||||
export const accordionIconStyles: IIconStyles = { root: { paddingTop: 7 } };
|
||||
|
||||
export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };
|
||||
|
||||
export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };
|
||||
|
||||
@@ -239,7 +239,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
|
||||
|
||||
return (
|
||||
<Stack {...createAndAddMongoIndexStackProps} styles={mediumWidthStackStyles}>
|
||||
<CollapsibleSectionComponent title="Current index(es)" isExpandedByDefault={true}>
|
||||
<CollapsibleSectionComponent title="Current index(es)">
|
||||
{
|
||||
<>
|
||||
<DetailsList
|
||||
@@ -266,7 +266,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
|
||||
|
||||
return (
|
||||
<Stack styles={mediumWidthStackStyles}>
|
||||
<CollapsibleSectionComponent title="Index(es) to be dropped" isExpandedByDefault={true}>
|
||||
<CollapsibleSectionComponent title="Index(es) to be dropped">
|
||||
{indexesToBeDropped.length > 0 && (
|
||||
<DetailsList
|
||||
styles={customDetailsListStyles}
|
||||
|
||||
@@ -42,7 +42,6 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
|
||||
}
|
||||
>
|
||||
<CollapsibleSectionComponent
|
||||
isExpandedByDefault={true}
|
||||
title="Current index(es)"
|
||||
>
|
||||
<StyledWithViewportComponent
|
||||
@@ -115,7 +114,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
|
||||
</Stack>
|
||||
</CollapsibleSectionComponent>
|
||||
</Stack>
|
||||
<Separator
|
||||
<Styled
|
||||
styles={
|
||||
Object {
|
||||
"root": Array [
|
||||
@@ -140,7 +139,6 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
|
||||
}
|
||||
>
|
||||
<CollapsibleSectionComponent
|
||||
isExpandedByDefault={true}
|
||||
title="Index(es) to be dropped"
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
@@ -1,24 +1,23 @@
|
||||
import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "office-ui-fabric-react";
|
||||
import * as React from "react";
|
||||
import * as Constants from "../../../../Common/Constants";
|
||||
import { configContext, Platform } from "../../../../ConfigContext";
|
||||
import * as DataModels from "../../../../Contracts/DataModels";
|
||||
import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
|
||||
import * as ViewModels from "../../../../Contracts/ViewModels";
|
||||
import * as DataModels from "../../../../Contracts/DataModels";
|
||||
import * as SharedConstants from "../../../../Shared/Constants";
|
||||
import { userContext } from "../../../../UserContext";
|
||||
import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
|
||||
import Explorer from "../../../Explorer";
|
||||
import {
|
||||
getTextFieldStyles,
|
||||
subComponentStackProps,
|
||||
titleAndInputStackProps,
|
||||
throughputUnit,
|
||||
getThroughputApplyLongDelayMessage,
|
||||
getThroughputApplyShortDelayMessage,
|
||||
subComponentStackProps,
|
||||
throughputUnit,
|
||||
titleAndInputStackProps,
|
||||
updateThroughputBeyondLimitWarningMessage,
|
||||
} from "../SettingsRenderUtils";
|
||||
import { hasDatabaseSharedThroughput } from "../SettingsUtils";
|
||||
import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
|
||||
import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
|
||||
import { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
|
||||
import { configContext, Platform } from "../../../../ConfigContext";
|
||||
|
||||
export interface ScaleComponentProps {
|
||||
collection: ViewModels.Collection;
|
||||
@@ -80,7 +79,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
|
||||
};
|
||||
|
||||
public getMaxRUs = (): number => {
|
||||
if (userContext.isTryCosmosDBSubscription) {
|
||||
if (this.props.container?.isTryCosmosDBSubscription()) {
|
||||
return Constants.TryCosmosExperience.maxRU;
|
||||
}
|
||||
|
||||
@@ -92,7 +91,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
|
||||
};
|
||||
|
||||
public getMinRUs = (): number => {
|
||||
if (userContext.isTryCosmosDBSubscription) {
|
||||
if (this.props.container?.isTryCosmosDBSubscription()) {
|
||||
return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
|
||||
}
|
||||
|
||||
@@ -173,6 +172,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
|
||||
databaseAccount={this.props.container.databaseAccount()}
|
||||
databaseName={this.databaseId}
|
||||
collectionName={this.collectionId}
|
||||
serverId={this.props.container.serverId()}
|
||||
throughput={this.props.throughput}
|
||||
throughputBaseline={this.props.throughputBaseline}
|
||||
onThroughputChange={this.props.onThroughputChange}
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
import * as DataModels from "../../../../../Contracts/DataModels";
|
||||
import {
|
||||
ThroughputInputAutoPilotV3Component,
|
||||
ThroughputInputAutoPilotV3Props,
|
||||
} from "./ThroughputInputAutoPilotV3Component";
|
||||
import * as DataModels from "../../../../../Contracts/DataModels";
|
||||
|
||||
describe("ThroughputInputAutoPilotV3Component", () => {
|
||||
const baseProps: ThroughputInputAutoPilotV3Props = {
|
||||
databaseAccount: {} as DataModels.DatabaseAccount,
|
||||
databaseName: "test",
|
||||
collectionName: "test",
|
||||
serverId: undefined,
|
||||
wasAutopilotOriginallySet: false,
|
||||
throughput: 100,
|
||||
throughputBaseline: 100,
|
||||
|
||||
@@ -1,52 +1,55 @@
|
||||
import React from "react";
|
||||
import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
|
||||
import {
|
||||
Checkbox,
|
||||
getTextFieldStyles,
|
||||
getToolTipContainer,
|
||||
noLeftPaddingCheckBoxStyle,
|
||||
titleAndInputStackProps,
|
||||
checkBoxAndInputStackProps,
|
||||
getChoiceGroupStyles,
|
||||
messageBarStyles,
|
||||
getEstimatedSpendingElement,
|
||||
getAutoPilotV3SpendElement,
|
||||
manualToAutoscaleDisclaimerElement,
|
||||
saveThroughputWarningMessage,
|
||||
ManualEstimatedSpendingDisplayProps,
|
||||
AutoscaleEstimatedSpendingDisplayProps,
|
||||
PriceBreakdown,
|
||||
getRuPriceBreakdown,
|
||||
transparentDetailsHeaderStyle,
|
||||
} from "../../SettingsRenderUtils";
|
||||
import {
|
||||
Text,
|
||||
TextField,
|
||||
ChoiceGroup,
|
||||
FontIcon,
|
||||
IChoiceGroupOption,
|
||||
IColumn,
|
||||
Checkbox,
|
||||
Stack,
|
||||
Label,
|
||||
Link,
|
||||
MessageBar,
|
||||
Stack,
|
||||
Text,
|
||||
TextField,
|
||||
FontIcon,
|
||||
IColumn,
|
||||
} from "office-ui-fabric-react";
|
||||
import React from "react";
|
||||
import * as DataModels from "../../../../../Contracts/DataModels";
|
||||
import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
|
||||
import * as SharedConstants from "../../../../../Shared/Constants";
|
||||
import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../../../../UserContext";
|
||||
import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
|
||||
import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
|
||||
import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
|
||||
import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
|
||||
import {
|
||||
AutoscaleEstimatedSpendingDisplayProps,
|
||||
checkBoxAndInputStackProps,
|
||||
getAutoPilotV3SpendElement,
|
||||
getChoiceGroupStyles,
|
||||
getEstimatedSpendingElement,
|
||||
getRuPriceBreakdown,
|
||||
getTextFieldStyles,
|
||||
getToolTipContainer,
|
||||
ManualEstimatedSpendingDisplayProps,
|
||||
manualToAutoscaleDisclaimerElement,
|
||||
messageBarStyles,
|
||||
noLeftPaddingCheckBoxStyle,
|
||||
PriceBreakdown,
|
||||
saveThroughputWarningMessage,
|
||||
titleAndInputStackProps,
|
||||
transparentDetailsHeaderStyle,
|
||||
} from "../../SettingsRenderUtils";
|
||||
import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
|
||||
import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
|
||||
import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
|
||||
import * as SharedConstants from "../../../../../Shared/Constants";
|
||||
import * as DataModels from "../../../../../Contracts/DataModels";
|
||||
import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
|
||||
import { userContext } from "../../../../../UserContext";
|
||||
import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
|
||||
import { usageInGB, calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
|
||||
import { Features } from "../../../../../Common/Constants";
|
||||
import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
|
||||
|
||||
import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
|
||||
|
||||
export interface ThroughputInputAutoPilotV3Props {
|
||||
databaseAccount: DataModels.DatabaseAccount;
|
||||
databaseName: string;
|
||||
collectionName: string;
|
||||
serverId: string;
|
||||
throughput: number;
|
||||
throughputBaseline: number;
|
||||
onThroughputChange: (newThroughput: number) => void;
|
||||
@@ -179,6 +182,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
|
||||
}
|
||||
|
||||
const isDirty: boolean = this.IsComponentDirty().isDiscardable;
|
||||
const serverId: string = this.props.serverId;
|
||||
const regions = account?.properties?.readLocations?.length || 1;
|
||||
const multimaster = account?.properties?.enableMultipleWriteLocations || false;
|
||||
|
||||
@@ -188,7 +192,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
|
||||
estimatedSpend = this.getEstimatedManualSpendElement(
|
||||
// if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
|
||||
this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
isDirty ? this.props.throughput : undefined
|
||||
@@ -196,7 +200,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
|
||||
} else {
|
||||
estimatedSpend = this.getEstimatedAutoscaleSpendElement(
|
||||
this.props.maxAutoPilotThroughputBaseline,
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
isDirty ? this.props.maxAutoPilotThroughput : undefined
|
||||
@@ -464,7 +468,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
|
||||
const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
|
||||
const oneTBinKB = 1000000000;
|
||||
const minRUperGB = 10;
|
||||
const featureFlagEnabled = userContext.features.showMinRUSurvey;
|
||||
const featureFlagEnabled = window.dataExplorer?.isFeatureEnabled(Features.showMinRUSurvey);
|
||||
const collectionIsEligible =
|
||||
userContext.subscriptionType !== SubscriptionType.Internal &&
|
||||
this.props.usageSizeInKB > oneTBinKB &&
|
||||
|
||||
@@ -41,7 +41,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
|
||||
}
|
||||
}
|
||||
>
|
||||
<Icon
|
||||
<StyledIconBase
|
||||
ariaLabel="Info"
|
||||
iconName="Info"
|
||||
styles={
|
||||
|
||||
@@ -895,6 +895,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"features": [Function],
|
||||
"flight": [Function],
|
||||
"graphStylingPane": GraphStylingPane {
|
||||
"container": [Circular],
|
||||
@@ -919,6 +920,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"hasStorageAnalyticsAfecFeature": [Function],
|
||||
"hasWriteAccess": [Function],
|
||||
"isAccountReady": [Function],
|
||||
"isAuthWithResourceToken": [Function],
|
||||
"isAutoscaleDefaultEnabled": [Function],
|
||||
"isCopyNotebookPaneEnabled": [Function],
|
||||
"isEnableMongoCapabilityPresent": [Function],
|
||||
@@ -935,6 +937,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isPreferredApiMongoDB": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isPublishNotebookPaneEnabled": [Function],
|
||||
"isRefreshingExplorer": [Function],
|
||||
"isResourceTokenCollectionNodeSelected": [Function],
|
||||
"isRightPanelV2Enabled": [Function],
|
||||
"isSchemaEnabled": [Function],
|
||||
@@ -943,6 +946,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isSparkEnabledForAccount": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTabsContentExpanded": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"loadQueryPane": LoadQueryPane {
|
||||
"container": [Circular],
|
||||
"files": [Function],
|
||||
@@ -982,6 +986,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"onSwitchToConnectionString": [Function],
|
||||
"openDialog": undefined,
|
||||
"openSidePanel": undefined,
|
||||
"params": undefined,
|
||||
"provideFeedbackEmail": [Function],
|
||||
"queriesClient": QueriesClient {
|
||||
"container": [Circular],
|
||||
@@ -1014,26 +1019,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"resourceTokenCollectionId": [Function],
|
||||
"resourceTokenDatabaseId": [Function],
|
||||
"resourceTokenPartitionKey": [Function],
|
||||
"resourceTree": ResourceTreeAdapter {
|
||||
"container": [Circular],
|
||||
"copyNotebook": [Function],
|
||||
"databaseCollectionIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"koSubsCollectionIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"koSubsDatabaseIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"parameters": [Function],
|
||||
},
|
||||
"resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
|
||||
"container": [Circular],
|
||||
"parameters": [Function],
|
||||
@@ -1056,6 +1041,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"serverId": [Function],
|
||||
"setInProgressConsoleDataIdToBeDeleted": undefined,
|
||||
"setIsNotificationConsoleExpanded": undefined,
|
||||
"setNotificationConsoleData": undefined,
|
||||
@@ -2091,6 +2077,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"features": [Function],
|
||||
"flight": [Function],
|
||||
"graphStylingPane": GraphStylingPane {
|
||||
"container": [Circular],
|
||||
@@ -2115,6 +2102,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"hasStorageAnalyticsAfecFeature": [Function],
|
||||
"hasWriteAccess": [Function],
|
||||
"isAccountReady": [Function],
|
||||
"isAuthWithResourceToken": [Function],
|
||||
"isAutoscaleDefaultEnabled": [Function],
|
||||
"isCopyNotebookPaneEnabled": [Function],
|
||||
"isEnableMongoCapabilityPresent": [Function],
|
||||
@@ -2131,6 +2119,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isPreferredApiMongoDB": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isPublishNotebookPaneEnabled": [Function],
|
||||
"isRefreshingExplorer": [Function],
|
||||
"isResourceTokenCollectionNodeSelected": [Function],
|
||||
"isRightPanelV2Enabled": [Function],
|
||||
"isSchemaEnabled": [Function],
|
||||
@@ -2139,6 +2128,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isSparkEnabledForAccount": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTabsContentExpanded": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"loadQueryPane": LoadQueryPane {
|
||||
"container": [Circular],
|
||||
"files": [Function],
|
||||
@@ -2178,6 +2168,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"onSwitchToConnectionString": [Function],
|
||||
"openDialog": undefined,
|
||||
"openSidePanel": undefined,
|
||||
"params": undefined,
|
||||
"provideFeedbackEmail": [Function],
|
||||
"queriesClient": QueriesClient {
|
||||
"container": [Circular],
|
||||
@@ -2210,26 +2201,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"resourceTokenCollectionId": [Function],
|
||||
"resourceTokenDatabaseId": [Function],
|
||||
"resourceTokenPartitionKey": [Function],
|
||||
"resourceTree": ResourceTreeAdapter {
|
||||
"container": [Circular],
|
||||
"copyNotebook": [Function],
|
||||
"databaseCollectionIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"koSubsCollectionIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"koSubsDatabaseIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"parameters": [Function],
|
||||
},
|
||||
"resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
|
||||
"container": [Circular],
|
||||
"parameters": [Function],
|
||||
@@ -2252,6 +2223,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"serverId": [Function],
|
||||
"setInProgressConsoleDataIdToBeDeleted": undefined,
|
||||
"setIsNotificationConsoleExpanded": undefined,
|
||||
"setNotificationConsoleData": undefined,
|
||||
@@ -3300,6 +3272,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"features": [Function],
|
||||
"flight": [Function],
|
||||
"graphStylingPane": GraphStylingPane {
|
||||
"container": [Circular],
|
||||
@@ -3324,6 +3297,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"hasStorageAnalyticsAfecFeature": [Function],
|
||||
"hasWriteAccess": [Function],
|
||||
"isAccountReady": [Function],
|
||||
"isAuthWithResourceToken": [Function],
|
||||
"isAutoscaleDefaultEnabled": [Function],
|
||||
"isCopyNotebookPaneEnabled": [Function],
|
||||
"isEnableMongoCapabilityPresent": [Function],
|
||||
@@ -3340,6 +3314,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isPreferredApiMongoDB": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isPublishNotebookPaneEnabled": [Function],
|
||||
"isRefreshingExplorer": [Function],
|
||||
"isResourceTokenCollectionNodeSelected": [Function],
|
||||
"isRightPanelV2Enabled": [Function],
|
||||
"isSchemaEnabled": [Function],
|
||||
@@ -3348,6 +3323,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isSparkEnabledForAccount": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTabsContentExpanded": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"loadQueryPane": LoadQueryPane {
|
||||
"container": [Circular],
|
||||
"files": [Function],
|
||||
@@ -3387,6 +3363,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"onSwitchToConnectionString": [Function],
|
||||
"openDialog": undefined,
|
||||
"openSidePanel": undefined,
|
||||
"params": undefined,
|
||||
"provideFeedbackEmail": [Function],
|
||||
"queriesClient": QueriesClient {
|
||||
"container": [Circular],
|
||||
@@ -3419,26 +3396,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"resourceTokenCollectionId": [Function],
|
||||
"resourceTokenDatabaseId": [Function],
|
||||
"resourceTokenPartitionKey": [Function],
|
||||
"resourceTree": ResourceTreeAdapter {
|
||||
"container": [Circular],
|
||||
"copyNotebook": [Function],
|
||||
"databaseCollectionIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"koSubsCollectionIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"koSubsDatabaseIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"parameters": [Function],
|
||||
},
|
||||
"resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
|
||||
"container": [Circular],
|
||||
"parameters": [Function],
|
||||
@@ -3461,6 +3418,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"serverId": [Function],
|
||||
"setInProgressConsoleDataIdToBeDeleted": undefined,
|
||||
"setIsNotificationConsoleExpanded": undefined,
|
||||
"setNotificationConsoleData": undefined,
|
||||
@@ -4496,6 +4454,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"validPartitionKeyValue": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"features": [Function],
|
||||
"flight": [Function],
|
||||
"graphStylingPane": GraphStylingPane {
|
||||
"container": [Circular],
|
||||
@@ -4520,6 +4479,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"hasStorageAnalyticsAfecFeature": [Function],
|
||||
"hasWriteAccess": [Function],
|
||||
"isAccountReady": [Function],
|
||||
"isAuthWithResourceToken": [Function],
|
||||
"isAutoscaleDefaultEnabled": [Function],
|
||||
"isCopyNotebookPaneEnabled": [Function],
|
||||
"isEnableMongoCapabilityPresent": [Function],
|
||||
@@ -4536,6 +4496,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isPreferredApiMongoDB": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isPublishNotebookPaneEnabled": [Function],
|
||||
"isRefreshingExplorer": [Function],
|
||||
"isResourceTokenCollectionNodeSelected": [Function],
|
||||
"isRightPanelV2Enabled": [Function],
|
||||
"isSchemaEnabled": [Function],
|
||||
@@ -4544,6 +4505,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"isSparkEnabledForAccount": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTabsContentExpanded": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"loadQueryPane": LoadQueryPane {
|
||||
"container": [Circular],
|
||||
"files": [Function],
|
||||
@@ -4583,6 +4545,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"onSwitchToConnectionString": [Function],
|
||||
"openDialog": undefined,
|
||||
"openSidePanel": undefined,
|
||||
"params": undefined,
|
||||
"provideFeedbackEmail": [Function],
|
||||
"queriesClient": QueriesClient {
|
||||
"container": [Circular],
|
||||
@@ -4615,26 +4578,6 @@ exports[`SettingsComponent renders 1`] = `
|
||||
"resourceTokenCollectionId": [Function],
|
||||
"resourceTokenDatabaseId": [Function],
|
||||
"resourceTokenPartitionKey": [Function],
|
||||
"resourceTree": ResourceTreeAdapter {
|
||||
"container": [Circular],
|
||||
"copyNotebook": [Function],
|
||||
"databaseCollectionIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"koSubsCollectionIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"koSubsDatabaseIdMap": ArrayHashMap {
|
||||
"store": HashMap {
|
||||
"container": Object {},
|
||||
},
|
||||
},
|
||||
"parameters": [Function],
|
||||
},
|
||||
"resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
|
||||
"container": [Circular],
|
||||
"parameters": [Function],
|
||||
@@ -4657,6 +4600,7 @@ exports[`SettingsComponent renders 1`] = `
|
||||
},
|
||||
"selectedDatabaseId": [Function],
|
||||
"selectedNode": [Function],
|
||||
"serverId": [Function],
|
||||
"setInProgressConsoleDataIdToBeDeleted": undefined,
|
||||
"setIsNotificationConsoleExpanded": undefined,
|
||||
"setNotificationConsoleData": undefined,
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import { TFunction } from "i18next";
|
||||
import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
|
||||
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
|
||||
import * as React from "react";
|
||||
import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
|
||||
import { Slider } from "office-ui-fabric-react/lib/Slider";
|
||||
import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
|
||||
import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
|
||||
import { Text } from "office-ui-fabric-react/lib/Text";
|
||||
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
|
||||
import { TextField } from "office-ui-fabric-react/lib/TextField";
|
||||
import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
|
||||
import * as React from "react";
|
||||
import { Text } from "office-ui-fabric-react/lib/Text";
|
||||
import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
|
||||
import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
|
||||
import * as InputUtils from "./InputUtils";
|
||||
import "./SmartUiComponent.less";
|
||||
import {
|
||||
ChoiceItem,
|
||||
Description,
|
||||
@@ -18,9 +19,8 @@ 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,12 +138,11 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
);
|
||||
}
|
||||
|
||||
private renderTextInput(input: StringInput, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
private renderTextInput(input: StringInput, labelId: string): JSX.Element {
|
||||
const value = this.props.currentValues.get(input.dataFieldName)?.value as string;
|
||||
const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
|
||||
return (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<div className="stringInputContainer">
|
||||
<TextField
|
||||
id={`${input.dataFieldName}-textField-input`}
|
||||
aria-labelledby={labelId}
|
||||
@@ -156,32 +155,25 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
root: { width: 400 },
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private renderDescription(input: DescriptionDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
private renderDescription(input: DescriptionDisplay, labelId: string): JSX.Element {
|
||||
const dataFieldName = input.dataFieldName;
|
||||
const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
|
||||
if (!description) {
|
||||
if (!input.isDynamicDescription) {
|
||||
return this.renderError("Description is not provided.");
|
||||
}
|
||||
// If input is a dynamic description and description is not available, empty element is rendered
|
||||
return <></>;
|
||||
return this.renderError("Description is not provided.");
|
||||
}
|
||||
const descriptionElement = (
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
|
||||
if (description.type === DescriptionType.Text) {
|
||||
@@ -235,7 +227,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
return undefined;
|
||||
};
|
||||
|
||||
private renderNumberInput(input: NumberInput, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
private renderNumberInput(input: NumberInput, labelId: string): JSX.Element {
|
||||
const { labelTKey, min, max, dataFieldName, step } = input;
|
||||
const props = {
|
||||
min: min,
|
||||
@@ -248,72 +240,61 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
|
||||
if (input.uiType === NumberUiType.Spinner) {
|
||||
return (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
|
||||
<SpinButton
|
||||
{...props}
|
||||
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 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>
|
||||
);
|
||||
} else if (input.uiType === NumberUiType.Slider) {
|
||||
return (
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
} else {
|
||||
return <>Unsupported number UI type {input.uiType}</>;
|
||||
}
|
||||
}
|
||||
|
||||
private renderBooleanInput(input: BooleanInput, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
private renderBooleanInput(input: BooleanInput, labelId: string): JSX.Element {
|
||||
const value = this.props.currentValues.get(input.dataFieldName)?.value as boolean;
|
||||
const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
|
||||
return (
|
||||
<Stack>
|
||||
{labelElement}
|
||||
<Toggle
|
||||
id={`${input.dataFieldName}-toggle-input`}
|
||||
aria-labelledby={labelId}
|
||||
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>
|
||||
<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 } }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
private renderChoiceInput(input: ChoiceInput, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
private renderChoiceInput(input: ChoiceInput, labelId: string): 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;
|
||||
@@ -322,26 +303,22 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
selectedKey = "";
|
||||
}
|
||||
return (
|
||||
<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>
|
||||
<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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -349,7 +326,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
|
||||
}
|
||||
|
||||
private renderElement(input: AnyDisplay, info: Info): JSX.Element {
|
||||
private renderDisplayWithInfoBubble(input: AnyDisplay, info: Info): JSX.Element {
|
||||
if (input.errorMessage) {
|
||||
return this.renderError(input.errorMessage);
|
||||
}
|
||||
@@ -358,31 +335,34 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
return <></>;
|
||||
}
|
||||
const labelId = `${input.dataFieldName}-label`;
|
||||
const labelElement: JSX.Element = input.labelTKey && (
|
||||
<Label id={labelId}>
|
||||
<ToolTipLabelComponent
|
||||
label={this.props.getTranslation(input.labelTKey)}
|
||||
toolTipElement={this.renderInfo(info)}
|
||||
/>
|
||||
</Label>
|
||||
return (
|
||||
<Stack>
|
||||
{input.labelTKey && (
|
||||
<Label id={labelId}>
|
||||
<ToolTipLabelComponent
|
||||
label={this.props.getTranslation(input.labelTKey)}
|
||||
toolTipElement={this.renderInfo(info)}
|
||||
/>
|
||||
</Label>
|
||||
)}
|
||||
{this.renderDisplay(input, labelId)}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
return <Stack>{this.renderControl(input, labelId, labelElement)}</Stack>;
|
||||
}
|
||||
|
||||
private renderControl(input: AnyDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
|
||||
private renderDisplay(input: AnyDisplay, labelId: string): JSX.Element {
|
||||
switch (input.type) {
|
||||
case "string":
|
||||
if ("description" in input || "isDynamicDescription" in input) {
|
||||
return this.renderDescription(input as DescriptionDisplay, labelId, labelElement);
|
||||
return this.renderDescription(input as DescriptionDisplay, labelId);
|
||||
}
|
||||
return this.renderTextInput(input as StringInput, labelId, labelElement);
|
||||
return this.renderTextInput(input as StringInput, labelId);
|
||||
case "number":
|
||||
return this.renderNumberInput(input as NumberInput, labelId, labelElement);
|
||||
return this.renderNumberInput(input as NumberInput, labelId);
|
||||
case "boolean":
|
||||
return this.renderBooleanInput(input as BooleanInput, labelId, labelElement);
|
||||
return this.renderBooleanInput(input as BooleanInput, labelId);
|
||||
case "object":
|
||||
return this.renderChoiceInput(input as ChoiceInput, labelId, labelElement);
|
||||
return this.renderChoiceInput(input as ChoiceInput, labelId);
|
||||
default:
|
||||
throw new Error(`Unknown input type: ${input.type}`);
|
||||
}
|
||||
@@ -393,7 +373,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
|
||||
|
||||
return (
|
||||
<Stack tokens={containerStackTokens} className="widgetRendererContainer">
|
||||
<Stack.Item>{node.input && this.renderElement(node.input, node.info as Info)}</Stack.Item>
|
||||
<Stack.Item>{node.input && this.renderDisplayWithInfoBubble(node.input, node.info as Info)}</Stack.Item>
|
||||
{node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -23,21 +23,19 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
id="description-text-display"
|
||||
<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"
|
||||
>
|
||||
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>
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -55,53 +53,51 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (input)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<Stack
|
||||
styles={
|
||||
<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={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"iconName": "ChevronDownSmall",
|
||||
}
|
||||
}
|
||||
tokens={
|
||||
disabled={true}
|
||||
id="throughput-spinner-input"
|
||||
incrementButtonIcon={
|
||||
Object {
|
||||
"childrenGap": 2,
|
||||
"iconName": "ChevronUpSmall",
|
||||
}
|
||||
}
|
||||
>
|
||||
<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>
|
||||
label=""
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
onDecrement={[Function]}
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
@@ -120,39 +116,37 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (Slider)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
disabled={true}
|
||||
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,
|
||||
},
|
||||
}
|
||||
<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>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -191,14 +185,16 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<StyledTextFieldBase
|
||||
aria-labelledby="containerId-label"
|
||||
disabled={true}
|
||||
@@ -214,7 +210,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -232,31 +228,29 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledToggleBase
|
||||
aria-labelledby="analyticalStore-label"
|
||||
checked={false}
|
||||
disabled={true}
|
||||
id="analyticalStore-toggle-input"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</Stack>
|
||||
</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>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -274,51 +268,48 @@ exports[`SmartUiComponent disable all inputs 1`] = `
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<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,
|
||||
},
|
||||
}
|
||||
}
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Database"
|
||||
/>
|
||||
</Stack>
|
||||
</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>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -349,21 +340,19 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<Text
|
||||
aria-labelledby="description-label"
|
||||
id="description-text-display"
|
||||
<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"
|
||||
>
|
||||
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>
|
||||
Click here for more information.
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -381,53 +370,51 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (input)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<Stack
|
||||
styles={
|
||||
<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={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
"iconName": "ChevronDownSmall",
|
||||
}
|
||||
}
|
||||
tokens={
|
||||
disabled={false}
|
||||
id="throughput-spinner-input"
|
||||
incrementButtonIcon={
|
||||
Object {
|
||||
"childrenGap": 2,
|
||||
"iconName": "ChevronUpSmall",
|
||||
}
|
||||
}
|
||||
>
|
||||
<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>
|
||||
label=""
|
||||
labelPosition={0}
|
||||
max={500}
|
||||
min={400}
|
||||
onDecrement={[Function]}
|
||||
onIncrement={[Function]}
|
||||
onValidate={[Function]}
|
||||
step={10}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
@@ -446,38 +433,36 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="throughput2-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Throughput (Slider)"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
id="throughput2-slider-input"
|
||||
>
|
||||
<StyledSliderBase
|
||||
ariaLabel="Throughput (Slider)"
|
||||
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,
|
||||
},
|
||||
}
|
||||
<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>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -516,14 +501,16 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledLabelBase
|
||||
id="containerId-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Container id"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<div
|
||||
className="stringInputContainer"
|
||||
>
|
||||
<StyledTextFieldBase
|
||||
aria-labelledby="containerId-label"
|
||||
id="containerId-textField-input"
|
||||
@@ -538,7 +525,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -556,30 +543,28 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledToggleBase
|
||||
aria-labelledby="analyticalStore-label"
|
||||
checked={false}
|
||||
id="analyticalStore-toggle-input"
|
||||
offText="Disabled"
|
||||
onChange={[Function]}
|
||||
onText="Enabled"
|
||||
styles={
|
||||
Object {
|
||||
"root": Object {
|
||||
"width": 400,
|
||||
},
|
||||
}
|
||||
}
|
||||
<StyledLabelBase
|
||||
id="analyticalStore-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Analytical Store"
|
||||
/>
|
||||
</Stack>
|
||||
</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>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
@@ -597,50 +582,47 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
|
||||
>
|
||||
<StackItem>
|
||||
<Stack>
|
||||
<Stack>
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Database"
|
||||
/>
|
||||
</StyledLabelBase>
|
||||
<StyledWithResponsiveMode
|
||||
aria-labelledby="database-label"
|
||||
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,
|
||||
},
|
||||
}
|
||||
}
|
||||
<StyledLabelBase
|
||||
id="database-label"
|
||||
>
|
||||
<ToolTipLabelComponent
|
||||
label="Database"
|
||||
/>
|
||||
</Stack>
|
||||
</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>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
@import "../../../../less/Common/Constants";
|
||||
|
||||
.throughputInputContainer {
|
||||
.throughputInputRadioBtn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.throughputInputRadioBtnLabel {
|
||||
font-size: @mediumFontSize;
|
||||
padding: 0 @LargeSpace 0 @SmallSpace;
|
||||
}
|
||||
|
||||
.throughputInputSpacing {
|
||||
margin-bottom: @SmallSpace;
|
||||
|
||||
& > * {
|
||||
margin-bottom: @SmallSpace;
|
||||
}
|
||||
}
|
||||
@@ -1,302 +0,0 @@
|
||||
import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "office-ui-fabric-react";
|
||||
import React from "react";
|
||||
import * as Constants from "../../../Common/Constants";
|
||||
import * as SharedConstants from "../../../Shared/Constants";
|
||||
import { userContext } from "../../../UserContext";
|
||||
import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
|
||||
import * as PricingUtils from "../../../Utils/PricingUtils";
|
||||
|
||||
export interface ThroughputInputProps {
|
||||
isDatabase: boolean;
|
||||
showFreeTierExceedThroughputTooltip: boolean;
|
||||
setThroughputValue: (throughput: number) => void;
|
||||
setIsAutoscale: (isAutoscale: boolean) => void;
|
||||
onCostAcknowledgeChange: (isAcknowledged: boolean) => void;
|
||||
}
|
||||
|
||||
export interface ThroughputInputState {
|
||||
isAutoscaleSelected: boolean;
|
||||
throughput: number;
|
||||
isCostAcknowledged: boolean;
|
||||
}
|
||||
|
||||
export class ThroughputInput extends React.Component<ThroughputInputProps, ThroughputInputState> {
|
||||
constructor(props: ThroughputInputProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isAutoscaleSelected: true,
|
||||
throughput: AutoPilotUtils.minAutoPilotThroughput,
|
||||
isCostAcknowledged: false,
|
||||
};
|
||||
|
||||
this.props.setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
|
||||
this.props.setIsAutoscale(true);
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
return (
|
||||
<div className="throughputInputContainer throughputInputSpacing">
|
||||
<Stack horizontal>
|
||||
<span className="mandatoryStar">* </span>
|
||||
<Text variant="small" style={{ lineHeight: "20px" }}>
|
||||
{this.getThroughputLabelText()}
|
||||
</Text>
|
||||
<TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={PricingUtils.getRuToolTipText()}>
|
||||
<Icon iconName="InfoSolid" className="panelInfoIcon" />
|
||||
</TooltipHost>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal verticalAlign="center">
|
||||
<input
|
||||
className="throughputInputRadioBtn"
|
||||
aria-label="Autoscale mode"
|
||||
checked={this.state.isAutoscaleSelected}
|
||||
type="radio"
|
||||
role="radio"
|
||||
tabIndex={0}
|
||||
onChange={this.onAutoscaleRadioBtnChange.bind(this)}
|
||||
/>
|
||||
<span className="throughputInputRadioBtnLabel">Autoscale</span>
|
||||
|
||||
<input
|
||||
className="throughputInputRadioBtn"
|
||||
aria-label="Manual mode"
|
||||
checked={!this.state.isAutoscaleSelected}
|
||||
type="radio"
|
||||
role="radio"
|
||||
tabIndex={0}
|
||||
onChange={this.onManualRadioBtnChange.bind(this)}
|
||||
/>
|
||||
<span className="throughputInputRadioBtnLabel">Manual</span>
|
||||
</Stack>
|
||||
|
||||
{this.state.isAutoscaleSelected && (
|
||||
<Stack className="throughputInputSpacing">
|
||||
<Text variant="small">
|
||||
Provision maximum RU/s required by this resource. Estimate your required RU/s with
|
||||
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
|
||||
capacity calculator
|
||||
</Link>
|
||||
.
|
||||
</Text>
|
||||
|
||||
<Stack horizontal>
|
||||
<Text variant="small" style={{ lineHeight: "20px" }}>
|
||||
Max RU/s
|
||||
</Text>
|
||||
<TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={this.getAutoScaleTooltip()}>
|
||||
<Icon iconName="InfoSolid" className="panelInfoIcon" />
|
||||
</TooltipHost>
|
||||
</Stack>
|
||||
|
||||
<TextField
|
||||
type="number"
|
||||
styles={{
|
||||
fieldGroup: { width: 300, height: 27 },
|
||||
field: { fontSize: 12 },
|
||||
}}
|
||||
onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
|
||||
step={AutoPilotUtils.autoPilotIncrementStep}
|
||||
min={AutoPilotUtils.minAutoPilotThroughput}
|
||||
value={this.state.throughput.toString()}
|
||||
aria-label="Max request units per second"
|
||||
required={true}
|
||||
/>
|
||||
|
||||
<Text variant="small">
|
||||
Your {this.props.isDatabase ? "database" : "container"} throughput will automatically scale from{" "}
|
||||
<b>
|
||||
{AutoPilotUtils.getMinRUsBasedOnUserInput(this.state.throughput)} RU/s (10% of max RU/s) -{" "}
|
||||
{this.state.throughput} RU/s
|
||||
</b>{" "}
|
||||
based on usage.
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{!this.state.isAutoscaleSelected && (
|
||||
<Stack className="throughputInputSpacing">
|
||||
<Text variant="small">
|
||||
Estimate your required RU/s with
|
||||
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
|
||||
capacity calculator
|
||||
</Link>
|
||||
.
|
||||
</Text>
|
||||
|
||||
<TooltipHost
|
||||
directionalHint={DirectionalHint.topLeftEdge}
|
||||
content={
|
||||
this.props.showFreeTierExceedThroughputTooltip &&
|
||||
this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs400
|
||||
? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<TextField
|
||||
type="number"
|
||||
styles={{
|
||||
fieldGroup: { width: 300, height: 27 },
|
||||
field: { fontSize: 12 },
|
||||
}}
|
||||
onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
|
||||
step={100}
|
||||
min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
|
||||
max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
|
||||
value={this.state.throughput.toString()}
|
||||
aria-label="Max request units per second"
|
||||
required={true}
|
||||
/>
|
||||
</TooltipHost>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<CostEstimateText requestUnits={this.state.throughput} isAutoscale={this.state.isAutoscaleSelected} />
|
||||
|
||||
{this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && (
|
||||
<Stack horizontal verticalAlign="start">
|
||||
<Checkbox
|
||||
checked={this.state.isCostAcknowledged}
|
||||
styles={{
|
||||
checkbox: { width: 12, height: 12 },
|
||||
label: { padding: 0, margin: "4px 4px 0 0" },
|
||||
}}
|
||||
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
|
||||
this.setState({ isCostAcknowledged: isChecked });
|
||||
this.props.onCostAcknowledgeChange(isChecked);
|
||||
}}
|
||||
/>
|
||||
<Text variant="small" style={{ lineHeight: "20px" }}>
|
||||
{this.getCostAcknowledgeText()}
|
||||
</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private getThroughputLabelText(): string {
|
||||
if (this.state.isAutoscaleSelected) {
|
||||
return AutoPilotUtils.getAutoPilotHeaderText();
|
||||
}
|
||||
|
||||
const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
|
||||
const maxRU: string = userContext.isTryCosmosDBSubscription
|
||||
? Constants.TryCosmosExperience.maxRU.toLocaleString()
|
||||
: "unlimited";
|
||||
return this.state.isAutoscaleSelected
|
||||
? AutoPilotUtils.getAutoPilotHeaderText()
|
||||
: `Throughput (${minRU} - ${maxRU} RU/s)`;
|
||||
}
|
||||
|
||||
private onThroughputValueChange(newInput: string): void {
|
||||
const newThroughput = parseInt(newInput);
|
||||
this.setState({ throughput: newThroughput });
|
||||
this.props.setThroughputValue(newThroughput);
|
||||
}
|
||||
|
||||
private getAutoScaleTooltip(): string {
|
||||
return `After the first ${AutoPilotUtils.getStorageBasedOnUserInput(
|
||||
this.state.throughput
|
||||
)} GB of data stored, the max
|
||||
RU/s will be automatically upgraded based on the new storage value.`;
|
||||
}
|
||||
|
||||
private getCostAcknowledgeText(): string {
|
||||
const databaseAccount = userContext.databaseAccount;
|
||||
if (!databaseAccount || !databaseAccount.properties) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
|
||||
const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
|
||||
|
||||
return PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.state.throughput,
|
||||
userContext.portalEnv,
|
||||
numberOfRegions,
|
||||
multimasterEnabled,
|
||||
this.state.isAutoscaleSelected
|
||||
);
|
||||
}
|
||||
|
||||
private onAutoscaleRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
||||
if (event.target.checked && !this.state.isAutoscaleSelected) {
|
||||
this.setState({ isAutoscaleSelected: true, throughput: AutoPilotUtils.minAutoPilotThroughput });
|
||||
this.props.setIsAutoscale(true);
|
||||
}
|
||||
}
|
||||
|
||||
private onManualRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
||||
if (event.target.checked && this.state.isAutoscaleSelected) {
|
||||
this.setState({
|
||||
isAutoscaleSelected: false,
|
||||
throughput: SharedConstants.CollectionCreation.DefaultCollectionRUs400,
|
||||
});
|
||||
this.props.setIsAutoscale(false);
|
||||
this.props.setThroughputValue(SharedConstants.CollectionCreation.DefaultCollectionRUs400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface CostEstimateTextProps {
|
||||
requestUnits: number;
|
||||
isAutoscale: boolean;
|
||||
}
|
||||
|
||||
const CostEstimateText: React.FunctionComponent<CostEstimateTextProps> = (props: CostEstimateTextProps) => {
|
||||
const { requestUnits, isAutoscale } = props;
|
||||
const databaseAccount = userContext.databaseAccount;
|
||||
if (!databaseAccount || !databaseAccount.properties) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const serverId: string = userContext.portalEnv;
|
||||
const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
|
||||
const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
|
||||
const hourlyPrice: number = PricingUtils.computeRUUsagePriceHourly({
|
||||
serverId,
|
||||
requestUnits,
|
||||
numberOfRegions,
|
||||
multimasterEnabled,
|
||||
isAutoscale,
|
||||
});
|
||||
const dailyPrice: number = hourlyPrice * 24;
|
||||
const monthlyPrice: number = hourlyPrice * SharedConstants.hoursInAMonth;
|
||||
const currency: string = PricingUtils.getPriceCurrency(serverId);
|
||||
const currencySign: string = PricingUtils.getCurrencySign(serverId);
|
||||
const multiplier = PricingUtils.getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
|
||||
const pricePerRu = isAutoscale
|
||||
? PricingUtils.getAutoscalePricePerRu(serverId, multiplier) * multiplier
|
||||
: PricingUtils.getPricePerRu(serverId) * multiplier;
|
||||
|
||||
if (isAutoscale) {
|
||||
return (
|
||||
<Text variant="small">
|
||||
Estimated monthly cost ({currency}):{" "}
|
||||
<b>
|
||||
{currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice / 10)} -{" "}
|
||||
{currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)}{" "}
|
||||
</b>
|
||||
({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "}
|
||||
RU/s, {currencySign + pricePerRu}/RU)
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Text variant="small">
|
||||
Cost ({currency}):{" "}
|
||||
<b>
|
||||
{currencySign + PricingUtils.calculateEstimateNumber(hourlyPrice)} hourly /{" "}
|
||||
{currencySign + PricingUtils.calculateEstimateNumber(dailyPrice)} daily /{" "}
|
||||
{currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)} monthly{" "}
|
||||
</b>
|
||||
({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "}
|
||||
{currencySign + pricePerRu}/RU)
|
||||
<br />
|
||||
<em>{PricingUtils.estimatedCostDisclaimer}</em>
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
@@ -21,7 +21,7 @@ import * as DataModels from "../Contracts/DataModels";
|
||||
import { MessageTypes } from "../Contracts/ExplorerContracts";
|
||||
import { SubscriptionType } from "../Contracts/SubscriptionType";
|
||||
import * as ViewModels from "../Contracts/ViewModels";
|
||||
import { IGalleryItem } from "../Juno/JunoClient";
|
||||
import { IGalleryItem, IPinnedRepo } from "../Juno/JunoClient";
|
||||
import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
|
||||
import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
|
||||
import { RouteHandler } from "../RouteHandlers/RouteHandler";
|
||||
@@ -48,7 +48,6 @@ 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";
|
||||
@@ -78,7 +77,6 @@ import { TabsManager } from "./Tabs/TabsManager";
|
||||
import TerminalTab from "./Tabs/TerminalTab";
|
||||
import Database from "./Tree/Database";
|
||||
import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
|
||||
import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
|
||||
import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
|
||||
import StoredProcedure from "./Tree/StoredProcedure";
|
||||
import Trigger from "./Tree/Trigger";
|
||||
@@ -96,6 +94,10 @@ export interface ExplorerParams {
|
||||
closeSidePanel: () => void;
|
||||
closeDialog: () => void;
|
||||
openDialog: (props: DialogProps) => void;
|
||||
|
||||
onRefreshNotebookList: () => void;
|
||||
initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
|
||||
getMyNotebooksContentRoot: () => NotebookContentItem;
|
||||
}
|
||||
|
||||
export default class Explorer {
|
||||
@@ -164,6 +166,8 @@ 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;
|
||||
@@ -185,15 +189,20 @@ export default class Explorer {
|
||||
public selectedCollectionId: ko.Computed<string>;
|
||||
public isLeftPaneExpanded: ko.Observable<boolean>;
|
||||
public selectedNode: ko.Observable<ViewModels.TreeNode>;
|
||||
private resourceTree: ResourceTreeAdapter;
|
||||
/**
|
||||
* @deprecated
|
||||
* Use a local loading state and spinner instead. Using a global isRefreshing state causes problems.
|
||||
* */
|
||||
public isRefreshingExplorer: ko.Observable<boolean>;
|
||||
|
||||
// Resource Token
|
||||
public resourceTokenDatabaseId: ko.Observable<string>;
|
||||
public resourceTokenCollectionId: ko.Observable<string>;
|
||||
public resourceTokenCollection: ko.Observable<ViewModels.CollectionBase>;
|
||||
public resourceTokenPartitionKey: ko.Observable<string>;
|
||||
public isAuthWithResourceToken: ko.Observable<boolean>;
|
||||
public isResourceTokenCollectionNodeSelected: ko.Computed<boolean>;
|
||||
public resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
|
||||
private resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
|
||||
|
||||
// Tabs
|
||||
public isTabsContentExpanded: ko.Observable<boolean>;
|
||||
@@ -271,7 +280,7 @@ export default class Explorer {
|
||||
|
||||
private static readonly MaxNbDatabasesToAutoExpand = 5;
|
||||
|
||||
constructor(params?: ExplorerParams) {
|
||||
constructor(public params?: ExplorerParams) {
|
||||
this.setIsNotificationConsoleExpanded = params?.setIsNotificationConsoleExpanded;
|
||||
this.setNotificationConsoleData = params?.setNotificationConsoleData;
|
||||
this.setInProgressConsoleDataIdToBeDeleted = params?.setInProgressConsoleDataIdToBeDeleted;
|
||||
@@ -294,6 +303,22 @@ 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>();
|
||||
@@ -314,9 +339,7 @@ export default class Explorer {
|
||||
this.isSynapseLinkUpdating = ko.observable<boolean>(false);
|
||||
this.isAccountReady.subscribe(async (isAccountReady: boolean) => {
|
||||
if (isAccountReady) {
|
||||
userContext.authType === AuthType.ResourceToken
|
||||
? this.refreshDatabaseForResourceToken()
|
||||
: this.refreshAllDatabases(true);
|
||||
this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases(true);
|
||||
RouteHandler.getInstance().initHandler();
|
||||
this.notebookWorkspaceManager = new NotebookWorkspaceManager();
|
||||
this.arcadiaWorkspaces = ko.observableArray();
|
||||
@@ -327,9 +350,9 @@ export default class Explorer {
|
||||
Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
|
||||
async () => {
|
||||
this.isNotebookEnabled(
|
||||
userContext.authType !== AuthType.ResourceToken &&
|
||||
!this.isAuthWithResourceToken() &&
|
||||
((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
|
||||
userContext.features.enableNotebooks)
|
||||
this.isFeatureEnabled(Constants.Features.enableNotebooks))
|
||||
);
|
||||
|
||||
TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
|
||||
@@ -351,7 +374,7 @@ export default class Explorer {
|
||||
this.isSparkEnabledForAccount() &&
|
||||
this.arcadiaWorkspaces() &&
|
||||
this.arcadiaWorkspaces().length > 0) ||
|
||||
userContext.features.enableSpark
|
||||
this.isFeatureEnabled(Constants.Features.enableSpark)
|
||||
);
|
||||
if (this.isSparkEnabled()) {
|
||||
appInsights.trackEvent(
|
||||
@@ -375,20 +398,26 @@ export default class Explorer {
|
||||
});
|
||||
this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
|
||||
|
||||
this.features = ko.observable();
|
||||
this.serverId = ko.observable<string>();
|
||||
this.queriesClient = new QueriesClient(this);
|
||||
this.isTryCosmosDBSubscription = ko.observable<boolean>(false);
|
||||
|
||||
this.resourceTokenDatabaseId = ko.observable<string>();
|
||||
this.resourceTokenCollectionId = ko.observable<string>();
|
||||
this.resourceTokenCollection = ko.observable<ViewModels.CollectionBase>();
|
||||
this.resourceTokenPartitionKey = ko.observable<string>();
|
||||
this.isAuthWithResourceToken = ko.observable<boolean>(false);
|
||||
this.isGitHubPaneEnabled = ko.observable<boolean>(false);
|
||||
this.isMongoIndexingEnabled = ko.observable<boolean>(false);
|
||||
this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
|
||||
this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
|
||||
|
||||
this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
|
||||
this.canExceedMaximumValue = ko.computed<boolean>(() =>
|
||||
this.isFeatureEnabled(Constants.Features.canExceedMaximumValue)
|
||||
);
|
||||
|
||||
this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
|
||||
this.isSchemaEnabled = ko.computed<boolean>(() => this.isFeatureEnabled(Constants.Features.enableSchema));
|
||||
|
||||
this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);
|
||||
|
||||
@@ -468,7 +497,7 @@ export default class Explorer {
|
||||
});
|
||||
|
||||
this.isFixedCollectionWithSharedThroughputSupported = ko.computed(() => {
|
||||
if (userContext.features.enableFixedCollectionWithSharedThroughput) {
|
||||
if (this.isFeatureEnabled(Constants.Features.enableFixedCollectionWithSharedThroughput)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -527,7 +556,9 @@ export default class Explorer {
|
||||
() =>
|
||||
configContext.platform === Platform.Portal && !this.isRunningOnNationalCloud() && !this.isPreferredApiGraph()
|
||||
);
|
||||
this.isRightPanelV2Enabled = ko.computed<boolean>(() => userContext.features.enableRightPanelV2);
|
||||
this.isRightPanelV2Enabled = ko.computed<boolean>(() =>
|
||||
this.isFeatureEnabled(Constants.Features.enableRightPanelV2)
|
||||
);
|
||||
this.defaultExperience.subscribe((defaultExperience: string) => {
|
||||
if (
|
||||
defaultExperience &&
|
||||
@@ -849,7 +880,6 @@ export default class Explorer {
|
||||
this.notebookManager.initialize({
|
||||
container: this,
|
||||
notebookBasePath: this.notebookBasePath,
|
||||
resourceTree: this.resourceTree,
|
||||
refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
|
||||
refreshNotebookList: () => this.refreshNotebookList(),
|
||||
});
|
||||
@@ -864,7 +894,6 @@ export default class Explorer {
|
||||
|
||||
this.isSparkEnabled = ko.observable(false);
|
||||
this.isSparkEnabled.subscribe((isEnabled: boolean) => this.refreshCommandBarButtons());
|
||||
this.resourceTree = new ResourceTreeAdapter(this);
|
||||
this.resourceTreeForResourceToken = new ResourceTreeAdapterForResourceToken(this);
|
||||
this.notebookServerInfo = ko.observable<DataModels.NotebookWorkspaceConnectionInfo>({
|
||||
notebookServerEndpoint: undefined,
|
||||
@@ -878,29 +907,42 @@ export default class Explorer {
|
||||
});
|
||||
|
||||
// Override notebook server parameters from URL parameters
|
||||
if (userContext.features.notebookServerUrl && userContext.features.notebookServerToken) {
|
||||
this.notebookServerInfo({
|
||||
notebookServerEndpoint: userContext.features.notebookServerUrl,
|
||||
authToken: userContext.features.notebookServerToken,
|
||||
});
|
||||
}
|
||||
const featureSubcription = this.features.subscribe((features) => {
|
||||
const serverInfo = this.notebookServerInfo();
|
||||
if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
|
||||
serverInfo.notebookServerEndpoint = features[Constants.Features.notebookServerUrl];
|
||||
}
|
||||
|
||||
if (userContext.features.notebookBasePath) {
|
||||
this.notebookBasePath(userContext.features.notebookBasePath);
|
||||
}
|
||||
if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
|
||||
serverInfo.authToken = features[Constants.Features.notebookServerToken];
|
||||
}
|
||||
this.notebookServerInfo(serverInfo);
|
||||
this.notebookServerInfo.valueHasMutated();
|
||||
|
||||
if (userContext.features.livyEndpoint) {
|
||||
this.sparkClusterConnectionInfo({
|
||||
userName: undefined,
|
||||
password: undefined,
|
||||
endpoints: [
|
||||
{
|
||||
endpoint: userContext.features.livyEndpoint,
|
||||
kind: DataModels.SparkClusterEndpointKind.Livy,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
if (this.isFeatureEnabled(Constants.Features.notebookBasePath)) {
|
||||
this.notebookBasePath(features[Constants.Features.notebookBasePath]);
|
||||
}
|
||||
|
||||
if (this.isFeatureEnabled(Constants.Features.livyEndpoint)) {
|
||||
this.sparkClusterConnectionInfo({
|
||||
userName: undefined,
|
||||
password: undefined,
|
||||
endpoints: [
|
||||
{
|
||||
endpoint: features[Constants.Features.livyEndpoint],
|
||||
kind: DataModels.SparkClusterEndpointKind.Livy,
|
||||
},
|
||||
],
|
||||
});
|
||||
this.sparkClusterConnectionInfo.valueHasMutated();
|
||||
}
|
||||
|
||||
if (this.isFeatureEnabled(Constants.Features.enableSDKoperations)) {
|
||||
updateUserContext({ useSDKOperations: true });
|
||||
}
|
||||
|
||||
featureSubcription.dispose();
|
||||
});
|
||||
}
|
||||
|
||||
public openEnableSynapseLinkDialog(): void {
|
||||
@@ -984,6 +1026,20 @@ export default class Explorer {
|
||||
return this.selectedNode() == null;
|
||||
}
|
||||
|
||||
public isFeatureEnabled(feature: string): boolean {
|
||||
const features = this.features();
|
||||
|
||||
if (!features) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (feature in features && features[feature]) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
public logConsoleData(consoleData: ConsoleData): void {
|
||||
this.setNotificationConsoleData(consoleData);
|
||||
}
|
||||
@@ -1030,6 +1086,7 @@ export default class Explorer {
|
||||
}
|
||||
|
||||
public refreshAllDatabases(isInitialLoad?: boolean): Q.Promise<any> {
|
||||
this.isRefreshingExplorer(true);
|
||||
const startKey: number = TelemetryProcessor.traceStart(Action.LoadDatabases, {
|
||||
dataExplorerArea: Constants.Areas.ResourceTree,
|
||||
});
|
||||
@@ -1059,19 +1116,22 @@ 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);
|
||||
}
|
||||
);
|
||||
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));
|
||||
},
|
||||
(error) => {
|
||||
this._setLoadingStatusText("Failed to fetch databases.");
|
||||
this.isRefreshingExplorer(false);
|
||||
deferred.reject(error);
|
||||
const errorMessage = getErrorMessage(error);
|
||||
TelemetryProcessor.traceFailure(
|
||||
@@ -1131,9 +1191,8 @@ export default class Explorer {
|
||||
description: "Refresh button clicked",
|
||||
dataExplorerArea: Constants.Areas.ResourceTree,
|
||||
});
|
||||
userContext.authType === AuthType.ResourceToken
|
||||
? this.refreshDatabaseForResourceToken()
|
||||
: this.refreshAllDatabases();
|
||||
this.isRefreshingExplorer(true);
|
||||
this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases();
|
||||
this.refreshNotebookList();
|
||||
};
|
||||
|
||||
@@ -1226,12 +1285,12 @@ export default class Explorer {
|
||||
throw error;
|
||||
} finally {
|
||||
// Overwrite with feature flags
|
||||
if (userContext.features.notebookServerUrl) {
|
||||
connectionInfo.notebookServerEndpoint = userContext.features.notebookServerUrl;
|
||||
if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
|
||||
connectionInfo.notebookServerEndpoint = this.features()[Constants.Features.notebookServerUrl];
|
||||
}
|
||||
|
||||
if (userContext.features.notebookServerToken) {
|
||||
connectionInfo.authToken = userContext.features.notebookServerToken;
|
||||
if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
|
||||
connectionInfo.authToken = this.features()[Constants.Features.notebookServerToken];
|
||||
}
|
||||
|
||||
this.notebookServerInfo(connectionInfo);
|
||||
@@ -1381,12 +1440,16 @@ export default class Explorer {
|
||||
if (inputs.defaultCollectionThroughput) {
|
||||
this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
|
||||
}
|
||||
this.features(inputs.features);
|
||||
this.serverId(inputs.serverId ?? Constants.ServerIds.productionPortal);
|
||||
this.databaseAccount(databaseAccount);
|
||||
this.subscriptionType(inputs.subscriptionType ?? SharedConstants.CollectionCreation.DefaultSubscriptionType);
|
||||
this.hasWriteAccess(inputs.hasWriteAccess ?? true);
|
||||
if (inputs.addCollectionDefaultFlight) {
|
||||
this.flight(inputs.addCollectionDefaultFlight);
|
||||
}
|
||||
this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription ?? false);
|
||||
this.isAuthWithResourceToken(inputs.isAuthWithresourceToken ?? false);
|
||||
this.setFeatureFlagsFromFlights(inputs.flights);
|
||||
TelemetryProcessor.traceSuccess(
|
||||
Action.LoadDatabaseAccount,
|
||||
@@ -1467,9 +1530,9 @@ export default class Explorer {
|
||||
|
||||
public isRunningOnNationalCloud(): boolean {
|
||||
return (
|
||||
userContext.portalEnv === "blackforest" ||
|
||||
userContext.portalEnv === "fairfax" ||
|
||||
userContext.portalEnv === "mooncake"
|
||||
this.serverId() === Constants.ServerIds.blackforest ||
|
||||
this.serverId() === Constants.ServerIds.fairfax ||
|
||||
this.serverId() === Constants.ServerIds.mooncake
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1644,7 +1707,7 @@ export default class Explorer {
|
||||
|
||||
const promise = this.notebookManager?.notebookContentClient.uploadFileAsync(name, content, parent);
|
||||
promise
|
||||
.then(() => this.resourceTree.triggerRender())
|
||||
.then(() => this.params.onRefreshNotebookList())
|
||||
.catch((reason: any) => this.showOkModalDialog("Unable to upload file", reason));
|
||||
return promise;
|
||||
}
|
||||
@@ -1652,7 +1715,7 @@ export default class Explorer {
|
||||
public async importAndOpen(path: string): Promise<boolean> {
|
||||
const name = NotebookUtil.getName(path);
|
||||
const item = NotebookUtil.createNotebookContentItem(name, path, "file");
|
||||
const parent = this.resourceTree.myNotebooksContentRoot;
|
||||
const parent = this.params.getMyNotebooksContentRoot();
|
||||
|
||||
if (parent && parent.children && this.isNotebookEnabled() && this.notebookManager?.notebookClient) {
|
||||
const existingItem = _.find(parent.children, (node) => node.name === name);
|
||||
@@ -1669,7 +1732,8 @@ export default class Explorer {
|
||||
}
|
||||
|
||||
public async importAndOpenContent(name: string, content: string): Promise<boolean> {
|
||||
const parent = this.resourceTree.myNotebooksContentRoot;
|
||||
// const parent = this.params.getMyNotebooksContentRoot();
|
||||
const parent = this.params.getMyNotebooksContentRoot();
|
||||
|
||||
if (parent && parent.children && this.isNotebookEnabled() && this.notebookManager?.notebookClient) {
|
||||
if (this.notebookToImport && this.notebookToImport.name === name && this.notebookToImport.content === content) {
|
||||
@@ -1854,7 +1918,6 @@ export default class Explorer {
|
||||
|
||||
return newNotebookFile;
|
||||
});
|
||||
result.then(() => this.resourceTree.triggerRender());
|
||||
return result;
|
||||
}
|
||||
|
||||
@@ -1875,7 +1938,6 @@ export default class Explorer {
|
||||
defaultInput: "",
|
||||
onSubmit: (input: string) => this.notebookManager?.notebookContentClient.createDirectory(parent, input),
|
||||
});
|
||||
result.then(() => this.resourceTree.triggerRender());
|
||||
return result;
|
||||
}
|
||||
|
||||
@@ -2031,12 +2093,14 @@ export default class Explorer {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
private refreshNotebookList = async (): Promise<void> => {
|
||||
if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
|
||||
return;
|
||||
}
|
||||
|
||||
await this.resourceTree.initialize();
|
||||
this.params?.onRefreshNotebookList();
|
||||
|
||||
this.notebookManager?.refreshPinnedRepos();
|
||||
if (this.notebookToImport) {
|
||||
this.importAndOpenContent(this.notebookToImport.name, this.notebookToImport.content);
|
||||
@@ -2099,7 +2163,7 @@ export default class Explorer {
|
||||
throw new Error(error);
|
||||
}
|
||||
|
||||
parent = parent || this.resourceTree.myNotebooksContentRoot;
|
||||
parent = parent || this.params.getMyNotebooksContentRoot();
|
||||
|
||||
const notificationProgressId = NotificationConsoleUtils.logConsoleMessage(
|
||||
ConsoleDataType.InProgress,
|
||||
@@ -2123,7 +2187,7 @@ export default class Explorer {
|
||||
);
|
||||
return this.openNotebook(newFile);
|
||||
})
|
||||
.then(() => this.resourceTree.triggerRender())
|
||||
.then(() => this.params.onRefreshNotebookList())
|
||||
.catch((error: any) => {
|
||||
const errorMessage = `Failed to create a new notebook: ${getErrorMessage(error)}`;
|
||||
NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, errorMessage);
|
||||
@@ -2141,7 +2205,7 @@ export default class Explorer {
|
||||
}
|
||||
|
||||
public onUploadToNotebookServerClicked(parent?: NotebookContentItem): void {
|
||||
parent = parent || this.resourceTree.myNotebooksContentRoot;
|
||||
parent = parent || this.params.getMyNotebooksContentRoot();
|
||||
|
||||
this.uploadFilePane.openWithOptions({
|
||||
paneTitle: "Upload file to notebook server",
|
||||
@@ -2172,7 +2236,7 @@ export default class Explorer {
|
||||
});
|
||||
}
|
||||
|
||||
public refreshContentItem(item: NotebookContentItem): Promise<void> {
|
||||
public refreshContentItem(item: NotebookContentItem): Promise<NotebookContentItem> {
|
||||
if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
|
||||
const error = "Attempt to refresh notebook list, but notebook is not enabled";
|
||||
handleError(error, "Explorer/refreshContentItem");
|
||||
@@ -2334,12 +2398,10 @@ export default class Explorer {
|
||||
public onNewCollectionClicked(): void {
|
||||
if (this.isPreferredApiCassandra()) {
|
||||
this.cassandraAddCollectionPane.open();
|
||||
} else if (userContext.features.enableReactPane) {
|
||||
this.openAddCollectionPanel();
|
||||
} else {
|
||||
this.addCollectionPane.open(this.selectedDatabaseId());
|
||||
document.getElementById("linkAddCollection").focus();
|
||||
}
|
||||
document.getElementById("linkAddCollection").focus();
|
||||
}
|
||||
|
||||
private refreshCommandBarButtons(): void {
|
||||
@@ -2468,7 +2530,7 @@ export default class Explorer {
|
||||
}
|
||||
|
||||
public openDeleteCollectionConfirmationPane(): void {
|
||||
userContext.features.enableKOPanel
|
||||
this.isFeatureEnabled(Constants.Features.enableKOPanel)
|
||||
? this.deleteCollectionConfirmationPane.open()
|
||||
: this.openSidePanel(
|
||||
"Delete Collection",
|
||||
@@ -2479,16 +2541,4 @@ 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()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,8 +4,11 @@
|
||||
* - inspired from gremlin-javascript for nodejs: https://github.com/jbmusso/gremlin-javascript
|
||||
* - tested on cosmosdb gremlin server
|
||||
* - only supports sessionless gremlin requests
|
||||
* - Relies on text-encoding polyfill (github.com/inexorabletash/text-encoding) for TextEncoder/TextDecoder on IE, Edge.
|
||||
*/
|
||||
|
||||
import { TextEncoder, TextDecoder } from "text-encoding";
|
||||
|
||||
export interface GremlinSimpleClientParameters {
|
||||
endpoint: string; // The websocket endpoint
|
||||
user: string;
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import * as ko from "knockout";
|
||||
import { AuthType } from "../../../AuthType";
|
||||
import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
|
||||
import { updateUserContext } from "../../../UserContext";
|
||||
import Explorer from "../../Explorer";
|
||||
import NotebookManager from "../../Notebook/NotebookManager";
|
||||
import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
|
||||
import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
|
||||
import NotebookManager from "../../Notebook/NotebookManager";
|
||||
import Explorer from "../../Explorer";
|
||||
|
||||
describe("CommandBarComponentButtonFactory tests", () => {
|
||||
let mockExplorer: Explorer;
|
||||
@@ -15,6 +13,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(false);
|
||||
mockExplorer.isPreferredApiTable = ko.computed(() => true);
|
||||
mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
|
||||
mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
|
||||
@@ -54,6 +53,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(false);
|
||||
mockExplorer.isPreferredApiTable = ko.computed(() => true);
|
||||
mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
|
||||
mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
|
||||
@@ -118,6 +118,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(false);
|
||||
mockExplorer.isPreferredApiTable = ko.computed(() => true);
|
||||
mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
|
||||
mockExplorer.isSparkEnabled = ko.observable(true);
|
||||
@@ -198,6 +199,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(false);
|
||||
mockExplorer.isPreferredApiTable = ko.computed(() => true);
|
||||
mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
|
||||
mockExplorer.isSynapseLinkUpdating = ko.observable(false);
|
||||
@@ -279,6 +281,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(false);
|
||||
mockExplorer.isPreferredApiTable = ko.computed(() => true);
|
||||
mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
|
||||
mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
|
||||
@@ -337,13 +340,12 @@ describe("CommandBarComponentButtonFactory tests", () => {
|
||||
beforeAll(() => {
|
||||
mockExplorer = {} as Explorer;
|
||||
mockExplorer.addCollectionText = ko.observable("mockText");
|
||||
mockExplorer.isAuthWithResourceToken = ko.observable(true);
|
||||
mockExplorer.isPreferredApiDocumentDB = ko.computed(() => true);
|
||||
mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
|
||||
|
||||
mockExplorer.isResourceTokenCollectionNodeSelected = ko.computed(() => true);
|
||||
mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
|
||||
updateUserContext({
|
||||
authType: AuthType.ResourceToken,
|
||||
});
|
||||
});
|
||||
|
||||
it("should only show New SQL Query and Open Query buttons", () => {
|
||||
|
||||
@@ -1,38 +1,37 @@
|
||||
import * as React from "react";
|
||||
import AddCollectionIcon from "../../../../images/AddCollection.svg";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
|
||||
import { Areas } from "../../../Common/Constants";
|
||||
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
|
||||
import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
|
||||
import AddCollectionIcon from "../../../../images/AddCollection.svg";
|
||||
import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
|
||||
import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
|
||||
import AddTriggerIcon from "../../../../images/AddTrigger.svg";
|
||||
import AddUdfIcon from "../../../../images/AddUdf.svg";
|
||||
import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
|
||||
import * as Constants from "../../../Common/Constants";
|
||||
import OpenInTabIcon from "../../../../images/open-in-tab.svg";
|
||||
import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
|
||||
import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
|
||||
import FeedbackIcon from "../../../../images/Feedback-Command.svg";
|
||||
import GitHubIcon from "../../../../images/github.svg";
|
||||
import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
|
||||
import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
|
||||
import SettingsIcon from "../../../../images/settings_15x15.svg";
|
||||
import AddUdfIcon from "../../../../images/AddUdf.svg";
|
||||
import AddTriggerIcon from "../../../../images/AddTrigger.svg";
|
||||
import FeedbackIcon from "../../../../images/Feedback-Command.svg";
|
||||
import EnableNotebooksIcon from "../../../../images/notebook/Notebook-enable.svg";
|
||||
import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
|
||||
import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
|
||||
import OpenInTabIcon from "../../../../images/open-in-tab.svg";
|
||||
import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
|
||||
import SettingsIcon from "../../../../images/settings_15x15.svg";
|
||||
import GitHubIcon from "../../../../images/github.svg";
|
||||
import SynapseIcon from "../../../../images/synapse-link.svg";
|
||||
import { AuthType } from "../../../AuthType";
|
||||
import * as Constants from "../../../Common/Constants";
|
||||
import { Areas } from "../../../Common/Constants";
|
||||
import { configContext, Platform } from "../../../ConfigContext";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../../UserContext";
|
||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||
import Explorer from "../../Explorer";
|
||||
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
|
||||
import * as React from "react";
|
||||
import { OpenFullScreen } from "../../OpenFullScreen";
|
||||
|
||||
let counter = 0;
|
||||
|
||||
export function createStaticCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
|
||||
if (userContext.authType === AuthType.ResourceToken) {
|
||||
if (container.isAuthWithResourceToken()) {
|
||||
return createStaticCommandBarButtonsForResourceToken(container);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer, from } from "rxjs";
|
||||
import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer } from "rxjs";
|
||||
import { webSocket } from "rxjs/webSocket";
|
||||
import { StateObservable } from "redux-observable";
|
||||
import { ofType } from "redux-observable";
|
||||
@@ -944,39 +944,6 @@ const traceNotebookKernelEpic = (
|
||||
);
|
||||
};
|
||||
|
||||
const resetCellStatusOnExecuteCanceledEpic = (
|
||||
action$: Observable<actions.ExecuteCanceled>,
|
||||
state$: StateObservable<AppState>
|
||||
): Observable<actions.UpdateCellStatus> => {
|
||||
return action$.pipe(
|
||||
ofType(actions.EXECUTE_CANCELED),
|
||||
mergeMap((action) => {
|
||||
const contentRef = action.payload.contentRef;
|
||||
const model = state$.value.core.entities.contents.byRef.get(contentRef).model;
|
||||
let busyCellIds: string[] = [];
|
||||
|
||||
if (model.type === "notebook") {
|
||||
const cellMap = model.transient.get("cellMap");
|
||||
if (cellMap) {
|
||||
for (const entry of cellMap.toArray()) {
|
||||
const cellId = entry[0];
|
||||
const status = model.transient.getIn(["cellMap", cellId, "status"]);
|
||||
if (status === "busy") {
|
||||
busyCellIds.push(cellId);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return from(busyCellIds).pipe(
|
||||
map((busyCellId) => {
|
||||
return actions.updateCellStatus({ id: busyCellId, contentRef, status: undefined });
|
||||
})
|
||||
);
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
export const allEpics = [
|
||||
addInitialCodeCellEpic,
|
||||
focusInitialCodeCellEpic,
|
||||
@@ -993,5 +960,4 @@ export const allEpics = [
|
||||
traceNotebookTelemetryEpic,
|
||||
traceNotebookInfoEpic,
|
||||
traceNotebookKernelEpic,
|
||||
resetCellStatusOnExecuteCanceledEpic,
|
||||
];
|
||||
|
||||
@@ -18,11 +18,13 @@ export class NotebookContentClient {
|
||||
/**
|
||||
* This updates the item and points all the children's parent to this item
|
||||
* @param item
|
||||
* @return updated item
|
||||
*/
|
||||
public updateItemChildren(item: NotebookContentItem): Promise<void> {
|
||||
public updateItemChildren(item: NotebookContentItem): Promise<NotebookContentItem> {
|
||||
return this.fetchNotebookFiles(item.path).then((subItems) => {
|
||||
item.children = subItems;
|
||||
subItems.forEach((subItem) => (subItem.parent = item));
|
||||
return item;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,6 @@ import { contents } from "rx-jupyter";
|
||||
import { NotebookContainerClient } from "./NotebookContainerClient";
|
||||
import { MemoryUsageInfo } from "../../Contracts/DataModels";
|
||||
import { NotebookContentClient } from "./NotebookContentClient";
|
||||
import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
|
||||
import { PublishNotebookPaneAdapter } from "../Panes/PublishNotebookPaneAdapter";
|
||||
import { getFullName } from "../../Utils/UserUtils";
|
||||
import { ImmutableNotebook } from "@nteract/commutable";
|
||||
@@ -30,7 +29,6 @@ import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
|
||||
export interface NotebookManagerOptions {
|
||||
container: Explorer;
|
||||
notebookBasePath: ko.Observable<string>;
|
||||
resourceTree: ResourceTreeAdapter;
|
||||
refreshCommandBarButtons: () => void;
|
||||
refreshNotebookList: () => void;
|
||||
}
|
||||
@@ -107,8 +105,8 @@ export default class NotebookManager {
|
||||
});
|
||||
|
||||
this.junoClient.subscribeToPinnedRepos((pinnedRepos) => {
|
||||
this.params.resourceTree.initializeGitHubRepos(pinnedRepos);
|
||||
this.params.resourceTree.triggerRender();
|
||||
// TODO Move this out of NotebookManager?
|
||||
this.params.container.params.initializeGitHubRepos(pinnedRepos);
|
||||
});
|
||||
this.refreshPinnedRepos();
|
||||
}
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import * as ko from "knockout";
|
||||
import * as _ from "underscore";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { createCollection } from "../../Common/dataAccess/createCollection";
|
||||
import editable from "../../Common/EditableUtility";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../UserContext";
|
||||
import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import * as ko from "knockout";
|
||||
import * as PricingUtils from "../../Utils/PricingUtils";
|
||||
import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import editable from "../../Common/EditableUtility";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import { ContextualPaneBase } from "./ContextualPaneBase";
|
||||
import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
|
||||
import { createCollection } from "../../Common/dataAccess/createCollection";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { userContext } from "../../UserContext";
|
||||
|
||||
export interface AddCollectionPaneOptions extends ViewModels.PaneOptions {
|
||||
isPreferredApiTable: ko.Computed<boolean>;
|
||||
@@ -49,7 +49,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
public throughputDatabase: ViewModels.Editable<number>;
|
||||
public isPreferredApiTable: ko.Computed<boolean>;
|
||||
public partitionKeyPlaceholder: ko.Computed<string>;
|
||||
public isTryCosmosDBSubscription: ko.Observable<boolean>;
|
||||
public isTryCosmosDBSubscription: ko.Computed<boolean>;
|
||||
public maxThroughputRU: ko.Observable<number>;
|
||||
public minThroughputRU: ko.Observable<number>;
|
||||
public throughputRangeText: ko.Computed<string>;
|
||||
@@ -186,6 +186,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId: string = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -199,28 +200,23 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
if (!this.isSharedAutoPilotSelected()) {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
|
||||
} else {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
@@ -244,6 +240,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId: string = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -257,28 +254,28 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
if (!this.isAutoPilotSelected()) {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.throughputMultiPartition(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
this.throughputMultiPartition(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
} else {
|
||||
throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.autoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.autoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
@@ -288,7 +285,9 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
return estimatedSpend;
|
||||
});
|
||||
|
||||
this.isTryCosmosDBSubscription = ko.observable<boolean>(userContext.isTryCosmosDBSubscription || false);
|
||||
this.isTryCosmosDBSubscription = ko.pureComputed<boolean>(() => {
|
||||
return (this.container && this.container.isTryCosmosDBSubscription()) || false;
|
||||
});
|
||||
|
||||
this.isTryCosmosDBSubscription.subscribe((isTryCosmosDB: boolean) => {
|
||||
if (!!isTryCosmosDB) {
|
||||
@@ -299,7 +298,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
this.canRequestSupport = ko.pureComputed(() => {
|
||||
if (
|
||||
configContext.platform !== Platform.Emulator &&
|
||||
!userContext.isTryCosmosDBSubscription &&
|
||||
!this.container.isTryCosmosDBSubscription() &&
|
||||
configContext.platform !== Platform.Portal
|
||||
) {
|
||||
const offerThroughput: number = this._getThroughput();
|
||||
@@ -490,7 +489,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
|
||||
this.upsellMessage = ko.pureComputed<string>(() => {
|
||||
return PricingUtils.getUpsellMessage(
|
||||
userContext.portalEnv,
|
||||
this.container.serverId(),
|
||||
this.isFreeTierAccount(),
|
||||
this.container.isFirstResourceCreated(),
|
||||
this.container.defaultExperience(),
|
||||
@@ -994,7 +993,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
this.container.openEnableSynapseLinkDialog();
|
||||
}
|
||||
|
||||
public ttl90DaysEnabled: () => boolean = () => userContext.features.ttl90Days;
|
||||
public ttl90DaysEnabled: () => boolean = () => this.container.isFeatureEnabled(Constants.Features.ttl90Days);
|
||||
|
||||
public isValid(): boolean {
|
||||
// TODO add feature flag that disables validation for customers with custom accounts
|
||||
@@ -1202,7 +1201,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
|
||||
|
||||
if (this.isAnalyticalStorageOn()) {
|
||||
// TODO: always default to 90 days once the backend hotfix is deployed
|
||||
return userContext.features.ttl90Days
|
||||
return this.container.isFeatureEnabled(Constants.Features.ttl90Days)
|
||||
? Constants.AnalyticalStorageTtl.Days90
|
||||
: Constants.AnalyticalStorageTtl.Infinite;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,19 +1,19 @@
|
||||
import * as ko from "knockout";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { createDatabase } from "../../Common/dataAccess/createDatabase";
|
||||
import editable from "../../Common/EditableUtility";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../UserContext";
|
||||
import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import * as ko from "knockout";
|
||||
import * as PricingUtils from "../../Utils/PricingUtils";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import editable from "../../Common/EditableUtility";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { ContextualPaneBase } from "./ContextualPaneBase";
|
||||
import { createDatabase } from "../../Common/dataAccess/createDatabase";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import { userContext } from "../../UserContext";
|
||||
|
||||
export default class AddDatabasePane extends ContextualPaneBase {
|
||||
public defaultExperience: ko.Computed<string>;
|
||||
@@ -122,6 +122,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -133,15 +134,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
let estimatedSpendAcknowledge: string;
|
||||
let estimatedSpend: string;
|
||||
if (!this.isAutoPilotSelected()) {
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
|
||||
estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -149,13 +145,13 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
} else {
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.maxAutoPilotThroughputSet(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.maxAutoPilotThroughputSet(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -169,7 +165,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
this.canRequestSupport = ko.pureComputed(() => {
|
||||
if (
|
||||
configContext.platform !== Platform.Emulator &&
|
||||
!userContext.isTryCosmosDBSubscription &&
|
||||
!this.container.isTryCosmosDBSubscription() &&
|
||||
configContext.platform !== Platform.Portal
|
||||
) {
|
||||
const offerThroughput: number = this.throughput();
|
||||
@@ -243,7 +239,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
|
||||
|
||||
this.upsellMessage = ko.pureComputed<string>(() => {
|
||||
return PricingUtils.getUpsellMessage(
|
||||
userContext.portalEnv,
|
||||
this.container.serverId(),
|
||||
this.isFreeTierAccount(),
|
||||
this.container.isFirstResourceCreated(),
|
||||
this.container.defaultExperience(),
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import * as ko from "knockout";
|
||||
import * as _ from "underscore";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { HashMap } from "../../Common/HashMap";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../UserContext";
|
||||
import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import * as ko from "knockout";
|
||||
import * as PricingUtils from "../../Utils/PricingUtils";
|
||||
import * as SharedConstants from "../../Shared/Constants";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { CassandraAPIDataClient } from "../Tables/TableDataClient";
|
||||
import { ContextualPaneBase } from "./ContextualPaneBase";
|
||||
import { HashMap } from "../../Common/HashMap";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { SubscriptionType } from "../../Contracts/SubscriptionType";
|
||||
import { userContext } from "../../UserContext";
|
||||
|
||||
export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
public createTableQuery: ko.Observable<string>;
|
||||
@@ -127,6 +127,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -138,15 +139,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
let estimatedSpend: string;
|
||||
let estimatedDedicatedSpendAcknowledge: string;
|
||||
if (!this.isAutoPilotSelected()) {
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
|
||||
estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
offerThroughput,
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -154,13 +150,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
} else {
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.selectedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.selectedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isAutoPilotSelected()
|
||||
@@ -176,6 +172,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -186,15 +183,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
let estimatedSpend: string;
|
||||
let estimatedSharedSpendAcknowledge: string;
|
||||
if (!this.isSharedAutoPilotSelected()) {
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(
|
||||
this.keyspaceThroughput(),
|
||||
userContext.portalEnv,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSpend = PricingUtils.getEstimatedSpendHtml(this.keyspaceThroughput(), serverId, regions, multimaster);
|
||||
estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.keyspaceThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
@@ -202,13 +194,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
} else {
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
|
||||
this.sharedAutoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster,
|
||||
this.isSharedAutoPilotSelected()
|
||||
@@ -223,7 +215,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
|
||||
});
|
||||
|
||||
this.canRequestSupport = ko.pureComputed(() => {
|
||||
if (configContext.platform !== Platform.Emulator && !userContext.isTryCosmosDBSubscription) {
|
||||
if (configContext.platform !== Platform.Emulator && !this.container.isTryCosmosDBSubscription()) {
|
||||
const offerThroughput: number = this.throughput();
|
||||
return offerThroughput <= 100000;
|
||||
}
|
||||
|
||||
@@ -8,10 +8,9 @@ import { GenericRightPaneComponent, GenericRightPaneProps } from "./GenericRight
|
||||
import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
|
||||
import { IDropdownOption } from "office-ui-fabric-react";
|
||||
import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
|
||||
import { HttpStatusCodes } from "../../Common/Constants";
|
||||
import { HttpStatusCodes, Notebook } from "../../Common/Constants";
|
||||
import * as GitHubUtils from "../../Utils/GitHubUtils";
|
||||
import { NotebookContentItemType, NotebookContentItem } from "../Notebook/NotebookContentItem";
|
||||
import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
|
||||
import { handleError, getErrorMessage } from "../../Common/ErrorHandlingUtils";
|
||||
|
||||
interface Location {
|
||||
@@ -151,7 +150,7 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {
|
||||
switch (location.type) {
|
||||
case "MyNotebooks":
|
||||
parent = {
|
||||
name: ResourceTreeAdapter.MyNotebooksTitle,
|
||||
name: Notebook.MyNotebooksTitle,
|
||||
path: this.container.getNotebookBasePath(),
|
||||
type: NotebookContentItemType.Directory,
|
||||
};
|
||||
@@ -159,7 +158,7 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {
|
||||
|
||||
case "GitHub":
|
||||
parent = {
|
||||
name: ResourceTreeAdapter.GitHubReposTitle,
|
||||
name: Notebook.GitHubReposTitle,
|
||||
path: GitHubUtils.toContentUri(
|
||||
this.selectedLocation.owner,
|
||||
this.selectedLocation.repo,
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import * as GitHubUtils from "../../Utils/GitHubUtils";
|
||||
import * as React from "react";
|
||||
import { IPinnedRepo } from "../../Juno/JunoClient";
|
||||
import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
|
||||
import {
|
||||
Stack,
|
||||
Label,
|
||||
@@ -13,6 +12,7 @@ import {
|
||||
IRenderFunction,
|
||||
ISelectableOption,
|
||||
} from "office-ui-fabric-react";
|
||||
import { Notebook } from "../../Common/Constants";
|
||||
|
||||
interface Location {
|
||||
type: "MyNotebooks" | "GitHub";
|
||||
@@ -70,8 +70,8 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
|
||||
|
||||
options.push({
|
||||
key: "MyNotebooks-Item",
|
||||
text: ResourceTreeAdapter.MyNotebooksTitle,
|
||||
title: ResourceTreeAdapter.MyNotebooksTitle,
|
||||
text: Notebook.MyNotebooksTitle,
|
||||
title: Notebook.MyNotebooksTitle,
|
||||
data: {
|
||||
type: "MyNotebooks",
|
||||
} as Location,
|
||||
@@ -86,7 +86,7 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
|
||||
|
||||
options.push({
|
||||
key: "GitHub-Header",
|
||||
text: ResourceTreeAdapter.GitHubReposTitle,
|
||||
text: Notebook.GitHubReposTitle,
|
||||
itemType: SelectableOptionMenuItemType.Header,
|
||||
});
|
||||
|
||||
|
||||
@@ -133,7 +133,7 @@ describe("Delete Collection Confirmation Pane", () => {
|
||||
.simulate("change", { target: { value: selectedCollectionId } });
|
||||
|
||||
expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
|
||||
wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
|
||||
wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
|
||||
expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
|
||||
|
||||
wrapper.unmount();
|
||||
@@ -154,7 +154,7 @@ describe("Delete Collection Confirmation Pane", () => {
|
||||
.simulate("change", { target: { value: feedbackText } });
|
||||
|
||||
expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
|
||||
wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
|
||||
wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
|
||||
expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
|
||||
|
||||
const deleteFeedback = new DeleteFeedback(
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
import { Text, TextField } from "office-ui-fabric-react";
|
||||
import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import * as React from "react";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { PanelFooterComponent } from "./PanelFooterComponent";
|
||||
import { Collection } from "../../Contracts/ViewModels";
|
||||
import { Text, TextField } from "office-ui-fabric-react";
|
||||
import { userContext } from "../../UserContext";
|
||||
import { Areas } from "../../Common/Constants";
|
||||
import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
|
||||
import DeleteFeedback from "../../Common/DeleteFeedback";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { Collection } from "../../Contracts/ViewModels";
|
||||
import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../UserContext";
|
||||
import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
|
||||
import { PanelErrorComponent, PanelErrorProps } from "./PanelErrorComponent";
|
||||
import DeleteFeedback from "../../Common/DeleteFeedback";
|
||||
import Explorer from "../Explorer";
|
||||
import { PanelFooterComponent } from "./PanelFooterComponent";
|
||||
import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
|
||||
import { PanelLoadingScreen } from "./PanelLoadingScreen";
|
||||
import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
|
||||
|
||||
export interface DeleteCollectionConfirmationPanelProps {
|
||||
explorer: Explorer;
|
||||
closePanel: () => void;
|
||||
@@ -43,8 +44,8 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
|
||||
render(): JSX.Element {
|
||||
return (
|
||||
<form className="panelFormWrapper" onSubmit={this.submit.bind(this)}>
|
||||
<PanelInfoErrorComponent {...this.getPanelErrorProps()} />
|
||||
<div className="panelContentContainer">
|
||||
<PanelErrorComponent {...this.getPanelErrorProps()} />
|
||||
<div className="panelMainContent">
|
||||
<div className="confirmDeleteInput">
|
||||
<span className="mandatoryStar">* </span>
|
||||
@@ -78,16 +79,18 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<PanelFooterComponent buttonLabel="OK" />
|
||||
{this.state.isExecuting && <PanelLoadingScreen />}
|
||||
</form>
|
||||
<PanelFooterComponent buttonLabel="OK" onOKButtonClicked={() => this.submit()} />
|
||||
<div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!this.state.isExecuting}>
|
||||
<img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private getPanelErrorProps(): PanelInfoErrorProps {
|
||||
private getPanelErrorProps(): PanelErrorProps {
|
||||
if (this.state.formError) {
|
||||
return {
|
||||
messageType: "error",
|
||||
isWarning: false,
|
||||
message: this.state.formError,
|
||||
showErrorDetails: true,
|
||||
openNotificationConsole: this.props.openNotificationConsole,
|
||||
@@ -95,7 +98,7 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
}
|
||||
|
||||
return {
|
||||
messageType: "warning",
|
||||
isWarning: true,
|
||||
showErrorDetails: false,
|
||||
message:
|
||||
"Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
|
||||
@@ -106,10 +109,9 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
|
||||
return this.props.explorer.isLastCollection() && !this.props.explorer.isSelectedDatabaseShared();
|
||||
}
|
||||
|
||||
public async submit(event: React.FormEvent<HTMLFormElement>): Promise<void> {
|
||||
event.preventDefault();
|
||||
|
||||
public async submit(): Promise<void> {
|
||||
const collection = this.props.explorer.findSelectedCollection();
|
||||
|
||||
if (!collection || this.inputCollectionName !== collection.id()) {
|
||||
const errorMessage = "Input collection name does not match the selected collection";
|
||||
this.setState({ formError: errorMessage });
|
||||
|
||||
@@ -1,58 +1,12 @@
|
||||
@import "../../../less/Common/Constants";
|
||||
|
||||
.panelFormWrapper {
|
||||
.panelContentContainer {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,30 +16,26 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.panelInfoErrorContainer {
|
||||
.panelWarningErrorContainer {
|
||||
background-color: @BaseLow;
|
||||
padding: @DefaultSpace;
|
||||
display: inline-flex;
|
||||
margin: 20px 34px 0 34px;
|
||||
|
||||
i {
|
||||
font-size: @WarningErrorIconSize;
|
||||
width: @WarningErrorIconSize;
|
||||
margin-left: @SmallSpace;
|
||||
}
|
||||
margin-bottom: 24px;
|
||||
|
||||
.panelWarningIcon {
|
||||
font-size: @WarningErrorIconSize;
|
||||
width: @WarningErrorIconSize;
|
||||
margin: auto 0 auto @SmallSpace;
|
||||
color: @WarningIconColor;
|
||||
}
|
||||
|
||||
.panelErrorIcon {
|
||||
font-size: @WarningErrorIconSize;
|
||||
width: @WarningErrorIconSize;
|
||||
margin: auto 0 auto @SmallSpace;
|
||||
color: @ErrorIconColor;
|
||||
}
|
||||
|
||||
.panelLargeInfoIcon {
|
||||
color: @InfoIconColor;
|
||||
}
|
||||
|
||||
.panelWarningErrorDetailsLinkContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -98,19 +48,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.panelFooter {
|
||||
padding: 20px 34px;
|
||||
border-top: solid 1px #bbbbbb;
|
||||
|
||||
& button {
|
||||
height: 30px;
|
||||
}
|
||||
.panelFooter button {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.deleteCollectionFeedback {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.panelGroupSpacing > * {
|
||||
margin-bottom: @SmallSpace;
|
||||
}
|
||||
|
||||
@@ -9,30 +9,10 @@ export interface PanelContainerProps {
|
||||
closePanel: () => void;
|
||||
}
|
||||
|
||||
export interface PanelContainerState {
|
||||
height: string;
|
||||
}
|
||||
|
||||
export class PanelContainerComponent extends React.Component<PanelContainerProps, PanelContainerState> {
|
||||
export class PanelContainerComponent extends React.Component<PanelContainerProps> {
|
||||
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 <></>;
|
||||
@@ -50,10 +30,8 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
|
||||
headerClassName="panelHeader"
|
||||
styles={{
|
||||
navigation: { borderBottom: "1px solid #cccccc" },
|
||||
content: { padding: 0, height: "100%" },
|
||||
content: { padding: "24px 34px 20px 34px", height: "100%" },
|
||||
scrollableContent: { height: "100%" },
|
||||
header: { padding: "0 0 8px 34px" },
|
||||
commands: { marginTop: 8 },
|
||||
}}
|
||||
style={{ height: this.getPanelHeight() }}
|
||||
>
|
||||
|
||||
29
src/Explorer/Panes/PanelErrorComponent.tsx
Normal file
29
src/Explorer/Panes/PanelErrorComponent.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
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,12 +3,13 @@ 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 type="submit" id="sidePanelOkButton" text={props.buttonLabel} />
|
||||
<PrimaryButton id="sidePanelOkButton" text={props.buttonLabel} onClick={() => props.onOKButtonClicked()} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -1,8 +0,0 @@
|
||||
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,15 +16,9 @@ exports[`PaneContainerComponent test should be resize if notification console is
|
||||
}
|
||||
styles={
|
||||
Object {
|
||||
"commands": Object {
|
||||
"marginTop": 8,
|
||||
},
|
||||
"content": Object {
|
||||
"height": "100%",
|
||||
"padding": 0,
|
||||
},
|
||||
"header": Object {
|
||||
"padding": "0 0 8px 34px",
|
||||
"padding": "24px 34px 20px 34px",
|
||||
},
|
||||
"navigation": Object {
|
||||
"borderBottom": "1px solid #cccccc",
|
||||
@@ -58,15 +52,9 @@ exports[`PaneContainerComponent test should render with panel content and header
|
||||
}
|
||||
styles={
|
||||
Object {
|
||||
"commands": Object {
|
||||
"marginTop": 8,
|
||||
},
|
||||
"content": Object {
|
||||
"height": "100%",
|
||||
"padding": 0,
|
||||
},
|
||||
"header": Object {
|
||||
"padding": "0 0 8px 34px",
|
||||
"padding": "24px 34px 20px 34px",
|
||||
},
|
||||
"navigation": Object {
|
||||
"borderBottom": "1px solid #cccccc",
|
||||
|
||||
@@ -1,26 +1,25 @@
|
||||
/**
|
||||
* Accordion top class
|
||||
*/
|
||||
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 * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { Link } from "office-ui-fabric-react/lib/Link";
|
||||
import NewContainerIcon from "../../../images/Hero-new-container.svg";
|
||||
import NewNotebookIcon from "../../../images/Hero-new-notebook.svg";
|
||||
import SampleIcon from "../../../images/Hero-sample.svg";
|
||||
import NotebookIcon from "../../../images/notebook/Notebook-resource.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 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 * 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 * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
|
||||
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";
|
||||
|
||||
export interface SplashScreenItem {
|
||||
iconSrc: string;
|
||||
@@ -221,7 +220,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
|
||||
private createCommonTaskItems(): SplashScreenItem[] {
|
||||
const items: SplashScreenItem[] = [];
|
||||
|
||||
if (userContext.authType === AuthType.ResourceToken) {
|
||||
if (this.container.isAuthWithResourceToken()) {
|
||||
return items;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,21 +1,22 @@
|
||||
import * as ko from "knockout";
|
||||
import Q from "q";
|
||||
import * as _ from "underscore";
|
||||
import { Areas } from "../../../Common/Constants";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import Q from "q";
|
||||
|
||||
import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
|
||||
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 { CassandraTableKey, CassandraAPIDataClient } from "../TableDataClient";
|
||||
import DataTableViewModel from "./DataTableViewModel";
|
||||
import * as DataTableUtilities from "./DataTableUtilities";
|
||||
import { getQuotedCqlIdentifier } from "../CqlUtilities";
|
||||
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;
|
||||
@@ -353,8 +354,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) {
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import * as ko from "knockout";
|
||||
import { KeyCodes } from "../../../Common/Constants";
|
||||
import * as Constants from "../Constants";
|
||||
import * as CustomTimestampHelper from "./CustomTimestampHelper";
|
||||
import { getQuotedCqlIdentifier } from "../CqlUtilities";
|
||||
import * as DataTableUtilities from "../DataTable/DataTableUtilities";
|
||||
import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
|
||||
import * as TableEntityProcessor from "../TableEntityProcessor";
|
||||
import * as Utilities from "../Utilities";
|
||||
import QueryClauseViewModel from "./QueryClauseViewModel";
|
||||
import ClauseGroup from "./ClauseGroup";
|
||||
import ClauseGroupViewModel from "./ClauseGroupViewModel";
|
||||
import * as CustomTimestampHelper from "./CustomTimestampHelper";
|
||||
import * as DateTimeUtilities from "./DateTimeUtilities";
|
||||
import QueryClauseViewModel from "./QueryClauseViewModel";
|
||||
import QueryViewModel from "./QueryViewModel";
|
||||
import * as Constants from "../Constants";
|
||||
import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
|
||||
import * as DateTimeUtilities from "./DateTimeUtilities";
|
||||
import * as DataTableUtilities from "../DataTable/DataTableUtilities";
|
||||
import * as TableEntityProcessor from "../TableEntityProcessor";
|
||||
import * as Utilities from "../Utilities";
|
||||
import { KeyCodes } from "../../../Common/Constants";
|
||||
|
||||
export default class QueryBuilderViewModel {
|
||||
/* Labels */
|
||||
@@ -182,7 +182,7 @@ export default class QueryBuilderViewModel {
|
||||
value = `["${TableEntityProcessor.keyProperties.PartitionKey}"]`;
|
||||
filterString = filterString.concat(filterString === "SELECT" ? " c" : ", c");
|
||||
} else if (value === Constants.EntityKeyNames.RowKey) {
|
||||
value = `["${TableEntityProcessor.keyProperties.Id}"]`;
|
||||
value = `["${TableEntityProcessor.keyProperties.Id2}"]`;
|
||||
filterString = filterString.concat(filterString === "SELECT" ? " c" : ", c");
|
||||
} else {
|
||||
if (value === Constants.EntityKeyNames.Timestamp) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import * as Constants from "./Constants";
|
||||
import * as Entities from "./Entities";
|
||||
import * as Constants from "./Constants";
|
||||
import * as DateTimeUtilities from "./QueryBuilder/DateTimeUtilities";
|
||||
|
||||
// For use exclusively with Tables API.
|
||||
@@ -36,7 +36,7 @@ export function convertDocumentsToEntities(documents: any[]): Entities.ITableEnt
|
||||
let results: Entities.ITableEntityForTablesAPI[] = [];
|
||||
documents &&
|
||||
documents.forEach((document) => {
|
||||
if (!document.hasOwnProperty(keyProperties.PartitionKey) || !document.hasOwnProperty(keyProperties.Id)) {
|
||||
if (!document.hasOwnProperty(keyProperties.PartitionKey) || !document.hasOwnProperty(keyProperties.Id2)) {
|
||||
//Document does not match the current required format for Tables, so we ignore it
|
||||
return; // The rest of the key properties should be guaranteed as DocumentDB properties
|
||||
}
|
||||
|
||||
@@ -26,10 +26,8 @@ import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
|
||||
import { updateDocument } from "../../Common/dataAccess/updateDocument";
|
||||
import { deleteConflict } from "../../Common/dataAccess/deleteConflict";
|
||||
import { queryConflicts } from "../../Common/dataAccess/queryConflicts";
|
||||
import template from "./ConflictsTab.html";
|
||||
|
||||
export default class ConflictsTab extends TabsBase {
|
||||
public static readonly component = { name: "conflicts-tab", template };
|
||||
public selectedConflictId: ko.Observable<ConflictId>;
|
||||
public selectedConflictContent: ViewModels.Editable<string>;
|
||||
public selectedConflictCurrent: ViewModels.Editable<string>;
|
||||
|
||||
@@ -17,7 +17,6 @@ import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
|
||||
import * as PricingUtils from "../../Utils/PricingUtils";
|
||||
import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
|
||||
import Explorer from "../Explorer";
|
||||
import template from "./DatabaseSettingsTab.html";
|
||||
import TabsBase from "./TabsBase";
|
||||
|
||||
const updateThroughputBeyondLimitWarningMessage: string = `
|
||||
@@ -45,7 +44,6 @@ const throughputApplyLongDelayMessage = (isAutoscale: boolean, throughput: numbe
|
||||
Database: ${databaseName}, ${currentThroughput(isAutoscale, throughput)}`;
|
||||
|
||||
export default class DatabaseSettingsTab extends TabsBase implements ViewModels.WaitsForTemplate {
|
||||
public static readonly component = { name: "database-settings-tab", template };
|
||||
// editables
|
||||
public isAutoPilotSelected: ViewModels.Editable<boolean>;
|
||||
public throughput: ViewModels.Editable<number>;
|
||||
@@ -138,6 +136,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
|
||||
return "";
|
||||
}
|
||||
|
||||
const serverId = this.container.serverId();
|
||||
const regions =
|
||||
(account &&
|
||||
account.properties &&
|
||||
@@ -151,14 +150,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(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
} else {
|
||||
estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
|
||||
this.autoPilotThroughput(),
|
||||
userContext.portalEnv,
|
||||
serverId,
|
||||
regions,
|
||||
multimaster
|
||||
);
|
||||
@@ -403,6 +402,7 @@ 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);
|
||||
|
||||
@@ -37,10 +37,8 @@ import { readDocument } from "../../Common/dataAccess/readDocument";
|
||||
import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
|
||||
import { updateDocument } from "../../Common/dataAccess/updateDocument";
|
||||
import { createDocument } from "../../Common/dataAccess/createDocument";
|
||||
import template from "./DocumentsTab.html";
|
||||
|
||||
export default class DocumentsTab extends TabsBase {
|
||||
public static readonly component = { name: "documents-tab", template };
|
||||
public selectedDocumentId: ko.Observable<DocumentId>;
|
||||
public selectedDocumentContent: ViewModels.Editable<string>;
|
||||
public initialDocumentContent: ko.Observable<string>;
|
||||
@@ -882,6 +880,8 @@ export default class DocumentsTab extends TabsBase {
|
||||
buttons.push(DocumentsTab._createUploadButton(this.collection.container));
|
||||
}
|
||||
|
||||
const features = this.collection.container.features() || {};
|
||||
|
||||
return buttons;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,7 +6,6 @@ import TabsBase from "./TabsBase";
|
||||
import Explorer from "../Explorer";
|
||||
import { DatabaseAccount } from "../../Contracts/DataModels";
|
||||
import { JunoClient, IGalleryItem } from "../../Juno/JunoClient";
|
||||
import template from "./GalleryTab.html";
|
||||
|
||||
interface GalleryTabOptions extends ViewModels.TabOptions {
|
||||
account: DatabaseAccount;
|
||||
@@ -22,7 +21,6 @@ interface GalleryTabOptions extends ViewModels.TabOptions {
|
||||
* Notebook gallery tab
|
||||
*/
|
||||
export default class GalleryTab extends TabsBase {
|
||||
public static readonly component = { name: "gallery-tab", template };
|
||||
private container: Explorer;
|
||||
private galleryAndNotebookViewerComponentProps: GalleryAndNotebookViewerComponentProps;
|
||||
public galleryAndNotebookViewerComponentAdapter: GalleryAndNotebookViewerComponentAdapter;
|
||||
@@ -38,7 +36,7 @@ export default class GalleryTab extends TabsBase {
|
||||
galleryItem: options.galleryItem,
|
||||
isFavorite: options.isFavorite,
|
||||
selectedTab: options.selectedTab,
|
||||
sortBy: SortBy.MostRecent,
|
||||
sortBy: SortBy.MostViewed,
|
||||
searchText: undefined,
|
||||
};
|
||||
this.galleryAndNotebookViewerComponentAdapter = new GalleryAndNotebookViewerComponentAdapter(
|
||||
|
||||
@@ -10,7 +10,6 @@ import GraphStylingPane from "../Panes/GraphStylingPane";
|
||||
import NewVertexPane from "../Panes/NewVertexPane";
|
||||
import { DatabaseAccount } from "../../Contracts/DataModels";
|
||||
import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
|
||||
import template from "./GraphTab.html";
|
||||
|
||||
export interface GraphIconMap {
|
||||
[key: string]: { data: string; format: string };
|
||||
@@ -37,7 +36,6 @@ interface GraphTabOptions extends ViewModels.TabOptions {
|
||||
}
|
||||
|
||||
export default class GraphTab extends TabsBase {
|
||||
public static readonly component = { name: "graph-tab", template };
|
||||
// Graph default configuration
|
||||
public static readonly DEFAULT_NODE_CAPTION = "id";
|
||||
private static readonly LINK_COLOR = "#aaa";
|
||||
|
||||
426
src/Explorer/Tabs/MongoDocumentsTab.html
Normal file
426
src/Explorer/Tabs/MongoDocumentsTab.html
Normal file
@@ -0,0 +1,426 @@
|
||||
<div
|
||||
class="tab-pane active tabdocuments flexContainer"
|
||||
data-bind="
|
||||
attr:{
|
||||
id: tabId
|
||||
},
|
||||
visible: isActive"
|
||||
role="tabpanel"
|
||||
>
|
||||
<!-- Documents Tab Command Bar - Start -->
|
||||
<div class="contentdiv">
|
||||
<div class="tabCommandButton documentMenu">
|
||||
<!-- New Document - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onNewDocumentClick,
|
||||
visible: newDocumentButton.visible() && newDocumentButton.enabled()"
|
||||
>
|
||||
<img class="commandIcon" src="/createDoc.svg" />New Document
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: newDocumentButton.visible() && !newDocumentButton.enabled()"
|
||||
>
|
||||
<img class="commandIcon" src="/createDoc-disabled.svg" />New Document
|
||||
</span>
|
||||
<!-- New Document - End -->
|
||||
|
||||
<!-- New Query - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
visible: !$root.isPreferredApiMongoDB,
|
||||
click: collection.onNewQueryClick"
|
||||
>
|
||||
<img class="commandIcon" src="/AddSqlQuery_16x16.svg" /> New SQL Query
|
||||
</span>
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
visible: $root.isPreferredApiMongoDB,
|
||||
click: collection.onNewMongoQueryClick"
|
||||
>
|
||||
<img class="commandIcon" src="/AddSqlQuery_16x16.svg" /> New Query
|
||||
</span>
|
||||
<!-- New Query - End -->
|
||||
|
||||
<!-- Save New - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onSaveNewDocumentClick,
|
||||
visible: saveNewDocumentButton.visible() && saveNewDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/save-cosmos.svg" />Save
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: saveNewDocumentButton.visible() && !saveNewDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/save-disabled.svg" />Save
|
||||
</span>
|
||||
<!-- Save New - End -->
|
||||
|
||||
<!-- Discard New - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onRevertNewDocumentClick,
|
||||
visible: discardNewDocumentChangesButton.visible() && discardNewDocumentChangesButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/discard.svg" />Discard
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: discardNewDocumentChangesButton.visible() && !discardNewDocumentChangesButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/discard-disabled.svg" />Discard
|
||||
</span>
|
||||
<!-- Discard New - End -->
|
||||
|
||||
<!-- Save Exisiting - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onSaveExisitingDocumentClick,
|
||||
visible: saveExisitingDocumentButton.visible() && saveExisitingDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/save-cosmos.svg" />Update
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: saveExisitingDocumentButton.visible() && !saveExisitingDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/save-disabled.svg" />Update
|
||||
</span>
|
||||
<!-- Save Exisiting - End -->
|
||||
|
||||
<!-- Discard Exisiting - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onRevertExisitingDocumentClick,
|
||||
visible: discardExisitingDocumentChangesButton.visible() && discardExisitingDocumentChangesButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/discard.svg" />Discard
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: discardExisitingDocumentChangesButton.visible() && !discardExisitingDocumentChangesButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/discard-disabled.svg" />Discard
|
||||
</span>
|
||||
<!-- Discard Exisiting - End -->
|
||||
|
||||
<!-- Delete Exisiting - Start -->
|
||||
<span
|
||||
class="commandButton"
|
||||
data-bind="
|
||||
click: onDeleteExisitingDocumentClick,
|
||||
visible: deleteExisitingDocumentButton.visible() && deleteExisitingDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/delete.svg" />Delete
|
||||
</span>
|
||||
<span
|
||||
class="commandButton tabCommandDisabled"
|
||||
data-bind="
|
||||
visible: deleteExisitingDocumentButton.visible() && !deleteExisitingDocumentButton.enabled()"
|
||||
>
|
||||
<img class="imgiconwidth" src="/delete-disabled.svg" />Delete
|
||||
</span>
|
||||
<!-- Delete Exisiting - End -->
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/html" id="toolbarItemTemplate">
|
||||
<!-- ko if: type === "action" -->
|
||||
<div class="toolbar-group" data-bind="visible: visible">
|
||||
<button
|
||||
class="toolbar-group-button"
|
||||
data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
|
||||
>
|
||||
<div class="toolbar-group-button-icon">
|
||||
<div class="toolbar_icon" data-bind="icon: icon"></div>
|
||||
</div>
|
||||
<span data-bind="text: displayName"></span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: type === "toggle" -->
|
||||
<div class="toolbar-group" data-bind="visible: visible">
|
||||
<button
|
||||
class="toolbar-group-button toggle-button"
|
||||
data-bind="hasFocus: focused, attr: {id: id, title: title}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
|
||||
>
|
||||
<div class="toolbar-group-button-icon" data-bind="css: { 'toggle-checked': checked }">
|
||||
<div class="toolbar_icon" data-bind="icon: icon"></div>
|
||||
</div>
|
||||
<span data-bind="text: displayName"></span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<!-- ko if: type === "dropdown" -->
|
||||
<div class="toolbar-group" data-bind="visible: visible">
|
||||
<div class="dropdown" data-bind="attr: {id: (id + '-dropdown')}">
|
||||
<button
|
||||
role="menu"
|
||||
class="toolbar-group-button"
|
||||
data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
|
||||
>
|
||||
<div class="toolbar-group-button-icon">
|
||||
<div class="toolbar_icon" data-bind="icon: icon"></div>
|
||||
</div>
|
||||
<span data-bind="text: displayName"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: type === "separator" -->
|
||||
<div class="toolbar-group vertical-separator" data-bind="visible: visible"></div>
|
||||
<!-- /ko -->
|
||||
</script>
|
||||
<!-- Documents Tab Command Bar - End -->
|
||||
<!-- ko if: false -->
|
||||
<!-- Messagebox Ok Cancel- Start -->
|
||||
<div class="messagebox-background">
|
||||
<div class="messagebox">
|
||||
<h2 class="messagebox-title">Title</h2>
|
||||
<div class="messagebox-text" tabindex="0">Text</div>
|
||||
<div class="messagebox-buttons">
|
||||
<div class="messagebox-buttons-container">
|
||||
<button value="ok" class="messagebox-button-primary">Ok</button>
|
||||
<button value="cancel" class="messagebox-button-default">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Messagebox OK Cancel - End -->
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- Filter - Start -->
|
||||
<div class="filterdivs">
|
||||
<!-- Read-only Filter - Start -->
|
||||
<div
|
||||
class="filterDocCollapsed"
|
||||
data-bind="
|
||||
visible: !isFilterExpanded() && !$root.isPreferredApiMongoDB()"
|
||||
>
|
||||
SELECT * FROM c
|
||||
<span
|
||||
data-bind="
|
||||
text: appliedFilter"
|
||||
></span>
|
||||
<button
|
||||
class="filterbtnstyle queryButton"
|
||||
data-bind="
|
||||
click: onShowFilterClick"
|
||||
>
|
||||
Edit Filter
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="filterDocCollapsed"
|
||||
data-bind="
|
||||
visible: !isFilterExpanded() && $root.isPreferredApiMongoDB()"
|
||||
>
|
||||
<span
|
||||
data-bind="
|
||||
visible: appliedFilter().length > 0"
|
||||
>Filter :
|
||||
</span>
|
||||
<span
|
||||
data-bind="
|
||||
visible: !appliedFilter().length > 0"
|
||||
>No filter applied</span
|
||||
>
|
||||
<span
|
||||
data-bind="
|
||||
text: appliedFilter"
|
||||
></span>
|
||||
<button
|
||||
class="filterbtnstyle queryButton"
|
||||
data-bind="
|
||||
click: onShowFilterClick"
|
||||
>
|
||||
Edit Filter
|
||||
</button>
|
||||
</div>
|
||||
<!-- Read-only Filter - End -->
|
||||
|
||||
<!-- Editable Filter - start -->
|
||||
<div
|
||||
class="filterDocExpanded"
|
||||
data-bind="
|
||||
visible: isFilterExpanded"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<span
|
||||
class="filterspan"
|
||||
data-bind="
|
||||
visible: !$root.isPreferredApiMongoDB()"
|
||||
>
|
||||
SELECT * FROM c
|
||||
</span>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
list="filtersList"
|
||||
class="querydropdown"
|
||||
title="Type a query predicate or choose one from the list."
|
||||
data-bind="
|
||||
attr:{
|
||||
placeholder:$root.isPreferredApiMongoDB()?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
|
||||
},
|
||||
textInput: filterContent"
|
||||
/>
|
||||
|
||||
<datalist
|
||||
id="filtersList"
|
||||
data-bind="
|
||||
foreach: lastFilterContents"
|
||||
>
|
||||
<option
|
||||
data-bind="
|
||||
value: $data"
|
||||
></option>
|
||||
</datalist>
|
||||
|
||||
<span class="filterbuttonpad">
|
||||
<button
|
||||
class="filterbtnstyle queryButton"
|
||||
data-bind="
|
||||
click: refreshDocumentsGrid,
|
||||
enable: applyFilterButton.enabled"
|
||||
>
|
||||
Apply Filter
|
||||
</button>
|
||||
</span>
|
||||
<span
|
||||
class="filterclose"
|
||||
data-bind="
|
||||
click: onHideFilterClick"
|
||||
>
|
||||
<img src="/close-black.svg" style="height: 14px; width: 14px" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Editable Filter - End -->
|
||||
</div>
|
||||
<!-- Filter - End -->
|
||||
|
||||
<!-- Ids and Editor - Start -->
|
||||
<div>
|
||||
<div class="row rowoverride documentsTabGridAndEditor">
|
||||
<div class="documentsGridHeaderContainer documentsContainer">
|
||||
<!-- ko if: !partitionKeyProperty -->
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<!-- ko if: $root.isPreferredApiMongoDB -->
|
||||
<td class="documentsGridHeader">_id</td>
|
||||
<!-- /ko -->
|
||||
<!-- ko if: !$root.isPreferredApiMongoDB() -->
|
||||
<td class="documentsGridHeader">id</td>
|
||||
<!-- /ko -->
|
||||
<td class="refreshColHeader">
|
||||
<img class="refreshcol" src="/refresh-cosmos.svg" data-bind="click: refreshDocumentsGrid" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: partitionKeyProperty -->
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="documentsGridHeader fixedWidthHeader">_id</td>
|
||||
<td
|
||||
class="documentsGridHeader documentsGridPartition"
|
||||
data-bind="
|
||||
attr: {
|
||||
title: partitionKeyPropertyHeader
|
||||
},
|
||||
text: partitionKeyPropertyHeader"
|
||||
></td>
|
||||
<td class="refreshColHeader">
|
||||
<img class="refreshcol" src="/refresh-cosmos.svg" data-bind="click: refreshDocumentsGrid" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
<!-- Document Ids - Start -->
|
||||
<div
|
||||
class="tabdocuments scrollable"
|
||||
data-bind="
|
||||
attr: {
|
||||
id: documentContentsGridId,
|
||||
tabindex: collection.documentIds().length <= 0 ? -1 : 0
|
||||
},
|
||||
style: { height: dataContentsGridScrollHeight },
|
||||
event: { keydown: accessibleDocumentList.onKeyDown }"
|
||||
>
|
||||
<table class="table can-select table-hover dataTable">
|
||||
<tbody id="tbodycontent">
|
||||
<!-- ko foreach: documentIds -->
|
||||
<tr
|
||||
class="pointer accessibleListElement"
|
||||
data-bind="
|
||||
click: $data.click,
|
||||
css: {
|
||||
gridRowSelected: $parent.selectedDocumentId && $parent.selectedDocumentId() && $parent.selectedDocumentId().rid === $data.rid,
|
||||
gridRowHighlighted: $parent.accessibleDocumentList.currentItem() && $parent.accessibleDocumentList.currentItem().rid === $data.rid
|
||||
}"
|
||||
>
|
||||
<td style="width: 82px">
|
||||
<a
|
||||
data-bind="
|
||||
text: $data.id, attr: { title: $data.id }"
|
||||
></a>
|
||||
</td>
|
||||
<!-- ko if: $data.partitionKeyProperty -->
|
||||
<td><a data-bind="text: $data.partitionKeyValue, attr: { title: $data.partitionKeyValue }"></a></td>
|
||||
<!-- /ko -->
|
||||
</tr>
|
||||
<!-- /ko -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="loadMore">
|
||||
<a role="button" data-bind="click: loadNextPage, event: { keypress: onLoadMoreKeyInput }" tabindex="0"
|
||||
>Load more</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Document Ids - End -->
|
||||
|
||||
<!-- Editor - Start -->
|
||||
<div id="divcontent" style="float: left; width: calc(100% - 200px)">
|
||||
<div
|
||||
style="height: 100vh; border-left: 1px solid #d6d7d8; float: initial; display: flow-root !important"
|
||||
data-bind="
|
||||
attr: {
|
||||
id: documentEditorId
|
||||
},
|
||||
css: {
|
||||
mongoDocumentEditor:$root.isPreferredApiMongoDB()
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<!-- Editor - End -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Ids and Editor - End -->
|
||||
</div>
|
||||
@@ -5,10 +5,8 @@ import QueryTab from "./QueryTab";
|
||||
import * as HeadersUtility from "../../Common/HeadersUtility";
|
||||
import { queryIterator } from "../../Common/MongoProxyClient";
|
||||
import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
|
||||
import template from "./MongoQueryTab.html";
|
||||
|
||||
export default class MongoQueryTab extends QueryTab {
|
||||
public static readonly component = { name: "mongo-query-tab", template };
|
||||
public collection: ViewModels.Collection;
|
||||
|
||||
constructor(options: ViewModels.QueryTabOptions) {
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
import * as ko from "knockout";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { HashMap } from "../../Common/HashMap";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
import * as ko from "knockout";
|
||||
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 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 { HashMap } from "../../Common/HashMap";
|
||||
import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
|
||||
import Explorer from "../Explorer";
|
||||
import template from "./MongoShellTab.html";
|
||||
import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
|
||||
import TabsBase from "./TabsBase";
|
||||
import { userContext } from "../../UserContext";
|
||||
import { configContext, Platform } from "../../ConfigContext";
|
||||
|
||||
export default class MongoShellTab extends TabsBase {
|
||||
public static readonly component = { name: "mongo-shell-tab", template };
|
||||
public url: ko.Computed<string>;
|
||||
private _container: Explorer;
|
||||
private _runtimeEndpoint: string;
|
||||
@@ -33,7 +33,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 (userContext.portalEnv === "localhost") {
|
||||
if (this._container.serverId() === "localhost") {
|
||||
baseUrl = "/content/mongoshell/";
|
||||
}
|
||||
|
||||
@@ -85,10 +85,10 @@ export default class MongoShellTab extends TabsBase {
|
||||
}
|
||||
|
||||
private handleReadyMessage(event: MessageEvent, shellIframe: HTMLIFrameElement) {
|
||||
if (typeof event.data["kind"] !== "string") {
|
||||
if (typeof event.data["data"] !== "string") {
|
||||
return;
|
||||
}
|
||||
if (event.data.kind !== "ready") {
|
||||
if (event.data.data !== "ready") {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -33,7 +33,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
|
||||
import { toJS, stringifyNotebook } from "@nteract/commutable";
|
||||
import { appInsights } from "../../Shared/appInsights";
|
||||
import { userContext } from "../../UserContext";
|
||||
import template from "./NotebookV2Tab.html";
|
||||
|
||||
export interface NotebookTabOptions extends ViewModels.TabOptions {
|
||||
account: DataModels.DatabaseAccount;
|
||||
@@ -43,7 +42,6 @@ export interface NotebookTabOptions extends ViewModels.TabOptions {
|
||||
}
|
||||
|
||||
export default class NotebookTabV2 extends TabsBase {
|
||||
public static readonly component = { name: "notebookv2-tab", template };
|
||||
private static clientManager: NotebookClientV2;
|
||||
private container: Explorer;
|
||||
public notebookPath: ko.Observable<string>;
|
||||
|
||||
@@ -10,7 +10,6 @@ import TabsBase from "./TabsBase";
|
||||
import Explorer from "../Explorer";
|
||||
import { DatabaseAccount } from "../../Contracts/DataModels";
|
||||
import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
|
||||
import template from "./NotebookViewerTab.html";
|
||||
|
||||
interface NotebookViewerTabOptions extends ViewModels.TabOptions {
|
||||
account: DatabaseAccount;
|
||||
@@ -39,7 +38,6 @@ class NotebookViewerComponentAdapter implements ReactAdapter {
|
||||
}
|
||||
|
||||
export default class NotebookViewerTab extends TabsBase {
|
||||
public static readonly component = { name: "notebook-viewer-tab", template };
|
||||
private container: Explorer;
|
||||
public notebookUrl: string;
|
||||
|
||||
|
||||
@@ -17,7 +17,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
|
||||
import { queryDocumentsPage } from "../../Common/dataAccess/queryDocumentsPage";
|
||||
import template from "./QueryTab.html";
|
||||
|
||||
enum ToggleState {
|
||||
Result,
|
||||
@@ -25,7 +24,6 @@ enum ToggleState {
|
||||
}
|
||||
|
||||
export default class QueryTab extends TabsBase implements ViewModels.WaitsForTemplate {
|
||||
public static readonly component = { name: "query-tab", template };
|
||||
public queryEditorId: string;
|
||||
public executeQueryButton: ViewModels.Button;
|
||||
public fetchNextPageButton: ViewModels.Button;
|
||||
|
||||
@@ -15,11 +15,9 @@ import EditEntityIcon from "../../../images/Edit-entity.svg";
|
||||
import DeleteEntitiesIcon from "../../../images/DeleteEntities.svg";
|
||||
import Explorer from "../Explorer";
|
||||
import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
|
||||
import template from "./QueryTablesTab.html";
|
||||
|
||||
// Will act as table explorer class
|
||||
export default class QueryTablesTab extends TabsBase {
|
||||
public static readonly component = { name: "tables-query-tab", template };
|
||||
public collection: ViewModels.Collection;
|
||||
public tableEntityListViewModel = ko.observable<TableEntityListViewModel>();
|
||||
public queryViewModel = ko.observable<QueryViewModel>();
|
||||
|
||||
@@ -9,10 +9,8 @@ import * as Constants from "../../Common/Constants";
|
||||
import { Action } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import template from "./SettingsTabV2.html";
|
||||
|
||||
export class SettingsTabV2 extends TabsBase {
|
||||
public static readonly component = { name: "collection-settings-tab-v2", template };
|
||||
public settingsComponentAdapter: SettingsComponentAdapter;
|
||||
|
||||
constructor(options: ViewModels.TabOptions) {
|
||||
@@ -89,7 +87,6 @@ export class CollectionSettingsTabV2 extends SettingsTabV2 {
|
||||
}
|
||||
|
||||
export class DatabaseSettingsTabV2 extends SettingsTabV2 {
|
||||
public static readonly component = { name: "database-settings-tab-v2", template };
|
||||
private notificationRead: ko.Observable<boolean>;
|
||||
private notification: DataModels.Notification;
|
||||
|
||||
|
||||
@@ -14,7 +14,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
|
||||
import StoredProcedure from "../Tree/StoredProcedure";
|
||||
import ScriptTabBase from "./ScriptTabBase";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import template from "./StoredProcedureTab.html";
|
||||
|
||||
enum ToggleState {
|
||||
Result = "result",
|
||||
@@ -22,7 +21,6 @@ enum ToggleState {
|
||||
}
|
||||
|
||||
export default class StoredProcedureTab extends ScriptTabBase {
|
||||
public static readonly component = { name: "stored-procedure-tab", template };
|
||||
public collection: ViewModels.Collection;
|
||||
public node: StoredProcedure;
|
||||
public executeResultsEditorId: string;
|
||||
|
||||
186
src/Explorer/Tabs/TabComponents.ts
Normal file
186
src/Explorer/Tabs/TabComponents.ts
Normal file
@@ -0,0 +1,186 @@
|
||||
import DocumentsTabTemplate from "./DocumentsTab.html";
|
||||
import ConflictsTabTemplate from "./ConflictsTab.html";
|
||||
import GraphTabTemplate from "./GraphTab.html";
|
||||
import NotebookV2TabTemplate from "./NotebookV2Tab.html";
|
||||
import TerminalTabTemplate from "./TerminalTab.html";
|
||||
import MongoDocumentsTabTemplate from "./MongoDocumentsTab.html";
|
||||
import MongoQueryTabTemplate from "./MongoQueryTab.html";
|
||||
import MongoShellTabTemplate from "./MongoShellTab.html";
|
||||
import QueryTabTemplate from "./QueryTab.html";
|
||||
import QueryTablesTabTemplate from "./QueryTablesTab.html";
|
||||
import SettingsTabV2Template from "./SettingsTabV2.html";
|
||||
import DatabaseSettingsTabTemplate from "./DatabaseSettingsTab.html";
|
||||
import StoredProcedureTabTemplate from "./StoredProcedureTab.html";
|
||||
import TriggerTabTemplate from "./TriggerTab.html";
|
||||
import UserDefinedFunctionTabTemplate from "./UserDefinedFunctionTab.html";
|
||||
import GalleryTabTemplate from "./GalleryTab.html";
|
||||
import NotebookViewerTabTemplate from "./NotebookViewerTab.html";
|
||||
import TabsManagerTemplate from "./TabsManager.html";
|
||||
|
||||
export class TabComponent {
|
||||
constructor(data: any) {
|
||||
return data.data;
|
||||
}
|
||||
}
|
||||
|
||||
export class TabsManager {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: TabsManagerTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class DocumentsTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: DocumentsTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class ConflictsTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: ConflictsTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class GraphTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: GraphTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class NotebookV2Tab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: NotebookV2TabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class TerminalTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: TerminalTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class MongoDocumentsTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: MongoDocumentsTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class MongoQueryTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: MongoQueryTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class MongoShellTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: MongoShellTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class QueryTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: QueryTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class QueryTablesTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: QueryTablesTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class SettingsTabV2 {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: SettingsTabV2Template,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class DatabaseSettingsTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: DatabaseSettingsTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class StoredProcedureTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: StoredProcedureTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class TriggerTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: TriggerTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class UserDefinedFunctionTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: UserDefinedFunctionTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class GalleryTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: GalleryTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class NotebookViewerTab {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: TabComponent,
|
||||
template: NotebookViewerTabTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
|
||||
|
||||
// TODO: Use specific actions for logging telemetry data
|
||||
export default class TabsBase extends WaitsForTemplateViewModel {
|
||||
public static readonly component = { name: "tab", template: "" };
|
||||
public closeTabButton: ViewModels.Button;
|
||||
public node: ViewModels.TreeNode;
|
||||
public collection: ViewModels.CollectionBase;
|
||||
|
||||
@@ -78,9 +78,77 @@
|
||||
<div class="tabPanesContainer">
|
||||
<!-- ko foreach: openedTabs -->
|
||||
<div class="tabs-container" data-bind="visible: $data.isActive">
|
||||
<span
|
||||
data-bind="class: $data.constructor.component.name, component: { name: $data.constructor.component.name, params: $data }"
|
||||
></span>
|
||||
<!-- ko if: $data.tabKind === 0 -->
|
||||
<documents-tab params="{data: $data}"></documents-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 1 -->
|
||||
<settings-tab params="{data: $data}"></settings-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 2 -->
|
||||
<stored-procedure-tab params="{data: $data}"></stored-procedure-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 3 -->
|
||||
<user-defined-function-tab params="{data: $data}"></user-defined-function-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 4 -->
|
||||
<trigger-tab params="{data: $data}"></trigger-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 5 -->
|
||||
<query-tab params="{data: $data}"></query-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 6 -->
|
||||
<graph-tab params="{data: $data}"></graph-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 9 -->
|
||||
<tables-query-tab class="flexContainer" params="{data: $data}"></tables-query-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 10 -->
|
||||
<mongo-shell-tab params="{data: $data}"></mongo-shell-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 11 -->
|
||||
<database-settings-tab params="{data: $data}"></database-settings-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 12 -->
|
||||
<conflicts-tab params="{data: $data}"></conflicts-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 14 -->
|
||||
<terminal-tab params="{data: $data}"></terminal-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 15 -->
|
||||
<notebookv2-tab params="{data: $data}"></notebookv2-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 16 -->
|
||||
<spark-master-tab params="{data: $data}"></spark-master-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 17 -->
|
||||
<gallery-tab params="{data: $data}"></gallery-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 18 -->
|
||||
<notebook-viewer-tab params="{data: $data}"></notebook-viewer-tab>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 20 -->
|
||||
<collection-settings-tab-v2 params="{data: $data}"></collection-settings-tab-v2>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $data.tabKind === 21 -->
|
||||
<database-settings-tab-v2 params="{data: $data}"></database-settings-tab-v2>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import * as ko from "knockout";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import TabsManagerTemplate from "./TabsManager.html";
|
||||
import Explorer from "../Explorer";
|
||||
import TabsBase from "./TabsBase";
|
||||
|
||||
@@ -81,3 +82,14 @@ export class TabsManager {
|
||||
return this.activeTab() && this.activeTab().tabKind === tabKind;
|
||||
}
|
||||
}
|
||||
|
||||
function TabsManagerWrapperViewModel(params: { data: TabsManager }) {
|
||||
return params.data;
|
||||
}
|
||||
|
||||
export function TabsManagerKOComponent(): unknown {
|
||||
return {
|
||||
viewModel: TabsManagerWrapperViewModel,
|
||||
template: TabsManagerTemplate,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@ import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
|
||||
import { NotebookTerminalComponent } from "../Controls/Notebook/NotebookTerminalComponent";
|
||||
import Explorer from "../Explorer";
|
||||
import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
|
||||
import template from "./TerminalTab.html";
|
||||
|
||||
export interface TerminalTabOptions extends ViewModels.TabOptions {
|
||||
account: DataModels.DatabaseAccount;
|
||||
@@ -39,7 +38,6 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
|
||||
}
|
||||
|
||||
export default class TerminalTab extends TabsBase {
|
||||
public static readonly component = { name: "terminal-tab", template };
|
||||
private container: Explorer;
|
||||
private notebookTerminalComponentAdapter: NotebookTerminalComponentAdapter;
|
||||
|
||||
|
||||
@@ -9,10 +9,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import Trigger from "../Tree/Trigger";
|
||||
import ScriptTabBase from "./ScriptTabBase";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import template from "./TriggerTab.html";
|
||||
|
||||
export default class TriggerTab extends ScriptTabBase {
|
||||
public static readonly component = { name: "trigger-tab", template };
|
||||
public collection: ViewModels.Collection;
|
||||
public node: Trigger;
|
||||
public triggerType: ViewModels.Editable<string>;
|
||||
|
||||
@@ -8,10 +8,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import UserDefinedFunction from "../Tree/UserDefinedFunction";
|
||||
import ScriptTabBase from "./ScriptTabBase";
|
||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import template from "./UserDefinedFunctionTab.html";
|
||||
|
||||
export default class UserDefinedFunctionTab extends ScriptTabBase {
|
||||
public static readonly component = { name: "user-defined-function-tab", template };
|
||||
public collection: ViewModels.Collection;
|
||||
public node: UserDefinedFunction;
|
||||
constructor(options: ViewModels.ScriptTabOption) {
|
||||
|
||||
@@ -4,24 +4,18 @@ 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 { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||
import { readCollectionOffer } from "../../Common/dataAccess/readCollectionOffer";
|
||||
import { getCollectionUsageSizeInKB } from "../../Common/dataAccess/getCollectionDataUsageSize";
|
||||
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";
|
||||
@@ -38,6 +32,12 @@ 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,6 +1200,7 @@ 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(),
|
||||
@@ -1236,6 +1237,8 @@ export default class Collection implements ViewModels.Collection {
|
||||
startKey
|
||||
);
|
||||
throw error;
|
||||
} finally {
|
||||
this.container.isRefreshingExplorer(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,7 +58,9 @@ export default class Database implements ViewModels.Database {
|
||||
});
|
||||
|
||||
const pendingNotificationsPromise: Promise<DataModels.Notification> = this.getPendingThroughputSplitNotification();
|
||||
const useDatabaseSettingsTabV1 = userContext.features.enableDatabaseSettingsTabV1;
|
||||
const useDatabaseSettingsTabV1: boolean = this.container.isFeatureEnabled(
|
||||
Constants.Features.enableDatabaseSettingsTabV1
|
||||
);
|
||||
const tabKind: ViewModels.CollectionTabKind = useDatabaseSettingsTabV1
|
||||
? ViewModels.CollectionTabKind.DatabaseSettings
|
||||
: ViewModels.CollectionTabKind.DatabaseSettingsV2;
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import * as ko from "knockout";
|
||||
import * as React from "react";
|
||||
import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
|
||||
import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
|
||||
import { TreeComponent, TreeNode, TreeNodeMenuItem, TreeNodeComponent } from "../Controls/TreeComponent/TreeComponent";
|
||||
import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
|
||||
import { ResourceTreeContextMenuButtonFactory } from "../ContextMenuButtonFactory";
|
||||
@@ -18,8 +17,6 @@ import FileIcon from "../../../images/notebook/file-cosmos.svg";
|
||||
import PublishIcon from "../../../images/notebook/publish_content.svg";
|
||||
import { ArrayHashMap } from "../../Common/ArrayHashMap";
|
||||
import { NotebookUtil } from "../Notebook/NotebookUtil";
|
||||
import _ from "underscore";
|
||||
import { IPinnedRepo } from "../../Juno/JunoClient";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { Areas } from "../../Common/Constants";
|
||||
@@ -34,31 +31,39 @@ import Trigger from "./Trigger";
|
||||
import TabsBase from "../Tabs/TabsBase";
|
||||
import { userContext } from "../../UserContext";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import { DataTitle, NotebooksTitle, PseudoDirPath } from "../../hooks/useNotebooks";
|
||||
|
||||
export class ResourceTreeAdapter implements ReactAdapter {
|
||||
public static readonly MyNotebooksTitle = "My Notebooks";
|
||||
public static readonly GitHubReposTitle = "GitHub repos";
|
||||
export interface ResourceTreeProps {
|
||||
// TODO remove eventually
|
||||
explorer: Explorer;
|
||||
|
||||
private static readonly DataTitle = "DATA";
|
||||
private static readonly NotebooksTitle = "NOTEBOOKS";
|
||||
private static readonly PseudoDirPath = "PsuedoDir";
|
||||
lastRefreshedTime: number;
|
||||
|
||||
public parameters: ko.Observable<number>;
|
||||
|
||||
public galleryContentRoot: NotebookContentItem;
|
||||
public myNotebooksContentRoot: NotebookContentItem;
|
||||
public gitHubNotebooksContentRoot: NotebookContentItem;
|
||||
galleryContentRoot: NotebookContentItem;
|
||||
myNotebooksContentRoot: NotebookContentItem;
|
||||
gitHubNotebooksContentRoot: NotebookContentItem;
|
||||
}
|
||||
|
||||
export class ResourceTree extends React.Component<ResourceTreeProps> {
|
||||
private koSubsDatabaseIdMap: ArrayHashMap<ko.Subscription>; // database id -> ko subs
|
||||
private koSubsCollectionIdMap: ArrayHashMap<ko.Subscription>; // collection id -> ko subs
|
||||
private databaseCollectionIdMap: ArrayHashMap<string>; // database id -> collection ids
|
||||
|
||||
public constructor(private container: Explorer) {
|
||||
this.parameters = ko.observable(Date.now());
|
||||
private readonly container: Explorer;
|
||||
|
||||
this.container.selectedNode.subscribe((newValue: any) => this.triggerRender());
|
||||
this.container.tabsManager.activeTab.subscribe((newValue: TabsBase) => this.triggerRender());
|
||||
this.container.isNotebookEnabled.subscribe((newValue) => this.triggerRender());
|
||||
constructor(props: ResourceTreeProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
galleryContentRoot: undefined,
|
||||
myNotebooksContentRoot: undefined,
|
||||
gitHubNotebooksContentRoot: undefined,
|
||||
};
|
||||
|
||||
this.container = props.explorer;
|
||||
|
||||
this.container.selectedNode.subscribe(() => this.triggerRender());
|
||||
this.container.tabsManager.activeTab.subscribe(() => this.triggerRender());
|
||||
this.container.isNotebookEnabled.subscribe(() => this.triggerRender());
|
||||
|
||||
this.koSubsDatabaseIdMap = new ArrayHashMap();
|
||||
this.koSubsCollectionIdMap = new ArrayHashMap();
|
||||
@@ -73,34 +78,9 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
});
|
||||
|
||||
this.container.nonSystemDatabases().forEach((database: ViewModels.Database) => this.watchDatabase(database));
|
||||
this.triggerRender();
|
||||
}
|
||||
|
||||
private traceMyNotebookTreeInfo() {
|
||||
const myNotebooksTree = this.myNotebooksContentRoot;
|
||||
if (myNotebooksTree.children) {
|
||||
// Count 1st generation children (tree is lazy-loaded)
|
||||
const nodeCounts = { files: 0, notebooks: 0, directories: 0 };
|
||||
myNotebooksTree.children.forEach((treeNode) => {
|
||||
switch ((treeNode as NotebookContentItem).type) {
|
||||
case NotebookContentItemType.File:
|
||||
nodeCounts.files++;
|
||||
break;
|
||||
case NotebookContentItemType.Directory:
|
||||
nodeCounts.directories++;
|
||||
break;
|
||||
case NotebookContentItemType.Notebook:
|
||||
nodeCounts.notebooks++;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
TelemetryProcessor.trace(Action.RefreshResourceTreeMyNotebooks, ActionModifiers.Mark, { ...nodeCounts });
|
||||
}
|
||||
}
|
||||
|
||||
public renderComponent(): JSX.Element {
|
||||
render(): JSX.Element {
|
||||
const dataRootNode = this.buildDataTree();
|
||||
const notebooksRootNode = this.buildNotebooksTrees();
|
||||
|
||||
@@ -108,15 +88,15 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
return (
|
||||
<>
|
||||
<AccordionComponent>
|
||||
<AccordionItemComponent title={ResourceTreeAdapter.DataTitle} isExpanded={!this.gitHubNotebooksContentRoot}>
|
||||
<AccordionItemComponent title={DataTitle} isExpanded={!this.props.gitHubNotebooksContentRoot}>
|
||||
<TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
|
||||
</AccordionItemComponent>
|
||||
<AccordionItemComponent title={ResourceTreeAdapter.NotebooksTitle}>
|
||||
<AccordionItemComponent title={NotebooksTitle}>
|
||||
<TreeComponent className="notebookResourceTree" rootNode={notebooksRootNode} />
|
||||
</AccordionItemComponent>
|
||||
</AccordionComponent>
|
||||
|
||||
{this.galleryContentRoot && this.buildGalleryCallout()}
|
||||
{this.props.galleryContentRoot && this.buildGalleryCallout()}
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
@@ -124,71 +104,6 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
}
|
||||
}
|
||||
|
||||
public async initialize(): Promise<void[]> {
|
||||
const refreshTasks: Promise<void>[] = [];
|
||||
|
||||
this.galleryContentRoot = {
|
||||
name: "Gallery",
|
||||
path: "Gallery",
|
||||
type: NotebookContentItemType.File,
|
||||
};
|
||||
|
||||
this.myNotebooksContentRoot = {
|
||||
name: ResourceTreeAdapter.MyNotebooksTitle,
|
||||
path: this.container.getNotebookBasePath(),
|
||||
type: NotebookContentItemType.Directory,
|
||||
};
|
||||
|
||||
// Only if notebook server is available we can refresh
|
||||
if (this.container.notebookServerInfo().notebookServerEndpoint) {
|
||||
refreshTasks.push(
|
||||
this.container.refreshContentItem(this.myNotebooksContentRoot).then(() => {
|
||||
this.triggerRender();
|
||||
this.traceMyNotebookTreeInfo();
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (this.container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
|
||||
this.gitHubNotebooksContentRoot = {
|
||||
name: ResourceTreeAdapter.GitHubReposTitle,
|
||||
path: ResourceTreeAdapter.PseudoDirPath,
|
||||
type: NotebookContentItemType.Directory,
|
||||
};
|
||||
} else {
|
||||
this.gitHubNotebooksContentRoot = undefined;
|
||||
}
|
||||
|
||||
return Promise.all(refreshTasks);
|
||||
}
|
||||
|
||||
public initializeGitHubRepos(pinnedRepos: IPinnedRepo[]): void {
|
||||
if (this.gitHubNotebooksContentRoot) {
|
||||
this.gitHubNotebooksContentRoot.children = [];
|
||||
pinnedRepos?.forEach((pinnedRepo) => {
|
||||
const repoFullName = GitHubUtils.toRepoFullName(pinnedRepo.owner, pinnedRepo.name);
|
||||
const repoTreeItem: NotebookContentItem = {
|
||||
name: repoFullName,
|
||||
path: ResourceTreeAdapter.PseudoDirPath,
|
||||
type: NotebookContentItemType.Directory,
|
||||
children: [],
|
||||
};
|
||||
|
||||
pinnedRepo.branches.forEach((branch) => {
|
||||
repoTreeItem.children.push({
|
||||
name: branch.name,
|
||||
path: GitHubUtils.toContentUri(pinnedRepo.owner, pinnedRepo.name, branch.name, ""),
|
||||
type: NotebookContentItemType.Directory,
|
||||
});
|
||||
});
|
||||
|
||||
this.gitHubNotebooksContentRoot.children.push(repoTreeItem);
|
||||
});
|
||||
|
||||
this.triggerRender();
|
||||
}
|
||||
}
|
||||
|
||||
private buildDataTree(): TreeNode {
|
||||
const databaseTreeNodes: TreeNode[] = this.container.nonSystemDatabases().map((database: ViewModels.Database) => {
|
||||
const databaseNode: TreeNode = {
|
||||
@@ -288,7 +203,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
children.push(schemaNode);
|
||||
}
|
||||
|
||||
if (ResourceTreeAdapter.showScriptNodes(this.container)) {
|
||||
if (ResourceTree.showScriptNodes(this.container)) {
|
||||
children.push(this.buildStoredProcedureNode(collection));
|
||||
children.push(this.buildUserDefinedFunctionsNode(collection));
|
||||
children.push(this.buildTriggerNode(collection));
|
||||
@@ -329,7 +244,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
);
|
||||
},
|
||||
onExpanded: () => {
|
||||
if (ResourceTreeAdapter.showScriptNodes(this.container)) {
|
||||
if (ResourceTree.showScriptNodes(this.container)) {
|
||||
collection.loadStoredProcedures();
|
||||
collection.loadUserDefinedFunctions();
|
||||
collection.loadTriggers();
|
||||
@@ -408,7 +323,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
}
|
||||
|
||||
public buildSchemaNode(collection: ViewModels.Collection): TreeNode {
|
||||
if (collection.analyticalStorageTtl() == undefined) {
|
||||
if (collection.analyticalStorageTtl() === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
@@ -429,12 +344,14 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
}
|
||||
|
||||
private getSchemaNodes(fields: DataModels.IDataField[]): TreeNode[] {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const schema: any = {};
|
||||
|
||||
//unflatten
|
||||
fields.forEach((field: DataModels.IDataField, fieldIndex: number) => {
|
||||
fields.forEach((field: DataModels.IDataField) => {
|
||||
const path: string[] = field.path.split(".");
|
||||
const fieldProperties = [field.dataType.name, `HasNulls: ${field.hasNulls}`];
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let current: any = {};
|
||||
path.forEach((name: string, pathIndex: number) => {
|
||||
if (pathIndex === 0) {
|
||||
@@ -459,9 +376,11 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
});
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const traverse = (obj: any): TreeNode[] => {
|
||||
const children: TreeNode[] = [];
|
||||
|
||||
// eslint-disable-next-line no-null/no-null
|
||||
if (obj !== null && !Array.isArray(obj) && typeof obj === "object") {
|
||||
Object.entries(obj).forEach(([key, value]) => {
|
||||
children.push({ label: key, children: traverse(value) });
|
||||
@@ -477,21 +396,21 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
}
|
||||
|
||||
private buildNotebooksTrees(): TreeNode {
|
||||
let notebooksTree: TreeNode = {
|
||||
const notebooksTree: TreeNode = {
|
||||
label: undefined,
|
||||
isExpanded: true,
|
||||
children: [],
|
||||
};
|
||||
|
||||
if (this.galleryContentRoot) {
|
||||
if (this.props.galleryContentRoot) {
|
||||
notebooksTree.children.push(this.buildGalleryNotebooksTree());
|
||||
}
|
||||
|
||||
if (this.myNotebooksContentRoot) {
|
||||
if (this.props.myNotebooksContentRoot) {
|
||||
notebooksTree.children.push(this.buildMyNotebooksTree());
|
||||
}
|
||||
|
||||
if (this.gitHubNotebooksContentRoot) {
|
||||
if (this.props.gitHubNotebooksContentRoot) {
|
||||
// collapse all other notebook nodes
|
||||
notebooksTree.children.forEach((node) => (node.isExpanded = false));
|
||||
notebooksTree.children.push(this.buildGitHubNotebooksTree());
|
||||
@@ -561,7 +480,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
|
||||
private buildMyNotebooksTree(): TreeNode {
|
||||
const myNotebooksTree: TreeNode = this.buildNotebookDirectoryNode(
|
||||
this.myNotebooksContentRoot,
|
||||
this.props.myNotebooksContentRoot,
|
||||
(item: NotebookContentItem) => {
|
||||
this.container.openNotebook(item).then((hasOpened) => {
|
||||
if (hasOpened) {
|
||||
@@ -582,7 +501,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
|
||||
private buildGitHubNotebooksTree(): TreeNode {
|
||||
const gitHubNotebooksTree: TreeNode = this.buildNotebookDirectoryNode(
|
||||
this.gitHubNotebooksContentRoot,
|
||||
this.props.gitHubNotebooksContentRoot,
|
||||
(item: NotebookContentItem) => {
|
||||
this.container.openNotebook(item).then((hasOpened) => {
|
||||
if (hasOpened) {
|
||||
@@ -654,6 +573,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
/* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
|
||||
NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(activeTab as any).notebookPath() === item.path
|
||||
);
|
||||
},
|
||||
@@ -667,7 +587,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
{
|
||||
label: "Rename",
|
||||
iconSrc: NotebookIcon,
|
||||
onClick: () => this.container.renameNotebook(item),
|
||||
onClick: () => this.container.renameNotebook(item).then(() => this.triggerRender()),
|
||||
},
|
||||
{
|
||||
label: "Delete",
|
||||
@@ -756,7 +676,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
{
|
||||
label: "New Directory",
|
||||
iconSrc: NewNotebookIcon,
|
||||
onClick: () => this.container.onCreateDirectory(item),
|
||||
onClick: () => this.container.onCreateDirectory(item).then(() => this.triggerRender()),
|
||||
},
|
||||
{
|
||||
label: "New Notebook",
|
||||
@@ -809,20 +729,19 @@ export class ResourceTreeAdapter implements ReactAdapter {
|
||||
/* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
|
||||
NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(activeTab as any).notebookPath() === item.path
|
||||
);
|
||||
},
|
||||
contextMenu:
|
||||
createDirectoryContextMenu && item.path !== ResourceTreeAdapter.PseudoDirPath
|
||||
? this.createDirectoryContextMenu(item)
|
||||
: undefined,
|
||||
createDirectoryContextMenu && item.path !== PseudoDirPath ? this.createDirectoryContextMenu(item) : undefined,
|
||||
data: item,
|
||||
children: this.buildChildNodes(item, onFileClick, createDirectoryContextMenu, createFileContextMenu),
|
||||
};
|
||||
}
|
||||
|
||||
public triggerRender() {
|
||||
window.requestAnimationFrame(() => this.parameters(Date.now()));
|
||||
private triggerRender() {
|
||||
this.setState({});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1,6 +1,6 @@
|
||||
import Explorer from "../Explorer";
|
||||
import * as ko from "knockout";
|
||||
import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
|
||||
import { ResourceTree } from "./ResourceTree";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import TabsBase from "../Tabs/TabsBase";
|
||||
|
||||
@@ -26,22 +26,40 @@ describe("ResourceTreeAdapter", () => {
|
||||
it("it should not select if no selected node", () => {
|
||||
const explorer = mockContainer();
|
||||
explorer.selectedNode(undefined);
|
||||
const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
|
||||
const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("foo", "bar", undefined);
|
||||
const resourceTree = new ResourceTree({
|
||||
explorer,
|
||||
lastRefreshedTime: 0,
|
||||
galleryContentRoot: undefined,
|
||||
myNotebooksContentRoot: undefined,
|
||||
gitHubNotebooksContentRoot: undefined,
|
||||
});
|
||||
const isDataNodeSelected = resourceTree.isDataNodeSelected("foo", "bar", undefined);
|
||||
expect(isDataNodeSelected).toBeFalsy();
|
||||
});
|
||||
|
||||
it("it should not select incorrect subnodekinds", () => {
|
||||
const resourceTreeAdapter = new ResourceTreeAdapter(mockContainer());
|
||||
const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("foo", "bar", undefined);
|
||||
const resourceTree = new ResourceTree({
|
||||
explorer: mockContainer(),
|
||||
lastRefreshedTime: 0,
|
||||
galleryContentRoot: undefined,
|
||||
myNotebooksContentRoot: undefined,
|
||||
gitHubNotebooksContentRoot: undefined,
|
||||
});
|
||||
const isDataNodeSelected = resourceTree.isDataNodeSelected("foo", "bar", undefined);
|
||||
expect(isDataNodeSelected).toBeFalsy();
|
||||
});
|
||||
|
||||
it("it should not select if no active tab", () => {
|
||||
const explorer = mockContainer();
|
||||
explorer.tabsManager.activeTab(undefined);
|
||||
const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
|
||||
const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("foo", "bar", undefined);
|
||||
const resourceTree = new ResourceTree({
|
||||
explorer,
|
||||
lastRefreshedTime: 0,
|
||||
galleryContentRoot: undefined,
|
||||
myNotebooksContentRoot: undefined,
|
||||
gitHubNotebooksContentRoot: undefined,
|
||||
});
|
||||
const isDataNodeSelected = resourceTree.isDataNodeSelected("foo", "bar", undefined);
|
||||
expect(isDataNodeSelected).toBeFalsy();
|
||||
});
|
||||
|
||||
@@ -54,8 +72,14 @@ describe("ResourceTreeAdapter", () => {
|
||||
id: ko.observable<string>("dbid"),
|
||||
selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
|
||||
} as unknown) as ViewModels.TreeNode);
|
||||
const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
|
||||
const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", undefined, [
|
||||
const resourceTree = new ResourceTree({
|
||||
explorer,
|
||||
lastRefreshedTime: 0,
|
||||
galleryContentRoot: undefined,
|
||||
myNotebooksContentRoot: undefined,
|
||||
gitHubNotebooksContentRoot: undefined,
|
||||
});
|
||||
const isDataNodeSelected = resourceTree.isDataNodeSelected("dbid", undefined, [
|
||||
ViewModels.CollectionTabKind.Documents,
|
||||
]);
|
||||
expect(isDataNodeSelected).toBeTruthy();
|
||||
@@ -74,8 +98,14 @@ describe("ResourceTreeAdapter", () => {
|
||||
id: ko.observable<string>("collid"),
|
||||
selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
|
||||
} as unknown) as ViewModels.TreeNode);
|
||||
const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
|
||||
let isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [subNodeKind]);
|
||||
const resourceTree = new ResourceTree({
|
||||
explorer,
|
||||
lastRefreshedTime: 0,
|
||||
galleryContentRoot: undefined,
|
||||
myNotebooksContentRoot: undefined,
|
||||
gitHubNotebooksContentRoot: undefined,
|
||||
});
|
||||
let isDataNodeSelected = resourceTree.isDataNodeSelected("dbid", "collid", [subNodeKind]);
|
||||
expect(isDataNodeSelected).toBeTruthy();
|
||||
|
||||
subNodeKind = ViewModels.CollectionTabKind.Graph;
|
||||
@@ -89,7 +119,7 @@ describe("ResourceTreeAdapter", () => {
|
||||
id: ko.observable<string>("collid"),
|
||||
selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
|
||||
} as unknown) as ViewModels.TreeNode);
|
||||
isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [subNodeKind]);
|
||||
isDataNodeSelected = resourceTree.isDataNodeSelected("dbid", "collid", [subNodeKind]);
|
||||
expect(isDataNodeSelected).toBeTruthy();
|
||||
});
|
||||
|
||||
@@ -105,8 +135,14 @@ describe("ResourceTreeAdapter", () => {
|
||||
explorer.tabsManager.activeTab({
|
||||
tabKind: ViewModels.CollectionTabKind.Documents,
|
||||
} as TabsBase);
|
||||
const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
|
||||
const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [
|
||||
const resourceTree = new ResourceTree({
|
||||
explorer,
|
||||
lastRefreshedTime: 0,
|
||||
galleryContentRoot: undefined,
|
||||
myNotebooksContentRoot: undefined,
|
||||
gitHubNotebooksContentRoot: undefined,
|
||||
});
|
||||
const isDataNodeSelected = resourceTree.isDataNodeSelected("dbid", "collid", [
|
||||
ViewModels.CollectionTabKind.Settings,
|
||||
]);
|
||||
expect(isDataNodeSelected).toBeFalsy();
|
||||
|
||||
@@ -2,7 +2,7 @@ import * as ko from "knockout";
|
||||
import * as DataModels from "../../Contracts/DataModels";
|
||||
import * as ViewModels from "../../Contracts/ViewModels";
|
||||
import React from "react";
|
||||
import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
|
||||
import { ResourceTree } from "./ResourceTree";
|
||||
import { shallow } from "enzyme";
|
||||
import { TreeComponent, TreeNode, TreeComponentProps } from "../Controls/TreeComponent/TreeComponent";
|
||||
import Explorer from "../Explorer";
|
||||
@@ -237,7 +237,13 @@ const createMockCollection = (): ViewModels.Collection => {
|
||||
|
||||
describe("Resource tree for schema", () => {
|
||||
const mockContainer: Explorer = createMockContainer();
|
||||
const resourceTree = new ResourceTreeAdapter(mockContainer);
|
||||
const resourceTree = new ResourceTree({
|
||||
explorer: mockContainer,
|
||||
lastRefreshedTime: 0,
|
||||
galleryContentRoot: undefined,
|
||||
myNotebooksContentRoot: undefined,
|
||||
gitHubNotebooksContentRoot: undefined,
|
||||
});
|
||||
|
||||
it("should render", () => {
|
||||
const rootNode: TreeNode = resourceTree.buildSchemaNode(createMockCollection());
|
||||
|
||||
@@ -3,14 +3,13 @@ import * as ko from "knockout";
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { deleteStoredProcedure } from "../../Common/dataAccess/deleteStoredProcedure";
|
||||
import { executeStoredProcedure } from "../../Common/dataAccess/executeStoredProcedure";
|
||||
import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
|
||||
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 Explorer from "../Explorer";
|
||||
import StoredProcedureTab from "../Tabs/StoredProcedureTab";
|
||||
import TabsBase from "../Tabs/TabsBase";
|
||||
import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
|
||||
|
||||
const sampleStoredProcedureBody: string = `// SAMPLE STORED PROCEDURE
|
||||
function sample(prefix) {
|
||||
@@ -57,7 +56,7 @@ export default class StoredProcedure {
|
||||
this.rid = data._rid;
|
||||
this.id = ko.observable(data.id);
|
||||
this.body = ko.observable(data.body as string);
|
||||
this.isExecuteEnabled = userContext.features.executeSproc;
|
||||
this.isExecuteEnabled = this.container.isFeatureEnabled(Constants.Features.executeSproc);
|
||||
}
|
||||
|
||||
public static create(source: ViewModels.Collection, event: MouseEvent) {
|
||||
|
||||
@@ -27,7 +27,7 @@ const onInit = async () => {
|
||||
const props: GalleryAndNotebookViewerComponentProps = {
|
||||
junoClient: new JunoClient(),
|
||||
selectedTab: galleryViewerProps.selectedTab || GalleryTab.PublicGallery,
|
||||
sortBy: galleryViewerProps.sortBy || SortBy.MostRecent,
|
||||
sortBy: galleryViewerProps.sortBy || SortBy.MostViewed,
|
||||
searchText: galleryViewerProps.searchText,
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Octokit } from "@octokit/rest";
|
||||
import { HttpStatusCodes } from "../Common/Constants";
|
||||
import * as Logger from "../Common/Logger";
|
||||
import * as UrlUtility from "../Common/UrlUtility";
|
||||
import 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 * as UrlUtility from "../Common/UrlUtility";
|
||||
import UrlUtility from "../Common/UrlUtility";
|
||||
import { getErrorMessage } from "../Common/ErrorHandlingUtils";
|
||||
|
||||
export interface GitHubContentProviderParams {
|
||||
|
||||
5
src/Libs/is-integer-polyfill.js
Normal file
5
src/Libs/is-integer-polyfill.js
Normal file
@@ -0,0 +1,5 @@
|
||||
Number.isInteger =
|
||||
Number.isInteger ||
|
||||
function(value) {
|
||||
return typeof value === "number" && isFinite(value) && Math.floor(value) === value;
|
||||
};
|
||||
@@ -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 update completed.",
|
||||
"UpdateCompletedMessageTitle":"Update succeeded",
|
||||
"UpdateCompletedMessageText": "Data updation completed.",
|
||||
"SubmissionMessageSuccessTitle": "Update started",
|
||||
"SubmissionMessageForNewRegionText": "Data update started. Region changed.",
|
||||
"SubmissionMessageForSameRegionText": "Data update started. Region not changed.",
|
||||
@@ -37,56 +37,6 @@
|
||||
"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."
|
||||
}
|
||||
}
|
||||
}
|
||||
61
src/Main.tsx
61
src/Main.tsx
@@ -1,8 +1,18 @@
|
||||
// CSS Dependencies
|
||||
import "abort-controller/polyfill";
|
||||
import "babel-polyfill";
|
||||
import "bootstrap/dist/css/bootstrap.css";
|
||||
import "es6-object-assign/auto";
|
||||
import "es6-symbol/implement";
|
||||
import "object.entries/auto";
|
||||
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
|
||||
import "promise-polyfill/src/polyfill";
|
||||
import "promise.prototype.finally/auto";
|
||||
import React, { useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "url-polyfill/url-polyfill.min";
|
||||
import "webcrypto-liner/build/webcrypto-liner.shim.min";
|
||||
import "whatwg-fetch";
|
||||
import "../externals/jquery-ui.min.css";
|
||||
import "../externals/jquery-ui.min.js";
|
||||
import "../externals/jquery-ui.structure.min.css";
|
||||
@@ -27,7 +37,6 @@ 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";
|
||||
@@ -35,9 +44,8 @@ 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, { ExplorerParams } from "./Explorer/Explorer";
|
||||
import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
|
||||
import "./Explorer/Graph/NewVertexComponent/newVertexComponent.less";
|
||||
import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
|
||||
@@ -52,11 +60,12 @@ import "./Explorer/SplashScreen/SplashScreen.less";
|
||||
import "./Explorer/Tabs/QueryTab.less";
|
||||
import { useConfig } from "./hooks/useConfig";
|
||||
import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
|
||||
import { useNotebooks } from "./hooks/useNotebooks";
|
||||
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();
|
||||
|
||||
@@ -79,6 +88,18 @@ const App: React.FunctionComponent = () => {
|
||||
|
||||
const { isPanelOpen, panelContent, headerText, openSidePanel, closeSidePanel } = useSidePanel();
|
||||
|
||||
// TODO Figure out a better pattern: this is because we don't have container, yet
|
||||
const context: { container: Explorer } = { container: undefined };
|
||||
const {
|
||||
lastRefreshTime,
|
||||
galleryContentRoot,
|
||||
myNotebooksContentRoot,
|
||||
gitHubNotebooksContentRoot,
|
||||
refreshList,
|
||||
initializeGitHubRepos,
|
||||
getMyNotebooksContentRoot,
|
||||
} = useNotebooks(context);
|
||||
|
||||
const explorerParams: ExplorerParams = {
|
||||
setIsNotificationConsoleExpanded,
|
||||
setNotificationConsoleData,
|
||||
@@ -87,10 +108,14 @@ const App: React.FunctionComponent = () => {
|
||||
closeSidePanel,
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onRefreshNotebookList: refreshList,
|
||||
initializeGitHubRepos,
|
||||
getMyNotebooksContentRoot,
|
||||
};
|
||||
const config = useConfig();
|
||||
const explorer = useKnockoutExplorer(config?.platform, explorerParams);
|
||||
|
||||
context.container = explorer;
|
||||
if (!explorer) {
|
||||
return <LoadingExplorer />;
|
||||
}
|
||||
@@ -146,11 +171,19 @@ const App: React.FunctionComponent = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{userContext.authType === AuthType.ResourceToken ? (
|
||||
<div style={{ overflowY: "auto" }} data-bind="react:resourceTreeForResourceToken" />
|
||||
) : (
|
||||
<div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
|
||||
)}
|
||||
<div
|
||||
style={{ overflowY: "auto" }}
|
||||
data-bind="if: isAuthWithResourceToken(), react:resourceTreeForResourceToken"
|
||||
/>
|
||||
<div style={{ overflowY: "auto" }} data-bind="if: !isAuthWithResourceToken()">
|
||||
<ResourceTree
|
||||
explorer={explorer}
|
||||
lastRefreshedTime={lastRefreshTime}
|
||||
galleryContentRoot={galleryContentRoot}
|
||||
myNotebooksContentRoot={myNotebooksContentRoot}
|
||||
gitHubNotebooksContentRoot={gitHubNotebooksContentRoot}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Collections Window - End */}
|
||||
</div>
|
||||
@@ -200,12 +233,18 @@ const App: React.FunctionComponent = () => {
|
||||
{/* Splitter - End */}
|
||||
</div>
|
||||
{/* Collections Tree - End */}
|
||||
<div className="connectExplorerContainer" data-bind="visible: tabsManager.openedTabs().length === 0">
|
||||
<div
|
||||
className="connectExplorerContainer"
|
||||
data-bind="visible: !isRefreshingExplorer() && tabsManager.openedTabs().length === 0"
|
||||
>
|
||||
<form className="connectExplorerFormContainer">
|
||||
<SplashScreen explorer={explorer} />
|
||||
</form>
|
||||
</div>
|
||||
<div className="tabsManagerContainer" data-bind='component: { name: "tabs-manager", params: tabsManager }' />
|
||||
<div
|
||||
className="tabsManagerContainer"
|
||||
data-bind='component: { name: "tabs-manager", params: {data: tabsManager} }'
|
||||
/>
|
||||
</div>
|
||||
{/* Collections Tree and Tabs - End */}
|
||||
<div
|
||||
|
||||
@@ -1,22 +1,17 @@
|
||||
import { extractFeatures } from "./extractFeatures";
|
||||
|
||||
describe("extractFeatures", () => {
|
||||
it("correctly detects feature flags in a case insensitive manner", () => {
|
||||
const url = "https://localhost:10001/12345/notebook";
|
||||
const token = "super secret";
|
||||
const notebooksEnabled = false;
|
||||
const params = new URLSearchParams({
|
||||
platform: "Hosted",
|
||||
"feature.NOTEBOOKSERVERURL": url,
|
||||
"feature.NoTeBooKServerToken": token,
|
||||
"feature.NotAFeature": "nope",
|
||||
"feature.ENABLEnotebooks": notebooksEnabled.toString(),
|
||||
});
|
||||
|
||||
it("correctly detects feature flags", () => {
|
||||
// Search containing non-features, with Camelcase keys and uri encoded values
|
||||
const params = new URLSearchParams(
|
||||
"?platform=Hosted&feature.notebookserverurl=https%3A%2F%2Flocalhost%3A10001%2F12345%2Fnotebook&feature.notebookServerToken=token&feature.enablenotebooks=true&key=mykey"
|
||||
);
|
||||
const features = extractFeatures(params);
|
||||
|
||||
expect(features.notebookServerUrl).toBe(url);
|
||||
expect(features.notebookServerToken).toBe(token);
|
||||
expect(features.enableNotebooks).toBe(notebooksEnabled);
|
||||
expect(features).toEqual({
|
||||
notebookserverurl: "https://localhost:10001/12345/notebook",
|
||||
notebookservertoken: "token",
|
||||
enablenotebooks: "true",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,56 +1,14 @@
|
||||
export type Features = {
|
||||
readonly canExceedMaximumValue: boolean;
|
||||
readonly cosmosdb: boolean;
|
||||
readonly enableChangeFeedPolicy: boolean;
|
||||
readonly enableDatabaseSettingsTabV1: boolean;
|
||||
readonly enableFixedCollectionWithSharedThroughput: boolean;
|
||||
readonly enableKOPanel: boolean;
|
||||
readonly enableNotebooks: boolean;
|
||||
readonly enableReactPane: boolean;
|
||||
readonly enableRightPanelV2: boolean;
|
||||
readonly enableSchema: boolean;
|
||||
readonly enableSDKoperations: boolean;
|
||||
readonly enableSpark: boolean;
|
||||
readonly enableTtl: boolean;
|
||||
readonly executeSproc: boolean;
|
||||
readonly hostedDataExplorer: boolean;
|
||||
readonly livyEndpoint?: string;
|
||||
readonly notebookBasePath?: string;
|
||||
readonly notebookServerToken?: string;
|
||||
readonly notebookServerUrl?: string;
|
||||
readonly selfServeType?: string;
|
||||
readonly showMinRUSurvey: boolean;
|
||||
readonly ttl90Days: boolean;
|
||||
};
|
||||
|
||||
export function extractFeatures(params?: URLSearchParams): Features {
|
||||
params = params || new URLSearchParams(window.location.search);
|
||||
const downcased = new URLSearchParams();
|
||||
params.forEach((value, key) => downcased.append(key.toLocaleLowerCase(), value));
|
||||
const get = (key: string) => downcased.get("feature." + key.toLocaleLowerCase()) ?? undefined;
|
||||
|
||||
return {
|
||||
canExceedMaximumValue: "true" === get("canexceedmaximumvalue"),
|
||||
cosmosdb: "true" === get("cosmosdb"),
|
||||
enableChangeFeedPolicy: "true" === get("enablechangefeedpolicy"),
|
||||
enableDatabaseSettingsTabV1: "true" === get("enabledbsettingsv1"),
|
||||
enableFixedCollectionWithSharedThroughput: "true" === get("enablefixedcollectionwithsharedthroughput"),
|
||||
enableKOPanel: "true" === get("enablekopanel"),
|
||||
enableNotebooks: "true" === get("enablenotebooks"),
|
||||
enableReactPane: "true" === get("enablereactpane"),
|
||||
enableRightPanelV2: "true" === get("enablerightpanelv2"),
|
||||
enableSchema: "true" === get("enableschema"),
|
||||
enableSDKoperations: "true" === get("enablesdkoperations"),
|
||||
enableSpark: "true" === get("enablespark"),
|
||||
enableTtl: "true" === get("enablettl"),
|
||||
executeSproc: "true" === get("dataexplorerexecutesproc"),
|
||||
hostedDataExplorer: "true" === get("hosteddataexplorerenabled"),
|
||||
livyEndpoint: get("livyendpoint"),
|
||||
notebookBasePath: get("notebookbasepath"),
|
||||
notebookServerToken: get("notebookservertoken"),
|
||||
notebookServerUrl: get("notebookserverurl"),
|
||||
selfServeType: get("selfservetype"),
|
||||
showMinRUSurvey: "true" === get("showminrusurvey"),
|
||||
ttl90Days: "true" === get("ttl90days"),
|
||||
};
|
||||
export function extractFeatures(params?: URLSearchParams): { [key: string]: string } {
|
||||
params = params || new URLSearchParams(window.parent.location.search);
|
||||
const featureParamRegex = /feature.(.*)/i;
|
||||
const features: { [key: string]: string } = {};
|
||||
params.forEach((value: string, param: string) => {
|
||||
if (featureParamRegex.test(param)) {
|
||||
const matches: string[] = param.match(featureParamRegex);
|
||||
if (matches.length > 0) {
|
||||
features[matches[1].toLowerCase()] = value;
|
||||
}
|
||||
}
|
||||
});
|
||||
return features;
|
||||
}
|
||||
|
||||
@@ -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 * as UrlUtility from "../Common/UrlUtility";
|
||||
import UrlUtility from "../Common/UrlUtility";
|
||||
|
||||
export class ResourceProviderClient<T> implements IResourceProviderClient<T> {
|
||||
private httpClient: HttpClient;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user