From 5802903ca972f72758110d14aa5553bdb2005c7d Mon Sep 17 00:00:00 2001 From: Thuan Vo Date: Mon, 24 Apr 2023 15:12:38 -0400 Subject: [PATCH] feat(quickstarts): topology quickstarts --- src/app/QuickStarts/all-quickstarts.ts | 4 + src/app/QuickStarts/quickstart-utils.tsx | 4 + .../automated-rules-quickstart.tsx | 12 +- .../quickstarts/cryostat-link-quickstart.tsx | 67 -------- .../quickstarts/dashboard-quickstart.tsx | 9 +- .../quickstarts/generic-quickstart.tsx | 3 +- .../quickstarts/settings-quickstart.tsx | 1 - .../quickstarts/start-a-recording.tsx | 13 +- .../topology/custom-target-quickstart.tsx | 159 ++++++++++++++++++ .../topology/group-start-recordings.tsx | 139 +++++++++++++++ src/app/Topology/Actions/CreateTarget.tsx | 70 ++++---- .../Topology/Toolbar/QuickSearchButton.tsx | 7 +- 12 files changed, 363 insertions(+), 125 deletions(-) delete mode 100644 src/app/QuickStarts/quickstarts/cryostat-link-quickstart.tsx create mode 100644 src/app/QuickStarts/quickstarts/topology/custom-target-quickstart.tsx create mode 100644 src/app/QuickStarts/quickstarts/topology/group-start-recordings.tsx diff --git a/src/app/QuickStarts/all-quickstarts.ts b/src/app/QuickStarts/all-quickstarts.ts index 9a5c7345f9..deb6b5c101 100644 --- a/src/app/QuickStarts/all-quickstarts.ts +++ b/src/app/QuickStarts/all-quickstarts.ts @@ -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[] = [ @@ -49,4 +51,6 @@ export const allQuickStarts: QuickStart[] = [ GenericQuickStart, RecordingQuickStart, SettingsQuickStart, + GroupStartRecordingQuickStart, + CustomTargetQuickstart, ]; diff --git a/src/app/QuickStarts/quickstart-utils.tsx b/src/app/QuickStarts/quickstart-utils.tsx index 421bd8906b..92121d34a0 100644 --- a/src/app/QuickStarts/quickstart-utils.tsx +++ b/src/app/QuickStarts/quickstart-utils.tsx @@ -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) => `
@@ -51,3 +53,5 @@ export const conclusion = (quickstartName: string, feature: string, closingMessa : `

If you would like to learn more about the ${feature} feature, check out the [APP] documentation for detailed guides and information.

` }
`; + +export const CryostatIcon = withThemedIcon(cryostatLogoIcon, cryostatLogoIconDark, 'Cryostat Icon'); diff --git a/src/app/QuickStarts/quickstarts/automated-rules-quickstart.tsx b/src/app/QuickStarts/quickstarts/automated-rules-quickstart.tsx index bb1e38ccff..d8e1013e3f 100644 --- a/src/app/QuickStarts/quickstarts/automated-rules-quickstart.tsx +++ b/src/app/QuickStarts/quickstarts/automated-rules-quickstart.tsx @@ -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'; @@ -58,7 +52,7 @@ const AutomatedRulesQuickStart: QuickStart = { version: 2.3, displayName: displayName, durationMinutes: 5, - icon: , + icon: , description: `Learn about automated rules in **[APP]** and how to create one.`, prerequisites: ['Start a Recording'], introduction: ` @@ -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}} diff --git a/src/app/QuickStarts/quickstarts/cryostat-link-quickstart.tsx b/src/app/QuickStarts/quickstarts/cryostat-link-quickstart.tsx deleted file mode 100644 index ebf81a59f2..0000000000 --- a/src/app/QuickStarts/quickstarts/cryostat-link-quickstart.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/* - * 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 cryostatLogo from '@app/assets/cryostat_icon_rgb_default.svg'; -import build from '@app/build.json'; -import { QuickStart } from '@patternfly/quickstarts'; - -// TODO: Put link quickstarts in a separate QuickStartCatalogSection -const CryostatLinkQuickStart: QuickStart = { - metadata: { - name: 'cryostat-link-quickstart', - instructional: true, - }, - spec: { - version: 2.3, - displayName: 'Cryostat Upstream Documentation', - durationMinutes: 1, - icon: cryostatLogo, - description: `Link to Cryostat's upstream documentation.`, - prerequisites: [''], - introduction: '### This is a generic quickstart.', - link: { - href: build.homePageUrl, - text: 'cryostat.io', - }, - type: { - text: 'External', - color: 'purple', - }, - }, -}; - -export default CryostatLinkQuickStart; diff --git a/src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx b/src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx index ae8f55c536..47eb6917d0 100644 --- a/src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx +++ b/src/app/QuickStarts/quickstarts/dashboard-quickstart.tsx @@ -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'; @@ -60,7 +55,7 @@ const DashboardQuickStart: QuickStart = { version: 2.3, displayName: displayName, durationMinutes: 10, - icon: , + icon: , description: `Learn about what you can do with the **[APP]** Dashboard.`, prerequisites: [''], introduction: ` diff --git a/src/app/QuickStarts/quickstarts/generic-quickstart.tsx b/src/app/QuickStarts/quickstarts/generic-quickstart.tsx index 46fb4e9c7f..b35aad43fb 100644 --- a/src/app/QuickStarts/quickstarts/generic-quickstart.tsx +++ b/src/app/QuickStarts/quickstarts/generic-quickstart.tsx @@ -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'; @@ -71,7 +71,6 @@ const GenericQuickStart: QuickStart = { # - If set to null (icon: ~) will not show an icon */ icon: , - // icon: 'cryostatLogo' || '', prerequisites: [ 'You can optionally list prerequisites', 'Another prerequisite', diff --git a/src/app/QuickStarts/quickstarts/settings-quickstart.tsx b/src/app/QuickStarts/quickstarts/settings-quickstart.tsx index f5d5ae2d72..38bea7e0fe 100644 --- a/src/app/QuickStarts/quickstarts/settings-quickstart.tsx +++ b/src/app/QuickStarts/quickstarts/settings-quickstart.tsx @@ -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'; diff --git a/src/app/QuickStarts/quickstarts/start-a-recording.tsx b/src/app/QuickStarts/quickstarts/start-a-recording.tsx index 12b816cae4..05e732b64c 100644 --- a/src/app/QuickStarts/quickstarts/start-a-recording.tsx +++ b/src/app/QuickStarts/quickstarts/start-a-recording.tsx @@ -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'; @@ -58,7 +53,7 @@ const RecordingQuickStart: QuickStart = { version: 2.3, displayName: displayName, durationMinutes: 10, - icon: , + icon: , description: `Learn how to start a recording with Java Flight Recorder (JFR) with **[APP]**.`, prerequisites: [''], introduction: ` @@ -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.', @@ -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}} diff --git a/src/app/QuickStarts/quickstarts/topology/custom-target-quickstart.tsx b/src/app/QuickStarts/quickstarts/topology/custom-target-quickstart.tsx new file mode 100644 index 0000000000..43688d1134 --- /dev/null +++ b/src/app/QuickStarts/quickstarts/topology/custom-target-quickstart.tsx @@ -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: , + 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 9091 and port name is not jfr-jmx), 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 Ctrl + Space 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; diff --git a/src/app/QuickStarts/quickstarts/topology/group-start-recordings.tsx b/src/app/QuickStarts/quickstarts/topology/group-start-recordings.tsx new file mode 100644 index 0000000000..942d6089df --- /dev/null +++ b/src/app/QuickStarts/quickstarts/topology/group-start-recordings.tsx @@ -0,0 +1,139 @@ +/* + * 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 GroupStartRecordingQuickStart: QuickStart = { + apiVersion: 'v2.3.0', + metadata: { + name: 'topology/start-group-recording', + featureLevel: FeatureLevel.PRODUCTION, + }, + spec: { + version: 2.3, + displayName: 'Start recording on multiple target JVMs', + durationMinutes: 5, + icon: , + description: 'Learn how to start recordings on multiple targets at once.', + introduction: ` +## Topology View +The **Cryostat Topology** provides a visual presentation of all targets discovered by **Cryostat**, using various mechanisms (e.g. **Kubernetes API**, **JDP**) that represent **Realms**. + +With **Topology** view, you can perform actions (i.e. start recording) on an individual target or a group of targets, using either **Graph View** or **List View**. + +### What you'll learn +- How to start recording on a group of targets + +### What you'll need + +- A running instance of Cryostat which has discovered at least one target JVM +- JMX auth credentials for the target JVM (if required) +`, + 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 action menu for a group', + description: ` +To open the action menu for a target group: + +- *Graph View*: Right-click a target group to display the **Action** menu. + +- *List View*: Click the **Action** dropdown menu next to the group name. +`, + review: { + instructions: '#### Verify that you see action menu.', + failedTaskHelp: ` +In *Graph View*, the line surronding the targets represents the group. + +In *List View*, to reveal nested groups, click on list rows.`, + }, + }, + { + title: 'Start recording for a group of targets.', + description: ` +To start recording for targets under the selected group, select \`Start recording\` option. + +On each descendant target, **Cryostat** will create an active recording, named \`cryostat_topology_action\` with a label +\`cryostat.io.topology-group=\` that represents the group the action is invoked on. + +[In some cases (e.g. missing JMX Credentials), **Cryostat** will fail to start recording on some targets.]{{admonition warning}} +`, + review: { + instructions: '#### Verify that you can start recording on a group of targets.', + failedTaskHelp: `If you do not see the **Action** menu, follow the previous steps again.`, + }, + }, + { + title: 'Check the started recordings.', + description: ` +To check the started recordings in the previous step: + +1. In the [APP] console navigation bar, click [Recordings]{{highlight nav-recordings-tab}} to go to **Recording** page. +2. Click the [Target Select]{{highlight target-select}} dropdown menu. +3. Select a target that belong to the selected group. +4. The recording will be displayed with name \`cryostat_topology_action\` and a label \`cryostat.io.topology-group=\` + +[In **Topology Graph View**, targets (i.e. nodes) that have any \`RUNNING\` active recordings, will have an decorator on its top-right corner to indicate so.]{{admonition tip}} +`, + review: { + instructions: '#### Verify that you can start recording on a group of targets.', + failedTaskHelp: `If you do not see the recording, follow the previous steps again.`, + }, + }, + ], + conclusion: conclusion('Start recording on multiple target JVMs', 'Topology'), + type: { + text: 'Featured', + color: 'blue', + }, + nextQuickStart: ['custom-target-quickstart'], + }, +}; + +export default GroupStartRecordingQuickStart; diff --git a/src/app/Topology/Actions/CreateTarget.tsx b/src/app/Topology/Actions/CreateTarget.tsx index 382cbdb3e7..14691e7c88 100644 --- a/src/app/Topology/Actions/CreateTarget.tsx +++ b/src/app/Topology/Actions/CreateTarget.tsx @@ -343,6 +343,7 @@ export const CreateTarget: React.FC = ({ prefilled, ..._props onChange={handleConnectUrlChange} isDisabled={loading || testing} validated={validConnectUrl} + data-quickstart-id="ct-connecturl-input" /> = ({ prefilled, ..._props id="alias" onChange={handleAliasChange} isDisabled={loading || testing} + data-quickstart-id="ct-alias-input" /> - + = ({ prefilled, ..._props id="username" onChange={handleUsernameChange} isDisabled={loading || testing} + data-quickstart-id="ct-username-input" /> = ({ prefilled, ..._props type="password" id="password" onChange={handlePasswordChange} + data-quickstart-id="ct-password-input" /> @@ -427,6 +431,7 @@ export const CreateTarget: React.FC = ({ prefilled, ..._props isDisabled={!connectUrl || validConnectUrl !== ValidatedOptions.success || loading} onClick={handleSubmit} {...createButtonLoadingProps} + data-quickstart-id="ct-create-btn" > {loading ? t('CREATING', { ns: 'common' }) : t('CREATE', { ns: 'common' })} @@ -494,39 +499,46 @@ export const SampleNodeDonut: React.FC = ({ )} - - -
+ +
- {testing ? : Cryostat Logo} +
+ {testing ? : Cryostat Logo} +
+
{statusIcon.icon}
-
{statusIcon.icon}
-
- - - -
- - {'CT'} - {_transformedTarget.alias || ''} -
- + + +
+ + {'CT'} + + {_transformedTarget.alias || ''} +
+ + Click on the sample node above to test custom target definition. diff --git a/src/app/Topology/Toolbar/QuickSearchButton.tsx b/src/app/Topology/Toolbar/QuickSearchButton.tsx index 8e70dafc59..eec3742dd9 100644 --- a/src/app/Topology/Toolbar/QuickSearchButton.tsx +++ b/src/app/Topology/Toolbar/QuickSearchButton.tsx @@ -48,7 +48,12 @@ export interface QuickSearchButtonProps { export const QuickSearchButton: React.FC = ({ onClick, tooltipContent, ...props }) => { return ( -