add deployments back to header, fix pie variants

frontend/src/components/header/index.tsx

@@ -6,10 +6,11 @@ import { Link, useLocation, useParams } from "react-router-dom";
 
 import { useUser } from "@hooks";
 import { ServerName } from "@pages/server";
+import { DeploymentName } from "@pages/deployment";
 
 export const Paths = () => {
   const path = useLocation().pathname.split("/")[1];
-  const { serverId } = useParams();
+  const { serverId, deploymentId } = useParams();
 
   return (
     <div className="hidden md:flex items-center gap-2">
@@ -34,6 +35,14 @@ export const Paths = () => {
           </Link>
         </>
       )}
+      {deploymentId && (
+        <>
+          <ChevronRight className="w-4 h-4" />
+          <Link to={`/servers/${deploymentId}`}>
+            <DeploymentName deploymentId={deploymentId} />
+          </Link>
+        </>
+      )}
     </div>
   );
 };

frontend/src/pages/dashboard/components/deployments-chart.tsx

@@ -11,6 +11,7 @@ import { ChevronRight } from "lucide-react";
 import { PieChart } from "react-minimal-pie-chart";
 import { Link } from "react-router-dom";
 import { useRead } from "@hooks";
+import { DockerContainerState } from "@monitor/client/dist/types";
 
 export const DeploymentsChart = () => {
   const { data, isLoading, isError } = useRead({
@@ -18,9 +19,15 @@ export const DeploymentsChart = () => {
     params: {},
   });
 
-  const running = data?.filter((d) => d.state === "running").length;
-  const stopped = data?.filter((d) => d.state === "exited").length;
-  const not_deployed = data?.filter((d) => d.state === "not_deployed").length;
+  const running = data?.filter(
+    (d) => d.state === DockerContainerState.Running
+  ).length;
+  const stopped = data?.filter(
+    (d) => d.state === DockerContainerState.Exited
+  ).length;
+  const not_deployed = data?.filter(
+    (d) => d.state === DockerContainerState.Unknown
+  ).length;
 
   return (
     <Card className="pb-4 w-full">