feat: add mcp status display to frontend
This commit is contained in:
parent
997b85e1ce
commit
e3494ca15f
3 changed files with 24 additions and 1 deletions
|
|
@ -5,7 +5,7 @@ import Image from "next/image";
|
||||||
import { useBoolean } from "@/utils";
|
import { useBoolean } from "@/utils";
|
||||||
|
|
||||||
import { CloseIcon, CloudIcon, CogneeIcon } from "../Icons";
|
import { CloseIcon, CloudIcon, CogneeIcon } from "../Icons";
|
||||||
import { CTAButton, GhostButton, IconButton, Modal } from "../elements";
|
import { CTAButton, GhostButton, IconButton, Modal, StatusDot } from "../elements";
|
||||||
import syncData from "@/modules/cloud/syncData";
|
import syncData from "@/modules/cloud/syncData";
|
||||||
|
|
||||||
interface HeaderProps {
|
interface HeaderProps {
|
||||||
|
|
@ -23,6 +23,11 @@ export default function Header({ user }: HeaderProps) {
|
||||||
setFalse: closeSyncModal,
|
setFalse: closeSyncModal,
|
||||||
} = useBoolean(false);
|
} = useBoolean(false);
|
||||||
|
|
||||||
|
const {
|
||||||
|
value: isMCPStatusOpen,
|
||||||
|
setTrue: setMCPStatusOpen,
|
||||||
|
} = useBoolean(false);
|
||||||
|
|
||||||
const handleDataSyncConfirm = () => {
|
const handleDataSyncConfirm = () => {
|
||||||
syncData()
|
syncData()
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
|
|
@ -39,6 +44,10 @@ export default function Header({ user }: HeaderProps) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-row items-center gap-2.5">
|
<div className="flex flex-row items-center gap-2.5">
|
||||||
|
<Link href="/mcp-status" className="!text-indigo-600 pl-4 pr-4">
|
||||||
|
<StatusDot className="mr-2" isActive={isMCPStatusOpen} />
|
||||||
|
MCP status
|
||||||
|
</Link>
|
||||||
<GhostButton onClick={openSyncModal} className="text-indigo-600 gap-3 pl-4 pr-4">
|
<GhostButton onClick={openSyncModal} className="text-indigo-600 gap-3 pl-4 pr-4">
|
||||||
<CloudIcon />
|
<CloudIcon />
|
||||||
<div>Sync</div>
|
<div>Sync</div>
|
||||||
|
|
|
||||||
13
cognee-frontend/src/ui/elements/StatusDot.tsx
Normal file
13
cognee-frontend/src/ui/elements/StatusDot.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const StatusDot = ({ isActive, className }: { isActive: boolean, className?: string }) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={`inline-block w-3 h-3 rounded-full ${className} ${
|
||||||
|
isActive ? "bg-green-500" : "bg-red-500"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StatusDot;
|
||||||
|
|
@ -8,5 +8,6 @@ export { default as IconButton } from "./IconButton";
|
||||||
export { default as GhostButton } from "./GhostButton";
|
export { default as GhostButton } from "./GhostButton";
|
||||||
export { default as NeutralButton } from "./NeutralButton";
|
export { default as NeutralButton } from "./NeutralButton";
|
||||||
export { default as StatusIndicator } from "./StatusIndicator";
|
export { default as StatusIndicator } from "./StatusIndicator";
|
||||||
|
export { default as StatusDot } from "./StatusDot";
|
||||||
export { default as Accordion } from "./Accordion";
|
export { default as Accordion } from "./Accordion";
|
||||||
export { default as Notebook } from "./Notebook";
|
export { default as Notebook } from "./Notebook";
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue