random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-26 22:17:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Disable phoenix when vnet/ipaddress filter is enabled

Browse Source
This commit is contained in:
kcheekuri 2022-07-06 10:50:12 -04:00
parent b9dffdd990
commit 0ec6495e69
11 changed files with 120 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Common/Constants.ts
View File

@ -398,6 +398,10 @@ export class Notebook {
public static cosmosNotebookHomePageUrl = "https://aka.ms/cosmos-notebooks-limits";
public static cosmosNotebookGitDocumentationUrl = "https://aka.ms/cosmos-notebooks-github";
public static learnMore = "Learn more.";
public static notebookDisabledText =
"This feature is disabled for this user, this can happen because of region restriction, key permissions etc..";
public static newShellDisabledText =
"This feature is disabled for this user, this is for users with region restriction, key permissions etc..";
}
export class SparkLibrary {

18
src/Explorer/Controls/TreeComponent/TreeComponent.tsx
View File

@ -42,6 +42,8 @@ export interface TreeNode {
timestamp?: number;
isLeavesParentsSeparate?: boolean; // Display parents together first, then leaves
isLoading?: boolean;
isDisabled?: boolean;
toolTip?: string;
isSelected?: () => boolean;
onClick?: (isExpanded: boolean) => void; // Only if a leaf, other click will expand/collapse
onExpanded?: () => void;
@ -169,9 +171,15 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
return (
<div
className={`${this.props.node.className || ""} main${generation} nodeItem ${showSelected ? "selected" : ""}`}
onClick={(event: React.MouseEvent<HTMLDivElement>) => this.onNodeClick(event, node)}
onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) => this.onNodeKeyPress(event, node)}
className={`${this.props.node.className || ""} main${generation} nodeItem ${showSelected ? "selected" : ""} ${
this.props.node.isDisabled ? "disable" : ""
}`}
onClick={(event: React.MouseEvent<HTMLDivElement>) =>
!this.props.node.isDisabled && this.onNodeClick(event, node)
}
onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) =>
!this.props.node.isDisabled && this.onNodeKeyPress(event, node)
}
role="treeitem"
id={node.id}
>
@ -184,7 +192,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
{this.renderCollapseExpandIcon(node)}
{node.iconSrc && <img className="nodeIcon" src={node.iconSrc} alt="" />}
{node.label && (
<span className="nodeLabel" title={node.label}>
<span className="nodeLabel" title={`${node.toolTip ? node.toolTip : node.label}`}>
{node.label}
</span>
)}
@ -195,7 +203,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
</div>
{node.children && (
<AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
<div className="nodeChildren" data-test={node.label}>
<div className="nodeChildren" data-test={node.label} aria-disabled={node.isDisabled}>
{TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
<TreeNodeComponent
key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}

6
src/Explorer/Controls/TreeComponent/treeComponent.less
View File

@ -66,7 +66,11 @@
}
}
}
.disable{
background-color: rgb(255, 255, 255);
filter: grayscale();
color: rgb(161, 159, 157);
}
.treeComponentMenuItemContainer {
font-size: @mediumFontSize;

2
src/Explorer/Explorer.tsx
View File

@ -1027,7 +1027,7 @@ export default class Explorer {
}
public async openNotebookTerminal(kind: ViewModels.TerminalKind): Promise<void> {
if (useNotebook.getState().isPhoenixFeatures) {
if (useNotebook.getState().isPhoenixFeatures && !useNotebook.getState().isPhoenixDisabled) {
await this.allocateContainer();
const notebookServerInfo = useNotebook.getState().notebookServerInfo;
if (notebookServerInfo && notebookServerInfo.notebookServerEndpoint !== undefined) {

6
src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
View File

@ -53,7 +53,11 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
if (useNotebook.getState().isPhoenixNotebooks || useNotebook.getState().isPhoenixFeatures) {
if (
useNotebook.getState().isPhoenixNotebooks ||
useNotebook.getState().isPhoenixFeatures ||
useNotebook.getState().isPhoenixDisabled
) {
uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus(container, "connectionStatus"));
}

4
src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
View File

@ -204,14 +204,14 @@ describe("CommandBarComponentButtonFactory tests", () => {
//expect(openMongoShellBtn.tooltipText).toBe("");
});
it("Notebooks is enabled and is available, terminal is unavailable due to ipRules - button should be hidden", () => {
it("Notebooks is enabled and is available, terminal is unavailable due to ipRules - button should be in disable state", () => {
useNotebook.getState().setIsNotebookEnabled(true);
useNotebook.getState().setIsNotebooksEnabledForAccount(true);
useNotebook.getState().setIsShellEnabled(false);
const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
expect(openMongoShellBtn).toBeUndefined();
expect(openMongoShellBtn.disabled).toBe(true);
});
});

66
src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
View File

@ -75,16 +75,18 @@ export function createStaticCommandBarButtons(
if (container.notebookManager?.gitHubOAuthService) {
notebookButtons.push(createManageGitHubAccountButton(container));
}
if (useNotebook.getState().isPhoenixFeatures && configContext.isTerminalEnabled) {
if (
useNotebook.getState().isPhoenixFeatures &&
!useNotebook.getState().isPhoenixDisabled &&
configContext.isTerminalEnabled
) {
notebookButtons.push(createOpenTerminalButton(container));
}
if (useNotebook.getState().isPhoenixNotebooks && selectedNodeState.isConnectedToContainer()) {
notebookButtons.push(createNotebookWorkspaceResetButton(container));
}
if (
(userContext.apiType === "Mongo" &&
useNotebook.getState().isShellEnabled &&
selectedNodeState.isDatabaseNodeOrNoneSelected()) ||
(userContext.apiType === "Mongo" && selectedNodeState.isDatabaseNodeOrNoneSelected()) ||
userContext.apiType === "Cassandra"
) {
notebookButtons.push(createDivider());
@ -97,15 +99,21 @@ export function createStaticCommandBarButtons(
notebookButtons.forEach((btn) => {
if (btn.commandButtonLabel.indexOf("Cassandra") !== -1) {
if (!useNotebook.getState().isPhoenixFeatures) {
applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.cassandraShellTemporarilyDownMsg);
if (!useNotebook.getState().isPhoenixFeatures && !useNotebook.getState().isPhoenixDisabled) {
applyNotebooksStyleProps(btn, Constants.Notebook.cassandraShellTemporarilyDownMsg);
} else if (useNotebook.getState().isPhoenixDisabled) {
applyNotebooksStyleProps(btn, Constants.Notebook.notebookDisabledText);
}
} else if (btn.commandButtonLabel.indexOf("Mongo") !== -1) {
if (!useNotebook.getState().isPhoenixFeatures) {
applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.mongoShellTemporarilyDownMsg);
if (!useNotebook.getState().isPhoenixFeatures && !useNotebook.getState().isPhoenixDisabled) {
applyNotebooksStyleProps(btn, Constants.Notebook.mongoShellTemporarilyDownMsg);
} else if (useNotebook.getState().isPhoenixDisabled) {
applyNotebooksStyleProps(btn, Constants.Notebook.notebookDisabledText);
}
} else if (!useNotebook.getState().isPhoenixNotebooks) {
applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
} else if (!useNotebook.getState().isPhoenixNotebooks && !useNotebook.getState().isPhoenixDisabled) {
applyNotebooksStyleProps(btn, Constants.Notebook.temporarilyDownMsg);
} else if (useNotebook.getState().isPhoenixDisabled) {
applyNotebooksStyleProps(btn, Constants.Notebook.notebookDisabledText);
}
buttons.push(btn);
});
@ -154,23 +162,36 @@ export function createContextCommandBarButtons(
selectedNodeState: SelectedNodeState
): CommandButtonComponentProps[] {
const buttons: CommandButtonComponentProps[] = [];
if (!selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") {
const label = useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell";
const isPhoenixShellDisabled = !useNotebook.getState().isShellEnabled || useNotebook.getState().isPhoenixDisabled;
const phoenixMongoShellBtn: CommandButtonComponentProps = {
iconSrc: HostedTerminalIcon,
iconAlt: "Open Mongo Shell",
onCommandClick: () => {
container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
},
commandButtonLabel: "Open Mongo Shell",
ariaLabel: "Open Mongo Shell",
hasPopup: true,
disabled: isPhoenixShellDisabled,
tooltipText: isPhoenixShellDisabled ? Constants.Notebook.notebookDisabledText : undefined,
};
buttons.push(phoenixMongoShellBtn);
const label = "New Shell";
const isNewMongoShellDisabled = useNotebook.getState().isShellEnabled && !useNotebook.getState().isPhoenixDisabled;
const newMongoShellBtn: CommandButtonComponentProps = {
iconSrc: HostedTerminalIcon,
iconAlt: label,
onCommandClick: () => {
const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
if (useNotebook.getState().isShellEnabled) {
container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
} else {
selectedCollection && selectedCollection.onNewMongoShellClick();
}
selectedCollection && selectedCollection.onNewMongoShellClick();
},
commandButtonLabel: label,
ariaLabel: label,
hasPopup: true,
disabled: isNewMongoShellDisabled,
tooltipText: isNewMongoShellDisabled ? Constants.Notebook.newShellDisabledText : undefined,
};
buttons.push(newMongoShellBtn);
}
@ -401,7 +422,7 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
return buttons;
}
function applyNotebooksTemporarilyDownStyle(buttonProps: CommandButtonComponentProps, tooltip: string): void {
function applyNotebooksStyleProps(buttonProps: CommandButtonComponentProps, tooltip: string): void {
if (!buttonProps.isDivider) {
buttonProps.disabled = true;
buttonProps.tooltipText = tooltip;
@ -477,10 +498,11 @@ function createOpenTerminalButton(container: Explorer): CommandButtonComponentPr
function createOpenMongoTerminalButton(container: Explorer): CommandButtonComponentProps {
const label = "Open Mongo Shell";
const tooltip =
"This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.";
const disableButton =
!useNotebook.getState().isNotebooksEnabledForAccount && !useNotebook.getState().isNotebookEnabled;
!useNotebook.getState().isNotebooksEnabledForAccount &&
(!useNotebook.getState().isNotebookEnabled ||
!useNotebook.getState().isShellEnabled ||
useNotebook.getState().isPhoenixDisabled);
return {
iconSrc: HostedTerminalIcon,
iconAlt: label,
@ -493,7 +515,7 @@ function createOpenMongoTerminalButton(container: Explorer): CommandButtonCompon
hasPopup: false,
disabled: disableButton,
ariaLabel: label,
tooltipText: !disableButton ? "" : tooltip,
tooltipText: !disableButton ? undefined : Constants.Notebook.notebookDisabledText,
};
}

5
src/Explorer/Menus/CommandBar/ConnectionStatusComponent.less
View File

@ -36,6 +36,11 @@
outline: 0px;
}
}
.disableText{
background-color: rgb(255, 255, 255)!important;
filter: grayscale();
color: rgb(161, 159, 157)!important;
}
.connectIcon{
margin: 0px 4px;
height: 18px;

21
src/Explorer/Menus/CommandBar/ConnectionStatusComponent.tsx
View File

@ -23,6 +23,8 @@ interface Props {
}
export const ConnectionStatus: React.FC<Props> = ({ container }: Props): JSX.Element => {
const connectionInfo = useNotebook((state) => state.connectionInfo);
const isPhoenixDisabled = useNotebook((state) => state.isPhoenixDisabled);
const [second, setSecond] = React.useState("00");
const [minute, setMinute] = React.useState("00");
const [isActive, setIsActive] = React.useState(false);
@ -77,6 +79,12 @@ export const ConnectionStatus: React.FC<Props> = ({ container }: Props): JSX.Ele
}
}, [connectionInfo.status]);
React.useEffect(() => {
if (isPhoenixDisabled) {
setToolTipContent(Notebook.notebookDisabledText);
}
}, [isPhoenixDisabled]);
const stopTimer = () => {
setIsActive(false);
setCounter(0);
@ -93,11 +101,18 @@ export const ConnectionStatus: React.FC<Props> = ({ container }: Props): JSX.Ele
(connectionInfo.status === ConnectionStatusType.Connect || connectionInfo.status === ConnectionStatusType.Reconnect)
) {
return (
<ActionButton className="commandReactBtn" onClick={() => container.allocateContainer()}>
<ActionButton
className={isPhoenixDisabled ? "disableText commandReactBtn" : "commandReactBtn"}
disabled={isPhoenixDisabled}
onClick={() => !isPhoenixDisabled && container.allocateContainer()}
>
<TooltipHost content={toolTipContent}>
<Stack className="connectionStatusContainer" horizontal>
<Icon iconName="ConnectVirtualMachine" className="connectIcon" />
<span>{connectionInfo.status}</span>
<Icon
iconName="ConnectVirtualMachine"
className={isPhoenixDisabled ? "connectIcon disableText" : "connectIcon"}
/>
<span className={isPhoenixDisabled ? "disableText" : ""}>{connectionInfo.status}</span>
</Stack>
</TooltipHost>
</ActionButton>

20
src/Explorer/Notebook/useNotebook.ts
View File

@ -40,6 +40,7 @@ interface NotebookState {
containerStatus: ContainerInfo;
isPhoenixNotebooks: boolean;
isPhoenixFeatures: boolean;
isPhoenixDisabled: boolean;
setIsNotebookEnabled: (isNotebookEnabled: boolean) => void;
setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => void;
setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void;
@ -64,6 +65,7 @@ interface NotebookState {
getPhoenixStatus: () => Promise<void>;
setIsPhoenixNotebooks: (isPhoenixNotebooks: boolean) => void;
setIsPhoenixFeatures: (isPhoenixFeatures: boolean) => void;
setIsPhoenixDisabled: (isPhoenixDisabled: boolean) => void;
}
export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
@ -100,6 +102,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
},
isPhoenixNotebooks: undefined,
isPhoenixFeatures: undefined,
isPhoenixDisabled: undefined,
setIsNotebookEnabled: (isNotebookEnabled: boolean) => set({ isNotebookEnabled }),
setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => set({ isNotebooksEnabledForAccount }),
setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) =>
@ -305,6 +308,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
if (get().isPhoenixNotebooks === undefined || get().isPhoenixFeatures === undefined) {
let isPhoenixNotebooks = false;
let isPhoenixFeatures = false;
let isPhoenixDisabled = false;
const isPublicInternetAllowed = isPublicInternetAccessAllowed();
const phoenixClient = new PhoenixClient();
@ -312,18 +316,30 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
if (dbAccountAllowedInfo.status === HttpStatusCodes.OK) {
if (dbAccountAllowedInfo?.type === PhoenixErrorType.PhoenixFlightFallback) {
isPhoenixNotebooks = isPublicInternetAllowed && userContext.features.phoenixNotebooks;
isPhoenixFeatures = isPublicInternetAllowed && userContext.features.phoenixFeatures;
isPhoenixNotebooks = userContext.features.phoenixNotebooks;
isPhoenixFeatures = userContext.features.phoenixFeatures;
isPhoenixDisabled = !isPublicInternetAllowed && (isPhoenixNotebooks || isPhoenixFeatures);
} else {
isPhoenixNotebooks = isPhoenixFeatures = isPublicInternetAllowed;
isPhoenixDisabled = !isPublicInternetAllowed;
}
} else if (
dbAccountAllowedInfo.status === HttpStatusCodes.Forbidden &&
(userContext.features.phoenixNotebooks || userContext.features.phoenixFeatures)
) {
isPhoenixNotebooks = userContext.features.phoenixNotebooks;
isPhoenixFeatures = userContext.features.phoenixFeatures;
isPhoenixDisabled = true;
} else {
isPhoenixNotebooks = isPhoenixFeatures = false;
}
set({ isPhoenixNotebooks: isPhoenixNotebooks });
set({ isPhoenixFeatures: isPhoenixFeatures });
set({ isPhoenixDisabled: isPhoenixDisabled });
}
},
setIsPhoenixNotebooks: (isPhoenixNotebooks: boolean) => set({ isPhoenixNotebooks: isPhoenixNotebooks }),
setIsPhoenixFeatures: (isPhoenixFeatures: boolean) => set({ isPhoenixFeatures: isPhoenixFeatures }),
setIsPhoenixDisabled: (isPhoenixDisabled: boolean) => set({ isPhoenixDisabled: isPhoenixDisabled }),
}));

6
src/Explorer/Tree/ResourceTree.tsx
View File

@ -121,7 +121,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
children: [],
};
if (!useNotebook.getState().isPhoenixNotebooks) {
if (!useNotebook.getState().isPhoenixNotebooks && !useNotebook.getState().isPhoenixDisabled) {
notebooksTree.children.push(buildNotebooksTemporarilyDownTree());
} else {
if (galleryContentRoot) {
@ -156,8 +156,10 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
label: "Gallery",
iconSrc: GalleryIcon,
className: "notebookHeader galleryHeader",
toolTip: useNotebook.getState().isPhoenixDisabled ? Notebook.notebookDisabledText : undefined,
onClick: () => container.openGallery(),
isSelected: () => activeTab?.tabKind === ViewModels.CollectionTabKind.Gallery,
isDisabled: useNotebook.getState().isPhoenixDisabled,
};
};
@ -523,6 +525,8 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
children.push({
label: "Schema (Preview)",
onClick: collection.onSchemaAnalyzerClick.bind(collection),
toolTip: useNotebook.getState().isPhoenixDisabled ? Notebook.notebookDisabledText : undefined,
isDisabled: useNotebook.getState().isPhoenixDisabled,
isSelected: () =>
useSelectedNode
.getState()