Skip to content

Commit

Permalink
feat(quickstarts): topology quickstarts
Browse files Browse the repository at this point in the history
  • Loading branch information
Thuan Vo committed Apr 25, 2023
1 parent 0980382 commit 5802903
Show file tree
Hide file tree
Showing 12 changed files with 363 additions and 125 deletions.
4 changes: 4 additions & 0 deletions src/app/QuickStarts/all-quickstarts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ import DashboardQuickStart from './quickstarts/dashboard-quickstart';
import GenericQuickStart from './quickstarts/generic-quickstart';
import SettingsQuickStart from './quickstarts/settings-quickstart';
import RecordingQuickStart from './quickstarts/start-a-recording';
import CustomTargetQuickstart from './quickstarts/topology/custom-target-quickstart';
import GroupStartRecordingQuickStart from './quickstarts/topology/group-start-recordings';

// Add your quick start here e.g. [GenericQuickStart, ...]
export const allQuickStarts: QuickStart[] = [
Expand All @@ -49,4 +51,6 @@ export const allQuickStarts: QuickStart[] = [
GenericQuickStart,
RecordingQuickStart,
SettingsQuickStart,
GroupStartRecordingQuickStart,
CustomTargetQuickstart,
];
4 changes: 4 additions & 0 deletions src/app/QuickStarts/quickstart-utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@
* SOFTWARE.
*/
import cryostatLogoIcon from '@app/assets/cryostat_icon_rgb_default.svg';
import cryostatLogoIconDark from '@app/assets/cryostat_icon_rgb_reverse.svg';
import build from '@app/build.json';
import { withThemedIcon } from '@app/utils/withThemedIcon';

export const conclusion = (quickstartName: string, feature: string, closingMessage?: string) => `
<div>
Expand All @@ -51,3 +53,5 @@ export const conclusion = (quickstartName: string, feature: string, closingMessa
: `<p>If you would like to learn more about the <strong>${feature}</strong> feature, check out the <a href="${build.documentationUrl}" target="_blank">[APP] documentation</a> for detailed guides and information.</p>`
}
</div>`;

export const CryostatIcon = withThemedIcon(cryostatLogoIcon, cryostatLogoIconDark, 'Cryostat Icon');
12 changes: 3 additions & 9 deletions src/app/QuickStarts/quickstarts/automated-rules-quickstart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,10 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import cryostatLogoIcon from '@app/assets/cryostat_icon_rgb_default.svg';
import cryostatLogoIconDark from '@app/assets/cryostat_icon_rgb_reverse.svg';
import build from '@app/build.json';
import { FeatureLevel } from '@app/Shared/Services/Settings.service';
import { withThemedIcon } from '@app/utils/withThemedIcon';
import { QuickStart } from '@patternfly/quickstarts';
import React from 'react';
import { conclusion } from '../quickstart-utils';

const Icon = withThemedIcon(cryostatLogoIcon, cryostatLogoIconDark, 'Cryostat Icon');
import { CryostatIcon, conclusion } from '../quickstart-utils';

const displayName = 'Get started with Automated Rules';

Expand All @@ -58,7 +52,7 @@ const AutomatedRulesQuickStart: QuickStart = {
version: 2.3,
displayName: displayName,
durationMinutes: 5,
icon: <Icon />,
icon: <CryostatIcon />,
description: `Learn about automated rules in **[APP]** and how to create one.`,
prerequisites: ['Start a Recording'],
introduction: `
Expand Down Expand Up @@ -97,7 +91,7 @@ To create a new rule, use the Automated Rule creation form to fill in the requir
The [Match Expression]{{highlight rule-matchexpr}} field is a Java-like code snippet that is matched against each target JVM. This allows you to create rules that run on specific target JVMs. For example, you can create a rule that runs on all target JVMs with the match expression: \`true\`{{copy}}. You can also match targets more specifically with a match expression like \`target.annotations.cryostat['PORT'] == 9091\`{{copy}}, which will match targets that are connected to [APP] on port 9091.
**To create a new rule, you must fill out the following required fields:**
To create a new rule, you must fill out the following required fields:
1. Enter a name for the rule in the [Name]{{highlight rule-name}} field.
2. Enter an expression in the [Match Expression]{{highlight rule-matchexpr}} field. To see an example match expression, click the [match hint]{{highlight rule-matchexpr-help}}.
[Use the [Match Expression Visualizer]{{highlight match-expr-card}} to test your match expression against the target JVMs currently discovered by [APP]. Any matched targets will appear unfaded in the Graph view and will be listed in the List view.]{{admonition tip}}
Expand Down
67 changes: 0 additions & 67 deletions src/app/QuickStarts/quickstarts/cryostat-link-quickstart.tsx

This file was deleted.

9 changes: 2 additions & 7 deletions src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,11 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import cryostatLogoIcon from '@app/assets/cryostat_icon_rgb_default.svg';
import cryostatLogoIconDark from '@app/assets/cryostat_icon_rgb_reverse.svg';
import build from '@app/build.json';
import { FeatureLevel } from '@app/Shared/Services/Settings.service';
import { withThemedIcon } from '@app/utils/withThemedIcon';
import { QuickStart } from '@patternfly/quickstarts';
import React from 'react';
import { conclusion } from '../quickstart-utils';

const Icon = withThemedIcon(cryostatLogoIcon, cryostatLogoIconDark, 'Cryostat Logo');
import { CryostatIcon, conclusion } from '../quickstart-utils';

const displayName = 'Get started with the Dashboard';

Expand All @@ -60,7 +55,7 @@ const DashboardQuickStart: QuickStart = {
version: 2.3,
displayName: displayName,
durationMinutes: 10,
icon: <Icon />,
icon: <CryostatIcon />,
description: `Learn about what you can do with the **[APP]** Dashboard.`,
prerequisites: [''],
introduction: `
Expand Down
3 changes: 1 addition & 2 deletions src/app/QuickStarts/quickstarts/generic-quickstart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ import cryostatLogo from '@app/assets/cryostat_icon_rgb_default.svg';
import build from '@app/build.json';
import { FeatureLevel } from '@app/Shared/Services/Settings.service';
import { QuickStart } from '@patternfly/quickstarts';
import { conclusion } from '../quickstart-utils';
import { PficonTemplateIcon } from '@patternfly/react-icons';
import React from 'react';
import { conclusion } from '../quickstart-utils';

// Quick start name (currently cannot use [APP], there is a bug with how the title gets rendered in the quick start panel)
const displayName = 'Getting started with quick starts in Cryostat';
Expand Down Expand Up @@ -71,7 +71,6 @@ const GenericQuickStart: QuickStart = {
# - If set to null (icon: ~) will not show an icon
*/
icon: <PficonTemplateIcon />,
// icon: 'cryostatLogo' || '<Icon />',
prerequisites: [
'You can optionally list prerequisites',
'Another prerequisite',
Expand Down
1 change: 0 additions & 1 deletion src/app/QuickStarts/quickstarts/settings-quickstart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import build from '@app/build.json';
import { FeatureLevel } from '@app/Shared/Services/Settings.service';
import { QuickStart } from '@patternfly/quickstarts';
import { CogIcon } from '@patternfly/react-icons';
Expand Down
13 changes: 4 additions & 9 deletions src/app/QuickStarts/quickstarts/start-a-recording.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,11 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import cryostatLogoIcon from '@app/assets/cryostat_icon_rgb_default.svg';
import cryostatLogoIconDark from '@app/assets/cryostat_icon_rgb_reverse.svg';
import build from '@app/build.json';
import { FeatureLevel } from '@app/Shared/Services/Settings.service';
import { withThemedIcon } from '@app/utils/withThemedIcon';
import { QuickStart } from '@patternfly/quickstarts';
import React from 'react';
import { conclusion } from '../quickstart-utils';

const Icon = withThemedIcon(cryostatLogoIcon, cryostatLogoIconDark, 'Cryostat Icon');
import { CryostatIcon, conclusion } from '../quickstart-utils';

const displayName = 'Start a Recording';

Expand All @@ -58,7 +53,7 @@ const RecordingQuickStart: QuickStart = {
version: 2.3,
displayName: displayName,
durationMinutes: 10,
icon: <Icon />,
icon: <CryostatIcon />,
description: `Learn how to start a recording with Java Flight Recorder (JFR) with **[APP]**.`,
prerequisites: [''],
introduction: `
Expand All @@ -79,7 +74,7 @@ const RecordingQuickStart: QuickStart = {
`,
tasks: [
{
title: 'Go to the Recordings tab',
title: 'Go to the Recordings page',
description: '1. In the [APP] console navigation bar, click [Recordings]{{highlight nav-recordings-tab}}.',
review: {
instructions: '#### Verify that you see the Recordings page.',
Expand Down Expand Up @@ -111,7 +106,7 @@ There are two tabs within the Recordings page:
**Active recordings** are recordings that only exist only within the target JVM. **Archived recordings** are recordings that have been saved from the target JVM and copied to [APP]'s storage volume.
Start an active recording:
To start an active recording:
1. Click [Create]{{highlight recordings-create-btn}} to open the **Custom Flight Recording Form**.
[If you have a smaller viewport, the \`Create\` button may not be immediately visible. In this case, you can click on the kebab button (three vertical dots) to reveal additional options, including \`Create\`."]{{admonition note}}
Expand Down
159 changes: 159 additions & 0 deletions src/app/QuickStarts/quickstarts/topology/custom-target-quickstart.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
/*
* 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 { conclusion, CryostatIcon } from '@app/QuickStarts/quickstart-utils';
import { FeatureLevel } from '@app/Shared/Services/Settings.service';
import { QuickStart } from '@patternfly/quickstarts';
import * as React from 'react';

const CustomTargetQuickstart: QuickStart = {
metadata: {
name: 'topology/create-custom-target-quickstart',
featureLevel: FeatureLevel.PRODUCTION,
},
spec: {
version: 2.3,
displayName: 'Create a Custom Target',
durationMinutes: 10,
icon: <CryostatIcon />,
description: `Don't see your applications? Use Custom Targets to tell Cryostat about them!`,
introduction: `
## Custom Targets
By default, target JVMs are automatically discovered over remote Java Management Extensions (JMX) by **Cryostat**, using various mechanisms (e.g. **Kubernetes API**, **JDP**).
However, in some cases (e.g. JMX port is not <code>9091</code> and port name is not <code>jfr-jmx</code>), Cryostat might not see your applications. Fortunately, you can tell Cryostat about them by specifying **Custom Targets**.
### What you'll learn
- How to test and create a Custom Target definition
### What you'll need
- A Java application that Cryostat cannot automatically discover
- The connection URL and JMX credentials, if required, for that application
`,
tasks: [
{
title: 'Go to the Topology page',
description: `1. In the [APP] console navigation bar, click the [Topology]{{highlight nav-topology-tab}}.`,
review: {
instructions: '#### Verify that you see the Topology page.',
failedTaskHelp:
'If you do not see the navigation bar, click the [menu button]{{highlight nav-toggle-btn}} on the masthead.',
},
},
{
title: 'Open Custom Target Creation Form',
description: `
1. From the toolbar, click on the [catalog icon]{{highlight topology-catalog-btn}}.
This will open a modal containing the **Topology Entity Catalog**.
[Alternatively, press <kbd>Ctrl</kbd> + <kbd>Space</kbd> or righ click the topology view (this will open a mini catalog for quick access).]{{admonition tip}}
2. Find and select the **Custom Target** option. To aid you search, use the search bar.
3. Click on the **Create** button to open the **Custom Target Creation Form**.
`,
review: {
instructions: '#### Verify that you can open the catalog and select Custom Target.',
failedTaskHelp: 'If you do not see the Custom Target option, use the search bar to find it.',
},
},
{
title: 'Fill out the Custom Target form',
description: `
1. Enter the **Connection URL** for the target into the [Connection URL]{{highlight ct-connecturl-input}} field.
2. Optionally assign an **Alias** to the target by using the [Alias]{{highlight ct-alias-input}} field.
3. If the target has **JMX authentication** enabled, click the [JMX Credential Option]{{highlight ct-credential-expand}} to expand the form.
4. Use the [Username]{{highlight ct-username-input}} and [Password]{{highlight ct-password-input}} fields to enter the username and password.
`,
review: {
instructions: '#### Verify that you have filled out the form.',
failedTaskHelp:
'Click the [JMX Credential Option]{{highlight ct-credential-expand}} to expand the form to reveal the username and password fields.',
},
},
{
title: 'Test the custom target definition.',
description: `
After form is filled, the [sample node]{{highlight ct-sample-testnode}} will be populated with those information.
To test the **Custom Target** definition:
1. Click on the [sample node icon]{{highlight ct-sample-testnode-icon}} to test your custom target definition. **Cryostat** will attempt a connection to the target defined by the form data.
2. If the attempt succeeds, a **Checkmark** icon is shown. Otherwise, an **Exclaimation** icon along with an alert banner that describes the error.
3. Re-enter the form and repeat step 1-2 until you have a valid definition.
`,
review: {
instructions: '#### Verify that you can test the custom target definition.',
failedTaskHelp: 'You must provide a valid **Connection URL** to enable testing.',
},
},
{
title: 'Create the Custom Target.',
description: `
To create the **Custom Target** definition:
1. Click [Create]{{highlight ct-create-btn}}.
2. If the submission is successful, the view will automatically be directed to the **Topology** page. Otherwise, revise your form inputs.
`,
review: {
instructions: '#### Verify that you can create the custom target and redirected to Topology View.',
failedTaskHelp: 'Revise your **Custom Target** definition to ensure it is valid.',
},
},
{
title: 'View the Custom Target.',
description: `
The **Custom Target** will appear under **Custom Targets Realm**.
[In Graph View, use the toolbar to filter out the **Custom Targets Realm** and the control bar to fit graph into screen, if needed.]{{admonition tip}}
`,
review: {
instructions: '#### Verify that you can can see the Custom Target.',
failedTaskHelp: 'In a clustered graph, use the filter and control bar to adjust the view.',
},
},
],
conclusion: conclusion('Create a Custom Target', 'Custom Targets'),
type: {
text: 'Featured',
color: 'blue',
},
},
};

export default CustomTargetQuickstart;
Loading

0 comments on commit 5802903

Please sign in to comment.