@patternfly/quickstarts 2.2.2 → 2.3.0

package/src/controller/__tests__/QuickStartContent.spec.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ShallowWrapper, shallow } from 'enzyme';
+import { allQuickStarts } from '../../data/quick-start-test-data';
+import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import { getQuickStartByName } from '../../utils/quick-start-utils';
+import QuickStartConclusion from '../QuickStartConclusion';
+import QuickStartContent from '../QuickStartContent';
+import QuickStartIntroduction from '../QuickStartIntroduction';
+import QuickStartTasks from '../QuickStartTasks';
+
+type QuickStartContentProps = React.ComponentProps<typeof QuickStartContent>;
+
+let wrapper: ShallowWrapper<QuickStartContentProps>;
+
+const props: QuickStartContentProps = {
+  quickStart: getQuickStartByName('explore-serverless', allQuickStarts),
+  allTaskStatuses: [
+    QuickStartTaskStatus.INIT,
+    QuickStartTaskStatus.INIT,
+    QuickStartTaskStatus.INIT,
+  ],
+  taskNumber: -1,
+  onTaskReview: jest.fn(),
+  onTaskSelect: jest.fn(),
+  onQuickStartChange: jest.fn(),
+};
+
+describe('QuickStartContent', () => {
+  beforeEach(() => {
+    wrapper = shallow(<QuickStartContent {...props} />);
+  });
+
+  it('should render QuickStartIntroduction when the tour status is Not Started', () => {
+    expect(wrapper.find(QuickStartIntroduction).length).toBe(1);
+    expect(wrapper.find(QuickStartTasks).length).toBe(0);
+    expect(wrapper.find(QuickStartConclusion).length).toBe(0);
+  });
+
+  it('should render QuickStartTasks when the tour is In Progress', () => {
+    wrapper = shallow(<QuickStartContent {...props} taskNumber={1} />);
+    expect(wrapper.find(QuickStartIntroduction).length).toBe(0);
+    expect(wrapper.find(QuickStartTasks).length).toBe(1);
+    expect(wrapper.find(QuickStartConclusion).length).toBe(0);
+  });
+
+  it('should render QuickStartConclusion when the tour is Complete', () => {
+    wrapper = shallow(<QuickStartContent {...props} taskNumber={2} />);
+    expect(wrapper.find(QuickStartIntroduction).length).toBe(0);
+    expect(wrapper.find(QuickStartTasks).length).toBe(0);
+    expect(wrapper.find(QuickStartConclusion).length).toBe(1);
+  });
+});

package/src/controller/__tests__/QuickStartFooter.spec.tsx

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import { shallow } from 'enzyme';
+import { QuickStartStatus } from '../../utils/quick-start-types';
+import QuickStartFooter from '../QuickStartFooter';
+
+jest.mock('react', () => {
+  const ActualReact = require.requireActual('react');
+  return {
+    ...ActualReact,
+    useContext: () => jest.fn(),
+  };
+});
+
+describe('QuickStartFooter', () => {
+  type QuickStartFooterProps = React.ComponentProps<typeof QuickStartFooter>;
+  let quickStartFooterProps: QuickStartFooterProps;
+  beforeEach(() => {
+    spyOn(React, 'useContext').and.returnValue({
+      activeQuickStartID: '',
+      startQuickStart: () => {},
+      restartQuickStart: () => {},
+      getResource: (key) => `quickstart~${key}`,
+    });
+  });
+
+  it('should load Start button for not started tours', () => {
+    quickStartFooterProps = {
+      status: QuickStartStatus.NOT_STARTED,
+      footerClass: 'test',
+      quickStartId: 'test-quickstart',
+      onNext: () => null,
+      onBack: () => null,
+      totalTasks: 4,
+      taskNumber: -1,
+    };
+
+    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
+    const footerButtons = quickStartFooterWrapper.find(Button);
+    expect(footerButtons.exists()).toBeTruthy();
+    expect(footerButtons.length).toEqual(1);
+    expect(
+      footerButtons
+        .at(0)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Start');
+  });
+
+  it('should load Continue and Restart buttons for in progress tours at into page', () => {
+    quickStartFooterProps = {
+      status: QuickStartStatus.IN_PROGRESS,
+      footerClass: 'test',
+      quickStartId: 'test-quickstart',
+      onNext: () => null,
+      onBack: () => null,
+      totalTasks: 4,
+      taskNumber: -1,
+    };
+
+    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
+    const footerButtons = quickStartFooterWrapper.find(Button);
+    expect(footerButtons.exists()).toBeTruthy();
+    expect(footerButtons.length).toEqual(2);
+    expect(
+      footerButtons
+        .at(0)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Continue');
+    expect(
+      footerButtons
+        .at(1)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Restart');
+  });
+
+  it('should load Next and Back buttons, and Restart link for in progress tours in task page', () => {
+    quickStartFooterProps = {
+      status: QuickStartStatus.IN_PROGRESS,
+      footerClass: 'test',
+      quickStartId: 'test-quickstart',
+      onNext: () => null,
+      onBack: () => null,
+      totalTasks: 4,
+      taskNumber: 2,
+    };
+
+    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
+    const footerButtons = quickStartFooterWrapper.find(Button);
+    expect(footerButtons.exists()).toBeTruthy();
+    expect(footerButtons.length).toEqual(3);
+    expect(
+      footerButtons
+        .at(0)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Next');
+    expect(
+      footerButtons
+        .at(1)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Back');
+    expect(
+      footerButtons
+        .at(2)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Restart');
+  });
+
+  it('should load Close, Back and Restart buttons for completed tours in conclusion page', () => {
+    quickStartFooterProps = {
+      status: QuickStartStatus.COMPLETE,
+      footerClass: 'test',
+      quickStartId: 'test-quickstart',
+      onNext: () => null,
+      onBack: () => null,
+      totalTasks: 4,
+      taskNumber: 4,
+    };
+
+    const quickStartFooterWrapper = shallow(<QuickStartFooter {...quickStartFooterProps} />);
+    const footerButtons = quickStartFooterWrapper.find(Button);
+    expect(footerButtons.exists()).toBeTruthy();
+    expect(footerButtons.length).toEqual(3);
+    expect(
+      footerButtons
+        .at(0)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Close');
+    expect(
+      footerButtons
+        .at(1)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Back');
+    expect(
+      footerButtons
+        .at(2)
+        .childAt(0)
+        .text(),
+    ).toBe('quickstart~Restart');
+  });
+});

package/src/controller/__tests__/QuickStartTaskHeader.spec.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Title, WizardNavItem } from '@patternfly/react-core';
+import { ShallowWrapper, shallow } from 'enzyme';
+import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import QuickStartTaskHeader from '../QuickStartTaskHeader';
+
+type QuickStartTaskHeaderProps = React.ComponentProps<typeof QuickStartTaskHeader>;
+let wrapper: ShallowWrapper<QuickStartTaskHeaderProps>;
+const props: QuickStartTaskHeaderProps = {
+  title: 'title',
+  taskIndex: 1,
+  subtitle: 'subtitle',
+  taskStatus: QuickStartTaskStatus.INIT,
+  size: 'lg',
+  isActiveTask: true,
+  onTaskSelect: jest.fn(),
+};
+
+describe('QuickStartTaskHeader', () => {
+  beforeEach(() => {
+    // DOMPurify.addHook = jest.fn();
+    wrapper = shallow(<QuickStartTaskHeader {...props} />);
+  });
+
+  it('should render subtitle for active task', () => {
+    expect(
+      wrapper
+        .find(WizardNavItem)
+        .dive()
+        .find(Title).length,
+    ).toBe(1);
+    expect(
+      wrapper
+        .find(WizardNavItem)
+        .dive()
+        .find('[data-test-id="quick-start-task-subtitle"]')
+        .props().children,
+    ).toEqual([' ', props.subtitle]);
+  });
+  it('should not render subtitle if task is not active', () => {
+    wrapper = shallow(<QuickStartTaskHeader {...props} isActiveTask={false} />);
+    expect(
+      wrapper
+        .find(WizardNavItem)
+        .dive()
+        .find(Title).length,
+    ).toBe(1);
+    expect(
+      wrapper
+        .find(WizardNavItem)
+        .dive()
+        .find('[data-test-id="quick-start-task-subtitle"]')
+        .exists(),
+    ).toBe(false);
+  });
+});

package/src/controller/__tests__/QuickStartTaskReview.spec.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Alert } from '@patternfly/react-core';
+import { ShallowWrapper, shallow } from 'enzyme';
+import { allQuickStarts } from '../../data/quick-start-test-data';
+import QuickStartMarkdownView from '../../QuickStartMarkdownView';
+import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import { getQuickStartByName } from '../../utils/quick-start-utils';
+import QuickStartTaskReview from '../QuickStartTaskReview';
+
+type QuickStartTaskReviewProps = React.ComponentProps<typeof QuickStartTaskReview>;
+let wrapper: ShallowWrapper<QuickStartTaskReviewProps>;
+const props: QuickStartTaskReviewProps = {
+  review: getQuickStartByName('explore-serverless', allQuickStarts).spec.tasks[0].review,
+  taskStatus: QuickStartTaskStatus.REVIEW,
+  onTaskReview: jest.fn(),
+};
+
+describe('QuickStartTaskReview', () => {
+  it('should render alert with info variant when task status is review', () => {
+    wrapper = shallow(<QuickStartTaskReview {...props} />);
+    expect(wrapper.find(Alert).props().variant).toBe('info');
+  });
+
+  it('should render alert with success variant when task status is success', () => {
+    props.taskStatus = QuickStartTaskStatus.SUCCESS;
+    wrapper = shallow(<QuickStartTaskReview {...props} />);
+    expect(wrapper.find(Alert).props().variant).toBe('success');
+  });
+
+  it('should render alert with danger variant when task status is failed', () => {
+    props.taskStatus = QuickStartTaskStatus.FAILED;
+    wrapper = shallow(<QuickStartTaskReview {...props} />);
+    expect(wrapper.find(Alert).props().variant).toBe('danger');
+  });
+
+  it('should render task help in markdown when task status is failed', () => {
+    wrapper = shallow(<QuickStartTaskReview {...props} />);
+    expect(
+      wrapper
+        .find(QuickStartMarkdownView)
+        .at(1)
+        .props().content,
+    ).toEqual(props.review.failedTaskHelp);
+  });
+});

package/src/controller/__tests__/QuickStartTasks.spec.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { ShallowWrapper, shallow } from 'enzyme';
+import { allQuickStarts } from '../../data/quick-start-test-data';
+import QuickStartMarkdownView from '../../QuickStartMarkdownView';
+import { QuickStartTaskStatus } from '../../utils/quick-start-types';
+import { getQuickStartByName } from '../../utils/quick-start-utils';
+import TaskHeader from '../QuickStartTaskHeader';
+import QuickStartTaskReview from '../QuickStartTaskReview';
+import QuickStartTask from '../QuickStartTasks';
+
+jest.mock('react', () => {
+  const ActualReact = require.requireActual('react');
+  return {
+    ...ActualReact,
+    useContext: () => jest.fn(),
+  };
+});
+
+type QuickStartTaskProps = React.ComponentProps<typeof QuickStartTask>;
+let wrapper: ShallowWrapper<QuickStartTaskProps>;
+const props: QuickStartTaskProps = {
+  tasks: getQuickStartByName('monitor-sampleapp', allQuickStarts).spec.tasks,
+  allTaskStatuses: [
+    QuickStartTaskStatus.SUCCESS,
+    QuickStartTaskStatus.INIT,
+    QuickStartTaskStatus.INIT,
+  ],
+  taskNumber: 1,
+  onTaskReview: jest.fn(),
+  onTaskSelect: jest.fn(),
+};
+
+describe('QuickStartTasks', () => {
+  beforeEach(() => {
+    spyOn(React, 'useContext').and.returnValue({
+      activeQuickStartID: '',
+      startQuickStart: () => {},
+      restartQuickStart: () => {},
+      getResource: (key) => `quickstart~${key}`,
+    });
+    wrapper = shallow(<QuickStartTask {...props} />);
+  });
+
+  it('should render correct number of tasks based on currentTaskIndex', () => {
+    expect(wrapper.find(TaskHeader).length).toBe(1);
+  });
+
+  it('should render SyncMarkdownView with description if a task is active', () => {
+    wrapper = shallow(
+      <QuickStartTask
+        {...props}
+        allTaskStatuses={[
+          QuickStartTaskStatus.SUCCESS,
+          QuickStartTaskStatus.FAILED,
+          QuickStartTaskStatus.VISITED,
+        ]}
+        taskNumber={2}
+      />,
+    );
+    expect(
+      wrapper
+        .find(QuickStartMarkdownView)
+        .at(0)
+        .props().content,
+    ).toEqual(props.tasks[2].description);
+  });
+
+  it('should render review when task is active and in Review state', () => {
+    wrapper = shallow(
+      <QuickStartTask
+        {...props}
+        allTaskStatuses={[
+          QuickStartTaskStatus.SUCCESS,
+          QuickStartTaskStatus.REVIEW,
+          QuickStartTaskStatus.INIT,
+        ]}
+      />,
+    );
+    expect(wrapper.find(QuickStartTaskReview).exists()).toBe(true);
+  });
+});

package/src/data/mocks/json/explore-pipeline-quickstart.ts

@@ -0,0 +1,66 @@
+import { QuickStart } from '@patternfly/quickstarts';
+import { pipelineIcon } from './tour-icons';
+
+export const explorePipelinesQuickStart: QuickStart = {
+  apiVersion: 'console.openshift.io/v1',
+  kind: 'QuickStarts',
+  metadata: {
+    name: 'explore-pipelines',
+  },
+  spec: {
+    version: 4.7,
+    displayName: `Installing the Pipelines Operator`,
+    durationMinutes: 10,
+    icon: pipelineIcon,
+    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',
+      },
+    ],
+  },
+};

package/src/data/mocks/json/explore-serverless-quickstart.ts

@@ -0,0 +1,90 @@
+import { QuickStart } from '@patternfly/quickstarts';
+import { serverlessIcon } from './tour-icons';
+
+export const exploreServerlessQuickStart: QuickStart = {
+  apiVersion: 'console.openshift.io/v1',
+  kind: 'ConsoleQuickStarts',
+  metadata: {
+    name: 'explore-serverless',
+  },
+  spec: {
+    version: 4.7,
+    displayName: `Setting up Serverless`,
+    durationMinutes: 10,
+    icon: serverlessIcon,
+    description: `Install the OpenShift Serverless Operator to deploy stateless, event-trigger-based applications.`,
+    prerequisites: [''],
+    introduction: `Red Hat® OpenShift® Serverless lets you run stateless, serverless workloads on a single multi-cloud container platform.
+
+Serverless reduces the need to manage infrastructure or perform back-end development. Scaling is automated, and applications can run on any cloud, hybrid, or on-premises environment. Choosing Serverless means simplicity, portability, and efficiency.
+
+Adding OpenShift Serverless to your OpenShift Container Platform cluster is quick and easy. This quick start walks you through the process.`,
+    tasks: [
+      {
+        title: `Install the OpenShift Serverless Operator`,
+        description: `### To install the Serverless Operator:
+1. From the **Administrator** perspective, go to the **OperatorHub** from the **Operators** section of the navigation.
+2. In the **Filter by keyword** field, type \`Serverless\`.
+3. If the tile has an **Installed** label on it, the Operator is already installed. Proceed to task two.
+4. Click the **OpenShift Serverless Operator** tile.
+5. At the top of the OpenShift Serverless Operator panel, click **Install**.
+6. Verify that the **OpenShift Serverless Operator Update Channel** is set to the latest version, then click **Install**.
+7. Wait for the OpenShift Serverless Operator's status to change from **Installing operator** to **Operator installed - Ready for use**.
+`,
+
+        review: {
+          instructions: `#### To verify that the OpenShift Serverless Operator is installed:
+
+In the Status column of the **Installed Operators** page, is the OpenShift Serverless Operator’s status **Succeeded?**`,
+          failedTaskHelp: `This task is incomplete. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/serverless/installing_serverless/installing-openshift-serverless.html) about this topic.`,
+        },
+
+        summary: {
+          success: `You just installed the OpenShift Serverless Operator! Next, we'll install the required Knative Eventing and Knative Serving Custom Resource components for this Operator to run.`,
+          failed: `This task is incomplete. Try the task again, or read more about this topic.`,
+        },
+      },
+      {
+        title: `Create the Knative Serving and Knative Eventing APIs`,
+        description: `Now let’s install the Knative application programming interfaces (APIs) needed to deploy applications and container workloads.
+
+**To create the Knative Serving and Knative Eventing APIs:**
+1. Go to the **Installed Operators** page.
+2. Click **OpenShift Serverless Operator**.
+3. If it does not already exist, create a project called “knative-serving” under the Project list at the top of the page. If it does exist, select the project from the list.
+4. Click the Knative Serving link under Provided APIs or, from Knative Serving tile, click **Create Instance**.
+5. Click **Create** to create the custom resource.
+6. If it does not already exist, create a project called “knative-eventing” under the Project list at the top of the page. If it does exist, select the project from the list.
+7. Click the Knative Eventing link under Provided APIs or, from Knative Eventing tile, click **Create Instance**.
+8. Click **Create** to create the custom resource.
+`,
+        review: {
+          instructions: `#### To verify that the Knative Serving and Knative Eventing APIs were installed successfully:
+Go to the **All Instances** tab of the OpenShift Serverless Operator.
+
+Are the Knative Serving and Knative Eventing resources in the list of instances?
+`,
+          failedTaskHelp: `This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/serverless/installing_serverless/installing-knative-serving.html#serverless-create-serving-project-web-console_installing-knative-serving) about this topic.`,
+        },
+        summary: {
+          success: `You just created instances of the Knative Service and Knative Eventing resources.`,
+          failed: `Check your work to make sure that the Knative Service and Knative Eventing resources were created.`,
+        },
+      },
+    ],
+    conclusion: `Your Serverless Operator is ready! If you want to learn how to deploy a serverless application, take the **Exploring Serverless applications** quick start.`,
+    nextQuickStart: [`serverless-application`],
+    accessReviewResources: [
+      {
+        group: 'operators.coreos.com',
+        resource: 'operatorgroups',
+        verb: 'list',
+      },
+      {
+        group: 'packages.operators.coreos.com',
+        resource: 'packagemanifests',
+        verb: 'list',
+      },
+    ],
+  },
+};

package/src/data/mocks/json/monitor-sampleapp-quickstart.ts

@@ -0,0 +1,77 @@
+import { QuickStart } from '@patternfly/quickstarts';
+
+export const monitorSampleAppQuickStart: QuickStart = {
+  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: [``],
+  },
+};

package/src/data/mocks/json/tour-icons.ts

@@ -0,0 +1,3 @@
+export const serverlessIcon = `data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2UwMzQwMDt9LmNscy0ye2ZpbGw6I2NlMmUwMDt9LmNscy0ze2ZpbGw6bm9uZTt9LmNscy00e2ZpbGw6I2ZmZjt9LmNscy01e2ZpbGw6I2RjZGNkYzt9LmNscy02e2ZpbGw6I2FhYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlJlZF9IYXQtT3BlbnNoaWZ0NC1DYXRhbG9nX0ljb25zLVNlcnZlcmxlc3M8L3RpdGxlPjxjaXJjbGUgY2xhc3M9ImNscy0xIiBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik04NS4zNiwxNC42NEE1MCw1MCwwLDAsMSwxNC42NCw4NS4zNloiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik00MC41Nyw0Ny40MmEzLjg5LDMuODksMCwxLDAsMy44OCwzLjg4QTMuODksMy44OSwwLDAsMCw0MC41Nyw0Ny40MloiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0yMS40Miw0Ny40MkEzLjg5LDMuODksMCwxLDAsMjUuMyw1MS4zLDMuODksMy44OSwwLDAsMCwyMS40Miw0Ny40MloiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik01MC4wOSw0OC44NmgtLjE4YTQuMTEsNC4xMSwwLDAsMS0zLjI2LTEuNjMsNy42OSw3LjY5LDAsMCwwLTEyLjE2LDAsNC4xMyw0LjEzLDAsMCwxLTMuMjYsMS42M0gzMWE0LjA5LDQuMDksMCwwLDEtMy4yNS0xLjYzQTcuNjksNy42OSwwLDAsMCwxNCw1MS45M2gwVjY0LjZhMi43OSwyLjc5LDAsMCwwLDIuNzksMi43OWgxNS44TDUxLjM0LDQ4LjY2QTQsNCwwLDAsMSw1MC4wOSw0OC44NloiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik03OC4wNSw0NC4yNWE3LjY1LDcuNjUsMCwwLDAtNS44NSwzQTQuMSw0LjEsMCwwLDEsNjksNDguODZoLS4xOWE0LjEzLDQuMTMsMCwwLDEtMy4yNi0xLjYzLDcuNjksNy42OSwwLDAsMC0xMi4xNiwwLDQuMTYsNC4xNiwwLDAsMS0yLDEuNDNMMzIuNjEsNjcuMzlIODMuMTlBMi43OSwyLjc5LDAsMCwwLDg2LDY0LjZWNTIuMDdBNy43Nyw3Ljc3LDAsMCwwLDc4LjA1LDQ0LjI1WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTIxLjEsNjNoMTBhMS44MywxLjgzLDAsMSwwLDAtMy42NmgtMTBhMS44MywxLjgzLDAsMCwwLDAsMy42NloiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjQwLjU3IiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjQwLjU3IiBjeT0iMjguMjMiIHI9IjEuMzUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjU5LjcyIiBjeT0iMjguMjMiIHI9IjEuMzUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjIxLjQyIiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjUwIiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjY4Ljg5IiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjMxLjA5IiBjeT0iNDMuNDUiIHI9IjIuOTMiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNiIgY3g9Ijc3Ljk0IiBjeT0iNTQuMzEiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNiIgY3g9IjY4LjkxIiBjeT0iNTQuMzEiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9Ijc3Ljk0IiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjU5LjcyIiBjeT0iMzcuNzMiIHI9IjIuMTUiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjUwIiBjeT0iMzMuMSIgcj0iMy4wMSIvPjxjaXJjbGUgY2xhc3M9ImNscy00IiBjeD0iMzEuMDkiIGN5PSIzMy4xIiByPSIzLjAxIi8+PGNpcmNsZSBjbGFzcz0iY2xzLTQiIGN4PSI2OC44OSIgY3k9IjMzLjEiIHI9IjMuMDEiLz48L3N2Zz4=`;
+
+export const pipelineIcon = `data:image/png;base64,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`;