add viewHops

src/Pages/Manage.tsx

@@ -8,6 +8,7 @@ import ListCard from "../components/ListCard";
 import ChainCard from "../components/ListCard/Chains";
 import ServiceCard from "../components/ListCard/Services";
 import { ProCard } from "@ant-design/pro-components";
+import HopsCard from "../components/ListCard/Hops";
 
 const colSpan = {
   xs: 24,
@@ -75,12 +76,7 @@ const Manage = () => {
               <ChainCard></ChainCard>
             </Col>
             <Col {...colSpan}>
-              <ListCard
-                title="跳跃点(Hop)"
-                subTitle="跳跃点"
-                name="hops"
-                api={API.hops}
-              ></ListCard>
+              <HopsCard />
             </Col>
             <Col {...colSpan}>
               <ListCard

src/api/local.ts

@@ -3,18 +3,17 @@ import type * as Gost from "./types";
 import { getGost } from "../uitls/server";
 
 export class GostCommit<T = any> {
-  name: string;
+  private name: string;
   constructor(name: string) {
     this.name = name;
   }
-  _getStoreName= ()=>{
+  private _getStoreName = () => {
     const { addr } = getGost() || {};
     if (!addr) throw "no Server";
-    return `${this.name}-${encodeURIComponent(addr)}`
+    return `${this.name}-${encodeURIComponent(addr)}`;
   };
-  _getIdb = () => {
+  private _getIdb = () => {
     return getIdb(`${this._getStoreName()}|name`);
-    
   };
   getList = async () => {
     const idb = await this._getIdb();

src/components/ListCard/Chains.tsx

@@ -1,31 +1,37 @@
 import { chains } from "../../api";
 import { ChainConfig } from "../../api/types";
 import ListCard from ".";
+import viewChain from "../viewer/chain";
+import { useContext } from "react";
+import Ctx from "../../uitls/ctx";
 
-const record = (value: any, record: ChainConfig, index: number) => {
-  const { hops } = record;
-  const _hops = hops.map((hop) => {
-    const { nodes } = hop;
-    const _nodes = nodes.map((node) => {
-      const {
-        addr,
-        connector: { type: connectorType },
-        dialer: { type: dialerType },
-      } = node;
-      return `${connectorType}${dialerType ? "+" + dialerType : ""}://${addr}`;
-    });
-    return _nodes.join(",");
-  });
-  return _hops.join(" -> ");
-};
+// const record = (value: any, record: ChainConfig, index: number) => {
+//   const { hops } = record;
+//   const _hops = hops.map((hop) => {
+//     const { nodes } = hop;
+//     const _nodes = nodes.map((node) => {
+//       const {
+//         addr,
+//         connector: { type: connectorType },
+//         dialer: { type: dialerType },
+//       } = node;
+//       return `${connectorType}${dialerType ? "+" + dialerType : ""}://${addr}`;
+//     });
+//     return _nodes.join(",");
+//   });
+//   return _hops.join(" -> ");
+// };
 const ChainCard: React.FC = (props) => {
+  const { gostConfig } = useContext(Ctx);
   const _prop = {
     title: "转发链(Chain)",
     subTitle: "转发链",
     name: "chains",
     api: chains,
     keyName: "name",
-    renderConfig: record,
+    renderConfig: (value: any, record: ChainConfig, index: number) => {
+      return viewChain.call(gostConfig!, record);
+    },
   };
   return <ListCard {..._prop} />;
 };

src/components/ListCard/Hops.tsx

@@ -0,0 +1,23 @@
+import { hops } from "../../api";
+import { HopConfig } from "../../api/types";
+import ListCard from ".";
+import viewChain from "../viewer/chain";
+import { useContext } from "react";
+import Ctx from "../../uitls/ctx";
+import viewHop from "../viewer/hop";
+
+const HopsCard: React.FC = (props) => {
+  const { gostConfig } = useContext(Ctx);
+  return (
+    <ListCard
+      title="跳跃点(Hop)"
+      subTitle="跳跃点"
+      name="hops"
+      api={hops}
+      renderConfig={(value: any, record: HopConfig, index: number) => {
+        return viewHop.call(gostConfig!, record);
+      }}
+    ></ListCard>
+  );
+};
+export default HopsCard;

src/components/ListCard/Services.tsx

@@ -3,24 +3,28 @@ import { services as localServices } from "../../api/local";
 import { ServiceConfig } from "../../api/types";
 import qs from "qs";
 import ListCard from ".";
+import { useContext } from "react";
+import Ctx from "../../uitls/ctx";
+import viewService from "../viewer/services";
 
-const record = (value: any, record: ServiceConfig, index: number) => {
-  const { handler, listener, addr, forwarder } = record;
-  const xy =
-    handler.type === listener.type
-      ? handler.type
-      : handler.type + "+" + listener.type;
-  const auth = handler.auth
-    ? handler.auth.username + ":" + handler.auth.password + "@"
-    : "";
-  const metadata = handler.metadata ? qs.stringify(handler.metadata) : "";
-  const targets = forwarder?.nodes.map((item) => item.addr).join(",") || "";
+// const record = (value: any, record: ServiceConfig, index: number) => {
+//   const { handler, listener, addr, forwarder } = record;
+//   const xy =
+//     handler.type === listener.type
+//       ? handler.type
+//       : handler.type + "+" + listener.type;
+//   const auth = handler.auth
+//     ? handler.auth.username + ":" + handler.auth.password + "@"
+//     : "";
+//   const metadata = handler.metadata ? qs.stringify(handler.metadata) : "";
+//   const targets = forwarder?.nodes.map((item) => item.addr).join(",") || "";
 
-  return `${xy}://${auth}${addr}${targets ? "/" + targets : ""}${
-    metadata ? "?" + metadata : ""
-  }`;
-};
+//   return `${xy}://${auth}${addr}${targets ? "/" + targets : ""}${
+//     metadata ? "?" + metadata : ""
+//   }`;
+// };
 const ServiceCard: React.FC = (props) => {
+  const { gostConfig } = useContext(Ctx);
   const _prop = {
     title: "服务(Service)",
     subTitle: "服务",
@@ -28,7 +32,9 @@ const ServiceCard: React.FC = (props) => {
     api: services,
     keyName: "name",
     localApi: localServices,
-    renderConfig: record,
+    renderConfig: (value: any, record: ServiceConfig, index: number) => {
+      return viewService.call(gostConfig!, record);
+    },
   };
   return <ListCard {..._prop} />;
 };

src/components/viewer/chain.ts

@@ -0,0 +1,7 @@
+import { ChainConfig, Config, HopConfig } from "../../api/types";
+import { viewHops } from "./hop";
+
+export default function viewChain(this: Partial<Config>, chain: ChainConfig) {
+  const { hops } = chain;
+  return viewHops.call(this, hops);
+}

src/components/viewer/hop.ts

@@ -0,0 +1,17 @@
+import { Config, HopConfig } from "../../api/types";
+import viewNode from "./node";
+
+export default function viewHop(this: Partial<Config>, hop: HopConfig) {
+  let _hop = hop;
+  if (!_hop.nodes) {
+    _hop = this?.hops?.find((item) => item.name === _hop.name) || _hop;
+  }
+  const { nodes } = _hop;
+  if (nodes?.length <= 0) return `[${hop.name}(noNodes)]`;
+  const _nodes = nodes.map(viewNode.bind(this));
+  return _nodes.join(",");
+}
+
+export function viewHops(this: Partial<Config>, hops: HopConfig[]) {
+  return hops.map(viewHop.bind(this)).join(" -> ");
+}

src/components/viewer/node.ts

@@ -0,0 +1,16 @@
+import qs from "qs";
+import { Config, NodeConfig } from "../../api/types";
+
+export default function viewNode(this: Partial<Config>, data: NodeConfig) {
+  const {
+    name,
+    addr,
+    connector: { type: connectorType, metadata },
+    dialer: { type: dialerType },
+  } = data;
+
+  const _metadata = metadata ? qs.stringify(metadata) : "";
+  return `${connectorType}${dialerType ? "+" + dialerType : ""}://${addr}${
+    _metadata ? "?" + _metadata : ""
+  }`;
+}

src/components/viewer/services.ts

@@ -0,0 +1,19 @@
+import { Config, ServiceConfig } from "../../api/types";
+import qs from "qs";
+
+export default function viewService(this: Partial<Config>, service: ServiceConfig){
+    const { handler, listener, addr, forwarder } = service;
+    const xy =
+        handler.type === listener.type
+        ? handler.type
+        : handler.type + "+" + listener.type;
+    const auth = handler.auth
+        ? handler.auth.username + ":" + handler.auth.password + "@"
+        : "";
+    const metadata = handler.metadata ? qs.stringify(handler.metadata) : "";
+    const targets = forwarder?.nodes.map((item) => item.addr).join(",") || "";
+
+    return `${xy}://${auth}${addr}${targets ? "/" + targets : ""}${
+        metadata ? "?" + metadata : ""
+    }`;
+}