add simple timeline variant of grid

Fixes #883

Author: starpit

app/plugins/modules/activation-visualizations/lib/cell.js

@@ -60,14 +60,16 @@ exports.renderCell = (returnTo, cell, activation, isFailure=!activation.response
         fdom.className = 'grid-oops-overlay'
         container.appendChild(fdom)
 
-    } else if (!options || options.zoom >= 0) {
+    } else /*if (!options || options.zoom >= 0)*/ {
         // for larger zoom levels, and only for successful activations,
         // render the latency inside the cell
         const innerLabel = document.createElement('span')
         innerLabel.innerText = prettyPrintDuration(duration)
         container.appendChild(innerLabel)
 
-    } else {
+    }
+
+    if (options && options.zoom < 0) {
         // for higher zoom levels (zoom < 0), render the latency in the tooltip
         extraTooltip += `${newline}${prettyPrintDuration(duration)}`
     }
@@ -93,8 +95,8 @@ exports.renderCell = (returnTo, cell, activation, isFailure=!activation.response
         cell.isFailure = isFailure
         cell.setAttribute('data-action-name', activation.name)
         cell.setAttribute('data-balloon-break', 'data-balloon-break')
-        cell.setAttribute('data-balloon', `${options && options.nameInTooltip ? activation.name + ' action, invoked ' : ''}${ui.prettyPrintTime(activation.start, 'short')}${msg}${extraTooltip}`)
-        cell.setAttribute('data-balloon-pos', 'up')
+        cell.setAttribute('data-balloon', `${options && options.nameInTooltip ? 'Action: ' + activation.name + newline : ''}${ui.prettyPrintTime(activation.start, 'short')}${msg}${extraTooltip}`)
+        cell.setAttribute('data-balloon-pos', options.balloonPos || 'up')
     }
 
     return returnValue

app/plugins/modules/activation-visualizations/lib/grid.js

@@ -17,12 +17,12 @@
 const prettyPrintDuration = require('pretty-ms'),
       { sort, sortActivations, startTimeSorter, nameSorter, countSorter } = require('./sorting'),
       { drilldownWith } = require('./drilldown'),
-      { groupByAction } = require('./grouping'),
+      { groupByAction, groupByTimeBucket } = require('./grouping'),
       { drawLegend } = require('./legend'),
       { renderCell } = require('./cell'),
       { modes } = require('./modes'),
       { grid:usage } = require('../usage'),
-      { nbsp, optionsToString, isSuccess, titleWhenNothingSelected, latencyBucket,
+      { nbsp, optionsToString, isSuccess, titleWhenNothingSelected, latencyBucket, nLatencyBuckets,
         displayTimeRange, prepareHeader, visualize } = require('./util')
 
 const viewName = 'Grid'
@@ -152,7 +152,9 @@ const drawGrid = (options, header) => activations => {
           redraw = !!existingContent
 
     content.className = css.content
-    _drawGrid(options, header, content, groupByAction(activations, options), undefined, undefined, redraw)
+    _drawGrid(options, header, content,
+              groupByAction(activations, options),
+              undefined, undefined, redraw)
 
     //injectHTML(content, 'grid/bottom-bar.html', 'bottom-bar')
 
@@ -178,8 +180,10 @@ const drawGrid = (options, header) => activations => {
                       width = gridDom.getAttribute('data-width'),
                       vws = newZoom === 0 ? 2.75 : newZoom === 1 ? 3 : newZoom === 2 ? 4 : 0.75
 
-                gridLabel.style.maxWidth = `${Math.max(8, width * vws * 1.1)}vw`
                 gridRow.style.maxWidth = `${Math.max(8, width * vws)}vw`
+                if (gridLabel) {
+                    gridLabel.style.maxWidth = `${Math.max(8, width * vws * 1.1)}vw`
+                }
             }
 
             if (newZoom === zoomMax) {
@@ -207,15 +211,31 @@ const drawGrid = (options, header) => activations => {
                       flush: 'right',
                       actAsButton: true,
                       direct: rezoom(_ => Math.max(-2, _ - 1))
-                    }
+                    },
+          asTimeline = { mode: 'as-timeline',
+                         fontawesome: 'fas fa-chart-bar',
+                         balloon: 'Display as timeline',
+                         flush: 'right',
+                         actAsButton: true,
+                         direct: () => repl.pexec(`grid ${optionsToString(options)} -t`)
+                       },
+          asGrid = { mode: 'as-grid',
+                         fontawesome: 'fas fa-th',
+                         balloon: 'Display as grid',
+                         flush: 'right',
+                         actAsButton: true,
+                         direct: () => repl.pexec(`grid ${optionsToString(options, ['timeline', 't'])}`)
+                   },
+
+          switcher = options.timeline ? asGrid : asTimeline // switch between timeline and grid mode
 
     return {
         type: 'custom',
         content,
         controlHeaders: true,
 
         // add zoom buttons to the mode button model
-        modes: modes('grid', options).concat([zoomIn, zoomOut])
+        modes: modes('grid', options).concat([switcher, zoomIn, zoomOut])
     }
 }
 
@@ -241,7 +261,7 @@ const smartZoom = numCells => {
  *
  */
 const _drawGrid = (options, {sidecar, leftHeader, rightHeader}, content, groupData, sorter=countSorter, sortDir=+1, redraw) => {
-    const { groups, summary } = groupData
+    const { groups, summary, timeline } = groupData
 
     sort(groups, sorter, sortDir)
     sortActivations(groups, startTimeSorter, +1)
@@ -251,7 +271,7 @@ const _drawGrid = (options, {sidecar, leftHeader, rightHeader}, content, groupDa
           gridGrid = redraw ? content.querySelector(`.${css.gridGrid}`) : document.createElement('div'),
           totalCount = groupData.totalCount,
           zoomLevel = options.zoom || smartZoom(totalCount),
-          zoomLevelForDisplay = totalCount > 1000 ? -2 : totalCount <= 100 ? zoomLevel : 0 // don't zoom in too far, if there are many cells to display
+          zoomLevelForDisplay = options.timeline ? -1 : totalCount > 1000 ? -2 : totalCount <= 100 ? zoomLevel : 0 // don't zoom in too far, if there are many cells to display
 
     gridGrid.className = `${css.gridGrid} cell-container zoom_${zoomLevelForDisplay}`
     gridGrid.setAttribute('data-zoom-level', zoomLevelForDisplay)
@@ -287,6 +307,11 @@ const _drawGrid = (options, {sidecar, leftHeader, rightHeader}, content, groupDa
     // add time range to the sidecar header
     displayTimeRange(groupData, leftHeader)
 
+    if (options.timeline) {
+        drawAsTimeline(timeline, content, gridGrid, zoomLevelForDisplay, options)
+        return
+    }
+
     groups.forEach((group, groupIdx) => {
         // prepare the grid structure
         const gridDom = redraw ? gridGrid.querySelector(`.grid[data-action-path="${group.path}"]`) : document.createElement('div')
@@ -372,7 +397,9 @@ const _drawGrid = (options, {sidecar, leftHeader, rightHeader}, content, groupDa
                         const cell = makeCellDom()
                         cellContainer.appendChild(cell)
                         cell.classList.add('grid-cell-newly-created')
-                        renderCell(viewName, cell, activation, !isSuccess(activation), undefined, undefined,
+                        renderCell(viewName, cell, activation, !isSuccess(activation),
+                                   options.full ? activation._duration : activation.executionTime,
+                                   undefined,
                                    { zoom: zoomLevelForDisplay })
                     }
                 } catch (e) {
@@ -381,8 +408,114 @@ const _drawGrid = (options, {sidecar, leftHeader, rightHeader}, content, groupDa
             })
         }
     })
+} // _drawGrid
+
+/**
+ * Return the minimum timestamp in the given list of activations
+ *
+ */
+const minTimestamp = activations => {
+    return activations.reduce((min, activation) => {
+        if (min === 0) {
+            return activation.start
+        } else {
+            return Math.min(min, activation.start)
+        }
+    }, 0)
 }
 
+/**
+ * Render the grid as a timeline
+ *
+ */
+const drawAsTimeline = (timelineData, content, gridGrid, zoomLevelForDisplay, options) => {
+    const { failure, activations, nBuckets } = timelineData
+
+    content.classList.add('grid-as-timeline')
+
+    const grid = document.createElement('div')
+    grid.className = 'grid'
+    gridGrid.appendChild(grid)
+
+    const makeColumn = () => {
+        const gridRow = document.createElement('div')
+        gridRow.className = 'grid-row'
+        grid.appendChild(gridRow)
+
+        return gridRow
+    }
+
+    // for each column in the timeline... idx here is a column index
+    for (let idx = 0, currentEmptyRunLength = 0, currentRunMinTime; idx < nBuckets; idx++) {
+        if (activations[idx].length === 0) {
+            // empty column
+            if (currentEmptyRunLength++ === 0 && idx > 0) {
+                // start of empty run; remember the timestamp
+                currentRunMinTime = minTimestamp(activations[idx - 1])
+            }
+
+            continue
+
+        } else if (currentEmptyRunLength > 5) {
+            console.error('EMPTY SWATH')
+            const currentRunMaxTime = minTimestamp(activations[idx]),
+                  swath = makeColumn()
+
+            swath.classList.add('grid-timeline-empty-swath')
+
+            if (currentRunMinTime && currentRunMaxTime) {
+                const swathInner = document.createElement('div')
+                swathInner.classList.add('grid-timeline-empty-swath-inner')
+                swathInner.innerText = `${prettyPrintDuration(currentRunMaxTime - currentRunMinTime, { compact: true })} gap`
+
+                swath.appendChild(swathInner)
+            }
+
+            currentEmptyRunLength = 0
+        }
+
+        const gridRow = makeColumn()
+
+        // sort the activations in the column, according to the user's desire
+        if (options.timeline === true || options.timeline === 'latency') {
+            // default sort order
+            activations[idx].sort((a,b) => {
+                const successA = isSuccess(a),
+                      successB = isSuccess(b),
+                      nA = options.full ? a._duration : a.executionTime,
+                      nB = options.full ? b._duration : b.executionTime
+                return !successA && !successB || successA && successB ? nA - nB
+                    : !successA ? 1 : -1
+            })
+        } else if (options.timeline === 'time') {
+            activations[idx].sort((a,b) => a.start - b.start)
+        }
+
+        // now render the cells in the column; jdx here is a row index
+        // within the current column's stack of cells
+        activations[idx].forEach((activation, jdx) => {
+            const success = isSuccess(activation),
+                  latBucket = success && latencyBucket(options.full ? activation._duration : activation.executionTime)
+
+            const cell = makeCellDom(),
+                  isFailure = false,
+                  duration = 0,
+                  nameInTooltip = true,
+                  balloonPos = jdx >= 25 ? idx < 5 ? 'down-left' : 'down'
+                  : idx < 10 ? jdx < 5 ? 'up-left' : 'up' : jdx < 5 ? 'up-right' : 'up'
+
+            renderCell(viewName, cell,
+                       activation,
+                       !success,
+                       options.full ? activation._duration : activation.executionTime,
+                       latBucket,
+                       { zoom: zoomLevelForDisplay, balloonPos, nameInTooltip })
+
+                gridRow.appendChild(cell)
+        })
+    }
+} // drawAsTimeline
+
 /**
  * This is the module
  *

app/plugins/modules/activation-visualizations/lib/grouping.js

@@ -17,19 +17,29 @@
 const { isSuccess, pathOf, latencyBucket, nLatencyBuckets, isUUIDPattern } = require('./util'),
       prettyPrintDuration = require('pretty-ms')
 
+const durationOf = _ => {
+    const waitAnno = _.annotations.find(({key}) => key === 'waitTime'),
+          initAnno = _.annotations.find(({key}) => key === 'initTime'),
+          wait = waitAnno ? waitAnno.value : 0,  // this is "Queueing Time" as presented in the UI
+          init = initAnno ? initAnno.value : 0,   // and this is "Container Initialization"
+          executionTime = _.end - _.start,
+          duration = executionTime + wait  // note: executionTime already factors in `init`, so we don't add it here
+
+    // oof
+    _.executionTime = executionTime
+    _._duration = duration
+
+    return { duration, executionTime, wait, init }
+}
+
 /**
  * Compute statistical properties of a given group of activations
  *
  */
 const summarizePerformance = (activations, options) => {
     const latBuckets = Array(nLatencyBuckets).fill(0)
     const summaries = activations.map(_ => {
-        const waitAnno = _.annotations.find(({key}) => key === 'waitTime'),
-              initAnno = _.annotations.find(({key}) => key === 'initTime'),
-              wait = waitAnno ? waitAnno.value : 0,  // this is "Queueing Time" as presented in the UI
-              init = initAnno ? initAnno.value : 0,   // and this is "Container Initialization"
-              executionTime = _.end - _.start,
-              duration = executionTime + wait  // note: executionTime already factors in `init`, so we don't add it here
+        const { duration, executionTime, wait, init } = durationOf(_)
 
         if (isSuccess(_)) {
             const latBucket = latencyBucket(options.full ? duration : executionTime)
@@ -296,7 +306,7 @@ const costOf = activation => {
  * Construct a success versus failure timeline model
  *
  */
-const successFailureTimeline = (activations, { nBuckets = 20 }) => {
+const successFailureTimeline = (activations, { nBuckets=10000, full=false }) => {
     if (activations.length === 0) {
         return []
     }
@@ -307,14 +317,28 @@ const successFailureTimeline = (activations, { nBuckets = 20 }) => {
           interval = ~~((last - first) / nBuckets),
           bucketize = timestamp => Math.min(nBuckets - 1, ~~((timestamp - first) / interval))
 
+    const mkActivations = () => {
+        const buckets = Array(nBuckets)
+        for (let idx = 0; idx < nBuckets; idx++) {
+            buckets[idx] = [] // array of activations
+        }
+        return buckets
+    }
+
     // now we construct the model
     const buckets = activations.reduce((buckets, activation) => {
-        const tally = isSuccess(activation) ? buckets.success : buckets.failure,
+        const success = isSuccess(activation),
+              tally = success ? buckets.success : buckets.failure,
               idx = bucketize(activation.start)
+
         tally[idx]++
         buckets.cost[idx] += costOf(activation)
+        buckets.activations[idx].push(activation)
+
         return buckets
+
     }, { success: Array(nBuckets).fill(0),
+         activations: mkActivations(),
          failure: Array(nBuckets).fill(0),
          cost: Array(nBuckets).fill(0),
          interval, first, last, nBuckets    // pass through the parameters to the view, in case it helps
@@ -375,3 +399,56 @@ const filterByOutlieriness = options => ({activations,statData}) => {
         })
     }
 }
+
+
+/**
+ * Group the given activations by time
+ *
+ */
+exports.groupByTimeBucket = (activations, options) => {
+    // commenting out the bizarre filter. see shell issue #120
+    /*if (!options.all) {
+        activations = activations.filter(activation => {
+            const path = pathOf(activation)
+            return !(path.match && path.match(isUUIDPattern)) && !activation.cause
+        })
+    }*/
+
+    // first, sort the activations by increasing start time, to help
+    // with bucketing
+    activations.sort((a,b) => a.start - b.start)
+
+    // compute bucket properties
+    const nBuckets = options.buckets || 46,
+          first = activations[0],
+          last = activations[activations.length - 1],
+          minTime = first && first.start,
+          maxTime = last && last.start,
+          timeRangeInMillis = maxTime - minTime + 1,
+          bucketWidthInMillis = timeRangeInMillis / nBuckets,
+          totals = { minTime: undefined, maxTime: undefined, totalCount: 0},
+          grouper = addToGroup(options, totals)
+
+    const buckets = activations.reduce((bucketArray, activation) => {
+        const bucketIdx = ~~( (activation.start - minTime) / bucketWidthInMillis)
+        grouper(bucketArray[bucketIdx], activation)
+        return bucketArray
+    }, new Array(nBuckets).fill(0).map(_ => ({}) )) // an array of length nBuckets, of {} -- these will be activation groups, for each timeline bucket
+
+
+    // the buckets.map turns each timeline bucket, which right now is
+    // a map from action path to action, into an array -- for easier
+    // consumption
+    return Object.assign(totals, {
+        bucketWidthInMillis,
+        buckets: buckets.map(bucketMap => {
+            const bucket = toArray(bucketMap, options)
+            return {
+                bucket,
+                summary: summarizeWhole(bucket, options)
+            }
+        }),
+        summary: summarizeWhole2(activations, options)  // a "statData" object, for all activations
+    })
+}
+

app/plugins/modules/activation-visualizations/lib/time.js

@@ -42,7 +42,7 @@ exports.range = options => {
           startOfWeek = (startOfToday - date.getDay() * oneDay)
 
     let since, upto
-    if (options.today || options.t) {
+    if (options.today) {
         since = startOfToday
         upto = now