added icons to shorten menu descriptions (especially container related); forced max name length on submenus to 30
Costa Tsaousis (ktsaou) committed
Sep 3, 2016 at 06:13 UTC
d94bbf132eb7a3f0240da83892ac288680b6fb20
1 file changed
+49
-25
web/index.html
+49
-25
@@ -1445,27 +1445,27 @@ var menuData = {
1445
},
1446
1447
'ap': {
1448
- title: 'Access Points',
1448
+ title: '<i class="fa fa-wifi" aria-hidden="true"></i> Access Points',
1449
info: undefined
1450
},
1451
1452
'tc': {
1453
- title: 'Quality of Service',
1453
+ title: '<i class="fa fa-globe" aria-hidden="true"></i> Quality of Service',
1454
info: 'Netdata collects and visualizes tc class utilization using its <a href="https://github.com/firehol/netdata/blob/master/plugins.d/tc-qos-helper.sh" target="_blank">tc-helper plugin</a>. If you also use <a href="http://firehol.org/#fireqos" target="_blank">FireQOS</a> for setting up QoS, netdata automatically collects interface and class names. If your QoS configuration includes overheads calculation, the values shown here will include these overheads (the total bandwidth for the same interface as reported in the Network Interfaces section, will be lower than the total bandwidth reported here). Also, data collection may have a slight time difference compared to the interface (QoS data collection is implemented with a BASH script, so a shift in data collection of a few milliseconds should be justified).'
1455
},
1456
1457
'net': {
1458
- title: 'Network Interfaces',
1458
+ title: '<i class="fa fa-share-alt" aria-hidden="true"></i> Network Interfaces',
1459
info: 'Per network interface statistics collected from <code>/proc/net/dev</code>.'
1460
},
1461
1462
'ipv4': {
1463
- title: 'IPv4 Networking',
1463
+ title: '<i class="fa fa-bolt" aria-hidden="true"></i> IPv4 Networking',
1464
info: undefined
1465
},
1466
1467
'ipv6': {
1468
- title: 'IPv6 Networking',
1468
+ title: '<i class="fa fa-bolt" aria-hidden="true"></i> IPv6 Networking',
1469
info: undefined
1470
},
1471
@@ -1475,7 +1475,7 @@ var menuData = {
1475
},
1476
1477
'netfilter': {
1478
- title: 'Firewall (netfilter)',
1478
+ title: '<i class="fa fa-shield" aria-hidden="true"></i> Firewall (netfilter)',
1479
info: undefined
1480
},
1481
@@ -1490,7 +1490,7 @@ var menuData = {
1490
},
1491
1492
'disk': {
1493
- title: 'Disks',
1493
+ title: '<i class="fa fa-folder" aria-hidden="true"></i> Disks',
1494
info: 'Charts with performance information for all the system disks. Special care has been given to present disk performance metrics in a way compatible with <code>iostat -x</code>. netdata by default prevents rendering performance charts for individual partitions and unmounted virtual disks. Disabled charts can still be enabled by altering the relative settings in the netdata configuration file.'
1495
},
1496
@@ -1500,30 +1500,30 @@ var menuData = {
1500
},
1501
1502
'nfsd': {
1503
- title: 'File Server (nfsd)',
1503
+ title: '<i class="fa fa-folder-open" aria-hidden="true"></i> File Server (nfsd)',
1504
info: undefined
1505
},
1506
1507
'apps': {
1508
- title: 'Applications',
1508
+ title: '<i class="fa fa-heartbeat" aria-hidden="true"></i> Applications',
1509
info: 'Per application statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics for applications of interest, defined in <code>/etc/netdata/apps_groups.conf</code> (the default is <a href="https://github.com/firehol/netdata/blob/master/conf.d/apps_groups.conf" target="_blank">here</a>). The plugin internally builds a process tree (much like <code>ps fax</code> does), and groups processes together (evaluating both child and parent processes) so that the result is always a chart with a predefined set of dimensions (of course, only application groups found running are reported). The reported values are compatible with <code>top</code>, although the netdata plugin counts also the resources of exited children (unlike <code>top</code> which shows only the resources of the currently running processes). So for processes like shell scripts, the reported values include the resources used by the commands these scripts run within each timeframe.',
1510
height: 1.5
1511
},
1512
1513
'users': {
1514
- title: 'Users',
1514
+ title: '<i class="fa fa-user" aria-hidden="true"></i> Users',
1515
info: 'Per user statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user. The reported values are compatible with <code>top</code>, although the netdata plugin counts also the resources of exited children (unlike <code>top</code> which shows only the resources of the currently running processes). So for processes like shell scripts, the reported values include the resources used by the commands these scripts run within each timeframe.',
1516
height: 1.5
1517
},
1518
1519
'groups': {
1520
- title: 'User Groups',
1520
+ title: '<i class="fa fa-users" aria-hidden="true"></i> User Groups',
1521
info: 'Per user group statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics per user group. The reported values are compatible with <code>top</code>, although the netdata plugin counts also the resources of exited children (unlike <code>top</code> which shows only the resources of the currently running processes). So for processes like shell scripts, the reported values include the resources used by the commands these scripts run within each timeframe.',
1522
height: 1.5
1523
},
1524
1525
'netdata': {
1526
- title: 'Netdata Monitoring',
1526
+ title: '<i class="fa fa-bar-chart" aria-hidden="true"></i> Netdata Monitoring',
1527
info: undefined
1528
},
1529
@@ -1533,32 +1533,32 @@ var menuData = {
1533
},
1534
1535
'cgroup': {
1536
- title: 'Container',
1536
+ title: '<i class="fa fa-th" aria-hidden="true"></i>',
1537
info: undefined
1538
},
1539
1540
'cgqemu': {
1541
- title: 'VM',
1541
+ title: '<i class="fa fa-th-large" aria-hidden="true"></i>',
1542
info: undefined
1543
},
1544
1545
'memcached': {
1546
- title: 'memcached',
1546
+ title: '<i class="fa fa-database" aria-hidden="true"></i> memcached',
1547
info: undefined
1548
},
1549
1550
'mysql': {
1551
- title: 'MySQL',
1551
+ title: '<i class="fa fa-database" aria-hidden="true"></i> MySQL',
1552
info: undefined
1553
},
1554
1555
'redis': {
1556
- title: 'Redis',
1556
+ title: '<i class="fa fa-database" aria-hidden="true"></i> Redis',
1557
info: undefined
1558
},
1559
1560
'ipfs': {
1561
- title: 'IPFS',
1561
+ title: '<i class="fa fa-folder-open" aria-hidden="true"></i> IPFS',
1562
info: undefined
1563
},
1564
@@ -1567,18 +1567,33 @@ var menuData = {
1567
info: undefined,
1568
},
1569
1570
+ 'postfix': {
1571
+ title: '<i class="fa fa-envelope" aria-hidden="true"></i> postfix',
1572
+ info: undefined,
1573
+ },
1574
+
1575
'nginx': {
1571
- title: 'nginx',
1576
+ title: '<i class="fa fa-eye" aria-hidden="true"></i> nginx',
1577
info: undefined,
1578
},
1579
1580
'apache': {
1576
- title: 'Apache',
1581
+ title: '<i class="fa fa-eye" aria-hidden="true"></i> Apache',
1582
info: undefined,
1583
},
1584
1585
'named': {
1581
- title: 'named',
1586
+ title: '<i class="fa fa-tag" aria-hidden="true"></i> named',
1587
+ info: undefined
1588
+ },
1589
+
1590
+ 'squid': {
1591
+ title: '<i class="fa fa-puzzle-piece" aria-hidden="true"></i> squid',
1592
+ info: undefined
1593
+ },
1594
+
1595
+ 'nut': {
1596
+ title: '<i class="fa fa-battery-half" aria-hidden="true"></i> UPS',
1597
info: undefined
1598
}
1599
};
@@ -2008,7 +2023,7 @@ function anyAttribute(obj, attr, key, def) {
2023
function menuTitle(chart) {
2024
if(typeof chart.menu_pattern !== 'undefined') {
2025
return anyAttribute(menuData, 'title', chart.menu_pattern, chart.menu_pattern).toString()
2011
- + ': ' + chart.type.slice(-(chart.type.length - chart.menu_pattern.length - 1)).toString();
2026
+ + ' ' + chart.type.slice(-(chart.type.length - chart.menu_pattern.length - 1)).toString();
2027
}
2028
2029
return anyAttribute(menuData, 'title', chart.menu, chart.menu);
@@ -2024,7 +2039,13 @@ function menuHeight(menu, relative) {
2039
2040
function submenuTitle(menu, submenu) {
2041
var key = menu + '.' + submenu;
2027
- return anyAttribute(submenuData, 'title', key, submenu);
2042
+ var title = anyAttribute(submenuData, 'title', key, submenu);
2043
+ if(title.length > 30) {
2044
+ var a = title.substring(0, 13);
2045
+ var b = title.substring(title.length - 13, title.length);
2046
+ return a + '...' + b;
2047
+ }
2048
+ return title;
2049
}
2050
2051
function submenuInfo(menu, submenu) {
@@ -2081,6 +2102,7 @@ function enrichChartData(chart) {
2102
case 'mysql':
2103
case 'named':
2104
case 'nginx':
2105
+ case 'nut':
2106
case 'phpfpm':
2107
case 'postfix':
2108
case 'redis':
@@ -2409,6 +2431,8 @@ function renderChartsAndMenu(data) {
2431
renderPage(menus, data);
2432
}
2433
2434
+// ----------------------------------------------------------------------------
2435
+
2436
function alarmsUpdateModal() {
2437
var active = '<h3>Raised Alarms</h3><table class="table">';
2438
var all = '<h3>All Running Alarms</h3><div class="panel-group" id="alarms_all_accordion" role="tablist" aria-multiselectable="true">';
@@ -2491,7 +2515,7 @@ function alarmsUpdateModal() {
2515
function alarm_to_html(alarm, full) {
2516
var chart = options.data.charts[alarm.chart];
2517
2494
- var html = '<tr><td class="text-center" style="vertical-align:middle" width="40%"><b>' + alarm.chart + '</b><br/> <br/><embed src="' + NETDATA.alarms.server + '/api/v1/badge.svg?chart=' + alarm.chart + '&alarm=' + alarm.name + '&refresh=auto" type="image/svg+xml" height="20" /><br/> <br/><span style="font-size: 18px">' + alarm.info + '</span></td>'
2518
+ var html = '<tr><td class="text-center" style="vertical-align:middle" width="40%"><b>' + alarm.chart + '</b><br/> <br/><embed src="' + NETDATA.alarms.server + '/api/v1/badge.svg?chart=' + alarm.chart + '&alarm=' + alarm.name + '&refresh=auto" type="image/svg+xml" height="20" /><br/> <br/><span style="font-size: 18px">' + alarm.info + '</span><br/> <br/>role: <b>' + alarm.recipient + '</b></td>'
2519
+ '<td><table class="table">'
2520
+ ((typeof alarm.warn !== 'undefined')?('<tr><td width="10%" style="text-align:right">warning when</td><td><span style="font-family: monospace; color:#fe7d37; font-weight: bold;">' + alarm.warn + '</span></td></tr>'):'')
2521
+ ((typeof alarm.crit !== 'undefined')?('<tr><td width="10%" style="text-align:right">critical when</td><td><span style="font-family: monospace; color: #e05d44; font-weight: bold;">' + alarm.crit + '</span></td></tr>'):'');
@@ -2603,7 +2627,7 @@ function alarmsUpdateModal() {
2627
if(alarm.status === 'WARNING' || alarm.status === 'CRITICAL') {
2628
if(!active_family_added) {
2629
active_family_added = true;
2606
- active += '<tr><th class="text-center"><h4>' + family + '</h4></th><th></th></tr>';
2630
+ active += '<tr><th class="text-center" colspan="2"><h4>' + family + '</h4></th></tr>';
2631
}
2632
count_active++;
2633
active += alarm_to_html(alarm, false);