fix(md): fetch raw delivery config via graphql (#9537)

* chore(md): updated schema * fix(md): fetch raw config via grahpql
spinnaker · Jul 30, 2021 · 1ca3549 · 1ca3549
1 parent 2e62f34
commit 1ca3549
Show file tree

Hide file tree

Showing 7 changed files with 777 additions and 781 deletions.
diff --git a/packages/core/src/managed/ManagedReader.ts b/packages/core/src/managed/ManagedReader.ts
@@ -90,10 +90,6 @@ export class ManagedReader {
     return REST('/managed/application').path(app).path('config').headers({ Accept: 'application/x-yaml' }).get();
   }
 
-  public static getRawDeliveryConfig(app: string): PromiseLike<string> {
-    return REST('/managed/application').path(app).path('config', 'raw').headers({ Accept: 'application/x-yaml' }).get();
-  }
-
   public static getEnvironmentsSummary(app: string): PromiseLike<IManagedApplicationSummary> {
     return REST('/managed/application')
       .path(app)

diff --git a/packages/core/src/managed/config/Configuration.tsx b/packages/core/src/managed/config/Configuration.tsx
@@ -5,7 +5,11 @@ import { Illustration } from '@spinnaker/presentation';
 
 import { ApplicationQueryError } from '../ApplicationQueryError';
 import { DeliveryConfig } from './DeliveryConfig';
-import { useFetchApplicationManagementStatusQuery, useToggleManagementMutation } from '../graphql/graphql-sdk';
+import {
+  FetchApplicationManagementDataDocument,
+  useFetchApplicationManagementDataQuery,
+  useToggleManagementMutation,
+} from '../graphql/graphql-sdk';
 import { showModal, useApplicationContextSafe } from '../../presentation';
 import { ActionModal, IArtifactActionModalProps } from '../utils/ActionModal';
 import { MODAL_MAX_WIDTH, spinnerProps } from '../utils/defaults';
@@ -28,20 +32,42 @@ const managementStatusToContent = {
 };
 
 export const Configuration = () => {
+  const appName = useApplicationContextSafe().name;
+  const { data, error, loading } = useFetchApplicationManagementDataQuery({ variables: { appName } });
+  const logError = useLogEvent('DeliveryConfig');
+
+  React.useEffect(() => {
+    if (error) {
+      logError({ action: 'LoadingFailed', data: { error } });
+    }
+  }, [error, logError]);
+
+  if (loading || !data) {
+    return <Spinner {...spinnerProps} message="Loading configuration..." />;
+  }
+
+  if (error) {
+    return <ApplicationQueryError hasApplicationData={Boolean(data?.application)} error={error} />;
+  }
+
   return (
     <div className="full-width">
-      <ManagementToggle />
-      <DeliveryConfig />
+      <ManagementToggle isPaused={data.application?.isPaused} />
+      <DeliveryConfig config={data.application?.rawConfig} />
     </div>
   );
 };
 
-const ManagementToggle = () => {
-  const app = useApplicationContextSafe();
-  const appName = app.name;
+interface IManagementToggleProps {
+  isPaused?: boolean;
+}
+
+const ManagementToggle = ({ isPaused }: IManagementToggleProps) => {
+  const appName = useApplicationContextSafe().name;
   const logEvent = useLogEvent('Management');
-  const { data, error, loading, refetch } = useFetchApplicationManagementStatusQuery({ variables: { appName } });
-  const [toggleManagement, { loading: mutationInFlight }] = useToggleManagementMutation();
+  const [toggleManagement, { loading: mutationInFlight }] = useToggleManagementMutation({
+    refetchQueries: [{ query: FetchApplicationManagementDataDocument, variables: { appName } }],
+  });
 
   const onShowToggleManagementModal = React.useCallback((shouldPause: boolean) => {
     logEvent({ action: 'OpenModal', data: { shouldPause } });
@@ -50,26 +76,15 @@ const ManagementToggle = () => {
       {
         application: appName,
         onAction: async () => {
-          await toggleManagement({ variables: { application: appName, isPaused: shouldPause } });
-          refetch();
+          toggleManagement({ variables: { application: appName, isPaused: shouldPause } });
         },
         logCategory: 'Management',
-        onSuccess: refetch,
         withComment: false,
       },
       { maxWidth: MODAL_MAX_WIDTH },
     );
   }, []);
 
-  if (loading) {
-    return <Spinner {...spinnerProps} message="Loading settings..." />;
-  }
-
-  if (error) {
-    return <ApplicationQueryError hasApplicationData={Boolean(data?.application)} error={error} />;
-  }
-
-  const isPaused = Boolean(data?.application?.isPaused);
   const state = managementStatusToContent[isPaused ? 'PAUSED' : 'ENABLED'];
 
   return (

diff --git a/packages/core/src/managed/config/DeliveryConfig.tsx b/packages/core/src/managed/config/DeliveryConfig.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import AceEditor from 'react-ace';
-
 import { ManagedReader } from '..';
 import { useApplicationContextSafe, useData } from '../../presentation';
 import { getIsDebugMode } from '../utils/debugMode';
-import { useLogEvent } from '../utils/logging';
 
 const DeliveryConfigContentRenderer = ({ content }: { content: string }) => {
   return (
@@ -36,26 +34,20 @@ const DeliveryConfigContentRenderer = ({ content }: { content: string }) => {
   );
 };
 
-export const DeliveryConfig = () => {
-  const app = useApplicationContextSafe();
-  const { result, error, status } = useData(() => ManagedReader.getRawDeliveryConfig(app.name), undefined, [app]);
-  const logError = useLogEvent('DeliveryConfig');
-  const isDebug = getIsDebugMode();
-  React.useEffect(() => {
-    if (error) {
-      logError({ action: 'LoadingFailed', data: { error } });
-    }
-  }, [error, logError]);
+interface IDeliveryConfigProps {
+  config: string;
+}
 
+export const DeliveryConfig = ({ config }: IDeliveryConfigProps) => {
+  const isDebug = getIsDebugMode();
   return (
     <div className="DeliveryConfig sp-margin-xl-top">
-      {status === 'REJECTED' && <div className="error-message">Failed to load delivery config</div>}
-      {status === 'RESOLVED' && result && (
+      {config && (
         <>
           <div>
             <h4>Delivery Config</h4>
           </div>
-          <DeliveryConfigContentRenderer content={result} />
+          <DeliveryConfigContentRenderer content={config} />
         </>
       )}
       {isDebug && <ProcessedDeliveryConfig />}

diff --git a/packages/core/src/managed/config/ManagementWarning.tsx b/packages/core/src/managed/config/ManagementWarning.tsx
@@ -1,14 +1,20 @@
 import React from 'react';
 
 import { ResumeManagementModal } from './Configuration';
-import { useFetchApplicationManagementStatusQuery, useToggleManagementMutation } from '../graphql/graphql-sdk';
+import {
+  FetchApplicationManagementStatusDocument,
+  useFetchApplicationManagementStatusQuery,
+  useToggleManagementMutation,
+} from '../graphql/graphql-sdk';
 import { MessageBox, MessagesSection } from '../messages/MessageBox';
 import { showModal } from '../../presentation';
 import { MODAL_MAX_WIDTH } from '../utils/defaults';
 
 export const ManagementWarning = ({ appName }: { appName: string }) => {
-  const { data, refetch } = useFetchApplicationManagementStatusQuery({ variables: { appName } });
-  const [toggleManagement] = useToggleManagementMutation();
+  const { data } = useFetchApplicationManagementStatusQuery({ variables: { appName } });
+  const [toggleManagement] = useToggleManagementMutation({
+    refetchQueries: [{ query: FetchApplicationManagementStatusDocument, variables: { appName } }],
+  });
 
   const onClick = React.useCallback(() => {
     showModal(
@@ -17,15 +23,13 @@ export const ManagementWarning = ({ appName }: { appName: string }) => {
         application: appName,
         onAction: async () => {
           await toggleManagement({ variables: { application: appName, isPaused: false } });
-          refetch();
         },
         logCategory: 'App::Management',
-        onSuccess: refetch,
         withComment: false,
       },
       { maxWidth: MODAL_MAX_WIDTH },
     );
-  }, [appName, refetch]);
+  }, [appName]);
 
   if (data?.application?.isPaused) {
     return (