diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx index 88d00d3b7..1101a3f63 100644 --- a/web/src/components/Statusbar.tsx +++ b/web/src/components/Statusbar.tsx @@ -43,7 +43,13 @@ export default function Statusbar() { useEffect(() => { clearMessages("stats"); potentialProblems.forEach((problem) => { - addMessage("stats", problem.text, problem.color); + addMessage( + "stats", + problem.text, + problem.color, + undefined, + problem.relevantLink, + ); }); }, [potentialProblems, addMessage, clearMessages]); @@ -110,14 +116,25 @@ export default function Statusbar() { ) : ( Object.entries(messages).map(([key, messageArray]) => (
- {messageArray.map(({ id, text, color }: StatusMessage) => ( -
- - {text} -
- ))} + {messageArray.map(({ id, text, color, link }: StatusMessage) => { + const message = ( +
+ + {text} +
+ ); + + if (link) { + return {message}; + } else { + return message; + } + })}
)) )} diff --git a/web/src/context/statusbar-provider.tsx b/web/src/context/statusbar-provider.tsx index 6d17fa4de..60954f7be 100644 --- a/web/src/context/statusbar-provider.tsx +++ b/web/src/context/statusbar-provider.tsx @@ -10,6 +10,7 @@ export type StatusMessage = { id: string; text: string; color?: string; + link?: string; }; export type StatusMessagesState = { @@ -27,6 +28,7 @@ type StatusBarMessagesContextValue = { message: string, color?: string, messageId?: string, + link?: string, ) => string; removeMessage: (key: string, messageId: string) => void; clearMessages: (key: string) => void; @@ -43,14 +45,20 @@ export function StatusBarMessagesProvider({ const messages = useMemo(() => messagesState, [messagesState]); const addMessage = useCallback( - (key: string, message: string, color?: string, messageId?: string) => { + ( + key: string, + message: string, + color?: string, + messageId?: string, + link?: string, + ) => { const id = messageId || Date.now().toString(); const msgColor = color || "text-danger"; setMessagesState((prevMessages) => ({ ...prevMessages, [key]: [ ...(prevMessages[key] || []), - { id, text: message, color: msgColor }, + { id, text: message, color: msgColor, link }, ], })); return id; diff --git a/web/src/hooks/use-stats.ts b/web/src/hooks/use-stats.ts index 1cb30dbb7..103a5d5db 100644 --- a/web/src/hooks/use-stats.ts +++ b/web/src/hooks/use-stats.ts @@ -53,6 +53,7 @@ export default function useStats(stats: FrigateStats | undefined) { problems.push({ text: `${capitalizeFirstLetter(name.replaceAll("_", " "))} is offline`, color: "text-danger", + relevantLink: "logs", }); } }); diff --git a/web/src/types/stats.ts b/web/src/types/stats.ts index 59fb6f69d..2cf277f3d 100644 --- a/web/src/types/stats.ts +++ b/web/src/types/stats.ts @@ -62,6 +62,7 @@ export type StorageStats = { export type PotentialProblem = { text: string; color: string; + relevantLink?: string; }; export type Vainfo = {