feat: add more tman frontend logic (#392)

TEN-framework · Dec 12, 2024 · 62406d2 · 62406d2
1 parent 32df431
commit 62406d2
Show file tree

Hide file tree

Showing 40 changed files with 1,621 additions and 184 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -207,6 +207,9 @@
         "LD_LIBRARY_PATH": "${workspaceFolder}/out/linux/x64/gen/cmake/clingo/install/lib/",
         "RUST_BACKTRACE": "1",
       },
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman test (rust)",
@@ -237,6 +240,9 @@
         "LD_LIBRARY_PATH": "${workspaceFolder}/out/linux/x64/ten_manager/lib/",
         "RUST_BACKTRACE": "1",
       },
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman install (lldb)",
@@ -248,6 +254,9 @@
         "install"
       ],
       "env": {},
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman delete (lldb)",
@@ -262,6 +271,9 @@
         "0.1.1",
       ],
       "env": {},
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman_test (lldb)",
@@ -270,6 +282,9 @@
       "program": "${workspaceFolder}/out/linux/x64/tman_test",
       "cwd": "${workspaceFolder}/out/linux/x64/",
       "args": [],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman check (lldb)",
@@ -280,6 +295,9 @@
       "args": [
         "check"
       ],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman install_cpp_app_mock (lldb)",
@@ -293,6 +311,9 @@
         "ddd",
         "--mock=${workspaceFolder}/out/linux/x64/tests/local_registry/"
       ],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman install_cpp_app_oss (lldb)",
@@ -309,7 +330,10 @@
       "env": {
         "aliyun_oss_access_key_id": "",
         "aliyun_oss_access_key_secret": ""
-      }
+      },
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman install_nodejs_app_mock (lldb)",
@@ -323,6 +347,9 @@
         "app",
         "smart_meeting_minutes",
       ],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman install_extension_mock (lldb)",
@@ -335,6 +362,9 @@
         "extension",
         "default_extension_cpp"
       ],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman install_protocol_mock (lldb)",
@@ -349,6 +379,9 @@
         "--build=debug",
         "--mock=${workspaceFolder}/out/linux/x64/tests/local_registry/"
       ],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman install_app_mock (lldb)",
@@ -360,6 +393,9 @@
         "--config-file=${workspaceFolder}/out/linux/x64/tests/local_registry/config.json",
         "install",
       ],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman publish_mock (lldb)",
@@ -371,18 +407,24 @@
         "--config-file=${workspaceFolder}/out/linux/x64/tests/local_registry/config.json",
         "install",
       ],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman dev-server (lldb)",
       "type": "lldb",
       "request": "launch",
-      "program": "${workspaceFolder}/out/linux/x64/ten_manager/bin/tman",
-      "cwd": "${workspaceFolder}/out/linux/x64/",
+      "program": "${workspaceFolder}/core/src/ten_manager/target/x86_64-unknown-linux-gnu/debug/tman",
+      "cwd": "${workspaceFolder}/core/src/ten_manager/target/x86_64-unknown-linux-gnu/debug/",
       "args": [
         "--verbose",
         "dev-server",
-        "--base-dir=/home/sunxilin/ten_framework_internal_base/ten_framework/out/linux/x64/tests/ten_runtime/integration/python/two_async_extensions_in_different_groups_python/two_async_extensions_in_different_groups_python_app",
-        "--port=49483"
+        "--frontend-dev",
+        "--base-dir=/home/wei/MyData/MyProject/ten_framework_internal_base/ten_framework/out/linux/x64/tests/ten_runtime/integration/cpp/http_basic/restful_http_app/",
+      ],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
       ],
     },
     {
@@ -397,6 +439,9 @@
         "../../../tests/ten_runtime/integration/ten_manager/res/dest_manifest.json",
         "hello_world",
       ],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "tman check graph (lldb)",
@@ -408,7 +453,10 @@
         "check",
         "graph",
         "/home/workspace/pcm-pusher"
-      ]
+      ],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "ten_rust (rust)",
@@ -434,7 +482,10 @@
       },
       "args": [
         "test_create_schema_invalid_json"
-      ]
+      ],
+      "preRunCommands": [
+        "script import pathlib;import subprocess;import lldb;rustc_sysroot = subprocess.getoutput(\"rustc --print sysroot\");rustlib_etc = pathlib.Path(rustc_sysroot) / \"lib\" / \"rustlib\" / \"etc\";lldb.debugger.HandleCommand(f'command script import \"{rustlib_etc / \"lldb_lookup.py\"}\"');lldb.debugger.HandleCommand(f'command source -s 0 \"{rustlib_etc / \"lldb_commands\"}\"')"
+      ],
     },
     {
       "name": "app (C/C++) (lldb, launch)",

diff --git a/core/src/ten_manager/Cargo.lock b/core/src/ten_manager/Cargo.lock
diff --git a/core/src/ten_manager/Cargo.toml b/core/src/ten_manager/Cargo.toml
@@ -8,7 +8,6 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-actix = "0.13"
 actix-cors = "0.7"
 actix-files = "0.6"
 actix-rt = "2.10"

diff --git a/core/src/ten_manager/frontend/package.json b/core/src/ten_manager/frontend/package.json
@@ -11,6 +11,8 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "@xyflow/react": "^12.3.6",
+    "dagre": "^0.8.5",
     "i18next": "^24.0.5",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
@@ -19,17 +21,20 @@
     "react-i18next": "^15.1.4"
   },
   "devDependencies": {
+    "@types/dagre": "^0.7.52",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
+    "sass": "^1.82.0",
+    "sass-loader": "^16.0.4",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
     "typescript": "^5.7.2",
     "webpack": "^5.97.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0"
   }
-}
+}
diff --git a/core/src/ten_manager/frontend/src/App.tsx b/core/src/ten_manager/frontend/src/App.tsx
@@ -4,8 +4,13 @@
 // Licensed under the Apache License, Version 2.0, with certain conditions.
 // Refer to the "LICENSE" file in the root directory for more information.
 //
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import AppBar from "./components/AppBar/AppBar";
+import FlowCanvas, { FlowCanvasRef } from "./flow/FlowCanvas";
+import SettingsPopup from "./components/SettingsPopup/SettingsPopup";
+import { useTheme } from "./hooks/useTheme";
+import "./theme/index.scss";
 
 interface ApiResponse<T> {
   status: string;
@@ -18,10 +23,15 @@ interface DevServerVersion {
 }
 
 const App: React.FC = () => {
-  const { t, i18n } = useTranslation("common");
+  const { t } = useTranslation("common");
   const [version, setVersion] = useState<string>("");
   const [error, setError] = useState<string>("");
+  const [showSettings, setShowSettings] = useState(false);
+  const { theme, setTheme } = useTheme();
 
+  const flowCanvasRef = useRef<FlowCanvasRef>(null);
+
+  // Get the version of tman.
   useEffect(() => {
     fetch("/api/dev-server/v1/version")
       .then((response) => {
@@ -43,21 +53,25 @@ const App: React.FC = () => {
       });
   }, []);
 
-  const changeLanguage = (lng: string) => {
-    i18n.changeLanguage(lng);
+  const handleAutoLayout = () => {
+    flowCanvasRef.current?.performAutoLayout();
   };
 
   return (
-    <div className="App">
-      <div style={{ marginBottom: "20px" }}>
-        <button onClick={() => changeLanguage("en")}>English</button>
-        <button onClick={() => changeLanguage("zh_cn")}>中文</button>
-      </div>
-
-      {error ? (
-        <p style={{ color: "red" }}>{t("error_fetching")}</p>
-      ) : (
-        <h1>{t("current_version", { version })}</h1>
+    <div className={`theme-${theme}`}>
+      <AppBar
+        version={version}
+        error={error}
+        onOpenSettings={() => setShowSettings(true)}
+        onAutoLayout={handleAutoLayout}
+      />
+      <FlowCanvas ref={flowCanvasRef} />
+      {showSettings && (
+        <SettingsPopup
+          theme={theme}
+          onChangeTheme={setTheme}
+          onClose={() => setShowSettings(false)}
+        />
       )}
     </div>
   );

diff --git a/core/src/ten_manager/frontend/src/components/AboutPopup/AboutPopup.scss b/core/src/ten_manager/frontend/src/components/AboutPopup/AboutPopup.scss
@@ -0,0 +1,24 @@
+//
+// Copyright © 2024 Agora
+// This file is part of TEN Framework, an open source project.
+// Licensed under the Apache License, Version 2.0, with certain conditions.
+// Refer to the "LICENSE" file in the root directory for more information.
+//
+.about-content {
+  text-align: center;
+  .powered-by {
+    font-style: italic;
+    font-size: 16px;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    margin-bottom: 20px;
+  }
+
+  p {
+    margin: 5px 0;
+  }
+
+  .about-link {
+    color: blue;
+    text-decoration: underline;
+  }
+}