├── .gitignore
├── History.md
├── README.md
├── config
└── runtime.json
├── lib
├── css
│ ├── Core.css
│ ├── CoreSettings.css
│ ├── images
│ │ ├── add-a-component.jpg
│ │ ├── app.jpg
│ │ ├── dashboard.jpg
│ │ ├── header.jpg
│ │ ├── new_component.jpg
│ │ ├── sidebar.jpg
│ │ ├── tour.jpg
│ │ ├── tour_manage.jpg
│ │ └── tour_settings.jpg
│ └── wysihtml5.css
├── ext
│ ├── highcharts.js
│ ├── highcharts_more.js
│ └── wysihtml5-0.3.0.js
├── image
│ ├── AppViewer.png
│ ├── BarChart.png
│ ├── Button.png
│ ├── Clock.png
│ ├── Console.png
│ ├── Gauge.png
│ ├── HTMLView.png
│ ├── LineChart.png
│ ├── LogViewer.png
│ ├── ObjectInspector.png
│ ├── PieChart.png
│ ├── ProbeViewer.png
│ ├── Slider.png
│ ├── SparkLine.png
│ └── WebClip.png
├── index.js
├── template
│ ├── AppViewer.html
│ ├── Button.html
│ ├── Html.html
│ └── MacroEditor.html
└── view
│ ├── 1-Chart.js
│ ├── AppViewer.js
│ ├── BarChart.js
│ ├── Button.js
│ ├── Clock.js
│ ├── Gauge.js
│ ├── Html.js
│ ├── Inspector.js
│ ├── LineChart.js
│ ├── LogViewer.js
│ ├── Macro.js
│ ├── MacroEditor.js
│ ├── PieChart.js
│ ├── Probe.js
│ ├── Repl.js
│ ├── Slider.js
│ ├── SparkLine.js
│ └── WebView.js
├── monitor.js
├── package.json
└── site_db
├── Page
├── 404.json
├── AppOverview.json
├── Applications
│ └── index.json
├── Components
│ ├── AppViewer.json
│ ├── BarChart.json
│ ├── Button.json
│ ├── Clock.json
│ ├── Gauge.json
│ ├── HTMLTemplate.json
│ ├── LineChart.json
│ ├── LogViewer.json
│ ├── ObjectInspector.json
│ ├── PieChart.json
│ ├── ProbeViewer.json
│ ├── REPLConsole.json
│ ├── Slider.json
│ ├── SparkLine.json
│ └── WebSnippet.json
├── DashboardOverview.json
├── TourOverview.json
└── index.json
├── Site
└── default.json
└── Tour
├── 1.json
└── 2.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 |
--------------------------------------------------------------------------------
/History.md:
--------------------------------------------------------------------------------
1 | 0.6.3 / 2013-11-25
2 | ==================
3 |
4 | * Fixed paths in app tours
5 |
6 | 0.6.2 / 2013-11-23
7 | ==================
8 |
9 | * Updated monitor dependencies
10 | * Moved default home & 404 pages into core-monitor
11 | * Moved documentation from monitor-dashboard into core-monitor
12 | * Updated icon images
13 | * Fixed REPL so it doesn't cause a dirty page on load
14 |
15 | 0.6.1 / 2013-11-07
16 | ==================
17 |
18 | * Removed unnecessary Page and Tour directories
19 | * Server shouldn't require probe directory
20 |
21 | 0.6.0 / 2013-11-06
22 | ==================
23 |
24 | * Made compatible with 6.0 monitor changes
25 | * Added a repository field in package.json
26 |
27 | 0.5.4 / 2013-10-17
28 | ==================
29 |
30 | * Better scroll bars in firefox
31 |
32 | 0.5.3 / 2013-08-28
33 | ==================
34 |
35 | * Pushed changes in prep for node monitor release
36 |
37 | 0.5.2 / 2013-05-16
38 | ==================
39 |
40 | * Name change for ordering
41 |
42 | 0.5.1 / 2013-05-16
43 | ==================
44 |
45 | * Initial checkin
46 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Core Monitor Dashboard Components
2 | =================================
3 |
4 | This project contains online documentation, page tours, and the following components for the [node-monitor dashboard](http://lorenwest.github.io/node-monitor) project.
5 |
6 | Components
7 | ----------
8 |
9 |
2 |
CPU & System Load
3 |
4 |
5 |
Memory Usage
6 |
7 |
8 |
9 |
Process Information
10 |
11 |
Push Me
2 |
--------------------------------------------------------------------------------
/lib/template/Html.html:
--------------------------------------------------------------------------------
1 |
47 |
--------------------------------------------------------------------------------
/lib/template/MacroEditor.html:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/lib/view/1-Chart.js:
--------------------------------------------------------------------------------
1 | // Chart.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | UI = Monitor.UI,
10 | core = UI.app.core = UI.app.core || {},
11 | Backbone = Monitor.Backbone,
12 | _ = Monitor._;
13 |
14 | var HIGHCHARTS_OPTS = {
15 | chart: {
16 | backgroundColor: 'transparent'
17 | },
18 | colors: [
19 | 'rgb(200,183,155)',
20 | 'rgb(255,100,100)',
21 | 'rgb(100,100,255)',
22 | 'rgb(0,200,0)',
23 | 'rgb(200,0,50,)',
24 | 'rgb(200,100,255)',
25 | 'rgb(255,255,0)',
26 | 'rgb(0,150,150)',
27 | 'rgb(175,175,175)',
28 | 'rgb(255,0,255)'
29 | ],
30 | title: {
31 | text: ''
32 | },
33 | pane: {
34 | background: {
35 | backgroundColor: 'transparent'
36 | }
37 | },
38 | legend: {
39 | title: {
40 | style: {
41 | color: 'rgba(235,122,109,0.75)'
42 | }
43 | }
44 | },
45 | credits:{
46 | enabled:false
47 | },
48 | xAxis: {
49 | title: {
50 | style: {
51 | color: 'rgba(235,122,109,0.75)'
52 | }
53 | },
54 | labels: {
55 | style: {
56 | color: 'rgba(200,183,155,1)'
57 | }
58 | }
59 | },
60 | yAxis: {
61 | title: {
62 | style: {
63 | color: 'rgba(235,122,109,0.75)'
64 | }
65 | },
66 | labels: {
67 | style: {
68 | color: 'rgba(200,183,155,1)'
69 | }
70 | }
71 | }
72 | };
73 |
74 | /**
75 | * Foundation for rendering a Highcharts chart
76 | *
77 | * This provides a common interface for views representing Highcharts charts.
78 | *
79 | * @class Chart
80 | * @extends Backbone.View
81 | * @constructor
82 | * @param options {Object} View initialization options (See others in Backbone.View)
83 | * @param options.label='Chart' {String} The component label
84 | * @param options.icon='icon-bar-chart' {String} The icon class name
85 | * @param options.highcharts = {} {Object} Highcharts chart configuration object
86 | */
87 | var Chart = core.Chart = Backbone.View.extend({
88 |
89 | // Define the view
90 | defaultOptions: {
91 | label: 'Chart',
92 | icon: 'icon-bar-chart',
93 | highcharts: {}
94 | },
95 |
96 | initialize: function(options) {
97 | var t = this;
98 |
99 | // Set the default highcharts options
100 | if (!Highcharts.monitorOptionsSet) {
101 | Highcharts.setOptions(HIGHCHARTS_OPTS);
102 | Highcharts.monitorOptionsSet = true;
103 | }
104 |
105 | t.viewOptions = t.options.viewOptions;
106 | t.hc = t.viewOptions.get('highcharts') || {};
107 | options.component.setDefaultSize({
108 | width: 300,
109 | height: 300
110 | });
111 | },
112 |
113 | events: {
114 | },
115 |
116 | render: function() {
117 | var t = this,
118 | hc = Monitor.deepCopy(t.hc, 10);
119 | hc.chart.renderTo = t.$el[0];
120 | t.chart = new Highcharts.Chart(hc);
121 |
122 | // Resize the chart on component resize`
123 | t.on('resize', function() {
124 | t.chart.setSize(t.$el.width(), t.$el.height(), false);
125 | });
126 | },
127 |
128 | // This method must be overridden by sub-views to return
129 | // the data series to use on initial chart construction
130 | getInitialSeries: function() {
131 | return [];
132 | }
133 |
134 | });
135 |
136 | // This settings form is inherited by all charts.
137 | Chart.SettingsView = Backbone.View.extend({
138 |
139 | // Extend for local events
140 | events: {
141 | "change .core-chart-data" : "onChartDataChange",
142 | "change" : "onInputChange"
143 | },
144 |
145 | render: function() {
146 | var t = this;
147 |
148 | t.hc = t.model.get('highcharts');
149 |
150 | // Place template HTML
151 | t.$el.html('' +
152 | '
' +
153 | '
' +
154 | 'Data series ' +
155 | ''
156 | );
157 |
158 | // Attach the monitor picker
159 | t.monitorPicker = new UI.MonitorPicker({
160 | el: t.$('.nm-core-chart-monitor'),
161 | model: t.options.monitor
162 | });
163 | t.monitorPicker.render();
164 |
165 | // Fill the data series
166 | t.series = t.$('.core-chart-data').val(JSON.stringify(t.hc.series));
167 |
168 | // Re-render on view-source change (view-source is in parent container)
169 | // This removes prior bindings from earlier renders
170 | var editBox = $('.nm-cs-source-edit')
171 | editBox.off('change').on('change', function(e) {
172 | try {
173 | // Let container do error handling
174 | t.model.set('highcharts', JSON.parse(editBox.val()).viewOptions.highcharts);
175 | t.onInputChange();
176 | } catch (e) {}
177 | });
178 |
179 | // Attach all color pickers after the derived render occurs
180 | t.$('.colorPicker').miniColors({
181 | opacity: true
182 | });
183 |
184 | },
185 |
186 | onChartDataChange: function() {
187 | var t = this,
188 | val = t.series.val();
189 |
190 | // TODO: See if this is a function
191 |
192 | // Parse as JSON
193 | try {
194 | var data = JSON.parse(val);
195 | }
196 | catch (e) {
197 | alert('JSON parse error');
198 | return;
199 | }
200 | if (!_.isArray(data)) {
201 | alert('Does not parse as an array');
202 | return;
203 | };
204 |
205 | // Set the new series data
206 | t.hc.series = data;
207 | },
208 |
209 | onInputChange: function() {
210 | var t = this;
211 |
212 | // Give sub-views a chance to change their configs, then re-render
213 | setTimeout(function(){
214 | t.options.componentView.render();
215 | },0);
216 | }
217 |
218 | });
219 |
220 | }(this));
221 |
--------------------------------------------------------------------------------
/lib/view/AppViewer.js:
--------------------------------------------------------------------------------
1 | // AppViewer.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | logger = Monitor.getLogger('AppViewer'),
10 | UI = Monitor.UI,
11 | Template = UI.Template,
12 | Backbone = Monitor.Backbone,
13 | core = UI.app.core = UI.app.core || {},
14 | Chart = core.Chart,
15 | template = null,
16 | _ = Monitor._;
17 |
18 | // Constants
19 | var INFO_MAP = {
20 | 'Process Title': 'title',
21 | 'Executable Path': 'execPath',
22 | 'Executable Args': 'argv',
23 | 'Working Directory': 'cwd',
24 | 'Process ENV': 'env',
25 | 'Process ID': 'pid',
26 | 'Process Uptime' : 'uptime',
27 | 'Heap Total': 'heapTotal',
28 | 'Heap Used ': 'heapUsed',
29 | 'RSS Space ': 'rss',
30 | 'Host Name' : 'hostname',
31 | 'OS Type' : 'type',
32 | 'OS Release' : 'release',
33 | 'Total Memory' : 'totalmem',
34 | 'Free Memory' : 'freemem',
35 | 'Load Averages 1/5/15' : 'loadavg',
36 | 'CPU Info' : 'cpus',
37 | 'Node Platform': 'platform',
38 | 'Node Versions': 'versions'
39 | };
40 |
41 | /**
42 | * A viewer for log statements
43 | *
44 | * @class AppViewer
45 | * @extends Backbone.View
46 | * @constructor
47 | * @param options {Object} View initialization options (See others in Backbone.View)
48 | */
49 | var AppViewer = core.AppViewer = Backbone.View.extend({
50 |
51 | // Define the view
52 | name: 'App Viewer',
53 | tags: ['Utility', 'Real Time'],
54 | icon: 'image/AppViewer.png',
55 | description: 'A Node.JS application process viewer',
56 | website: 'http://lorenwest.github.com/core-monitor',
57 | defaultOptions: {
58 | animation: true,
59 | background: true
60 | },
61 |
62 | // Constructor
63 | initialize: function(options) {
64 | var t = this;
65 | t.options = options;
66 | t.viewOptions = options.viewOptions;
67 | t.monitor = options.monitor;
68 | options.component.setDefaultSize({width: 616, height: 616});
69 | Chart.prototype.initialize.apply(t, arguments);
70 | t.lastIdleCpu = 0;
71 | t.lastWorkingCpu = 0;
72 | t.infoElems = {};
73 |
74 | // Build the templates
75 | if (!template) {
76 | template = Template.fromDOM('#nm-template-core-AppViewer');
77 | }
78 |
79 | // Set default monitor options
80 | if (!t.monitor.get('probeClass')) {
81 | t.monitor.set({
82 | probeClass: 'Process',
83 | });
84 | }
85 |
86 | // Set up logging
87 | t.logCtxt = t.monitor.get('initParams');
88 | logger.info('init', t.logCtxt);
89 | },
90 |
91 | render: function() {
92 | var t = this;
93 |
94 | // Create the monitor in the loading state
95 | t.$el.html(template.get('text'));
96 |
97 | // Render the CPU gauges
98 | t.cpu1 = t.renderCpuGauge("CPU Activity");
99 | t.cpu2 = t.renderCpuGauge("1 Min. Load");
100 | t.cpu3 = t.renderCpuGauge("5 Min. Load");
101 | t.cpu4 = t.renderCpuGauge("15 Min Load");
102 |
103 | // Render the memory bars
104 | t.mem1 = t.renderMemBar();
105 | t.mem2 = t.renderMemBar();
106 |
107 | // Create the process info view, deferring render until we get real data
108 | var infoView = t.$('.nm-core-av-info').html('
')
109 | .find('.json');
110 | t.jsonView = new UI.JsonView({
111 | model: {},
112 | closedOnInit: true
113 | });
114 | infoView.append(t.jsonView.$el);
115 |
116 | // Listen for monitor events
117 | t.monitor.on('change', t._onProcessChange, t);
118 | },
119 |
120 | events: {
121 | },
122 |
123 | // Render the specified CPU gauge and return the DOM element
124 | renderCpuGauge: function(title) {
125 | var t = this,
126 | el = $('' +
127 | '
' +
128 | '
' +
129 | '
' + title + '
' +
130 | '
' +
182 | '
' +
183 | '
' +
184 | '
Process RSS: ' + numeral(process.rss).format('0.0 b') + ' Total Heap: ' + numeral(process.heapTotal).format('0.0 b') + ' Total Used: ' + numeral(process.heapUsed).format('0.0 b') + ' Total Memory: ' + numeral(process.totalmem).format('0.0 b') + ' Memory Used: ' + numeral(process.totalmem - process.freemem).format('0.0 b') + ' This Server: ' + numeral(process.rss).format('0.0 b') + '
');
319 | t.monitor = t.options.monitor;
320 | t.model = t.options.model;
321 |
322 | // Append a server picker
323 | t.serverPicker = new UI.MonitorPicker({
324 | el: server,
325 | model: t.monitor,
326 | hideProbe: true,
327 | hideParams: true
328 | });
329 | t.serverPicker.render();
330 |
331 | // Animate the charts?
332 | var elem =
333 | $('Smooth Animation:
').appendTo(server);
334 | t.animate = t.$el.find('.nm-core-av-anim').attr('checked', t.model.get('animate') ? 'checked' : null);
335 | },
336 |
337 | events: {
338 | 'change .nm-core-av-anim': 'onSelect'
339 | },
340 |
341 | onSelect: function(e) {
342 | var t = this,
343 | checked = t.animate.attr('checked') === 'checked';
344 |
345 | // Set the monitor fields
346 | t.model.set({
347 | animate: checked
348 | });
349 | }
350 |
351 | });
352 |
353 | }(this));
354 |
--------------------------------------------------------------------------------
/lib/view/BarChart.js:
--------------------------------------------------------------------------------
1 | // BarChart.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | UI = Monitor.UI,
10 | core = UI.app.core = UI.app.core || {},
11 | Chart = core.Chart,
12 | Backbone = Monitor.Backbone,
13 | _ = Monitor._;
14 |
15 | /**
16 | * A bar chart view
17 | *
18 | * @class BarChart
19 | * @extends Backbone.View
20 | * @constructor
21 | * @param options {Object} View initialization options (See others in Backbone.View)
22 | * @param options.label='Chart' {String} The component label
23 | * @param options.icon='icon-bar-chart' {String} The icon class name
24 | * @param options.highcharts= {} {Object} Highcharts chart configuration object
25 | */
26 | var BarChart = core.BarChart = Chart.extend({
27 |
28 | // Define the view
29 | name: 'BarChart',
30 | tags: ['Chart'],
31 | icon: 'image/BarChart.png',
32 | description: 'A bar chart',
33 | defaultOptions: {
34 | title: 'Bar Chart',
35 | highcharts: {
36 | chart: {
37 | type: 'column'
38 | },
39 | legend: {
40 | enabled: false
41 | },
42 | xAxis: {
43 | title: {
44 | text: 'Values'
45 | },
46 | labels: {
47 | enabled:true
48 | }
49 | },
50 | yAxis: {
51 | title: {
52 | text: ''
53 | },
54 | labels: {
55 | enabled:true
56 | }
57 | },
58 | plotOptions: {
59 | bar: {
60 | color: 'rgba(200,183,155,1)'
61 | },
62 | column: {
63 | color: 'rgba(200,183,155,1)'
64 | }
65 | },
66 | series: [{
67 | name: 'value',
68 | data: [1,0,4,10,3,8,7,7,3,0,5]
69 | }]
70 | }
71 | },
72 |
73 | initialize: function(options) {
74 | var t = this;
75 | Chart.prototype.initialize.apply(t, arguments);
76 | },
77 |
78 | });
79 |
80 | // This settings form is inherited by all charts.
81 | BarChart.SettingsView = Chart.SettingsView.extend({
82 |
83 | // Extend for local events
84 | events: _.extend({}, Chart.SettingsView.prototype.events, {
85 | "change *" : "onChange"
86 | }),
87 |
88 | render: function() {
89 | var t = this;
90 |
91 | // Call parent render to set up dom
92 | Chart.SettingsView.prototype.render.apply(t, arguments);
93 |
94 | // Set my title & HTML
95 | $('.core-chart-settings').append('' +
96 | '' +
97 | 'X Axis Label ' +
98 | '
' +
100 | '' +
101 | 'Y Axis Label ' +
102 | '
'
104 | );
105 |
106 | // Set initial field values
107 | t.xlabel = t.$('.xlabel').val(t.hc.xAxis.title.text);
108 | t.ylabel = t.$('.ylabel').val(t.hc.yAxis.title.text);
109 | },
110 |
111 | onChange: function() {
112 | var t = this;
113 | t.hc.xAxis.title.text = t.xlabel.val();
114 | t.hc.yAxis.title.text = t.ylabel.val();
115 | }
116 | });
117 |
118 | }(this));
119 |
--------------------------------------------------------------------------------
/lib/view/Button.js:
--------------------------------------------------------------------------------
1 | // Button.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | UI = Monitor.UI,
10 | core = UI.app.core = UI.app.core || {},
11 | Backbone = Monitor.Backbone,
12 | _ = Monitor._;
13 |
14 | /**
15 | * A generic button for running javascript code
16 | *
17 | * When the button is pressed, it runs the code specified in the onPress element.
18 | *
19 | * @class Button
20 | * @extends Backbone.View
21 | * @constructor
22 | * @param options {Object} View initialization options (See others in Backbone.View)
23 | * @param options.label='buttonLabel' {String} The button label
24 | * @param options.icon='iconClass' {String} The icon class name
25 | * @param options.onPress='' {String} Javascript to run when the button is pressed
26 | */
27 | var Button = core.Button = Backbone.View.extend({
28 |
29 | // Define the view
30 | name: 'Button',
31 | tags: ['Control'],
32 | icon: 'image/Button.png',
33 | description: 'Displays a button, and fires an event when pressed',
34 | website: 'http://lorenwest.github.com/core-monitor',
35 | defaultOptions: {
36 | label: 'Button',
37 | icon: 'icon-star',
38 | onPress: ''
39 | },
40 |
41 | initialize: function(options) {
42 | var t = this;
43 | t.viewOptions = t.options.viewOptions;
44 | t.viewOptions.on('change', t.setLabel, t);
45 | },
46 |
47 | events: {
48 | 'click button': 'onClick'
49 | },
50 |
51 | render: function() {
52 | var t = this;
53 | t.$el
54 | .html('' +
120 | 'Button Label ' +
121 | 'Icon ' +
123 | '' +
124 | '(no icon) ' +
125 | ' ' +
126 | 'On Button Press ' +
128 | '' +
129 | '
'
130 | ;
131 |
132 | }(this));
133 |
--------------------------------------------------------------------------------
/lib/view/Clock.js:
--------------------------------------------------------------------------------
1 | // Clock.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | UI = Monitor.UI,
10 | core = UI.app.core = UI.app.core || {},
11 | Backbone = Monitor.Backbone,
12 | _ = Monitor._;
13 |
14 | // Constants
15 | var RE_RENDER_AFTER_MS = 60000;
16 |
17 | /**
18 | * A clock view
19 | *
20 | * @class Clock
21 | * @extends Backbone.View
22 | * @constructor
23 | * @param options {Object} View initialization options (See others in Backbone.View)
24 | * @param options.label='Chart' {String} The component label
25 | * @param options.icon='icon-bar-chart' {String} The icon class name
26 | * @param options.highcharts = {} {Object} Highcharts chart configuration object
27 | */
28 | var Clock = core.Clock = core.Chart.extend({
29 |
30 | // Define the view
31 | name: 'Clock',
32 | tags: ['Utility'],
33 | icon: 'image/Clock.png',
34 | description: 'A nice analog clock',
35 | defaultOptions: {
36 | title: 'Clock',
37 | highcharts: {
38 | chart: {
39 | type: 'gauge',
40 | margin: 0,
41 | plotBackgroundColor: 'transparent',
42 | plotBorderWidth: 0,
43 | plotShadow: false
44 | },
45 | plotOptions: {
46 | gauge: {
47 | dial: {
48 | backgroundColor: 'rgba(200,183,155,1)'
49 | },
50 | pivot: {
51 | backgroundColor: 'rgba(200,183,155,1)'
52 | }
53 | }
54 | },
55 |
56 | yAxis: {
57 | labels: {
58 | distance: -20
59 | },
60 | min: 0,
61 | max: 12,
62 | lineWidth: 0,
63 | showFirstLabel: false,
64 | minorTickInterval: 'auto',
65 | minorTickWidth: 1,
66 | minorTickLength: 5,
67 | minorTickPosition: 'inside',
68 | minorGridLineWidth: 0,
69 | minorTickColor: 'rgba(200,183,155,1)',
70 | tickInterval: 1,
71 | tickWidth: 2,
72 | tickPosition: 'inside',
73 | tickLength: 10,
74 | tickColor: 'rgba(200,183,155,1)',
75 | minPadding:0,
76 | maxPadding:0,
77 | title: {
78 | text: ''
79 | }
80 | },
81 | series: [{
82 | data: [{
83 | id: 'hour',
84 | y: 4,
85 | dial: {
86 | radius: '60%',
87 | baseWidth: 4,
88 | baseLength: '95%',
89 | rearLength: 0
90 | }
91 | }, {
92 | id: 'minute',
93 | y: 20,
94 | dial: {
95 | baseLength: '95%',
96 | rearLength: 0
97 | }
98 | }, {
99 | id: 'second',
100 | y: 0,
101 | dial: {
102 | radius: '100%',
103 | baseWidth: 1,
104 | rearLength: '20%'
105 | }
106 | }],
107 | animation: false,
108 | dataLabels: {
109 | enabled: false
110 | }
111 | }]
112 | }
113 | },
114 |
115 | initialize: function(options) {
116 | var t = this;
117 | options.component.setDefaultSize({
118 | width: 160,
119 | height: 160
120 | });
121 | core.Chart.prototype.initialize.apply(t, arguments);
122 | },
123 |
124 | render: function() {
125 | var t = this;
126 | core.Chart.prototype.render.apply(t, arguments);
127 |
128 | // Remember the last render time so we can refresh.
129 | // The clock needs complete refreshing or it'll peg the cpu
130 | t.lastRender = Date.now();
131 |
132 | // Add the toooltip formatter after the chart is known
133 | t.chart.options.tooltip.formatter = function(){return t.tooltipText;}
134 |
135 | // Kick off the timer
136 | t.onInterval();
137 | },
138 |
139 | onInterval: function() {
140 | var t = this,
141 | hour = t.chart.get('hour'),
142 | minute = t.chart.get('minute'),
143 | second = t.chart.get('second'),
144 | now = t.getNow(),
145 | // run animation unless we're wrapping around from 59 to 0
146 | // animation = now.seconds == 0 ? false : {easing: 'easeOutElastic'};
147 | animation = false;
148 |
149 | // Re-render now?
150 | if ((Date.now() - t.lastRender) > RE_RENDER_AFTER_MS) {
151 | t.$el.html('');
152 | t.render();
153 | return;
154 | }
155 |
156 | // Cache the tooltip text
157 | t.tooltipText =
158 | t.pad(Math.floor(now.hours), 2) + ':' +
159 | t.pad(Math.floor(now.minutes * 5), 2) + ':' +
160 | t.pad(now.seconds * 5, 2);
161 |
162 | hour.update(now.hours, true, animation);
163 | minute.update(now.minutes, true, animation);
164 | second.update(now.seconds, true, animation);
165 |
166 | // Set up for next iteration. This is done via setTimeout vs. setInterval
167 | // because setInterval caused performance problems over time.
168 | setTimeout(function(){t.onInterval();}, 1000);
169 | },
170 |
171 | pad: function(number, length) {
172 | // Create an array of the remaining length +1 and join it with 0's
173 | return new Array((length || 2) + 1 - String(number).length).join(0) + number;
174 | },
175 |
176 | // Get the current time
177 | getNow: function() {
178 | var now = new Date();
179 | return {
180 | hours: now.getHours() + now.getMinutes() / 60,
181 | minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
182 | seconds: now.getSeconds() * 12 / 60
183 | };
184 | }
185 |
186 | });
187 |
188 | // No settings for the clock
189 | Clock.SettingsView = Backbone.View.extend({});
190 |
191 | }(this));
192 |
193 | // Extend jQuery with some easing (copied from jQuery UI)
194 | $.extend($.easing, {
195 | easeOutElastic: function (x, t, b, c, d) {
196 | var s=1.70158;var p=0;var a=c;
197 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
198 | if (a < Math.abs(c)) { a=c; var s=p/4; }
199 | else var s = p/(2*Math.PI) * Math.asin (c/a);
200 | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
201 | }
202 | });
203 |
--------------------------------------------------------------------------------
/lib/view/Gauge.js:
--------------------------------------------------------------------------------
1 | // Gauge.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | UI = Monitor.UI,
10 | core = UI.app.core = UI.app.core || {},
11 | Chart = core.Chart,
12 | Backbone = Monitor.Backbone,
13 | _ = Monitor._;
14 |
15 | /**
16 | * A gague dial
17 | *
18 | * @class Gauge
19 | * @extends Backbone.View
20 | * @constructor
21 | * @param options {Object} View initialization options (See others in Backbone.View)
22 | * @param options.label='Chart' {String} The component label
23 | * @param options.icon='icon-bar-chart' {String} The icon class name
24 | * @param options.highcharts = {} {Object} Highcharts chart configuration object
25 | */
26 | var Gauge = core.Gauge = Chart.extend({
27 |
28 | // Define the view
29 | name: 'Gauge',
30 | tags: ['Chart', 'Real Time'],
31 | icon: 'image/Gauge.png',
32 | description: 'A gauge for displaying a single value change over time',
33 | defaultOptions: {
34 | title: 'Gauge',
35 | highcharts: {
36 | chart: {
37 | type: 'gauge',
38 | margin: 0,
39 | plotBackgroundColor: 'transparent',
40 | plotBorderWidth: 0,
41 | plotShadow: false
42 | },
43 |
44 | pane: {
45 | startAngle: -55,
46 | endAngle: 55,
47 | center: ['50%', '140%'],
48 | size: '250%'
49 | },
50 |
51 | plotOptions: {
52 | gauge: {
53 | dial: {
54 | radius: '100%',
55 | backgroundColor: 'rgba(200,183,155,1)'
56 | },
57 | pivot: {
58 | backgroundColor: 'rgba(200,183,155,1)'
59 | }
60 | }
61 | },
62 |
63 | yAxis: {
64 | labels: {
65 | distance: -22,
66 | style: {
67 | fontSize: '12px'
68 | },
69 | },
70 | min: 180,
71 | max: 230,
72 | tickInterval: 10,
73 |
74 | lineWidth: 0,
75 | showFirstLabel: true,
76 | showLastLabel: true,
77 | minorTickInterval: 'auto',
78 | minorTickWidth: 1,
79 | minorTickLength: 5,
80 | minorTickPosition: 'inside',
81 | minorGridLineWidth: 0,
82 | minorTickColor: 'rgba(200,183,155,1)',
83 | tickWidth: 2,
84 | tickPosition: 'inside',
85 | tickLength: 10,
86 | tickColor: 'rgba(200,183,155,1)',
87 | title: {
88 | text: 'Requests' +
136 | 'Gauge Label ' +
137 | '
' +
139 | '' +
140 | 'Min Value ' +
141 | '
' +
143 | '' +
144 | 'Max Value ' +
145 | '
' +
147 | '' +
148 | 'Interval ' +
149 | '
'
151 | );
152 |
153 | // Set initial field values
154 | t.label = t.$('.ylabel').val(t.hc.yAxis.title.text);
155 | t.min = t.$('.min-value').val(t.hc.yAxis.min);
156 | t.max = t.$('.max-value').val(t.hc.yAxis.max);
157 | t.tick = t.$('.tick-value').val(t.hc.yAxis.tickInterval);
158 |
159 | },
160 |
161 | onChange: function() {
162 | var t = this;
163 | t.hc.yAxis.title.text = t.label.val();
164 | t.hc.yAxis.min = parseInt(t.min.val());
165 | t.hc.yAxis.max = parseInt(t.max.val());
166 | t.hc.yAxis.tickInterval = parseInt(t.tick.val());
167 | }
168 | });
169 |
170 | }(this));
171 |
--------------------------------------------------------------------------------
/lib/view/Html.js:
--------------------------------------------------------------------------------
1 | // Html.js (c) 2012 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | UI = Monitor.UI,
10 | Backbone = Monitor.Backbone,
11 | Mustache = UI.Mustache,
12 | Template = UI.Template,
13 | core = UI.app.core = UI.app.core || {},
14 | _ = Monitor._,
15 | template = null;
16 |
17 | var FONT_SIZES = [
18 | 'x-small', 'small', 'medium',
19 | 'large', 'x-large', 'xx-large'];
20 |
21 | /**
22 | * A generic view for displaying HTML data.
23 | *
24 | * If a monitor is attached to this view, it applies the monitor data
25 | * to the HTML text as a template.
26 | *
27 | * @class Html
28 | * @extends Backbone.View
29 | * @constructor
30 | * @param options {Object} View initialization options (See others in Backbone.View)
31 | * @param options.htmlValue {String} HTML string to place
32 | */
33 | var Html = core.Html = Backbone.View.extend({
34 |
35 | // Define the view
36 | name: 'HTML Template',
37 | tags: ['Web'],
38 | icon: 'image/HTMLView.png',
39 | description: 'Send probe data through an HTML template',
40 | website: 'http://lorenwest.github.com/core-monitor',
41 | defaultOptions: {
42 | htmlValue: ''
43 | },
44 |
45 | // Constructor
46 | initialize: function(options) {
47 | var t = this;
48 | t.options = options;
49 | t.viewOptions = t.options.viewOptions;
50 | t.monitor = t.options.monitor;
51 | t.monitor.on('change', t.setValue, t);
52 | t.viewOptions.on('change', t.setValue, t);
53 | options.component.setDefaultSize({
54 | width: 300,
55 | height: 150
56 | });
57 | },
58 |
59 | render: function() {
60 | var t = this;
61 | t.setValue();
62 | },
63 |
64 | setValue: function() {
65 | var t = this,
66 | htmlValue = t.viewOptions.get('htmlValue'),
67 | monitor = t.monitor;
68 |
69 | // Run the monitor JSON through the template
70 | if (monitor) {
71 | // Send the non-templated value on template failure
72 | try {
73 | t.$el.html(Mustache.render(htmlValue, monitor.toJSON()));
74 | } catch(e) {
75 | t.$el.html(htmlValue);
76 | }
77 | } else {
78 | t.$el.html(htmlValue);
79 | }
80 | },
81 |
82 | // Overridden to unbind form elements
83 | remove: function() {
84 | var t = this;
85 | t.undelegateEvents();
86 | t.monitor.off('change', t.setValue, t);
87 | t.viewOptions.off('change', t.setValue, t);
88 | return Backbone.View.prototype.remove.apply(t, arguments);
89 | }
90 |
91 | });
92 |
93 | // Custom settings form for the Text view
94 | Html.SettingsView = Backbone.View.extend({
95 |
96 | initialize: function(options) {
97 | var t = this;
98 |
99 | // Build the template
100 | if (!template) {
101 | template = Template.fromDOM('#nm-template-core-Html');
102 | }
103 |
104 | // Clear this view when closing
105 | $('#nm-cv-settings').on('hide', function() {
106 | t.remove();
107 | });
108 | },
109 |
110 | events: {
111 | 'click .font-picker' : 'chooseFont'
112 | },
113 |
114 | render: function() {
115 | var t = this;
116 | t.monitor = t.monitor;
117 |
118 | // Render the HTML from the template
119 | t.$el.html(template.get('text'));
120 | t.textarea = t.$el.find('textarea');
121 |
122 | // Attach the monitor picker
123 | t.monitorPicker = new UI.MonitorPicker({
124 | el: t.$('.nm-core-html-monitor'),
125 | model: t.options.monitor
126 | });
127 | t.monitorPicker.render();
128 |
129 | // Attach the color picker
130 | t.$('.color-picker').miniColors({
131 | opacity:true,
132 | change: function(hex, rgba) {
133 | t.editor.composer.commands.exec("setStyles", "color: " + hex);
134 | }
135 | });
136 | t.$('.miniColors-trigger').attr('title', 'Font Color');
137 |
138 | // Create tooltips for all items that have a title
139 | UI.tooltip(t.$('#nm-core-html-toolbar [title]'));
140 |
141 | // Update the component when the textarea is being edited
142 | t.textarea
143 | .val(t.model.get('htmlValue'))
144 | .on('keydown change', function(){
145 | setTimeout(function(){
146 | t.onChange();
147 | },0);
148 | });
149 |
150 | // Attach an HTML editor
151 | t.editor = new wysihtml5.Editor("nm-core-html-textarea", {
152 | name: "nm-core-html-composer",
153 | toolbar: "nm-core-html-toolbar",
154 | style: false,
155 | stylesheets: [
156 | '/static/css/default/bootstrap.min.css',
157 | '/static/css/default/font-awesome.css',
158 | '/static/css/default/UI.css',
159 | '/static/css/default/PageView.css',
160 | '/static/css/default/ComponentView.css',
161 | '/app/core/css/Core.css',
162 | '/app/core/css/wysihtml5.css'],
163 | parser: function(str) {return str;} // Disable HTML sanitation
164 | });
165 |
166 | // Add the drop-down caret to dropdown toolbar items
167 | t.fontPicker = t.$el.find('.font-picker');
168 | UI.DropDownMenu.addCaret(t.fontPicker);
169 |
170 | // Intercept the setText method of the wysihtml5 TextArea
171 | // to update the component when the HTML editor is active.
172 | var oldSet = t.editor.textarea.setValue;
173 | t.editor.textarea.setValue = function() {
174 | oldSet.apply(t.editor.textarea, [arguments[0]]);
175 | t.onChange();
176 | }
177 |
178 | // Build a setStyle function to allow setting styles on a selected element
179 | wysihtml5.commands.setStyles = {
180 | exec: function(composer, command, styles) {
181 | // Make sure the element is wrapped in a span
182 | wysihtml5.commands.formatInline.exec(composer, command, "span");
183 | var selection = composer.selection.getSelectedNode();
184 | if (selection && selection.parentElement) {
185 | wysihtml5.dom.setStyles(styles).on(selection.parentElement);
186 | }
187 | }
188 | };
189 |
190 | },
191 |
192 | chooseFont: function() {
193 | var t = this,
194 | startPos = 26,
195 | model = [];
196 |
197 | // Add font sizes to the model
198 | FONT_SIZES.forEach(function(size){
199 | model.push(
200 | // Change startPos if this string changes!!
201 | '' + size + ' ');
204 | });
205 |
206 | // Add the dropdown menus to the toolbar
207 | var dropDown = new UI.DropDownMenu({
208 | contextEl: t.fontPicker,
209 | model: model
210 | });
211 | dropDown.on('select', function(item) {
212 | var size = item.substr(26).split('"')[0];
213 | t.editor.composer.commands.exec("fontSize", size);
214 | }).render();
215 | },
216 |
217 | onChange: function() {
218 | var t = this,
219 | htmlValue = t.textarea.val();
220 | t.model.set('htmlValue', htmlValue);
221 | },
222 |
223 | remove: function() {
224 | var t = this;
225 | t.monitorPicker.remove();
226 | t.$el.html('');
227 | return Backbone.View.prototype.remove.apply(t, arguments);
228 | }
229 |
230 | });
231 |
232 |
233 | }(this));
234 |
--------------------------------------------------------------------------------
/lib/view/Inspector.js:
--------------------------------------------------------------------------------
1 | // Inspector.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | UI = Monitor.UI,
10 | Backbone = Monitor.Backbone,
11 | _ = Monitor._;
12 |
13 | /**
14 | * View the probe JSON
15 | *
16 | * @class Inspector
17 | * @extends Backbone.View
18 | * @constructor
19 | * @param options {Object} View initialization options (See others in Backbone.View)
20 | */
21 | var Inspector = UI.app.core.Inspector = Backbone.View.extend({
22 |
23 | // Define the view
24 | name: 'Object Inspector',
25 | tags: ['Utility'],
26 | icon: 'image/ObjectInspector.png',
27 | description: 'Inspects variables and expressions in the browser or Node.js process',
28 | defaultOptions: {
29 | title: 'Object Inspector',
30 | background: true
31 | },
32 |
33 | initialize: function(options) {
34 | var t = this;
35 | // Initialize a blank monitor
36 | t.monitor = options.monitor;
37 | t.component = options.component;
38 | if (!t.monitor.get('probeClass')) {
39 | t.monitor.set({
40 | probeClass: 'Inspect',
41 | initParams: {
42 | key: Monitor.commonJS ? 'global' : 'window',
43 | depth: Monitor.commonJS ? 2 : 1
44 | }
45 | });
46 | }
47 | options.component.setDefaultSize({
48 | width: 350,
49 | height: 400
50 | });
51 | },
52 |
53 | events: {
54 | },
55 |
56 | render: function() {
57 | var t = this;
58 |
59 | // Clear out any prior JSON
60 | if (t.jsonView) {
61 | t.jsonView.remove();
62 | t.jsonView = null;
63 | }
64 | t.outerView = t.$el.html('
')
65 | .find('.nm-core-inspector');
66 | t.jsonView = new UI.JsonView({
67 | heading: "INSPECTING: " + t.monitor.get('initParams').key,
68 | model: t.monitor.get('value'),
69 | closedOnInit: true
70 | });
71 | t.jsonView.render();
72 | t.outerView.append(t.jsonView.$el);
73 |
74 | // Re-render on change
75 | t.resetData = function(){
76 | t.jsonView.setData(t.monitor.get('value'));
77 | };
78 | t.monitor.on('change:value', t.resetData, t);
79 | },
80 |
81 | destroy: function() {
82 | var t = this;
83 | t.monitor.off('change:value', t.resetData, t);
84 | }
85 |
86 | });
87 |
88 | // Custom settings form
89 | Inspector.SettingsView = Backbone.View.extend({
90 |
91 | render: function() {
92 | var t = this;
93 | t.monitor = t.options.monitor;
94 | t.$el.html('' +
95 | '' +
101 | '' +
102 | 'JSON Depth ' +
103 | '
');
105 |
106 | // Append a server picker
107 | t.serverPicker = new UI.MonitorPicker.ServerView({
108 | el: t.$el.find('.server'),
109 | model: t.monitor
110 | });
111 | t.serverPicker.render();
112 | }
113 |
114 | });
115 |
116 | }(this));
117 |
--------------------------------------------------------------------------------
/lib/view/LineChart.js:
--------------------------------------------------------------------------------
1 | // LineChart.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | UI = Monitor.UI,
10 | core = UI.app.core = UI.app.core || {},
11 | Chart = core.Chart,
12 | Backbone = Monitor.Backbone,
13 | _ = Monitor._;
14 |
15 | /**
16 | * A line chart view
17 | *
18 | * @class LineChart
19 | * @extends Backbone.View
20 | * @constructor
21 | * @param options {Object} View initialization options (See others in Backbone.View)
22 | * @param options.label='Chart' {String} The component label
23 | * @param options.icon='icon-bar-chart' {String} The icon class name
24 | * @param options.highcharts = {} {Object} Highcharts chart configuration object
25 | */
26 | var LineChart = core.LineChart = Chart.extend({
27 |
28 | // Define the view
29 | name: 'LineChart',
30 | tags: ['Chart', 'Time Series', 'Real Time'],
31 | icon: 'image/LineChart.png',
32 | description: 'A line chart',
33 | defaultOptions: {
34 | title: 'Line Chart',
35 | highcharts: {
36 | chart: {
37 | type: 'line',
38 | margin: null
39 | },
40 | legend: {
41 | enabled: false
42 | },
43 | xAxis: {
44 | title: {
45 | text: 'Values'
46 | },
47 | labels: {
48 | enabled:true
49 | }
50 | },
51 | yAxis: {
52 | title: {
53 | text: ''
54 | },
55 | labels: {
56 | enabled:true
57 | }
58 | },
59 | plotOptions: {
60 | line: {
61 | }
62 | },
63 | series: [{
64 | name: 'value',
65 | data: [1,0,4,10,3,8,7,7,3,0,5]
66 | }]
67 | }
68 | },
69 |
70 | initialize: function(options) {
71 | var t = this;
72 | Chart.prototype.initialize.apply(t, arguments);
73 | }
74 |
75 | });
76 |
77 | // This settings form is inherited by all charts.
78 | LineChart.SettingsView = Chart.SettingsView.extend({
79 |
80 | // Extend for local events
81 | events: _.extend({}, Chart.SettingsView.prototype.events, {
82 | "change *" : "onChange"
83 | }),
84 |
85 | render: function() {
86 | var t = this;
87 |
88 | // Call parent render to set up dom
89 | Chart.SettingsView.prototype.render.apply(t, arguments);
90 |
91 | // Set my title & HTML
92 | $('.core-chart-settings').append('' +
93 | '' +
94 | 'X Axis Label ' +
95 | '
' +
97 | '' +
98 | 'Y Axis Label ' +
99 | '
'
101 | );
102 |
103 | // Set initial field values
104 | t.xlabel = t.$('.xlabel').val(t.hc.xAxis.title.text);
105 | t.ylabel = t.$('.ylabel').val(t.hc.yAxis.title.text);
106 | },
107 |
108 | onChange: function() {
109 | var t = this;
110 | t.hc.xAxis.title.text = t.xlabel.val();
111 | t.hc.yAxis.title.text = t.ylabel.val();
112 | }
113 | });
114 |
115 | }(this));
116 |
--------------------------------------------------------------------------------
/lib/view/LogViewer.js:
--------------------------------------------------------------------------------
1 | // LogViewer.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | logger = Monitor.getLogger('LogViewer'),
10 | UI = Monitor.UI,
11 | Backbone = Monitor.Backbone,
12 | core = UI.app.core = UI.app.core || {},
13 | _ = Monitor._;
14 |
15 | /**
16 | * A viewer for log statements
17 | *
18 | * @class LogViewer
19 | * @extends Backbone.View
20 | * @constructor
21 | * @param options {Object} View initialization options (See others in Backbone.View)
22 | */
23 | var LogViewer = core.LogViewer = Backbone.View.extend({
24 |
25 | // Define the view
26 | name: 'Log Viewer',
27 | tags: ['Utility'],
28 | icon: 'image/LogViewer.png',
29 | description: 'A listener and viewer for application logs',
30 | website: 'http://lorenwest.github.com/core-monitor',
31 | defaultOptions: {
32 | title: 'Log Viewer',
33 | background: true
34 | },
35 |
36 | // Constructor
37 | initialize: function(options) {
38 | var t = this;
39 | t.options = options;
40 | t.monitor = options.monitor;
41 | options.component.setDefaultSize({
42 | width: 600,
43 | height: 400
44 | });
45 |
46 | // Set default monitor options
47 | if (!t.monitor.get('probeClass')) {
48 | t.monitor.set({
49 | probeClass: 'Log',
50 | initParams: {
51 | pattern: "{trace,debug,info,warn,error,fatal}.*"
52 | }
53 | });
54 | }
55 |
56 | // Set up logging
57 | t.logCtxt = t.monitor.get('initParams');
58 | logger.info('init', t.logCtxt);
59 | },
60 |
61 | // Process output from the backend
62 | _onChange: function(monitorEvent){
63 | var t = this,
64 | bundle = t.monitor.get('bundle');
65 |
66 | logger.info('onChange', t.logCtxt, bundle);
67 | if (bundle) {
68 | bundle.forEach(function(logItem) {
69 | t.lineOut(logItem);
70 | });
71 | }
72 | },
73 |
74 | render: function() {
75 | var t = this;
76 |
77 | // Create the monitor in the loading state
78 | t.body = $('').appendTo(t.$el);
79 |
80 | // Listen for monitor events
81 | t.monitor.on('change', t._onChange, t);
82 | },
83 |
84 | events: {
85 | "click .output_line": "onOpenClose"
86 | },
87 |
88 | onOpenClose: function(e) {
89 | var t = this,
90 | elem = $(e.currentTarget);
91 |
92 | elem.toggleClass('opened');
93 | t.displayLine(elem);
94 | },
95 |
96 | // Output a log line to the viewer
97 | lineOut: function(logItem){
98 | var t = this;
99 |
100 | // Generate a line to output to
101 | lastLine = $('
')
54 | .find('.nm-core-probe');
55 |
56 | t.jsonView = new UI.JsonView({model: t.monitor, closedOnInit:true});
57 | t.jsonView.render();
58 | t.outerView.append(t.jsonView.$el);
59 |
60 | }
61 |
62 | });
63 |
64 | // Custom settings form
65 | Probe.SettingsView = Backbone.View.extend({
66 |
67 | initialize: function(options) {
68 | var t = this;
69 | },
70 |
71 | events: {
72 | },
73 |
74 | render: function() {
75 | var t = this;
76 | t.monitor = t.options.monitor;
77 |
78 | // Append a monitor picker
79 | t.monitorPicker = new UI.MonitorPicker({
80 | el: t.$el,
81 | model: t.monitor
82 | });
83 | t.monitorPicker.render();
84 | },
85 |
86 | });
87 |
88 | }(this));
89 |
--------------------------------------------------------------------------------
/lib/view/Slider.js:
--------------------------------------------------------------------------------
1 | // Slider.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | UI = Monitor.UI,
10 | core = UI.app.core = UI.app.core || {},
11 | Backbone = Monitor.Backbone,
12 | _ = Monitor._;
13 |
14 | /**
15 | * A generic slider
16 | *
17 | * The slider is initialized with a minimum, maximum, and current value, which
18 | * sets the initial position.
19 | *
20 | * As the slider is moved, the 'onSlide' event is emitted from the view.
21 | *
22 | *
23 | * @class Slider
24 | * @extends Backbone.View
25 | * @constructor
26 | * @param options {Object} View initialization options (See others in Backbone.View)
27 | * @param [options.min=0] {Numeric} The minimum value
28 | * @param [options.max=100] {Numeric} The maximum value
29 | * @param [options.step=1] {Numeric} The slider step amount
30 | * @param [options.initial=0] {Numeric} The initial slider value
31 | * @param options.onSlide {String} Javascript code to run when the slider is positioned.
32 | */
33 | var Slider = core.Slider = Backbone.View.extend({
34 |
35 | // Define the view
36 | name: 'Slider',
37 | tags: ['Control'],
38 | icon: 'image/Slider.png',
39 | description: 'Displays a slider control, firing onSlide events as the control is moved',
40 | website: 'http://lorenwest.github.com/core-monitor',
41 | defaultOptions: {
42 | min: 0,
43 | max: 100,
44 | step: 1,
45 | initial: 0,
46 | onSlide: ''
47 | },
48 |
49 | initialize: function(options) {
50 | var t = this;
51 | t.viewOptions = t.options.viewOptions;
52 | },
53 |
54 | events: {
55 | 'change .nm-core-slider': 'onSlide',
56 | 'keyup .nm-core-slider': 'onChange',
57 | 'mouseup .nm-core-slider': 'onChange',
58 | 'keydown .nm-core-slider': 'onDown',
59 | 'mousedown .nm-core-slider': 'onDown'
60 | },
61 |
62 | render: function() {
63 | var t = this,
64 | viewOpts = t.viewOptions.toJSON();
65 | t.slider = t.$el
66 | .html('' +
141 | 'Slider Label ' +
142 | 'Icon ' +
144 | '' +
145 | '(no icon) ' +
146 | ' ' +
147 | 'On Slider Press ' +
149 | '' +
150 | '
'
151 | ;
152 |
153 | }(this));
154 |
--------------------------------------------------------------------------------
/lib/view/SparkLine.js:
--------------------------------------------------------------------------------
1 | // SparkLine.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | UI = Monitor.UI,
10 | core = UI.app.core = UI.app.core || {},
11 | Chart = core.Chart,
12 | Backbone = Monitor.Backbone,
13 | _ = Monitor._;
14 |
15 | /**
16 | * A sparkline view
17 | *
18 | * @class SparkLine
19 | * @extends Backbone.View
20 | * @constructor
21 | * @param options {Object} View initialization options (See others in Backbone.View)
22 | * @param options.label='Chart' {String} The component label
23 | * @param options.icon='icon-bar-chart' {String} The icon class name
24 | * @param options.highcharts = {} {Object} Highcharts chart configuration object
25 | */
26 | var SparkLine = core.SparkLine = Chart.extend({
27 |
28 | // Define the view
29 | name: 'SparkLine',
30 | tags: ['Chart', 'Time Series', 'Real Time'],
31 | icon: 'image/SparkLine.png',
32 | description: 'Displays time-series data in a compact form',
33 | defaultOptions: {
34 | title: 'Spark Line',
35 | highcharts: {
36 | chart: {
37 | type: 'line',
38 | marginTop: 0,
39 | marginBottom: 0,
40 | marginRight: 5
41 | },
42 | legend: {
43 | enabled: false
44 | },
45 | xAxis: {
46 | lineWidth: 0,
47 | gridLineWidth: 0,
48 | tickWidth: 0,
49 | labels: {
50 | enabled:false
51 | }
52 | },
53 | yAxis: {
54 | gridLineWidth: 0,
55 | tickWidth: 0,
56 | maxPadding:0,
57 | minPadding:0,
58 | endOnTick:true,
59 | title: {
60 | text: ''
61 | },
62 | labels: {
63 | enabled:false
64 | }
65 | },
66 | plotOptions: {
67 | line: {
68 | color: 'rgba(200,183,155,1)',
69 | marker: {
70 | enabled: false
71 | }
72 | }
73 | },
74 | series: [{
75 | name: 'value',
76 | data: [1,0,4,10,3,8,7,7,3,0,5]
77 | }]
78 | }
79 | },
80 |
81 | initialize: function(options) {
82 | var t = this;
83 | options.component.setDefaultSize({
84 | width: 240,
85 | height: 80
86 | });
87 | Chart.prototype.initialize.apply(t, arguments);
88 | }
89 |
90 | });
91 |
92 | }(this));
93 |
--------------------------------------------------------------------------------
/lib/view/WebView.js:
--------------------------------------------------------------------------------
1 | // WebView.js (c) 2010-2013 Loren West and other contributors
2 | // May be freely distributed under the MIT license.
3 | // For further details and documentation:
4 | // http://lorenwest.github.com/core-monitor
5 | (function(root){
6 |
7 | // Module loading
8 | var Monitor = root.Monitor || require('monitor-dashboard'),
9 | UI = Monitor.UI,
10 | Backbone = Monitor.Backbone,
11 | _ = Monitor._;
12 |
13 | /**
14 | * Web page viewport
15 | *
16 | * @class WebView
17 | * @extends Backbone.View
18 | * @constructor
19 | * @param options {Object} View initialization options (See others in Backbone.View)
20 | */
21 | var WebView= UI.app.core.WebView= Backbone.View.extend({
22 |
23 | // Define the view
24 | name: 'Web Snippet',
25 | tags: ['Web'],
26 | icon: 'image/WebClip.png',
27 | description: 'Displays a snippet of a remote web page',
28 | defaultOptions: {
29 | title: 'Web Snippet',
30 | background: true,
31 | siteUrl: '',
32 | scrollBars: false,
33 | offsetTop: 0,
34 | offsetLeft: 0
35 | },
36 |
37 | initialize: function(options) {
38 | var t = this;
39 | t.component = options.component;
40 | t.viewOptions = options.viewOptions;
41 | if (t.component) {
42 | t.component.setDefaultSize({
43 | width: 300,
44 | height: 300
45 | });
46 | }
47 |
48 | // Change immediately on option changes
49 | t.viewOptions.on('change', function(){t.style(false);});
50 | },
51 |
52 | render: function() {
53 | var t = this;
54 |
55 | // Place the iframe & style it
56 | t.view =
57 | t.$el.html(
58 | '' +
59 | '' +
60 | '
')
61 | .find('.nm-core-wv');
62 | t.iFrame = t.view.find('.nm-core-wv-iframe');
63 | t.style(true);
64 | t.iFrame.on('load', function(){
65 | t.style();
66 | setTimeout(function(){
67 | t.style();
68 | }, 0);
69 | });
70 | },
71 |
72 | style: function(initial) {
73 | var t = this,
74 | css,
75 | opts = t.viewOptions.toJSON();
76 |
77 | // Style the iframe
78 | t.view.toggleClass('scroll-bars', opts.scrollBars);
79 |
80 | // On initial load, use margins for scrolling.
81 | // This prevents an initial flash while the iframe loads
82 | if (initial) {
83 | css = {
84 | marginTop: Math.min(opts.offsetTop, 0),
85 | marginLeft: Math.min(opts.offsetLeft, 0)
86 | };
87 | t.view.scrollTop(0);
88 | t.view.scrollLeft(0);
89 | } else {
90 | css = {
91 | marginTop: 0,
92 | marginLeft: 0
93 | };
94 | t.view.scrollTop(opts.offsetTop * -1);
95 | t.view.scrollLeft(opts.offsetLeft * -1);
96 | }
97 | t.iFrame.css(css);
98 |
99 | // Don't reload the page on re-style unless the url changed
100 | if (opts.siteUrl !== t.currentSiteUrl) {
101 | t.iFrame.attr('src', opts.siteUrl);
102 | t.currentSiteUrl = opts.siteUrl;
103 | }
104 |
105 | }
106 |
107 | });
108 |
109 | // Custom settings form
110 | WebView.SettingsView = Backbone.View.extend({
111 |
112 | initialize: function(options) {
113 | var t = this;
114 | t.options = options;
115 | t.viewOptions = t.options.component.get('viewOptions');
116 | },
117 |
118 | events: {
119 | // Don't be so aggressive on keydown
120 | 'keydown .nm-core-wv-url': function(e){e.stopPropagation()},
121 | 'mousedown .nm-core-wv-example-mask': 'startDrag'
122 | },
123 |
124 | render: function() {
125 | var t = this;
126 | t.monitor = t.options.monitor;
127 | t.$el.html('' +
128 | '' +
129 | 'Page URL ' +
130 | 'Scrollbars:
' +
133 | 'Drag to position ' +
134 | '' +
135 | '
' +
136 | '
' +
137 | '
Monitor Apps
",
11 | "background": true,
12 | "title": ""
13 | },
14 | "css": {
15 | ".nm-cv": "top:10px; z-index:5; left:0px;",
16 | ".nm-cv-viewport": "height:90px; width:860px;"
17 | },
18 | "monitor": {}
19 | },
20 | {
21 | "id": "c2",
22 | "viewClass": "core.Html",
23 | "viewOptions": {
24 | "htmlValue": "\n
Probes \n
\nProbes are JavaScript classes installed into (or close to) the systems being monitored. Similar in concept to JMX beans in the Java world, probes are simply data models describing the system being monitored.\n
\n
\nBuilt as Backbone.js data models, probes are easy to write. Just add data elements when initialized, and set them as they change. Probes are activated only while being monitored, and changes are forwarded to monitors in real time using socket.io push.\n
\n\n
\n
Node.js developers can extend node-monitor, adding customized monitors and dashboard views for your application. Monitor apps can be included in your own Node.js application, or packaged separately for installation by npm.
\n
\n
Views \n
\nViews are client-side components placed into the dashboard to visualize probes.\n
\nWhen installed, views appear in the New Component screen, and can be added to any dashboard. They come with a standard settings screen that is often extended to offer fine grained configuration.\n
\nViews can also pass user input on to probes having remote control functionality, turning your dashboards into control panels.\n
\nBuilt as Backbone.js view objects, creating custom views is straight forward with many exaples to copy from.\n
\n\n
\n
Pages & Tours \n
\nMonitor apps can also contain pre-built dashboards (pages) and tours.\n
\nPages delivered with your application are shown in the sidebar under the \"App Pages\" menu, and tours delivered with your application are shown in the \"App Tours\" menu.\n
\nFor example, these documentation pages are pages contained in the core-monitor app.\n
\n\n
\n
Getting Started \n
If you're still reading, you're probably thinking about building some sweet monitors for your own project.\n
\nThe Applications section has tools to get you started, technical documentation, and links to developer forums to answer your questions. \n
\n
Monitor App Development
",
11 | "background": true,
12 | "title": ""
13 | },
14 | "css": {
15 | ".nm-cv": "top:10px; z-index:5; left:0px;",
16 | ".nm-cv-viewport": "height:90px; width:860px;"
17 | },
18 | "monitor": {}
19 | },
20 | {
21 | "id": "c2",
22 | "viewClass": "core.Html",
23 | "viewOptions": {
24 | "htmlValue": "\n
Probes \n
\nProbes are JavaScript classes installed into (or close to) the systems being monitored. Similar in concept to JMX beans in the Java world, probes are simply data models describing the system being monitored.\n
\n
\nBuilt as Backbone.js data models, probes are easy to write. Just add data elements when initialized, and set them as they change. Probes are activated only while being monitored, and changes are forwarded to monitors in real time using socket.io push.\n
\n\n
\n
Node.js developers can extend node-monitor, adding customized monitors and dashboard views for your application. Monitor apps can be included in your own Node.js application, or packaged separately for installation by npm.
\n
\n
Views \n
\nViews are client-side components placed into the dashboard to visualize probes.\n
\nWhen installed, views appear in the New Component screen, and can be added to any dashboard. They come with a standard settings screen that is often extended to offer fine grained configuration.\n
\nViews can also pass user input on to probes having remote control functionality, turning your dashboards into control panels.\n
\nBuilt as Backbone.js view objects, creating custom views is straight forward with many exaples to copy from.\n
\n\n
\n
Pages & Tours \n
\nMonitor apps can also contain pre-built dashboards (pages) and tours.\n
\nPages delivered with your application are shown in the sidebar under the \"App Pages\" menu, and tours delivered with your application are shown in the \"App Tours\" menu.\n
\nFor example, these documentation pages are pages contained in the core-monitor app.\n
\n\n
\n
Getting Started \n
If you're still reading, you're probably thinking about building some sweet monitors for your own project.\n
\nThe Applications section has tools to get you started, technical documentation, and links to developer forums to answer your questions. \n
\n
\n
Component \n
\n The app viewer provides a quick overview of your application process.
Current CPU activity and load averages show how hard the CPU is working.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
\n The Bar Chart displays numeric data vertically.
Data can be statically modified in the component's settings menu, or can be dynamically modified with probe data from your app servers.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
\n The Button component allows you to write javascript code to run when the button is pressed.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
\n The clock is a handy component to drop onto your dashboard when it's important to show the local time.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
\n The HTML Template component allows you to write any HTML directly onto your dashboard.
You can switch from an HTML WYSIWYG view to the raw HTML, depending on the format you are most comfortable with.
It's called a template because it allows you to define mustache-style template parameters {{ and }}, and have those parameters filled in from a probe running in your app server.
Possibly the most widely used component, this gives you full control of your dashboard content and style.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
<h1>
My Heading
<p>
<p>
\n<%={{ }}=%>",
53 | "background": true,
54 | "title": "HTML Template"
55 | },
56 | "css": {
57 | ".nm-cv": "top:180px; z-index:9; left:10px;",
58 | ".nm-cv-viewport": "height:200px; width:250px;"
59 | },
60 | "monitor": {}
61 | },
62 | {
63 | "id": "c6",
64 | "viewClass": "core.Html",
65 | "viewOptions": {
66 | "htmlValue": "My Heading
My first paragraph.
Host name: {{hostname}}
",
67 | "background": true,
68 | "title": "HTML Template"
69 | },
70 | "css": {
71 | ".nm-cv": "top:220px; z-index:10; left:200px;",
72 | ".nm-cv-viewport": "height:210px; width:190px;"
73 | },
74 | "monitor": {
75 | "probeClass": "Process",
76 | "appInstance": "1"
77 | }
78 | }
79 | ]
80 | }
--------------------------------------------------------------------------------
/site_db/Page/Components/LineChart.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "/app/core/Components/LineChart",
3 | "title": "Line Chart",
4 | "description": "Documentation page for the Line Chart component.",
5 | "components": [
6 | {
7 | "id": "c1",
8 | "viewClass": "core.Html",
9 | "viewOptions": {
10 | "htmlValue": "\n",
11 | "background": true,
12 | "title": ""
13 | },
14 | "css": {
15 | ".nm-cv": "top:10px; z-index:5; left:0px;",
16 | ".nm-cv-viewport": "height:90px; width:860px;"
17 | },
18 | "monitor": {}
19 | },
20 | {
21 | "id": "c3",
22 | "viewClass": "core.Html",
23 | "viewOptions": {
24 | "htmlValue": "\n
Component \n
\n The Line Chart component, or line graph is a type of chart which displays information as a series of data points connected by straight line segments. Data can be statically modified in the component settings menu or can be dynamically modified with probe data.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
\n This isn't a normal log viewer. It shows log statements as they happen by listening to log events fired on your app server.
You can select which log statements to view, and if the logs consist of JSON objects, they can be expanded inline, offering a dense overview with drill-down capabilities.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
\n The Object Inspector component allows you to explore the properties of objects in your browser or app server.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
\n The Pie Chart component is a circular chart divided into sectors, illustrating relative magnitudes or frequencies. Values can be statically modified in the component's settings menu, or can be dynamically modified with probe data.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
\n The Probe Viewer component provides a view of the JSON value of any probe installed in your app server, updated in real-time.\n
\n
\n The example to the left is showing a process probe. Scroll down a bit to see some values changing in real time.\n
\n
\n Complex objects can be expanded and contracted by selecting the
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
The REPL Console is a developer's component that facilitates exploratory debugging for your app servers.\n
\nIt's used mostly during development, and invaluable when your process isn't acting the way it should, and you need to poke around.\n
\nPlacing key top level objects onto the Node.js global namespace can make working in the REPL Console more enjoyable.\n
\nBe careful though. You're working in the same process as your app server.\n
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
\n The Slider component is a device that shows and allows you to change incremental values of an object. The value can be set from probe data, and user altered values can be forwarded to probes running in your app server.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
\n The Spark Line component enables you to create a Spark Line graph - a very small line chart, typically drawn without axes or coordinates.\n
\n
\n Values can be statically modified in the component's settings menu, or can be dynamically modified with probe data from your app servers.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
\n
Component \n
\n The Web Snippet is a tool that displays a portion of an external web page right on your dashboard.\n
\n
\nSome examples would be to view video clips, stream an RSS feed, or keep an eye on your stock reports.\n
This can be used for sites that don't prevent <iframe> usage.
\n
\n
\n
\n Tweet to #NodeMonitor or add/view issues on GitHub.\n\n
\n
Dashboards
",
11 | "background": true,
12 | "title": ""
13 | },
14 | "css": {
15 | ".nm-cv": "top:10px; z-index:5; left:0px;",
16 | ".nm-cv-viewport": "height:90px; width:860px;"
17 | },
18 | "monitor": {}
19 | },
20 | {
21 | "id": "c2",
22 | "viewClass": "core.Html",
23 | "viewOptions": {
24 | "htmlValue": "\n
Header \n
\n The header contains the page title and main menu. Most page elements show more information when you hover over them.
For example, clicking the Node Monitor logo to the right hides and shows the header bar.
\n
\n
Sidebar \n
\n Pages in your site are shown in the sidebar for easy navigation, organized by the path to the page.\n
\n
\n Page tours are also shown in the sidebar, and can be run by selecting the tour. For more on tours, head over to the tour overview page.
\n
\n
Components \n
\n Components are the items contained on a dashboard page. They are added by selecting \"Add a Component\" on the menu, and they can be sized and positioned anywhere on the dashboard. Move your mouse over this to see the components that make up this page.
\n
\n
Core Components \n
\n The following components are installed by default from the core-monitor project. Click the icon for more information.
\n
\n\n \n \n App Viewer \n An application process viewer
\n \n \n\n \n \n Bar Chart \n A Highcharts bar chart
\n \n \n\n \n \n Button \n A button to place on a page that runs javascript when pressed
\n \n \n\n \n \n Clock \n A clock can put a finishing touch on a dashboard
\n \n \n\n \n \n Gauge \n A fuel gauge for expressing the current state
\n \n \n\n \n \n HTML Template \n Place any HTML on your dashboard, optionally merging backend data with text.
\n \n \n\n \n \n Line Chart \n A highcharts line chart
\n \n \n\n \n \n Log Viewer \n A highly configurable log viewer, with a filtering and JSON expansion.
\n \n \n\n \n \n Object Inspector \n Monitor any globally available object. If the object is a backbone model, monitor changes in real time.
\n \n \n\n \n \n Pie Chart \n A Highcharts pie chart
\n \n \n\n \n \n Probe Viewer \n Monitor any probe running in any of your Node.js processes.
\n \n \n\n \n \n REPL Console \n Yeah. In a browser.
\n \n \n\n \n \n Slider \n Show the state of a numeric variable, and allow user input.
\n \n \n\n \n \n Spark Line \n A Highcharts line chart, without the dressing.
\n \n \n\n \n \n Web Snippet \n Embed a snippet of another web page in your dashboard.
\n \n \n\n
\n
\n
\n This is a clock component to the left.\n
\n
\n It has a title bar on the top and the clock inside. You can position the clock on the page by dragging in the title bar, to the right of the title.\n
\n
\n
\n After dragging the clock to a new position, you may notice an asterisk (*) to the left of the page title. That says the page is dirty and needs saving.\n
\n
\nRefreshing the page when it's dirty will restore it to the way it was before your changes.\n
\n
\n
\n Each page on this site is a dashboard with the following elements:
\n
Site Tours
",
11 | "background": true,
12 | "title": ""
13 | },
14 | "css": {
15 | ".nm-cv": "top:10px; z-index:5; left:0px;",
16 | ".nm-cv-viewport": "height:90px; width:860px;"
17 | },
18 | "monitor": {}
19 | },
20 | {
21 | "id": "c2",
22 | "viewClass": "core.Html",
23 | "viewOptions": {
24 | "htmlValue": "\n
Finding Tours \n
Tours are located at the bottom of the left sidebar, and are organized by the monitor application containing the tour.
\n\n
\n\n
Running Tours \n
When a tour is selected from the sidebar, the first page of the tour is loaded and a tour control is displayed at the bottom of the screen. The tour runs until it is paused or stopped from the control.\n
\n
\nMost tours cycle through pages at a specified interval.\n
\n
\n
\n Tours guide you through a series of pages on your site.
\n
\n
Managing Tours \n
Tours can be added and edited by selecting the tour settings icon, which appears when hovering over the tour heading bar.
\n\n
\n
Settings \n
Pages can be re-arranged, added, and removed in the tour settings page.
To add a new tour, press the
\n\n
Welcome to the
",
39 | "background": true,
40 | "title": ""
41 | },
42 | "css": {
43 | ".nm-cv": "top:10px; z-index:5; left:4px;",
44 | ".nm-cv-viewport": "height:150px; width:860px;"
45 | },
46 | "monitor": {}
47 | },
48 | {
49 | "id": "c4",
50 | "viewClass": "core.Html",
51 | "viewOptions": {
52 | "htmlValue": "\n
Dashboards \n
\n Each page on this site is a dashboard. Create as many dashboards as you like, and organize them into groups.\n
\n
\n The Dashboard Overview page shows how to navigate this site and create your own dashboards.\n
\n
Tours \n
\n You can take a tour of selected dashboard pages by selecting a tour in the sidebar to the left. \n
\n
\n The Tour Overview page has more about running and writing tours.\n
\n
Apps \n
\n Monitor apps are specialized monitors and components you can install for your dashboards.\n
\n
\n Learn more about developing monitors for your own Node.js modules and apps at the Apps Overview page.\n
\n
![](\"/app/core/image/AppViewer.png\" "\\"Image:")
App Viewer
10 | 
11 |
12 | License
13 | -------
14 |
15 | May be freely distributed under the MIT license
16 |
17 | See [LICENSE](https://github.com/lorenwest/core-monitor/blob/master/LICENSE) file.
18 |
19 | Copyright (c) 2010-2013 Loren West, and other contributors
20 |
--------------------------------------------------------------------------------
/config/runtime.json:
--------------------------------------------------------------------------------
1 | {
2 | "MonitorMin": {
3 | "consoleLogListener": {
4 | "pattern": ""
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/lib/css/Core.css:
--------------------------------------------------------------------------------
1 | #nm-core-html-textarea {
2 | height: 225px;
3 | }
4 |
5 | #nm-core-html-toolbar span {
6 | text-align: center;
7 | padding: 4px 0px;
8 | margin: 2px;
9 | font-size: 16px;
10 | font-weight: bold;
11 | display: block;
12 | float: left;
13 | height: 18px;
14 | width: 28px;
15 | border: 1px solid transparent;
16 | border-radius: 3px;
17 | }
18 |
19 | #nm-core-html-toolbar span:hover {
20 | border: 1px solid #ccc;
21 | cursor: default;
22 | }
23 |
24 | #nm-core-html-toolbar span.miniColors-triggerWrap {
25 | padding: 0;
26 | margin-top: 5px;
27 | border:none;
28 | }
29 | #nm-core-html-toolbar span.miniColors-triggerWrap:hover {
30 | border:none;
31 | }
32 | #nm-core-html-toolbar .miniColors-trigger {
33 | border: 1px solid #eee;
34 | }
35 | #nm-core-html-toolbar .miniColors-trigger:hover {
36 | cursor: default;
37 | border: 1px solid #bbb;
38 | }
39 |
40 | .nm-core-slider {
41 | width: 100%;
42 | }
43 |
44 | .nm-core-html-composer {
45 | box-sizing: border-box;
46 | width: 100%;
47 | background-color: white;
48 | background-image: none;
49 | margin-bottom: 5px;
50 | color: #555;
51 | }
52 | .wysihtml5-sandbox.nm-core-html-composer {
53 | border: 1px solid #ccc;
54 | height: 225px;
55 | }
56 |
57 | .wysihtml5-editor.nm-core-html-composer {
58 | padding: 4px;
59 | height: 223px;
60 | }
61 |
62 | .nm-core-html-dialog {
63 | clear: both;
64 | border: 1px solid #ccc;
65 | border-radius: 10px;
66 | padding: 10px;
67 | margin-bottom: 5px;
68 | background: white;
69 | }
70 |
71 | .nm-core-html-dialog label {
72 | display: inline;
73 | }
74 |
75 | .nm-core-html-dialog input {
76 | margin: 0px 10px 2px 5px;
77 | }
78 |
79 | .nm-core-html-dialog button {
80 | margin-left: 10px;
81 | }
82 |
83 | /* Log Viewer */
84 | .nm-core-lv {
85 | margin:0 0 10px 0;
86 | }
87 | .nm-core-lv li {
88 | margin:0;
89 | padding:0;
90 | line-height:14px;
91 | font-size:11px;
92 | font-family: Menlo, monospace !important;
93 | list-style: none;
94 | white-space: pre;
95 | cursor: default;
96 | }
97 | .nm-core-lv li i {
98 | color: rgba(200,183,155, .6);
99 | }
100 | .nm-core-lv li:hover i {
101 | color: rgba(200,183,155, 1);
102 | }
103 |
104 | .nm-core-lv-pattern {
105 | width: 508px;
106 | font-size: 12px !important;
107 | }
108 |
109 | /* REPL Console */
110 |
111 | .nm-core-rp {
112 | margin:0 0 10px 0;
113 | }
114 |
115 | .nm-core-rp li {
116 | margin:0;
117 | padding:0;
118 | height:14px;
119 | list-style: none;
120 | }
121 |
122 | .nm-core-rp * {
123 | font-size:11px;
124 | font-family: Menlo, monospace !important;
125 | }
126 |
127 | /* Remove the focus components */
128 | input[type="text"]:focus.nm-core-rp-input,
129 | .core-Repl {
130 | border: none;
131 | outline: none;
132 | background-color: transparent;
133 | box-shadow: none;
134 | -moz-box-shadow: none;
135 | -webkit-box-shadow: none;
136 | }
137 |
138 | input.nm-core-rp-input {
139 | padding: 0;
140 | font-size:11px;
141 | box-sizing: border-box;
142 | margin: 0 0px 1px 0px;
143 | background-color: transparent;
144 | border: 0;
145 | outline: none;
146 | color: rgba(200,183,155, 1);
147 | box-shadow: none;
148 | -moz-box-shadow: none;
149 | -webkit-box-shadow: none;
150 | }
151 |
152 | .nm-core-rp-out, .nm-core-rp-entered {
153 | white-space: pre;
154 | }
155 |
156 | .nm-core-rp-entered {
157 | }
158 |
159 | .nm-core-rp-suggest-line {
160 | margin-top:-14px !important;
161 | color: rgba(200,183,155, .4);
162 | }
163 |
164 | .nm-core-rp-lede {
165 | color: transparent;
166 | }
167 |
168 | input[type="text"].nm-core-me-desc {
169 | box-sizing: border-box;
170 | width: 100%;
171 | height: 2.4em;
172 | }
173 |
174 | .nm-core-me-lines {
175 | box-sizing: border-box;
176 | font-size: 13px;
177 | width: 100%;
178 | height: 180px;
179 | }
180 |
181 | .nm-core-wv {
182 | width: 100%;
183 | height: 100%;
184 | overflow: hidden;
185 | }
186 |
187 | .nm-core-wv.scroll-bars {
188 | overflow: auto;
189 | }
190 |
191 | .nm-core-wv-iframe {
192 | border:none;
193 | padding: 0;
194 | width: 960px;
195 | height: 10000px;
196 | overflow: hidden;
197 | }
198 |
199 | .nm-core-wv-input span {
200 | margin: 0 5px 0 34px;
201 | font-size: 13px;
202 | color: #555;
203 | }
204 |
205 | .nm-core-wv-example-group {
206 | position:relative;
207 | height: 200px;
208 | width: 100%;
209 | border: 1px solid #333;
210 | box-sizing: border-box;
211 | }
212 |
213 | .view-source .nm-core-wv-example-group {
214 | display:none;
215 | }
216 |
217 | .nm-core-wv-example {
218 | height: 100%;
219 | width: 100%;
220 | position:absolute;
221 | z-index: 1;
222 | top: 0;
223 | left: 0;
224 | }
225 |
226 | .nm-core-wv-example-mask {
227 | height: 100%;
228 | width: 100%;
229 | position:absolute;
230 | top: 0;
231 | left: 0;
232 | z-index: 2;
233 | cursor: move;
234 | }
235 |
236 | .nm-core-inspector-input {
237 | display:inline-block;
238 | width: 75%;
239 | }
240 | input.nm-core-inspector-expression {
241 | width: 100%;
242 | font-size: 12px;
243 | }
244 | .nm-core-inspector-depthblock {
245 | display: inline-block;
246 | margin-left: 40px;
247 | }
248 | .nm-core-inspector-depth {
249 | width: 20px;
250 | }
251 |
252 |
253 | .nm-core-av > div {
254 | margin-bottom: 10px;
255 | }
256 | .nm-core-av title {
257 | display:block;
258 | font-size: 16px;
259 | line-height: 20px;
260 | }
261 | .nm-core-av-cpu .cpu {
262 | float: left;
263 | }
264 | .nm-core-av-cpu .cpu-level {
265 | font-size: 14px;
266 | color: rgba(235,122,109,0.75);
267 | text-align: center;
268 | margin: -40px 0 20px 0;
269 | }
270 | .nm-core-av-cpu .cpu-title {
271 | text-align: center;
272 | margin-top: -6px;
273 | }
274 | .nm-core-av-cpu .cpu-gauge {
275 | padding: 10px;
276 | width: 130px;
277 | height: 80px;
278 | margin-top: -26px;
279 | }
280 | .nm-core-av-mem .mem {
281 | width: 300px;
282 | float: left;
283 | }
284 | .nm-core-av-mem .mem-stat {
285 | float:left;
286 | width: 164px;
287 | padding-top: 36px;
288 | text-align: right;
289 | }
290 | .nm-core-av-mem .mem-stat span {
291 | width: 16px;
292 | display: inline-block;
293 | border-radius: 2px;
294 | line-height: 100%;
295 | }
296 | .nm-core-av-mem .stat1 {
297 | background-color: rgb(200,183,155);
298 | }
299 | .nm-core-av-mem .stat2 {
300 | background-color: rgb(255,100,100);
301 | }
302 | .nm-core-av-mem .stat3 {
303 | background-color: rgb(100,100,255);
304 | }
305 |
306 | .nm-core-av-mem .mem-bar {
307 | float:left;
308 | height: 130px;
309 | width: 130px;
310 | }
311 | .nm-core-av-info {
312 | margin: 6px;
313 | }
314 | .nm-core-av-anim {
315 | margin-top:-30px;
316 | }
317 | .nm-core-av-anim-head {
318 | margin: 0 5px 0 34px;
319 | font-size: 13px;
320 | color: #555;
321 | }
322 |
323 |
--------------------------------------------------------------------------------
/lib/css/CoreSettings.css:
--------------------------------------------------------------------------------
1 | .core-chart-settings-view h4 {
2 | margin-left: 4px;
3 | }
4 |
5 | .core-gauge-label {
6 | width: 220px;
7 | float: left;
8 | }
9 |
10 | .core-gauge-label-right {
11 | width: 220px;
12 | float: left;
13 | margin-left: 34px;
14 | }
15 |
16 | .core-gauge-minmax {
17 | float: left;
18 | margin-left: 34px;
19 | }
20 |
21 | .core-gauge-minmax input {
22 | width: 50px;
23 | text-align: right;
24 | }
--------------------------------------------------------------------------------
/lib/css/images/add-a-component.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/css/images/add-a-component.jpg
--------------------------------------------------------------------------------
/lib/css/images/app.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/css/images/app.jpg
--------------------------------------------------------------------------------
/lib/css/images/dashboard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/css/images/dashboard.jpg
--------------------------------------------------------------------------------
/lib/css/images/header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/css/images/header.jpg
--------------------------------------------------------------------------------
/lib/css/images/new_component.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/css/images/new_component.jpg
--------------------------------------------------------------------------------
/lib/css/images/sidebar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/css/images/sidebar.jpg
--------------------------------------------------------------------------------
/lib/css/images/tour.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/css/images/tour.jpg
--------------------------------------------------------------------------------
/lib/css/images/tour_manage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/css/images/tour_manage.jpg
--------------------------------------------------------------------------------
/lib/css/images/tour_settings.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/css/images/tour_settings.jpg
--------------------------------------------------------------------------------
/lib/css/wysihtml5.css:
--------------------------------------------------------------------------------
1 | .wysiwyg-font-size-smaller {
2 | font-size: smaller;
3 | }
4 |
5 | .wysiwyg-font-size-larger {
6 | font-size: larger;
7 | }
8 |
9 | .wysiwyg-font-size-xx-large {
10 | font-size: xx-large;
11 | }
12 |
13 | .wysiwyg-font-size-x-large {
14 | font-size: x-large;
15 | }
16 |
17 | .wysiwyg-font-size-large {
18 | font-size: large;
19 | }
20 |
21 | .wysiwyg-font-size-medium {
22 | font-size: medium;
23 | }
24 |
25 | .wysiwyg-font-size-small {
26 | font-size: small;
27 | }
28 |
29 | .wysiwyg-font-size-x-small {
30 | font-size: x-small;
31 | }
32 |
33 | .wysiwyg-font-size-xx-small {
34 | font-size: xx-small;
35 | }
36 |
37 | .wysiwyg-color-black {
38 | color: black;
39 | }
40 |
41 | .wysiwyg-color-silver {
42 | color: silver;
43 | }
44 |
45 | .wysiwyg-color-gray {
46 | color: gray;
47 | }
48 |
49 | .wysiwyg-color-white {
50 | color: white;
51 | }
52 |
53 | .wysiwyg-color-maroon {
54 | color: maroon;
55 | }
56 |
57 | .wysiwyg-color-red {
58 | color: red;
59 | }
60 |
61 | .wysiwyg-color-purple {
62 | color: purple;
63 | }
64 |
65 | .wysiwyg-color-fuchsia {
66 | color: fuchsia;
67 | }
68 |
69 | .wysiwyg-color-green {
70 | color: green;
71 | }
72 |
73 | .wysiwyg-color-lime {
74 | color: lime;
75 | }
76 |
77 | .wysiwyg-color-olive {
78 | color: olive;
79 | }
80 |
81 | .wysiwyg-color-yellow {
82 | color: yellow;
83 | }
84 |
85 | .wysiwyg-color-navy {
86 | color: navy;
87 | }
88 |
89 | .wysiwyg-color-blue {
90 | color: blue;
91 | }
92 |
93 | .wysiwyg-color-teal {
94 | color: teal;
95 | }
96 |
97 | .wysiwyg-color-aqua {
98 | color: aqua;
99 | }
100 |
101 | .wysiwyg-text-align-right {
102 | text-align: right;
103 | }
104 |
105 | .wysiwyg-text-align-center {
106 | text-align: center;
107 | }
108 |
109 | .wysiwyg-text-align-left {
110 | text-align: left;
111 | }
112 |
113 | .wysiwyg-text-align-justify {
114 | text-align: justify;
115 | }
116 |
117 | .wysiwyg-float-left {
118 | float: left;
119 | margin: 0 8px 8px 0;
120 | }
121 |
122 | .wysiwyg-float-right {
123 | float: right;
124 | margin: 0 0 8px 8px;
125 | }
126 |
127 | .wysiwyg-clear-right {
128 | clear: right;
129 | }
130 |
131 | .wysiwyg-clear-left {
132 | clear: left;
133 | }
134 |
--------------------------------------------------------------------------------
/lib/ext/highcharts_more.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/ext/highcharts_more.js
--------------------------------------------------------------------------------
/lib/image/AppViewer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/AppViewer.png
--------------------------------------------------------------------------------
/lib/image/BarChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/BarChart.png
--------------------------------------------------------------------------------
/lib/image/Button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/Button.png
--------------------------------------------------------------------------------
/lib/image/Clock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/Clock.png
--------------------------------------------------------------------------------
/lib/image/Console.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/Console.png
--------------------------------------------------------------------------------
/lib/image/Gauge.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/Gauge.png
--------------------------------------------------------------------------------
/lib/image/HTMLView.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/HTMLView.png
--------------------------------------------------------------------------------
/lib/image/LineChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/LineChart.png
--------------------------------------------------------------------------------
/lib/image/LogViewer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/LogViewer.png
--------------------------------------------------------------------------------
/lib/image/ObjectInspector.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/ObjectInspector.png
--------------------------------------------------------------------------------
/lib/image/PieChart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/PieChart.png
--------------------------------------------------------------------------------
/lib/image/ProbeViewer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/ProbeViewer.png
--------------------------------------------------------------------------------
/lib/image/Slider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/Slider.png
--------------------------------------------------------------------------------
/lib/image/SparkLine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/SparkLine.png
--------------------------------------------------------------------------------
/lib/image/WebClip.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lorenwest/core-monitor/2bd0407a65a9a48457da3576fc1161ee6852bf94/lib/image/WebClip.png
--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | // This is run when the app is loaded from node-monitor
2 | (function(root){
3 |
4 | // Create a server, and expose this directory
5 | var Connect = require('connect'),
6 | FS = require('fs'),
7 | Path = require('path'),
8 | Static = Connect['static'](__dirname);
9 |
10 | // Load all probes found in the ./probe directory
11 | // This is synchronous because require() is synchronous
12 | try {
13 | FS.readdirSync(Path.join(__dirname, 'probe')).forEach(function(fileName) {
14 | if (fileName.substr(-3) === '.js') {
15 | require('./probe/' + fileName);
16 | }
17 | });
18 | } catch (e) {}
19 |
20 | // Export a middleware component
21 | var app = module.exports = function(request, response, next) {
22 |
23 | // Process dynamic app endpoints here
24 | if (request.url === '/status') {
25 | response.writeHead(200, {'Content-Type': 'text/plan'});
26 | return response.end('ok');
27 | }
28 |
29 | // Forward to the static endpoint, then to the next step
30 | // if the file isn't there. The next step is a monitor page.
31 | return Static(request, response, next);
32 | }
33 |
34 | }(this));
35 |
--------------------------------------------------------------------------------
/lib/template/AppViewer.html:
--------------------------------------------------------------------------------
1 | ![](\"/app/core/css/images/new_component.jpg\" "\\"View")
",
25 | "background": true,
26 | "title": ""
27 | },
28 | "css": {
29 | ".nm-cv": "top:472px; z-index:23; left:482px;",
30 | ".nm-cv-viewport": "height:353px; width:380px;"
31 | },
32 | "monitor": {}
33 | },
34 | {
35 | "id": "c3",
36 | "viewClass": "core.Html",
37 | "viewOptions": {
38 | "htmlValue": "![](\"/app/core/css/images/app.jpg\" "\\"App")
",
53 | "background": true,
54 | "title": ""
55 | },
56 | "css": {
57 | ".nm-cv": "top:140px; z-index:18; left:20px;",
58 | ".nm-cv-viewport": "height:80px; width:150px;"
59 | },
60 | "monitor": {}
61 | },
62 | {
63 | "id": "c8",
64 | "viewClass": "core.Html",
65 | "viewOptions": {
66 | "htmlValue": "![](\"/app/core/css/images/sidebar.jpg\" "\\"Pages")
",
81 | "background": true,
82 | "title": ""
83 | },
84 | "css": {
85 | ".nm-cv": "top:860px; z-index:19; left:0px;",
86 | ".nm-cv-viewport": "height:250px; width:180px; z-index:24;"
87 | },
88 | "monitor": {}
89 | },
90 | {
91 | "id": "c10",
92 | "viewClass": "core.Html",
93 | "viewOptions": {
94 | "htmlValue": "![](\"/app/core/image/BarChart.png\" "\\"Image:")
Bar Chart![](\"/app/core/image/Button.png\" "\\"Image:")
Button![](\"/app/core/image/Clock.png\")
Clock![](\"/app/core/image/Gauge.png\" "\\"Image:")
Gauge![](\"/app/core/image/HTMLView.png\" "\\"Image:")
HTML Template![](\"/app/core/image/LineChart.png\" "\\"Image:")
Line Chart![](\"/app/core/image/LogViewer.png\" "\\"Image:")
Log Viewer![](\"/app/core/image/ObjectInspector.png\" "\\"Image:")
Object Inspector![](\"/app/core/image/PieChart.png\" "\\"Image:")
Pie Chart![](\"/app/core/image/ProbeViewer.png\" "\\"Image:")
Probe Viewer![](\"/app/core/image/Console.png\" "\\"Image:")
REPL Console![](\"/app/core/image/Slider.png\" "\\"Image:")
Slider![](\"/app/core/image/SparkLine.png\" "\\"Image:")
Spark Line![](\"/app/core/image/WebClip.png\" "\\"Image:")
Web Snippet![](\"/app/core/css/images/add-a-component.jpg\" "\\"Add")
",
25 | "background": true,
26 | "title": ""
27 | },
28 | "css": {
29 | ".nm-cv": "top:570px; z-index:24; left:700px;",
30 | ".nm-cv-viewport": "height:190px; width:160px;"
31 | },
32 | "monitor": {}
33 | },
34 | {
35 | "id": "c3",
36 | "viewClass": "core.Html",
37 | "viewOptions": {
38 | "htmlValue": "![](\"/app/core/css/images/header.jpg\" "\\"Node")
",
82 | "background": true,
83 | "title": ""
84 | },
85 | "css": {
86 | ".nm-cv": "top:200px; z-index:17; left:280px;",
87 | ".nm-cv-viewport": "height:24px; width:442px;"
88 | },
89 | "monitor": {}
90 | },
91 | {
92 | "id": "c7",
93 | "viewClass": "core.Html",
94 | "viewOptions": {
95 | "htmlValue": "![](\"/app/core/css/images/tour.jpg\" "\\"Tour")
",
67 | "background": true,
68 | "title": ""
69 | },
70 | "css": {
71 | ".nm-cv": "top:137px; z-index:18; left:644px;",
72 | ".nm-cv-viewport": "height:73px; width:215px;"
73 | },
74 | "monitor": {}
75 | },
76 | {
77 | "id": "c8",
78 | "viewClass": "core.Html",
79 | "viewOptions": {
80 | "htmlValue": "![](\"/app/core/css/images/tour_manage.jpg\" "\\"Add")
",
95 | "background": true,
96 | "title": ""
97 | },
98 | "css": {
99 | ".nm-cv": "top:578px; z-index:19; left:0px;",
100 | ".nm-cv-viewport": "height:70px; width:240px;"
101 | },
102 | "monitor": {}
103 | },
104 | {
105 | "id": "c10",
106 | "viewClass": "core.Html",
107 | "viewOptions": {
108 | "htmlValue": "![](\"/app/core/css/images/tour_settings.jpg\" "\\"Add")
",
123 | "background": true,
124 | "title": ""
125 | },
126 | "css": {
127 | ".nm-cv": "top:710px; z-index:21; left:326px;",
128 | ".nm-cv-viewport": "height:450px; width:540px;"
129 | },
130 | "monitor": {}
131 | },
132 | {
133 | "id": "c12",
134 | "viewClass": "core.Html",
135 | "viewOptions": {
136 | "htmlValue": "![](\"/app/core/css/images/dashboard.jpg\")
",
25 | "background": true,
26 | "title": ""
27 | },
28 | "css": {
29 | ".nm-cv": "top:200px; z-index:4; left:514px;",
30 | ".nm-cv-viewport": "height:400px; width:350px;"
31 | },
32 | "monitor": {}
33 | },
34 | {
35 | "id": "c3",
36 | "viewClass": "core.Html",
37 | "viewOptions": {
38 | "htmlValue": "\n