@luminati-io/luminati-proxy
Version:
A configurable local proxy for brightdata.com
1,410 lines (1,382 loc) • 12.7 MB
JavaScript
(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 ({
version
}) {
const is_bs3 = String(version || 3).startsWith('3');
const E = {};
E.destroy = is_bs3 ? 'destroy' : 'dispose';
E.fix_title = is_bs3 ? 'fixTitle' : '_fixTitle';
E.data_attrs = attrs => Object.entries(attrs || {}).reduce((acc, [k, v]) => Object.assign(acc, {
['data-' + k]: v
}), {});
E.data_bs_attrs = attrs => Object.entries(attrs || {}).reduce((acc, [k, v]) => Object.assign(acc, {
['data-bs-' + k]: v
}), {});
E.data_all_attrs = attrs => Object.entries(attrs || {}).reduce((acc, [k, v]) => Object.assign(acc, {
['data-' + k]: v,
['data-bs-' + k]: v
}), {});
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_require__(62540)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (_jsxRuntime) {
// 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__ = (React => {
const E = {};
const Li = ({
children
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "circle_wrapper",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "circle"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "single_instruction",
children: children
})]
});
E.Li = Li;
const Instructions = ({
children
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "instructions",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
className: "instruction_list",
children: 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__(62540)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (_jsxRuntime) {
// LICENSE_CODE ZON ISC
'use strict';
/*jslint react:true, es6:true*/
!(__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) {
const E = {};
// XXX krzysztof: temporarily copied from chrome_widgets
const Toolbar_button = ({
id,
tooltip,
active,
href,
placement,
...props
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
className: classnames('toolbar_item toolbar_button', id, {
active
}),
onClick: props.on_click || (() => null),
href: href,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
title: tooltip,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: classnames(id, 't_button', 'chrome_icon')
})
})
});
class Preview extends Pure_component {
state = {
cur_pane: 0
};
select_pane = id => {
this.setState({
cur_pane: id
});
};
componentDidMount() {
this.setdb_on('har_viewer.set_pane', pane => {
if (pane === undefined) return;
this.setState({
cur_pane: pane
});
});
}
render() {
if (!this.props.cur_preview) return null;
const Pane_content = this.props.panes[this.state.cur_pane];
const req = this.props.cur_preview;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
style: this.props.style,
className: "har_preview chrome",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "tabbed_pane_header",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "left_pane",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
onClick: this.props.close,
className: "close_btn_wrapper",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "small_icon close_btn"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "medium_icon close_btn_h"
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "right_panes",
children: [this.props.panes.map((p, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Pane, {
width: p.width,
id: p.id,
idx: idx,
on_click: this.select_pane,
active: this.state.cur_pane == idx
}, p.id)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Pane_slider, {
panes: this.props.panes,
cur_pane: this.state.cur_pane
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "tabbed_pane_content",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Pane_content, {
req: req
}, req.uuid)
})]
});
}
}
E.Preview = Preview;
const Pane = ({
id,
idx,
width,
on_click,
active
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
onClick: () => on_click(idx),
style: {
width
},
className: classnames('pane', id, {
active
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: id
})
});
};
const Pane_slider = ({
panes,
cur_pane
}) => {
const slider_class = classnames('pane_slider');
const offset = panes.slice(0, cur_pane).reduce((acc, e) => acc + e.width, 0);
const slider_style = {
width: panes[cur_pane].width,
transform: `translateX(${offset + 24}px)`
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: slider_class,
style: slider_style
});
};
// XX krzysztof: import from util
const Copy_btn = () => null;
E.Pane_headers = class Pane_headers extends Pure_component {
get_curl = () => {
const req = this.props.req;
const {
username,
password,
super_proxy
} = req.details;
const headers = req.request.headers.map(h => `-H "${h.name}: ` + `${h.value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`);
const proxy = super_proxy ? '-x ' + (username || '') + ':' + (password || '') + '@' + super_proxy : '';
const url = '"' + req.request.url + '"';
return ['curl', proxy, '-X', req.request.method, url, ...headers].filter(Boolean).join(' ');
};
render() {
const req = this.props.req;
const 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(e => e.value !== undefined);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Copy_btn, {
val: this.get_curl(),
title: "Copy as cURL",
style: {
position: 'absolute',
right: 5,
top: 5
},
inner_style: {
width: 'auto'
}
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ol", {
className: "tree_outline",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Preview_section, {
title: "General",
pairs: general_entries
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Preview_section, {
title: "Response headers",
pairs: req.response.headers
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Preview_section, {
title: "Request headers",
pairs: req.request.headers
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Body_section, {
title: "Request body",
body: req.request.postData && req.request.postData.text
})]
})]
});
}
};
E.Pane_headers.width = 65;
E.Pane_headers.id = 'headers';
const Pane_info = ({
children
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "empty_view",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block",
children: children
})
});
E.Pane_info = Pane_info;
class Body_section extends Pure_component {
state = {
open: true
};
toggle = () => this.setState(prev => ({
open: !prev.open
}));
render() {
if (!this.props.body) return null;
let json;
let raw_body;
try {
json = JSON.parse(this.props.body);
} catch (e) {
raw_body = this.props.body;
}
return [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
onClick: this.toggle,
className: classnames('parent_title', 'expandable', {
open: this.state.open
}),
children: this.props.title
}, "li"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ol", {
className: classnames('children', {
open: this.state.open
}),
children: [!!json && /*#__PURE__*/(0, _jsxRuntime.jsx)(JSON_viewer, {
json: json
}), !!raw_body && /*#__PURE__*/(0, _jsxRuntime.jsx)(Header_pair, {
name: "raw-data",
value: raw_body
})]
}, "ol")];
}
}
class Preview_section extends Pure_component {
state = {
open: true
};
toggle = () => this.setState(prev => ({
open: !prev.open
}));
render() {
if (!this.props.pairs || !this.props.pairs.length) return null;
return [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
onClick: this.toggle,
className: classnames('parent_title', 'expandable', {
open: this.state.open
}),
children: [this.props.title, !this.state.open ? ` (${this.props.pairs.length})` : '']
}, "li"), /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
className: classnames('children', {
open: this.state.open
}),
children: this.props.pairs.map(p => /*#__PURE__*/(0, _jsxRuntime.jsx)(Header_pair, {
name: p.name,
value: p.value
}, p.name))
}, "ol")];
}
}
const Header_pair = ({
name,
value
}) => {
if (name == 'Status code') value = /*#__PURE__*/(0, _jsxRuntime.jsx)(Status_value, {
value: value
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
className: "treeitem",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "header_name",
children: [name, ": "]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "header_value",
children: value
})]
});
};
const Status_value = ({
value
}) => {
const info = value == 'unknown';
const green = /2../.test(value);
const yellow = /3../.test(value);
const red = /(canceled)|([45]..)/.test(value);
const classes = classnames('small_icon', 'status', {
info,
green,
yellow,
red
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "status_wrapper",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: classes
}), value]
});
};
const Img_viewer = ({
img
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "img_viewer",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "image",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
src: img
})
})
});
E.Img_viewer = Img_viewer;
const has_children = o => !!o && typeof o == 'object' && Object.keys(o).length;
const JSON_viewer = ({
json
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "json_viewer",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
className: "tree_root",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Pair, {
open: true,
val: json
})
})
});
E.JSON_viewer = JSON_viewer;
const Children = ({
val,
expanded
}) => {
if (has_children(val) && expanded) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
className: "tree_children",
children: Object.entries(val).map(e => /*#__PURE__*/(0, _jsxRuntime.jsx)(Pair, {
label: e[0],
val: e[1]
}, e[0]))
});
}
return null;
};
class Pair extends React.PureComponent {
state = {
expanded: this.props.open
};
toggle = () => {
this.setState(prev => ({
expanded: !prev.expanded
}));
};
render() {
const {
label,
val
} = this.props;
return [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tree_item, {
expanded: this.state.expanded,
label: label,
val: val,
toggle: this.toggle
}, "tree_item"), /*#__PURE__*/(0, _jsxRuntime.jsx)(Children, {
val: val,
expanded: this.state.expanded
}, "val")];
}
}
const Tree_item = ({
label,
val,
expanded,
toggle
}) => {
const classes = classnames('tree_item', {
parent: has_children(val),
expanded
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
className: classes,
onClick: toggle,
children: [label ? [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "name",
children: label
}, "name"), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "separator",
children: ": "
}, "separator")] : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(Value, {
val: val,
expanded: expanded
})]
});
};
const Value = ({
val
}) => {
if (typeof val == 'object') return /*#__PURE__*/(0, _jsxRuntime.jsx)(Value_object, {
val: val
});else if (typeof val == 'number') return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "value number",
children: val
});else if (typeof val == 'boolean') return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "value boolean",
children: val.toString()
});else if (typeof val == 'string') return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
className: "value string",
children: ["\"", val, "\""]
});else if (typeof val == 'undefined') return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
className: "value undefined",
children: ["\"", val, "\""]
});else if (typeof val == 'function') return null;
};
const Value_object = ({
val
}) => {
if (val === null) return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "value null",
children: "null"
});
if (Array.isArray(val)) {
if (!val.length) return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "value array empty",
children: "[]"
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "value array long",
children: "[,...]"
});
}
if (!Object.keys(val).length) return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "value object empty",
children: '{}'
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "value object",
children: JSON.stringify(val)
});
};
const with_resizable_cols = Table => {
class Resizable extends React.PureComponent {
constructor(props) {
super(props);
this.state = {};
this.cols = zutil.clone_deep(this.props.table_cols);
this.min_width = 22;
this.moving_col = null;
this.style = {
position: 'relative',
display: 'flex',
flex: 'auto',
width: '100%'
};
}
componentDidMount() {
this.resize_columns();
window.document.addEventListener('mousemove', this.on_mouse_move);
window.document.addEventListener('mouseup', this.on_mouse_up);
}
componentWillUnmount() {
window.document.removeEventListener('mousemove', this.on_mouse_move);
window.document.removeEventListener('mouseup', this.on_mouse_up);
}
set_ref = ref => {
this.ref = ref;
};
resize_columns = () => {
const total_width = this.ref.offsetWidth;
const resizable_cols = this.cols.filter(c => !c.hidden && !c.fixed);
const total_fixed = this.cols.reduce((acc, c) => acc + (!c.hidden && c.fixed || 0), 0);
const width = (total_width - total_fixed) / resizable_cols.length;
const next_cols = this.cols.reduce((acc, c, idx) => {
const w = !c.fixed && width || !c.hidden && c.fixed || 0;
return {
cols: [...acc.cols, {
...c,
width: w,
offset: acc.offset,
border: acc.border
}],
offset: acc.offset + w,
border: !!w
};
}, {
cols: [],
offset: 0,
border: true
});
this.setState({
cols: next_cols.cols
});
};
start_moving = (e, idx) => {
if (e.nativeEvent.which != 1) return;
this.start_offset = e.pageX;
this.start_width = this.state.cols[idx].width;
this.start_width_last = this.state.cols.slice(-1)[0].width;
this.moving_col = idx;
this.setState({
moving: true
});
};
on_mouse_move = e => {
if (this.moving_col === null) return;
this.setState(prev => {
let offset = e.pageX - this.start_offset;
if (this.start_width_last - offset < this.min_width) offset = this.start_width_last - this.min_width;
if (this.start_width + offset < this.min_width) offset = this.min_width - this.start_width;
let total_width = 0;
const next_cols = prev.cols.map((c, idx) => {
if (idx < this.moving_col) {
total_width = total_width + c.width;
return c;
} else if (idx == this.moving_col) {
const width = this.start_width + offset;
total_width = total_width + width;
return {
...c,
width,
offset: total_width - width
};
} else if (idx == this.state.cols.length - 1) {
const width = this.start_width_last - offset;
return {
...c,
width,
offset: total_width
};
}
total_width = total_width + c.width;
return {
...c,
offset: total_width - c.width
};
});
return {
cols: next_cols
};
});
};
on_mouse_up = () => {
this.moving_col = null;
this.setState({
moving: false
});
};
render() {
const style = Object.assign({}, this.style, this.props.style || {});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
style: style,
ref: this.set_ref,
className: classnames({
moving: this.state.moving
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Table, {
...this.props,
cols: this.state.cols,
resize_columns: this.resize_columns
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Grid_resizers, {
show: !this.props.cur_preview,
start_moving: this.start_moving,
cols: this.state.cols
})]
});
}
}
return Resizable;
};
const Grid_resizers = ({
cols,
start_moving,
show
}) => {
if (!show || !cols) return null;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: cols.slice(0, -1).map((c, idx) => !c.fixed && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
left: c.width + c.offset - 2
},
onMouseDown: e => start_moving(e, idx),
className: "data_grid_resizer"
}, c.title || idx))
});
};
const Search_box = ({
val,
on_change
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "search_box",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
value: val,
onChange: on_change,
type: "text",
placeholder: "Filter"
})
});
const Toolbar_row = ({
children
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "toolbar",
children: children
});
const Toolbar_container = ({
children
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "toolbar_container",
children: children
});
const Sort_icon = ({
show,
dir
}) => {
if (!show) return null;
const classes = classnames('small_icon_mask', {
sort_asc: dir == -1,
sort_desc: dir == 1
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "sort_icon",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: classes
})
});
};
const Devider = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "devider"
});
class Har_viewer extends Pure_component {
moving_width = false;
min_width = 50;
state = {
cur_preview: null,
tables_width: 200
};
componentDidMount() {
window.document.addEventListener('mousemove', this.on_mouse_move);
window.document.addEventListener('mouseup', this.on_mouse_up);
}
willUnmount() {
window.document.removeEventListener('mousemove', this.on_mouse_move);
window.document.removeEventListener('mouseup', this.on_mouse_up);
}
open_preview = req => this.setState({
cur_preview: req
});
close_preview = () => this.setState({
cur_preview: null
});
start_moving_width = e => {
if (e.nativeEvent.which != 1) return;
this.moving_width = true;
$(this.main_panel).addClass('moving');
this.start_offset = e.pageX;
this.start_width = this.state.tables_width;
};
on_resize_width = e => {
const offset = e.pageX - this.start_offset;
let new_width = this.start_width + offset;
if (new_width < this.min_width) new_width = this.min_width;
const max_width = this.main_panel.offsetWidth - this.min_width;
if (new_width > max_width) new_width = max_width;
this.setState({
tables_width: new_width
});
};
on_mouse_move = e => {
if (this.moving_width) this.on_resize_width(e);
};
on_mouse_up = () => {
this.moving_width = false;
$(this.main_panel).removeClass('moving');
};
set_main_panel_ref = ref => {
this.main_panel = ref;
};
main_panel_moving = () => {
$(this.main_panel).addClass('moving');
};
main_panel_stopped_moving = () => {
$(this.main_panel).removeClass('moving');
};
undock = () => {
if (this.props.dock_mode) return;
const url = '/dock_logs';
const opts = 'directories=0,titlebar=0,toolbar=0,location=0,' + 'status=0,menubar=0,scrollbars=0,resizable=0,height=500,' + 'width=800';
const har_window = window.open(url, 'har_window', opts);
if (window.focus) har_window.focus();
};
clear = () => {
this.props.clear_logs(() => {
this.close_preview();
setdb.emit_path('head.har_viewer.reset_reqs');
});
};
render() {
const width = `calc(100% - ${this.state.tables_width}px`;
const preview_style = {
maxWidth: width,
minWidth: width
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: "har_viewer",
className: "har_viewer chrome",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "main_panel vbox",
ref: this.set_main_panel_ref,
children: [this.props.toolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {
undock: this.undock,
clear: this.clear,
dock_mode: this.props.dock_mode,
filters: this.props.filters,
filters_disabled: this.props.filters_disabled,
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__*/(0, _jsxRuntime.jsxs)("div", {
className: "split_widget vbox flex_auto",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(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__*/(0, _jsxRuntime.jsx)(Preview, {
panes: this.props.panes,
cur_preview: this.state.cur_preview,
style: preview_style,
close: this.close_preview
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tables_resizer, {
show: !!this.state.cur_preview,
start_moving: this.start_moving_width,
offset: this.state.tables_width
})]
})]
})
});
}
}
E.Har_viewer = Har_viewer;
class Toolbar extends Pure_component {
state = {
filters_visible: false
};
toggle_filters = () => this.setState({
filters_visible: !this.state.filters_visible
});
render() {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Toolbar_container, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Toolbar_row, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar_button, {
id: "clear",
tooltip: "Clear",
on_click: this.props.clear
}), !this.props.dock_mode && /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar_button, {
id: "docker",
on_click: this.props.undock,
tooltip: "Undock into separate window"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar_button, {
id: "filters",
tooltip: "Show/hide filters",
on_click: this.toggle_filters,
active: this.state.filters_visible
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar_button, {
id: "download",
tooltip: "Export as HAR file",
href: "/api/logs_har"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar_button, {
id: "close_btn",
tooltip: "Disable",
placement: "left",
on_click: this.props.disable_logs
})]
}), this.state.filters_visible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Toolbar_row, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Search_box, {
val: this.props.search_val,
on_change: this.props.on_change_search
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type_filters, {
filter: this.props.type_filter,
set: this.props.set_type_filter
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Devider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Filters, {
set_filter: this.props.set_filter,
filters: this.props.filters,
disabled: this.props.filters_disabled
})]
})]
});
}
}
class Filters extends Pure_component {
state = {};
componentDidMount() {
this.setdb_on('head.logs_suggestions', suggestions => {
suggestions && this.setState({
suggestions
});
});
}
render() {
if (!this.state.suggestions) return null;
const filters = [{
name: 'port',
default_value: 'All proxy ports'
}, {
name: 'status_code',
default_value: 'All status codes'
}, {
name: 'protocol',
default_value: 'All protocols'
}];
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "filters",
children: filters.map(f => /*#__PURE__*/(0, _jsxRuntime.jsx)(Filter, {
vals: this.state.suggestions[f.name + 's'],
val: this.props.filters[f.name],
set: this.props.set_filter.bind(null, f.name),
default_value: f.default_value,
disabled: this.props.disabled
}, f.name))
});
}
}
const Filter = prop => {
const {
vals,
val,
set,
default_value,
disabled
} = prop;
const disabled_reason = typeof disabled == 'string' && disabled;
const select = /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
disabled: !!disabled,
value: val,
onChange: set,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
value: "",
children: default_value
}), vals.map(p => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
value: p,
children: p
}, p))]
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "custom_filter",
children: [disabled_reason ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
title: disabled_reason,
children: select
}) : select, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "arrow"
})]
});
};
E.Filter = Filter;
const type_filters = ['XHR', 'HTML', 'JS', 'CSS', 'Img', 'Media', 'Font', 'Other'];
const Type_filters = ({
filter,
set
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "filters",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type_filter, {
name: "All",
on_click: set.bind(null, 'All'),
cur: filter
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Devider, {}), type_filters.map(f => /*#__PURE__*/(0, _jsxRuntime.jsx)(Type_filter, {
on_click: set.bind(null, f),
name: f,
cur: filter
}, f))]
});
const Type_filter = ({
name,
cur,
on_click
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: classnames('filter', {
active: cur == name
}),
onClick: on_click,
children: name
});
const Tables_resizer = ({
show,
offset,
start_moving
}) => {
if (!show) return null;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "data_grid_resizer",
style: {
left: offset - 2
},
onMouseDown: start_moving
});
};
const Tables_container = with_resizable_cols(class Tables_container extends Pure_component {
constructor(props) {
super(props);
this.state = {
focused: false
};
}
componentDidUpdate(prev_props) {
if (prev_props.cur_preview != this.props.cur_preview) this.props.resize_columns();
}
componentDidMount() {
window.addEventListener('resize', this.props.resize_columns);
}
willUnmount() {
window.removeEventListener('resize', this.props.resize_columns);
}
on_focus = () => this.setState({
focused: true
});
on_blur = () => this.setState({
focused: false
});
on_mouse_up = () => {
this.moving_col = null;
this.props.main_panel_stopped_moving();
};
render() {
const style = {};
if (this.props.cur_preview) {
style.flex = `0 0 ${this.props.width}px`;
style.width = this.props.width;
style.maxWidth = this.props.width;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "tables_container vbox",
tabIndex: "-1",
style: style,
onFocus: this.on_focus,
onBlur: this.on_blur,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "reqs_container",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(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__*/(0, _jsxRuntime.jsx)(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
})]
})
});
}
});
class Header_container extends Pure_component {
click = col => {
this.props.set_sort(col.sort_by);
};
render() {
let {
cols,
only_name,
sorted
} = this.props;
if (!cols) return null;
if (only_name) cols = [cols[1]];
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "header_container",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
className: "chrome_table",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("colgroup", {
children: cols.map((c, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
style: {
width: only_name || idx == cols.length - 1 ? 'auto' : c.width
}
}, c.title))
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
children: cols.map(c => /*#__PURE__*/(0, _jsxRuntime.jsxs)("th", {
onClick: () => this.click(c),
style: {
textAlign: only_name ? 'left' : null
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: c.title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Sort_icon, {
show: c.sort_by == sorted.field,
dir: sorted.dir
})]
}, c.title))
})
})]
})
});
}
}
class Data_container extends Pure_component {
componentDidMount() {
this.setdb_on('head.har_viewer.dc_top', () => {
if (this.dc.current) this.dc.current.scrollTop = 0;
});
}
dc = React.createRef();
render() {
let {
cols,
open_preview,
cur_preview,
focused,
reqs
} = this.props;
const preview_mode = !!cur_preview;
cols = (cols || []).map((c, idx) => {
if (!preview_mode) return c;
if (preview_mode && idx == 1) return {
...c,
width: 'auto'
};
return {
...c,
width: 0
};
});
const Waypoint = this.props.Waypoint;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
ref: this.dc,
className: "data_container",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
className: "chrome_table",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("colgroup", {
children: cols.map((c, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
style: {
width: !preview_mode && idx == cols.length - 1 ? 'auto' : c.width
}
}, c.title))
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Data_rows, {
Cell_value: this.props.Cell_value,
reqs: reqs,
cols: cols,
open_preview: open_preview,
cur_preview: cur_preview,
focused: focused
})]
}), Waypoint && /*#__PURE__*/(0, _jsxRuntime.jsx)(Waypoint, {
scrollableAncestor: this.dc.current,
bottomOffset: "-50px",
onEnter: this.props.handle_viewpoint_enter
}, reqs.length)]
});
}
}
class Data_rows extends React.Component {
shouldComponentUpdate(next_props) {
return next_props.reqs != this.props.reqs || next_props.cur_preview != this.props.cur_preview || next_props.focused != this.props.focused;
}
render() {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
children: [this.props.reqs.map(r => /*#__PURE__*/(0, _jsxRuntime.jsx)(Data_row, {
Cell_value: this.props.Cell_value,
cols: this.props.cols,
open_preview: this.props.open_preview,
cur_preview: this.props.cur_preview,
focused: this.props.focused,
req: r
}, r.uuid)), /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
className: "filler",
children: this.props.cols.map(c => /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {}, c.title))
})]
});
}
}
class Data_row extends React.Component {
shouldComponentUpdate(next_props) {
const selected = zutil.get(this.props.cur_preview, 'uuid') == this.props.req.uuid;
const will_selected = zutil.get(next_props.cur_preview, 'uuid') == next_props.req.uuid;
const selection_changed = selected != will_selected;
const focused_changed = this.props.focused != next_props.focused;
const pending_changed = this.props.req.pending != next_props.req.pending;
return selection_changed || focused_changed && selected || pending_changed;
}
cell_clicked = () => {
this.props.open_preview(this.props.req);
};
render() {
const {
cur_preview,
cols,
focused,
req
} = this.props;
const selected = zutil.get(cur_preview, 'uuid') == req.uuid;
const classes = classnames({
selected,
focused: selected && focused,
error: !req.details.success && !req.pending,
pending: !!req.pending
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
className: classes,
children: cols.map((c, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
onClick: this.cell_clicked,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(this.props.Cell_value, {
col: c.title,
req: req
})
}, c.title))
});
}
}
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__));
/***/ }),
/***/ 50572:
/***/ ((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
'use strict';
/*jslint react:true*/
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(63696), __webpack_require__(923), __webpack_require__(34543)], __WEBPACK_AMD_DEFINE_RESULT__ = ((React, etask, setdb) => {
const LONG_CB_MS = 100;
// XXX krzysztof: copied from android/who/app/components, removed local
// dependency: zerr and event
// XXX arik: need test
class Pure_component extends React.PureComponent {
constructor(props) {
super(props);
this.comp_name = this.constructor.name;
this.listeners = {};
}
componentWillUnmount() {
let t0 = this.unmount_time = Date.now();
if (this.root_et) {
this.root_et.return();
delete this.root_et;
}
// XXX michaelg: 'let of' requires shim with babel+react+ie11
// requires further investigation, leave as is till 01-Feb-2018
/* for (let l of Object.values(this.listeners))
setdb.off(l);*/
Object.values(this.listeners).forEach(l => {
setdb.off(l);
});
if (this.willUnmount) this.willUnmount();
let t1 = Date.now();
if (this.debug && t1 - t0 > LONG_CB_MS) {
console.warn('long cb componentWillUnmount %s took %sms', this.comp_name, t1 - t0);
}
}
setdb_on(path, cb, opt) {
this.listeners[path] = setdb.on(path, cb, opt);
}
setdb_off(path) {
this.listeners[path] && setdb.off(this.listeners[path]);
}
setdb_get(path) {
return setdb.get(path);
}
setdb_set(path, curr, opt) {
return setdb.set(path, curr, opt);
}
etask(et) {
if (et.constructor.name != 'Etask') et = etask(et);
// note: in some cases etask(sp) ends up calling componentWillUnmount
// synchronously, so this.root_et can be null after initialization
let root_et;
if (!(root_et = this.root_et)) {
root_et = etask('Component', function* () {
yield this.wait();
});
if (this.unmount_time) root_et.return();else this.root_et = root_et;
}
root_et.spawn(et);
return et;
}
setState(updater, cb) {
let t0, t1, t2, t3;
if (this.debug) {
console.log('setState %s %s', this.comp_name, Object.keys(updater).join(', '));
t0 = Date.now();
}
super.setState(updater, () => {
t2 = Date.now();
if (cb) cb.apply(this, arguments);
t3 = Date.now();
if (this.debug && t3 - t2 > LONG_CB_MS) {
console.warn('long cb setState %s cb %s took %sms', this.comp_name, cb && cb.name, t3 - t2);
}
if (this.debug && t3 - t0 > LONG_CB_MS) {
console.warn('long cb setState-done %s cb %s took %sms', this.comp_name, cb && cb.name, t3 - t0);
}
});
t1 = Date.now();
if (this.debug && t1 - t0 > LONG_CB_MS) {
console.warn('long cb setState %s took %sms', this.comp_name, t1 - t0);
}
}
}
return Pure_component;
}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); // eslint-disable-line
}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }),
/***/ 9299:
/***/ ((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__(54266), __webpack_require__(74063), __webpack_require__(50572)], __WEBPACK_AMD_DEFINE_RESULT__ = (function (React, $, bsm, Pure_component) {
return class Tooltip extends Pure_component {
componentDidMount() {
if (!this.ref) return;
$(this.ref).tooltip();
}
componentWillUnmount() {
$(this.ref).tooltip(bsm.destroy);
}
componentDidUpdate() {
$(this.ref).attr('title', this.props.title).tooltip(bsm.fix_title);
}
on_mouse_leave() {
if (!this.ref) return;
$(this.ref).tooltip('hide');
}
set_ref(e) {
this.ref = e;
}
render() {
if (this.props.children == undefined) return null;
if (!this.props.title) return this.props.children;
const classes = `tooltip har_tooltip ${this.props.className || ''}`;
const props = {
'data-toggle': 'tooltip',
'data-placement': this.props.placement || 'top',
'data-container': 'body',
'data-html': true,
'data-template': `<div class="${classes}"
role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>`,
title: this.props.title,
ref: this.set_ref.bind(this),
onMouseLeave: this.on_mouse_leave.bind(this)
};
return React.Children.map(this.props.children, c => {
if (typeof c == 'number') c = '' + c;
if (typeof c == 'string' || typeof c == 'object' && c.type.name == 'T') return React.createElement('span', props, c);
return React.cloneElement(c, props);
});
}
};
}).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__));
/***/ }),
/***/ 18719:
/***/ ((module, exports, __webpack_require__) => {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;
var module;
// LICENSE_CODE ZON ISC
'use strict'; /*jslint node:true, browser:true*/
(function(){
var is_node_ff = typeof module=='object' && module.exports;
if (!is_node_ff)
;
else
;
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(54266), __webpack_require__(923), __webpack_require__(22345), __webpack_require__(67398),
__webpack_require__(71708), __webpack_require__(96827)], __WEBPACK_AMD_DEFINE_RESULT__ = (function($, etask, date, zescape, zerr, events){
var assign = Object.assign;
var E = function(){ return E.send.apply(this, arguments); };
var fields_to_hide = ['password', 'new_pass'];
var hide_fields = function(data){
var _data = assign({}, data);
fields_to_hide.forEach(function(field){
if (_data[field])
_data[field] = _data[field].toString().replace(/./g, '*');
});
return _data;
};
fun