Added setup hints

danyi1212 · Aug 17, 2024 · 8ff7edd · 8ff7edd
1 parent 621580b
commit 8ff7edd
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,22 @@ docker run -p 8555:8555 --name celery-insights ghcr.io/danyi1212/celery-insights
 
 Next, navigate to http://localhost:8555/ and begin the welcome tour.
 
+### Enabling Celery Events
+
+Celery Insights relies on Celery events to monitor your Celery cluster.
+
+The recommended configuration for using Celery Insights are:
+```python
+app = Celery("myapp")
+app.conf.worker_send_task_events = True  # Enables task events
+app.conf.task_send_sent_event = True  # Enables sent events
+app.conf.task_track_started = True  # (opt) Update task result state to STARTED
+app.conf.result_extended = True  # (opt) Store args and kwargs in the result
+```
+Other events-related configurations should be left as default.
+
+For more information on Celery events configurations, please refer to the [Celery documentation](https://docs.celeryq.dev/en/stable/userguide/configuration.html#events).
+
 ### Advanced setup
 
 Celery Insights comes pre-configured for localhost Redis as Result Backend and RabbitMQ as Broker.

diff --git a/frontend/src/components/common/CodeBlock.tsx b/frontend/src/components/common/CodeBlock.tsx
@@ -4,15 +4,11 @@ import { PrismLight as SyntaxHighlighter, SyntaxHighlighterProps } from "react-s
 import darkStyle from "react-syntax-highlighter/dist/esm/styles/prism/material-dark"
 import lightStyle from "react-syntax-highlighter/dist/esm/styles/prism/material-light"
 
-interface CodeBlockProps extends Omit<SyntaxHighlighterProps, "children"> {
-    code: string
-}
-
-const CodeBlock: React.FC<CodeBlockProps> = ({ code, ...props }) => {
+const CodeBlock: React.FC<SyntaxHighlighterProps> = ({ children, ...props }) => {
     const theme = useTheme()
     return (
         <SyntaxHighlighter style={theme.palette.mode === "dark" ? darkStyle : lightStyle} {...props}>
-            {code}
+            {children}
         </SyntaxHighlighter>
     )
 }

diff --git a/frontend/src/components/task/RecentTasksPanel.tsx b/frontend/src/components/task/RecentTasksPanel.tsx
@@ -1,9 +1,12 @@
 import AnimatedList from "@components/common/AnimatedList"
 import AnimatedListItem from "@components/common/AnimatedListItem"
+import CodeBlock from "@components/common/CodeBlock"
 import Panel, { PanelProps } from "@components/common/Panel"
 import TaskAvatar from "@components/task/TaskAvatar"
 import ReadMoreIcon from "@mui/icons-material/ReadMore"
+import Box from "@mui/material/Box"
 import Button from "@mui/material/Button"
+import Link from "@mui/material/Link"
 import ListItemAvatar from "@mui/material/ListItemAvatar"
 import ListItemButton from "@mui/material/ListItemButton"
 import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction"
@@ -13,13 +16,13 @@ import Typography from "@mui/material/Typography"
 import { useStateStore } from "@stores/useStateStore"
 import { format } from "date-fns"
 import React, { useCallback } from "react"
-import { Link as RouterLink, Link } from "react-router-dom"
+import { Link as RouterLink } from "react-router-dom"
 
 const RecentTaskListItem: React.FC<{ taskId: string }> = ({ taskId }) => {
     const task = useStateStore(useCallback((store) => store.tasks.get(taskId), [taskId]))
     return (
         <AnimatedListItem disablePadding>
-            <ListItemButton component={Link} to={`/tasks/${taskId}`}>
+            <ListItemButton component={RouterLink} to={`/tasks/${taskId}`}>
                 <ListItemAvatar>
                     <TaskAvatar taskId={taskId} type={task?.type} status={task?.state} disableLink />
                 </ListItemAvatar>
@@ -57,9 +60,35 @@ const RecentTasksPanel: React.FC<Omit<PanelProps, "title">> = (props) => {
                     ))}
                 </AnimatedList>
             ) : (
-                <Typography variant="h3" align="center" my={5}>
-                    No recent tasks
-                </Typography>
+                <Box textAlign="center" my={5}>
+                    <Typography variant="h4" gutterBottom>
+                        No recent tasks
+                    </Typography>
+                    <span>Make sure you have Celery Events enabled:</span>
+                    <Box maxWidth="30em" mx="auto">
+                        <CodeBlock language="python">
+                            {[
+                                'app = Celery("myapp")',
+                                "app.conf.worker_send_task_events = True",
+                                "app.conf.task_send_sent_event = True",
+                                "app.conf.task_track_started = True",
+                                "app.conf.result_extended = True",
+                                "app.conf.enable_utc = True",
+                            ].join("\n")}
+                        </CodeBlock>
+                    </Box>
+                    <span>
+                        For more information, see the{" "}
+                        <Link
+                            href="https://github.com/danyi1212/celery-insights?tab=readme-ov-file#enabling-celery-events"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            Installation docs
+                        </Link>
+                        .
+                    </span>
+                </Box>
             )}
         </Panel>
     )

diff --git a/frontend/src/components/task/alerts/ExceptionAlert.tsx b/frontend/src/components/task/alerts/ExceptionAlert.tsx
@@ -70,7 +70,7 @@ const ExceptionTraceback: React.FC<ExceptionTracebackProps> = ({ exception, trac
                         Traceback
                     </Button>
                     <Collapse in={expanded} unmountOnExit>
-                        <CodeBlock language="python" code={traceback} />
+                        <CodeBlock language="python">{traceback}</CodeBlock>
                     </Collapse>
                 </>
             )}

diff --git a/frontend/src/components/worker/WorkersSummaryStack.tsx b/frontend/src/components/worker/WorkersSummaryStack.tsx
@@ -23,9 +23,12 @@ const WorkersSummaryStack: React.FC = () => {
                     ))}
                 </Stack>
             ) : (
-                <Typography variant="h4" align="center" my={5}>
-                    No online workers
-                </Typography>
+                <Box textAlign="center" my={5}>
+                    <Typography variant="h4" gutterBottom>
+                        No online workers
+                    </Typography>
+                    <span>Start a Celery worker to see it here</span>
+                </Box>
             )}
         </Box>
     )

diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -21,6 +21,7 @@ aiopath = "^0"
 pydantic = "^2"
 pydantic-settings = "^2"
 colorlog = "*"
+redis = "^5.0.8"
 
 [tool.poetry.group.all]
 optional = true

diff --git a/test_project/producer.py b/test_project/producer.py
@@ -31,8 +31,7 @@ async def main():
     stop_signal = asyncio.Event()
 
     logger.info("Starting producer...")
-    async with asyncio.TaskGroup() as tg:
-        tg.create_task(timer(10, lambda: publish(order_workflow.si()), stop_signal))
+    await timer(10, lambda: publish(order_workflow.si()), stop_signal)
 
 
 if __name__ == "__main__":