diff --git a/src/components/ConnectionTable.module.scss b/src/components/ConnectionTable.module.scss
index d25eb7d..59764ec 100644
--- a/src/components/ConnectionTable.module.scss
+++ b/src/components/ConnectionTable.module.scss
@@ -5,15 +5,15 @@
}
.th {
- padding: 3% 2px;
+ padding: 8px 10px;
height: 50px;
background: var(--color-background);
position: sticky;
top: 0;
- font-size: 1em;
- user-select: none;
+ font-size: 0.9em;
text-align: center;
- vertical-align: middle;
+ user-select: none;
+
display: flex;
align-items: center;
justify-content: space-between;
@@ -23,42 +23,10 @@
}
}
-.thdu {
- padding: 3% 2px;
- height: 50px;
- background: var(--color-background);
- position: sticky;
- top: 0;
- font-size: 1em;
- user-select: none;
- text-align: center;
- vertical-align: middle;
- display: flex;
- align-items: center;
- justify-content: center;
-
- &:hover {
- color: var(--color-text-highlight);
- }
-}
-
-.break {
- word-wrap: break-word;
- word-break: break-all;
- align-items: center;
- text-align: left;
-}
-
.td {
- /* 上边下边 | 左边右边 */
- padding: 10px 2px;
+ padding: 8px 13px;
font-size: 0.9em;
- // max-width: 14em;
- min-width: 9em;
cursor: default;
- align-items: center;
- text-align: left;
- vertical-align: middle;
&:hover {
color: var(--color-text-highlight);
}
@@ -70,16 +38,15 @@
}
/* download upload td cells */
-.center {
- min-width: 7em;
- text-align: center;
+.du {
+ text-align: right;
}
.sortIconContainer {
display: inline-flex;
- margin-left: 0.5em;
- width: 1em;
- height: 1em;
+ margin-left: 10px;
+ width: 16px;
+ height: 16px;
}
.rotate180 {
diff --git a/src/components/ConnectionTable.tsx b/src/components/ConnectionTable.tsx
index 2b0a12a..2c3ae13 100644
--- a/src/components/ConnectionTable.tsx
+++ b/src/components/ConnectionTable.tsx
@@ -13,19 +13,19 @@ const sortDescFirst = true;
const columns = [
{ accessor: 'id', show: false },
- { Header: 'c_type', accessor: 'type' },
- { Header: 'c_process', accessor: 'process' },
{ Header: 'c_host', accessor: 'host' },
- { Header: 'c_rule', accessor: 'rule' },
- { Header: 'c_chains', accessor: 'chains' },
- { Header: 'c_time', accessor: 'start' },
- { Header: 'c_dl_speed', accessor: 'downloadSpeedCurr', sortDescFirst },
- { Header: 'c_ul_speed', accessor: 'uploadSpeedCurr', sortDescFirst },
+ { Header: 'c_sni', accessor: 'sniffHost' },
+ { Header: 'c_process', accessor: 'process' },
{ Header: 'c_dl', accessor: 'download', sortDescFirst },
{ Header: 'c_ul', accessor: 'upload', sortDescFirst },
+ { Header: 'c_dl_speed', accessor: 'downloadSpeedCurr', sortDescFirst },
+ { Header: 'c_ul_speed', accessor: 'uploadSpeedCurr', sortDescFirst },
+ { Header: 'c_chains', accessor: 'chains' },
+ { Header: 'c_rule', accessor: 'rule' },
+ { Header: 'c_time', accessor: 'start', sortDescFirst },
{ Header: 'c_source', accessor: 'source' },
{ Header: 'c_destination_ip', accessor: 'destinationIP' },
- { Header: 'c_sni', accessor: 'sniffHost' },
+ { Header: 'c_type', accessor: 'type' },
];
function renderCell(cell: { column: { id: string }; value: number }, locale: Locale) {
@@ -71,11 +71,8 @@ function Table({ data }) {
{headerGroups.map((headerGroup) => {
return (
- {headerGroup.headers.map((column, index) => (
-
= 5 && index < 10) ? s.thdu : s.th}
- >
+ {headerGroup.headers.map((column) => (
+
{t(column.render('Header'))}
{column.isSorted ? (
@@ -96,8 +93,7 @@ function Table({ data }) {
className={cx(
s.td,
i % 2 === 0 ? s.odd : false,
- j == 0 || (j >= 5 && j < 10) ? s.center : true
- // j ==1 ? s.break : true
+ j >= 2 && j <= 5 ? s.du : false
)}
>
{renderCell(cell, locale)}
diff --git a/src/components/Connections.css b/src/components/Connections.css
index 55dd869..bc69a62 100644
--- a/src/components/Connections.css
+++ b/src/components/Connections.css
@@ -47,7 +47,3 @@
.react-tabs__tab-panel--selected {
display: block;
}
-
-._btn_lzu00_1 {
- margin-right: 10px;
-}
diff --git a/src/components/Connections.tsx b/src/components/Connections.tsx
index 80efdfe..fd29390 100644
--- a/src/components/Connections.tsx
+++ b/src/components/Connections.tsx
@@ -11,7 +11,6 @@ import { State } from '~/store/types';
import * as connAPI from '../api/connections';
import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
import { getClashAPIConfig } from '../store/app';
-import Button from './Button';
import s from './Connections.module.scss';
import ConnectionTable from './ConnectionTable';
import ContentHeader from './ContentHeader';
@@ -59,38 +58,22 @@ function hasSubstring(s: string, pat: string) {
return s.toLowerCase().includes(pat.toLowerCase());
}
-function filterConnIps(conns: FormattedConn[], ipStr: string) {
- return conns.filter((each) => each.sourceIP === ipStr);
-}
-
-function filterConns(conns: FormattedConn[], keyword: string, sourceIp: string) {
- let result = conns;
- if (keyword !== '') {
- result = conns.filter((conn) =>
- [
- conn.host,
- conn.sourceIP,
- conn.sourcePort,
- conn.destinationIP,
- conn.chains,
- conn.rule,
- conn.type,
- conn.network,
- conn.process,
- ].some((field) => {
- return hasSubstring(field, keyword);
- })
+function filterConns(conns: FormattedConn[], keyword: string) {
+ return !keyword
+ ? conns
+ : conns.filter((conn) =>
+ [
+ conn.host,
+ conn.sourceIP,
+ conn.sourcePort,
+ conn.destinationIP,
+ conn.chains,
+ conn.rule,
+ conn.type,
+ conn.network,
+ conn.process,
+ ].some((field) => hasSubstring(field, keyword))
);
- }
- if (sourceIp !== '') {
- result = filterConnIps(result, sourceIp);
- }
-
- return result;
-}
-
-function getConnIpList(conns: FormattedConn[]) {
- return Array.from(new Set(conns.map((x) => x.sourceIP))).sort();
}
function formatConnectionDataItem(
@@ -120,7 +103,7 @@ function formatConnectionDataItem(
upload,
download,
start: now - new Date(start).valueOf(),
- chains: modifyChains(chains),
+ chains: chains.reverse().join(' / '),
rule: !rulePayload ? rule : `${rule} :: ${rulePayload}`,
...metadata,
host: `${host2}:${destinationPort}`,
@@ -134,24 +117,6 @@ function formatConnectionDataItem(
};
return ret;
}
-function modifyChains(chains: string[]): string {
- if (!Array.isArray(chains) || chains.length === 0) {
- return '';
- }
-
- if (chains.length === 1) {
- return chains[0];
- }
-
- //倒序
- if (chains.length === 2) {
- return chains[1] + ' / ' + chains[0];
- }
-
- const first = chains.pop();
- const last = chains.shift();
- return `${first} / ${last}`;
-}
function renderTableOrPlaceholder(conns: FormattedConn[]) {
return conns.length > 0 ? (
@@ -169,19 +134,11 @@ function ConnQty({ qty }) {
function Conn({ apiConfig }) {
const [refContainer, containerHeight] = useRemainingViewPortHeight();
-
const [conns, setConns] = useState([]);
const [closedConns, setClosedConns] = useState([]);
-
const [filterKeyword, setFilterKeyword] = useState('');
- const [filterSourceIpStr, setFilterSourceIpStr] = useState('');
-
- const filteredConns = filterConns(conns, filterKeyword, filterSourceIpStr);
- const filteredClosedConns = filterConns(closedConns, filterKeyword, filterSourceIpStr);
-
- const connIpSet = getConnIpList(conns);
- const ClosedConnIpSet = getConnIpList(closedConns);
-
+ const filteredConns = filterConns(conns, filterKeyword);
+ const filteredClosedConns = filterConns(closedConns, filterKeyword);
const [isCloseAllModalOpen, setIsCloseAllModalOpen] = useState(false);
const openCloseAllModal = useCallback(() => setIsCloseAllModalOpen(true), []);
const closeCloseAllModal = useCallback(() => setIsCloseAllModalOpen(false), []);
@@ -221,15 +178,9 @@ function Conn({ apiConfig }) {
},
[setConns, isRefreshPaused]
);
- const [reConnectCount, setReConnectCount] = useState(0);
-
useEffect(() => {
- return connAPI.fetchData(apiConfig, read, () => {
- setTimeout(() => {
- setReConnectCount((prev) => prev + 1);
- }, 1000);
- });
- }, [apiConfig, read, reConnectCount, setReConnectCount]);
+ return connAPI.fetchData(apiConfig, read);
+ }, [apiConfig, read]);
const { t } = useTranslation();
@@ -279,17 +230,7 @@ function Conn({ apiConfig }) {
}}
>
- setFilterSourceIpStr('')} kind="minimal">
- {t('All')}
-
- {connIpSet.map((value, k) => {
- return (
- setFilterSourceIpStr(value)} kind="minimal">
- {value}
-
- );
- })}
- {renderTableOrPlaceholder(filteredConns)}
+ <>{renderTableOrPlaceholder(filteredConns)}
-
- setFilterSourceIpStr('')} kind="minimal">
- {t('All')}
-
- {ClosedConnIpSet.map((value, k) => {
- return (
- setFilterSourceIpStr(value)} kind="minimal">
- {value}
-
- );
- })}
- {renderTableOrPlaceholder(filteredClosedConns)}
-
+ {renderTableOrPlaceholder(filteredClosedConns)}
diff --git a/src/components/MemoryChart.tsx b/src/components/MemoryChart.tsx
deleted file mode 100644
index 9f6febb..0000000
--- a/src/components/MemoryChart.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { State } from '~/store/types';
-
-import { fetchData } from '../api/memory';
-import { useLineChartMemory } from '../hooks/useLineChart';
-import {
- chartJSResource,
- chartStyles,
- commonDataSetProps,
- memoryChartOptions,
-} from '../misc/chart-memory';
-import { getClashAPIConfig, getSelectedChartStyleIndex } from '../store/app';
-import { connect } from './StateProvider';
-
-const { useMemo } = React;
-
-const chartWrapperStyle = {
- // make chartjs chart responsive
- position: 'relative',
- maxWidth: 1000,
- marginTop: '1em',
-};
-
-const mapState = (s: State) => ({
- apiConfig: getClashAPIConfig(s),
- selectedChartStyleIndex: getSelectedChartStyleIndex(s),
-});
-
-export default connect(mapState)(MemoryChart);
-
-function MemoryChart({ apiConfig, selectedChartStyleIndex }) {
- const ChartMod = chartJSResource.read();
- const memory = fetchData(apiConfig);
- const { t } = useTranslation();
- const data = useMemo(
- () => ({
- labels: memory.labels,
- datasets: [
- {
- ...commonDataSetProps,
- ...memoryChartOptions,
- ...chartStyles[selectedChartStyleIndex].inuse,
- label: t('Memory'),
- data: memory.inuse,
- },
- ],
- }),
- [memory, selectedChartStyleIndex, t]
- );
-
- useLineChartMemory(ChartMod.Chart, 'MemoryChart', data, memory);
-
- return (
- // @ts-expect-error ts-migrate(2322) FIXME: Type '{ position: string; maxWidth: number; }' is ... Remove this comment to see the full error message
- 
+ 