mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-09 04:25:57 +00:00
Compare commits
10 Commits
defect2276
...
defect-227
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7373de3ac8 | ||
|
|
dedb9cab86 | ||
|
|
e5a4ae2803 | ||
|
|
da2ba243fb | ||
|
|
e2b72a3824 | ||
|
|
f27706bc37 | ||
|
|
fa81442222 | ||
|
|
25ef86a6c0 | ||
|
|
a4e60f106c | ||
|
|
d646686723 |
@@ -2577,7 +2577,7 @@ a:link {
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||||
color: #767474;
|
color: #403f3f;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -5,17 +5,12 @@
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
.databaseHeader {
|
.databaseHeader {
|
||||||
padding: 1px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collectionHeader {
|
.collectionHeader {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadMoreHeader {
|
|
||||||
color: RGB(5, 99, 193);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.notebookResourceTree {
|
.notebookResourceTree {
|
||||||
@@ -29,3 +24,5 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -141,7 +141,7 @@ export class Queries {
|
|||||||
public static UnlimitedPageOption: string = "unlimited";
|
public static UnlimitedPageOption: string = "unlimited";
|
||||||
public static itemsPerPage: number = 100;
|
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 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 QueryEditorMinHeightRatio: number = 0.1;
|
||||||
public static QueryEditorMaxHeightRatio: number = 0.4;
|
public static QueryEditorMaxHeightRatio: number = 0.4;
|
||||||
public static readonly DefaultMaxDegreeOfParallelism = 6;
|
public static readonly DefaultMaxDegreeOfParallelism = 6;
|
||||||
|
|||||||
168
src/Common/TableEntity.tsx
Normal file
168
src/Common/TableEntity.tsx
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
import {
|
||||||
|
Dropdown,
|
||||||
|
IDropdownOption,
|
||||||
|
IDropdownStyles,
|
||||||
|
IImageProps,
|
||||||
|
Image,
|
||||||
|
IStackTokens,
|
||||||
|
Stack,
|
||||||
|
TextField,
|
||||||
|
TooltipHost,
|
||||||
|
} from "@fluentui/react";
|
||||||
|
import React, { FunctionComponent } from "react";
|
||||||
|
import DeleteIcon from "../../images/delete.svg";
|
||||||
|
import EditIcon from "../../images/Edit_entity.svg";
|
||||||
|
import { CassandraType, TableType } from "../Explorer/Tables/Constants";
|
||||||
|
import { userContext } from "../UserContext";
|
||||||
|
import { EntityValue } from "./EntityValue";
|
||||||
|
|
||||||
|
const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
|
||||||
|
|
||||||
|
export interface TableEntityProps {
|
||||||
|
entityTypeLabel?: string;
|
||||||
|
entityPropertyLabel?: string;
|
||||||
|
entityValueLabel?: string;
|
||||||
|
isDeleteOptionVisible: boolean;
|
||||||
|
entityProperty: string;
|
||||||
|
entityPropertyPlaceHolder: string;
|
||||||
|
selectedKey: string | number;
|
||||||
|
entityValuePlaceholder: string;
|
||||||
|
entityValue: string | Date;
|
||||||
|
isEntityTypeDate: boolean;
|
||||||
|
options: { key: string; text: string }[];
|
||||||
|
isPropertyTypeDisable: boolean;
|
||||||
|
entityTimeValue: string;
|
||||||
|
isEntityValueDisable?: boolean;
|
||||||
|
onDeleteEntity?: () => void;
|
||||||
|
onEditEntity?: () => void;
|
||||||
|
onEntityPropertyChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
|
||||||
|
onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
|
||||||
|
onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
|
||||||
|
onSelectDate: (date: Date | null | undefined) => void;
|
||||||
|
onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TableEntity: FunctionComponent<TableEntityProps> = ({
|
||||||
|
entityTypeLabel,
|
||||||
|
entityPropertyLabel,
|
||||||
|
isDeleteOptionVisible,
|
||||||
|
entityProperty,
|
||||||
|
selectedKey,
|
||||||
|
entityPropertyPlaceHolder,
|
||||||
|
entityValueLabel,
|
||||||
|
entityValuePlaceholder,
|
||||||
|
entityValue,
|
||||||
|
options,
|
||||||
|
isPropertyTypeDisable,
|
||||||
|
isEntityTypeDate,
|
||||||
|
entityTimeValue,
|
||||||
|
isEntityValueDisable,
|
||||||
|
onEditEntity,
|
||||||
|
onDeleteEntity,
|
||||||
|
onEntityPropertyChange,
|
||||||
|
onEntityTypeChange,
|
||||||
|
onEntityValueChange,
|
||||||
|
onSelectDate,
|
||||||
|
onEntityTimeValueChange,
|
||||||
|
}: TableEntityProps): JSX.Element => {
|
||||||
|
const imageProps: IImageProps = {
|
||||||
|
width: 16,
|
||||||
|
height: 30,
|
||||||
|
className: entityPropertyLabel ? "addRemoveIconLabel" : "addRemoveIcon",
|
||||||
|
};
|
||||||
|
|
||||||
|
const sectionStackTokens: IStackTokens = { childrenGap: 12 };
|
||||||
|
|
||||||
|
const handleKeyPress = (event: React.KeyboardEvent<HTMLElement>) => {
|
||||||
|
if (event.key === "Enter" || event.key === "Space") {
|
||||||
|
onEditEntity();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleKeyPressdelete = (event: React.KeyboardEvent<HTMLElement>) => {
|
||||||
|
if (event.key === "Enter" || event.key === "Space") {
|
||||||
|
onDeleteEntity();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getEntityValueType = (): string => {
|
||||||
|
const { Int, Smallint, Tinyint } = CassandraType;
|
||||||
|
const { Double, Int32, Int64 } = TableType;
|
||||||
|
|
||||||
|
if (
|
||||||
|
selectedKey === Double ||
|
||||||
|
selectedKey === Int32 ||
|
||||||
|
selectedKey === Int64 ||
|
||||||
|
selectedKey === Int ||
|
||||||
|
selectedKey === Smallint ||
|
||||||
|
selectedKey === Tinyint
|
||||||
|
) {
|
||||||
|
return "number";
|
||||||
|
}
|
||||||
|
return "string";
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Stack horizontal tokens={sectionStackTokens}>
|
||||||
|
<TextField
|
||||||
|
label={entityPropertyLabel && entityPropertyLabel}
|
||||||
|
id="entityPropertyId"
|
||||||
|
autoFocus
|
||||||
|
disabled={isPropertyTypeDisable}
|
||||||
|
placeholder={entityPropertyPlaceHolder}
|
||||||
|
value={entityProperty}
|
||||||
|
onChange={onEntityPropertyChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<Dropdown
|
||||||
|
label={entityTypeLabel && entityTypeLabel}
|
||||||
|
selectedKey={selectedKey}
|
||||||
|
onChange={onEntityTypeChange}
|
||||||
|
options={options}
|
||||||
|
disabled={isPropertyTypeDisable}
|
||||||
|
id="entityTypeId"
|
||||||
|
styles={dropdownStyles}
|
||||||
|
/>
|
||||||
|
<EntityValue
|
||||||
|
entityValueLabel={entityValueLabel}
|
||||||
|
entityValueType={getEntityValueType()}
|
||||||
|
isEntityValueDisable={isEntityValueDisable}
|
||||||
|
entityValuePlaceholder={entityValuePlaceholder}
|
||||||
|
entityValue={entityValue}
|
||||||
|
isEntityTypeDate={isEntityTypeDate}
|
||||||
|
entityTimeValue={entityTimeValue}
|
||||||
|
onEntityValueChange={onEntityValueChange}
|
||||||
|
onSelectDate={onSelectDate}
|
||||||
|
onEntityTimeValueChange={onEntityTimeValueChange}
|
||||||
|
/>
|
||||||
|
{!isEntityValueDisable && (
|
||||||
|
<TooltipHost content="Edit property" id="editTooltip">
|
||||||
|
<div tabIndex={0}>
|
||||||
|
<Image
|
||||||
|
{...imageProps}
|
||||||
|
src={EditIcon}
|
||||||
|
alt="editEntity"
|
||||||
|
onClick={onEditEntity}
|
||||||
|
tabIndex={0}
|
||||||
|
onKeyPress={handleKeyPress}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</TooltipHost>
|
||||||
|
)}
|
||||||
|
{isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
|
||||||
|
<TooltipHost content="Delete property" id="deleteTooltip">
|
||||||
|
<Image
|
||||||
|
{...imageProps}
|
||||||
|
src={DeleteIcon}
|
||||||
|
alt="delete entity"
|
||||||
|
id="deleteEntity"
|
||||||
|
onClick={onDeleteEntity}
|
||||||
|
tabIndex={0}
|
||||||
|
onKeyPress={handleKeyPressdelete}
|
||||||
|
/>
|
||||||
|
</TooltipHost>
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
import { Queries } from "Common/Constants";
|
|
||||||
import { AuthType } from "../../AuthType";
|
import { AuthType } from "../../AuthType";
|
||||||
import * as DataModels from "../../Contracts/DataModels";
|
import * as DataModels from "../../Contracts/DataModels";
|
||||||
import { userContext } from "../../UserContext";
|
import { userContext } from "../../UserContext";
|
||||||
@@ -32,35 +31,6 @@ 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[]> {
|
async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Collection[]> {
|
||||||
let rpResponse;
|
let rpResponse;
|
||||||
|
|
||||||
|
|||||||
@@ -156,11 +156,6 @@ export interface Collection extends Resource {
|
|||||||
requestSchema?: () => void;
|
requestSchema?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface CollectionsWithPagination {
|
|
||||||
continuationToken?: string;
|
|
||||||
collections?: Collection[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Database extends Resource {
|
export interface Database extends Resource {
|
||||||
collections?: Collection[];
|
collections?: Collection[];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -87,13 +87,13 @@ export interface Database extends TreeNode {
|
|||||||
isDatabaseExpanded: ko.Observable<boolean>;
|
isDatabaseExpanded: ko.Observable<boolean>;
|
||||||
isDatabaseShared: ko.Computed<boolean>;
|
isDatabaseShared: ko.Computed<boolean>;
|
||||||
isSampleDB?: boolean;
|
isSampleDB?: boolean;
|
||||||
collectionsContinuationToken?: string;
|
|
||||||
selectedSubnodeKind: ko.Observable<CollectionTabKind>;
|
selectedSubnodeKind: ko.Observable<CollectionTabKind>;
|
||||||
|
|
||||||
expandDatabase(): Promise<void>;
|
expandDatabase(): Promise<void>;
|
||||||
collapseDatabase(): void;
|
collapseDatabase(): void;
|
||||||
|
|
||||||
loadCollections(restart?: boolean): Promise<void>;
|
loadCollections(): Promise<void>;
|
||||||
findCollectionWithId(collectionId: string): Collection;
|
findCollectionWithId(collectionId: string): Collection;
|
||||||
openAddCollection(database: Database, event: MouseEvent): void;
|
openAddCollection(database: Database, event: MouseEvent): void;
|
||||||
onSettingsClick: () => void;
|
onSettingsClick: () => void;
|
||||||
|
|||||||
@@ -347,14 +347,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
|||||||
ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
|
ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
|
||||||
className="panelInfoIcon"
|
className="panelInfoIcon"
|
||||||
iconName="Info"
|
iconName="Info"
|
||||||
role="tooltip"
|
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
>
|
>
|
||||||
<IconBase
|
<IconBase
|
||||||
ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
|
ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
|
||||||
className="panelInfoIcon"
|
className="panelInfoIcon"
|
||||||
iconName="Info"
|
iconName="Info"
|
||||||
role="tooltip"
|
|
||||||
styles={[Function]}
|
styles={[Function]}
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
theme={
|
theme={
|
||||||
@@ -635,7 +633,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
|||||||
aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
|
aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
|
||||||
className="panelInfoIcon root-57"
|
className="panelInfoIcon root-57"
|
||||||
data-icon-name="Info"
|
data-icon-name="Info"
|
||||||
role="tooltip"
|
role="img"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
>
|
>
|
||||||
|
|
||||||
@@ -1341,14 +1339,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
|||||||
ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
|
ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
|
||||||
className="panelInfoIcon"
|
className="panelInfoIcon"
|
||||||
iconName="Info"
|
iconName="Info"
|
||||||
role="tooltip"
|
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
>
|
>
|
||||||
<IconBase
|
<IconBase
|
||||||
ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
|
ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
|
||||||
className="panelInfoIcon"
|
className="panelInfoIcon"
|
||||||
iconName="Info"
|
iconName="Info"
|
||||||
role="tooltip"
|
|
||||||
styles={[Function]}
|
styles={[Function]}
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
theme={
|
theme={
|
||||||
@@ -1629,7 +1625,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
|
|||||||
aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
|
aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
|
||||||
className="panelInfoIcon root-57"
|
className="panelInfoIcon root-57"
|
||||||
data-icon-name="Info"
|
data-icon-name="Info"
|
||||||
role="tooltip"
|
role="img"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
>
|
>
|
||||||
|
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ import {
|
|||||||
IButtonStyles,
|
IButtonStyles,
|
||||||
IconButton,
|
IconButton,
|
||||||
IContextualMenuItemProps,
|
IContextualMenuItemProps,
|
||||||
IContextualMenuProps
|
IContextualMenuProps,
|
||||||
} from "@fluentui/react";
|
} from "@fluentui/react";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import AnimateHeight from "react-animate-height";
|
import AnimateHeight from "react-animate-height";
|
||||||
|
|||||||
@@ -40,7 +40,6 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
|
|||||||
onKeyPress={[Function]}
|
onKeyPress={[Function]}
|
||||||
role="treeitem"
|
role="treeitem"
|
||||||
>
|
>
|
||||||
<div>
|
|
||||||
<div
|
<div
|
||||||
className="treeNodeHeader "
|
className="treeNodeHeader "
|
||||||
data-test="label"
|
data-test="label"
|
||||||
@@ -66,7 +65,6 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
|
|||||||
label
|
label
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
className="loadingIconContainer"
|
className="loadingIconContainer"
|
||||||
>
|
>
|
||||||
@@ -145,7 +143,6 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
|
|||||||
onKeyPress={[Function]}
|
onKeyPress={[Function]}
|
||||||
role="treeitem"
|
role="treeitem"
|
||||||
>
|
>
|
||||||
<div>
|
|
||||||
<div
|
<div
|
||||||
className="treeNodeHeader "
|
className="treeNodeHeader "
|
||||||
data-test="label"
|
data-test="label"
|
||||||
@@ -220,7 +217,6 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
className="loadingIconContainer"
|
className="loadingIconContainer"
|
||||||
>
|
>
|
||||||
@@ -298,7 +294,6 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
|
|||||||
onKeyPress={[Function]}
|
onKeyPress={[Function]}
|
||||||
role="treeitem"
|
role="treeitem"
|
||||||
>
|
>
|
||||||
<div>
|
|
||||||
<div
|
<div
|
||||||
className="treeNodeHeader "
|
className="treeNodeHeader "
|
||||||
data-test="label"
|
data-test="label"
|
||||||
@@ -324,7 +319,6 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
|
|||||||
label
|
label
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
className="loadingIconContainer"
|
className="loadingIconContainer"
|
||||||
>
|
>
|
||||||
@@ -374,7 +368,6 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
|
|||||||
onKeyPress={[Function]}
|
onKeyPress={[Function]}
|
||||||
role="treeitem"
|
role="treeitem"
|
||||||
>
|
>
|
||||||
<div>
|
|
||||||
<div
|
<div
|
||||||
className="treeNodeHeader "
|
className="treeNodeHeader "
|
||||||
data-test="label"
|
data-test="label"
|
||||||
@@ -440,7 +433,6 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
className="loadingIconContainer"
|
className="loadingIconContainer"
|
||||||
>
|
>
|
||||||
@@ -546,7 +538,6 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
|
|||||||
onKeyPress={[Function]}
|
onKeyPress={[Function]}
|
||||||
role="treeitem"
|
role="treeitem"
|
||||||
>
|
>
|
||||||
<div>
|
|
||||||
<div
|
<div
|
||||||
className="treeNodeHeader "
|
className="treeNodeHeader "
|
||||||
data-test="label"
|
data-test="label"
|
||||||
@@ -572,7 +563,6 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
|
|||||||
label
|
label
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
className="loadingIconContainer"
|
className="loadingIconContainer"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.treeNodeHeader {
|
.treeNodeHeader {
|
||||||
padding: @SmallSpace 2px;
|
margin: 1px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|||||||
@@ -577,7 +577,7 @@ export default class Explorer {
|
|||||||
try {
|
try {
|
||||||
await Promise.all(
|
await Promise.all(
|
||||||
databasesToLoad.map(async (database: ViewModels.Database) => {
|
databasesToLoad.map(async (database: ViewModels.Database) => {
|
||||||
await database.loadCollections(true);
|
await database.loadCollections();
|
||||||
const isNewDatabase: boolean = _.some(newDatabases, (db: ViewModels.Database) => db.id() === database.id());
|
const isNewDatabase: boolean = _.some(newDatabases, (db: ViewModels.Database) => db.id() === database.id());
|
||||||
if (isNewDatabase) {
|
if (isNewDatabase) {
|
||||||
database.expandDatabase();
|
database.expandDatabase();
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import {
|
|||||||
Stack,
|
Stack,
|
||||||
TeachingBubble,
|
TeachingBubble,
|
||||||
Text,
|
Text,
|
||||||
TooltipHost
|
TooltipHost,
|
||||||
} from "@fluentui/react";
|
} from "@fluentui/react";
|
||||||
import * as Constants from "Common/Constants";
|
import * as Constants from "Common/Constants";
|
||||||
import { createCollection } from "Common/dataAccess/createCollection";
|
import { createCollection } from "Common/dataAccess/createCollection";
|
||||||
@@ -100,7 +100,6 @@ export interface AddCollectionPanelState {
|
|||||||
isExecuting: boolean;
|
isExecuting: boolean;
|
||||||
isThroughputCapExceeded: boolean;
|
isThroughputCapExceeded: boolean;
|
||||||
teachingBubbleStep: number;
|
teachingBubbleStep: number;
|
||||||
isParentTooltipVisible:boolean;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
|
export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
|
||||||
@@ -110,7 +109,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
|||||||
private isCollectionAutoscale: boolean;
|
private isCollectionAutoscale: boolean;
|
||||||
private isCostAcknowledged: boolean;
|
private isCostAcknowledged: boolean;
|
||||||
|
|
||||||
|
|
||||||
constructor(props: AddCollectionPanelProps) {
|
constructor(props: AddCollectionPanelProps) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
@@ -136,16 +134,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
|||||||
isExecuting: false,
|
isExecuting: false,
|
||||||
isThroughputCapExceeded: false,
|
isThroughputCapExceeded: false,
|
||||||
teachingBubbleStep: 0,
|
teachingBubbleStep: 0,
|
||||||
isParentTooltipVisible: false,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount(): void {
|
componentDidMount(): void {
|
||||||
if (this.state.teachingBubbleStep === 0 && this.props.isQuickstart) {
|
if (this.state.teachingBubbleStep === 0 && this.props.isQuickstart) {
|
||||||
this.setState({ teachingBubbleStep: 1 });
|
this.setState({ teachingBubbleStep: 1 });
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render(): JSX.Element {
|
render(): JSX.Element {
|
||||||
@@ -413,7 +408,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
|||||||
className="panelInfoIcon"
|
className="panelInfoIcon"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
|
ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
|
||||||
|
|
||||||
/>
|
/>
|
||||||
</TooltipHost>
|
</TooltipHost>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|||||||
@@ -21,11 +21,6 @@ export const SettingsPane: FunctionComponent = () => {
|
|||||||
const [customItemPerPage, setCustomItemPerPage] = useState<number>(
|
const [customItemPerPage, setCustomItemPerPage] = useState<number>(
|
||||||
LocalStorageUtility.getEntryNumber(StorageKey.CustomItemPerPage) || 0
|
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>(
|
const [crossPartitionQueryEnabled, setCrossPartitionQueryEnabled] = useState<boolean>(
|
||||||
LocalStorageUtility.hasItem(StorageKey.IsCrossPartitionQueryEnabled)
|
LocalStorageUtility.hasItem(StorageKey.IsCrossPartitionQueryEnabled)
|
||||||
? LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
|
? LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
|
||||||
@@ -55,7 +50,6 @@ export const SettingsPane: FunctionComponent = () => {
|
|||||||
isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage
|
isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage
|
||||||
);
|
);
|
||||||
LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
|
LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
|
||||||
LocalStorageUtility.setEntryString(StorageKey.ContainerPaginationEnabled, containerPaginationEnabled.toString());
|
|
||||||
LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
|
LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
|
||||||
LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
|
LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
|
||||||
|
|
||||||
@@ -191,25 +185,6 @@ export const SettingsPane: FunctionComponent = () => {
|
|||||||
</div>
|
</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>
|
|
||||||
<Checkbox
|
|
||||||
styles={{
|
|
||||||
label: { padding: 0 },
|
|
||||||
}}
|
|
||||||
className="padding"
|
|
||||||
ariaLabel="Enable container pagination"
|
|
||||||
checked={containerPaginationEnabled}
|
|
||||||
onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{shouldShowCrossPartitionOption && (
|
{shouldShowCrossPartitionOption && (
|
||||||
<div className="settingsSection">
|
<div className="settingsSection">
|
||||||
<div className="settingsSectionPart">
|
<div className="settingsSectionPart">
|
||||||
|
|||||||
@@ -97,35 +97,6 @@ exports[`Settings Pane should render Default properly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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
|
<div
|
||||||
className="settingsSection"
|
className="settingsSection"
|
||||||
>
|
>
|
||||||
@@ -211,35 +182,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
|
|||||||
<div
|
<div
|
||||||
className="paneMainContent"
|
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
|
<div
|
||||||
className="settingsSection"
|
className="settingsSection"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import {
|
|||||||
Stack,
|
Stack,
|
||||||
TeachingBubble,
|
TeachingBubble,
|
||||||
TeachingBubbleContent,
|
TeachingBubbleContent,
|
||||||
Text
|
Text,
|
||||||
} from "@fluentui/react";
|
} from "@fluentui/react";
|
||||||
import { sendMessage } from "Common/MessageHandler";
|
import { sendMessage } from "Common/MessageHandler";
|
||||||
import { MessageTypes } from "Contracts/ExplorerContracts";
|
import { MessageTypes } from "Contracts/ExplorerContracts";
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import React from "react";
|
|||||||
import * as _ from "underscore";
|
import * as _ from "underscore";
|
||||||
import { AuthType } from "../../AuthType";
|
import { AuthType } from "../../AuthType";
|
||||||
import * as Constants from "../../Common/Constants";
|
import * as Constants from "../../Common/Constants";
|
||||||
import { readCollections, readCollectionsWithPagination } from "../../Common/dataAccess/readCollections";
|
import { readCollections } from "../../Common/dataAccess/readCollections";
|
||||||
import { readDatabaseOffer } from "../../Common/dataAccess/readDatabaseOffer";
|
import { readDatabaseOffer } from "../../Common/dataAccess/readDatabaseOffer";
|
||||||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||||||
import * as Logger from "../../Common/Logger";
|
import * as Logger from "../../Common/Logger";
|
||||||
@@ -13,7 +13,6 @@ import * as ViewModels from "../../Contracts/ViewModels";
|
|||||||
import { useSidePanel } from "../../hooks/useSidePanel";
|
import { useSidePanel } from "../../hooks/useSidePanel";
|
||||||
import { useTabs } from "../../hooks/useTabs";
|
import { useTabs } from "../../hooks/useTabs";
|
||||||
import { IJunoResponse, JunoClient } from "../../Juno/JunoClient";
|
import { IJunoResponse, JunoClient } from "../../Juno/JunoClient";
|
||||||
import * as StorageUtility from "../../Shared/StorageUtility";
|
|
||||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||||
import { userContext } from "../../UserContext";
|
import { userContext } from "../../UserContext";
|
||||||
@@ -39,7 +38,6 @@ export default class Database implements ViewModels.Database {
|
|||||||
public selectedSubnodeKind: ko.Observable<ViewModels.CollectionTabKind>;
|
public selectedSubnodeKind: ko.Observable<ViewModels.CollectionTabKind>;
|
||||||
public junoClient: JunoClient;
|
public junoClient: JunoClient;
|
||||||
public isSampleDB: boolean;
|
public isSampleDB: boolean;
|
||||||
public collectionsContinuationToken?: string;
|
|
||||||
private isOfferRead: boolean;
|
private isOfferRead: boolean;
|
||||||
|
|
||||||
constructor(container: Explorer, data: DataModels.Database) {
|
constructor(container: Explorer, data: DataModels.Database) {
|
||||||
@@ -142,11 +140,7 @@ export default class Database implements ViewModels.Database {
|
|||||||
}
|
}
|
||||||
|
|
||||||
await this.loadOffer();
|
await this.loadOffer();
|
||||||
|
await this.loadCollections();
|
||||||
if (this.collections()?.length === 0) {
|
|
||||||
await this.loadCollections(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.isDatabaseExpanded(true);
|
this.isDatabaseExpanded(true);
|
||||||
TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
|
TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
|
||||||
description: "Database node",
|
description: "Database node",
|
||||||
@@ -168,31 +162,9 @@ export default class Database implements ViewModels.Database {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
public async loadCollections(restart = false) {
|
public async loadCollections(): Promise<void> {
|
||||||
const collectionVMs: Collection[] = [];
|
const collectionVMs: Collection[] = [];
|
||||||
let collections: DataModels.Collection[] = [];
|
const collections: DataModels.Collection[] = await readCollections(this.id());
|
||||||
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
|
// TODO Remove
|
||||||
// This is a hack to make Mongo collections read via ARM have a SQL-ish partitionKey property
|
// 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) {
|
if (userContext.apiType === "Mongo" && userContext.authType === AuthType.AAD) {
|
||||||
@@ -227,9 +199,7 @@ export default class Database implements ViewModels.Database {
|
|||||||
|
|
||||||
//merge collections
|
//merge collections
|
||||||
this.addCollectionsToList(collectionVMs);
|
this.addCollectionsToList(collectionVMs);
|
||||||
if (!containerPaginationEnabled || restart) {
|
|
||||||
this.deleteCollectionsFromList(deltaCollections.toDelete);
|
this.deleteCollectionsFromList(deltaCollections.toDelete);
|
||||||
}
|
|
||||||
|
|
||||||
useDatabases.getState().updateDatabase(this);
|
useDatabases.getState().updateDatabase(this);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -479,18 +479,6 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
|
|||||||
databaseNode.children.push(buildCollectionNode(database, collection))
|
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[]) => {
|
database.collections.subscribe((collections: ViewModels.Collection[]) => {
|
||||||
collections.forEach((collection: ViewModels.Collection) =>
|
collections.forEach((collection: ViewModels.Collection) =>
|
||||||
databaseNode.children.push(buildCollectionNode(database, collection))
|
databaseNode.children.push(buildCollectionNode(database, collection))
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import * as SessionStorageUtility from "./SessionStorageUtility";
|
|||||||
export { LocalStorageUtility, SessionStorageUtility };
|
export { LocalStorageUtility, SessionStorageUtility };
|
||||||
export enum StorageKey {
|
export enum StorageKey {
|
||||||
ActualItemPerPage,
|
ActualItemPerPage,
|
||||||
ContainerPaginationEnabled,
|
|
||||||
CustomItemPerPage,
|
CustomItemPerPage,
|
||||||
DatabaseAccountId,
|
DatabaseAccountId,
|
||||||
EncryptedKeyToken,
|
EncryptedKeyToken,
|
||||||
|
|||||||
Reference in New Issue
Block a user