111 lines
3.9 KiB
TypeScript
111 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { Icon } from 'UI';
|
|
import ServiceCategory from 'Components/Header/HealthStatus/ServiceCategory';
|
|
import cn from 'classnames';
|
|
import { Divider, Space } from 'antd';
|
|
import VersionTag from 'Components/Header/VersionTag';
|
|
import { IServiceStats } from './HealthStatus';
|
|
|
|
function HealthWidget({
|
|
healthResponse,
|
|
getHealth,
|
|
isLoading,
|
|
lastAsked,
|
|
setShowModal,
|
|
isError,
|
|
}: {
|
|
healthResponse: { overallHealth: boolean; healthMap: Record<string, IServiceStats>, details: Record<string, any> };
|
|
getHealth: Function;
|
|
isLoading: boolean;
|
|
lastAsked: string | null;
|
|
setShowModal: (visible: boolean) => void;
|
|
isError?: boolean;
|
|
}) {
|
|
const [lastAskedDiff, setLastAskedDiff] = React.useState(0);
|
|
const healthOk = healthResponse?.overallHealth;
|
|
|
|
React.useEffect(() => {
|
|
const now = new Date();
|
|
const lastAskedDate = lastAsked ? new Date(parseInt(lastAsked, 10)) : null;
|
|
const diff = lastAskedDate ? now.getTime() - lastAskedDate.getTime() : 0;
|
|
const diffInMinutes = Math.round(diff / 1000 / 60);
|
|
setLastAskedDiff(diffInMinutes);
|
|
}, [lastAsked]);
|
|
|
|
const title = !isError && healthOk ? 'All Systems Operational' : 'Service disruption';
|
|
const icon = !isError && healthOk ? ('check-circle-fill' as const) : ('ic-errors' as const);
|
|
|
|
const problematicServices = Object.values(healthResponse?.healthMap || {}).filter(
|
|
(service: Record<string, any>) => !service.healthOk,
|
|
);
|
|
|
|
return (
|
|
<div className="w-full flex flex-col gap-2 items-center" style={{ minWidth: '200px' }}>
|
|
<div className="self-start mb-2">
|
|
<VersionTag />
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
'gap-2 w-full font-medium flex items-center rounded',
|
|
!isError && healthOk
|
|
? 'color-green'
|
|
: 'color-red',
|
|
)}
|
|
>
|
|
<Icon name={icon} size={16} color={!isError && healthOk ? 'green' : 'red'} />
|
|
<span>{title}</span>
|
|
</div>
|
|
<div className="text-secondary flex w-full justify-between items-center text-sm">
|
|
<span className="color-gray-medium">
|
|
Checked
|
|
{lastAskedDiff}
|
|
min ago.
|
|
</span>
|
|
<div
|
|
className={cn('cursor-pointer', isLoading ? 'animate-spin' : '')}
|
|
onClick={() => getHealth()}
|
|
>
|
|
<Icon name="arrow-repeat" size={16} color="main" />
|
|
</div>
|
|
</div>
|
|
{isError && <div className="text-secondary text-sm">Error getting service health status</div>}
|
|
<Divider style={{ margin: '4px 0px' }} />
|
|
<div className="w-full">
|
|
<div className="font-medium mb-2">Captured</div>
|
|
<div className="grid grid-cols-2">
|
|
<div className="flex flex-col">
|
|
<div className="">{healthResponse.details?.numberOfSessionsCaptured.toLocaleString()}</div>
|
|
<div className="color-gray-medium">Sessions</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="">{healthResponse.details?.numberOfEventCaptured.toLocaleString()}</div>
|
|
<div className="color-gray-medium">Events</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full">
|
|
{!isError && !healthOk ? (
|
|
<>
|
|
<div className="divider w-full border border-b-light-gray my-2" />
|
|
<div className="text-secondary pb-2">
|
|
Observed installation Issue with the following
|
|
</div>
|
|
{problematicServices.map((service) => (
|
|
<React.Fragment key={service.serviceName}>
|
|
<ServiceCategory
|
|
onClick={() => setShowModal(true)}
|
|
healthOk={false}
|
|
name={service.name}
|
|
isSelectable
|
|
noBorder={problematicServices.length === 1}
|
|
/>
|
|
</React.Fragment>
|
|
))}
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default HealthWidget;
|