fix stack service routing page - works with updates

frontend/src/components/resources/stack/services.tsx

@@ -50,7 +50,7 @@ export const StackServices = ({
                 );
                 return (
                   <Link
-                    to={`/stacks/${id}/${row.original.service}`}
+                    to={`/stacks/${id}/service/${row.original.service}`}
                     onClick={(e) => e.stopPropagation()}
                   >
                     <Button

frontend/src/pages/stack-service/index.tsx

@@ -34,10 +34,24 @@ const Actions: { [action: string]: IdServiceComponent } = {
 };
 
 export const StackServicePage = () => {
-  const { id: stack_id, service } = useParams() as {
+  const { type, id, service } = useParams() as {
+    type: string;
     id: string;
     service: string;
   };
+  if (type !== "stacks") {
+    return <div>This resource type does not have any services.</div>;
+  }
+  return <StackServicePageInner stack_id={id} service={service} />;
+};
+
+const StackServicePageInner = ({
+  stack_id,
+  service,
+}: {
+  stack_id: string;
+  service: string;
+}) => {
   const stack = useStack(stack_id);
   useSetTitle(`${stack?.name} | ${service}`);
   const nav = useNavigate();

frontend/src/router.tsx

@@ -38,10 +38,6 @@ const ROUTER = createBrowserRouter([
           { path: ":id", element: <UserPage /> },
         ],
       },
-      {
-        path: "stacks/:id/:service",
-        element: <StackServicePage />,
-      },
       {
         path: ":type",
         children: [
@@ -50,6 +46,10 @@ const ROUTER = createBrowserRouter([
           { path: ":id/stats", element: <ResourceStats /> },
           { path: ":id/updates", element: <Updates /> },
           { path: ":id/alerts", element: <Alerts /> },
+          {
+            path: ":id/service/:service",
+            element: <StackServicePage />,
+          },
         ],
       },
     ],