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 = {