refactored incomplete-mesh messaging to be stored in CopyUtils.jsx (#78)

web/app/js/components/CallToAction.jsx

@@ -1,4 +1,4 @@
-import { instructions } from './util/Utils.js';
+import { incompleteMeshMessage } from './util/CopyUtils.jsx';
 import React from 'react';
 import { Col, Row } from 'antd';
 import './../../css/cta.css';
@@ -40,7 +40,7 @@ export default class CallToAction extends React.Component {
           </Row>
         </div>
 
-        {instructions()}
+        {incompleteMeshMessage()}
       </div>
     );
   }

web/app/js/components/Deployment.jsx

@@ -2,14 +2,15 @@ import _ from 'lodash';
 import BarChart from './BarChart.jsx';
 import ConduitSpinner from "./ConduitSpinner.jsx";
 import HealthPane from './HealthPane.jsx';
+import { incompleteMeshMessage } from './util/CopyUtils.jsx';
 import Metric from './Metric.jsx';
 import React from 'react';
+import { rowGutter } from './util/Utils.js';
 import StatPane from './StatPane.jsx';
 import TabbedMetricsTable from './TabbedMetricsTable.jsx';
 import UpstreamDownstream from './UpstreamDownstream.jsx';
 import { Col, Row } from 'antd';
 import { emptyMetric, getPodsByDeployment, processRollupMetrics, processTimeseriesMetrics } from './util/MetricUtils.js';
-import { instructions, rowGutter } from './util/Utils.js';
 import './../../css/deployment.css';
 import 'whatwg-fetch';
 
@@ -212,7 +213,7 @@ export default class Deployment extends React.Component {
             <div className="unadded-message">
               <div className="status-badge unadded"><p>UNADDED</p></div>
               <div className="call-to-action">
-                {instructions(this.state.deploy)}
+                {incompleteMeshMessage(this.state.deploy)}
               </div>
             </div>
           ) : null

web/app/js/components/ServiceMesh.jsx

@@ -2,11 +2,12 @@ import _ from 'lodash';
 import CallToAction from './CallToAction.jsx';
 import ConduitSpinner from "./ConduitSpinner.jsx";
 import DeploymentSummary from './DeploymentSummary.jsx';
+import { incompleteMeshMessage } from './util/CopyUtils.jsx';
 import Metric from './Metric.jsx';
 import React from 'react';
+import { rowGutter } from './util/Utils.js';
 import StatusTable from './StatusTable.jsx';
 import { Col, Row, Table } from 'antd';
-import { instructions, rowGutter } from './util/Utils.js';
 import { processRollupMetrics, processTimeseriesMetrics } from './util/MetricUtils.js';
 import './../../css/service-mesh.css';
 import 'whatwg-fetch';
@@ -257,7 +258,7 @@ export default class ServiceMesh extends React.Component {
     if (this.deployCount() === 0) {
       return (
         <div className="incomplete-mesh-message">
-          No deployments detected. {instructions()}
+          No deployments detected. {incompleteMeshMessage()}
         </div>
       );
     } else {
@@ -271,13 +272,13 @@ export default class ServiceMesh extends React.Component {
       case 1:
         return (
           <div className="incomplete-mesh-message">
-            1 deployment has not been added to the service mesh. {instructions()}
+            1 deployment has not been added to the service mesh. {incompleteMeshMessage()}
           </div>
         );
       default:
         return (
           <div className="incomplete-mesh-message">
-            {this.unaddedDeploymentCount()} deployments have not been added to the service mesh. {instructions()}
+            {this.unaddedDeploymentCount()} deployments have not been added to the service mesh. {incompleteMeshMessage()}
           </div>
         );
       }

web/app/js/components/util/CopyUtils.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+/*
+* Instructions for adding deployments to service mesh
+*/
+export const incompleteMeshMessage = name => {
+  if (name) {
+    return (
+      <div className="action">Add {name} to the deployment.yml file<br /><br />
+      Then run <code>conduit inject deployment.yml | kubectl apply -f -</code> to add it to the service mesh</div>
+    );
+  } else {
+    return (
+      <div className="action">Add one or more deployments to the deployment.yml file<br /><br />
+      Then run <code>conduit inject deployment.yml | kubectl apply -f -</code> to add them to the service mesh</div>
+    );
+  }
+};

web/app/js/components/util/Utils.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import React from 'react';
 import * as d3 from 'd3';
 
 /*
@@ -75,20 +74,3 @@ export const toClassName = name => {
   if (!name) return "";
   return _.lowerCase(name).replace(/[^a-zA-Z0-9]/g, "_");
 };
-
-/*
-* Instructions for adding deployments to service mesh
-*/
-export const instructions = name => {
-  if (name) {
-    return (
-      <div className="action">Add {name} to the deployment.yml file<br /><br />
-      Then run <code>conduit inject deployment.yml | kubectl apply -f -</code> to add it to the service mesh</div>
-    );
-  } else {
-    return (
-      <div className="action">Add one or more deployments to the deployment.yml file<br /><br />
-      Then run <code>conduit inject deployment.yml | kubectl apply -f -</code> to add them to the service mesh</div>
-    );
-  }
-};