Skip to content

Commit f643528

Browse files
dylemmadylemma
committed
Hopefully-helpful tweaks to the trace sidebar.
Also put more work into making the trace-recording-controls be more of a script than a library: the "TraceRecordingControlsWidget" is really jsut a $(document).ready block, and many things that were set up as templates don't need to be templates at all.
1 parent 1ffea34 commit f643528

File tree

4 files changed

+73
-79
lines changed

4 files changed

+73
-79
lines changed

‎codepulse/src/main/resources/toserve/pages/traces/trace-recording-controls.css‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
#recording-controls h1 {
2+
font-size: small;
3+
border-bottom: 1px solid;
4+
line-height: 20px;
5+
margin: 5px;
6+
}
7+
8+
#trace-controls {
9+
overflow-y: auto;
10+
}
11+
112
/*************************\
213
| Recording Widget Styles |
314
\*************************/
@@ -165,7 +176,6 @@
165176
display: none;
166177

167178
padding: 5px;
168-
margin-top: 20px;
169179
margin-bottom: 2px;
170180
cursor: pointer;
171181
}
@@ -267,20 +277,9 @@
267277
| Activity Legend Styles |
268278
\************************/
269279

270-
.recordingsLegend {
271-
position: absolute;
272-
bottom: 0;
273-
width: 100%;
274-
}
275-
276-
.recordingsLegend .legend-label {
277-
border-bottom: 1px solid;
278-
margin: 0 5px;
279-
font-size: small;
280-
}
281-
282280
.recordingsLegend .legend-entry {
283281
line-height: 30px;
282+
font-size: small;
284283
}
285284

286285

‎codepulse/src/main/resources/toserve/pages/traces/trace-recording-controls.js‎

Lines changed: 24 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,12 @@
2121

2222
// define variables to represent
2323
var controlsContainer,
24-
templatesContainer,
25-
traceSetupTemplate,
26-
customRecordingAdderTemplate
24+
templatesContainer
2725

2826
// once the DOM has loaded, initialize the template/container variables
2927
$(document).ready(function(){
3028
controlsContainer = $('#recording-controls')
3129
templatesContainer = controlsContainer.find('[data-role=templates-container]')
32-
traceSetupTemplate = templatesContainer.find('[data-role=trace-setup]')
33-
customRecordingAdderTemplate = templatesContainer.find('[data-role=custom-recording-adder]')
34-
recordingTemplate = templatesContainer.find('[data-role=recording-template]')
3530
})
3631

3732
var traceCoverageUpdateRequests = new Bacon.Bus()
@@ -393,11 +388,9 @@
393388
// the AJAX operation of POSTing a /recording/start request to the
394389
// server in order to obtain a recording id.
395390
// ----------------------------------------------------------------
396-
function CustomRecordingAdder(recorderId, $widgetContainer){
391+
function CustomRecordingAdder($adderButton, $recordingsList){
397392

398-
var button = this.$element = customRecordingAdderTemplate.clone()
399-
400-
button.click(function(){
393+
$adderButton.click(function(){
401394
TraceAPI.requestNewRecording(function(recordingData, error){
402395
if(error) alert("failed to start a new recording because: " + error)
403396
else addNewRecording(recordingData, true)
@@ -409,7 +402,7 @@
409402

410403
var toShow = testRecording.widget.$ui
411404
.hide()
412-
.appendTo($widgetContainer)
405+
.appendTo($recordingsList)
413406

414407
toShow[animate? 'slideDown': 'show']()
415408

@@ -428,27 +421,27 @@
428421
// End CustomRecordingAdder class definition
429422

430423
// -------------------------------------------------------------------
431-
// TraceRecordingControlsWidget
424+
// Create wiring for the page's sidebar.
432425
//
433-
// Creates wiring that is responsible for starting/ending traces, and
434-
// sets up secondary controls that add recordings etc. It also creates
435-
// a recordings manager, so that for whichever recording is selected,
436-
// it will request the data for that recording and fire it as a 'data
437-
// update' event.
426+
// The sidebar includes a legend for the 'all activity' and 'overlaps'
427+
// colors, and the ability to change those colors; a timing window filter,
428+
// which lets users see trace data within a given time window; a list
429+
// of user-added recordings, and a button for adding new ones; and buttons
430+
// for starting and ending a trace.
438431
// -------------------------------------------------------------------
439-
function TraceRecordingControlsWidget(){
440-
var newTraceArea = traceSetupTemplate.clone().appendTo(controlsContainer),
432+
433+
$(document).ready(function(){
434+
var controlsContainer = $('#recording-controls'),
435+
newTraceArea = controlsContainer.find('.trace-setup-area'),
441436
newTraceButton = newTraceArea.find('[data-role=new-trace]').hide(),
442437
connectionWaitingText = newTraceArea.find('[data-role=connection-waiting]').hide(),
443438
endTraceButton = newTraceArea.find('[data-role=end-trace]').hide(),
444-
recordingControls = $('#recording-controls'),
445-
self = this
446-
439+
recordingControls = $('#recording-controls')
447440

448441
Trace.allActivityRecordingId = createAllActivityRecording(controlsContainer)
449442

450443
// Add a Recording/Widget for the "all activity"/"latest XXX"
451-
var timeWindowsController = createRecentRecording(controlsContainer)
444+
var timeWindowsController = createRecentRecording(controlsContainer.find('.timingFilterArea'))
452445

453446
var legendMultiplesKey = setupOverlapsRecording(controlsContainer)
454447

@@ -461,22 +454,21 @@
461454
return legend
462455
}
463456

464-
// Create a button that will add new "custom" recordings
465-
var customRecordingAdder = new CustomRecordingAdder(self.recorderId, controlsContainer)
466-
customRecordingAdder.$element.appendTo(controlsContainer)
457+
// Set up a button that will add new "custom" recordings
458+
var customRecordingAdder = new CustomRecordingAdder(
459+
controlsContainer.find('.recording-adder-button'),
460+
controlsContainer.find('.recordingsList'))
467461

462+
// Load any existing user-created recordings from the server, adding them to the UI
468463
TraceAPI.requestRecordings(function(recordings, error){
469464
if(error){ console.error('failed to load recordings') }
470465
else {
471466
recordings.forEach(function(rec){ customRecordingAdder.addNewRecording(rec, false) })
472467
}
473468
})
474-
475-
// forward all coverageRecordEvents from the recordingManager to the `coverageRecordEvents` bus
476-
// coverageRecordEvents.plug( Trace.coverageRecordEvents )
477469

478-
var traceRunningBus = new Bacon.Bus(),
479-
traceRunningProp = traceRunningBus.toProperty().assign(controlsContainer, 'attr', 'trace-running')
470+
// assign the 'trace-running' attribute to the controlsContainer, depending on the trace state
471+
Trace.running.assign(controlsContainer, 'attr', 'trace-running')
480472

481473
/*
482474
* Load the current trace status and set the UI accordingly.
@@ -489,7 +481,6 @@
489481
newTraceButton.show()
490482
connectionWaitingText.hide()
491483
endTraceButton.hide().overlay('ready')
492-
traceRunningBus.push(false)
493484
break
494485
case 'connecting':
495486
newTraceButton.hide()
@@ -500,7 +491,6 @@
500491
newTraceButton.hide()
501492
connectionWaitingText.hide()
502493
endTraceButton.show().overlay('ready')
503-
traceRunningBus.push(true)
504494
break
505495
case 'ending':
506496
newTraceButton.hide()
@@ -528,14 +518,12 @@
528518
newTraceButton.hide()
529519
connectionWaitingText.slideUp()
530520
endTraceButton.slideDown()
531-
traceRunningBus.push(true)
532521
break
533522
case 'finished':
534523
newTraceButton.slideDown()
535524
connectionWaitingText.hide()
536525
endTraceButton.slideUp()
537526
endTraceButton.overlay('ready')
538-
traceRunningBus.push(false)
539527
break
540528
case 'deleted':
541529
alert('This trace has been deleted. You will be redirected to the home screen')
@@ -558,9 +546,6 @@
558546
TraceAPI.requestEnd()
559547
})
560548

561-
}
562-
exports.TraceRecordingControlsWidget = TraceRecordingControlsWidget
563-
// End TraceRecordingControlsWidget class definition
564-
549+
})
565550

566551
}(this));

‎codepulse/src/main/resources/toserve/pages/traces/traces.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,6 @@ $(document).ready(function(){
3535
// REST endpoint that generates code coverage data for nodes in the treemap
3636
treemapDataUrl = document.location.href + '/coverage-treemap.json',
3737

38-
/**
39-
* Controller for the trace controls on the side of the page. Exposes events for various
40-
* data updates that happen during a running trace.
41-
*/
42-
traceControls = new TraceRecordingControlsWidget(),
43-
4438
/*
4539
* Create a large spinner (provided by spin.js) that appears in place
4640
* of the treemap, before the treemap has loaded. Activate it before

‎codepulse/src/main/webapp/templates-hidden/trace-recording-controls.html‎

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,6 @@
11
<div id="recording-controls">
22
<div style="display: none;" data-role="templates-container">
3-
4-
<!-- START/STOP TRACE BUTTONS -->
5-
<div data-role="trace-setup" class="trace-setup-area">
6-
<div class="control-button big" data-role="new-trace">
7-
Start a Trace
8-
</div>
9-
<div class="control-button" data-role="connection-waiting">
10-
Waiting for a trace connection...
11-
</div>
12-
<div class="control-button big" data-role="end-trace">
13-
End Trace
14-
</div>
15-
</div>
16-
17-
<!-- ADD RECORDING BUTTON -->
18-
<div data-role="custom-recording-adder" class="recording-adder-button">
19-
<i class="fa fa-plus"></i> Start a Recording
20-
</div>
21-
3+
224
<!-- RECORDING WIDGET TEMPLATE -->
235
<div data-role="recording-template" class="recording in-progress clearfix">
246
<div class="swatch-container">
@@ -70,9 +52,21 @@
7052
</div>
7153
<!-- ^ end of #templates-container ^ -->
7254

73-
<div class="recordingsLegend">
74-
<div class="legend-label">Legend:</div>
55+
<!-- START/STOP TRACE BUTTONS -->
56+
<div class="trace-setup-area">
57+
<div class="control-button big" data-role="new-trace">
58+
Start a Trace
59+
</div>
60+
<div class="control-button" data-role="connection-waiting">
61+
Waiting for a trace connection...
62+
</div>
63+
<div class="control-button big" data-role="end-trace">
64+
End Trace
65+
</div>
66+
</div>
7567

68+
<h1>Treemap Legend</h1>
69+
<div class="recordingsLegend">
7670
<div class="legend-entry clearfix">
7771
<div class="swatch-container" id="all-activity-color-swatch">
7872
<div class="swatch" style="background-color: red"></div>
@@ -86,7 +80,29 @@
8680
</div>
8781
<div class="legend-text">Overlaps</div>
8882
</div>
83+
</div>
84+
85+
<h1>
86+
Timing Filter
87+
<i class="help fa fa-question-circle" title="Select this to view methods that were called recently. You can also change the time window by using the menu button on the right."></i>
88+
</h1>
89+
<div class="timingFilterArea">
90+
<!-- Latest X seconds recording goes here -->
91+
</div>
8992

93+
<h1>
94+
Recordings
95+
<i class="help fa fa-question-circle" title="You can add recordings while the trace is running, and select them to view the methods that were called while they were active."></i>
96+
</h1>
97+
<div class="recordingsArea">
98+
<!-- ADD RECORDING BUTTON -->
99+
<div class="recording-adder-button">
100+
<i class="fa fa-plus"></i> Start a Recording
101+
</div>
102+
103+
<div class="recordingsList">
104+
<!-- User-added recordings go here -->
105+
</div>
90106
</div>
91107

92108
</div>

0 commit comments

Comments
 (0)