Dell Vizioncore Tutorial

Add to My manuals
141 Pages

advertisement

Dell Vizioncore Tutorial | Manualzz

vFoglight™ 5.2.4

Web Component Tutorial

© 2008 Quest Software, Inc. ALL RIGHTS RESERVED.

This guide contains proprietary information protected by copyright. The software described in this guide is furnished under a software license or nondisclosure agreement. This software may be used or copied only in accordance with the terms of the applicable agreement. No part of this guide may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying and recording for any purpose other than the purchaser's personal use without the written permission of Quest Software, Inc.

If you have any questions regarding your potential use of this material, contact:

Quest Software World Headquarters

LEGAL Dept

5 Polaris Way

Aliso Viejo, CA 92656 www.quest.com

email: [email protected]

Refer to our Web site for regional and international office information.

Trademarks

Quest, Quest Software, the Quest Software logo, Aelita, Akonix, Akonix L7 Enterprise, Akonix L7 Enforcer,

AppAssure, Benchmark Factory, Big Brother, DataFactory, DeployDirector, ERDisk, Foglight, Funnel Web, I/Watch,

Imceda, InLook, IntelliProfile, InTrust, Invertus, IT Dad, I/Watch, JClass, Jint, JProbe, LeccoTech, LiteSpeed,

LiveReorg, MessageStats, NBSpool, NetBase, Npulse, NetPro, PassGo, PerformaSure, Quest Central, SharePlex,

Sitraka, SmartAlarm, Spotlight, SQL LiteSpeed, SQL Navigator, SQL Watch, SQLab, Stat, StealthCollect, Tag and

Follow, Toad, T.O.A.D., Toad World, vANALYZER, vAUTOMATOR, vCONTROL, vCONVERTER, vEssentials, vFOGLIGHT, vOPTIMIZER, vRanger Pro, vReplicator, Vintela, Virtual DBA, VizionCore, Xaffire, and XRT are trademarks and registered trademarks of Quest Software, Inc in the United States of America and other countries.

Other trademarks and registered trademarks used in this guide are property of their respective owners.

Disclaimer

The information in this document is provided in connection with Quest products. No license, express or implied, by estoppel or otherwise, to any intellectual property right is granted by this document or in connection with the sale of

Quest products. EXCEPT AS SET FORTH IN QUEST'S TERMS AND CONDITIONS AS SPECIFIED IN THE

LICENSE AGREEMENT FOR THIS PRODUCT, QUEST ASSUMES NO LIABILITY WHATSOEVER AND

DISCLAIMS ANY EXPRESS, IMPLIED OR STATUTORY WARRANTY RELATING TO ITS PRODUCTS

INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTY OF MERCHANTABILITY, FITNESS FOR A

PARTICULAR PURPOSE, OR NON-INFRINGEMENT. IN NO EVENT SHALL QUEST BE LIABLE FOR ANY

DIRECT, INDIRECT, CONSEQUENTIAL, PUNITIVE, SPECIAL OR INCIDENTAL DAMAGES (INCLUDING,

WITHOUT LIMITATION, DAMAGES FOR LOSS OF PROFITS, BUSINESS INTERRUPTION OR LOSS OF

INFORMATION) ARISING OUT OF THE USE OR INABILITY TO USE THIS DOCUMENT, EVEN IF QUEST HAS

BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. Quest makes no representations or warranties with respect to the accuracy or completeness of the contents of this document and reserves the right to make changes to specifications and product descriptions at any time without notice. Quest does not make any commitment to update the information contained in this document.

License Credits and Third Party Information

To view license credit information, click the License Credits link on the Welcome to vFoglight online help page.

Web Component Tutorial

March 2009

Version 5.2.4

Table of Contents

Introduction to this Guide ...................................................................................................................................7

About vFoglight ................................................................................................................................................................ 8

About this Guide............................................................................................................................................................... 8

vFoglight Documentation Suite ........................................................................................................................................ 9

Core Documentation Set ......................................................................................................................................... 9

Cartridge Documentation Sets .............................................................................................................................. 10

Feedback on the Documentation........................................................................................................................... 10

Text Conventions ........................................................................................................................................................... 11

About Vizioncore Inc. ..................................................................................................................................................... 11

Contacting Dell ............................................................................................................................................................... 14

Using the Web Component Tutorial .................................................................................................................27

Introduction..................................................................................................................................................................... 28 vFoglight Browser Interface Views ........................................................................................................................ 28

Why Configure the Default Views?........................................................................................................................ 29

What is the Web Component Framework?............................................................................................................ 30

How to Use this Tutorial ................................................................................................................................................. 33

Printing the Tutorial ........................................................................................................................................................ 33

Getting More Help .......................................................................................................................................................... 33

Tutorial 1: Creating a Dashboard .....................................................................................................................35

Before You Start............................................................................................................................................................. 36

Anatomy of a Typical Dashboard .......................................................................................................................... 36

UI Walkthrough...................................................................................................................................................... 37

Configuring a Query ....................................................................................................................................................... 37

Configuring a Row-Oriented Table................................................................................................................................. 40

Building the Dashboard .................................................................................................................................................. 44

4 vFoglight

Web Component Tutorial

Summary ........................................................................................................................................................................ 47

Additional Activities ................................................................................................................................................ 47

Saving the Tutorial1 Module .................................................................................................................................. 48

Tutorial 2: Adding a Drilldown Page................................................................................................................ 49

Objectives of Tutorial 2 ................................................................................................................................................... 50

Adding an Alarm Icon to the Table ................................................................................................................................. 50

Adding a Dependent Page.............................................................................................................................................. 52

Overview ................................................................................................................................................................ 52

Adding a Context-Sensitive Dependent Page for the Table of Hosts .................................................................... 52

Summary ........................................................................................................................................................................ 57

Additional Activities ................................................................................................................................................ 57

Tutorial 3: Adding Views .................................................................................................................................. 59

Objectives of Tutorial 3 ................................................................................................................................................... 60

Designing the Page ........................................................................................................................................................ 61

Defining the Alarms Query.............................................................................................................................................. 61

Configuring a Table of Alarms ........................................................................................................................................ 64

Configuring a Key-Value Listing Component.................................................................................................................. 68

Configuring a Chart Component ..................................................................................................................................... 71

Configuring a Label with an Action ................................................................................................................................. 73

Configuring the Drilldown Page ...................................................................................................................................... 75

Configuring a Drop-Down List......................................................................................................................................... 78

Flowing Monitored Hosts to Host Details T3................................................................................................................... 80

Adding a Customizer ...................................................................................................................................................... 81

Summary ........................................................................................................................................................................ 82

Additional Activities ................................................................................................................................................ 82

Tutorial 4: Using a Grid..................................................................................................................................... 83

Before Building the Dashboard:...................................................................................................................................... 84

Using a List as a Chooser............................................................................................................................................... 86

Choosing the Views ........................................................................................................................................................ 86

Building the Dashboard .................................................................................................................................................. 86

Summary ........................................................................................................................................................................ 93

Additional Activities ................................................................................................................................................ 94

Table of Contents 5

Tutorial 5: Reports .............................................................................................................................................95

Objectives of Tutorial 5 ...................................................................................................................................................96

Designing the Page.........................................................................................................................................................96

Configuring a Query ........................................................................................................................................................97

Creating a Basic Report Page.........................................................................................................................................98

Creating a More Elaborate Hosts Table........................................................................................................................102

Adding a Header ...........................................................................................................................................................106

Adding a Footer.............................................................................................................................................................109

Adding an Iterator for a Multi-Page Report ...................................................................................................................111

Choosing the Iterated View ..................................................................................................................................113

Summary.......................................................................................................................................................................114

Additional Activities ..............................................................................................................................................114

Tutorial 6: Creating a Form .............................................................................................................................119

Objectives of Tutorial 6 .................................................................................................................................................120

Configuring the Query...................................................................................................................................................120

Overview .......................................................................................................................................................................121

Components in the Application.............................................................................................................................121

Order of Construction ...........................................................................................................................................122

Notes on the Context Flow ...................................................................................................................................122

Creating the Tasks and Forms......................................................................................................................................123

Create the groovy Tasks ......................................................................................................................................123

Configure the Views .............................................................................................................................................128

Testing the Application..................................................................................................................................................137

Summary.......................................................................................................................................................................137

Additional Activities ..............................................................................................................................................137

Index..................................................................................................................................................................139

6 vFoglight

Web Component Tutorial

Introduction to this Guide

This chapter provides information about what is contained in the vFoglight Web

Component Tutorial. It also provides information about the vFoglight documentation suite and Vizioncore.

This chapter contains the following sections:

About vFoglight ..............................................................................................................................8

About this Guide ............................................................................................................................8

vFoglight Documentation Suite ......................................................................................................9

Text Conventions .........................................................................................................................11

About Vizioncore Inc.

...................................................................................................................11

8 vFoglight

Web Component Tutorial

About vFoglight

vFoglight helps IT organizations understand the virtual infrastructure by managing the relationships and interaction between all the components in the environment, including data centers, data stores, clusters, resource pools, hosts and virtual machines. With vFoglight, administrators can quickly determine the root-cause of an incident or problem, track virtual machine (VM) movements and understand their impact, and identify contention for resources between virtual machines.

About this Guide

vFoglight is an application and services management solution that allows you to monitor your distributed system. It has three levels of usability:

• Default settings for views and rules that are suitable for most situations

• Easily configurable views that allow you to modify or add pages to suit your preferences

• Access to the Web Component library, where you can build your own pages to organize the collected data the way you want to see it

You need to use vFoglight’s Web Component library to build your own custom user interface views. The task has been simplified by providing you with a visual dashboard configuration tool, but it presumes a degree of familiarity with the framework. This tutorial can be used as the first step in learning how to construct new pages using the view components in vFoglight.

This guide is intended for any user who wants to custom build vFoglight views for use in the browser interface.

The Web Component Tutorial is organized as follows:

Chapter 1, Using the Web Component Tutorial—An overview on using the tutorials

Chapter 2, Creating a Dashboard—The essentials of creating a basic dashboard

Chapter 3, Adding a Drilldown Page—Using flows to access a dependent page

Chapter 4, Adding Views—An introduction to some useful components

Chapter 5, Using a Grid—Further work on the Grid component

Chapter 6, Reports—Configuring and scheduling custom reports

Introduction to this Guide vFoglight Documentation Suite

Chapter 7, Creating a Form—Using submit actions

vFoglight Documentation Suite

The vFoglight documentation suite is made up of the core documentation set, plus the documentation set for each vFoglight cartridge that you deploy. Documentation is provided in a combination of online help, PDF and HTML.

• Online Help: You can open the online help by selecting the Help tab from vFoglight’s action panel.

9

• PDF: The Getting Started Guide, What’s New Guide, System Requirements and

Platform Support Guide, Installation and Setup Guide set, Administration and

Configuration Guide, vFoglight User Guide, Command-Line Reference Guide,

Web Component Guide, and Web Component Tutorial, are provided as PDF files.

The PDF guides are included in the zip file downloaded from Vizioncore.

Adobe® Reader® is required.

• HTML: Release Notes are provided in HTML.

Core Documentation Set

The core documentation set consists of the following files:

Release Notes (HTML)

Getting Started Guide (PDF)

10 vFoglight

Web Component Tutorial

What’s New Guide (PDF)

System Requirements and Platform Support Guide (PDF)

Installation and Setup Guide set (all in PDF format):

• Installation and Setup Guide—Installing on Windows with an Embedded

MySQL Database

• Installation and Setup Guide—Installing on Windows with an External

MySQL Database

• Installation and Setup Guide—Installing on Windows with an External Oracle

Database

Administration and Configuration Guide (PDF and online help)

vFoglight User Guide (PDF and online help)

Advanced Configuration Guide set

Command-Line Reference Guide (PDF and online help)

Web Component Guide (PDF and online help)

Web Component Tutorial (PDF and online help)

Web Component Reference (online help)

Cartridge Documentation Sets

When you deploy a cartridge, the documentation set for the cartridge is installed. The online help for the cartridge is integrated automatically with the core vFoglight help.

When you open the help, the name of the cartridge is displayed in a top level entry within the table of contents.

Some cartridges include additional PDF guides, which may be one or more of the following: a Getting Started Guide, an Installation Guide, a User Guide, and a

Reference Guide.

Feedback on the Documentation

We are interested in receiving feedback from you about our documentation. For example, did you notice any errors in the documentation? Were any features undocumented? Do you have any suggestions on how we can improve the documentation? All comments are welcome. Please submit your feedback to the following email address:

Introduction to this Guide

Text Conventions [email protected]

Please do not submit Technical Support related issues to this email address.

Text Conventions

The following table summarizes how text styles are used in this guide:

Convention Description

Code

Variables

Interface

Monospace text represents code, code objects, and commandline input. This includes:

• Java language source code and examples of file contents

• Classes, objects, methods, properties, constants, and events

• HTML documents, tags, and attributes

Monospace-plus-italic text represents variable code or command-line objects that are replaced by an actual value or parameter.

Bold text is used for interface options that you select (such as menu items) as well as keyboard commands.

Files, components,

and documents

Italic text is used to highlight the following items:

• Pathnames, file names, and programs

• The names of other documents referenced in this guide

11

About Vizioncore Inc.

Vizioncore was formed in July 2002 as a consulting and software-development company with the mission to create easy-to-use software solutions that performed reliable and repeatable automation of datacenter functions specifically for the Citrix platform. A main corporate goal was to enable business partners to offer solutions that targeted real-world IT issues and provided the best possible installation and automation for their clients' systems.

Vizioncore's solutions have proved successful in organizations from small to mid-sized businesses to large enterprises, in a wide variety of vertical industries, including

12 vFoglight

Web Component Tutorial

Financial Services, Government, Healthcare, Manufacturing, and High Tech.

Vizioncore, Inc. can be found in offices around the globe and at www.vizioncore.com

.

Introduction to this Guide

About Vizioncore Inc.

13

Contacting Dell

Note: If you do not have an active Internet connection, you can find contact information on your purchase invoice, packing slip, bill, or Dell product catalog.

Dell provides several online and telephone-based support and service options. Availability varies by country and product, and some services may not be available in your area. To contact Dell for sales, technical support, or customer service issues:

1

2

3

Visit http://support.dell.com.

Verify your country or region in the Choose A Country/Region drop-down menu at the bottom of the page.

Click Contact Us on the left side of the page.Note: Toll-free numbers are for use within the country for which they are listed.

4

5

Select the appropriate service or support link based on your need.

Choose the method of contacting Dell that is convenient for you.

Country (City) Service Type

International Access

Code

Country Code

City Code

Anguilla

Antigua and Barbuda

Web Address

E-Mail Address

Technical Support., Customer Service, Sales

Web Address

E-Mail Address

Aomen

Technical Support., Customer Service, Sales

Technical Support

Dell

Dimension

, Dell Inspirion

, Dell

Optiplex

, Dell Lattitude

, and Dell

Argentina (Buenos Aires)

Precision

Servers and Storage

Web Address

International Access

E-Mail Address for Desktop/ Portable Computers

Code: 00

E-Mail Address for Servers and EMC

®

Storage

Country Code: 54

Products

City Code: 11

Customer Service

Technical Support

Aruba

Australia (Sydney)

International Access

Code: 0011

Country Code: 61

City Code: 2

Technical Support Services

Sales

Web Address

E-Mail Address

Technical Support., Customer Service, Sales

Web Address

Contact Dell Web Address

Technical Support., Customer Service, Sales

Area Codes,

Local Numbers, and

Toll-Free Numbers

Web and E-Mail Addresses www.Dell.com/ai la‐[email protected]

toll-free: 800-335-0031 www.Dell.com.ag

la‐[email protected]

1-800-805-5924

0800-105

0800-105 www.dell.com.ar

la‐[email protected]

[email protected]

toll-free: 0-800-444-0730 toll-free: 0-800-444-0733 toll-free: 0-800-444-0724

0-800-444-3355 www.Dell.com/aw la‐[email protected]

toll-free: 800-1578 support.ap.dell.com

support.ap.dell.com/contactus

13DELL-133355

Austria (Vienna)

International Access

Code: 900

Country Code: 43

City Code: 1

Bahamas

Barbados

Belgium (Brussels)

Bolivia

Brazil

International Access

Code: 00

Country Code: 55

City Code: 51

British Virgin Islands

Brunei

Country Code: 673

Canada (North York,

Ontario)

International Access

Code: 011

Cayman Islands

Web Address

E-Mail Address

Home/Small Business Sales

Home/Small Business Fax

Home/Small Business Customer Service

Home/Small Business Support

Preferred Accounts/Corporate Customer

Service Preferred Accounts/Corporate Customer

Switchboard

Web Address

E-Mail Address

Technical Support., Customer Service, Sales

Web Address

E-Mail Address

Technical Support., Customer Service, Sales

Web Address

General Support

General Support Fax

Customer Service

Corporate Sales

Fax

Switchboard

Web Address

E-Mail Address

Technical Support., Customer Service, Sales

Web Address

E-Mail Address

Customer Service and Tech Support

Technical Support Fax

Customer Service Fax

Sales

Technical Support, Customer Service, Sales

Technical Support (Penang, Malaysia)

Customer Service (Penang, Malaysia)

Transaction Sales (Penang, Malaysia)

Online Order Status Web Address

AutoTech (automated Hardware and Warranty

Support)

Customer Service

Home/Home Office

Small Business

Medium/Large Business, Government, Education

Hardware Warranty Phone Support

Support.euro.dell.com

[email protected]

0820 240 530 00

0820 240 530 49

0820 240 530 14

0820 240 530 17

0820 240 530 16

0820 240 530 17

0820 240 530 00 www.dell.com/bs la‐[email protected]

toll-free: 1-866-874-3038 www.dell.com/bb la‐[email protected]

1-800-534-3142

Support.euro.dell.com

02 481 92 88

02 481 92 95

02 713 15 65

02 481 91 00

02 481 91 99

02 481 91 00 www.dell.com/bo [email protected]

toll-free: 800-10-0238 www.dell.com/br

[email protected]

0800 970 3355

51 2104 5470

51 2104 5480

0800 722 3498 toll-free: 1-866-278-6820

604 633 4966

604 633 4888

604 633 4955 www.dell.ca/ostatus support.ca.dell.com

toll-free:1-800-247-9362 toll-free:1-800-847-4096 toll-free:1-800-906-3355 toll-free:1-800-387-5757 toll-free:1-800-847-4096 toll-free:1-800-387-5757

Computers for Home/Home Office

Computers for Small/Medium/Large Business

Government

Printers, Projectors, Televisions, Handheld,

Digital

Jukebox, and Wireless Sales

Home and Home Office Sales

Small Business

Medium/Large Business, Government

Spare Parts and Extended Service

E-Mail Address

Technical Support, Customer Service, Sales

1-877-335-5767 toll-free:1-800-999-3355 toll-free:1-800-387-5752 toll-free:1-800-387-5755

1 866 440 3355 la‐[email protected]

1-877-262-5415

Chile (Santiago)

Country Code: 56

City Code: 2

China (Xiamen)

Country Code: 86

City Code: 592

Columbia

Costa Rica

Czech Republic (Prague)

International Access

Code: 00

Country Code: 420

Denmark (Copenhagen)

International Access

Code: 00

Country Code: 45

Dominica

Web Address

E-Mail Address

Sales and Customer Support

Technical Support Web Address

Technical Support E-Mail Address

Customer Service E-Mail Address

Technical Support Fax

Technical Support – Dimension and Inspiron

Technical Support – OptiPlex, Lattitude and Dell

Precision

Technical Support – Servers and Storage

Technical Support – Projectors, PDAs, Switches,

Routers, etc

Technical Support – Printers

Customer Service

Customer Service Fax

Home and Small Business

Preferred Accounts Division

Large Corporate Accounts GCP

Large Corporate Accounts Key Accounts

Large Corporate Accounts North

Large Corporate Accounts North Government and

Education

Large Corporate Accounts East

Large Corporate Accounts East Government and

Education

Large Corporate Accounts Queue Team

Large Corporate Accounts South

Large Corporate Accounts West

Large Corporate Accounts Spare Parts

Web Address

E-Mail Address

Technical Support, Customer Service, Sales

Web Address

E-Mail Address

Technical Support, Customer Service, Sales

Web Address

E-Mail Address

Technical Support

Customer Service

Fax

Technical Fax

Switchboard

Web Address

Technical Support

Customer Service – Relational

Home/Small Business Customer Service

Switchboard – Relational

Switchboard Fax – Relational

Switchboard – Home/Small Business

Switchboard Fax – Home/Small Business

Web Address

E-Mail Address

Technical Support, Customer Service, Sales www.dell.com/cl la‐[email protected]

toll-free: 1230-020-4823 support.dell.com.cn

support.dell.com.cn/email [email protected]

592 818 14350 toll-free: 800 858 2969 toll-free: 800 858 0950 toll-free: 800 858 0960 toll-free: 800 858 2920 toll-free: 800 858 2311 toll-free: 800 858 2060

592 818 1308 toll-free: 800 858 2222 toll-free: 800 858 2557 toll-free: 800 858 2055 toll-free: 800 858 2628 toll-free: 800 858 2999 toll-free: 800 858 2955 toll-free: 800 858 2020 toll-free: 800 858 2669 toll-free: 800 858 2572 toll-free: 800 858 2355 toll-free: 800 858 2811 toll-free: 800 858 2621 www.dell.com/co la‐[email protected]

01-800-915-4755 www.dell.com/cr la‐[email protected]

0800-012-0231 support.euro.dell.com

[email protected]

22537 2727

22537 2707

22537 2714

22537 2728

22537 2711

Support.euro.dell.com

7023 0182

7023 0184

3287 5505

3287 1200

3287 1201

3287 5000

3287 5001 www.dell.com/dm la‐[email protected]

toll-free: 1-866-278-6821

Dominican Republic

Ecuador

El Salvador

Finland (Helsinki)

International Access

Code: 990

Country Code: 358

City Code: 9

France (Paris)

(Montpellier)

International Access

Code: 00

Country Code: 33

City Codes: (1) (4)

Germany (Frankfurt)

International Access

Code: 00

Country Code: 49

City Code: 69

Greece

International Access

Code: 00

Country Code: 49

Grenada

Web Address

E-Mail Address

Technical Support, Customer Service, Sales

Web Address

E-Mail Address

Technical Support, Customer Service, Sales

(Calling from Quito)

Technical Support, Customer Service, Sales

(Calling from Guayaquil)

Web Address

E-Mail Address

Technical Support, Customer Service, Sales

Web Address

E-Mail Address

Technical Support

Customer Service

Switchboard

Sales under 500 employees

Fax

Sales over 500 employees

Fax

Web Address

Home and Small Business

Technical Support

Customer Service

Switchboard

Switchboard (calls from outside of France)

Sales

Fax

Fax (calls from outside of France)

Corporate

Technical Support

Customer Service

Switchboard

Sales

Web Address

E-mail Address

Technical Support

Home/Small Business Customer Service

Global Segment Customer Service

Preferred Accounts Customer Service

Large Accounts Customer Service

Public Accounts Customer Service

Switchboard

Web Address

Technical Support

Gold Service Technical Support

Switchboard

Gold Service Switchboard

Sales

Fax

Web Address

E-Mail Address

Technical Support, Customer Service, Sales www.dell.com/do la‐[email protected]

1-800-156-1588 www.dell.com/ec la‐[email protected]

toll-free: 999-119-877-655-3355 toll-free: 1800-999-119-877-655-3355 www.dell.com/sv la‐[email protected]

800-6132 [email protected]

[email protected]

0207 533 555

0207 533 538

0207 533 533

0207 533 540

0207 533 530

0207 533 533

0207 533 530

Support.euro.dell.com

0825 387 270

0825 832 833

0825 004 700

04 99 75 40 00

0825 004 700

0825 004 701

04 99 75 40 01

0825 004 719

0825 338 339

55 94 71 00

01 55 94 71 00 support.euro.dell.com

[email protected]

069 9792-7200

0180-5-224400

069 9792-7320

069 9792-7320

069 9792-7320

069 9792-7320

069 9792-7000

Support.euro.dell.com

00800-44 14 95 18

00800-44 14 00 83

2108129810

2108129811

2108129800

2108129812 www.dell.com/gd la‐[email protected]

toll-free: 1-866-540-3355

Guatemala

Guyana

Web Address

E-Mail Address

Technical Support, Customer Service, Sales

E-Mail Address

Technical Support, Customer Service, Sales

Hong Kong

International Access

Code: 001

Country Code: 852

India

Web Address

Technical Support E-mail Address

Technical Support - Dimension and Inspiron

Technical Support - OptiPlex, Latitude, and Dell

Precision

Technical Support - Servers and Storage

Technical Support - Projectors, PDAs, Switches,

Routers, etc .

Customer Service

Large Corporate Accounts

Global Customer Programs

Medium Business Division

Home and Small Business Division

Dell Support Website

Portable and Desktop Support

Desktop Support E-mail Address

Portable Support E-mail Address

Phone Numbers www.dell.com/gt la‐[email protected]

1-800-999-0136 la‐[email protected]

toll-free: 1-877-270-4609 support.ap.dell.com

support.dell.com.cn/email

00852-2969 3188

00852-2969 3191

00852-2969 3196

00852-3416 0906

00852-3416 0910

00852-3416 0907

00852-3416 0908

00852-3416 0912

00852-2969 3105 support.ap.dell.com

[email protected]

[email protected]

080-25068032 or 080-25068034 or your city STD code + 60003355 or toll-free: 1-800-425-8045

Server Support

E-mail Address

Phone Numbers [email protected]

080-25068032 or 080-25068034 or your city STD code + 60003355 or toll-free: 1-800-425-8045

Gold Support Only

E-mail Address

Phone Numbers [email protected]

080-25068033 or your city STD code +

60003355 or

toll-free: 1-800-425-9045

Customer Service

Home and Small Business

Large Corporate Accounts

Sales

Large Corporate Accounts

Home and Small Business

[email protected]

toll-free : 1800-4254051

[email protected]

toll free : 1800-4252067

1600 33 8044

1600 33 8046

Ireland (Cherrywood)

International Access

Code: 00

Country Code: 353

City Code: 1

Italy (Milan)

International Access

Code: 00

Country Code: 39

City Code: 02

Jamaica

Web Address

Technical Support

E-mail Address

Business computers

Home computers

At Home Support

Sales

Home

Small Business

Medium Business

Large Business

E-mail Address

Customer Service

Home and Small Business

Business (greater than 200 employees)

General

Fax/Sales fax

Switchboard

U.K. Customer Service (dealing with U.K.only)

Corporate Customer Service (dial within U.K. only)

U.K. Sales (dial within U.K. only)

Web Address

Home and Small Business

Technical Support

Customer Service

Fax

Switchboard

Corporate

Technical Support

Customer Service

Fax

Switchboard

E-mail Address

Technical Support, Customer Service, Sales

(dial from within Jamaica only)

Support.euro.dell.com

[email protected]

1850 543 543

1850 543 543

1850 200 889

1850 333 200

1850 664 656

1850 200 646

1850 200 646

[email protected]

204 4014

1850 200 982

204 0103

204 4444

0870 906 0010

0870 907 4499

0870 907 4000

Support.euro.dell.com

02 577 826 90

02 696 821 14

02 696 821 13

02 696 821 12

02 577 826 90

02 577 825 55

02 575 035 30

02 577 821 [email protected]

1-800-440-920

Japan (Kawasaki)

International Access

Code: 001

Country Code: 81

City Code: 44

Korea (Seoul)

International Access

Code: 001

Country Code: 82

City Code: 2

Latin America

Luxemborg

International Access

Code: 00

Country Code: 352

Macao

Country Code: 83

Web Address

Technical Support - Dimension and Inspiron

Technical Support outside of Japan - Dimension and Inspiron

Technical Support - Dell Precision, OptiPlex, and

Latitude

Technical Support outside of Japan - Dell

Precision, OptiPlex, and Latitude

Technical Support - Dell PowerApp™, Dell

PowerEdge™, Dell PowerConnect™, and Dell

PowerVault™,

Technical Support outside of Japan - PowerApp,

PowerEdge, PowerConnect, and PowerVault

Technical Support - Projectors, PDAs, Printers,

Routers

Technical Support outside of Japan - Projectors,

PDAs, Printers, Routers

Faxbox Service

24-Hour Automated Order Status Service

Customer Service

Business Sales Division - up to 400 employees

Preferred Accounts Division Sales - over 400 employees

Public Sales - government agencies, educational institutions, and medical institutions

Global Segment Japan

Individual User

Individual User Online Sales

Individual User Real Site Sales

Switchboard

Web Address

Technical Support, Customer Service

Technical Support - Dimension, PDA, Electronics, and Accessories

Sales

Fax

Switchboard

Customer Technical Support (Austin, Texas,

U.S.A.)

Customer Service (Austin, Texas, U.S.A.)

Fax (Technical Support and Customer Service)

(Austin, Texas, U.S.A.)

Sales (Austin, Texas, U.S.A.)

SalesFax (Austin, Texas, U.S.A.)

Web Address

Support

Home/Small Business Sales

Corporate Sales

Customer Service

Fax

Technical Support

Customer Service (Xiamen, China)

Transaction Sales (Xiamen, China) support.jp.dell.com

toll-free: 0120-198-26

81-44-520-1435 toll-free: 0120-198-433

81-44-556-3894 toll-free: 0120-198-498

81-44-556-4162 toll-free: 0120-981-690

81-44-556-3468

044-556-3490

044-556-3801

044-556-4240

044-556-1465

044-556-3433

044-556-5963

044-556-3469

044-556-1657

044-556-2203

044-556-4649

044-556-4300

Support.ap.dell.com

toll-free: 080-200-3800 toll-free: 080-200-3801 toll-free: 080-200-3600

2194-6202

2194-6000

512 728-4093

512 728-3619

512 728-3883

512 728-4397

512 728-4600 or 512 728-3772

Support.euro.dell.com

3420808075

+32 (0)2 713 15 96

26 25 77 81

+32 (0)2 481 91 19

26 25 77 82 toll-free: 0800 105

34 160 910

29 693 115

Malaysia (Penang)

International Access

Code: 00

Country Code: 60

City Code: 4

Mexico

International Access

Code: 00

Country Code: 52

Montserrat

Netherlands

Antilles

Netherlands

(Amsterdam)

International Access

Code: 00

Country Code: 31

City Code: 20

New Zealand

International Access

Code: 00

Country Code: 64

Nicaragua

Norway (Lysaker)

International Access

Code: 00

Country Code: 47

Panama

Peru

Web Address

Technical Support - Dell Precision, OptiPlex, and

Latitude

Technical Support - Dimension, Inspiron, and

Electronics and Accessories

Technical Support - PowerApp, PowerEdge,

PowerConnect, and PowerVault

Customer Service

Transaction Sales

Corporate Sales

Web Address

E-mail Address

Customer Technical Support

Sales

Customer Service

Main

E-mail Address

Technical Support, Customer Service, Sales

Support.ap.dell.com

toll-free: 1800 880 193 toll-free: 1800 881 306 toll-free: 1800 881 386 toll-free: 1800 881 306 (option 6) toll-free: 1800 888 202 toll-free: 1800 888 213 www.dell.com/mx la‐[email protected]

001-877-384-8979 or 001-877-269-3383

50-81-8800 or 01-800-888-3355

001-877-384-8979 or 001-877-269-3383

50-81-8800 or 01-800-888-3355 la‐[email protected]

E-mail Address

Web Address

Technical Support

Technical Support Fax

Home/Small Business Customer Service

Relational Customer Service

Home/Small Business Sales

Relational Sales

Home/Small Business Sales Fax

Relational Sales Fax

Switchboard

Switchboard Fax

Web Address

E-mail Address

Technical Support, Customer Service, Sales

Toll-free: 1-866-278-6822 la‐[email protected]

support.euro.dell.com

020 674 45 00

020 674 47 66

020 674 42 00

020 674 43 25

020 674 55 00

020 674 50 00

020 674 47 75

020 674 47 50

020 674 50 00

020 674 47 50

Support.ap.dell.com

Support.ap.dell.com/contactus

0800 441 567

Web Address

E-mail Address

Technical Support, Customer Service, Sales

Web Address

Technical Support

Relational Customer Service

Home/Small Business Customer Service

Switchboard

Fax Switchboard

Web Address

E-mail Address

Technical Support, Customer Service, Sales

Web Address

E-mail Address

Technical Support, Customer Service, Sales www.dell.com/ni la‐[email protected]

001-800-220-1377

Support.euro.dell.com

671 16882

671 17575

231 62298

671 16800

671 16865 www.dell.com/pa la‐[email protected]

011-800-507-1264 www.dell.com/pe la‐[email protected]

0800-50-669

Poland (Warsaw)

International Access

Code: 011

Country Code: 48

City Code: 22

Portugal

International Access

Code: 00

Country Code: 351

Web Address

E-mail Address

Customer Service Phone

Customer Service

Sales

Customer Service Fax

Reception Desk Fax

Switchboard

Web Address

Technical Support

Customer Service

Sales

Puerto Rico

St. Kitts and Nevis

St. Lucia

St. Vincent and the

Grenadines

Singapore

International Access

Code: 005

Country Code: 65

Slovakia (Prague)

International Access

Code: 00

Country Code: 421

Fax

Web Address

E-mail Address

Technical Support, Customer Service, Sales

Web Address

E-mail Address

Technical Support, Customer Service, Sales

Web Address

E-mail Address

Technical Support, Customer Service, Sales

Web Address

E-mail Address

Technical Support, Customer Service, Sales

NOTE: The phone numbers in this section should be called from within Singapore or Malaysia only.

Web Address

Technical Support - Dimension, Inspiron, and

Electronics and Accessories

Technical Support - OptiPlex, Latitude,

and Dell Precision

Technical Support - PowerApp, PowerEdge,

PowerConnect, and PowerVault

Customer Service

Transaction Sales

Corporate Sales

Web Address

E-mail Address

Technical Support

Customer Service

Fax

Tech Fax

Switchboard (Sales)

South Africa

(Johannesburg)

International Access

Code: 09/091

Country Code: 27

City Code: 11

Web Address

E-mail Address

Gold Queue

Technical Support

Customer Service

Sales support.euro.dell.com

[email protected]

57 95 700

57 95 999

57 95 999

57 95 806

57 95 998

57 95 999

Support.euro.dell.com

707200149

800 300 413

800-300-410 or 800-300 -411 or

800-300-412 or 21-422-07-10

21-424-01-12 www.dell.com/pr la‐[email protected]

1-877-537-3355 www.dell.com/kn la‐[email protected]

toll-free: 1-866-540-3355 www.dell.com/lc la‐[email protected]

toll-free: 1-866-464-4352 www.dell.com/vc la‐[email protected]

toll-free: 1-866-464-4353 support.ap.dell.com

toll-free: 1 800 394 7430 toll-free: 1 800 394 7488 toll-free: 1 800 394 7478 toll-free: 1 800 394 7430 (option 6) toll-free: 1 800 394 7412 toll-free: 1 800 394 7419 support.euro.dell.com

[email protected]

02 5441 5727

420 22537 2707

02 5441 8328

02 5441 8328

02 5441 8328

02 5441 7585 support.euro.dell.com

[email protected]

011 709 7713

011 709 7710

011 709 7707

011 709 7700

Spain (Madrid)

International Access

Code: 00

Country Code: 34

City Code: 91

Web Address

Home and Small Business

Technical Support

Customer Service

Sales

Switchboard

Fax

Corporate

Sweden (Upplands

Vasby)

International Access

Code: 00

Country Code: 46

City Code: 8

Switzerland (Geneva)

Technical Support

Customer Service

Switchboard

Fax

Web Address

Technical Support

Relational Customer Service

Home/Small Business Customer Service

Employee Purchase Program (EPP) Support

Technical Support Fax

Web Address

E-mail Address

International Access

Code: 00

Country Code: 41

City Code: 22

Technical Support – Home and Small Business

Technical Support – Corporate

Customer Service – Home and Small Business

Customer Service – Corporate

Fax

Switchboard

Web Address Taiwan

International Access

Code: 002

Country Code: 886

E-mail Address

Technical Support - OptiPlex, Latitude, Inspiron,

Dimension, and Electronics and Accessories

Technical Support - Servers and Storage

Customer Service

Transaction Sales

Corporate Sales

Web Address Thailand

International Access

Code: 001

Country Code: 66

Trinidad/Tobago

Technical Support (OptiPlex, Latitude, and Dell

Precision)

Technical Support (PowerApp, PowerEdge,

PowerConnect, and PowerVault)

Customer Service

Corporate Sales

Transaction Sales

Web Address

E-mail Address

Turks and Caicos Islands

Technical Support, Customer Service, Sales

Web Address

E-mail Address

Technical Support, Customer Service, Sales

Support.euro.com

902 100 130

902 118 540

902 118 541

902 118 541

902 118 539

902 100 130

902 115 236

91 722 92 00

91 722 95 83 support.euro.dell.com

08 590 05 199

08 590 05 642

08 587 70 527

020 140 14 44

08 590 05 594

Support.euro.dell.com

[email protected]

0844 811 411

0844 822 844

0848 802 202

0848 821 721

022 799 01 90

022 799 01 01 support.ap.dell.com

support.dell.com.cn/email toll-free: 0080 186 1011 toll-free: 0080 160 1256 toll-free: 0080 160 1250 (option 5) toll-free: 0080 165 1228 toll-free: 0080 165 1227

Support.ap.dell.com

toll-free: 1800 0060 07 toll-free: 1800 0600 09 toll-free: 1800 006 007 (option 7) toll-free: 1800 006 009 toll-free: 1800 006 006 www.dell.com/tt la‐[email protected]

toll-free: 1-888-799-5908 www.dell.com/tc la‐[email protected]

toll-free: 1-877-441-4735

U.K.(Bracknell)

International Access

Code: 00

Country Code: 44

City Code: 1344

Uruguay

U.S.A. (Austin, Texas)

International Access

Code: 011

Country Code: 1

Web Address

E-mail Address

Customer Service Website

Sales

Home and Small Business Sales

Corporate/Public Sector Sales

Customer Service

Home and Small Business

Corporate

Preferred Accounts (500-5000 employees)

Global Accounts

Central Government

Local Government & Education

Health

Technical Support

Corporate/Preferred Accounts/PCA (1000+ employees)

Other Dell Products

General

Home and Small Business Fax

Web Address

E-mail Address

Technical Support, Customer Service, Sales

Automated Order-Status Service

AutoTech (portable and desktop computers)

Hardware and Warranty Support (Dell TV,

Printers, and Projectors ) for Relationship customers

Consumer (Home and Home Office) Support for

Dell products

Customer Service

Employee Purchase Program (EPP) Customers

Financial Services Web Address

Financial Services (lease/loans)

Financial Services (Dell Preferred Accounts

[DPA])

Business

Customer Service

Employee Purchase Program (EPP)

Customer s Support for printers, projectors, PDAs, and MP3 players

Public (government, education, and healthcare)

Customer Service and Support

Employee Purchase Program (EPP) Customers

Dell Sales

Dell Outlet Store (Dell refurbished computers)

Software and Peripherals Sales

Spare Parts Sales

Extended Service and Warranty Sales

Fax

Dell Services for the Deaf, Hard-of-Hearing, or

Speech-Impaired upport.euro.dell.com

[email protected]

support.euro.dell.com/uk/en/ECare/ form/home.asp

0870 907 4000

01344 860 456

0870 906 0010

01344 373 185

0870 906 0010

01344 373 186

01344 373 196

01344 373 199

01344 373 194

0870 908 0500

0870 353 0800

0870 907 4006 www.dell.com/uy la‐[email protected]

toll-free: 000-413-598-2521 toll-free: 1-800-433-9014 toll-free: 1-800-247-9362 toll-free: 1-877-459-7298 toll-free: 1-800-624-9896 toll-free: 1-800-624-9897 toll-free: 1-800-695-8133 www.dellfinancialservices.com

toll-free: 1-877-577-3355 toll-free: 1-800-283-2210 toll-free: 1-800-624-9897 toll-free: 1-800-695-8133 toll-free: 1-877-459-7298 toll-free: 1-800-456-3355 toll-free: 1-800-695-8133 toll-free: 1-800-289-3355 or

toll-free: 1-800-879-3355 toll-free: 1-888-798-7561 toll-free: 1-800-671-3355 toll-free: 1-800-357-3355 toll-free: 1-800-247-4618 toll-free: 1-800-727-8320 toll-free: 1-877-DELLTTY

(1-877-335-5889)

U.S. Virgin Islands

Venezuela

Web Address

E-mail Address

Technical Support, Customer Service, Sales

Web Address

E-mail Address

Technical Support, Customer Service, Sales www.dell.com/vi la‐[email protected]

toll‐free: 1‐877‐702‐4360 www.dell.com/ve la‐[email protected]

0800‐100‐4752

2

Using the Web Component Tutorial

This chapter contains the following sections:

Introduction ..................................................................................................................................28

How to Use this Tutorial ..............................................................................................................33

Printing the Tutorial .....................................................................................................................33

Getting More Help .......................................................................................................................33

28 vFoglight

Web Component Tutorial

Introduction

You may already know how to view the performance of your servers and applications with vFoglight and use it to monitor each component of the technology stack to detect and alert application owners of problems before they affect performance.

With vFoglight, application and IT managers can understand end-user service levels for their critical business applications, notify stakeholders when those service levels are violated, and assign problem resolution tasks to the appropriate domain expert.

In addition to vFoglight's core performance management capabilities, vFoglight offers specialized monitoring for all application tiers including: End-User Response,

Application, Web Servers, Application Servers, Databases, and Operating Systems.

That is a lot of capability, and the volume of data being collected can be overwhelming.

The views in the browser interface attempt to organize the data into meaningful summaries, with drilldowns to increasingly specific information about a chosen component, such as a single host or a particular database instance.

It is likely that you have organized the top-level screens around the concept of services, you have chosen them to show a view that should be useful to a broad range of users— those with typical environments. In all likelihood your environment is not quite typical, and as you gain familiarity with the browser interface’s views you will imagine ways that they could be improved to reflect the way that you would like to organize and visualize your data.

Note You must have a vFoglight Dashboard Developer role to develop new dashboards.

vFoglight Browser Interface Views

Vizioncore’s designers anticipated your need to customize the vFoglight browser interface, so they included the means to allow you to access the product’s component framework and create your own custom views. You can populate these views with other display components, such as charts and tables, and connect them to data sources. It is the same data that the vFoglight agents have been configured to collect, but now it is organized in a way that best fits your business model and its information needs.

The end result is a monitoring system that organizes data in a way that mirrors your business model. Real-time monitoring data is presented the way you want to see it, and you better control your application's availability. This also helps you with service level management: because your custom views show services in a cleaner way, you can

Using the Web Component Tutorial

Introduction

29 inform application and IT managers about end-user service levels, notify stakeholders when those service levels are violated, and assign problem resolution tasks to the appropriate domain experts. Custom views that focus on known trouble spots can help establish processes for quick recovery from system failure.

Why Configure the Default Views?

Suppose your company’s rapid expansion has led to the addition of many different application systems and groups, with each support team comfortable with their own legacy systems. In total, your IT department is responsible for managing an ERP system consisting of many servers and Oracle databases distributed across a number of major locations.

Before the acquisition of vFoglight, homegrown scripts and applications were used to monitor these distributed systems, which made it difficult for the support organization to manage the information and care for the entire distributed environment.

Now you have vFoglight, a standardized monitoring system that provides centralized management and allows people to attack problems from the same perspective, proactively monitor a large heterogeneous environment, and offers access to this distributed monitoring system via a Web browser. You and your team can see the big picture and correlate events between systems for the entire application. With vFoglight, the situation can be improved even further.

vFoglight uses a configurable Web-based interface. By doing your own custom configurations, you can apply your detailed knowledge of your system to augment or replace the out-of-the-box views vFoglight shows by default.

This helps vFoglight to notify you directly when something is broken, rather than relying on a user notifying a help desk, getting a trouble ticket, and only then having the support group notified. If a custom configuration presents a clearer view or better correlation of events between all systems, and leads to pinpointing a problem that might otherwise take longer to notice and to diagnose, then the time spent in crafting the custom view is well spent.

The aim of this tutorial is to make the learning curve less steep. In it, you’ll see how to create additional views, populate them with GUI components, and connect these components to data sources.

30 vFoglight

Web Component Tutorial

What is the Web Component Framework?

The Web Component Framework is a superset of the View Component collection that contains other control components, such as renderers. It is used to build thin client interfaces for products that are primarily (but not necessarily) in the systems management domain. This is the framework you will use in this tutorial.

The Web Component Framework is written in Java and is capable of running in a web container such as Tomcat. It can be used on contemporary web browsers without requiring the use of a plug-in. It is portal-like, but is not a JSR-168 standard portal.

The top level of the Web Component Framework is comprised of panels.The items in the left- and right panels can provide access to several different display types:

• A context-free view, which can be a dashboard or portal

• A specialized browser, which is a two-pane display—navigator and page

• A page, which is a special high-level construct that contains one or more views for which a context is required, and is normally used for a drilldown view

• A custom display in which the application supplies an HTML fragment

View Components

View components are the visible components in the user interface. Multiple components can be arranged on a page and some components can be nested within others. A view contains both view components and configuration information.

Types of view components:

• Containers, such as various layouts, splitters, report generator

• Data visualization components, such as charts, tables, gauges, labels, trees

• Specialized components, such as RSS feeds

The configuration information includes flow control, contextual inputs, data binding, and query specification.

There are two styles to choose from, a browser, which contains a navigator, or the plain view that presents a simple page without a navigation component.

Pages can be decorated with headers, which may contain:

• Breadcrumbs: A Page Name preceded by other page names

• Time Region, which may contain

• Timestamp: if no time range is applied to the page

Using the Web Component Tutorial

Introduction

31

• Time Range: if available, applies to all views

• Nothing: if multiple time ranges are represented

• Page Scope Actions, such as

• View menu: actions you can perform on the view

• Help menu: help for all components on the current page

• Optional Page Scope Actions, such as:

• Time Range: change the time range of the page

• View menu: in a browser, causes a switch to a different page

View Layouts

These layouts are available:

Grid

• Views can size themselves appropriately or be hard-coded to a fixed size.

• Views with title bars can be collapsed and expanded.

• Fixed size views grow their own scroll bars as necessary while variable sized components cause the browser to grow scroll bars as necessary.

Fixed

• All views are exactly placed and sized. This layout is useful for monitoring views with fixed real estate when you want to make sure that all the important information is always on the screen.

Portal

• Allows the page to be dynamically configured by a user. The major drawback of this layout is that the components cannot interact in any complex way.

Data Sources

Data sources encapsulate all that the system knows about the data and yet cleanly separates knowledge of the data from how it is presented.

The data source is organized as a dynamic graph of objects, starting from a root that represents the entire data model.

“Objects” are defined in the API and are not tied to the creation of any particular Java

Object.

32 vFoglight

Web Component Tutorial

The implementation of the data source must provide a schema for the objects. The schema can be changed dynamically.

Schema must provide:

• Object types

• Object properties

• Property units and bounds

• Localizations for property names, object types, unit labels

Data Source Queries

• Syntax resembles SQL, but queries return objects

• Strongly typed

• Not free-form

Using the Web Component Tutorial

How to Use this Tutorial

33

How to Use this Tutorial

This tutorial will help you to learn how to use the vFoglight Configuration area to create custom views that present collected data in a way that makes the most sense to you. It is aimed at users who want to provide their clients with a specially-tailored set of views to augment the default views.

The vFoglight default views are organized around the concept of services and can be modified easily to suit any organization’s perception of its data interrelationships. There may be situations that require special views—ones that demand more than the types of reorganization afforded by vFoglight’s top-level edit mechanism. In this case, it becomes necessary to work with the Web Component Framework, which was used to build the UI for vFoglight. This tutorial serves as a starting place for learning how to use the Web Component Reference, which describes all the components, renderers, and other elements in the Web Component Framework.

You begin by creating a very simple view, called a dashboard, that contains a table whose rows are all the hosts in your monitored space. From there, other examples illustrate how most common services in your monitored space can be reconfigured to suit your special circumstances.

The first part of the tutorial contains a discussion of the basic operations, such as creating a view that presents some static data. Further examples illustrate more complex objectives, such as creating a page that updates itself on the basis of a selection made in a drop-down list on the page itself.

New users—those unfamiliar with vFoglight —should complete the first exercise to familiarize themselves with the vFoglight user interface. Once you are familiar with the various editing pages and dialogs, you can tackle the more complex examples.

Printing the Tutorial

To print topics in this tutorial, click the print icon on the browser’s menu bar.

Getting More Help

While this tutorial shows you how to use some of vFoglight’s Web Component features, you may have questions about additional components and features. You will find information about using all of the components in the Vizioncore Web Component

34 vFoglight

Web Component Tutorial

Reference. To access the Web Component Reference, open Web Component

Reference > View Components in online help. Use the table of contents in the left pane to navigate to the information you need.

3

Tutorial 1: Creating a Dashboard

The term dashboard is used in vFoglight to denote a container that presents a pre-set collection of visual data, but does not necessarily require any user interaction to complete the picture. Technically, a dashboard cannot have any required context inputs, although it can define additional context entries. A dashboard can be used to present an overall view of the health of a monitored system through the use of colored buttons, tabular data, various icons representing system alerts, and other graphical components.

It supports a drilldown mechanism to show web pages containing more detailed information about the selected item.

This tutorial shows you how to create a dashboard that shows a table of all the hosts in the monitored system.

User actions that cause the view to update will be covered in a subsequent tutorial.

This chapter contains the following topics:

Before You Start ..........................................................................................................................36

Configuring a Query ....................................................................................................................37

Configuring a Row-Oriented Table ..............................................................................................40

Building the Dashboard ...............................................................................................................44

Summary .....................................................................................................................................47

36 vFoglight

Web Component Tutorial

Before You Start

The first thing you have to decide is whether you want to take the top-down or the bottom-up approach. In the top-down approach, you create the dashboard first, then you populate it with components. In the bottom-up approach, you focus on the information you want to display, which forces you to think about which query or queries you want to build and how you want to present the results, such as in a table, or a chart, or some other component. The dashboard is a container that holds the components, so you define it after knowing what it will contain.

Since this is a tutorial, we will do a bit of both approaches. Our stated goal is to display a hosts table in the dashboard. That is our design for the moment. It is not really a design, just a bit of an outline, but it will serve to guide us as we build the view.

With that much of a goal in mind, we will start the bottom-up approach with a query.

Next, we will use the query to populate the rows of a table and then add the table to an empty dashboard.

Anatomy of a Typical Dashboard

• A dashboard usually consists of a container, which in turn contains views.

• Views are assembled from Vizioncore View Components.

• View components are often required to display specific data, which may be set at design time or may be based on dynamically-generated runtime values. It is possible to configure a dashboard to respond to user interaction, which demands, in addition to input components and query-based data retrieval, a mechanism for passing information in the form of parameters.

• In the Web Component Framework, the query mechanism allows you to retrieve data from a data source, for example, vFoglight data from a vFoglight data source.

• Queries can be parameterized, allowing them to be modified at run time.

• A flow mechanism permits pages to be updated or linked to other pages.

• A context mechanism allows values, which may be objects, to be passed to dependent pages. Thus, dynamically-retrieved data on a parent page can be passed to a dependent page.

The starting place for working with View Components is to choose, from the left panel, in the Dashboards group, Configuration > Definitions. Make this selection to follow along with the tutorial. (Your user module is labeled My Definitions.)

Tutorial 1: Creating a Dashboard

Configuring a Query

37

UI Walkthrough

We will be using the Configuration > Definitions page as shown in the figure. It contains all the functionality needed to create new customized views as well as allowing someone with proper permissions to edit existing modules. The Module List pane at the upper left side of the window lists all the modules for which definitions exist.

We are going to be configuring a user query in your user area, so select My Definitions.

Now focus your attention on the Module Contents pane in the lower left of the figure.

At the top of the pane on the left there is an Add button. You will use this button to add your new query. Above the Add button there is a row of tabs. The first two on the left are Views and Queries. We will be working with just these in this part of the tutorial.

We are going to start by defining a query, so ensure that the Queries tab is selected.

When it is, the Module Definition pane on the right side of the window will be used to configure the query.

Figure 1

Configuring a Query

Web Component Reference queries are similar to SQL queries and perform a similar function. They are used to select a subset of the information in a data source. vFoglight agents collect a vast amount of data, so Web Component Reference queries are used to access specific items. The Web Component Reference building blocks are used to present this information in a readily understandable way.

Recall that these queries return objects. In most cases you will want to use only a portion of the data returned by the query. The query we want to define will extract from

38 vFoglight

Web Component Tutorial the data source information about all the hosts in our monitored system. To accomplish this task, it is helpful to understand something about Data Source Types, Data Source

IDs, Object Types, and paths in the data object graph.

Note There are other parameters that may be used with a query, such as Aggregations, filtering the top N results, order by, and the familiar where clause. These parameters aren’t needed for the simple query we are constructing as our first example, so we will not discuss them here.

Before you start the tutorial, choose the appropriate user name in the User Views section of the Module List Pane. You will probably choose the node that corresponds to your login name, but this tutorial assumes that you are signed in as the generic vFoglight user. You should make adjustments to the instructions to correspond to the node you are using.

To build a query:

1 Select the Queries tab in the Module Contents pane and then click Add (

The New Query dialog appears.

).

2 Ensure that Blank Query is chosen and set the Data Source Type to vFoglight.

Click OK.

The Definitions pane displays the query editor, which contains all the fields used to construct a query. You don’t have to fill in every field, but those you do are marked by an exclamation point icon on the right side of the field.

3 Type Active Hosts in the Name field.

You will use this name later on to refer to the query.

4 Leave Root Query unchecked.

Labeling a query as a root query causes the query to appear as a choice both in the

Data tab of the Action Panel when one of your user dashboards is selected and in the Data menu choice under Dashboards > Configuration > Data in the

Navigation Panel. You can browse the data structure returned by the query if you label it as a root query.

5 Leave Public unchecked.

Labeling a query as public allows it to be used in other modules. Since the tutorial is not meant to extend vFoglight’s functionality, your queries and views do not need to be used in other modules.

6 Ensure that Deprecated is unchecked.

Tutorial 1: Creating a Dashboard

Configuring a Query

39

7

8

Checking this box indicates that the view is likely to be deleted or replaced by something else in the future. In addition, if selected, this property prevents the component from being used as a child component in new views.

The Comments and Context Help text fields are for describing the purpose of the query to developers and end users. You can supply descriptive text in these fields if you wish, but they are not needed for the tutorial.

Leave Relevant Role(s) and Allowed Role(s) not set. This makes the query available to everyone without restriction. See the section on Roles in the Web

Component Framework User Guide for more information about setting roles.

9 Observe that the Data Source Type is vFoglight.

10 Ensure that the Data Source ID field’s value is (Default).

11 Choose Host from the Object Type drop-down list.

The list contains the names of all the object types known to this running instance of vFoglight. You’ will be able to browse this object as soon as we set the path in the next step.

Note This list box responds to keystrokes, so you can type H to go to the Host option.

12 Searches normally start from the root (/), so ensure that Root Path, Root contains a slash (/).

13 Objects are grouped at some level down from the root. In this example, the object we want is in ModelInstances, so click the browse button ( ) and choose it from the drop-down list in the with Path field.

14 At this point we have constructed a valid query. Test it by clicking the Test button, which is just below the bar containing the New Query tab.

The Query Results dialog appears, showing the name or names of the servers returned by the query and, in this case, the Data Type of the object, which is Host.

The Value field is empty because there is no numerical value associated with objects. Simple types have values, objects do not.

Note You can see that the query did return a list of objects by clicking the expand icon (+) at the left of any host name in the Query Results dialog. When you do, you will see that some properties of the host have numerical values, others, which are themselves objects, show their object data type.

40 vFoglight

Web Component Tutorial

The Query Results dialog allows you to see all the properties of the object, which is useful if you want to determine their names for use later on.

15 Click Close.

16 Click Save on the New Query’s menu to save the query. The tab is renamed to

Active Hosts.

Configuring a Row-Oriented Table

After completing the task in

Configuring a Query

you have a query that returns a list of hosts. The next step is to use the query to populate the rows of a table.

To construct a Row-Oriented table:

1

2

Select the Views tab in the Module Contents pane.

Click the Add button in the Module Contents pane.

The New View dialog appears.

3 Select Blank View.

4 Click the browse button ( ) to display a list of view components.

5 Expand the Tables and Trees node.

6 Choose Row-Oriented Table from the drop-down list, and click OK.

The Definitions pane displays the views editor, which contains all the fields that can be used to construct a view. The required fields are marked by an exclamation

Tutorial 1: Creating a Dashboard

Configuring a Row-Oriented Table

41

7 point icon at the right side of the field. In this case, only the Name field is required.

Type Monitored Hosts in the Name field.

You will use this name to refer to the Row-Oriented Table component later.

8

9

Leave Public unchecked.

Ensure that Deprecated is unchecked.

10 Set Preferred Width and Preferred Height. You can edit these values later when you have seen the table displayed, so you can choose any values you want. For now, set Preferred Width to 300 and Preferred Height to 150.

11 Leave Refresh Interval blank.

To learn about the uses of refresh interval settings, see the Web Component

Framework User Guide.

12 Leave Priority at None.

To learn about the uses of priority settings, see the Web Component Framework

User Guide.

13 Set the Purpose(s) check boxes by clicking the Edit icon ( ). Since the table will be placed in a dashboard, we will check the Pagelet check box and leave all the other boxes unchecked. Click Apply to save the setting and close the popup.

14 Leave Custom Purpose(s), Relevant Role(s) and Allowed Role(s) untouched.

See the Administration and Configuration Guide for a discussion of these items.

The table isn’t fully configured yet, so if you try and save it now you will get an error that informs you that column values have not been set. The next procedure shows you how to choose columns for the table. The data in the columns’ cells will be dynamically generated and will depend on the host.

15 Fill in the Comments and Context Help fields with any descriptive text that you feel is warranted. In a production environment, comments should contain information for other developers and context help should contain information for end users. It becomes part of the context sensitive help for the component.

Configuring the Table’s Columns

In the preceding steps you have given the table a name and you have set its size, but you have not said what the table will contain. In other words, you need to define the columns for the table. You do that in the Configuration tab.

42 vFoglight

Web Component Tutorial

To define the columns for the table:

1 Select the Configuration tab.

The table designer page appears in the right Definitions pane.

Leave Show Advanced Properties unchecked.

2 We need to tell the table that its rows will be populated from a query. Locate the row called Rows. Click the edit icon ( ) and choose Query Selection from the popup.

The Edit - Rows dialog appears.

3

4

Click the Query browse button ( ), locate the Active Hosts query and select it.

(It is in My Queries > Active Hosts).

Click Save, leaving all the other fields untouched.

5

The table has been configured to get its information from a query that returns a list of hosts, but we still have to define which property of a host will appear in a column. For that, we will have to add a new column and define its content.

Expand the Columns node.

6

You will see a node called Column as well as a row called Add Column.

Expand the Column node.

7

The Value row becomes visible.

Click the Edit icon ( ) on the Value row.

Tutorial 1: Creating a Dashboard

Configuring a Row-Oriented Table

43

8 Choose Context Selection from the popup list.

9

The Edit - Value dialog opens.

Click the button at the right of the Input Key field and choose currentRow from the popup.

10 Click the browse button at the right of the Path field and choose name from the popup.

We want the name of a host to appear in this column of the table, so you might think you should choose <host>/name instead of <currentRow>/name. That won’t work. The reason is that as it is being rendered the row has already been passed one of the host objects via the row query, and thus the current row has access to that host’s name parameter via the generated context whose key is

currentRow.

11 Click the Save button on the dialog.

12 Click Save, which is just below the bar containing the tabs, to save Monitored

Hosts.

13 You have satisfied the minimum requirements to allow the table to be displayed.

At this point you could continue to add columns, thus building a table that presents the data you want to see presented for each host. We will leave the table for now and add more columns later.

44 vFoglight

Web Component Tutorial

Building the Dashboard

So far we have a query and we have a table to present some of the data that will be returned by the query. Now we need to configure a dashboard and place the table in it.

To configure a dashboard and add the table:

1 Select the Views tab in the Module Contents pane and then click the Add button

( ).

The New View dialog appears.

2 Ensure that Blank view is selected and click the browse button ( ). Expand the

Containers group and choose Fixed Layout from the drop-down list. Click OK.

The views editor in the Definitions pane displays. The required fields are marked by an exclamation point icon ( ). For this view component, the required fields are

Name, and the Preferred Width and Preferred Height fields, as well as the

Dashboard check box in Purpose(s).

Type All Hosts in the Name field. 3

4

5

6

7

Leave Public unchecked.

Ensure that Deprecated is unchecked.

Set Preferred Width and Preferred Height. Since you can edit these values later when you have seen the table displayed, you can choose any values you want. For now, set Preferred Width to 300 and Preferred Height to 300. These settings, as their name implies, do not ensure that the table will fit in the component. In a fixed layout container the actual table size can be set in the Layout tab.

Leave Refresh Interval blank.

Tutorial 1: Creating a Dashboard

Building the Dashboard

45

8 Leave Priority at None.

9 Set the Purpose(s) check boxes by clicking the Edit icon ( ). Since the component is a dashboard, check the Dashboard box and leave all the other boxes unchecked. Click Apply to save the setting and close the popup.

10 Leave Custom Purpose(s), Relevant Role(s), and Allowed Role(s) untouched.

11 Fill in the Comments and Context Help fields with any descriptive text that you feel is appropriate.

12 Click Save to save your work so far.

The Definitions pane switches from edit mode to view mode and it presents the work you have done so far, as shown in the following figure.

Note Become familiar with the correspondence between the changes you made while in edit mode and the way those changes are presented in the view mode. Subsequent procedures in this tutorial will show the contents of the view mode, which you will use to make the required changes in edit mode.

13 Click Edit to continue modifying the dashboard.

Adding the Table to the Dashboard

By performing the steps in the preceding section you have created a dashboard and you have set its size, but as yet you haven’t added any components to it. It is just an empty container. First we will give the dashboard a title.

To do that you use the Configuration tab.

46 vFoglight

Web Component Tutorial

To define the dashboard’s title:

1 Select the Configuration tab.

2 Click the Edit icon ( ) in the Value column of the Title row and choose String

Template from the drop-down list.

The Edit - Title dialog opens.

3 Type All Monitored Hosts in the Value field and click Save.

Next we will add our table, Monitored Hosts, to the dashboard.

To add the table to the dashboard:

1 Select the Layout tab.

The layout editor appears in the Definitions pane.

2 Click Add ( ) in the Layout menu bar.

The Add View dialog appears. Choose Select existing view and click Next.

3

4

The second page of the Add View dialog appears. In the View area, navigate to

Monitored Hosts and select it. (My Views > Monitored Hosts)

Click Next.

The third page of the Add View dialog appears. In it you set the position and size of the table, whether you want scroll bars, and whether to show a title and a border. Check Show Title and Show Border and leave the other settings at their default values.

5

6

Click Finish. The dialog closes.

The dashboard has been configured and the table has been added. Click Save.

To see the dashboard, select the My Dashboards node in the navigation panel. Expand it if necessary and select All Hosts to view your new dashboard. You see that All

Monitored Hosts appears in the breadcrumb trail at the upper left of the view and the

Dashboard contains a table titled All Monitored Hosts.

Tutorial 1: Creating a Dashboard

Summary

47

Figure 2

Summary

In this tutorial you have constructed a query, used it to populate the rows of a table, and presented that table in a fixed-layout view component that we are calling a dashboard.

You have viewed the component by navigating to All Hosts in the Dashboards area under My Dashboards.

When you build a dashboard page with a real purpose in mind you will want to present some useful information about each host, such as the state of applications running on it, and to see if there are any alarms. You will want to add your newly-constructed page to a place that already exists in the UI. Also, you may want to furnish a drilldown page that contains extra information about a particular host that you select from the table. To accomplish that, you will need to understand how to use context inputs and flows.

Those topics are covered in the next tutorial.

Additional Activities

Because you gave the dashboard a title, it appeared at the top of the component.

Experiment with giving the table another title.

To give the table another name:

1

2

Go back to the table’s configuration tab and edit its title.

Choose String Template and in the Edit - Title dialog type Hosts Being

Monitored by vFoglight in the Value field.

3 Save your changes, both in the dialog and in the component.

To add a title to the table:

1 Whether the table’s title shows or not is a property that is set in All Hosts. Open it for editing and select the Layout tab.

48 vFoglight

Web Component Tutorial

2 Click anywhere in the rectangle allocated to Monitored Hosts. Its border becomes highlighted.

3

4

5

Click the Properties tab.

In the Properties dialog, clear the boxes for Show Title and Show Border.

Note You can change the width of the table here too. The value you enter here overrides the preferred width in the General tab, so setting a width there doesn’t actually have an effect.

Save the changes and view the result. Observe that there is no title and no border around the table.

6 Return to the Properties dialog, check the boxes for Show Title and Show

Border, save your changes and view the result.

Observe that the title of the table is Hosts Being Monitored by vFoglight, which is the title that we gave to the component.

Note You may have noticed that the column containing the host names has a heading whose value is “name,” which is derived from the property chosen for this column in the context selection ( <currentRow>/name ). The header can be changed by editing the column’s

Header property. You will need to check Show Advanced Properties in Monitored Hosts and navigate to Columns > Column > Header.

Saving the Tutorial1 Module

This procedure assumes that your vFoglight installation is in the default location on a

Windows machine. Make the appropriate changes for other platforms.It also assumes that you have created a special user account for working with the tutorial called

WCFTutorial1. Note that all objects in the module are saved.

To save your module using fglcmd:

• In a command window on the server machine, type: cd C:\Vizioncore\vFoglight\bin fglcmd -usr wcftutorial1 -pwd tutorial1 -cmd util:uiexport m user:wcftutorial1 -f \C:\pub\Tutorial\Tutorial1.zip.

If you were acting as the default foglight user, type:

• cd C:\Vizioncore\vFoglight\bin fglcmd -usr foglight -pwd foglight -cmd util:uiexport -m system:tutorial1 -f \C:\pub\Tutorial\Tutorial1.zip

4

Tutorial 2: Adding a Drilldown Page

In Tutorial 1 you created a top level dashboard that contains a table of host names. Now, in Tutorial 2, it is time to show you how to add more columns to the table and how to create a dependent page that supplies information about any host selected from the table. This is often called a drilldown page because the information it presents depends on which host is selected in the parent page.

User actions that cause the view to update in some way will be covered in a subsequent tutorial.

This chapter contains the following topics:

Objectives of Tutorial 2 ................................................................................................................50

Adding an Alarm Icon to the Table ...............................................................................................50

Adding a Dependent Page ..........................................................................................................52

Summary .....................................................................................................................................57

50 vFoglight

Web Component Tutorial

Objectives of Tutorial 2

There are two main ways of presenting visual information about a group of objects. One is to list the objects on a page and to organize it so that the information about each object appears with it on the same page. We chose a table layout in Tutorial 1 with this objective in mind. We can add other bits of information to the same row as the host and keep things together that way.

The other way of presenting information is as separate pages, one for each item in the original list. This way is appropriate when the visual component presenting the information is too large to fit on the parent page.

The objectives of Tutorial 2 are:

• Add columns to the table of hosts to show the aggregate alarm state. This places visual information about the host on the row adjacent to its name.

• Add a drilldown page that presents information about the chosen host. This permits you to show much more information about each individual host.

The primary objective of this tutorial is to demonstrate the addition of a drilldown page whose content depends on the particular choice made in the parent page, and in so doing, demonstrate the use of a context and a flow. The terms context and flow are described in detail in the Web Component Framework User Guide.

Adding an Alarm Icon to the Table

To add a column of aggregate alarms to the table of hosts:

1

2

Choose Configuration > Definitions.

Choose My Definitions in the list of modules and click the Views tab in the

Module Contents pane.

The group of views available for this module appears.

3 Choose Monitored Hosts.

The Definitions view pane fills with the parameters that currently define the table.

4 Click Edit.

The General tab of Monitored Hosts appears in the pane.

5 Since our purpose is to add a column to the table, select the Configuration tab.

Tutorial 2: Adding a Drilldown Page

Adding an Alarm Icon to the Table

51

6

7

The pane shows the configuration property editor for Monitored Hosts. Since all the properties we want to modify are not advanced ones, leave Show Advanced

Properties unchecked. This makes for easier viewing.

Expand Columns.

Click the Add Column ( ) button.

A Value row appears that contains an Edit icon ( ).

8 Click the Edit icon on the Value row.

9 Choose Context Selection from the drop-down list.

You are choosing Context Selection because you want the value that appears to depend on the selected row in the table. Recall from Tutorial 1 that the row supplies a context that identifies a particular host: the one whose name appears in the selected row.

The Edit - Value dialog opens.

10 Click the button at the right of the Input Key field and choose Current Row from the list.

11 Click the button at the right of the Path field and choose aggregateState from the list.

By choosing aggregateState we are asking for a value that represents the highest level alarm that has been raised for this host.

12 Click Save both in the dialog and in the edit pane to save the new configuration for the table.

52 vFoglight

Web Component Tutorial

When you view the All Hosts dashboard, you may notice that the area assigned to the table may not be wide enough to show all of its columns without clipping the rightmost column. If this happens, edit All Hosts by choosing the Layout tab, selecting the rectangle for Monitored Hosts, and dragging its right edge.

Adding a Dependent Page

This task introduces the notion of Context. A required context input, which declares it as essential for the operation of the drilldown page, is the kind we will use in this example. Contexts are entities that have a data type, so a context must first be declared, much like a variable in a programming language, by giving it a key, which is the name by which it can be referenced, and a type, which is chosen from a list of available types.

You’ll see in this example how a value is assigned to a named context so that it can be passed to the drilldown page via a flow.

Overview

Adding a dependent page that relies on a context supplied by the parent page involves these steps:

• Create a dependent page.

• Define a Context Input.

• Define a flow from the parent page to the dependent page.

• Set a Flow Context Mapping on the table row that will supply the context to the dependent page.

• Insert the desired component on the dependent page and specify the same context in the component that needs it.

Adding a Context-Sensitive Dependent Page for the Table of

Hosts

In the first tutorial we chose a fixed layout container because it has simple properties that are easy to adjust. When, in this tutorial, we needed to widen the table it contains, it was a simple matter of dragging the table’s right edge in the Layout tab.

In this example we’ll use a Grid to hold the component we plan to embed. This choice has been made simply to introduce the Grid container, which permits the placement of

Tutorial 2: Adding a Drilldown Page

Adding a Dependent Page

53 designated, already-existing views in cells. A later tutorial will illustrate more of the

Grid’s properties.

When adding a view, you can specify the row and column in which it is to be placed.

The row and column indices are zero-based, so the top-left cell is in column 0 of row 0.

We will place a single component, a host monitor page, in this cell.

The host monitor page is quite complex, but it has the advantage of being one that already exists. You can find it in the Hosts module.

Create a Dependent Page

To create a dependent page called ‘Host Monitor’:

1 In the Dashboards section under Configuration > Definitions, ensure that the

Views tab in the Module Contents tab is selected.

2 Click the Add button in the Module Definitions pane.

The New View dialog appears.

3

4

Ensure that Blank view is selected, click ( ) and expand the Containers group in the drop-down list.

Choose Grid from the drop-down list. Click OK.

Fill in the fields in the General tab using the values shown in the figure below.

54 vFoglight

Web Component Tutorial

Define a Context Input

5

6

3

4

1

2

Still in Host Monitor, choose the Context tab.

Click the Add Context Input ( ) button under Inputs. A new row appears.

Click on it to launch the Edit dialog.

In the Edit dialog, type host in the Key field.

Set Usage to Required.

7

Set Data Source Type to Foglight.

Set Data Type to Host.

Tutorial 2: Adding a Drilldown Page

Adding a Dependent Page

55

8 Ensure List is False. This key is being used to pass a single host to drilldown pages.

9 Click Save on the dialog and on the tab on Host Monitor’s toolbar to save your work so far.

Define a Flow

The following steps direct the rows of the table to a view called Host Monitor and pass the required context.

To configure the flow:

4

5

2

3

1 Return to editing Monitored Hosts.

Select the Flow tab.

Choose Row Selection.

This establishes a flow action for every row of the table.

The Edit - Row Selection dialog opens.

Clear the Leave Unspecified check box.

Set the Flow Type to Next Page.

This sets the flow type to launch a new page when a row of the table is selected.

6 In the Selected Row text field under Flow Context Mappings, type host.

This ensures that the named context will be passed to the target page.

7 Click the button at the right of the View field. Under My Views, choose Host

Monitor.

This component is your container for Host Monitor in Hosts > Host Monitor. You will add components to your version of Host Monitor later.

8 Click Save.

56 vFoglight

Web Component Tutorial

9 Choose the Context tab and observe that an entry called host has been added to the Inputs section.

10 Click Save on the toolbar to save the changes you made to Monitored Hosts.

If you test the page at this point, you’ll see that by clicking on a row of Monitored

Hosts you do go to a new, blank page. The breadcrumb history trail at the top right side of the page displays “All Monitored Hosts > Host Monitor.”

Populate the Dependent Page

To add a view to Host Monitor:

1

2

Edit Host Monitor and choose the Layout tab.

Click the Add button.

In the Add View dialog, choose Select existing view and click Next.

3

4

5

Ensure the purpose and validity boxes are checked.

Expand Hosts > Common and choose Host Detail, then click Next.

6

We chose an existing page that displays useful data about a host rather than attempting to build such a complex page from scratch. A later tutorial will demonstrate how such a page can be constructed.

The next page of the Add View dialog allows you to change existing or define new context entries. This is not needed for this tutorial, so click Next.

7

8

The Add View dialog appears. It allows you to set properties for the view. Since we do not know the size of the embedded component, select Automatic for the

Width and Height properties.

Click Finish to close the Add View dialog.

9 Click Save on the toolbar to save the changes you made to Host Monitor.

10 View the result by going to the Dashboards tab and choosing My Dashboards,

All Hosts.

Tutorial 2: Adding a Drilldown Page

Summary

57

11 Click a row of the table to drill down to Host Monitor.

The figure shows a sample result. In the top-left component in the figure there is a host name, which is the one that was selected from Monitored Hosts. Each different row selection in the table launches a view that presents data coming from the selected host.

The overall construction of the view is always the same, but the data presented in the view comes from the chosen host.

Summary

In this tutorial you have been shown how to use a context input and a flow to present a drilldown page in which the data depends on the context that was passed to the dependent page.

Additional Activities

To move the alarm to the left side of the table:

• Go to the Configuration tab for Monitored Hosts and locate the button ( ) in the second row labeled Column under the Columns node. Click it to move the column up in the list of columns, which will have the effect of shifting the column to the left when the page is viewed.

To add one more column to the table between the alarm and the host name:

1

2

Go to the Configuration tab for Monitored Hosts and expand the Columns node.

After the last column node is a row called Add Column. Click the Add Column button.

58 vFoglight

Web Component Tutorial

3

4

A new group is created. Its expanded view appears. Click the Edit icon ( ) in the new column’s Value row.

Choose Context Selection in the popup that appears.

In the Edit - Value dialog, choose currentRow as the Input Key, and

alarmTotalCount as the Path.

5 Click Save in the Edit - Value dialog.

6

7

Click the button ( ) to move the column up so that it appears between

aggregateState and name.

Save your changes and view the result.

After you have added a new column to the table while keeping your previous settings unchanged, and you test the result, you may notice that the table is too narrow to fit the name column in the space that has been allotted to it. In fact, since the column has been placed to the right of the host name, you may not even see it. This exposes a problem with a fixed-layout container. The table’s allotted size can be inappropriate if columns are added or if the text in a cell needs extra space.

You can widen the table by editing All Hosts. In the Configuration tab, click inside the rectangle representing the Monitored Hosts table, and then click Properties on the

Layout tab’s toolbar. Change the Width to 400. Click Save in the Properties dialog and then click Save on the All Hosts tab's toolbar.

To change the name of the hosts column.

1

2

Open Monitored Hosts for editing.

In the Configuration tab, click the Show Advanced Properties box, expand the

<currentRow>/name column, and then click the Edit icon on the Header row, which is the last row under the third Column node.

4

5

3 Choose String Template in the popup, and enter Host Name in the Value field.

Click Save in the dialog.

Save the component.

5

Tutorial 3: Adding Views

In Tutorial 1 you created a top level dashboard that contained a table of host names. In

Tutorial 2, you created a dependent page that contained a pre-built view. In Tutorial 3, you will add views that you yourself create.

You will learn about five additional components: key-value listing, chart, button, dropdown list, and customizer.

This chapter contains the following topics:

Objectives of Tutorial 3 ................................................................................................................60

Designing the Page .....................................................................................................................61

Defining the Alarms Query ..........................................................................................................61

Configuring a Table of Alarms .....................................................................................................64

Configuring a Key-Value Listing Component ...............................................................................68

Configuring a Chart Component ..................................................................................................71

Configuring a Label with an Action ..............................................................................................73

Configuring a Drop-Down List .....................................................................................................78

Configuring the Drilldown Page ...................................................................................................75

Adding a Customizer ...................................................................................................................81

Summary .....................................................................................................................................82

60 vFoglight

Web Component Tutorial

Objectives of Tutorial 3

The objectives of this tutorial are to place components on a drilldown page whose content depends on the particular choice made in the parent page, and also to introduce three new components for you to work with.

The tasks you will complete are:

• Add a drilldown Grid page that presents information about the chosen host.

This first exercise is similar to Tutorial 2, but in this case you will populate the drilldown page with components that you configure rather than simply choosing a pre-built view.

• Add a Row-Oriented Table of alarms for the chosen host.

The first column of the Row-Oriented Table will show the severity of the alarm and the second column will present an informative message about the alarm.

• Add a Key-Value Listing component that presents selected information about the host.

• Add a chart component that shows CPU utilization.

This exercise introduces you to using a chart as a visualization component.

Charts that display information that depends on the context in which they are launched are an essential UI component.

• Add a Drop-Down List.

Frequently, a user may be looking at a page that displays information about one host and then decides to look at another host. This exercise shows you how to place a chooser on the page that allows viewing a different host.

• Add a Label that provides an active link back to the parent page.

That is what the history trail (breadcrumbs) at the top of the page is for, but since this is a tutorial, you will see how to define a flow on a label.

• Add a Customizer to the page.

This exercise introduces you to another linking mechanism, the Customizer.

Note While investigating Time Range settings is not an objective of this tutorial, ensure that the default timeRange context key is set to its default value for all the components in this exercise:

Key: timeRange, Usage: Required, Data Type: Time Range.

Tutorial 3: Adding Views

Designing the Page

61

Designing the Page

The objectives for Tutorial 3 have listed the components we are going to use, so all that needs to be done to design the page is to specify its layout. The table below shows how the components will be arranged.

My Hosts dependent page for Tutorial 3: a Grid layout with two columns

Row 0, Column 0:

Host State: A Key-Value Listing component.

Above the grid

A Customizer that places itself above and to the left of the View and Help buttons on the title bar.

Row 0, Column 1:

Memory - Utilization History:

A chart component.

Row 1, Columns 1 and 0 spanned:

Alarms table for <host>:

A Row-Oriented Table listing alarms for the chosen host.

The component will span two columns of the Grid container, similar to this row.

Row 2, Column 0:

Return to Hosts Page T3:

A Label component (with a flow action that returns to the parent page).

Row 2, Column 1:

Host Chooser DDL T3:

A Drop-Down List component (whose flow action is Update, which permits choosing a new host. The current page updates itself with new information based on the chosen host.)

Defining the Alarms Query

The drilldown page is going to display information about the alarms on a chosen host, so a query is an obvious choice for getting the required data. However, the data retrieved by the query should be for a specific host, but the host is only chosen at run time as a result of user interaction. The solution is to use a parameterized query. The parameter’s value will be assigned at run time by selecting a row in the My Hosts table.

62 vFoglight

Web Component Tutorial

To configure a query returning Alarms that is passed a Host as a parameter:

1 Choose Configuration > Definitions in the module you are using for this tutorial.

2

3

Select the Queries tab in the Module Definitions pane.

Click the Add button in the Module Definitions pane.

4

The New Query dialog appears.

Ensure that Blank Query is chosen, select Foglight as the Data Source Type, and click OK.

The Definitions pane displays the query editor, which contains all the fields that can be used to construct a query. The required fields are marked by an exclamation point icon on the right side of the field.

Configure the query using the information in the following screen:

Tutorial 3: Adding Views

Defining the Alarms Query

63

5

Note that a Root Path of {host} was chosen. The query requires that a host be passed to it and then only alarms for that host will be returned.

At this point we have constructed a valid query. Test it by clicking the Test button, which is just below the bar containing the tabs.

6

No results can appear until you specify a host, which is the required input to the query. Use the Input Values dialog to choose a host.

Note You can see that the query did return a list of objects by clicking the expand icon (+) at the left any alarm name in the Query Results dialog. When you do, you will see that some properties of the host have numerical values, while others, which are themselves objects, do not.

Click Set, then Results to see what the query returns.

64 vFoglight

Web Component Tutorial

7

8

The Query Results dialog appears, showing a list of alarms.

Close the Query Results dialog.

Click Save to save the query.

Configuring a Table of Alarms

In this exercise you are going to build a generic table that lists alarms. When the table is actualized, the data in the table will depend on which host was chosen from the parent dashboard. Choosing a particular host in the parent dashboard is the action that triggers the display of the alarm table.

To add a column of aggregate alarms to a table of hosts:

1 Choose Configuration > Definitions under Dashboards in the Navigation pane and ensure that your tutorial module (My Definitions) is selected. Also ensure that the Views tab is selected in the Module List pane. Add a Row-Oriented Table.

For more information, see “ Configuring a Row-Oriented Table ” on page 40. Fill

in the properties in the General tab.

2

3

In the Name field, type Alarm Table for Host T3.

Leave Custom Purpose(s), Relevant Role(s) and Allowed Role(s) untouched.

4

See the Administration Guide for a discussion of these items.

Enter “A table of alarms for a selected host.” in both the Comments and the

Context Help text fields.

5 In the Purpose field click the Edit button, select Pagelet, and then click Apply.

The table isn’t fully configured yet, so if you try and save it now you will get an error that informs you that column values have not been set. The next procedure shows you how to choose columns for the table. The data in the columns’ cells will be dynamically generated and will depend on the host.

Tutorial 3: Adding Views

Configuring a Table of Alarms

65

Adding Columns to the Table

To add columns you use the Configuration tab, but before you do, define a Context to tell the component that it will require an object of type Host for its operation.

To set the context:

1

2

Select the Context tab.

Click the Add Context Input button ( ) and click on the new row to launch the

Edit dialog.

Declare a context using the information in the figure:

3 Click Save.

66 vFoglight

Web Component Tutorial

These steps cause the context key host to be made available to the table. As you did in Tutorial 2, you will configure My Hosts page to pass Host values to the table.

To add a severity column to the table:

1 Select the Configuration tab.

The table designer page appears in the right pane.

2 We need to tell the table that its rows will be populated from a query. Locate the row called Rows. Click the edit icon ( ) and choose Query Selection from the popup.

The Edit - Rows dialog appears.

3 Click the Query drop-down button and navigate to Alarms for a given host and select it. (My Queries > Alarms for a given host).

4

5

Click the Edit ( ) icon for Parameter {host} of type vFoglight: Host.

Choose Context Selection from the drop-down list.

6 Click the ( ) button for the Input Key field and choose host.

7 Click Save, leaving all the other fields untouched.

8

The table has been configured to get its information from a query that returns a list of hosts, but we still have to define which property of a host will appear in a column. For that, we will have to add a new column and define its content.

Expand the Columns node.

A row called Column appears. Expand the Column node.

The Value row becomes visible.

9 Click the Edit icon ( ) on the Value row.

Tutorial 3: Adding Views

Configuring a Table of Alarms

67

10 Choose Context Selection from the drop-down list.

The Edit - Value dialog opens.

11 Click the button at the right of the Input Key field and choose Current Row from the list.

12 Click the button at the right of the Path field and choose severity from the list.

This choice will place a severity icon in column one.

13 Click Save in the Edit - Value dialog.

Next, we will add a column to display alarm messages.

To add a message column:

1 Find the Add Column row and click the Add ( ) button.

The Value row becomes visible.

2

3

Click the Edit icon ( ) on the Value row.

Choose Context Selection from the drop-down list.

4

The Edit - Value dialog opens.

Click the button at the right of the Input Key field and choose currentRow from the list.

5 Click the button at the right of the Path field and choose message from the list.

This choice will place an alarm message in column two.

6 Click the Save button on the dialog.

68 vFoglight

Web Component Tutorial

We will illustrate another use of parameters by giving the table a title that contains the name of the host.

To add a parameterized title to the table:

1

2

Click the Edit icon ( ) on the Title row.

Choose String Template.

3

The Edit - Title dialog appears.

Type Alarms Table for {0} in the Value field.

The construct {0} designates a positional parameter. After you have entered this in the Value field a row appears in the dialog that allows you to set the parameter with a runtime value.

4

5

Click the Edit icon ( ) on the Parameter {0} row.

Choose Context Selection from the drop-down.

6

7

8

The Edit - Parameter {0} dialog appears.

Choose host for the Input Key.

Choose name for the Path.

Click Save on the Edit - Parameter {0} dialog.

9 Click Save on the Edit - Title dialog.

10 Click Save on the bar containing the tabs to save Alarm Table for Host T3.

Configuring a Key-Value Listing Component

This section introduces the Key-Value component. You will use it to show more host properties, this time pertaining to the CPU.

To add a Key-Value Listing component:

1 Choose Configure > Definitions and ensure that your tutorial module is selected.

Also ensure that the Views tab is selected for the Module List pane.

2 Click the Add ( ) button.

The New View dialog appears.

3 Click ( ) to expand the Tables and Trees node.

Tutorial 3: Adding Views

Configuring a Key-Value Listing Component

4 Choose Key-Value Listing.

Note that this component is also available under the Common node.

69

Fill in the properties on the General tab as shown in the figure:

5 Since you are going to add this component to a page, check the Pagelet box in

Purpose(s).

70 vFoglight

Web Component Tutorial

6 Enter A key-value listing component for CPU state in both the Comments and the Context Help text fields.

Configuring the Columns in the Key-Value Listing Component

This component needs a host context as well, so you will define it first.

To set the context:

• Follow the first procedure in

Adding Columns to the Table to make a single Host

object a required input.

Now you can define the columns for the Key-Value Listing table.

To define the columns for the Key-Value Listing table:

1 Select the Configuration tab.

2

We need to set each row. In this example, the row will be populated from a context.

Ensure that the Show Advanced Properties check box is selected. You will want to set the Label property later on in this procedure.

3 Expand Groups, Group, Items, and Item.

4 Click the Edit ( ) icon on the Item’s Value row and choose Context Selection from the popup.

The Edit - Value dialog appears.

6

7

5 Select host for the Input Key.

Choose aggregateState for the Path.

8

9

Click Save in the Edit - Value dialog.

Note There are three values in the layout of the Key-Value Listing component, Label,

Value, and State. In this tutorial we aren’t going to set the State property, so we will simply use the Value property to display the state.

Click the Edit ( ) icon on the Item’s Label row.

Choose String from the list.

10 Type Aggregate State in the String value field of the Edit - Label dialog.

11 Click Save in the Edit - Label dialog.

We will illustrate another use of parameters by giving the table a title that contains the name of the host.

Tutorial 3: Adding Views

Configuring a Chart Component

71

To add a title to the Key-Value Listing table:

1

2

Click the Edit icon ( ) on the Title row.

Choose String Template.

The Edit - Title dialog appears.

3 Type Alarms for {0} in the Value field.

The construct {0} designates a positional parameter. After you have entered this in the Value field a row appears in the dialog that allows you to set the parameter with a runtime value.

4

5

Click the Edit icon ( ) on the Parameter {0} row.

Choose Context Selection from the drop-down.

6

7

8

The Edit - Parameter {0} dialog appears.

Choose host for the Input Key.

Choose name for the Path.

Click Save on the Edit - Parameter {0} dialog.

9 Click Save on the Edit - Title dialog.

10 Click Save on the bar containing the tabs to save Host State T3.

Configuring a Chart Component

Charts can have a large number of properties, but we will begin by constructing a simple chart and introduce a more complex example in a later tutorial.

To add a chart component:

1 Choose Configuration > Definitions and ensure that your tutorial module is selected. Also ensure that the Views tab is selected for the Module List pane.

2 Click the Add ( ) button.

The New View dialog appears.

4

5

3 Ensure that Blank view is selected. Click ( ) and expand the Charts and

Gauges node.

Choose Time Plot Chart from the drop-down list.

Click OK.

72 vFoglight

Web Component Tutorial

Fill in the Time Plot Chart’s General properties using the information in the figure:

6 Enter Memory utilization chart for the selected host in both the Comments and the Context Help text fields.

To set the context:

Follow the first procedure in Adding Columns to the Table

to make a Host object a required input.

To set the chart’s data source:

1 Select the Configuration tab.

Observe that this type of chart has as its principal properties a header, footer, time axis and metric data. The time axis by default takes its settings from the current time range, which leaves only the metric data as an essential setting.

Expand the Metric Data - Single Parent node.

2

3

4

Click the Edit icon on the Metric Parent row.

Select Context Selection from the drop-down list.

5

6

7

The Edit - Metric Parent dialog appears.

Choose host as the Input Key.

Click Save in the Edit - Metric Parent dialog.

Expand Single Metric Bindings.

8

9

Click the Add button ( ) in the Add Single Metric Binding row.

Click the edit icon on the Metric row and choose Context Selection from the drop-down.

Tutorial 3: Adding Views

Configuring a Label with an Action

73

10 Choose host in the Input Key field.

11 In the Path field, expand the memory node and choose utilization.

12 Click Save in the Edit - Metric dialog.

13 Click the edit icon on the Title row and choose String Template from the dropdown.

14 In the Edit - Title dialog, type Memory Utilization for {0} in the Value text box.

15 Edit the parameter. choose host for the Input Key and name for the Path.

16 Click Save.

17 Click Save on the bar containing the tabs to save CPU Memory Utilization Chart

T3.

Configuring a Label with an Action

There are times when you may find it useful to add a link back to a previous page even though there are built-in ways, such as the history list (breadcrumbs) at the top of a page, for accomplishing this task.

We will use a label with an action in this tutorial to show another choice for a flow.

To define a Label component:

1

2

Choose Configuration > Definitions and ensure that your tutorial module is selected. Also ensure that the Views tab is selected for the Module List pane.

Click the Add ( ) button.

3

The New View dialog appears.

Ensure that Blank view is selected.

74 vFoglight

Web Component Tutorial

4 Click ( ) and expand the Common node.

6

7

5 Choose Label from the drop-down list.

Click OK.

Configure the properties on the General tab as shown in the figure:

8 Enter A label acting as a button. Its action upon selection is to return to the

page containing a list of all hosts in the system in both the Comments and the

Context Help text fields.

To set the label’s text:

1

2

3

Select the Configuration tab.

Edit the Label by choosing String from the drop-down and typing Return to

Parent in the String value field.

Edit the Title by choosing String Template from the drop-down and typing

Return to Hosts in the Value field.

Note The difference between a String and a String Template is that a String Template can accept parameters. There was no need to use a String Template in this example other than to familiarize you with its dialog.

Tutorial 3: Adding Views

Configuring the Drilldown Page

75

When you add this component to the Grid page you can choose to show the title. If not, only the Label will appear.

To set a flow action on the label:

1

2

Select the Flow tab.

Click on the Selection row.

The Edit - Selection dialog appears.

4

5

3 Ensure that the Leave unspecified check box is unchecked.

In the Flow type drop-down, choose Previous.

6

Click Save in the Edit - Selection dialog.

Click Save on the toolbar to save the Label component.

Note that by assigning Previous to the flow type you have installed a link back to the page that invoked the current page.

Configuring the Drilldown Page

By now, you have configured some component views, so you need a page to hold them.

This section shows you how to create a page and place the required components in it. As we have done before, we will use a Grid container.

To create a dependent page called ‘Host Details T3’:

• Follow the instructions in Tutorial 2,

Create a Dependent Page up to but not

including Define a Flow , but in this case choose Host Details T3 in the Name

field when defining the flow. Ensure that you have set a host context.

• Type “A details page for the selected host.” in both Description fields.

Populate the Dependent Page

The first component we will add is the Key-Value Listing.

To add the Key-Value Listing component to Host Details T3:

2

3

1 Edit Host Details T3 and choose the Layout tab.

Click the Add button.

4

In the Add View dialog, choose Select existing view and click Next.

Ensure the purpose and validity boxes are checked.

76 vFoglight

Web Component Tutorial

5

6

Expand My Views.

Choose Host State T3 then click Next.

Now we are adding the chart.

8

9

7 Set Width to 350 pixels.

Set Height to Automatic.

Set Row to 0 and Column to 0.

This places the Key-Value Listing component just below the upper-left cell in the table.

10 Check both Show Title and Show Border.

11 Leave all other fields with their default settings.

12 Click Finish on the Add View dialog.

To add the Time Plot Chart component to Host Details T3:

1

2

Continue editing Host Details T3 in the Layout tab.

Click the Add button.

In the Add View dialog, choose Select existing view and click Next.

3

4

5

6

Ensure the purpose and validity boxes are checked.

Expand My Views if necessary.

Choose CPU Memory Utilization Chart T3 and then click Next.

Set Width to 400 pixels.

7

8

9

Set Height to 350 pixels.

Set Row to 0 and Column to 1.

This places the Time Plot Chart component in the cell to the right of the Key-

Value Listing component.

10 Check both Show Title and Show Border.

11 Leave all other fields with their default settings.

12 Click Finish on the Add View dialog.

To add the Row-Oriented Table component to Host Details T3:

1

2

Continue editing Host Details T3 in the Layout tab.

Click the Add button.

Tutorial 3: Adding Views

Configuring the Drilldown Page

77

3

4

In the Add View dialog, choose Select existing view and click Next.

Ensure the purpose and validity boxes are checked.

Expand My Views. 5

6

8

9

7

Choose Alarm Table for Host T3 then click Next.

Now we are adding the table of alarms.

Set Width to 425 pixels.

Set Height to 400 pixels.

Set Row to 1 and Column to 0.

This places the Row-Oriented Table component in the cell to the right of the Key-

Value Listing component.

10 Set the row span to 2.

11 Set Scrollbars to Auto.

12 Check both Show Title and Show Border.

13 Leave all other fields with their default settings.

14 Click Finish on the Properties dialog.

To add the Label component to Host Details T3:

5

6

1

2

3

4

Continue editing Host Details T3 in the Layout tab.

Click the Add button.

In the Add View dialog, choose Select existing view and click Next.

Ensure the purpose and validity boxes are checked.

Expand My Views.

Choose Return to Hosts Page T3 then click Next.

Now we are adding the table of alarms.

8

9

7 Set Width to 350 pixels.

Set Height to Automatic.

Set Row to 2 and Column to 0.

This places the Label component in the cell to the right of the Label component.

10 Check both Show Title and Show Border.

11 Leave all other fields with their default settings.

78 vFoglight

Web Component Tutorial

12 Click Finish on the Properties dialog.

13 Click Save on the toolbar to save the changes you made to Host Details T3.

Configuring a Drop-Down List

This example illustrates another way of changing the contents of a page. In this case, the page updates with information about another host that you choose from a Drop-Down

List component.

To define a Drop-Down List component:

1 Choose Configuration > Definitions and ensure that your tutorial module is selected. Also ensure that the Views tab is selected for the Module List pane.

2 Click the Add ( ) button.

The New View dialog appears.

3 Ensure that Blank view is selected, click ( ), expand the Common node, and choose Drop-Down List.

4

5

Click OK.

Configure the properties on the General tab as shown in the figure:

6 Enter An example of a drop-down list for choosing hosts in both the Comments and the Context Help text fields.

Tutorial 3: Adding Views

Configuring a Drop-Down List

79

To set the context:

• Follow the procedure (under To set the context) in

Adding Columns to the Table

to make a Host object a required input.

To set the items for the drop-down list:

2

3

1 Select the Configuration tab.

Click the Edit icon on the Items row.

Choose Query Selection in the drop-down.

The Edit - Items dialog appears.

7

8

5

6

4 Choose Active Hosts in the Query field after expanding the My Queries node.

Click Save in the Edit - Items dialog.

Ensure that Show Advanced Properties is checked.

Click the Edit icon on the Item Label row.

Choose Context Selection from the drop-down list.

The Edit - Item Label dialog opens.

9 Choose currentItem in the Input Key field.

10 In the Path field, choose name.

11 Click Save in the Edit - Item Label dialog.

To set the flow for the drop-down list:

1

2

Select the Flow tab.

Click the Selection row.

In the Edit - Selection dialog, make sure that Leave unspecified is unchecked.

3

4 Select Update as the Flow type.

When an item in the list is selected, the view will update based on the chosen host.

6

7

5 In Flow Context Mappings, Selected Item, type host.

Select Host Details T3 as the View.

8

Click Save on the Edit - Selection dialog.

Click Save on the bar containing the tabs to save Host Chooser DDL T3.

80 vFoglight

Web Component Tutorial

To add the drop-down List component to Host Details T3:

5

6

1

2

3

4

Go back to editing Host Details T3 in the Layout tab.

Click the Add button.

In the Add View dialog, choose Select existing view and click Next.

Ensure the purpose and validity boxes are checked.

Expand My Views.

Choose Host Chooser DDL T3 then click Next.

Now we are adding the table of alarms.

8

9

7 Set Width to 350 pixels.

Set Height to Automatic.

Set Row to 2 and Column to 1.

This places the Label component in the cell to the right of the Key-Value Listing component.

10 Check both Show Title and Show Border.

11 Leave all other fields with their default settings.

12 Click Finish on the Add View dialog.

13 Click Save on the toolbar to save the changes you made to Host Details T3.

Flowing Monitored Hosts to Host Details T3

All that remains is to edit Monitored Hosts to flow to the newly-created dependent page.

To edit Monitored Hosts to flow to Host Details T3:

1

2

Edit Monitored Hosts.

In the Flow tab, edit Row Selection and replace Host Monitor with Host Details

T3.

Test the new drill down page by going to My Dashboards and selecting All Hosts. 3

4

5

Click on a row in the table to initiate the flow action.

The dependent page, Host Details T3, appears.

Tutorial 3: Adding Views

Adding a Customizer

81

Adding a Customizer

The last exercise introduced you to the customizer component, which is a handy way to add a link on a parent page to another related view. When you add the customizer to a

Portlet, the link appears at the top right of the component’s area.

To add a customizer to a page:

1

2

Edit Host Details T3.

Select the Layout tab.

3 Select ( )Define Customizer.

The Customizer dialog appears.

4 Click ( ) and choose any view you wish in the View field as long as it has a

Context Input key of host.

You may want to choose the All Alarms Chart page, which is found under the

Alarms node in the Available Views dialog for the customizer.

Choose None from the Icon drop-down.

5

6

7

8

9

Check Show Title.

In the Label field, enter Customizer Test.

Click Set in the Customizer dialog.

Click Save on the bar containing the tabs to save Host Details T3.

When you view the page, the customizer link appears in the action panel as the first item in the Actions group.

A Customizer has many useful purposes. For instance, it can be used as

• A filter—For example, an Alarm Filter for alarms tables

• A selector—For example, a Category Selector for Services pages or a Host

Selector in Hosts Table

It is not as useful for top level views with a Page designation, where it shows up in the action panel. If you add a customizer to a Page that is not a top level view, it is visible only if the view’s title bar is being shown by the container.

For views purposed as Dashboard or Page, alternatives to the Customizer are the two choices in Configuration tab, Page Options: Navigation Panel Views and Page Panel

Views, by which you can add views directly to the left and right panels. These choices appear only when the parent page is being viewed.

82 vFoglight

Web Component Tutorial

Summary

In this tutorial you have been shown how to use parameters in queries and some new components have been introduced.

At this point you can begin building more complex designs by consulting the Web

Component Framework pages, which are also available in the vFoglight online help.

Additional Activities

• Investigate what effect changing the time range has on CPU Memory Utilization

Chart: T3 and possibly on Host State T3.

• Make a change to the height of Host State T3 by choosing by choosing Layout,

Properties in Host Details T3 and editing the Height property. Change it from

Automatic to some pixel value. When you chose Automatic, you relied on the layout algorithm to adjust the height to a reasonable size, but you can override that by forcing the component to have a specified height.

• You constructed a Customizer for Host Details T3. When you are viewing that page, select the Active Hosts Summary Iterator from the General tab in the

Action panel. It presents summary information for all monitored hosts. Look for other vFoglight components that take host as a context input and replace Active

Hosts Summary Iterator with your chosen view.

• Alarm Table for Host T3 may have more entries than the height of the component allows. Add scrollbars to the to the view and observe the change.

6

Tutorial 4: Using a Grid

This tutorial illustrates some of the more advanced properties of the Grid component.

As well, the tutorial outlines how to perform a deep copy of an existing view and how to place a component in the navigation panel.

This chapter contains the following topics:

Before Building the Dashboard: ...................................................................................................84

Using a List as a Chooser ...........................................................................................................86

Choosing the Views .....................................................................................................................86

Building the Dashboard ...............................................................................................................86

Summary .....................................................................................................................................93

84 vFoglight

Web Component Tutorial

Before Building the Dashboard:

Perform a deep copy of [chart] Disk I/O Utilization from the module Hosts > Host.

This gives you your own copy of the component, which you can edit any way you want.

Do this by navigating to Hosts > Host in the Module List pane and selecting the view in the Module Contents Pane. When the component’s definition appears in the Definitions pane, click Copy > Deep and select My Definitions in Select Target Module.

You will need to add this view to the grid, and by copying it now you will be able to make changes to the copy without affecting the installed component.

Modify the Chart Properties

We’ll give the chart a title and ensure that the legend is enabled.

To edit the chart’s Header property:

1

2

Open your copy of [chart] Disk I/O Utilization for editing.

Select the General tab, remove the check mark from Public and set Priority to

None.

3

4

Select the Context tab and verify that host is an optional context input. You will be passing a host object to the component in this tutorial.

Select the Configuration tab and ensure that Show Advanced Properties is enabled.

5 Expand the Header node and click the Edit ( ) button for Text.

6 Choose String Template and type Disk I/O Utilization for {0} in the Value field.

The Parameter {0} row appears in the lower part of the dialog.

7 Select the Edit (

Selection.

) button on the Parameter {0} row and choose Context

The Edit - Parameter {0} dialog appears.

8 Click the browse button ( ) in the Input Key field and choose host.

9 Click Save in the Edit - Parameter {0} dialog.

10 Click Save in the Edit - Text dialog.

To edit the chart’s Legend property:

1 Expand the Legend node.

Tutorial 4: Using a Grid

Before Building the Dashboard:

85

2 Click the Edit ( ) button on the row for the property called Visible.

3

The Edit - Visible dialog opens.

Check the box labeled Boolean Value and click Save.

Save the changes you have made to the chart component.

These are the only changes you need to make to the chart after you have copied it from the Hosts > Host system module.

86 vFoglight

Web Component Tutorial

Using a List as a Chooser

One purpose of this tutorial is to help you investigate the layout properties of the Grid component. Once more, we’ll choose the familiar example of a host. Rather than limiting you to a single host, we’ll use a Drop-Down List to let you pick any host in your monitored system. We could have built a top-level dashboard that listed all hosts, as we did in Tutorial 1, and then configured a drill down page as a grid displaying host information. This tutorial shows you how to update a top-level page by making a choice within the page and then having all the other views update themselves.

When a host is selected in the drop-down list, the page is reloaded and the context is now that of the chosen host. This is a simple but effective way to use one page to look at the properties of a number of different hosts.

Choosing the Views

Because we are interested in Grid properties, we do not need to take the time to build all the views that will be placed in the cells of the Grid. Instead, we will choose pre-built views and investigate what shape they take when they are added to the cells in the Grid.

The views we’ll choose are:

• A Row-Oriented Table for choosing hosts. We will build this one.

Agents Running On A Given Host from the System module Hosts > Host

Analysis.

CPU Memory Utilization Chart T3 from the module containing the tutorial views.

Alarm List with Filter from the System module Alarms.

[chart] Disk I/O Utilization from the System module Host > Host.

For the Customizer, we’ll choose Host Browser from the System module Hosts > Host and insert it as the Customizer for this page.

Building the Dashboard

We begin by constructing the Grid component’s shell and then we will lay out the contained views. After all the views have been added, you can experiment with various layout settings to see how they affect the grid’s appearance.

Tutorial 4: Using a Grid

Building the Dashboard

To configure the General page of the dashboard:

1

2

Ensure that the Views tab in the Module Contents pane is selected.

Click the Add button ( ) in the Module Contents pane.

The New View dialog appears.

87

3 Ensure that Blank view is selected.

5

6

4 Click the browse button ( ), expand the Containers group and choose Grid from the drop-down list.

Click OK.

Fill in the General tab as shown in the figure:

7 Fill in the Comments and Context Help fields with any descriptive text that you feel is warranted, such as “A grid for investigating its layout properties.

88 vFoglight

Web Component Tutorial

8 Click Save to save your work so far, and then click Edit to continue modifying the dashboard.

Set a Context

Define a Context to tell the component that it may accept an object of type Host for its operation and supply the component with an initial value for the Host object. You will configure this dashboard to permit the choice of a different host and then update itself.

To set the context:

1 Select the Context tab.

2 Click the Add Context Input button ( ) in the Inputs section and click on the new row to launch the Edit dialog.

Declare a context using the information in the figure:

3

Note that a dashboard must not have any required inputs, so choose Optional for

Usage, and you will set an initial value in the context in a following step.

Click Save.

This host context setting is necessary because you will use it to supply the host name and state to the dashboard’s title. By setting a default value, you supply the dashboard with an initial host value. Without it, the view might show errors until a host is chosen and an update action is triggered.

To supply an initial host value:

1 Select the Context tab.

2 Click the Edit ( ) button for the key host row in the Inputs section.

3 Choose Query Selection from the drop-down.

4 Click the Query Selection Runtime Value browse button ( ) to display a list of queries.

Tutorial 4: Using a Grid

Building the Dashboard

89

5

6

7

Select Active Hosts in My Queries. Copy it from WCFTutorial3 if necessary.

Check Return First Object in List.

As an example of setting an On Null value, complete this step. Null values occur when a query fails to return any objects at all. In this case, you are setting a null value in case the query fails to return any objects of type Host. Click the edit icon for On Null and choose String Template. Type No Hosts! and click Save. Follow a similar procedure to set On Null values for other objects.

Verify your settings using the information in the figure:

Adding the Views to the Dashboard

As in Tutorial 1, the first step here is to give the dashboard a title.

To define the dashboard’s title:

1 Select the Configuration tab.

2 Click the Edit icon ( ) on the Title row and choose String Template from the drop-down list.

3

4

5

The Edit - Title dialog opens.

Type Host: {0} -- State {1} in the Value field.

Set parameter 0 to context selection <host>/name and parameter 1 to <host>/

aggregateState.

Click Save.

90 vFoglight

Web Component Tutorial

Adding the Views

You will populate the grid with some existing views. First, we’ll add a host chooser by placing a Drop-Down List in the dashboard.

To modify the Drop-Down List for this tutorial:

1

2

3

Open Host Chooser DDL T3 for editing.

Select the Flow tab.

Switch Selection to Update, keeping host as the Selected Item.

This flow action updates the page and passes the selected host as a context input, so that data for that host is displayed.

To add the Drop-Down List to the dashboard:

1

2

3

Select the Layout tab.

Click the Add button on the menu bar.

In the Add View dialog, choose Select existing view, and on the next screen choose Host Chooser DDL T3 from the module My Views. If you do not have this component in your current module, deep copy it from WCFTutorial3.

5

6

4 After ensuring that purpose and validity are checked, click Next.

Set both Width and Height to Automatic.

7

Set both Row and Column to 0.

Check Show Title and Show Border.

8 Click Finish to complete the layout of the Drop-Down List.

To add the CPU memory utilization chart

9 In a similar fashion, add CPU Memory Utilization Chart T3 from the My Views module using the information in the following figure.

Tutorial 4: Using a Grid

Building the Dashboard

91

To add an Alarm List with Filter:

1 Add Alarm Table for Host T3 from the module My Definitions using the information in the following figure.

The last component to be added is another chart. Rather than building the chart from scratch, copy an existing chart and place the copy in My Definitions.

To add a disk I/O utilization chart:

1 By now, you should have performed a deep copy of [chart] Disk I/O Utilization from the module Hosts > Host. If you have not, save the grid, make a copy of the

92 vFoglight

Web Component Tutorial

2 chart, and then resume editing the grid. The instructions for deep copying the chart are given at the beginning of this chapter.

Add [chart] Disk I/O Utilization from the module My Definitions using the information in the following figure.

3 Save the Grid.

The Grid is ready for testing. As you have done before, in Dashboards select the module containing your work and choose Hosts T4.

You should see something similar to what is shown in the figure.

Tutorial 4: Using a Grid

Summary

93

Note that there is a possible problem associated with the first component, the drop-down list. If there are many hosts in the monitored system, the list will fill the available space when it is opened and you might not be able to scroll down to the lower items.

Also note the difference between the layout of the two chart components. The chart showing disk utilization has a header but no border or title, while the memory utilization chart has no header, but shows a border and a title. As a general rule, views in the same grid should have consistent settings. You can experiment by changing the settings on one or both components to achieve consistency.

Adding a Customizer

To add a customizer to the page:

1

2

Edit Host T4.

Select the Layout tab.

3 Select ( )Define Customizer.

The Customizer dialog appears.

4 Click ( ) and choose Hosts, Common, Host Browser in the View field.

8

9

6

7

5 Choose None from the Icon drop-down.

Check Show Title.

In the Label field, enter Customizer Test.

Click Set in the Customizer dialog.

Click Save on the bar containing the tabs to save Host Details T3.

When you view the page, the customizer link appears in the action panel as the first item in the Actions group.

Summary

As shown in the preceding figure, there is quite a bit of unused space above the table.

One way of addressing this vertical height problem is to rearrange the order of the components by placing both charts together on the same row because they are of fixed size,

94 vFoglight

Web Component Tutorial

Another solution is possible. A Column layout can be chosen instead of a Grid. In a

Column layout, a cell’s dimension is independent of its neighbor on either side. Thus, each cell in a column can have the vertical height that it needs without causing spacing problems in adjacent columns.

In other cases, a Row layout may be appropriate. In this component, the width of a cell is not tied to the one above or below

Additional Activities

• Reposition the components to achieve a better layout. You might want to concentrate on the layout of the alarms table.

• Experiment with weights.

• Experiment with Row and Column Layout components.

7

Tutorial 5: Reports

By now you should be comfortable with creating and using some of the commonly-used components in the Web Component Framework. We’ll put them to work in this tutorial to show you how to create a report.

There are a number of report examples that are included in the vFoglight user interface, but it is likely that as you become more experienced you will want to create your own reports that match your exact needs. This tutorial will get you started.

Along the way you’ll learn about these additional components: Report, Page

Decoration, and Iterator.

This chapter contains the following topics:

Objectives of Tutorial 5 ................................................................................................................96

Designing the Page .....................................................................................................................96

Configuring a Query ....................................................................................................................97

Creating a Basic Report Page .....................................................................................................98

Creating a More Elaborate Hosts Table .....................................................................................102

Adding a Header ........................................................................................................................106

Adding a Footer .........................................................................................................................109

Adding an Iterator for a Multi-Page Report ................................................................................ 111

Summary ...................................................................................................................................114

96 vFoglight

Web Component Tutorial

Objectives of Tutorial 5

PDF reports are useful for archiving the status of your systems as well as for communicating its recent operational level to interested parties. Whatever your needs, the ability to create informative reports is important. The information needed in a report and the way it should be displayed vary from one enterprise to another, so typically reports are designed on site to meet local needs. This tutorial outlines the way that you can create vFoglight reports using the Web Component Framework.

The objectives of Tutorial 5 are:

• Create a report. This task will require the creation of some context entries to set the title of the report and to retrieve a list of hosts.

At first you’ll be asked to create a very simple report and then you’ll add to it.

• Add headers and footers to the report pages.

Headers and footers are required elements in most reports. You’ll see how to add a company logo to the header of a report, and you’ll see how to add page numbers to the footer.

• Design the content of the report body and choose the proper view components based on that design.

• Embed a pair of body components in an Iterator so that similar body pages are created simply by iterating a list of hosts.

The number of active hosts monitored by vFoglight is a variable. Using an

Iterator permits you to pass a list of hosts resulting from a runtime query and generate a page for each host. Thus, the example serves as a paradigm for any task that performs the same set of actions on objects in a dynamically-generated list.

Designing the Page

You’ll begin by constructing the required query. Next, you’ll create a simple report page that contains an existing view. Finally, you’ll create a more complete report that contains a header, a footer, and an iterated view of host data. The design schematic is shown in the table.

Tutorial 5: Reports

Configuring a Query

Report layout for Tutorial 5:

Header

Single page: Utilization Summary for All Hosts

Iterated page: System Load Summary. Each page presents a time plot of host statistics and a table of high, low, and average values for selected metrics for the chosen time period.

Footer

97

Configuring a Query

This tutorial requires a list of hosts, just as in Tutorial 1, but this time we’ll demonstrate a way of accomplishing the objective by using both a query and a context setting. First, you will build a query that returns a HostModel, and then you will define a context setting to select hosts from the host model object returned by the query.

To build the Host Model T5 query:

1

2

Ensure that the Queries tab in the Module Contents pane is selected.

Click the Add button in the Module Contents pane.

3

The New Query dialog appears.

Ensure that Blank Query is chosen with Data Source Type Foglight and click

OK.

4

The Definitions pane changes to an Edit pane. It fills with the query editor, which contains all the fields that can be used to construct a query. You don’t have to fill in every field, but those you do are marked by an exclamation point icon on the right side of the field.

Type Host Model T5 in the Name field.

5

Now that the query has been named it can be referenced by that name when you want to use it.

Leave Root Query and Public unchecked Comments and Context Help empty, and Relevant and Allowed Role(s) untouched.

6 Ensure that the Data Source ID field’s value is <default>.

98 vFoglight

Web Component Tutorial

7 Select the Object Type by clicking the drop-down arrow at the right of this field.

Choose HostModel from the drop-down list.

8

9

HostModel is the name of the object that contains a list of all the host model objects known to vFoglight. You’ll be able to browse this object as soon as we set the path in the next step.

Note This list box responds to keystrokes, so you can type H and be taken close to the desired entry. Type H repeatedly to advance to the entry you require.

Most objects are grouped at some level down from the root. In this example, the object we want is in ModelRoots, so choose it from the drop-down list in the with

Path field.

Click Save to save the query.

Creating a Basic Report Page

Just to show you how it works, we’ll create a report page that uses an existing view for its body page. We’ll leave the creation of a header and footer for later as well.

To create a simple report page:

1

2

Ensure that the Views tab in the Module Contents tab is selected.

Click the Add button ( ) in the Module Definitions pane.

The New View dialog appears.

3 Ensure that Blank view is selected, expand the Containers group and choose

Report from the drop-down list. Click OK.

4 Type Hosts Summary Report T5 in the Name field.

Tutorial 5: Reports

Creating a Basic Report Page

99

5

6

Ensure that Public and Deprecated are unchecked.

Set Preferred Width and Preferred Height. Actually, the page size is controlled elsewhere. For now, set Preferred Width to 540 and Preferred Height to 500.

Leave Refresh Interval blank.

7

8

9

Leave Priority at None.

Set the Purpose(s) check boxes. Since the component is a report, check the box labeled Report and leave all the other boxes unchecked. Click Apply.

10 Leave Custom Purpose(s), Relevant Role(s) and Allowed Role(s) untouched.

11 Fill in the Comments and Context Help fields with “A test that displays a simple

report page.

Define a value for the context “title”:

You’ll find this context useful if you embed the report in a container, such as a

Grid, and then choose Show Title in the layout configuration for the report, which in this case must be purposed as a Pagelet as well as a Report.

To set the contexts for the report title and to generate a list of host objects:

1 Select the Context tab.

2 In the Additional context section, click the Add Context Entry button ( ).

A new row appears.

3 Click on the Edit icon ( ) to launch the Edit dialog.

4

5

6

7

Choose String from the drop-down list.

Type title in the Key field.

Type Utilization Report - Hosts in the String Value text box.

In the dialog, click Save.

To define a context entry for the Host Model query that returns a single host model:

1 In the Additional context section, click the Add Context Entry button ( ).

A new row appears.

2 Click on the Edit icon ( ) to launch the Edit dialog.

3

4

Choose Query Selection from the drop-down list.

Type hostmodel in the Key field.

100 vFoglight

Web Component Tutorial

5 Choose Host Model T5 (from My Queries) in the Query Selection Runtime Value text field.

6

7

Check Return First Object in List.

In the dialog, click Save.

You’ll use this context input to the table of hosts that you will construct shortly.

To define a context entry “hosts” for a list of hosts contained in the host model:

1 Click the Add Context Entry button ( ) in the Additional section of the

Context tab.

A new row appears.

5

6

3

4

2 Click on the edit icon in the new row to show the items in the drop-down list.

Choose Context Selection from the drop-down list.

Type hosts in the Key field.

Choose hostmodel in the Context Selection Runtime Value, Input Key text box.

7

Select hosts in the Path drop-down list.

In the dialog, click Save.

The hosts context key references the list of hosts in the host model.

Note that there are two other internally-generated contexts associated with the component, Page Number and Current Time, which are optionally used in header and footer views. These appear in the Outputs section along with reportTitle.

Define a Page Orientation and Title for the Report

To define the report’s page orientation:

1

2

Select the Configuration tab.

Click the Edit icon ( ) from the Value column on the Page Orientation row.

The Edit - Page Orientation dialog opens.

3 Choose Landscape from the drop-down list and click Save.

To define the report’s title:

1

2

Select the Configuration tab.

Click the Edit icon ( ) from the Value column on the Title row and choose

Context Selection from the drop-down list.

Tutorial 5: Reports

Creating a Basic Report Page

101

3

The Edit - Title dialog opens.

Choose title in the Input Key drop-down list and click Save.

Since you have previously set this context to Utilization Report - Hosts, that is the title that will appear if you embed the report in a container and set its Show Title property to true.

4 Click the Edit icon ( ) from the Value column on the Page Orientation row and choose Portrait.

Adding a Sample Page to the Report

You will create pages for the report later on in this tutorial, but for now we just want to test basic report construction. There is an existing table in vFoglight that has the same context as you will need later on, so we will use it for now.

Next we’ll add this table to the report.

To add the table to the report:

1

2

Select the Views tab.

Click Add ( ) on the menu bar.

3

The Select a View to add to the Report dialog appears. Choose Hosts Table - for

Given Hosts under Hosts > Host and click Save.

Choose Body from the Function drop-down list.

4

The other possible choices are Header and Footer. You will add a header and a footer to your report later on in this tutorial.

Choose None from the New Page drop-down list.

The other possible choices are Before, After, or Both. The settings control the placement of page breaks. You can choose to have a page break before, after or both before and after this view. We have chosen None because this is a single page report. There are no other views.

5 The Report has been configured. Click Save ( ).

To see the Report, click the Test PDF button ( ) on the toolbar. A dialog appears that allows you to set a value for the time range. Choose a range during which you know some activity has occurred and then click the Results button. If you have

Acrobat Reader installed, you should see a page containing a table with entries similar to that shown in the figure. The number of rows depends on the number of hosts found by the Host Model T5 query. Set currentTime, pageNumber, and reportTitle with representative values.

102 vFoglight

Web Component Tutorial

The table doesn’t have a header or a footer and it contains only one view, but the exercise has shown you the basic steps for creating a report.

Creating a More Elaborate Hosts Table

A table such as the one you just used serves as a useful introductory item to a report that provides historical data about the hosts monitored by vFoglight. It can be refined to show numerical data supplemented by time plots. This time you will build it yourself.

To add a Row-Oriented Table component showing load summaries:

1 Choose Configure > Definitions and ensure that your tutorial module is selected.

Also ensure that the Views tab is selected for the Module List pane.

3

4

2 Click the Add ( ) button.

The New View dialog appears.

Expand the Tables and Trees node.

5

Ensure that Blank view is selected and choose Row-Oriented Table from the drop-down list, which contains all the available view components. Click OK.

Fill in the General tab as shown in the figure:

6 Enter “A sample table for inclusion in a report” in both the Comments and the

Context Help text fields.

Tutorial 5: Reports

Creating a More Elaborate Hosts Table

103

Configuring the Columns for the Row-Oriented Table

This component needs a host context as well, so you will define it first.

To set the context:

1 Select the Context tab.

2 Click the Add Context Input button ( ) in the Inputs group.

3

4

A new row appears.

Click on the new row to launch the Edit dialog.

Type hosts in the Key field.

Ensure that Usage is Required.

5

6

7

8

9

Set Data Source Type to Foglight.

In the drop-down, set Data Type to Host.

Set List to True.

In the dialog, click Save.

Now you need to define the columns for the Load Summary T5 table.

To define the table’s columns:

1 Select the Configuration tab.

3

4

2

We need to set each row. This time the rows will be populated from the hosts context.

To tell the table that its rows will be populated from a context selection, locate the row called Rows. Click the edit icon ( ) and choose Context Selection from the popup.

The Edit - Rows dialog appears.

Click the Input Key drop-down button and select hosts.

Click Save, leaving all the other fields untouched.

The table has been configured to get its information from the hosts context that is defined in Hosts Summary Report T5, but we still have to define which properties of a host will appear in the columns. For that, we will have to add columns and define their contents.

5 Expand Columns > Column.

104 vFoglight

Web Component Tutorial

6

All the table’s columns are set in this section. Later, they can be organized in groups.

Click the Edit ( ) icon on the column’s Value row and choose Context

Selection from the popup.

The Edit - Value dialog appears.

7

8

Select currentRow for the Input Key.

Choose name for the Path.

9 Click Save in the Edit - Value dialog.

10 Check Show Advanced Properties so that you can set the header for this

<currentRow>/name column.

11 Click the Edit ( ) icon on the column’s Header row and choose Rich Text

Template. Type Host Name in the Value field, then click Save.

Note that by using a Rich Text Template you can provide localized text for your headers.

12 Click the Edit ( ) icon on the column’s ID row, type Host Name in the String

value field, then click Save.

Note Each entry in the columns that you define must have an ID set so that they can be associated with a group.

Add 12 more columns in four groups

At this point you are going to add 12 more columns in four groups: CPU,

Memory, File System, and Network to complete the definition of the table.

To create the groups:

1 Expand the Groups node and click the Add Group ( ) button to start a new group.

3

4

2 Set the group header to CPU Utilization.

Add three more groups: Memory, File System and Network.

5

Set the group Header: Memory:

Set the group Header: File System:

6 Set the group Header: Network:

To create the columns:

1 Expand Columns and click the Add Column ( ) button.

Tutorial 5: Reports

Creating a More Elaborate Hosts Table

105

2 Click the Edit ( ) icon on the column’s Value row and choose Context

Selection from the popup.

3

4

Select currentRow for the Input Key and cpus/aggregateState for the Path, and then click Save.

Click the Edit ( ) icon on the column’s ID row and enter CPU Aggregate State for the String value.

5 Repeat the previous steps, but change the ID values and Path components to:

Note that the two following settings use renderers. Renderers are chosen from the

Renderer drop-down in the dialog.

• CPU Average Utilization cpus/utilization/current/average, Renderer: ‘Number: No Decimals, With

Unit’ from the module vFoglight > System

• Memory Aggregate State

memory/aggregateState

• Memory Average Utilization memory/utilization/current/average, Renderer: ‘Number: No Decimals,

With Unit’ from the module vFoglight > System.

• Disk Aggregate State

storage/aggregateState

• Disk Average Utilization storage/diskUtilization/current/average, Renderer: ‘Number: No

Decimals, With Unit’ from the module vFoglight > System

• Network Aggregate State

network/aggregateState

• Network Average Utilization network/utilization/current/average, Renderer: ‘Number: No Decimals,

With Unit’ from the module vFoglight > System

To add a column to its target group and set the table’s title:

1 Expand the Groups node, choose the Group to add the column to, and click the

Group’s Column Order node.

3

4

2 For each column, click the Edit ( ) icon on the Column ID row and enter the same value that you chose when you set the column’s ID. For the second column in a group, first click the Add Column ID button to create a new row.

Set the table’s title: “Utilization Summary - Hosts

Click Save in the view’s menu bar.

106 vFoglight

Web Component Tutorial

5

6

7

Add the table to the report as you did in Adding a Sample Page to the Report

.

In the report’s Views tab, select the table and click Properties in the tab’s toolbar.

Save the changes to Hosts Summary Report T5.

Generating the Table

Test the work you have done so far by generating a PDF of the table.

To generate the report:

1 Ensure that Load Summary Table T5 is available in the Definitions pane.

2

3

Click its tab in the Definitions pane, and then choose Test PDF (

Observe the result.

).

The table contains 9 columns. Having that many columns can present a challenge to the layout algorithm, and it is possible you have noticed some issues that need attention. In the

Additional Activities

section you’ll see how to adjust the width of a column to improve the table’s layout.

Adding a Header

You could attempt to design fixed-layout views to use as the header and footer on a single-page report, but in most cases all you require is a simple one-line header and footer. Multi-page reports would present you with even greater challenges.

The Page Decoration component removes most of the effort in creating headers and footers. It has right, center, and left areas where you can add icons and text. Page numbering is easy because the Report component passes a special context,

pageNumber, to views if you assign the function Header or Footer to them.

Creating the Header Component

To create the Header component:

1 Choose Configuration > Definitions to add, from the Reporting node, a Page

Decoration component.

2 Fill in the General tab as shown in the figure:

Tutorial 5: Reports

Adding a Header

107

3 Enter Header for Hosts Summary Report T5 in both the Comments and the

Context Help text fields.

To set the context:

1 Select the Context tab.

2 Click the Add Context Input button ( ) in the Inputs group.

A new row appears.

3

4

Click on the new row to launch the Edit dialog.

Type title in the Key field.

5

6

7

8

9

This is the context you set in the parent report.

Ensure that Usage is Required.

Set Data Source Type to Common.

In the drop-down, set Data Type to String.

Set List to False.

In the dialog, click Save.

To configure the header:

1 Select the Configuration tab.

Set the left portion of the header:

2 Click the Edit icon ( ) on the Left Image row.

108 vFoglight

Web Component Tutorial

3

4

The Edit - Left Image dialog appears.

Choose Icon Selection, vFoglight > Reporting > Company Logo.

In the dialog, click Save.

5

Set the center portion of the header:

Click the Edit icon ( ) on the Center row.

6

7

8

The Edit - Center dialog appears.

Choose Context Selection from the drop-down list.

In the Input Key drop-down list, choose title.

In the dialog, click Save.

Set the right portion of the header:

9 Click the Edit icon ( ) on the Right row.

10 Choose Context Selection from the drop-down list.

The Edit - Right dialog appears.

11 In the Input Key drop-down list, choose timeRange.

12 In the Renderer drop-down list, choose vFoglight > Reporting > Absolute Time

Range.

13 In the dialog, click Save.

14 Click Save on the bar containing the tabs to save Header: Icon, Report Title, Time

Range T5.

Adding the header to the report

To add the Header component to the report:

1 Choose Configuration > Definitions > My Definitions and ensure that Hosts

Summary Report T5 is selected in the Views tab for the Module Contents pane.

3

4

2 Click the Edit ( ) button.

The Definitions pane fills with the views editor.

Select the Views tab.

Click the Add ( ) icon on the Views menu bar.

5

The Select a View to add to the Report dialog appears.

Select User Views > Header: Icon, Report Title, Time Range T5.

Tutorial 5: Reports

Adding a Footer

109

6

7

Click Save in the dialog.

Select Header from the Function drop-down.

8

9

Select the header and click the Move Up ( component as the first view.

) button to place the

Click Save on the bar containing the tabs to save Hosts Summary Report T5.

Adding a Footer

You saw how to add items to all three places in the header, and the footer component is simpler. To demonstrate how to use the report’s pageNumber built-in context, you will place a page number at the bottom-center of the page.

To create the Footer component:

1

2

3

Follow the procedure for adding a header, making these changes:

Type Footer: Page Number T5 in the Name field.

Enter Footer for Hosts Summary Report T5 in both the Comments and the

Context Help text fields.

To set the context:

1 Select the Context tab.

2 Click the Add Context Input button ( ) in the Inputs group.

A new row appears.

3

4

Click on the new row to launch the Edit dialog.

Type pageNumber in the Key field.

5

6

This is the context you set in the parent report.

Ensure that Usage is Required.

Set Data Source Type to Common.

In the drop-down, set Data Type to Integer.

7

8

9

Leave List set to False.

In the dialog, click Save.

110 vFoglight

Web Component Tutorial

Setting the center portion of the footer

To add a page number to the footer:

1 Select the Configuration tab.

2 Click the Edit icon ( ) on the Center row.

3

4

The Edit - Center dialog appears.

Choose String template from the drop-down list.

In the Value drop-down list, type - {0} -.

The dialog now shows a line for Parameter {0}. By using a parameterized entry for the page number you can add text decorations around it.

8

9

6

7

5 Click the Edit ( ) button on the Parameter {0} line.

The Edit - Parameter {0} dialog appears.

Select pageNumber in the Input Key drop-down list.

In the Edit - Parameter {0} dialog, click Save.

In the Edit - Center dialog, click Save.

Click Save on the bar containing the tabs to save Footer: Page Number T5.

Add the footer to the report

To add the Footer component to the report:

1 Choose Configuration > Definitions and ensure that Hosts Summary Report T5 is selected in the Views tab for the Module Contents pane.

2 Click the Edit ( ) button.

The Definitions pane fills with the views editor.

3

4

Select the Views tab.

Click the Add ( ) icon on the Views menu bar.

5

6

7

The Select a View to add to the Report dialog appears.

Select Footer for Hosts Summary Report T5.

Click Save in the dialog.

Select Footer from the Function drop-down.

Tutorial 5: Reports

Adding an Iterator for a Multi-Page Report

111

8

9

Select the header and click the Move Up ( ) button to place the component as the second view, in between Header: Icon, Report Title, Time

Range T5 and Hosts Table - For Given Hosts.

Click Save on the bar containing the tabs to save Hosts Summary Report T5.

Test the report

Test the report by clicking the Test PDF ( ) button on Host Summary Report

T5’s menu bar. You should see a page with a header, a footer, and a table of host statistics. A resized sample is shown in the figure below.

Figure 3

Adding an Iterator for a Multi-Page Report

The Iterator component was built to address a need for creating similar views, such as a report containing detailed information for each host

To define an Iterator component:

1 Choose Configuration> Definitions and ensure that your tutorial module is selected. Also ensure that the Views tab is selected for the Module Contents pane.

3

4

2 Click the Add ( ) button.

The New View dialog appears.

Expand the Containers node.

5

Ensure that Blank view is selected and choose Iterator from the drop-down list, which contains all the available view components. Click OK.

Fill in the General tab using the information in the figure:

112 vFoglight

Web Component Tutorial

6 Enter Iterator for Hosts Summary Report T5 in both the Comments and the

Context Help text fields.

To set the context:

1

2

Select the Context tab.

Click the Add Context Input button ( ) in the Inputs group.

A new row appears.

6

7

4

5

3 Click on the new row to launch the Edit dialog.

Type hosts in the Key field.

Set Usage to Required.

Set Data Source Type to vFoglight.

8

In the drop-down, set Data Type to Host.

Set List to True.

9 In the dialog, click Save.

To set the objects for the iterator:

1

2

Select the Configuration tab.

Click the Edit icon on the Key row.

The Edit - Key dialog appears.

3

4

Type host in the String value text box.

Click Save in the Edit - Key dialog.

Tutorial 5: Reports

Adding an Iterator for a Multi-Page Report

113

6

7

5 Click the Edit icon on the Objects row and choose Context Selection from the drop-down list.

The Edit - Objects dialog appears.

Choose hosts in the Input Key drop-down list.

Click Save in the Edit - Objects dialog.

Choosing the Iterated View

You can choose or construct any view whose inputs are host objects, since that is a context that was set in Hosts Summary Report T5 itself. For this tutorial we will choose

[table] Memory hogs from the System module Hosts/Host. Any other view whose inputs are acceptable would do as well.

To set the iterated view:

1

2

Select the Iterated View node.

Choose Hosts > Host, [table] Memory hogs.

We are adding an already-existing view because it is quicker than building a special view for this tutorial. The objective here is to introduce the Iterator component.

3

4

Leave the other fields with their default values.

Click Save in the Iterator component’s menu bar.

Adding the Iterator to the report

To add the Iterator component to the report:

1 Choose Configuration > Definitions and ensure that Hosts Summary Report T5 is selected in the Views tab for the Module List pane.

3

4

2 Click the Edit ( ) button.

The Definitions pane fills with the views editor.

Select the Views tab.

Click the Add ( ) icon on the Views menu bar.

The Select a View to add to the Report dialog appears.

5

6

Select Host Iterator T5.

Click Save in the dialog.

114 vFoglight

Web Component Tutorial

7

No other changes are needed because the Body page is the default.

Click Save on the bar containing the tabs to save Hosts Summary Report T5.

Summary

In this tutorial you have been shown how to prepare a report with a header and a footer.

You saw how to use an Iterator component to generate multiple views based on a list, thus creating a multi-page report. You viewed the result by manually choosing the

“View as PDF” option, and you may be wondering about alternative methods for creating and viewing reports.

Additional Activities

In this section you’ll see how to adjust the width of a selected column and how to ensure that the report has a title. Also, you’ll place a report in another component, and in so doing you’ll see how the Report’s title property comes into play. You’ll also see what is probably the best method for generating reports automatically by using a schedule.

The final activity provides you with some information on changing the headers and footers in case you want to change them after the first page, or at the beginning of each section of a long report.

Adjusting the table

In most cases the report generator does the best job it can in sizing the various components so that they all fit nicely on the page. That having been said, the generator may have difficulty with some combination of fixed- and variable-width components.

To make the table a little wider we will add another column for average utilization of the

CPU and we will use a sparkline renderer to show the result.

To create a sparkline:

1 Choose Configuration > Definitions and ensure that the Renderers tab is selected in the Module List pane.

2 Click the Add ( ) icon on the Renderers menu bar.

The New Renderer dialog appears.

3

4

Select Sparkline from the drop-down list.

Type Sparkline for Report in the Name field.

Tutorial 5: Reports

Summary

5 Click Save on the bar containing the tabs to save Sparkline for Report.

To add a column containing a sparkline to the table:

1

2

Return to editing Load Summary Table T5.

Add a column. Set its context selection to: <currentRow>/cpus/

percentUserTime, using the Renderer: Sparkline for Report from your User module. Set its ID to CPU User Time.

3

4

Add the column to the CPU Utilization group.

Save your changes and test the result.

If you continue to add sparklines to the other groups, you may find that there are alignment problems with the table. In this case the problem seems to be that the

Sparkline renderer may request too much space, causing problems for some other columns. In most cases you can cure this type of layout issue by setting the width of some variable-width columns.

To set the element width of the Sparkline For Report:

1

2

3

4

Return to editing Load Summary Table T5. Click its Configuration tab.

Ensure that Show Advanced Properties is checked.

Select the column with ID CPU User Time.

Expand the Width node.

5 Click the Edit icon ( ) on the Sizing row.

The Edit - Sizing dialog appears.

6

7

Choose Specified in the Width Sizing field.

Click the Edit icon ( ) on the Value row.

8

The Edit - Value dialog appears.

Change Integer Value to 70.

9 Click Save on the bar containing the tabs to save Load Summary Table T5.

10 Retest by generating a new report.

In other situations you may have to set the element widths of other variable-width components, but making just these changes did produce a properly-formatted table when it was tested during the construction of this tutorial.

115

116 vFoglight

Web Component Tutorial

Where did the table’s title go?

If you followed exactly the procedures given previously, you may have noticed that even though you set the table’s title to Utilization Report - Hosts, it didn’t appear when you generated the PDF. The situation is quite similar to the point raised in Additional

Activities in Tutorial 2. Causing a title to appear is a two-step process, and defining the title’s content is only the first step. You also have to configure the parent component to show the title.

To cause the table’s title to appear:

1

2

3

Return to editing Hosts Summary Report T5 and choose the Views tab.

Select Load Summary Table T5 by clicking anywhere on its row.

Click the Properties button on the menu bar.

4

5

6

The Properties dialog appears.

Check Show Title and then click Save.

Click Save on Load Summary Table T5’s menu bar.

Regenerate the report. The title should be present.

View the Report in a Dashboard

Edit the Report component by checking its Pagelet check box and then add it to row 0 and column 0 of a Grid component purposed as a Dashboard.

As you are adding the Report, make sure that Show Page is enabled. View the report and note that the title you set in the Report’s Additional Context is displayed.

Schedule a Report in vFoglight

When the construction of the report is finished and it is giving you the result you want, you can schedule a report run whenever you want. Creating a report schedule is a twostep process.

First, create a schedule for performing an action that as yet has not been specified.

To create a schedule:

1

2

Switch to Administration > Schedules > Create Schedule and fill in the required data. See the Administration Guide if you need further information.

Note You can choose New Schedule in the Report Manager as an alternate way of creating a schedule for your reports.

Choose Reports > Report Manager under Dashboards.

Tutorial 5: Reports

Summary

117

3

The Report Manager page opens in the Definitions pane.

Click Schedule Report ( ).

4

5

The Create Scheduled Report dialog opens.

Type Host Report T5 in the Name text field.

In the Report Template row, click Please Select Report Template, expand the All

Report Templates node, and choose Host Summary Report T5 in the Template column.

The dialog (under Report Inputs) asks you to supply values for the context inputs that were defined in the report page itself. Set representative values for these context inputs.

6

7

In the Schedule drop-down, choose the name of the schedule you created or choose Frequent [Test].

Click Create in the Create Scheduled Report dialog.

Host Summary Report T5 is added to the Scheduled Reports table.

After a lapse of a few minutes, a line similar to the one shown in the figure appears in the Generated Reports pane:

8

9

Click on pdf to view the report.

If you chose Frequent [Test] as the schedule in the Scheduled Reports with Filter table, ensure that the check box for the report is selected, click on manage

scheduled reports and then choose Disable from the popup window to stop generating reports.

If the chosen schedule was Frequent [Test], reports will be generated every few minutes for testing purposes until you deactivate the schedule.

See the vFoglight User Guide for more information on using the Report Manager.

Sequential Headers and Footers

The report you created in this tutorial has a host summary page and then a number of pages, one for each host. In a case like this, or if for any other reason you want to have the first page of the report to have a different header than the rest of the pages, there is a solution.

118 vFoglight

Web Component Tutorial

A report can have multiple headers. The reason you placed the header and footer as the first and second component in the report’s View page was to have them registered by the report generator before any body views. Perhaps the table of hosts in your environment spans more than one page. If the footer was placed after the table component, it wouldn’t appear until after the table. In fact this is true even if the table contains only a few rows. The report generator would delay emitting the footer until the page after the

table was drawn. In the first part of this exercise, there is no page after the first, so the footer wouldn’t appear at all.

Therefore, to switch headers or footers, place the new header or footer component

before the view that should begin the new page. If necessary, emit a page break between the header and the new component. Using this technique, it is possible to have different headers and footers in all sections of a long report.

Normally, you would choose your first body view to fit on page one. But what if you want a new header on the second page and the first page must contain a table or other view that may be several pages long? The first header encountered controls the first page, but if the first body view may be several pages long the header or footer won’t change until the whole component is written out. The solution may be to place a thin, empty component after the first page’s header and footer, and then place the next header and footer before the multi-page component. The system will place the first header and footer on the first page, emit the empty component, set the header and footer for the next page, and begin emitting the multi-page component. This will cause the second and following pages to have the header and footer you want.

Try adding a header for the individual host pages. Place this header component just before the iterator in the report’s Views pane.

8

Tutorial 6: Creating a Form

The Web Component Framework contains many components that have a value property and there are situations in which some other component may be interested in being passed that value. This tutorial begins by investigating how to configure context settings so that the value of one component can be passed to one or more other components.

We’ll go one step further in this tutorial and pass the values to a Groovy task component.

This tutorial assumes that you have a working knowledge of vFoglight’s API and that you are familiar with Groovy. It makes no attempt to be a tutorial for the vFoglight API or for Groovy. This tutorial shows you how to create context entries that can be used as parameters in the scripts. The Groovy scripts and the task component called Execute

Groovy Script are used to invoke vFoglight methods and pass the context values as parameters to these methods.

A page that contains many input components can be made to behave like a form. The user fills in various input fields on the form, which in this example is a Grid container, but it is only by pressing the form’s Submit button that the context keys are updated and the values are transmitted to the server. The form that we’ll use in this tutorial is called

Add a host form (to distinguish it from the Add a host task). It has only two fields and a submit button, but it illustrates the general idea. The form could have any number of input fields.

This tutorial contains:

Objectives of Tutorial 6 ..............................................................................................................120

Configuring the Query ...............................................................................................................120

Overview ....................................................................................................................................121

Creating the Tasks and Forms ...................................................................................................123

Testing the Application ...............................................................................................................137

120 vFoglight

Web Component Tutorial

Objectives of Tutorial 6

This tutorial shows how context can be used to pass values among components and even to internal vFoglight data structures by implementing Groovy tasks. The tutorial outlines the way that you can create forms using the Web Component Framework. You will be shown how a single submit action can pass as many context values as you like.

The objectives of Tutorial 6 are:

• Pass input values to interested views. This task will require the creation of some context entries.

• Create a form showing a list of hosts. The form is actually a table with a menu of actions. Choosing one of the menu items causes actions to occur.

• Use a task component called Execute Groovy Script. It will be used to pass context values to internal vFoglight methods that can manipulate the host topology model. As a result, you will be able to create a new host model or delete an existing host model. You’ll see how to change an editable host property as well.

Configuring the Query

This tutorial requires a list of hosts, just as in Tutorial 1.

To build the All hosts query:

1

2

Ensure that the Queries tab in the Module Contents pane is selected.

Click the Add button in the Module Contents pane.

3

The New Query dialog appears.

Ensure that Blank Query is chosen, select vFoglight for the Data Source Type, and click OK.

4

The Definitions pane changes to an Edit pane. It fills with the query editor, which contains all the fields that can be used to construct a query. You must fill in the fields that are marked by an exclamation point icon on the right side of the field.

Type All Hosts in the Name field.

Now that the query has been named, it can be referenced by that name when you want to use it.

Tutorial 6: Creating a Form

Overview

121

5 Leave Public and Root Query unchecked, Comments and Context Help empty, and Relevant and Allowed Role(s) untouched.

6

7

8

Ensure that the Data Source ID field’s value is <default>.

Select the Object Type by clicking the drop-down arrow at the right of this field.

Choose Host from the drop-down list.

Note This list box responds to keystrokes, so you can type H and be taken close to the desired entry.

Set the Root Path. Most objects are grouped at some level down from the root. In this example, the object we want is in HostModel/hosts, so choose it from the drop-down list in the with Path field.

9 Click Save to save the query.

Overview

Components in the Application

The application consists of the components that are listed below.

View Components

• Host List—A row-oriented table of hosts. Its rows contain user-assigned host names, the long names of the hosts, and the value in the annotation property. An action menu at the top of the table lets you add or remove a selected host, or change the text in its annotation property. You will add Action tabs to the table for the Add, Delete, and Edit Annotation tasks.

• Add a host form—A grid with three nested views that allow you to:

• Type in the name you are going to assign to the new host

• A drop-down list of operating system names

• A button for submitting the host name and operating system to the topology model so that a new host node can be created

• Add Annotation Input—A text field for editing the value of a host’s annotation property.

122 vFoglight

Web Component Tutorial

Task Components

There are three tasks, one each for adding a host, removing a host, and editing a host’s annotation property.

• Add a host—A groovy script that passes two context values, one for host name and one for operating system name, to the underlying topology service to create a new node. It requires two context entries, hostName and operatingSystem.

• Remove Host—A groovy script that takes the selected value from the table of hosts and passes it to the delete method of the topology service. It requires a context entry for the currently-selected row called hostSelected.

• Add annotation—A groovy script that takes the context value for the annotation text and replaces the selected host’s annotation field. It requires two context entries, hostId, which is the unique Id for the currently-selected host, and

newAnnotation, which is the Value derived from the contents of the text field used to collect the annotation string.

Order of Construction

The views listed in “ View Components ” on page 121 have been chosen to facilitate the

creation of a new host node, which requires manipulating the underlying topology model. One of the ways of accomplishing this kind of low level work is to construct

Groovy scripts that can access the objects that can access the model. You have to create the scripts first so that you can attach them to the component’s flow action.

You are going to establish a flow from the table of hosts to a Grid component called Add a host form, so you need to construct the grid before you construct the table.

Notes on the Context Flow

The next few paragraphs contain comments on how context is used to supply information to the Topology Service that manages vFoglight’s host model. Please keep these remarks in mind as you construct the tasks and views in this tutorial.

Add host

Choosing Add in the table’s menu causes the Add a host form Grid to pop up. Typing a name for the new host and choosing its operating system from the drop-down list, sets two context keys, hostName and operatingSystem. These are passed to the Add a host task, which creates a new host entry in the data model.

Tutorial 6: Creating a Form

Creating the Tasks and Forms

123

Delete host

Before choosing Delete in the All Hosts table, ensure that the selected row is one of the dummy hosts that you have added using the Add button. You don’t want to delete one of your actual hosts.

The Host List table has a Row Selection flow whose action is Update. Once a row has been selected, it is highlighted in the UI and this context entry is updated.

Then, when the remove host task is invoked, a new context key called hostSelected. The

Groovy script uses hostSelected to decide which host node to delete.

Thus, to remove a host, two different context entries cooperate to accomplish the task.

The Row Selection Update flow sets hostSelected and hostId. The latter is set to

<hostSelected>/uniqueId as an additional context in the Row Selection dialog.

Add annotation

Choosing Edit Annotation in the table’s menu sets two context keys, hostId and

newAnnotation, both of which are pathed from hostSelected. The context key hostId contains the uniqueID for the selected host and newAnnotation contains the first entry in the selected host’s property list of annotations.

These context keys are passed to the Add Annotation popup dialog. The user pops up the dialog, selects a new row, and then types some text into the popup’s text field and the Update action calls the Add annotation task. The context key newAnnotation now contains the text that the user typed into the text field.

Creating the Tasks and Forms

This section presents the information needed to create and configure all the views and tasks required for this tutorial.

Create the groovy Tasks

In this tutorial, module definitions are presented, rather than giving step by step instructions of previous chapters. These would be needlessly repetitive. Use these definitions as a guide to constructing the components. After you have constructed the views you can compare your listings to the ones given here to check for agreement.

By this time, you should be quite familiar with the Definitions panes, and in particular the module contents pane with its tabs for Views, Queries, and Tasks. Select the Tasks

124 vFoglight

Web Component Tutorial tab and click the Add button. Choose Execute Groovy Script in the drop-down list.

This will be your choice for all three task components.

Use the listings given here to create and configure the tasks. You’ll note that we have suggested that you work as a special user and that you place your views in a system module called TaskTutorial, which has the advantage of keeping the views separate from everything else.

Add a Host

The mechanism for accessing context values is the construct called @contextIn. For example, the code fragment def hostName = @contextIn["hostName"]; assigns the context value associated with the context hostName to the Groovy variable of the same name. The reverse is also possible using contextOut.

Module tasktutorial

Note Names in the Web Component Framework are case insensitive, so TaskTutorial is converted to tasktutorial .

Name Add a host

Tutorial 6: Creating a Form

Creating the Tasks and Forms

Component

Last Modified Time

Execute Groovy Script

Public

Deprecated

Comments

Context Help

Context Inputs

No

No

Key Usage Data Source Type Data Type Default

Value hostName Required Common operatingSystem Required Common

String

String

Configuration

Groovy Script def hostName = @contextIn["hostName"]; def operatingSystem =

@contextIn["operatingSystem"]; println hostName; println operatingSystem; topSrv = server.get("TopologyService"); hostIns = topSrv.getObjectShell(topSrv.getType(operatingSystem+"_Host")); hostIns.set("name", hostName); objects = topSrv.mergeData(hostIns);

125

Flow

Action Base exit

Flow type Update

Action An Error Occurred

Flow type Update

Remove Host

Module

Name

Component

Last Modified Time

Public tasktutorial

Remove Host

Execute Groovy Script

No

126 vFoglight

Web Component Tutorial

Deprecated

Comments

Context Help

Context Inputs

Key

No hostSelected

Usage Data Source Type

Required Foglight

Data Type

Host

Default

Value

Configuration

Groovy Script def hostToDelete = @contextIn["hostSelected"];topSrv = server.get("TopologyService");tempO = topSrv.getObject(hostToDelete.getUniqueId()); topSrv.deleteObject(tempO);

Flow

Action Base exit

Flow type Update

Action An Error Occurred

Flow type Update

Add Annotation

Module

Name

Component

Last Modified Time tasktutorial

Add Annotation

Execute Groovy Script

Public

Deprecated

Comments

Context Help

No

No

Tutorial 6: Creating a Form

Creating the Tasks and Forms

127

Context Inputs

Key Usage newAnnotation Optional hostId Optional

Data Source Type

Common

Common

Data Type

String

String

Default

Value

Configuration

Groovy Script def hostId = @contextIn["hostId"]; def newAnnotation =

@contextIn["newAnnotation"]; topSrv = server.get("TopologyService"); tempO = topSrv.getObject(hostId); tempO = topSrv.beginUpdate(tempO); hostAnnotations

= tempO.get("annotations"); hostAnnotations.clear(); hostAnnotations.add(newAnnotation); tempO= topSrv.endUpdate(tempO);

Flow

Action Base exit

Flow type Previous

Update True

• Additional Context

Key Value newAnnotation Context Selection <newAnnotation> returning

“Localized Value”

Action An Error Occurred

Flow type Update

The Groovy Scripts

The scripts are repeated here in a more readable format. You can use them to paste into the script configuration field of the Execute Groovy Script task component. These scripts call vFoglight and Java methods to do the work. A handy way to access the API for vFoglight is through the browser interface. Under Dashboards in the navigation panel, choose Administration > Tooling > Script Editor. In the Query and Scripting

Service Tool, click the icon for Script Help ( ), which is at the top right of the Script box. Alternatively, you can type help(server) and click the Run button below the Script box. In the Result area, click Topology Service to see the vFoglight methods used in this tutorial.

128 vFoglight

Web Component Tutorial

Add a host def hostName = @contextIn["hostName"]; def operatingSystem = @contextIn["operatingSystem"]; println hostName; println operatingSystem; topSrv = server.get("TopologyService"); hostIns = topSrv.getObjectShell(topSrv.getType(operatingSystem+"_Host")); hostIns.set("name", hostName); objects = topSrv.mergeData(hostIns);

Remove Host def hostToDelete = @contextIn["hostToDelete"]; topSrv = server.get("TopologyService"); tempO = topSrv.getObject(hostToDelete.getUniqueId()); topSrv.deleteObject(tempO);

Add Annotation def hostId = @contextIn["hostId"]; def newAnnotation = @contextIn["newAnnotation"]; topSrv = server.get("TopologyService"); tempO = topSrv.getObject(hostId); tempO = topSrv.beginUpdate(tempO); hostAnnotations = tempO.get("annotations"); hostAnnotations.clear(); hostAnnotations.add(newAnnotation); tempO= topSrv.endUpdate(tempO);

Configure the Views

Now that the task components are available, you can create the views that will invoke them.

Configuring Add a Host Form

The Add a host form contains three nested views for collecting the information needed when adding a new host.

Module

Name

Component tasktutorial

Add a host form

Grid

Tutorial 6: Creating a Form

Creating the Tasks and Forms

129

Public

Deprecated

Preferred Size

No

No

Purpose(s)

Priority

Relevant Role(s)

Allowed Role(s)

Refresh Interval

Comments

Context Help

Context Inputs

Width 0px

Height 0px

Page, Pagelet

None

(none)

(none)

Key timeRange hostName

Usage

Optional

Optional

Data Source Type

Common

Common operatingSystem Optional Common

Data Type

Time Range

String

String

Default Value

Configuration

Note Choose a String or String Template runtime value to add a title.

Title Add a Host

Flow

Action Submit

Flow Type Invoke Task

Task Add a host

• Additional Context

Key hostName

Description

Context Selection <hostName> returning

"Localized Value" operatingSystem Context Selection <operatingSystem> returning

"Localized Value"

130 vFoglight

Web Component Tutorial

Views

Name (Nested View) (nested)

Component Text Field

Size Automatic x Automatic

Scrollbars Never

Name (Nested View) (nested)

Component Drop-Down List

Size Automatic x Automatic

Scrollbars Never

Configuration

• Row 1

Name (Nested View) (nested)

Component Button

Size Automatic x Automatic

Configuration

• Row 2

Text Field nested view

Module

Component

Name

Preferred Width tasktutorial

Text Field

(Nested View)

20px

Preferred Height 20px

Context Inputs

Key hostName

Usage

Optional

Data Source Type Data Type Default Value

Common String

Tutorial 6: Creating a Form

Creating the Tasks and Forms

131

• Global Context Mappings

Key hostName

Description

Value

Note The hostName context key is set in the flow Context Mappings for this component.

Configuration

Input Field Width 30

Flow

Action Update

Flow Type Update

Drop-Down List nested view

Module

Component

Name

Preferred Width tasktutorial

Drop-Down List

(Nested View)

200px

Preferred Height 200px

Context Inputs

Key Usage operatingSystem Optional

Data Source Type

Common

Data Type

String

Default Value

132 vFoglight

Web Component Tutorial

• Global Context Mappings

Key Description operatingSystem Selected Item

Configuration

Label Operating Systems

• Items List

• {0} String (Windows)

• {1} String (Linux)

• {2} String (HPUX)

• {3} String (Sun)

• {4} String (AIX)

Flow

Action Selection

Flow Type Update

Button nested view

Module

Component

Name

Preferred Width tasktutorial

Button

(Nested View)

200px

Preferred Height 20px

Configuration

Label Add

Configure Host List

Host List is a row-oriented table. It has an action menu for performing the required tasks of adding and removing hosts, and for editing a host’s annotation property.

Module

Component tasktutorial

Row-Oriented Table

Tutorial 6: Creating a Form

Creating the Tasks and Forms

133

Name

Public

Deprecated

Preferred Width

Host List

No

No

300px

Preferred Height 300px

Refresh Interval - second(s)

Priority

Purpose(s)

None

Dashboard, Page, Pagelet

Custom Purpose(s) -

Relevant Role(s) (From module: Advanced Operator, Operator)

Allowed Role(s)

Comments

(none)

Context Help

Context Inputs

Key timeRange hostName

Usage Data Source Type Data Type

Optional Common

Optional Common

Time Range

String newAnnotation hostId

Optional

Optional

Common

Common operatingSystem Optional Common hostSelected

* Optional Foglight

String

String

String

Host

Default Value

* This context mapping for Selected Row is added in the Row Selection flow editor.

Configuration

Rows Query Selection ('All hosts' from the System module WCFTutorial)

• Columns

• Column

• ‰ Value Context Selection <currentRow>/name returning "Localized Value"

• ‰ ID wcf_column_0 (Note: this line is automatically generated. You do not type this.)

• Column

• ‰ Value Context Selection <currentRow>/longName returning "Localized

Value"

134 vFoglight

Web Component Tutorial

• ‰ ID wcf_column_1 (Note: this line is automatically generated. You do not type this.)

• Column

• ‰ Value Context Selection <currentRow>/annotations returning "Localized

Value"

• ‰ ID wcf_column_2 (Note: this line is automatically generated. You do not type this.)

• Action Groups

Note Click the Add Action Group button to create an Action Group node.l

• Action Group

• Actions

Note Click the Add Action button to create an Actions node.l

• Action

‰ Icon Icon Selection (Toolbar - Add) — Located in the vFoglight > System group

‰ Label Add

‰ Reaction Popup Add a host form

Note In the Edit dialog, set Type to Dialog . This allows you to add multiple hosts without the need to reopen the popup.

‰ Action

‰ Icon Icon Selection (Toolbar - Remove)

‰ Label Delete

‰ Reaction Invoke task remove host

‰ Action

‰ Icon Icon Selection (Toolbar - Filter)

‰ Label Edit Annotation

‰ Reaction Popup Add Annotation Input

Title All Hosts

Flow

ActionRow Selection

Tutorial 6: Creating a Form

Creating the Tasks and Forms

• Context Mappings

Key hostSelected

Flow Type Update

• Context Mappings

Key hostId

Description

Selected Row

Value

Context Selection <hostSelected>/uniqueId returning "Localized Value

135

Configuring Add Annotation Input

Module

Component

Name

Public tasktutorial

Text Field

Add Annotation Input

No

Deprecated

Preferred Width

No

200px

Preferred Height 20px

136 vFoglight

Web Component Tutorial

Refresh Interval

Priority

- second(s)

None

Purpose(s) Page, Pagelet

Custom Purpose(s) -

Relevant Role(s)

Allowed Role(s)

Comments

Context Help

Context Inputs

(From module: Advanced Operator, Operator)

(none)

Key hostId newAnnotation

Usage

Optional

Optional

Data Source Type

Common

Common

Data Type

String

String

Default Value

• Global Context Mappings

Key Description newAnnotation Value

Configuration

Input Field Width 30

• Page Options

• Actions

• Action

Text update

Flow Type Update

Flow

Action Update

Flow Type Invoke Task

Task Add Annotation

Tutorial 6: Creating a Form

Testing the Application

137

Testing the Application

If you have built the application by creating a new system module called TaskTutorial, you should see Host List under Dashboards > TaskTutorial.

Figure 4

Summary

This tutorial has introduced you to the simplest way of setting a submit action on a container. More complex actions are possible. The following note on the Form component provides an outline of the possibilities that are available using the new Form component.

Additional Activities

Add a confirmation dialog that pops up to ask, “Are you sure?” before deleting a host.

138 vFoglight

Web Component Tutorial

The Form Component

In previous releases of vFoglight, component-specific actions were disabled when a submit action was set on a container. Now, if you set a flow on a component in a form it will be triggered independently. This ability, combined with the new smart update functionality, removes any HTML-induced restrictions on how a particular page and its submissions need to be structured.

The proper way to take advantage of this feature is to not use the existing submit action on the form, but to use the new Form component. Additionally the new Wizard component also supports this duel mode of update.

The Form component allows you to specify multiple actions and draws them in a standard way. If the form is a popup, it will automatically render a cancel button that provides the same functionality as clicking on the close icon (x) in the title bar—it pops down the window.

The input elements of the form are then added to whatever layout you wish, and added to the Form itself.

Index

A

about vFoglight aggregateState alarm

8

51

adding an alarm icon

message severity

All Hosts

67

67

120

50

C

chart configuration

71

component

Add a Host Form

Chart

128

Add Annotation Input

Button nested view

135

132

71

Customizer

Drop-Down

81

78

Drop-Down List nested view

Fixed Layout

44

Grid 53, 75

Host List

132

Iterator

111

Key-Value Listing

68

Label

73

Row-Oriented Table

40, 102

Text Field nested view

130

131

context additional

88, 99

host

hostId

54

127, 136

hostmodel hostName

99

125, 129, 130, 131

hosts 100

hosts in Row-Oriented Table pageNumber (in footer) timeRange (in header)

103

hostSelected hostToDelete

133, 135

126

newAnnotation operatingSystem

127, 136

125, 129, 132, 133

109

108

title

99

title (in header)

107

Customizer 81

D

dashboard

44

fixed layout grid

86

documentation cartridge core

9

10

44

feedback

suite 9

10

Drop-Down

78

140 vFoglight

Web Component Tutorial

F

flow on a label

on a table

75

55

footer add to report

110

create component footers sequential

117

109

G

generate report

106

grid adding views choosing views

89

86

using a customizer groovy

123

script listings 127

86

H

header add to report

108

adding to a report headers sequential

Host Monitor

117

56

106

I

Iterator adding to a report adding to report

111

111

iterator

111

L

Label

73

O

OS

Common

56

P

page orientation

100

Q

query alarms

61

configuring

for report

37

97, 120

getHosts

HostModel

38

97, 120

R

report adding a page to

101

adjusting table widths in

footer

109

generate

106 header

iterator

106

111

page orientation

test 111

100

Row-Oriented Table in a report

102

114

T

table adding to a dashboard defining columns

45

41, 65, 70, 103

row-oriented

40

showing its title

116

task

Add a host

124

Add Annotation

Remove Host

126

125

text conventions

11

Index 141

advertisement

Related manuals

advertisement

Table of contents