feat(core/managed): Add resource dropdown with links to history + sou…

…rce JSON (#7376)
spinnaker · Sep 4, 2019 · ad4c144 · ad4c144
1 parent 3665d3e
commit ad4c144
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 12 deletions.
diff --git a/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.less b/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.less
@@ -1,4 +1,13 @@
-.ManagedResourceDetailsIndicator > .icon {
+// Selector specificity is the worst
+.band.band-info.ManagedResourceDetailsIndicator {
+  padding: 8px 10px 10px;
+}
+
+.ManagedResourceDetailsIndicator .rainbow-icon {
   text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
   padding-right: 5px;
 }
+
+.ManagedResourceDetailsIndicator .summary-message {
+  cursor: help;
+}
diff --git a/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx b/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { get } from 'lodash';
+import * as ReactGA from 'react-ga';
+import { get, flatMap } from 'lodash';
+import { Dropdown } from 'react-bootstrap';
 
+import { SETTINGS } from 'core/config/settings';
 import { IEntityTags } from 'core/domain';
 import { HoverablePopover } from 'core/presentation';
 
@@ -12,35 +15,75 @@ export interface IManagedResourceDetailsIndicatorProps {
   entityTags: IEntityTags[];
 }
 
+const logClick = (label: string, resourceId: string) =>
+  ReactGA.event({
+    category: 'Managed Resource Menu',
+    action: `${label} clicked`,
+    label: resourceId,
+  });
+
 export const ManagedResourceDetailsIndicator = ({ entityTags }: IManagedResourceDetailsIndicatorProps) => {
-  const isManaged =
+  const managedTag =
     get(entityTags, 'length') &&
-    entityTags.some(({ tags }) => tags.some(({ name }) => name === MANAGED_BY_SPINNAKER_TAG_NAME));
+    flatMap(entityTags, ({ tags }) => tags).find(({ name }) => name === MANAGED_BY_SPINNAKER_TAG_NAME);
 
-  if (!isManaged) {
+  if (!managedTag) {
     return null;
   }
 
+  const {
+    value: { keelResourceId },
+  } = managedTag;
+
   const helpText = (
     <>
       <p>
         <b>Spinnaker is continuously managing this resource.</b>
       </p>
       <p>
         Changes made in the UI will be stomped in favor of the existing declarative configuration.{' '}
-        <a href="https://www.spinnaker.io/reference/managed-delivery" target="_blank">
+        <a
+          target="_blank"
+          onClick={() => logClick('Learn More', keelResourceId)}
+          href="https://www.spinnaker.io/reference/managed-delivery"
+        >
           Learn More
         </a>
       </p>
     </>
   );
 
   return (
-    <HoverablePopover template={helpText} placement="left">
-      <div className="band band-info ManagedResourceDetailsIndicator">
-        <span className="icon">🌈</span>
-        Managed by Spinnaker
-      </div>
-    </HoverablePopover>
+    <div className="vertical middle center band band-info ManagedResourceDetailsIndicator">
+      <HoverablePopover template={helpText} placement="left">
+        <span className="summary-message horizontal sp-margin-s-bottom">
+          <span className="rainbow-icon">🌈</span>
+          Managed by Spinnaker
+        </span>
+      </HoverablePopover>
+      <Dropdown className="dropdown" id="server-group-managed-resource-dropdown" pullRight={true}>
+        <Dropdown.Toggle className="btn btn-sm btn-default dropdown-toggle">Resource Actions</Dropdown.Toggle>
+        <Dropdown.Menu className="dropdown-menu">
+          <li>
+            <a
+              target="_blank"
+              onClick={() => logClick('History', keelResourceId)}
+              href={`${SETTINGS.gateUrl}/history/${keelResourceId}`}
+            >
+              History
+            </a>
+          </li>
+          <li>
+            <a
+              target="_blank"
+              onClick={() => logClick('Raw Source', keelResourceId)}
+              href={`${SETTINGS.gateUrl}/managed/resources/${keelResourceId}`}
+            >
+              Raw Source
+            </a>
+          </li>
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
   );
 };