diff --git a/src/components/CompletionProviderStatus/CompletionProviderStatus.stories.tsx b/src/components/CompletionProviderStatus/CompletionProviderStatus.stories.tsx index cc8407fd..57b92994 100644 --- a/src/components/CompletionProviderStatus/CompletionProviderStatus.stories.tsx +++ b/src/components/CompletionProviderStatus/CompletionProviderStatus.stories.tsx @@ -28,7 +28,7 @@ Default.args = {}; export const Errored = Template.bind({}); Errored.args = { - forceStatus: 'major', + forceStatus: 'major_outage', }; export const WithSpecifiedProvider = Template.bind({}); @@ -38,6 +38,6 @@ WithSpecifiedProvider.args = { export const ErroredWithSpecifiedProvider = Template.bind({}); ErroredWithSpecifiedProvider.args = { - forceStatus: 'major', + forceStatus: 'major_outage', provider: 'OpenAI', }; diff --git a/src/components/CompletionProviderStatus/CompletionProviderStatus.test.tsx b/src/components/CompletionProviderStatus/CompletionProviderStatus.test.tsx index 856547aa..1141653e 100644 --- a/src/components/CompletionProviderStatus/CompletionProviderStatus.test.tsx +++ b/src/components/CompletionProviderStatus/CompletionProviderStatus.test.tsx @@ -3,27 +3,29 @@ import { render } from '@testing-library/react'; import CompletionProviderStatus from './CompletionProviderStatus'; it('renders CompletionProviderStatus unchanged', () => { - const { container } = render(); + const { container } = render( + + ); expect(container).toMatchSnapshot(); }); it('renders CompletionProviderStatus errored unchanged', () => { const { container } = render( - + ); expect(container).toMatchSnapshot(); }); it('renders CompletionProviderStatus with provider specified unchanged', () => { const { container } = render( - + ); expect(container).toMatchSnapshot(); }); it('renders CompletionProviderStatus errored with provider specified unchanged', () => { const { container } = render( - + ); expect(container).toMatchSnapshot(); }); diff --git a/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx b/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx index 7310ab27..18891ed1 100644 --- a/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx +++ b/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx @@ -1,14 +1,27 @@ import { useEffect, useState } from 'react'; import Tooltip from '../ui/Tooltip'; import Warning from '../icons/Warning'; +import { Tenant } from '@memori.ai/memori-api-client/dist/types'; import { useTranslation } from 'react-i18next'; +type Status = + | 'operational' + | 'degraded_performance' + | 'partial_outage' + | 'major_outage' + | undefined; + export interface Props { - forceStatus?: string; - provider?: 'OpenAI' | string | null; + forceStatus?: Status; + provider?: Tenant['defaultCompletionProvider']; } -const initProviderStatus = (provider?: Props['provider']) => { +const initProviderStatus = ( + provider?: Props['provider'] | 'DEFAULT' +): { + getStatus: () => Promise; + statusPage: string; +} => { switch (provider) { case 'DEFAULT': case 'OpenAI': @@ -18,13 +31,16 @@ const initProviderStatus = (provider?: Props['provider']) => { 'https://status.openai.com/api/v2/summary.json' ); const data = await res.json(); - return data.status.indicator ?? 'none'; + const status = data.components.find( + (component: { name: string }) => component.name === 'API' + )?.status as Status; + return status ?? 'operational'; }, statusPage: 'https://status.openai.com/', }; default: return { - getStatus: async () => 'none', + getStatus: async () => 'operational', statusPage: '', }; } @@ -32,17 +48,20 @@ const initProviderStatus = (provider?: Props['provider']) => { const CompletionProviderStatus = ({ forceStatus, provider }: Props) => { const { t } = useTranslation(); - const [status, setStatus] = useState(forceStatus ?? 'none'); + const [status, setStatus] = useState(forceStatus ?? 'operational'); const providerStatus = initProviderStatus(provider); useEffect(() => { if (forceStatus) return; - providerStatus.getStatus().then(status => setStatus(status)); + providerStatus + .getStatus() + .then(status => setStatus(status)) + .catch(console.log); }, [forceStatus, provider]); - return status !== 'none' ? ( + return status !== 'operational' ? ( `; -exports[`renders CompletionProviderStatus unchanged 1`] = `
`; +exports[`renders CompletionProviderStatus unchanged 1`] = ` +
+
+
+
+

+ completionProviderDown +

+
+
+
+ +
+
+
+`; exports[`renders CompletionProviderStatus with provider specified unchanged 1`] = `
`; diff --git a/src/components/StartPanel/StartPanel.test.tsx b/src/components/StartPanel/StartPanel.test.tsx index 994f3ba9..e09cfbc0 100644 --- a/src/components/StartPanel/StartPanel.test.tsx +++ b/src/components/StartPanel/StartPanel.test.tsx @@ -255,7 +255,7 @@ it('renders StartPanel with completion provider down unchanged', () => { clickedStart={false} onClickStart={() => {}} setShowLoginDrawer={jest.fn()} - _TEST_forceProviderStatus="major" + _TEST_forceProviderStatus="major_outage" /> ); expect(container).toMatchSnapshot(); diff --git a/src/components/StartPanel/StartPanel.tsx b/src/components/StartPanel/StartPanel.tsx index 0610e8fd..d3b79794 100644 --- a/src/components/StartPanel/StartPanel.tsx +++ b/src/components/StartPanel/StartPanel.tsx @@ -17,7 +17,9 @@ import BlockedMemoriBadge from '../BlockedMemoriBadge/BlockedMemoriBadge'; import AI from '../icons/AI'; import Group from '../icons/Group'; import DeepThought from '../icons/DeepThought'; -import CompletionProviderStatus from '../CompletionProviderStatus/CompletionProviderStatus'; +import CompletionProviderStatus, { + Props as CPSProps, +} from '../CompletionProviderStatus/CompletionProviderStatus'; import MapMarker from '../icons/MapMarker'; export interface Props { @@ -37,7 +39,7 @@ export interface Props { clickedStart?: boolean; onClickStart?: () => void; initializeTTS?: () => void; - _TEST_forceProviderStatus?: string; + _TEST_forceProviderStatus?: CPSProps['forceStatus']; isUserLoggedIn?: boolean; user?: User; showLogin?: boolean;