Resfresh env on action (#1093)

* Refetch environment and component when action is triggered * Allow restarting reconciling resource
equinor · Sep 20, 2024 · 1c9b27f · 1c9b27f
1 parent adaa3b8
commit 1c9b27f
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 29 deletions.
diff --git a/src/components/page-active-component/active-component-overview.tsx b/src/components/page-active-component/active-component-overview.tsx
@@ -120,6 +120,7 @@ export const ActiveComponentOverview: FunctionComponent<{
                   envName={envName}
                   componentName={componentName}
                   oauth2={component.oauth2}
+                  refetch={refetch}
                 />
               )}
 

diff --git a/src/components/page-active-component/active-component-toolbar.tsx b/src/components/page-active-component/active-component-toolbar.tsx
@@ -32,7 +32,7 @@ export function ActiveComponentToolbar({
   const [scaleTrigger, scaleState] = useScaleComponentMutation();
   const [stopTrigger, stopState] = useStopComponentMutation();
   const [restartTrigger, restartState] = useRestartComponentMutation();
-  const startRefetch = useDurationInterval(2_000, 10_000, refetch);
+  const startRefetch = useDurationInterval(refetch);
 
   const isStopped = component?.status === 'Stopped';
   const isWorking =

diff --git a/src/components/page-active-component/component-status.tsx b/src/components/page-active-component/component-status.tsx
@@ -23,7 +23,7 @@ export function ComponentStatus({
   component,
 }: Props) {
   const [resetTrigger, resetState] = useResetScaledComponentMutation();
-  const startRefetch = useDurationInterval(2_000, 10_000, refetch);
+  const startRefetch = useDurationInterval(refetch);
   const onReset = handlePromiseWithToast(async () => {
     await resetTrigger({
       appName,

diff --git a/src/components/page-active-component/oauth-service.tsx b/src/components/page-active-component/oauth-service.tsx
@@ -1,6 +1,5 @@
 import { Accordion, Typography } from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
-import type { FunctionComponent } from 'react';
 
 import { OAuthToolbar } from './oauth-toolbar';
 
@@ -9,12 +8,20 @@ import { getOAuthReplicaUrl } from '../../utils/routing';
 import { ReplicaList } from '../replica-list';
 import { ComponentStatusBadge } from '../status-badges';
 
-export const OAuthService: FunctionComponent<{
+type Props = {
   appName: string;
   envName: string;
   componentName: string;
   oauth2: OAuth2AuxiliaryResource;
-}> = ({ appName, envName, componentName, oauth2 }) => (
+  refetch: () => unknown;
+};
+export const OAuthService = ({
+  appName,
+  envName,
+  componentName,
+  oauth2,
+  refetch,
+}: Props) => (
   <Accordion className="accordion elevated" chevronPosition="right">
     <Accordion.Item isExpanded>
       <Accordion.Header>
@@ -37,6 +44,7 @@ export const OAuthService: FunctionComponent<{
                 envName={envName}
                 componentName={componentName}
                 oauth2={oauth2}
+                refetch={refetch}
               />
             </span>
           </div>

diff --git a/src/components/page-active-component/oauth-toolbar.tsx b/src/components/page-active-component/oauth-toolbar.tsx
@@ -1,50 +1,51 @@
 import { Button, CircularProgress } from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
 
+import { useDurationInterval } from '../../effects/use-interval';
 import {
   type OAuth2AuxiliaryResource,
   useRestartOAuthAuxiliaryResourceMutation,
 } from '../../store/radix-api';
-import { getFetchErrorMessage } from '../../store/utils';
-import { errorToast } from '../global-top-nav/styled-toaster';
+import { handlePromiseWithToast } from '../global-top-nav/styled-toaster';
 
 type Props = {
   appName: string;
   envName: string;
   componentName: string;
   oauth2?: OAuth2AuxiliaryResource;
+  refetch: () => unknown;
 };
 export function OAuthToolbar({
   appName,
   envName,
   componentName,
   oauth2,
+  refetch,
 }: Props) {
   const [trigger, { isLoading }] = useRestartOAuthAuxiliaryResourceMutation();
-
+  const startRefetch = useDurationInterval(refetch);
+  console.log({ oauth2, isLoading });
   const isRestartEnabled =
-    oauth2?.deployment?.status === 'Consistent' &&
-    oauth2?.deployment?.replicaList?.length > 0 &&
-    !isLoading;
+    oauth2?.deployment?.status !== 'Stopped' || isLoading;
 
   const restartInProgress =
     isLoading || oauth2?.deployment?.status === 'Reconciling';
 
+  const onRestart = handlePromiseWithToast(
+    async () => {
+      await trigger({ appName, envName, componentName }).unwrap();
+      startRefetch();
+    },
+    'Restaring OAuth2 Service',
+    'Failed to restart Oauth2 Service'
+  );
   return (
     <div className="grid grid--gap-small">
       <div className="grid grid--gap-small grid--auto-columns">
         {restartInProgress && <CircularProgress size={32} />}
 
         <Button
-          onClick={async () => {
-            try {
-              await trigger({ appName, envName, componentName }).unwrap();
-            } catch (error) {
-              errorToast(
-                `Failed to restart OAUTH. ${getFetchErrorMessage(error)}`
-              );
-            }
-          }}
+          onClick={onRestart}
           disabled={!isRestartEnabled}
           variant="outlined"
         >

diff --git a/src/components/page-environment/environment-overview.tsx b/src/components/page-environment/environment-overview.tsx
@@ -143,7 +143,7 @@ export const EnvironmentOverview: FunctionComponent<{
                 environment={environment}
                 startEnabled
                 stopEnabled
-                fethcEnvironment={refetchEnv}
+                refetch={refetchEnv}
               />
               <Typography variant="h4">Overview</Typography>
               <div className="grid grid--gap-medium grid--overview-columns">

diff --git a/src/components/page-environment/environment-toolbar.tsx b/src/components/page-environment/environment-toolbar.tsx
@@ -2,6 +2,7 @@ import { Button, CircularProgress } from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
 import type { FunctionComponent } from 'react';
 
+import { useDurationInterval } from '../../effects/use-interval';
 import { type Environment, radixApi } from '../../store/radix-api';
 import { getFetchErrorMessage } from '../../store/utils';
 import { errorToast } from '../global-top-nav/styled-toaster';
@@ -11,14 +12,15 @@ export const EnvironmentToolbar: FunctionComponent<{
   environment: Readonly<Environment>;
   startEnabled?: boolean;
   stopEnabled?: boolean;
-  fethcEnvironment?: () => Promise<unknown>;
+  refetch?: () => unknown;
 }> = ({
   appName,
   environment: { activeDeployment, name },
   startEnabled,
   stopEnabled,
-  fethcEnvironment,
+  refetch,
 }) => {
+  const refetchEnv = useDurationInterval(refetch);
   const [start, startState] = radixApi.endpoints.startEnvironment.useMutation();
   const [stop, stopState] = radixApi.endpoints.stopEnvironment.useMutation();
   const [restart, restartState] =
@@ -63,7 +65,7 @@ export const EnvironmentToolbar: FunctionComponent<{
             onClick={async () => {
               try {
                 await start({ appName, envName: name }).unwrap();
-                fethcEnvironment?.();
+                refetchEnv();
               } catch (error) {
                 errorToast(
                   `Failed to start environment. ${getFetchErrorMessage(error)}`
@@ -80,7 +82,7 @@ export const EnvironmentToolbar: FunctionComponent<{
             onClick={async () => {
               try {
                 await stop({ appName, envName: name }).unwrap();
-                fethcEnvironment?.();
+                refetchEnv();
               } catch (error) {
                 errorToast(
                   `Failed to stop environment. ${getFetchErrorMessage(error)}`
@@ -96,7 +98,7 @@ export const EnvironmentToolbar: FunctionComponent<{
           onClick={async () => {
             try {
               await restart({ appName, envName: name }).unwrap();
-              fethcEnvironment?.();
+              refetchEnv();
             } catch (error) {
               errorToast(
                 `Failed to restart environment. ${getFetchErrorMessage(error)}`

diff --git a/src/effects/use-interval.ts b/src/effects/use-interval.ts
@@ -19,9 +19,9 @@ export function useInterval(callback: () => void, delay?: number): void {
 }
 
 export function useDurationInterval(
-  intervalMs: number,
-  durationMs: number,
-  callback: () => unknown
+  callback: () => unknown,
+  intervalMs = 2_000,
+  durationMs = 15_000
 ) {
   const [startAt, setStartAt] = useState<number>(0);