Various small UI tweaks (#234)

* Various small UI naming tweaks

- align top two tables in the service mesh page
- "All Deployments" -> "Deployments"
- reorder latency p50, p95, p99
- "Current success" -> "Success rate"

* Add margin to incomplete mesh message, reorder latency in TabbedMetricsTable
* Right align numbers in service mesh page

web/app/css/service-mesh.css

@@ -8,6 +8,7 @@
   }
   & .metric {
     float: right;
+    text-align: right;
   }
 }
 
@@ -15,7 +16,8 @@
   width: 131px;
 }
 
-.incomplete-mesh-message, .complete-mesh-message {
+.mesh-completion-message {
+  margin-top: calc(4 * var(--base-width));
   background-color: var(--royalblue);
   color: white;
   padding: var(--base-width);
@@ -25,6 +27,10 @@
   border-radius: var
 }
 
+.service-mesh-table {
+  margin-top: 18px;
+}
+
 /* styles for the StatusTable */
 td .status-dot {
   float: left;

web/app/js/components/DeploymentSummary.jsx

@@ -26,12 +26,12 @@ export default class DeploymentSummary extends React.Component {
             flashLastDatapoint={true} />
 
           <div className="summary-stat">
-            <div className="metric-title">Current requests</div>
+            <div className="metric-title">Request rate</div>
             <div className="metric-value">{metricToFormatter["REQUEST_RATE"](this.props.data.requestRate)}</div>
           </div>
 
           <div className="summary-stat">
-            <div className="metric-title">Current success</div>
+            <div className="metric-title">Success rate</div>
             <div className="metric-value">{metricToFormatter["SUCCESS_RATE"](this.props.data.successRate)}</div>
           </div>
         </div>

web/app/js/components/DeploymentsList.jsx

@@ -214,7 +214,7 @@ export default class DeploymentsList extends React.Component {
         { !this.state.loaded ? <ConduitSpinner />  :
           <div>
             <div className="page-header">
-              <h1>All deployments</h1>
+              <h1>Deployments</h1>
             </div>
             { _.isEmpty(this.state.metrics) ?
               <CallToAction numDeployments={_.size(this.state.metrics)} /> :

web/app/js/components/LatencyOverview.jsx

@@ -160,7 +160,7 @@ export default class MultiLineGraph extends React.Component {
     return (
       <div className="current-latency">
         {
-          _.map(["P99", "P95", "P50"], latency => {
+          _.map(["P50", "P95", "P99"], latency => {
             let ts = this.props.data[latency];
             let lat = metricToFormatter["LATENCY"](_.get(_.last(ts), 'value', []));
             return (

web/app/js/components/ResourceMetricsOverview.jsx

@@ -12,14 +12,14 @@ export default class ResourceMetricsOverview extends React.Component {
         <Row gutter={rowGutter}>
           <Col span={8}>
             <ResourceOverviewMetric
-              name="Current request rate"
+              name="Request rate"
               metric="REQUEST_RATE"
               lastUpdated={this.props.lastUpdated}
               timeseries={_.get(this.props.timeseries, "REQUEST_RATE", [])} />
           </Col>
           <Col span={8}>
             <ResourceOverviewMetric
-              name="Current success rate"
+              name="Success rate"
               metric="SUCCESS_RATE"
               lastUpdated={this.props.lastUpdated}
               timeseries={_.get(this.props.timeseries, "SUCCESS_RATE", [])} />

web/app/js/components/ServiceMesh.jsx

@@ -267,7 +267,7 @@ export default class ServiceMesh extends React.Component {
   renderAddDeploymentsMessage() {
     if (this.deployCount() === 0) {
       return (
-        <div className="incomplete-mesh-message">
+        <div className="mesh-completion-message">
           No deployments detected. {incompleteMeshMessage()}
         </div>
       );
@@ -275,19 +275,19 @@ export default class ServiceMesh extends React.Component {
       switch (this.unaddedDeploymentCount()) {
       case 0:
         return (
-          <div className="complete-mesh-message">
+          <div className="mesh-completion-message">
             All deployments have been added to the service mesh.
           </div>
         );
       case 1:
         return (
-          <div className="incomplete-mesh-message">
+          <div className="mesh-completion-message">
             1 deployment has not been added to the service mesh. {incompleteMeshMessage()}
           </div>
         );
       default:
         return (
-          <div className="incomplete-mesh-message">
+          <div className="mesh-completion-message">
             {this.unaddedDeploymentCount()} deployments have not been added to the service mesh. {incompleteMeshMessage()}
           </div>
         );

web/app/js/components/TabbedMetricsTable.jsx

@@ -99,9 +99,9 @@ const metricToColumns = baseCols => {
     successRate: (resource, pathPrefix) => [baseCols.resourceName(resource, pathPrefix), baseCols.successRate],
     latency: (resource, pathPrefix) => [
       baseCols.resourceName(resource, pathPrefix),
-      baseCols.latencyP99,
+      baseCols.latencyP50,
       baseCols.latencyP95,
-      baseCols.latencyP50
+      baseCols.latencyP99
     ]
   };
 };