A Novel Template-based Architecture for the

Heterogeneous ICT Infrastructure Monitoring

System with Customizable Widgets

*Chia-Hao Yu, An-Jung Cheng, Hsiu-Kuei Chiang, I-Han Liu

Chunghwa Telecom Labs

{fredyu, ajcheng, hkchiang, michelleliu}@cht.com.tw

Introduction

• Dashboard plays an important role in monitoring

heterogeneous ICT infrastructure

• Different users expect for different widgets in a dashboard

• Widgets should be customizable which means support

diverse data sources and visualize ways

• In order to produce customized widgets with scalable,

efficient and intuitive, we proposed the novel architecture in

our ICT infrastructure monitoring system “EyeSee”

2

Related Work

➢ Unified management console

➢ Customized reports, views, and

dashboards

➢ No support for IDC & VPN network

VMware vRealize Operations

➢ Agentless monitoring software

➢ Non-intuitive user interface

➢ Need to be enhanced by other HP

products

HP SiteScope

3

VPN, SD-WAN, Broadband Network

Optical Transport Network

WANApplication

software

…

Customer Operation team

Monitor &Trouble shooting

Self service

Customer care / SLA management

Proactive & Predictive Management

ICT Services Dashboard

ICT Services Topology

LAN + Hardware

IDC Co-lo Cloud

CHT Public Cloud,Enterprise Private Cloud

CHT ICT Services(Managed CPEs)

IDC Racks Power / Temperature

Cloud Resource Utilization

Event Panel

VPN Circuit Quality

H/W Health

ICT Services Report VPN Circuit Availability & Traffic Report

Cloud+IDC+CTTopology

One-Stop Management Platform For Heterogeneous ICT Infrastructure

An overview of CHT ICT Infrastructure

monitoring system - EyeSee

Topology

Inventory Mgmt.

Operation team

Event and AlarmMgmt.

Resource & Application

Mgmt.

Quality Analysis

DashboardAuthentica

tion（SSO/LDAP）

CM FM PM

Web

AM

Customer

Virtualization(Hypervisor)

Server Storage Network

Application (Web/AP/DB)Data Center A

Data Center C

Data Center B

User Portal Operation Portal

5

An overview of CHT ICT Infrastructure

monitoring system - EyeSee (cont.)

Constructing EyeSee UI with

Customizable Widgets

Quality Ｍetrics

A Real Case of the Widget

1. How to bind data from metrics to widgets ?

2. How to provide the customer with customizable

widgets on demand ?

Customer6

Monitored

Raw Data

ICT Services Dashboard

The Template-based Architecture

Template

Generation

Operation

PortalWidget

Creation

Data

Mapping

Configuration

Injection

Widget

Selection

Widget Template

Management

Widget

Management

Data Binder

Topology GridTree List

Pie/DonutDigit

Metrics

Frame

CHT R&D Team CHT Operation Team Customer

WAN

On-premises

Infrastructure

(ICT, Private

Cloud,

Application)

Public

Cloud

CM

IDC

Customizable

Widget

Data source & Model

User

Portal

7

Monitored Raw Data

Development of Generic UI

Component

Library/Repository

• A Widget Template can contain UI components

of various chart types

• A Widget Template basically consists of the UI

compoments of the same chart type

R&D Team

Basic UI

Components

UI Component

Repository

Compose

Widget Template

Template

Generation

Operation Portal

Widget

Creation

Data

Mapping

Configuration

Injection

Widget Template Management

WidgetManagement

Data Binder

Data source & Model

User Portal Customizable Widget Monitored Raw Data

Topology GridTree List

Pie/DonutDigit

Frame

6 Basic UI Component Types

# # # #

#

Pie Digit

Data Model and Widget

Template Mapping

Data Model Features Widget Template

( recommended)

Graph It’s composed by data sets of edge and vertex Topology

Hierarchy The hierarchical data uses a tree (parent-child) structure

that starts at "the root" and branches to "the leaves"

Tree List

Object It’s composed of more than one metric, and the metric

indicates number or ratio for all kinds of status

• Digit

• Pie/Donut

• Frame

Array It’s composed of more than one metric, and at least one

metric includes a resource list or a record list

Grid

Template

Generation

Operation Portal

Widget

Creation

Data

Mapping

Configuration

Injection

Widget Template Management

WidgetManagement

Data Binder

Data source & Model

User Portal Customizable Widget Monitored Raw Data

10

Constructing Widgets for a New

ICT Service with Dynamic Data

Binding Mechanism

Template

Generation

Operation Portal

Widget

Creation

Data

Mapping

Configuration

Injection

Widget Template Management

WidgetManagement

Data Binder

Data source & Model

User Portal Customizable Widget Monitored Raw Data

Data Source

Metric 1 : #Total Circuit

Data Source：VPN Quality Metrics

Data Model：Object

Metric 2：#Normal Circuit

Metric 4 : #Degraded Circuit

Metric 6 : #Defect Circuit

Metric 3：Ratio of Normal Circuit

Metric 5 : Ratio of Degraded Circuit

Metric 7 : Ratio of Defect Circuit

Widget 1：3DigitsData Metric : 2、4、6

Widget 2：PieData Metric : 2、3、4 、

5、6、7

Normal

20 (74%)

DegradedNormal Defect

20 25

Onboarding ICT Service

Widgets

11

Widget Repository

Degraded Normal No Data

Template

Generation

Operation Portal

Widget

Creation

Data

Mapping

Configuration

Injection

Widget Template Management

WidgetManagement Data source & Model

Data Binder

User Portal Customizable Widget Monitored Raw Data

Defect

### #

Operation Portal

Operation Team

Data Binder

Data source of the

ICT Infrastructure

Template

UI Component

Repository

Layout Setting (Color, Title…)

Title Title Title Title

1

2

4

2.1

2.2

3

# # # #

Onboarding ICT Service

Widgets (cont.)

12

Operation Portal

Operation Team

Data Binder

Data source of the

ICT Infrastructure

Template

Degraded Normal No Data

UI Component

Repository

Layout Setting (Color, Title…)

Template

Generation

Operation Portal

Widget

Creation

Data

Mapping

Configuration

Injection

Widget Template Management

WidgetManagement Data source & Model

Data Binder

User Portal Customizable Widget Monitored Raw Data

Defect

Title Title Title Title

### #

Template

DefectDeficientNormalNo Data

No Data

##

Defect

Widget Repository

Operation Portal

Data source of the

ICT Infrastructure

Data Binder

Layout Setting (Color, Title…)

# # # # # #

Visualization of ICT

Infrastructure Metrics on

Customer's Demand

Metadata

Widget

VPN Quality - 4 Digits

Data Binder

Choose Data Metric: 1、2 、3、4

Layout settings

Attributes (key–value pair)

Color, title, icon, redirect…

Customer

Widget

Generator

Choose

• Data Source：VPN Quality Metrics

• Widget ： VPN Status - 4 Digits

Data Source

• Data Binder

• Layout settings

13

Widget

Selection

User

Portal

Template

Generation

Operation Portal

Widget

Creation

Data

Mapping

Configuration

Injection

Widget Template Management

WidgetManagement Data source & Model

Data Binder

User Portal Customizable Widget Monitored Raw Data

Widget

Repository

Metric 1 : #Defect Circuit

Metric 2：#Degraded Circuit

Metric 4 : #Unknown Circuit

Metric 3：#Normal Circuit

Metric n : …..

…

Conclusion & Future Work

• We proposed a novel architecture that benefits

developers, operators and users in monitoring

heterogeneous ICT infrastructure

– For R&D team, we shorten the development time by the reuse of

existing widget templates when new ICT services monitoring

requirement is proposed

– For operation team, they get opportunities to onboard customized

widgets which meet user’s demand

– For customers, they use customized widgets to control complex

ICT infra in a glance

• Future works

– Create more widget templates with pretty and practical

– Empower administrator more freedom to customize widgets

14