UNPKG

@luminati-io/luminati-proxy

Version:

A configurable local proxy for brightdata.com

1,224 lines (1,210 loc) 11.5 MB
(self["webpackChunk"] = self["webpackChunk"] || []).push([[524],{ /***/ 74063: /***/ ((module, exports, __webpack_require__) => { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__; var module; !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () { // LICENSE_CODE ZON ISC 'use strict'; /*jslint react:true, es6:true*/ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(36202)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (_ref) { var version = _ref.version; var is_bs3 = String(version || 3).startsWith('3'); var E = {}; E.destroy = is_bs3 ? 'destroy' : 'dispose'; E.fix_title = is_bs3 ? 'fixTitle' : '_fixTitle'; return E; }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); /***/ }), /***/ 64445: /***/ ((module, exports, __webpack_require__) => { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__; var module; !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () { // LICENSE_CODE ZON ISC 'use strict'; /*jslint react:true, es6:true*/ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(63696), __webpack_require__(7557)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (React) { var E = {}; var Li = function Li(_ref) { var children = _ref.children; return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("div", { className: "circle_wrapper" }, /*#__PURE__*/React.createElement("div", { className: "circle" })), /*#__PURE__*/React.createElement("div", { className: "single_instruction" }, children)); }; E.Li = Li; var Instructions = function Instructions(_ref2) { var children = _ref2.children; return /*#__PURE__*/React.createElement("div", { className: "instructions" }, /*#__PURE__*/React.createElement("ol", { className: "instruction_list" }, children)); }; E.Instructions = Instructions; return E; }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); /***/ }), /***/ 31811: /***/ ((module, exports, __webpack_require__) => { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__; var module; !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(78304), __webpack_require__(10564), __webpack_require__(10906), __webpack_require__(39805), __webpack_require__(40989), __webpack_require__(15118), __webpack_require__(29402), __webpack_require__(87861), __webpack_require__(85707), __webpack_require__(40453)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (_extends2, _typeof2, _toConsumableArray2, _classCallCheck2, _createClass2, _possibleConstructorReturn2, _getPrototypeOf2, _inherits2, _defineProperty2, _objectWithoutProperties2) { // LICENSE_CODE ZON ISC 'use strict'; /*jslint react:true, es6:true*/ var _interopRequireDefault = __webpack_require__(96784); _extends2 = _interopRequireDefault(_extends2); _typeof2 = _interopRequireDefault(_typeof2); _toConsumableArray2 = _interopRequireDefault(_toConsumableArray2); _classCallCheck2 = _interopRequireDefault(_classCallCheck2); _createClass2 = _interopRequireDefault(_createClass2); _possibleConstructorReturn2 = _interopRequireDefault(_possibleConstructorReturn2); _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf2); _inherits2 = _interopRequireDefault(_inherits2); _defineProperty2 = _interopRequireDefault(_defineProperty2); _objectWithoutProperties2 = _interopRequireDefault(_objectWithoutProperties2); var _excluded = ["id", "tooltip", "active", "href", "placement"]; function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); } function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(63696), __webpack_require__(54266), __webpack_require__(71633), __webpack_require__(50572), __webpack_require__(3145), __webpack_require__(34543), __webpack_require__(9299)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (React, $, classnames, Pure_component, zutil, setdb, Tooltip) { var E = {}; // XXX krzysztof: temporarily copied from chrome_widgets var Toolbar_button = function Toolbar_button(_ref) { var id = _ref.id, tooltip = _ref.tooltip, active = _ref.active, href = _ref.href, placement = _ref.placement, props = (0, _objectWithoutProperties2["default"])(_ref, _excluded); return /*#__PURE__*/React.createElement("a", { className: classnames('toolbar_item toolbar_button', id, { active: active }), onClick: props.on_click || function () { return null; }, href: href }, /*#__PURE__*/React.createElement(Tooltip, { title: tooltip }, /*#__PURE__*/React.createElement("span", { className: classnames(id, 't_button', 'chrome_icon') }))); }; var Preview = /*#__PURE__*/function (_Pure_component) { function Preview() { var _this; (0, _classCallCheck2["default"])(this, Preview); for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _callSuper(this, Preview, [].concat(args)); (0, _defineProperty2["default"])(_this, "state", { cur_pane: 0 }); (0, _defineProperty2["default"])(_this, "select_pane", function (id) { _this.setState({ cur_pane: id }); }); return _this; } (0, _inherits2["default"])(Preview, _Pure_component); return (0, _createClass2["default"])(Preview, [{ key: "componentDidMount", value: function componentDidMount() { var _this2 = this; this.setdb_on('har_viewer.set_pane', function (pane) { if (pane === undefined) return; _this2.setState({ cur_pane: pane }); }); } }, { key: "render", value: function render() { var _this3 = this; if (!this.props.cur_preview) return null; var Pane_content = this.props.panes[this.state.cur_pane]; var req = this.props.cur_preview; return /*#__PURE__*/React.createElement("div", { style: this.props.style, className: "har_preview chrome" }, /*#__PURE__*/React.createElement("div", { className: "tabbed_pane_header" }, /*#__PURE__*/React.createElement("div", { className: "left_pane" }, /*#__PURE__*/React.createElement("div", { onClick: this.props.close, className: "close_btn_wrapper" }, /*#__PURE__*/React.createElement("div", { className: "small_icon close_btn" }), /*#__PURE__*/React.createElement("div", { className: "medium_icon close_btn_h" }))), /*#__PURE__*/React.createElement("div", { className: "right_panes" }, this.props.panes.map(function (p, idx) { return /*#__PURE__*/React.createElement(Pane, { key: p.id, width: p.width, id: p.id, idx: idx, on_click: _this3.select_pane, active: _this3.state.cur_pane == idx }); }), /*#__PURE__*/React.createElement(Pane_slider, { panes: this.props.panes, cur_pane: this.state.cur_pane }))), /*#__PURE__*/React.createElement("div", { className: "tabbed_pane_content" }, /*#__PURE__*/React.createElement(Pane_content, { key: req.uuid, req: req }))); } }]); }(Pure_component); E.Preview = Preview; var Pane = function Pane(_ref2) { var id = _ref2.id, idx = _ref2.idx, width = _ref2.width, on_click = _ref2.on_click, active = _ref2.active; return /*#__PURE__*/React.createElement("div", { onClick: function onClick() { return on_click(idx); }, style: { width: width }, className: classnames('pane', id, { active: active }) }, /*#__PURE__*/React.createElement("span", null, id)); }; var Pane_slider = function Pane_slider(_ref3) { var panes = _ref3.panes, cur_pane = _ref3.cur_pane; var slider_class = classnames('pane_slider'); var offset = panes.slice(0, cur_pane).reduce(function (acc, e) { return acc + e.width; }, 0); var slider_style = { width: panes[cur_pane].width, transform: "translateX(".concat(offset + 24, "px)") }; return /*#__PURE__*/React.createElement("div", { className: slider_class, style: slider_style }); }; // XX krzysztof: import from util var Copy_btn = function Copy_btn() { return null; }; E.Pane_headers = /*#__PURE__*/function (_Pure_component2) { function Pane_headers() { var _this4; (0, _classCallCheck2["default"])(this, Pane_headers); for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { args[_key2] = arguments[_key2]; } _this4 = _callSuper(this, Pane_headers, [].concat(args)); (0, _defineProperty2["default"])(_this4, "get_curl", function () { var req = _this4.props.req; var _req$details = req.details, username = _req$details.username, password = _req$details.password, super_proxy = _req$details.super_proxy; var headers = req.request.headers.map(function (h) { return "-H \"".concat(h.name, ": ") + "".concat(h.value.replace(/\\/g, '\\\\').replace(/"/g, '\\"'), "\""); }); var proxy = super_proxy ? '-x ' + (username || '') + ':' + (password || '') + '@' + super_proxy : ''; var url = '"' + req.request.url + '"'; return ['curl', proxy, '-X', req.request.method, url].concat((0, _toConsumableArray2["default"])(headers)).filter(Boolean).join(' '); }); return _this4; } (0, _inherits2["default"])(Pane_headers, _Pure_component2); return (0, _createClass2["default"])(Pane_headers, [{ key: "render", value: function render() { var req = this.props.req; var general_entries = [{ name: 'Request URL', value: req.request.url }, { name: 'Request method', value: req.request.method }, { name: 'Status code', value: req.response.status }, { name: 'Super proxy IP', value: req.details.super_proxy }, { name: 'Peer proxy IP', value: req.details.proxy_peer }, { name: 'Username', value: req.details.username }, { name: 'Password', value: req.details.password }, { name: 'Sent from', value: req.details.remote_address }].filter(function (e) { return e.value !== undefined; }); return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Copy_btn, { val: this.get_curl(), title: "Copy as cURL", style: { position: 'absolute', right: 5, top: 5 }, inner_style: { width: 'auto' } }), /*#__PURE__*/React.createElement("ol", { className: "tree_outline" }, /*#__PURE__*/React.createElement(Preview_section, { title: "General", pairs: general_entries }), /*#__PURE__*/React.createElement(Preview_section, { title: "Response headers", pairs: req.response.headers }), /*#__PURE__*/React.createElement(Preview_section, { title: "Request headers", pairs: req.request.headers }), /*#__PURE__*/React.createElement(Body_section, { title: "Request body", body: req.request.postData && req.request.postData.text }))); } }]); }(Pure_component); E.Pane_headers.width = 65; E.Pane_headers.id = 'headers'; var Pane_info = function Pane_info(_ref4) { var children = _ref4.children; return /*#__PURE__*/React.createElement("div", { className: "empty_view" }, /*#__PURE__*/React.createElement("div", { className: "block" }, children)); }; E.Pane_info = Pane_info; var Body_section = /*#__PURE__*/function (_Pure_component3) { function Body_section() { var _this5; (0, _classCallCheck2["default"])(this, Body_section); for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { args[_key3] = arguments[_key3]; } _this5 = _callSuper(this, Body_section, [].concat(args)); (0, _defineProperty2["default"])(_this5, "state", { open: true }); (0, _defineProperty2["default"])(_this5, "toggle", function () { return _this5.setState(function (prev) { return { open: !prev.open }; }); }); return _this5; } (0, _inherits2["default"])(Body_section, _Pure_component3); return (0, _createClass2["default"])(Body_section, [{ key: "render", value: function render() { if (!this.props.body) return null; var json; var raw_body; try { json = JSON.parse(this.props.body); } catch (e) { raw_body = this.props.body; } return [/*#__PURE__*/React.createElement("li", { key: "li", onClick: this.toggle, className: classnames('parent_title', 'expandable', { open: this.state.open }) }, this.props.title), /*#__PURE__*/React.createElement("ol", { key: "ol", className: classnames('children', { open: this.state.open }) }, !!json && /*#__PURE__*/React.createElement(JSON_viewer, { json: json }), !!raw_body && /*#__PURE__*/React.createElement(Header_pair, { name: "raw-data", value: raw_body }))]; } }]); }(Pure_component); var Preview_section = /*#__PURE__*/function (_Pure_component4) { function Preview_section() { var _this6; (0, _classCallCheck2["default"])(this, Preview_section); for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { args[_key4] = arguments[_key4]; } _this6 = _callSuper(this, Preview_section, [].concat(args)); (0, _defineProperty2["default"])(_this6, "state", { open: true }); (0, _defineProperty2["default"])(_this6, "toggle", function () { return _this6.setState(function (prev) { return { open: !prev.open }; }); }); return _this6; } (0, _inherits2["default"])(Preview_section, _Pure_component4); return (0, _createClass2["default"])(Preview_section, [{ key: "render", value: function render() { if (!this.props.pairs || !this.props.pairs.length) return null; return [/*#__PURE__*/React.createElement("li", { key: "li", onClick: this.toggle, className: classnames('parent_title', 'expandable', { open: this.state.open }) }, this.props.title, !this.state.open ? " (".concat(this.props.pairs.length, ")") : ''), /*#__PURE__*/React.createElement("ol", { key: "ol", className: classnames('children', { open: this.state.open }) }, this.props.pairs.map(function (p) { return /*#__PURE__*/React.createElement(Header_pair, { key: p.name, name: p.name, value: p.value }); }))]; } }]); }(Pure_component); var Header_pair = function Header_pair(_ref5) { var name = _ref5.name, value = _ref5.value; if (name == 'Status code') value = /*#__PURE__*/React.createElement(Status_value, { value: value }); return /*#__PURE__*/React.createElement("li", { className: "treeitem" }, /*#__PURE__*/React.createElement("div", { className: "header_name" }, name, ": "), /*#__PURE__*/React.createElement("div", { className: "header_value" }, value)); }; var Status_value = function Status_value(_ref6) { var value = _ref6.value; var info = value == 'unknown'; var green = /2../.test(value); var yellow = /3../.test(value); var red = /(canceled)|([45]..)/.test(value); var classes = classnames('small_icon', 'status', { info: info, green: green, yellow: yellow, red: red }); return /*#__PURE__*/React.createElement("div", { className: "status_wrapper" }, /*#__PURE__*/React.createElement("div", { className: classes }), value); }; var Img_viewer = function Img_viewer(_ref7) { var img = _ref7.img; return /*#__PURE__*/React.createElement("div", { className: "img_viewer" }, /*#__PURE__*/React.createElement("div", { className: "image" }, /*#__PURE__*/React.createElement("img", { src: img }))); }; E.Img_viewer = Img_viewer; var has_children = function has_children(o) { return !!o && (0, _typeof2["default"])(o) == 'object' && Object.keys(o).length; }; var JSON_viewer = function JSON_viewer(_ref8) { var json = _ref8.json; return /*#__PURE__*/React.createElement("div", { className: "json_viewer" }, /*#__PURE__*/React.createElement("ol", { className: "tree_root" }, /*#__PURE__*/React.createElement(Pair, { open: true, val: json }))); }; E.JSON_viewer = JSON_viewer; var Children = function Children(_ref9) { var val = _ref9.val, expanded = _ref9.expanded; if (has_children(val) && expanded) { return /*#__PURE__*/React.createElement("ol", { className: "tree_children" }, Object.entries(val).map(function (e) { return /*#__PURE__*/React.createElement(Pair, { key: e[0], label: e[0], val: e[1] }); })); } return null; }; var Pair = /*#__PURE__*/function (_React$PureComponent) { function Pair() { var _this7; (0, _classCallCheck2["default"])(this, Pair); for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) { args[_key5] = arguments[_key5]; } _this7 = _callSuper(this, Pair, [].concat(args)); (0, _defineProperty2["default"])(_this7, "state", { expanded: _this7.props.open }); (0, _defineProperty2["default"])(_this7, "toggle", function () { _this7.setState(function (prev) { return { expanded: !prev.expanded }; }); }); return _this7; } (0, _inherits2["default"])(Pair, _React$PureComponent); return (0, _createClass2["default"])(Pair, [{ key: "render", value: function render() { var _this$props = this.props, label = _this$props.label, val = _this$props.val; return [/*#__PURE__*/React.createElement(Tree_item, { expanded: this.state.expanded, label: label, val: val, toggle: this.toggle, key: "tree_item" }), /*#__PURE__*/React.createElement(Children, { val: val, expanded: this.state.expanded, key: "val" })]; } }]); }(React.PureComponent); var Tree_item = function Tree_item(_ref10) { var label = _ref10.label, val = _ref10.val, expanded = _ref10.expanded, toggle = _ref10.toggle; var classes = classnames('tree_item', { parent: has_children(val), expanded: expanded }); return /*#__PURE__*/React.createElement("li", { className: classes, onClick: toggle }, label ? [/*#__PURE__*/React.createElement("span", { key: "name", className: "name" }, label), /*#__PURE__*/React.createElement("span", { key: "separator", className: "separator" }, ": ")] : null, /*#__PURE__*/React.createElement(Value, { val: val, expanded: expanded })); }; var Value = function Value(_ref11) { var val = _ref11.val; if ((0, _typeof2["default"])(val) == 'object') return /*#__PURE__*/React.createElement(Value_object, { val: val });else if (typeof val == 'number') return /*#__PURE__*/React.createElement("span", { className: "value number" }, val);else if (typeof val == 'boolean') return /*#__PURE__*/React.createElement("span", { className: "value boolean" }, val.toString());else if (typeof val == 'string') return /*#__PURE__*/React.createElement("span", { className: "value string" }, "\"", val, "\"");else if (typeof val == 'undefined') return /*#__PURE__*/React.createElement("span", { className: "value undefined" }, "\"", val, "\"");else if (typeof val == 'function') return null; }; var Value_object = function Value_object(_ref12) { var val = _ref12.val; if (val === null) return /*#__PURE__*/React.createElement("span", { className: "value null" }, "null"); if (Array.isArray(val)) { if (!val.length) return /*#__PURE__*/React.createElement("span", { className: "value array empty" }, "[]"); return /*#__PURE__*/React.createElement("span", { className: "value array long" }, "[,...]"); } if (!Object.keys(val).length) return /*#__PURE__*/React.createElement("span", { className: "value object empty" }, '{}'); return /*#__PURE__*/React.createElement("span", { className: "value object" }, JSON.stringify(val)); }; var with_resizable_cols = function with_resizable_cols(Table) { var Resizable = /*#__PURE__*/function (_React$PureComponent2) { function Resizable(props) { var _this8; (0, _classCallCheck2["default"])(this, Resizable); _this8 = _callSuper(this, Resizable, [props]); (0, _defineProperty2["default"])(_this8, "set_ref", function (ref) { _this8.ref = ref; }); (0, _defineProperty2["default"])(_this8, "resize_columns", function () { var total_width = _this8.ref.offsetWidth; var resizable_cols = _this8.cols.filter(function (c) { return !c.hidden && !c.fixed; }); var total_fixed = _this8.cols.reduce(function (acc, c) { return acc + (!c.hidden && c.fixed || 0); }, 0); var width = (total_width - total_fixed) / resizable_cols.length; var next_cols = _this8.cols.reduce(function (acc, c, idx) { var w = !c.fixed && width || !c.hidden && c.fixed || 0; return { cols: [].concat((0, _toConsumableArray2["default"])(acc.cols), [_objectSpread(_objectSpread({}, c), {}, { width: w, offset: acc.offset, border: acc.border })]), offset: acc.offset + w, border: !!w }; }, { cols: [], offset: 0, border: true }); _this8.setState({ cols: next_cols.cols }); }); (0, _defineProperty2["default"])(_this8, "start_moving", function (e, idx) { if (e.nativeEvent.which != 1) return; _this8.start_offset = e.pageX; _this8.start_width = _this8.state.cols[idx].width; _this8.start_width_last = _this8.state.cols.slice(-1)[0].width; _this8.moving_col = idx; _this8.setState({ moving: true }); }); (0, _defineProperty2["default"])(_this8, "on_mouse_move", function (e) { if (_this8.moving_col === null) return; _this8.setState(function (prev) { var offset = e.pageX - _this8.start_offset; if (_this8.start_width_last - offset < _this8.min_width) offset = _this8.start_width_last - _this8.min_width; if (_this8.start_width + offset < _this8.min_width) offset = _this8.min_width - _this8.start_width; var total_width = 0; var next_cols = prev.cols.map(function (c, idx) { if (idx < _this8.moving_col) { total_width = total_width + c.width; return c; } else if (idx == _this8.moving_col) { var width = _this8.start_width + offset; total_width = total_width + width; return _objectSpread(_objectSpread({}, c), {}, { width: width, offset: total_width - width }); } else if (idx == _this8.state.cols.length - 1) { var _width = _this8.start_width_last - offset; return _objectSpread(_objectSpread({}, c), {}, { width: _width, offset: total_width }); } total_width = total_width + c.width; return _objectSpread(_objectSpread({}, c), {}, { offset: total_width - c.width }); }); return { cols: next_cols }; }); }); (0, _defineProperty2["default"])(_this8, "on_mouse_up", function () { _this8.moving_col = null; _this8.setState({ moving: false }); }); _this8.state = {}; _this8.cols = zutil.clone_deep(_this8.props.table_cols); _this8.min_width = 22; _this8.moving_col = null; _this8.style = { position: 'relative', display: 'flex', flex: 'auto', width: '100%' }; return _this8; } (0, _inherits2["default"])(Resizable, _React$PureComponent2); return (0, _createClass2["default"])(Resizable, [{ key: "componentDidMount", value: function componentDidMount() { this.resize_columns(); window.document.addEventListener('mousemove', this.on_mouse_move); window.document.addEventListener('mouseup', this.on_mouse_up); } }, { key: "componentWillUnmount", value: function componentWillUnmount() { window.document.removeEventListener('mousemove', this.on_mouse_move); window.document.removeEventListener('mouseup', this.on_mouse_up); } }, { key: "render", value: function render() { var style = Object.assign({}, this.style, this.props.style || {}); return /*#__PURE__*/React.createElement("div", { style: style, ref: this.set_ref, className: classnames({ moving: this.state.moving }) }, /*#__PURE__*/React.createElement(Table, (0, _extends2["default"])({}, this.props, { cols: this.state.cols, resize_columns: this.resize_columns })), /*#__PURE__*/React.createElement(Grid_resizers, { show: !this.props.cur_preview, start_moving: this.start_moving, cols: this.state.cols })); } }]); }(React.PureComponent); return Resizable; }; var Grid_resizers = function Grid_resizers(_ref13) { var cols = _ref13.cols, start_moving = _ref13.start_moving, show = _ref13.show; if (!show || !cols) return null; return /*#__PURE__*/React.createElement("div", null, cols.slice(0, -1).map(function (c, idx) { return !c.fixed && /*#__PURE__*/React.createElement("div", { key: c.title || idx, style: { left: c.width + c.offset - 2 }, onMouseDown: function onMouseDown(e) { return start_moving(e, idx); }, className: "data_grid_resizer" }); })); }; var Search_box = function Search_box(_ref14) { var val = _ref14.val, on_change = _ref14.on_change; return /*#__PURE__*/React.createElement("div", { className: "search_box" }, /*#__PURE__*/React.createElement("input", { value: val, onChange: on_change, type: "text", placeholder: "Filter" })); }; var Toolbar_row = function Toolbar_row(_ref15) { var children = _ref15.children; return /*#__PURE__*/React.createElement("div", { className: "toolbar" }, children); }; var Toolbar_container = function Toolbar_container(_ref16) { var children = _ref16.children; return /*#__PURE__*/React.createElement("div", { className: "toolbar_container" }, children); }; var Sort_icon = function Sort_icon(_ref17) { var show = _ref17.show, dir = _ref17.dir; if (!show) return null; var classes = classnames('small_icon_mask', { sort_asc: dir == -1, sort_desc: dir == 1 }); return /*#__PURE__*/React.createElement("div", { className: "sort_icon" }, /*#__PURE__*/React.createElement("span", { className: classes })); }; var Devider = function Devider() { return /*#__PURE__*/React.createElement("div", { className: "devider" }); }; var Har_viewer = /*#__PURE__*/function (_Pure_component5) { function Har_viewer() { var _this9; (0, _classCallCheck2["default"])(this, Har_viewer); for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) { args[_key6] = arguments[_key6]; } _this9 = _callSuper(this, Har_viewer, [].concat(args)); (0, _defineProperty2["default"])(_this9, "moving_width", false); (0, _defineProperty2["default"])(_this9, "min_width", 50); (0, _defineProperty2["default"])(_this9, "state", { cur_preview: null, tables_width: 200 }); (0, _defineProperty2["default"])(_this9, "open_preview", function (req) { return _this9.setState({ cur_preview: req }); }); (0, _defineProperty2["default"])(_this9, "close_preview", function () { return _this9.setState({ cur_preview: null }); }); (0, _defineProperty2["default"])(_this9, "start_moving_width", function (e) { if (e.nativeEvent.which != 1) return; _this9.moving_width = true; $(_this9.main_panel).addClass('moving'); _this9.start_offset = e.pageX; _this9.start_width = _this9.state.tables_width; }); (0, _defineProperty2["default"])(_this9, "on_resize_width", function (e) { var offset = e.pageX - _this9.start_offset; var new_width = _this9.start_width + offset; if (new_width < _this9.min_width) new_width = _this9.min_width; var max_width = _this9.main_panel.offsetWidth - _this9.min_width; if (new_width > max_width) new_width = max_width; _this9.setState({ tables_width: new_width }); }); (0, _defineProperty2["default"])(_this9, "on_mouse_move", function (e) { if (_this9.moving_width) _this9.on_resize_width(e); }); (0, _defineProperty2["default"])(_this9, "on_mouse_up", function () { _this9.moving_width = false; $(_this9.main_panel).removeClass('moving'); }); (0, _defineProperty2["default"])(_this9, "set_main_panel_ref", function (ref) { _this9.main_panel = ref; }); (0, _defineProperty2["default"])(_this9, "main_panel_moving", function () { $(_this9.main_panel).addClass('moving'); }); (0, _defineProperty2["default"])(_this9, "main_panel_stopped_moving", function () { $(_this9.main_panel).removeClass('moving'); }); (0, _defineProperty2["default"])(_this9, "undock", function () { if (_this9.props.dock_mode) return; var url = '/dock_logs'; var opts = 'directories=0,titlebar=0,toolbar=0,location=0,' + 'status=0,menubar=0,scrollbars=0,resizable=0,height=500,' + 'width=800'; var har_window = window.open(url, 'har_window', opts); if (window.focus) har_window.focus(); }); (0, _defineProperty2["default"])(_this9, "clear", function () { _this9.props.clear_logs(function () { _this9.close_preview(); setdb.emit_path('head.har_viewer.reset_reqs'); }); }); return _this9; } (0, _inherits2["default"])(Har_viewer, _Pure_component5); return (0, _createClass2["default"])(Har_viewer, [{ key: "componentDidMount", value: function componentDidMount() { window.document.addEventListener('mousemove', this.on_mouse_move); window.document.addEventListener('mouseup', this.on_mouse_up); } }, { key: "willUnmount", value: function willUnmount() { window.document.removeEventListener('mousemove', this.on_mouse_move); window.document.removeEventListener('mouseup', this.on_mouse_up); } }, { key: "render", value: function render() { var width = "calc(100% - ".concat(this.state.tables_width, "px"); var preview_style = { maxWidth: width, minWidth: width }; return /*#__PURE__*/React.createElement("div", { id: "har_viewer", className: "har_viewer chrome" }, /*#__PURE__*/React.createElement("div", { className: "main_panel vbox", ref: this.set_main_panel_ref }, this.props.toolbar && /*#__PURE__*/React.createElement(Toolbar, { undock: this.undock, clear: this.clear, dock_mode: this.props.dock_mode, filters: this.props.filters, set_filter: this.props.set_filter, type_filter: this.props.type_filter, set_type_filter: this.props.set_type_filter, on_change_search: this.props.on_change_search, search_val: this.props.search, disable_logs: this.props.disable_logs }), /*#__PURE__*/React.createElement("div", { className: "split_widget vbox flex_auto" }, /*#__PURE__*/React.createElement(Tables_container, { Cell_value: this.props.Cell_value, table_cols: this.props.table_cols, main_panel_moving: this.main_panel_moving, main_panel_stopped_moving: this.main_panel_stopped_moving, main_panel: this.main_panel, open_preview: this.open_preview, width: this.state.tables_width, cur_preview: this.state.cur_preview, set_sort: this.props.set_sort, sorted: this.props.sorted, reqs: this.props.reqs, handle_viewpoint_enter: this.props.handle_viewpoint_enter, Waypoint: this.props.Waypoint }), /*#__PURE__*/React.createElement(Preview, { panes: this.props.panes, cur_preview: this.state.cur_preview, style: preview_style, close: this.close_preview }), /*#__PURE__*/React.createElement(Tables_resizer, { show: !!this.state.cur_preview, start_moving: this.start_moving_width, offset: this.state.tables_width })))); } }]); }(Pure_component); E.Har_viewer = Har_viewer; var Toolbar = /*#__PURE__*/function (_Pure_component6) { function Toolbar() { var _this10; (0, _classCallCheck2["default"])(this, Toolbar); for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) { args[_key7] = arguments[_key7]; } _this10 = _callSuper(this, Toolbar, [].concat(args)); (0, _defineProperty2["default"])(_this10, "state", { filters_visible: false }); (0, _defineProperty2["default"])(_this10, "toggle_filters", function () { return _this10.setState({ filters_visible: !_this10.state.filters_visible }); }); return _this10; } (0, _inherits2["default"])(Toolbar, _Pure_component6); return (0, _createClass2["default"])(Toolbar, [{ key: "render", value: function render() { return /*#__PURE__*/React.createElement(Toolbar_container, null, /*#__PURE__*/React.createElement(Toolbar_row, null, /*#__PURE__*/React.createElement(Toolbar_button, { id: "clear", tooltip: "Clear", on_click: this.props.clear }), !this.props.dock_mode && /*#__PURE__*/React.createElement(Toolbar_button, { id: "docker", on_click: this.props.undock, tooltip: "Undock into separate window" }), /*#__PURE__*/React.createElement(Toolbar_button, { id: "filters", tooltip: "Show/hide filters", on_click: this.toggle_filters, active: this.state.filters_visible }), /*#__PURE__*/React.createElement(Toolbar_button, { id: "download", tooltip: "Export as HAR file", href: "/api/logs_har" }), /*#__PURE__*/React.createElement(Toolbar_button, { id: "close_btn", tooltip: "Disable", placement: "left", on_click: this.props.disable_logs })), this.state.filters_visible && /*#__PURE__*/React.createElement(Toolbar_row, null, /*#__PURE__*/React.createElement(Search_box, { val: this.props.search_val, on_change: this.props.on_change_search }), /*#__PURE__*/React.createElement(Type_filters, { filter: this.props.type_filter, set: this.props.set_type_filter }), /*#__PURE__*/React.createElement(Devider, null), /*#__PURE__*/React.createElement(Filters, { set_filter: this.props.set_filter, filters: this.props.filters }))); } }]); }(Pure_component); var Filters = /*#__PURE__*/function (_Pure_component7) { function Filters() { var _this11; (0, _classCallCheck2["default"])(this, Filters); for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) { args[_key8] = arguments[_key8]; } _this11 = _callSuper(this, Filters, [].concat(args)); (0, _defineProperty2["default"])(_this11, "state", {}); return _this11; } (0, _inherits2["default"])(Filters, _Pure_component7); return (0, _createClass2["default"])(Filters, [{ key: "componentDidMount", value: function componentDidMount() { var _this12 = this; this.setdb_on('head.logs_suggestions', function (suggestions) { suggestions && _this12.setState({ suggestions: suggestions }); }); } }, { key: "render", value: function render() { var _this13 = this; if (!this.state.suggestions) return null; var filters = [{ name: 'port', default_value: 'All proxy ports' }, { name: 'status_code', default_value: 'All status codes' }, { name: 'protocol', default_value: 'All protocols' }]; return /*#__PURE__*/React.createElement("div", { className: "filters" }, filters.map(function (f) { return /*#__PURE__*/React.createElement(Filter, { key: f.name, vals: _this13.state.suggestions[f.name + 's'], val: _this13.props.filters[f.name], set: _this13.props.set_filter.bind(null, f.name), default_value: f.default_value }); })); } }]); }(Pure_component); var Filter = function Filter(_ref18) { var vals = _ref18.vals, val = _ref18.val, set = _ref18.set, default_value = _ref18.default_value, format_text = _ref18.format_text; return /*#__PURE__*/React.createElement("div", { className: "custom_filter" }, /*#__PURE__*/React.createElement("select", { value: val, onChange: set }, /*#__PURE__*/React.createElement("option", { value: "" }, default_value), vals.map(function (p) { return /*#__PURE__*/React.createElement("option", { key: p, value: p }, format_text ? format_text(p) : p); })), /*#__PURE__*/React.createElement("span", { className: "arrow" })); }; E.Filter = Filter; var type_filters = ['XHR', 'HTML', 'JS', 'CSS', 'Img', 'Media', 'Font', 'Other']; var Type_filters = function Type_filters(_ref19) { var filter = _ref19.filter, set = _ref19.set; return /*#__PURE__*/React.createElement("div", { className: "filters" }, /*#__PURE__*/React.createElement(Type_filter, { name: "All", on_click: set.bind(null, 'All'), cur: filter }), /*#__PURE__*/React.createElement(Devider, null), type_filters.map(function (f) { return /*#__PURE__*/React.createElement(Type_filter, { on_click: set.bind(null, f), key: f, name: f, cur: filter }); })); }; var Type_filter = function Type_filter(_ref20) { var name = _ref20.name, cur = _ref20.cur, on_click = _ref20.on_click; return /*#__PURE__*/React.createElement("div", { className: classnames('filter', { active: cur == name }), onClick: on_click }, name); }; var Tables_resizer = function Tables_resizer(_ref21) { var show = _ref21.show, offset = _ref21.offset, start_moving = _ref21.start_moving; if (!show) return null; return /*#__PURE__*/React.createElement("div", { className: "data_grid_resizer", style: { left: offset - 2 }, onMouseDown: start_moving }); }; var Tables_container = with_resizable_cols(/*#__PURE__*/function (_Pure_component8) { function Tables_container(props) { var _this14; (0, _classCallCheck2["default"])(this, Tables_container); _this14 = _callSuper(this, Tables_container, [props]); (0, _defineProperty2["default"])(_this14, "on_focus", function () { return _this14.setState({ focused: true }); }); (0, _defineProperty2["default"])(_this14, "on_blur", function () { return _this14.setState({ focused: false }); }); (0, _defineProperty2["default"])(_this14, "on_mouse_up", function () { _this14.moving_col = null; _this14.props.main_panel_stopped_moving(); }); _this14.state = { focused: false }; return _this14; } (0, _inherits2["default"])(Tables_container, _Pure_component8); return (0, _createClass2["default"])(Tables_container, [{ key: "componentDidUpdate", value: function componentDidUpdate(prev_props) { if (prev_props.cur_preview != this.props.cur_preview) this.props.resize_columns(); } }, { key: "componentDidMount", value: function componentDidMount() { window.addEventListener('resize', this.props.resize_columns); } }, { key: "willUnmount", value: function willUnmount() { window.removeEventListener('resize', this.props.resize_columns); } }, { key: "render", value: function render() { var style = {}; if (this.props.cur_preview) { style.flex = "0 0 ".concat(this.props.width, "px"); style.width = this.props.width; style.maxWidth = this.props.width; } return /*#__PURE__*/React.createElement("div", { className: "tables_container vbox", tabIndex: "-1", style: style, onFocus: this.on_focus, onBlur: this.on_blur }, /*#__PURE__*/React.createElement("div", { className: "reqs_container" }, /*#__PURE__*/React.createElement(Header_container, { cols: this.props.cols, reqs: this.props.reqs, set_sort: this.props.set_sort, sorted: this.props.sorted, only_name: !!this.props.cur_preview }), /*#__PURE__*/React.createElement(Data_container, { Cell_value: this.props.Cell_value, cols: this.props.cols, reqs: this.props.reqs, handle_viewpoint_enter: this.props.handle_viewpoint_enter, focused: this.state.focused, cur_preview: this.props.cur_preview, open_preview: this.props.open_preview, Waypoint: this.props.Waypoint }))); } }]); }(Pure_component)); var Header_container = /*#__PURE__*/function (_Pure_component9) { function Header_container() { var _this15; (0, _classCallCheck2["default"])(this, Header_container); for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) { args[_key9] = arguments[_key9]; } _this15 = _callSuper(this, Header_container, [].concat(args)); (0, _defineProperty2["default"])(_this15, "click", function (col) { _this15.props.set_sort(col.sort_by); }); return _this15; } (0, _inherits2["default"])(Header_container, _Pure_component9); return (0, _createClass2["default"])(Header_container, [{ key: "render", value: function render() { var _this16 = this; var _this$props2 = this.props, cols = _this$props2.cols, only_name = _this$props2.only_name, sorted = _this$props2.sorted; if (!cols) return null; if (only_name) cols = [cols[1]]; return /*#__PURE__*/React.createElement("div", { className: "header_container" }, /*#__PURE__*/React.createElement("table", { className: "chrome_table" }, /*#__PURE__*/React.createElement("colgroup", null, cols.map(function (c, idx) { return /*#__PURE__*/React.createElement("col", { key: c.title, style: { width: only_name || idx == cols.length - 1 ? 'auto' : c.width } }); })), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, cols.map(function (c) { return /*#__PURE__*/React.createElement("th", { key: c.title,