92 lines
3.4 KiB
TypeScript
92 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { Icon, Tooltip } from 'UI';
|
|
import cn from 'classnames';
|
|
import HealthModal from 'Components/Header/HealthStatus/HealthModal/HealthModal';
|
|
|
|
function HealthStatus() {
|
|
const [healthOk, setHealth] = React.useState(false);
|
|
|
|
const icon = healthOk ? 'pulse' : ('exclamation-circle-fill' as const);
|
|
return (
|
|
<div className={'relative group h-full'}>
|
|
<div
|
|
className={
|
|
'rounded cursor-pointer p-2 flex items-center hover:bg-figmaColors-secondary-outlined-hover-background'
|
|
}
|
|
>
|
|
<div className={'rounded p-2 border border-light-gray bg-white flex items-center '}>
|
|
<Icon name={icon} size={18} />
|
|
</div>
|
|
</div>
|
|
|
|
<HealthMenu healthOk={healthOk} setHealth={setHealth} />
|
|
<HealthModal />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HealthMenu({ healthOk, setHealth }: { healthOk: boolean; setHealth: any }) {
|
|
const title = healthOk ? 'All Systems Operational' : 'Service disruption';
|
|
const icon = healthOk ? ('check-circle-fill' as const) : ('exclamation-circle-fill' as const);
|
|
return (
|
|
<div
|
|
style={{ width: 220, top: '100%', right: '-30%', height: '110%' }}
|
|
className={'absolute group invisible group-hover:visible pt-4'}
|
|
>
|
|
<div
|
|
className={
|
|
'w-full flex flex-col border border-light-gray gap-2 rounded items-center p-4 bg-white'
|
|
}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'p-2 gap-2 w-full font-semibold flex items-center rounded',
|
|
healthOk
|
|
? 'color-green bg-figmaColors-secondary-outlined-hover-background'
|
|
: 'bg-red-lightest'
|
|
)}
|
|
>
|
|
<Icon name={icon} size={16} color={'green'} />
|
|
<span>{title}</span>
|
|
</div>
|
|
<div className={'text-secondary flex w-full justify-between items-center text-sm'}>
|
|
<span>Last checked 22 mins. ago </span>
|
|
<div className={'cursor-pointer'} onClick={() => setHealth(!healthOk)}>
|
|
<Icon name={'arrow-repeat'} size={16} color={'main'} />
|
|
</div>
|
|
</div>
|
|
<div className={'divider w-full border border-b-light-gray'} />
|
|
|
|
<div className={'w-full'}>
|
|
<div className="flex items-center justify-between mt-2">
|
|
<div className="py-1 px-2 font-medium">Version</div>
|
|
<div className="code-font text-black rounded text-base bg-active-blue px-2 py-1 whitespace-nowrap overflow-hidden text-clip">
|
|
123 123
|
|
</div>
|
|
</div>
|
|
|
|
{healthOk ? (
|
|
<>
|
|
<div className="flex items-center justify-between mt-2">
|
|
<div className="py-1 px-2 font-medium">Sessions</div>
|
|
<div className="code-font text-black rounded text-base bg-active-blue px-2 py-1 whitespace-nowrap overflow-hidden text-clip">
|
|
10 000
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between mt-2">
|
|
<div className="py-1 px-2 font-medium">Events</div>
|
|
<div className="code-font text-black rounded text-base bg-active-blue px-2 py-1 whitespace-nowrap overflow-hidden text-clip">
|
|
90 000
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div>Observed installation Issue with the following</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default HealthStatus;
|