Skip to content

Commit

Permalink
feat(jmx): re-implement enhanced transient JMX credentials (#524)
Browse files Browse the repository at this point in the history
* feat(jmx): re-implement enhanced transient JMX credentials

* yarn format:apply

* add comma

* remove unused dep

* add more description about purpose of stored credentials

* add link to Settings

* add card providing context/explanation of rules and links to other views

* remove unnecessary clear() call

* update snapshot

* add key property to child cards

* clean up storage location / key handling

* redefine as arrow func

* apply prettier format

* add snapshot test for Settings page

* add test for JMX Credentials storage location settings control

* add unit test for JmxCredentials.service

* check that session storage is selected by default

* test that dropdown reflects clicked selection

* minor refactor

* use 'within'

* wait for select menu to close, not wait for text to not be visible

* remove unnecessary cast
  • Loading branch information
andrewazores authored Sep 29, 2022
1 parent ec23856 commit 19f353f
Show file tree
Hide file tree
Showing 19 changed files with 1,027 additions and 33 deletions.
10 changes: 7 additions & 3 deletions src/app/AppLayout/AuthModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,7 @@ export const AuthModal: React.FunctionComponent<AuthModalProps> = (props) => {
first(),
filter((target) => target !== NO_TARGET),
map((target) => target.connectUrl),
map((connectUrl) => `target.connectUrl == "${connectUrl}"`),
mergeMap((matchExpression) => context.api.postCredentials(matchExpression, username, password))
mergeMap((connectUrl) => context.jmxCredentials.setCredential(connectUrl, username, password))
)
.subscribe((result) => {
if (result) {
Expand Down Expand Up @@ -95,7 +94,12 @@ export const AuthModal: React.FunctionComponent<AuthModalProps> = (props) => {
<Link onClick={props.onDismiss} to="/security">
Security
</Link>{' '}
to add a credential matching multiple targets.
to add a credential matching multiple targets. Visit{' '}
<Link onClick={props.onDismiss} to="/settings">
Settings
</Link>{' '}
to confirm and configure whether these credentials will be held only for this browser session or stored
encrypted in the Cryostat backend.
</Text>
}
>
Expand Down
1 change: 0 additions & 1 deletion src/app/AppLayout/JmxAuthForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ export const JmxAuthForm: React.FunctionComponent<JmxAuthFormProps> = (props) =>

const handleSave = React.useCallback(() => {
props.onSave(username, password).then(() => {
clear();
context.target.setAuthRetry();
});
}, [context, context.target, clear, props.onSave, username, password]);
Expand Down
22 changes: 21 additions & 1 deletion src/app/Rules/Rules.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,22 @@
* SOFTWARE.
*/
import * as React from 'react';
import { Link } from 'react-router-dom';
import {
Button,
Card,
CardBody,
CardHeader,
CardHeaderMain,
EmptyState,
EmptyStateIcon,
Text,
TextVariants,
Title,
Toolbar,
ToolbarContent,
ToolbarItem,
ToolbarGroup,
Button,
} from '@patternfly/react-core';
import { SearchIcon, UploadIcon } from '@patternfly/react-icons';
import {
Expand Down Expand Up @@ -378,6 +383,21 @@ export const Rules = () => {
{viewContent()}
</CardBody>
</Card>
<Card>
<CardHeader>
<CardHeaderMain>
<Text component={TextVariants.h4}>About Automated Rules</Text>
</CardHeaderMain>
</CardHeader>
<CardBody>
Automated Rules define a dynamic set of Target JVMs to connect to and start{' '}
<Link to="/recordings">Active Recordings</Link> using a specific <Link to="/events">Event Template</Link>{' '}
when the Automated Rule is created and when any new matching Target JVMs appear. If your Target JVM
connections require JMX Credentials, you can configure these in <Link to="/security">Security</Link>.
Automated Rules can be configured to periodically copy the contents of the Active Recording to{' '}
<Link to="/archives">Archives</Link> to ensure you always have up-to-date information about your JVMs.
</CardBody>
</Card>
</BreadcrumbPage>
<RuleUploadModal visible={isUploadModalOpen} onClose={handleUploadModalClose}></RuleUploadModal>
</>
Expand Down
14 changes: 12 additions & 2 deletions src/app/SecurityPanel/Credentials/StoreJmxCredentials.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,15 @@
* SOFTWARE.
*/
import * as React from 'react';
import _ from 'lodash';
import { Link } from 'react-router-dom';
import {
Badge,
Button,
Checkbox,
EmptyState,
EmptyStateIcon,
Text,
Title,
Toolbar,
ToolbarContent,
Expand All @@ -62,7 +65,6 @@ import { LoadingView } from '@app/LoadingView/LoadingView';
import { DeleteWarningModal } from '@app/Modal/DeleteWarningModal';
import { DeleteWarningType } from '@app/Modal/DeleteWarningUtils';
import { MatchedTargetsTable } from './MatchedTargetsTable';
import _ from 'lodash';

const enum Actions {
HANDLE_REFRESH,
Expand Down Expand Up @@ -457,6 +459,14 @@ export const StoreJmxCredentials = () => {

export const StoreJmxCredentialsCard: SecurityCard = {
title: 'Store JMX Credentials',
description: `Credentials that Cryostat uses to connect to target JVMs over JMX are stored here.`,
description: (
<Text>
Credentials that Cryostat uses to connect to target JVMs over JMX are stored here. These are stored in encrypted
storage managed by the Cryostat backend. These credentials may be used for manually managing recordings and event
templates on target JVMs, as well as for Automated Rules which run in the background and open unattended target
connections. Any locally-stored client credentials held by your browser session are not displayed here. See{' '}
<Link to="/settings">Settings</Link> to configure locally-stored credentials.
</Text>
),
content: StoreJmxCredentials,
};
2 changes: 1 addition & 1 deletion src/app/SecurityPanel/SecurityPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,6 @@ export const SecurityPanel = () => {

export interface SecurityCard {
title: string;
description: string;
description: JSX.Element | string;
content: React.FunctionComponent;
}
3 changes: 2 additions & 1 deletion src/app/Settings/AutoRefresh.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ const Component = () => {

export const AutoRefresh: UserSetting = {
title: 'Auto-Refresh',
description: 'Set the refresh period for content views.',
description:
'Set the refresh period for content views. Views normally update dynamically via WebSocket notifications, so this should not be needed unless WebSockets are not working.',
content: Component,
};
121 changes: 121 additions & 0 deletions src/app/Settings/CredentialsStorage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
/*
* Copyright The Cryostat Authors
*
* The Universal Permissive License (UPL), Version 1.0
*
* Subject to the condition set forth below, permission is hereby granted to any
* person obtaining a copy of this software, associated documentation and/or data
* (collectively the "Software"), free of charge and under any and all copyright
* rights in the Software, and any and all patent rights owned or freely
* licensable by each licensor hereunder covering either (i) the unmodified
* Software as contributed to or provided by such licensor, or (ii) the Larger
* Works (as defined below), to deal in both
*
* (a) the Software, and
* (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
* one is included with the Software (each a "Larger Work" to which the Software
* is contributed by such licensors),
*
* without restriction, including without limitation the rights to copy, create
* derivative works of, display, perform, and distribute the Software and make,
* use, sell, offer for sale, import, export, have made, and have sold the
* Software and the Larger Work(s), and to sublicense the foregoing rights on
* either these or other terms.
*
* This license is subject to the following condition:
* The above copyright notice and either this complete permission notice or at
* a minimum a reference to the UPL must be included in all copies or
* substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

import * as React from 'react';
import { Link } from 'react-router-dom';
import { Select, SelectOption, SelectVariant, Text } from '@patternfly/react-core';

import { UserSetting } from './Settings';
import { getFromLocalStorage, saveToLocalStorage } from '@app/utils/LocalStorage';

export interface Location {
key: string;
description: string;
}

export class Locations {
static readonly BROWSER_SESSION: Location = {
key: 'Session (Browser Memory)',
description:
'Keep credentials in browser memory for the current session only. When you close this browser tab the credentials will be forgotten.',
};
static readonly BACKEND: Location = {
key: 'Backend',
description:
'Keep credentials in encrypted Cryostat backend storage. These credentials will be available to other users and will be used for Automated Rules.',
};
}

const locations = [Locations.BROWSER_SESSION, Locations.BACKEND];

const getLocation = (key: string): Location => {
for (let l of locations) {
if (l.key === key) {
return l;
}
}
return Locations.BROWSER_SESSION;
};

const Component = () => {
const [isExpanded, setExpanded] = React.useState(false);
const [selection, setSelection] = React.useState(Locations.BROWSER_SESSION.key);

const handleSelect = React.useCallback(
(_, selection) => {
let location = getLocation(selection);
setSelection(location.key);
setExpanded(false);
saveToLocalStorage('JMX_CREDENTIAL_LOCATION', selection);
},
[getLocation, setSelection, setExpanded, saveToLocalStorage]
);

React.useEffect(() => {
handleSelect(undefined, getFromLocalStorage('JMX_CREDENTIAL_LOCATION', Locations.BROWSER_SESSION.key));
}, [handleSelect, getFromLocalStorage]);

return (
<>
<Select
variant={SelectVariant.single}
onToggle={setExpanded}
onSelect={handleSelect}
isOpen={isExpanded}
selections={selection}
>
{locations.map((location) => (
<SelectOption key={location.key} value={location.key} description={location.description} />
))}
</Select>
</>
);
};

export const CredentialsStorage: UserSetting = {
title: 'JMX Credentials Storage',
description: (
<Text>
When you attempt to connect to a target application which requires authentication, you will see a prompt for
credentials to present to the application and complete the connection. You can choose where to persist these
credentials. Any credentials added through the <Link to="/security">Security</Link> panel will always be stored in
Cryostat backend encrypted storage.
</Text>
),
content: Component,
};
36 changes: 18 additions & 18 deletions src/app/Settings/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,31 +40,31 @@ import * as React from 'react';
import { Card, CardBody, CardTitle, Text, TextVariants } from '@patternfly/react-core';
import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';

import { AutoRefresh } from './AutoRefresh';
import { NotificationControl } from './NotificationControl';
import { WebSocketDebounce } from './WebSocketDebounce';
import { CredentialsStorage } from './CredentialsStorage';
import { DeletionDialogControl } from './DeletionDialogControl';
import { WebSocketDebounce } from './WebSocketDebounce';
import { AutoRefresh } from './AutoRefresh';

export const Settings: React.FunctionComponent<{}> = () => {
const settings = [AutoRefresh, NotificationControl, DeletionDialogControl, WebSocketDebounce].map((c) => ({
title: c.title,
description: c.description,
element: React.createElement(c.content, null),
}));

const settings = [NotificationControl, CredentialsStorage, DeletionDialogControl, WebSocketDebounce, AutoRefresh].map(
(c) => ({
title: c.title,
description: c.description,
element: React.createElement(c.content, null),
})
);
return (
<>
<BreadcrumbPage pageTitle="Settings">
{settings.map((s) => (
<>
<Card>
<CardTitle>
<Text component={TextVariants.h1}>{s.title}</Text>
<Text component={TextVariants.small}>{s.description}</Text>
</CardTitle>
<CardBody>{s.element}</CardBody>
</Card>
</>
<Card key={s.title}>
<CardTitle>
<Text component={TextVariants.h1}>{s.title}</Text>
<Text component={TextVariants.small}>{s.description}</Text>
</CardTitle>
<CardBody>{s.element}</CardBody>
</Card>
))}
</BreadcrumbPage>
</>
Expand All @@ -73,6 +73,6 @@ export const Settings: React.FunctionComponent<{}> = () => {

export interface UserSetting {
title: string;
description: string;
description: JSX.Element | string;
content: React.FunctionComponent;
}
2 changes: 1 addition & 1 deletion src/app/Settings/WebSocketDebounce.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
*/

import * as React from 'react';
import { NumberInput, Text, TextVariants } from '@patternfly/react-core';
import { NumberInput } from '@patternfly/react-core';
import { ServiceContext } from '@app/Shared/Services/Services';
import { UserSetting } from './Settings';

Expand Down
Loading

0 comments on commit 19f353f

Please sign in to comment.