more icons on the dashboard menu
Costa Tsaousis (ktsaou) committed
Sep 3, 2016 at 14:45 UTC
a3cb58b05ecc1b1e9f9fff37274eb2fce43aa648
2 files changed
+101
-39
node.d/sma_webbox.node.js
+6
-6
@@ -74,7 +74,7 @@ var webbox = {
74
75
// Grid Current Power Chart
76
if(d['GriPwr'].value !== null) {
77
- var id = 'sma_webbox_' + service.name + '.current';
77
+ var id = 'smawebbox_' + service.name + '.current';
78
var chart = webbox.charts[id];
79
80
if(typeof chart === 'undefined') {
@@ -84,7 +84,7 @@ var webbox = {
84
title: service.name + ' Current Grid Power', // the title of the chart
85
units: d['GriPwr'].unit, // the units of the chart dimensions
86
family: 'now', // the family of the chart
87
- context: 'sma_webbox.grid.power', // the context of the chart
87
+ context: 'smawebbox.grid_power', // the context of the chart
88
type: netdata.chartTypes.area, // the type of the chart
89
priority: webbox.base_priority + 1, // the priority relative to others in the same family
90
update_every: service.update_every, // the expected update frequency of the chart
@@ -110,7 +110,7 @@ var webbox = {
110
}
111
112
if(d['GriEgyTdy'].value !== null) {
113
- var id = 'sma_webbox_' + service.name + '.today';
113
+ var id = 'smawebbox_' + service.name + '.today';
114
var chart = webbox.charts[id];
115
116
if(typeof chart === 'undefined') {
@@ -120,7 +120,7 @@ var webbox = {
120
title: service.name + ' Today Grid Power', // the title of the chart
121
units: d['GriEgyTdy'].unit, // the units of the chart dimensions
122
family: 'today', // the family of the chart
123
- context: 'sma_webbox.grid.power.today', // the context of the chart
123
+ context: 'smawebbox.grid_power_today', // the context of the chart
124
type: netdata.chartTypes.area, // the type of the chart
125
priority: webbox.base_priority + 2, // the priority relative to others in the same family
126
update_every: service.update_every, // the expected update frequency of the chart
@@ -146,7 +146,7 @@ var webbox = {
146
}
147
148
if(d['GriEgyTot'].value !== null) {
149
- var id = 'sma_webbox_' + service.name + '.total';
149
+ var id = 'smawebbox_' + service.name + '.total';
150
var chart = webbox.charts[id];
151
152
if(typeof chart === 'undefined') {
@@ -156,7 +156,7 @@ var webbox = {
156
title: service.name + ' Total Grid Power', // the title of the chart
157
units: d['GriEgyTot'].unit, // the units of the chart dimensions
158
family: 'total', // the family of the chart
159
- context: 'sma_webbox.grid.power.total', // the context of the chart
159
+ context: 'smawebbox.grid_power_total', // the context of the chart
160
type: netdata.chartTypes.area, // the type of the chart
161
priority: webbox.base_priority + 3, // the priority relative to others in the same family
162
update_every: service.update_every, // the expected update frequency of the chart
web/index.html
+95
-33
@@ -527,7 +527,7 @@
527
a1 += '<li role="separator" class="divider"></li>';
528
529
el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #999;" target="_blank">What is this?</a></li>';
530
- a1 += '<li><a href="#" style="color: #999;" onclick="switchRegistryModalHandler(); return false;"><i class="fa fa-cog" aria-hidden="true" style="color: #999;"></i></a></li>'
530
+ a1 += '<li><a href="#" style="color: #999;" onclick="switchRegistryModalHandler(); return false;"><i class="fa fa-sliders" aria-hidden="true" style="color: #999;"></i></a></li>'
531
532
document.getElementById('mynetdata_servers').innerHTML = el;
533
document.getElementById('mynetdata_servers2').innerHTML = el;
@@ -584,15 +584,15 @@
584
<nav class="collapse navbar-collapse navbar-right" role="navigation">
585
<ul class="nav navbar-nav">
586
<li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#alarmsModal" title="alarms"><i class="fa fa-bell"></i><span id="alarms_count_badge" class="badge"></span></a></li>
587
- <li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal" title="dashboard settings"><i class="fa fa-cog"></i></a></li>
587
+ <li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal" title="dashboard settings"><i class="fa fa-sliders"></i></a></li>
588
<li class="hidden-sm"><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank" title="netdata community"><i class="fa fa-github"></i></a></li>
589
<li class="hidden-sm" id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal" title="check for update"><i class="fa fa-cloud-download"></i><span id="update_badge" class="badge"></span></a></li>
590
<li class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal" title="dashboard help"><i class="fa fa-question-circle"></i></a></li>
591
<li class="dropdown hidden-md hidden-lg hidden-xs">
592
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="current_view">Menu <strong class="caret"></strong></a>
593
<ul class="dropdown-menu scrollable-menu inpagemenu" role="menu">
594
- <li><a href="#" class="btn" data-toggle="modal" data-target="#alarmsModal"><i class="fa fa-cog"></i> alarms</a></li>
595
- <li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-cog"></i> settings</a></li>
594
+ <li><a href="#" class="btn" data-toggle="modal" data-target="#alarmsModal"><i class="fa fa-bell"></i> alarms</a></li>
595
+ <li><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fa fa-sliders"></i> settings</a></li>
596
<li><a href="https://github.com/firehol/netdata/wiki" class="btn" target="_blank"><i class="fa fa-github"></i> community</a></li>
597
<li><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> help</a></li>
598
</ul>
@@ -1441,89 +1441,106 @@ function gaugeChart(title, width, dimensions, colors) {
1441
var menuData = {
1442
'system': {
1443
title: 'System Overview',
1444
+ icon: '<i class="fa fa-bookmark" aria-hidden="true"></i>',
1445
info: 'Overview of the key system metrics.'
1446
},
1447
1448
'ap': {
1448
- title: '<i class="fa fa-wifi" aria-hidden="true"></i> Access Points',
1449
+ title: 'Access Points',
1450
+ icon: '<i class="fa fa-wifi" aria-hidden="true"></i>',
1451
info: undefined
1452
},
1453
1454
'tc': {
1453
- title: '<i class="fa fa-globe" aria-hidden="true"></i> Quality of Service',
1455
+ title: 'Quality of Service',
1456
+ icon: '<i class="fa fa-globe" aria-hidden="true"></i>',
1457
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).'
1458
},
1459
1460
'net': {
1458
- title: '<i class="fa fa-share-alt" aria-hidden="true"></i> Network Interfaces',
1461
+ title: 'Network Interfaces',
1462
+ icon: '<i class="fa fa-share-alt" aria-hidden="true"></i>',
1463
info: 'Per network interface statistics collected from <code>/proc/net/dev</code>.'
1464
},
1465
1466
'ipv4': {
1463
- title: '<i class="fa fa-bolt" aria-hidden="true"></i> IPv4 Networking',
1467
+ title: 'IPv4 Networking',
1468
+ icon: '<i class="fa fa-cloud" aria-hidden="true"></i>',
1469
info: undefined
1470
},
1471
1472
'ipv6': {
1468
- title: '<i class="fa fa-bolt" aria-hidden="true"></i> IPv6 Networking',
1473
+ title: 'IPv6 Networking',
1474
+ icon: '<i class="fa fa-cloud" aria-hidden="true"></i>',
1475
info: undefined
1476
},
1477
1478
'ipvs': {
1479
title: 'IP Virtual Server',
1480
+ icon: '<i class="fa fa-eye" aria-hidden="true"></i>',
1481
info: undefined
1482
},
1483
1484
'netfilter': {
1478
- title: '<i class="fa fa-shield" aria-hidden="true"></i> Firewall (netfilter)',
1485
+ title: 'Firewall (netfilter)',
1486
+ icon: '<i class="fa fa-shield" aria-hidden="true"></i>',
1487
info: undefined
1488
},
1489
1490
'cpu': {
1491
title: 'CPUs',
1492
+ icon: '<i class="fa fa-bolt" aria-hidden="true"></i>',
1493
info: undefined
1494
},
1495
1496
'mem': {
1497
title: 'Memory',
1498
+ icon: '<i class="fa fa-bolt" aria-hidden="true"></i>',
1499
info: undefined
1500
},
1501
1502
'disk': {
1493
- title: '<i class="fa fa-folder" aria-hidden="true"></i> Disks',
1503
+ title: 'Disks',
1504
+ icon: '<i class="fa fa-folder" aria-hidden="true"></i>',
1505
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.'
1506
},
1507
1508
'sensors': {
1509
title: 'Sensors',
1510
+ icon: '<i class="fa fa-leaf" aria-hidden="true"></i>',
1511
info: undefined
1512
},
1513
1514
'nfsd': {
1503
- title: '<i class="fa fa-folder-open" aria-hidden="true"></i> File Server (nfsd)',
1515
+ title: 'File Server (nfsd)',
1516
+ icon: '<i class="fa fa-folder-open" aria-hidden="true"></i>',
1517
info: undefined
1518
},
1519
1520
'apps': {
1508
- title: '<i class="fa fa-heartbeat" aria-hidden="true"></i> Applications',
1521
+ title: 'Applications',
1522
+ icon: '<i class="fa fa-heartbeat" aria-hidden="true"></i>',
1523
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.',
1524
height: 1.5
1525
},
1526
1527
'users': {
1514
- title: '<i class="fa fa-user" aria-hidden="true"></i> Users',
1528
+ title: 'Users',
1529
+ icon: '<i class="fa fa-user" aria-hidden="true"></i>',
1530
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.',
1531
height: 1.5
1532
},
1533
1534
'groups': {
1520
- title: '<i class="fa fa-users" aria-hidden="true"></i> User Groups',
1535
+ title: 'User Groups',
1536
+ icon: '<i class="fa fa-users" aria-hidden="true"></i>',
1537
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.',
1538
height: 1.5
1539
},
1540
1541
'netdata': {
1526
- title: '<i class="fa fa-bar-chart" aria-hidden="true"></i> Netdata Monitoring',
1542
+ title: 'Netdata Monitoring',
1543
+ icon: '<i class="fa fa-bar-chart" aria-hidden="true"></i>',
1544
info: undefined
1545
},
1546
@@ -1533,67 +1550,92 @@ var menuData = {
1550
},
1551
1552
'cgroup': {
1536
- title: '<i class="fa fa-th" aria-hidden="true"></i>',
1553
+ title: '',
1554
+ icon: '<i class="fa fa-th" aria-hidden="true"></i>',
1555
info: undefined
1556
},
1557
1558
'cgqemu': {
1541
- title: '<i class="fa fa-th-large" aria-hidden="true"></i>',
1559
+ title: '',
1560
+ icon: '<i class="fa fa-th-large" aria-hidden="true"></i>',
1561
info: undefined
1562
},
1563
1564
'memcached': {
1546
- title: '<i class="fa fa-database" aria-hidden="true"></i> memcached',
1565
+ title: 'memcached',
1566
+ icon: '<i class="fa fa-database" aria-hidden="true"></i>',
1567
info: undefined
1568
},
1569
1570
'mysql': {
1551
- title: '<i class="fa fa-database" aria-hidden="true"></i> MySQL',
1571
+ title: 'MySQL',
1572
+ icon: '<i class="fa fa-database" aria-hidden="true"></i>',
1573
info: undefined
1574
},
1575
1576
'redis': {
1556
- title: '<i class="fa fa-database" aria-hidden="true"></i> Redis',
1577
+ title: 'Redis',
1578
+ icon: '<i class="fa fa-database" aria-hidden="true"></i>',
1579
info: undefined
1580
},
1581
1582
'ipfs': {
1561
- title: '<i class="fa fa-folder-open" aria-hidden="true"></i> IPFS',
1583
+ title: 'IPFS',
1584
+ icon: '<i class="fa fa-folder-open" aria-hidden="true"></i>',
1585
info: undefined
1586
},
1587
1588
'phpfpm': {
1589
title: 'PHP-FPM',
1590
+ icon: '<i class="fa fa-eye" aria-hidden="true"></i>',
1591
info: undefined,
1592
},
1593
1594
'postfix': {
1571
- title: '<i class="fa fa-envelope" aria-hidden="true"></i> postfix',
1595
+ title: 'postfix',
1596
+ icon: '<i class="fa fa-envelope" aria-hidden="true"></i>',
1597
info: undefined,
1598
},
1599
1600
'nginx': {
1576
- title: '<i class="fa fa-eye" aria-hidden="true"></i> nginx',
1601
+ title: 'nginx',
1602
+ icon: '<i class="fa fa-eye" aria-hidden="true"></i>',
1603
info: undefined,
1604
},
1605
1606
'apache': {
1581
- title: '<i class="fa fa-eye" aria-hidden="true"></i> Apache',
1607
+ title: 'Apache',
1608
+ icon: '<i class="fa fa-eye" aria-hidden="true"></i>',
1609
info: undefined,
1610
},
1611
1612
'named': {
1586
- title: '<i class="fa fa-tag" aria-hidden="true"></i> named',
1613
+ title: 'named',
1614
+ icon: '<i class="fa fa-tag" aria-hidden="true"></i>',
1615
info: undefined
1616
},
1617
1618
'squid': {
1591
- title: '<i class="fa fa-puzzle-piece" aria-hidden="true"></i> squid',
1619
+ title: 'squid',
1620
+ icon: '<i class="fa fa-exchange" aria-hidden="true"></i>',
1621
info: undefined
1622
},
1623
1624
'nut': {
1596
- title: '<i class="fa fa-battery-half" aria-hidden="true"></i> UPS',
1625
+ title: 'UPS',
1626
+ icon: '<i class="fa fa-battery-half" aria-hidden="true"></i>',
1627
+ info: undefined
1628
+ },
1629
+
1630
+ 'smawebbox': {
1631
+ title: 'Solar Power',
1632
+ icon: '<i class="fa fa-sun-o" aria-hidden="true"></i>',
1633
+ info: undefined
1634
+ },
1635
+
1636
+ 'snmp': {
1637
+ title: 'SNMP',
1638
+ icon: '<i class="fa fa-random" aria-hidden="true"></i>',
1639
info: undefined
1640
}
1641
};
@@ -2020,13 +2062,31 @@ function anyAttribute(obj, attr, key, def) {
2062
return def;
2063
}
2064
2065
+function anyAttributeTitle(obj, attr, key, def) {
2066
+ if(typeof obj[key] !== 'undefined') {
2067
+ if(typeof obj[key][attr] !== 'undefined')
2068
+ return obj[key][attr];
2069
+ }
2070
+
2071
+ var r = def.replace(/_/g, ' ');
2072
+
2073
+ return r;
2074
+}
2075
+
2076
function menuTitle(chart) {
2077
if(typeof chart.menu_pattern !== 'undefined') {
2025
- return anyAttribute(menuData, 'title', chart.menu_pattern, chart.menu_pattern).toString()
2078
+ return anyAttributeTitle(menuData, 'title', chart.menu_pattern, chart.menu_pattern).toString()
2079
+ ' ' + chart.type.slice(-(chart.type.length - chart.menu_pattern.length - 1)).toString();
2080
}
2081
2029
- return anyAttribute(menuData, 'title', chart.menu, chart.menu);
2082
+ return anyAttributeTitle(menuData, 'title', chart.menu, chart.menu);
2083
+}
2084
+
2085
+function menuIcon(chart) {
2086
+ if(typeof chart.menu_pattern !== 'undefined')
2087
+ return anyAttribute(menuData, 'icon', chart.menu_pattern, '<i class="fa fa-puzzle-piece" aria-hidden="true"></i>').toString();
2088
+
2089
+ return anyAttribute(menuData, 'icon', chart.menu, '<i class="fa fa-puzzle-piece" aria-hidden="true"></i>');
2090
}
2091
2092
function menuInfo(menu) {
@@ -2039,7 +2099,7 @@ function menuHeight(menu, relative) {
2099
2100
function submenuTitle(menu, submenu) {
2101
var key = menu + '.' + submenu;
2042
- var title = anyAttribute(submenuData, 'title', key, submenu);
2102
+ var title = anyAttributeTitle(submenuData, 'title', key, submenu);
2103
if(title.length > 30) {
2104
var a = title.substring(0, 13);
2105
var b = title.substring(title.length - 13, title.length);
@@ -2107,6 +2167,7 @@ function enrichChartData(chart) {
2167
case 'postfix':
2168
case 'redis':
2169
case 'ipfs':
2170
+ case 'smawebbox':
2171
case 'squid':
2172
case 'snmp':
2173
case 'tomcat':
@@ -2306,7 +2367,7 @@ function renderPage(menus, data) {
2367
// generate an entry at the main menu
2368
2369
var menuid = name2id(menu);
2309
- sidebar += '<li class=""><a href="#' + menuid + '" onClick="return scrollToId(\'' + menuid + '\');">' + menus[menu].title + '</a><ul class="nav">';
2370
+ sidebar += '<li class=""><a href="#' + menuid + '" onClick="return scrollToId(\'' + menuid + '\');">' + menus[menu].icon + ' ' + menus[menu].title + '</a><ul class="nav">';
2371
html += '<div role="section"><div role="sectionhead"><h1 id="' + menuid + '" role="heading">' + menus[menu].title + '</h1></div><div id="menu_' + menuid + '" role="document">';
2372
2373
if(menus[menu].info !== null)
@@ -2388,6 +2449,7 @@ function renderChartsAndMenu(data) {
2449
priority: charts[c].priority,
2450
submenus: {},
2451
title: menuTitle(charts[c]),
2452
+ icon: menuIcon(charts[c]),
2453
info: menuInfo(charts[c].menu),
2454
height: menuHeight(charts[c].menu, options.chartsHeight)
2455
};
@@ -3031,7 +3093,7 @@ function finalizePage() {
3093
/* activate bootstrap scrollspy (needed for sidebar) */
3094
$(document.body).scrollspy({
3095
target: '#sidebar',
3034
- offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
3096
+ offset: $(window).height() / 5 // controls the diff of the <hX> element to the top, to select it
3097
});
3098
3099
// change the URL based on the current position of the screen