dbus-vis: Initial commit

dbus-vis visualizes PCAP files captured by busctl as well as
text-format outputs from busctl.

dbus-vis displays the visualized results in horizontal
timelines, where each horizontal bar represents a DBus request, or
an IPMI request (an IPMI request is a specific kind of DBus request
sent to the IPMI daemon.)
The requests may be grouped by one or more fields including
type, sender, destination, path, interface, member.

In addition, if the BMC console is available, dbus-vis can connect
to the BMC console and capture DBus/IPMI requests in real time.

dbus-vis is in the form of a web page and is wrapped using Electron
to run as a desktop app.

Basic usage:
* Mouse click and drag:
  * If mouse is over time axis: drag timeline horizontally
  * If mouse is over vertical scroll bar: scroll up/down
  * Otherwise: select a region for measuring time & zooming in
* Mouse Scroll wheel:
  * If mouse is over time axis: zoom in/out
  * Otherwise: scroll up/down
* Click on the expandable headers will expand/collapse the entries under
that particular header.

Signed-off-by: Sui Chen <suichen@google.com>
Change-Id: I863c2ba80025d10efb44fd12868e37912fae9a47
diff --git a/dbus-vis/boost_handler_timeline_vis.js b/dbus-vis/boost_handler_timeline_vis.js
new file mode 100644
index 0000000..63378cb
--- /dev/null
+++ b/dbus-vis/boost_handler_timeline_vis.js
@@ -0,0 +1,219 @@
+// This script deals with Boost ASIO handlers
+// Will need to add code to visualize one-shot events
+
+// Fields: HandlerNumber, Level,
+// Creation time, Enter time, Exit time, EnterDescription,
+//    [ [Operation, time] ]
+
+// Will use g_StartingSec as the starting of epoch
+
+var ASIO_Data = [];
+var ASIO_Timestamp = [];
+
+function FindFirstEntrySlot(slots) {
+  let i = 0;
+  for (; i < slots.length; i++) {
+    if (slots[i] == undefined) break;
+  }
+  if (i >= slots.length) slots.push(undefined);
+  return i;
+}
+
+function SimplifyDesc(desc) {
+  const idx0 = desc.indexOf('0x');
+  if (idx0 == -1)
+    return desc;
+  else {
+    const d1 = desc.substr(idx0 + 2);
+    let idx1 = 0;
+    while (idx1 + 1 < d1.length &&
+           ((d1[idx1] >= '0' && d1[idx1] <= '9') ||
+            (d1[idx1] >= 'A' && d1[idx1] <= 'F') ||
+            (d1[idx1] >= 'a' && d1[idx1] <= 'f'))) {
+      idx1++;
+    }
+    return desc.substr(0, idx0) + d1.substr(idx1)
+  }
+}
+
+function ParseBoostHandlerTimeline(content) {
+  let parsed_entries = [];
+  const lines = content.split('\n');
+  let slots = [];               // In-flight handlers
+  let in_flight_id2level = {};  // In-flight ID to level
+
+  for (let lidx = 0; lidx < lines.length; lidx++) {
+    const line = lines[lidx];
+    if (line.startsWith('@asio|') == false) continue;
+    const sp = line.split('|');
+
+    const tag = sp[0], ts = sp[1], action = sp[2], desc = sp[3];
+    let handler_id = -999;
+    let ts_sec = parseFloat(ts);
+    const simp_desc = SimplifyDesc(desc);
+
+    if (action.indexOf('*') != -1) {
+      const idx = action.indexOf('*');
+      const handler_id = parseInt(action.substr(idx + 1));
+      const level = FindFirstEntrySlot(slots);
+
+      // Create an entry here
+      let entry = [
+        handler_id, level, ts_sec, undefined, undefined, desc, simp_desc, []
+      ];
+
+      slots[level] = entry;
+      in_flight_id2level[handler_id] = level;
+    } else if (action[0] == '>') {  // The program enters handler number X
+      handler_id = parseInt(action.substr(1));
+      if (handler_id in in_flight_id2level) {
+        const level = in_flight_id2level[handler_id];
+        let entry = slots[level];
+        entry[3] = ts_sec;
+      }
+    } else if (action[0] == '<') {
+      handler_id = parseInt(action.substr(1));
+      if (handler_id in in_flight_id2level) {
+        const level = in_flight_id2level[handler_id];
+        let entry = slots[level];
+        entry[4] = ts_sec;
+        slots[level] = undefined;
+        parsed_entries.push(entry);
+        delete in_flight_id2level[handler_id];
+      }
+    } else if (action[0] == '.') {  // syscalls
+    }
+  }
+
+  console.log(
+      'Boost handler log: ' + parsed_entries.length + ' entries' +
+      ', ' + slots.length + ' levels');
+  ASIO_Data = parsed_entries;
+  return parsed_entries;
+}
+
+function Group_ASIO(preprocessed, group_by) {
+  let grouped = {};
+  const IDXES = {'Layout Level': 1, 'Description': 5, 'Description1': 6};
+  for (var n = 0; n < preprocessed.length; n++) {
+    var key = ''
+    for (var i = 0; i < group_by.length; i++) {
+      if (i > 0) key += ' ';
+      key += ('' + preprocessed[n][IDXES[group_by[i]]]);
+    }
+    if (grouped[key] == undefined) grouped[key] = [];
+    grouped[key].push(preprocessed[n]);
+  }
+  return grouped;
+}
+
+function OnGroupByConditionChanged_ASIO() {
+  var tags = ['bah1', 'bah2', 'bah3'];
+  const v = boost_asio_handler_timeline_view;
+  v.GroupBy = [];
+  v.GroupByStr = '';
+  for (let i = 0; i < tags.length; i++) {
+    let cb = document.getElementById(tags[i]);
+    if (cb.checked) {
+      v.GroupBy.push(cb.value);
+      if (v.GroupByStr.length > 0) {
+        v.GroupByStr += ', ';
+      }
+      v.GroupByStr += cb.value;
+    }
+  }
+  let preproc = ASIO_Data;
+  let grouped = Group_ASIO(preproc, v.GroupBy);
+  GenerateTimeLine_ASIO(grouped);
+  boost_asio_handler_timeline_view.IsCanvasDirty = true;
+}
+
+function GenerateTimeLine_ASIO(grouped) {
+  const keys = Object.keys(grouped);
+  let sortedKeys = keys.slice();
+  let intervals = [];
+  let titles = [];
+
+  const was_starting_time_undefined = (g_StartingSec == undefined);
+
+  for (let i = 0; i < sortedKeys.length; i++) {
+    titles.push({"header":false, "title":sortedKeys[i], "intervals_idxes":[i] });
+    line = [];
+    for (let j = 0; j < grouped[sortedKeys[i]].length; j++) {
+      let entry = grouped[sortedKeys[i]][j];
+      let t0 = parseFloat(entry[3]);
+      let t1 = parseFloat(entry[4]);
+
+      if (was_starting_time_undefined) {
+        if (g_StartingSec == undefined) {
+          g_StartingSec = t0;
+        }
+        g_StartingSec = Math.min(g_StartingSec, t0);
+      }
+
+      line.push([t0, t1, entry, 'ok', 0]);
+    }
+    intervals.push(line);
+  }
+
+  // Time shift
+  for (let i = 0; i < intervals.length; i++) {
+    for (let j = 0; j < intervals[i].length; j++) {
+      let x = intervals[i][j];
+      x[0] -= g_StartingSec;
+      x[1] -= g_StartingSec;
+    }
+  }
+
+  boost_asio_handler_timeline_view.Intervals = intervals.slice();
+  boost_asio_handler_timeline_view.Titles = titles.slice();
+  boost_asio_handler_timeline_view.LayoutForOverlappingIntervals();
+}
+
+// Main view object for Boost handler timeline
+
+boost_asio_handler_timeline_view = new BoostASIOHandlerTimelineView();
+boost_asio_handler_timeline_view.IsCanvasDirty = true;
+
+function draw_timeline_boost_asio_handler(ctx) {
+  boost_asio_handler_timeline_view.Render(ctx);
+}
+
+let Canvas_Asio = document.getElementById('my_canvas_boost_asio_handler');
+
+Canvas_Asio.onmousemove = function(event) {
+  const v = boost_asio_handler_timeline_view;
+  v.MouseState.x = event.pageX - this.offsetLeft;
+  v.MouseState.y = event.pageY - this.offsetTop;
+  if (v.MouseState.pressed == true) {  // Update highlighted area
+    v.HighlightedRegion.t1 = v.MouseXToTimestamp(v.MouseState.x);
+  }
+  v.OnMouseMove();
+  v.IsCanvasDirty = true;
+
+  v.linked_views.forEach(function(u) {
+    u.MouseState.x = event.pageX - Canvas_Asio.offsetLeft;
+    u.MouseState.y = 0;                  // Do not highlight any entry
+    if (u.MouseState.pressed == true) {  // Update highlighted area
+      u.HighlightedRegion.t1 = u.MouseXToTimestamp(u.MouseState.x);
+    }
+    u.OnMouseMove();
+    u.IsCanvasDirty = true;
+  });
+};
+
+Canvas_Asio.onmousedown = function(event) {
+  if (event.button == 0) {
+    boost_asio_handler_timeline_view.OnMouseDown();
+  }
+};
+
+Canvas_Asio.onmouseup = function(event) {
+  if (event.button == 0) {
+    boost_asio_handler_timeline_view.OnMouseUp();
+  }
+};
+
+Canvas_Asio.onwheel = function(event) {
+  boost_asio_handler_timeline_view.OnMouseWheel(event);
+}