Diagram Design

The Unified Assurance Diagram Engine provides all of the diagram editing and display capabilities within the software. The Diagram Engine is also multi-tenant ready, allowing unique, real-time views of data in whatever manner is useful. The Diagram Engine provides the following features:

Diagrams can draw in a wide range of performance metrics, event data, SLM data, and topology data from underlying systems, and are configurable to serve the needs of a wide-ranging set of users from CIOs and CTOs to NOC managers, NOC operators, customers, etc.

When designing diagrams, there are several things to keep in mind to ensure a faster creation and implementation time. To maintain usability, diagrams should not be overloaded with too many extraneous colors or widgets, but should still be useful and can be spiced up to show any information that is useful or needed.

The next thing to keep in mind is the audience that will be viewing the diagram. For example, Executives are usually looking for a high level Is this working? type of diagrams, which would include availability of the top-end services they are offering and number of open versus closed tickets. On the other hand, a NOC operator can be looking for the number of tickets by severity, as well as open versus close tickets by severity, and an event list showing major alarms with associated tickets can be useful, as well as key metric attributes that are important. This can include the server performance that is delivering the service that the executive is viewing.

Diagram Types

The next thing to consider are the different diagram types that are available, and how they can be used in an environment. The two diagram types are:

Widgets

Knowing the available widgets and their capabilities is also very important. Diagrams are comprised of the following three widget types:

Basic Widgets

Basic widgets will not change, while event and metric widgets can be configured to show specific information. There are also four basic shapes that are similar across the three types: ellipses, lines, rectangles and text. Each type also has other widgets for displaying different kinds of information, which is explained in further detail below. Each widget can be configured so a custom action is performed when clicked on, such as linking to another diagram, opening a custom URL, or do nothing.

The basic widgets are used when basic rectangles, ellipses, lines and text are needed in a diagram. As basic widgets do not change when the diagram auto-refreshes, ellipse, line and rectangle widgets can be used for grouping several widgets together, or as a means to show separation between other widgets. Text widgets can be used as diagram titles, widget labels, or for other purposes. A URL widget is also available which allows a webpage to be displayed within a diagram, as well as an image widget which allows an image to be displayed in a diagram.

Event Widgets

Event widgets are used when event information is needed in a diagram. The information to be used can be from the results of a pre-configured event filter, all of the events regarding a specific device, all of the events regarding a group of devices that are using a common meta tag, or a temporary event list (also called a "Transient Event List") that is generated when the diagram is viewed or refreshed. In addition to the base four widget shapes, there are also gauge, histogram and pie event widgets. Event widgets also have the option to open the event list when clicked on.

Ellipse, line and rectangle widgets can change their color based on the highest severity level of any events that are returned. Text widgets can automatically update pieces of information that is displayed to the user. Gauge widgets take the selected event information and display a gauge with an indicator pointing to the highest severity level, along with the count and sum of count values of the information selected. Histogram widgets take the selected event information and display the event count by severity in a bar graph, as well as the overall event count. Pie widgets take the selected event information and display the overall event count in a pie graph.

Metric Widgets

Metric widgets are used when any kind of metric information is needed in a diagram. In addition to the base four widget shapes, there are also gauge, graph, and pie metric widgets.

The ellipse, line and rectangle widgets can be configured to change color if a metric threshold is breached, and text widgets can automatically update certain information that is being displayed. A gauge widget is best used to show the utilization of a metric, while a graph widget can be used to show how a metric value has changed over the specified period of time. A pie widget is used to represent a metric as a pie graph.

Examples

Users may want custom views to see data in a certain way. Unified Assurance has the flexibility to define any view within the Diagram engine. Diagrams can display any set of data from events and metrics in a single pane. This document will talk you through how to generate a view with different sets of items for display, otherwise known as widgets.

Building a Basic Diagram

Objectives

Steps

  1. Open the Diagrams UI.

    Configuration -> Diagrams -> Diagrams

    Note:

    The grid can be collapsed using the side-facing arrow to get additional canvas space. This is especially useful on smaller displays.

  2. Click the "Add" button.

  3. The following values can be used as an example, but the specific settings used can be anything you would like. Some fields are required and validations will warn you if you missed something when submitting.

    • Name - My Custom Diagram

    • Width - 800 (# pixels)

    • Height - 600 (# pixels)

    • Background Color - #FFFFFF (can use the color chart in the drop down)

    • Category - Basic (this is the one you will use for 99% of diagrams)

    • Initial Diagram Group - Root

  4. The next step is to add widgets for viewing. Click "Add" in the menu bar. After clicking add, a menu appears on the right-hand side. This is where any Diagram Widget can be clicked-and-dragged over to the Diagram canvas.

    Note:

    You can minimize/collapse the "Properties" section by clicking on the name.

    Click on a widget and drag-and-drop onto the Diagram canvas. Once dropped, the panel on the right will change to the configuration panel for the widget. Depending on the type of widget selected (basic, events or metrics), this will change the available options.

    The form is split into the following sections:

    • Position

      • The Position section is used to alter the position of the widget (X, Y), the size of the widget (width, height), and allows you to rotate the widget.

    • Display

      • The Display section is used to alter the stroke width (thickness of the border line) as well as the color theme of the widget (solid color or gradient).

    • Filter

      • Filter Type - Determines which events are included. Each filter type has it's own associated fields.

        • Event Filter - Currently defined filter, sortable by Filter Group.

          • Filter Group - Subset of event filters.

          • Filter Name - Actual filter to use within the selected Filter Group.

        • Device - Show events by a single Device.

          • Device Name - Only show events for the selected device.

        • Meta Tag - Devices can have associated data, show events by this associated data, such as Location, Department, etc.

          • Meta Type - Subset of meta tags.

          • Meta Tag - All of the tags within the selected Meta Type.

        • Transient Event List - Custom SQL query "WHERE" clause.

          • Where - Actual SQL clause used to filter events.

      • Display - What event fields are displayed in the event list grid.

    • Action

      • Link Type - This is the action that occurs when the widget is clicked. Possible items include:

        • Manual - Custom URL path, either internal to Unified Assurance (UI page) or external.

        • Event List - Load the event list based on the defined "Filter" section.

        • Diagram - Load another diagram.

      • Link Target - The action to take when you click the widget.

        • Same Tab - Replace the diagram with the Action's results.

        • New Tab - Open the Action in a new tab within Unified Assurance.

        • New Window - Open the Action in a floating window within Unified Assurance.

      • Context Menu - The diagram menu, if any, to show when the context menu is activated.

        • None - Do not apply a context menu to the widget.

        • Global - Show the Global diagram context menu.

        • There may be other options available, depending on your configuration.

  5. Add an "Event -> Ellipse" widget and change the following options. Review the additional configuration options that are available for the widget.

    • Filter Type - Event Filter

    • Filter Name - Syslogs

    • Display - Default

  6. Add an "Event -> Gauge" widget and change the following options. Review the additional configuration options that are available for the widget.

    • Name - All Events

    • Filter Type - Event Filter

    • Filter Name - All Events

    • Displays - Default

  7. Add a "Metric -> Rectangle" widget and change the following options. Review the additional configuration options that are available for the widget.

    • Device - (Select any device available in the list.)

    • Metric Type - (Select any available metric type for the selected device.)

    • Metric Instance - (Select any available instance for the selected type.)

    • Time Range - Last 1 hour

    • Threshold Type - Performance Utilization

    • Warning Threshold - None

    • Critical Threshold - None

  8. Add a "Metric -> Graph" widget and change the following options. Review the additional configuration options that are available for the widget.

    • Increase the size of the widget so it will visibly show the data.

    • Ensure the Show Graph Title, Show Key, Show Y Title, and Show Background options are checked.

    • Device - (Select any device available in the list.)

    • Metric Type - (Select any available metric type for the selected device.)

    • Metric Instance - (Select any available instance for the selected type.)

    • Time Range - Last 1 hour

  9. Additional widgets can be added and resized as necessary.

  10. Review and try out the additional widget layout options that are available when creating Diagrams. This includes the various controls below:

    • History - here you can undo/redo changes made to the Diagram in the current editing session.

    • Canvas - Clone brings up the edit menu for the cloned item, Quick Clone does not.

    • Rotate - you can rotate or flip the widgets to meet your needs.

    • Layer - similar to Visio for example, you can layer widgets so they are shown in a specific order.

    • Align - select 2 or more widgets at once using CTRL + Click functionality or click-and-drag in the canvas to select multiple widgets, then this will allow you to align widgets together without having to manually select the right x,y coordinates.

    • Center - select 2 or more widgets at once using CTRL + Click functionality or click-and-drag in the canvas to select multiple widgets, then this will allow you to space widgets apart without having to manually select the right x,y coordinates.

  11. Submit the diagram and save it.

  12. Open the Diagram Groups UI.

    Configuration -> Diagrams -> Diagram Groups

  13. Select the "Root" group, then click on the "Add" button.

  14. The following values can be used as an example, but the specific settings used can be anything you would like. Some fields are required and validations will warn you if you missed something when submitting.

    • Name - Admin Diagrams

    • Diagrams - (Move the "My Custom Diagram" to the "Selected" option.)

    • Click on the "Submit" button.

  15. Open the "Diagrams" navigational page.

  16. Expand the "Admin Diagrams" group.

  17. Click on the "My Custom Diagram".

Diagrams are fully multi-tenant, therefore, putting Diagrams in groups will allow different sets of users to see the data. If there is data on a diagram the user is not allowed to see, it will not show up or will throw a simple error when trying to view the underlying data for that specific device.

Building a Dynamic Device Diagram

Objectives

Steps

  1. Open the Diagrams UI.

    Configuration -> Diagrams -> Diagrams

    Note:

    The grid can be collapsed using the side-facing arrow to get additional canvas space. This is especially useful on smaller displays.

  2. Click the "Add" button

  3. The following values can be used as an example, but the specific settings used can be anything you would like. Some fields are required and validations will warn you if you missed something when submitting.

    • Name - My Dynamic Diagram

    • Width - 800 (# pixels)

    • Height - 600 (# pixels)

    • Background Color - #FFFFFF (can use the color chart in the drop down)

    • Category - Dynamic Device

  4. Add a "Metric -> Graph" widget and change the following options. Review the additional configuration options that are available for the widget.

    • Increase the size of the widget so it will visibly show the data.

    • Ensure the Show Graph Title, Show Key, Show Y Title, and Show Background options are checked.

    • Device - (Select any device available in the list.)

    • Metric Type - (Select any available metric type for the selected device.)

    • Metric Instance - (Select any available instance for the selected type.)

    • Time Range - Last 1 hour

  5. Additional widgets can be added and resized as necessary.

  6. Submit the diagram and save it.

  7. Click the "Add" button to create another diagram.

  8. The following values can be used as an example, but the specific settings used can be anything you would like. Some fields are required and validations will warn you if you missed something when submitting.

    • Name - My Source Diagram

    • Width - 800 (# pixels)

    • Height - 600 (# pixels)

    • Background Color - #FFFFFF (can use the color chart in the drop down)

    • Category - Basic

  9. Add a "Basic -> Text" widget and change the following options. Review the additional configuration options that are available for the widget.

    • Link Type - Diagram (Dynamic Device)

    • Link Target - Same Tab

    • Diagram - My Dynamic Diagram

    • Device - (Select any device that is being polled for the same metric type that is available in the list.)

    • Text - (For this example, enter the name of the device that was selected in the previous combo box.)

  10. Submit the diagram and save it.

  11. Open the "Diagrams" navigational page.

  12. Click on the "My Source Diagram".

  13. Click on the widget to open the dynamic diagram.