Filter based on subdomainsv2.4.1main

8 files changed, 887 insertions, 771 deletions

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 85119e6..2c8025d 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ReactElement, useContext, useEffect } from "react";
+import { ReactElement, useContext, useEffect, useState } from "react";
 
 import styles from "~/components/App/App.module.scss";
 import RequestDetails from "~/components/RequestDetails/RequestDetails";
@@ -28,9 +28,9 @@ type ReadyStateMap = {
 };
 
 const statusIconMap: ReadyStateMap = {
-  [ReadyState.CONNECTING]: "🔴",
+  [ReadyState.CONNECTING]: "🟠",
   [ReadyState.OPEN]: "🟢",
-  [ReadyState.CLOSING]: "🔴",
+  [ReadyState.CLOSING]: "🟠",
   [ReadyState.CLOSED]: "🔴",
 };
 
@@ -47,9 +47,9 @@ export default function App() {
     useContext(ConnectionContext);
 
   useEffect(() => {
-    const url = new URL(config?.url ?? "https://loading...");
+    const url = new URL(config?.urls[0] ?? "https://loading...");
     document.title = `${statusIconMap[readyState]} ${url.host} | TTUN`;
-  }, [readyState, config?.url]);
+  }, [readyState, config?.urls]);
 
   const settingsMenu: (SettingsMenu | null)[] = [
     {
@@ -80,11 +80,6 @@ export default function App() {
               </Navbar.Text>
             </div>
             <div className="d-flex">
-              <Navbar.Text>
-                <a href={config.url} target="_blank">
-                  {config.url}
-                </a>
-              </Navbar.Text>
               <Navbar.Toggle aria-controls="settings" />
               <Navbar.Collapse id="settings" className="ms-2" role="button">
                 <Nav>
diff --git a/src/components/RequestList/RequestList.tsx b/src/components/RequestList/RequestList.tsx
index 8217229..1ab53d8 100644
--- a/src/components/RequestList/RequestList.tsx
+++ b/src/components/RequestList/RequestList.tsx
@@ -21,9 +21,14 @@ type EnabledMethods = {
   [method in Method]: boolean;
 };
 
+type EnabledHosts = {
+  [host: string]: boolean;
+};
+
 export default function RequestList() {
   const { darkMode } = useContext(SettingsContext);
   const {
+    config,
     calls: requests,
     selectedCall,
     setSelectedCall,
@@ -33,6 +38,20 @@ export default function RequestList() {
   const [search, setSearch] = useState("");
   const [enableRegex, setEnableRegex] = useState(false);
 
+  const [hosts, setHosts] = useState<EnabledHosts>({});
+
+  useEffect(() => {
+    setHosts((oldValues) =>
+      (config?.urls ?? []).reduce((acc, url) => {
+        const { host } = new URL(url);
+        return {
+          ...acc,
+          [host]: oldValues[host] ?? true,
+        };
+      }, {})
+    );
+  }, [config?.urls]);
+
   const [methods, setMethods] = useState<EnabledMethods>({
     GET: true,
     HEAD: true,
@@ -95,6 +114,17 @@ export default function RequestList() {
 
     return requests
       .reverse()
+      .filter((request) => {
+        const [_, hostHeader] = request.request.headers.find(
+          ([key]) => key.toLowerCase() === "host"
+        ) ?? [null, null];
+
+        if (hostHeader === null) {
+          return true;
+        }
+
+        return hosts[hostHeader] ?? false;
+      })
       .filter(
         (request) =>
           enabledMethods.length === 0 ||
@@ -103,7 +133,7 @@ export default function RequestList() {
       .filter(
         (request) => search === "" || searchRegex.test(request.request.path)
       );
-  }, [requests, search, enabledMethods, enableRegex]);
+  }, [requests, search, hosts, enabledMethods, enableRegex]);
 
   return (
     <div className={classNames(styles.listContainer, "d-flex")}>
@@ -205,6 +235,20 @@ export default function RequestList() {
             />
           </Form.Group>
           <Form.Group className="mb-4">
+            <Form.Label className="fw-bold">Hosts</Form.Label>
+            {Object.entries(hosts).map(([host, enabled]) => (
+              <Form.Check
+                key={host}
+                type="switch"
+                label={host}
+                checked={enabled}
+                onChange={() =>
+                  setHosts((values) => ({ ...values, [host]: !enabled }))
+                }
+              />
+            ))}
+          </Form.Group>
+          <Form.Group className="mb-4">
             <Form.Label className="fw-bold">Method</Form.Label>
             {Object.entries(methods).map(([method, enabled]) => (
               <Form.Check
@@ -212,7 +256,9 @@ export default function RequestList() {
                 type="switch"
                 label={method}
                 checked={enabled}
-                onChange={() => setMethods({ ...methods, [method]: !enabled })}
+                onChange={() =>
+                  setMethods((values) => ({ ...values, [method]: !enabled }))
+                }
               />
             ))}
           </Form.Group>
diff --git a/src/contexts/Connection.tsx b/src/contexts/Connection.tsx
index 42482e1..37a6a71 100644
--- a/src/contexts/Connection.tsx
+++ b/src/contexts/Connection.tsx
@@ -32,7 +32,7 @@ import {
 import { getHost } from "~/utils";
 
 interface Config {
-  url: string;
+  urls: string[];
 }
 
 interface ConnectionApi {
diff --git a/ttun/__main__.py b/ttun/__main__.py
index 8d77480..4b108f5 100644
--- a/ttun/__main__.py
+++ b/ttun/__main__.py
@@ -87,11 +87,8 @@ def main():
     def print_info(server: Server):
         print("Tunnel created:")
 
-        if "urls" in client.config:
-            for url in client.config["urls"]:
-                print(f"{url} -> {client.proxy_origin}")
-        else:
-            print(f'{client.config["url"]} -> {client.proxy_origin}')
+        for url in client.config["urls"]:
+            print(f"{url} -> {client.proxy_origin}")
 
         print("")
         print(f"Inspect requests:")
diff --git a/ttun/client.py b/ttun/client.py
index 6aed814..63bf258 100644
--- a/ttun/client.py
+++ b/ttun/client.py
@@ -55,7 +55,7 @@ class Client:
         self.server = server
         self.subdomains = subdomains
 
-        self.config: Optional[Config] = None
+        self._config: dict = None
         self.connection: ClientConnection = None
 
         self.proxy_origin = f'{"https" if https else "http"}://{to}:{port}'
@@ -98,10 +98,14 @@ class Client:
             }
         )
 
-        self.config = await self.receive()
+        self._config = await self.receive()