Compare commits

..

5 Commits

Author SHA1 Message Date
Senthamil Sindhu
682c2b781b Remove Enable Azure synapse link for Cassandra 2023-04-10 09:48:17 -07:00
Senthamil Sindhu
1b06d4b247 Remove Enable Azure Synapse link button for Tables API 2023-04-07 08:05:35 -07:00
Armando Trejo Oliver
9d2d0e4754 Add feature flags to test Legacy Mongo Shell (#1421)
Add feature flags to test Legacy Mongo Shell
2023-04-04 10:28:42 -07:00
MokireddySampath
c7c894d6d9 Sampath accessibility sev 2 2 (#1404)
* autoscale and manual radiobuutton fixes

* alt text attribute for images

* Revert "alt text attribute for images"

This reverts commit 5a660551c6.

* alt text for decorative images

* sev2 accessibilitydefects in data explorer

* Revert "sev2 accessibilitydefects in data explorer"

This reverts commit b84d5b572c.

* Sev2 accessibilitydefects

* Revert "Sev2 accessibilitydefects"

This reverts commit a4e60f106c.

* accessibilitydefects-data explorer

* Accessibility sev-2 defects-2

* corrections for 2278347,2278096 and fix for 2264174

* color for placeholder changed to 767474, margin is set to accommodate height between treeheader elements

* padding added for databaseheader, removed margin and restored padding to treenodeheader
2023-04-03 22:11:40 +05:30
Asier Isayas
547954c3dc Lazy loading containers (#1411)
Co-authored-by: Asier Isayas <aisayas@microsoft.com>
2023-03-30 14:53:36 -07:00
22 changed files with 547 additions and 341 deletions

View File

@@ -2577,7 +2577,7 @@ a:link {
font-style: italic;
}
.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #403f3f;
color: #767474;
opacity: 1;
}

View File

@@ -5,12 +5,17 @@
overflow: auto;
.databaseHeader {
padding: 1px;
font-size: 14px;
}
.collectionHeader {
font-size: 12px;
}
.loadMoreHeader {
color: RGB(5, 99, 193);
}
}
.notebookResourceTree {
@@ -24,5 +29,3 @@
pointer-events: none;
}
}

View File

@@ -141,7 +141,7 @@ export class Queries {
public static UnlimitedPageOption: string = "unlimited";
public static itemsPerPage: number = 100;
public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
public static containersPerPage: number = 50;
public static QueryEditorMinHeightRatio: number = 0.1;
public static QueryEditorMaxHeightRatio: number = 0.4;
public static readonly DefaultMaxDegreeOfParallelism = 6;

View File

@@ -142,6 +142,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
{...imageProps}
src={EditIcon}
alt="editEntity"
id="editEntity"
onClick={onEditEntity}
tabIndex={0}
onKeyPress={handleKeyPress}

View File

@@ -1,3 +1,4 @@
import { Queries } from "Common/Constants";
import { AuthType } from "../../AuthType";
import * as DataModels from "../../Contracts/DataModels";
import { userContext } from "../../UserContext";
@@ -31,6 +32,35 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
}
}
export async function readCollectionsWithPagination(
databaseId: string,
continuationToken?: string
): Promise<DataModels.CollectionsWithPagination> {
const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
try {
const sdkResponse = await client()
.database(databaseId)
.containers.query(
{ query: "SELECT * FROM c" },
{
continuationToken,
maxItemCount: Queries.containersPerPage,
}
)
.fetchNext();
const collectionsWithPagination: DataModels.CollectionsWithPagination = {
collections: sdkResponse.resources as DataModels.Collection[],
continuationToken: sdkResponse.continuationToken,
};
return collectionsWithPagination;
} catch (error) {
handleError(error, "ReadCollections", `Error while querying containers for database ${databaseId}`);
throw error;
} finally {
clearMessage();
}
}
async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Collection[]> {
let rpResponse;

View File

@@ -156,6 +156,11 @@ export interface Collection extends Resource {
requestSchema?: () => void;
}
export interface CollectionsWithPagination {
continuationToken?: string;
collections?: Collection[];
}
export interface Database extends Resource {
collections?: Collection[];
}

View File

@@ -87,13 +87,13 @@ export interface Database extends TreeNode {
isDatabaseExpanded: ko.Observable<boolean>;
isDatabaseShared: ko.Computed<boolean>;
isSampleDB?: boolean;
collectionsContinuationToken?: string;
selectedSubnodeKind: ko.Observable<CollectionTabKind>;
expandDatabase(): Promise<void>;
collapseDatabase(): void;
loadCollections(): Promise<void>;
loadCollections(restart?: boolean): Promise<void>;
findCollectionWithId(collectionId: string): Collection;
openAddCollection(database: Database, event: MouseEvent): void;
onSettingsClick: () => void;

View File

@@ -23,12 +23,12 @@ describe("ThroughputInput Pane", () => {
});
it("should switch mode properly", () => {
wrapper.find('[id="Manual-input"]').simulate("change");
wrapper.find('[aria-label="Manual database throughput"]').simulate("change");
expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe(
"Container throughput (400 - unlimited RU/s)"
);
wrapper.find('[id="Autoscale-input"]').simulate("change");
wrapper.find('[aria-label="Autoscale database throughput"]').simulate("change");
expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
});
});

View File

@@ -189,7 +189,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<input
id="Autoscale-input"
className="throughputInputRadioBtn"
aria-label={`Autoscale` + " " + getThroughputLabelText()}
aria-label="Autoscale database throughput"
aria-required={true}
checked={isAutoscaleSelected}
type="radio"
@@ -204,7 +204,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<input
id="Manual-input"
className="throughputInputRadioBtn"
aria-label={`Manual` + " " + getThroughputLabelText()}
aria-label="Manual database throughput"
checked={!isAutoscaleSelected}
type="radio"
aria-required={true}
@@ -222,7 +222,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<Stack className="throughputInputSpacing">
<Text variant="small" aria-label="capacity calculator of azure cosmos db">
Estimate your required RU/s with{" "}
<u style={{ color: "#0078D4" }}>
<Link
target="_blank"
href="https://cosmos.azure.com/capacitycalculator/"
@@ -230,7 +229,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
>
capacity calculator
</Link>
</u>
.
</Text>
@@ -251,9 +249,8 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
onChange={(event, newInput?: string) => onThroughputValueChange(newInput)}
step={AutoPilotUtils.autoPilotIncrementStep}
min={AutoPilotUtils.autoPilotThroughput1K}
max={!isSharded ? 10000 : 9000000000000}
value={throughput.toString()}
ariaLabel="Max request units per second"
aria-label="Max request units per second"
required={true}
errorMessage={throughputError}
/>
@@ -273,11 +270,9 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<Stack className="throughputInputSpacing">
<Text variant="small" aria-label="ruDescription">
Estimate your required RU/s with&nbsp;
<u style={{ color: "#0078D4" }}>
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
capacity calculator
</Link>
</u>
.
</Text>
@@ -300,7 +295,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
value={throughput.toString()}
ariaLabel="Max request units per second"
aria-label="Max request units per second"
required={true}
errorMessage={throughputError}
/>

View File

@@ -659,7 +659,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
role="radiogroup"
>
<input
aria-label="Autoscale Container throughput (autoscale)"
aria-label="Autoscale database throughput"
aria-required={true}
checked={true}
className="throughputInputRadioBtn"
@@ -676,7 +676,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
Autoscale
</label>
<input
aria-label="Manual Container throughput (autoscale)"
aria-label="Manual database throughput"
aria-required={true}
checked={false}
className="throughputInputRadioBtn"
@@ -712,13 +712,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
>
Estimate your required RU/s with
<u
style={
Object {
"color": "#0078D4",
}
}
>
<StyledLinkBase
aria-label="capacity calculator of azure cosmos db"
href="https://cosmos.azure.com/capacitycalculator/"
@@ -1014,7 +1007,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</a>
</LinkBase>
</StyledLinkBase>
</u>
.
</span>
</Text>
@@ -1648,11 +1640,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</div>
</Stack>
<StyledTextFieldBase
ariaLabel="Max request units per second"
aria-label="Max request units per second"
errorMessage=""
id="autoscaleRUValueField"
key=".0:$.2"
max={9000000000000}
min={1000}
onChange={[Function]}
required={true}
@@ -1672,11 +1663,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
value="4000"
>
<TextFieldBase
ariaLabel="Max request units per second"
aria-label="Max request units per second"
deferredValidationTime={200}
errorMessage=""
id="autoscaleRUValueField"
max={9000000000000}
min={1000}
onChange={[Function]}
required={true}
@@ -1971,10 +1961,8 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
>
<input
aria-invalid={false}
aria-label="Max request units per second"
className="ms-TextField-field field-64"
id="autoscaleRUValueField"
max={9000000000000}
min={1000}
onBlur={[Function]}
onChange={[Function]}

View File

@@ -7,7 +7,7 @@
}
.treeNodeHeader {
margin: 1px;
padding: @SmallSpace 2px;
cursor: pointer;
display: flex;

View File

@@ -577,7 +577,7 @@ export default class Explorer {
try {
await Promise.all(
databasesToLoad.map(async (database: ViewModels.Database) => {
await database.loadCollections();
await database.loadCollections(true);
const isNewDatabase: boolean = _.some(newDatabases, (db: ViewModels.Database) => db.id() === database.id());
if (isNewDatabase) {
database.expandDatabase();

View File

@@ -23,7 +23,7 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
onClick={this.props.toggleExpandGraph}
role="button"
aria-expanded={this.props.isTabsContentExpanded}
aria-label="View graph in full screen"
aria-name="View graph in full screen"
>
<img
src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}

View File

@@ -25,7 +25,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
updateUserContext({
databaseAccount: {
properties: {
capabilities: [{ name: "EnableTable" }],
capabilities: [{ name: "EnableMongo" }],
},
} as DatabaseAccount,
});
@@ -38,6 +38,38 @@ describe("CommandBarComponentButtonFactory tests", () => {
);
expect(enableAzureSynapseLinkBtn).toBeDefined();
});
it("Button should not be visible for Tables API", () => {
updateUserContext({
databaseAccount: {
properties: {
capabilities: [{ name: "EnableTable" }],
},
} as DatabaseAccount,
});
const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
const enableAzureSynapseLinkBtn = buttons.find(
(button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
);
expect(enableAzureSynapseLinkBtn).toBeUndefined();
});
it("Button should not be visible for Cassandra API", () => {
updateUserContext({
databaseAccount: {
properties: {
capabilities: [{ name: "EnableCassandra" }],
},
} as DatabaseAccount,
});
const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
const enableAzureSynapseLinkBtn = buttons.find(
(button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
);
expect(enableAzureSynapseLinkBtn).toBeUndefined();
});
});
describe("Enable notebook button", () => {

View File

@@ -51,12 +51,14 @@ export function createStaticCommandBarButtons(
const buttons: CommandButtonComponentProps[] = [];
buttons.push(newCollectionBtn);
if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
const addSynapseLink = createOpenSynapseLinkDialogButton(container);
if (addSynapseLink) {
buttons.push(createDivider());
buttons.push(addSynapseLink);
}
}
if (userContext.apiType !== "Tables") {
newCollectionBtn.children = [createNewCollectionGroup(container)];

View File

@@ -21,6 +21,11 @@ export const SettingsPane: FunctionComponent = () => {
const [customItemPerPage, setCustomItemPerPage] = useState<number>(
LocalStorageUtility.getEntryNumber(StorageKey.CustomItemPerPage) || 0
);
const [containerPaginationEnabled, setContainerPaginationEnabled] = useState<boolean>(
LocalStorageUtility.hasItem(StorageKey.ContainerPaginationEnabled)
? LocalStorageUtility.getEntryString(StorageKey.ContainerPaginationEnabled) === "true"
: false
);
const [crossPartitionQueryEnabled, setCrossPartitionQueryEnabled] = useState<boolean>(
LocalStorageUtility.hasItem(StorageKey.IsCrossPartitionQueryEnabled)
? LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
@@ -50,6 +55,7 @@ export const SettingsPane: FunctionComponent = () => {
isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage
);
LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
LocalStorageUtility.setEntryString(StorageKey.ContainerPaginationEnabled, containerPaginationEnabled.toString());
LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
@@ -185,6 +191,25 @@ export const SettingsPane: FunctionComponent = () => {
</div>
</div>
)}
<div className="settingsSection">
<div className="settingsSectionPart">
<div className="settingsSectionLabel">
Enable container pagination
<InfoTooltip>
Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
</InfoTooltip>
</div>
<Checkbox
styles={{
label: { padding: 0 },
}}
className="padding"
ariaLabel="Enable container pagination"
checked={containerPaginationEnabled}
onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
/>
</div>
</div>
{shouldShowCrossPartitionOption && (
<div className="settingsSection">
<div className="settingsSectionPart">

View File

@@ -97,6 +97,35 @@ exports[`Settings Pane should render Default properly 1`] = `
</div>
</div>
</div>
<div
className="settingsSection"
>
<div
className="settingsSectionPart"
>
<div
className="settingsSectionLabel"
>
Enable container pagination
<InfoTooltip>
Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
</InfoTooltip>
</div>
<StyledCheckboxBase
ariaLabel="Enable container pagination"
checked={false}
className="padding"
onChange={[Function]}
styles={
Object {
"label": Object {
"padding": 0,
},
}
}
/>
</div>
</div>
<div
className="settingsSection"
>
@@ -182,6 +211,35 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
<div
className="paneMainContent"
>
<div
className="settingsSection"
>
<div
className="settingsSectionPart"
>
<div
className="settingsSectionLabel"
>
Enable container pagination
<InfoTooltip>
Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
</InfoTooltip>
</div>
<StyledCheckboxBase
ariaLabel="Enable container pagination"
checked={false}
className="padding"
onChange={[Function]}
styles={
Object {
"label": Object {
"padding": 0,
},
}
}
/>
</div>
</div>
<div
className="settingsSection"
>

View File

@@ -78,6 +78,22 @@ export default class MongoShellTabComponent extends Component<
baseUrl = "/content/mongoshell/";
}
if (userContext.features.enableLegacyMongoShellV1 === true) {
return "/mongoshell/index.html";
}
if (userContext.features.enableLegacyMongoShellV1Dist === true) {
return "/mongoshell/dist/index.html";
}
if (userContext.features.enableLegacyMongoShellV2 === true) {
return "/mongoshell/indexv2.html";
}
if (userContext.features.enableLegacyMongoShellV2Dist === true) {
return "/mongoshell/dist/indexv2.html";
}
return `${extensionEndpoint}${baseUrl}index.html?resourceId=${resourceId}&accountName=${accountName}&mongoEndpoint=${mongoEndpoint}`;
}

View File

@@ -3,7 +3,7 @@ import React from "react";
import * as _ from "underscore";
import { AuthType } from "../../AuthType";
import * as Constants from "../../Common/Constants";
import { readCollections } from "../../Common/dataAccess/readCollections";
import { readCollections, readCollectionsWithPagination } from "../../Common/dataAccess/readCollections";
import { readDatabaseOffer } from "../../Common/dataAccess/readDatabaseOffer";
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
import * as Logger from "../../Common/Logger";
@@ -13,6 +13,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
import { useSidePanel } from "../../hooks/useSidePanel";
import { useTabs } from "../../hooks/useTabs";
import { IJunoResponse, JunoClient } from "../../Juno/JunoClient";
import * as StorageUtility from "../../Shared/StorageUtility";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { userContext } from "../../UserContext";
@@ -38,6 +39,7 @@ export default class Database implements ViewModels.Database {
public selectedSubnodeKind: ko.Observable<ViewModels.CollectionTabKind>;
public junoClient: JunoClient;
public isSampleDB: boolean;
public collectionsContinuationToken?: string;
private isOfferRead: boolean;
constructor(container: Explorer, data: DataModels.Database) {
@@ -140,7 +142,11 @@ export default class Database implements ViewModels.Database {
}
await this.loadOffer();
await this.loadCollections();
if (this.collections()?.length === 0) {
await this.loadCollections(true);
}
this.isDatabaseExpanded(true);
TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
description: "Database node",
@@ -162,9 +168,31 @@ export default class Database implements ViewModels.Database {
});
}
public async loadCollections(): Promise<void> {
public async loadCollections(restart = false) {
const collectionVMs: Collection[] = [];
const collections: DataModels.Collection[] = await readCollections(this.id());
let collections: DataModels.Collection[] = [];
if (restart) {
this.collectionsContinuationToken = undefined;
}
const containerPaginationEnabled =
StorageUtility.LocalStorageUtility.getEntryString(StorageUtility.StorageKey.ContainerPaginationEnabled) ===
"true";
if (containerPaginationEnabled) {
const collectionsWithPagination: DataModels.CollectionsWithPagination = await readCollectionsWithPagination(
this.id(),
this.collectionsContinuationToken
);
if (collectionsWithPagination.collections?.length === Constants.Queries.containersPerPage) {
this.collectionsContinuationToken = collectionsWithPagination.continuationToken;
} else {
this.collectionsContinuationToken = undefined;
}
collections = collectionsWithPagination.collections;
} else {
collections = await readCollections(this.id());
}
// TODO Remove
// This is a hack to make Mongo collections read via ARM have a SQL-ish partitionKey property
if (userContext.apiType === "Mongo" && userContext.authType === AuthType.AAD) {
@@ -199,7 +227,9 @@ export default class Database implements ViewModels.Database {
//merge collections
this.addCollectionsToList(collectionVMs);
if (!containerPaginationEnabled || restart) {
this.deleteCollectionsFromList(deltaCollections.toDelete);
}
useDatabases.getState().updateDatabase(this);
}

View File

@@ -479,6 +479,18 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
databaseNode.children.push(buildCollectionNode(database, collection))
);
if (database.collectionsContinuationToken) {
const loadMoreNode: TreeNode = {
label: "load more",
className: "loadMoreHeader",
onClick: async () => {
await database.loadCollections();
useDatabases.getState().updateDatabase(database);
},
};
databaseNode.children.push(loadMoreNode);
}
database.collections.subscribe((collections: ViewModels.Collection[]) => {
collections.forEach((collection: ViewModels.Collection) =>
databaseNode.children.push(buildCollectionNode(database, collection))

View File

@@ -30,6 +30,10 @@ export type Features = {
readonly mongoProxyAPIs?: string;
readonly enableThroughputCap: boolean;
readonly enableHierarchicalKeys: boolean;
readonly enableLegacyMongoShellV1: boolean;
readonly enableLegacyMongoShellV1Dist: boolean;
readonly enableLegacyMongoShellV2: boolean;
readonly enableLegacyMongoShellV2Dist: boolean;
// can be set via both flight and feature flag
autoscaleDefault: boolean;
@@ -92,6 +96,10 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
notebooksDownBanner: "true" === get("notebooksDownBanner"),
enableThroughputCap: "true" === get("enablethroughputcap"),
enableHierarchicalKeys: "true" === get("enablehierarchicalkeys"),
enableLegacyMongoShellV1: "true" === get("enablelegacymongoshellv1"),
enableLegacyMongoShellV1Dist: "true" === get("enablelegacymongoshellv1dist"),
enableLegacyMongoShellV2: "true" === get("enablelegacymongoshellv2"),
enableLegacyMongoShellV2Dist: "true" === get("enablelegacymongoshellv2dist"),
};
}

View File

@@ -4,6 +4,7 @@ import * as SessionStorageUtility from "./SessionStorageUtility";
export { LocalStorageUtility, SessionStorageUtility };
export enum StorageKey {
ActualItemPerPage,
ContainerPaginationEnabled,
CustomItemPerPage,
DatabaseAccountId,
EncryptedKeyToken,