From e9e0c2c84ee6d149e0dc69446e02aab08d1ee3f5 Mon Sep 17 00:00:00 2001
From: Rani <rhorev@netflix.com>
Date: Thu, 3 Jun 2021 17:44:53 -0700
Subject: [PATCH] feat(md): show delivery config in the configuration tab

---
 .../modules/core/src/managed/ManagedReader.ts |  4 +++
 .../core/src/managed/config/Configuration.tsx | 33 +++++++++++--------
 .../src/managed/config/DeliveryConfig.tsx     | 33 +++++++++++++++++++
 3 files changed, 57 insertions(+), 13 deletions(-)
 create mode 100644 app/scripts/modules/core/src/managed/config/DeliveryConfig.tsx

diff --git a/app/scripts/modules/core/src/managed/ManagedReader.ts b/app/scripts/modules/core/src/managed/ManagedReader.ts
index 5a8a9ff8b47..02ee4a9b8dc 100644
--- a/app/scripts/modules/core/src/managed/ManagedReader.ts
+++ b/app/scripts/modules/core/src/managed/ManagedReader.ts
@@ -86,6 +86,10 @@ export class ManagedReader {
     return REST('/managed/application').path(app).query({ entities: 'resources' }).get().then(this.decorateResources);
   }
 
+  public static getDeliveryConfig(app: string): PromiseLike<Record<string, any>> {
+    return REST('/managed/application', { Accept: 'application/x-yaml' }).path(app).path('config').get();
+  }
+
   public static getEnvironmentsSummary(app: string): PromiseLike<IManagedApplicationSummary> {
     return REST('/managed/application')
       .path(app)
diff --git a/app/scripts/modules/core/src/managed/config/Configuration.tsx b/app/scripts/modules/core/src/managed/config/Configuration.tsx
index 8fd0916e924..16fd62c77f5 100644
--- a/app/scripts/modules/core/src/managed/config/Configuration.tsx
+++ b/app/scripts/modules/core/src/managed/config/Configuration.tsx
@@ -5,6 +5,7 @@ import { Illustration } from '@spinnaker/presentation';
 import { showModal, useApplicationContextSafe } from 'core/presentation';
 import { Spinner } from 'core/widgets';
 
+import { DeliveryConfig } from './DeliveryConfig';
 import { useFetchApplicationManagementStatusQuery, useToggleManagementMutation } from '../graphql/graphql-sdk';
 import spinner from '../overview/loadingIndicator.svg';
 import { ActionModal, IArtifactActionModalProps } from '../utils/ActionModal';
@@ -27,10 +28,18 @@ const managementStatusToContent = {
 };
 
 export const Configuration = () => {
-  const app = useApplicationContextSafe();
-  const logEvent = useLogEvent('Management');
+  return (
+    <div className="full-width">
+      <ManagementToggle />
+      <DeliveryConfig />
+    </div>
+  );
+};
 
+const ManagementToggle = () => {
+  const app = useApplicationContextSafe();
   const appName = app.name;
+  const logEvent = useLogEvent('Management');
   const { data, loading, refetch } = useFetchApplicationManagementStatusQuery({ variables: { appName } });
   const [toggleManagement, { loading: mutationInFlight }] = useToggleManagementMutation();
 
@@ -65,17 +74,15 @@ export const Configuration = () => {
   return (
     <div>
       <div>
-        <div>
-          {state.title} {mutationInFlight && <img src={spinner} height={14} />}
-        </div>
-        <div>
-          <button
-            className={classnames(BTN_CLASSNAMES, state.btnClassName)}
-            onClick={() => onShowToggleManagementModal(!isPaused)}
-          >
-            {state.btnText}
-          </button>
-        </div>
+        {state.title} {mutationInFlight && <img src={spinner} height={14} />}
+      </div>
+      <div>
+        <button
+          className={classnames(BTN_CLASSNAMES, state.btnClassName)}
+          onClick={() => onShowToggleManagementModal(!isPaused)}
+        >
+          {state.btnText}
+        </button>
       </div>
     </div>
   );
diff --git a/app/scripts/modules/core/src/managed/config/DeliveryConfig.tsx b/app/scripts/modules/core/src/managed/config/DeliveryConfig.tsx
new file mode 100644
index 00000000000..1ec86e44dad
--- /dev/null
+++ b/app/scripts/modules/core/src/managed/config/DeliveryConfig.tsx
@@ -0,0 +1,33 @@
+import { dump as dumpYaml } from 'js-yaml';
+import React from 'react';
+
+import { useApplicationContextSafe, useData } from 'core/presentation';
+
+import { ManagedReader } from '..';
+import { useLogEvent } from '../utils/logging';
+
+export const DeliveryConfig = () => {
+  const app = useApplicationContextSafe();
+  const { result, error, status } = useData(() => ManagedReader.getDeliveryConfig(app.name), undefined, [app]);
+  const logError = useLogEvent('DeliveryConfig');
+  React.useEffect(() => {
+    if (error) {
+      logError({ action: 'LoadingFailed', data: { error } });
+    }
+  }, [error, logError]);
+
+  const yaml = React.useMemo(() => (result ? dumpYaml(result) : undefined), [result]);
+  return (
+    <div className="DeliveryConfig sp-margin-xl-top">
+      {status === 'REJECTED' && <div className="error-message">Failed to load delivery config</div>}
+      {status === 'RESOLVED' && yaml && (
+        <>
+          <div>
+            <h4>Delivery Config</h4>
+          </div>
+          <pre>{yaml}</pre>
+        </>
+      )}
+    </div>
+  );
+};