pcapr-local 0.1.10

data/lib/pcapr_local/www/static/script/closet/closet.reports.overview.js

@@ -0,0 +1,163 @@
+var closet = closet || {};
+closet.reports = closet.reports || [];
+closet.reports.push({
+    name: 'overview',
+    title: 'Overview',
+    items: [{
+        name: 'services',
+        title: 'Services',
+        options: function(pcap, opts, cb) {
+            opts.choice('filter', '', { values: [''].concat(['udp', 'tcp']) });
+            opts.choice('limit', 10, { values: [ '', 10, 20, 50, 100 ] });
+            opts.choice('order', 'count', { values: ['count', 'service'] });
+            opts.boolean('descending', true);
+            opts.boolean('normalize', true);
+            cb();
+        },
+        create: function(ctx, $root, pcap, opts) {
+            if (opts.order) {
+                opts = $.extend({}, opts, {
+                    order: { count: 'value', service: 'key' }[opts.order]
+                });
+            }
+            
+            if (opts.filter) {
+                var q = 'flow.proto:' + (opts.filter === 'udp' ? 17 : 6);
+                var r = closet.mr.count('flow.service');
+                closet.api.flows.report(pcap._id, q, r, function(data) {
+                    closet.render.table($root, data, opts);
+                });
+            } else {
+                closet.api.field.terms(pcap._id, 'pkt.service', null, null, function(data) {
+                    closet.render.table($root, data, opts);
+                });
+            }
+        }
+    }, {
+        name: 'sizes',
+        title: 'Packet Size',
+        options: function(pcap, opts, cb) {
+            pcap.index.services.sort();
+            opts.choice('filter', '', { 'values': [''].concat(pcap.index.services) });
+            opts.choice('limit', 10, { 'values': [ '', 10, 20, 50, 100 ] });
+            opts.choice('order', 'count', { values: ['count', 'size'] });
+            opts.boolean('descending', true);
+            opts.boolean('normalize', true);
+            cb();
+        },
+        create: function(ctx, $root, pcap, opts) {
+            if (opts.order) {
+                opts = $.extend({}, opts, {
+                    order: { count: 'value', size: 'key' }[opts.order]
+                });
+            }
+            
+            if (opts.filter) {
+                var q = 'pkt.service:' + opts.filter;
+                var r = closet.mr.count('pkt.length');
+                closet.api.packets.report(pcap._id, q, r, function(data) {
+                    closet.render.table($root, data, opts);
+                });
+            } else {
+                closet.api.field.terms(pcap._id, 'pkt.length', null, null, function(data) {
+                    closet.render.table($root, data, opts);
+                });
+            }
+        }
+    }, {
+        name: 'mac',
+        title: 'MAC Addresses',
+        apply: function(pcap, fields) {
+            return fields.hasOwnProperty('eth.addr');
+        },
+        options: function(pcap, opts, cb) {
+            pcap.index.services.sort();
+            opts.choice('filter', '', { 'values': [''].concat(pcap.index.services) });
+            opts.choice('limit', 10, { 'values': [ '', 10, 20, 50, 100 ] });
+            opts.choice('order', 'count', { values: ['count', 'mac'] });
+            opts.boolean('descending', true);
+            opts.boolean('normalize', true);
+            cb();
+        },
+        create: function(ctx, $root, pcap, opts) {
+            if (opts.order) {
+                opts = $.extend({}, opts, {
+                    order: { count: 'value', mac: 'key' }[opts.order]
+                });
+            }
+            
+            if (opts.filter) {
+                var q = 'pkt.service:' + opts.filter;
+                var r = closet.mr.count('eth.addr');
+                closet.api.packets.report(pcap._id, q, r, function(data) {
+                    closet.render.table($root, data, opts);
+                });                
+            } else {
+                closet.api.field.terms(pcap._id, 'eth.addr', null, null, function(data) {
+                    closet.render.table($root, data, opts);
+                });                
+            }            
+        }
+    }, {
+        name: 'ipv4',
+        title: 'IPv4 Addresses',
+        apply: function(pcap, fields) {
+            return fields.hasOwnProperty('ip.host');
+        },
+        options: function(pcap, opts, cb) {
+            pcap.index.services.sort();
+            opts.choice('filter', '', { 'values': [''].concat(pcap.index.services) });
+            opts.choice('limit', 10, { 'values': [ '', 10, 20, 50, 100 ] });
+            opts.choice('order', 'count', { values: ['count', 'ip'] });
+            opts.boolean('descending', true);
+            opts.boolean('normalize', true);
+            cb();
+        },
+        create: function(ctx, $root, pcap, opts) {
+            if (opts.order) {
+                opts = $.extend({}, opts, {
+                    order: { count: 'value', ip: 'key' }[opts.order]
+                });
+            }
+            
+            // TODO: We'll need to have the ipv4/ipv6 type within each 
+            // flow. This will allow us to rapidly scan for v4/v6 addresses
+            // instead of running through all the packets
+            var q = 'pkt.first:true ip.version:4';
+            q = q + (opts.filter ? ' pkt.service:' + opts.filter : '')
+            var r = closet.mr.count('ip.host');
+            closet.api.packets.report(pcap._id, q, r, function(data) {
+                closet.render.table($root, data, opts);
+            });
+        }
+    }, {
+        name: 'ipv6',
+        title: 'IPv6 Addresses',
+        apply: function(pcap, fields) {
+            return fields.hasOwnProperty('ipv6.host');
+        },
+        options: function(pcap, opts, cb) {
+            pcap.index.services.sort();
+            opts.choice('filter', '', { 'values': [''].concat(pcap.index.services) });
+            opts.choice('limit', 10, { 'values': [ '', 10, 20, 50, 100 ] });
+            opts.choice('order', 'count', { values: ['count', 'ip'] });
+            opts.boolean('descending', true);
+            opts.boolean('normalize', true);
+            cb();
+        },
+        create: function(ctx, $root, pcap, opts) {
+            if (opts.order) {
+                opts = $.extend({}, opts, {
+                    order: { count: 'value', ip: 'key' }[opts.order]
+                });
+            }
+            
+            var q = 'pkt.first:true ip.version:6';
+            q = q + (opts.filter ? ' pkt.service:' + opts.filter : '');
+            var r = closet.mr.count('ipv6.host');
+            closet.api.packets.report(pcap._id, q, r, function(data) {
+                closet.render.table($root, data, opts);                
+            });
+        }
+    }]
+});

data/lib/pcapr_local/www/static/script/closet/closet.reports.sip.js

@@ -0,0 +1,159 @@
+var closet = closet || {};
+closet.reports = closet.reports || [];
+closet.reports.push({
+    name: 'sip',
+    title: 'SIP',
+    apply: function(pcap, fields) {
+        return fields.hasOwnProperty('sip.method');
+    },
+    items: [{
+        name: 'calls',
+        title: 'Calls',
+        apply: function(pcap, fields) {
+            return fields.hasOwnProperty('sip.call.id');
+        },
+        create: function(ctx, $root, pcap, opts) {
+            var calls = [];
+            
+            var $status = $root.find('span.throbber');
+            
+            // 1. Find all the unique call-ids in the pcap
+            var q = 'pkt.service:sip* sip.method:invite';
+            var r = closet.mr.count('sip.call.id');
+            closet.api.packets.report(pcap._id, q, r, function(data) {
+                async.forEachSeries(data.rows, 
+                    function(row, next) {
+                        var call = { id: row.key };
+                        calls.push(call);
+                        
+                        $status.text('processing call-id ' + call.id);
+                        
+                        // 2. Find the first INVITE that has this callid. This tell us
+                        // who started the call.
+                        q = 'pkt.service:sip* sip.method:invite sip.call.id:' + closet.util.escapeQuery(call.id);
+                        closet.api.packets.list(pcap._id, { q:q, limit:1, include_fields:true }, function(data) {
+                            var pkt = data.rows[0];
+                            call.src = pkt.src;
+                            call.dst = pkt.dst;
+                            pkt.fields = closet.util.kvsToObject(pkt.fields);
+                            call.from = (pkt.fields['sip.from.user']||['unknown'])[0].replace(/;.*$/, '');
+                            call.to = (pkt.fields['sip.to.user']||['unknown'])[0].replace(/;.*$/, '');
+
+                            // 3. Find the unique SIP flows that make up this call
+                            q = 'sip.call.id:' + closet.util.escapeQuery(call.id);
+                            var r = closet.mr.count('pkt.flow');
+                            closet.api.packets.report(pcap._id, q, r, function(data) {
+                                var fids = $.map(data.rows, function(row) { return row.key; });
+                                
+                                // 4. And fetch the flow information
+                                var qf = 'flow.id:(' + fids.join('||') + ')';
+                                closet.api.flows.list(pcap._id, { q: qf }, function(data) {
+                                    call.flows = data.rows;
+                                    
+                                    // 5. Compute the span for this call-leg
+                                    call.span = {};
+                                    $.each(call.flows, function(_, flow) {
+                                        call.span.min = Math.min(call.span.min || flow.first, flow.first);
+                                        call.span.max = Math.max(call.span.max || flow.last, flow.last);
+                                    });
+                                    
+                                    $status.text('extracting RTP streams for call-id ' + call.id);
+                                    
+                                    // 5. For this call-id, look for sdp packets that contain RTP information
+                                    var qrtp = 'sip.call.id:' + closet.util.escapeQuery(call.id) + ' sdp.version:0';
+                                    closet.api.packets.list(pcap._id, { q: qrtp, include_fields: true }, function(data) {
+                                        var rtps = { ips: [], ports: [], media: [] };
+                                        $.each(data.rows, function(_, pkt) {
+                                            pkt.fields = closet.util.kvsToObject(pkt.fields);
+                                            var ips = pkt.fields['sdp.connection.info.address'];
+                                            var ports = pkt.fields['sdp.media.port'];
+                                            var media = pkt.fields['sdp.mime.type'];
+                                            rtps.ips = rtps.ips.concat(ips || []);
+                                            rtps.ports = rtps.ports.concat(ports || []);
+                                            rtps.media = rtps.media.concat(media || []);
+                                        });
+
+                                        // 6. And then stitch the RTP flows within the span together with the SIP flows
+                                        var qfrtp = 'flow.first:>=' + call.span.min + ' flow.last:<=' + call.span.max + ' flow.service:RTP flow.dst:(' + rtps.ips.join('||') + ') flow.dport:(' + rtps.ports.join('||') + ')';
+                                        closet.api.flows.list(pcap._id, { q: qfrtp }, function(data) {
+                                            call.flows = call.flows.concat(data.rows);
+                                            call.rtp = data.rows;
+                                            call.media = closet.util.unique(rtps.media);
+
+                                            // Compute the #total packets for this call-leg
+                                            var fids = $.map(call.flows, function(flow) { return flow.id; });
+                                            call.q = 'pkt.flow:(' + fids.join('||') + ')';
+                                            call.packets = 0;
+                                            $.each(call.flows, function(_, flow) {
+                                                call.packets += flow.packets;
+                                            });
+                                            next();
+                                        });
+                                    });
+                                });
+                            });
+                        });
+                    },
+                    function() {
+                        // TODO:
+                        // - For each flow that matches the call-id, show the call-flow
+                        // - Show statistics about the message types + error codes
+                        ctx.render('/templates/sip.calls.template', { pcap: pcap, calls: calls }, function(content) {
+                            $root.html(content);
+                        });
+                    }
+                );
+            });
+        }
+    }, {
+        name: 'phones',
+        title: 'Phones',
+        apply: function(pcap, fields) {
+            return fields.hasOwnProperty('sip.user.agent');
+        },        
+        options: function(pcap, opts, cb) {
+            opts.choice('limit', 10, { 'values': [ '', 10, 20, 50, 100 ] });
+            opts.choice('order', 'count', { values: [ 'count', 'phone' ] });
+            opts.boolean('descending', true);
+            opts.boolean('normalize', true);
+            cb();
+        },
+        create: function(ctx, $root, pcap, opts) {
+            opts = $.extend({}, opts, { value: 'count' });
+            if (opts.order) {
+                opts.order = { count: 'value', phone: 'key' }[opts.order];
+            }
+            
+            var q = 'flow.service:sip*';
+            var r = closet.mr.count('sip.user.agent');
+            closet.api.flows.report(pcap._id, q, r, function(data) {
+                closet.render.table($root, data, opts);
+            });
+        }
+    },{
+        name: 'servers',
+        title: 'Servers',
+        apply: function(pcap, fields) {
+            return fields.hasOwnProperty('sip.server');
+        },
+        options: function(pcap, opts, cb) {
+            opts.choice('limit', 10, { 'values': [ '', 10, 20, 50, 100 ] });
+            opts.choice('order', 'count', { values: [ 'count', 'server' ] });
+            opts.boolean('descending', true);
+            opts.boolean('normalize', true);
+            cb();
+        },
+        create: function(ctx, $root, pcap, opts) {
+            opts = $.extend({}, opts, { value: 'count' });
+            if (opts.order) {
+                opts.order = { count: 'value', server: 'key' }[opts.order];
+            }
+            
+            var q = 'flow.service:sip*';
+            var r = closet.mr.count('sip.server');
+            closet.api.flows.report(pcap._id, q, r, function(data) {
+                closet.render.table($root, data, opts);
+            });
+        }
+    }]
+});

data/lib/pcapr_local/www/static/script/closet/closet.reports.tcp.js

@@ -0,0 +1,72 @@
+var closet = closet || {};
+closet.reports = closet.reports || [];
+closet.reports.push({
+    name: 'tcp',
+    title: 'TCP',
+    apply: function(pcap, fields) {
+        return fields.hasOwnProperty('tcp.stream');
+    },
+    items: [{
+        name: 'dport',
+        title: 'Destination Ports',
+        options: function(pcap, opts, cb) {
+            var q = 'flow.proto:6';
+            var r = closet.mr.count('flow.service');
+            closet.api.flows.report(pcap._id, q, r, function(data) {
+                var services = $.map(data.rows, function(row) { return row.key; });
+                opts.choice('filter', '', { 'values': [''].concat(services) });
+                opts.choice('limit', 10, { 'values': [ '', 10, 20, 50, 100 ] });
+                opts.choice('order', 'count', { values: ['count', 'port'] });
+                opts.boolean('descending', true);
+                opts.boolean('normalize', true);
+                cb();
+            });
+        },
+        create: function(ctx, $root, pcap, opts) {
+            if (opts.order) {
+                opts = $.extend({}, opts, {
+                    order: { count: 'value', port: 'key' }[opts.order]
+                });
+            }
+            
+            var q = 'flow.proto:6';
+            q = q + (opts.filter ? ' flow.service:' + opts.filter : '');
+            var r = closet.mr.count('flow.dport');
+            closet.api.flows.report(pcap._id, q, r, function(data) {
+                closet.render.table($root, data, opts);
+            });
+        }
+    }, {
+        name: 'bandwidth',
+        title: 'Bandwidth Utilization',
+        options: function(pcap, opts, cb) {
+            var q = 'flow.proto:6';
+            closet.api.flows.services(pcap._id, q, 0.0, pcap.index.about.duration, function(data) {
+                var services = $.map(data.rows, function(row) { return row.key; });
+                opts.choice('filter', '', { 'values': [''].concat(services) });
+                opts.choice('limit', 10, { 'values': [ '', 10, 20, 50, 100 ] });
+                opts.choice('order', 'bytes', { values: ['bytes', 'host'] });
+                opts.boolean('descending', true);
+                opts.boolean('normalize', false);
+                cb();
+            });            
+        },
+        create: function(ctx, $root, pcap, opts) {
+            opts = $.extend({}, opts, { value: 'bytes' });
+            if (opts.order) {
+                opts.order = { bytes: 'value', host: 'key' }[opts.order]
+            }
+            
+            var q = 'flow.proto:6';
+            q = q + (opts.filter ? ' flow.service:' + opts.filter : '');
+            var r = closet.mr.sum('flow.src', 'flow.bytes');
+            closet.api.flows.report(pcap._id, q, r, function(data) {
+                closet.render.table($root, data, opts);
+            });
+        }
+    }
+    // TODO:
+    // - connection rate
+    // - scans
+    ]
+});

data/lib/pcapr_local/www/static/script/closet/closet.reports.visualize.js

@@ -0,0 +1,263 @@
+var closet = closet || {};
+closet.reports = closet.reports || [];
+closet.reports.push({
+    name: 'visualize',
+    title: 'Visualize',
+    apply: function(pcap, fields) {
+        return pcap.index.about.flows > 0;
+    },
+    items:[{
+        name: 'flows',
+        title: 'Flows',
+        options: function(pcap, opts, cb) {
+            closet.api.flows.clients(pcap._id, '*', 0.0, pcap.index.about.duration, function(data) {
+                var clients = $.map(data.rows, function(row) { return row.key; });
+                opts.choice('client', '', { values: [''].concat(clients) });
+                closet.api.flows.servers(pcap._id, '*', 0.0, pcap.index.about.duration, function(data) {
+                    var servers = $.map(data.rows, function(row) { return row.key; });
+                    opts.choice('server', '', { values: [''].concat(servers) });
+                    closet.api.flows.services(pcap._id, '*', 0.0, pcap.index.about.duration, function(data) {
+                        var services = $.map(data.rows, function(row) { return row.key; });
+                        opts.choice('service', '', { values: [''].concat(services) });
+                        opts.choice('group', 'service', { values: [ 'service', 'src', 'dst', 'dport' ] });
+                        opts.choice('speed', 'normal', { values: [ 'normal', 'slow' ] });
+                        cb();
+                    });
+                });
+            });
+        },
+        create: (function() {
+            var globalReportId = 0;
+            
+            return function(ctx, $root, pcap, opts) {
+                var reportId = ++globalReportId;
+                var buckets = {};
+                var flows = {};
+                var packets = [];
+                var npackets = 1;
+                var timeout = { normal:50, slow:100 }[opts.speed];
+                var paused = false;
+                var fetching = false;
+                var timerId;
+                $root.html(
+                    '<a class="create" href="javascript:void(0)">create</a>' +
+                    '<a class="pause" href="javascript:void(0)" style="display:none">pause</a>' +
+                    '<p/>' +
+                    '<div class="status" style="padding-bottom:20px"></div>' +
+                    '<table class="replay">' +
+                    '<tbody>' +
+                    '</tbody>' +
+                    '</table>' +
+                    '<div class="info" style="margin-top:20px"></div>'
+                );
+            
+                var $buckets = $root.find('table.replay tbody');
+                var $status = $root.find('div.status');
+                var $create = $root.find('a.create');
+                var $pause = $root.find('a.pause');
+                var $info = $root.find('div.info');
+                
+                $pause.click(function() {
+                    paused = !paused;
+                    if (paused) {
+                        $pause.text('resume');
+                    } else {
+                        $pause.text('pause');
+                        $info.empty();
+                        timerId = timerId || setTimeout(function() { _next(); }, timeout);
+                    }
+                });
+            
+                // Create the key used to bucketize the flows
+                var _key = function(flow) {
+                    if (opts.group === 'dport') {
+                        return (flow.proto === 6 ? 'tcp/' : 'udp/') + flow.dport;
+                    }
+                    return flow[opts.group];
+                };
+                
+                // If we are filtering on a service, map the service to the set
+                // of ports so that we can filter the packets that belong to 
+                // that flow
+                if (opts.service) {
+                    var q = 'flow.service:' + closet.util.escapeQuery(opts.service.replace(/-\/.*/, ''));
+                    var r = closet.mr.count('flow.dport');
+                    closet.api.flows.report(pcap._id, q, r, function(data) {
+                        opts.ports = $.map(data.rows, function(row) { return row.key; });
+                    });
+                }
+                
+                // Generate the query depending on the opts setting
+                var _query = function(id) {
+                    var q = 'pkt.flow:>=1 pkt.id:>=' + (id+1);
+                    if (opts.client) {
+                        var client = closet.util.escapeQuery(opts.client);
+                        q += ' ((pkt.dir:0 pkt.src:' + client + ') || (pkt.dir:1 pkt.dst:' + client + '))';
+                    }
+                    if (opts.server) {
+                        var server = closet.util.escapeQuery(opts.server);
+                        q += ' ((pkt.dir:0 pkt.dst:' + server + ') || (pkt.dir:1 pkt.src:' + server + '))';
+                    }
+                    if (opts.ports) {
+                        var ports = opts.ports.join('||');
+                        q += ' ((pkt.dir:0 udp.dstport|tcp.dstport:(' + ports + ')) || (pkt.dir:1 udp.srcport|tcp.srcport:(' + ports + ')))';
+                    }
+                    if (opts.group === 'dport') {
+                        q += ' (ip.proto:(6||17))';
+                    }
+                    
+                    return q;
+                }
+                
+                // Add a flow to the list. If it's the first flow for a bucket,
+                // create the bucket as well.
+                var _add = function(flow) {
+                    var key = _key(flow);
+                    if (!buckets.hasOwnProperty(key)) {
+                        var $tr = $(
+                            '<tr>' +
+                            '<td style="white-space:nowrap">' + closet.util.escapeHTML(key) + '</td>' +
+                            '<td class="flows"></td>' +
+                            '</tr>'
+                        );
+                    
+                        $buckets.append($tr);
+                        buckets[key] = {};
+                        buckets[key].$td = $tr.find('td.flows');
+                        buckets[key].nflows = 0;
+                    }
+                
+                    var $span = $(
+                        '<div class="flow" style="cursor:pointer;float:left;position:relative;background-color:#ffdddd;border:1px solid red;margin-right:5px;margin-left:5px;margin-right:10px;height:1.2em;width:30px">' +
+                            '<div class="fill" style="position:absolute;background-color:#e66c25;height:100%;width:1%"></div>' +
+                        '</div>'
+                    );
+                    
+                    $span.click(function() {
+                        $info.html(
+                            'Flow&nbsp;<strong>' + flow.id + '</strong>.&nbsp;' +
+                            '<strong>' + flow.src + '</strong>' +
+                            '&nbsp;&raquo;&nbsp;' + 
+                            '<strong>' + flow.dst + '</strong>' + '&nbsp::&nbsp;' +
+                            '<strong>' + closet.util.escapeHTML(flow.service) + '</strong>&nbsp;' +
+                            closet.util.escapeHTML(flow.title.slice(0, 80)) +
+                            '<p/>' +
+                            '<img class="icon" src="/static/image/16x16/Download.png"/>' +
+                            'Download <a href="/pcaps/1/pcap/' + pcap._id + '/api/packets/slice?q=pkt.flow:' + flow.id + '">pcap</a> for this flow.'
+                        );                        
+                    });
+                    
+                    buckets[key].$td.append($span);
+                    buckets[key].nflows++;
+                    flow.$span = $span;
+                    flow.$fill = $span.find('div.fill');
+                    flow.npackets = 1;
+                    flows[flow.id] = flow;                    
+                };
+                
+                // Remove a flow from the flow list and if it's the last
+                // flow in the bucket, remove the bucketized row as well
+                var _remove = function(flow) {
+                    var key = _key(flow);
+                    setTimeout(function() {
+                        delete flows[flow.id];
+                        flow.$fill.css('background-color', '#dd1122');
+                        flow.$span.fadeOut(1000, function() {
+                            $(this).remove();
+                            if (--buckets[key].nflows === 0) {
+                                var s_entry = buckets[key];
+                                delete buckets[key];
+                                s_entry.$td.parent('tr').remove();                                        
+                            }
+                        });
+                    }, 100);
+                };
+            
+                var location = ctx.app.getLocation();
+                var _next = function() {
+                    timerId = undefined;
+                    
+                    // Abort if the user navigates to a different URL
+                    if (ctx.app.getLocation() !== location) { 
+                        return; 
+                    }
+                    
+                    // Abort if the user changes 'opts' to create a new viz
+                    if (reportId !== globalReportId) { 
+                        return; 
+                    }
+                    
+                    // Don't process this packet, if the visualization is paused
+                    if (paused) {
+                        return;
+                    }
+                    
+                    // When we hit the low water-mark, prefetch (async) the 
+                    // next set of packets
+                    if (packets.length === 30 && !fetching) {
+                        var last = packets[packets.length-1];
+                        fetching = true;
+                        closet.api.packets.list(pcap._id, { q: _query(last.id), limit: 40, terms: false }, function(data) {
+                            fetching = false;
+                            packets = packets.concat(data.rows);
+                            timerId = timerId || setTimeout(function() { _next(); }, timeout);
+                        });
+                    }
+                
+                    // Process the next packet. If there are no more packets
+                    // and we are not in the middle of fetching more chunks,
+                    // then we are done.
+                    var pkt = packets.shift();
+                    if (pkt === undefined) {
+                        if (!fetching) {
+                            $status.empty();
+                            $pause.hide();
+                            $info.empty();
+                            $create.show();
+                        }
+                        return; 
+                    }
+                    
+                    // Update the status with the current packet
+                    $status.html(
+                        'Packet &nbsp;<strong>' + pkt.src + '</strong>' +
+                        '&nbsp;&raquo;&nbsp;' + 
+                        '<strong>' + pkt.dst + '</strong>' + '&nbsp::&nbsp;' +
+                        '<strong>' + closet.util.escapeHTML(pkt.service) + '</strong>&nbsp;' +
+                        closet.util.escapeHTML(pkt.title.slice(0, 80))
+                    );
+                
+                    // Add/remove flows for this packet
+                    if (!flows.hasOwnProperty(pkt.flow)) {
+                        closet.api.flows.list(pcap._id, { q: 'flow.id:' + pkt.flow, limit: 1, terms: false }, function(data) {
+                            var flow = data.rows[0];
+                            _add(flow);
+                            if (flow.first === flow.last) {
+                                _remove(flow);
+                            }                        
+                            timerId = timerId || setTimeout(function() { _next(); }, timeout);
+                        });
+                    } else {
+                        var flow = flows[pkt.flow];
+                        var key = _key(flow);
+                        flow.$fill.css('width', Math.floor((++flow.npackets)*100/flow.packets) + '%');
+                        if (flow.last === pkt.id) {
+                            _remove(flow);
+                        }                    
+                        timerId = timerId || setTimeout(function() { _next(); }, timeout);
+                    }
+                };
+            
+                $create.click(function() {
+                    $(this).hide();
+                    $pause.show();
+                    $status.html('<span class="throbber">hang on</span>');
+                    closet.api.packets.list(pcap._id, { q: _query(0), limit: 100, terms: false }, function(data) {
+                        packets = data.rows;
+                        _next();
+                    });
+                });
+            };
+        }())   
+    }]
+});