diff options
Diffstat (limited to 'web/src')
17 files changed, 219 insertions, 15 deletions
diff --git a/web/src/css/app.less b/web/src/css/app.less index 1eec0687..39ac14cd 100644 --- a/web/src/css/app.less +++ b/web/src/css/app.less @@ -7,6 +7,7 @@ html { box-sizing: inherit; } +@import (less) "sprites.compiled.less"; @import (less) "layout.less"; @import (less) "header.less"; @import (less) "flowtable.less"; diff --git a/web/src/css/flowtable.less b/web/src/css/flowtable.less index 95f235f4..deef9c81 100644 --- a/web/src/css/flowtable.less +++ b/web/src/css/flowtable.less @@ -1,5 +1,34 @@ .flow-table { width: 100%; + table-layout: fixed; + thead { + background-color: #dadada; + } + td { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + + .col-tls { + width: 10px; + } + .col-tls-https { + background-color: rgba(0, 185, 0, 0.5); + } + .col-icon { + width: 32px; + } + .col-method { + width: 60px; + } + .col-status { + width: 50px; + } + .col-time { + width: 120px; + } }
\ No newline at end of file diff --git a/web/src/css/sprites.compiled.less b/web/src/css/sprites.compiled.less new file mode 100644 index 00000000..27951ee5 --- /dev/null +++ b/web/src/css/sprites.compiled.less @@ -0,0 +1,58 @@ +.resource-icon { + width: 32px; + height: 32px; +} + +// From Chrome Dev Tools +.resource-icon-css { + background-image: url("../images/sprite.png"); + background-position: -0px -0px; + background-size: 32px 320px!important; +} +.resource-icon-document { + background-image: url("../images/sprite.png"); + background-position: -0px -32px; + background-size: 32px 320px!important; +} +.resource-icon-js { + background-image: url("../images/sprite.png"); + background-position: -0px -64px; + background-size: 32px 320px!important; +} +.resource-icon-plain { + background-image: url("../images/sprite.png"); + background-position: -0px -96px; + background-size: 32px 320px!important; +} + +// Own +.resource-icon-executable { + background-image: url("../images/sprite.png"); + background-position: -0px -128px; + background-size: 32px 320px!important; +} +.resource-icon-flash { + background-image: url("../images/sprite.png"); + background-position: -0px -160px; + background-size: 32px 320px!important; +} +.resource-icon-image { + background-image: url("../images/sprite.png"); + background-position: -0px -192px; + background-size: 32px 320px!important; +} +.resource-icon-java { + background-image: url("../images/sprite.png"); + background-position: -0px -224px; + background-size: 32px 320px!important; +} +.resource-icon-not-modified { + background-image: url("../images/sprite.png"); + background-position: -0px -256px; + background-size: 32px 320px!important; +} +.resource-icon-redirect { + background-image: url("../images/sprite.png"); + background-position: -0px -288px; + background-size: 32px 320px!important; +}
\ No newline at end of file diff --git a/web/src/css/sprites.less b/web/src/css/sprites.less new file mode 100644 index 00000000..9a63fdd3 --- /dev/null +++ b/web/src/css/sprites.less @@ -0,0 +1,38 @@ +.resource-icon { + width: 32px; + height: 32px; +} + +// From Chrome Dev Tools +.resource-icon-css { + background-image: url(../images/chrome-devtools/resourceCSSIcon.png); +} +.resource-icon-document { + background-image: url(../images/chrome-devtools/resourceDocumentIcon.png); +} +.resource-icon-js { + background-image: url(../images/chrome-devtools/resourceJSIcon.png); +} +.resource-icon-plain { + background-image: url(../images/chrome-devtools/resourcePlainIcon.png); +} + +// Own +.resource-icon-executable { + background-image: url(../images/resourceExecutableIcon.png); +} +.resource-icon-flash { + background-image: url(../images/resourceFlashIcon.png); +} +.resource-icon-image { + background-image: url(../images/resourceImageIcon.png); +} +.resource-icon-java { + background-image: url(../images/resourceJavaIcon.png); +} +.resource-icon-not-modified { + background-image: url(../images/resourceNotModifiedIcon.png); +} +.resource-icon-redirect { + background-image: url(../images/resourceRedirectIcon.png); +}
\ No newline at end of file diff --git a/web/src/images/chrome-devtools/LICENSE b/web/src/images/chrome-devtools/LICENSE new file mode 100644 index 00000000..6e4f8b9f --- /dev/null +++ b/web/src/images/chrome-devtools/LICENSE @@ -0,0 +1,30 @@ +// Copyright 2014 The Chromium Authors. All rights reserved. +// +// The Chromium Authors can be found at +// http://src.chromium.org/svn/trunk/src/AUTHORS +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\ No newline at end of file diff --git a/web/src/images/chrome-devtools/resourceCSSIcon.png b/web/src/images/chrome-devtools/resourceCSSIcon.png Binary files differnew file mode 100644 index 00000000..18828d06 --- /dev/null +++ b/web/src/images/chrome-devtools/resourceCSSIcon.png diff --git a/web/src/images/chrome-devtools/resourceDocumentIcon.png b/web/src/images/chrome-devtools/resourceDocumentIcon.png Binary files differnew file mode 100644 index 00000000..fdc10e47 --- /dev/null +++ b/web/src/images/chrome-devtools/resourceDocumentIcon.png diff --git a/web/src/images/chrome-devtools/resourceJSIcon.png b/web/src/images/chrome-devtools/resourceJSIcon.png Binary files differnew file mode 100644 index 00000000..c1b72189 --- /dev/null +++ b/web/src/images/chrome-devtools/resourceJSIcon.png diff --git a/web/src/images/chrome-devtools/resourcePlainIcon.png b/web/src/images/chrome-devtools/resourcePlainIcon.png Binary files differnew file mode 100644 index 00000000..8c82a4c7 --- /dev/null +++ b/web/src/images/chrome-devtools/resourcePlainIcon.png diff --git a/web/src/images/resourceExecutableIcon.png b/web/src/images/resourceExecutableIcon.png Binary files differnew file mode 100644 index 00000000..fa70c2fd --- /dev/null +++ b/web/src/images/resourceExecutableIcon.png diff --git a/web/src/images/resourceFlashIcon.png b/web/src/images/resourceFlashIcon.png Binary files differnew file mode 100644 index 00000000..ead5a4d0 --- /dev/null +++ b/web/src/images/resourceFlashIcon.png diff --git a/web/src/images/resourceImageIcon.png b/web/src/images/resourceImageIcon.png Binary files differnew file mode 100644 index 00000000..23163042 --- /dev/null +++ b/web/src/images/resourceImageIcon.png diff --git a/web/src/images/resourceJavaIcon.png b/web/src/images/resourceJavaIcon.png Binary files differnew file mode 100644 index 00000000..553b3391 --- /dev/null +++ b/web/src/images/resourceJavaIcon.png diff --git a/web/src/images/resourceNotModifiedIcon.png b/web/src/images/resourceNotModifiedIcon.png Binary files differnew file mode 100644 index 00000000..9c6a879d --- /dev/null +++ b/web/src/images/resourceNotModifiedIcon.png diff --git a/web/src/images/resourceRedirectIcon.png b/web/src/images/resourceRedirectIcon.png Binary files differnew file mode 100644 index 00000000..58fe3ac1 --- /dev/null +++ b/web/src/images/resourceRedirectIcon.png diff --git a/web/src/js/components/flowtable.jsx b/web/src/js/components/flowtable.jsx index 5e9f6718..a94e559f 100644 --- a/web/src/js/components/flowtable.jsx +++ b/web/src/js/components/flowtable.jsx @@ -4,7 +4,10 @@ var FlowRow = React.createClass({ render: function(){ var flow = this.props.flow; var columns = this.props.columns.map(function(column){ - return column({flow: flow}); + return column({ + key: column.displayName, + flow: flow + }); }.bind(this)); return <tr>{columns}</tr>; } @@ -22,55 +25,89 @@ var FlowTableHead = React.createClass({ var FlowTableBody = React.createClass({ render: function(){ var rows = this.props.flows.map(function(flow){ - return <FlowRow flow={flow} columns={this.props.columns}/> + //TODO: Add UUID + return <FlowRow flow={flow} columns={this.props.columns}/>; }.bind(this)); return <tbody>{rows}</tbody>; } }); + +var TLSColumn = React.createClass({ + statics: { + renderTitle: function(){ + return <th key="tls" className="col-tls"></th>; + } + }, + render: function(){ + var flow = this.props.flow; + var ssl = (flow.request.scheme == "https"); + return <td className={ssl ? "col-tls-https" : "col-tls-http"}></td>; + } +}); + + +var IconColumn = React.createClass({ + statics: { + renderTitle: function(){ + return <th key="icon" className="col-icon"></th>; + } + }, + render: function(){ + var flow = this.props.flow; + return <td className="resource-icon resource-icon-plain"></td>; + } +}); + var PathColumn = React.createClass({ statics: { renderTitle: function(){ - return <th key="PathColumn">Path</th>; + return <th key="path" className="col-path">Path</th>; } }, render: function(){ var flow = this.props.flow; - return <td key="PathColumn">{flow.request.scheme + "://" + flow.request.host + flow.request.path}</td>; + return <td>{flow.request.scheme + "://" + flow.request.host + flow.request.path}</td>; } }); + + var MethodColumn = React.createClass({ statics: { renderTitle: function(){ - return <th key="MethodColumn">Method</th>; + return <th key="method" className="col-method">Method</th>; } }, render: function(){ var flow = this.props.flow; - return <td key="MethodColumn">{flow.request.method}</td>; + return <td>{flow.request.method}</td>; } }); + + var StatusColumn = React.createClass({ statics: { renderTitle: function(){ - return <th key="StatusColumn">Status</th>; + return <th key="status" className="col-status">Status</th>; } }, render: function(){ var flow = this.props.flow; var status; if(flow.response){ - status = flow.response.code + " " + flow.response.msg; + status = flow.response.code; } else { status = null; } - return <td key="StatusColumn">{status}</td>; + return <td>{status}</td>; } }); + + var TimeColumn = React.createClass({ statics: { renderTitle: function(){ - return <th key="TimeColumn">Time</th>; + return <th key="time" className="col-time">Time</th>; } }, render: function(){ @@ -81,11 +118,13 @@ var TimeColumn = React.createClass({ } else { time = "..."; } - return <td key="TimeColumn">{time}</td>; + return <td>{time}</td>; } }); -var all_columns = [PathColumn, MethodColumn, StatusColumn, TimeColumn]; + +var all_columns = [TLSColumn, IconColumn, PathColumn, MethodColumn, StatusColumn, TimeColumn]; + var FlowTable = React.createClass({ getInitialState: function () { diff --git a/web/src/js/stores/flowstore.js b/web/src/js/stores/flowstore.js index 006eeb24..a5cb74ba 100644 --- a/web/src/js/stores/flowstore.js +++ b/web/src/js/stores/flowstore.js @@ -30,13 +30,14 @@ _.extend(FlowView.prototype, EventEmitter.prototype, { var updates = this.flows; this.flows = flows; updates.forEach(function(flow){ - this.update(flow); + this._update(flow); }.bind(this)); + this.emit("change"); }, - update: function(flow){ + _update: function(flow){ console.debug("FIXME: Use UUID"); var idx = _.findIndex(this.flows, function(f){ - return flow.request.timestamp_start == f.request.timestamp_start + return flow.request.timestamp_start == f.request.timestamp_start; }); if(idx < 0){ @@ -44,6 +45,9 @@ _.extend(FlowView.prototype, EventEmitter.prototype, { } else { this.flows[idx] = flow; } + }, + update: function(flow){ + this._update(flow); this.emit("change"); }, }); @@ -55,6 +59,11 @@ function _FlowStore() { _.extend(_FlowStore.prototype, EventEmitter.prototype, { getView: function (since) { var view = new FlowView(this, !since); + + $.getJSON("/static/flows.json", function(flows){ + view.add_bulk(flows); + }); + return view; }, handle: function (action) { |
