92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { Icon } from 'UI';
|
|
import HealthModal from 'Components/Header/HealthStatus/HealthModal/HealthModal';
|
|
import { lastAskedKey, healthResponseKey } from './const';
|
|
import HealthWidget from "Components/Header/HealthStatus/HealthWidget";
|
|
import { getHealthRequest } from './getHealth'
|
|
|
|
export interface IServiceStats {
|
|
name: 'backendServices' | 'databases' | 'ingestionPipeline' | 'ssl';
|
|
serviceName: string;
|
|
healthOk: boolean;
|
|
subservices: {
|
|
health: boolean;
|
|
details?: {
|
|
errors?: string[];
|
|
version?: string;
|
|
}
|
|
}[]
|
|
}
|
|
|
|
|
|
function HealthStatus() {
|
|
const healthResponseSaved = localStorage.getItem(healthResponseKey) || '{}';
|
|
const [healthResponse, setHealthResponse] = React.useState(JSON.parse(healthResponseSaved));
|
|
const [isError, setIsError] = React.useState(false);
|
|
const [isLoading, setIsLoading] = React.useState(false);
|
|
const lastAskedSaved = localStorage.getItem(lastAskedKey);
|
|
const [lastAsked, setLastAsked] = React.useState(lastAskedSaved);
|
|
const [showModal, setShowModal] = React.useState(false);
|
|
|
|
const getHealth = async () => {
|
|
if (isLoading) return;
|
|
try {
|
|
setIsLoading(true);
|
|
const { healthMap, asked } = await getHealthRequest();
|
|
setHealthResponse(healthMap);
|
|
setLastAsked(asked.toString());
|
|
} catch (e) {
|
|
console.error(e);
|
|
setIsError(true);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
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);
|
|
if (Object.keys(healthResponse).length === 0 || !lastAskedDate || diffInMinutes > 10) {
|
|
void getHealth();
|
|
}
|
|
}, []);
|
|
|
|
const icon = !isError && healthResponse?.overallHealth ? 'pulse' : ('exclamation-circle-fill' as const);
|
|
return (
|
|
<>
|
|
<div className={'relative group h-full hover:bg-figmaColors-secondary-outlined-hover-background'}>
|
|
<div
|
|
className={
|
|
'rounded cursor-pointer p-2 flex items-center'
|
|
}
|
|
>
|
|
<div className={'rounded p-2 border border-light-gray bg-white flex items-center '}>
|
|
<Icon name={icon} size={18} />
|
|
</div>
|
|
</div>
|
|
|
|
<HealthWidget
|
|
healthResponse={healthResponse}
|
|
getHealth={getHealth}
|
|
isLoading={isLoading}
|
|
lastAsked={lastAsked}
|
|
setShowModal={setShowModal}
|
|
isError={isError}
|
|
/>
|
|
</div>
|
|
{showModal ? (
|
|
<HealthModal
|
|
setShowModal={setShowModal}
|
|
healthResponse={healthResponse}
|
|
getHealth={getHealth}
|
|
isLoading={isLoading}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
|
|
export default HealthStatus;
|