Don't start a Top in the resource detail page if the resource is unmeshed (#1563)

Don't start a Top in the resource detail page if the resource is unmeshed.
Instead, show a call to action showing how to add linkerd.

web/app/js/components/AddResources.jsx

@@ -0,0 +1,22 @@
+import { friendlyTitle } from './util/Utils.js';
+import { incompleteMeshMessage } from './util/CopyUtils.jsx';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default class AddResources extends React.Component {
+  static propTypes = {
+    resourceName: PropTypes.string.isRequired,
+    resourceType: PropTypes.string.isRequired
+  }
+
+  render() {
+    const {resourceName, resourceType} = this.props;
+
+    return (
+      <div className="mesh-completion-message">
+        {friendlyTitle(resourceType).singular} {resourceName} is not in the mesh.
+        {incompleteMeshMessage()}
+      </div>
+    );
+  }
+}

web/app/js/components/ResourceDetail.jsx

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import AddResources from './AddResources.jsx';
 import ErrorBanner from './ErrorBanner.jsx';
 import MetricsTable from './MetricsTable.jsx';
 import Octopus from './Octopus.jsx';
@@ -59,6 +60,7 @@ export class ResourceDetailBase extends React.Component {
         upstream: {},
         downstream: {}
       },
+      resourceIsMeshed: true,
       pendingRequests: false,
       loaded: false,
       error: null
@@ -130,9 +132,14 @@ export class ResourceDetailBase extends React.Component {
         }, {});
 
         let podMetricsForResource = _.filter(podMetrics, pod => podBelongsToResource[pod.namespace + "/" + pod.name]);
+        let resourceIsMeshed = true;
+        if (!_.isEmpty(this.state.resourceMetrics)) {
+          resourceIsMeshed = _.get(this.state.resourceMetrics, '[0].pods.meshedPods') > 0;
+        }
 
         this.setState({
           resourceMetrics,
+          resourceIsMeshed,
           podMetrics: podMetricsForResource,
           neighborMetrics: {
             upstream: upstreamMetrics,
@@ -178,6 +185,15 @@ export class ResourceDetailBase extends React.Component {
 
     return (
       <div>
+        {
+          this.state.resourceIsMeshed ? null :
+          <div className="page-section">
+            <AddResources
+              resourceName={this.state.resourceName}
+              resourceType={this.state.resourceType} />
+          </div>
+        }
+
         <div className="page-section">
           <Octopus
             resource={this.state.resourceMetrics[0]}
@@ -185,13 +201,16 @@ export class ResourceDetailBase extends React.Component {
             api={this.api} />
         </div>
 
-        <div className="page-section">
-          <TopModule
-            pathPrefix={this.props.pathPrefix}
-            query={topQuery}
-            startTap={true}
-            maxRowsToDisplay={10} />
-        </div>
+        {
+          !this.state.resourceIsMeshed ? null :
+          <div className="page-section">
+            <TopModule
+              pathPrefix={this.props.pathPrefix}
+              query={topQuery}
+              startTap={true}
+              maxRowsToDisplay={10} />
+          </div>
+        }
 
         { _.isEmpty(this.state.neighborMetrics.upstream) ? null : (
           <div className="page-section">