Added a widgetry to decide which packages will be traced.

Author: dylemma

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

@@ -26,6 +26,9 @@
 		// build this into a Map[packageId -> packageWidget.selectedProp]
 		var stateTemplate = {}
 
+		// build this into a Map[packageId -> packageWidget.instrumentationSelectedProp]
+		var instrumentedTemplate = {}
+
 		var widgets = {}
 
 		// initialize the `stateTemplate` and `widgets` maps
@@ -43,6 +46,11 @@
 					handleSelectionClick(node, pw)
 				})
 
+				instrumentedTemplate[node.id] = pw.instrumentationSelectedProp
+				pw.instrumentationSelectedClicks.onValue(function(){
+					handleInstrumentationSelectionClick(node, pw)
+				})
+
 				pw.uiParts.collapser.click(function(event){
 					pw.collapseChildren('toggle', true)
 					event.stopPropagation()
@@ -87,40 +95,64 @@
 			return found
 		}
 
-		function handleSelectionClick(node, widget){
-			// selected may be one of [1, 0, undefined].
-			// transition [1 -> 0], [0 -> 1], [undefined -> 1]
-			var newSel = +!widget.selected()
-
-			// apply the new selection to this node and each of its children
-			;(function bubbleDown(w){
-				w.selected(newSel)
-				w.children.forEach(bubbleDown)
-			})(widget)
-
-			// climb the tree, re-checking the full/partial selection state of node's ancestors
-			;(function bubbleUp(n){
-				if(!n || n.kind == 'root') return
-				var w = widgets[n.id]
-				if(!w) return
-
-				var isFullSelected = true,
-					isPartialSelected = false
-
-				w.children.forEach(function(c){
-					var s = c.selected()
-					if(!s) isFullSelected = false
-					if(s == 1 || s == undefined) isPartialSelected = true
-				})
-
-				var s = isFullSelected ? 1 : isPartialSelected ? undefined : 0
-				w.selected(s)
+		// checkSelected = function(widget){ return <is widget selected> }
+		// setSelected = function(widget, sel){ <set widget.selected to sel> }
+		// Returns a function(node, widget):
+		//   node is the starting point in the data tree
+		//   widget is the corresponding widget for the node
+		//
+		//   The function applies partial selection logic as if the widget
+		//   had been clicked.
+		function bubblePartialSelection(checkSelected, setSelected){
+			return function(node, widget){
+				// selected may be one of [1, 0, undefined].
+				// transition [1 -> 0], [0 -> 1], [undefined -> 1]
+				var newSel = +!checkSelected(widget)
+
+				// apply the new selection to this node and each of its children
+				;(function bubbleDown(w){
+					setSelected(w, newSel)
+					w.children.forEach(bubbleDown)
+				})(widget)
+
+				// climb the tree, re-checking the full/partial selection state of node's ancestors
+				;(function bubbleUp(n){
+					if(!n || n.kind == 'root') return
+					var w = widgets[n.id]
+					if(!w) return
+
+					var isFullSelected = true,
+						isPartialSelected = false
+
+					w.children.forEach(function(c){
+						var s = checkSelected(c)
+						if(!s) isFullSelected = false
+						if(s == 1 || s == undefined) isPartialSelected = true
+					})
+
+					var s = isFullSelected ? 1 : isPartialSelected ? undefined : 0
+					setSelected(w, s)
+
+					bubbleUp(n.parent)
+
+				})(node.parent)
+				var p = node.parent, pw = p && widgets[p.id]
+			}
+		}
 
-				bubbleUp(n.parent)
+		// a function(node,widget) that toggles the tri-state 'selected' property,
+		// starting from the given node+widget
+		var handleSelectionClick = bubblePartialSelection(
+			/*get*/ function(w){ return w.selected() },
+			/*set*/ function(w,s){ return w.selected(s) }
+			)
 
-			})(node.parent)
-			var p = node.parent, pw = p && widgets[p.id]
-		}
+		// a function(node, widget) that toggles the tri-state 'instrumentationSelected'
+		// property, starting from the given node+widget
+		var handleInstrumentationSelectionClick = bubblePartialSelection(
+			/*get*/ function(w){ return w.instrumentationSelected() },
+			/*set*/ function(w,s){ return w.instrumentationSelected(s) }
+			)
 
 		// set the `methodCount` property for all widgets
 		applyMethodCounts(treeData, widgets)
@@ -131,6 +163,12 @@
 		 */
 		this.selectedWidgets = Bacon.combineTemplate(stateTemplate).debounce(10)
 
+		/**
+		 * Exposes the 'instrumented' state of each of the widgets, as
+		 * a Map[package.id -> isInstrumented]
+		 */
+		this.instrumentedWidgets = Bacon.combineTemplate(instrumentedTemplate).debounce(10)
+
 		// Decide whether or not to show the "clear all selections" button
 		// depending on whether or not there are selected widgets
 		this.selectedWidgets

codepulse/src/main/resources/toserve/pages/traces/PackageWidget.css

@@ -34,6 +34,7 @@
  }
 
  .packages-header .header-label,
+ .packages-header .header-trace,
  .packages-header .header-method-count,
  .packages-header .header-barchart {
 
@@ -48,18 +49,26 @@
  	line-height: 40px;
  	background-color: #7E7E7E;
  }
+
+ .packages-header .header-trace {
+ 	width: 40px;
+ 	text-align: center;
+ 	font-size: small;
+ 	line-height: 40px;
+ 	background-color: #9C9C9C;
+ }
 
  .packages-header .header-method-count {
  	width: 50px;
  	text-align: center;
  	font-size: small;
- 	background-color: #9C9C9C;
+ 	background-color: #7E7E7E;
  }
 
  .packages-header .header-barchart {
  	background-color: #6D6D6D;
 
- 	width: calc(100% - 250px); 
+ 	width: calc(100% - 290px); 
  	line-height: 40px;
  	padding-left: 5px;
  }
@@ -211,10 +220,62 @@
  	content: '\f0c8'; /* fa-minus-square */
  }
 
+/*******************************\
+| Widget Tracing Toggler Styles |
+\*******************************/
+
+.widget-trace-toggle {
+	width: 40px;
+	float: left;
+	text-align: center;
+	background-color: #9C9C9C;
+}
+
+.tri-state-toggle {
+	width: 20px;
+	margin: auto;
+	cursor: pointer;
+}
+
+.tri-state-toggle:before {
+	font-family: FontAwesome;
+	-webkit-font-smoothing: antialiased;
+
+	width: 20px;
+ 	text-align: center;
+ 	font-size: 13px;
+
+ 	content: '\f096'; /* fa-square-o */
+ 	color: #FFF;
+}
+
+.tri-state-toggle.full-select:before {
+	content: '\f00c'; /* fa-check */
+}
+
+.tri-state-toggle.partial-select:before {
+	content: '\f0c8'; /* fa-minus-square */
+}
+
 /*****************************\
 | Widget Method Counts Styles |
 \*****************************/
 
+ .widget-method-count {
+ 	background-color: #7E7E7E;
+ 	width: 50px;
+ 	display: inline-block;
+ 	float: left;
+ 	height: 20px;
+ 	text-align: center;
+ 	box-sizing: border-box;
+ 	color: white;
+ }
+ 
+ .widget-method-count .count-number {
+ 	font-size: small;
+ }
+
  /* Some parts of the .widget-label will be highlighted, by showing a
   * .highlight div behind the regular content.
   */
@@ -249,33 +310,12 @@
  	opacity: 0; /* opacity should be set and transitioned with javascript */
  }
 
-
-/*****************************\
-| Widget Method Counts Styles |
-\*****************************/
-
- .widget-method-count {
- 	background-color: #9C9C9C;
- 	width: 50px;
- 	display: inline-block;
- 	float: left;
- 	height: 20px;
- 	text-align: center;
- 	box-sizing: border-box;
- 	color: white;
- }
- 
- .widget-method-count .count-number {
- 	font-size: small;
- }
-
-
 /************************\
 | Widget Barchart Styles |
 \************************/
 
  .widget-barchart {
- 	width: calc(100% - 250px);
+ 	width: calc(100% - 290px);
  	display: inline-block;
  	height: 20px;
  }
@@ -357,6 +397,9 @@
  .package-totals .widget-label .content .label-text {
  	line-height: 30px;
  }
+ .package-totals .widget-trace-toggle {
+ 	line-height: 30px;
+ }
  .package-totals .widget-method-count {
  	height: 30px;
  	line-height: 30px;

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

@@ -68,13 +68,19 @@
 		var self = this,
 			_fullLabel = '',
 			_abbreviatedLabel = '',
-			_selectable = true,
 			_indentation = 0,
 			_methodCount = 0,
 			_totalCoverage = 0,
 			_displayCompact = false,
+
 			_selected = 0,
+			_selectable = true,
 			_selectedBus = new Bacon.Bus(),
+
+			_instrumentationSelected = 0,
+			_instrumentationSelectable = true,
+			_instrumentationSelectedBus = new Bacon.Bus(),
+
 			_collapseChildren = false,
 			_childWidgets = []
 
@@ -95,6 +101,7 @@
 			'indent': e.find('.indent'),
 			'contentContainer': e.find('.content'),
 			'labelText': e.find('.label-text'),
+			'instrumentationSelectedToggle': e.find('.tri-state-toggle'),
 			'countNumber': e.find('.count-number'),
 			'barFill': e.find('.bar-fill'),
 			'barLabel': e.find('.bar-label'),
@@ -156,6 +163,13 @@
 			return self
 		}
 
+		this.instrumentationSelectable = function(newSel){
+			if(!arguments.length) return _instrumentationSelectable
+
+			_instrumentationSelectable = newSel
+			return self
+		}
+
 		this.displayCompact = function(compactFlag){
 			if(!arguments.length) return _displayCompact
 
@@ -194,6 +208,19 @@
 			return self
 		}
 
+		this.instrumentationSelected = function(newSelect){
+			if(!arguments.length) return _instrumentationSelected
+			_instrumentationSelected = newSelect
+
+			self.uiParts.instrumentationSelectedToggle
+				.toggleClass('full-select', _instrumentationSelected == 1)
+				.toggleClass('partial-select', _instrumentationSelected == undefined)
+
+			_instrumentationSelectedBus.push(_instrumentationSelected)
+
+			return self
+		}
+
 		this.collapseChildren = function(arg, animate){
 			if(!arguments.length) return _collapseChildren
 
@@ -233,6 +260,10 @@
 
 		this.selectionClicks = new Bacon.Bus()
 
+		this.instrumentationSelectedProp = _instrumentationSelectedBus.toProperty(_instrumentationSelected).skipDuplicates()
+
+		this.instrumentationSelectedClicks = new Bacon.Bus()
+
 		// ============================================================================
 		// Helper Methods
 		// ============================================================================
@@ -277,6 +308,11 @@
 				self.selectionClicks.push(1)
 			}
 		})
+		this.uiParts.instrumentationSelectedToggle.click(function(){
+			if(_instrumentationSelectable){
+				self.instrumentationSelectedClicks.push(1)
+			}
+		})
 	}
 
 	$(document).ready(function(){

codepulse/src/main/resources/toserve/pages/traces/traces.css

@@ -44,12 +44,13 @@ body > .overlay:before {
 
  	/* width = full screen minus:
  	   - 200px (the width of the .widget-label)
+ 	   -  40px (the width of the .widget-trace-toggle)
  	   -  50px (the width of the .widget-method-count)
  	   -  60px (the width of the percentage marker compact)
  	   - 241px (the width of the side bar)
  	   = 551px
  	*/
- 	width: calc(100% - 551px);
+ 	width: calc(100% - 591px);
 
  	transition: left .3s ease;
  	background-color: #9C9C9C;
@@ -63,11 +64,12 @@ body > .overlay:before {
  .middle-column-alt.in-view {
  	/* left = 
  		+ 200px (width of .widget-label)
+ 		+  40px (width of .widget-trace-toggle)
  		+  50px (width of .widget-method-count)
  		+  60px (width of percentage marker compact)
  		= 310px
  	*/
- 	left: 310px;
+ 	left: 350px;
  	border-left: none;
  }