fix: abort task route, improvements on UI and more

LABIOQUIM · Apr 26, 2023 · 1165112 · 1165112
1 parent a9cda03
commit 1165112
Show file tree

Hide file tree

Showing 15 changed files with 194 additions and 77 deletions.
diff --git a/apps/client/public/locales/en-US/common.json b/apps/client/public/locales/en-US/common.json
@@ -1,5 +1,6 @@
 {
-  "app-name": "VisualDynamics",
+  "app-name": "Visual Dynamics",
+  "abort": "Abort run",
   "errors": {
     "404": {
       "title": "This place... isn't a place at all",

diff --git a/apps/client/public/locales/en-US/running.json b/apps/client/public/locales/en-US/running.json
@@ -1,7 +1,6 @@
 {
   "title": "Your Dynamic is Running",
   "taskId": "Task ID",
-  "abort": "Abort run",
   "description": "Info",
   "type": "Model",
   "molecule": "Molecule",

diff --git a/apps/client/src/components/AdminRunningDynamicsList/index.tsx b/apps/client/src/components/AdminRunningDynamicsList/index.tsx
@@ -2,13 +2,16 @@ import { Server } from "lucide-react";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 
+import { DynamicRunningAbortButton } from "@app/components/DynamicRunningAbortButton";
 import { GetAdminRunningDynamicsListResult } from "@app/queries/useAdminRunningDynamicsList";
 
 interface AdminRunningDynamicsListProps {
   runningDynamics: GetAdminRunningDynamicsListResult;
+  refetch: () => void;
 }
 
 export function AdminRunningDynamicsList({
+  refetch,
   runningDynamics
 }: AdminRunningDynamicsListProps) {
   const router = useRouter();
@@ -31,24 +34,36 @@ export function AdminRunningDynamicsList({
             {dynamics && dynamics.length > 0 ? (
               <div className="flex flex-col gap-y-1 rounded-lg p-4 odd:bg-zinc-500/20 even:bg-zinc-500/10">
                 {dynamics.map((dynamic) => (
-                  <div key={`${worker}_${dynamic.id}`}>
-                    <div className="flex gap-x-1">
-                      <p>{t("admin-running:dynamic.path")}:</p>
-                      <p className="font-semibold">{dynamic.args[0]}</p>
-                    </div>
-                    <div className="flex gap-x-1">
-                      <p>{t("admin-running:dynamic.started-at")}:</p>
-                      <p className="font-semibold">
-                        {Intl.DateTimeFormat(router.locale, {
-                          day: "2-digit",
-                          month: "long",
-                          year: "numeric",
-                          hour: "2-digit",
-                          minute: "2-digit",
-                          second: "2-digit"
-                        }).format(new Date(dynamic.time_start * 1000))}
-                      </p>
+                  <div
+                    className="flex flex-col gap-y-2"
+                    key={`${worker}_${dynamic.id}`}
+                  >
+                    <div className="flex flex-col gap-y-1">
+                      <div className="flex gap-x-1">
+                        <p className="whitespace-nowrap">
+                          {t("admin-running:dynamic.path")}:
+                        </p>
+                        <p className="font-semibold">{dynamic.args[0]}</p>
+                      </div>
+                      <div className="flex gap-x-1">
+                        <p>{t("admin-running:dynamic.started-at")}:</p>
+                        <p className="font-semibold">
+                          {Intl.DateTimeFormat(router.locale, {
+                            day: "2-digit",
+                            month: "long",
+                            year: "numeric",
+                            hour: "2-digit",
+                            minute: "2-digit",
+                            second: "2-digit"
+                          }).format(new Date(dynamic.time_start * 1000))}
+                        </p>
+                      </div>
                     </div>
+                    <DynamicRunningAbortButton
+                      refetch={refetch}
+                      celeryId={dynamic.id}
+                      folder={dynamic.args[0]}
+                    />
                   </div>
                 ))}
               </div>

diff --git a/apps/client/src/components/DynamicRunningAbortButton/index.tsx b/apps/client/src/components/DynamicRunningAbortButton/index.tsx
@@ -0,0 +1,54 @@
+import { Slash } from "lucide-react";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+
+import { Button } from "@app/components/Button";
+import { api } from "@app/lib/api";
+
+interface DynamicRunningAbortButtonProps {
+  celeryId: string;
+  disableAbortButton?: boolean;
+  folder: string;
+  refetch: () => void;
+}
+
+export function DynamicRunningAbortButton({
+  celeryId,
+  disableAbortButton,
+  folder,
+  refetch
+}: DynamicRunningAbortButtonProps) {
+  const { t } = useTranslation(["common"]);
+  const router = useRouter();
+
+  async function abortTask() {
+    const formData = new FormData();
+
+    formData.append("taskId", celeryId);
+    formData.append("folder", folder);
+    api
+      .post("/run/abort", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data"
+        }
+      })
+      .then(() => {
+        if (refetch) {
+          refetch();
+        } else {
+          router.push("/my-dynamics");
+        }
+      });
+  }
+
+  return (
+    <Button
+      className="w-fit bg-red-700 enabled:hover:bg-red-800"
+      LeftIcon={Slash}
+      disabled={disableAbortButton}
+      onClick={abortTask}
+    >
+      {t("common:abort")}
+    </Button>
+  );
+}
diff --git a/apps/client/src/hocs/withSSRAuth.ts b/apps/client/src/hocs/withSSRAuth.ts
@@ -1,9 +1,12 @@
 import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
-import { getServerSession } from "next-auth";
+import { getServerSession, Session } from "next-auth";
 
 import { authOptions } from "@app/pages/api/auth/[...nextauth]";
 
-type IncomingGSSP<P> = (ctx: GetServerSidePropsContext) => Promise<P>;
+type IncomingGSSP<P> = (
+  ctx: GetServerSidePropsContext,
+  session?: Session
+) => Promise<P>;
 
 type WithAuthServerSidePropsResult = GetServerSidePropsResult<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -34,7 +37,7 @@ export function withSSRAuth(
     }
 
     if (incomingGSSP) {
-      const incomingGSSPResult = await incomingGSSP(ctx);
+      const incomingGSSPResult = await incomingGSSP(ctx, session);
 
       if ("props" in incomingGSSPResult) {
         return {

diff --git a/apps/client/src/pages/admin/running.tsx b/apps/client/src/pages/admin/running.tsx
@@ -24,7 +24,10 @@ export const getServerSideProps = withSSRTranslations(withSSRAdmin(), {
 });
 
 export default function AdminSignup() {
-  const { data, isRefetching, isLoading } = useAdminRunningDynamicsList();
+  const { data, isRefetching, isLoading, refetch } =
+    useAdminRunningDynamicsList({
+      refetchOnMount: true
+    });
   const { t } = useTranslation();
 
   return (
@@ -42,7 +45,10 @@ export default function AdminSignup() {
           <Spinner />
         </div>
       ) : (
-        <AdminRunningDynamicsList runningDynamics={data} />
+        <AdminRunningDynamicsList
+          refetch={refetch}
+          runningDynamics={data}
+        />
       )}
     </>
   );

diff --git a/apps/client/src/pages/dynamic/acpype.tsx b/apps/client/src/pages/dynamic/acpype.tsx
@@ -1,12 +1,11 @@
 import dynamic from "next/dynamic";
-import { getServerSession, User } from "next-auth";
+import { User } from "next-auth";
 import { useTranslation } from "next-i18next";
 
 import { FullPageLoader } from "@app/components/FullPageLoader";
 import { SEO } from "@app/components/SEO";
 import { withSSRAuth } from "@app/hocs/withSSRAuth";
 import { withSSRTranslations } from "@app/hocs/withSSRTranslations";
-import { authOptions } from "@app/pages/api/auth/[...nextauth]";
 import { getRunningDynamic } from "@app/queries/useRunningDynamic";
 
 const ACPYPEForm = dynamic(
@@ -18,8 +17,7 @@ const ACPYPEForm = dynamic(
 );
 
 export const getServerSideProps = withSSRTranslations(
-  withSSRAuth(async (ctx) => {
-    const session = await getServerSession(ctx.req, ctx.res, authOptions);
+  withSSRAuth(async (_, session) => {
     if (session) {
       const data = await getRunningDynamic(session.user.username);
 

diff --git a/apps/client/src/pages/dynamic/apo.tsx b/apps/client/src/pages/dynamic/apo.tsx
@@ -1,12 +1,11 @@
 import dynamic from "next/dynamic";
-import { getServerSession, User } from "next-auth";
+import { User } from "next-auth";
 import { useTranslation } from "next-i18next";
 
 import { FullPageLoader } from "@app/components/FullPageLoader";
 import { SEO } from "@app/components/SEO";
 import { withSSRAuth } from "@app/hocs/withSSRAuth";
 import { withSSRTranslations } from "@app/hocs/withSSRTranslations";
-import { authOptions } from "@app/pages/api/auth/[...nextauth]";
 import { getRunningDynamic } from "@app/queries/useRunningDynamic";
 
 const APOForm = dynamic(
@@ -18,9 +17,7 @@ const APOForm = dynamic(
 );
 
 export const getServerSideProps = withSSRTranslations(
-  withSSRAuth(async (ctx) => {
-    const session = await getServerSession(ctx.req, ctx.res, authOptions);
-
+  withSSRAuth(async (_, session) => {
     if (session) {
       const data = await getRunningDynamic(session.user.username);
 

diff --git a/apps/client/src/pages/dynamic/prodrg.tsx b/apps/client/src/pages/dynamic/prodrg.tsx
@@ -1,14 +1,12 @@
 import { AlertTriangle } from "lucide-react";
 import dynamic from "next/dynamic";
-import { getServerSession } from "next-auth";
 import { User } from "next-auth";
 import { useTranslation } from "next-i18next";
 
 import { FullPageLoader } from "@app/components/FullPageLoader";
 import { SEO } from "@app/components/SEO";
 import { withSSRAuth } from "@app/hocs/withSSRAuth";
 import { withSSRTranslations } from "@app/hocs/withSSRTranslations";
-import { authOptions } from "@app/pages/api/auth/[...nextauth]";
 import { getRunningDynamic } from "@app/queries/useRunningDynamic";
 
 const PRODRGForm = dynamic(
@@ -20,8 +18,7 @@ const PRODRGForm = dynamic(
 );
 
 export const getServerSideProps = withSSRTranslations(
-  withSSRAuth(async (ctx) => {
-    const session = await getServerSession(ctx.req, ctx.res, authOptions);
+  withSSRAuth(async (_, session) => {
     if (session) {
       const data = await getRunningDynamic(session.user.username);
 

diff --git a/apps/client/src/pages/dynamic/running.tsx b/apps/client/src/pages/dynamic/running.tsx
@@ -1,16 +1,20 @@
-import { ArrowRight, FileCog, Slash } from "lucide-react";
+import { ArrowRight, FileCog } from "lucide-react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { User } from "next-auth";
 import { useTranslation } from "next-i18next";
 
 import { Button } from "@app/components/Button";
+import { DynamicRunningAbortButton } from "@app/components/DynamicRunningAbortButton";
 import { SEO } from "@app/components/SEO";
 import { withSSRAuth } from "@app/hocs/withSSRAuth";
 import { withSSRTranslations } from "@app/hocs/withSSRTranslations";
-import { api } from "@app/lib/api";
-import { useRunningDynamic } from "@app/queries/useRunningDynamic";
+import {
+  getRunningDynamic,
+  GetRunningDynamicResult,
+  useRunningDynamic
+} from "@app/queries/useRunningDynamic";
 
 const DynamicRunningRealtimeLog = dynamic(
   () =>
@@ -32,29 +36,40 @@ const DynamicRunningStepList = dynamic(
   }
 );
 
-export const getServerSideProps = withSSRTranslations(withSSRAuth(), {
-  namespaces: ["running"]
-});
+export const getServerSideProps = withSSRTranslations(
+  withSSRAuth(async (_, session) => {
+    if (session) {
+      const initialData = await getRunningDynamic(session.user.username);
 
-export default function Running({ user }: { user: User }) {
-  const { data, isLoading, isRefetching } = useRunningDynamic(user.username);
-  const { t } = useTranslation(["navigation", "running"]);
-  const router = useRouter();
-
-  async function abortTask() {
-    if (!isLoading && !isRefetching) {
-      const formData = new FormData();
-
-      if (data && data.status === "running") {
-        formData.append("task_id", data.info.celeryId);
-        api.post("/run/abort", formData, {
-          headers: {
-            "Content-Type": "multipart/form-data"
-          }
-        });
-      }
+      return {
+        props: {
+          initialData
+        }
+      };
     }
+
+    return {
+      props: {}
+    };
+  }),
+  {
+    namespaces: ["running"]
   }
+);
+
+export default function Running({
+  initialData,
+  user
+}: {
+  user: User;
+  initialData: GetRunningDynamicResult;
+}) {
+  const { data, isRefetching } = useRunningDynamic(user.username, {
+    initialData,
+    refetchOnMount: true
+  });
+  const { t } = useTranslation(["navigation", "running"]);
+  const router = useRouter();
 
   if (data?.status === "running") {
     const disableAbortButton =
@@ -66,14 +81,13 @@ export default function Running({ user }: { user: User }) {
       <>
         <SEO title={t("running:title")} />
         <div className="relative">
-          <Button
-            className="absolute right-0 top-1 w-fit bg-red-700 enabled:hover:bg-red-800"
-            LeftIcon={Slash}
-            disabled={disableAbortButton}
-            onClick={abortTask}
-          >
-            {t("running:abort")}
-          </Button>
+          <div className="absolute right-0 top-1">
+            <DynamicRunningAbortButton
+              folder={data.info.folder}
+              celeryId={data.info.celeryId}
+              disableAbortButton={disableAbortButton}
+            />
+          </div>
           <h4 className="font-bold uppercase text-primary-950">
             {t("running:description")}
           </h4>