feat: add tasks page (#692)

apps/nextjs/src/app/[locale]/manage/layout.tsx

@@ -14,6 +14,7 @@ import {
   IconMailForward,
   IconPlug,
   IconQuestionMark,
+  IconReport,
   IconSettings,
   IconTool,
   IconUser,
@@ -86,6 +87,11 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
           icon: IconLogs,
           href: "/manage/tools/logs",
         },
+        {
+          label: t("items.tools.items.tasks"),
+          icon: IconReport,
+          href: "/manage/tools/tasks",
+        },
       ],
     },
     {

apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import React from "react";
+import { ActionIcon, Badge, Card, Group, Stack, Text } from "@mantine/core";
+import { useListState } from "@mantine/hooks";
+import { IconPlayerPlay } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useTimeAgo } from "@homarr/common";
+import type { TaskStatus } from "@homarr/cron-job-status";
+import type { TranslationKeys } from "@homarr/translation";
+import { useScopedI18n } from "@homarr/translation/client";
+
+interface JobsListProps {
+  initialJobs: RouterOutputs["cronJobs"]["getJobs"];
+}
+
+interface JobState {
+  job: JobsListProps["initialJobs"][number];
+  status: TaskStatus | null;
+}
+
+export const JobsList = ({ initialJobs }: JobsListProps) => {
+  const t = useScopedI18n("management.page.tool.tasks");
+  const [jobs, handlers] = useListState<JobState>(
+    initialJobs.map((job) => ({
+      job,
+      status: null,
+    })),
+  );
+  clientApi.cronJobs.subscribeToStatusUpdates.useSubscription(undefined, {
+    onData: (data) => {
+      const jobByName = jobs.find((job) => job.job.name === data.name);
+      if (!jobByName) {
+        return;
+      }
+      handlers.applyWhere(
+        (job) => job.job.name === data.name,
+        (job) => ({ ...job, status: data }),
+      );
+    },
+  });
+  const { mutateAsync } = clientApi.cronJobs.triggerJob.useMutation();
+  const handleJobTrigger = React.useCallback(
+    async (job: JobState) => {
+      if (job.status?.status === "running") {
+        return;
+      }
+      await mutateAsync(job.job.name);
+    },
+    [mutateAsync],
+  );
+  return (
+    <Stack>
+      {jobs.map((job) => (
+        <Card key={job.job.name}>
+          <Group justify={"space-between"} gap={"md"}>
+            <Stack gap={0}>
+              <Group>
+                <Text>{t(`${job.job.name}.label` as TranslationKeys)}</Text>
+                {job.status?.status === "idle" && <Badge variant="default">{t("status.idle")}</Badge>}
+                {job.status?.status === "running" && <Badge color="green">{t("status.running")}</Badge>}
+                {job.status?.lastExecutionStatus === "error" && <Badge color="red">{t("status.error")}</Badge>}
+              </Group>
+              {job.status && <TimeAgo timestamp={job.status.lastExecutionTimestamp} />}
+            </Stack>
+
+            <ActionIcon
+              onClick={() => handleJobTrigger(job)}
+              disabled={job.status?.status === "running"}
+              variant={"default"}
+              size={"xl"}
+              radius={"xl"}
+            >
+              <IconPlayerPlay stroke={1.5} />
+            </ActionIcon>
+          </Group>
+        </Card>
+      ))}
+    </Stack>
+  );
+};
+
+const TimeAgo = ({ timestamp }: { timestamp: string }) => {
+  const timeAgo = useTimeAgo(new Date(timestamp));
+
+  return (
+    <Text size={"sm"} c={"dimmed"}>
+      {timeAgo}
+    </Text>
+  );
+};

apps/nextjs/src/app/[locale]/manage/tools/tasks/page.tsx

@@ -0,0 +1,25 @@
+import { Box, Title } from "@mantine/core";
+
+import { api } from "@homarr/api/server";
+import { getScopedI18n } from "@homarr/translation/server";
+
+import { createMetaTitle } from "~/metadata";
+import { JobsList } from "./_components/jobs-list";
+
+export async function generateMetadata() {
+  const t = await getScopedI18n("management");
+
+  return {
+    title: createMetaTitle(t("metaTitle")),
+  };
+}
+
+export default async function TasksPage() {
+  const jobs = await api.cronJobs.getJobs();
+  return (
+    <Box>
+      <Title mb={"md"}>Tasks</Title>
+      <JobsList initialJobs={jobs} />
+    </Box>
+  );
+}