From 148d7bc608922b53da3a00de6a889628f34dfe67 Mon Sep 17 00:00:00 2001
From: Risha Mars <mars@buoyant.io>
Date: Thu, 25 Oct 2018 10:04:58 -0700
Subject: [PATCH] Do some small alignment tweaks, fix Firefox rendering (#1809)

This branch:

- adds a "meshed" badge to the namespace overview page instead
of a green checkmark (uses Chip)
- fixes aforementioned meshed indicator not showing up in firefox
- vertically centers the ( ! ) icons in the metrics tables
- vertically centers the dots in the metrics tables
---
 web/app/js/components/MetricsTable.jsx        | 10 ++++---
 web/app/js/components/NamespaceLanding.jsx    | 20 +++++++-------
 web/app/js/components/Navigation.jsx          |  1 +
 web/app/js/components/util/Chip.jsx           | 27 +++++++++++++++++++
 .../components/util/SuccessRateMiniChart.jsx  |  2 +-
 5 files changed, 46 insertions(+), 14 deletions(-)
 create mode 100644 web/app/js/components/util/Chip.jsx

diff --git a/web/app/js/components/MetricsTable.jsx b/web/app/js/components/MetricsTable.jsx
index 857b9c7df..357f656b7 100644
--- a/web/app/js/components/MetricsTable.jsx
+++ b/web/app/js/components/MetricsTable.jsx
@@ -3,6 +3,7 @@ import { friendlyTitle, metricToFormatter } from './util/Utils.js';
 import BaseTable from './BaseTable.jsx';
 import ErrorModal from './ErrorModal.jsx';
 import GrafanaLink from './GrafanaLink.jsx';
+import Grid from '@material-ui/core/Grid';
 import PropTypes from 'prop-types';
 import React from 'react';
 import SuccessRateMiniChart from './util/SuccessRateMiniChart.jsx';
@@ -48,10 +49,11 @@ const columnDefinitions = (resource, showNamespaceColumn, PrefixedLink) => {
           );
         }
         return (
-          <React.Fragment>
-            {nameContents}&nbsp;&nbsp;
-            { _.isEmpty(d.errors) ? null : <ErrorModal errors={d.errors} resourceName={d.name} resourceType={resource} /> }
-          </React.Fragment>
+          <Grid container alignItems="center" spacing={8}>
+            <Grid item>{nameContents}</Grid>
+            { _.isEmpty(d.errors) ? null :
+            <Grid item><ErrorModal errors={d.errors} resourceName={d.name} resourceType={resource} /></Grid>}
+          </Grid>
         );
       }
     },
diff --git a/web/app/js/components/NamespaceLanding.jsx b/web/app/js/components/NamespaceLanding.jsx
index 3b63dbd61..fbeb33471 100644
--- a/web/app/js/components/NamespaceLanding.jsx
+++ b/web/app/js/components/NamespaceLanding.jsx
@@ -3,24 +3,19 @@ import 'whatwg-fetch';
 import { processMultiResourceRollup, processSingleResourceRollup } from './util/MetricUtils.jsx';
 
 import Accordion from './util/Accordion.jsx';
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import Divider from '@material-ui/core/Divider';
 import ErrorBanner from './ErrorBanner.jsx';
 import Grid from '@material-ui/core/Grid';
 import MetricsTable from './MetricsTable.jsx';
 import PropTypes from 'prop-types';
 import React from 'react';
+import SimpleChip from './util/Chip.jsx';
 import Spinner from './util/Spinner.jsx';
-import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import _ from 'lodash';
 import { friendlyTitle } from './util/Utils.js';
 import { withContext } from './util/AppContext.jsx';
 
-const isMeshedTooltip = (
-  <Tooltip title="Namespace is meshed" placement="right-start">
-    <CheckCircleIcon color="primary" />
-  </Tooltip>
-);
 class NamespaceLanding extends React.Component {
   static propTypes = {
     api: PropTypes.shape({
@@ -149,8 +144,9 @@ class NamespaceLanding extends React.Component {
     let noMetrics = _.isEmpty(metrics.pod);
 
     return (
-      <Grid container direction="column">
+      <Grid container direction="column" spacing={16}>
         <Grid item><Typography variant="h4">Namespace: {namespace}</Typography></Grid>
+        <Grid item><Divider /></Grid>
         <Grid item>{ noMetrics ? <div>No resources detected.</div> : null}</Grid>
 
         {this.renderResourceSection("deployment", metrics.deployment)}
@@ -163,9 +159,15 @@ class NamespaceLanding extends React.Component {
 
   renderAccordion() {
     let panelData = _.map(this.state.namespaces, ns => {
+      let hr = (
+        <Grid container justify="space-between" alignItems="center">
+          <Grid item><Typography variant="subtitle1">{ns.name}</Typography></Grid>
+          {!ns.added ? null : <Grid item><SimpleChip /></Grid> }
+        </Grid>
+      );
       return {
         id: ns.name,
-        header: <React.Fragment><Typography variant="subtitle1">{ns.name}</Typography> {!ns.added ? null : isMeshedTooltip}</React.Fragment>,
+        header: hr,
         body: ns.name === this.state.selectedNs || ns.name === this.state.defaultOpenNs.name ?
           this.renderNamespaceSection(ns.name) : null
       };
diff --git a/web/app/js/components/Navigation.jsx b/web/app/js/components/Navigation.jsx
index f29d30198..77882475b 100644
--- a/web/app/js/components/Navigation.jsx
+++ b/web/app/js/components/Navigation.jsx
@@ -49,6 +49,7 @@ const styles = theme => ({
     display: 'flex',
   },
   appBar: {
+    color: 'white',
     zIndex: theme.zIndex.drawer + 1,
     transition: theme.transitions.create(['width', 'margin'], {
       easing: theme.transitions.easing.sharp,
diff --git a/web/app/js/components/util/Chip.jsx b/web/app/js/components/util/Chip.jsx
new file mode 100644
index 000000000..3d837f560
--- /dev/null
+++ b/web/app/js/components/util/Chip.jsx
@@ -0,0 +1,27 @@
+import Chip from '@material-ui/core/Chip';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = () => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+  },
+});
+
+function SimpleChip(props) {
+  const { classes } = props;
+  return (
+    <div className={classes.root}>
+      <Chip className={classes.chip} color="primary" label="meshed" variant="outlined" />
+    </div>
+  );
+}
+
+SimpleChip.propTypes = {
+  classes: PropTypes.shape({}).isRequired
+};
+
+export default withStyles(styles)(SimpleChip);
diff --git a/web/app/js/components/util/SuccessRateMiniChart.jsx b/web/app/js/components/util/SuccessRateMiniChart.jsx
index 257e51058..90f7013a5 100644
--- a/web/app/js/components/util/SuccessRateMiniChart.jsx
+++ b/web/app/js/components/util/SuccessRateMiniChart.jsx
@@ -15,7 +15,7 @@ class SuccessRateMiniChart extends React.Component {
     const { sr, classes } = this.props;
 
     return (
-      <Grid container spacing={8}>
+      <Grid container alignItems="center" spacing={8}>
         <Grid item>{metricToFormatter["SUCCESS_RATE"](sr)}</Grid>
         <Grid item>{_.isNil(sr) ? null :
         <div className={classNames("success-rate-dot", classes[getSuccessRateClassification(sr)])} />}