feat: ui fixes + edit invocation screen + process wrapper poc script …

…(#209) * feat: added blog to loggedout navbar * feat: cli wrapper * chore: create model layer * feat: disable supabase env * feat: mock dialogs service selector * fix: remove collapse from config card * fix: request card design * fix: sidebar * feat: invocation editor * feat: add disable to sniffer selector * feat: invocation page * feat: request load data return promise * fix: types and remove console.log * feat: add invocation editor to routing * fix: not found return element and not string * fix: eslint rules * fix: send data from inputs to execute * fix: test * fix: husky
Oferlis · Sep 11, 2023 · ba085cf · ba085cf
1 parent fcfb7a4
commit ba085cf
Show file tree

Hide file tree

Showing 34 changed files with 927 additions and 685 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "kill-port": "^2.0.1",
     "nodemon": "^3.0.1",
     "open": "^9.1.0",
+    "ps-tree": "^1.2.0",
     "swagger-jsdoc": "^6.2.8",
     "traffic-dashboard": "file:traffic-dashboard",
     "traffic-sniffer": "file:traffic-sniffer",

diff --git a/sharkio-auto-cli.js b/sharkio-auto-cli.js
@@ -0,0 +1,72 @@
+const { spawn } = require("child_process");
+const exec = require("util").promisify(require("child_process").exec);
+const psTree = require("ps-tree");
+
+// Check if a command is provided as an argument
+if (process.argv.length < 3) {
+  console.log("Usage: node run-command.js <command>");
+  process.exit(1);
+}
+
+// Get the command from the command-line arguments
+const command = process.argv.slice(2).join(" ");
+
+// Run the command as a child process
+const childProcess = spawn(command, {
+  shell: true, // Use the system shell to execute the command
+  stdio: "inherit", //'inherit' // Use the same stdio as the parent process (console)
+});
+
+console.log("the subprocess pid is " + childProcess.pid);
+console.log("the current process pid is " + process.pid);
+
+async function isPortOpen(childPid) {
+  try {
+    const { stdout } = await exec(`lsof | grep LISTEN | grep ${childPid}`);
+    const includes = stdout.includes(`${childPid}`);
+
+    if (includes) {
+      const ports = Array.from(stdout.matchAll(/:(\d+)/g)).map((m) => +m[1]);
+      console.log(ports);
+    }
+
+    return includes;
+  } catch (error) {
+    return false;
+  }
+}
+
+// Handle child process events
+childProcess.on("exit", (code) => {
+  console.log(`Child process exited with code ${code}`);
+});
+
+childProcess.on("error", (err) => {
+  console.error("Child process error:", err);
+});
+
+// Example usage:
+const targetPid = process.pid; // Get the target PID from the command line arguments
+
+const interval = setInterval(async () => {
+  psTree(targetPid, async (err, children) => {
+    if (err) {
+      console.error("Error:", err);
+      return;
+    }
+
+    const childrenWithPort = await Promise.all(
+      children.map(async (child) => {
+        return {
+          isOpen: await isPortOpen(child.PID),
+          pid: child.PID,
+        };
+      }),
+    );
+
+    const openChildrenWithPort = childrenWithPort.filter(
+      (child) => child.isOpen,
+    );
+    console.log(JSON.stringify(openChildrenWithPort));
+  });
+}, 1000);
diff --git a/traffic-dashboard/.eslintrc.cjs b/traffic-dashboard/.eslintrc.cjs
@@ -10,6 +10,7 @@ module.exports = {
   plugins: ["react-refresh"],
   rules: {
     "react-refresh/only-export-components": "warn",
-    "react/react-in-jsx-scope": "warn",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
   },
 };
diff --git a/traffic-dashboard/process-env.d.ts b/traffic-dashboard/process-env.d.ts
@@ -2,6 +2,7 @@ declare namespace NodeJS {
   export interface ProcessEnv {
     VITE_SUPABASE_PROJECT_URL: string;
     VITE_SUPABASE_ANON: string;
+    VITE_DISABLE_SUPABASE: boolean;
     [key: string]: string | undefined;
   }
 }

diff --git a/traffic-dashboard/src/App.tsx b/traffic-dashboard/src/App.tsx
@@ -10,8 +10,8 @@ import { Collections } from "./pages/collections/collections";
 import { Config } from "./pages/config/config";
 import { GenOpenAPI } from "./pages/gen-openapi/gen-openapi";
 import { GettingStarted } from "./pages/getting-started.tsx/getting-started";
+import { InvocationEditor } from "./pages/invocation/invocation";
 import { default as Mocks, default as MocksPage } from "./pages/mocks/mocks";
-import { NewRequest } from "./pages/new-request/new-request";
 import { Pricing } from "./pages/pricing/pricing";
 import { Requests } from "./pages/requests/requests";
 import { ServiceRequest } from "./pages/service-request/service-request";
@@ -29,9 +29,9 @@ function App(): React.JSX.Element {
 
   const routesWithAuth = () => {
     const routesWithAuth = [
-      { path: "/new-request", element: <NewRequest /> },
       { path: routes.SERVICE_REQUEST, element: <ServiceRequest /> },
       { path: routes.COLLECTION_REQUEST, element: <CollectionRequest /> },
+      { path: routes.REQUEST_INVOCATION, element: <InvocationEditor /> },
       { path: routes.CONFIG, element: <Config /> },
       { path: routes.REQUESTS, element: <Requests /> },
       { path: routes.MOCKS, element: <MocksPage /> },

diff --git a/traffic-dashboard/src/components/config-card/config-card.tsx b/traffic-dashboard/src/components/config-card/config-card.tsx
@@ -319,46 +319,44 @@ export const ConfigCard: React.FC<IConfigCardProps> = ({ className }) => {
             {sniffer.config.name == "" ? "No Name" : sniffer.config.name}
           </Typography>
         </div>
-        <Collapse orientation="vertical" in={sniffer.isCollapsed}>
-          <div className="flex flex-col gap-3">
-            <TextField
-              label={"Port"}
-              placeholder="1234"
-              defaultValue={sniffer.config.port}
-              disabled={sniffer.isEditing === false}
-              value={sniffer.config.port || ""}
-              onChange={(
-                e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-              ) => {
-                handlePortChanged(e, index);
-              }}
-            />
-            <TextField
-              label={"Downstream Url"}
-              placeholder="http://example.com"
-              defaultValue={sniffer.config.downstreamUrl}
-              value={sniffer.config.downstreamUrl || ""}
-              disabled={sniffer.isEditing === false}
-              onChange={(
-                e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-              ) => {
-                handleUrlChanged(e, index);
-              }}
-            />
-            <TextField
-              label={"Name"}
-              placeholder="name"
-              defaultValue={sniffer.config.name}
-              value={sniffer.config.name || ""}
-              disabled={sniffer.isEditing === false}
-              onChange={(
-                e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-              ) => {
-                handleNameChanged(e, index);
-              }}
-            />
-          </div>
-        </Collapse>
+        <div className="flex flex-col gap-3">
+          <TextField
+            label={"Port"}
+            placeholder="1234"
+            defaultValue={sniffer.config.port}
+            disabled={sniffer.isEditing === false}
+            value={sniffer.config.port || ""}
+            onChange={(
+              e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+            ) => {
+              handlePortChanged(e, index);
+            }}
+          />
+          <TextField
+            label={"Downstream Url"}
+            placeholder="http://example.com"
+            defaultValue={sniffer.config.downstreamUrl}
+            value={sniffer.config.downstreamUrl || ""}
+            disabled={sniffer.isEditing === false}
+            onChange={(
+              e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+            ) => {
+              handleUrlChanged(e, index);
+            }}
+          />
+          <TextField
+            label={"Name"}
+            placeholder="name"
+            defaultValue={sniffer.config.name}
+            value={sniffer.config.name || ""}
+            disabled={sniffer.isEditing === false}
+            onChange={(
+              e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+            ) => {
+              handleNameChanged(e, index);
+            }}
+          />
+        </div>
       </>
     );
   };

diff --git a/traffic-dashboard/src/components/navbar/navbar.tsx b/traffic-dashboard/src/components/navbar/navbar.tsx
@@ -1,19 +1,22 @@
 import GitHubIcon from "@mui/icons-material/GitHub";
 import { AppBar } from "@mui/material";
 import React from "react";
-import { Link, redirect, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuthStore } from "../../stores/authStore";
 import { useThemeStore } from "../../stores/themeStore";
 import ThemeToggleMode from "../ThemeToggleMode";
 import LoginComponent from "../login-component/login-component";
 import styles from "./navbar.module.scss";
-import { useAuthStore } from "../../stores/authStore";
 
 export const Navbar: React.FC = () => {
   const { mode, toggleColorMode } = useThemeStore();
   const navigate = useNavigate();
   const { user } = useAuthStore();
+  const disablesupabase = import.meta.env.VITE_DISABLE_SUPABASE;
 
-  const isLoggedOut = user == null || user.email == null;
+  const isLoggedOut = disablesupabase
+    ? false
+    : user == null || user.email == null;
 
   return (
     <AppBar position="relative">
@@ -90,7 +93,7 @@ export const Navbar: React.FC = () => {
             <>
               <a
                 class="inline-flex items-center justify-center !leading-none text-center whitespace-nowrap rounded transition-[colors, opacity] duration-200 outline-none uppercase font-medium h-10 px-5 text-xs bg-transparent text-white border border-gray-5 hover:bg-gray-4 hover:border-gray-4 group pl-3"
-                href="https://github.com/novuhq/novu"
+                href="https://github.com/sharkio-dev/sharkio"
                 target="_blank"
                 rel="noopener noreferrer"
               >

diff --git a/traffic-dashboard/src/components/page-template/page-template.tsx b/traffic-dashboard/src/components/page-template/page-template.tsx
@@ -7,9 +7,10 @@ import styles from "./page-template.module.scss";
 export const PageTemplate: React.FC<PropsWithChildren> = ({ children }) => {
   const [sideMenuOpen, setSideMenuOpen] = useState<boolean>(false);
   const { user } = useAuthStore();
+  const disableSupabase = import.meta.env.VITE_DISABLE_SUPABASE;
 
   useEffect(() => {
-    if (user != null && user.email != null) {
+    if (disableSupabase ? true : user != null && user.email != null) {
       setSideMenuOpen(true);
     } else {
       setSideMenuOpen(false);