ui/src/app/services/tour/dashboard-tour.constants.ts

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

export default {
    dashboardTour: {
        id: 'dashboard',
        steps: [
            {
                stepId: 'step-1',
                title: 'Welcome to the Dashboard Tutorial!',
                classes: 'shepherd shepherd-welcome',
                text: "<p>In this tutorial, you'll learn how to create a live dashboard that shows data from a running pipeline.</p><b>Note:</b>This tutorial requires a running pipeline that makes use of the <i>Dashboard Sink</i>. If you don't have such a pipeline started yet, go to the pipeline editor and create one.<p>Press <i>Next</i> to start the tutorial!</p>",
                buttons: ['cancel', 'next'],
            },
            {
                stepId: 'step-2',
                title: 'Add visualization',
                text: "<p>Let's start!</p><p>To create a new visualization, click the <i>Add visualization</i> button.</p>",
                attachToElement: '#add-viz-button',
                attachPosition: 'bottom',
                buttons: ['cancel'],
            },
            {
                stepId: 'step-3',
                title: 'Select pipeline',
                text: '<p>This wizard allows to configure visualizations. The first step is to select a currently running pipeline.</p><p>Click the pipeline shown on the left.</p>',
                attachToElement: 'md-grid-tile:nth-of-type(1)',
                attachPosition: 'right',
                buttons: ['cancel'],
            },
            {
                stepId: 'step-4',
                title: 'Select visualization',
                text: "<p>The second step requires the selection of a visualization. You can select from tables, gauges, maps or charts.</p><p>In this tutorial, we'll create a table visualization, so click the <i>Table</i> visualization on the left.</p>",
                attachToElement: 'md-grid-tile:nth-of-type(1)',
                attachPosition: 'right',
                buttons: ['cancel'],
            },
            {
                stepId: 'step-5',
                title: 'Customize visualization',
                text: '<p>Some visualizations can be customized according to your needs.</p><p>For instance, the table visualization provides a dialog to filter columns. Click the <i>Select all</i> button on the left to select all fields from the incoming event.</p>',
                attachToElement: '#select-all-button',
                attachPosition: 'right',
                buttons: ['cancel'],
            },
            {
                stepId: 'step-6',
                title: 'Save visualization',
                text: 'Now you are ready to save your visualization. Click <i>Save</i> to create a new visualization in your dashboard.',
                attachToElement: '#save-viz-button',
                attachPosition: 'bottom',
                buttons: ['cancel'],
            },
            {
                stepId: 'step-7',
                title: 'Cool!',
                text: '<p>Now you should see live data coming in. There are many more visualization types you can try.</p>Press <i>Exit</i> to finish the tour.',
                attachToElement: '.widget-container:nth-of-type(1)',
                attachPosition: 'right',
                buttons: ['cancel'],
            },
        ],
        matchingSteps: [
            { actionId: 'add-viz', currentStep: 'step-2' },
            { actionId: 'select-pipeline', currentStep: 'step-3' },
            { actionId: 'select-viz', currentStep: 'step-4' },
            { actionId: 'customize-viz', currentStep: 'step-5' },
            { actionId: 'save-viz', currentStep: 'step-6' },
        ],
    },
};