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 (
-
- {nameContents}
- { _.isEmpty(d.errors) ? null : }
-
+
+ {nameContents}
+ { _.isEmpty(d.errors) ? null :
+ }
+
);
}
},
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 = (
-
-
-
-);
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 (
-
+
Namespace: {namespace}
+
{ noMetrics ? No resources detected.
: null}
{this.renderResourceSection("deployment", metrics.deployment)}
@@ -163,9 +159,15 @@ class NamespaceLanding extends React.Component {
renderAccordion() {
let panelData = _.map(this.state.namespaces, ns => {
+ let hr = (
+
+ {ns.name}
+ {!ns.added ? null : }
+
+ );
return {
id: ns.name,
- header: {ns.name} {!ns.added ? null : isMeshedTooltip},
+ 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 (
+
+
+
+ );
+}
+
+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 (
-
+
{metricToFormatter["SUCCESS_RATE"](sr)}
{_.isNil(sr) ? null :
}