diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx new file mode 100644 index 00000000..28276930 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithQuickStart.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import Message from '@patternfly/chatbot/dist/dynamic/Message'; +import patternflyAvatar from './patternfly_avatar.jpg'; +import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts'; +import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts'; +import { QuickStart } from '@patternfly/chatbot/dist/esm/Message/QuickStarts/types'; + +export const MessageWithQuickStartExample: React.FunctionComponent = () => ( + <> + alert(id) + }} + /> + alert(id) + }} + /> + +); diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md index 7033369a..052b96f4 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md @@ -39,7 +39,8 @@ import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel' import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone'; import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment'; import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert'; - +import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts'; +import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts'; import userAvatar from './user_avatar.svg'; import squareImg from './PF-social-color-square.svg'; @@ -116,6 +117,16 @@ The API for a source requires a link at minimum, but we strongly recommend provi ``` +### Messages with quick start tiles + +[Quick start](/extensions/quick-starts/) tiles can be added to messages via the `quickStarts` prop. Users can initiate the quick start from a link within the message tile. + +The quick start tile displayed below the message is based on the tile included in the [PatternFly quick starts extension](https://github.com/patternfly/patternfly-quickstarts), but with slightly more limited functionality. For example, it does not track the state of the extension. However, it supports an additional `onSelectQuickStart` prop, so that the name of the quick start can be captured on click. This can be used to trigger other behavior in your application, such as launching that quick start in your main UI. + +```js file="./MessageWithQuickStart.tsx" + +``` + ### User messages Messages from users have a different background color to differentiate them from bot messages. You can also display a custom avatar that is uploaded by the user. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `` component via `avatarProps`. diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/explore-pipeline-quickstart.ts b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/explore-pipeline-quickstart.ts new file mode 100644 index 00000000..4dd0faa6 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/explore-pipeline-quickstart.ts @@ -0,0 +1,65 @@ +import userAvatar from './user_avatar.svg'; + +export const explorePipelinesQuickStart = { + apiVersion: 'console.openshift.io/v1', + kind: 'QuickStarts', + metadata: { + name: 'explore-pipelines' + }, + spec: { + version: 4.7, + displayName: `Installing the Pipelines Operator`, + durationMinutes: 10, + icon: userAvatar, + description: `Install the OpenShift® Pipelines Operator to build Pipelines using Tekton.`, + prerequisites: [''], + introduction: `OpenShift® Pipelines is a cloud-native, continuous integration and continuous delivery (CI/CD) solution based on Kubernetes resources. It uses Tekton building blocks to automate deployments across multiple Kubernetes distributions by abstracting away the underlying implementation details. +* OpenShift Pipelines is a serverless CI/CD system that runs pipelines with all the required dependencies in isolated containers. +* They are designed for decentralized teams that work on a microservice-based architecture. +* They are defined using standard Custom Resource Definitions making them extensible and easy to integrate with the existing Kubernetes tools. This enables you to scale on-demand. +* You can use OpenShift Pipelines to build images with Kubernetes tools such as Source-to-Image (S2I), Buildah, Buildpacks, and Kaniko that are portable across any Kubernetes platform. +* You can use the Developer perspective to create and manage pipelines and view logs in your namespaces. + +To start using Pipelines, install the OpenShift® Pipelines Operator on your cluster.`, + tasks: [ + { + title: `Installing the OpenShift Pipelines Operator`, + description: `### To install the OpenShift Pipelines Operator: + +1. From the **Administrator** perspective in the console navigation panel, click **Operators > OperatorHub**. +2. In the **Filter by keyword** field, type \`OpenShift Pipelines Operator\`. +3. If the tile has an Installed label, the Operator is already installed. Proceed to the next quick start to create a Pipeline. +4. Click the **tile** to open the Operator details. +5. At the top of the OpenShift Pipelines Operator panel that opens, click **Install**. +6. Fill out the Operator subscription form by selecting the channel that matches your OpenShift cluster, and then click **Install**. +7. On the **Installed Operators** page, wait for the OpenShift Pipelines Operator's status to change from **Installing** to **Succeeded**. `, + review: { + instructions: `#### To verify that the OpenShift Pipelines Operator is installed: +1. From the **Operators** section of the navigation, go to the **Installed Operators** page. +2. Verify that the **OpenShift Pipelines Operator** appears in the list of Operators. + +In the status column, is the status of the OpenShift Pipelines Operator **Succeeded**?`, + failedTaskHelp: `This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/pipelines/installing-pipelines.html#op-installing-pipelines-operator-in-web-console_installing-pipelines) about this topic.` + }, + summary: { + success: `You have installed the Pipelines Operator!`, + failed: `Try the steps again.` + } + } + ], + conclusion: `You successfully installed the OpenShift Pipelines Operator! If you want to learn how to deploy an application and associate a Pipeline with it, take the Creating a Pipeline quick start.`, + nextQuickStart: [`install-app-and-associate-pipeline`], + accessReviewResources: [ + { + group: 'operators.coreos.com', + resource: 'operatorgroups', + verb: 'list' + }, + { + group: 'packages.operators.coreos.com', + resource: 'packagemanifests', + verb: 'list' + } + ] + } +}; diff --git a/packages/module/src/Message/Message.test.tsx b/packages/module/src/Message/Message.test.tsx index c2e6ea49..fc5e3e16 100644 --- a/packages/module/src/Message/Message.test.tsx +++ b/packages/module/src/Message/Message.test.tsx @@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import Message from './Message'; import userEvent from '@testing-library/user-event'; +import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart'; +import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image'; const ALL_ACTIONS = [ { label: /Good response/i }, @@ -437,4 +439,56 @@ describe('Message', () => { expect(screen.getByRole('img')).toHaveClass('test'); expect(screen.getByRole('img')).toHaveClass('pf-chatbot__message-avatar'); }); + it('should handle QuickStart tile correctly', () => { + render( + alert(id) + }} + /> + ); + expect(screen.getByRole('button', { name: 'Monitoring your sample application' })).toBeTruthy(); + expect(screen.getByRole('heading', { name: '1 Prerequisite' })).toBeTruthy(); + expect(screen.getByRole('button', { name: 'Show prerequisites' })).toBeTruthy(); + expect(screen.getByRole('button', { name: 'Start' })).toBeTruthy(); + }); + it('should handle click on QuickStart tile correctly', async () => { + const spy = jest.fn(); + render( + spy(id) + }} + /> + ); + await userEvent.click(screen.getByRole('button', { name: 'Monitoring your sample application' })); + expect(spy).toHaveBeenCalledTimes(1); + expect(spy).toHaveBeenCalledWith(monitorSampleAppQuickStart.metadata.name); + }); + it('should handle QuickStart tile with image correctly', async () => { + const spy = jest.fn(); + render( + spy(id) + }} + /> + ); + expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png'); + }); }); diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx index 86c99ceb..8c7e0b06 100644 --- a/packages/module/src/Message/Message.tsx +++ b/packages/module/src/Message/Message.tsx @@ -25,6 +25,8 @@ import SourcesCard, { SourcesCardProps } from '../SourcesCard'; import ListItemMessage from './ListMessage/ListItemMessage'; import UnorderedListMessage from './ListMessage/UnorderedListMessage'; import OrderedListMessage from './ListMessage/OrderedListMessage'; +import QuickStartTile from './QuickStarts/QuickStartTile'; +import { QuickStart, QuickstartAction } from './QuickStarts/types'; export interface QuickResponse extends Omit { content: string; @@ -89,6 +91,19 @@ export interface MessageProps extends Omit, 'rol hasRoundAvatar?: boolean; /** Any additional props applied to the avatar, for additional customization */ avatarProps?: Omit; + /** Props for QuickStart card */ + quickStarts?: { + quickStart: QuickStart; + onSelectQuickStart: (id?: string) => void; + minuteWord?: string; + minuteWordPlural?: string; + prerequisiteWord?: string; + prerequisiteWordPlural?: string; + quickStartButtonAriaLabel?: string; + className?: string; + onClick?: () => void; + action?: QuickstartAction; + }; } export const Message: React.FunctionComponent = ({ @@ -108,6 +123,7 @@ export const Message: React.FunctionComponent = ({ attachments, hasRoundAvatar = true, avatarProps, + quickStarts, ...props }: MessageProps) => { let avatarClassName; @@ -165,6 +181,17 @@ export const Message: React.FunctionComponent = ({ )} {!isLoading && sources && } + {quickStarts && quickStarts.quickStart && ( + + )} {!isLoading && actions && } {!isLoading && quickResponses && ( = ({ src, alt, className, fallback }) => { + const [isSrcValid, setIsSrcValid] = React.useState(true); + + if (src && isSrcValid) { + return {alt} setIsSrcValid(false)} />; + } + + return <>{fallback}; +}; + +export default FallbackImg; diff --git a/packages/module/src/Message/QuickStarts/QuickStartTile.scss b/packages/module/src/Message/QuickStarts/QuickStartTile.scss new file mode 100644 index 00000000..7eef5d4a --- /dev/null +++ b/packages/module/src/Message/QuickStarts/QuickStartTile.scss @@ -0,0 +1,25 @@ +.pf-chatbot__quickstarts-tile { + min-width: 360px; + max-width: 650px; + width: 100%; + + @media screen and (max-width: 700px) { + max-width: 100%; + min-width: initial; + } + // some icons provided to catalog tiles might have no defined height/width. Without this style, in those cases + // the icons would have a height and width of 0. + .pf-v6-c-card__header-main { + .pf-v6-c-icon__content { + display: contents; + } + } +} + +.pf-v6-theme-dark { + .pf-chatbot__quickstarts-tile { + .pfext-catalog-item-icon__img { + filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4); + } + } +} diff --git a/packages/module/src/Message/QuickStarts/QuickStartTile.tsx b/packages/module/src/Message/QuickStarts/QuickStartTile.tsx new file mode 100644 index 00000000..251d5c81 --- /dev/null +++ b/packages/module/src/Message/QuickStarts/QuickStartTile.tsx @@ -0,0 +1,147 @@ +import * as React from 'react'; +import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon'; +import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon'; +import { + Card, + CardBody, + CardHeader, + CardFooter, + CardTitle, + Icon, + Button, + Flex, + Stack, + Label, + pluralize +} from '@patternfly/react-core'; +import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon'; +import QuickStartTileHeader from './QuickStartTileHeader'; +import QuickStartTileDescription from './QuickStartTileDescription'; +import { QuickStart, QuickstartAction } from './types'; +import FallbackImg from './FallbackImg'; + +export const camelize = (str: string) => + str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) { + if (+match === 0) { + return ''; + } // or if (/\s+/.test(match)) for white spaces + return index === 0 ? match.toLowerCase() : match.toUpperCase(); + }); + +export interface QuickStartTileProps { + /** ClassName applied to the card */ + className?: string; + /** The quickstart object triggered by this tile */ + quickStart: QuickStart; + /** Event handler attached to the tile */ + onClick?: () => void; + /** Action config for button rendered next to title */ + action?: QuickstartAction; + /** Callback that returns active quick start value when clicked */ + onSelectQuickStart: (id?: string) => void; + /** Label for the English word "minute". */ + minuteWord?: string; + /** Label for the English word "minutes". */ + minuteWordPlural?: string; + /** Label for the English word "Prerequisite" */ + prerequisiteWord?: string; + /** Label for the English word "Prerequisites" */ + prerequisiteWordPlural?: string; + /** Aria-label for the quick start description button */ + quickStartButtonAriaLabel?: string; +} + +const QuickStartTile: React.FC = ({ + className, + quickStart, + onClick, + onSelectQuickStart, + minuteWord = 'minute', + minuteWordPlural = 'minutes', + prerequisiteWord, + prerequisiteWordPlural, + quickStartButtonAriaLabel, + action +}) => { + const { + metadata: { name: id }, + spec: { icon, displayName, description, durationMinutes, prerequisites, link, type } + } = quickStart; + + let quickStartIcon: React.ReactNode; + if (typeof icon === 'object') { + quickStartIcon = {icon}; + } else { + quickStartIcon = ( + + } /> + + ); + } + + const onSelect = () => { + if (!link) { + onSelectQuickStart(id); + } else { + window.open(link.href, '_blank', 'noopener,noreferrer'); + } + onClick && onClick(); + }; + + const ActionIcon = action?.icon || OutlinedBookmarkIcon; + const additionalAction = action ? ( + + + + ); +}; + +export default QuickStartTile; diff --git a/packages/module/src/Message/QuickStarts/QuickStartTileDescription.test.tsx b/packages/module/src/Message/QuickStarts/QuickStartTileDescription.test.tsx new file mode 100644 index 00000000..3c0c5d9b --- /dev/null +++ b/packages/module/src/Message/QuickStarts/QuickStartTileDescription.test.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import userEvent from '@testing-library/user-event'; +import { monitorSampleAppQuickStart } from './monitor-sampleapp-quickstart'; +import QuickStartTileDescription, { pluralizeWord } from './QuickStartTileDescription'; + +describe('pluralizeWord function', () => { + it('should render no plural correctly', () => { + expect(pluralizeWord(2, 'pizza')).toBe('pizzas'); + }); +}); + +describe('QuickStart tile description', () => { + it('should render no prereqs correctly', () => { + render(); + expect(screen.queryByRole('heading')).toBeFalsy(); + }); + it('should render singular prereq correctly', () => { + render( + + ); + expect(screen.getByRole('heading', { name: /1 Prerequisite/i })).toBeTruthy(); + expect(screen.getByRole('button', { name: /Show prerequisite/i })).toBeTruthy(); + }); + it('should render plural prereq correctly', () => { + render( + + ); + expect(screen.getByRole('heading', { name: /2 Prerequisites/i })).toBeTruthy(); + expect(screen.getByRole('button', { name: /Show prerequisites/i })).toBeTruthy(); + }); + it('should be able to click prereqs link', async () => { + render( + + ); + const button = screen.getByRole('button', { name: /Show prerequisites/i }); + expect(screen.queryByRole('dialog', { name: /Prerequisite/i })).toBeFalsy(); + await userEvent.click(button); + + expect(screen.getByRole('dialog', { name: /Prerequisite/i })).toBeTruthy(); + expect(screen.getByRole('button', { name: /Close/i })).toBeTruthy(); + expect(screen.getByText(/You completed the "Getting started with a sample" quick start./i)).toBeTruthy(); + }); +}); diff --git a/packages/module/src/Message/QuickStarts/QuickStartTileDescription.tsx b/packages/module/src/Message/QuickStarts/QuickStartTileDescription.tsx new file mode 100644 index 00000000..5f47f3eb --- /dev/null +++ b/packages/module/src/Message/QuickStarts/QuickStartTileDescription.tsx @@ -0,0 +1,81 @@ +import * as React from 'react'; +import { Button, Flex, pluralize, Popover } from '@patternfly/react-core'; +import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; + +interface QuickStartTileDescriptionProps { + /** QuickStart description */ + description: string; + /** QuickStart prerequisites */ + prerequisites?: string[]; + /** Label for the English word "Prerequisite" */ + prerequisiteWord?: string; + /** Label for the English word "Prerequisites" */ + prerequisiteWordPlural?: string; + /** Aria-label for the quick start button */ + quickStartButtonAriaLabel?: string; +} + +/** This function is a helper for pluralizing strings stolen from React. + * + * @param {number} i The quantity of the string you want to pluralize + * @param {string} singular The singular version of the string + * @param {string} plural The change to the string that should occur if the quantity is not equal to 1. + * Defaults to adding an 's'. + */ +export function pluralizeWord(i: number, singular: string, plural?: string) { + if (!plural) { + plural = `${singular}s`; + } + return `${i === 1 ? singular : plural}`; +} + +const QuickStartTileDescription: React.FC = ({ + description, + prerequisites, + prerequisiteWord = 'Prerequisite', + prerequisiteWordPlural = 'Prerequisites', + quickStartButtonAriaLabel = 'Show prerequisites' +}) => { + const prereqs = prerequisites?.filter((p) => p); + const buttonRef = React.useRef(null); + const pluralizedPrereq = pluralizeWord(prereqs?.length || 0, prerequisiteWord, prerequisiteWordPlural); + return ( + <> + {description} + {prereqs && prereqs.length > 0 && ( + +
{pluralize(prereqs.length, prerequisiteWord, prerequisiteWordPlural)}
+ + +
    + {prereqs.map((prerequisite, index) => ( + // eslint-disable-next-line react/no-array-index-key +
  • {prerequisite}
    • + ))} +
+ + } + /> + + )} + + ); +}; +export default QuickStartTileDescription; diff --git a/packages/module/src/Message/QuickStarts/QuickStartTileHeader.tsx b/packages/module/src/Message/QuickStarts/QuickStartTileHeader.tsx new file mode 100644 index 00000000..6315f293 --- /dev/null +++ b/packages/module/src/Message/QuickStarts/QuickStartTileHeader.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { Button, Flex } from '@patternfly/react-core'; + +interface QuickStartTileHeaderProps { + /** Name for the header */ + name: string; + /** Id for the QuickStart */ + quickStartId?: string; + /** Callback for when the name of the QuickStart is clicked */ + onSelect: (e: React.FormEvent | React.MouseEvent) => void; +} + +const QuickStartTileHeader: React.FC = ({ name, quickStartId, onSelect }) => ( + + + +); + +export default QuickStartTileHeader; diff --git a/packages/module/src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts b/packages/module/src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts new file mode 100644 index 00000000..a35d4b83 --- /dev/null +++ b/packages/module/src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts @@ -0,0 +1,75 @@ +export const monitorSampleAppQuickStartWithImage = { + apiVersion: 'console.openshift.io/v1', + kind: 'QuickStarts', + metadata: { + name: 'monitor-sampleapp' + }, + spec: { + icon: 'test.png', // this is only difference + version: 4.7, + displayName: 'Monitoring your sample application', + durationMinutes: 10, + description: `Now that you’ve created a sample application and added health checks, let’s monitor your application.`, + prerequisites: [`You completed the "Getting started with a sample" quick start.`], + introduction: `### This quick start shows you how to monitor your sample application. +You should have previously created the **sample-app** application and **nodejs-sample** deployment via the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment.`, + tasks: [ + { + title: `Viewing the monitoring details of your sample application`, + description: `### To view the details of your sample application: +1. Go to the project your sample application was created in. +2. In the ** Developer** perspective, go to **Topology** view. +3. Click on the **nodejs-sample** deployment to view its details. +4. Click on the **Monitoring** tab in the side panel. +You can see context sensitive metrics and alerts in the **Monitoring** tab.`, + review: { + instructions: `#### To verify you can view the monitoring information: +1. Do you see a **Metrics** accordion in the side panel? +2. Do you see a **View monitoring dashboard** link in the **Metrics** accordion? +3. Do you see three charts in the **Metrics** accordion: **CPU Usage**, **Memory Usage** and **Receive Bandwidth**?`, + failedTaskHelp: `This task isn’t verified yet. Try the task again.` + }, + summary: { + success: `You have learned how you can monitor your sample app!`, + failed: `Try the steps again.` + } + }, + { + title: `Viewing your project monitoring dashboard`, + description: `### To view the project monitoring dashboard in the context of **nodejs-sample**: +1. Click on the **View monitoring dashboard** link in the side panel. +2. You can change the **Time Range** and **Refresh Interval** of the dashboard. +3. You can change the context of the dashboard as well by clicking on the drop-down list. Select a specific workload or **All Workloads** to view the dashboard in the context of the entire project.`, + review: { + instructions: `#### To verify that you are able to view the monitoring dashboard: +Do you see metrics charts in the dashboard?`, + failedTaskHelp: `This task isn’t verified yet. Try the task again.` + }, + summary: { + success: `You have learned how to view the dashboard in the context of your sample app!`, + failed: `Try the steps again.` + } + }, + { + title: `Viewing custom metrics`, + description: `### To view custom metrics: +1. Click on the **Metrics** tab of the **Monitoring** page. +2. Click the **Select Query** drop-down list to see the available queries. +3. Click on **Filesystem Usage** from the list to run the query.`, + review: { + instructions: `#### Verify you can see the chart associated with the query: +Do you see a chart displayed with filesystem usage for your project? Note: select **Custom Query** from the dropdown to create and run a custom query utilizing PromQL. +`, + failedTaskHelp: `This task isn’t verified yet. Try the task again.` + }, + summary: { + success: `You have learned how to run a query!`, + failed: `Try the steps again.` + } + } + ], + conclusion: `You have learned how to access workload monitoring and metrics!`, + + nextQuickStart: [``] + } +}; diff --git a/packages/module/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts b/packages/module/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts new file mode 100644 index 00000000..ecd2492e --- /dev/null +++ b/packages/module/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts @@ -0,0 +1,75 @@ +export const monitorSampleAppQuickStart = { + apiVersion: 'console.openshift.io/v1', + kind: 'QuickStarts', + metadata: { + name: 'monitor-sampleapp' + }, + spec: { + version: 4.7, + displayName: 'Monitoring your sample application', + durationMinutes: 10, + icon: '', + description: `Now that you’ve created a sample application and added health checks, let’s monitor your application.`, + prerequisites: [`You completed the "Getting started with a sample" quick start.`], + introduction: `### This quick start shows you how to monitor your sample application. +You should have previously created the **sample-app** application and **nodejs-sample** deployment via the **Get started with a sample** quick start. If you haven't, you may be able to follow these tasks with any existing deployment.`, + tasks: [ + { + title: `Viewing the monitoring details of your sample application`, + description: `### To view the details of your sample application: +1. Go to the project your sample application was created in. +2. In the ** Developer** perspective, go to **Topology** view. +3. Click on the **nodejs-sample** deployment to view its details. +4. Click on the **Monitoring** tab in the side panel. +You can see context sensitive metrics and alerts in the **Monitoring** tab.`, + review: { + instructions: `#### To verify you can view the monitoring information: +1. Do you see a **Metrics** accordion in the side panel? +2. Do you see a **View monitoring dashboard** link in the **Metrics** accordion? +3. Do you see three charts in the **Metrics** accordion: **CPU Usage**, **Memory Usage** and **Receive Bandwidth**?`, + failedTaskHelp: `This task isn’t verified yet. Try the task again.` + }, + summary: { + success: `You have learned how you can monitor your sample app!`, + failed: `Try the steps again.` + } + }, + { + title: `Viewing your project monitoring dashboard`, + description: `### To view the project monitoring dashboard in the context of **nodejs-sample**: +1. Click on the **View monitoring dashboard** link in the side panel. +2. You can change the **Time Range** and **Refresh Interval** of the dashboard. +3. You can change the context of the dashboard as well by clicking on the drop-down list. Select a specific workload or **All Workloads** to view the dashboard in the context of the entire project.`, + review: { + instructions: `#### To verify that you are able to view the monitoring dashboard: +Do you see metrics charts in the dashboard?`, + failedTaskHelp: `This task isn’t verified yet. Try the task again.` + }, + summary: { + success: `You have learned how to view the dashboard in the context of your sample app!`, + failed: `Try the steps again.` + } + }, + { + title: `Viewing custom metrics`, + description: `### To view custom metrics: +1. Click on the **Metrics** tab of the **Monitoring** page. +2. Click the **Select Query** drop-down list to see the available queries. +3. Click on **Filesystem Usage** from the list to run the query.`, + review: { + instructions: `#### Verify you can see the chart associated with the query: +Do you see a chart displayed with filesystem usage for your project? Note: select **Custom Query** from the dropdown to create and run a custom query utilizing PromQL. +`, + failedTaskHelp: `This task isn’t verified yet. Try the task again.` + }, + summary: { + success: `You have learned how to run a query!`, + failed: `Try the steps again.` + } + } + ], + conclusion: `You have learned how to access workload monitoring and metrics!`, + + nextQuickStart: [``] + } +}; diff --git a/packages/module/src/Message/QuickStarts/types.ts b/packages/module/src/Message/QuickStarts/types.ts new file mode 100644 index 00000000..a982d1a9 --- /dev/null +++ b/packages/module/src/Message/QuickStarts/types.ts @@ -0,0 +1,154 @@ +import { ButtonProps } from '@patternfly/react-core'; + +// These types are all from the QuickStart extension. +// We want to ensure parity, so be careful when adjusting these. +export interface AccessReviewResourceAttributes { + group?: string; + resource?: string; + subresource?: string; + verb?: K8sVerb; + name?: string; + namespace?: string; +} + +export type K8sVerb = 'create' | 'get' | 'list' | 'update' | 'patch' | 'delete' | 'deletecollection' | 'watch'; + +export interface QuickStart { + apiVersion?: string; + kind?: string; + metadata: ObjectMetadata; + spec: QuickStartSpec; +} + +export interface ObjectMetadata { + name: string; + annotations?: { [key: string]: string }; + clusterName?: string; + creationTimestamp?: string; + deletionGracePeriodSeconds?: number; + deletionTimestamp?: string; + finalizers?: string[]; + generateName?: string; + generation?: number; + labels?: { [key: string]: string }; + managedFields?: any[]; + namespace?: string; + ownerReferences?: OwnerReference[]; + resourceVersion?: string; + uid?: string; + // language can be: en + language?: string; + // country can be: US + country?: string; + // locale is a combination of language and country, for example: en_US + locale?: string; + // anything else to custom define + [key: string]: any; +} + +export interface OwnerReference { + name: string; + kind: string; + uid: string; + apiVersion: string; + controller?: boolean; + blockOwnerDeletion?: boolean; +} + +export interface QuickStartTask { + title?: string; + description?: string; + review?: QuickStartTaskReview; + summary?: QuickStartTaskSummary; + proc?: string; +} + +export interface QuickStartTaskReview { + instructions?: string; + failedTaskHelp?: string; +} + +export interface QuickStartTaskSummary { + success?: string; + failed?: string; +} + +export interface QuickstartAction { + /** Screen reader aria label. */ + 'aria-label': string; + /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */ + icon?: React.ComponentType; + /** Callback with synthetic event parameter. */ + onClick?: (e: React.SyntheticEvent) => void; + /** Additional button props to be rendered as extra props. */ + buttonProps?: ButtonProps; +} + +export interface QuickStart { + apiVersion?: string; + kind?: string; + metadata: ObjectMetadata; + spec: QuickStartSpec; +} + +export interface QuickStartSpec { + version?: number; + displayName: string; + durationMinutes?: number; + icon: React.ReactNode; + description: string; + prerequisites?: string[]; + introduction?: string; + tasks?: QuickStartTask[]; + conclusion?: string; + nextQuickStart?: string[]; + accessReviewResources?: AccessReviewResourceAttributes[]; + link?: QuickStartExternal; + type?: QuickStartType; +} + +export interface QuickStartTask { + title?: string; + description?: string; + review?: QuickStartTaskReview; + summary?: QuickStartTaskSummary; + proc?: string; +} + +export interface QuickStartTaskReview { + instructions?: string; + failedTaskHelp?: string; +} + +export interface QuickStartTaskSummary { + success?: string; + failed?: string; +} + +export type AllQuickStartStates = Record; + +export type QuickStartState = Record; + +export enum QuickStartStatus { + COMPLETE = 'Complete', + IN_PROGRESS = 'In Progress', + NOT_STARTED = 'Not started' +} + +export enum QuickStartTaskStatus { + INIT = 'Initial', + VISITED = 'Visited', + REVIEW = 'Review', + SUCCESS = 'Success', + FAILED = 'Failed' +} + +export interface QuickStartExternal { + href: string; + text?: string; +} + +export interface QuickStartType { + text: string; + color?: 'green' | 'purple' | 'grey' | 'blue' | 'orange' | 'red' | 'teal' | 'orangered' | 'yellow'; +} diff --git a/packages/module/src/main.scss b/packages/module/src/main.scss index 32528581..d55d9b56 100644 --- a/packages/module/src/main.scss +++ b/packages/module/src/main.scss @@ -18,6 +18,7 @@ @import './Message/TextMessage/TextMessage'; @import './Message/ListMessage/ListMessage'; @import './Message/MessageLoading'; +@import './Message/QuickStarts/QuickStartTile'; @import './MessageBar/MessageBar'; @import './MessageBox/MessageBox'; @import './MessageBox/JumpButton';