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

@@ -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>
         );
       }
     },

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
       };

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,

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);

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)])} />}