Skip to content

Commit

Permalink
Implement Web UI filter for https/anonymous
Browse files Browse the repository at this point in the history
  • Loading branch information
imWildCat committed May 29, 2018
1 parent 22ef733 commit 1ffbc84
Show file tree
Hide file tree
Showing 8 changed files with 125 additions and 12 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ http://localhost:8899/

Screenshot:

![screenshot-proxy-list](https://user-images.githubusercontent.com/2396817/40578443-13bcbbd6-610c-11e8-85d5-1a11b66bf5d4.png)
![screenshot-proxy-list](https://user-images.githubusercontent.com/2396817/40653600-946eae6e-6333-11e8-8bbd-9d2f347c5461.png)

#### Globally Geographical Distribution Map

Expand All @@ -163,7 +163,7 @@ http://localhost:8899/#/geo

Screenshot:

![screenshot-geo-distribution](https://user-images.githubusercontent.com/2396817/40578442-13a8491c-610c-11e8-8340-50097f29fdad.png)
![screenshot-geo-distribution](https://user-images.githubusercontent.com/2396817/40653599-9458b6b8-6333-11e8-8e6e-1d90271fc083.png)

API Documentation
=================
Expand Down
4 changes: 2 additions & 2 deletions README.rst
Original file line number Diff line number Diff line change
Expand Up @@ -241,8 +241,8 @@ Apache License 2.0. For more details, please read the
.. _中文文档: https://scylla.wildcat.io/zh/latest/
.. _Chinese Documentation: https://scylla.wildcat.io/zh/latest/

.. |screenshot-geo-distribution| image:: https://user-images.githubusercontent.com/2396817/40578442-13a8491c-610c-11e8-8340-50097f29fdad.png
.. |screenshot-proxy-list| image:: https://user-images.githubusercontent.com/2396817/40578443-13bcbbd6-610c-11e8-85d5-1a11b66bf5d4.png
.. |screenshot-geo-distribution| image:: https://user-images.githubusercontent.com/2396817/40653599-9458b6b8-6333-11e8-8e6e-1d90271fc083.png
.. |screenshot-proxy-list| image:: https://user-images.githubusercontent.com/2396817/40653600-946eae6e-6333-11e8-8bbd-9d2f347c5461.png

.. |Scylla Banner| image:: https://user-images.githubusercontent.com/2396817/40580477-f15a15b8-6136-11e8-9f4b-1f012e90712c.png
.. |Build Status| image:: https://travis-ci.org/imWildCat/scylla.svg?branch=master
Expand Down
4 changes: 2 additions & 2 deletions docs/source/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -246,8 +246,8 @@ Apache License 2.0. For more details, please read the
.. _中文文档: https://scylla.wildcat.io/zh/latest/
.. _Chinese Documentation: https://scylla.wildcat.io/zh/latest/

.. |screenshot-geo-distribution| image:: https://user-images.githubusercontent.com/2396817/40578442-13a8491c-610c-11e8-8340-50097f29fdad.png
.. |screenshot-proxy-list| image:: https://user-images.githubusercontent.com/2396817/40578443-13bcbbd6-610c-11e8-85d5-1a11b66bf5d4.png
.. |screenshot-geo-distribution| image:: https://user-images.githubusercontent.com/2396817/40653599-9458b6b8-6333-11e8-8e6e-1d90271fc083.png
.. |screenshot-proxy-list| image:: https://user-images.githubusercontent.com/2396817/40653600-946eae6e-6333-11e8-8bbd-9d2f347c5461.png

.. |PayPal Donation Official| image:: https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif
:target: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5DXFA7WGWPZBN
Expand Down
4 changes: 2 additions & 2 deletions docs_zh/source/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -245,8 +245,8 @@ Apache License 2.0. 如需了解详情,请阅读 `LICENSE`_ 这个文件。
.. _Scylla: http://prisonbreak.wikia.com/wiki/Scylla
.. _越狱: https://zh.wikipedia.org/zh-hans/%E8%B6%8A%E7%8B%B1_(%E7%94%B5%E8%A7%86%E5%89%A7)

.. |screenshot-geo-distribution| image:: https://user-images.githubusercontent.com/2396817/40578442-13a8491c-610c-11e8-8340-50097f29fdad.png
.. |screenshot-proxy-list| image:: https://user-images.githubusercontent.com/2396817/40578443-13bcbbd6-610c-11e8-85d5-1a11b66bf5d4.png
.. |screenshot-geo-distribution| image:: https://user-images.githubusercontent.com/2396817/40653599-9458b6b8-6333-11e8-8e6e-1d90271fc083.png
.. |screenshot-proxy-list| image:: https://user-images.githubusercontent.com/2396817/40653600-946eae6e-6333-11e8-8bbd-9d2f347c5461.png

.. |PayPal Donation Official| image:: https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif
:target: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5DXFA7WGWPZBN
Expand Down
30 changes: 26 additions & 4 deletions frontend/src/components/ProxyList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import {Link} from 'react-router-dom';

import {getBaseURL, Proxy, ResponseJSON} from '../utils';
import * as queryString from "query-string";
import ProxyListFilter from "./ProxyListFilter";

// import * as moment from 'moment';
const moment = require('moment')['default'];



export interface AppState {
proxies: Proxy[];
count: number;
Expand Down Expand Up @@ -51,12 +51,14 @@ export default class ProxyIPList extends React.Component<Props, AppState> {
const list = this.state.proxies;
return (
<div>
<ProxyListFilter location={this.props.location}/>
<table>
<thead>
<tr>
<th>IP</th>
<th>Port</th>
<th>Anonymous</th>
<th>Protocol</th>
<th>Latency</th>
<th>Updated at</th>
</tr>
Expand All @@ -67,6 +69,7 @@ export default class ProxyIPList extends React.Component<Props, AppState> {
<td>{r.ip}</td>
<td>{r.port}</td>
<td>{r.is_anonymous ? 'Yes' : 'No'}</td>
<td>{r.is_https ? 'HTTPS' : 'HTTP'}</td>
<td>{r.latency.toFixed(0)} ms</td>
<td>{moment.unix(r.updated_at).format('YYYYMMDD HH:mm:ss')}</td>
</tr>
Expand All @@ -87,11 +90,26 @@ export default class ProxyIPList extends React.Component<Props, AppState> {

async loadData(props: any) {
const parsed = queryString.parse(props.location.search);
console.log(parsed);

const page = parsed['page'] || 1;
const https = parsed['https'] || null;
const anonymous = parsed['anonymous'] || null;

const params: any = {};

if (page) {
params['page'] = page;
}

if (https) {
params['https'] = https;
}

if (anonymous) {
params['anonymous'] = anonymous;
}

const response = await axios.get(`${getBaseURL()}/api/v1/proxies?page=${page}`);
const response = await axios.get(`${getBaseURL()}/api/v1/proxies?${queryString.stringify(params)}`);
const res: ResponseJSON = response.data;
const proxies: Proxy[] = res.proxies;
this.setState({
Expand Down Expand Up @@ -124,8 +142,12 @@ export default class ProxyIPList extends React.Component<Props, AppState> {
}

private renderPageLink(pageNumber: number, label: string): JSX.Element {
const parsed = queryString.parse(this.props.location.search);

parsed['page'] = pageNumber;

return (
<li key={`page-nav-${pageNumber}`}><Link to={`/?page=${pageNumber}`}>{label}</Link></li>
<li key={`page-nav-${pageNumber}`}><Link to={`/?${queryString.stringify(parsed)}`}>{label}</Link></li>
);
}

Expand Down
86 changes: 86 additions & 0 deletions frontend/src/components/ProxyListFilter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import * as React from 'react';
import {Link} from "react-router-dom";
import * as queryString from "query-string";

export interface ProxyListFilterProps {
location: any;
}

export interface ProxyListFilterState {
https: boolean | null;
anonymous: boolean | null;
}

export default class ProxyListFilter extends React.Component<ProxyListFilterProps, ProxyListFilterState> {
constructor(props: ProxyListFilterProps) {
super(props);

this.state = {
https: null,
anonymous: null,
}
}

render() {
return (
<div className="filter">
<Link to={this.genLink('HTTPS')} className={this.genClassName('HTTPS')}>HTTPS</Link>
<Link to={this.genLink('ANONYMOUS')} className={this.genClassName('ANONYMOUS')}>ANONYMOUS</Link>
</div>
);
}

componentDidMount() {
this.handleProps(this.props);
}

componentWillReceiveProps(nextProps: ProxyListFilterProps) {
this.handleProps(nextProps);
}

handleProps(props: ProxyListFilterProps) {
const parsed = queryString.parse(props.location.search);

const https = parsed['https'] == 'true' ? true : null;
const anonymous = parsed['anonymous'] == 'true' ? true : null;

this.setState({https: https, anonymous: anonymous})
}

genLink(key: string): string {

const {anonymous, https} = this.state;
let params: any = {
anonymous,
https,
};

if (key === 'HTTPS') {
params['https'] = https == true ? null : true;
} else if (key === 'ANONYMOUS') {
params['anonymous'] = anonymous == true ? null : true;
}


return `/?${queryString.stringify(params)}`;
}


genClassName(key: string): string {
const {anonymous, https} = this.state;

let baseClassName = 'button';

if (key === 'HTTPS') {
if (!https) {
baseClassName += ' button-outline'
}
} else if (key === 'ANONYMOUS') {
if (!anonymous) {
baseClassName += ' button-outline'
}
}
return baseClassName;
}

}
4 changes: 4 additions & 0 deletions frontend/src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ ul.pagination {
}
}

.button + .button {
margin-left: 5px;
}

footer {
div {
text-align: center;
Expand Down
1 change: 1 addition & 0 deletions frontend/src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export interface Proxy {
latency: number;
stability: number;
is_anonymous: boolean;
is_https: boolean;
location: string;
organization: string;
region: string;
Expand Down

0 comments on commit 1ffbc84

Please sign in to comment.