refactor: completion provider status from openai selecting only API c…

…omponent
memori-ai · Jun 21, 2024 · 36f37f0 · 36f37f0
1 parent bf398fb
commit 36f37f0
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 18 deletions.
diff --git 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
@@ -3,27 +3,29 @@ import { render } from '@testing-library/react';
 import CompletionProviderStatus from './CompletionProviderStatus';
 
 it('renders CompletionProviderStatus unchanged', () => {
-  const { container } = render(<CompletionProviderStatus forceStatus="none" />);
+  const { container } = render(
+    <CompletionProviderStatus forceStatus="major_outage" />
+  );
   expect(container).toMatchSnapshot();
 });
 
 it('renders CompletionProviderStatus errored unchanged', () => {
   const { container } = render(
-    <CompletionProviderStatus forceStatus="major" />
+    <CompletionProviderStatus forceStatus="major_outage" />
   );
   expect(container).toMatchSnapshot();
 });
 
 it('renders CompletionProviderStatus with provider specified unchanged', () => {
   const { container } = render(
-    <CompletionProviderStatus provider="OpenAI" forceStatus="none" />
+    <CompletionProviderStatus provider="OpenAI" forceStatus="operational" />
   );
   expect(container).toMatchSnapshot();
 });
 
 it('renders CompletionProviderStatus errored with provider specified unchanged', () => {
   const { container } = render(
-    <CompletionProviderStatus provider="OpenAI" forceStatus="major" />
+    <CompletionProviderStatus provider="OpenAI" forceStatus="major_outage" />
   );
   expect(container).toMatchSnapshot();
 });
diff --git 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<Status>;
+  statusPage: string;
+} => {
   switch (provider) {
     case 'DEFAULT':
     case 'OpenAI':
@@ -18,31 +31,37 @@ 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: '',
       };
   }
 };
 
 const CompletionProviderStatus = ({ forceStatus, provider }: Props) => {
   const { t } = useTranslation();
-  const [status, setStatus] = useState(forceStatus ?? 'none');
+  const [status, setStatus] = useState<Status>(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' ? (
     <Tooltip
       className="memori--completion-provider-status--tooltip"
       align="topLeft"

diff --git a/src/components/CompletionProviderStatus/__snapshots__/CompletionProviderStatus.test.tsx.snap b/src/components/CompletionProviderStatus/__snapshots__/CompletionProviderStatus.test.tsx.snap
@@ -77,6 +77,38 @@ exports[`renders CompletionProviderStatus errored with provider specified unchan
 </div>
 `;
 
-exports[`renders CompletionProviderStatus unchanged 1`] = `<div />`;
+exports[`renders CompletionProviderStatus unchanged 1`] = `
+<div>
+  <div
+    class="memori-tooltip memori-tooltip--align-topLeft memori--completion-provider-status--tooltip"
+  >
+    <div
+      class="memori-tooltip--content"
+    >
+      <div>
+        <p>
+          completionProviderDown
+        </p>
+      </div>
+    </div>
+    <div
+      class="memori-tooltip--trigger"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori--completion-provider-status--icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
 
 exports[`renders CompletionProviderStatus with provider specified unchanged 1`] = `<div />`;
diff --git 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
@@ -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;