change(ui): health modal changes
This commit is contained in:
Shekar Siri
parent
18316b3ab9
commit
6eea8f68fb
3 changed files with 93 additions and 69 deletions
|
|
@ -60,26 +60,21 @@ function HealthStatus() {
|
|||
const icon = !isError && healthResponse?.overallHealth ? 'pulse' : ('exclamation-circle-fill' as const);
|
||||
return (
|
||||
<>
|
||||
<Popover content={
|
||||
<HealthWidget
|
||||
healthResponse={healthResponse}
|
||||
getHealth={getHealth}
|
||||
isLoading={isLoading}
|
||||
lastAsked={lastAsked}
|
||||
setShowModal={setShowModal}
|
||||
isError={isError}
|
||||
/>
|
||||
}>
|
||||
<Popover
|
||||
content={
|
||||
<HealthWidget
|
||||
healthResponse={healthResponse}
|
||||
getHealth={getHealth}
|
||||
isLoading={isLoading}
|
||||
lastAsked={lastAsked}
|
||||
setShowModal={setShowModal}
|
||||
isError={isError}
|
||||
/>
|
||||
}
|
||||
open={true}
|
||||
placement="topRight"
|
||||
>
|
||||
<Button icon={<ExclamationCircleOutlined />}></Button>
|
||||
{/*<div*/}
|
||||
{/* className={*/}
|
||||
{/* 'rounded cursor-pointer flex items-center h-full'*/}
|
||||
{/* }*/}
|
||||
{/*>*/}
|
||||
{/* <div className={'rounded p-2 border border-light-gray bg-white flex items-center'}>*/}
|
||||
{/* <Icon name={icon} size={18} />*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
</Popover>
|
||||
{showModal ? (
|
||||
<HealthModal
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ import { Icon } from 'UI';
|
|||
import ServiceCategory from 'Components/Header/HealthStatus/ServiceCategory';
|
||||
import cn from 'classnames';
|
||||
import { IServiceStats } from './HealthStatus';
|
||||
import { Divider, Space } from 'antd';
|
||||
|
||||
const Logo = require('../../../svg/logo-gray.svg').default;
|
||||
|
||||
function HealthWidget({
|
||||
healthResponse,
|
||||
|
|
@ -38,63 +41,68 @@ function HealthWidget({
|
|||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
// style={{ width: 220, right: '-30%', height: '110%' }}
|
||||
// className={'absolute group'}
|
||||
>
|
||||
<div className='w-full flex flex-col gap-2 items-center' style={{ minWidth: '200px'}}>
|
||||
<div className='self-start mb-2'>
|
||||
<Space>
|
||||
<img src={Logo} width={20} />
|
||||
<div>{`v${window.env.VERSION}`}</div>
|
||||
</Space>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
'w-full flex flex-col gap-2 items-center'
|
||||
}
|
||||
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(
|
||||
'p-2 gap-2 w-full font-semibold flex items-center rounded',
|
||||
!isError && healthOk
|
||||
? 'color-green bg-figmaColors-secondary-outlined-hover-background'
|
||||
: 'bg-red-lightest color-red'
|
||||
)}
|
||||
className={cn('cursor-pointer', isLoading ? 'animate-spin' : '')}
|
||||
onClick={() => getHealth()}
|
||||
>
|
||||
<Icon name={icon} size={16} color={!isError && healthOk ? 'green': 'red'} />
|
||||
<span>{title}</span>
|
||||
<Icon name={'arrow-repeat'} size={16} color={'main'} />
|
||||
</div>
|
||||
<div className={'text-secondary flex w-full justify-between items-center text-sm'}>
|
||||
<span>Last checked {lastAskedDiff}min ago.</span>
|
||||
<div
|
||||
className={cn('cursor-pointer', isLoading ? 'animate-spin' : '')}
|
||||
onClick={() => getHealth()}
|
||||
>
|
||||
<Icon name={'arrow-repeat'} size={16} color={'main'} />
|
||||
</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>
|
||||
{isError && <div className={'text-secondary text-sm'}>Error getting service health status</div>}
|
||||
|
||||
<div className={'w-full'}>
|
||||
<div className={'font-semibold'}>Captured</div>
|
||||
<div>{healthResponse.details?.numberOfSessionsCaptured.toLocaleString()} Sessions</div>
|
||||
<div>{healthResponse.details?.numberOfEventCaptured.toLocaleString()} Events</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>
|
||||
<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>
|
||||
);
|
||||
|
|
|
|||
21
frontend/app/svg/logo-gray.svg
Normal file
21
frontend/app/svg/logo-gray.svg
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<svg viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Frame" clip-path="url(#clip0_200_10536)">
|
||||
<g id="logos">
|
||||
<g id="1">
|
||||
<g id="Group">
|
||||
<path id="outline"
|
||||
d="M13.6088 9.87453L2.00012 3.08069V16.6684L13.6088 9.87453ZM15.1929 8.47016C15.6921 8.75846 16 9.29429 16 9.87453C16 10.4548 15.6921 10.9906 15.1929 11.2789L2.46615 18.7285C1.42609 19.3379 0 18.6418 0 17.3242V2.42491C0 1.1073 1.42609 0.411173 2.46615 1.02054L15.1929 8.47016Z"
|
||||
fill="#595959"/>
|
||||
<path id="inner-play"
|
||||
d="M9.05095 9.55353L4.55169 6.99617C4.3744 6.8954 4.149 6.95743 4.04823 7.13471C4.01662 7.19033 4 7.2532 4 7.31717V12.4319C4 12.6358 4.16531 12.8011 4.36923 12.8011C4.4332 12.8011 4.49607 12.7845 4.55169 12.7529L9.05095 10.1955C9.22823 10.0948 9.29026 9.86936 9.18949 9.69208C9.15663 9.63426 9.10876 9.5864 9.05095 9.55353Z"
|
||||
fill="#595959"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_200_10536">
|
||||
<rect width="16" height="18.1538" fill="white" transform="translate(0 0.797607)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Add table
Reference in a new issue