feat: add git versioning info for process (#32)

* feat: add git versioning info for process
oxdev03 · Jul 30, 2024 · ebab35d · ebab35d
1 parent 57743be
commit ebab35d
Show file tree

Hide file tree

Showing 17 changed files with 223 additions and 204 deletions.
diff --git a/README.md b/README.md
@@ -36,10 +36,10 @@ Once pm2.web is installed and running, you can perform the following actions:
 
   - Stop, restart, or delete processes from the process list page.
   - Access the logs generated by your processes.
-  - View key metrics and graphs to assess the performance of your applications.
+  - View key metrics, git versioning info and graphs to assess the performance of your applications.
   - Pm2 Settings & Git Feature
 
-- **Server Management (Planned)**:
+- **Server Management (Planned/On Demand)**:
 
   - Control server-level functions such as shutdown or restart using the dedicated server management page.
   - Execute these actions securely without the need for direct server access.
@@ -55,7 +55,7 @@ Once pm2.web is installed and running, you can perform the following actions:
 
   - Configure settings such as the update interval, log rotation, and more.
 
-- **Alert Setup (Planned)**:
+- **Alert Setup (Planned/On Demand)**:
 
   - Configure alerts to receive notifications for specific actions.
   - Define alert rules based on events like shutdown, restart, or kill actions.
@@ -74,7 +74,7 @@ Once pm2.web is installed and running, you can perform the following actions:
       - **Usage**: Only registered users (per credentials) can login with auth2, which links the oauth2 with the existing user account in the database
     - **Setup Registration Code**
       - Go to the settings page and add/generate the registration code
-    - **Setup Google OAuth**
+    - **Setup Google OAuth (Planned/On Demand)**
       - TBD
 
 ## Up Next

diff --git a/apps/backend/handlers/updateData.ts b/apps/backend/handlers/updateData.ts
@@ -48,6 +48,7 @@ export default async function updateData(
       await processModel.updateOne(processQuery, {
         name: process.name,
         status: process.status,
+        versioning: process.versioning,
         $push: {
           logs: {
             $each: logs,
@@ -64,6 +65,7 @@ export default async function updateData(
         type: process.type,
         logs: logs,
         status: process.status,
+        versioning: process.versioning,
         restartCount: 0,
         deleteCount: 0,
         toggleCount: 0,

diff --git a/apps/backend/package.json b/apps/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "backend",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "main": "dist/index.js",
   "description": "Dashboard for PM2",
   "author": {
@@ -41,6 +41,6 @@
     "@pm2.web/typescript-config": "*",
     "@types/bcrypt": "^5.0.2",
     "eslint": "^8.57.0",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   }
 }
diff --git a/apps/backend/types/info.ts b/apps/backend/types/info.ts
@@ -10,6 +10,13 @@ interface IProcessInfo {
     memoryMax: number;
     uptime: number;
   };
+  versioning: {
+    url?: string;
+    revision?: string;
+    comment?: string;
+    branch?: string;
+    unstaged?: boolean;
+  };
   status: IProcessStatus;
   type: string;
 }

diff --git a/apps/backend/utils/processInfo.ts b/apps/backend/utils/processInfo.ts
@@ -36,6 +36,13 @@ const getProcessInfo = async (): Promise<IProcessInfo[]> => {
           memoryMax: 0,
           uptime: Date.now() - (item?.pm2_env?.pm_uptime || 0),
         },
+        versioning: {
+          url: item.pm2_env?.versioning?.url,
+          revision: item.pm2_env?.versioning?.revision,
+          comment: item.pm2_env?.versioning?.comment,
+          branch: item.pm2_env?.versioning?.branch,
+          unstaged: item.pm2_env?.versioning?.unstaged ?? true,
+        },
         status: item?.pm2_env?.status || "offline",
         type: item?.pm2_env?.exec_interpreter || "",
       };

diff --git a/apps/dashboard/components/process/ProcessGitMetric.tsx b/apps/dashboard/components/process/ProcessGitMetric.tsx
@@ -0,0 +1,40 @@
+import { Anchor, Flex, Paper, Popover, Text } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IProcess } from "@pm2.web/typings";
+import { IconGitMerge } from "@tabler/icons-react";
+
+import classes from "@/styles/process.module.css";
+
+export default function ProcessGitMetric({ versioning }: { versioning?: IProcess["versioning"] }) {
+  const [opened, { close, open }] = useDisclosure(false);
+
+  return (
+    <Popover withArrow shadow="md" opened={opened} trapFocus>
+      <Popover.Target>
+        <Paper
+          className={classes.processMetric}
+          radius="md"
+          p={"4px"}
+          px={"10px"}
+          onMouseEnter={open}
+          onMouseLeave={close}
+        >
+          <Flex align={"center"} justify={"space-between"} gap={"5px"} w={"5em"}>
+            <IconGitMerge size="1.2rem" />
+            <Anchor href={`${versioning?.url}/commit/${versioning?.revision}`} target="_blank" underline="hover">
+              {versioning?.branch}
+              {versioning?.unstaged && "*"}
+            </Anchor>
+          </Flex>
+        </Paper>
+      </Popover.Target>
+      <Popover.Dropdown style={{ pointerEvents: "none" }}>
+        {versioning?.comment?.split("\n")?.map((t, tIdx) => (
+          <Text size="sm" key={tIdx}>
+            {t}
+          </Text>
+        ))}
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/apps/dashboard/components/process/ProcessItem.tsx b/apps/dashboard/components/process/ProcessItem.tsx
@@ -49,7 +49,7 @@ export default function ProcessItem({ process, setting }: ProcessItemProps) {
           <ProcessHeader statusColor={getStatusColor()} interpreter={process.type} name={process.name} />
           <Flex align={"center"} rowGap={"10px"} columnGap={"40px"} wrap={"wrap"} justify={"end"}>
             <ProcessMetricRow
-              processId={process._id}
+              process={process}
               refetchInterval={setting.polling.frontend}
               showMetric={process.status == "online"}
             />

diff --git a/apps/dashboard/components/process/ProcessMetricRow.tsx b/apps/dashboard/components/process/ProcessMetricRow.tsx
@@ -1,28 +1,31 @@
 import { Flex } from "@mantine/core";
+import { IProcess } from "@pm2.web/typings";
 import { IconCpu, IconDeviceSdCard, IconHistory } from "@tabler/icons-react";
 import ms from "ms";
 
 import { formatBytes } from "@/utils/format";
 import { trpc } from "@/utils/trpc";
 
+import ProcessGitMetric from "./ProcessGitMetric";
 import ProcessItemMetric from "./ProcessMetric";
 
 interface ProcessActionProps {
-  processId: string;
+  process: IProcess;
   refetchInterval: number;
   showMetric: boolean;
 }
 
-export default function ProcessMetricRow({ processId, refetchInterval, showMetric }: ProcessActionProps) {
+export default function ProcessMetricRow({ process, refetchInterval, showMetric }: ProcessActionProps) {
   const getStat = trpc.process.getStat.useQuery(
-    { processId },
+    { processId: process._id },
     {
       refetchInterval,
     },
   );
 
   return (
     <Flex align={"center"} gap={"xs"} wrap={"wrap"}>
+      {process?.versioning?.url && <ProcessGitMetric versioning={process.versioning} />}
       <ProcessItemMetric
         w="75px"
         Icon={IconDeviceSdCard}

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -4,7 +4,7 @@
   "author": {
     "name": "oxdev03"
   },
-  "version": "1.4.2",
+  "version": "1.5.0",
   "private": true,
   "repository": {
     "type": "git",
@@ -61,7 +61,7 @@
     "@types/bcrypt": "^5.0.2",
     "@types/lodash": "^4.17.7",
     "@types/ms": "^0.7.34",
-    "@types/node": "20.14.11",
+    "@types/node": "20.14.13",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "cypress": "^13.13.1",
@@ -70,11 +70,11 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-unicorn": "^54.0.0",
-    "postcss": "^8.4.39",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "postcss": "^8.4.40",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
-    "start-server-and-test": "^2.0.4",
-    "typescript": "5.5.3"
+    "start-server-and-test": "^2.0.5",
+    "typescript": "5.5.4"
   }
 }