feat(md): show delivery config in the configuration tab

spinnaker · Jun 4, 2021 · 6cedbb2 · 6cedbb2
1 parent dc3c9e0
commit 6cedbb2
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 13 deletions.
diff --git 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<string> {
+    return REST('/managed/application').path(app).path('config').headers({ Accept: 'application/x-yaml' }).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
@@ -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
@@ -0,0 +1,49 @@
+import React from 'react';
+import AceEditor from 'react-ace';
+
+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]);
+
+  return (
+    <div className="DeliveryConfig sp-margin-xl-top">
+      {status === 'REJECTED' && <div className="error-message">Failed to load delivery config</div>}
+      {status === 'RESOLVED' && result && (
+        <>
+          <div>
+            <h4>Delivery Config</h4>
+          </div>
+          <AceEditor
+            mode="yaml"
+            theme="textmate"
+            readOnly
+            fontSize={12}
+            cursorStart={0}
+            showPrintMargin={false}
+            highlightActiveLine={true}
+            value={result}
+            setOptions={{
+              firstLineNumber: 1,
+              tabSize: 2,
+              showLineNumbers: true,
+              showFoldWidgets: true,
+            }}
+            style={{ width: 'auto' }}
+            className="ace-editor"
+          />
+        </>
+      )}
+    </div>
+  );
+};